@siemens/element-ng 47.2.0 → 47.4.0

package/datepicker/si-timepicker.component.d.ts

@@ -0,0 +1,214 @@
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+import { FocusOrigin } from '@angular/cdk/a11y';
+import { ControlValueAccessor } from '@angular/forms';
+import { SiFormItemControl } from '@siemens/element-ng/form';
+import { TranslatableString } from '@siemens/element-translate-ng/translate';
+import * as i0 from "@angular/core";
+export declare class SiTimepickerComponent implements ControlValueAccessor, SiFormItemControl {
+    private static idCounter;
+    /** @internal */
+    invalidHours: boolean;
+    /** @internal */
+    invalidMinutes: boolean;
+    /** @internal */
+    invalidSeconds: boolean;
+    /** @internal */
+    invalidMilliseconds: boolean;
+    /**
+     * @defaultValue
+     * ```
+     * `__si-timepicker-${SiTimepickerComponent.idCounter++}`
+     * ```
+     */
+    readonly id: import("@angular/core").InputSignal<string>;
+    readonly labelledby: string;
+    /**
+     * All input fields will be disabled if set to true.
+     *
+     * @defaultValue false
+     */
+    readonly disabledInput: import("@angular/core").InputSignal<boolean>;
+    /**
+     * @defaultValue 'hh'
+     */
+    readonly hoursLabel: import("@angular/core").InputSignal<TranslatableString>;
+    /**
+     * @defaultValue 'mm'
+     */
+    readonly minutesLabel: import("@angular/core").InputSignal<TranslatableString>;
+    /**
+     * @defaultValue 'ss'
+     */
+    readonly secondsLabel: import("@angular/core").InputSignal<TranslatableString>;
+    /**
+     * @defaultValue 'ms'
+     */
+    readonly millisecondsLabel: import("@angular/core").InputSignal<TranslatableString>;
+    /**
+     * Hide the labels of the input fields.
+     * @defaultValue false
+     */
+    readonly hideLabels: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_DATEPICKER.HOURS:Hours`
+     * ```
+     */
+    readonly hoursAriaLabel: import("@angular/core").InputSignal<TranslatableString>;
+    /**
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_DATEPICKER.MINUTES:Minutes`
+     * ```
+     */
+    readonly minutesAriaLabel: import("@angular/core").InputSignal<TranslatableString>;
+    /**
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_DATEPICKER.SECONDS:Seconds`
+     * ```
+     */
+    readonly secondsAriaLabel: import("@angular/core").InputSignal<TranslatableString>;
+    /**
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_DATEPICKER.MILLISECONDS:Milliseconds`
+     * ```
+     */
+    readonly millisecondsAriaLabel: import("@angular/core").InputSignal<TranslatableString>;
+    /**
+     * @defaultValue 'hh'
+     */
+    readonly hoursPlaceholder: import("@angular/core").InputSignal<string>;
+    /**
+     * @defaultValue 'mm'
+     */
+    readonly minutesPlaceholder: import("@angular/core").InputSignal<string>;
+    /**
+     * @defaultValue 'ss'
+     */
+    readonly secondsPlaceholder: import("@angular/core").InputSignal<string>;
+    /**
+     * @defaultValue 'ms'
+     */
+    readonly millisecondsPlaceholder: import("@angular/core").InputSignal<string>;
+    readonly meridians: import("@angular/core").InputSignal<string[] | undefined>;
+    /**
+     * @defaultValue 'am/pm'
+     */
+    readonly meridiansLabel: import("@angular/core").InputSignal<TranslatableString>;
+    /**
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_DATEPICKER.PERIOD:Period`
+     * ```
+     */
+    readonly meridiansAriaLabel: import("@angular/core").InputSignal<TranslatableString>;
+    /** @defaultValue true */
+    readonly showMinutes: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /** @defaultValue false */
+    readonly showSeconds: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /** @defaultValue false */
+    readonly showMilliseconds: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Show time in 12-hour period including the select to toggle between AM/PM.
+     */
+    readonly showMeridian: import("@angular/core").InputSignal<boolean | undefined>;
+    /**
+     * A minimum time limit. The date part of the date object will be ignored.
+     */
+    readonly min: import("@angular/core").InputSignal<Date | undefined>;
+    /**
+     * A maximum time limit. The date part of the date object will be ignored.
+     */
+    readonly max: import("@angular/core").InputSignal<Date | undefined>;
+    /** @defaultValue false */
+    readonly readonly: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    readonly isValid: import("@angular/core").OutputEmitterRef<boolean>;
+    readonly meridianChange: import("@angular/core").OutputEmitterRef<string>;
+    readonly inputCompleted: import("@angular/core").OutputEmitterRef<void>;
+    private readonly inputParts;
+    /** @internal */
+    readonly errormessageId: string;
+    private onChange;
+    private onTouched;
+    protected hours: string;
+    protected minutes: string;
+    protected seconds: string;
+    protected milliseconds: string;
+    protected readonly periods: import("@angular/core").Signal<string[]>;
+    protected readonly use12HourClock: import("@angular/core").Signal<boolean>;
+    protected readonly disabled: import("@angular/core").Signal<boolean>;
+    protected readonly meridian: import("@angular/core").WritableSignal<"" | "am" | "pm">;
+    private readonly disabledNgControl;
+    private readonly locale;
+    private readonly cdRef;
+    /**
+     * Holds the time as date object that is presented by this control.
+     */
+    private time?;
+    private periodDefaults;
+    constructor();
+    writeValue(obj?: Date | string): void;
+    /** @internal */
+    isPM(): boolean;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    /**
+     * Handle Enter, Arrow up/down and Space key press events.
+     */
+    protected handleKeyPressEvent(event: KeyboardEvent): void;
+    protected toHtmlInputElement: (target?: EventTarget | null) => HTMLInputElement;
+    protected updateHours(value: number | string): void;
+    protected updateMinutes(value: number | string): void;
+    protected updateSeconds(value: number | string): void;
+    protected updateMilliseconds(value: number | string): void;
+    protected toggleMeridian(): void;
+    /**
+     * Takes the current UI values and updates the time object value
+     * accordingly, if they UI input values are valid.
+     */
+    private updateTime;
+    /**
+     * Sets a new time object as model value, updates the user interface
+     * and invokes onChange to let timepicker clients know about the update.
+     * @param time - The new time to be set.
+     */
+    private setTime;
+    /**
+     * Updates the user interface by filling the time components
+     * into the time input fields. Sets empty values if the date
+     * is undefined or invalid.
+     *
+     * @param value - The date object or string from with the time components are taken.
+     */
+    private updateUI;
+    private isValidDate;
+    private parseTime;
+    private parseHours;
+    private parseMinutes;
+    private parseSeconds;
+    private parseMilliseconds;
+    private createDateUpdate;
+    private toNumber;
+    private isInputValid;
+    private isHourInputValid;
+    private isMinuteInputValid;
+    private isSecondInputValid;
+    private isMillisecondInputValid;
+    private isValidLimit;
+    private changeTimeComponent;
+    private changeTime;
+    /**
+     * Focuses the next available input/select field or emit inputCompleted event.
+     */
+    protected focusNext(event: Event): void;
+    protected focusChange(event: FocusOrigin): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiTimepickerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SiTimepickerComponent, "si-timepicker", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "disabledInput": { "alias": "disabled"; "required": false; "isSignal": true; }; "hoursLabel": { "alias": "hoursLabel"; "required": false; "isSignal": true; }; "minutesLabel": { "alias": "minutesLabel"; "required": false; "isSignal": true; }; "secondsLabel": { "alias": "secondsLabel"; "required": false; "isSignal": true; }; "millisecondsLabel": { "alias": "millisecondsLabel"; "required": false; "isSignal": true; }; "hideLabels": { "alias": "hideLabels"; "required": false; "isSignal": true; }; "hoursAriaLabel": { "alias": "hoursAriaLabel"; "required": false; "isSignal": true; }; "minutesAriaLabel": { "alias": "minutesAriaLabel"; "required": false; "isSignal": true; }; "secondsAriaLabel": { "alias": "secondsAriaLabel"; "required": false; "isSignal": true; }; "millisecondsAriaLabel": { "alias": "millisecondsAriaLabel"; "required": false; "isSignal": true; }; "hoursPlaceholder": { "alias": "hoursPlaceholder"; "required": false; "isSignal": true; }; "minutesPlaceholder": { "alias": "minutesPlaceholder"; "required": false; "isSignal": true; }; "secondsPlaceholder": { "alias": "secondsPlaceholder"; "required": false; "isSignal": true; }; "millisecondsPlaceholder": { "alias": "millisecondsPlaceholder"; "required": false; "isSignal": true; }; "meridians": { "alias": "meridians"; "required": false; "isSignal": true; }; "meridiansLabel": { "alias": "meridiansLabel"; "required": false; "isSignal": true; }; "meridiansAriaLabel": { "alias": "meridiansAriaLabel"; "required": false; "isSignal": true; }; "showMinutes": { "alias": "showMinutes"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "showMilliseconds": { "alias": "showMilliseconds"; "required": false; "isSignal": true; }; "showMeridian": { "alias": "showMeridian"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; }, { "isValid": "isValid"; "meridianChange": "meridianChange"; "inputCompleted": "inputCompleted"; }, never, never, true, never>;
+}

package/electron-titlebar/electron.helpers.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+export declare const runsInElectron: () => boolean;

package/electron-titlebar/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+export * from './si-electron-titlebar.module';
+export * from './si-electron-titlebar.component';
+export * from './electron.helpers';

package/electron-titlebar/package.json

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

package/electron-titlebar/si-electron-titlebar.component.d.ts

@@ -0,0 +1,72 @@
+import { MenuItem as MenuItemLegacy } from '@siemens/element-ng/common';
+import { MenuItem } from '@siemens/element-ng/menu';
+import * as i0 from "@angular/core";
+export declare class SiElectrontitlebarComponent {
+    /**
+     * Title of your application
+     */
+    readonly appTitle: import("@angular/core").InputSignal<string>;
+    /**
+     * Defines if the application can go back or not
+     *
+     * @defaultValue false
+     */
+    readonly canGoBack: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Defines if the application can go forward or not
+     *
+     * @defaultValue false
+     */
+    readonly canGoForward: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Defines if the application is focused or not
+     *
+     * @defaultValue true
+     */
+    readonly hasFocus: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * List of menu items for the dropdown
+     * In this dropdown should the zoom functionality as well as the refresh function be provided
+     *
+     * @defaultValue []
+     */
+    readonly menuItems: import("@angular/core").InputSignal<(MenuItemLegacy | MenuItem)[]>;
+    /**
+     * Browsing forward function
+     */
+    readonly forward: import("@angular/core").OutputEmitterRef<void>;
+    /**
+     * Browsing back function
+     */
+    readonly back: import("@angular/core").OutputEmitterRef<void>;
+    /**
+     * Aria Label for Forward Button
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_ELECTRON_TITLEBAR.FORWARD:Forward`
+     * ```
+     */
+    readonly ariaLabelForward: import("@angular/core").InputSignal<import("@siemens/element-translate-ng/translate").TranslatableString>;
+    /**
+     * Aria Label for Back Button
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_ELECTRON_TITLEBAR.BACK:Back`
+     * ```
+     */
+    readonly ariaLabelBack: import("@angular/core").InputSignal<import("@siemens/element-translate-ng/translate").TranslatableString>;
+    /**
+     * Aria Label for Menu Button
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_ELECTRON_TITLEBAR.MENU:Menu`
+     * ```
+     */
+    readonly ariaLabelMenu: import("@angular/core").InputSignal<import("@siemens/element-translate-ng/translate").TranslatableString>;
+    protected readonly icons: Record<"elementLeft4" | "elementRight4" | "elementOptionsVertical", string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiElectrontitlebarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SiElectrontitlebarComponent, "si-electron-titlebar", never, { "appTitle": { "alias": "appTitle"; "required": true; "isSignal": true; }; "canGoBack": { "alias": "canGoBack"; "required": false; "isSignal": true; }; "canGoForward": { "alias": "canGoForward"; "required": false; "isSignal": true; }; "hasFocus": { "alias": "hasFocus"; "required": false; "isSignal": true; }; "menuItems": { "alias": "menuItems"; "required": false; "isSignal": true; }; "ariaLabelForward": { "alias": "ariaLabelForward"; "required": false; "isSignal": true; }; "ariaLabelBack": { "alias": "ariaLabelBack"; "required": false; "isSignal": true; }; "ariaLabelMenu": { "alias": "ariaLabelMenu"; "required": false; "isSignal": true; }; }, { "forward": "forward"; "back": "back"; }, never, never, true, never>;
+}

package/electron-titlebar/si-electron-titlebar.module.d.ts

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

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']]