File
Implements
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
|
subjectList
|
Type : {}
|
Default value : []
|
|
|
|
title
|
Type : string
|
Default value : ''
|
|
|
Methods
|
closePopover
|
closePopover()
|
|
|
|
|
|
handlePillSelect
|
handlePillSelect(event)
|
|
|
|
|
|
PillBorder
|
Default value : PillBorder
|
|
|
|
PillShape
|
Default value : PillShape
|
|
|
|
PillSize
|
Default value : PillSize
|
|
|
|
PillsMultiRow
|
Default value : PillsMultiRow
|
|
|
|
PillsViewType
|
Default value : PillsViewType
|
|
|
|
PillTextElipsis
|
Default value : PillTextElipsis
|
|
|
|
Public
platform
|
Type : Platform
|
|
|
|
ShowMoreViewType
|
Default value : ShowMoreViewType
|
|
|
import {Component, Input, OnInit} from '@angular/core';
import {ModalController, Platform} from '@ionic/angular';
import {PillShape, PillsViewType, PillBorder, ShowMoreViewType, PillsMultiRow, PillSize, PillTextElipsis} from '@project-sunbird/common-consumption';
import {CorReleationDataType, Environment, ImpressionType, PageId, TelemetryGeneratorService} from '@app/services';
import {CorrelationData} from 'sunbird-sdk';
@Component({
selector: 'app-sb-subject-list-popup',
templateUrl: './sb-subject-list-popup.component.html',
styleUrls: ['./sb-subject-list-popup.component.scss']
})
export class SbSubjectListPopupComponent implements OnInit {
@Input() public subjectList = [];
@Input() public title = '';
@Input() public theme;
PillShape = PillShape;
PillsViewType = PillsViewType;
PillBorder = PillBorder;
PillsMultiRow = PillsMultiRow;
PillTextElipsis = PillTextElipsis;
ShowMoreViewType = ShowMoreViewType;
PillSize = PillSize;
constructor(
private modalCtrl: ModalController,
private telemetryGeneratorService: TelemetryGeneratorService,
public platform: Platform
) {
}
handlePillSelect(event) {
if (!event || !event.data || !event.data.length) {
return;
}
this.modalCtrl.dismiss(event);
}
closePopover() {
this.modalCtrl.dismiss();
}
ngOnInit(): void {
const corRelationList: Array<CorrelationData> = [];
corRelationList.push({id: this.subjectList.toString(), type: CorReleationDataType.SUBJECT_LIST});
this.telemetryGeneratorService.generateImpressionTelemetry(
ImpressionType.POP_UP_CATEGORY,
'',
Environment.HOME,
PageId.HOME,
undefined, undefined, undefined, undefined,
corRelationList
);
}
}
<div class="main-content" [ngClass]="{'subject-list-container': platform.is('ios')}">
<div class="py-16 px-24 title-section">
<h4 class="subject-title">{{'SUBJECT_OPTION_TEXT' | translate}}</h4>
<img class="close-icon" src="assets/imgs/ic_action_close.svg" role="button" alt="close" (click)="closePopover()">
</div>
<div class="p-16 subject-list">
<sb-pills-grid [pillShape]="PillShape.DEFAULT"
[pillsMultiRow]="PillsMultiRow.SINGLE"
[pillsViewType]="PillsViewType.NONE"
[pillBorder]="PillBorder.SEMI_ROUND"
[pillSize]="PillSize.SMALL"
[pillTextElipsis]="PillTextElipsis.TWO_LINE"
(select)="handlePillSelect($event)">
<sb-pill-item *ngFor="let pillData of subjectList; let index=index" [name]="pillData?.value?.facet | translateJson | titlecase"
[icon]="{ component: 'sb-pill-item', input: 'icon' } | themeInputsSelector : theme : pillData?.value?.facet"
[theme]="({ component: 'sb-pill-item', input: 'theme' } | themeInputsSelector : theme : pillData?.value?.facet) || (pillData?.value?.facet | randomColorMapPipe: index)"
[value]="pillData?.value"></sb-pill-item>
</sb-pills-grid>
</div>
</div>
@import "src/assets/styles/_variables.scss";
::ng-deep {
.subject-list{
sb-pills-grid{
.sb-pills-grid{
.item{
background-color: var(--app-secondary-background) !important;
height: auto !important;
}
}
}
}
}
.title-section{
border-bottom: 1px solid var(--app-primary-header);
position: sticky;
display: flex;
top: 0;
background-color: white;
.close-icon{
float: right;
width: 1.5rem;
height: 1.5rem;
flex-grow: 2;
margin-top: 1rem;
}
.subject-title{
font-size: 1rem;
flex-grow: 10;
}
}
.subject-list{
height: 87vh;
overflow-y: scroll;
}
.subject-list-container {
margin-top: env(safe-area-inset-top);
}
Legend
Html element with directive