@spicainternational/ngx-sds-components 9.1.1 → 9.2.0

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

@@ -1,23 +1,43 @@
 import * as i0 from '@angular/core';
-import { input, model, inject, computed, Component, QueryList, signal, ContentChildren, Input, EventEmitter, Output, contentChildren, effect, untracked, ChangeDetectionStrategy, output, Pipe } from '@angular/core';
-import * as i1 from '@angular/router';
-import { Router, NavigationEnd, RouterLink } from '@angular/router';
-import { NgIf, NgFor } from '@angular/common';
+import { input, model, inject, computed, Component, QueryList, signal, ContentChildren, Input, EventEmitter, Output, output, effect, ChangeDetectionStrategy, contentChildren, untracked, Pipe } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
-import { filter, map, Subject, takeUntil } from 'rxjs';
-import { faAngleUp, faAngleDown, faExternalLink, faUser, faSignOut, faEyeSlash, faArrowLeftFromLine, faArrowRightFromLine } from '@fortawesome/pro-regular-svg-icons';
-import * as i3 from 'devextreme-angular/ui/nested';
+import { Router, NavigationEnd, RouterLink } from '@angular/router';
+import { NgIf, NgTemplateOutlet, NgFor } from '@angular/common';
+import { filter, map, tap } from 'rxjs';
+import { faAngleUp, faAngleDown, faExternalLink, faUser, faSignOut, faCircleExclamation, faTriangleExclamation, faCircleInfo, faEyeSlash, faArrowLeftFromLine, faArrowRightFromLine } from '@fortawesome/pro-regular-svg-icons';
+import * as i2 from 'devextreme-angular/ui/nested';
 import { DxoPositionModule } from 'devextreme-angular/ui/nested';
-import * as i2 from 'devextreme-angular/ui/popover';
+import * as i1 from 'devextreme-angular/ui/popover';
 import { DxPopoverModule } from 'devextreme-angular/ui/popover';
 import * as i1$1 from '@fortawesome/angular-fontawesome';
 import { FaIconComponent, FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { SdsAvatarComponent } from '@spicainternational/ngx-sds-components/src/lib/avatar';
+import { CdkOverlayOrigin, CdkConnectedOverlay } from '@angular/cdk/overlay';
 import { SdsAppSwitcherComponent } from '@spicainternational/ngx-sds-components/src/lib/app-switcher';
 
 function removeQueryParams(url) {
     return url.split('?')[0];
 }
+function toActiveRouteRegExp(pattern) {
+    if (!pattern) {
+        return null;
+    }
+    return typeof pattern === 'string' ? new RegExp(pattern) : pattern;
+}
+/**
+ * Determines if the provided URL (e.g. router.url) is active for a navigation entity.
+ * If `activeRoutePattern` is provided, it is tested against the full URL.
+ * Otherwise the legacy matching (default link + nested routes) is used.
+ */
+function isRouteActive(url, options) {
+    const activeRouteRegExp = toActiveRouteRegExp(options.activeRoutePattern);
+    if (activeRouteRegExp) {
+        return activeRouteRegExp.test(url);
+    }
+    const activeRoute = options.ignoreQueryParams ? removeQueryParams(url) : url;
+    const currentUrl = activeRoute.split('/').filter((part) => part.length > 0);
+    return isUrlPartOfNavigationGroup(currentUrl, options.nestedRoutes ?? [], options.defaultLink ?? '');
+}
 function isUrlPartOfNavigationGroup(currentUrl, nestedRoutes, defaultGroupUrl) {
     if (!currentUrl || currentUrl?.length === 0) {
         return false;
@@ -90,37 +110,14 @@ class SdsNavigationRouteLinkComponent {
         /** @deprecated Use `activeRoutePattern` instead. */
         this.ignoreQueryParamsInActiveRoute = input(false, ...(ngDevMode ? [{ debugName: "ignoreQueryParamsInActiveRoute" }] : /* istanbul ignore next */ []));
         this.#router = inject(Router);
-        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;
-            }
-            if (typeof this.activeRoutePattern() === 'string') {
-                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()) {
-                return this.#activeRoutePatternRegExp().test(this.#routerUrl());
-            }
-            // Otherwise we should check if current route is part of navigation group (either default link or nested links)
-            const currentUrl = this.#currentUrl();
-            const nestedLinks = this.nestedLinks();
-            const defaultLink = this.link();
-            const isActive = isUrlPartOfNavigationGroup(currentUrl, nestedLinks, defaultLink);
-            return isActive;
-        }, ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
+        this.isActive = computed(() => isRouteActive(this.#routerUrl(), {
+            activeRoutePattern: this.activeRoutePattern(),
+            nestedRoutes: this.nestedLinks(),
+            defaultLink: this.link(),
+            ignoreQueryParams: this.ignoreQueryParamsInActiveRoute(),
+        }), ...(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 });
     }
