@siemens/element-ng 49.16.0 → 51.0.0-rc.10

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

@@ -3,7 +3,7 @@ import { CdkTrapFocus, A11yModule } from '@angular/cdk/a11y';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, signal, inject, Injector, viewChild, effect, untracked, ChangeDetectionStrategy, Component, Directive, ElementRef, computed, afterNextRender, HostListener, booleanAttribute, model, output } from '@angular/core';
+import { input, signal, inject, Injector, viewChild, effect, untracked, Component, Directive, ElementRef, computed, afterNextRender, HostListener, booleanAttribute, model, output } from '@angular/core';
 import { toSignal, toObservable } from '@angular/core/rxjs-interop';
 import { elementMenu, elementThumbnails, elementDown2, elementOptionsVertical, elementFavoritesFilled, elementFavorites, elementExport, elementCancel } from '@siemens/element-icons';
 import { SI_HEADER_WITH_DROPDOWNS, SiHeaderDropdownTriggerDirective, SI_HEADER_DROPDOWN_OPTIONS } from '@siemens/element-ng/header-dropdown';
@@ -29,9 +29,11 @@ class SiApplicationHeaderComponent {
      *
      * @defaultValue 'sm'
      */
-    expandBreakpoint = input('sm', ...(ngDevMode ? [{ debugName: "expandBreakpoint" }] : []));
+    expandBreakpoint = input('sm', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expandBreakpoint" }] : /* istanbul ignore next */ []));
     /** Template reference for the launchpad content rendered inside the header. */
-    launchpad = input(...(ngDevMode ? [undefined, { debugName: "launchpad" }] : []));
+    launchpad = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "launchpad" }] : /* istanbul ignore next */ []));
     /**
      * Accessible label for the launchpad toggle button.
      *
@@ -40,21 +42,28 @@ class SiApplicationHeaderComponent {
      * t(() => $localize`:@@SI_APPLICATION_HEADER.LAUNCHPAD:Launchpad`)
      * ```
      */
-    launchpadLabel = input(t(() => $localize `:@@SI_APPLICATION_HEADER.LAUNCHPAD:Launchpad`), ...(ngDevMode ? [{ debugName: "launchpadLabel" }] : []));
+    launchpadLabel = input(t(() => $localize `:@@SI_APPLICATION_HEADER.LAUNCHPAD:Launchpad`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "launchpadLabel" }] : /* istanbul ignore next */ []));
     /** @internal */
     closeMobileMenus = new Subject();
     /** @internal */
-    mobileNavigationExpanded = signal(false, ...(ngDevMode ? [{ debugName: "mobileNavigationExpanded" }] : []));
+    mobileNavigationExpanded = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mobileNavigationExpanded" }] : /* istanbul ignore next */ []));
     /** @internal */
-    hasNavigation = signal(false, ...(ngDevMode ? [{ debugName: "hasNavigation" }] : []));
-    openDropdownCount = signal(0, ...(ngDevMode ? [{ debugName: "openDropdownCount" }] : []));
-    launchpadOpen = signal(false, ...(ngDevMode ? [{ debugName: "launchpadOpen" }] : []));
+    hasNavigation = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasNavigation" }] : /* istanbul ignore next */ []));
+    openDropdownCount = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "openDropdownCount" }] : /* istanbul ignore next */ []));
+    launchpadOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "launchpadOpen" }] : /* istanbul ignore next */ []));
     id = `__si-application-header-${SiApplicationHeaderComponent.idCounter++}`;
-    toggleNavigation = t(() => $localize `:@@SI_APPLICATION_HEADER.TOGGLE_NAVIGATION:Toggle navigation`);
+    toggleNavigation = t(() => $localize `:@@SI_APPLICATION_HEADER.TOGGLE_NAVIGATION:Show navigation`);
     injector = inject(Injector);
     icons = addIcons({ elementThumbnails, elementMenu });
-    navigationToggle = viewChild('navigationToggle', ...(ngDevMode ? [{ debugName: "navigationToggle" }] : []));
-    focusTrap = viewChild.required(CdkTrapFocus);
+    navigationToggle = viewChild('navigationToggle', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navigationToggle" }] : /* istanbul ignore next */ []));
+    focusTrap = viewChild.required(CdkTrapFocus, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusTrap" }] : /* istanbul ignore next */ []));
     breakpointObserver = inject(BreakpointObserver);
     openDropdown;
     closeMobileSub = this.closeMobileMenus.subscribe(() => {
@@ -156,12 +165,12 @@ class SiApplicationHeaderComponent {
             this.dropdownClosed();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiApplicationHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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 expand-${expandBreakpoint()}`\"\n  [class.show-navigation]=\"mobileNavigationExpanded()\"\n>\n  @if (launchpad()) {\n    <button\n      type=\"button\"\n      aria-haspopup=\"dialog\"\n      [class]=\"`header-toggle focus-inside d-${expandBreakpoint()}-block`\"\n      [class.show]=\"launchpadOpen()\"\n      [class.d-none]=\"hasNavigation()\"\n      [attr.aria-expanded]=\"launchpadOpen()\"\n      [attr.aria-label]=\"launchpadLabel() | translate\"\n      [attr.aria-controls]=\"id + '-launchpad'\"\n      (click)=\"toggleLaunchpad()\"\n    >\n      <si-icon class=\"icon-lg\" [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 class=\"icon-lg\" [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\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [id]=\"id + '-launchpad'\"\n    [attr.aria-label]=\"launchpadLabel() | translate\"\n  >\n    <ng-template [ngTemplateOutlet]=\"launchpad()!\" [ngTemplateOutletInjector]=\"injector\" />\n  </div>\n}\n\n@if (openDropdownCount() || launchpadOpen()) {\n  <div\n    [class]=\"`modal-backdrop ${launchpadOpen() ? 'd-block' : `d-${expandBreakpoint()}-none`}`\"\n    (click)=\"backdropClicked()\"\n  ></div>\n}\n", styles: [".modal-backdrop{z-index:1032}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiApplicationHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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 expand-${expandBreakpoint()}`\"\n  [class.show-navigation]=\"mobileNavigationExpanded()\"\n>\n  @if (launchpad()) {\n    <button\n      type=\"button\"\n      aria-haspopup=\"dialog\"\n      [class]=\"`header-toggle focus-inside d-${expandBreakpoint()}-block`\"\n      [class.show]=\"launchpadOpen()\"\n      [class.d-none]=\"hasNavigation()\"\n      [attr.aria-expanded]=\"launchpadOpen()\"\n      [attr.aria-label]=\"launchpadLabel() | translate\"\n      [attr.aria-controls]=\"id + '-launchpad'\"\n      (click)=\"toggleLaunchpad()\"\n    >\n      <si-icon class=\"icon\" [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 class=\"icon\" [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\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [id]=\"id + '-launchpad'\"\n    [attr.aria-label]=\"launchpadLabel() | translate\"\n  >\n    <ng-template [ngTemplateOutlet]=\"launchpad()!\" [ngTemplateOutletInjector]=\"injector\" />\n  </div>\n}\n\n@if (openDropdownCount() || launchpadOpen()) {\n  <div\n    [class]=\"`modal-backdrop ${launchpadOpen() ? 'd-block' : `d-${expandBreakpoint()}-none`}`\"\n    (click)=\"backdropClicked()\"\n  ></div>\n}\n", styles: [".modal-backdrop{z-index:1032}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiApplicationHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiApplicationHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-application-header', imports: [SiTranslatePipe, A11yModule, NgTemplateOutlet, SiIconComponent], providers: [{ provide: SI_HEADER_WITH_DROPDOWNS, useExisting: SiApplicationHeaderComponent }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<header\n  [class]=\"`application-header expand-${expandBreakpoint()}`\"\n  [class.show-navigation]=\"mobileNavigationExpanded()\"\n>\n  @if (launchpad()) {\n    <button\n      type=\"button\"\n      aria-haspopup=\"dialog\"\n      [class]=\"`header-toggle focus-inside d-${expandBreakpoint()}-block`\"\n      [class.show]=\"launchpadOpen()\"\n      [class.d-none]=\"hasNavigation()\"\n      [attr.aria-expanded]=\"launchpadOpen()\"\n      [attr.aria-label]=\"launchpadLabel() | translate\"\n      [attr.aria-controls]=\"id + '-launchpad'\"\n      (click)=\"toggleLaunchpad()\"\n    >\n      <si-icon class=\"icon-lg\" [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 class=\"icon-lg\" [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\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [id]=\"id + '-launchpad'\"\n    [attr.aria-label]=\"launchpadLabel() | translate\"\n  >\n    <ng-template [ngTemplateOutlet]=\"launchpad()!\" [ngTemplateOutletInjector]=\"injector\" />\n  </div>\n}\n\n@if (openDropdownCount() || launchpadOpen()) {\n  <div\n    [class]=\"`modal-backdrop ${launchpadOpen() ? 'd-block' : `d-${expandBreakpoint()}-none`}`\"\n    (click)=\"backdropClicked()\"\n  ></div>\n}\n", styles: [".modal-backdrop{z-index:1032}\n"] }]
+            args: [{ selector: 'si-application-header', imports: [SiTranslatePipe, A11yModule, NgTemplateOutlet, SiIconComponent], providers: [{ provide: SI_HEADER_WITH_DROPDOWNS, useExisting: SiApplicationHeaderComponent }], template: "<header\n  [class]=\"`application-header expand-${expandBreakpoint()}`\"\n  [class.show-navigation]=\"mobileNavigationExpanded()\"\n>\n  @if (launchpad()) {\n    <button\n      type=\"button\"\n      aria-haspopup=\"dialog\"\n      [class]=\"`header-toggle focus-inside d-${expandBreakpoint()}-block`\"\n      [class.show]=\"launchpadOpen()\"\n      [class.d-none]=\"hasNavigation()\"\n      [attr.aria-expanded]=\"launchpadOpen()\"\n      [attr.aria-label]=\"launchpadLabel() | translate\"\n      [attr.aria-controls]=\"id + '-launchpad'\"\n      (click)=\"toggleLaunchpad()\"\n    >\n      <si-icon class=\"icon\" [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 class=\"icon\" [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\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [id]=\"id + '-launchpad'\"\n    [attr.aria-label]=\"launchpadLabel() | translate\"\n  >\n    <ng-template [ngTemplateOutlet]=\"launchpad()!\" [ngTemplateOutletInjector]=\"injector\" />\n  </div>\n}\n\n@if (openDropdownCount() || launchpadOpen()) {\n  <div\n    [class]=\"`modal-backdrop ${launchpadOpen() ? 'd-block' : `d-${expandBreakpoint()}-none`}`\"\n    (click)=\"backdropClicked()\"\n  ></div>\n}\n", styles: [".modal-backdrop{z-index:1032}\n"] }]
         }], ctorParameters: () => [], propDecorators: { expandBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandBreakpoint", required: false }] }], launchpad: [{ type: i0.Input, args: [{ isSignal: true, alias: "launchpad", required: false }] }], launchpadLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "launchpadLabel", required: false }] }], navigationToggle: [{ type: i0.ViewChild, args: ['navigationToggle', { isSignal: true }] }], focusTrap: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkTrapFocus), { isSignal: true }] }] } });
 
 /**
@@ -170,15 +179,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  */
 class SiAccountDetailsComponent {
     /** The user's full name. */
-    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
+    name = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
     /** The user's company name. */
-    company = input(...(ngDevMode ? [undefined, { debugName: "company" }] : []));
+    company = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "company" }] : /* istanbul ignore next */ []));
     /** The user's email address. */
