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

100% Statements 9/9
100% Branches 3/3
100% Functions 1/1
100% Lines 9/9

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 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74                                                                                                      1x   6x   6x   6x   6x   6x           6x   6x 6x      
/**
 * Copyright (c) Siemens 2016 - 2025
 * SPDX-License-Identifier: MIT
 */
import { NgClass } from '@angular/common';
import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
import { SiTranslatePipe, TranslatableString } from '@siemens/element-translate-ng/translate';
 
/**
 * @deprecated This component should no longer be used.
 * Use the {@link SiIconComponent} instead.
 * Existing usages can be replaced as follows:
 *
 * ```html
 * <!-- before -->
 * <si-icon icon="element-user" color="text-danger" />
 * <!-- after -->
 * <si-icon icon="element-user" class="icon text-danger" />
 * ```
 *
 * **Important:** Previously, the class `icon` was automatically applied. Unless not needed,
 * it must now be applied manually.
 * The icon class scales up the icon compared to its surrounding text.
 *
 * Stacked icons need to be constructed in HTML directly.
 * If applicable, the `si-status-icon` component should be used instead.
 *
 * ```html
 * <!-- before -->
 * <si-icon
 *   icon="element-circle-filled"
 *   color="status-success"
 *   stackedIcon="element-state-tick"
 *   stackedColor="status-success-contrast"
 *   alt="Success"
 * />
 *
 * <!-- after -->
 * <div class="icon-stack icon" aria-label="Success">
 *   <si-icon icon="element-circle-filled" class="status-success" />
 *   <si-icon icon="element-state-tick" class="status-success-contrast" />
 * </div>
 * ```
 */
@Component({
  selector: 'si-icon-legacy',
  imports: [NgClass, SiTranslatePipe],
  templateUrl: './si-icon-legacy.component.html',
  styles: ':host, span { line-height: 1; }',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class SiIconLegacyComponent {
  /** Icon token, see {@link https://element.siemens.io/icons/element} */
  readonly icon = input<string>();
  /** Color class, see {@link https://element.siemens.io/fundamentals/typography/#color-variants-classes} */
  readonly color = input<string>();
  /** Icon token, see {@link https://element.siemens.io/fundamentals/icons/} */
  readonly stackedIcon = input<string>();
  /** Color class, see {@link https://element.siemens.io/fundamentals/icons/} */
  readonly stackedColor = input<string>();
  /** Alternative name or translation key for icon. Used for A11y. */
  readonly alt = input<TranslatableString>();
  /**
   * Text-size class for icon size, see {@link https://element.siemens.io/fundamentals/typography/#type-styles-classes}
   *
   * @defaultValue 'icon'
   */
  readonly size = input<string>('icon');
 
  protected readonly altText = computed(() => {
    return this.alt() ?? this.icon()?.replace('element-', '').split('-').join(' ') ?? '';
  });
}