-    #currentUrl;
-    #activeRoutePatternRegExp;
     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"] }] }); }
 }
@@ -130,19 +127,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
         }], 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. */
-    set navigationGroupNestedRoutes(value) {
-        this._navigationGroupNestedRoutes = value;
-    }
-    get navigationGroupNestedRoutes() {
-        return this._navigationGroupNestedRoutes;
-    }
-    #MOUSE_MOVE_TO_POPOVER_DELAY;
-    #pendingOpenTimeoutId;
-    #pendingCloseTimeoutId;
-    #closeRequested;
-    constructor(_router) {
-        this._router = _router;
+    constructor() {
         /**
          @deprecated Use `activeRoutePattern` instead.
          * List of paths allowed/expected within this module.
@@ -150,13 +135,13 @@ class SdsNavigationGroupComponent {
          * elements, but through links in other parts of the application (e.g. link
          * on form)
          */
-        this._navigationGroupNestedRoutes = [];
+        this.navigationGroupNestedRoutes = input([], ...(ngDevMode ? [{ debugName: "navigationGroupNestedRoutes" }] : /* istanbul ignore next */ []));
         this.text = '';
         this.icon = '';
-        this.defaultRouterLink = '';
+        this.defaultRouterLink = input('', ...(ngDevMode ? [{ debugName: "defaultRouterLink" }] : /* istanbul ignore next */ []));
         this.reverse = false;
         /** @deprecated Use `activeRoutePattern` instead. */
-        this.ignoreQueryParamsInActiveRoute = false;
+        this.ignoreQueryParamsInActiveRoute = input(false, ...(ngDevMode ? [{ debugName: "ignoreQueryParamsInActiveRoute" }] : /* istanbul ignore next */ []));
         this.disabled = false;
         this.showPopover = false;
         this.showPopoverHeader = false;
@@ -175,12 +160,14 @@ class SdsNavigationGroupComponent {
         this.isPopoverVisible = signal(false, ...(ngDevMode ? [{ debugName: "isPopoverVisible" }] : /* istanbul ignore next */ []));
         this.faAngleUpRegular = faAngleUp;
         this.faAngleDownRegular = faAngleDown;
-        /**
-         * Current app URL (e.g. ['layout-showcase', 'default'])
-         */
-        this.currentUrl = [];
-        this._unsubscribe = new Subject();
-        this.isGroupActive = false;
+        this.#router = inject(Router);
+        this.#routerUrl = toSignal(this.#router.events.pipe(filter((event) => event instanceof NavigationEnd), tap(() => this.isPopoverVisible.set(false)), map((event) => event.urlAfterRedirects)), { initialValue: this.#router.url });
+        this.isGroupActive = computed(() => isRouteActive(this.#routerUrl(), {
+            activeRoutePattern: this.activeRoutePattern(),
+            nestedRoutes: this.navigationGroupNestedRoutes(),
+            defaultLink: this.defaultRouterLink(),
+            ignoreQueryParams: this.ignoreQueryParamsInActiveRoute()
+        }), ...(ngDevMode ? [{ debugName: "isGroupActive" }] : /* istanbul ignore next */ []));
         this.isActiveGroupClosed = false;
         this.#MOUSE_MOVE_TO_POPOVER_DELAY = 200;
         this.#pendingOpenTimeoutId = null;
@@ -189,51 +176,13 @@ class SdsNavigationGroupComponent {
         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;
-            }
-            if (typeof this.activeRoutePattern() === 'string') {
-                return new RegExp(this.activeRoutePattern());
-            }
-            return this.activeRoutePattern();
-        }, ...(ngDevMode ? [{ debugName: "#activeRoutePatternRegExp" }] : /* istanbul ignore next */ []));
-    }
-    #activeRoutePatternRegExp;
-    ngOnInit() {
-        this._router.events.pipe(filter((event) => event instanceof NavigationEnd), takeUntil(this._unsubscribe)).subscribe((event) => {
-            if (event instanceof NavigationEnd) {
-                this.isPopoverVisible.set(false);
-                if (this.#activeRoutePatternRegExp()) {
-                    this.isGroupActive = this.#activeRoutePatternRegExp().test(event.urlAfterRedirects);
-                }
-                else {
-                    const activeRoute = this.ignoreQueryParamsInActiveRoute ? removeQueryParams(event.urlAfterRedirects) : event.urlAfterRedirects;
-                    const route = activeRoute.split('/').filter(item => item.length > 0);
-                    this.currentUrl = route;
-                    this.isGroupActive = isUrlPartOfNavigationGroup(this.currentUrl, this.navigationGroupNestedRoutes, this.defaultRouterLink);
-                }
-            }
-        });
-    }
-    ngOnChanges(changes) {
-        if (changes['navigationGroupNestedRoutes'] || changes['defaultRouterLink']) {
-            this.isPopoverVisible.set(false);
-            if (this.#activeRoutePatternRegExp()) {
-                this.isGroupActive = this.#activeRoutePatternRegExp().test(this._router.url);
-            }
-            else {
-                const activeRoute = this.ignoreQueryParamsInActiveRoute ? removeQueryParams(this._router.url) : this._router.url;
-                const route = activeRoute.split('/').filter(item => item.length > 0);
-                this.currentUrl = route;
-                this.isGroupActive = isUrlPartOfNavigationGroup(this.currentUrl, this.navigationGroupNestedRoutes, this.defaultRouterLink);
-            }
-        }
-    }
-    ngOnDestroy() {
-        this._unsubscribe.next();
-        this._unsubscribe.complete();
     }