-    email = input(...(ngDevMode ? [undefined, { debugName: "email" }] : []));
+    email = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "email" }] : /* istanbul ignore next */ []));
     /** The user's role. */
-    userRole = input(...(ngDevMode ? [undefined, { debugName: "userRole" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiAccountDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiAccountDetailsComponent, isStandalone: true, selector: "si-account-details", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, company: { classPropertyName: "company", publicName: "company", isSignal: true, isRequired: false, transformFunction: null }, email: { classPropertyName: "email", publicName: "email", isSignal: true, isRequired: false, transformFunction: null }, userRole: { classPropertyName: "userRole", publicName: "userRole", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    userRole = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "userRole" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiAccountDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiAccountDetailsComponent, isStandalone: true, selector: "si-account-details", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, company: { classPropertyName: "company", publicName: "company", isSignal: true, isRequired: false, transformFunction: null }, email: { classPropertyName: "email", publicName: "email", isSignal: true, isRequired: false, transformFunction: null }, userRole: { classPropertyName: "userRole", publicName: "userRole", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <div class="mx-5">
       <div class="si-h5">{{ name() }}</div>
       @if (email()) {
@@ -195,9 +208,9 @@ class SiAccountDetailsComponent {
         </div>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiAccountDetailsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiAccountDetailsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'si-account-details',
@@ -219,8 +232,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
         </div>
       }
     </div>
-  `,
-                    changeDetection: ChangeDetectionStrategy.OnPush
+  `
                 }]
         }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], company: [{ type: i0.Input, args: [{ isSignal: true, alias: "company", required: false }] }], email: [{ type: i0.Input, args: [{ isSignal: true, alias: "email", required: false }] }], userRole: [{ type: i0.Input, args: [{ isSignal: true, alias: "userRole", required: false }] }] } });
 
@@ -236,8 +248,8 @@ class SiHeaderNavigationItemComponent {
         optional: true
     });
     icons = addIcons({ elementDown2 });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiHeaderNavigationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiHeaderNavigationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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">
@@ -246,9 +258,9 @@ class SiHeaderNavigationItemComponent {
     @if (dropdownTrigger) {
       <si-icon class="dropdown-caret" [icon]="icons.elementDown2" />
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiHeaderNavigationItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiHeaderNavigationItemComponent, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
@@ -265,7 +277,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                     providers: [
                         { provide: SI_HEADER_DROPDOWN_OPTIONS, useValue: { disableRootFocusTrapForInlineMode: true } }
                     ],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         class: 'header-item focus-inside',
                         '[class.dropdown-toggle]': '!!dropdownTrigger'
@@ -285,18 +296,23 @@ class SiHeaderCollapsibleActionsComponent {
      *
      * @defaultValue
      * ```
-     * t(() => $localize`:@@SI_APPLICATION_HEADER.TOGGLE_ACTIONS:Toggle actions`)
+     * t(() => $localize`:@@SI_APPLICATION_HEADER.TOGGLE_ACTIONS:Show actions`)
      * ```
      */
-    mobileToggleLabel = input(t(() => $localize `:@@SI_APPLICATION_HEADER.TOGGLE_ACTIONS:Toggle actions`), ...(ngDevMode ? [{ debugName: "mobileToggleLabel" }] : []));
+    mobileToggleLabel = input(t(() => $localize `:@@SI_APPLICATION_HEADER.TOGGLE_ACTIONS:Show actions`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mobileToggleLabel" }] : /* istanbul ignore next */ []));
     /** @internal **/
-    mobileExpanded = signal(false, ...(ngDevMode ? [{ debugName: "mobileExpanded" }] : []));
+    mobileExpanded = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mobileExpanded" }] : /* istanbul ignore next */ []));
     /** @internal **/
-    badgeCount = signal(0, ...(ngDevMode ? [{ debugName: "badgeCount" }] : []));
+    badgeCount = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "badgeCount" }] : /* istanbul ignore next */ []));
     id = `__si-header-collapsible-actions-${SiHeaderCollapsibleActionsComponent.idCounter++}`;
     icons = addIcons({ elementOptionsVertical });
-    toggle = viewChild.required('toggle');
-    focusTrap = viewChild.required(CdkTrapFocus);
+    toggle = viewChild.required('toggle', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toggle" }] : /* istanbul ignore next */ []));
+    focusTrap = viewChild.required(CdkTrapFocus, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusTrap" }] : /* istanbul ignore next */ []));
     header = inject(SiApplicationHeaderComponent);
     closeMobileSub = this.header.closeMobileMenus.subscribe(() => this.closeMobile());
     ngOnDestroy() {
@@ -329,16 +345,16 @@ class SiHeaderCollapsibleActionsComponent {
             this.toggle().nativeElement.focus();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiHeaderCollapsibleActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.8", 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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiHeaderCollapsibleActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.8", 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 class=\"icon-lg\" [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: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], 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 class=\"icon\" [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: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiHeaderCollapsibleActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiHeaderCollapsibleActionsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-header-collapsible-actions', imports: [SiTranslatePipe, A11yModule, SiIconComponent], providers: [
                         { provide: SI_HEADER_DROPDOWN_OPTIONS, useValue: { disableRootFocusTrapForInlineMode: true } }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'd-contents' }, 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 class=\"icon-lg\" [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"] }]
+                    ], host: { class: 'd-contents' }, 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 class=\"icon\" [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"] }]
         }], propDecorators: { mobileToggleLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileToggleLabel", required: false }] }], toggle: [{ type: i0.ViewChild, args: ['toggle', { isSignal: true }] }], focusTrap: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkTrapFocus), { isSignal: true }] }] } });
 
 /**
@@ -371,10 +387,10 @@ class SiHeaderActionItemBase {
             queueMicrotask(() => this.header.closeMobileMenus.next());
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiHeaderActionItemBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: SiHeaderActionItemBase, isStandalone: true, host: { listeners: { "click": "click()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiHeaderActionItemBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: SiHeaderActionItemBase, isStandalone: true, host: { listeners: { "click": "click()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiHeaderActionItemBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiHeaderActionItemBase, decorators: [{
             type: Directive,
             args: [{
                     host: {
@@ -398,34 +414,35 @@ class SiHeaderActionIconItemBase extends SiHeaderActionItemBase {
      * - =number, the number will be shown and automatically trimmed if \>99
      * - =true, an empty red dot will be shown
      */
-    badge = input(...(ngDevMode ? [undefined, { debugName: "badge" }] : []));
+    badge = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "badge" }] : /* istanbul ignore next */ []));
     tooltipService = inject(SiTooltipService);
     elementRef = inject(ElementRef);
     existingTooltip = inject(SiTooltipDirective, { optional: true, host: true });
