@spicainternational/ngx-sds-components 7.12.0-beta.1 → 8.0.0

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

@@ -0,0 +1,579 @@
+import * as i0 from '@angular/core';
+import { model, Input, Component, input, QueryList, ContentChildren, EventEmitter, Output, effect, untracked } from '@angular/core';
+import * as i1 from '@angular/router';
+import { RouterLinkActive, RouterLink, NavigationEnd } from '@angular/router';
+import { NgIf, NgFor } from '@angular/common';
+import { faAngleUp, faAngleDown, faExternalLink, faUser, faSignOut, faEyeSlash, faArrowLeftFromLine, faArrowRightFromLine, faSidebar } from '@fortawesome/pro-regular-svg-icons';
+import { Subject, filter, takeUntil } from 'rxjs';
+import * as i3 from 'devextreme-angular/ui/nested';
+import { DxoPositionModule } from 'devextreme-angular/ui/nested';
+import * as i2 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 { SdsAppSwitcherComponent } from '@spicainternational/ngx-sds-components/src/lib/app-switcher';
+
+class SdsNavigationRouteLinkComponent {
+    constructor() {
+        /**
+         * This variable is used as 'routerLink' attribute in the anchor tag.
+         *
+         * Is named 'link' to avoid conflict with the 'routerLink' directive.
+         */
+        this.link = '';
+        this.text = '';
+        this.additionalInfo = undefined;
+        this.disabled = false;
+        this.isCollapsed = model(false);
+    }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsNavigationRouteLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: SdsNavigationRouteLinkComponent, isStandalone: true, selector: "sds-navigation-route-link", inputs: { link: { classPropertyName: "link", publicName: "link", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: false, transformFunction: null }, additionalInfo: { classPropertyName: "additionalInfo", publicName: "additionalInfo", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", 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\"> -->\r\n<div \r\n    class=\"sds-navigation-router-link sds-navigation-item-container\"\r\n    [class.disabled]=\"disabled\"\r\n    routerLinkActive=\"active\"\r\n    [title]=\"isCollapsed() ? text : ''\"\r\n    >\r\n    <a class=\"sds-navigation-item-content w-100 pe-2 text-gray-800\" [routerLink]=\"link\">\r\n        <div class=\"d-flex align-items-center w-100 justify-content-center\">\r\n            <div class=\"sds-navigation-icon\" >\r\n                <ng-content select=\"[navigationIcon]\"></ng-content>\r\n            </div>\r\n\r\n            <ng-container *ngIf=\"!isCollapsed()\">\r\n                <div class=\"sds-navigation-text user-select-none\">\r\n                    {{ text }}\r\n                </div>\r\n                <span *ngIf=\"additionalInfo\"\r\n                    class=\"sds-navigation-router-link-additional-info badge rounded-pill bg-warning text-body\"\r\n                    >{{ additionalInfo }}</span\r\n                > \r\n            </ng-container>\r\n        </div>\r\n    </a>\r\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:#00a8d226!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:.5rem;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: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsNavigationRouteLinkComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sds-navigation-route-link', standalone: true, imports: [
+                        RouterLinkActive,
+                        RouterLink,
+                        NgIf,
+                    ], template: "<!-- class=\"sds-navigation-router-link sidebar-item-x d-flex justify-content-start align-items-center sidebar-item-x py-1\"> -->\r\n<div \r\n    class=\"sds-navigation-router-link sds-navigation-item-container\"\r\n    [class.disabled]=\"disabled\"\r\n    routerLinkActive=\"active\"\r\n    [title]=\"isCollapsed() ? text : ''\"\r\n    >\r\n    <a class=\"sds-navigation-item-content w-100 pe-2 text-gray-800\" [routerLink]=\"link\">\r\n        <div class=\"d-flex align-items-center w-100 justify-content-center\">\r\n            <div class=\"sds-navigation-icon\" >\r\n                <ng-content select=\"[navigationIcon]\"></ng-content>\r\n            </div>\r\n\r\n            <ng-container *ngIf=\"!isCollapsed()\">\r\n                <div class=\"sds-navigation-text user-select-none\">\r\n                    {{ text }}\r\n                </div>\r\n                <span *ngIf=\"additionalInfo\"\r\n                    class=\"sds-navigation-router-link-additional-info badge rounded-pill bg-warning text-body\"\r\n                    >{{ additionalInfo }}</span\r\n                > \r\n            </ng-container>\r\n        </div>\r\n    </a>\r\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:#00a8d226!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:.5rem;border-left:none!important}.sds-navigation-router-link{padding:0!important}.sds-navigation-router-link a{padding-top:.5rem!important;padding-bottom:.5rem!important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { link: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }], additionalInfo: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
+
+function removeQueryParams(url) {
+    return url.split('?')[0];
+}
+function isUrlPartOfNavigationGroup(currentUrl, nestedRoutes, defaultGroupUrl) {
+    if (!currentUrl || currentUrl?.length === 0) {
+        return false;
+    }
+    defaultGroupUrl = defaultGroupUrl.replace('/', '');
+    if (nestedRoutes?.length > 0) {
+        // Nested routes are provided. We should find out if current url is on the list of
+        // the provided nested routes       
+        const currentUrlParts = currentUrl.slice(); //.reverse();
+        const routeItemIsPartOfNestedRoutes = nestedRoutes.some((routeName) => {
+            const routeParts = routeName.split('/'); //.reverse();
+            return isSubsetOrSame(currentUrlParts, routeParts);
+        });
+        if (routeItemIsPartOfNestedRoutes) {
+            return true;
+        }
+    }
+    const currentUrlContainsGroupUrl = currentUrl.some(path => path === defaultGroupUrl);
+    return currentUrlContainsGroupUrl;
+}
+function isSubsetOrSame(mainArray, subArray) {
+    // if we have super wildcard we need to check reversed array
+    // if (subArray.includes('**')) {
+    const reversedMainArray = mainArray.slice(); //.reverse();
+    const reversedSubArray = subArray.slice(); //.reverse();
+    for (let i = 0; i < reversedSubArray.length; i++) {
+        if (reversedSubArray[i] === '**') {
+            return true;
+        }
+        if ((reversedMainArray[i] !== reversedSubArray[i]) && reversedSubArray[i] !== '*') {
+            return false;
+        }
+    }
+    return true;
+    // } else {
+    //     if (subArray.length > mainArray.length) return false;
+    //     for (let i = 0; i < subArray.length; i++) {
+    //         if ((mainArray[i] !== subArray[i]) && subArray[i] !== '*') {
+    //             return false;
+    //         }
+    //     }
+    //     return true;
+    // }
+}
+
+class SdsNavigationGroupComponent {
+    set navigationGroupNestedRoutes(value) {
+        this._navigationGroupNestedRoutes = value;
+    }
+    get navigationGroupNestedRoutes() {
+        return this._navigationGroupNestedRoutes;
+    }
+    constructor(_router) {
+        this._router = _router;
+        /**
+         * List of paths allowed/expected within this module.
+         * These are paths that are not accessible through child navigation
+         * elements, but through links in other parts of the application (e.g. link
+         * on form)
+         */
+        this._navigationGroupNestedRoutes = [];
+        this.text = '';
+        this.icon = '';
+        this.defaultRouterLink = '';
+        this.reverse = false;
+        this.ignoreQueryParamsInActiveRoute = false;
+        this.disabled = false;
+        this.showPopover = false;
+        this.showPopoverHeader = false;
+        this.lightStyle = input(true);
+        this.routerLinkComponents = new QueryList();
+        this.active = false;
+        this.faAngleUpRegular = faAngleUp;
+        this.faAngleDownRegular = faAngleDown;
+        /**
+         * Current app URL (e.g. ['layout-showcase', 'default'])
+         */
+        this.currentUrl = [];
+        this._unsubscribe = new Subject();
+        this.isGroupActive = false;
+        this.isActiveGroupClosed = false;
+        this.isCollapsed = model(false);
+    }
+    ngOnInit() {
+        this._router.events.pipe(filter((event) => event instanceof NavigationEnd), takeUntil(this._unsubscribe)).subscribe((event) => {
+            if (event instanceof NavigationEnd) {
+                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);
+            }
+        });
+    }
+    ngOnDestroy() {
+        this._unsubscribe.next();
+        this._unsubscribe.complete();
+    }
+    onHiding(e) {
+        const popoverContent = e.component.content().parentNode;
+        const isMouseInsidePopover = popoverContent.matches(':hover');
+        e.cancel = isMouseInsidePopover;
+        popoverContent.addEventListener('mouseleave', () => {
+            popoverContent.removeEventListener('mouseleave', () => { });
+            e.component.hide();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsNavigationGroupComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: SdsNavigationGroupComponent, isStandalone: true, selector: "sds-navigation-group", inputs: { navigationGroupNestedRoutes: { classPropertyName: "navigationGroupNestedRoutes", publicName: "navigationGroupNestedRoutes", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, defaultRouterLink: { classPropertyName: "defaultRouterLink", publicName: "defaultRouterLink", isSignal: false, isRequired: false, transformFunction: null }, reverse: { classPropertyName: "reverse", publicName: "reverse", isSignal: false, isRequired: false, transformFunction: null }, ignoreQueryParamsInActiveRoute: { classPropertyName: "ignoreQueryParamsInActiveRoute", publicName: "ignoreQueryParamsInActiveRoute", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, showPopover: { classPropertyName: "showPopover", publicName: "showPopover", isSignal: false, isRequired: false, transformFunction: null }, showPopoverHeader: { classPropertyName: "showPopoverHeader", publicName: "showPopoverHeader", isSignal: false, isRequired: false, transformFunction: null }, lightStyle: { classPropertyName: "lightStyle", publicName: "lightStyle", isSignal: true, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange" }, queries: [{ propertyName: "routerLinkComponents", predicate: SdsNavigationRouteLinkComponent }], ngImport: i0, template: "<div \r\n    #navigationGroup\r\n    class=\"sds-navigation-group sds-navigation-item-container d-flex\"\r\n    [class.sds-navigation-group-light-style]=\"lightStyle()\"\r\n    [class.flex-column-reverse]=\"reverse\"\r\n    [class.flex-column]=\"!reverse\"\r\n    [class.disabled]=\"disabled\"\r\n    [class.active]=\"isGroupActive\"\r\n    [class.collapsed]=\"isCollapsed()\"\r\n    >\r\n    <a \r\n        class=\"w-100 sds-navigation-item-content p-2 text-gray-800 sds-fs-93\"\r\n        [class.collapsed]=\"isCollapsed()\"\r\n        style=\"cursor: pointer\"\r\n        [routerLink]=\"[defaultRouterLink]\">\r\n        <div class=\"d-flex align-items-center w-100 justify-content-center\">\r\n            <div class=\"sds-navigation-icon\" >\r\n                <ng-content select=\"[navigationIcon]\"></ng-content>\r\n            </div>\r\n\r\n            <ng-container *ngIf=\"!isCollapsed()\">\r\n                <div class=\"sds-navigation-text user-select-none\">\r\n                    {{ text }}\r\n                </div>\r\n                <div class=\"text-right\">\r\n                    <fa-icon *ngIf=\"!reverse\" [icon]=\"faAngleDownRegular\"></fa-icon>\r\n                    <fa-icon *ngIf=\"reverse\" [icon]=\"faAngleUpRegular\"></fa-icon>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </a>\r\n\r\n    <div \r\n        class=\"sub-menu\" \r\n        *ngIf=\"!isCollapsed()\">\r\n\r\n        <div class=\"sds-navigation-group-items sds-flex-column gap-05\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-container *ngIf=\"isCollapsed() || (showPopover && !isGroupActive)\">\r\n    <dx-popover\r\n        [target]=\"navigationGroup\"\r\n        [showEvent]=\"{ name: 'dxhoverstart', delay: 100 }\"\r\n        [hideEvent]=\"{ name: 'dxhoverend', delay: 100 }\"\r\n        (onHiding)=\"onHiding($event)\"\r\n        width=\"15rem\"\r\n        [wrapperAttr]=\"{ class: 'sds-navigation-group-popover-wrapper sds-dx-popup-content-padding-2' }\"\r\n        [hideOnOutsideClick]=\"true\"\r\n        [hideOnParentScroll]=\"true\"\r\n        [animation]=\"{}\"\r\n    >\r\n\r\n        <dxo-position\r\n            my=\"top left\"\r\n            at=\"top right\"\r\n            [of]=\"navigationGroup\"\r\n            offset=\"-12 0\"\r\n            >\r\n        </dxo-position>\r\n\r\n        <div *ngIf=\"showPopoverHeader\" class=\"group-header user-select-none\">\r\n            {{ text }}\r\n        </div>\r\n        <div \r\n            class=\"sds-navigation-container sds-navigation-popover-container sds-scrollbar sds-scrollbar-thin sds-scrollbar-no-hide\"\r\n            >\r\n            <div class=\"sds-navigation-group-items\">\r\n                <ng-content select=\"[popoverContent]\"></ng-content>\r\n            </div>\r\n        </div>\r\n    </dx-popover>\r\n</ng-container>\r\n", styles: [".gap-05{gap:.125rem!important}.sds-navigation-group.sds-navigation-item-container{border-radius:.5rem;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:not(.collapsed){background-color:transparent!important}.sds-navigation-group .sub-menu{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease-in-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-dx-popup-content-padding-0 .dx-popup-content{padding:0rem}::ng-deep .sds-navigation-group-popover-wrapper.sds-dx-popup-content-padding-1 .dx-popup-content{padding:.25rem}::ng-deep .sds-navigation-group-popover-wrapper.sds-dx-popup-content-padding-2 .dx-popup-content{padding:.5rem}::ng-deep .sds-navigation-group-popover-wrapper.sds-dx-popup-content-padding-3 .dx-popup-content{padding:1rem}::ng-deep .sds-navigation-group-popover-wrapper .dx-popover-arrow{display:none}::ng-deep .sds-navigation-group-popover-wrapper .group-header{font-weight:600;padding:.25rem .75rem .5rem .5rem}::ng-deep .sds-navigation-group-popover-wrapper .sds-navigation-container.sds-navigation-popover-container{color:var(--bs-body-color)!important;padding-bottom:.07rem;overflow-y:auto;max-height:45vh}::ng-deep .sds-navigation-group-popover-wrapper .sds-navigation-container.sds-navigation-popover-container .sds-navigation-group-items .active{font-weight:500}::ng-deep .sds-navigation-group-popover-wrapper .sds-navigation-container.sds-navigation-popover-container .sds-navigation-group-items .sds-navigation-icon{display:none}::ng-deep .sds-navigation-group-popover-wrapper .sds-navigation-container.sds-navigation-popover-container .sds-navigation-group-items .sds-navigation-item-container{border-left:none;padding-top:.25rem;padding-bottom:.25rem;border-radius:var(--bs-border-radius);color:var(--bs-body-color)!important}::ng-deep .sds-navigation-group-popover-wrapper .sds-navigation-container.sds-navigation-popover-container .sds-navigation-group-items .sds-navigation-item-container .sds-navigation-item-content{padding-top:.25rem;padding-bottom:.25rem;padding-left:1rem;color:var(--bs-body-color)!important}::ng-deep .sds-navigation-group-popover-wrapper .sds-navigation-container.sds-navigation-popover-container .sds-navigation-group-items .sds-navigation-item-container .sds-navigation-header{color:var(--bs-body-color)!important}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "ngmodule", type: DxPopoverModule }, { kind: "component", type: i2.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "deferRendering", "disabled", "enableBodyScroll", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showEvent", "showTitle", "target", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "onTitleRendered", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "deferRenderingChange", "disabledChange", "enableBodyScrollChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "component", type: i3.DxoPositionComponent, selector: "dxo-position", inputs: ["at", "boundary", "boundaryOffset", "collision", "my", "of", "offset"] }, { kind: "ngmodule", type: DxoPositionModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsNavigationGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sds-navigation-group', standalone: true, imports: [
+                        RouterLink,
+                        NgIf,
+                        FaIconComponent,
+                        DxPopoverModule,
+                        DxoPositionModule,
+                    ], template: "<div \r\n    #navigationGroup\r\n    class=\"sds-navigation-group sds-navigation-item-container d-flex\"\r\n    [class.sds-navigation-group-light-style]=\"lightStyle()\"\r\n    [class.flex-column-reverse]=\"reverse\"\r\n    [class.flex-column]=\"!reverse\"\r\n    [class.disabled]=\"disabled\"\r\n    [class.active]=\"isGroupActive\"\r\n    [class.collapsed]=\"isCollapsed()\"\r\n    >\r\n    <a \r\n        class=\"w-100 sds-navigation-item-content p-2 text-gray-800 sds-fs-93\"\r\n        [class.collapsed]=\"isCollapsed()\"\r\n        style=\"cursor: pointer\"\r\n        [routerLink]=\"[defaultRouterLink]\">\r\n        <div class=\"d-flex align-items-center w-100 justify-content-center\">\r\n            <div class=\"sds-navigation-icon\" >\r\n                <ng-content select=\"[navigationIcon]\"></ng-content>\r\n            </div>\r\n\r\n            <ng-container *ngIf=\"!isCollapsed()\">\r\n                <div class=\"sds-navigation-text user-select-none\">\r\n                    {{ text }}\r\n                </div>\r\n                <div class=\"text-right\">\r\n                    <fa-icon *ngIf=\"!reverse\" [icon]=\"faAngleDownRegular\"></fa-icon>\r\n                    <fa-icon *ngIf=\"reverse\" [icon]=\"faAngleUpRegular\"></fa-icon>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </a>\r\n\r\n    <div \r\n        class=\"sub-menu\" \r\n        *ngIf=\"!isCollapsed()\">\r\n\r\n        <div class=\"sds-navigation-group-items sds-flex-column gap-05\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-container *ngIf=\"isCollapsed() || (showPopover && !isGroupActive)\">\r\n    <dx-popover\r\n        [target]=\"navigationGroup\"\r\n        [showEvent]=\"{ name: 'dxhoverstart', delay: 100 }\"\r\n        [hideEvent]=\"{ name: 'dxhoverend', delay: 100 }\"\r\n        (onHiding)=\"onHiding($event)\"\r\n        width=\"15rem\"\r\n        [wrapperAttr]=\"{ class: 'sds-navigation-group-popover-wrapper sds-dx-popup-content-padding-2' }\"\r\n        [hideOnOutsideClick]=\"true\"\r\n        [hideOnParentScroll]=\"true\"\r\n        [animation]=\"{}\"\r\n    >\r\n\r\n        <dxo-position\r\n            my=\"top left\"\r\n            at=\"top right\"\r\n            [of]=\"navigationGroup\"\r\n            offset=\"-12 0\"\r\n            >\r\n        </dxo-position>\r\n\r\n        <div *ngIf=\"showPopoverHeader\" class=\"group-header user-select-none\">\r\n            {{ text }}\r\n        </div>\r\n        <div \r\n            class=\"sds-navigation-container sds-navigation-popover-container sds-scrollbar sds-scrollbar-thin sds-scrollbar-no-hide\"\r\n            >\r\n            <div class=\"sds-navigation-group-items\">\r\n                <ng-content select=\"[popoverContent]\"></ng-content>\r\n            </div>\r\n        </div>\r\n    </dx-popover>\r\n</ng-container>\r\n", styles: [".gap-05{gap:.125rem!important}.sds-navigation-group.sds-navigation-item-container{border-radius:.5rem;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:not(.collapsed){background-color:transparent!important}.sds-navigation-group .sub-menu{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease-in-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-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: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], defaultRouterLink: [{
+                type: Input
+            }], reverse: [{
+                type: Input
+            }], ignoreQueryParamsInActiveRoute: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], showPopover: [{
+                type: Input
+            }], showPopoverHeader: [{
+                type: Input
+            }], routerLinkComponents: [{
+                type: ContentChildren,
+                args: [SdsNavigationRouteLinkComponent]
+            }] } });
+
+class SdsNavigationSeparatorComponent {
+    constructor() {
+        this.isCollapsed = model(false);
+    }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsNavigationSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: SdsNavigationSeparatorComponent, isStandalone: true, selector: "sds-navigation-separator", inputs: { isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange" }, ngImport: i0, template: "<div \r\n    class=\"sds-navigation-separator nav-separator\">\r\n</div>\r\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsNavigationSeparatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sds-navigation-separator', standalone: true, template: "<div \r\n    class=\"sds-navigation-separator nav-separator\">\r\n</div>\r\n" }]
+        }], ctorParameters: () => [] });
+
+class SdsNavigationHeaderComponent {
+    constructor() {
+        this.isCollapsed = model(false);
+        this.text = '';
+    }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsNavigationHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: SdsNavigationHeaderComponent, isStandalone: true, selector: "sds-navigation-header", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange" }, ngImport: i0, template: "\r\n<div class=\"sds-navigation-header text-gray-800\">\r\n    <span *ngIf=\"!isCollapsed()\">{{ text }}</span>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsNavigationHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sds-navigation-header', standalone: true, imports: [
+                        NgIf
+                    ], template: "\r\n<div class=\"sds-navigation-header text-gray-800\">\r\n    <span *ngIf=\"!isCollapsed()\">{{ text }}</span>\r\n</div>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { text: [{
+                type: Input
+            }] } });
+
+class SdsNavigationExternalLinkComponent {
+    constructor() {
+        this.link = '';
+        this.text = '';
+        this.tabName = '_blank';
+        this.externalLinkHint = '';
+        this.showExternalLinkIcon = true;
+        this.externalLinkIcon = faExternalLink;
+        this.isCollapsed = model(false);
+    }
+    ngOnInit() {
+    }
+    openLink() {
+        window.open(this.link, this.tabName);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsNavigationExternalLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: SdsNavigationExternalLinkComponent, isStandalone: true, selector: "sds-navigation-external-link", inputs: { link: { classPropertyName: "link", publicName: "link", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: false, transformFunction: null }, tabName: { classPropertyName: "tabName", publicName: "tabName", isSignal: false, isRequired: false, transformFunction: null }, externalLinkHint: { classPropertyName: "externalLinkHint", publicName: "externalLinkHint", isSignal: false, isRequired: false, transformFunction: null }, showExternalLinkIcon: { classPropertyName: "showExternalLinkIcon", publicName: "showExternalLinkIcon", isSignal: false, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange" }, ngImport: i0, template: "<div \r\n    class=\"sds-navigation-external-link sds-navigation-item-container\"\r\n    [title]=\"isCollapsed() ? text : ''\"\r\n    >\r\n    <a class=\"w-100 sds-navigation-item-content pe-2 text-gray-800 sds-fs-93\" (click)=\"openLink()\" >\r\n        <div class=\"d-flex align-items-center justify-content-center position-relative\">\r\n            <div class=\"sds-navigation-icon\" >\r\n                <ng-content select=\"[navigationIcon]\"></ng-content>\r\n            </div>\r\n\r\n            <ng-container *ngIf=\"!isCollapsed()\">\r\n            \r\n                <div class=\"sds-navigation-text\">\r\n                    <span>{{ text }}</span>\r\n                </div>\r\n\r\n                <div \r\n                    class=\"sds-navigation-external-link-info-container\">\r\n                    <fa-icon \r\n                        class=\"sds-navigation-external-link-info-icon\"\r\n                        *ngIf=\"showExternalLinkIcon\"\r\n\r\n                        [icon]=\"externalLinkIcon\"\r\n                        [size]=\"'xs'\"\r\n                        [title]=\"externalLinkHint\"\r\n                        >\r\n                    </fa-icon>\r\n                </div> \r\n            </ng-container>\r\n            \r\n            <ng-content></ng-content>\r\n\r\n        </div>\r\n    </a>\r\n</div>", styles: [".sds-navigation-external-link:hover{background-color:#eff1f3;border-left-color:#eff1f3}.sds-navigation-external-link{border-radius:.5rem;padding:0!important;border-left:none!important}.sds-navigation-external-link a{padding-top:.5rem!important;padding-bottom:.5rem!important}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsNavigationExternalLinkComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sds-navigation-external-link', standalone: true, imports: [NgIf, FaIconComponent], template: "<div \r\n    class=\"sds-navigation-external-link sds-navigation-item-container\"\r\n    [title]=\"isCollapsed() ? text : ''\"\r\n    >\r\n    <a class=\"w-100 sds-navigation-item-content pe-2 text-gray-800 sds-fs-93\" (click)=\"openLink()\" >\r\n        <div class=\"d-flex align-items-center justify-content-center position-relative\">\r\n            <div class=\"sds-navigation-icon\" >\r\n                <ng-content select=\"[navigationIcon]\"></ng-content>\r\n            </div>\r\n\r\n            <ng-container *ngIf=\"!isCollapsed()\">\r\n            \r\n                <div class=\"sds-navigation-text\">\r\n                    <span>{{ text }}</span>\r\n                </div>\r\n\r\n                <div \r\n                    class=\"sds-navigation-external-link-info-container\">\r\n                    <fa-icon \r\n                        class=\"sds-navigation-external-link-info-icon\"\r\n                        *ngIf=\"showExternalLinkIcon\"\r\n\r\n                        [icon]=\"externalLinkIcon\"\r\n                        [size]=\"'xs'\"\r\n                        [title]=\"externalLinkHint\"\r\n                        >\r\n                    </fa-icon>\r\n                </div> \r\n            </ng-container>\r\n            \r\n            <ng-content></ng-content>\r\n\r\n        </div>\r\n    </a>\r\n</div>", styles: [".sds-navigation-external-link:hover{background-color:#eff1f3;border-left-color:#eff1f3}.sds-navigation-external-link{border-radius:.5rem;padding:0!important;border-left:none!important}.sds-navigation-external-link a{padding-top:.5rem!important;padding-bottom:.5rem!important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { link: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }], tabName: [{
+                type: Input
+            }], externalLinkHint: [{
+                type: Input
+            }], showExternalLinkIcon: [{
+                type: Input
+            }] } });
+
+class SdsNavigationCollapsibleFrameComponent {
+    constructor() {
+        this.isCollapsed = model(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsNavigationCollapsibleFrameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: SdsNavigationCollapsibleFrameComponent, isStandalone: true, selector: "sds-navigation-collapsible-frame", inputs: { isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange" }, ngImport: i0, template: "<ng-container *ngIf=\"!isCollapsed()\">\r\n    <ng-content></ng-content>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"isCollapsed()\">\r\n    <ng-content select=\"[collapsed]\"></ng-content>\r\n</ng-container>\r\n\r\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsNavigationCollapsibleFrameComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sds-navigation-collapsible-frame', standalone: true, imports: [
+                        NgIf
+                    ], template: "<ng-container *ngIf=\"!isCollapsed()\">\r\n    <ng-content></ng-content>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"isCollapsed()\">\r\n    <ng-content select=\"[collapsed]\"></ng-content>\r\n</ng-container>\r\n\r\n" }]
+        }] });
+
+class SdsUserProfileActionButtonComponent {
+    constructor() {
+        this.text = '';
+        this.actionClick = new EventEmitter();
+    }
+    onActionClick() {
+        this.actionClick.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsUserProfileActionButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SdsUserProfileActionButtonComponent, isStandalone: true, selector: "sds-user-profile-action-button", inputs: { text: "text", icon: "icon" }, outputs: { actionClick: "actionClick" }, ngImport: i0, template: "<a \r\n    class=\"\r\n        d-block \r\n        text-black \r\n        sds-navigation-user-profile-action-button \r\n        sds-hoverable-150 \r\n        sds-fs-93 \r\n        sds-cursor-pointer\r\n        \"\r\n    (click)=\"onActionClick()\" \r\n>\r\n    <fa-icon\r\n        *ngIf=\"icon\"\r\n        class=\"me-2\"\r\n        [fixedWidth]=\"true\"\r\n        [size]=\"'sm'\"\r\n        [icon]=\"icon\">\r\n    </fa-icon>\r\n\r\n    <span>{{text}}</span>\r\n</a>", styles: ["a{-webkit-user-select:none;user-select:none;text-decoration:none;padding:.5rem;width:100%;border-radius:4px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsUserProfileActionButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sds-user-profile-action-button', standalone: true, imports: [
+                        NgIf,
+                        FontAwesomeModule
+                    ], template: "<a \r\n    class=\"\r\n        d-block \r\n        text-black \r\n        sds-navigation-user-profile-action-button \r\n        sds-hoverable-150 \r\n        sds-fs-93 \r\n        sds-cursor-pointer\r\n        \"\r\n    (click)=\"onActionClick()\" \r\n>\r\n    <fa-icon\r\n        *ngIf=\"icon\"\r\n        class=\"me-2\"\r\n        [fixedWidth]=\"true\"\r\n        [size]=\"'sm'\"\r\n        [icon]=\"icon\">\r\n    </fa-icon>\r\n\r\n    <span>{{text}}</span>\r\n</a>", styles: ["a{-webkit-user-select:none;user-select:none;text-decoration:none;padding:.5rem;width:100%;border-radius:4px}\n"] }]
+        }], propDecorators: { text: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], actionClick: [{
+                type: Output
+            }] } });
+
+class SdsNavigationUserProfileComponent {
+    constructor() {
+        this.profile = null;
+        this.profileInfo = '';
+        this.showSignOut = true;
+        this.showProfile = true;
+        this.signOutText = 'Sign out';
+        this.profileText = 'Profile';
+        this.showNotificationBadge = false;
+        this.newNotificationsText = 'New Notifications';
+        this.profileClick = new EventEmitter();
+        this.signOutClick = new EventEmitter();
+        this.notificationBadgeClick = new EventEmitter();
+        this.showOptions = false;
+        this.showOptionsChange = new EventEmitter();
+        this.userProfileIcon = faUser;
+        this.signOutIcon = faSignOut;
+        this.isCollapsed = model(false);
+        this.sideBarInstanceName = input('');
+    }
+    ngOnInit() { }
+    ngOnChanges(changes) {
+        // if (changes['activeProfileId'] || changes['profile'] || changes['additionalProfiles']) {
+        //     if (this.activeProfileId === null) {
+        //         this.activeProfile = this.profile;
+        //     } else if (this.activeProfileId === this.profile?.id) {
+        //         this.activeProfile = this.profile;
+        //     } else {
+        //         this.activeProfile = this.additionalProfiles.find(profile => profile.id === this.activeProfileId) || null;
+        //     }
+        // }
+    }
+    onProfileClick() {
+        this.showOptions = false;
+        this.showOptionsChange.emit(this.showOptions);
+        this.profileClick.emit();
+    }
+    onSignOutClick() {
+        this.showOptions = false;
+        this.showOptionsChange.emit(this.showOptions);
+        this.signOutClick.emit();
+    }
+    closeOptions() {
+        this.showOptions = false;
+        this.showOptionsChange.emit(this.showOptions);
+    }
+    openOptions() {
+        this.showOptions = true;
+        this.showOptionsChange.emit(this.showOptions);
+    }
+    toggleOptions(event) {
+        event.stopPropagation();
+        this.showOptions = !this.showOptions;
+        // console.log(this.showOptions);
+        this.showOptionsChange.emit(this.showOptions);
+    }
+    onNotificationBadgeClick(event) {
+        event.stopPropagation();
+        this.notificationBadgeClick.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsNavigationUserProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SdsNavigationUserProfileComponent, isStandalone: true, selector: "sds-navigation-user-profile", inputs: { profile: { classPropertyName: "profile", publicName: "profile", isSignal: false, isRequired: false, transformFunction: null }, profileInfo: { classPropertyName: "profileInfo", publicName: "profileInfo", isSignal: false, isRequired: false, transformFunction: null }, showSignOut: { classPropertyName: "showSignOut", publicName: "showSignOut", isSignal: false, isRequired: false, transformFunction: null }, showProfile: { classPropertyName: "showProfile", publicName: "showProfile", isSignal: false, isRequired: false, transformFunction: null }, signOutText: { classPropertyName: "signOutText", publicName: "signOutText", isSignal: false, isRequired: false, transformFunction: null }, profileText: { classPropertyName: "profileText", publicName: "profileText", isSignal: false, isRequired: false, transformFunction: null }, showNotificationBadge: { classPropertyName: "showNotificationBadge", publicName: "showNotificationBadge", isSignal: false, isRequired: false, transformFunction: null }, newNotificationsText: { classPropertyName: "newNotificationsText", publicName: "newNotificationsText", isSignal: false, isRequired: false, transformFunction: null }, showOptions: { classPropertyName: "showOptions", publicName: "showOptions", isSignal: false, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null }, sideBarInstanceName: { classPropertyName: "sideBarInstanceName", publicName: "sideBarInstanceName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { profileClick: "profileClick", signOutClick: "signOutClick", notificationBadgeClick: "notificationBadgeClick", showOptionsChange: "showOptionsChange", isCollapsed: "isCollapsedChange" }, usesOnChanges: true, ngImport: i0, template: "<div\r\n    class=\"\r\n        d-flex\r\n        flex-row\r\n        align-items-center\r\n        gap-2\r\n        sds-navigation-user-profile-container\r\n        user-select-none\r\n        mb-1 ms-1 me-1 mt-2\r\n        pt-1 pb-1 ps-2\r\n        sds-hoverable\r\n        sds-rounded-2\r\n    \"\r\n    (click)=\"toggleOptions($event)\"\r\n>\r\n    <div \r\n        #popoverTarget\r\n        class=\"\r\n            position-relative\r\n\r\n        \">\r\n        <sds-avatar\r\n            [text]=\"profile?.name\"\r\n            [colorKey]=\"profile?.id\"\r\n            [pictureUri]=\"profile?.pictureUri\"\r\n        >\r\n        </sds-avatar>\r\n\r\n        <span\r\n            *ngIf=\"showNotificationBadge\"\r\n            class=\"\r\n                position-absolute\r\n                notification-badge\r\n                translate-middle\r\n                bg-danger\r\n                border border-light\r\n                rounded-circle\r\n            \"\r\n            (click)=\"onNotificationBadgeClick($event)\"\r\n        >\r\n            <span class=\"visually-hidden\">{{ newNotificationsText }}</span>\r\n        </span>\r\n    </div>\r\n\r\n    @if(!isCollapsed()) {\r\n        <div class=\"sds-flex-column\">\r\n            <span class=\"truncate-two-lines text-gray-800 sds-fs-93\">\r\n                {{ profile?.name }}\r\n            </span>\r\n\r\n            <span class=\"sds-fw-400 sds-fs-75 text-truncate text-muted\">\r\n                {{ profileInfo }}\r\n            </span>\r\n        </div>\r\n    }\r\n</div>\r\n\r\n<dx-popover\r\n    [target]=\"popoverTarget\"\r\n    [position]=\"{ my: 'left bottom', at: 'left top' }\"\r\n    collision=\"fit none\"\r\n    minWidth=\"20rem\"\r\n    maxWidth=\"20rem\"\r\n    [(visible)]=\"showOptions\"\r\n    [wrapperAttr]=\"{\r\n        class: 'sds-navigation-user-profile-popover sds-dx-popup-no-arrow sds-dx-popup-content-padding-0'\r\n    }\"\r\n>\r\n    <div class=\"py-2 pb-3 main-profile-container border-bottom\">\r\n\r\n        <div class=\"sds-flex-column align-items-center\">\r\n            <sds-avatar\r\n                [text]=\"profile?.name\"\r\n                [colorKey]=\"profile?.id\"\r\n                [pictureUri]=\"profile?.pictureUri\"\r\n                [size]=\"7\"\r\n            >\r\n            </sds-avatar>\r\n\r\n            <h5 class=\"text-center mt-2 px-3\">\r\n                {{profile?.name}}\r\n            </h5>\r\n\r\n            <div class=\"sds-fw-400 text-center text-gray-800 sds-fs-87 px-3 text-truncate w-100\">\r\n                {{profile?.info}}\r\n            </div>\r\n        \r\n        </div>\r\n\r\n    </div>\r\n\r\n    <ng-content></ng-content>\r\n\r\n    <ul\r\n        class=\"\r\n            list-unstyled\r\n            sds-navigation-user-profile-actions\r\n            mb-0\r\n            sds-ul-gap-1\r\n            mx-2\r\n            mb-2\r\n        \"\r\n    >\r\n        <li *ngIf=\"showProfile\">\r\n            <sds-user-profile-action-button\r\n                [text]=\"profileText\"\r\n                [icon]=\"userProfileIcon\"\r\n                (actionClick)=\"onProfileClick()\"\r\n            >\r\n            </sds-user-profile-action-button>\r\n        </li>\r\n\r\n        <li *ngIf=\"showSignOut\">\r\n            <sds-user-profile-action-button\r\n                [text]=\"signOutText\"\r\n                [icon]=\"signOutIcon\"\r\n                (actionClick)=\"onSignOutClick()\"\r\n            >\r\n            </sds-user-profile-action-button>\r\n        </li>\r\n    </ul>\r\n</dx-popover>\r\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", "initialsText", "cursor", "size", "pictureImageAlt", "pictureLoading", "picturePriority", "badgeVisible", "badgePosition", "badgeBackgroundColor", "badgeTextColor", "badgeHint"] }, { kind: "component", type: SdsUserProfileActionButtonComponent, selector: "sds-user-profile-action-button", inputs: ["text", "icon"], outputs: ["actionClick"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: DxPopoverModule }, { kind: "component", type: i2.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "deferRendering", "disabled", "enableBodyScroll", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showEvent", "showTitle", "target", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "onTitleRendered", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "deferRenderingChange", "disabledChange", "enableBodyScrollChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsNavigationUserProfileComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sds-navigation-user-profile', standalone: true, imports: [
+                        SdsAvatarComponent,
+                        SdsUserProfileActionButtonComponent,
+                        NgIf,
+                        DxPopoverModule,
+                    ], template: "<div\r\n    class=\"\r\n        d-flex\r\n        flex-row\r\n        align-items-center\r\n        gap-2\r\n        sds-navigation-user-profile-container\r\n        user-select-none\r\n        mb-1 ms-1 me-1 mt-2\r\n        pt-1 pb-1 ps-2\r\n        sds-hoverable\r\n        sds-rounded-2\r\n    \"\r\n    (click)=\"toggleOptions($event)\"\r\n>\r\n    <div \r\n        #popoverTarget\r\n        class=\"\r\n            position-relative\r\n\r\n        \">\r\n        <sds-avatar\r\n            [text]=\"profile?.name\"\r\n            [colorKey]=\"profile?.id\"\r\n            [pictureUri]=\"profile?.pictureUri\"\r\n        >\r\n        </sds-avatar>\r\n\r\n        <span\r\n            *ngIf=\"showNotificationBadge\"\r\n            class=\"\r\n                position-absolute\r\n                notification-badge\r\n                translate-middle\r\n                bg-danger\r\n                border border-light\r\n                rounded-circle\r\n            \"\r\n            (click)=\"onNotificationBadgeClick($event)\"\r\n        >\r\n            <span class=\"visually-hidden\">{{ newNotificationsText }}</span>\r\n        </span>\r\n    </div>\r\n\r\n    @if(!isCollapsed()) {\r\n        <div class=\"sds-flex-column\">\r\n            <span class=\"truncate-two-lines text-gray-800 sds-fs-93\">\r\n                {{ profile?.name }}\r\n            </span>\r\n\r\n            <span class=\"sds-fw-400 sds-fs-75 text-truncate text-muted\">\r\n                {{ profileInfo }}\r\n            </span>\r\n        </div>\r\n    }\r\n</div>\r\n\r\n<dx-popover\r\n    [target]=\"popoverTarget\"\r\n    [position]=\"{ my: 'left bottom', at: 'left top' }\"\r\n    collision=\"fit none\"\r\n    minWidth=\"20rem\"\r\n    maxWidth=\"20rem\"\r\n    [(visible)]=\"showOptions\"\r\n    [wrapperAttr]=\"{\r\n        class: 'sds-navigation-user-profile-popover sds-dx-popup-no-arrow sds-dx-popup-content-padding-0'\r\n    }\"\r\n>\r\n    <div class=\"py-2 pb-3 main-profile-container border-bottom\">\r\n\r\n        <div class=\"sds-flex-column align-items-center\">\r\n            <sds-avatar\r\n                [text]=\"profile?.name\"\r\n                [colorKey]=\"profile?.id\"\r\n                [pictureUri]=\"profile?.pictureUri\"\r\n                [size]=\"7\"\r\n            >\r\n            </sds-avatar>\r\n\r\n            <h5 class=\"text-center mt-2 px-3\">\r\n                {{profile?.name}}\r\n            </h5>\r\n\r\n            <div class=\"sds-fw-400 text-center text-gray-800 sds-fs-87 px-3 text-truncate w-100\">\r\n                {{profile?.info}}\r\n            </div>\r\n        \r\n        </div>\r\n\r\n    </div>\r\n\r\n    <ng-content></ng-content>\r\n\r\n    <ul\r\n        class=\"\r\n            list-unstyled\r\n            sds-navigation-user-profile-actions\r\n            mb-0\r\n            sds-ul-gap-1\r\n            mx-2\r\n            mb-2\r\n        \"\r\n    >\r\n        <li *ngIf=\"showProfile\">\r\n            <sds-user-profile-action-button\r\n                [text]=\"profileText\"\r\n                [icon]=\"userProfileIcon\"\r\n                (actionClick)=\"onProfileClick()\"\r\n            >\r\n            </sds-user-profile-action-button>\r\n        </li>\r\n\r\n        <li *ngIf=\"showSignOut\">\r\n            <sds-user-profile-action-button\r\n                [text]=\"signOutText\"\r\n                [icon]=\"signOutIcon\"\r\n                (actionClick)=\"onSignOutClick()\"\r\n            >\r\n            </sds-user-profile-action-button>\r\n        </li>\r\n    </ul>\r\n</dx-popover>\r\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"] }]
+        }], ctorParameters: () => [], propDecorators: { profile: [{
+                type: Input
+            }], profileInfo: [{
+                type: Input
+            }], showSignOut: [{
+                type: Input
+            }], showProfile: [{
+                type: Input
+            }], signOutText: [{
+                type: Input
+            }], profileText: [{
+                type: Input
+            }], showNotificationBadge: [{
+                type: Input
+            }], newNotificationsText: [{
+                type: Input
+            }], profileClick: [{
+                type: Output
+            }], signOutClick: [{
+                type: Output
+            }], notificationBadgeClick: [{
+                type: Output
+            }], showOptions: [{
+                type: Input
+            }], showOptionsChange: [{
+                type: Output
+            }] } });
+
+class SdsNavigationContainerComponent {
+    constructor() {
+        this.isCollapsed = model(false);
+        this.product = 'all-hours';
+        effect(() => {
+            const isCollapsed = this.isCollapsed();
+            untracked(() => {
+                this.setCollapsed(isCollapsed);
+            });
+        });
+    }
+    ngOnInit() { }
+    setCollapsed(isCollapsed) {
+        this.groupComponentChildren?.forEach((child) => { child.isCollapsed.set(isCollapsed); });
+        this.routeLinkComponentChildren?.forEach((child) => { child.isCollapsed.set(isCollapsed); });
+        this.separatorComponentChildren?.forEach((child) => { child.isCollapsed.set(isCollapsed); });
+        this.headerComponentChildren?.forEach((child) => { child.isCollapsed.set(isCollapsed); });
+        this.externalLinkComponentChildren?.forEach((child) => { child.isCollapsed.set(isCollapsed); });
+        this.userProfileComponentChildren?.forEach((child) => { child.isCollapsed.set(isCollapsed); });
+        this.collapsibleFrameComponentChildren?.forEach((child) => { child.isCollapsed.set(isCollapsed); });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsNavigationContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: SdsNavigationContainerComponent, isStandalone: true, selector: "sds-navigation-container", inputs: { product: { classPropertyName: "product", publicName: "product", isSignal: false, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange" }, queries: [{ propertyName: "groupComponentChildren", predicate: SdsNavigationGroupComponent }, { propertyName: "routeLinkComponentChildren", predicate: SdsNavigationRouteLinkComponent }, { propertyName: "separatorComponentChildren", predicate: SdsNavigationSeparatorComponent }, { propertyName: "headerComponentChildren", predicate: SdsNavigationHeaderComponent }, { propertyName: "externalLinkComponentChildren", predicate: SdsNavigationExternalLinkComponent }, { propertyName: "userProfileComponentChildren", predicate: SdsNavigationUserProfileComponent }, { propertyName: "collapsibleFrameComponentChildren", predicate: SdsNavigationCollapsibleFrameComponent }], ngImport: i0, template: "<div \r\n    class=\"sds-navigation-container\"\r\n    [class]=\"'product-' + product\">\r\n    <ng-content></ng-content>\r\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"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsNavigationContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sds-navigation-container', standalone: true, template: "<div \r\n    class=\"sds-navigation-container\"\r\n    [class]=\"'product-' + product\">\r\n    <ng-content></ng-content>\r\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: { product: [{
+                type: Input
+            }], groupComponentChildren: [{
+                type: ContentChildren,
+                args: [SdsNavigationGroupComponent]
+            }], routeLinkComponentChildren: [{
+                type: ContentChildren,
+                args: [SdsNavigationRouteLinkComponent]
+            }], separatorComponentChildren: [{
+                type: ContentChildren,
+                args: [SdsNavigationSeparatorComponent]
+            }], headerComponentChildren: [{
+                type: ContentChildren,
+                args: [SdsNavigationHeaderComponent]
+            }], externalLinkComponentChildren: [{
+                type: ContentChildren,
+                args: [SdsNavigationExternalLinkComponent]
+            }], userProfileComponentChildren: [{
+                type: ContentChildren,
+                args: [SdsNavigationUserProfileComponent]
+            }], collapsibleFrameComponentChildren: [{
+                type: ContentChildren,
+                args: [SdsNavigationCollapsibleFrameComponent]
+            }] } });
+
+class SdsUserProfileTileComponent {
+    constructor() {
+        this.profile = null;
+        this.emphasizeName = true;
+        this.size = 'medium';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsUserProfileTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SdsUserProfileTileComponent, isStandalone: true, selector: "sds-user-profile-tile", inputs: { profile: "profile", emphasizeName: "emphasizeName", size: "size" }, ngImport: i0, template: "\r\n<div class=\"sds-flex-row-center gap-3\">\r\n    <sds-avatar\r\n        [text]=\"profile?.name\"\r\n        [colorKey]=\"profile?.id\"\r\n        [pictureUri]=\"profile?.pictureUri\"\r\n        [size]=\"size === 'small' ? 2 : 3\"\r\n        borderColor=\"white\"\r\n        borderWidth=\"2\"\r\n    >\r\n    </sds-avatar>\r\n\r\n    <div \r\n        class=\"flex-grow-1 flex-shrink-1 text-body\"\r\n        [style.minWidth.px]=\"1\"\r\n        >\r\n        <span \r\n            class=\"sds-fs-100 text-truncate\"\r\n            [class.sds-fs-100]=\"size === 'medium'\"\r\n            [class.sds-fs-95]=\"size === 'small'\"\r\n            [class.sds-fw-500]=\"emphasizeName\"\r\n            >\r\n            {{profile?.name}}\r\n        </span>\r\n        <div \r\n            class=\"sds-fw-400 text-truncate text-gray-800\"\r\n            [class.sds-fs-75]=\"size === 'medium'\"\r\n            [class.sds-fs-75]=\"size === 'small'\"\r\n        >\r\n            {{profile?.info}}\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "component", type: SdsAvatarComponent, selector: "sds-avatar", inputs: ["text", "colorKey", "pictureUri", "showHint", "borderStyle", "borderColor", "initialsText", "cursor", "size", "pictureImageAlt", "pictureLoading", "picturePriority", "badgeVisible", "badgePosition", "badgeBackgroundColor", "badgeTextColor", "badgeHint"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsUserProfileTileComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sds-user-profile-tile', standalone: true, imports: [
+                        SdsAvatarComponent
+                    ], template: "\r\n<div class=\"sds-flex-row-center gap-3\">\r\n    <sds-avatar\r\n        [text]=\"profile?.name\"\r\n        [colorKey]=\"profile?.id\"\r\n        [pictureUri]=\"profile?.pictureUri\"\r\n        [size]=\"size === 'small' ? 2 : 3\"\r\n        borderColor=\"white\"\r\n        borderWidth=\"2\"\r\n    >\r\n    </sds-avatar>\r\n\r\n    <div \r\n        class=\"flex-grow-1 flex-shrink-1 text-body\"\r\n        [style.minWidth.px]=\"1\"\r\n        >\r\n        <span \r\n            class=\"sds-fs-100 text-truncate\"\r\n            [class.sds-fs-100]=\"size === 'medium'\"\r\n            [class.sds-fs-95]=\"size === 'small'\"\r\n            [class.sds-fw-500]=\"emphasizeName\"\r\n            >\r\n            {{profile?.name}}\r\n        </span>\r\n        <div \r\n            class=\"sds-fw-400 text-truncate text-gray-800\"\r\n            [class.sds-fs-75]=\"size === 'medium'\"\r\n            [class.sds-fs-75]=\"size === 'small'\"\r\n        >\r\n            {{profile?.info}}\r\n        </div>\r\n    </div>\r\n</div>\r\n" }]
+        }], propDecorators: { profile: [{
+                type: Input
+            }], emphasizeName: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }] } });
+
+class SdsUserProfileSelectorComponent {
+    constructor() {
+        this.content = 'profileList';
+        this.profiles = [];
+        this.selectDefaultProfileText = 'Stop Impersonation';
+        this.switchText = 'Switch to';
+        this.profileIdChange = new EventEmitter();
+        this.isSelectedOneOfProfiles = false;
+        this.SELECT_DEFAULT_PROFILE_ICON = faEyeSlash;
+    }
+    selectProfile(profileId) {
+        this.profileIdChange.emit(profileId);
+    }
+    selectDefaultProfile() {
+        this.profileIdChange.emit('');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsUserProfileSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SdsUserProfileSelectorComponent, isStandalone: true, selector: "sds-user-profile-selector", inputs: { content: "content", profiles: "profiles", selectDefaultProfileText: "selectDefaultProfileText", switchText: "switchText" }, outputs: { profileIdChange: "profileIdChange" }, ngImport: i0, template: "<div class=\"mx-2\">  \r\n    <div \r\n        *ngIf=\"content === 'profileList' && profiles && profiles.length > 0\"\r\n        class=\"pt-2 pb-3 mt-1 mb-2 ps-2 border-bottom\">\r\n\r\n        <div class=\"sds-fs-75 py-1 mb-2 text-uppercase\">{{switchText}}</div>\r\n\r\n        <ul class=\"list-unstyled mb-0 sds-ul-gap-1 ps-2 profile-list sds-scrollbar sds-scrollbar-thin\">\r\n            <li\r\n                class=\"rounded sds-hoverable-150 pe-2 py-1\"\r\n                *ngFor=\"let profile of profiles\"\r\n            >\r\n                <sds-user-profile-tile\r\n                    class=\"sds-cursor-pointer\"\r\n                    [profile]=\"profile\"\r\n                    [size]=\"'small'\"\r\n                    [emphasizeName]=\"false\"\r\n                    (click)=\"selectProfile(profile.id)\"\r\n                    >\r\n                </sds-user-profile-tile>\r\n            </li>\r\n        </ul>\r\n    </div>\r\n\r\n    <div \r\n        *ngIf=\"content === 'selectDefaultProfile'\"\r\n        class=\"mt-2 mb-1\">\r\n        <sds-user-profile-action-button\r\n            [text]=\"selectDefaultProfileText\"\r\n            [icon]=\"SELECT_DEFAULT_PROFILE_ICON\"\r\n            (click)=\"selectDefaultProfile()\"\r\n            >\r\n        </sds-user-profile-action-button>\r\n    </div>\r\n</div>", styles: [".profile-list{max-height:6rem;overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SdsUserProfileTileComponent, selector: "sds-user-profile-tile", inputs: ["profile", "emphasizeName", "size"] }, { kind: "component", type: SdsUserProfileActionButtonComponent, selector: "sds-user-profile-action-button", inputs: ["text", "icon"], outputs: ["actionClick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsUserProfileSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sds-user-profile-selector', standalone: true, imports: [
+                        NgIf,
+                        NgFor,
+                        SdsUserProfileTileComponent,
+                        SdsUserProfileActionButtonComponent
+                    ], template: "<div class=\"mx-2\">  \r\n    <div \r\n        *ngIf=\"content === 'profileList' && profiles && profiles.length > 0\"\r\n        class=\"pt-2 pb-3 mt-1 mb-2 ps-2 border-bottom\">\r\n\r\n        <div class=\"sds-fs-75 py-1 mb-2 text-uppercase\">{{switchText}}</div>\r\n\r\n        <ul class=\"list-unstyled mb-0 sds-ul-gap-1 ps-2 profile-list sds-scrollbar sds-scrollbar-thin\">\r\n            <li\r\n                class=\"rounded sds-hoverable-150 pe-2 py-1\"\r\n                *ngFor=\"let profile of profiles\"\r\n            >\r\n                <sds-user-profile-tile\r\n                    class=\"sds-cursor-pointer\"\r\n                    [profile]=\"profile\"\r\n                    [size]=\"'small'\"\r\n                    [emphasizeName]=\"false\"\r\n                    (click)=\"selectProfile(profile.id)\"\r\n                    >\r\n                </sds-user-profile-tile>\r\n            </li>\r\n        </ul>\r\n    </div>\r\n\r\n    <div \r\n        *ngIf=\"content === 'selectDefaultProfile'\"\r\n        class=\"mt-2 mb-1\">\r\n        <sds-user-profile-action-button\r\n            [text]=\"selectDefaultProfileText\"\r\n            [icon]=\"SELECT_DEFAULT_PROFILE_ICON\"\r\n            (click)=\"selectDefaultProfile()\"\r\n            >\r\n        </sds-user-profile-action-button>\r\n    </div>\r\n</div>", styles: [".profile-list{max-height:6rem;overflow-y:auto}\n"] }]
+        }], propDecorators: { content: [{
+                type: Input
+            }], profiles: [{
+                type: Input
+            }], selectDefaultProfileText: [{
+                type: Input
+            }], switchText: [{
+                type: Input
+            }], profileIdChange: [{
+                type: Output
+            }] } });
+
+class SdsProductHomeComponent {
+    constructor() {
+        this.showAppSwitcher = false;
+        this.appSwitcherSwitchText = '';
+        this.appSwitcherDiscoverText = '';
+        this.textOpen = input('Expand sidebar');
+        this.textClose = input('Collapse sidebar');
+        this.allowHeaderClick = false;
+        this.productSwitched = new EventEmitter();
+        this.headerClick = new EventEmitter();
+        this.ICON_CLOSE = faArrowLeftFromLine;
+        this.ICON_OPEN = faArrowRightFromLine;
+        this.ICON_SIDEBAR = faSidebar;
+        this.isCollapsed = model(false);
+        this.sideBarInstanceName = input('');
+    }
+    ngOnInit() { }
+    onProductClick(product) {
+        this.productSwitched.emit(product);
+    }
+    onHeaderClick() {
+        if (this.allowHeaderClick) {
+            this.headerClick.emit();
+        }
+    }
+    toggleState() {
+        this.isCollapsed.set(!this.isCollapsed());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsProductHomeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SdsProductHomeComponent, isStandalone: true, selector: "sds-product-home", inputs: { logoUrl: { classPropertyName: "logoUrl", publicName: "logoUrl", isSignal: false, isRequired: false, transformFunction: null }, logoAltText: { classPropertyName: "logoAltText", publicName: "logoAltText", isSignal: false, isRequired: false, transformFunction: null }, moduleTitle: { classPropertyName: "moduleTitle", publicName: "moduleTitle", isSignal: false, isRequired: false, transformFunction: null }, showAppSwitcher: { classPropertyName: "showAppSwitcher", publicName: "showAppSwitcher", isSignal: false, isRequired: false, transformFunction: null }, appSwitcherProductCode: { classPropertyName: "appSwitcherProductCode", publicName: "appSwitcherProductCode", isSignal: false, isRequired: false, transformFunction: null }, appSwitcherUserProductCodes: { classPropertyName: "appSwitcherUserProductCodes", publicName: "appSwitcherUserProductCodes", isSignal: false, isRequired: false, transformFunction: null }, appSwitcherTenantProducts: { classPropertyName: "appSwitcherTenantProducts", publicName: "appSwitcherTenantProducts", isSignal: false, isRequired: false, transformFunction: null }, appSwitcherSwitchText: { classPropertyName: "appSwitcherSwitchText", publicName: "appSwitcherSwitchText", isSignal: false, isRequired: false, transformFunction: null }, appSwitcherDiscoverText: { classPropertyName: "appSwitcherDiscoverText", publicName: "appSwitcherDiscoverText", isSignal: false, isRequired: false, transformFunction: null }, textOpen: { classPropertyName: "textOpen", publicName: "textOpen", isSignal: true, isRequired: false, transformFunction: null }, textClose: { classPropertyName: "textClose", publicName: "textClose", isSignal: true, isRequired: false, transformFunction: null }, allowHeaderClick: { classPropertyName: "allowHeaderClick", publicName: "allowHeaderClick", isSignal: false, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null }, sideBarInstanceName: { classPropertyName: "sideBarInstanceName", publicName: "sideBarInstanceName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { productSwitched: "productSwitched", headerClick: "headerClick", isCollapsed: "isCollapsedChange" }, ngImport: i0, template: "<div \r\n    class=\"product-header pb-2 mb-2 align-items-start gap-2\"\r\n    >\r\n        @if(!isCollapsed()) {\r\n        <sds-app-switcher\r\n            *ngIf=\"showAppSwitcher\"\r\n            class=\"app-switcher text-gray-800 sds-fs-93 sds-hoverable sds-rounded-2 p-1 d-flex align-items-center justify-content-center\"\r\n            [productCode]=\"appSwitcherProductCode\"\r\n            [userProductCodes]=\"appSwitcherUserProductCodes\"\r\n            [tenantProducts]=\"appSwitcherTenantProducts\"\r\n            [switchText]=\"appSwitcherSwitchText\"\r\n            [discoverText]=\"appSwitcherDiscoverText\"\r\n            (productClick)=\"onProductClick($event)\"\r\n            >\r\n        </sds-app-switcher>\r\n   \r\n        <div \r\n            class=\"sds-flex-grow-shrink product-title\"\r\n            (click)=\"onHeaderClick()\"\r\n            [class.sds-cursor-pointer]=\"allowHeaderClick\"\r\n            [title]=\"moduleTitle && isCollapsed() ? moduleTitle : ''\"\r\n            >\r\n            <div \r\n                class=\"product-logo-container\"\r\n                [class.collapsed]=\"isCollapsed()\"\r\n                >\r\n                <img\r\n                    class=\"product-logo\"\r\n                    [src]=\"logoUrl\" \r\n                    [alt]=\"logoAltText\"\r\n                >  \r\n            </div>\r\n\r\n            @if(moduleTitle && !isCollapsed()) {\r\n                <h6 class=\"mt-2\">\r\n                    {{moduleTitle}}\r\n                </h6>\r\n            }\r\n        </div>\r\n    }\r\n\r\n    <a \r\n        class=\"\r\n            toggle-collapsed-button \r\n            text-gray-800 sds-fs-93 \r\n            sds-hoverable sds-rounded-2 \r\n            p-1 ml-2\r\n            d-flex align-items-center justify-content-center\r\n            sds-cursor-pointer\r\n            \" \r\n        (click)=\"toggleState()\" \r\n        [title]=\"isCollapsed() ? textOpen() : textClose()\" \r\n        >\r\n            <fa-icon \r\n                class=\"static-icon\"\r\n                [icon]=\"ICON_SIDEBAR\" \r\n                [fixedWidth]=\"true\"\r\n                >\r\n            </fa-icon>\r\n\r\n            <fa-icon \r\n                class=\"hover-icon\"\r\n                [icon]=\"isCollapsed() ? ICON_OPEN : ICON_CLOSE\" \r\n                [fixedWidth]=\"true\"\r\n                >\r\n            </fa-icon>\r\n    </a>\r\n    \r\n</div>\r\n", styles: [".product-header{padding-left:.75rem!important}.product-header .app-switcher{height:2rem;width:2rem}.product-header .product-title{margin-top:.15rem}.product-header .product-logo-container{height:calc(1.5rem + 2px)}.product-header .product-logo-container.collapsed{width:calc(1.5rem + 2px);overflow-x:hidden}.product-header .product-logo{height:1.5rem}.product-header h6{font-size:.8rem}.product-header a.toggle-collapsed-button{height:2rem;width:2rem}.product-header a.toggle-collapsed-button .static-icon{display:block}.product-header a.toggle-collapsed-button .hover-icon,.product-header a.toggle-collapsed-button:hover .static-icon{display:none}.product-header a.toggle-collapsed-button:hover .hover-icon{display:block}:host{width:100%}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: SdsAppSwitcherComponent, selector: "sds-app-switcher", inputs: ["productCode", "userProductCodes", "tenantProducts", "switchText", "discoverText", "ariaLabel"], outputs: ["productClick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsProductHomeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sds-product-home', standalone: true, imports: [
+                        NgIf,
+                        FontAwesomeModule,
+                        SdsAppSwitcherComponent
+                    ], template: "<div \r\n    class=\"product-header pb-2 mb-2 align-items-start gap-2\"\r\n    >\r\n        @if(!isCollapsed()) {\r\n        <sds-app-switcher\r\n            *ngIf=\"showAppSwitcher\"\r\n            class=\"app-switcher text-gray-800 sds-fs-93 sds-hoverable sds-rounded-2 p-1 d-flex align-items-center justify-content-center\"\r\n            [productCode]=\"appSwitcherProductCode\"\r\n            [userProductCodes]=\"appSwitcherUserProductCodes\"\r\n            [tenantProducts]=\"appSwitcherTenantProducts\"\r\n            [switchText]=\"appSwitcherSwitchText\"\r\n            [discoverText]=\"appSwitcherDiscoverText\"\r\n            (productClick)=\"onProductClick($event)\"\r\n            >\r\n        </sds-app-switcher>\r\n   \r\n        <div \r\n            class=\"sds-flex-grow-shrink product-title\"\r\n            (click)=\"onHeaderClick()\"\r\n            [class.sds-cursor-pointer]=\"allowHeaderClick\"\r\n            [title]=\"moduleTitle && isCollapsed() ? moduleTitle : ''\"\r\n            >\r\n            <div \r\n                class=\"product-logo-container\"\r\n                [class.collapsed]=\"isCollapsed()\"\r\n                >\r\n                <img\r\n                    class=\"product-logo\"\r\n                    [src]=\"logoUrl\" \r\n                    [alt]=\"logoAltText\"\r\n                >  \r\n            </div>\r\n\r\n            @if(moduleTitle && !isCollapsed()) {\r\n                <h6 class=\"mt-2\">\r\n                    {{moduleTitle}}\r\n                </h6>\r\n            }\r\n        </div>\r\n    }\r\n\r\n    <a \r\n        class=\"\r\n            toggle-collapsed-button \r\n            text-gray-800 sds-fs-93 \r\n            sds-hoverable sds-rounded-2 \r\n            p-1 ml-2\r\n            d-flex align-items-center justify-content-center\r\n            sds-cursor-pointer\r\n            \" \r\n        (click)=\"toggleState()\" \r\n        [title]=\"isCollapsed() ? textOpen() : textClose()\" \r\n        >\r\n            <fa-icon \r\n                class=\"static-icon\"\r\n                [icon]=\"ICON_SIDEBAR\" \r\n                [fixedWidth]=\"true\"\r\n                >\r\n            </fa-icon>\r\n\r\n            <fa-icon \r\n                class=\"hover-icon\"\r\n                [icon]=\"isCollapsed() ? ICON_OPEN : ICON_CLOSE\" \r\n                [fixedWidth]=\"true\"\r\n                >\r\n            </fa-icon>\r\n    </a>\r\n    \r\n</div>\r\n", styles: [".product-header{padding-left:.75rem!important}.product-header .app-switcher{height:2rem;width:2rem}.product-header .product-title{margin-top:.15rem}.product-header .product-logo-container{height:calc(1.5rem + 2px)}.product-header .product-logo-container.collapsed{width:calc(1.5rem + 2px);overflow-x:hidden}.product-header .product-logo{height:1.5rem}.product-header h6{font-size:.8rem}.product-header a.toggle-collapsed-button{height:2rem;width:2rem}.product-header a.toggle-collapsed-button .static-icon{display:block}.product-header a.toggle-collapsed-button .hover-icon,.product-header a.toggle-collapsed-button:hover .static-icon{display:none}.product-header a.toggle-collapsed-button:hover .hover-icon{display:block}:host{width:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { logoUrl: [{
+                type: Input
+            }], logoAltText: [{
+                type: Input
+            }], moduleTitle: [{
+                type: Input
+            }], showAppSwitcher: [{
+                type: Input
+            }], appSwitcherProductCode: [{
+                type: Input
+            }], appSwitcherUserProductCodes: [{
+                type: Input
+            }], appSwitcherTenantProducts: [{
+                type: Input
+            }], appSwitcherSwitchText: [{
+                type: Input
+            }], appSwitcherDiscoverText: [{
+                type: Input
+            }], allowHeaderClick: [{
+                type: Input
+            }], productSwitched: [{
+                type: Output
+            }], headerClick: [{
+                type: Output
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SdsNavigationCollapsibleFrameComponent, SdsNavigationContainerComponent, SdsNavigationExternalLinkComponent, SdsNavigationGroupComponent, SdsNavigationHeaderComponent, SdsNavigationRouteLinkComponent, SdsNavigationSeparatorComponent, SdsNavigationUserProfileComponent, SdsProductHomeComponent, SdsUserProfileSelectorComponent };
+//# sourceMappingURL=spicainternational-ngx-sds-components-src-lib-navigation.mjs.map