+    #router;
+    #routerUrl;
+    #MOUSE_MOVE_TO_POPOVER_DELAY;
+    #pendingOpenTimeoutId;
+    #pendingCloseTimeoutId;
+    #closeRequested;
     onMouseEnter() {
         const isTouchPointerType = this.isTouchPointerType();
         if (!isTouchPointerType) {
@@ -277,8 +226,8 @@ class SdsNavigationGroupComponent {
             this.isPopoverVisible.set(true);
         }
         else {
-            if (this.defaultRouterLink) {
-                this._router.navigateByUrl(this.defaultRouterLink);
+            if (this.defaultRouterLink()) {
+                this.#router.navigateByUrl(this.defaultRouterLink());
             }
         }
     }
@@ -300,8 +249,8 @@ class SdsNavigationGroupComponent {
     rememberPointer(e) {
         this.lastPointerType.set(e.pointerType ?? 'mouse');
     }
-    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 }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsNavigationGroupComponent, deps: [], 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: true, 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: true, isRequired: false, transformFunction: null }, reverse: { classPropertyName: "reverse", publicName: "reverse", isSignal: false, isRequired: false, transformFunction: null }, ignoreQueryParamsInActiveRoute: { classPropertyName: "ignoreQueryParamsInActiveRoute", publicName: "ignoreQueryParamsInActiveRoute", isSignal: true, 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 }], 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: i1.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: i2.DxoPositionComponent, selector: "dxo-position", inputs: ["at", "boundary", "boundaryOffset", "collision", "my", "of", "offset"] }, { kind: "ngmodule", type: DxoPositionModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsNavigationGroupComponent, decorators: [{
             type: Component,
@@ -311,20 +260,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
                         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>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: [{
+                    ], 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"] }]
+        }], propDecorators: { navigationGroupNestedRoutes: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigationGroupNestedRoutes", required: false }] }], text: [{
                 type: Input
             }], icon: [{
                 type: Input
-            }], defaultRouterLink: [{
-                type: Input
-            }], reverse: [{
+            }], defaultRouterLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultRouterLink", required: false }] }], reverse: [{
                 type: Input
-            }], ignoreQueryParamsInActiveRoute: [{
-                type: Input
-            }], disabled: [{
+            }], ignoreQueryParamsInActiveRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "ignoreQueryParamsInActiveRoute", required: false }] }], disabled: [{
                 type: Input
             }], showPopover: [{
                 type: Input
@@ -494,7 +437,7 @@ class SdsNavigationUserProfileComponent {
         this.notificationBadgeClick.emit();
     }
     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"] }] }); }
+    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: i1.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: "21.2.23", ngImport: i0, type: SdsNavigationUserProfileComponent, decorators: [{
             type: Component,
@@ -532,6 +475,135 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
                 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 }] }] } });
 
