@siemens/element-ng 47.2.0 → 47.3.0

package/README.md

@@ -1,9 +1,21 @@
-# Siemens Element
-
-Siemens Element is a design system for products and digital experiences,
-grounded in the Siemens brand design language. It includes UI components
-(Angular), design tools and resources, human interface guidelines, and a
-vibrant community of contributors.
+<p align="center">
+  <a href="https://element.siemens.io" target="_blank">
+    <img src="./element-logo.svg" alt="Element Website" height="132" width="132">
+  </a>
+</p>
+
+<h1 align="center">Siemens Element</h1>
+
+<p></p>
+<p align="center">
+  Siemens Element is a design system of the smart infrastructure domain
+  that implements the Siemens Design Language in Angular. It includes UI
+  components, design tools and resources, human interface guidelines, and a
+  vibrant community of contributors.
+</p>
+<p></p>
+
+<hr>
 
 ## Contributing
 

package/autocomplete/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+export * from './si-autocomplete-listbox.directive';
+export * from './si-autocomplete-option.directive';
+export * from './si-autocomplete.directive';
+export * from './si-autocomplete.module';

package/autocomplete/package.json

@@ -0,0 +1,3 @@
+{
+  "module": "../fesm2022/siemens-element-ng-autocomplete.mjs"
+}

package/autocomplete/si-autocomplete-listbox.directive.d.ts

@@ -0,0 +1,31 @@
+import { AfterContentInit, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { SiAutocompleteOptionDirective } from './si-autocomplete-option.directive';
+import { SiAutocompleteDirective } from './si-autocomplete.directive';
+import * as i0 from "@angular/core";
+export declare class SiAutocompleteListboxDirective<T> implements OnInit, OnChanges, AfterContentInit {
+    private static idCounter;
+    private options;
+    /**
+     * @defaultValue
+     * ```
+     * `__si-autocomplete-listbox-${SiAutocompleteListboxDirective.idCounter++}`
+     * ```
+     */
+    readonly id: import("@angular/core").InputSignal<string>;
+    readonly autocomplete: import("@angular/core").InputSignal<SiAutocompleteDirective<T>>;
+    /** @defaultValue 0 */
+    readonly siAutocompleteDefaultIndex: import("@angular/core").InputSignal<number>;
+    readonly siAutocompleteOptionSubmitted: import("@angular/core").OutputEmitterRef<T | undefined>;
+    private keyManager?;
+    private changeDetectorRef;
+    private destroyRef;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnInit(): void;
+    ngAfterContentInit(): void;
+    private setActiveItem;
+    /** @internal */
+    onKeydown(event: KeyboardEvent): void;
+    get active(): SiAutocompleteOptionDirective<T> | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiAutocompleteListboxDirective<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SiAutocompleteListboxDirective<any>, "[siAutocompleteListboxFor]", ["siAutocompleteListbox"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "siAutocompleteListboxFor"; "required": true; "isSignal": true; }; "siAutocompleteDefaultIndex": { "alias": "siAutocompleteDefaultIndex"; "required": false; "isSignal": true; }; }, { "siAutocompleteOptionSubmitted": "siAutocompleteOptionSubmitted"; }, ["options"], never, true, never>;
+}

