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(' ') ?? ''; }); } |