All files / icon si-status-icon.component.ts

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
17x
 
17x
 
17x
 
 
/**
 * Copyright (c) Siemens 2016 - 2025
 * SPDX-License-Identifier: MIT
 */
import { NgClass } from '@angular/common';
import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
import { EntityStatusType } from '@siemens/element-ng/common';
import { SiTranslatePipe } from '@siemens/element-translate-ng/translate';
 
import { SiIconComponent } from './si-icon.component';
import { STATUS_ICON_CONFIG } from './status-icon';
 
@Component({
  selector: 'si-status-icon',
  imports: [NgClass, SiIconComponent, SiTranslatePipe],
  template: `
    @let iconValue = statusIcon();
    @if (iconValue) {
      <si-icon [ngClass]="iconValue.color" [icon]="iconValue.icon" />
      <si-icon [ngClass]="iconValue.stackedColor" [icon]="iconValue.stacked" />
      <span class="visually-hidden">{{ iconValue.ariaLabel | translate }}</span>
    }
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: { class: 'icon-stack' }
})
export class SiStatusIconComponent {
  private readonly statusIcons = inject(STATUS_ICON_CONFIG);
 
  readonly status = input.required<EntityStatusType>();
 
  protected readonly statusIcon = computed(() => this.statusIcons[this.status()]);
}