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