package/autocomplete/si-autocomplete-option.directive.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+import { Highlightable } from '@angular/cdk/a11y';
+import * as i0 from "@angular/core";
+export declare class SiAutocompleteOptionDirective<T = unknown> implements Highlightable {
+    private static idCounter;
+    private element;
+    private parent;
+    /**
+     * @defaultValue
+     * ```
+     * `__si-autocomplete-option-${SiAutocompleteOptionDirective.idCounter++}`
+     * ```
+     */
+    readonly id: import("@angular/core").InputSignal<string>;
+    /** @defaultValue false */
+    readonly disabledInput: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    get disabled(): boolean;
+    /** @defaultValue undefined */
+    readonly value: import("@angular/core").InputSignal<T | undefined>;
+    protected active?: boolean;
+    protected click(): void;
+    /** @internal */
+    setActiveStyles(): void;
+    /** @internal */
+    setInactiveStyles(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiAutocompleteOptionDirective<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SiAutocompleteOptionDirective<any>, "[siAutocompleteOption]", ["siAutocompleteOption"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "disabledInput": { "alias": "disabled"; "required": false; "isSignal": true; }; "value": { "alias": "siAutocompleteOption"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/autocomplete/si-autocomplete.directive.d.ts

@@ -0,0 +1,14 @@
+import { SiAutocompleteListboxDirective } from './si-autocomplete-listbox.directive';
+import { SiAutocompleteOptionDirective } from './si-autocomplete-option.directive';
+import * as i0 from "@angular/core";
+export declare class SiAutocompleteDirective<T> {
+    /** @internal */
+    listbox?: SiAutocompleteListboxDirective<T>;
+    protected get activeDescendant(): string;
+    protected get ariaControls(): string | undefined;
+    protected get expanded(): boolean;
+    protected keydown(event: KeyboardEvent): void;
+    get active(): SiAutocompleteOptionDirective<T> | undefined | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiAutocompleteDirective<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SiAutocompleteDirective<any>, "input[siAutocomplete]", ["siAutocomplete"], {}, {}, never, never, true, never>;
+}

package/autocomplete/si-autocomplete.model.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+import { InjectionToken } from '@angular/core';
+import { SiAutocompleteListboxDirective } from './si-autocomplete-listbox.directive';
+export declare const AUTOCOMPLETE_LISTBOX: InjectionToken<SiAutocompleteListboxDirective<unknown>>;

package/autocomplete/si-autocomplete.module.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./si-autocomplete.directive";
+import * as i2 from "./si-autocomplete-listbox.directive";
+import * as i3 from "./si-autocomplete-option.directive";
+export declare class SiAutocompleteModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiAutocompleteModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SiAutocompleteModule, never, [typeof i1.SiAutocompleteDirective, typeof i2.SiAutocompleteListboxDirective, typeof i3.SiAutocompleteOptionDirective], [typeof i1.SiAutocompleteDirective, typeof i2.SiAutocompleteListboxDirective, typeof i3.SiAutocompleteOptionDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<SiAutocompleteModule>;
+}

package/badge/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+export * from './si-badge.component';

package/badge/package.json

@@ -0,0 +1,3 @@
+{
+  "module": "../fesm2022/siemens-element-ng-badge.mjs"
+}

package/badge/si-badge.component.d.ts

@@ -0,0 +1,17 @@
+import { type StatusType } from '@siemens/element-ng/common';
+import * as i0 from "@angular/core";
+export type BadgeType = StatusType | 'default' | 'inverse' | 'caution' | 'info-emphasis' | 'success-emphasis' | 'warning-emphasis' | 'danger-emphasis' | 'caution-emphasis';
+export declare class SiBadgeComponent {
+    /**
+     * Optional icon
+     * @defaultValue ''
+     */
+    readonly icon: import("@angular/core").InputSignal<string | undefined>;
+    /**
+     * Badge display type.
+     * @defaultValue 'default'
+     */
+    readonly type: import("@angular/core").InputSignal<BadgeType>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiBadgeComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SiBadgeComponent, "si-badge", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}

package/content-action-bar/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+export * from './si-content-action-bar.component';
+export * from './si-content-action-bar.module';
+export * from './si-content-action-bar.model';

package/content-action-bar/package.json

@@ -0,0 +1,3 @@
+{
+  "module": "../fesm2022/siemens-element-ng-content-action-bar.mjs"
+}

package/content-action-bar/si-content-action-bar-toggle.component.d.ts

@@ -0,0 +1,6 @@
+import * as i0 from "@angular/core";
+export declare class SiContentActionBarToggleComponent {
+    readonly icon: import("@angular/core").InputSignal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiContentActionBarToggleComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SiContentActionBarToggleComponent, "[si-content-action-bar-toggle]", never, { "icon": { "alias": "icon"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/content-action-bar/si-content-action-bar.component.d.ts

@@ -0,0 +1,72 @@
+import { AfterViewInit, OnChanges, SimpleChanges } from '@angular/core';
+import { MenuItem as MenuItemLegacy } from '@siemens/element-ng/common';
+import { MenuItemAction, MenuItemCheckbox, MenuItem, MenuItemRadio } from '@siemens/element-ng/menu';
+import { ContentActionBarMainItem, ViewType } from './si-content-action-bar.model';
+import * as i0 from "@angular/core";
+export declare class SiContentActionBarComponent implements OnChanges, AfterViewInit {
+    /**
+     * List of primary actions. Supports up to **4** actions and omits additional ones.
+     */
+    readonly primaryActions: import("@angular/core").InputSignal<readonly (MenuItemLegacy | ContentActionBarMainItem)[] | undefined>;
+    /**
+     * List of secondary actions.
+     */
+    readonly secondaryActions: import("@angular/core").InputSignal<readonly (MenuItemLegacy | MenuItem)[] | undefined>;
+    /**
+     * A param that will be passed to the `action` in the primary/secondary actions.
+     * This allows to re-use the same primary/secondary action arrays across rows
+     * in a table.
+     */
+    readonly actionParam: import("@angular/core").InputSignal<any>;
+    /**
+     * Selection of view type as 'collapsible', 'expanded' or 'mobile'.
+     *
+     * @defaultValue 'expanded'
+     */
+    readonly viewType: import("@angular/core").InputSignal<ViewType>;
+    /**
+     * Toggle icon aria-label, required for a11y
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_CONTENT_ACTION_BAR.TOGGLE:Toggle`
+     * ```
+     */
+    readonly toggleItemLabel: import("@angular/core").InputSignal<import("@siemens/element-translate-ng/translate").TranslatableString>;
+    /**
+     * Option to remove all icons from dropdown menus of the content action bar.
+     *
+     * Some apps provide only few actions with icons, located in the set of primary actions.
+     * The icons are visible in the `collapsible` and `expanded` view type. On reduced space,
+     * primary actions are relocated in the same dropdown menu as the secondary actions. The
+     * dropdown menu can look unbalanced, if a large number of secondary actions without
+     * icons are presented with few actions with icons. This option balances the look and feel
+     * by removing all icons from actions in the dropdown menu.
+     *
+     * @defaultValue false
+     */
+    readonly preventIconsInDropdownMenus: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Disables the whole content-action-bar.
+     *
+     * @defaultValue false
+     */
+    readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    private readonly expandElement;
+    private readonly menuBarElement;
+    protected readonly mobileActions: import("@angular/core").Signal<readonly (MenuItemLegacy | MenuItem)[]>;
+    protected readonly secondaryActionsInternal: import("@angular/core").Signal<readonly (MenuItemLegacy | MenuItem)[] | undefined>;
+    protected readonly icons: Record<"elementCancel" | "elementOptionsVertical", string>;
+    protected expanded: boolean;
+    protected parentElement?: HTMLElement | null;
+    private elementRef;
+    private menuActionService;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngAfterViewInit(): void;
+    protected expand(): void;
+    protected collapse(): void;
+    protected isNewItemStyle(item: MenuItemLegacy | ContentActionBarMainItem): item is ContentActionBarMainItem;
+    protected runAction(item: MenuItemAction | MenuItemRadio | MenuItemCheckbox): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiContentActionBarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SiContentActionBarComponent, "si-content-action-bar", never, { "primaryActions": { "alias": "primaryActions"; "required": false; "isSignal": true; }; "secondaryActions": { "alias": "secondaryActions"; "required": false; "isSignal": true; }; "actionParam": { "alias": "actionParam"; "required": false; "isSignal": true; }; "viewType": { "alias": "viewType"; "required": false; "isSignal": true; }; "toggleItemLabel": { "alias": "toggleItemLabel"; "required": false; "isSignal": true; }; "preventIconsInDropdownMenus": { "alias": "preventIconsInDropdownMenus"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/content-action-bar/si-content-action-bar.model.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+import { MenuItemAction, MenuItemGroup, MenuItemLink, MenuItemRouterLink } from '@siemens/element-ng/menu';
+export type ViewType = 'collapsible' | 'expanded' | 'mobile';
+export type ContentActionBarMainItem = (MenuItemAction | MenuItemLink | MenuItemRouterLink | MenuItemGroup) & {
+    iconOnly?: boolean;
+};

package/content-action-bar/si-content-action-bar.module.d.ts

@@ -0,0 +1,7 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./si-content-action-bar.component";
+export declare class SiContentActionBarModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiContentActionBarModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SiContentActionBarModule, never, [typeof i1.SiContentActionBarComponent], [typeof i1.SiContentActionBarComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<SiContentActionBarModule>;
+}

package/fesm2022/siemens-element-ng-application-header.mjs

@@ -612,7 +612,7 @@ class SiLaunchpadAppComponent {
         this.header.closeLaunchpad();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiLaunchpadAppComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiLaunchpadAppComponent, isStandalone: true, selector: "a[si-launchpad-app]", inputs: { external: { classPropertyName: "external", publicName: "external", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, enableFavoriteToggle: { classPropertyName: "enableFavoriteToggle", publicName: "enableFavoriteToggle", isSignal: true, isRequired: false, transformFunction: null }, favorite: { classPropertyName: "favorite", publicName: "favorite", isSignal: true, isRequired: false, transformFunction: null }, action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: false, transformFunction: null }, iconUrl: { classPropertyName: "iconUrl", publicName: "iconUrl", isSignal: true, isRequired: false, transformFunction: null }, iconClass: { classPropertyName: "iconClass", publicName: "iconClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { favorite: "favoriteChange" }, host: { listeners: { "keydown.space": "favoriteClicked($event)", "click": "click()" }, properties: { "class.active": "active()", "class.action": "action()" }, classAttribute: "focus-inside" }, ngImport: i0, template: "@if (iconUrl()) {\n  <img alt=\"\" width=\"64\" height=\"64\" class=\"app-icon\" [src]=\"iconUrl()\" />\n} @else if (iconClass()) {\n  <si-icon-next class=\"app-icon\" [icon]=\"iconClass()!\" />\n}\n<div class=\"si-title-2 text-truncate mw-100\">\n  <ng-content select=\"[app-name]\" />\n  @if (external()) {\n    <si-icon-next class=\"icon mt-n2\" [icon]=\"icons.elementExport\" />\n  }\n</div>\n<div class=\"si-body-2 text-truncate mw-100\">\n  <ng-content select=\"[app-systemName]\" />\n</div>\n@if (enableFavoriteToggle()) {\n  <si-icon-next\n    class=\"favorite-icon\"\n    [class.is-favorite]=\"favorite()\"\n    [icon]=\"favorite() ? icons.elementFavoritesFilled : icons.elementFavorites\"\n    (click)=\"favoriteClicked($event)\"\n  />\n}\n", styles: [":host{display:flex;align-items:center;flex-flow:column nowrap;position:relative;padding-block:20px;inline-size:152px;max-inline-size:152px;padding-inline:4px;color:var(--element-text-primary);border-radius:var(--element-radius-2)}:host.active{border:1px solid var(--element-ui-0);background-color:var(--element-base-1-hover)}:host.action{color:var(--element-action-primary)}:host:hover{color:var(--element-text-primary);text-decoration:none;background-color:var(--element-base-1-hover)}.app-icon{display:flex;align-items:center;justify-content:center;inline-size:48px;block-size:48px;margin-block-end:8px;border-radius:var(--element-radius-2)}.favorite-icon{font-size:20px;position:absolute;inset-inline-end:22px;inset-block-start:10px;padding:2px;color:var(--element-text-primary)}.is-favorite{color:var(--element-status-caution)}\n"], dependencies: [{ kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiLaunchpadAppComponent, isStandalone: true, selector: "a[si-launchpad-app]", inputs: { external: { classPropertyName: "external", publicName: "external", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, enableFavoriteToggle: { classPropertyName: "enableFavoriteToggle", publicName: "enableFavoriteToggle", isSignal: true, isRequired: false, transformFunction: null }, favorite: { classPropertyName: "favorite", publicName: "favorite", isSignal: true, isRequired: false, transformFunction: null }, action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: false, transformFunction: null }, iconUrl: { classPropertyName: "iconUrl", publicName: "iconUrl", isSignal: true, isRequired: false, transformFunction: null }, iconClass: { classPropertyName: "iconClass", publicName: "iconClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { favorite: "favoriteChange" }, host: { listeners: { "keydown.space": "favoriteClicked($event)", "click": "click()" }, properties: { "class.active": "active()", "class.action": "action()" }, classAttribute: "focus-inside" }, ngImport: i0, template: "@if (iconUrl()) {\n  <img alt=\"\" width=\"64\" height=\"64\" class=\"app-icon\" [src]=\"iconUrl()\" />\n} @else if (iconClass()) {\n  <si-icon-next class=\"app-icon\" [icon]=\"iconClass()!\" />\n}\n<div class=\"si-title-2 text-truncate mw-100\">\n  <ng-content select=\"[app-name]\" />\n  @if (external()) {\n    <si-icon-next class=\"icon mt-n2\" [icon]=\"icons.elementExport\" />\n  }\n</div>\n<div class=\"si-body-2 text-truncate mw-100\">\n  <ng-content select=\"[app-systemName]\" />\n</div>\n@if (enableFavoriteToggle()) {\n  <si-icon-next\n    class=\"favorite-icon\"\n    [class.is-favorite]=\"favorite()\"\n    [icon]=\"favorite() ? icons.elementFavoritesFilled : icons.elementFavorites\"\n    (click)=\"favoriteClicked($event)\"\n  />\n}\n", styles: [":host{display:flex;align-items:center;flex-flow:column nowrap;position:relative;padding-block:20px;inline-size:152px;max-inline-size:152px;padding-inline:4px;color:var(--element-text-primary);border-radius:var(--element-radius-2)}:host.active{border:1px solid var(--element-ui-0);background-color:var(--element-base-1-hover)}:host.action{color:var(--element-action-primary)}:host:hover{color:var(--element-text-primary);text-decoration:none;background-color:var(--element-base-1-hover)}.app-icon{display:flex;align-items:center;justify-content:center;inline-size:48px;block-size:48px;margin-block-end:8px;border-radius:var(--element-radius-2)}.app-icon:is(si-icon-next){background:var(--element-launchpad-app-background);font-size:40px;padding:4px;color:var(--element-launchpad-app-color)}.favorite-icon{font-size:20px;position:absolute;inset-inline-end:22px;inset-block-start:10px;padding:2px;color:var(--element-text-primary)}.is-favorite{color:var(--element-status-caution)}\n"], dependencies: [{ kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiLaunchpadAppComponent, decorators: [{
             type: Component,
@@ -620,7 +620,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
                         class: 'focus-inside',
                         '[class.active]': 'active()',
                         '[class.action]': 'action()'
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (iconUrl()) {\n  <img alt=\"\" width=\"64\" height=\"64\" class=\"app-icon\" [src]=\"iconUrl()\" />\n} @else if (iconClass()) {\n  <si-icon-next class=\"app-icon\" [icon]=\"iconClass()!\" />\n}\n<div class=\"si-title-2 text-truncate mw-100\">\n  <ng-content select=\"[app-name]\" />\n  @if (external()) {\n    <si-icon-next class=\"icon mt-n2\" [icon]=\"icons.elementExport\" />\n  }\n</div>\n<div class=\"si-body-2 text-truncate mw-100\">\n  <ng-content select=\"[app-systemName]\" />\n</div>\n@if (enableFavoriteToggle()) {\n  <si-icon-next\n    class=\"favorite-icon\"\n    [class.is-favorite]=\"favorite()\"\n    [icon]=\"favorite() ? icons.elementFavoritesFilled : icons.elementFavorites\"\n    (click)=\"favoriteClicked($event)\"\n  />\n}\n", styles: [":host{display:flex;align-items:center;flex-flow:column nowrap;position:relative;padding-block:20px;inline-size:152px;max-inline-size:152px;padding-inline:4px;color:var(--element-text-primary);border-radius:var(--element-radius-2)}:host.active{border:1px solid var(--element-ui-0);background-color:var(--element-base-1-hover)}:host.action{color:var(--element-action-primary)}:host:hover{color:var(--element-text-primary);text-decoration:none;background-color:var(--element-base-1-hover)}.app-icon{display:flex;align-items:center;justify-content:center;inline-size:48px;block-size:48px;margin-block-end:8px;border-radius:var(--element-radius-2)}.favorite-icon{font-size:20px;position:absolute;inset-inline-end:22px;inset-block-start:10px;padding:2px;color:var(--element-text-primary)}.is-favorite{color:var(--element-status-caution)}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (iconUrl()) {\n  <img alt=\"\" width=\"64\" height=\"64\" class=\"app-icon\" [src]=\"iconUrl()\" />\n} @else if (iconClass()) {\n  <si-icon-next class=\"app-icon\" [icon]=\"iconClass()!\" />\n}\n<div class=\"si-title-2 text-truncate mw-100\">\n  <ng-content select=\"[app-name]\" />\n  @if (external()) {\n    <si-icon-next class=\"icon mt-n2\" [icon]=\"icons.elementExport\" />\n  }\n</div>\n<div class=\"si-body-2 text-truncate mw-100\">\n  <ng-content select=\"[app-systemName]\" />\n</div>\n@if (enableFavoriteToggle()) {\n  <si-icon-next\n    class=\"favorite-icon\"\n    [class.is-favorite]=\"favorite()\"\n    [icon]=\"favorite() ? icons.elementFavoritesFilled : icons.elementFavorites\"\n    (click)=\"favoriteClicked($event)\"\n  />\n}\n", styles: [":host{display:flex;align-items:center;flex-flow:column nowrap;position:relative;padding-block:20px;inline-size:152px;max-inline-size:152px;padding-inline:4px;color:var(--element-text-primary);border-radius:var(--element-radius-2)}:host.active{border:1px solid var(--element-ui-0);background-color:var(--element-base-1-hover)}:host.action{color:var(--element-action-primary)}:host:hover{color:var(--element-text-primary);text-decoration:none;background-color:var(--element-base-1-hover)}.app-icon{display:flex;align-items:center;justify-content:center;inline-size:48px;block-size:48px;margin-block-end:8px;border-radius:var(--element-radius-2)}.app-icon:is(si-icon-next){background:var(--element-launchpad-app-background);font-size:40px;padding:4px;color:var(--element-launchpad-app-color)}.favorite-icon{font-size:20px;position:absolute;inset-inline-end:22px;inset-block-start:10px;padding:2px;color:var(--element-text-primary)}.is-favorite{color:var(--element-status-caution)}\n"] }]
         }], propDecorators: { favoriteClicked: [{
                 type: HostListener,
                 args: ['keydown.space', ['$event']]