@siemens/element-ng 47.0.0

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

@@ -0,0 +1,747 @@
+import * as i2 from '@angular/cdk/a11y';
+import { CdkTrapFocus, A11yModule } from '@angular/cdk/a11y';
+import { BreakpointObserver } from '@angular/cdk/layout';
+import { NgClass, NgTemplateOutlet, CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, signal, inject, Injector, viewChild, ChangeDetectionStrategy, Component, HostListener, Directive, computed, booleanAttribute, model, output } from '@angular/core';
+import { SI_HEADER_WITH_DROPDOWNS, SiHeaderDropdownTriggerDirective, SI_HEADER_DROPDOWN_OPTIONS } from '@siemens/element-ng/header-dropdown';
+import { addIcons, elementMenu, elementThumbnails, SiIconNextComponent, elementDown2, elementOptionsVertical, elementFavoritesFilled, elementFavorites, elementExport, elementCancel } from '@siemens/element-ng/icon';
+import { BOOTSTRAP_BREAKPOINTS } from '@siemens/element-ng/resize-observer';
+import * as i1 from '@siemens/element-translate-ng/translate';
+import { SiTranslateModule } from '@siemens/element-translate-ng/translate';
+import { Subject, defer, of } from 'rxjs';
+import { map, skip, takeUntil } from 'rxjs/operators';
+import { SiAvatarComponent } from '@siemens/element-ng/avatar';
+import { SiLinkModule } from '@siemens/element-ng/link';
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+/** Root component for the application header. */
+class SiApplicationHeaderComponent {
+    static idCounter = 0;
+    /**
+     * Defines the minimum breakpoint which must be matched to expand the header / switch to desktop mode.
+     *
+     * @defaultValue 'sm'
+     */
+    expandBreakpoint = input('sm');
+    launchpad = input();
+    /**
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_APPLICATION_HEADER.LAUNCHPAD:Launchpad`
+     * ```
+     */
+    launchpadLabel = input($localize `:@@SI_APPLICATION_HEADER.LAUNCHPAD:Launchpad`);
+    /** @internal */
+    closeMobileMenus = new Subject();
+    /** @internal */
+    mobileNavigationExpanded = signal(false);
+    /** @internal */
+    hasNavigation = signal(false);
+    openDropdownCount = signal(0);
+    launchpadOpen = signal(false);
+    id = `__si-application-header-${SiApplicationHeaderComponent.idCounter++}`;
+    toggleNavigation = $localize `:@@SI_APPLICATION_HEADER.TOGGLE_NAVIGATION:Toggle navigation`;
+    injector = inject(Injector);
+    icons = addIcons({ elementThumbnails, elementMenu });
+    navigationToggle = viewChild('navigationToggle');
+    focusTrap = viewChild.required(CdkTrapFocus);
+    breakpointObserver = inject(BreakpointObserver);
+    openDropdown;
+    closeMobileSub = this.closeMobileMenus.subscribe(() => {
+        this.closeMobileNavigation();
+        this.closeLaunchpad();
+    });
+    /** @internal */
+    // defer is required to re-check the current breakpoint as it may change.
+    inlineDropdown = defer(() => {
+        const expandBreakpoint = this.expandBreakpoint();
+        if (expandBreakpoint === 'never') {
+            return of(true);
+        }
+        return this.breakpointObserver
+            .observe(`(min-width: ${BOOTSTRAP_BREAKPOINTS[(expandBreakpoint + 'Minimum')]}px)`)
+            .pipe(map(({ matches }) => !matches));
+    });
+    ngOnDestroy() {
+        this.closeMobileSub.unsubscribe();
+        this.closeMobileMenus.next();
+        this.closeMobileMenus.complete();
+    }
+    /** @internal */
+    onDropdownItemTriggered() {
+        this.closeMobileMenus.next();
+    }
+    /** @internal */
+    dropdownClosed(trigger) {
+        this.openDropdownCount.update(v => v - 1);
+        if (trigger === this.openDropdown) {
+            this.openDropdown = undefined;
+        }
+    }
+    /** @internal */
+    dropdownOpened(trigger) {
+        this.openDropdown ??= trigger;
+        this.openDropdownCount.update(v => v + 1);
+        this.closeLaunchpad();
+    }
+    /** @internal */
+    closeLaunchpad() {
+        if (this.launchpadOpen()) {
+            this.launchpadOpen.set(false);
+            this.dropdownClosed();
+            if (this.hasNavigation()) {
+                // This is also fine in expanded view when the mobile toggle is not visible.
+                // Then the focus call will be ignored.
+                this.navigationToggle()?.nativeElement.focus();
+            }
+        }
+    }
+    /** @internal */
+    openLaunchpad() {
+        if (!this.launchpadOpen()) {
+            this.dropdownOpened();
+            this.closeMobileMenus.next();
+            this.launchpadOpen.set(true);
+            this.inlineDropdown
+                .pipe(skip(1), takeUntil(this.closeMobileMenus))
+                .subscribe(() => this.closeMobileMenus.next());
+        }
+    }
+    toggleMobileNavigationExpanded() {
+        if (this.mobileNavigationExpanded()) {
+            this.closeMobileNavigation();
+        }
+        else {
+            this.openMobileNavigation();
+        }
+    }
+    toggleLaunchpad() {
+        if (this.launchpadOpen()) {
+            this.closeLaunchpad();
+        }
+        else {
+            this.openLaunchpad();
+        }
+    }
+    navigationEscapePressed() {
+        this.closeMobileNavigation();
+        this.navigationToggle()?.nativeElement.focus();
+    }
+    backdropClicked() {
+        this.closeMobileMenus.next();
+    }
+    openMobileNavigation() {
+        if (!this.mobileNavigationExpanded()) {
+            this.closeMobileMenus.next();
+            this.mobileNavigationExpanded.set(true);
+            this.dropdownOpened();
+            this.inlineDropdown
+                .pipe(skip(1), takeUntil(this.closeMobileMenus))
+                .subscribe(() => this.closeMobileMenus.next());
+            this.focusTrap().focusTrap.focusFirstTabbableElementWhenReady();
+        }
+    }
+    closeMobileNavigation() {
+        if (this.mobileNavigationExpanded()) {
+            this.mobileNavigationExpanded.set(false);
+            this.openDropdown?.close();
+            this.dropdownClosed();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiApplicationHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiApplicationHeaderComponent, isStandalone: true, selector: "si-application-header", inputs: { expandBreakpoint: { classPropertyName: "expandBreakpoint", publicName: "expandBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, launchpad: { classPropertyName: "launchpad", publicName: "launchpad", isSignal: true, isRequired: false, transformFunction: null }, launchpadLabel: { classPropertyName: "launchpadLabel", publicName: "launchpadLabel", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: SI_HEADER_WITH_DROPDOWNS, useExisting: SiApplicationHeaderComponent }], viewQueries: [{ propertyName: "navigationToggle", first: true, predicate: ["navigationToggle"], descendants: true, isSignal: true }, { propertyName: "focusTrap", first: true, predicate: CdkTrapFocus, descendants: true, isSignal: true }], ngImport: i0, template: "<header\n  class=\"application-header\"\n  [ngClass]=\"'expand-' + expandBreakpoint()\"\n  [class.show-navigation]=\"mobileNavigationExpanded()\"\n>\n  @if (launchpad()) {\n    <button\n      type=\"button\"\n      class=\"header-toggle focus-inside\"\n      [class.show]=\"launchpadOpen()\"\n      [class.d-none]=\"hasNavigation()\"\n      [ngClass]=\"'d-' + expandBreakpoint() + '-block'\"\n      [attr.aria-expanded]=\"launchpadOpen()\"\n      [attr.aria-label]=\"launchpadLabel() | translate\"\n      [attr.aria-controls]=\"id + '-launchpad'\"\n      (click)=\"toggleLaunchpad()\"\n    >\n      <si-icon-next [icon]=\"icons.elementThumbnails\" />\n    </button>\n  }\n  @if (hasNavigation()) {\n    <button\n      #navigationToggle\n      type=\"button\"\n      class=\"header-toggle focus-inside\"\n      [class.show]=\"mobileNavigationExpanded()\"\n      [attr.aria-expanded]=\"mobileNavigationExpanded()\"\n      [attr.aria-label]=\"toggleNavigation | translate\"\n      [attr.aria-controls]=\"id + '-navigation-wrapper'\"\n      (click)=\"toggleMobileNavigationExpanded()\"\n    >\n      <si-icon-next [icon]=\"icons.elementMenu\" />\n    </button>\n  }\n  <ng-content select=\"si-header-brand, element-header-brand\">\n    <div class=\"header-brand\"></div>\n  </ng-content>\n\n  <div\n    class=\"d-contents\"\n    [id]=\"id + '-navigation-wrapper'\"\n    [cdkTrapFocus]=\"mobileNavigationExpanded()\"\n    (keydown.escape)=\"navigationEscapePressed()\"\n  >\n    <ng-content select=\"si-header-navigation, element-header-navigation\">\n      <div class=\"header-navigation\"></div>\n    </ng-content>\n  </div>\n\n  <ng-content select=\"si-header-actions, element-header-actions\">\n    <div class=\"header-actions\"></div>\n  </ng-content>\n</header>\n\n@if (launchpadOpen() && launchpad()) {\n  <div [id]=\"id + '-launchpad'\">\n    <ng-template [ngTemplateOutlet]=\"launchpad()!\" [ngTemplateOutletInjector]=\"injector\" />\n  </div>\n}\n\n@if (openDropdownCount() || launchpadOpen()) {\n  <div\n    class=\"modal-backdrop\"\n    [ngClass]=\"launchpadOpen() ? 'd-block' : 'd-' + expandBreakpoint() + '-none'\"\n    (click)=\"backdropClicked()\"\n  ></div>\n}\n", styles: [".modal-backdrop{z-index:1032}\n"], dependencies: [{ kind: "ngmodule", type: SiTranslateModule }, { kind: "pipe", type: i1.SiTranslatePipe, name: "translate" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: SiApplicationHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-application-header', imports: [SiTranslateModule, NgClass, A11yModule, NgTemplateOutlet, SiIconNextComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: SI_HEADER_WITH_DROPDOWNS, useExisting: SiApplicationHeaderComponent }], template: "<header\n  class=\"application-header\"\n  [ngClass]=\"'expand-' + expandBreakpoint()\"\n  [class.show-navigation]=\"mobileNavigationExpanded()\"\n>\n  @if (launchpad()) {\n    <button\n      type=\"button\"\n      class=\"header-toggle focus-inside\"\n      [class.show]=\"launchpadOpen()\"\n      [class.d-none]=\"hasNavigation()\"\n      [ngClass]=\"'d-' + expandBreakpoint() + '-block'\"\n      [attr.aria-expanded]=\"launchpadOpen()\"\n      [attr.aria-label]=\"launchpadLabel() | translate\"\n      [attr.aria-controls]=\"id + '-launchpad'\"\n      (click)=\"toggleLaunchpad()\"\n    >\n      <si-icon-next [icon]=\"icons.elementThumbnails\" />\n    </button>\n  }\n  @if (hasNavigation()) {\n    <button\n      #navigationToggle\n      type=\"button\"\n      class=\"header-toggle focus-inside\"\n      [class.show]=\"mobileNavigationExpanded()\"\n      [attr.aria-expanded]=\"mobileNavigationExpanded()\"\n      [attr.aria-label]=\"toggleNavigation | translate\"\n      [attr.aria-controls]=\"id + '-navigation-wrapper'\"\n      (click)=\"toggleMobileNavigationExpanded()\"\n    >\n      <si-icon-next [icon]=\"icons.elementMenu\" />\n    </button>\n  }\n  <ng-content select=\"si-header-brand, element-header-brand\">\n    <div class=\"header-brand\"></div>\n  </ng-content>\n\n  <div\n    class=\"d-contents\"\n    [id]=\"id + '-navigation-wrapper'\"\n    [cdkTrapFocus]=\"mobileNavigationExpanded()\"\n    (keydown.escape)=\"navigationEscapePressed()\"\n  >\n    <ng-content select=\"si-header-navigation, element-header-navigation\">\n      <div class=\"header-navigation\"></div>\n    </ng-content>\n  </div>\n\n  <ng-content select=\"si-header-actions, element-header-actions\">\n    <div class=\"header-actions\"></div>\n  </ng-content>\n</header>\n\n@if (launchpadOpen() && launchpad()) {\n  <div [id]=\"id + '-launchpad'\">\n    <ng-template [ngTemplateOutlet]=\"launchpad()!\" [ngTemplateOutletInjector]=\"injector\" />\n  </div>\n}\n\n@if (openDropdownCount() || launchpadOpen()) {\n  <div\n    class=\"modal-backdrop\"\n    [ngClass]=\"launchpadOpen() ? 'd-block' : 'd-' + expandBreakpoint() + '-none'\"\n    (click)=\"backdropClicked()\"\n  ></div>\n}\n", styles: [".modal-backdrop{z-index:1032}\n"] }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+/** Adds a navigation item to the header. Should be located inside `.header-navigation`. */
+class SiHeaderNavigationItemComponent {
+    /** @internal */
+    dropdownTrigger = inject(SiHeaderDropdownTriggerDirective, {
+        self: true,
+        optional: true
+    });
+    icons = addIcons({ elementDown2 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiHeaderNavigationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiHeaderNavigationItemComponent, isStandalone: true, selector: "button[si-header-navigation-item], a[si-header-navigation-item]", host: { properties: { "class.dropdown-toggle": "!!dropdownTrigger" }, classAttribute: "header-item focus-inside" }, providers: [
+            { provide: SI_HEADER_DROPDOWN_OPTIONS, useValue: { disableRootFocusTrapForInlineMode: true } }
+        ], ngImport: i0, template: `
+    <div class="item-title">
+      <ng-content />
+    </div>
+    @if (dropdownTrigger) {
+      <si-icon-next class="dropdown-caret" [icon]="icons.elementDown2" />
+    }
+  `, isInline: true, 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: SiHeaderNavigationItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: 'button[si-header-navigation-item], a[si-header-navigation-item]',
+                    template: `
+    <div class="item-title">
+      <ng-content />
+    </div>
+    @if (dropdownTrigger) {
+      <si-icon-next class="dropdown-caret" [icon]="icons.elementDown2" />
+    }
+  `,
+                    host: {
+                        class: 'header-item focus-inside',
+                        '[class.dropdown-toggle]': '!!dropdownTrigger'
+                    },
+                    providers: [
+                        { provide: SI_HEADER_DROPDOWN_OPTIONS, useValue: { disableRootFocusTrapForInlineMode: true } }
+                    ],
+                    imports: [SiIconNextComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+/** Container for actions that should be collapsed in mobile mode. */
+class SiHeaderCollapsibleActionsComponent {
+    static idCounter = 0;
+    /**
+     * Accessible label of the toggle button if actions are collapsed.
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_APPLICATION_HEADER.TOGGLE_ACTIONS:Toggle actions`
+     * ```
+     */
+    mobileToggleLabel = input($localize `:@@SI_APPLICATION_HEADER.TOGGLE_ACTIONS:Toggle actions`);
+    /** @internal **/
+    mobileExpanded = signal(false);
+    /** @internal **/
+    badgeCount = signal(0);
+    id = `__si-header-collapsible-actions-${SiHeaderCollapsibleActionsComponent.idCounter++}`;
+    icons = addIcons({ elementOptionsVertical });
+    toggle = viewChild.required('toggle');
+    focusTrap = viewChild.required(CdkTrapFocus);
+    header = inject(SiApplicationHeaderComponent);
+    closeMobileSub = this.header.closeMobileMenus.subscribe(() => this.closeMobile());
+    inlineChangeSubscription;
+    ngOnDestroy() {
+        this.closeMobileSub.unsubscribe();
+        this.inlineChangeSubscription?.unsubscribe();
+    }
+    toggleMobileExpanded() {
+        if (this.mobileExpanded()) {
+            this.closeMobile();
+        }
+        else {
+            this.openMobile();
+        }
+    }
+    escapePressed() {
+        this.closeMobile();
+        this.toggle().nativeElement.focus();
+    }
+    openMobile() {
+        if (!this.mobileExpanded()) {
+            this.header.closeMobileMenus.next();
+            this.header.dropdownOpened();
+            this.mobileExpanded.set(true);
+            this.inlineChangeSubscription = this.header.inlineDropdown
+                .pipe(skip(1), takeUntil(this.header.closeMobileMenus))
+                .subscribe(() => this.header.closeMobileMenus.next());
+            this.focusTrap().focusTrap.focusFirstTabbableElementWhenReady();
+        }
+    }
+    closeMobile() {
+        if (this.mobileExpanded()) {
+            this.header.dropdownClosed();
+            this.mobileExpanded.set(false);
+            this.toggle().nativeElement.focus();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiHeaderCollapsibleActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.6", type: SiHeaderCollapsibleActionsComponent, isStandalone: true, selector: "si-header-collapsible-actions", inputs: { mobileToggleLabel: { classPropertyName: "mobileToggleLabel", publicName: "mobileToggleLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "d-contents" }, providers: [
+            { provide: SI_HEADER_DROPDOWN_OPTIONS, useValue: { disableRootFocusTrapForInlineMode: true } }
+        ], viewQueries: [{ propertyName: "toggle", first: true, predicate: ["toggle"], descendants: true, isSignal: true }, { propertyName: "focusTrap", first: true, predicate: CdkTrapFocus, descendants: true, isSignal: true }], ngImport: i0, template: "<button\n  #toggle\n  type=\"button\"\n  class=\"header-toggle focus-inside\"\n  [class.show]=\"mobileExpanded()\"\n  [attr.aria-expanded]=\"mobileExpanded()\"\n  [attr.aria-label]=\"mobileToggleLabel() | translate\"\n  [attr.aria-controls]=\"id + '-content'\"\n  (click)=\"toggleMobileExpanded()\"\n>\n  <si-icon-next [icon]=\"icons.elementOptionsVertical\" [class.badge-dot]=\"badgeCount()\" />\n</button>\n<div\n  class=\"header-collapsible-actions\"\n  [id]=\"id + '-content'\"\n  [class.show]=\"mobileExpanded()\"\n  [cdkTrapFocus]=\"mobileExpanded()\"\n  (keydown.escape)=\"escapePressed()\"\n>\n  <ng-content />\n</div>\n", styles: [".badge-dot:after{inset-inline-end:4px}\n"], dependencies: [{ kind: "ngmodule", type: SiTranslateModule }, { kind: "pipe", type: i1.SiTranslatePipe, name: "translate" }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { 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: SiHeaderCollapsibleActionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-header-collapsible-actions', imports: [SiTranslateModule, A11yModule, SiIconNextComponent], host: { class: 'd-contents' }, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        { provide: SI_HEADER_DROPDOWN_OPTIONS, useValue: { disableRootFocusTrapForInlineMode: true } }
+                    ], template: "<button\n  #toggle\n  type=\"button\"\n  class=\"header-toggle focus-inside\"\n  [class.show]=\"mobileExpanded()\"\n  [attr.aria-expanded]=\"mobileExpanded()\"\n  [attr.aria-label]=\"mobileToggleLabel() | translate\"\n  [attr.aria-controls]=\"id + '-content'\"\n  (click)=\"toggleMobileExpanded()\"\n>\n  <si-icon-next [icon]=\"icons.elementOptionsVertical\" [class.badge-dot]=\"badgeCount()\" />\n</button>\n<div\n  class=\"header-collapsible-actions\"\n  [id]=\"id + '-content'\"\n  [class.show]=\"mobileExpanded()\"\n  [cdkTrapFocus]=\"mobileExpanded()\"\n  (keydown.escape)=\"escapePressed()\"\n>\n  <ng-content />\n</div>\n", styles: [".badge-dot:after{inset-inline-end:4px}\n"] }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiHeaderActionItemBase {
+    /** @internal */
+    dropdownTrigger = inject(SiHeaderDropdownTriggerDirective, {
+        self: true,
+        optional: true
+    });
+    collapsibleActions = inject(SiHeaderCollapsibleActionsComponent, { optional: true });
+    icons = addIcons({ elementDown2 });
+    header = inject(SiApplicationHeaderComponent);
+    ngOnInit() {
+        if (this.dropdownTrigger) {
+            this.header.closeMobileMenus.subscribe(() => this.dropdownTrigger.close());
+        }
+    }
+    click() {
+        if (!this.dropdownTrigger?.isOpen && !this.collapsibleActions?.mobileExpanded()) {
+            // we must close other immediately as we would close the dropdown else wise immediately after opening.
+            this.header.closeMobileMenus.next();
+        }
+        else if (!this.dropdownTrigger || !this.collapsibleActions?.mobileExpanded()) {
+            // we must use queueMicrotask, otherwise the dropdown gets re-opened immediately.
+            queueMicrotask(() => this.header.closeMobileMenus.next());
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiHeaderActionItemBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: SiHeaderActionItemBase, isStandalone: true, host: { listeners: { "click": "click()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiHeaderActionItemBase, decorators: [{
+            type: Directive,
+            args: [{}]
+        }], propDecorators: { click: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Base for icon based actions.
+ * @internal
+ */
+class SiHeaderActionIconItemBase extends SiHeaderActionItemBase {
+    /**
+     * Adds a badge to the header item.
+     * If type
+     * - =number, the number will be shown and automatically trimmed if \>99
+     * - =true, an empty red dot will be shown
+     */
+    badge = input();
+    badgeDot = computed(() => typeof this.badge() === 'boolean' ? this.badge() : false);
+    badgeValue = computed(() => {
+        const badge = this.badge();
+        return typeof badge === 'number'
+            ? `${badge > 99 ? '+' : ''}${Math.min(99, Math.round(badge))}`
+            : undefined;
+    });
+    ngOnChanges(changes) {
+        if ('badge' in changes) {
+            if (changes.badge.currentValue && !changes.badge.previousValue) {
+                this.collapsibleActions?.badgeCount.update(count => count + 1);
+            }
+            else if (!changes.badge.currentValue && changes.badge.previousValue) {
+                this.collapsibleActions?.badgeCount.update(count => count - 1);
+            }
+        }
+    }
+    get visuallyHideTitle() {
+        return !this.collapsibleActions?.mobileExpanded();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiHeaderActionIconItemBase, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.6", type: SiHeaderActionIconItemBase, isStandalone: true, inputs: { badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiHeaderActionIconItemBase, decorators: [{
+            type: Directive,
+            args: [{}]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+/** Adds an action item to the header. Should be located inside `.header-actions`. */
+class SiHeaderActionItemComponent extends SiHeaderActionIconItemBase {
+    /** The icon to be shown. */
+    icon = input.required();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiHeaderActionItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiHeaderActionItemComponent, isStandalone: true, selector: "button[si-header-action-item], a[si-header-action-item]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.dropdown-toggle": "!!dropdownTrigger" }, classAttribute: "header-item focus-inside" }, usesInheritance: true, ngImport: i0, template: "<si-icon-next class=\"icon\" [class.badge-dot]=\"badgeDot()\" [icon]=\"icon()\" />\n@if (badgeValue()) {\n  <span class=\"badge-text\">{{ badgeValue() }}</span>\n}\n<ng-content select=\"si-avatar\" />\n<div class=\"item-title\" [class.visually-hidden]=\"visuallyHideTitle\">\n  <ng-content />\n</div>\n@if (dropdownTrigger) {\n  <si-icon-next class=\"dropdown-caret\" [icon]=\"icons.elementDown2\" />\n}\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: SiHeaderActionItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'button[si-header-action-item], a[si-header-action-item]', imports: [SiIconNextComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'header-item focus-inside',
+                        '[class.dropdown-toggle]': '!!dropdownTrigger'
+                    }, template: "<si-icon-next class=\"icon\" [class.badge-dot]=\"badgeDot()\" [icon]=\"icon()\" />\n@if (badgeValue()) {\n  <span class=\"badge-text\">{{ badgeValue() }}</span>\n}\n<ng-content select=\"si-avatar\" />\n<div class=\"item-title\" [class.visually-hidden]=\"visuallyHideTitle\">\n  <ng-content />\n</div>\n@if (dropdownTrigger) {\n  <si-icon-next class=\"dropdown-caret\" [icon]=\"icons.elementDown2\" />\n}\n" }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+/** Adds an account item to the header. Should be located inside `.header-actions`. */
+class SiHeaderAccountItemComponent extends SiHeaderActionIconItemBase {
+    /** Name of the account. */
+    name = input.required();
+    /** Initials of the account. If not provided, they will be calculated. */
+    initials = input();
+    /** URL to an image which should be shown instead of the initials. */
+    imageUrl = input();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiHeaderAccountItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiHeaderAccountItemComponent, isStandalone: true, selector: "button[si-header-account-item]", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.dropdown-toggle": "!!dropdownTrigger" }, classAttribute: "header-item focus-inside p-4" }, usesInheritance: true, ngImport: i0, template: "<si-avatar\n  size=\"small\"\n  color=\"0\"\n  [altText]=\"name()\"\n  [initials]=\"initials()\"\n  [imageUrl]=\"imageUrl()\"\n/>\n<div class=\"item-title\" aria-hidden=\"true\" [class.d-none]=\"visuallyHideTitle\">\n  {{ name() }}\n</div>\n@if (badgeValue()) {\n  <div class=\"badge-text\">{{ badgeValue() }}</div>\n}\n@if (dropdownTrigger) {\n  <si-icon-next class=\"dropdown-caret\" [icon]=\"icons.elementDown2\" />\n}\n", dependencies: [{ kind: "component", type: SiAvatarComponent, selector: "si-avatar", inputs: ["size", "imageUrl", "icon", "initials", "color", "altText", "status", "statusAriaLabel"] }, { 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: SiHeaderAccountItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'button[si-header-account-item]', imports: [SiAvatarComponent, SiIconNextComponent], host: {
+                        class: 'header-item focus-inside p-4',
+                        '[class.dropdown-toggle]': '!!dropdownTrigger'
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<si-avatar\n  size=\"small\"\n  color=\"0\"\n  [altText]=\"name()\"\n  [initials]=\"initials()\"\n  [imageUrl]=\"imageUrl()\"\n/>\n<div class=\"item-title\" aria-hidden=\"true\" [class.d-none]=\"visuallyHideTitle\">\n  {{ name() }}\n</div>\n@if (badgeValue()) {\n  <div class=\"badge-text\">{{ badgeValue() }}</div>\n}\n@if (dropdownTrigger) {\n  <si-icon-next class=\"dropdown-caret\" [icon]=\"icons.elementDown2\" />\n}\n" }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiHeaderSelectionItemComponent extends SiHeaderActionItemBase {
+    /**
+     * Sets the open state which will only affect the arrow. Only use this property when not using {@link SiHeaderDropdownTriggerDirective}.
+     *
+     * @defaultValue false
+     */
+    open = input(false);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiHeaderSelectionItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.6", type: SiHeaderSelectionItemComponent, isStandalone: true, selector: "button[si-header-selection-item]", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.show": "open()" }, classAttribute: "header-item header-selection-item focus-inside dropdown-toggle" }, usesInheritance: true, ngImport: i0, template: "<div class=\"item-title\">\n  <ng-content />\n</div>\n<si-icon-next class=\"d-block dropdown-caret\" [icon]=\"icons.elementDown2\" />\n", dependencies: [{ kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiHeaderSelectionItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'button[si-header-selection-item]', imports: [SiIconNextComponent], host: {
+                        class: 'header-item header-selection-item focus-inside dropdown-toggle',
+                        '[class.show]': 'open()'
+                    }, template: "<div class=\"item-title\">\n  <ng-content />\n</div>\n<si-icon-next class=\"d-block dropdown-caret\" [icon]=\"icons.elementDown2\" />\n" }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * The siemens logo.
+ * Should be located inside `.header-brand`.
+ *
+ * @deprecated Use the {@link SiHeaderLogoDirective} instead.
+ * The new component will use the logo provided by the global theme instead
+ * of containing a hard coded siemens logo.
+ * ```html
+ * // previous
+ * <a si-header-siemens-logo routerLink="/" aria-label="Siemens" class="d-none d-md-flex"></a>
+ * // new
+ * <a siHeaderLogo routerLink="/" class="d-none d-md-flex"></a>
+ * ```
+ *
+ */
+class SiHeaderSiemensLogoComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiHeaderSiemensLogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: SiHeaderSiemensLogoComponent, isStandalone: true, selector: "si-header-siemens-logo, [si-header-siemens-logo]", host: { classAttribute: "header-logo px-6 focus-inside" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiHeaderSiemensLogoComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'si-header-siemens-logo, [si-header-siemens-logo]',
+                    template: '',
+                    host: {
+                        class: 'header-logo px-6 focus-inside'
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+/** The siemens logo. Should be located inside `.header-brand`. */
+class SiHeaderLogoDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiHeaderLogoDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: SiHeaderLogoDirective, isStandalone: true, selector: "si-header-logo, [siHeaderLogo]", host: { classAttribute: "header-logo px-6 focus-inside" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiHeaderLogoDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'si-header-logo, [siHeaderLogo]',
+                    host: {
+                        class: 'header-logo px-6 focus-inside'
+                    }
+                }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiHeaderActionsDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiHeaderActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: SiHeaderActionsDirective, isStandalone: true, selector: "si-header-actions", host: { classAttribute: "header-actions" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiHeaderActionsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'si-header-actions',
+                    host: { class: 'header-actions' }
+                }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiHeaderBrandDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiHeaderBrandDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: SiHeaderBrandDirective, isStandalone: true, selector: "si-header-brand", host: { classAttribute: "header-brand" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiHeaderBrandDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'si-header-brand',
+                    host: { class: 'header-brand' }
+                }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiHeaderNavigationComponent {
+    header = inject(SiApplicationHeaderComponent);
+    icons = addIcons({ elementThumbnails });
+    constructor() {
+        this.header.hasNavigation.set(true);
+    }
+    ngOnDestroy() {
+        this.header.hasNavigation.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiHeaderNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiHeaderNavigationComponent, isStandalone: true, selector: "si-header-navigation", host: { attributes: { "role": "navigation" }, classAttribute: "header-navigation" }, ngImport: i0, template: `
+    @if (header.launchpad()) {
+      <button
+        class="header-item focus-inside"
+        type="button"
+        [ngClass]="'d-' + header.expandBreakpoint() + '-none'"
+        (click)="header.openLaunchpad()"
+      >
+        <si-icon-next class="icon pe-5" [icon]="icons.elementThumbnails" />
+        {{ header.launchpadLabel() | translate }}
+      </button>
+    }
+    <ng-content />
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SiTranslateModule }, { kind: "pipe", type: i1.SiTranslatePipe, name: "translate" }, { kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiHeaderNavigationComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'si-header-navigation',
+                    template: `
+    @if (header.launchpad()) {
+      <button
+        class="header-item focus-inside"
+        type="button"
+        [ngClass]="'d-' + header.expandBreakpoint() + '-none'"
+        (click)="header.openLaunchpad()"
+      >
+        <si-icon-next class="icon pe-5" [icon]="icons.elementThumbnails" />
+        {{ header.launchpadLabel() | translate }}
+      </button>
+    }
+    <ng-content />
+  `,
+                    imports: [NgClass, SiTranslateModule, SiIconNextComponent],
+                    host: { class: 'header-navigation', role: 'navigation' }
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiLaunchpadAppComponent {
+    /** @defaultValue false */
+    external = input(false, { transform: booleanAttribute });
+    /** @defaultValue false */
+    active = input(false, { transform: booleanAttribute });
+    /** @defaultValue false */
+    enableFavoriteToggle = input(false, { transform: booleanAttribute });
+    /** @defaultValue false */
+    favorite = model(false);
+    /** @defaultValue false */
+    action = input(false, { transform: booleanAttribute });
+    iconUrl = input();
+    iconClass = input();
+    icons = addIcons({ elementExport, elementFavorites, elementFavoritesFilled });
+    header = inject(SiApplicationHeaderComponent);
+    favoriteClicked(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        this.favorite.update(old => !old);
+    }
+    click() {
+        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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiLaunchpadAppComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'a[si-launchpad-app]', imports: [SiIconNextComponent], host: {
+                        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"] }]
+        }], propDecorators: { favoriteClicked: [{
+                type: HostListener,
+                args: ['keydown.space', ['$event']]
+            }], click: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiLaunchpadFactoryComponent {
+    /**
+     * Text to close the launchpad. Needed for a11y.
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_LAUNCHPAD.CLOSE:Close launchpad`
+     * ```
+     */
+    closeText = input($localize `:@@SI_LAUNCHPAD.CLOSE:Close launchpad`);
+    /**
+     * Title of the launchpad.
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_LAUNCHPAD.TITLE:Launchpad`
+     * ```
+     */
+    titleText = input($localize `:@@SI_LAUNCHPAD.TITLE:Launchpad`);
+    /**
+     * Subtitle of the launchpad.
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_LAUNCHPAD.SUBTITLE:Access all your apps`
+     * ```
+     */
+    subtitleText = input($localize `:@@SI_LAUNCHPAD.SUBTITLE:Access all your apps`);
+    /** All app items shown in the launchpad. */
+    apps = input.required();
+    /**
+     * Allow the user to select favorite apps which will then be displayed at the top.
+     *
+     * @defaultValue false
+     */
+    enableFavorites = input(false, { transform: booleanAttribute });
+    /**
+     * Title of the favorite apps section.
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_LAUNCHPAD.FAVORITE_APPS:Favorite apps`
+     * ```
+     */
+    favoriteAppsText = input($localize `:@@SI_LAUNCHPAD.FAVORITE_APPS:Favorite apps`);
+    /**
+     * Title of the show more apps button.
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_LAUNCHPAD.SHOW_MORE:Show more`
+     * ```
+     */
+    showMoreAppsText = input($localize `:@@SI_LAUNCHPAD.SHOW_MORE:Show more`);
+    /**
+     * Title of the show less apps button.
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_LAUNCHPAD.SHOW_LESS:Show less`
+     * ```
+     */
+    showLessAppsText = input($localize `:@@SI_LAUNCHPAD.SHOW_LESS:Show less`);
+    favoriteChange = output();
+    showAllApps = false;
+    categories = computed(() => {
+        const apps = this.apps();
+        const favorites = this.favorites();
+        const categories = [];
+        if (this.enableFavorites() && this.hasFavorites()) {
+            categories.push({
+                name: this.favoriteAppsText(),
+                apps: favorites
+            });
+        }
+        if (this.isCategories(apps)) {
+            categories.push(...apps);
+        }
+        else {
+            categories.push({ name: '', apps: [...apps] });
+        }
+        return categories;
+    });
+    favorites = computed(() => this.apps()
+        .flatMap(app => ('apps' in app ? app.apps : app))
+        .filter(app => app.favorite));
+    hasFavorites = computed(() => this.favorites().length > 0);
+    icons = addIcons({ elementDown2, elementCancel });
+    header = inject(SiApplicationHeaderComponent);
+    closeLaunchpad() {
+        this.header.closeLaunchpad();
+    }
+    toggleFavorite(app, favorite) {
+        this.favoriteChange.emit({ app, favorite });
+    }
+    escape() {
+        this.closeLaunchpad();
+    }
+    isCategories(items) {
+        return items.some(item => 'apps' in item);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiLaunchpadFactoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiLaunchpadFactoryComponent, isStandalone: true, selector: "si-launchpad-factory", inputs: { closeText: { classPropertyName: "closeText", publicName: "closeText", isSignal: true, isRequired: false, transformFunction: null }, titleText: { classPropertyName: "titleText", publicName: "titleText", isSignal: true, isRequired: false, transformFunction: null }, subtitleText: { classPropertyName: "subtitleText", publicName: "subtitleText", isSignal: true, isRequired: false, transformFunction: null }, apps: { classPropertyName: "apps", publicName: "apps", isSignal: true, isRequired: true, transformFunction: null }, enableFavorites: { classPropertyName: "enableFavorites", publicName: "enableFavorites", isSignal: true, isRequired: false, transformFunction: null }, favoriteAppsText: { classPropertyName: "favoriteAppsText", publicName: "favoriteAppsText", isSignal: true, isRequired: false, transformFunction: null }, showMoreAppsText: { classPropertyName: "showMoreAppsText", publicName: "showMoreAppsText", isSignal: true, isRequired: false, transformFunction: null }, showLessAppsText: { classPropertyName: "showLessAppsText", publicName: "showLessAppsText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { favoriteChange: "favoriteChange" }, ngImport: i0, template: "<div\n  class=\"app-switcher pt-8 g-5 g-sm-9 container-fluid\"\n  cdkTrapFocus\n  cdkTrapFocusAutoCapture\n  (keydown.escape)=\"escape()\"\n>\n  @if (titleText()) {\n    <p class=\"mb-4 si-title-1 lh-1\">{{ titleText() | translate }}</p>\n  }\n  @if (subtitleText()) {\n    <p class=\"si-body-2 text-secondary mb-4\">{{ subtitleText() | translate }}</p>\n  }\n  <div class=\"apps-scroll pb-8 ms-n2 ps-2\">\n    @for (category of categories(); track category; let first = $first) {\n      @if (!enableFavorites() || !hasFavorites() || first || showAllApps) {\n        <div class=\"mt-4\">\n          @if (category.name) {\n            <span class=\"si-title-1\">\n              {{ category.name | translate }}\n            </span>\n          }\n          <div class=\"mt-4 d-flex flex-wrap gap-4\">\n            @for (app of category.apps; track app) {\n              <!-- eslint-disable @angular-eslint/template/no-any -->\n              <!-- temporary until old primary-navbar is removed -->\n              <a\n                si-launchpad-app\n                [enableFavoriteToggle]=\"enableFavorites() && !$any(app)._noFavorite\"\n                [favorite]=\"!!app.favorite\"\n                [href]=\"app.href\"\n                [target]=\"app.target ?? ''\"\n                [active]=\"app.active\"\n                [external]=\"app.external\"\n                [iconUrl]=\"app.iconUrl\"\n                [iconClass]=\"app.iconClass\"\n                (favoriteChange)=\"toggleFavorite(app, $event)\"\n              >\n                <span app-name>{{ app.name | translate }}</span>\n                <span app-systemName>{{ app.systemName | translate }}</span>\n              </a>\n              <!-- eslint-enable @angular-eslint/template/no-any -->\n            }\n          </div>\n        </div>\n      }\n\n      @if (enableFavorites() && first && hasFavorites()) {\n        <button\n          type=\"button\"\n          class=\"btn btn-link dropdown-toggle text-decoration-none my-4 si-title-2\"\n          [class.show]=\"showAllApps\"\n          (click)=\"showAllApps = !showAllApps\"\n        >\n          <b>{{ (showAllApps ? showLessAppsText() : showMoreAppsText()) | translate }}</b>\n          <si-icon-next class=\"dropdown-caret icon\" [icon]=\"icons.elementDown2\" />\n        </button>\n      }\n    }\n  </div>\n  <button\n    type=\"button\"\n    class=\"btn btn-circle btn-sm btn-ghost position-absolute top-0 end-0 mt-6 me-4\"\n    [attr.aria-label]=\"closeText() | translate\"\n    (click)=\"closeLaunchpad()\"\n  >\n    <si-icon-next [icon]=\"icons.elementCancel\" />\n  </button>\n</div>\n", styles: [".app-switcher{position:fixed;inset-block-start:calc(48px + var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px));inset-inline:0;min-block-size:200px;max-block-size:calc(100vh - 48px - var(--element-titlebar-spacing, 0px) - var(--element-system-banner-spacing, 0px));display:flex;flex-direction:column;z-index:1033;background-color:var(--element-base-1);box-shadow:inset 0 0 4px var(--element-box-shadow-color-1),inset 0 4px 4px var(--element-box-shadow-color-2)}.apps-scroll{overflow-y:auto}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: SiLinkModule }, { kind: "ngmodule", type: SiTranslateModule }, { kind: "pipe", type: i1.SiTranslatePipe, name: "translate" }, { kind: "component", type: SiLaunchpadAppComponent, selector: "a[si-launchpad-app]", inputs: ["external", "active", "enableFavoriteToggle", "favorite", "action", "iconUrl", "iconClass"], outputs: ["favoriteChange"] }, { 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: SiLaunchpadFactoryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-launchpad-factory', imports: [
+                        A11yModule,
+                        CommonModule,
+                        SiLinkModule,
+                        SiTranslateModule,
+                        SiLaunchpadAppComponent,
+                        SiIconNextComponent
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"app-switcher pt-8 g-5 g-sm-9 container-fluid\"\n  cdkTrapFocus\n  cdkTrapFocusAutoCapture\n  (keydown.escape)=\"escape()\"\n>\n  @if (titleText()) {\n    <p class=\"mb-4 si-title-1 lh-1\">{{ titleText() | translate }}</p>\n  }\n  @if (subtitleText()) {\n    <p class=\"si-body-2 text-secondary mb-4\">{{ subtitleText() | translate }}</p>\n  }\n  <div class=\"apps-scroll pb-8 ms-n2 ps-2\">\n    @for (category of categories(); track category; let first = $first) {\n      @if (!enableFavorites() || !hasFavorites() || first || showAllApps) {\n        <div class=\"mt-4\">\n          @if (category.name) {\n            <span class=\"si-title-1\">\n              {{ category.name | translate }}\n            </span>\n          }\n          <div class=\"mt-4 d-flex flex-wrap gap-4\">\n            @for (app of category.apps; track app) {\n              <!-- eslint-disable @angular-eslint/template/no-any -->\n              <!-- temporary until old primary-navbar is removed -->\n              <a\n                si-launchpad-app\n                [enableFavoriteToggle]=\"enableFavorites() && !$any(app)._noFavorite\"\n                [favorite]=\"!!app.favorite\"\n                [href]=\"app.href\"\n                [target]=\"app.target ?? ''\"\n                [active]=\"app.active\"\n                [external]=\"app.external\"\n                [iconUrl]=\"app.iconUrl\"\n                [iconClass]=\"app.iconClass\"\n                (favoriteChange)=\"toggleFavorite(app, $event)\"\n              >\n                <span app-name>{{ app.name | translate }}</span>\n                <span app-systemName>{{ app.systemName | translate }}</span>\n              </a>\n              <!-- eslint-enable @angular-eslint/template/no-any -->\n            }\n          </div>\n        </div>\n      }\n\n      @if (enableFavorites() && first && hasFavorites()) {\n        <button\n          type=\"button\"\n          class=\"btn btn-link dropdown-toggle text-decoration-none my-4 si-title-2\"\n          [class.show]=\"showAllApps\"\n          (click)=\"showAllApps = !showAllApps\"\n        >\n          <b>{{ (showAllApps ? showLessAppsText() : showMoreAppsText()) | translate }}</b>\n          <si-icon-next class=\"dropdown-caret icon\" [icon]=\"icons.elementDown2\" />\n        </button>\n      }\n    }\n  </div>\n  <button\n    type=\"button\"\n    class=\"btn btn-circle btn-sm btn-ghost position-absolute top-0 end-0 mt-6 me-4\"\n    [attr.aria-label]=\"closeText() | translate\"\n    (click)=\"closeLaunchpad()\"\n  >\n    <si-icon-next [icon]=\"icons.elementCancel\" />\n  </button>\n</div>\n", styles: [".app-switcher{position:fixed;inset-block-start:calc(48px + var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px));inset-inline:0;min-block-size:200px;max-block-size:calc(100vh - 48px - var(--element-titlebar-spacing, 0px) - var(--element-system-banner-spacing, 0px));display:flex;flex-direction:column;z-index:1033;background-color:var(--element-base-1);box-shadow:inset 0 0 4px var(--element-box-shadow-color-1),inset 0 4px 4px var(--element-box-shadow-color-2)}.apps-scroll{overflow-y:auto}\n"] }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SiApplicationHeaderComponent, SiHeaderAccountItemComponent, SiHeaderActionItemComponent, SiHeaderActionsDirective, SiHeaderBrandDirective, SiHeaderCollapsibleActionsComponent, SiHeaderLogoDirective, SiHeaderNavigationComponent, SiHeaderNavigationItemComponent, SiHeaderSelectionItemComponent, SiHeaderSiemensLogoComponent, SiLaunchpadFactoryComponent };
+//# sourceMappingURL=siemens-element-ng-application-header.mjs.map