-    badgeDot = computed(() => typeof this.badge() === 'boolean' ? this.badge() : false, ...(ngDevMode ? [{ debugName: "badgeDot" }] : []));
+    canShowTooltip = computed(() => this.visuallyHideTitle() &&
+        (!this.existingTooltip ||
+            this.existingTooltip.isDisabled() ||
+            !this.existingTooltip.siTooltip()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canShowTooltip" }] : /* istanbul ignore next */ []));
+    badgeDot = computed(() => typeof this.badge() === 'boolean' ? this.badge() : false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "badgeDot" }] : /* istanbul ignore next */ []));
     badgeValue = computed(() => {
         const badge = this.badge();
         return typeof badge === 'number'
             ? `${badge > 99 ? '+' : ''}${Math.min(99, Math.round(badge))}`
             : undefined;
-    }, ...(ngDevMode ? [{ debugName: "badgeValue" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "badgeValue" }] : /* istanbul ignore next */ []));
     constructor() {
         super();
-        effect(onCleanup => this.setupTooltip(onCleanup));
-    }
-    setupTooltip(onCleanup) {
-        const hasActiveTooltip = !!this.existingTooltip &&
-            !this.existingTooltip.isDisabled() &&
-            !!this.existingTooltip.siTooltip();
-        if (this.visuallyHideTitle() && !hasActiveTooltip) {
-            const tooltipRef = this.tooltipService.createTooltip({
-                element: this.elementRef,
-                placement: 'auto',
-                tooltip: this.itemTitle,
-                tooltipContext: () => undefined
-            });
-            onCleanup(() => tooltipRef.destroy());
-        }
+        this.tooltipService.createTooltip({
+            element: this.elementRef,
+            placement: () => 'auto',
+            canShow: this.canShowTooltip,
+            // Subclass field initializers run after this base constructor. So we cannot directly pass `this.itemTitle`.
+            tooltip: () => this.itemTitle(),
+            tooltipContext: () => undefined
+        });
     }
     ngOnChanges(changes) {
         if (changes.badge) {
@@ -437,11 +454,12 @@ class SiHeaderActionIconItemBase extends SiHeaderActionItemBase {
             }
         }
     }
-    visuallyHideTitle = computed(() => !this.collapsibleActions?.mobileExpanded(), ...(ngDevMode ? [{ debugName: "visuallyHideTitle" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiHeaderActionIconItemBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.8", type: SiHeaderActionIconItemBase, isStandalone: true, inputs: { badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+    visuallyHideTitle = computed(() => !this.collapsibleActions?.mobileExpanded(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visuallyHideTitle" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiHeaderActionIconItemBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", 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: "21.0.8", ngImport: i0, type: SiHeaderActionIconItemBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiHeaderActionIconItemBase, decorators: [{
             type: Directive,
             args: [{}]
         }], ctorParameters: () => [], propDecorators: { badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }] } });
@@ -453,17 +471,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
 /** 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(...(ngDevMode ? [{ debugName: "icon" }] : []));
-    itemTitle = viewChild.required('itemTitle');
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiHeaderActionItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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" }, providers: [SiTooltipService], viewQueries: [{ propertyName: "itemTitle", first: true, predicate: ["itemTitle"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<si-icon class=\"icon-lg\" [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 #itemTitle class=\"item-title\" [class.visually-hidden]=\"visuallyHideTitle()\">\n  <ng-content />\n</div>\n@if (dropdownTrigger) {\n  <si-icon class=\"dropdown-caret\" [icon]=\"icons.elementDown2\" />\n}\n", dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    icon = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    itemTitle = viewChild.required('itemTitle', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemTitle" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiHeaderActionItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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" }, providers: [SiTooltipService], viewQueries: [{ propertyName: "itemTitle", first: true, predicate: ["itemTitle"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<si-icon 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 #itemTitle class=\"item-title\" [class.visually-hidden]=\"visuallyHideTitle()\">\n  <ng-content />\n</div>\n@if (dropdownTrigger) {\n  <si-icon class=\"dropdown-caret\" [icon]=\"icons.elementDown2\" />\n}\n", dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiHeaderActionItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiHeaderActionItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'button[si-header-action-item], a[si-header-action-item]', imports: [SiIconComponent], providers: [SiTooltipService], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'button[si-header-action-item], a[si-header-action-item]', imports: [SiIconComponent], providers: [SiTooltipService], host: {
                         class: 'header-item focus-inside',
                         '[class.dropdown-toggle]': '!!dropdownTrigger'
-                    }, template: "<si-icon class=\"icon-lg\" [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 #itemTitle class=\"item-title\" [class.visually-hidden]=\"visuallyHideTitle()\">\n  <ng-content />\n</div>\n@if (dropdownTrigger) {\n  <si-icon class=\"dropdown-caret\" [icon]=\"icons.elementDown2\" />\n}\n" }]
+                    }, template: "<si-icon 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 #itemTitle class=\"item-title\" [class.visually-hidden]=\"visuallyHideTitle()\">\n  <ng-content />\n</div>\n@if (dropdownTrigger) {\n  <si-icon class=\"dropdown-caret\" [icon]=\"icons.elementDown2\" />\n}\n" }]
         }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], itemTitle: [{ type: i0.ViewChild, args: ['itemTitle', { isSignal: true }] }] } });
 
 /**
@@ -473,21 +493,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
 /** Adds an account item to the header. Should be located inside `.header-actions`. */
 class SiHeaderAccountItemComponent extends SiHeaderActionIconItemBase {
     /** Name of the account. */
-    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
+    name = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
     /** Initials of the account. If not provided, they will be calculated. */
-    initials = input(...(ngDevMode ? [undefined, { debugName: "initials" }] : []));
+    initials = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "initials" }] : /* istanbul ignore next */ []));
     /** URL to an image which should be shown instead of the initials. */
-    imageUrl = input(...(ngDevMode ? [undefined, { debugName: "imageUrl" }] : []));
+    imageUrl = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "imageUrl" }] : /* istanbul ignore next */ []));
     itemTitle = this.name;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiHeaderAccountItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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 px-4 py-0" }, providers: [SiTooltipService], 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 class=\"dropdown-caret\" [icon]=\"icons.elementDown2\" />\n}\n", styles: ["si-avatar.small{--avatar-size: calc(1.5rem + 8px) }\n"], dependencies: [{ kind: "component", type: SiAvatarComponent, selector: "si-avatar", inputs: ["size", "imageUrl", "icon", "initials", "color", "altText", "status", "statusAriaLabel"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiHeaderAccountItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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 px-4 py-0" }, providers: [SiTooltipService], 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 class=\"dropdown-caret\" [icon]=\"icons.elementDown2\" />\n}\n", styles: ["si-avatar.small{--avatar-size: calc(1.5rem + 2 * var(--si-sys-sizing-spacing-y-20))}\n"], dependencies: [{ kind: "component", type: SiAvatarComponent, selector: "si-avatar", inputs: ["size", "imageUrl", "icon", "initials", "color", "altText", "status", "statusAriaLabel"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiHeaderAccountItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiHeaderAccountItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'button[si-header-account-item]', imports: [SiAvatarComponent, SiIconComponent], providers: [SiTooltipService], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'button[si-header-account-item]', imports: [SiAvatarComponent, SiIconComponent], providers: [SiTooltipService], host: {
                         class: 'header-item focus-inside px-4 py-0',
                         '[class.dropdown-toggle]': '!!dropdownTrigger'
-                    }, 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 class=\"dropdown-caret\" [icon]=\"icons.elementDown2\" />\n}\n", styles: ["si-avatar.small{--avatar-size: calc(1.5rem + 8px) }\n"] }]
+                    }, 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 class=\"dropdown-caret\" [icon]=\"icons.elementDown2\" />\n}\n", styles: ["si-avatar.small{--avatar-size: calc(1.5rem + 2 * var(--si-sys-sizing-spacing-y-20))}\n"] }]
         }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: false }] }], imageUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageUrl", required: false }] }] } });
 
 /**
@@ -500,13 +523,14 @@ class SiHeaderSelectionItemComponent extends SiHeaderActionItemBase {
      *
      * @defaultValue false
      */
-    open = input(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiHeaderSelectionItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.8", 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 class=\"d-block dropdown-caret\" [icon]=\"icons.elementDown2\" />\n", dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    open = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiHeaderSelectionItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", 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 class=\"d-block dropdown-caret\" [icon]=\"icons.elementDown2\" />\n", dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiHeaderSelectionItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiHeaderSelectionItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'button[si-header-selection-item]', imports: [SiIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'button[si-header-selection-item]', imports: [SiIconComponent], 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 class=\"d-block dropdown-caret\" [icon]=\"icons.elementDown2\" />\n" }]
@@ -518,7 +542,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  */
 /** The siemens logo. Should be located inside `.header-brand`. */
 class SiHeaderLogoDirective {
-    logoText = signal(undefined, ...(ngDevMode ? [{ debugName: "logoText" }] : []));
+    logoText = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "logoText" }] : /* istanbul ignore next */ []));
     elementRef = inject(ElementRef);
     injector = inject(Injector);
     ngOnInit() {
@@ -532,10 +557,10 @@ class SiHeaderLogoDirective {
                 .replace(/^["']|["']$/g, ''))
         }, { injector: this.injector });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiHeaderLogoDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: SiHeaderLogoDirective, isStandalone: true, selector: "si-header-logo, [siHeaderLogo]", host: { listeners: { "window:theme-switch": "updateLogoText()" }, properties: { "attr.aria-label": "logoText()" }, classAttribute: "header-logo px-6 focus-inside" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiHeaderLogoDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: SiHeaderLogoDirective, isStandalone: true, selector: "si-header-logo, [siHeaderLogo]", host: { listeners: { "window:theme-switch": "updateLogoText()" }, properties: { "attr.aria-label": "logoText()" }, classAttribute: "header-logo px-6 focus-inside" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiHeaderLogoDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiHeaderLogoDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'si-header-logo, [siHeaderLogo]',
@@ -549,47 +574,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                 args: ['window:theme-switch']
             }] } });
 
