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

package/fesm2022/siemens-element-ng-navbar.mjs

@@ -21,7 +21,8 @@ class SiNavbarPrimaryComponent {
      *
      * @defaultValue []
      */
-    primaryItems = input([], ...(ngDevMode ? [{ debugName: "primaryItems" }] : []));
+    primaryItems = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "primaryItems" }] : /* istanbul ignore next */ []));
     /**
      * List of account dropdown elements (defined by `title` and `link`).
      *
@@ -33,19 +34,23 @@ class SiNavbarPrimaryComponent {
      * code between the <si-navbar-primary> tags. In this case you don't need this
      * property (will be ignored if you set anyway).
      */
-    accountItems = input(...(ngDevMode ? [undefined, { debugName: "accountItems" }] : []));
+    accountItems = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "accountItems" }] : /* istanbul ignore next */ []));
     /**
      * Account settings name (`title`) and profile picture (`image` or `icon`)
      */
-    account = input(...(ngDevMode ? [undefined, { debugName: "account" }] : []));
+    account = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "account" }] : /* istanbul ignore next */ []));
     /**
      * URL of the navbar brand.
      */
-    logoUrl = input(...(ngDevMode ? [undefined, { debugName: "logoUrl" }] : []));
+    logoUrl = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "logoUrl" }] : /* istanbul ignore next */ []));
     /**
      * Title of the application.
      */
-    appTitle = input(...(ngDevMode ? [undefined, { debugName: "appTitle" }] : []));
+    appTitle = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "appTitle" }] : /* istanbul ignore next */ []));
     /**
      * Configurable home link that is used at the logo and app title.
      * Use `undefined` to disable the link.
@@ -55,16 +60,18 @@ class SiNavbarPrimaryComponent {
      * { link: '/' }
      * ```
      */
-    home = input({ link: '/' }, ...(ngDevMode ? [{ debugName: "home" }] : []));
+    home = input({ link: '/' }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "home" }] : /* istanbul ignore next */ []));
     /**
      * title for the launchpad
      *
      * @defaultValue
      * ```
-     * t(() => $localize`:@@SI_LAUNCHPAD.TITLE:Switch applications`)
+     * t(() => $localize`:@@SI_LAUNCHPAD.TITLE:Switch app`)
      * ```
      */
-    appSwitcherTitle = input(t(() => $localize `:@@SI_LAUNCHPAD.TITLE:Switch applications`), ...(ngDevMode ? [{ debugName: "appSwitcherTitle" }] : []));
+    appSwitcherTitle = input(t(() => $localize `:@@SI_LAUNCHPAD.TITLE:Switch app`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appSwitcherTitle" }] : /* istanbul ignore next */ []));
     /**
      * sub-title for the launchpad
      *
@@ -73,7 +80,8 @@ class SiNavbarPrimaryComponent {
      * t(() => $localize`:@@SI_LAUNCHPAD.SUB_TITLE:Access all your apps`)
      * ```
      */
-    appSwitcherSubTitle = input(t(() => $localize `:@@SI_LAUNCHPAD.SUB_TITLE:Access all your apps`), ...(ngDevMode ? [{ debugName: "appSwitcherSubTitle" }] : []));
+    appSwitcherSubTitle = input(t(() => $localize `:@@SI_LAUNCHPAD.SUB_TITLE:Access all your apps`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appSwitcherSubTitle" }] : /* istanbul ignore next */ []));
     /**
      * Title or translate key for the favorite apps section.
      *
@@ -82,7 +90,8 @@ class SiNavbarPrimaryComponent {
      * t(() => $localize`:@@SI_LAUNCHPAD.FAVORITE_APPS:Favorites`)
      * ```
      */
-    favoriteAppsTitle = input(t(() => $localize `:@@SI_LAUNCHPAD.FAVORITE_APPS:Favorites`), ...(ngDevMode ? [{ debugName: "favoriteAppsTitle" }] : []));
+    favoriteAppsTitle = input(t(() => $localize `:@@SI_LAUNCHPAD.FAVORITE_APPS:Favorites`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "favoriteAppsTitle" }] : /* istanbul ignore next */ []));
     /**
      * Title or translate key for the default apps section.
      *
@@ -91,7 +100,8 @@ class SiNavbarPrimaryComponent {
      * t(() => $localize`:@@SI_LAUNCHPAD.DEFAULT_CATEGORY_TITLE:Apps`)
      * ```
      */
-    defaultAppsTitle = input(t(() => $localize `:@@SI_LAUNCHPAD.DEFAULT_CATEGORY_TITLE:Apps`), ...(ngDevMode ? [{ debugName: "defaultAppsTitle" }] : []));
+    defaultAppsTitle = input(t(() => $localize `:@@SI_LAUNCHPAD.DEFAULT_CATEGORY_TITLE:Apps`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultAppsTitle" }] : /* istanbul ignore next */ []));
     /**
      * Title or translate key for the show more apps button.
      *
@@ -100,7 +110,8 @@ class SiNavbarPrimaryComponent {
      * t(() => $localize`:@@SI_LAUNCHPAD.SHOW_MORE:Show more`)
      * ```
      */
-    showMoreAppsTitle = input(t(() => $localize `:@@SI_LAUNCHPAD.SHOW_MORE:Show more`), ...(ngDevMode ? [{ debugName: "showMoreAppsTitle" }] : []));
+    showMoreAppsTitle = input(t(() => $localize `:@@SI_LAUNCHPAD.SHOW_MORE:Show more`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showMoreAppsTitle" }] : /* istanbul ignore next */ []));
     /**
      * Title or translate key for the show less apps button.
      *
@@ -109,33 +120,37 @@ class SiNavbarPrimaryComponent {
      * t(() => $localize`:@@SI_LAUNCHPAD.SHOW_LESS:Show less`)
      * ```
      */
-    showLessAppsTitle = input(t(() => $localize `:@@SI_LAUNCHPAD.SHOW_LESS:Show less`), ...(ngDevMode ? [{ debugName: "showLessAppsTitle" }] : []));
+    showLessAppsTitle = input(t(() => $localize `:@@SI_LAUNCHPAD.SHOW_LESS:Show less`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showLessAppsTitle" }] : /* istanbul ignore next */ []));
     /**
      * All app items shown in the launchpad. The launchpad will not be visible if the
      * app items are undefined. The launchpad will be visible if the app items are an
      * empty array.
      */
-    appItems = input(...(ngDevMode ? [undefined, { debugName: "appItems" }] : []));
+    appItems = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "appItems" }] : /* istanbul ignore next */ []));
     /**
      * Like `appItems` but with the addition of categories. If this is set, `appItems` is ignored.
      */
-    appCategoryItems = input(...(ngDevMode ? [undefined, { debugName: "appCategoryItems" }] : []));
+    appCategoryItems = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "appCategoryItems" }] : /* istanbul ignore next */ []));
     /**
      * Allow the user to favorite apps which will then be displayed at the top.
      *
      * @defaultValue false
      */
