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

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

@@ -1,604 +0,0 @@
-import * as i0 from '@angular/core';
-import { Component, Input, QueryList, ContentChildren, Pipe, EventEmitter, Output, NgModule } from '@angular/core';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i1$1 from '@angular/router';
-import { NavigationEnd, RouterModule } from '@angular/router';
-import * as i2 from '@fortawesome/angular-fontawesome';
-import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import { faAngleUp, faAngleDown, faExternalLink, faUser, faSignOut, faEyeSlash } from '@fortawesome/pro-regular-svg-icons';
-import { Subject, filter, takeUntil } from 'rxjs';
-import * as i4 from 'devextreme-angular/ui/popover';
-import { DxPopoverModule } from 'devextreme-angular/ui/popover';
-import * as i5 from 'devextreme-angular/ui/nested';
-import * as i2$1 from '@spicainternational/ngx-sds-components/src/lib/avatar';
-import { SdsAvatarModule } from '@spicainternational/ngx-sds-components/src/lib/avatar';
-import * as i2$2 from '@spicainternational/ngx-sds-components/src/lib/app-switcher';
-import { SdsAppSwitcherModule } from '@spicainternational/ngx-sds-components/src/lib/app-switcher';
-import { DxScrollViewModule } from 'devextreme-angular';
-import { SdsTooltipModule } from '@spicainternational/ngx-sds-components/src/lib/tooltip';
-import { FormsModule } from '@angular/forms';
-import { A11yModule } from '@angular/cdk/a11y';
-
-class SdsNavigationSeparatorComponent {
-    constructor() { }
-    ngOnInit() {
-    }
-}
-SdsNavigationSeparatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsNavigationSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SdsNavigationSeparatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsNavigationSeparatorComponent, selector: "sds-navigation-separator", ngImport: i0, template: "<div class=\"sds-navigation-separator nav-separator\"></div>\r\n", styles: [""] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsNavigationSeparatorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sds-navigation-separator', template: "<div class=\"sds-navigation-separator nav-separator\"></div>\r\n" }]
-        }], ctorParameters: function () { return []; } });
-
-class SdsNavigationHeaderComponent {
-    constructor() {
-        this.text = '';
-    }
-    ngOnInit() { }
-}
-SdsNavigationHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsNavigationHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SdsNavigationHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsNavigationHeaderComponent, selector: "sds-navigation-header", inputs: { text: "text" }, ngImport: i0, template: "<div class=\"sds-navigation-header\">\r\n    {{ text }}\r\n</div>\r\n", styles: [""] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsNavigationHeaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sds-navigation-header', template: "<div class=\"sds-navigation-header\">\r\n    {{ text }}\r\n</div>\r\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { text: [{
-                type: Input
-            }] } });
-
-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;
-    }
-    ngOnInit() { }
-}
-SdsNavigationRouteLinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsNavigationRouteLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SdsNavigationRouteLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsNavigationRouteLinkComponent, selector: "sds-navigation-route-link", inputs: { link: "link", text: "text", additionalInfo: "additionalInfo", disabled: "disabled" }, 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    <a class=\"sds-navigation-item-content w-100\" [routerLink]=\"link\">\r\n        <div class=\"d-flex align-items-center\">\r\n            <div class=\"sds-navigation-icon\" >\r\n                <ng-content select=\"[navigationIcon]\"></ng-content>\r\n            </div>\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        </div>\r\n    </a>\r\n</div>", styles: [".sds-navigation-router-link.sds-navigation-item-container.disabled{pointer-events:none;opacity:.6}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsNavigationRouteLinkComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sds-navigation-route-link', 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    <a class=\"sds-navigation-item-content w-100\" [routerLink]=\"link\">\r\n        <div class=\"d-flex align-items-center\">\r\n            <div class=\"sds-navigation-icon\" >\r\n                <ng-content select=\"[navigationIcon]\"></ng-content>\r\n            </div>\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        </div>\r\n    </a>\r\n</div>", styles: [".sds-navigation-router-link.sds-navigation-item-container.disabled{pointer-events:none;opacity:.6}\n"] }]
-        }], ctorParameters: function () { return []; }, 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 === null || currentUrl === void 0 ? void 0 : currentUrl.length) === 0) {
-        return false;
-    }
-    defaultGroupUrl = defaultGroupUrl.replace('/', '');
-    if ((nestedRoutes === null || nestedRoutes === void 0 ? void 0 : 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.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;
-    }
-    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);
-                console.debug(`Nav group [${this.text}] active check (NavigationEnd): isGroupActive = ${this.isGroupActive} for route ${this.currentUrl}, navigationGroupNestedRoutes = ${this.navigationGroupNestedRoutes}, defaultRouterLink = ${this.defaultRouterLink}`);
-            }
-        });
-    }
-    ngOnChanges(changes) {
-        if (changes['navigationGroupNestedRoutes'] || changes['defaultRouterLink']) {
-            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);
-            console.debug(`Nav group [${this.text}] active check (onChanges): isGroupActive = ${this.isGroupActive} for route ${this.currentUrl}, navigationGroupNestedRoutes = ${this.navigationGroupNestedRoutes}, defaultRouterLink = ${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();
-        });
-    }
-}
-SdsNavigationGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsNavigationGroupComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
-SdsNavigationGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsNavigationGroupComponent, selector: "sds-navigation-group", inputs: { navigationGroupNestedRoutes: "navigationGroupNestedRoutes", text: "text", icon: "icon", defaultRouterLink: "defaultRouterLink", reverse: "reverse", ignoreQueryParamsInActiveRoute: "ignoreQueryParamsInActiveRoute", disabled: "disabled", showPopover: "showPopover", showPopoverHeader: "showPopoverHeader" }, queries: [{ propertyName: "routerLinkComponents", predicate: SdsNavigationRouteLinkComponent }], usesOnChanges: true, ngImport: i0, template: "<div \r\n    #navigationGroup\r\n    class=\"sds-navigation-group sds-navigation-item-container d-flex\"\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    >\r\n    <a \r\n        class=\"w-100 sds-navigation-item-content\"\r\n        style=\"cursor: pointer\"\r\n        [routerLink]=\"[defaultRouterLink]\">\r\n        <div class=\"d-flex align-items-center\">\r\n            <div class=\"sds-navigation-icon\" >\r\n                <ng-content select=\"[navigationIcon]\"></ng-content>\r\n            </div>\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        </div>\r\n    </a>\r\n\r\n    <div *ngIf=\"isGroupActive\" class=\"sds-navigation-group-items\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>\r\n\r\n<ng-container *ngIf=\"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: [".sds-navigation-group.sds-navigation-item-container.disabled{pointer-events:none;opacity:.6}::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 .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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i2.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: i4.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "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", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "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: i5.DxoPositionComponent, selector: "dxo-position", inputs: ["at", "boundary", "boundaryOffset", "collision", "my", "of", "offset"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsNavigationGroupComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sds-navigation-group', template: "<div \r\n    #navigationGroup\r\n    class=\"sds-navigation-group sds-navigation-item-container d-flex\"\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    >\r\n    <a \r\n        class=\"w-100 sds-navigation-item-content\"\r\n        style=\"cursor: pointer\"\r\n        [routerLink]=\"[defaultRouterLink]\">\r\n        <div class=\"d-flex align-items-center\">\r\n            <div class=\"sds-navigation-icon\" >\r\n                <ng-content select=\"[navigationIcon]\"></ng-content>\r\n            </div>\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        </div>\r\n    </a>\r\n\r\n    <div *ngIf=\"isGroupActive\" class=\"sds-navigation-group-items\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>\r\n\r\n<ng-container *ngIf=\"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: [".sds-navigation-group.sds-navigation-item-container.disabled{pointer-events:none;opacity:.6}::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 .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: function () { return [{ type: i1$1.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 SdsNavigationContainerComponent {
-    constructor() {
-        this.product = 'all-hours';
-    }
-    ngOnInit() { }
-}
-SdsNavigationContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsNavigationContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SdsNavigationContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsNavigationContainerComponent, selector: "sds-navigation-container", inputs: { product: "product" }, 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}:host{overflow-y:auto;overflow-x:hidden}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsNavigationContainerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sds-navigation-container', 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}:host{overflow-y:auto;overflow-x:hidden}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { product: [{
-                type: Input
-            }] } });
-
-class SdsNavigationExternalLinkComponent {
-    constructor() {
-        this.link = '';
-        this.text = '';
-        this.tabName = '_blank';
-        this.externalLinkHint = '';
-        this.showExternalLinkIcon = true;
-        this.externalLinkIcon = faExternalLink;
-    }
-    ngOnInit() {
-    }
-    openLink() {
-        window.open(this.link, this.tabName);
-    }
-}
-SdsNavigationExternalLinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsNavigationExternalLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SdsNavigationExternalLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsNavigationExternalLinkComponent, selector: "sds-navigation-external-link", inputs: { link: "link", text: "text", tabName: "tabName", externalLinkHint: "externalLinkHint", showExternalLinkIcon: "showExternalLinkIcon" }, ngImport: i0, template: "<div \r\n    class=\"sds-navigation-external-link sds-navigation-item-container\">\r\n    <a class=\"w-100 sds-navigation-item-content\" (click)=\"openLink()\" >\r\n        <div class=\"d-flex align-items-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            <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            \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}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.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: "15.2.10", ngImport: i0, type: SdsNavigationExternalLinkComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sds-navigation-external-link', template: "<div \r\n    class=\"sds-navigation-external-link sds-navigation-item-container\">\r\n    <a class=\"w-100 sds-navigation-item-content\" (click)=\"openLink()\" >\r\n        <div class=\"d-flex align-items-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            <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            \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}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { link: [{
-                type: Input
-            }], text: [{
-                type: Input
-            }], tabName: [{
-                type: Input
-            }], externalLinkHint: [{
-                type: Input
-            }], showExternalLinkIcon: [{
-                type: Input
-            }] } });
-
-class NavigationRouteActivePipe {
-    transform(currentUrl, ...args) {
-        if (!currentUrl || (currentUrl === null || currentUrl === void 0 ? void 0 : currentUrl.length) === 0) {
-            return false;
-        }
-        const nestedRoutes = args[0];
-        const defaultGroupUrl = args[1].replace('/', '');
-        let showWarningForMissingNestedRoutes = false;
-        if (args.length >= 3) {
-            showWarningForMissingNestedRoutes = args[2];
-        }
-        const isPart = isUrlPartOfNavigationGroup(currentUrl, nestedRoutes, defaultGroupUrl);
-        if (showWarningForMissingNestedRoutes) {
-            console.warn(`Nested routes were defined in sds-navigation-group component, however route "${currentUrl}" is not a part of the nested routes list (${nestedRoutes === null || nestedRoutes === void 0 ? void 0 : nestedRoutes.join(', ')}). Maybe you forgot to include it? `);
-        }
-        return isPart;
-    }
-}
-NavigationRouteActivePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NavigationRouteActivePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-NavigationRouteActivePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: NavigationRouteActivePipe, name: "navigationRouteActive" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NavigationRouteActivePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'navigationRouteActive'
-                }]
-        }] });
-
-class SdsUserProfileActionButtonComponent {
-    constructor() {
-        this.text = '';
-        this.actionClick = new EventEmitter();
-    }
-    onActionClick() {
-        this.actionClick.emit();
-    }
-}
-SdsUserProfileActionButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsUserProfileActionButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SdsUserProfileActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsUserProfileActionButtonComponent, selector: "sds-user-profile-action-button", inputs: { text: "text", icon: "icon" }, outputs: { actionClick: "actionClick" }, ngImport: i0, template: "<a \r\n    class=\"d-block text-black sds-navigation-user-profile-action-button sds-hoverable-150 sds-fs-93\"\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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.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: "15.2.10", ngImport: i0, type: SdsUserProfileActionButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sds-user-profile-action-button', template: "<a \r\n    class=\"d-block text-black sds-navigation-user-profile-action-button sds-hoverable-150 sds-fs-93\"\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;
-    }
-    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();
-    }
-}
-SdsNavigationUserProfileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsNavigationUserProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SdsNavigationUserProfileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsNavigationUserProfileComponent, selector: "sds-navigation-user-profile", inputs: { profile: "profile", profileInfo: "profileInfo", showSignOut: "showSignOut", showProfile: "showProfile", signOutText: "signOutText", profileText: "profileText", showNotificationBadge: "showNotificationBadge", newNotificationsText: "newNotificationsText", showOptions: "showOptions" }, outputs: { profileClick: "profileClick", signOutClick: "signOutClick", notificationBadgeClick: "notificationBadgeClick", showOptionsChange: "showOptionsChange" }, 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    \"\r\n    (click)=\"toggleOptions($event)\"\r\n>\r\n    <div \r\n        #popoverTarget\r\n        class=\"position-relative\">\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    <div class=\"sds-flex-column\">\r\n        <span class=\"truncate-two-lines\">\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</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: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.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: i4.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "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", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "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: SdsUserProfileActionButtonComponent, selector: "sds-user-profile-action-button", inputs: ["text", "icon"], outputs: ["actionClick"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsNavigationUserProfileComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sds-navigation-user-profile', 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    \"\r\n    (click)=\"toggleOptions($event)\"\r\n>\r\n    <div \r\n        #popoverTarget\r\n        class=\"position-relative\">\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    <div class=\"sds-flex-column\">\r\n        <span class=\"truncate-two-lines\">\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</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: function () { return []; }, 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 SdsProductHomeComponent {
-    constructor() {
-        this.showAppSwitcher = false;
-        this.appSwitcherSwitchText = '';
-        this.appSwitcherDiscoverText = '';
-        this.allowHeaderClick = false;
-        this.productSwitched = new EventEmitter();
-        this.headerClick = new EventEmitter();
-    }
-    ngOnInit() { }
-    onProductClick(product) {
-        this.productSwitched.emit(product);
-    }
-    onHeaderClick() {
-        if (this.allowHeaderClick) {
-            this.headerClick.emit();
-        }
-    }
-}
-SdsProductHomeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsProductHomeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SdsProductHomeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsProductHomeComponent, selector: "sds-product-home", inputs: { logoUrl: "logoUrl", logoAltText: "logoAltText", moduleTitle: "moduleTitle", showAppSwitcher: "showAppSwitcher", appSwitcherProductCode: "appSwitcherProductCode", appSwitcherUserProductCodes: "appSwitcherUserProductCodes", appSwitcherTenantProducts: "appSwitcherTenantProducts", appSwitcherSwitchText: "appSwitcherSwitchText", appSwitcherDiscoverText: "appSwitcherDiscoverText", allowHeaderClick: "allowHeaderClick" }, outputs: { productSwitched: "productSwitched", headerClick: "headerClick" }, ngImport: i0, template: "<div class=\"product-header pb-2 mb-2 align-items-start\">\r\n    <sds-app-switcher\r\n        *ngIf=\"showAppSwitcher\"\r\n        class=\"app-switcher\"\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=\"ms-2\"\r\n        (click)=\"onHeaderClick()\"\r\n        [class.sds-cursor-pointer]=\"allowHeaderClick\"\r\n        >\r\n        <img \r\n            class=\"product-logo\"\r\n            [src]=\"logoUrl\" \r\n            [alt]=\"logoAltText\"\r\n        >  \r\n        <h6 \r\n            *ngIf=\"moduleTitle\"\r\n            class=\"mt-2\"\r\n        >\r\n            {{moduleTitle}}\r\n        </h6>\r\n    </div>\r\n</div>\r\n", styles: [".product-header{margin-left:.33rem}.product-header .app-switcher,.product-header .product-logo{height:1.5rem}.product-header h6{font-size:.8rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.SdsAppSwitcherComponent, selector: "sds-app-switcher", inputs: ["productCode", "userProductCodes", "tenantProducts", "switchText", "discoverText", "ariaLabel"], outputs: ["productClick"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsProductHomeComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sds-product-home', template: "<div class=\"product-header pb-2 mb-2 align-items-start\">\r\n    <sds-app-switcher\r\n        *ngIf=\"showAppSwitcher\"\r\n        class=\"app-switcher\"\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=\"ms-2\"\r\n        (click)=\"onHeaderClick()\"\r\n        [class.sds-cursor-pointer]=\"allowHeaderClick\"\r\n        >\r\n        <img \r\n            class=\"product-logo\"\r\n            [src]=\"logoUrl\" \r\n            [alt]=\"logoAltText\"\r\n        >  \r\n        <h6 \r\n            *ngIf=\"moduleTitle\"\r\n            class=\"mt-2\"\r\n        >\r\n            {{moduleTitle}}\r\n        </h6>\r\n    </div>\r\n</div>\r\n", styles: [".product-header{margin-left:.33rem}.product-header .app-switcher,.product-header .product-logo{height:1.5rem}.product-header h6{font-size:.8rem}\n"] }]
-        }], ctorParameters: function () { return []; }, 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
-            }] } });
-
-class SdsUserProfileTileComponent {
-    constructor() {
-        this.profile = null;
-        this.emphasizeName = true;
-        this.size = 'medium';
-    }
-}
-SdsUserProfileTileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsUserProfileTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SdsUserProfileTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsUserProfileTileComponent, 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: i2$1.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: "15.2.10", ngImport: i0, type: SdsUserProfileTileComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sds-user-profile-tile', 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('');
-    }
-}
-SdsUserProfileSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsUserProfileSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SdsUserProfileSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsUserProfileSelectorComponent, 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: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "15.2.10", ngImport: i0, type: SdsUserProfileSelectorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sds-user-profile-selector', 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
-            }] } });
-
-// import { NavigationGroupComponent } from './navigation-group/navigation-group.component';
-// import { NavigationRouteLinkComponent } from './navigation-route-link/navigation-route-link.component';
-// import { NavigationSeparatorComponent } from './navigation-separator/navigation-separator.component';
-// import { NavigationHeaderComponent } from './navigation-header/navigation-header.component';
-const components = [
-    SdsNavigationGroupComponent,
-    SdsNavigationRouteLinkComponent,
-    SdsNavigationSeparatorComponent,
-    SdsNavigationHeaderComponent,
-    SdsNavigationContainerComponent,
-    SdsNavigationExternalLinkComponent,
-    SdsNavigationUserProfileComponent,
-    SdsUserProfileSelectorComponent,
-    SdsProductHomeComponent
-];
-class SdsNavigationModule {
-}
-SdsNavigationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsNavigationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SdsNavigationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SdsNavigationModule, declarations: [SdsNavigationGroupComponent,
-        SdsNavigationRouteLinkComponent,
-        SdsNavigationSeparatorComponent,
-        SdsNavigationHeaderComponent,
-        SdsNavigationContainerComponent,
-        SdsNavigationExternalLinkComponent,
-        SdsNavigationUserProfileComponent,
-        SdsUserProfileSelectorComponent,
-        SdsProductHomeComponent, NavigationRouteActivePipe,
-        SdsUserProfileTileComponent,
-        SdsUserProfileActionButtonComponent], imports: [CommonModule,
-        FormsModule,
-        RouterModule,
-        SdsAvatarModule,
-        SdsAppSwitcherModule,
-        FontAwesomeModule,
-        DxPopoverModule,
-        DxScrollViewModule,
-        SdsTooltipModule,
-        A11yModule], exports: [SdsNavigationGroupComponent,
-        SdsNavigationRouteLinkComponent,
-        SdsNavigationSeparatorComponent,
-        SdsNavigationHeaderComponent,
-        SdsNavigationContainerComponent,
-        SdsNavigationExternalLinkComponent,
-        SdsNavigationUserProfileComponent,
-        SdsUserProfileSelectorComponent,
-        SdsProductHomeComponent] });
-SdsNavigationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsNavigationModule, imports: [CommonModule,
-        FormsModule,
-        RouterModule,
-        SdsAvatarModule,
-        SdsAppSwitcherModule,
-        FontAwesomeModule,
-        DxPopoverModule,
-        DxScrollViewModule,
-        SdsTooltipModule,
-        A11yModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsNavigationModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        ...components,
-                        NavigationRouteActivePipe,
-                        SdsUserProfileTileComponent,
-                        SdsUserProfileActionButtonComponent,
-                    ],
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        RouterModule,
-                        SdsAvatarModule,
-                        SdsAppSwitcherModule,
-                        FontAwesomeModule,
-                        DxPopoverModule,
-                        DxScrollViewModule,
-                        SdsTooltipModule,
-                        A11yModule
-                    ],
-                    exports: [
-                        ...components
-                    ]
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { SdsNavigationContainerComponent, SdsNavigationExternalLinkComponent, SdsNavigationGroupComponent, SdsNavigationHeaderComponent, SdsNavigationModule, SdsNavigationRouteLinkComponent, SdsNavigationSeparatorComponent, SdsNavigationUserProfileComponent, SdsProductHomeComponent, SdsUserProfileSelectorComponent };
-//# sourceMappingURL=spicainternational-ngx-sds-components-src-lib-navigation.mjs.map