-/**
- * Copyright (c) Siemens 2016 - 2026
- * 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 extends SiHeaderLogoDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiHeaderSiemensLogoComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: SiHeaderSiemensLogoComponent, isStandalone: true, selector: "si-header-siemens-logo, [si-header-siemens-logo]", usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiHeaderSiemensLogoComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'si-header-siemens-logo, [si-header-siemens-logo]',
-                    template: '',
-                    changeDetection: ChangeDetectionStrategy.OnPush
-                }]
-        }] });
-
 /**
  * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
  */
 class SiHeaderActionsDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiHeaderActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: SiHeaderActionsDirective, isStandalone: true, selector: "si-header-actions", host: { classAttribute: "header-actions" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiHeaderActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: SiHeaderActionsDirective, isStandalone: true, selector: "si-header-actions", host: { classAttribute: "header-actions" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiHeaderActionsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiHeaderActionsDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -603,10 +596,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiHeaderBrandDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiHeaderBrandDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: SiHeaderBrandDirective, isStandalone: true, selector: "si-header-brand", host: { classAttribute: "header-brand" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiHeaderBrandDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: SiHeaderBrandDirective, isStandalone: true, selector: "si-header-brand", host: { classAttribute: "header-brand" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiHeaderBrandDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiHeaderBrandDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -628,12 +621,12 @@ class SiHeaderNavigationComponent {
     ngOnDestroy() {
         this.header.hasNavigation.set(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiHeaderNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiHeaderNavigationComponent, isStandalone: true, selector: "si-header-navigation", host: { attributes: { "role": "navigation" }, classAttribute: "header-navigation" }, ngImport: i0, template: "@if (header.launchpad()) {\n  <button\n    type=\"button\"\n    [class]=\"`header-item focus-inside d-${header.expandBreakpoint()}-none`\"\n    (click)=\"header.openLaunchpad()\"\n  >\n    <si-icon class=\"icon-lg pe-5\" [icon]=\"icons.elementThumbnails\" />\n    {{ header.launchpadLabel() | translate }}\n  </button>\n}\n<ng-content />\n", dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiHeaderNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiHeaderNavigationComponent, isStandalone: true, selector: "si-header-navigation", host: { attributes: { "role": "navigation" }, classAttribute: "header-navigation" }, ngImport: i0, template: "@if (header.launchpad()) {\n  <button\n    type=\"button\"\n    [class]=\"`header-item focus-inside d-${header.expandBreakpoint()}-none`\"\n    (click)=\"header.openLaunchpad()\"\n  >\n    <si-icon class=\"icon pe-5\" [icon]=\"icons.elementThumbnails\" />\n    {{ header.launchpadLabel() | translate }}\n  </button>\n}\n<ng-content />\n", dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiHeaderNavigationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiHeaderNavigationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-header-navigation', imports: [SiTranslatePipe, SiIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'header-navigation', role: 'navigation' }, template: "@if (header.launchpad()) {\n  <button\n    type=\"button\"\n    [class]=\"`header-item focus-inside d-${header.expandBreakpoint()}-none`\"\n    (click)=\"header.openLaunchpad()\"\n  >\n    <si-icon class=\"icon-lg pe-5\" [icon]=\"icons.elementThumbnails\" />\n    {{ header.launchpadLabel() | translate }}\n  </button>\n}\n<ng-content />\n" }]
+            args: [{ selector: 'si-header-navigation', imports: [SiTranslatePipe, SiIconComponent], host: { class: 'header-navigation', role: 'navigation' }, template: "@if (header.launchpad()) {\n  <button\n    type=\"button\"\n    [class]=\"`header-item focus-inside d-${header.expandBreakpoint()}-none`\"\n    (click)=\"header.openLaunchpad()\"\n  >\n    <si-icon class=\"icon pe-5\" [icon]=\"icons.elementThumbnails\" />\n    {{ header.launchpadLabel() | translate }}\n  </button>\n}\n<ng-content />\n" }]
         }], ctorParameters: () => [] });
 
 /**
@@ -646,44 +639,48 @@ class SiLaunchpadAppComponent {
      *
      * @defaultValue false
      */
-    external = input(false, { ...(ngDevMode ? { debugName: "external" } : {}), transform: booleanAttribute });
+    external = input(false, { ...(ngDevMode ? { debugName: "external" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * When `true`, the app item is highlighted as the currently active application.
      *
      * @defaultValue false
      */
-    active = input(false, { ...(ngDevMode ? { debugName: "active" } : {}), transform: booleanAttribute });
+    active = input(false, { ...(ngDevMode ? { debugName: "active" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * When `true`, a toggle button is shown to allow the user to mark or unmark this app as a favorite.
      *
      * @defaultValue false
      */
-    enableFavoriteToggle = input(false, { ...(ngDevMode ? { debugName: "enableFavoriteToggle" } : {}), transform: booleanAttribute });
+    enableFavoriteToggle = input(false, { ...(ngDevMode ? { debugName: "enableFavoriteToggle" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Whether this app is currently marked as a favorite by the user.
      *
      * @defaultValue false
      */
-    favorite = model(false, ...(ngDevMode ? [{ debugName: "favorite" }] : []));
+    favorite = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "favorite" }] : /* istanbul ignore next */ []));
     /**
      * When `true`, the item is styled as an action entry rather than a regular app link.
      *
      * @defaultValue false
      */
-    action = input(false, { ...(ngDevMode ? { debugName: "action" } : {}), transform: booleanAttribute });
+    action = input(false, { ...(ngDevMode ? { debugName: "action" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** URL of the app icon. */
-    iconUrl = input(...(ngDevMode ? [undefined, { debugName: "iconUrl" }] : []));
+    iconUrl = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "iconUrl" }] : /* istanbul ignore next */ []));
     /** CSS class applied to the app icon element. */
-    iconClass = input(...(ngDevMode ? [undefined, { debugName: "iconClass" }] : []));
+    iconClass = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "iconClass" }] : /* istanbul ignore next */ []));
     /**
      * Aria-label for the external link icon.
      *
      * @defaultValue
      * ```
-     * t(() => $localize`:@@SI_LAUNCHPAD.EXTERNAL_LINK:External application`)
+     * t(() => $localize`:@@SI_LAUNCHPAD.EXTERNAL_LINK:Open in new tab`)
      * ```
      */
-    externalLinkText = input(t(() => $localize `:@@SI_LAUNCHPAD.EXTERNAL_LINK:External application`), ...(ngDevMode ? [{ debugName: "externalLinkText" }] : []));
+    externalLinkText = input(t(() => $localize `:@@SI_LAUNCHPAD.EXTERNAL_LINK:Open in new tab`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "externalLinkText" }] : /* istanbul ignore next */ []));
     icons = addIcons({ elementExport, elementFavorites, elementFavoritesFilled });
     header = inject(SiApplicationHeaderComponent);
     favoriteClicked(event) {
@@ -694,16 +691,16 @@ class SiLaunchpadAppComponent {
     click() {
         this.header.closeLaunchpad();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiLaunchpadAppComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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 }, externalLinkText: { classPropertyName: "externalLinkText", publicName: "externalLinkText", 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 class=\"app-icon\" [icon]=\"iconClass()!\" />\n}\n<div class=\"app-text\">\n  <div class=\"si-h4 d-flex align-items-center mw-100 gap-1\">\n    <span class=\"text-truncate\">\n      <ng-content select=\"[app-name]\" />\n    </span>\n    @if (external()) {\n      <si-icon\n        class=\"icon\"\n        [icon]=\"icons.elementExport\"\n        [attr.aria-label]=\"externalLinkText() | translate\"\n      />\n    }\n  </div>\n  <div class=\"si-body text-secondary mt-2 text-truncate mw-100\">\n    <ng-content select=\"[app-systemName]\" />\n  </div>\n</div>\n@if (enableFavoriteToggle()) {\n  <si-icon\n    class=\"icon 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:24px;inline-size:calc(7rem + 40px);max-inline-size:calc(7rem + 40px);padding-inline:8px;color:var(--element-text-primary);border-radius:var(--element-radius-2)}:host.action{color:var(--element-action-primary)}:host.active,:host:hover{color:var(--element-text-primary);text-decoration:none}:host.active{background-color:var(--element-base-1-selected)}:host:hover{background-color:var(--element-base-1-hover)}.app-text{display:flex;align-items:center;flex-direction:column;max-inline-size:100%;overflow:hidden}.app-icon{display:flex;align-items:center;justify-content:center;inline-size:3rem;block-size:3rem;margin-block-end:8px;border-radius:var(--element-radius-2)}.app-icon:is(si-icon){background:var(--element-launchpad-app-background);font-size:2.5rem;padding:4px;color:var(--element-launchpad-app-color)}.favorite-icon{position:absolute;inset-inline-end:16px;inset-block-start:16px;color:var(--element-text-primary)}.is-favorite{color:var(--element-status-caution)}@media(max-width:767.98px){:host{flex-flow:row nowrap;inline-size:100%;max-inline-size:100%;padding:8px}:host:has(.favorite-icon){padding-inline-end:32px}.app-icon{margin-block-end:0;margin-inline-end:8px}.app-text{align-items:start}.favorite-icon{inset-inline-end:8px;inset-block-start:8px}}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiLaunchpadAppComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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 }, externalLinkText: { classPropertyName: "externalLinkText", publicName: "externalLinkText", 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 class=\"app-icon\" [icon]=\"iconClass()!\" />\n}\n<div class=\"app-text\">\n  <div class=\"si-h4 d-flex align-items-center mw-100 gap-1\">\n    <span class=\"text-truncate\">\n      <ng-content select=\"[app-name]\" />\n    </span>\n    @if (external()) {\n      <si-icon\n        class=\"icon\"\n        [icon]=\"icons.elementExport\"\n        [attr.aria-label]=\"externalLinkText() | translate\"\n      />\n    }\n  </div>\n  <div class=\"si-body text-secondary mt-2 text-truncate mw-100\">\n    <ng-content select=\"[app-systemName]\" />\n  </div>\n</div>\n@if (enableFavoriteToggle()) {\n  <si-icon\n    class=\"icon 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:var(--si-sys-sizing-spacing-y-80);inline-size:calc(7rem + 2 * var(--si-sys-sizing-spacing-x-70));max-inline-size:calc(7rem + 2 * var(--si-sys-sizing-spacing-x-70));padding-inline:var(--si-sys-sizing-spacing-x-40);color:var(--si-sys-text-primary);border-radius:var(--element-radius-2)}:host.action{color:var(--si-sys-text-accent)}:host.active,:host:hover{color:var(--si-sys-text-primary);text-decoration:none}:host.active{background-color:var(--si-sys-background-active)}:host:hover{background-color:var(--si-sys-background-hover)}.app-text{display:flex;align-items:center;flex-direction:column;max-inline-size:100%;overflow:hidden}.app-icon{display:flex;align-items:center;justify-content:center;inline-size:3rem;block-size:3rem;margin-block-end:var(--si-sys-sizing-spacing-y-40);border-radius:var(--element-radius-2)}.app-icon:is(si-icon){background:var(--element-launchpad-app-background);font-size:2.5rem;padding:var(--si-sys-sizing-spacing-y-20) var(--si-sys-sizing-spacing-x-20);color:var(--element-launchpad-app-color)}.favorite-icon{position:absolute;inset-inline-end:var(--si-sys-sizing-spacing-x-60);inset-block-start:var(--si-sys-sizing-spacing-y-60);color:var(--si-sys-text-secondary)}.is-favorite{color:var(--si-sys-background-caution)}@media(max-width:767.98px){:host{flex-flow:row nowrap;inline-size:100%;max-inline-size:100%;padding:var(--si-sys-sizing-spacing-y-40) var(--si-sys-sizing-spacing-x-40)}:host:has(.favorite-icon){padding-inline-end:var(--si-sys-sizing-spacing-x-90)}.app-icon{margin-block-end:0;margin-inline-end:var(--si-sys-sizing-spacing-x-40)}.app-text{align-items:start}.favorite-icon{inset-inline-end:var(--si-sys-sizing-spacing-x-40);inset-block-start:var(--si-sys-sizing-spacing-y-40)}}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiLaunchpadAppComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiLaunchpadAppComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'a[si-launchpad-app]', imports: [SiIconComponent, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'a[si-launchpad-app]', imports: [SiIconComponent, SiTranslatePipe], host: {
                         class: 'focus-inside',
                         '[class.active]': 'active()',
                         '[class.action]': 'action()'
-                    }, template: "@if (iconUrl()) {\n  <img alt=\"\" width=\"64\" height=\"64\" class=\"app-icon\" [src]=\"iconUrl()\" />\n} @else if (iconClass()) {\n  <si-icon class=\"app-icon\" [icon]=\"iconClass()!\" />\n}\n<div class=\"app-text\">\n  <div class=\"si-h4 d-flex align-items-center mw-100 gap-1\">\n    <span class=\"text-truncate\">\n      <ng-content select=\"[app-name]\" />\n    </span>\n    @if (external()) {\n      <si-icon\n        class=\"icon\"\n        [icon]=\"icons.elementExport\"\n        [attr.aria-label]=\"externalLinkText() | translate\"\n      />\n    }\n  </div>\n  <div class=\"si-body text-secondary mt-2 text-truncate mw-100\">\n    <ng-content select=\"[app-systemName]\" />\n  </div>\n</div>\n@if (enableFavoriteToggle()) {\n  <si-icon\n    class=\"icon 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:24px;inline-size:calc(7rem + 40px);max-inline-size:calc(7rem + 40px);padding-inline:8px;color:var(--element-text-primary);border-radius:var(--element-radius-2)}:host.action{color:var(--element-action-primary)}:host.active,:host:hover{color:var(--element-text-primary);text-decoration:none}:host.active{background-color:var(--element-base-1-selected)}:host:hover{background-color:var(--element-base-1-hover)}.app-text{display:flex;align-items:center;flex-direction:column;max-inline-size:100%;overflow:hidden}.app-icon{display:flex;align-items:center;justify-content:center;inline-size:3rem;block-size:3rem;margin-block-end:8px;border-radius:var(--element-radius-2)}.app-icon:is(si-icon){background:var(--element-launchpad-app-background);font-size:2.5rem;padding:4px;color:var(--element-launchpad-app-color)}.favorite-icon{position:absolute;inset-inline-end:16px;inset-block-start:16px;color:var(--element-text-primary)}.is-favorite{color:var(--element-status-caution)}@media(max-width:767.98px){:host{flex-flow:row nowrap;inline-size:100%;max-inline-size:100%;padding:8px}:host:has(.favorite-icon){padding-inline-end:32px}.app-icon{margin-block-end:0;margin-inline-end:8px}.app-text{align-items:start}.favorite-icon{inset-inline-end:8px;inset-block-start:8px}}\n"] }]
+                    }, template: "@if (iconUrl()) {\n  <img alt=\"\" width=\"64\" height=\"64\" class=\"app-icon\" [src]=\"iconUrl()\" />\n} @else if (iconClass()) {\n  <si-icon class=\"app-icon\" [icon]=\"iconClass()!\" />\n}\n<div class=\"app-text\">\n  <div class=\"si-h4 d-flex align-items-center mw-100 gap-1\">\n    <span class=\"text-truncate\">\n      <ng-content select=\"[app-name]\" />\n    </span>\n    @if (external()) {\n      <si-icon\n        class=\"icon\"\n        [icon]=\"icons.elementExport\"\n        [attr.aria-label]=\"externalLinkText() | translate\"\n      />\n    }\n  </div>\n  <div class=\"si-body text-secondary mt-2 text-truncate mw-100\">\n    <ng-content select=\"[app-systemName]\" />\n  </div>\n</div>\n@if (enableFavoriteToggle()) {\n  <si-icon\n    class=\"icon 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:var(--si-sys-sizing-spacing-y-80);inline-size:calc(7rem + 2 * var(--si-sys-sizing-spacing-x-70));max-inline-size:calc(7rem + 2 * var(--si-sys-sizing-spacing-x-70));padding-inline:var(--si-sys-sizing-spacing-x-40);color:var(--si-sys-text-primary);border-radius:var(--element-radius-2)}:host.action{color:var(--si-sys-text-accent)}:host.active,:host:hover{color:var(--si-sys-text-primary);text-decoration:none}:host.active{background-color:var(--si-sys-background-active)}:host:hover{background-color:var(--si-sys-background-hover)}.app-text{display:flex;align-items:center;flex-direction:column;max-inline-size:100%;overflow:hidden}.app-icon{display:flex;align-items:center;justify-content:center;inline-size:3rem;block-size:3rem;margin-block-end:var(--si-sys-sizing-spacing-y-40);border-radius:var(--element-radius-2)}.app-icon:is(si-icon){background:var(--element-launchpad-app-background);font-size:2.5rem;padding:var(--si-sys-sizing-spacing-y-20) var(--si-sys-sizing-spacing-x-20);color:var(--element-launchpad-app-color)}.favorite-icon{position:absolute;inset-inline-end:var(--si-sys-sizing-spacing-x-60);inset-block-start:var(--si-sys-sizing-spacing-y-60);color:var(--si-sys-text-secondary)}.is-favorite{color:var(--si-sys-background-caution)}@media(max-width:767.98px){:host{flex-flow:row nowrap;inline-size:100%;max-inline-size:100%;padding:var(--si-sys-sizing-spacing-y-40) var(--si-sys-sizing-spacing-x-40)}:host:has(.favorite-icon){padding-inline-end:var(--si-sys-sizing-spacing-x-90)}.app-icon{margin-block-end:0;margin-inline-end:var(--si-sys-sizing-spacing-x-40)}.app-text{align-items:start}.favorite-icon{inset-inline-end:var(--si-sys-sizing-spacing-x-40);inset-block-start:var(--si-sys-sizing-spacing-y-40)}}\n"] }]
         }], propDecorators: { external: [{ type: i0.Input, args: [{ isSignal: true, alias: "external", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], enableFavoriteToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableFavoriteToggle", required: false }] }], favorite: [{ type: i0.Input, args: [{ isSignal: true, alias: "favorite", required: false }] }, { type: i0.Output, args: ["favoriteChange"] }], action: [{ type: i0.Input, args: [{ isSignal: true, alias: "action", required: false }] }], iconUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconUrl", required: false }] }], iconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconClass", required: false }] }], externalLinkText: [{ type: i0.Input, args: [{ isSignal: true, alias: "externalLinkText", required: false }] }], favoriteClicked: [{
                 type: HostListener,
                 args: ['keydown.space', ['$event']]
