@spicainternational/ngx-sds-components 8.8.1 → 9.0.0-beta.3

package/fesm2022/spicainternational-ngx-sds-components-src-lib-navigation.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, model, inject, computed, Component, QueryList, signal, ContentChildren, Input, EventEmitter, Output, effect, untracked, ChangeDetectionStrategy, Pipe } from '@angular/core';
+import { input, model, inject, computed, effect, Component, QueryList, signal, ContentChildren, Input, EventEmitter, Output, untracked, ChangeDetectionStrategy, Pipe } from '@angular/core';
 import * as i1 from '@angular/router';
 import { Router, NavigationEnd, RouterLink } from '@angular/router';
 import { NgIf, NgFor } from '@angular/common';
@@ -65,16 +65,17 @@ function isSubsetOrSame(mainArray, subArray) {
 
 class SdsNavigationRouteLinkComponent {
     #router;
+    #routerUrl;
     constructor() {
         /**
          * This variable is used as 'routerLink' attribute in the anchor tag.
          *
          * Is named 'link' to avoid conflict with the 'routerLink' directive.
          */
-        this.link = input('');
+        this.link = input('', ...(ngDevMode ? [{ debugName: "link" }] : /* istanbul ignore next */ []));
         /** @deprecated Use `activeRoutePattern` instead. */
-        this.nestedLinks = input([]);
-        this.text = input('');
+        this.nestedLinks = input([], ...(ngDevMode ? [{ debugName: "nestedLinks" }] : /* istanbul ignore next */ []));
+        this.text = input('', ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
         /**
          * This variable can be used to provide a pattern for active route.
          * It has higher priority than default route matching (checking if current route starts with provided link or is part of nested links).
@@ -82,20 +83,19 @@ class SdsNavigationRouteLinkComponent {
          *
          * @memberof SdsNavigationRouteLinkComponent
          */
-        this.activeRoutePattern = input('');
-        this.additionalInfo = input(undefined);
-        this.disabled = input(false);
-        this.isCollapsed = model(false);
+        this.activeRoutePattern = input('', ...(ngDevMode ? [{ debugName: "activeRoutePattern" }] : /* istanbul ignore next */ []));
+        this.additionalInfo = input(undefined, ...(ngDevMode ? [{ debugName: "additionalInfo" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this.isCollapsed = model(false, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
         /** @deprecated Use `activeRoutePattern` instead. */
-        this.ignoreQueryParamsInActiveRoute = input(false);
+        this.ignoreQueryParamsInActiveRoute = input(false, ...(ngDevMode ? [{ debugName: "ignoreQueryParamsInActiveRoute" }] : /* istanbul ignore next */ []));
         this.#router = inject(Router);
-        this.#routerUrl = toSignal(this.#router.events.pipe(filter((event) => event instanceof NavigationEnd), map((event) => event.urlAfterRedirects)), { initialValue: this.#router.url });
         this.#currentUrl = computed(() => {
             const activeRoute = this.ignoreQueryParamsInActiveRoute()
                 ? removeQueryParams(this.#routerUrl())
                 : this.#routerUrl();
             return activeRoute.split('/').filter((p) => p.length > 0);
-        });
+        }, ...(ngDevMode ? [{ debugName: "#currentUrl" }] : /* istanbul ignore next */ []));
         this.#activeRoutePatternRegExp = computed(() => {
             if (!this.activeRoutePattern()) {
                 return null;
@@ -104,7 +104,7 @@ class SdsNavigationRouteLinkComponent {
                 return new RegExp(this.activeRoutePattern());
             }
             return this.activeRoutePattern();
-        });
+        }, ...(ngDevMode ? [{ debugName: "#activeRoutePatternRegExp" }] : /* istanbul ignore next */ []));
         this.isActive = computed(() => {
             // If activeRoutePattern is provided, we should use it to determine if route is active
             if (this.#activeRoutePatternRegExp()) {
@@ -116,18 +116,21 @@ class SdsNavigationRouteLinkComponent {
             const defaultLink = this.link();
             const isActive = isUrlPartOfNavigationGroup(currentUrl, nestedLinks, defaultLink);
             return isActive;
+        }, ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
+        this.#routerUrl = toSignal(this.#router.events.pipe(filter((event) => event instanceof NavigationEnd), map((event) => event.urlAfterRedirects)), { initialValue: this.#router.url });
+        effect(() => {
+            console.log('SdsNavigationRouteLinkComponent', this.#routerUrl());
         });
     }
-    #routerUrl;
     #currentUrl;
     #activeRoutePatternRegExp;
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsNavigationRouteLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: SdsNavigationRouteLinkComponent, isStandalone: true, selector: "sds-navigation-route-link", inputs: { link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, nestedLinks: { classPropertyName: "nestedLinks", publicName: "nestedLinks", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, activeRoutePattern: { classPropertyName: "activeRoutePattern", publicName: "activeRoutePattern", isSignal: true, isRequired: false, transformFunction: null }, additionalInfo: { classPropertyName: "additionalInfo", publicName: "additionalInfo", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null }, ignoreQueryParamsInActiveRoute: { classPropertyName: "ignoreQueryParamsInActiveRoute", publicName: "ignoreQueryParamsInActiveRoute", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange" }, ngImport: i0, template: "<!-- class=\"sds-navigation-router-link sidebar-item-x d-flex justify-content-start align-items-center sidebar-item-x py-1\"> -->\n<div \n    class=\"sds-navigation-router-link sds-navigation-item-container\"\n    [class.disabled]=\"disabled()\"\n    [class.active]=\"isActive()\"\n    [title]=\"isCollapsed() ? text() : ''\"\n    >\n    \n    <a class=\"sds-navigation-item-content w-100 pe-2 text-gray-800 sds-fs-93\" \n        [routerLink]=\"disabled() ? null : link()\"\n        >\n        <div class=\"d-flex align-items-center w-100 justify-content-center\">\n            <div class=\"sds-navigation-icon\" >\n                <ng-content select=\"[navigationIcon]\"></ng-content>\n            </div>\n\n            <ng-container *ngIf=\"!isCollapsed()\">\n                <div class=\"sds-navigation-text user-select-none\">\n                    {{ text() }}\n                </div>\n                <span *ngIf=\"additionalInfo()\"\n                    class=\"sds-navigation-router-link-additional-info badge rounded-pill bg-warning text-body\"\n                    >{{ additionalInfo() }}</span\n                > \n            </ng-container>\n        </div>\n    </a>\n</div>", styles: [".sds-navigation-router-link.sds-navigation-item-container.disabled{pointer-events:none;opacity:.6}.sds-navigation-router-link.active>a{font-weight:600!important}.sds-navigation-router-link.sds-navigation-item-container.active{background-color:var(--sds-navigation-active-item)!important}.sds-navigation-router-link.sds-navigation-item-container:hover:not(.active){background-color:var(--bs-gray-200)!important}.sds-navigation-router-link.sds-navigation-item-container{border-radius:.266rem;border-left:none!important}.sds-navigation-router-link{padding:0!important}.sds-navigation-router-link a{padding-top:.5rem!important;padding-bottom:.5rem!important}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsNavigationRouteLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.23", type: SdsNavigationRouteLinkComponent, isStandalone: true, selector: "sds-navigation-route-link", inputs: { link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, nestedLinks: { classPropertyName: "nestedLinks", publicName: "nestedLinks", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, activeRoutePattern: { classPropertyName: "activeRoutePattern", publicName: "activeRoutePattern", isSignal: true, isRequired: false, transformFunction: null }, additionalInfo: { classPropertyName: "additionalInfo", publicName: "additionalInfo", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null }, ignoreQueryParamsInActiveRoute: { classPropertyName: "ignoreQueryParamsInActiveRoute", publicName: "ignoreQueryParamsInActiveRoute", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange" }, ngImport: i0, template: "<!-- class=\"sds-navigation-router-link sidebar-item-x d-flex justify-content-start align-items-center sidebar-item-x py-1\"> -->\n<div \n    class=\"sds-navigation-router-link sds-navigation-item-container\"\n    [class.disabled]=\"disabled()\"\n    [class.active]=\"isActive()\"\n    [title]=\"isCollapsed() ? text() : ''\"\n    >\n    \n    <a class=\"sds-navigation-item-content w-100 pe-2 text-gray-800 sds-fs-93\" \n        [routerLink]=\"disabled() ? null : link()\"\n        >\n        <div class=\"d-flex align-items-center w-100 justify-content-center\">\n            <div class=\"sds-navigation-icon\" >\n                <ng-content select=\"[navigationIcon]\"></ng-content>\n            </div>\n\n            <ng-container *ngIf=\"!isCollapsed()\">\n                <div class=\"sds-navigation-text user-select-none\">\n                    {{ text() }}\n                </div>\n                <span *ngIf=\"additionalInfo()\"\n                    class=\"sds-navigation-router-link-additional-info badge rounded-pill bg-warning text-body\"\n                    >{{ additionalInfo() }}</span\n                > \n            </ng-container>\n        </div>\n    </a>\n</div>", styles: [".sds-navigation-router-link.sds-navigation-item-container.disabled{pointer-events:none;opacity:.6}.sds-navigation-router-link.active>a{font-weight:600!important}.sds-navigation-router-link.sds-navigation-item-container.active{background-color:var(--sds-navigation-active-item)!important}.sds-navigation-router-link.sds-navigation-item-container:hover:not(.active){background-color:var(--bs-gray-200)!important}.sds-navigation-router-link.sds-navigation-item-container{border-radius:.266rem;border-left:none!important}.sds-navigation-router-link{padding:0!important}.sds-navigation-router-link a{padding-top:.5rem!important;padding-bottom:.5rem!important}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsNavigationRouteLinkComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsNavigationRouteLinkComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sds-navigation-route-link', standalone: true, imports: [NgIf, RouterLink], template: "<!-- class=\"sds-navigation-router-link sidebar-item-x d-flex justify-content-start align-items-center sidebar-item-x py-1\"> -->\n<div \n    class=\"sds-navigation-router-link sds-navigation-item-container\"\n    [class.disabled]=\"disabled()\"\n    [class.active]=\"isActive()\"\n    [title]=\"isCollapsed() ? text() : ''\"\n    >\n    \n    <a class=\"sds-navigation-item-content w-100 pe-2 text-gray-800 sds-fs-93\" \n        [routerLink]=\"disabled() ? null : link()\"\n        >\n        <div class=\"d-flex align-items-center w-100 justify-content-center\">\n            <div class=\"sds-navigation-icon\" >\n                <ng-content select=\"[navigationIcon]\"></ng-content>\n            </div>\n\n            <ng-container *ngIf=\"!isCollapsed()\">\n                <div class=\"sds-navigation-text user-select-none\">\n                    {{ text() }}\n                </div>\n                <span *ngIf=\"additionalInfo()\"\n                    class=\"sds-navigation-router-link-additional-info badge rounded-pill bg-warning text-body\"\n                    >{{ additionalInfo() }}</span\n                > \n            </ng-container>\n        </div>\n    </a>\n</div>", styles: [".sds-navigation-router-link.sds-navigation-item-container.disabled{pointer-events:none;opacity:.6}.sds-navigation-router-link.active>a{font-weight:600!important}.sds-navigation-router-link.sds-navigation-item-container.active{background-color:var(--sds-navigation-active-item)!important}.sds-navigation-router-link.sds-navigation-item-container:hover:not(.active){background-color:var(--bs-gray-200)!important}.sds-navigation-router-link.sds-navigation-item-container{border-radius:.266rem;border-left:none!important}.sds-navigation-router-link{padding:0!important}.sds-navigation-router-link a{padding-top:.5rem!important;padding-bottom:.5rem!important}\n"] }]
-        }], ctorParameters: () => [] });
+            args: [{ selector: 'sds-navigation-route-link', imports: [NgIf, RouterLink], template: "<!-- class=\"sds-navigation-router-link sidebar-item-x d-flex justify-content-start align-items-center sidebar-item-x py-1\"> -->\n<div \n    class=\"sds-navigation-router-link sds-navigation-item-container\"\n    [class.disabled]=\"disabled()\"\n    [class.active]=\"isActive()\"\n    [title]=\"isCollapsed() ? text() : ''\"\n    >\n    \n    <a class=\"sds-navigation-item-content w-100 pe-2 text-gray-800 sds-fs-93\" \n        [routerLink]=\"disabled() ? null : link()\"\n        >\n        <div class=\"d-flex align-items-center w-100 justify-content-center\">\n            <div class=\"sds-navigation-icon\" >\n                <ng-content select=\"[navigationIcon]\"></ng-content>\n            </div>\n\n            <ng-container *ngIf=\"!isCollapsed()\">\n                <div class=\"sds-navigation-text user-select-none\">\n                    {{ text() }}\n                </div>\n                <span *ngIf=\"additionalInfo()\"\n                    class=\"sds-navigation-router-link-additional-info badge rounded-pill bg-warning text-body\"\n                    >{{ additionalInfo() }}</span\n                > \n            </ng-container>\n        </div>\n    </a>\n</div>", styles: [".sds-navigation-router-link.sds-navigation-item-container.disabled{pointer-events:none;opacity:.6}.sds-navigation-router-link.active>a{font-weight:600!important}.sds-navigation-router-link.sds-navigation-item-container.active{background-color:var(--sds-navigation-active-item)!important}.sds-navigation-router-link.sds-navigation-item-container:hover:not(.active){background-color:var(--bs-gray-200)!important}.sds-navigation-router-link.sds-navigation-item-container{border-radius:.266rem;border-left:none!important}.sds-navigation-router-link{padding:0!important}.sds-navigation-router-link a{padding-top:.5rem!important;padding-bottom:.5rem!important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }], nestedLinks: [{ type: i0.Input, args: [{ isSignal: true, alias: "nestedLinks", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], activeRoutePattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeRoutePattern", required: false }] }], additionalInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "additionalInfo", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], isCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsed", required: false }] }, { type: i0.Output, args: ["isCollapsedChange"] }], ignoreQueryParamsInActiveRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "ignoreQueryParamsInActiveRoute", required: false }] }] } });
 
 class SdsNavigationGroupComponent {
     /** @deprecated Use `activeRoutePattern` instead. */
@@ -160,7 +163,7 @@ class SdsNavigationGroupComponent {
         this.disabled = false;
         this.showPopover = false;
         this.showPopoverHeader = false;
-        this.lightStyle = input(true);
+        this.lightStyle = input(true, ...(ngDevMode ? [{ debugName: "lightStyle" }] : /* istanbul ignore next */ []));
         /**
          * This variable can be used to provide a pattern for active route.
          * It has higher priority than default route matching (checking if current route starts with provided link or is part of nested links).
@@ -168,11 +171,11 @@ class SdsNavigationGroupComponent {
          *
          * @memberof SdsNavigationGroupComponent
          */
-        this.activeRoutePattern = input('');
-        this.additionalInfo = input(undefined);
+        this.activeRoutePattern = input('', ...(ngDevMode ? [{ debugName: "activeRoutePattern" }] : /* istanbul ignore next */ []));
+        this.additionalInfo = input(undefined, ...(ngDevMode ? [{ debugName: "additionalInfo" }] : /* istanbul ignore next */ []));
         this.routerLinkComponents = new QueryList();
         this.active = false;
-        this.isPopoverVisible = signal(false);
+        this.isPopoverVisible = signal(false, ...(ngDevMode ? [{ debugName: "isPopoverVisible" }] : /* istanbul ignore next */ []));
         this.faAngleUpRegular = faAngleUp;
         this.faAngleDownRegular = faAngleDown;
         /**
@@ -186,9 +189,9 @@ class SdsNavigationGroupComponent {
         this.#pendingOpenTimeoutId = null;
         this.#pendingCloseTimeoutId = null;
         this.#closeRequested = false;
-        this.isCollapsed = model(false);
-        this.lastPointerType = signal('mouse');
-        this.isTouchPointerType = computed(() => this.lastPointerType() === 'touch');
+        this.isCollapsed = model(false, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
+        this.lastPointerType = signal('mouse', ...(ngDevMode ? [{ debugName: "lastPointerType" }] : /* istanbul ignore next */ []));
+        this.isTouchPointerType = computed(() => this.lastPointerType() === 'touch', ...(ngDevMode ? [{ debugName: "isTouchPointerType" }] : /* istanbul ignore next */ []));
         this.#activeRoutePatternRegExp = computed(() => {
             if (!this.activeRoutePattern()) {
                 return null;
@@ -197,7 +200,7 @@ class SdsNavigationGroupComponent {
                 return new RegExp(this.activeRoutePattern());
             }
             return this.activeRoutePattern();
-        });
+        }, ...(ngDevMode ? [{ debugName: "#activeRoutePatternRegExp" }] : /* istanbul ignore next */ []));
     }
     #activeRoutePatternRegExp;
     ngOnInit() {
@@ -300,18 +303,18 @@ class SdsNavigationGroupComponent {
     rememberPointer(e) {
         this.lastPointerType.set(e.pointerType ?? 'mouse');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsNavigationGroupComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: SdsNavigationGroupComponent, isStandalone: true, selector: "sds-navigation-group", inputs: { navigationGroupNestedRoutes: { classPropertyName: "navigationGroupNestedRoutes", publicName: "navigationGroupNestedRoutes", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, defaultRouterLink: { classPropertyName: "defaultRouterLink", publicName: "defaultRouterLink", isSignal: false, isRequired: false, transformFunction: null }, reverse: { classPropertyName: "reverse", publicName: "reverse", isSignal: false, isRequired: false, transformFunction: null }, ignoreQueryParamsInActiveRoute: { classPropertyName: "ignoreQueryParamsInActiveRoute", publicName: "ignoreQueryParamsInActiveRoute", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, showPopover: { classPropertyName: "showPopover", publicName: "showPopover", isSignal: false, isRequired: false, transformFunction: null }, showPopoverHeader: { classPropertyName: "showPopoverHeader", publicName: "showPopoverHeader", isSignal: false, isRequired: false, transformFunction: null }, lightStyle: { classPropertyName: "lightStyle", publicName: "lightStyle", isSignal: true, isRequired: false, transformFunction: null }, activeRoutePattern: { classPropertyName: "activeRoutePattern", publicName: "activeRoutePattern", isSignal: true, isRequired: false, transformFunction: null }, additionalInfo: { classPropertyName: "additionalInfo", publicName: "additionalInfo", isSignal: true, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange" }, queries: [{ propertyName: "routerLinkComponents", predicate: SdsNavigationRouteLinkComponent }], usesOnChanges: true, ngImport: i0, template: "<div \n    #navigationGroup\n    class=\"sds-navigation-group sds-navigation-item-container d-flex\"\n    [class.sds-navigation-group-light-style]=\"lightStyle()\"\n    [class.flex-column-reverse]=\"reverse\"\n    [class.flex-column]=\"!reverse\"\n    [class.disabled]=\"disabled\"\n    [class.active]=\"isGroupActive\"\n    [class.collapsed]=\"isCollapsed()\"\n    [class.popoverVisible]=\"isPopoverVisible()\"\n    >\n    <a \n        class=\"w-100 sds-navigation-item-content p-2 text-gray-800 sds-fs-93\"\n        [class.collapsed]=\"isCollapsed()\"\n        style=\"cursor: pointer\"\n        [routerLink]=\"(isCollapsed() && isTouchPointerType()) ? undefined : [defaultRouterLink]\"\n        (pointerdown)=\"rememberPointer($event)\"\n\n        (mouseenter)=\"onMouseEnter()\"\n        (mouseleave)=\"onMouseLeave()\"\n        (click)=\"onClick()\"\n        >\n        <div class=\"d-flex align-items-center w-100 justify-content-center\">\n            <div class=\"sds-navigation-icon\" >\n                <ng-content select=\"[navigationIcon]\"></ng-content>\n            </div>\n            \n            <ng-container *ngIf=\"!isCollapsed()\">\n                <div class=\"sds-navigation-text user-select-none\">\n                    {{ text }}\n                </div>\n                <span *ngIf=\"additionalInfo() && !isGroupActive\"\n                        class=\"sds-navigation-router-link-additional-info badge rounded-pill bg-warning text-body me-2\"\n                        >{{ additionalInfo() }}\n                </span>\n                <div class=\"text-right group-dropdown\">\n                    <fa-icon *ngIf=\"!reverse\" [icon]=\"faAngleDownRegular\"></fa-icon>\n                    <fa-icon *ngIf=\"reverse\" [icon]=\"faAngleUpRegular\"></fa-icon>\n                </div>\n            </ng-container>\n        </div>\n    </a>\n\n    <div \n        class=\"sub-menu\" \n        *ngIf=\"!isCollapsed()\">\n\n        <div class=\"sds-navigation-group-items sds-flex-column gap-05\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>\n\n<ng-container *ngIf=\"isCollapsed() || (showPopover && !isGroupActive)\">\n    <dx-popover\n        [target]=\"navigationGroup\"\n        \n        \n        (onHiding)=\"onHiding($event)\"\n        width=\"15rem\"\n        [wrapperAttr]=\"{ class: 'sds-navigation-group-popover-wrapper sds-dx-popup-content-padding-2', style: 'border-left: none'}\"\n        [hideOnOutsideClick]=\"true\"\n        [hideOnParentScroll]=\"true\"\n        [animation]=\"{}\"\n        [(visible)]=\"isPopoverVisible\"\n    >\n\n        <dxo-position\n            my=\"top left\"\n            at=\"top right\"\n            [of]=\"navigationGroup\"\n            offset=\"-10 -5\"\n            >\n        </dxo-position>\n\n        <div *ngIf=\"showPopoverHeader && isCollapsed()\" class=\"group-header user-select-none\">\n            {{ text }}\n        </div>\n        <div \n            class=\"sds-navigation-container sds-navigation-popover-container sds-scrollbar sds-scrollbar-thin sds-scrollbar-no-hide\"\n            >\n            <div class=\"sds-navigation-group-items\">\n                <ng-content select=\"[popoverContent]\"></ng-content>\n            </div>\n        </div>\n    </dx-popover>\n</ng-container>\n", styles: [".gap-05{gap:.125rem!important}.sds-navigation-group.sds-navigation-item-container{border-radius:.266rem;border-left:none!important;padding-top:0!important;padding-bottom:0!important}.sds-navigation-group.sds-navigation-item-container a{padding-top:.6rem!important;padding-bottom:.6rem!important}.sds-navigation-group.sds-navigation-item-container.disabled{pointer-events:none;opacity:.6}.sds-navigation-group.active{background-color:var(--sds-navigation-active-item)!important}.sds-navigation-group.active>a{font-weight:600}.sds-navigation-group.active:not(.collapsed){background-color:transparent!important}.sds-navigation-group .group-dropdown{transition:transform .2s ease-out}.sds-navigation-group.popoverVisible:not(.active){background-color:var(--bs-gray-200)}.sds-navigation-group.popoverVisible:not(.active) .group-dropdown{transform:rotate(-90deg)}.sds-navigation-group .sub-menu{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease-out}.sds-navigation-group .sub-menu>div{overflow:hidden;min-height:0}.sds-navigation-group.active .sub-menu{grid-template-rows:1fr}::ng-deep .sds-navigation-group-popover-wrapper{--sds-navigation-active-item: oklch(.6 .2 var(--sds-brand-hue) / .12)}::ng-deep .sds-navigation-group-popover-wrapper.sds-dx-popup-content-padding-0 .dx-popup-content{padding:0rem}::ng-deep .sds-navigation-group-popover-wrapper.sds-dx-popup-content-padding-1 .dx-popup-content{padding:.25rem}::ng-deep .sds-navigation-group-popover-wrapper.sds-dx-popup-content-padding-2 .dx-popup-content{padding:.5rem}::ng-deep .sds-navigation-group-popover-wrapper.sds-dx-popup-content-padding-3 .dx-popup-content{padding:1rem}::ng-deep .sds-navigation-group-popover-wrapper .dx-popover-arrow{display:none}::ng-deep .sds-navigation-group-popover-wrapper .group-header{font-weight:600;padding:.25rem .75rem .5rem .5rem}::ng-deep .sds-navigation-group-popover-wrapper .sds-navigation-container.sds-navigation-popover-container{color:var(--bs-body-color)!important;padding-bottom:.07rem;overflow-y:auto;max-height:45vh}::ng-deep .sds-navigation-group-popover-wrapper .sds-navigation-container.sds-navigation-popover-container .sds-navigation-group-items .active{font-weight:500}::ng-deep .sds-navigation-group-popover-wrapper .sds-navigation-container.sds-navigation-popover-container .sds-navigation-group-items .sds-navigation-icon{display:none}::ng-deep .sds-navigation-group-popover-wrapper .sds-navigation-container.sds-navigation-popover-container .sds-navigation-group-items .sds-navigation-item-container{border-left:none;padding-top:.25rem;padding-bottom:.25rem;border-radius:var(--bs-border-radius);color:var(--bs-body-color)!important}::ng-deep .sds-navigation-group-popover-wrapper .sds-navigation-container.sds-navigation-popover-container .sds-navigation-group-items .sds-navigation-item-container .sds-navigation-item-content{padding-top:.25rem;padding-bottom:.25rem;padding-left:1rem;color:var(--bs-body-color)!important}::ng-deep .sds-navigation-group-popover-wrapper .sds-navigation-container.sds-navigation-popover-container .sds-navigation-group-items .sds-navigation-item-container .sds-navigation-header{color:var(--bs-body-color)!important}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "ngmodule", type: DxPopoverModule }, { kind: "component", type: i2.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "deferRendering", "disabled", "enableBodyScroll", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showEvent", "showTitle", "target", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "onTitleRendered", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "deferRenderingChange", "disabledChange", "enableBodyScrollChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "component", type: i3.DxoPositionComponent, selector: "dxo-position", inputs: ["at", "boundary", "boundaryOffset", "collision", "my", "of", "offset"] }, { kind: "ngmodule", type: DxoPositionModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsNavigationGroupComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.23", type: SdsNavigationGroupComponent, isStandalone: true, selector: "sds-navigation-group", inputs: { navigationGroupNestedRoutes: { classPropertyName: "navigationGroupNestedRoutes", publicName: "navigationGroupNestedRoutes", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, defaultRouterLink: { classPropertyName: "defaultRouterLink", publicName: "defaultRouterLink", isSignal: false, isRequired: false, transformFunction: null }, reverse: { classPropertyName: "reverse", publicName: "reverse", isSignal: false, isRequired: false, transformFunction: null }, ignoreQueryParamsInActiveRoute: { classPropertyName: "ignoreQueryParamsInActiveRoute", publicName: "ignoreQueryParamsInActiveRoute", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, showPopover: { classPropertyName: "showPopover", publicName: "showPopover", isSignal: false, isRequired: false, transformFunction: null }, showPopoverHeader: { classPropertyName: "showPopoverHeader", publicName: "showPopoverHeader", isSignal: false, isRequired: false, transformFunction: null }, lightStyle: { classPropertyName: "lightStyle", publicName: "lightStyle", isSignal: true, isRequired: false, transformFunction: null }, activeRoutePattern: { classPropertyName: "activeRoutePattern", publicName: "activeRoutePattern", isSignal: true, isRequired: false, transformFunction: null }, additionalInfo: { classPropertyName: "additionalInfo", publicName: "additionalInfo", isSignal: true, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange" }, queries: [{ propertyName: "routerLinkComponents", predicate: SdsNavigationRouteLinkComponent }], usesOnChanges: true, ngImport: i0, template: "<div \n    #navigationGroup\n    class=\"sds-navigation-group sds-navigation-item-container d-flex\"\n    [class.sds-navigation-group-light-style]=\"lightStyle()\"\n    [class.flex-column-reverse]=\"reverse\"\n    [class.flex-column]=\"!reverse\"\n    [class.disabled]=\"disabled\"\n    [class.active]=\"isGroupActive\"\n    [class.collapsed]=\"isCollapsed()\"\n    [class.popoverVisible]=\"isPopoverVisible()\"\n    >\n    <a \n        class=\"w-100 sds-navigation-item-content p-2 text-gray-800 sds-fs-93\"\n        [class.collapsed]=\"isCollapsed()\"\n        style=\"cursor: pointer\"\n        [routerLink]=\"(isCollapsed() && isTouchPointerType()) ? undefined : [defaultRouterLink]\"\n        (pointerdown)=\"rememberPointer($event)\"\n\n        (mouseenter)=\"onMouseEnter()\"\n        (mouseleave)=\"onMouseLeave()\"\n        (click)=\"onClick()\"\n        >\n        <div class=\"d-flex align-items-center w-100 justify-content-center\">\n            <div class=\"sds-navigation-icon\" >\n                <ng-content select=\"[navigationIcon]\"></ng-content>\n            </div>\n            \n            <ng-container *ngIf=\"!isCollapsed()\">\n                <div class=\"sds-navigation-text user-select-none\">\n                    {{ text }}\n                </div>\n                <span *ngIf=\"additionalInfo() && !isGroupActive\"\n                        class=\"sds-navigation-router-link-additional-info badge rounded-pill bg-warning text-body me-2\"\n                        >{{ additionalInfo() }}\n                </span>\n                <div class=\"text-right group-dropdown\">\n                    <fa-icon *ngIf=\"!reverse\" [icon]=\"faAngleDownRegular\"></fa-icon>\n                    <fa-icon *ngIf=\"reverse\" [icon]=\"faAngleUpRegular\"></fa-icon>\n                </div>\n            </ng-container>\n        </div>\n    </a>\n\n    <div \n        class=\"sub-menu\" \n        *ngIf=\"!isCollapsed()\">\n\n        <div class=\"sds-navigation-group-items sds-flex-column gap-05\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>\n\n<ng-container *ngIf=\"isCollapsed() || (showPopover && !isGroupActive)\">\n    <dx-popover\n        [target]=\"navigationGroup\"\n        \n        \n        (onHiding)=\"onHiding($event)\"\n        width=\"15rem\"\n        [wrapperAttr]=\"{ class: 'sds-navigation-group-popover-wrapper sds-dx-popup-content-padding-2', style: 'border-left: none'}\"\n        [hideOnOutsideClick]=\"true\"\n        [hideOnParentScroll]=\"true\"\n        [animation]=\"{}\"\n        [(visible)]=\"isPopoverVisible\"\n    >\n\n        <dxo-position\n            my=\"top left\"\n            at=\"top right\"\n            [of]=\"navigationGroup\"\n            offset=\"-10 -5\"\n            >\n        </dxo-position>\n\n        <div *ngIf=\"showPopoverHeader && isCollapsed()\" class=\"group-header user-select-none\">\n            {{ text }}\n        </div>\n        <div \n            class=\"sds-navigation-container sds-navigation-popover-container sds-scrollbar sds-scrollbar-thin sds-scrollbar-no-hide\"\n            >\n            <div class=\"sds-navigation-group-items\">\n                <ng-content select=\"[popoverContent]\"></ng-content>\n            </div>\n        </div>\n    </dx-popover>\n</ng-container>\n", styles: [".gap-05{gap:.125rem!important}.sds-navigation-group.sds-navigation-item-container{border-radius:.266rem;border-left:none!important;padding-top:0!important;padding-bottom:0!important}.sds-navigation-group.sds-navigation-item-container a{padding-top:.6rem!important;padding-bottom:.6rem!important}.sds-navigation-group.sds-navigation-item-container.disabled{pointer-events:none;opacity:.6}.sds-navigation-group.active>a{font-weight:600}.sds-navigation-group.active{background-color:var(--sds-navigation-active-item)!important}.sds-navigation-group.active:not(.collapsed){background-color:transparent!important}.sds-navigation-group .group-dropdown{transition:transform .2s ease-out}.sds-navigation-group.popoverVisible:not(.active){background-color:var(--bs-gray-200)}.sds-navigation-group.popoverVisible:not(.active) .group-dropdown{transform:rotate(-90deg)}.sds-navigation-group .sub-menu{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease-out}.sds-navigation-group .sub-menu>div{overflow:hidden;min-height:0}.sds-navigation-group.active .sub-menu{grid-template-rows:1fr}::ng-deep .sds-navigation-group-popover-wrapper{--sds-navigation-active-item: oklch(.6 .2 var(--sds-brand-hue) / .12)}::ng-deep .sds-navigation-group-popover-wrapper.sds-dx-popup-content-padding-0 .dx-popup-content{padding:0rem}::ng-deep .sds-navigation-group-popover-wrapper.sds-dx-popup-content-padding-1 .dx-popup-content{padding:.25rem}::ng-deep .sds-navigation-group-popover-wrapper.sds-dx-popup-content-padding-2 .dx-popup-content{padding:.5rem}::ng-deep .sds-navigation-group-popover-wrapper.sds-dx-popup-content-padding-3 .dx-popup-content{padding:1rem}::ng-deep .sds-navigation-group-popover-wrapper .dx-popover-arrow{display:none}::ng-deep .sds-navigation-group-popover-wrapper .group-header{font-weight:600;padding:.25rem .75rem .5rem .5rem}::ng-deep .sds-navigation-group-popover-wrapper .sds-navigation-container.sds-navigation-popover-container{color:var(--bs-body-color)!important;padding-bottom:.07rem;overflow-y:auto;max-height:45vh}::ng-deep .sds-navigation-group-popover-wrapper .sds-navigation-container.sds-navigation-popover-container .sds-navigation-group-items .active{font-weight:500}::ng-deep .sds-navigation-group-popover-wrapper .sds-navigation-container.sds-navigation-popover-container .sds-navigation-group-items .sds-navigation-icon{display:none}::ng-deep .sds-navigation-group-popover-wrapper .sds-navigation-container.sds-navigation-popover-container .sds-navigation-group-items .sds-navigation-item-container{border-left:none;padding-top:.25rem;padding-bottom:.25rem;border-radius:var(--bs-border-radius);color:var(--bs-body-color)!important}::ng-deep .sds-navigation-group-popover-wrapper .sds-navigation-container.sds-navigation-popover-container .sds-navigation-group-items .sds-navigation-item-container .sds-navigation-item-content{padding-top:.25rem;padding-bottom:.25rem;padding-left:1rem;color:var(--bs-body-color)!important}::ng-deep .sds-navigation-group-popover-wrapper .sds-navigation-container.sds-navigation-popover-container .sds-navigation-group-items .sds-navigation-item-container .sds-navigation-header{color:var(--bs-body-color)!important}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "ngmodule", type: DxPopoverModule }, { kind: "component", type: i2.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "deferRendering", "disabled", "enableBodyScroll", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showEvent", "showTitle", "target", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "onTitleRendered", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "deferRenderingChange", "disabledChange", "enableBodyScrollChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "component", type: i3.DxoPositionComponent, selector: "dxo-position", inputs: ["at", "boundary", "boundaryOffset", "collision", "my", "of", "offset"] }, { kind: "ngmodule", type: DxoPositionModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsNavigationGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsNavigationGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sds-navigation-group', standalone: true, imports: [
+            args: [{ selector: 'sds-navigation-group', imports: [
                         RouterLink,
                         NgIf,
                         FaIconComponent,
                         DxPopoverModule,
                         DxoPositionModule
-                    ], template: "<div \n    #navigationGroup\n    class=\"sds-navigation-group sds-navigation-item-container d-flex\"\n    [class.sds-navigation-group-light-style]=\"lightStyle()\"\n    [class.flex-column-reverse]=\"reverse\"\n    [class.flex-column]=\"!reverse\"\n    [class.disabled]=\"disabled\"\n    [class.active]=\"isGroupActive\"\n    [class.collapsed]=\"isCollapsed()\"\n    [class.popoverVisible]=\"isPopoverVisible()\"\n    >\n    <a \n        class=\"w-100 sds-navigation-item-content p-2 text-gray-800 sds-fs-93\"\n        [class.collapsed]=\"isCollapsed()\"\n        style=\"cursor: pointer\"\n        [routerLink]=\"(isCollapsed() && isTouchPointerType()) ? undefined : [defaultRouterLink]\"\n        (pointerdown)=\"rememberPointer($event)\"\n\n        (mouseenter)=\"onMouseEnter()\"\n        (mouseleave)=\"onMouseLeave()\"\n        (click)=\"onClick()\"\n        >\n        <div class=\"d-flex align-items-center w-100 justify-content-center\">\n            <div class=\"sds-navigation-icon\" >\n                <ng-content select=\"[navigationIcon]\"></ng-content>\n            </div>\n            \n            <ng-container *ngIf=\"!isCollapsed()\">\n                <div class=\"sds-navigation-text user-select-none\">\n                    {{ text }}\n                </div>\n                <span *ngIf=\"additionalInfo() && !isGroupActive\"\n                        class=\"sds-navigation-router-link-additional-info badge rounded-pill bg-warning text-body me-2\"\n                        >{{ additionalInfo() }}\n                </span>\n                <div class=\"text-right group-dropdown\">\n                    <fa-icon *ngIf=\"!reverse\" [icon]=\"faAngleDownRegular\"></fa-icon>\n                    <fa-icon *ngIf=\"reverse\" [icon]=\"faAngleUpRegular\"></fa-icon>\n                </div>\n            </ng-container>\n        </div>\n    </a>\n\n    <div \n        class=\"sub-menu\" \n        *ngIf=\"!isCollapsed()\">\n\n        <div class=\"sds-navigation-group-items sds-flex-column gap-05\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>\n\n<ng-container *ngIf=\"isCollapsed() || (showPopover && !isGroupActive)\">\n    <dx-popover\n        [target]=\"navigationGroup\"\n        \n        \n        (onHiding)=\"onHiding($event)\"\n        width=\"15rem\"\n        [wrapperAttr]=\"{ class: 'sds-navigation-group-popover-wrapper sds-dx-popup-content-padding-2', style: 'border-left: none'}\"\n        [hideOnOutsideClick]=\"true\"\n        [hideOnParentScroll]=\"true\"\n        [animation]=\"{}\"\n        [(visible)]=\"isPopoverVisible\"\n    >\n\n        <dxo-position\n            my=\"top left\"\n            at=\"top right\"\n            [of]=\"navigationGroup\"\n            offset=\"-10 -5\"\n            >\n        </dxo-position>\n\n        <div *ngIf=\"showPopoverHeader && isCollapsed()\" class=\"group-header user-select-none\">\n            {{ text }}\n        </div>\n        <div \n            class=\"sds-navigation-container sds-navigation-popover-container sds-scrollbar sds-scrollbar-thin sds-scrollbar-no-hide\"\n            >\n            <div class=\"sds-navigation-group-items\">\n                <ng-content select=\"[popoverContent]\"></ng-content>\n            </div>\n        </div>\n    </dx-popover>\n</ng-container>\n", styles: [".gap-05{gap:.125rem!important}.sds-navigation-group.sds-navigation-item-container{border-radius:.266rem;border-left:none!important;padding-top:0!important;padding-bottom:0!important}.sds-navigation-group.sds-navigation-item-container a{padding-top:.6rem!important;padding-bottom:.6rem!important}.sds-navigation-group.sds-navigation-item-container.disabled{pointer-events:none;opacity:.6}.sds-navigation-group.active{background-color:var(--sds-navigation-active-item)!important}.sds-navigation-group.active>a{font-weight:600}.sds-navigation-group.active:not(.collapsed){background-color:transparent!important}.sds-navigation-group .group-dropdown{transition:transform .2s ease-out}.sds-navigation-group.popoverVisible:not(.active){background-color:var(--bs-gray-200)}.sds-navigation-group.popoverVisible:not(.active) .group-dropdown{transform:rotate(-90deg)}.sds-navigation-group .sub-menu{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease-out}.sds-navigation-group .sub-menu>div{overflow:hidden;min-height:0}.sds-navigation-group.active .sub-menu{grid-template-rows:1fr}::ng-deep .sds-navigation-group-popover-wrapper{--sds-navigation-active-item: oklch(.6 .2 var(--sds-brand-hue) / .12)}::ng-deep .sds-navigation-group-popover-wrapper.sds-dx-popup-content-padding-0 .dx-popup-content{padding:0rem}::ng-deep .sds-navigation-group-popover-wrapper.sds-dx-popup-content-padding-1 .dx-popup-content{padding:.25rem}::ng-deep .sds-navigation-group-popover-wrapper.sds-dx-popup-content-padding-2 .dx-popup-content{padding:.5rem}::ng-deep .sds-navigation-group-popover-wrapper.sds-dx-popup-content-padding-3 .dx-popup-content{padding:1rem}::ng-deep .sds-navigation-group-popover-wrapper .dx-popover-arrow{display:none}::ng-deep .sds-navigation-group-popover-wrapper .group-header{font-weight:600;padding:.25rem .75rem .5rem .5rem}::ng-deep .sds-navigation-group-popover-wrapper .sds-navigation-container.sds-navigation-popover-container{color:var(--bs-body-color)!important;padding-bottom:.07rem;overflow-y:auto;max-height:45vh}::ng-deep .sds-navigation-group-popover-wrapper .sds-navigation-container.sds-navigation-popover-container .sds-navigation-group-items .active{font-weight:500}::ng-deep .sds-navigation-group-popover-wrapper .sds-navigation-container.sds-navigation-popover-container .sds-navigation-group-items .sds-navigation-icon{display:none}::ng-deep .sds-navigation-group-popover-wrapper .sds-navigation-container.sds-navigation-popover-container .sds-navigation-group-items .sds-navigation-item-container{border-left:none;padding-top:.25rem;padding-bottom:.25rem;border-radius:var(--bs-border-radius);color:var(--bs-body-color)!important}::ng-deep .sds-navigation-group-popover-wrapper .sds-navigation-container.sds-navigation-popover-container .sds-navigation-group-items .sds-navigation-item-container .sds-navigation-item-content{padding-top:.25rem;padding-bottom:.25rem;padding-left:1rem;color:var(--bs-body-color)!important}::ng-deep .sds-navigation-group-popover-wrapper .sds-navigation-container.sds-navigation-popover-container .sds-navigation-group-items .sds-navigation-item-container .sds-navigation-header{color:var(--bs-body-color)!important}\n"] }]
+                    ], template: "<div \n    #navigationGroup\n    class=\"sds-navigation-group sds-navigation-item-container d-flex\"\n    [class.sds-navigation-group-light-style]=\"lightStyle()\"\n    [class.flex-column-reverse]=\"reverse\"\n    [class.flex-column]=\"!reverse\"\n    [class.disabled]=\"disabled\"\n    [class.active]=\"isGroupActive\"\n    [class.collapsed]=\"isCollapsed()\"\n    [class.popoverVisible]=\"isPopoverVisible()\"\n    >\n    <a \n        class=\"w-100 sds-navigation-item-content p-2 text-gray-800 sds-fs-93\"\n        [class.collapsed]=\"isCollapsed()\"\n        style=\"cursor: pointer\"\n        [routerLink]=\"(isCollapsed() && isTouchPointerType()) ? undefined : [defaultRouterLink]\"\n        (pointerdown)=\"rememberPointer($event)\"\n\n        (mouseenter)=\"onMouseEnter()\"\n        (mouseleave)=\"onMouseLeave()\"\n        (click)=\"onClick()\"\n        >\n        <div class=\"d-flex align-items-center w-100 justify-content-center\">\n            <div class=\"sds-navigation-icon\" >\n                <ng-content select=\"[navigationIcon]\"></ng-content>\n            </div>\n            \n            <ng-container *ngIf=\"!isCollapsed()\">\n                <div class=\"sds-navigation-text user-select-none\">\n                    {{ text }}\n                </div>\n                <span *ngIf=\"additionalInfo() && !isGroupActive\"\n                        class=\"sds-navigation-router-link-additional-info badge rounded-pill bg-warning text-body me-2\"\n                        >{{ additionalInfo() }}\n                </span>\n                <div class=\"text-right group-dropdown\">\n                    <fa-icon *ngIf=\"!reverse\" [icon]=\"faAngleDownRegular\"></fa-icon>\n                    <fa-icon *ngIf=\"reverse\" [icon]=\"faAngleUpRegular\"></fa-icon>\n                </div>\n            </ng-container>\n        </div>\n    </a>\n\n    <div \n        class=\"sub-menu\" \n        *ngIf=\"!isCollapsed()\">\n\n        <div class=\"sds-navigation-group-items sds-flex-column gap-05\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>\n\n<ng-container *ngIf=\"isCollapsed() || (showPopover && !isGroupActive)\">\n    <dx-popover\n        [target]=\"navigationGroup\"\n        \n        \n        (onHiding)=\"onHiding($event)\"\n        width=\"15rem\"\n        [wrapperAttr]=\"{ class: 'sds-navigation-group-popover-wrapper sds-dx-popup-content-padding-2', style: 'border-left: none'}\"\n        [hideOnOutsideClick]=\"true\"\n        [hideOnParentScroll]=\"true\"\n        [animation]=\"{}\"\n        [(visible)]=\"isPopoverVisible\"\n    >\n\n        <dxo-position\n            my=\"top left\"\n            at=\"top right\"\n            [of]=\"navigationGroup\"\n            offset=\"-10 -5\"\n            >\n        </dxo-position>\n\n        <div *ngIf=\"showPopoverHeader && isCollapsed()\" class=\"group-header user-select-none\">\n            {{ text }}\n        </div>\n        <div \n            class=\"sds-navigation-container sds-navigation-popover-container sds-scrollbar sds-scrollbar-thin sds-scrollbar-no-hide\"\n            >\n            <div class=\"sds-navigation-group-items\">\n                <ng-content select=\"[popoverContent]\"></ng-content>\n            </div>\n        </div>\n    </dx-popover>\n</ng-container>\n", styles: [".gap-05{gap:.125rem!important}.sds-navigation-group.sds-navigation-item-container{border-radius:.266rem;border-left:none!important;padding-top:0!important;padding-bottom:0!important}.sds-navigation-group.sds-navigation-item-container a{padding-top:.6rem!important;padding-bottom:.6rem!important}.sds-navigation-group.sds-navigation-item-container.disabled{pointer-events:none;opacity:.6}.sds-navigation-group.active>a{font-weight:600}.sds-navigation-group.active{background-color:var(--sds-navigation-active-item)!important}.sds-navigation-group.active:not(.collapsed){background-color:transparent!important}.sds-navigation-group .group-dropdown{transition:transform .2s ease-out}.sds-navigation-group.popoverVisible:not(.active){background-color:var(--bs-gray-200)}.sds-navigation-group.popoverVisible:not(.active) .group-dropdown{transform:rotate(-90deg)}.sds-navigation-group .sub-menu{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease-out}.sds-navigation-group .sub-menu>div{overflow:hidden;min-height:0}.sds-navigation-group.active .sub-menu{grid-template-rows:1fr}::ng-deep .sds-navigation-group-popover-wrapper{--sds-navigation-active-item: oklch(.6 .2 var(--sds-brand-hue) / .12)}::ng-deep .sds-navigation-group-popover-wrapper.sds-dx-popup-content-padding-0 .dx-popup-content{padding:0rem}::ng-deep .sds-navigation-group-popover-wrapper.sds-dx-popup-content-padding-1 .dx-popup-content{padding:.25rem}::ng-deep .sds-navigation-group-popover-wrapper.sds-dx-popup-content-padding-2 .dx-popup-content{padding:.5rem}::ng-deep .sds-navigation-group-popover-wrapper.sds-dx-popup-content-padding-3 .dx-popup-content{padding:1rem}::ng-deep .sds-navigation-group-popover-wrapper .dx-popover-arrow{display:none}::ng-deep .sds-navigation-group-popover-wrapper .group-header{font-weight:600;padding:.25rem .75rem .5rem .5rem}::ng-deep .sds-navigation-group-popover-wrapper .sds-navigation-container.sds-navigation-popover-container{color:var(--bs-body-color)!important;padding-bottom:.07rem;overflow-y:auto;max-height:45vh}::ng-deep .sds-navigation-group-popover-wrapper .sds-navigation-container.sds-navigation-popover-container .sds-navigation-group-items .active{font-weight:500}::ng-deep .sds-navigation-group-popover-wrapper .sds-navigation-container.sds-navigation-popover-container .sds-navigation-group-items .sds-navigation-icon{display:none}::ng-deep .sds-navigation-group-popover-wrapper .sds-navigation-container.sds-navigation-popover-container .sds-navigation-group-items .sds-navigation-item-container{border-left:none;padding-top:.25rem;padding-bottom:.25rem;border-radius:var(--bs-border-radius);color:var(--bs-body-color)!important}::ng-deep .sds-navigation-group-popover-wrapper .sds-navigation-container.sds-navigation-popover-container .sds-navigation-group-items .sds-navigation-item-container .sds-navigation-item-content{padding-top:.25rem;padding-bottom:.25rem;padding-left:1rem;color:var(--bs-body-color)!important}::ng-deep .sds-navigation-group-popover-wrapper .sds-navigation-container.sds-navigation-popover-container .sds-navigation-group-items .sds-navigation-item-container .sds-navigation-header{color:var(--bs-body-color)!important}\n"] }]
         }], ctorParameters: () => [{ type: i1.Router }], propDecorators: { navigationGroupNestedRoutes: [{
                 type: Input
             }], text: [{
@@ -330,41 +333,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], showPopoverHeader: [{
                 type: Input
-            }], routerLinkComponents: [{
+            }], lightStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "lightStyle", required: false }] }], activeRoutePattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeRoutePattern", required: false }] }], additionalInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "additionalInfo", required: false }] }], routerLinkComponents: [{
                 type: ContentChildren,
                 args: [SdsNavigationRouteLinkComponent]
-            }] } });
+            }], isCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsed", required: false }] }, { type: i0.Output, args: ["isCollapsedChange"] }] } });
 
 class SdsNavigationSeparatorComponent {
     constructor() {
-        this.isCollapsed = model(false);
+        this.isCollapsed = model(false, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
     }
     ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsNavigationSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: SdsNavigationSeparatorComponent, isStandalone: true, selector: "sds-navigation-separator", inputs: { isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange" }, ngImport: i0, template: "<div \n    class=\"sds-navigation-separator nav-separator\">\n</div>\n", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsNavigationSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.23", type: SdsNavigationSeparatorComponent, isStandalone: true, selector: "sds-navigation-separator", inputs: { isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange" }, ngImport: i0, template: "<div \n    class=\"sds-navigation-separator nav-separator\">\n</div>\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsNavigationSeparatorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsNavigationSeparatorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sds-navigation-separator', standalone: true, template: "<div \n    class=\"sds-navigation-separator nav-separator\">\n</div>\n" }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { isCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsed", required: false }] }, { type: i0.Output, args: ["isCollapsedChange"] }] } });
 
 class SdsNavigationHeaderComponent {
     constructor() {
-        this.isCollapsed = model(false);
+        this.isCollapsed = model(false, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
         this.text = '';
     }
     ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsNavigationHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: SdsNavigationHeaderComponent, isStandalone: true, selector: "sds-navigation-header", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange" }, ngImport: i0, template: "\n<div class=\"sds-navigation-header text-gray-800\">\n    <span *ngIf=\"!isCollapsed()\">{{ text }}</span>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsNavigationHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.23", type: SdsNavigationHeaderComponent, isStandalone: true, selector: "sds-navigation-header", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange" }, ngImport: i0, template: "\n<div class=\"sds-navigation-header text-gray-800\">\n    <span *ngIf=\"!isCollapsed()\">{{ text }}</span>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsNavigationHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsNavigationHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sds-navigation-header', standalone: true, imports: [
+            args: [{ selector: 'sds-navigation-header', imports: [
                         NgIf
                     ], template: "\n<div class=\"sds-navigation-header text-gray-800\">\n    <span *ngIf=\"!isCollapsed()\">{{ text }}</span>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { text: [{
                 type: Input
-            }] } });
+            }], isCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsed", required: false }] }, { type: i0.Output, args: ["isCollapsedChange"] }] } });
 
 class SdsNavigationExternalLinkComponent {
     constructor() {
@@ -374,14 +377,14 @@ class SdsNavigationExternalLinkComponent {
         this.externalLinkHint = '';
         this.showExternalLinkIcon = true;
         this.externalLinkIcon = faExternalLink;
-        this.isCollapsed = model(false);
+        this.isCollapsed = model(false, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsNavigationExternalLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: SdsNavigationExternalLinkComponent, isStandalone: true, selector: "sds-navigation-external-link", inputs: { link: { classPropertyName: "link", publicName: "link", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: false, transformFunction: null }, tabName: { classPropertyName: "tabName", publicName: "tabName", isSignal: false, isRequired: false, transformFunction: null }, externalLinkHint: { classPropertyName: "externalLinkHint", publicName: "externalLinkHint", isSignal: false, isRequired: false, transformFunction: null }, showExternalLinkIcon: { classPropertyName: "showExternalLinkIcon", publicName: "showExternalLinkIcon", isSignal: false, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange" }, ngImport: i0, template: "<div \n    class=\"sds-navigation-external-link sds-navigation-item-container\"\n    [title]=\"isCollapsed() ? text : ''\"\n    >\n    <a\n        class=\"w-100 sds-navigation-item-content pe-2 text-gray-800 sds-fs-93\"\n        [attr.href]=\"link || null\"\n        [attr.target]=\"tabName || null\"\n        [attr.rel]=\"tabName === '_blank' ? 'noopener noreferrer' : null\"\n        >\n        <div class=\"d-flex align-items-center justify-content-center position-relative\">\n            <div class=\"sds-navigation-icon\" >\n                <ng-content select=\"[navigationIcon]\"></ng-content>\n            </div>\n\n            <ng-container *ngIf=\"!isCollapsed()\">\n            \n                <div class=\"sds-navigation-text\">\n                    <span>{{ text }}</span>\n                </div>\n\n                <div \n                    class=\"sds-navigation-external-link-info-container\">\n                    <fa-icon \n                        class=\"sds-navigation-external-link-info-icon\"\n                        *ngIf=\"showExternalLinkIcon\"\n\n                        [icon]=\"externalLinkIcon\"\n                        [size]=\"'xs'\"\n                        [title]=\"externalLinkHint\"\n                        >\n                    </fa-icon>\n                </div> \n            </ng-container>\n            \n            <ng-content></ng-content>\n\n        </div>\n    </a>\n</div>", styles: [".sds-navigation-external-link:hover{background-color:#eff1f3;border-left-color:#eff1f3}.sds-navigation-external-link{border-radius:.266rem;padding:0!important;border-left:none!important}.sds-navigation-external-link a{padding-top:.5rem!important;padding-bottom:.5rem!important}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsNavigationExternalLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.23", type: SdsNavigationExternalLinkComponent, isStandalone: true, selector: "sds-navigation-external-link", inputs: { link: { classPropertyName: "link", publicName: "link", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: false, transformFunction: null }, tabName: { classPropertyName: "tabName", publicName: "tabName", isSignal: false, isRequired: false, transformFunction: null }, externalLinkHint: { classPropertyName: "externalLinkHint", publicName: "externalLinkHint", isSignal: false, isRequired: false, transformFunction: null }, showExternalLinkIcon: { classPropertyName: "showExternalLinkIcon", publicName: "showExternalLinkIcon", isSignal: false, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange" }, ngImport: i0, template: "<div \n    class=\"sds-navigation-external-link sds-navigation-item-container\"\n    [title]=\"isCollapsed() ? text : ''\"\n    >\n    <a\n        class=\"w-100 sds-navigation-item-content pe-2 text-gray-800 sds-fs-93\"\n        [attr.href]=\"link || null\"\n        [attr.target]=\"tabName || null\"\n        [attr.rel]=\"tabName === '_blank' ? 'noopener noreferrer' : null\"\n        >\n        <div class=\"d-flex align-items-center justify-content-center position-relative\">\n            <div class=\"sds-navigation-icon\" >\n                <ng-content select=\"[navigationIcon]\"></ng-content>\n            </div>\n\n            <ng-container *ngIf=\"!isCollapsed()\">\n            \n                <div class=\"sds-navigation-text\">\n                    <span>{{ text }}</span>\n                </div>\n\n                <div \n                    class=\"sds-navigation-external-link-info-container\">\n                    <fa-icon \n                        class=\"sds-navigation-external-link-info-icon\"\n                        *ngIf=\"showExternalLinkIcon\"\n\n                        [icon]=\"externalLinkIcon\"\n                        [size]=\"'xs'\"\n                        [title]=\"externalLinkHint\"\n                        >\n                    </fa-icon>\n                </div> \n            </ng-container>\n            \n            <ng-content></ng-content>\n\n        </div>\n    </a>\n</div>", styles: [".sds-navigation-external-link:hover{background-color:#eff1f3;border-left-color:#eff1f3}.sds-navigation-external-link{border-radius:.266rem;padding:0!important;border-left:none!important}.sds-navigation-external-link a{padding-top:.5rem!important;padding-bottom:.5rem!important}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsNavigationExternalLinkComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsNavigationExternalLinkComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sds-navigation-external-link', standalone: true, imports: [NgIf, FaIconComponent], template: "<div \n    class=\"sds-navigation-external-link sds-navigation-item-container\"\n    [title]=\"isCollapsed() ? text : ''\"\n    >\n    <a\n        class=\"w-100 sds-navigation-item-content pe-2 text-gray-800 sds-fs-93\"\n        [attr.href]=\"link || null\"\n        [attr.target]=\"tabName || null\"\n        [attr.rel]=\"tabName === '_blank' ? 'noopener noreferrer' : null\"\n        >\n        <div class=\"d-flex align-items-center justify-content-center position-relative\">\n            <div class=\"sds-navigation-icon\" >\n                <ng-content select=\"[navigationIcon]\"></ng-content>\n            </div>\n\n            <ng-container *ngIf=\"!isCollapsed()\">\n            \n                <div class=\"sds-navigation-text\">\n                    <span>{{ text }}</span>\n                </div>\n\n                <div \n                    class=\"sds-navigation-external-link-info-container\">\n                    <fa-icon \n                        class=\"sds-navigation-external-link-info-icon\"\n                        *ngIf=\"showExternalLinkIcon\"\n\n                        [icon]=\"externalLinkIcon\"\n                        [size]=\"'xs'\"\n                        [title]=\"externalLinkHint\"\n                        >\n                    </fa-icon>\n                </div> \n            </ng-container>\n            \n            <ng-content></ng-content>\n\n        </div>\n    </a>\n</div>", styles: [".sds-navigation-external-link:hover{background-color:#eff1f3;border-left-color:#eff1f3}.sds-navigation-external-link{border-radius:.266rem;padding:0!important;border-left:none!important}.sds-navigation-external-link a{padding-top:.5rem!important;padding-bottom:.5rem!important}\n"] }]
+            args: [{ selector: 'sds-navigation-external-link', imports: [NgIf, FaIconComponent], template: "<div \n    class=\"sds-navigation-external-link sds-navigation-item-container\"\n    [title]=\"isCollapsed() ? text : ''\"\n    >\n    <a\n        class=\"w-100 sds-navigation-item-content pe-2 text-gray-800 sds-fs-93\"\n        [attr.href]=\"link || null\"\n        [attr.target]=\"tabName || null\"\n        [attr.rel]=\"tabName === '_blank' ? 'noopener noreferrer' : null\"\n        >\n        <div class=\"d-flex align-items-center justify-content-center position-relative\">\n            <div class=\"sds-navigation-icon\" >\n                <ng-content select=\"[navigationIcon]\"></ng-content>\n            </div>\n\n            <ng-container *ngIf=\"!isCollapsed()\">\n            \n                <div class=\"sds-navigation-text\">\n                    <span>{{ text }}</span>\n                </div>\n\n                <div \n                    class=\"sds-navigation-external-link-info-container\">\n                    <fa-icon \n                        class=\"sds-navigation-external-link-info-icon\"\n                        *ngIf=\"showExternalLinkIcon\"\n\n                        [icon]=\"externalLinkIcon\"\n                        [size]=\"'xs'\"\n                        [title]=\"externalLinkHint\"\n                        >\n                    </fa-icon>\n                </div> \n            </ng-container>\n            \n            <ng-content></ng-content>\n\n        </div>\n    </a>\n</div>", styles: [".sds-navigation-external-link:hover{background-color:#eff1f3;border-left-color:#eff1f3}.sds-navigation-external-link{border-radius:.266rem;padding:0!important;border-left:none!important}.sds-navigation-external-link a{padding-top:.5rem!important;padding-bottom:.5rem!important}\n"] }]
         }], propDecorators: { link: [{
                 type: Input
             }], text: [{
@@ -392,21 +395,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], showExternalLinkIcon: [{
                 type: Input
-            }] } });
+            }], isCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsed", required: false }] }, { type: i0.Output, args: ["isCollapsedChange"] }] } });
 
 class SdsNavigationCollapsibleFrameComponent {
     constructor() {
-        this.isCollapsed = model(false);
+        this.isCollapsed = model(false, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsNavigationCollapsibleFrameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: SdsNavigationCollapsibleFrameComponent, isStandalone: true, selector: "sds-navigation-collapsible-frame", inputs: { isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange" }, ngImport: i0, template: "<ng-container *ngIf=\"!isCollapsed()\">\n    <ng-content></ng-content>\n</ng-container>\n\n<ng-container *ngIf=\"isCollapsed()\">\n    <ng-content select=\"[collapsed]\"></ng-content>\n</ng-container>\n\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsNavigationCollapsibleFrameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.23", type: SdsNavigationCollapsibleFrameComponent, isStandalone: true, selector: "sds-navigation-collapsible-frame", inputs: { isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange" }, ngImport: i0, template: "<ng-container *ngIf=\"!isCollapsed()\">\n    <ng-content></ng-content>\n</ng-container>\n\n<ng-container *ngIf=\"isCollapsed()\">\n    <ng-content select=\"[collapsed]\"></ng-content>\n</ng-container>\n\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsNavigationCollapsibleFrameComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsNavigationCollapsibleFrameComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sds-navigation-collapsible-frame', standalone: true, imports: [
+            args: [{ selector: 'sds-navigation-collapsible-frame', imports: [
                         NgIf
                     ], template: "<ng-container *ngIf=\"!isCollapsed()\">\n    <ng-content></ng-content>\n</ng-container>\n\n<ng-container *ngIf=\"isCollapsed()\">\n    <ng-content select=\"[collapsed]\"></ng-content>\n</ng-container>\n\n" }]
-        }] });
+        }], propDecorators: { isCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsed", required: false }] }, { type: i0.Output, args: ["isCollapsedChange"] }] } });
 
 class SdsUserProfileActionButtonComponent {
     constructor() {
@@ -416,12 +419,12 @@ class SdsUserProfileActionButtonComponent {
     onActionClick() {
         this.actionClick.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsUserProfileActionButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SdsUserProfileActionButtonComponent, isStandalone: true, selector: "sds-user-profile-action-button", inputs: { text: "text", icon: "icon" }, outputs: { actionClick: "actionClick" }, ngImport: i0, template: "<a \n    class=\"\n        d-block \n        text-black \n        sds-navigation-user-profile-action-button \n        sds-hoverable-150 \n        sds-fs-93 \n        sds-cursor-pointer\n        \"\n    (click)=\"onActionClick()\" \n>\n    <fa-icon\n        *ngIf=\"icon\"\n        class=\"me-2\"\n        [fixedWidth]=\"true\"\n        [size]=\"'sm'\"\n        [icon]=\"icon\">\n    </fa-icon>\n\n    <span>{{text}}</span>\n</a>", styles: ["a{-webkit-user-select:none;user-select:none;text-decoration:none;padding:.5rem;width:100%;border-radius:4px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsUserProfileActionButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: SdsUserProfileActionButtonComponent, isStandalone: true, selector: "sds-user-profile-action-button", inputs: { text: "text", icon: "icon" }, outputs: { actionClick: "actionClick" }, ngImport: i0, template: "<a \n    class=\"\n        d-block \n        text-black \n        sds-navigation-user-profile-action-button \n        sds-hoverable-150 \n        sds-fs-93 \n        sds-cursor-pointer\n        \"\n    (click)=\"onActionClick()\" \n>\n    <fa-icon\n        *ngIf=\"icon\"\n        class=\"me-2\"\n        [fixedWidth]=\"true\"\n        [size]=\"'sm'\"\n        [icon]=\"icon\">\n    </fa-icon>\n\n    <span>{{text}}</span>\n</a>", styles: ["a{-webkit-user-select:none;user-select:none;text-decoration:none;padding:.5rem;width:100%;border-radius:4px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsUserProfileActionButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsUserProfileActionButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sds-user-profile-action-button', standalone: true, imports: [
+            args: [{ selector: 'sds-user-profile-action-button', imports: [
                         NgIf,
                         FontAwesomeModule
                     ], template: "<a \n    class=\"\n        d-block \n        text-black \n        sds-navigation-user-profile-action-button \n        sds-hoverable-150 \n        sds-fs-93 \n        sds-cursor-pointer\n        \"\n    (click)=\"onActionClick()\" \n>\n    <fa-icon\n        *ngIf=\"icon\"\n        class=\"me-2\"\n        [fixedWidth]=\"true\"\n        [size]=\"'sm'\"\n        [icon]=\"icon\">\n    </fa-icon>\n\n    <span>{{text}}</span>\n</a>", styles: ["a{-webkit-user-select:none;user-select:none;text-decoration:none;padding:.5rem;width:100%;border-radius:4px}\n"] }]
@@ -450,8 +453,8 @@ class SdsNavigationUserProfileComponent {
         this.showOptionsChange = new EventEmitter();
         this.userProfileIcon = faUser;
         this.signOutIcon = faSignOut;
-        this.isCollapsed = model(false);
-        this.sideBarInstanceName = input('');
+        this.isCollapsed = model(false, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
+        this.sideBarInstanceName = input('', ...(ngDevMode ? [{ debugName: "sideBarInstanceName" }] : /* istanbul ignore next */ []));
     }
     ngOnInit() { }
     ngOnChanges(changes) {
@@ -493,12 +496,12 @@ class SdsNavigationUserProfileComponent {
         event.stopPropagation();
         this.notificationBadgeClick.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsNavigationUserProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SdsNavigationUserProfileComponent, isStandalone: true, selector: "sds-navigation-user-profile", inputs: { profile: { classPropertyName: "profile", publicName: "profile", isSignal: false, isRequired: false, transformFunction: null }, profileInfo: { classPropertyName: "profileInfo", publicName: "profileInfo", isSignal: false, isRequired: false, transformFunction: null }, showSignOut: { classPropertyName: "showSignOut", publicName: "showSignOut", isSignal: false, isRequired: false, transformFunction: null }, showProfile: { classPropertyName: "showProfile", publicName: "showProfile", isSignal: false, isRequired: false, transformFunction: null }, signOutText: { classPropertyName: "signOutText", publicName: "signOutText", isSignal: false, isRequired: false, transformFunction: null }, profileText: { classPropertyName: "profileText", publicName: "profileText", isSignal: false, isRequired: false, transformFunction: null }, showNotificationBadge: { classPropertyName: "showNotificationBadge", publicName: "showNotificationBadge", isSignal: false, isRequired: false, transformFunction: null }, newNotificationsText: { classPropertyName: "newNotificationsText", publicName: "newNotificationsText", isSignal: false, isRequired: false, transformFunction: null }, showOptions: { classPropertyName: "showOptions", publicName: "showOptions", isSignal: false, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null }, sideBarInstanceName: { classPropertyName: "sideBarInstanceName", publicName: "sideBarInstanceName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { profileClick: "profileClick", signOutClick: "signOutClick", notificationBadgeClick: "notificationBadgeClick", showOptionsChange: "showOptionsChange", isCollapsed: "isCollapsedChange" }, usesOnChanges: true, ngImport: i0, template: "<div\n    class=\"\n        d-flex\n        flex-row\n        align-items-center\n        gap-2\n        sds-navigation-user-profile-container\n        user-select-none\n        mb-1 ms-1 me-1 mt-2\n        pt-1 pb-1 ps-2\n        sds-hoverable\n        sds-rounded-2\n    \"\n    (click)=\"toggleOptions($event)\"\n>\n    <div \n        #popoverTarget\n        class=\"\n            position-relative\n\n        \">\n        <sds-avatar\n            [text]=\"profile?.name\"\n            [colorKey]=\"profile?.id\"\n            [pictureUri]=\"profile?.pictureUri\"\n        >\n        </sds-avatar>\n\n        <span\n            *ngIf=\"showNotificationBadge\"\n            class=\"\n                position-absolute\n                notification-badge\n                translate-middle\n                bg-danger\n                border border-light\n                rounded-circle\n            \"\n            (click)=\"onNotificationBadgeClick($event)\"\n        >\n            <span class=\"visually-hidden\">{{ newNotificationsText }}</span>\n        </span>\n    </div>\n\n    @if(!isCollapsed()) {\n        <div class=\"sds-flex-column\">\n            <span class=\"truncate-two-lines text-gray-800 sds-fs-93\">\n                {{ profile?.name }}\n            </span>\n\n            <span class=\"sds-fw-400 sds-fs-75 text-truncate text-muted\">\n                {{ profileInfo }}\n            </span>\n        </div>\n    }\n</div>\n\n<dx-popover\n    [target]=\"popoverTarget\"\n    [position]=\"{ my: 'left bottom', at: 'left top' }\"\n    collision=\"fit none\"\n    minWidth=\"20rem\"\n    maxWidth=\"20rem\"\n    [(visible)]=\"showOptions\"\n    [wrapperAttr]=\"{\n        class: 'sds-navigation-user-profile-popover sds-dx-popup-no-arrow sds-dx-popup-content-padding-0'\n    }\"\n>\n    <div class=\"py-2 pb-3 main-profile-container border-bottom\">\n\n        <div class=\"sds-flex-column align-items-center\">\n            <sds-avatar\n                [text]=\"profile?.name\"\n                [colorKey]=\"profile?.id\"\n                [pictureUri]=\"profile?.pictureUri\"\n                [size]=\"7\"\n            >\n            </sds-avatar>\n\n            <h5 class=\"text-center mt-2 px-3\">\n                {{profile?.name}}\n            </h5>\n\n            <div class=\"sds-fw-400 text-center text-gray-800 sds-fs-87 px-3 text-truncate w-100\">\n                {{profile?.info}}\n            </div>\n        \n        </div>\n\n    </div>\n\n    <ng-content></ng-content>\n\n    <ul\n        class=\"\n            list-unstyled\n            sds-navigation-user-profile-actions\n            mb-0\n            sds-ul-gap-1\n            mx-2\n            mb-2\n        \"\n    >\n        <li *ngIf=\"showProfile\">\n            <sds-user-profile-action-button\n                [text]=\"profileText\"\n                [icon]=\"userProfileIcon\"\n                (actionClick)=\"onProfileClick()\"\n            >\n            </sds-user-profile-action-button>\n        </li>\n\n        <li *ngIf=\"showSignOut\">\n            <sds-user-profile-action-button\n                [text]=\"signOutText\"\n                [icon]=\"signOutIcon\"\n                (actionClick)=\"onSignOutClick()\"\n            >\n            </sds-user-profile-action-button>\n        </li>\n    </ul>\n</dx-popover>\n", styles: [".sds-navigation-user-profile-container{padding:.8rem;cursor:pointer}.sds-navigation-user-profile-container .notification-badge{top:15%;left:100%;padding:.4rem}.truncate-two-lines{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}.main-profile-container{margin:.5rem}::ng-deep .sds-navigation-user-profile-popover .dx-popup-content{padding:0!important;font-size:1rem}\n"], dependencies: [{ kind: "component", type: SdsAvatarComponent, selector: "sds-avatar", inputs: ["text", "colorKey", "pictureUri", "showHint", "borderStyle", "borderColor", "borderWidth", "initialsText", "cursor", "size", "pictureImageAlt", "pictureLoading", "picturePriority", "badgeVisible", "badgePosition", "badgeBackgroundColor", "badgeTextColor", "badgeHint"] }, { kind: "component", type: SdsUserProfileActionButtonComponent, selector: "sds-user-profile-action-button", inputs: ["text", "icon"], outputs: ["actionClick"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: DxPopoverModule }, { kind: "component", type: i2.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "deferRendering", "disabled", "enableBodyScroll", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showEvent", "showTitle", "target", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "onTitleRendered", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "deferRenderingChange", "disabledChange", "enableBodyScrollChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsNavigationUserProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: SdsNavigationUserProfileComponent, isStandalone: true, selector: "sds-navigation-user-profile", inputs: { profile: { classPropertyName: "profile", publicName: "profile", isSignal: false, isRequired: false, transformFunction: null }, profileInfo: { classPropertyName: "profileInfo", publicName: "profileInfo", isSignal: false, isRequired: false, transformFunction: null }, showSignOut: { classPropertyName: "showSignOut", publicName: "showSignOut", isSignal: false, isRequired: false, transformFunction: null }, showProfile: { classPropertyName: "showProfile", publicName: "showProfile", isSignal: false, isRequired: false, transformFunction: null }, signOutText: { classPropertyName: "signOutText", publicName: "signOutText", isSignal: false, isRequired: false, transformFunction: null }, profileText: { classPropertyName: "profileText", publicName: "profileText", isSignal: false, isRequired: false, transformFunction: null }, showNotificationBadge: { classPropertyName: "showNotificationBadge", publicName: "showNotificationBadge", isSignal: false, isRequired: false, transformFunction: null }, newNotificationsText: { classPropertyName: "newNotificationsText", publicName: "newNotificationsText", isSignal: false, isRequired: false, transformFunction: null }, showOptions: { classPropertyName: "showOptions", publicName: "showOptions", isSignal: false, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null }, sideBarInstanceName: { classPropertyName: "sideBarInstanceName", publicName: "sideBarInstanceName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { profileClick: "profileClick", signOutClick: "signOutClick", notificationBadgeClick: "notificationBadgeClick", showOptionsChange: "showOptionsChange", isCollapsed: "isCollapsedChange" }, usesOnChanges: true, ngImport: i0, template: "<div\n    class=\"\n        d-flex\n        flex-row\n        align-items-center\n        gap-2\n        sds-navigation-user-profile-container\n        user-select-none\n        mb-1 ms-1 me-1 mt-2\n        pt-1 pb-1 ps-2\n        sds-hoverable\n        sds-rounded-2\n    \"\n    (click)=\"toggleOptions($event)\"\n>\n    <div \n        #popoverTarget\n        class=\"\n            position-relative\n\n        \">\n        <sds-avatar\n            [text]=\"profile?.name\"\n            [colorKey]=\"profile?.id\"\n            [pictureUri]=\"profile?.pictureUri\"\n        >\n        </sds-avatar>\n\n        <span\n            *ngIf=\"showNotificationBadge\"\n            class=\"\n                position-absolute\n                notification-badge\n                translate-middle\n                bg-danger\n                border border-light\n                rounded-circle\n            \"\n            (click)=\"onNotificationBadgeClick($event)\"\n        >\n            <span class=\"visually-hidden\">{{ newNotificationsText }}</span>\n        </span>\n    </div>\n\n    @if(!isCollapsed()) {\n        <div class=\"sds-flex-column\">\n            <span class=\"truncate-two-lines text-gray-800 sds-fs-93\">\n                {{ profile?.name }}\n            </span>\n\n            <span class=\"sds-fw-400 sds-fs-75 text-truncate text-muted\">\n                {{ profileInfo }}\n            </span>\n        </div>\n    }\n</div>\n\n<dx-popover\n    [target]=\"popoverTarget\"\n    [position]=\"{ my: 'left bottom', at: 'left top' }\"\n    collision=\"fit none\"\n    minWidth=\"20rem\"\n    maxWidth=\"20rem\"\n    [(visible)]=\"showOptions\"\n    [wrapperAttr]=\"{\n        class: 'sds-navigation-user-profile-popover sds-dx-popup-no-arrow sds-dx-popup-content-padding-0'\n    }\"\n>\n    <div class=\"py-2 pb-3 main-profile-container border-bottom\">\n\n        <div class=\"sds-flex-column align-items-center\">\n            <sds-avatar\n                [text]=\"profile?.name\"\n                [colorKey]=\"profile?.id\"\n                [pictureUri]=\"profile?.pictureUri\"\n                [size]=\"7\"\n            >\n            </sds-avatar>\n\n            <h5 class=\"text-center mt-2 px-3\">\n                {{profile?.name}}\n            </h5>\n\n            <div class=\"sds-fw-400 text-center text-gray-800 sds-fs-87 px-3 text-truncate w-100\">\n                {{profile?.info}}\n            </div>\n        \n        </div>\n\n    </div>\n\n    <ng-content></ng-content>\n\n    <ul\n        class=\"\n            list-unstyled\n            sds-navigation-user-profile-actions\n            mb-0\n            sds-ul-gap-1\n            mx-2\n            mb-2\n        \"\n    >\n        <li *ngIf=\"showProfile\">\n            <sds-user-profile-action-button\n                [text]=\"profileText\"\n                [icon]=\"userProfileIcon\"\n                (actionClick)=\"onProfileClick()\"\n            >\n            </sds-user-profile-action-button>\n        </li>\n\n        <li *ngIf=\"showSignOut\">\n            <sds-user-profile-action-button\n                [text]=\"signOutText\"\n                [icon]=\"signOutIcon\"\n                (actionClick)=\"onSignOutClick()\"\n            >\n            </sds-user-profile-action-button>\n        </li>\n    </ul>\n</dx-popover>\n", styles: [".sds-navigation-user-profile-container{padding:.8rem;cursor:pointer}.sds-navigation-user-profile-container .notification-badge{top:15%;left:100%;padding:.4rem}.truncate-two-lines{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}.main-profile-container{margin:.5rem}::ng-deep .sds-navigation-user-profile-popover .dx-popup-content{padding:0!important;font-size:1rem}\n"], dependencies: [{ kind: "component", type: SdsAvatarComponent, selector: "sds-avatar", inputs: ["text", "colorKey", "pictureUri", "showHint", "borderStyle", "borderColor", "borderWidth", "initialsText", "cursor", "size", "pictureImageAlt", "pictureLoading", "picturePriority", "badgeVisible", "badgePosition", "badgeBackgroundColor", "badgeTextColor", "badgeHint"] }, { kind: "component", type: SdsUserProfileActionButtonComponent, selector: "sds-user-profile-action-button", inputs: ["text", "icon"], outputs: ["actionClick"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: DxPopoverModule }, { kind: "component", type: i2.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "deferRendering", "disabled", "enableBodyScroll", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showEvent", "showTitle", "target", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "onTitleRendered", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "deferRenderingChange", "disabledChange", "enableBodyScrollChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsNavigationUserProfileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsNavigationUserProfileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sds-navigation-user-profile', standalone: true, imports: [
+            args: [{ selector: 'sds-navigation-user-profile', imports: [
                         SdsAvatarComponent,
                         SdsUserProfileActionButtonComponent,
                         NgIf,
@@ -530,11 +533,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], showOptionsChange: [{
                 type: Output
-            }] } });
+            }], isCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsed", required: false }] }, { type: i0.Output, args: ["isCollapsedChange"] }], sideBarInstanceName: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideBarInstanceName", required: false }] }] } });
 
 class SdsNavigationContainerComponent {
     constructor() {
-        this.isCollapsed = model(false);
+        this.isCollapsed = model(false, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
         effect(() => {
             const isCollapsed = this.isCollapsed();
             untracked(() => {
@@ -552,13 +555,13 @@ class SdsNavigationContainerComponent {
         this.userProfileComponentChildren?.forEach((child) => { child.isCollapsed.set(isCollapsed); });
         this.collapsibleFrameComponentChildren?.forEach((child) => { child.isCollapsed.set(isCollapsed); });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsNavigationContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: SdsNavigationContainerComponent, isStandalone: true, selector: "sds-navigation-container", inputs: { isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange" }, queries: [{ propertyName: "groupComponentChildren", predicate: SdsNavigationGroupComponent }, { propertyName: "routeLinkComponentChildren", predicate: SdsNavigationRouteLinkComponent }, { propertyName: "separatorComponentChildren", predicate: SdsNavigationSeparatorComponent }, { propertyName: "headerComponentChildren", predicate: SdsNavigationHeaderComponent }, { propertyName: "externalLinkComponentChildren", predicate: SdsNavigationExternalLinkComponent }, { propertyName: "userProfileComponentChildren", predicate: SdsNavigationUserProfileComponent }, { propertyName: "collapsibleFrameComponentChildren", predicate: SdsNavigationCollapsibleFrameComponent }], ngImport: i0, template: "<div class=\"sds-navigation-container\">\n    <ng-content></ng-content>\n</div>", styles: [".sds-navigation-container{height:100%;display:flex;flex-direction:column;padding-right:.25rem;padding-left:.25rem;gap:.25rem}:host{overflow-y:auto;overflow-x:hidden}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsNavigationContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.23", type: SdsNavigationContainerComponent, isStandalone: true, selector: "sds-navigation-container", inputs: { isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange" }, queries: [{ propertyName: "groupComponentChildren", predicate: SdsNavigationGroupComponent }, { propertyName: "routeLinkComponentChildren", predicate: SdsNavigationRouteLinkComponent }, { propertyName: "separatorComponentChildren", predicate: SdsNavigationSeparatorComponent }, { propertyName: "headerComponentChildren", predicate: SdsNavigationHeaderComponent }, { propertyName: "externalLinkComponentChildren", predicate: SdsNavigationExternalLinkComponent }, { propertyName: "userProfileComponentChildren", predicate: SdsNavigationUserProfileComponent }, { propertyName: "collapsibleFrameComponentChildren", predicate: SdsNavigationCollapsibleFrameComponent }], ngImport: i0, template: "<div class=\"sds-navigation-container\">\n    <ng-content></ng-content>\n</div>", styles: [".sds-navigation-container{height:100%;display:flex;flex-direction:column;padding-right:.25rem;padding-left:.25rem;gap:.25rem}:host{overflow-y:auto;overflow-x:hidden}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsNavigationContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsNavigationContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sds-navigation-container', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sds-navigation-container\">\n    <ng-content></ng-content>\n</div>", styles: [".sds-navigation-container{height:100%;display:flex;flex-direction:column;padding-right:.25rem;padding-left:.25rem;gap:.25rem}:host{overflow-y:auto;overflow-x:hidden}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { groupComponentChildren: [{
+        }], ctorParameters: () => [], propDecorators: { isCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsed", required: false }] }, { type: i0.Output, args: ["isCollapsedChange"] }], groupComponentChildren: [{
                 type: ContentChildren,
                 args: [SdsNavigationGroupComponent]
             }], routeLinkComponentChildren: [{
@@ -587,12 +590,12 @@ class SdsUserProfileTileComponent {
         this.emphasizeName = true;
         this.size = 'medium';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsUserProfileTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SdsUserProfileTileComponent, isStandalone: true, selector: "sds-user-profile-tile", inputs: { profile: "profile", emphasizeName: "emphasizeName", size: "size" }, ngImport: i0, template: "\n<div class=\"sds-flex-row-center gap-3\">\n    <sds-avatar\n        [text]=\"profile?.name\"\n        [colorKey]=\"profile?.id\"\n        [pictureUri]=\"profile?.pictureUri\"\n        [size]=\"size === 'small' ? 2 : 3\"\n        borderColor=\"white\"\n        borderWidth=\"2\"\n    >\n    </sds-avatar>\n\n    <div \n        class=\"flex-grow-1 flex-shrink-1 text-body\"\n        [style.minWidth.px]=\"1\"\n        >\n        <span \n            class=\"sds-fs-100 text-truncate\"\n            [class.sds-fs-100]=\"size === 'medium'\"\n            [class.sds-fs-95]=\"size === 'small'\"\n            [class.sds-fw-500]=\"emphasizeName\"\n            >\n            {{profile?.name}}\n        </span>\n        <div \n            class=\"sds-fw-400 text-truncate text-gray-800\"\n            [class.sds-fs-75]=\"size === 'medium'\"\n            [class.sds-fs-75]=\"size === 'small'\"\n        >\n            {{profile?.info}}\n        </div>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: SdsAvatarComponent, selector: "sds-avatar", inputs: ["text", "colorKey", "pictureUri", "showHint", "borderStyle", "borderColor", "borderWidth", "initialsText", "cursor", "size", "pictureImageAlt", "pictureLoading", "picturePriority", "badgeVisible", "badgePosition", "badgeBackgroundColor", "badgeTextColor", "badgeHint"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsUserProfileTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: SdsUserProfileTileComponent, isStandalone: true, selector: "sds-user-profile-tile", inputs: { profile: "profile", emphasizeName: "emphasizeName", size: "size" }, ngImport: i0, template: "\n<div class=\"sds-flex-row-center gap-3\">\n    <sds-avatar\n        [text]=\"profile?.name\"\n        [colorKey]=\"profile?.id\"\n        [pictureUri]=\"profile?.pictureUri\"\n        [size]=\"size === 'small' ? 2 : 3\"\n        borderColor=\"white\"\n        borderWidth=\"2\"\n    >\n    </sds-avatar>\n\n    <div \n        class=\"flex-grow-1 flex-shrink-1 text-body\"\n        [style.minWidth.px]=\"1\"\n        >\n        <span \n            class=\"sds-fs-100 text-truncate\"\n            [class.sds-fs-100]=\"size === 'medium'\"\n            [class.sds-fs-95]=\"size === 'small'\"\n            [class.sds-fw-500]=\"emphasizeName\"\n            >\n            {{profile?.name}}\n        </span>\n        <div \n            class=\"sds-fw-400 text-truncate text-gray-800\"\n            [class.sds-fs-75]=\"size === 'medium'\"\n            [class.sds-fs-75]=\"size === 'small'\"\n        >\n            {{profile?.info}}\n        </div>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: SdsAvatarComponent, selector: "sds-avatar", inputs: ["text", "colorKey", "pictureUri", "showHint", "borderStyle", "borderColor", "borderWidth", "initialsText", "cursor", "size", "pictureImageAlt", "pictureLoading", "picturePriority", "badgeVisible", "badgePosition", "badgeBackgroundColor", "badgeTextColor", "badgeHint"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsUserProfileTileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsUserProfileTileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sds-user-profile-tile', standalone: true, imports: [
+            args: [{ selector: 'sds-user-profile-tile', imports: [
                         SdsAvatarComponent
                     ], template: "\n<div class=\"sds-flex-row-center gap-3\">\n    <sds-avatar\n        [text]=\"profile?.name\"\n        [colorKey]=\"profile?.id\"\n        [pictureUri]=\"profile?.pictureUri\"\n        [size]=\"size === 'small' ? 2 : 3\"\n        borderColor=\"white\"\n        borderWidth=\"2\"\n    >\n    </sds-avatar>\n\n    <div \n        class=\"flex-grow-1 flex-shrink-1 text-body\"\n        [style.minWidth.px]=\"1\"\n        >\n        <span \n            class=\"sds-fs-100 text-truncate\"\n            [class.sds-fs-100]=\"size === 'medium'\"\n            [class.sds-fs-95]=\"size === 'small'\"\n            [class.sds-fw-500]=\"emphasizeName\"\n            >\n            {{profile?.name}}\n        </span>\n        <div \n            class=\"sds-fw-400 text-truncate text-gray-800\"\n            [class.sds-fs-75]=\"size === 'medium'\"\n            [class.sds-fs-75]=\"size === 'small'\"\n        >\n            {{profile?.info}}\n        </div>\n    </div>\n</div>\n" }]
         }], propDecorators: { profile: [{
@@ -619,12 +622,12 @@ class SdsUserProfileSelectorComponent {
     selectDefaultProfile() {
         this.profileIdChange.emit('');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsUserProfileSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SdsUserProfileSelectorComponent, isStandalone: true, selector: "sds-user-profile-selector", inputs: { content: "content", profiles: "profiles", selectDefaultProfileText: "selectDefaultProfileText", switchText: "switchText" }, outputs: { profileIdChange: "profileIdChange" }, ngImport: i0, template: "<div class=\"mx-2\">  \n    <div \n        *ngIf=\"content === 'profileList' && profiles && profiles.length > 0\"\n        class=\"pt-2 pb-3 mt-1 mb-2 ps-2 border-bottom\">\n\n        <div class=\"sds-fs-75 py-1 mb-2 text-uppercase\">{{switchText}}</div>\n\n        <ul class=\"list-unstyled mb-0 sds-ul-gap-1 ps-2 profile-list sds-scrollbar sds-scrollbar-thin\">\n            <li\n                class=\"rounded sds-hoverable-150 pe-2 py-1\"\n                *ngFor=\"let profile of profiles\"\n            >\n                <sds-user-profile-tile\n                    class=\"sds-cursor-pointer\"\n                    [profile]=\"profile\"\n                    [size]=\"'small'\"\n                    [emphasizeName]=\"false\"\n                    (click)=\"selectProfile(profile.id)\"\n                    >\n                </sds-user-profile-tile>\n            </li>\n        </ul>\n    </div>\n\n    <div \n        *ngIf=\"content === 'selectDefaultProfile'\"\n        class=\"mt-2 mb-1\">\n        <sds-user-profile-action-button\n            [text]=\"selectDefaultProfileText\"\n            [icon]=\"SELECT_DEFAULT_PROFILE_ICON\"\n            (click)=\"selectDefaultProfile()\"\n            >\n        </sds-user-profile-action-button>\n    </div>\n</div>", styles: [".profile-list{max-height:6rem;overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SdsUserProfileTileComponent, selector: "sds-user-profile-tile", inputs: ["profile", "emphasizeName", "size"] }, { kind: "component", type: SdsUserProfileActionButtonComponent, selector: "sds-user-profile-action-button", inputs: ["text", "icon"], outputs: ["actionClick"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsUserProfileSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: SdsUserProfileSelectorComponent, isStandalone: true, selector: "sds-user-profile-selector", inputs: { content: "content", profiles: "profiles", selectDefaultProfileText: "selectDefaultProfileText", switchText: "switchText" }, outputs: { profileIdChange: "profileIdChange" }, ngImport: i0, template: "<div class=\"mx-2\">  \n    <div \n        *ngIf=\"content === 'profileList' && profiles && profiles.length > 0\"\n        class=\"pt-2 pb-3 mt-1 mb-2 ps-2 border-bottom\">\n\n        <div class=\"sds-fs-75 py-1 mb-2 text-uppercase\">{{switchText}}</div>\n\n        <ul class=\"list-unstyled mb-0 sds-ul-gap-1 ps-2 profile-list sds-scrollbar sds-scrollbar-thin\">\n            <li\n                class=\"rounded sds-hoverable-150 pe-2 py-1\"\n                *ngFor=\"let profile of profiles\"\n            >\n                <sds-user-profile-tile\n                    class=\"sds-cursor-pointer\"\n                    [profile]=\"profile\"\n                    [size]=\"'small'\"\n                    [emphasizeName]=\"false\"\n                    (click)=\"selectProfile(profile.id)\"\n                    >\n                </sds-user-profile-tile>\n            </li>\n        </ul>\n    </div>\n\n    <div \n        *ngIf=\"content === 'selectDefaultProfile'\"\n        class=\"mt-2 mb-1\">\n        <sds-user-profile-action-button\n            [text]=\"selectDefaultProfileText\"\n            [icon]=\"SELECT_DEFAULT_PROFILE_ICON\"\n            (click)=\"selectDefaultProfile()\"\n            >\n        </sds-user-profile-action-button>\n    </div>\n</div>", styles: [".profile-list{max-height:6rem;overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SdsUserProfileTileComponent, selector: "sds-user-profile-tile", inputs: ["profile", "emphasizeName", "size"] }, { kind: "component", type: SdsUserProfileActionButtonComponent, selector: "sds-user-profile-action-button", inputs: ["text", "icon"], outputs: ["actionClick"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsUserProfileSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsUserProfileSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sds-user-profile-selector', standalone: true, imports: [
+            args: [{ selector: 'sds-user-profile-selector', imports: [
                         NgIf,
                         NgFor,
                         SdsUserProfileTileComponent,
@@ -647,15 +650,15 @@ class SdsProductHomeComponent {
         this.showAppSwitcher = false;
         this.appSwitcherSwitchText = '';
         this.appSwitcherDiscoverText = '';
-        this.textOpen = input('Expand sidebar');
-        this.textClose = input('Collapse sidebar');
+        this.textOpen = input('Expand sidebar', ...(ngDevMode ? [{ debugName: "textOpen" }] : /* istanbul ignore next */ []));
+        this.textClose = input('Collapse sidebar', ...(ngDevMode ? [{ debugName: "textClose" }] : /* istanbul ignore next */ []));
         this.allowHeaderClick = false;
         this.productSwitched = new EventEmitter();
         this.headerClick = new EventEmitter();
         this.ICON_CLOSE = faArrowLeftFromLine;
         this.ICON_OPEN = faArrowRightFromLine;
-        this.isCollapsed = model(false);
-        this.sideBarInstanceName = input('');
+        this.isCollapsed = model(false, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
+        this.sideBarInstanceName = input('', ...(ngDevMode ? [{ debugName: "sideBarInstanceName" }] : /* istanbul ignore next */ []));
     }
     ngOnInit() { }
     onProductClick(product) {
@@ -669,12 +672,12 @@ class SdsProductHomeComponent {
     toggleState() {
         this.isCollapsed.set(!this.isCollapsed());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsProductHomeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SdsProductHomeComponent, isStandalone: true, selector: "sds-product-home", inputs: { logoUrl: { classPropertyName: "logoUrl", publicName: "logoUrl", isSignal: false, isRequired: false, transformFunction: null }, logoAltText: { classPropertyName: "logoAltText", publicName: "logoAltText", isSignal: false, isRequired: false, transformFunction: null }, moduleTitle: { classPropertyName: "moduleTitle", publicName: "moduleTitle", isSignal: false, isRequired: false, transformFunction: null }, showAppSwitcher: { classPropertyName: "showAppSwitcher", publicName: "showAppSwitcher", isSignal: false, isRequired: false, transformFunction: null }, appSwitcherProductCode: { classPropertyName: "appSwitcherProductCode", publicName: "appSwitcherProductCode", isSignal: false, isRequired: false, transformFunction: null }, appSwitcherUserProductCodes: { classPropertyName: "appSwitcherUserProductCodes", publicName: "appSwitcherUserProductCodes", isSignal: false, isRequired: false, transformFunction: null }, appSwitcherTenantProducts: { classPropertyName: "appSwitcherTenantProducts", publicName: "appSwitcherTenantProducts", isSignal: false, isRequired: false, transformFunction: null }, appSwitcherSwitchText: { classPropertyName: "appSwitcherSwitchText", publicName: "appSwitcherSwitchText", isSignal: false, isRequired: false, transformFunction: null }, appSwitcherDiscoverText: { classPropertyName: "appSwitcherDiscoverText", publicName: "appSwitcherDiscoverText", isSignal: false, isRequired: false, transformFunction: null }, textOpen: { classPropertyName: "textOpen", publicName: "textOpen", isSignal: true, isRequired: false, transformFunction: null }, textClose: { classPropertyName: "textClose", publicName: "textClose", isSignal: true, isRequired: false, transformFunction: null }, allowHeaderClick: { classPropertyName: "allowHeaderClick", publicName: "allowHeaderClick", isSignal: false, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null }, sideBarInstanceName: { classPropertyName: "sideBarInstanceName", publicName: "sideBarInstanceName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { productSwitched: "productSwitched", headerClick: "headerClick", isCollapsed: "isCollapsedChange" }, ngImport: i0, template: "<div \n    class=\"product-header pb-2 mb-2 align-items-start gap-2\"\n    >\n        @if(!isCollapsed()) {\n        <sds-app-switcher\n            *ngIf=\"showAppSwitcher\"\n            class=\"app-switcher text-gray-800 sds-fs-93 sds-hoverable sds-rounded-2 p-1 d-flex align-items-center justify-content-center\"\n            [productCode]=\"appSwitcherProductCode\"\n            [userProductCodes]=\"appSwitcherUserProductCodes\"\n            [tenantProducts]=\"appSwitcherTenantProducts\"\n            [switchText]=\"appSwitcherSwitchText\"\n            [discoverText]=\"appSwitcherDiscoverText\"\n            (productClick)=\"onProductClick($event)\"\n            >\n        </sds-app-switcher>\n   \n        <div \n            class=\"sds-flex-grow-shrink product-title\"\n            (click)=\"onHeaderClick()\"\n            [class.sds-cursor-pointer]=\"allowHeaderClick\"\n            [title]=\"moduleTitle && isCollapsed() ? moduleTitle : ''\"\n            >\n            <div \n                class=\"product-logo-container\"\n                [class.collapsed]=\"isCollapsed()\"\n                >\n                <img\n                    class=\"product-logo\"\n                    [src]=\"logoUrl\" \n                    [alt]=\"logoAltText\"\n                >  \n            </div>\n\n            @if(moduleTitle && !isCollapsed()) {\n                <h6 class=\"mt-2\">\n                    {{moduleTitle}}\n                </h6>\n            }\n        </div>\n    }\n\n    <button\n        type=\"button\"\n        class=\"\n            toggle-collapsed-button \n            text-gray-800 sds-fs-93 \n            sds-hoverable sds-rounded-2 \n            p-1 ml-2\n            d-flex align-items-center justify-content-center\n            sds-cursor-pointer\n            \" \n        (click)=\"toggleState()\" \n        [attr.aria-label]=\"isCollapsed() ? textOpen() : textClose()\"\n        [title]=\"isCollapsed() ? textOpen() : textClose()\" \n        >\n            <fa-icon \n                [icon]=\"isCollapsed() ? ICON_OPEN : ICON_CLOSE\" \n                [fixedWidth]=\"true\"\n                >\n            </fa-icon>\n    </button>\n    \n</div>\n", styles: [".product-header{padding-left:.75rem!important}.product-header .app-switcher{height:2rem;width:2rem}.product-header .product-title{margin-top:.15rem}.product-header .product-logo-container{height:calc(1.5rem + 2px)}.product-header .product-logo-container.collapsed{width:calc(1.5rem + 2px);overflow-x:hidden}.product-header .product-logo{height:1.5rem}.product-header h6{font-size:.8rem}.product-header .toggle-collapsed-button{height:2rem;width:2rem;border:0;background:transparent;appearance:none}.product-header .toggle-collapsed-button:focus-visible{outline:2px solid currentColor;outline-offset:2px}:host{width:100%}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: SdsAppSwitcherComponent, selector: "sds-app-switcher", inputs: ["productCode", "userProductCodes", "tenantProducts", "switchText", "discoverText", "ariaLabel"], outputs: ["productClick"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsProductHomeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: SdsProductHomeComponent, isStandalone: true, selector: "sds-product-home", inputs: { logoUrl: { classPropertyName: "logoUrl", publicName: "logoUrl", isSignal: false, isRequired: false, transformFunction: null }, logoAltText: { classPropertyName: "logoAltText", publicName: "logoAltText", isSignal: false, isRequired: false, transformFunction: null }, moduleTitle: { classPropertyName: "moduleTitle", publicName: "moduleTitle", isSignal: false, isRequired: false, transformFunction: null }, showAppSwitcher: { classPropertyName: "showAppSwitcher", publicName: "showAppSwitcher", isSignal: false, isRequired: false, transformFunction: null }, appSwitcherProductCode: { classPropertyName: "appSwitcherProductCode", publicName: "appSwitcherProductCode", isSignal: false, isRequired: false, transformFunction: null }, appSwitcherUserProductCodes: { classPropertyName: "appSwitcherUserProductCodes", publicName: "appSwitcherUserProductCodes", isSignal: false, isRequired: false, transformFunction: null }, appSwitcherTenantProducts: { classPropertyName: "appSwitcherTenantProducts", publicName: "appSwitcherTenantProducts", isSignal: false, isRequired: false, transformFunction: null }, appSwitcherSwitchText: { classPropertyName: "appSwitcherSwitchText", publicName: "appSwitcherSwitchText", isSignal: false, isRequired: false, transformFunction: null }, appSwitcherDiscoverText: { classPropertyName: "appSwitcherDiscoverText", publicName: "appSwitcherDiscoverText", isSignal: false, isRequired: false, transformFunction: null }, textOpen: { classPropertyName: "textOpen", publicName: "textOpen", isSignal: true, isRequired: false, transformFunction: null }, textClose: { classPropertyName: "textClose", publicName: "textClose", isSignal: true, isRequired: false, transformFunction: null }, allowHeaderClick: { classPropertyName: "allowHeaderClick", publicName: "allowHeaderClick", isSignal: false, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null }, sideBarInstanceName: { classPropertyName: "sideBarInstanceName", publicName: "sideBarInstanceName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { productSwitched: "productSwitched", headerClick: "headerClick", isCollapsed: "isCollapsedChange" }, ngImport: i0, template: "<div \n    class=\"product-header pb-2 mb-2 align-items-start gap-2\"\n    >\n        @if(!isCollapsed()) {\n        <sds-app-switcher\n            *ngIf=\"showAppSwitcher\"\n            class=\"app-switcher text-gray-800 sds-fs-93 sds-hoverable sds-rounded-2 p-1 d-flex align-items-center justify-content-center\"\n            [productCode]=\"appSwitcherProductCode\"\n            [userProductCodes]=\"appSwitcherUserProductCodes\"\n            [tenantProducts]=\"appSwitcherTenantProducts\"\n            [switchText]=\"appSwitcherSwitchText\"\n            [discoverText]=\"appSwitcherDiscoverText\"\n            (productClick)=\"onProductClick($event)\"\n            >\n        </sds-app-switcher>\n   \n        <div \n            class=\"sds-flex-grow-shrink product-title\"\n            (click)=\"onHeaderClick()\"\n            [class.sds-cursor-pointer]=\"allowHeaderClick\"\n            [title]=\"moduleTitle && isCollapsed() ? moduleTitle : ''\"\n            >\n            <div \n                class=\"product-logo-container\"\n                [class.collapsed]=\"isCollapsed()\"\n                >\n                <img\n                    class=\"product-logo\"\n                    [src]=\"logoUrl\" \n                    [alt]=\"logoAltText\"\n                >  \n            </div>\n\n            @if(moduleTitle && !isCollapsed()) {\n                <h6 class=\"mt-2\">\n                    {{moduleTitle}}\n                </h6>\n            }\n        </div>\n    }\n\n    <button\n        type=\"button\"\n        class=\"\n            toggle-collapsed-button \n            text-gray-800 sds-fs-93 \n            sds-hoverable sds-rounded-2 \n            p-1 ml-2\n            d-flex align-items-center justify-content-center\n            sds-cursor-pointer\n            \" \n        (click)=\"toggleState()\" \n        [attr.aria-label]=\"isCollapsed() ? textOpen() : textClose()\"\n        [title]=\"isCollapsed() ? textOpen() : textClose()\" \n        >\n            <fa-icon \n                [icon]=\"isCollapsed() ? ICON_OPEN : ICON_CLOSE\" \n                [fixedWidth]=\"true\"\n                >\n            </fa-icon>\n    </button>\n    \n</div>\n", styles: [".product-header{padding-left:.75rem!important}.product-header .app-switcher{height:2rem;width:2rem}.product-header .product-title{margin-top:.15rem}.product-header .product-logo-container{height:calc(1.5rem + 2px)}.product-header .product-logo-container.collapsed{width:calc(1.5rem + 2px);overflow-x:hidden}.product-header .product-logo{height:1.5rem}.product-header h6{font-size:.8rem}.product-header .toggle-collapsed-button{height:2rem;width:2rem;border:0;background:transparent;appearance:none}.product-header .toggle-collapsed-button:focus-visible{outline:2px solid currentColor;outline-offset:2px}:host{width:100%}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "component", type: SdsAppSwitcherComponent, selector: "sds-app-switcher", inputs: ["productCode", "userProductCodes", "tenantProducts", "switchText", "discoverText", "ariaLabel"], outputs: ["productClick"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsProductHomeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsProductHomeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sds-product-home', standalone: true, imports: [
+            args: [{ selector: 'sds-product-home', imports: [
                         NgIf,
                         FontAwesomeModule,
                         SdsAppSwitcherComponent
@@ -697,13 +700,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], appSwitcherDiscoverText: [{
                 type: Input
-            }], allowHeaderClick: [{
+            }], textOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "textOpen", required: false }] }], textClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "textClose", required: false }] }], allowHeaderClick: [{
                 type: Input
             }], productSwitched: [{
                 type: Output
             }], headerClick: [{
                 type: Output
-            }] } });
+            }], isCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsed", required: false }] }, { type: i0.Output, args: ["isCollapsedChange"] }], sideBarInstanceName: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideBarInstanceName", required: false }] }] } });
 
 /**
  * A standalone Angular pipe that dynamically generates a strict Regular Expression string
@@ -730,10 +733,10 @@ class SdsActiveRoutePatternPipe {
             .replace(/\//g, '\\/'));
         return `^\\/(${patterns.join('|')})(\\/[^?#]*)*([?#]|$)`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsActiveRoutePatternPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: SdsActiveRoutePatternPipe, isStandalone: true, name: "sdsActiveRoutePattern" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsActiveRoutePatternPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.23", ngImport: i0, type: SdsActiveRoutePatternPipe, isStandalone: true, name: "sdsActiveRoutePattern" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsActiveRoutePatternPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsActiveRoutePatternPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'sdsActiveRoutePattern',