File
Implements
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Outputs
|
|
|
|
layoutConfiguration
|
Type : any
|
|
|
|
selectedOptionValue
|
Type : any
|
|
|
Outputs
|
selectedValue
|
Type : EventEmitter
|
|
|
Methods
|
choosedValue
|
choosedValue()
|
|
|
|
|
|
onChange
|
onChange(option)
|
|
|
|
|
|
Public
preSelectedValue
|
Type : string
|
|
|
import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
import * as _ from 'lodash-es';
@Component({
selector: 'app-select-option-group',
templateUrl: './select-option-group.component.html',
styleUrls: ['./select-option-group.component.scss']
})
export class SelectOptionGroupComponent implements OnInit {
@Input() optionData: Array<{}>;
@Input() title: string;
@Input() showHeader: boolean;
@Input() selectedOption: { label: string, value: string, selectedOption: string };
@Input() selectedOptionValue: any;
@Output() selectedValue = new EventEmitter<{ label: string, value: string, selectedOption: string }>();
public preSelectedValue: string;
@Input() layoutConfiguration;
ngOnInit() {
this.choosedValue();
}
/**
* @description Function to emit selected value
* @since release-3.1.0
*/
onChange(option) {
this.selectedValue.emit(option);
}
/**
* @description Function to prepare the selected value
* @since release-3.1.0
*/
choosedValue() {
if (this.selectedOptionValue) {
_.forEach(this.optionData , (value, key) => {
if (key === this.selectedOptionValue.index) {
this.preSelectedValue = value;
}
});
} else {
if (this.selectedOption.label === 'result.consumption.frmelmnts.lbl.publisher') {
const publisher = _.find(this.optionData, ['label', 'result.consumption.frmelmnts.lbl.publisher']);
if (publisher) {
_.forEach(publisher.option, value => {
if (value.value === this.selectedOption.selectedOption) {
this.preSelectedValue = value.name;
}
});
}
} else {
this.preSelectedValue = this.selectedOption.selectedOption;
}
}
}
}
<ng-container *ngIf="!layoutConfiguration">
<!-- DUE TO OLD THEME; WE ARE NOT MIGRATING SUI-SELECT -->
<sui-select class="selection state-selection sbt-dropdown-tick" [(ngModel)]="preSelectedValue">
<div class="state-selection__section" *ngFor="let group of optionData">
<div class="header">{{group.label | translate}}</div>
<sui-select-option class="active" *ngFor="let option of group.option"
[value]="option.name"
tabindex="0" (click)="onChange({label: group.label, value: group.value, selectedOption: option.value })"></sui-select-option>
</div>
</sui-select>
</ng-container>
<ng-container *ngIf="layoutConfiguration">
<div class="sb-field mb-8 w-100">
<label class="fnormal font-weight-bold d-flex">{{title}}</label>
<label class="w-100">
<!-- DUE TO OLD THEME; WE ARE NOT MIGRATING SUI-SELECT -->
<sui-select class="selection sbt-dropdown sbt-dropdown-bold sbt-dropdown--sm sbt-purple--lbg " [(ngModel)]="preSelectedValue">
<div class="sbt-dropdown-section" *ngIf="showHeader">
<div *ngFor="let group of optionData">
<!-- <div class="header">{{group.label}}</div> -->
<sui-select-option class="active" *ngFor="let option of group.option"
[value]="option.name"
tabindex="0" (click)="onChange({label: group.label, value: group.value, selectedOption: option.value })"></sui-select-option>
</div>
</div>
<div class="sbt-dropdown-section" *ngIf="!showHeader">
<div *ngFor="let option of optionData; let i=index">
<sui-select-option class="active" [value]="option"
tabindex="0" (click)="onChange({label: i, value: option , selectedOption: option })"></sui-select-option>
</div>
</div>
</sui-select>
</label>
</div>
</ng-container>
@use "@project-sunbird/sb-styles/assets/mixins/mixins" as *;
.state-selection {
&__section {
padding-bottom: calculateRem(8px);
&:not(:first-child) {
margin-top: calculateRem(8px);
}
.header {
color: var(--primary-color);
padding: 0px calculateRem(8px);
}
.item {
padding: calculateRem(4px) calculateRem(8px);
display: block;
cursor: pointer;
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
&:hover,
&.active {
background-color: var(--primary-100);
width: 100% !important;
padding-right: calculateRem(24px);
}
}
}
}
Legend
Html element with directive