-    appItemsFavorites = input(false, { ...(ngDevMode ? { debugName: "appItemsFavorites" } : {}), transform: booleanAttribute });
+    appItemsFavorites = input(false, { ...(ngDevMode ? { debugName: "appItemsFavorites" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * "all apps" link in the launchpad
      */
-    allAppsLink = input(...(ngDevMode ? [undefined, { debugName: "allAppsLink" }] : []));
+    allAppsLink = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "allAppsLink" }] : /* istanbul ignore next */ []));
     /**
      * Specifies whether the component should automatically be focused as soon as it is loaded.
      *
      * @defaultValue false
      */
-    focusOnLoad = input(false, { ...(ngDevMode ? { debugName: "focusOnLoad" } : {}), transform: booleanAttribute });
+    focusOnLoad = input(false, { ...(ngDevMode ? { debugName: "focusOnLoad" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Marks the navbar as primary navigation element. Needed for a11y (screen reader).
      * Only one element should be primary. If multiple navbars are used, it's up to the
@@ -143,7 +158,8 @@ class SiNavbarPrimaryComponent {
      *
      * @defaultValue 'Primary'
      */
-    navAriaLabel = input('Primary', ...(ngDevMode ? [{ debugName: "navAriaLabel" }] : []));
+    navAriaLabel = input('Primary', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navAriaLabel" }] : /* istanbul ignore next */ []));
     /**
      * Text to close the launchpad. Needed for a11y.
      *
@@ -152,49 +168,58 @@ class SiNavbarPrimaryComponent {
      * t(() => $localize`:@@SI_LAUNCHPAD.CLOSE:Close launchpad`)
      * ```
      */
-    closeAppSwitcherText = input(t(() => $localize `:@@SI_LAUNCHPAD.CLOSE:Close launchpad`), ...(ngDevMode ? [{ debugName: "closeAppSwitcherText" }] : []));
+    closeAppSwitcherText = input(t(() => $localize `:@@SI_LAUNCHPAD.CLOSE:Close launchpad`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeAppSwitcherText" }] : /* istanbul ignore next */ []));
     /**
      * Text for the launchpad icon. Needed for a11y.
      *
      * @defaultValue
      * ```
-     * t(() => $localize`:@@SI_NAVBAR.OPEN_LAUNCHPAD:Open launchpad`)
+     * t(() => $localize`:@@SI_NAVBAR.OPEN_LAUNCHPAD:Switch app`)
      * ```
      */
-    openAppSwitcherText = input(t(() => $localize `:@@SI_NAVBAR.OPEN_LAUNCHPAD:Open launchpad`), ...(ngDevMode ? [{ debugName: "openAppSwitcherText" }] : []));
+    openAppSwitcherText = input(t(() => $localize `:@@SI_NAVBAR.OPEN_LAUNCHPAD:Switch app`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "openAppSwitcherText" }] : /* istanbul ignore next */ []));
     /**
      * Text or translate key for the toggle navigation icon. Needed for a11y.
      *
      * @defaultValue
      * ```
-     * t(() => $localize`:@@SI_NAVBAR.TOGGLE_NAVIGATION:Toggle navigation`)
+     * t(() => $localize`:@@SI_NAVBAR.TOGGLE_NAVIGATION:Show navigation`)
      * ```
      */
-    toggleNavigationText = input(t(() => $localize `:@@SI_NAVBAR.TOGGLE_NAVIGATION:Toggle navigation`), ...(ngDevMode ? [{ debugName: "toggleNavigationText" }] : []));
+    toggleNavigationText = input(t(() => $localize `:@@SI_NAVBAR.TOGGLE_NAVIGATION:Show navigation`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toggleNavigationText" }] : /* istanbul ignore next */ []));
     /**
      * Aria label for the main menu landmark
      *
      * @defaultValue 'Header main'
      */
-    ariaLabelMainMenu = input('Header main', ...(ngDevMode ? [{ debugName: "ariaLabelMainMenu" }] : []));
+    ariaLabelMainMenu = input('Header main', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabelMainMenu" }] : /* istanbul ignore next */ []));
     /**
      * Aria label for the secondary menu landmark
      *
      * @defaultValue 'Header secondary'
      */
-    ariaLabelSecondaryMenu = input('Header secondary', ...(ngDevMode ? [{ debugName: "ariaLabelSecondaryMenu" }] : []));
+    ariaLabelSecondaryMenu = input('Header secondary', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabelSecondaryMenu" }] : /* istanbul ignore next */ []));
     /** Emits the app item and its new favorite state when the user changes it. */
     appItemFavoriteChanged = output();
     /** @internal */
-    header = viewChild.required(SiApplicationHeaderComponent);
+    header = viewChild.required(SiApplicationHeaderComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
     /** @internal */
-    collapsibleActions = viewChild(SiHeaderCollapsibleActionsComponent, ...(ngDevMode ? [{ debugName: "collapsibleActions" }] : []));
+    collapsibleActions = viewChild(SiHeaderCollapsibleActionsComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsibleActions" }] : /* istanbul ignore next */ []));
     /** @internal */
-    navItemCount = signal(0, ...(ngDevMode ? [{ debugName: "navItemCount" }] : []));
+    navItemCount = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navItemCount" }] : /* istanbul ignore next */ []));
     newAppItems;
     active;
     /** @internal */
-    inlineDropdown = computed(() => this.header().inlineDropdown(), ...(ngDevMode ? [{ debugName: "inlineDropdown" }] : []));
+    inlineDropdown = computed(() => this.header().inlineDropdown(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inlineDropdown" }] : /* istanbul ignore next */ []));
     /** @internal */
     onDropdownItemTriggered() {
         this.header().onDropdownItemTriggered();
@@ -255,10 +280,10 @@ class SiNavbarPrimaryComponent {
     onFavoriteChange({ app, favorite }) {
         this.appItemFavoriteChanged.emit([app._src, favorite]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarPrimaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiNavbarPrimaryComponent, isStandalone: true, selector: "si-navbar-primary", inputs: { primaryItems: { classPropertyName: "primaryItems", publicName: "primaryItems", isSignal: true, isRequired: false, transformFunction: null }, accountItems: { classPropertyName: "accountItems", publicName: "accountItems", isSignal: true, isRequired: false, transformFunction: null }, account: { classPropertyName: "account", publicName: "account", isSignal: true, isRequired: false, transformFunction: null }, logoUrl: { classPropertyName: "logoUrl", publicName: "logoUrl", isSignal: true, isRequired: false, transformFunction: null }, appTitle: { classPropertyName: "appTitle", publicName: "appTitle", isSignal: true, isRequired: false, transformFunction: null }, home: { classPropertyName: "home", publicName: "home", isSignal: true, isRequired: false, transformFunction: null }, appSwitcherTitle: { classPropertyName: "appSwitcherTitle", publicName: "appSwitcherTitle", isSignal: true, isRequired: false, transformFunction: null }, appSwitcherSubTitle: { classPropertyName: "appSwitcherSubTitle", publicName: "appSwitcherSubTitle", isSignal: true, isRequired: false, transformFunction: null }, favoriteAppsTitle: { classPropertyName: "favoriteAppsTitle", publicName: "favoriteAppsTitle", isSignal: true, isRequired: false, transformFunction: null }, defaultAppsTitle: { classPropertyName: "defaultAppsTitle", publicName: "defaultAppsTitle", isSignal: true, isRequired: false, transformFunction: null }, showMoreAppsTitle: { classPropertyName: "showMoreAppsTitle", publicName: "showMoreAppsTitle", isSignal: true, isRequired: false, transformFunction: null }, showLessAppsTitle: { classPropertyName: "showLessAppsTitle", publicName: "showLessAppsTitle", isSignal: true, isRequired: false, transformFunction: null }, appItems: { classPropertyName: "appItems", publicName: "appItems", isSignal: true, isRequired: false, transformFunction: null }, appCategoryItems: { classPropertyName: "appCategoryItems", publicName: "appCategoryItems", isSignal: true, isRequired: false, transformFunction: null }, appItemsFavorites: { classPropertyName: "appItemsFavorites", publicName: "appItemsFavorites", isSignal: true, isRequired: false, transformFunction: null }, allAppsLink: { classPropertyName: "allAppsLink", publicName: "allAppsLink", isSignal: true, isRequired: false, transformFunction: null }, focusOnLoad: { classPropertyName: "focusOnLoad", publicName: "focusOnLoad", isSignal: true, isRequired: false, transformFunction: null }, navAriaLabel: { classPropertyName: "navAriaLabel", publicName: "navAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, closeAppSwitcherText: { classPropertyName: "closeAppSwitcherText", publicName: "closeAppSwitcherText", isSignal: true, isRequired: false, transformFunction: null }, openAppSwitcherText: { classPropertyName: "openAppSwitcherText", publicName: "openAppSwitcherText", isSignal: true, isRequired: false, transformFunction: null }, toggleNavigationText: { classPropertyName: "toggleNavigationText", publicName: "toggleNavigationText", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelMainMenu: { classPropertyName: "ariaLabelMainMenu", publicName: "ariaLabelMainMenu", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelSecondaryMenu: { classPropertyName: "ariaLabelSecondaryMenu", publicName: "ariaLabelSecondaryMenu", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { appItemFavoriteChanged: "appItemFavoriteChanged" }, providers: [{ provide: SI_HEADER_WITH_DROPDOWNS, useExisting: SiNavbarPrimaryComponent }], viewQueries: [{ propertyName: "header", first: true, predicate: SiApplicationHeaderComponent, descendants: true, isSignal: true }, { propertyName: "collapsibleActions", first: true, predicate: SiHeaderCollapsibleActionsComponent, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<si-application-header [launchpad]=\"newAppItems ? launchpad : undefined\">\n  <si-header-brand>\n    @if (logoUrl()) {\n      <a class=\"header-logo header-custom-logo px-6 focus-inside\" [siLink]=\"home()\">\n        <img alt=\"Siemens logo\" [src]=\"logoUrl()\" />\n      </a>\n    } @else {\n      <a siHeaderLogo class=\"d-none d-md-flex\" [siLink]=\"home()\"></a>\n    }\n    @if (appTitle()) {\n      <h1 class=\"application-name\">{{ appTitle() }}</h1>\n    }\n  </si-header-brand>\n\n  @if (primaryItems().length) {\n    <si-header-navigation [attr.aria-label]=\"ariaLabelMainMenu()\">\n      @for (item of primaryItems(); track $index) {\n        @if (item.items) {\n          <button\n            type=\"button\"\n            si-header-navigation-item\n            [siHeaderDropdownTriggerFor]=\"dropdown\"\n            [class.active]=\"active === item\"\n          >\n            {{ item.title | translate }}\n            <ng-template #dropdown>\n              <si-header-dropdown>\n                <si-header-dropdown-items-factory\n                  [items]=\"item.items\"\n                  (activeChange)=\"$event ? (active = item) : null\"\n                />\n              </si-header-dropdown>\n            </ng-template>\n          </button>\n        } @else {\n          <a\n            si-header-navigation-item\n            activeClass=\"active\"\n            [siLink]=\"item\"\n            (activeChange)=\"$event ? (active = item) : null\"\n          >\n            {{ item.title | translate }}\n          </a>\n        }\n      }\n    </si-header-navigation>\n  }\n  @if (navItemCount() || account()) {\n    <si-header-actions [attr.aria-label]=\"ariaLabelSecondaryMenu()\">\n      @if (navItemCount()) {\n        @if (navItemCount() === 1) {\n          <ng-container *ngTemplateOutlet=\"actions\" />\n        } @else {\n          <si-header-collapsible-actions>\n            <ng-container *ngTemplateOutlet=\"actions\" />\n          </si-header-collapsible-actions>\n        }\n      }\n      @if (account()) {\n        <!--eslint-disable @angular-eslint/template/elements-content -->\n        <button\n          si-header-account-item\n          type=\"button\"\n          [name]=\"account()!.title\"\n          [initials]=\"account()!.initials\"\n          [imageUrl]=\"account()!.image\"\n          [siHeaderDropdownTriggerFor]=\"accountDropdown\"\n        ></button>\n        <!--eslint-enable @angular-eslint/template/elements-content -->\n\n        <ng-template #accountDropdown>\n          <si-header-dropdown>\n            <div class=\"d-block userinfo mx-5 mb-4\">\n              <div class=\"si-h5 text-truncate\">{{ account()!.title }}</div>\n              @if (account()!.email) {\n                <div class=\"email\">{{ account()!.email }}</div>\n              }\n              <div class=\"d-flex align-items-center text-secondary mt-2\">\n                @if (account()!.company) {\n                  <span class=\"label me-4\">{{ account()!.company | translate }}</span>\n                }\n                @if (account()!.role) {\n                  <span class=\"ms-0 badge bg-default\">\n                    {{ account()!.role | translate }}\n                  </span>\n                }\n              </div>\n            </div>\n            @if (accountItems()?.length) {\n              <div class=\"d-block dropdown-divider\" role=\"separator\"></div>\n              <si-header-dropdown-items-factory [items]=\"accountItems()!\" />\n            }\n            @if (account()!.customContent) {\n              <div class=\"d-block dropdown-divider\" role=\"separator\"></div>\n              <ng-content />\n            }\n          </si-header-dropdown>\n        </ng-template>\n      }\n    </si-header-actions>\n  } @else {\n    <!-- Seems like @if makes ng-content believe that there is always a header-actions section. So we have to add it here. -->\n    <si-header-actions />\n  }\n</si-application-header>\n\n<ng-template #launchpad>\n  <si-launchpad-factory\n    [showLessAppsText]=\"showLessAppsTitle()\"\n    [showMoreAppsText]=\"showMoreAppsTitle()\"\n    [closeText]=\"closeAppSwitcherText()\"\n    [titleText]=\"appSwitcherTitle()\"\n    [subtitleText]=\"appSwitcherSubTitle()\"\n    [enableFavorites]=\"appItemsFavorites()\"\n    [favoriteAppsText]=\"favoriteAppsTitle()\"\n    [apps]=\"newAppItems!\"\n    (favoriteChange)=\"onFavoriteChange($event)\"\n  />\n</ng-template>\n<ng-template #actions>\n  <ng-content select=\"si-navbar-item[quickAction], element-navbar-item[quickAction='true']\" />\n</ng-template>\n", styles: [".header-custom-logo{content:initial;inline-size:auto}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: SiLinkDirective, selector: "[siLink]", inputs: ["siLink", "siLinkDefaultTarget", "actionParam", "activeClass", "exactMatch", "ariaCurrent"], outputs: ["activeChange"], exportAs: ["siLink"] }, { kind: "component", type: SiApplicationHeaderComponent, selector: "si-application-header", inputs: ["expandBreakpoint", "launchpad", "launchpadLabel"] }, { kind: "component", type: SiLaunchpadFactoryComponent, selector: "si-launchpad-factory", inputs: ["closeText", "titleText", "subtitleText", "apps", "enableFavorites", "favoriteAppsText", "showMoreAppsText", "showLessAppsText"], outputs: ["favoriteChange"] }, { kind: "component", type: SiHeaderAccountItemComponent, selector: "button[si-header-account-item]", inputs: ["name", "initials", "imageUrl"] }, { kind: "component", type: SiHeaderDropdownComponent, selector: "si-header-dropdown" }, { kind: "directive", type: SiHeaderDropdownTriggerDirective, selector: "[siHeaderDropdownTriggerFor]", inputs: ["siHeaderDropdownTriggerFor", "dropdownData"], outputs: ["openChange"], exportAs: ["siHeaderDropdownTrigger"] }, { kind: "component", type: SiHeaderDropdownItemsFactoryComponent, selector: "si-header-dropdown-items-factory", inputs: ["items"], outputs: ["activeChange"] }, { kind: "component", type: SiHeaderNavigationItemComponent, selector: "button[si-header-navigation-item], a[si-header-navigation-item]" }, { kind: "directive", type: SiHeaderBrandDirective, selector: "si-header-brand" }, { kind: "component", type: SiHeaderNavigationComponent, selector: "si-header-navigation" }, { kind: "directive", type: SiHeaderActionsDirective, selector: "si-header-actions" }, { kind: "component", type: SiHeaderCollapsibleActionsComponent, selector: "si-header-collapsible-actions", inputs: ["mobileToggleLabel"] }, { kind: "directive", type: SiHeaderLogoDirective, selector: "si-header-logo, [siHeaderLogo]" }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Default });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiNavbarPrimaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiNavbarPrimaryComponent, isStandalone: true, selector: "si-navbar-primary", inputs: { primaryItems: { classPropertyName: "primaryItems", publicName: "primaryItems", isSignal: true, isRequired: false, transformFunction: null }, accountItems: { classPropertyName: "accountItems", publicName: "accountItems", isSignal: true, isRequired: false, transformFunction: null }, account: { classPropertyName: "account", publicName: "account", isSignal: true, isRequired: false, transformFunction: null }, logoUrl: { classPropertyName: "logoUrl", publicName: "logoUrl", isSignal: true, isRequired: false, transformFunction: null }, appTitle: { classPropertyName: "appTitle", publicName: "appTitle", isSignal: true, isRequired: false, transformFunction: null }, home: { classPropertyName: "home", publicName: "home", isSignal: true, isRequired: false, transformFunction: null }, appSwitcherTitle: { classPropertyName: "appSwitcherTitle", publicName: "appSwitcherTitle", isSignal: true, isRequired: false, transformFunction: null }, appSwitcherSubTitle: { classPropertyName: "appSwitcherSubTitle", publicName: "appSwitcherSubTitle", isSignal: true, isRequired: false, transformFunction: null }, favoriteAppsTitle: { classPropertyName: "favoriteAppsTitle", publicName: "favoriteAppsTitle", isSignal: true, isRequired: false, transformFunction: null }, defaultAppsTitle: { classPropertyName: "defaultAppsTitle", publicName: "defaultAppsTitle", isSignal: true, isRequired: false, transformFunction: null }, showMoreAppsTitle: { classPropertyName: "showMoreAppsTitle", publicName: "showMoreAppsTitle", isSignal: true, isRequired: false, transformFunction: null }, showLessAppsTitle: { classPropertyName: "showLessAppsTitle", publicName: "showLessAppsTitle", isSignal: true, isRequired: false, transformFunction: null }, appItems: { classPropertyName: "appItems", publicName: "appItems", isSignal: true, isRequired: false, transformFunction: null }, appCategoryItems: { classPropertyName: "appCategoryItems", publicName: "appCategoryItems", isSignal: true, isRequired: false, transformFunction: null }, appItemsFavorites: { classPropertyName: "appItemsFavorites", publicName: "appItemsFavorites", isSignal: true, isRequired: false, transformFunction: null }, allAppsLink: { classPropertyName: "allAppsLink", publicName: "allAppsLink", isSignal: true, isRequired: false, transformFunction: null }, focusOnLoad: { classPropertyName: "focusOnLoad", publicName: "focusOnLoad", isSignal: true, isRequired: false, transformFunction: null }, navAriaLabel: { classPropertyName: "navAriaLabel", publicName: "navAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, closeAppSwitcherText: { classPropertyName: "closeAppSwitcherText", publicName: "closeAppSwitcherText", isSignal: true, isRequired: false, transformFunction: null }, openAppSwitcherText: { classPropertyName: "openAppSwitcherText", publicName: "openAppSwitcherText", isSignal: true, isRequired: false, transformFunction: null }, toggleNavigationText: { classPropertyName: "toggleNavigationText", publicName: "toggleNavigationText", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelMainMenu: { classPropertyName: "ariaLabelMainMenu", publicName: "ariaLabelMainMenu", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelSecondaryMenu: { classPropertyName: "ariaLabelSecondaryMenu", publicName: "ariaLabelSecondaryMenu", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { appItemFavoriteChanged: "appItemFavoriteChanged" }, providers: [{ provide: SI_HEADER_WITH_DROPDOWNS, useExisting: SiNavbarPrimaryComponent }], viewQueries: [{ propertyName: "header", first: true, predicate: SiApplicationHeaderComponent, descendants: true, isSignal: true }, { propertyName: "collapsibleActions", first: true, predicate: SiHeaderCollapsibleActionsComponent, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<si-application-header [launchpad]=\"newAppItems ? launchpad : undefined\">\n  <si-header-brand>\n    @if (logoUrl()) {\n      <a class=\"header-logo header-custom-logo px-6 focus-inside\" [siLink]=\"home()\">\n        <img alt=\"Siemens logo\" [src]=\"logoUrl()\" />\n      </a>\n    } @else {\n      <a siHeaderLogo class=\"d-none d-md-flex\" [siLink]=\"home()\"></a>\n    }\n    @if (appTitle()) {\n      <h1 class=\"application-name\">{{ appTitle() }}</h1>\n    }\n  </si-header-brand>\n\n  @if (primaryItems().length) {\n    <si-header-navigation [attr.aria-label]=\"ariaLabelMainMenu()\">\n      @for (item of primaryItems(); track $index) {\n        @if (item.items) {\n          <button\n            type=\"button\"\n            si-header-navigation-item\n            [siHeaderDropdownTriggerFor]=\"dropdown\"\n            [class.active]=\"active === item\"\n          >\n            {{ item.title | translate }}\n            <ng-template #dropdown>\n              <si-header-dropdown>\n                <si-header-dropdown-items-factory\n                  [items]=\"item.items\"\n                  (activeChange)=\"$event ? (active = item) : null\"\n                />\n              </si-header-dropdown>\n            </ng-template>\n          </button>\n        } @else {\n          <a\n            si-header-navigation-item\n            activeClass=\"active\"\n            [siLink]=\"item\"\n            (activeChange)=\"$event ? (active = item) : null\"\n          >\n            {{ item.title | translate }}\n          </a>\n        }\n      }\n    </si-header-navigation>\n  }\n  @if (navItemCount() || account()) {\n    <si-header-actions [attr.aria-label]=\"ariaLabelSecondaryMenu()\">\n      @if (navItemCount()) {\n        @if (navItemCount() === 1) {\n          <ng-container *ngTemplateOutlet=\"actions\" />\n        } @else {\n          <si-header-collapsible-actions>\n            <ng-container *ngTemplateOutlet=\"actions\" />\n          </si-header-collapsible-actions>\n        }\n      }\n      @if (account()) {\n        <!--eslint-disable @angular-eslint/template/elements-content -->\n        <button\n          si-header-account-item\n          type=\"button\"\n          [name]=\"account()!.title\"\n          [initials]=\"account()!.initials\"\n          [imageUrl]=\"account()!.image\"\n          [siHeaderDropdownTriggerFor]=\"accountDropdown\"\n        ></button>\n        <!--eslint-enable @angular-eslint/template/elements-content -->\n\n        <ng-template #accountDropdown>\n          <si-header-dropdown>\n            <div class=\"d-block userinfo mx-5 mb-4\">\n              <div class=\"si-h5 text-truncate\">{{ account()!.title }}</div>\n              @if (account()!.email) {\n                <div class=\"email\">{{ account()!.email }}</div>\n              }\n              <div class=\"d-flex align-items-center text-secondary mt-2\">\n                @if (account()!.company) {\n                  <span class=\"label me-4\">{{ account()!.company | translate }}</span>\n                }\n                @if (account()!.role) {\n                  <span class=\"ms-0 badge bg-default\">\n                    {{ account()!.role | translate }}\n                  </span>\n                }\n              </div>\n            </div>\n            @if (accountItems()?.length) {\n              <div class=\"d-block dropdown-divider\" role=\"separator\"></div>\n              <si-header-dropdown-items-factory [items]=\"accountItems()!\" />\n            }\n            @if (account()!.customContent) {\n              <div class=\"d-block dropdown-divider\" role=\"separator\"></div>\n              <ng-content />\n            }\n          </si-header-dropdown>\n        </ng-template>\n      }\n    </si-header-actions>\n  } @else {\n    <!-- Seems like @if makes ng-content believe that there is always a header-actions section. So we have to add it here. -->\n    <si-header-actions />\n  }\n</si-application-header>\n\n<ng-template #launchpad>\n  <si-launchpad-factory\n    [showLessAppsText]=\"showLessAppsTitle()\"\n    [showMoreAppsText]=\"showMoreAppsTitle()\"\n    [closeText]=\"closeAppSwitcherText()\"\n    [titleText]=\"appSwitcherTitle()\"\n    [subtitleText]=\"appSwitcherSubTitle()\"\n    [enableFavorites]=\"appItemsFavorites()\"\n    [favoriteAppsText]=\"favoriteAppsTitle()\"\n    [apps]=\"newAppItems!\"\n    (favoriteChange)=\"onFavoriteChange($event)\"\n  />\n</ng-template>\n<ng-template #actions>\n  <ng-content select=\"si-navbar-item[quickAction], element-navbar-item[quickAction='true']\" />\n</ng-template>\n", styles: [".header-custom-logo{content:initial;inline-size:auto}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: SiLinkDirective, selector: "[siLink]", inputs: ["siLink", "siLinkDefaultTarget", "actionParam", "activeClass", "exactMatch", "ariaCurrent"], outputs: ["activeChange"], exportAs: ["siLink"] }, { kind: "component", type: SiApplicationHeaderComponent, selector: "si-application-header", inputs: ["expandBreakpoint", "launchpad", "launchpadLabel"] }, { kind: "component", type: SiLaunchpadFactoryComponent, selector: "si-launchpad-factory", inputs: ["closeText", "titleText", "subtitleText", "apps", "enableFavorites", "favoriteAppsText", "showMoreAppsText", "showLessAppsText"], outputs: ["favoriteChange"] }, { kind: "component", type: SiHeaderAccountItemComponent, selector: "button[si-header-account-item]", inputs: ["name", "initials", "imageUrl"] }, { kind: "component", type: SiHeaderDropdownComponent, selector: "si-header-dropdown" }, { kind: "directive", type: SiHeaderDropdownTriggerDirective, selector: "[siHeaderDropdownTriggerFor]", inputs: ["siHeaderDropdownTriggerFor", "dropdownData"], outputs: ["openChange"], exportAs: ["siHeaderDropdownTrigger"] }, { kind: "component", type: SiHeaderDropdownItemsFactoryComponent, selector: "si-header-dropdown-items-factory", inputs: ["items"], outputs: ["activeChange"] }, { kind: "component", type: SiHeaderNavigationItemComponent, selector: "button[si-header-navigation-item], a[si-header-navigation-item]" }, { kind: "directive", type: SiHeaderBrandDirective, selector: "si-header-brand" }, { kind: "component", type: SiHeaderNavigationComponent, selector: "si-header-navigation" }, { kind: "directive", type: SiHeaderActionsDirective, selector: "si-header-actions" }, { kind: "component", type: SiHeaderCollapsibleActionsComponent, selector: "si-header-collapsible-actions", inputs: ["mobileToggleLabel"] }, { kind: "directive", type: SiHeaderLogoDirective, selector: "si-header-logo, [siHeaderLogo]" }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarPrimaryComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiNavbarPrimaryComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-navbar-primary', imports: [
                         A11yModule,
@@ -277,7 +302,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         SiHeaderActionsDirective,
                         SiHeaderCollapsibleActionsComponent,
                         SiHeaderLogoDirective
-                    ], providers: [{ provide: SI_HEADER_WITH_DROPDOWNS, useExisting: SiNavbarPrimaryComponent }], changeDetection: ChangeDetectionStrategy.Default, template: "<si-application-header [launchpad]=\"newAppItems ? launchpad : undefined\">\n  <si-header-brand>\n    @if (logoUrl()) {\n      <a class=\"header-logo header-custom-logo px-6 focus-inside\" [siLink]=\"home()\">\n        <img alt=\"Siemens logo\" [src]=\"logoUrl()\" />\n      </a>\n    } @else {\n      <a siHeaderLogo class=\"d-none d-md-flex\" [siLink]=\"home()\"></a>\n    }\n    @if (appTitle()) {\n      <h1 class=\"application-name\">{{ appTitle() }}</h1>\n    }\n  </si-header-brand>\n\n  @if (primaryItems().length) {\n    <si-header-navigation [attr.aria-label]=\"ariaLabelMainMenu()\">\n      @for (item of primaryItems(); track $index) {\n        @if (item.items) {\n          <button\n            type=\"button\"\n            si-header-navigation-item\n            [siHeaderDropdownTriggerFor]=\"dropdown\"\n            [class.active]=\"active === item\"\n          >\n            {{ item.title | translate }}\n            <ng-template #dropdown>\n              <si-header-dropdown>\n                <si-header-dropdown-items-factory\n                  [items]=\"item.items\"\n                  (activeChange)=\"$event ? (active = item) : null\"\n                />\n              </si-header-dropdown>\n            </ng-template>\n          </button>\n        } @else {\n          <a\n            si-header-navigation-item\n            activeClass=\"active\"\n            [siLink]=\"item\"\n            (activeChange)=\"$event ? (active = item) : null\"\n          >\n            {{ item.title | translate }}\n          </a>\n        }\n      }\n    </si-header-navigation>\n  }\n  @if (navItemCount() || account()) {\n    <si-header-actions [attr.aria-label]=\"ariaLabelSecondaryMenu()\">\n      @if (navItemCount()) {\n        @if (navItemCount() === 1) {\n          <ng-container *ngTemplateOutlet=\"actions\" />\n        } @else {\n          <si-header-collapsible-actions>\n            <ng-container *ngTemplateOutlet=\"actions\" />\n          </si-header-collapsible-actions>\n        }\n      }\n      @if (account()) {\n        <!--eslint-disable @angular-eslint/template/elements-content -->\n        <button\n          si-header-account-item\n          type=\"button\"\n          [name]=\"account()!.title\"\n          [initials]=\"account()!.initials\"\n          [imageUrl]=\"account()!.image\"\n          [siHeaderDropdownTriggerFor]=\"accountDropdown\"\n        ></button>\n        <!--eslint-enable @angular-eslint/template/elements-content -->\n\n        <ng-template #accountDropdown>\n          <si-header-dropdown>\n            <div class=\"d-block userinfo mx-5 mb-4\">\n              <div class=\"si-h5 text-truncate\">{{ account()!.title }}</div>\n              @if (account()!.email) {\n                <div class=\"email\">{{ account()!.email }}</div>\n              }\n              <div class=\"d-flex align-items-center text-secondary mt-2\">\n                @if (account()!.company) {\n                  <span class=\"label me-4\">{{ account()!.company | translate }}</span>\n                }\n                @if (account()!.role) {\n                  <span class=\"ms-0 badge bg-default\">\n                    {{ account()!.role | translate }}\n                  </span>\n                }\n              </div>\n            </div>\n            @if (accountItems()?.length) {\n              <div class=\"d-block dropdown-divider\" role=\"separator\"></div>\n              <si-header-dropdown-items-factory [items]=\"accountItems()!\" />\n            }\n            @if (account()!.customContent) {\n              <div class=\"d-block dropdown-divider\" role=\"separator\"></div>\n              <ng-content />\n            }\n          </si-header-dropdown>\n        </ng-template>\n      }\n    </si-header-actions>\n  } @else {\n    <!-- Seems like @if makes ng-content believe that there is always a header-actions section. So we have to add it here. -->\n    <si-header-actions />\n  }\n</si-application-header>\n\n<ng-template #launchpad>\n  <si-launchpad-factory\n    [showLessAppsText]=\"showLessAppsTitle()\"\n    [showMoreAppsText]=\"showMoreAppsTitle()\"\n    [closeText]=\"closeAppSwitcherText()\"\n    [titleText]=\"appSwitcherTitle()\"\n    [subtitleText]=\"appSwitcherSubTitle()\"\n    [enableFavorites]=\"appItemsFavorites()\"\n    [favoriteAppsText]=\"favoriteAppsTitle()\"\n    [apps]=\"newAppItems!\"\n    (favoriteChange)=\"onFavoriteChange($event)\"\n  />\n</ng-template>\n<ng-template #actions>\n  <ng-content select=\"si-navbar-item[quickAction], element-navbar-item[quickAction='true']\" />\n</ng-template>\n", styles: [".header-custom-logo{content:initial;inline-size:auto}\n"] }]
+                    ], providers: [{ provide: SI_HEADER_WITH_DROPDOWNS, useExisting: SiNavbarPrimaryComponent }], changeDetection: ChangeDetectionStrategy.Eager, template: "<si-application-header [launchpad]=\"newAppItems ? launchpad : undefined\">\n  <si-header-brand>\n    @if (logoUrl()) {\n      <a class=\"header-logo header-custom-logo px-6 focus-inside\" [siLink]=\"home()\">\n        <img alt=\"Siemens logo\" [src]=\"logoUrl()\" />\n      </a>\n    } @else {\n      <a siHeaderLogo class=\"d-none d-md-flex\" [siLink]=\"home()\"></a>\n    }\n    @if (appTitle()) {\n      <h1 class=\"application-name\">{{ appTitle() }}</h1>\n    }\n  </si-header-brand>\n\n  @if (primaryItems().length) {\n    <si-header-navigation [attr.aria-label]=\"ariaLabelMainMenu()\">\n      @for (item of primaryItems(); track $index) {\n        @if (item.items) {\n          <button\n            type=\"button\"\n            si-header-navigation-item\n            [siHeaderDropdownTriggerFor]=\"dropdown\"\n            [class.active]=\"active === item\"\n          >\n            {{ item.title | translate }}\n            <ng-template #dropdown>\n              <si-header-dropdown>\n                <si-header-dropdown-items-factory\n                  [items]=\"item.items\"\n                  (activeChange)=\"$event ? (active = item) : null\"\n                />\n              </si-header-dropdown>\n            </ng-template>\n          </button>\n        } @else {\n          <a\n            si-header-navigation-item\n            activeClass=\"active\"\n            [siLink]=\"item\"\n            (activeChange)=\"$event ? (active = item) : null\"\n          >\n            {{ item.title | translate }}\n          </a>\n        }\n      }\n    </si-header-navigation>\n  }\n  @if (navItemCount() || account()) {\n    <si-header-actions [attr.aria-label]=\"ariaLabelSecondaryMenu()\">\n      @if (navItemCount()) {\n        @if (navItemCount() === 1) {\n          <ng-container *ngTemplateOutlet=\"actions\" />\n        } @else {\n          <si-header-collapsible-actions>\n            <ng-container *ngTemplateOutlet=\"actions\" />\n          </si-header-collapsible-actions>\n        }\n      }\n      @if (account()) {\n        <!--eslint-disable @angular-eslint/template/elements-content -->\n        <button\n          si-header-account-item\n          type=\"button\"\n          [name]=\"account()!.title\"\n          [initials]=\"account()!.initials\"\n          [imageUrl]=\"account()!.image\"\n          [siHeaderDropdownTriggerFor]=\"accountDropdown\"\n        ></button>\n        <!--eslint-enable @angular-eslint/template/elements-content -->\n\n        <ng-template #accountDropdown>\n          <si-header-dropdown>\n            <div class=\"d-block userinfo mx-5 mb-4\">\n              <div class=\"si-h5 text-truncate\">{{ account()!.title }}</div>\n              @if (account()!.email) {\n                <div class=\"email\">{{ account()!.email }}</div>\n              }\n              <div class=\"d-flex align-items-center text-secondary mt-2\">\n                @if (account()!.company) {\n                  <span class=\"label me-4\">{{ account()!.company | translate }}</span>\n                }\n                @if (account()!.role) {\n                  <span class=\"ms-0 badge bg-default\">\n                    {{ account()!.role | translate }}\n                  </span>\n                }\n              </div>\n            </div>\n            @if (accountItems()?.length) {\n              <div class=\"d-block dropdown-divider\" role=\"separator\"></div>\n              <si-header-dropdown-items-factory [items]=\"accountItems()!\" />\n            }\n            @if (account()!.customContent) {\n              <div class=\"d-block dropdown-divider\" role=\"separator\"></div>\n              <ng-content />\n            }\n          </si-header-dropdown>\n        </ng-template>\n      }\n    </si-header-actions>\n  } @else {\n    <!-- Seems like @if makes ng-content believe that there is always a header-actions section. So we have to add it here. -->\n    <si-header-actions />\n  }\n</si-application-header>\n\n<ng-template #launchpad>\n  <si-launchpad-factory\n    [showLessAppsText]=\"showLessAppsTitle()\"\n    [showMoreAppsText]=\"showMoreAppsTitle()\"\n    [closeText]=\"closeAppSwitcherText()\"\n    [titleText]=\"appSwitcherTitle()\"\n    [subtitleText]=\"appSwitcherSubTitle()\"\n    [enableFavorites]=\"appItemsFavorites()\"\n    [favoriteAppsText]=\"favoriteAppsTitle()\"\n    [apps]=\"newAppItems!\"\n    (favoriteChange)=\"onFavoriteChange($event)\"\n  />\n</ng-template>\n<ng-template #actions>\n  <ng-content select=\"si-navbar-item[quickAction], element-navbar-item[quickAction='true']\" />\n</ng-template>\n", styles: [".header-custom-logo{content:initial;inline-size:auto}\n"] }]
         }], propDecorators: { primaryItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryItems", required: false }] }], accountItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "accountItems", required: false }] }], account: [{ type: i0.Input, args: [{ isSignal: true, alias: "account", required: false }] }], logoUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoUrl", required: false }] }], appTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "appTitle", required: false }] }], home: [{ type: i0.Input, args: [{ isSignal: true, alias: "home", required: false }] }], appSwitcherTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "appSwitcherTitle", required: false }] }], appSwitcherSubTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "appSwitcherSubTitle", required: false }] }], favoriteAppsTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "favoriteAppsTitle", required: false }] }], defaultAppsTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultAppsTitle", required: false }] }], showMoreAppsTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMoreAppsTitle", required: false }] }], showLessAppsTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLessAppsTitle", required: false }] }], appItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "appItems", required: false }] }], appCategoryItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "appCategoryItems", required: false }] }], appItemsFavorites: [{ type: i0.Input, args: [{ isSignal: true, alias: "appItemsFavorites", required: false }] }], allAppsLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "allAppsLink", required: false }] }], focusOnLoad: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusOnLoad", required: false }] }], navAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "navAriaLabel", required: false }] }], closeAppSwitcherText: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeAppSwitcherText", required: false }] }], openAppSwitcherText: [{ type: i0.Input, args: [{ isSignal: true, alias: "openAppSwitcherText", required: false }] }], toggleNavigationText: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleNavigationText", required: false }] }], ariaLabelMainMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelMainMenu", required: false }] }], ariaLabelSecondaryMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelSecondaryMenu", required: false }] }], appItemFavoriteChanged: [{ type: i0.Output, args: ["appItemFavoriteChanged"] }], header: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SiApplicationHeaderComponent), { isSignal: true }] }], collapsibleActions: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SiHeaderCollapsibleActionsComponent), { isSignal: true }] }] } });
 
 /**
@@ -290,14 +315,16 @@ class SiNavbarItemComponent {
     /**
      * MenuItem to display in the navbar.
      */
