Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | 1x 10x 10x 10x 10x 10x 10x 22x 10x 5x 5x 10x | /**
* Copyright (c) Siemens 2016 - 2026
* SPDX-License-Identifier: MIT
*/
import { Component, computed, input } from '@angular/core';
import { SiIconComponent } from '@siemens/element-ng/icon';
import { SelectOption } from '@siemens/element-ng/select';
import { SiTranslatePipe } from '@siemens/element-translate-ng/translate';
@Component({
selector: 'si-readonly-threshold-option',
imports: [SiTranslatePipe, SiIconComponent],
template: `@let opt = option();
@if (opt && opt.icon) {
<i class="icon-stack">
<si-icon class="icon me-2" [class]="color()" [icon]="opt.icon" />
@if (opt.stackedIcon) {
<si-icon class="icon me-2" [class]="opt.stackedIconColor" [icon]="opt.stackedIcon" />
}
</i>
}
<span class="text-truncate">{{ label() | translate }}</span>`,
styleUrl: './si-readonly-threshold-option.component.scss',
host: { class: 'd-flex align-items-center py-2 my-4 px-4 si-h5' }
})
export class SiReadonlyThresholdOptionComponent {
readonly value = input.required<string>();
readonly options = input.required<SelectOption<unknown>[]>();
protected readonly option = computed(() => {
const options = this.options();
const value = this.value();
if (value && options) {
return options.find(opt => opt.value === value);
}
return undefined;
});
protected readonly color = computed(() => {
const option = this.option();
return !option || option.disabled ? undefined : option.iconColor;
});
protected readonly label = computed(() => this.option()?.label);
}
|