@@ -717,9 +714,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiLaunchpadCategoryComponent {
-    category = input.required(...(ngDevMode ? [{ debugName: "category" }] : []));
+    category = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "category" }] : /* istanbul ignore next */ []));
     /** @defaultValue false */
-    enableFavorites = input(false, ...(ngDevMode ? [{ debugName: "enableFavorites" }] : []));
+    enableFavorites = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "enableFavorites" }] : /* istanbul ignore next */ []));
     favoriteChange = output();
     activatedRoute = inject(ActivatedRoute, { optional: true });
     toggleFavorite(app, favorite) {
@@ -728,10 +727,10 @@ class SiLaunchpadCategoryComponent {
     isFavoriteToggleDisabled(app) {
         return '_noFavorite' in app && !!app._noFavorite;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiLaunchpadCategoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiLaunchpadCategoryComponent, isStandalone: true, selector: "si-launchpad-category", inputs: { category: { classPropertyName: "category", publicName: "category", isSignal: true, isRequired: true, transformFunction: null }, enableFavorites: { classPropertyName: "enableFavorites", publicName: "enableFavorites", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { favoriteChange: "favoriteChange" }, host: { properties: { "class.has-title": "!!category().name" }, classAttribute: "d-block" }, ngImport: i0, template: "@if (category().name) {\n  <div class=\"si-h4 launchpad-category-title mt-4 mb-6\">\n    {{ category().name | translate }}\n  </div>\n}\n<div class=\"d-flex flex-wrap gap-4\">\n  @for (app of category().apps; track app) {\n    @switch (app.type) {\n      @case ('router-link') {\n        <a\n          si-launchpad-app\n          routerLinkActive=\"active\"\n          [routerLinkActiveOptions]=\"app.activeMatchOptions ?? { exact: false }\"\n          [enableFavoriteToggle]=\"enableFavorites() && !isFavoriteToggleDisabled(app)\"\n          [external]=\"app.external\"\n          [iconUrl]=\"app.iconUrl\"\n          [iconClass]=\"app.iconClass\"\n          [favorite]=\"!!app.favorite\"\n          [routerLink]=\"app.routerLink\"\n          [queryParams]=\"app.extras?.queryParams\"\n          [queryParamsHandling]=\"app.extras?.queryParamsHandling\"\n          [fragment]=\"app.extras?.fragment\"\n          [state]=\"app.extras?.state\"\n          [relativeTo]=\"app.extras?.relativeTo ?? this.activatedRoute\"\n          [preserveFragment]=\"app.extras?.preserveFragment\"\n          [skipLocationChange]=\"app.extras?.skipLocationChange\"\n          [replaceUrl]=\"app.extras?.replaceUrl\"\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      }\n      @default {\n        <!--fallback for existing apps that do not have a type defined -->\n        <a\n          si-launchpad-app\n          [enableFavoriteToggle]=\"enableFavorites() && !isFavoriteToggleDisabled(app)\"\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      }\n    }\n  }\n</div>\n", dependencies: [{ kind: "component", type: SiLaunchpadAppComponent, selector: "a[si-launchpad-app]", inputs: ["external", "active", "enableFavoriteToggle", "favorite", "action", "iconUrl", "iconClass", "externalLinkText"], outputs: ["favoriteChange"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiLaunchpadCategoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiLaunchpadCategoryComponent, isStandalone: true, selector: "si-launchpad-category", inputs: { category: { classPropertyName: "category", publicName: "category", isSignal: true, isRequired: true, transformFunction: null }, enableFavorites: { classPropertyName: "enableFavorites", publicName: "enableFavorites", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { favoriteChange: "favoriteChange" }, host: { properties: { "class.has-title": "!!category().name" }, classAttribute: "d-block" }, ngImport: i0, template: "@if (category().name) {\n  <div class=\"si-h4 launchpad-category-title mt-4 mb-6\">\n    {{ category().name | translate }}\n  </div>\n}\n<div class=\"d-flex flex-wrap gap-4\">\n  @for (app of category().apps; track app) {\n    @switch (app.type) {\n      @case ('router-link') {\n        <a\n          si-launchpad-app\n          routerLinkActive=\"active\"\n          [routerLinkActiveOptions]=\"app.activeMatchOptions ?? { exact: false }\"\n          [enableFavoriteToggle]=\"enableFavorites() && !isFavoriteToggleDisabled(app)\"\n          [external]=\"app.external\"\n          [iconUrl]=\"app.iconUrl\"\n          [iconClass]=\"app.iconClass\"\n          [favorite]=\"!!app.favorite\"\n          [routerLink]=\"app.routerLink\"\n          [queryParams]=\"app.extras?.queryParams\"\n          [queryParamsHandling]=\"app.extras?.queryParamsHandling\"\n          [fragment]=\"app.extras?.fragment\"\n          [state]=\"app.extras?.state\"\n          [relativeTo]=\"app.extras?.relativeTo ?? this.activatedRoute\"\n          [preserveFragment]=\"app.extras?.preserveFragment\"\n          [skipLocationChange]=\"app.extras?.skipLocationChange\"\n          [replaceUrl]=\"app.extras?.replaceUrl\"\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      }\n      @default {\n        <!--fallback for existing apps that do not have a type defined -->\n        <a\n          si-launchpad-app\n          [enableFavoriteToggle]=\"enableFavorites() && !isFavoriteToggleDisabled(app)\"\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      }\n    }\n  }\n</div>\n", dependencies: [{ kind: "component", type: SiLaunchpadAppComponent, selector: "a[si-launchpad-app]", inputs: ["external", "active", "enableFavoriteToggle", "favorite", "action", "iconUrl", "iconClass", "externalLinkText"], outputs: ["favoriteChange"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiLaunchpadCategoryComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiLaunchpadCategoryComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-launchpad-category', imports: [SiLaunchpadAppComponent, SiTranslatePipe, RouterLinkActive, RouterLink], host: {
                         class: 'd-block',
@@ -752,7 +751,8 @@ class SiLaunchpadFactoryComponent {
      * t(() => $localize`:@@SI_LAUNCHPAD.CLOSE:Close launchpad`)
      * ```
      */
-    closeText = input(t(() => $localize `:@@SI_LAUNCHPAD.CLOSE:Close launchpad`), ...(ngDevMode ? [{ debugName: "closeText" }] : []));
+    closeText = input(t(() => $localize `:@@SI_LAUNCHPAD.CLOSE:Close launchpad`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeText" }] : /* istanbul ignore next */ []));
     /**
      * Title of the launchpad.
      *
@@ -761,20 +761,23 @@ class SiLaunchpadFactoryComponent {
      * t(() => $localize`:@@SI_LAUNCHPAD.TITLE:Switch app`)
      * ```
      */
-    titleText = input(t(() => $localize `:@@SI_LAUNCHPAD.TITLE:Switch app`), ...(ngDevMode ? [{ debugName: "titleText" }] : []));
+    titleText = input(t(() => $localize `:@@SI_LAUNCHPAD.TITLE:Switch app`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "titleText" }] : /* istanbul ignore next */ []));
     /**
      * Subtitle of the launchpad.
      * When not provided, no subtitle is displayed.
      */
-    subtitleText = input(...(ngDevMode ? [undefined, { debugName: "subtitleText" }] : []));
+    subtitleText = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "subtitleText" }] : /* istanbul ignore next */ []));
     /** All app items shown in the launchpad. */
-    apps = input.required(...(ngDevMode ? [{ debugName: "apps" }] : []));
+    apps = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "apps" }] : /* istanbul ignore next */ []));
     /**
      * Allow the user to select favorite apps which will then be displayed at the top.
      *
      * @defaultValue false
      */
-    enableFavorites = input(false, { ...(ngDevMode ? { debugName: "enableFavorites" } : {}), transform: booleanAttribute });
+    enableFavorites = input(false, { ...(ngDevMode ? { debugName: "enableFavorites" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Title of the favorite apps section.
      *
@@ -783,7 +786,8 @@ class SiLaunchpadFactoryComponent {
      * t(() => $localize`:@@SI_LAUNCHPAD.FAVORITE_APPS:Favorites`)
      * ```
      */
-    favoriteAppsText = input(t(() => $localize `:@@SI_LAUNCHPAD.FAVORITE_APPS:Favorites`), ...(ngDevMode ? [{ debugName: "favoriteAppsText" }] : []));
+    favoriteAppsText = input(t(() => $localize `:@@SI_LAUNCHPAD.FAVORITE_APPS:Favorites`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "favoriteAppsText" }] : /* istanbul ignore next */ []));
     /**
      * Title of the show more apps button.
      *
@@ -792,40 +796,28 @@ class SiLaunchpadFactoryComponent {
      * t(() => $localize`:@@SI_LAUNCHPAD.SHOW_MORE:Show more`)
      * ```
      */
-    showMoreAppsText = input(t(() => $localize `:@@SI_LAUNCHPAD.SHOW_MORE:Show more`), ...(ngDevMode ? [{ debugName: "showMoreAppsText" }] : []));
-    /**
-     * Title of the show less apps button.
-     *
-     * @defaultValue
-     * ```
-     * t(() => $localize`:@@SI_LAUNCHPAD.SHOW_LESS:Show less`)
-     * ```
-     */
-    showLessAppsText = input(t(() => $localize `:@@SI_LAUNCHPAD.SHOW_LESS:Show less`), ...(ngDevMode ? [{ debugName: "showLessAppsText" }] : []));
+    showMoreAppsText = input(t(() => $localize `:@@SI_LAUNCHPAD.SHOW_MORE:Show more`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showMoreAppsText" }] : /* istanbul ignore next */ []));
+    /** @deprecated This input no longer has an effect. {@link showMoreAppsText} is shown in all cases. */
+    showLessAppsText = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "showLessAppsText" }] : /* istanbul ignore next */ []));
     favoriteChange = output();
     showAllApps = false;
+    allAppsId = '__si-launchpad-factory-all-apps';
     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 apps;
         }
-        return categories;
-    }, ...(ngDevMode ? [{ debugName: "categories" }] : []));
+        return [{ name: '', apps: [...apps] }];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "categories" }] : /* istanbul ignore next */ []));
     favorites = computed(() => this.apps()
         .flatMap(app => ('apps' in app ? app.apps : app))
-        .filter(app => app.favorite), ...(ngDevMode ? [{ debugName: "favorites" }] : []));
-    hasFavorites = computed(() => this.favorites().length > 0, ...(ngDevMode ? [{ debugName: "hasFavorites" }] : []));
+        .filter(app => app.favorite), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "favorites" }] : /* istanbul ignore next */ []));
+    hasFavorites = computed(() => this.favorites().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasFavorites" }] : /* istanbul ignore next */ []));
     icons = addIcons({ elementDown2, elementCancel });
     header = inject(SiApplicationHeaderComponent);
     closeLaunchpad() {
@@ -840,10 +832,10 @@ class SiLaunchpadFactoryComponent {
     isCategories(items) {
         return items.some(item => 'apps' in item);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiLaunchpadFactoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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: "<!-- temporary until old primary-navbar is removed -->\n<div\n  class=\"app-switcher gap-6 g-5 g-sm-9 container-fluid\"\n  cdkTrapFocus\n  cdkTrapFocusAutoCapture\n  (keydown.escape)=\"escape()\"\n>\n  @if (titleText()) {\n    <div class=\"apps-header\">\n      <span>\n        <p class=\"si-h4 lh-1 m-0\">{{ titleText() | translate }}</p>\n        @if (subtitleText()) {\n          <p class=\"si-body text-secondary mt-4 mb-0\">{{ subtitleText() | translate }}</p>\n        }\n      </span>\n      <button\n        type=\"button\"\n        class=\"btn btn-circle btn-tertiary-ghost\"\n        [attr.aria-label]=\"closeText() | translate\"\n        (click)=\"closeLaunchpad()\"\n      >\n        <si-icon [icon]=\"icons.elementCancel\" />\n      </button>\n    </div>\n  }\n  <div class=\"apps-scroll ms-n2 ps-2\">\n    @for (category of categories(); track category.name) {\n      @if (!enableFavorites() || !hasFavorites() || $first || showAllApps) {\n        <si-launchpad-category\n          [class.pt-6]=\"!$first && !!category.name\"\n          [category]=\"category\"\n          [enableFavorites]=\"enableFavorites()\"\n          (favoriteChange)=\"toggleFavorite($event)\"\n        />\n      }\n\n      @if (enableFavorites() && $first && hasFavorites()) {\n        <button\n          type=\"button\"\n          class=\"btn btn-link btn-show-all dropdown-toggle text-decoration-none\"\n          [class.show]=\"showAllApps\"\n          (click)=\"showAllApps = !showAllApps\"\n        >\n          <b>{{ (showAllApps ? showLessAppsText() : showMoreAppsText()) | translate }}</b>\n          <si-icon class=\"link-icon dropdown-caret\" [icon]=\"icons.elementDown2\" />\n        </button>\n      }\n    }\n  </div>\n</div>\n", styles: [".app-switcher{position:fixed;inset-block-start:calc(1.5rem + 25px + var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px));inset-inline:0;min-block-size:200px;max-block-size:calc(100vb - (1.5rem + 25px) - var(--element-titlebar-spacing, 0px) - var(--element-system-banner-spacing, 0px));padding:16px;display:flex;flex-direction:column;z-index:1033;background-color:var(--element-base-1)}@media(min-width:992px){.app-switcher{padding-block:16px;padding-inline:24px}}.apps-header{display:flex;align-items:center;justify-content:space-between}.apps-scroll{overflow-y:auto;padding-inline-end:16px;margin-inline-end:-16px}.btn-show-all{margin-block-start:16px;margin-block-end:8px}.btn-show-all.show{margin-block-end:24px}.btn-show-all.show:has(+si-launchpad-category.has-title){margin-block-end:0}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "ngmodule", type: SiLinkModule }, { kind: "component", type: SiLaunchpadCategoryComponent, selector: "si-launchpad-category", inputs: ["category", "enableFavorites"], outputs: ["favoriteChange"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiLaunchpadFactoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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: "<!-- temporary until old primary-navbar is removed -->\n<div\n  class=\"app-switcher gap-6 g-5 g-sm-9 container-fluid\"\n  cdkTrapFocus\n  cdkTrapFocusAutoCapture\n  (keydown.escape)=\"escape()\"\n>\n  @if (titleText()) {\n    <div class=\"apps-header\">\n      <span>\n        <p class=\"si-h4 lh-1 m-0\">{{ titleText() | translate }}</p>\n        @if (subtitleText()) {\n          <p class=\"si-body text-secondary mt-4 mb-0\">{{ subtitleText() | translate }}</p>\n        }\n      </span>\n      <button\n        type=\"button\"\n        class=\"btn btn-circle btn-tertiary-ghost\"\n        [attr.aria-label]=\"closeText() | translate\"\n        (click)=\"closeLaunchpad()\"\n      >\n        <si-icon [icon]=\"icons.elementCancel\" />\n      </button>\n    </div>\n  }\n  <div class=\"apps-scroll ms-n2 ps-2\">\n    @if (enableFavorites() && hasFavorites()) {\n      <si-launchpad-category\n        [category]=\"{ name: favoriteAppsText(), apps: favorites() }\"\n        [enableFavorites]=\"enableFavorites()\"\n        (favoriteChange)=\"toggleFavorite($event)\"\n      />\n      <button\n        type=\"button\"\n        class=\"btn btn-link btn-show-all dropdown-toggle text-decoration-none\"\n        [class.show]=\"showAllApps\"\n        [attr.aria-expanded]=\"showAllApps\"\n        [attr.aria-controls]=\"allAppsId\"\n        (click)=\"showAllApps = !showAllApps\"\n      >\n        <b>{{ showMoreAppsText() | translate }}</b>\n        <si-icon class=\"link-icon dropdown-caret\" [icon]=\"icons.elementDown2\" />\n      </button>\n    }\n\n    <div class=\"all-apps\" [id]=\"allAppsId\">\n      @if (!enableFavorites() || !hasFavorites() || showAllApps) {\n        @for (category of categories(); track category.name) {\n          <si-launchpad-category\n            [class.pt-6]=\"!!category.name && (hasFavorites() || !$first)\"\n            [category]=\"category\"\n            [enableFavorites]=\"enableFavorites()\"\n            (favoriteChange)=\"toggleFavorite($event)\"\n          />\n        }\n      }\n    </div>\n  </div>\n</div>\n", styles: [".app-switcher{position:fixed;inset-block-start:calc(var(--si-sys-sizing-sizing-100) + 1px + var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px));inset-inline:0;min-block-size:200px;max-block-size:calc(100vb - (var(--si-sys-sizing-sizing-100) + 1px) - var(--element-titlebar-spacing, 0px) - var(--element-system-banner-spacing, 0px));padding:var(--si-sys-sizing-spacing-y-60) var(--si-sys-sizing-spacing-x-60);display:flex;flex-direction:column;z-index:1033;background-color:var(--si-sys-background-1)}@media(min-width:992px){.app-switcher{padding-block:var(--si-sys-sizing-spacing-y-60);padding-inline:var(--si-sys-sizing-spacing-x-80)}}.apps-header{display:flex;align-items:center;justify-content:space-between}.apps-scroll{overflow-y:auto;padding-inline-end:var(--si-sys-sizing-spacing-x-60);margin-inline-end:calc(var(--si-sys-sizing-spacing-x-60) * -1)}.btn-show-all{margin-block-start:var(--si-sys-sizing-spacing-y-60);margin-block-end:var(--si-sys-sizing-spacing-y-40)}.btn-show-all.show{margin-block-end:var(--si-sys-sizing-spacing-y-80)}.btn-show-all.show:has(+.all-apps>si-launchpad-category.has-title){margin-block-end:0}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "ngmodule", type: SiLinkModule }, { kind: "component", type: SiLaunchpadCategoryComponent, selector: "si-launchpad-category", inputs: ["category", "enableFavorites"], outputs: ["favoriteChange"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiLaunchpadFactoryComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiLaunchpadFactoryComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-launchpad-factory', imports: [
                         A11yModule,
@@ -851,7 +843,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         SiTranslatePipe,
                         SiLaunchpadCategoryComponent,
                         SiIconComponent
-                    ], template: "<!-- temporary until old primary-navbar is removed -->\n<div\n  class=\"app-switcher gap-6 g-5 g-sm-9 container-fluid\"\n  cdkTrapFocus\n  cdkTrapFocusAutoCapture\n  (keydown.escape)=\"escape()\"\n>\n  @if (titleText()) {\n    <div class=\"apps-header\">\n      <span>\n        <p class=\"si-h4 lh-1 m-0\">{{ titleText() | translate }}</p>\n        @if (subtitleText()) {\n          <p class=\"si-body text-secondary mt-4 mb-0\">{{ subtitleText() | translate }}</p>\n        }\n      </span>\n      <button\n        type=\"button\"\n        class=\"btn btn-circle btn-tertiary-ghost\"\n        [attr.aria-label]=\"closeText() | translate\"\n        (click)=\"closeLaunchpad()\"\n      >\n        <si-icon [icon]=\"icons.elementCancel\" />\n      </button>\n    </div>\n  }\n  <div class=\"apps-scroll ms-n2 ps-2\">\n    @for (category of categories(); track category.name) {\n      @if (!enableFavorites() || !hasFavorites() || $first || showAllApps) {\n        <si-launchpad-category\n          [class.pt-6]=\"!$first && !!category.name\"\n          [category]=\"category\"\n          [enableFavorites]=\"enableFavorites()\"\n          (favoriteChange)=\"toggleFavorite($event)\"\n        />\n      }\n\n      @if (enableFavorites() && $first && hasFavorites()) {\n        <button\n          type=\"button\"\n          class=\"btn btn-link btn-show-all dropdown-toggle text-decoration-none\"\n          [class.show]=\"showAllApps\"\n          (click)=\"showAllApps = !showAllApps\"\n        >\n          <b>{{ (showAllApps ? showLessAppsText() : showMoreAppsText()) | translate }}</b>\n          <si-icon class=\"link-icon dropdown-caret\" [icon]=\"icons.elementDown2\" />\n        </button>\n      }\n    }\n  </div>\n</div>\n", styles: [".app-switcher{position:fixed;inset-block-start:calc(1.5rem + 25px + var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px));inset-inline:0;min-block-size:200px;max-block-size:calc(100vb - (1.5rem + 25px) - var(--element-titlebar-spacing, 0px) - var(--element-system-banner-spacing, 0px));padding:16px;display:flex;flex-direction:column;z-index:1033;background-color:var(--element-base-1)}@media(min-width:992px){.app-switcher{padding-block:16px;padding-inline:24px}}.apps-header{display:flex;align-items:center;justify-content:space-between}.apps-scroll{overflow-y:auto;padding-inline-end:16px;margin-inline-end:-16px}.btn-show-all{margin-block-start:16px;margin-block-end:8px}.btn-show-all.show{margin-block-end:24px}.btn-show-all.show:has(+si-launchpad-category.has-title){margin-block-end:0}\n"] }]
+                    ], template: "<!-- temporary until old primary-navbar is removed -->\n<div\n  class=\"app-switcher gap-6 g-5 g-sm-9 container-fluid\"\n  cdkTrapFocus\n  cdkTrapFocusAutoCapture\n  (keydown.escape)=\"escape()\"\n>\n  @if (titleText()) {\n    <div class=\"apps-header\">\n      <span>\n        <p class=\"si-h4 lh-1 m-0\">{{ titleText() | translate }}</p>\n        @if (subtitleText()) {\n          <p class=\"si-body text-secondary mt-4 mb-0\">{{ subtitleText() | translate }}</p>\n        }\n      </span>\n      <button\n        type=\"button\"\n        class=\"btn btn-circle btn-tertiary-ghost\"\n        [attr.aria-label]=\"closeText() | translate\"\n        (click)=\"closeLaunchpad()\"\n      >\n        <si-icon [icon]=\"icons.elementCancel\" />\n      </button>\n    </div>\n  }\n  <div class=\"apps-scroll ms-n2 ps-2\">\n    @if (enableFavorites() && hasFavorites()) {\n      <si-launchpad-category\n        [category]=\"{ name: favoriteAppsText(), apps: favorites() }\"\n        [enableFavorites]=\"enableFavorites()\"\n        (favoriteChange)=\"toggleFavorite($event)\"\n      />\n      <button\n        type=\"button\"\n        class=\"btn btn-link btn-show-all dropdown-toggle text-decoration-none\"\n        [class.show]=\"showAllApps\"\n        [attr.aria-expanded]=\"showAllApps\"\n        [attr.aria-controls]=\"allAppsId\"\n        (click)=\"showAllApps = !showAllApps\"\n      >\n        <b>{{ showMoreAppsText() | translate }}</b>\n        <si-icon class=\"link-icon dropdown-caret\" [icon]=\"icons.elementDown2\" />\n      </button>\n    }\n\n    <div class=\"all-apps\" [id]=\"allAppsId\">\n      @if (!enableFavorites() || !hasFavorites() || showAllApps) {\n        @for (category of categories(); track category.name) {\n          <si-launchpad-category\n            [class.pt-6]=\"!!category.name && (hasFavorites() || !$first)\"\n            [category]=\"category\"\n            [enableFavorites]=\"enableFavorites()\"\n            (favoriteChange)=\"toggleFavorite($event)\"\n          />\n        }\n      }\n    </div>\n  </div>\n</div>\n", styles: [".app-switcher{position:fixed;inset-block-start:calc(var(--si-sys-sizing-sizing-100) + 1px + var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px));inset-inline:0;min-block-size:200px;max-block-size:calc(100vb - (var(--si-sys-sizing-sizing-100) + 1px) - var(--element-titlebar-spacing, 0px) - var(--element-system-banner-spacing, 0px));padding:var(--si-sys-sizing-spacing-y-60) var(--si-sys-sizing-spacing-x-60);display:flex;flex-direction:column;z-index:1033;background-color:var(--si-sys-background-1)}@media(min-width:992px){.app-switcher{padding-block:var(--si-sys-sizing-spacing-y-60);padding-inline:var(--si-sys-sizing-spacing-x-80)}}.apps-header{display:flex;align-items:center;justify-content:space-between}.apps-scroll{overflow-y:auto;padding-inline-end:var(--si-sys-sizing-spacing-x-60);margin-inline-end:calc(var(--si-sys-sizing-spacing-x-60) * -1)}.btn-show-all{margin-block-start:var(--si-sys-sizing-spacing-y-60);margin-block-end:var(--si-sys-sizing-spacing-y-40)}.btn-show-all.show{margin-block-end:var(--si-sys-sizing-spacing-y-80)}.btn-show-all.show:has(+.all-apps>si-launchpad-category.has-title){margin-block-end:0}\n"] }]
         }], propDecorators: { closeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeText", required: false }] }], titleText: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleText", required: false }] }], subtitleText: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitleText", required: false }] }], apps: [{ type: i0.Input, args: [{ isSignal: true, alias: "apps", required: true }] }], enableFavorites: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableFavorites", required: false }] }], favoriteAppsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "favoriteAppsText", required: false }] }], showMoreAppsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMoreAppsText", required: false }] }], showLessAppsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLessAppsText", required: false }] }], favoriteChange: [{ type: i0.Output, args: ["favoriteChange"] }] } });
 
 /**
@@ -863,5 +855,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { SiAccountDetailsComponent, SiApplicationHeaderComponent, SiHeaderAccountItemComponent, SiHeaderActionItemComponent, SiHeaderActionsDirective, SiHeaderBrandDirective, SiHeaderCollapsibleActionsComponent, SiHeaderLogoDirective, SiHeaderNavigationComponent, SiHeaderNavigationItemComponent, SiHeaderSelectionItemComponent, SiHeaderSiemensLogoComponent, SiLaunchpadFactoryComponent };
+export { SiAccountDetailsComponent, SiApplicationHeaderComponent, SiHeaderAccountItemComponent, SiHeaderActionItemComponent, SiHeaderActionsDirective, SiHeaderBrandDirective, SiHeaderCollapsibleActionsComponent, SiHeaderLogoDirective, SiHeaderNavigationComponent, SiHeaderNavigationItemComponent, SiHeaderSelectionItemComponent, SiLaunchpadFactoryComponent };
 //# sourceMappingURL=siemens-element-ng-application-header.mjs.map