-    item = input.required(...(ngDevMode ? [{ debugName: "item" }] : []));
+    item = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
     /**
      * Is the item a quick action displayed on the end (right in LTR) side
      *
      * @defaultValue false
      */
-    quickAction = input(false, { ...(ngDevMode ? { debugName: "quickAction" } : {}), transform: booleanAttribute });
-    dropdownTrigger = viewChild(SiHeaderDropdownTriggerDirective, ...(ngDevMode ? [{ debugName: "dropdownTrigger" }] : []));
+    quickAction = input(false, { ...(ngDevMode ? { debugName: "quickAction" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    dropdownTrigger = viewChild(SiHeaderDropdownTriggerDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dropdownTrigger" }] : /* istanbul ignore next */ []));
     active = false;
     navbar = inject(SiNavbarPrimaryComponent);
     hasBadge = false;
@@ -329,10 +356,10 @@ class SiNavbarItemComponent {
     get visuallyHideTitle() {
         return !this.navbar.collapsibleActions()?.mobileExpanded();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiNavbarItemComponent, isStandalone: true, selector: "si-navbar-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, quickAction: { classPropertyName: "quickAction", publicName: "quickAction", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "d-contents" }, viewQueries: [{ propertyName: "dropdownTrigger", first: true, predicate: SiHeaderDropdownTriggerDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (item().items || item().customContent) {\n  <button\n    type=\"button\"\n    class=\"header-item focus-inside\"\n    [class.active]=\"active\"\n    [attr.aria-label]=\"item().title | translate\"\n    [siHeaderDropdownTriggerFor]=\"dropdown\"\n    (click)=\"click()\"\n  >\n    <ng-container *ngTemplateOutlet=\"itemContent\" />\n    <si-icon class=\"dropdown-caret\" [icon]=\"icons.elementDown2\" />\n  </button>\n} @else {\n  <a\n    class=\"header-item focus-inside\"\n    activeClass=\"active\"\n    [siLink]=\"item()\"\n    [attr.aria-label]=\"item().title | translate\"\n    (activeChange)=\"active = $event\"\n    (click)=\"click()\"\n  >\n    <ng-container *ngTemplateOutlet=\"itemContent\" />\n  </a>\n}\n\n<ng-template #itemContent>\n  @let icon = item().icon;\n  @if (icon) {\n    <si-icon class=\"icon\" [icon]=\"icon\" />\n  }\n  @if (item().badge) {\n    <div class=\"badge-text\">{{ item().badge }}</div>\n  }\n  <ng-content select=\"si-avatar\" />\n  <div class=\"item-title\" [class.visually-hidden]=\"visuallyHideTitle\">\n    {{ item().title | translate }}\n  </div>\n</ng-template>\n\n<ng-template #dropdown>\n  <si-header-dropdown>\n    @if (item().items) {\n      <si-header-dropdown-items-factory [items]=\"item().items!\" (activeChange)=\"active = $event\" />\n    }\n    @if (item().customContent) {\n      <ng-content />\n    }\n  </si-header-dropdown>\n</ng-template>\n", dependencies: [{ kind: "directive", type: SiLinkDirective, selector: "[siLink]", inputs: ["siLink", "siLinkDefaultTarget", "actionParam", "activeClass", "exactMatch", "ariaCurrent"], outputs: ["activeChange"], exportAs: ["siLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SiHeaderDropdownComponent, selector: "si-header-dropdown" }, { kind: "component", type: SiHeaderDropdownItemsFactoryComponent, selector: "si-header-dropdown-items-factory", inputs: ["items"], outputs: ["activeChange"] }, { kind: "directive", type: SiHeaderDropdownTriggerDirective, selector: "[siHeaderDropdownTriggerFor]", inputs: ["siHeaderDropdownTriggerFor", "dropdownData"], outputs: ["openChange"], exportAs: ["siHeaderDropdownTrigger"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Default });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiNavbarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiNavbarItemComponent, isStandalone: true, selector: "si-navbar-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, quickAction: { classPropertyName: "quickAction", publicName: "quickAction", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "d-contents" }, viewQueries: [{ propertyName: "dropdownTrigger", first: true, predicate: SiHeaderDropdownTriggerDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (item().items || item().customContent) {\n  <button\n    type=\"button\"\n    class=\"header-item focus-inside\"\n    [class.active]=\"active\"\n    [attr.aria-label]=\"item().title | translate\"\n    [siHeaderDropdownTriggerFor]=\"dropdown\"\n    (click)=\"click()\"\n  >\n    <ng-container *ngTemplateOutlet=\"itemContent\" />\n    <si-icon class=\"dropdown-caret\" [icon]=\"icons.elementDown2\" />\n  </button>\n} @else {\n  <a\n    class=\"header-item focus-inside\"\n    activeClass=\"active\"\n    [siLink]=\"item()\"\n    [attr.aria-label]=\"item().title | translate\"\n    (activeChange)=\"active = $event\"\n    (click)=\"click()\"\n  >\n    <ng-container *ngTemplateOutlet=\"itemContent\" />\n  </a>\n}\n\n<ng-template #itemContent>\n  @let icon = item().icon;\n  @if (icon) {\n    <si-icon class=\"icon\" [icon]=\"icon\" />\n  }\n  @if (item().badge) {\n    <div class=\"badge-text\">{{ item().badge }}</div>\n  }\n  <ng-content select=\"si-avatar\" />\n  <div class=\"item-title\" [class.visually-hidden]=\"visuallyHideTitle\">\n    {{ item().title | translate }}\n  </div>\n</ng-template>\n\n<ng-template #dropdown>\n  <si-header-dropdown>\n    @if (item().items) {\n      <si-header-dropdown-items-factory [items]=\"item().items!\" (activeChange)=\"active = $event\" />\n    }\n    @if (item().customContent) {\n      <ng-content />\n    }\n  </si-header-dropdown>\n</ng-template>\n", dependencies: [{ kind: "directive", type: SiLinkDirective, selector: "[siLink]", inputs: ["siLink", "siLinkDefaultTarget", "actionParam", "activeClass", "exactMatch", "ariaCurrent"], outputs: ["activeChange"], exportAs: ["siLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SiHeaderDropdownComponent, selector: "si-header-dropdown" }, { kind: "component", type: SiHeaderDropdownItemsFactoryComponent, selector: "si-header-dropdown-items-factory", inputs: ["items"], outputs: ["activeChange"] }, { kind: "directive", type: SiHeaderDropdownTriggerDirective, selector: "[siHeaderDropdownTriggerFor]", inputs: ["siHeaderDropdownTriggerFor", "dropdownData"], outputs: ["openChange"], exportAs: ["siHeaderDropdownTrigger"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiNavbarItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-navbar-item', imports: [
                         SiLinkDirective,
@@ -342,7 +369,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         SiHeaderDropdownItemsFactoryComponent,
                         SiHeaderDropdownTriggerDirective,
                         SiIconComponent
-                    ], changeDetection: ChangeDetectionStrategy.Default, host: { class: 'd-contents' }, template: "@if (item().items || item().customContent) {\n  <button\n    type=\"button\"\n    class=\"header-item focus-inside\"\n    [class.active]=\"active\"\n    [attr.aria-label]=\"item().title | translate\"\n    [siHeaderDropdownTriggerFor]=\"dropdown\"\n    (click)=\"click()\"\n  >\n    <ng-container *ngTemplateOutlet=\"itemContent\" />\n    <si-icon class=\"dropdown-caret\" [icon]=\"icons.elementDown2\" />\n  </button>\n} @else {\n  <a\n    class=\"header-item focus-inside\"\n    activeClass=\"active\"\n    [siLink]=\"item()\"\n    [attr.aria-label]=\"item().title | translate\"\n    (activeChange)=\"active = $event\"\n    (click)=\"click()\"\n  >\n    <ng-container *ngTemplateOutlet=\"itemContent\" />\n  </a>\n}\n\n<ng-template #itemContent>\n  @let icon = item().icon;\n  @if (icon) {\n    <si-icon class=\"icon\" [icon]=\"icon\" />\n  }\n  @if (item().badge) {\n    <div class=\"badge-text\">{{ item().badge }}</div>\n  }\n  <ng-content select=\"si-avatar\" />\n  <div class=\"item-title\" [class.visually-hidden]=\"visuallyHideTitle\">\n    {{ item().title | translate }}\n  </div>\n</ng-template>\n\n<ng-template #dropdown>\n  <si-header-dropdown>\n    @if (item().items) {\n      <si-header-dropdown-items-factory [items]=\"item().items!\" (activeChange)=\"active = $event\" />\n    }\n    @if (item().customContent) {\n      <ng-content />\n    }\n  </si-header-dropdown>\n</ng-template>\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, host: { class: 'd-contents' }, template: "@if (item().items || item().customContent) {\n  <button\n    type=\"button\"\n    class=\"header-item focus-inside\"\n    [class.active]=\"active\"\n    [attr.aria-label]=\"item().title | translate\"\n    [siHeaderDropdownTriggerFor]=\"dropdown\"\n    (click)=\"click()\"\n  >\n    <ng-container *ngTemplateOutlet=\"itemContent\" />\n    <si-icon class=\"dropdown-caret\" [icon]=\"icons.elementDown2\" />\n  </button>\n} @else {\n  <a\n    class=\"header-item focus-inside\"\n    activeClass=\"active\"\n    [siLink]=\"item()\"\n    [attr.aria-label]=\"item().title | translate\"\n    (activeChange)=\"active = $event\"\n    (click)=\"click()\"\n  >\n    <ng-container *ngTemplateOutlet=\"itemContent\" />\n  </a>\n}\n\n<ng-template #itemContent>\n  @let icon = item().icon;\n  @if (icon) {\n    <si-icon class=\"icon\" [icon]=\"icon\" />\n  }\n  @if (item().badge) {\n    <div class=\"badge-text\">{{ item().badge }}</div>\n  }\n  <ng-content select=\"si-avatar\" />\n  <div class=\"item-title\" [class.visually-hidden]=\"visuallyHideTitle\">\n    {{ item().title | translate }}\n  </div>\n</ng-template>\n\n<ng-template #dropdown>\n  <si-header-dropdown>\n    @if (item().items) {\n      <si-header-dropdown-items-factory [items]=\"item().items!\" (activeChange)=\"active = $event\" />\n    }\n    @if (item().customContent) {\n      <ng-content />\n    }\n  </si-header-dropdown>\n</ng-template>\n" }]
         }], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], quickAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "quickAction", required: false }] }], dropdownTrigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SiHeaderDropdownTriggerDirective), { isSignal: true }] }] } });
 
 /**
@@ -362,11 +389,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
 const components = [SiNavbarItemComponent, SiNavbarPrimaryComponent];
 /** @deprecated Use the new `si-application-header` instead. */
 class SiNavbarModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarModule, imports: [SiNavbarItemComponent, SiNavbarPrimaryComponent], exports: [SiNavbarItemComponent, SiNavbarPrimaryComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarModule, imports: [components] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiNavbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: SiNavbarModule, imports: [SiNavbarItemComponent, SiNavbarPrimaryComponent], exports: [SiNavbarItemComponent, SiNavbarPrimaryComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiNavbarModule, imports: [components] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiNavbarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: components,