@siemens/element-ng 49.14.0 → 49.15.0

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, HostListener, Directive, ElementRef, computed, afterNextRender, booleanAttribute, model, output } 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 { 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';
@@ -14,8 +14,8 @@ import { Subject, of } from 'rxjs';
 import { switchMap, map } from 'rxjs/operators';
 import { SiTooltipService, SiTooltipDirective } from '@siemens/element-ng/tooltip';
 import { SiAvatarComponent } from '@siemens/element-ng/avatar';
-import { ActivatedRoute, RouterLinkActive, RouterLink } from '@angular/router';
 import { SiLinkModule } from '@siemens/element-ng/link';
+import { ActivatedRoute, RouterLinkActive, RouterLink } from '@angular/router';
 
 /**
  * Copyright (c) Siemens 2016 - 2026
@@ -30,8 +30,11 @@ class SiApplicationHeaderComponent {
      * @defaultValue 'sm'
      */
     expandBreakpoint = input('sm', ...(ngDevMode ? [{ debugName: "expandBreakpoint" }] : []));
+    /** Template reference for the launchpad content rendered inside the header. */
     launchpad = input(...(ngDevMode ? [undefined, { debugName: "launchpad" }] : []));
     /**
+     * Accessible label for the launchpad toggle button.
+     *
      * @defaultValue
      * ```
      * t(() => $localize`:@@SI_APPLICATION_HEADER.LAUNCHPAD:Launchpad`)
@@ -348,7 +351,9 @@ class SiHeaderActionItemBase {
         self: true,
         optional: true
     });
-    collapsibleActions = inject(SiHeaderCollapsibleActionsComponent, { optional: true });
+    collapsibleActions = inject(SiHeaderCollapsibleActionsComponent, {
+        optional: true
+    });
     icons = addIcons({ elementDown2 });
     header = inject(SiApplicationHeaderComponent);
     ngOnInit() {
@@ -371,11 +376,12 @@ class SiHeaderActionItemBase {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiHeaderActionItemBase, decorators: [{
             type: Directive,
-            args: [{}]
-        }], propDecorators: { click: [{
-                type: HostListener,
-                args: ['click']
-            }] } });
+            args: [{
+                    host: {
+                        '(click)': 'click()'
+                    }
+                }]
+        }] });
 
 /**
  * Copyright (c) Siemens 2016 - 2026
@@ -635,17 +641,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiLaunchpadAppComponent {
-    /** @defaultValue false */
+    /**
+     * When `true`, an external link icon is shown to indicate the app opens in a new tab.
+     *
+     * @defaultValue false
+     */
     external = input(false, { ...(ngDevMode ? { debugName: "external" } : {}), transform: booleanAttribute });
-    /** @defaultValue false */
+    /**
+     * When `true`, the app item is highlighted as the currently active application.
+     *
+     * @defaultValue false
+     */
     active = input(false, { ...(ngDevMode ? { debugName: "active" } : {}), transform: booleanAttribute });
-    /** @defaultValue false */
+    /**
+     * 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 });
-    /** @defaultValue false */
+    /**
+     * Whether this app is currently marked as a favorite by the user.
+     *
+     * @defaultValue false
+     */
     favorite = model(false, ...(ngDevMode ? [{ debugName: "favorite" }] : []));
-    /** @defaultValue false */
+    /**
+     * 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 });
+    /** URL of the app icon. */
     iconUrl = input(...(ngDevMode ? [undefined, { debugName: "iconUrl" }] : []));
+    /** CSS class applied to the app icon element. */
     iconClass = input(...(ngDevMode ? [undefined, { debugName: "iconClass" }] : []));
     /**
      * Aria-label for the external link icon.
@@ -684,6 +712,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                 args: ['click']
             }] } });
 
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+class SiLaunchpadCategoryComponent {
+    category = input.required(...(ngDevMode ? [{ debugName: "category" }] : []));
+    /** @defaultValue false */
+    enableFavorites = input(false, ...(ngDevMode ? [{ debugName: "enableFavorites" }] : []));
+    favoriteChange = output();
+    activatedRoute = inject(ActivatedRoute, { optional: true });
+    toggleFavorite(app, favorite) {
+        this.favoriteChange.emit({ app, favorite });
+    }
+    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" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiLaunchpadCategoryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-launchpad-category', imports: [SiLaunchpadAppComponent, SiTranslatePipe, RouterLinkActive, RouterLink], host: {
+                        class: 'd-block',
+                        '[class.has-title]': '!!category().name'
+                    }, 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" }]
+        }], propDecorators: { category: [{ type: i0.Input, args: [{ isSignal: true, alias: "category", required: true }] }], enableFavorites: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableFavorites", required: false }] }], favoriteChange: [{ type: i0.Output, args: ["favoriteChange"] }] } });
+
 /**
  * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
@@ -703,10 +758,10 @@ class SiLaunchpadFactoryComponent {
      *
      * @defaultValue
      * ```
-     * t(() => $localize`:@@SI_LAUNCHPAD.TITLE:Switch applications`)
+     * t(() => $localize`:@@SI_LAUNCHPAD.TITLE:Switch app`)
      * ```
      */
-    titleText = input(t(() => $localize `:@@SI_LAUNCHPAD.TITLE:Switch applications`), ...(ngDevMode ? [{ debugName: "titleText" }] : []));
+    titleText = input(t(() => $localize `:@@SI_LAUNCHPAD.TITLE:Switch app`), ...(ngDevMode ? [{ debugName: "titleText" }] : []));
     /**
      * Subtitle of the launchpad.
      * When not provided, no subtitle is displayed.
@@ -772,13 +827,12 @@ class SiLaunchpadFactoryComponent {
         .filter(app => app.favorite), ...(ngDevMode ? [{ debugName: "favorites" }] : []));
     hasFavorites = computed(() => this.favorites().length > 0, ...(ngDevMode ? [{ debugName: "hasFavorites" }] : []));
     icons = addIcons({ elementDown2, elementCancel });
-    activatedRoute = inject(ActivatedRoute, { optional: true });
     header = inject(SiApplicationHeaderComponent);
     closeLaunchpad() {
         this.header.closeLaunchpad();
     }
-    toggleFavorite(app, favorite) {
-        this.favoriteChange.emit({ app, favorite });
+    toggleFavorite(event) {
+        this.favoriteChange.emit(event);
     }
     escape() {
         this.closeLaunchpad();
@@ -786,16 +840,8 @@ class SiLaunchpadFactoryComponent {
     isCategories(items) {
         return items.some(item => 'apps' in item);
     }
-    isFavoriteToggleDisabled(app) {
-        if ('_noFavorite' in app) {
-            return !!app._noFavorite;
-        }
-        else {
-            return false;
-        }
-    }
     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; let first = $first) {\n      @if (!enableFavorites() || !hasFavorites() || first || showAllApps) {\n        <div>\n          @if (category.name) {\n            <div\n              class=\"si-h4 launchpad-category-title mb-6\"\n              [class.mt-4]=\"first\"\n              [class.mt-8]=\"!first\"\n            >\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        </div>\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(+div .launchpad-category-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: SiLaunchpadAppComponent, selector: "a[si-launchpad-app]", inputs: ["external", "active", "enableFavoriteToggle", "favorite", "action", "iconUrl", "iconClass", "externalLinkText"], outputs: ["favoriteChange"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiLaunchpadFactoryComponent, decorators: [{
             type: Component,
@@ -803,11 +849,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         A11yModule,
                         SiLinkModule,
                         SiTranslatePipe,
-                        SiLaunchpadAppComponent,
-                        SiIconComponent,
-                        RouterLinkActive,
-                        RouterLink
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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; let first = $first) {\n      @if (!enableFavorites() || !hasFavorites() || first || showAllApps) {\n        <div>\n          @if (category.name) {\n            <div\n              class=\"si-h4 launchpad-category-title mb-6\"\n              [class.mt-4]=\"first\"\n              [class.mt-8]=\"!first\"\n            >\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        </div>\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(+div .launchpad-category-title){margin-block-end:0}\n"] }]
+                        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"] }]
         }], 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"] }] } });
 
 /**