+const DEFAULT_ICONS = {
+    info: faCircleInfo,
+    warning: faTriangleExclamation,
+    danger: faCircleExclamation,
+};
+/**
+ * Generic sidebar message: icon + title + description + an optional action. Carries no
+ * knowledge of what it's displaying (trial status, payment issues, announcements, ...) - callers
+ * pass in already-resolved text.
+ *
+ * The action is either a button (handle `actionClicked`) or, when `actionLink` is set, a router
+ * link that navigates on its own. When the navigation is collapsed the callout is either hidden
+ * or shown as an icon that opens the full callout in a popup (see `collapsedMode`).
+ *
+ * Colors are CSS custom properties derived from the base color `--sds-navigation-callout-color`
+ * (set by `variant`); override the base or any of the derived ones:
+ * `--sds-navigation-callout-bg`, `-border`, `-title` (also the icon), `-description`, `-action`.
+ *
+ * @example
+ * <!-- Action button -->
+ * <sds-navigation-callout
+ *     variant="warning"
+ *     title="Trial ends today"
+ *     description="Choose a plan to keep using the app."
+ *     actionText="Upgrade to paid"
+ *     (actionClicked)="openUpgradeDialog()">
+ * </sds-navigation-callout>
+ *
+ * <!-- Redirect -->
+ * <sds-navigation-callout
+ *     variant="danger"
+ *     title="Payment failed"
+ *     description="Pay the invoice to keep your subscription."
+ *     actionText="Go to billing page"
+ *     actionLink="/billing">
+ * </sds-navigation-callout>
+ */
+class SdsNavigationCalloutComponent {
+    constructor() {
+        /**
+         * Required. Color scheme and default icon:
+         * `info` (`--bs-primary`), `warning` (`--bs-orange`) or `danger` (`--bs-pink`).
+         */
+        this.variant = input.required(...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+        /**
+         * Font Awesome icon shown next to the title (and as the collapsed icon).
+         * Falls back to the default icon of the `variant` when not provided.
+         * @default null
+         */
+        this.icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+        /** Required. Title shown next to the icon. Displayed as given - pass already translated text. */
+        this.title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        /** Required. Text shown below the title. Displayed as given - pass already translated text. */
+        this.description = input.required(...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+        /**
+         * Text of the action. The action is shown only when this is not empty.
+         * @default ''
+         */
+        this.actionText = input('', ...(ngDevMode ? [{ debugName: "actionText" }] : /* istanbul ignore next */ []));
+        /**
+         * Route of the action - accepts the same values as `routerLink` (string, commands array or `UrlTree`).
+         * When set the action is rendered as a link that navigates to the route, otherwise as a button.
+         * Ignored when `actionText` is empty.
+         * @default null
+         */
+        this.actionLink = input(null, ...(ngDevMode ? [{ debugName: "actionLink" }] : /* istanbul ignore next */ []));
+        /**
+         * Behaviour when the navigation is collapsed:
+         * `icon` shows only the icon, which opens the full callout in a popup; `hide` hides the callout.
+         * @default 'icon'
+         */
+        this.collapsedMode = input('icon', ...(ngDevMode ? [{ debugName: "collapsedMode" }] : /* istanbul ignore next */ []));
+        /**
+         * Collapsed state of the navigation. Set automatically by `sds-navigation-container` -
+         * bind it only when the callout is used outside of a container.
+         * @default false
+         */
+        this.isCollapsed = model(false, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
+        /**
+         * Emitted when the action is clicked, for both buttons and links. For a link it is only a
+         * notification - the router navigates on its own. The popup (collapsed mode) is closed first.
+         */
+        this.actionClicked = output();
+        this.resolvedIcon = computed(() => this.icon() ?? DEFAULT_ICONS[this.variant()], ...(ngDevMode ? [{ debugName: "resolvedIcon" }] : /* istanbul ignore next */ []));
+        this.isHidden = computed(() => this.isCollapsed() && this.collapsedMode() === 'hide', ...(ngDevMode ? [{ debugName: "isHidden" }] : /* istanbul ignore next */ []));
+        this.isIconOnly = computed(() => this.isCollapsed() && this.collapsedMode() === 'icon', ...(ngDevMode ? [{ debugName: "isIconOnly" }] : /* istanbul ignore next */ []));
+        this.isPopupOpen = signal(false, ...(ngDevMode ? [{ debugName: "isPopupOpen" }] : /* istanbul ignore next */ []));
+        // Right of the icon with bottom edges aligned; falls back to top alignment when there's no room.
+        this.popupPositions = [
+            { originX: 'end', originY: 'bottom', overlayX: 'start', overlayY: 'bottom', offsetX: 8 },
+            { originX: 'end', originY: 'top', overlayX: 'start', overlayY: 'top', offsetX: 8 },
+        ];
+        effect(() => {
+            if (!this.isIconOnly()) {
+                this.isPopupOpen.set(false);
+            }
+        });
+    }
+    togglePopup() {
+        this.isPopupOpen.update((isOpen) => !isOpen);
+    }
+    onPopupOutsideClick(event, origin) {
+        // The origin click toggles the popup itself; closing here as well would re-open it.
+        if (origin.contains(event.target)) {
+            return;
+        }
+        this.isPopupOpen.set(false);
+    }
+    onPopupKeydown(event) {
+        if (event.key === 'Escape') {
+            this.isPopupOpen.set(false);
+        }
+    }
+    onActionClick() {
+        this.isPopupOpen.set(false);
+        this.actionClicked.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsNavigationCalloutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: SdsNavigationCalloutComponent, isStandalone: true, selector: "sds-navigation-callout", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: true, transformFunction: null }, actionText: { classPropertyName: "actionText", publicName: "actionText", isSignal: true, isRequired: false, transformFunction: null }, actionLink: { classPropertyName: "actionLink", publicName: "actionLink", isSignal: true, isRequired: false, transformFunction: null }, collapsedMode: { classPropertyName: "collapsedMode", publicName: "collapsedMode", isSignal: true, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange", actionClicked: "actionClicked" }, host: { properties: { "class": "'sds-navigation-callout-' + variant()", "class.sds-navigation-callout-collapsed": "isCollapsed()", "style.display": "isHidden() ? 'none' : null" } }, ngImport: i0, template: "@if (isIconOnly()) {\n    <button\n        #origin\n        type=\"button\"\n        class=\"sds-navigation-callout-icon-button\"\n        cdkOverlayOrigin\n        #overlayOrigin=\"cdkOverlayOrigin\"\n        [attr.aria-label]=\"title()\"\n        [attr.aria-expanded]=\"isPopupOpen()\"\n        (click)=\"togglePopup()\"\n    >\n        <fa-icon\n            class=\"sds-navigation-callout-icon\"\n            [icon]=\"resolvedIcon()\"\n        ></fa-icon>\n    </button>\n\n    <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n        [cdkConnectedOverlayOpen]=\"isPopupOpen()\"\n        [cdkConnectedOverlayPositions]=\"popupPositions\"\n        (overlayOutsideClick)=\"onPopupOutsideClick($event, origin)\"\n        (detach)=\"isPopupOpen.set(false)\"\n        (overlayKeydown)=\"onPopupKeydown($event)\"\n    >\n        <div [class]=\"'sds-navigation-callout-popup sds-navigation-callout-' + variant()\">\n            <ng-container *ngTemplateOutlet=\"card\"></ng-container>\n        </div>\n    </ng-template>\n} @else {\n    <ng-container *ngTemplateOutlet=\"card\"></ng-container>\n}\n\n<ng-template #card>\n    <div class=\"sds-navigation-callout-card\">\n        <div class=\"sds-navigation-callout-title d-flex align-items-center gap-1 sds-fs-87 sds-fw-600\">\n            <fa-icon\n                class=\"sds-navigation-callout-icon\"\n                [icon]=\"resolvedIcon()\"\n            ></fa-icon>\n            <span>{{ title() }}</span>\n        </div>\n        <span class=\"sds-navigation-callout-description\">{{ description() }}</span>\n        @if (actionText()) {\n            @if (actionLink()) {\n                <a\n                    class=\"btn btn-sm btn-link sds-navigation-callout-action sds-fw-600\"\n                    [routerLink]=\"actionLink()\"\n                    (click)=\"onActionClick()\"\n                >\n                    {{ actionText() }}\n                </a>\n            } @else {\n                <button\n                    type=\"button\"\n                    class=\"btn btn-sm btn-link sds-navigation-callout-action sds-fw-600\"\n                    (click)=\"onActionClick()\"\n                >\n                    {{ actionText() }}\n                </button>\n            }\n        }\n    </div>\n</ng-template>\n", styles: [":host,.sds-navigation-callout-popup{--sds-navigation-callout-color: var(--bs-primary);--sds-navigation-callout-bg: color-mix(in oklch, var(--sds-navigation-callout-color) 8%, var(--bs-body-bg));--sds-navigation-callout-border: color-mix(in oklch, var(--sds-navigation-callout-color) 25%, var(--bs-body-bg));--sds-navigation-callout-title: color-mix(in oklch, var(--sds-navigation-callout-color) 70%, var(--bs-emphasis-color));--sds-navigation-callout-description: color-mix(in oklab, var(--sds-navigation-callout-color) 20%, var(--bs-body-color));--sds-navigation-callout-action: var(--sds-navigation-callout-title)}:host(.sds-navigation-callout-warning),.sds-navigation-callout-popup.sds-navigation-callout-warning{--sds-navigation-callout-color: var(--bs-orange)}:host(.sds-navigation-callout-danger),.sds-navigation-callout-popup.sds-navigation-callout-danger{--sds-navigation-callout-color: var(--bs-pink)}:host{display:block}:host(:not(.sds-navigation-callout-collapsed)){margin-inline:.55rem}.sds-navigation-callout-card{display:flex;flex-direction:column;gap:.25rem;padding:.8rem;border-radius:.5rem;border:1px solid var(--sds-navigation-callout-border);background-color:var(--sds-navigation-callout-bg)}.sds-navigation-callout-title,.sds-navigation-callout-icon{color:var(--sds-navigation-callout-title)}.sds-navigation-callout-description{font-size:.8rem;color:var(--sds-navigation-callout-description)}.sds-navigation-callout-action{align-self:flex-start;padding:0;border:none;background:transparent;font-family:inherit;font-size:.8rem;color:var(--sds-navigation-callout-action);cursor:pointer}.sds-navigation-callout-action:hover{text-decoration:underline}.sds-navigation-callout-icon-button{display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;margin-inline:auto;padding:0;border-radius:.5rem;border:1px solid var(--sds-navigation-callout-border);background-color:var(--sds-navigation-callout-bg);cursor:pointer}.sds-navigation-callout-icon-button:hover{background-color:color-mix(in oklch,var(--sds-navigation-callout-border) 50%,var(--sds-navigation-callout-bg))}.sds-navigation-callout-popup .sds-navigation-callout-card{box-shadow:var(--bs-box-shadow)}\n"], dependencies: [{ 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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsNavigationCalloutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sds-navigation-callout', imports: [FaIconComponent, NgTemplateOutlet, CdkOverlayOrigin, CdkConnectedOverlay, RouterLink], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class]': "'sds-navigation-callout-' + variant()",
+                        '[class.sds-navigation-callout-collapsed]': 'isCollapsed()',
+                        '[style.display]': "isHidden() ? 'none' : null",
+                    }, template: "@if (isIconOnly()) {\n    <button\n        #origin\n        type=\"button\"\n        class=\"sds-navigation-callout-icon-button\"\n        cdkOverlayOrigin\n        #overlayOrigin=\"cdkOverlayOrigin\"\n        [attr.aria-label]=\"title()\"\n        [attr.aria-expanded]=\"isPopupOpen()\"\n        (click)=\"togglePopup()\"\n    >\n        <fa-icon\n            class=\"sds-navigation-callout-icon\"\n            [icon]=\"resolvedIcon()\"\n        ></fa-icon>\n    </button>\n\n    <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n        [cdkConnectedOverlayOpen]=\"isPopupOpen()\"\n        [cdkConnectedOverlayPositions]=\"popupPositions\"\n        (overlayOutsideClick)=\"onPopupOutsideClick($event, origin)\"\n        (detach)=\"isPopupOpen.set(false)\"\n        (overlayKeydown)=\"onPopupKeydown($event)\"\n    >\n        <div [class]=\"'sds-navigation-callout-popup sds-navigation-callout-' + variant()\">\n            <ng-container *ngTemplateOutlet=\"card\"></ng-container>\n        </div>\n    </ng-template>\n} @else {\n    <ng-container *ngTemplateOutlet=\"card\"></ng-container>\n}\n\n<ng-template #card>\n    <div class=\"sds-navigation-callout-card\">\n        <div class=\"sds-navigation-callout-title d-flex align-items-center gap-1 sds-fs-87 sds-fw-600\">\n            <fa-icon\n                class=\"sds-navigation-callout-icon\"\n                [icon]=\"resolvedIcon()\"\n            ></fa-icon>\n            <span>{{ title() }}</span>\n        </div>\n        <span class=\"sds-navigation-callout-description\">{{ description() }}</span>\n        @if (actionText()) {\n            @if (actionLink()) {\n                <a\n                    class=\"btn btn-sm btn-link sds-navigation-callout-action sds-fw-600\"\n                    [routerLink]=\"actionLink()\"\n                    (click)=\"onActionClick()\"\n                >\n                    {{ actionText() }}\n                </a>\n            } @else {\n                <button\n                    type=\"button\"\n                    class=\"btn btn-sm btn-link sds-navigation-callout-action sds-fw-600\"\n                    (click)=\"onActionClick()\"\n                >\n                    {{ actionText() }}\n                </button>\n            }\n        }\n    </div>\n</ng-template>\n", styles: [":host,.sds-navigation-callout-popup{--sds-navigation-callout-color: var(--bs-primary);--sds-navigation-callout-bg: color-mix(in oklch, var(--sds-navigation-callout-color) 8%, var(--bs-body-bg));--sds-navigation-callout-border: color-mix(in oklch, var(--sds-navigation-callout-color) 25%, var(--bs-body-bg));--sds-navigation-callout-title: color-mix(in oklch, var(--sds-navigation-callout-color) 70%, var(--bs-emphasis-color));--sds-navigation-callout-description: color-mix(in oklab, var(--sds-navigation-callout-color) 20%, var(--bs-body-color));--sds-navigation-callout-action: var(--sds-navigation-callout-title)}:host(.sds-navigation-callout-warning),.sds-navigation-callout-popup.sds-navigation-callout-warning{--sds-navigation-callout-color: var(--bs-orange)}:host(.sds-navigation-callout-danger),.sds-navigation-callout-popup.sds-navigation-callout-danger{--sds-navigation-callout-color: var(--bs-pink)}:host{display:block}:host(:not(.sds-navigation-callout-collapsed)){margin-inline:.55rem}.sds-navigation-callout-card{display:flex;flex-direction:column;gap:.25rem;padding:.8rem;border-radius:.5rem;border:1px solid var(--sds-navigation-callout-border);background-color:var(--sds-navigation-callout-bg)}.sds-navigation-callout-title,.sds-navigation-callout-icon{color:var(--sds-navigation-callout-title)}.sds-navigation-callout-description{font-size:.8rem;color:var(--sds-navigation-callout-description)}.sds-navigation-callout-action{align-self:flex-start;padding:0;border:none;background:transparent;font-family:inherit;font-size:.8rem;color:var(--sds-navigation-callout-action);cursor:pointer}.sds-navigation-callout-action:hover{text-decoration:underline}.sds-navigation-callout-icon-button{display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;margin-inline:auto;padding:0;border-radius:.5rem;border:1px solid var(--sds-navigation-callout-border);background-color:var(--sds-navigation-callout-bg);cursor:pointer}.sds-navigation-callout-icon-button:hover{background-color:color-mix(in oklch,var(--sds-navigation-callout-border) 50%,var(--sds-navigation-callout-bg))}.sds-navigation-callout-popup .sds-navigation-callout-card{box-shadow:var(--bs-box-shadow)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: true }] }], actionText: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionText", required: false }] }], actionLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionLink", required: false }] }], collapsedMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedMode", required: false }] }], isCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsed", required: false }] }, { type: i0.Output, args: ["isCollapsedChange"] }], actionClicked: [{ type: i0.Output, args: ["actionClicked"] }] } });
+
 class SdsNavigationContainerComponent {
     constructor() {
         this.isCollapsed = model(false, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
@@ -542,6 +614,7 @@ class SdsNavigationContainerComponent {
         this.externalLinkComponentChildren = contentChildren(SdsNavigationExternalLinkComponent, ...(ngDevMode ? [{ debugName: "externalLinkComponentChildren" }] : /* istanbul ignore next */ []));
         this.userProfileComponentChildren = contentChildren(SdsNavigationUserProfileComponent, ...(ngDevMode ? [{ debugName: "userProfileComponentChildren" }] : /* istanbul ignore next */ []));
         this.collapsibleFrameComponentChildren = contentChildren(SdsNavigationCollapsibleFrameComponent, ...(ngDevMode ? [{ debugName: "collapsibleFrameComponentChildren" }] : /* istanbul ignore next */ []));
+        this.calloutComponentChildren = contentChildren(SdsNavigationCalloutComponent, ...(ngDevMode ? [{ debugName: "calloutComponentChildren" }] : /* istanbul ignore next */ []));
         // Reading the content queries inside the effect makes it re-run once they resolve
         // (so an initial collapsed state is applied) and whenever children are added later.
         effect(() => {
@@ -554,6 +627,7 @@ class SdsNavigationContainerComponent {
                 ...this.externalLinkComponentChildren(),
                 ...this.userProfileComponentChildren(),
                 ...this.collapsibleFrameComponentChildren(),
+                ...this.calloutComponentChildren(),
             ];
             untracked(() => {
                 children.forEach((child) => child.isCollapsed.set(isCollapsed));
@@ -562,12 +636,12 @@ class SdsNavigationContainerComponent {
     }
     ngOnInit() { }
     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.2.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, isSignal: true }, { propertyName: "routeLinkComponentChildren", predicate: SdsNavigationRouteLinkComponent, isSignal: true }, { propertyName: "separatorComponentChildren", predicate: SdsNavigationSeparatorComponent, isSignal: true }, { propertyName: "headerComponentChildren", predicate: SdsNavigationHeaderComponent, isSignal: true }, { propertyName: "externalLinkComponentChildren", predicate: SdsNavigationExternalLinkComponent, isSignal: true }, { propertyName: "userProfileComponentChildren", predicate: SdsNavigationUserProfileComponent, isSignal: true }, { propertyName: "collapsibleFrameComponentChildren", predicate: SdsNavigationCollapsibleFrameComponent, isSignal: true }], 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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.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, isSignal: true }, { propertyName: "routeLinkComponentChildren", predicate: SdsNavigationRouteLinkComponent, isSignal: true }, { propertyName: "separatorComponentChildren", predicate: SdsNavigationSeparatorComponent, isSignal: true }, { propertyName: "headerComponentChildren", predicate: SdsNavigationHeaderComponent, isSignal: true }, { propertyName: "externalLinkComponentChildren", predicate: SdsNavigationExternalLinkComponent, isSignal: true }, { propertyName: "userProfileComponentChildren", predicate: SdsNavigationUserProfileComponent, isSignal: true }, { propertyName: "collapsibleFrameComponentChildren", predicate: SdsNavigationCollapsibleFrameComponent, isSignal: true }, { propertyName: "calloutComponentChildren", predicate: SdsNavigationCalloutComponent, isSignal: true }], 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: "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: { isCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsed", required: false }] }, { type: i0.Output, args: ["isCollapsedChange"] }], groupComponentChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdsNavigationGroupComponent), { isSignal: true }] }], routeLinkComponentChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdsNavigationRouteLinkComponent), { isSignal: true }] }], separatorComponentChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdsNavigationSeparatorComponent), { isSignal: true }] }], headerComponentChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdsNavigationHeaderComponent), { isSignal: true }] }], externalLinkComponentChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdsNavigationExternalLinkComponent), { isSignal: true }] }], userProfileComponentChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdsNavigationUserProfileComponent), { isSignal: true }] }], collapsibleFrameComponentChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdsNavigationCollapsibleFrameComponent), { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { isCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsed", required: false }] }, { type: i0.Output, args: ["isCollapsedChange"] }], groupComponentChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdsNavigationGroupComponent), { isSignal: true }] }], routeLinkComponentChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdsNavigationRouteLinkComponent), { isSignal: true }] }], separatorComponentChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdsNavigationSeparatorComponent), { isSignal: true }] }], headerComponentChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdsNavigationHeaderComponent), { isSignal: true }] }], externalLinkComponentChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdsNavigationExternalLinkComponent), { isSignal: true }] }], userProfileComponentChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdsNavigationUserProfileComponent), { isSignal: true }] }], collapsibleFrameComponentChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdsNavigationCollapsibleFrameComponent), { isSignal: true }] }], calloutComponentChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdsNavigationCalloutComponent), { isSignal: true }] }] } });
 
 class SdsUserProfileTileComponent {
     constructor() {
@@ -736,5 +810,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { SdsActiveRoutePatternPipe, SdsNavigationCollapsibleFrameComponent, SdsNavigationContainerComponent, SdsNavigationExternalLinkComponent, SdsNavigationGroupComponent, SdsNavigationHeaderComponent, SdsNavigationRouteLinkComponent, SdsNavigationSeparatorComponent, SdsNavigationUserProfileComponent, SdsProductHomeComponent, SdsUserProfileSelectorComponent };
+export { SdsActiveRoutePatternPipe, SdsNavigationCalloutComponent, SdsNavigationCollapsibleFrameComponent, SdsNavigationContainerComponent, SdsNavigationExternalLinkComponent, SdsNavigationGroupComponent, SdsNavigationHeaderComponent, SdsNavigationRouteLinkComponent, SdsNavigationSeparatorComponent, SdsNavigationUserProfileComponent, SdsProductHomeComponent, SdsUserProfileSelectorComponent, isRouteActive };
 //# sourceMappingURL=spicainternational-ngx-sds-components-src-lib-navigation.mjs.map