@ascentgl/ads-ui 20.9.0 → 20.10.0

package/fesm2022/ascentgl-ads-ui.mjs

@@ -18,7 +18,7 @@ import { OverlayModule, OverlayContainer } from '@angular/cdk/overlay';
 import { Subject, asapScheduler, timer, of, Subscription, combineLatest } from 'rxjs';
 import { takeUntil, filter, map, tap, debounce } from 'rxjs/operators';
 import * as i3 from '@angular/platform-browser';
-import * as i3$4 from '@ascentgl/ads-utils';
+import * as i3$5 from '@ascentgl/ads-utils';
 import { DomHelper, AdsGestureModule, ObjectHelper, AdsGestureDirection, ADS_GESTURE_DEFAULT_OPTIONS } from '@ascentgl/ads-utils';
 import * as i2$1 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
@@ -58,7 +58,7 @@ import * as i2$3 from 'ag-grid-angular';
 import { AgGridAngular } from 'ag-grid-angular';
 import * as i4$3 from '@angular/material/menu';
 import { MatMenu, MatMenuTrigger, MatMenuItem, MatMenuModule } from '@angular/material/menu';
-import * as i4$4 from 'angular-split';
+import * as i3$4 from 'angular-split';
 import { SplitComponent, SplitAreaComponent } from 'angular-split';
 import * as i11$1 from '@angular/material/toolbar';
 import { MatToolbar } from '@angular/material/toolbar';
@@ -6561,14 +6561,20 @@ class AdsSideNavBarComponent extends AbstractSideNavBarComponent {
         this.localStorageName = 'side-nav-bar-width';
         /** @ignore */
         this.widthToCollapsed = 70;
+        /** @ignore */
+        this.regularNavItems = computed(() => this.navItems().filter(item => !item.stickToBottom), ...(ngDevMode ? [{ debugName: "regularNavItems" }] : []));
+        /** @ignore */
+        this.bottomNavItems = computed(() => this.navItems().filter(item => item.stickToBottom), ...(ngDevMode ? [{ debugName: "bottomNavItems" }] : []));
+        /** @ignore */
+        this.hasBottomItems = computed(() => this.bottomNavItems().length > 0, ...(ngDevMode ? [{ debugName: "hasBottomItems" }] : []));
         this.registry.register([adsIconSearch]);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AdsSideNavBarComponent, deps: [{ token: i1.AdsIconRegistry }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AdsSideNavBarComponent, isStandalone: false, selector: "ads-side-nav-bar", inputs: { searchTemplate: { classPropertyName: "searchTemplate", publicName: "searchTemplate", isSignal: true, isRequired: false, transformFunction: null }, extraDataTemplate: { classPropertyName: "extraDataTemplate", publicName: "extraDataTemplate", isSignal: true, isRequired: false, transformFunction: null }, navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "splitter", first: true, predicate: ["splitter"], descendants: true }, { propertyName: "sideNavArea", first: true, predicate: ["sideNavArea"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<as-split\n  #splitter\n  [useTransition]=\"true\"\n  unit=\"pixel\"\n  [gutterSize]=\"10\"\n  (gutterDblClick)=\"expandSidebar()\"\n  [gutterDblClickDuration]=\"500\"\n  (dragEnd)=\"dragEnd($event)\"\n>\n  <as-split-area [size]=\"sidebarSize()\" [minSize]=\"50\" [maxSize]=\"maxExpandedWidth()\" #sideNavArea>\n    <div class=\"left-side-content-container\">\n      <div class=\"logo-container\">\n        <a [routerLink]=\"'/'\">\n          <ads-primary-logo [mobileWidth]=\"70\" [isCollapsed]=\"true\" class=\"show-on-collapsed\" />\n          <ads-primary-logo [mobileWidth]=\"70\" [isCollapsed]=\"false\" class=\"hide-on-collapsed\" />\n        </a>\n      </div>\n\n      <div class=\"nav-items-container\">\n        @for (item of navItems(); track $index) {\n          <a\n            [routerLink]=\"item.href\"\n            routerLinkActive=\"active-nav-link\"\n            [routerLinkActiveOptions]=\"{ exact: true }\"\n            class=\"ads-nav-link\"\n          >\n            <div class=\"ads-nav-item-container\">\n              @if (!!item.icon) {\n                <ads-icon [name]=\"item.icon!\" size=\"sm\" theme=\"iconPrimary\" stroke=\"iconPrimary\" />\n              }\n\n              <span class=\"hide-on-collapsed\">{{ item.label }}</span>\n            </div>\n          </a>\n        }\n      </div>\n      <div class=\"bottom-container\" (click)=\"!!searchTemplate() && isCollapsed() ? expandSidebar() : null\">\n        @if (!!searchTemplate()) {\n          <ads-icon name=\"search\" size=\"sm\" theme=\"iconPrimary\" class=\"show-on-collapsed\" />\n          <div class=\"hide-on-collapsed\">\n            <ng-container *ngTemplateOutlet=\"searchTemplate()!\" />\n          </div>\n        }\n\n        @if (!!extraDataTemplate()) {\n          <div class=\"hide-on-collapsed\">\n            <ng-container *ngTemplateOutlet=\"extraDataTemplate()!\" />\n          </div>\n        }\n      </div>\n    </div>\n  </as-split-area>\n\n  <as-split-area>\n    <ng-content></ng-content>\n  </as-split-area>\n</as-split>\n", styles: [".nav-items-container{display:flex;flex-direction:column;border-bottom:1px solid var(--color-light)}.nav-items-container .ads-nav-item-container{display:flex;padding:14px 12px;gap:12px;background-color:var(--color-white);align-items:center;overflow:hidden;white-space:nowrap}.nav-items-container .ads-nav-item-container span{font-weight:400;line-height:20px;color:var(--color-medium);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-decoration:unset;display:inline-block}.nav-items-container .ads-nav-item-container ads-icon{flex-shrink:0}.nav-items-container .ads-nav-item-container:hover span,.nav-items-container .ads-nav-item-container:focus span,.nav-items-container .ads-nav-item-container:active span{color:var(--color-white)}.nav-items-container .ads-nav-item-container:hover ads-icon ::ng-deep svg,.nav-items-container .ads-nav-item-container:focus ads-icon ::ng-deep svg,.nav-items-container .ads-nav-item-container:active ads-icon ::ng-deep svg{stroke:var(--color-white);fill:var(--color-white)!important}.nav-items-container .ads-nav-item-container:hover{background-color:var(--color-secondary-hover)!important}.nav-items-container .ads-nav-item-container:active{background-color:var(--color-secondary-pressed)!important}.nav-items-container .ads-nav-item-container:focus{background-color:var(--color-secondary)!important}as-split-area{background-color:var(--color-white)}.logo-container{padding:16px 12px;border-bottom:1px solid var(--color-light);height:auto}.ads-nav-link.active-nav-link .ads-nav-item-container{background-color:var(--color-secondary)!important}.ads-nav-link.active-nav-link .ads-nav-item-container span{color:var(--color-white)!important}.ads-nav-link.active-nav-link .ads-nav-item-container ads-icon ::ng-deep svg{stroke:var(--color-white)!important;fill:var(--color-white)!important}.ads-nav-link{text-decoration:none}.left-side-content-container{container-type:inline-size;display:flex;flex-direction:column;height:100vh}::ng-deep as-split .as-split-gutter{background-color:var(--color-light-30)}::ng-deep as-split .as-split-gutter:hover,::ng-deep as-split .as-split-gutter:focus{outline:none}::ng-deep as-split .as-split-gutter:hover .as-split-gutter-icon,::ng-deep as-split .as-split-gutter:focus .as-split-gutter-icon{background-color:var(--color-light-80)}::ng-deep as-split .as-split-gutter:active{background-color:var(--color-light)}::ng-deep as-split .as-split-gutter-icon{width:8px;background-color:var(--color-light-30);background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"6\" height=\"11\" viewBox=\"0 0 6 11\" fill=\"none\"><path d=\"M4.7142 2.92855C5.42428 2.92855 5.99991 2.35291 5.99991 1.64283C5.99991 0.932751 5.42428 0.357117 4.7142 0.357117C4.00412 0.357117 3.42848 0.932751 3.42848 1.64283C3.42848 2.35291 4.00412 2.92855 4.7142 2.92855Z\" fill=\"%23041F41\"/><path d=\"M4.7142 6.78566C5.42428 6.78566 5.99991 6.21003 5.99991 5.49995C5.99991 4.78987 5.42428 4.21423 4.7142 4.21423C4.00412 4.21423 3.42848 4.78987 3.42848 5.49995C3.42848 6.21003 4.00412 6.78566 4.7142 6.78566Z\" fill=\"%23041F41\"/><path d=\"M4.7142 10.6428C5.42428 10.6428 5.99991 10.0672 5.99991 9.35713C5.99991 8.64704 5.42428 8.07141 4.7142 8.07141C4.00412 8.07141 3.42848 8.64704 3.42848 9.35713C3.42848 10.0672 4.00412 10.6428 4.7142 10.6428Z\" fill=\"%23041F41\"/><path d=\"M1.28571 2.92855C1.99579 2.92855 2.57143 2.35291 2.57143 1.64283C2.57143 0.932751 1.99579 0.357117 1.28571 0.357117C0.575634 0.357117 0 0.932751 0 1.64283C0 2.35291 0.575634 2.92855 1.28571 2.92855Z\" fill=\"%23041F41\"/><path d=\"M1.28571 6.78566C1.99579 6.78566 2.57143 6.21003 2.57143 5.49995C2.57143 4.78987 1.99579 4.21423 1.28571 4.21423C0.575634 4.21423 0 4.78987 0 5.49995C0 6.21003 0.575634 6.78566 1.28571 6.78566Z\" fill=\"%23041F41\"/><path d=\"M1.28571 10.6428C1.99579 10.6428 2.57143 10.0672 2.57143 9.35713C2.57143 8.64704 1.99579 8.07141 1.28571 8.07141C0.575634 8.07141 0 8.64704 0 9.35713C0 10.0672 0.575634 10.6428 1.28571 10.6428Z\" fill=\"%23041F41\"/></svg>')!important}.bottom-container{padding:16px 12px;flex-grow:1;display:flex;flex-direction:column}@container (max-width: 70px){.bottom-container{flex-grow:unset}.bottom-container:hover{background-color:var(--color-secondary-hover)}.bottom-container:hover ads-icon ::ng-deep svg{stroke:var(--color-white)}.bottom-container:active{background-color:var(--color-secondary-pressed)}.hide-on-collapsed{display:none}.show-on-collapsed{display:contents}}@container (min-width: 71px){.hide-on-collapsed{display:contents}.show-on-collapsed{display:none}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AdsPrimaryLogoComponent, selector: "ads-primary-logo" }, { kind: "component", type: i4$4.SplitComponent, selector: "as-split", inputs: ["gutterSize", "gutterStep", "disabled", "gutterClickDeltaPx", "direction", "dir", "unit", "gutterAriaLabel", "restrictMove", "useTransition", "gutterDblClickDuration"], outputs: ["gutterClick", "gutterDblClick", "dragStart", "dragEnd", "transitionEnd"], exportAs: ["asSplit"] }, { kind: "component", type: i4$4.SplitAreaComponent, selector: "as-split-area", inputs: ["size", "minSize", "maxSize", "lockSize", "visible"], exportAs: ["asSplitArea"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AdsSideNavBarComponent, isStandalone: false, selector: "ads-side-nav-bar", inputs: { searchTemplate: { classPropertyName: "searchTemplate", publicName: "searchTemplate", isSignal: true, isRequired: false, transformFunction: null }, extraDataTemplate: { classPropertyName: "extraDataTemplate", publicName: "extraDataTemplate", isSignal: true, isRequired: false, transformFunction: null }, navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "splitter", first: true, predicate: ["splitter"], descendants: true }, { propertyName: "sideNavArea", first: true, predicate: ["sideNavArea"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<as-split\n  #splitter\n  [useTransition]=\"true\"\n  unit=\"pixel\"\n  [gutterSize]=\"10\"\n  (gutterDblClick)=\"expandSidebar()\"\n  [gutterDblClickDuration]=\"500\"\n  (dragEnd)=\"dragEnd($event)\"\n>\n  <as-split-area [size]=\"sidebarSize()\" [minSize]=\"50\" [maxSize]=\"maxExpandedWidth()\" #sideNavArea>\n    <div class=\"left-side-content-container\">\n      <div class=\"logo-container\">\n        <a [routerLink]=\"'/'\">\n          <ads-primary-logo [mobileWidth]=\"70\" [isCollapsed]=\"true\" class=\"show-on-collapsed\" />\n          <ads-primary-logo [mobileWidth]=\"70\" [isCollapsed]=\"false\" class=\"hide-on-collapsed\" />\n        </a>\n      </div>\n\n      <div class=\"nav-items-wrapper\">\n        <!-- Regular navigation items -->\n        <div class=\"nav-items-container\">\n          @for (item of regularNavItems(); track $index) {\n            <a\n              [routerLink]=\"item.href\"\n              routerLinkActive=\"active-nav-link\"\n              [routerLinkActiveOptions]=\"{ exact: true }\"\n              class=\"ads-nav-link\"\n            >\n              <div class=\"ads-nav-item-container\">\n                @if (!!item.icon) {\n                  <ads-icon [name]=\"item.icon!\" size=\"sm\" theme=\"iconPrimary\" stroke=\"iconPrimary\" />\n                }\n\n                <span class=\"hide-on-collapsed\">{{ item.label }}</span>\n              </div>\n            </a>\n          }\n        </div>\n\n        <!-- Bottom navigation items -->\n        @if (hasBottomItems()) {\n          <div class=\"bottom-nav-section\">\n            <div class=\"nav-items-container bottom-items\">\n              @for (item of bottomNavItems(); track $index) {\n                <a\n                  [routerLink]=\"item.href\"\n                  routerLinkActive=\"active-nav-link\"\n                  [routerLinkActiveOptions]=\"{ exact: true }\"\n                  class=\"ads-nav-link bottom-item\"\n                >\n                  <div class=\"ads-nav-item-container\">\n                    @if (!!item.icon) {\n                      <ads-icon [name]=\"item.icon!\" size=\"sm\" theme=\"iconPrimary\" stroke=\"iconPrimary\" />\n                    }\n\n                    <span class=\"hide-on-collapsed\">{{ item.label }}</span>\n                  </div>\n                </a>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n  </as-split-area>\n\n  <as-split-area>\n    <ng-content></ng-content>\n  </as-split-area>\n</as-split>\n", styles: [".nav-items-wrapper{display:flex;flex-direction:column;height:100%;min-height:0}.nav-items-container{display:flex;flex-direction:column;border-bottom:1px solid var(--color-light)}.nav-items-container .ads-nav-item-container{display:flex;padding:14px 12px;gap:12px;background-color:var(--color-white);align-items:center;overflow:hidden;white-space:nowrap}.nav-items-container .ads-nav-item-container span{font-weight:400;line-height:20px;color:var(--color-medium);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-decoration:unset;display:inline-block}.nav-items-container .ads-nav-item-container ads-icon{flex-shrink:0}.nav-items-container .ads-nav-item-container:hover span,.nav-items-container .ads-nav-item-container:focus span,.nav-items-container .ads-nav-item-container:active span{color:var(--color-white)}.nav-items-container .ads-nav-item-container:hover ads-icon ::ng-deep svg,.nav-items-container .ads-nav-item-container:focus ads-icon ::ng-deep svg,.nav-items-container .ads-nav-item-container:active ads-icon ::ng-deep svg{stroke:var(--color-white);fill:var(--color-white)!important}.nav-items-container .ads-nav-item-container:hover{background-color:var(--color-secondary-hover)!important}.nav-items-container .ads-nav-item-container:active{background-color:var(--color-secondary-pressed)!important}.nav-items-container .ads-nav-item-container:focus{background-color:var(--color-secondary)!important}as-split-area{background-color:var(--color-white)}.logo-container{padding:16px 12px;border-bottom:1px solid var(--color-light);height:auto}.ads-nav-link.active-nav-link .ads-nav-item-container{background-color:var(--color-secondary)!important}.ads-nav-link.active-nav-link .ads-nav-item-container span{color:var(--color-white)!important}.ads-nav-link.active-nav-link .ads-nav-item-container ads-icon ::ng-deep svg{stroke:var(--color-white)!important;fill:var(--color-white)!important}.ads-nav-link{text-decoration:none}.left-side-content-container{container-type:inline-size;display:flex;flex-direction:column;height:100vh}::ng-deep as-split .as-split-gutter{background-color:var(--color-light-30)}::ng-deep as-split .as-split-gutter:hover,::ng-deep as-split .as-split-gutter:focus{outline:none}::ng-deep as-split .as-split-gutter:hover .as-split-gutter-icon,::ng-deep as-split .as-split-gutter:focus .as-split-gutter-icon{background-color:var(--color-light-80)}::ng-deep as-split .as-split-gutter:active{background-color:var(--color-light)}::ng-deep as-split .as-split-gutter-icon{width:8px;background-color:var(--color-light-30);background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"6\" height=\"11\" viewBox=\"0 0 6 11\" fill=\"none\"><path d=\"M4.7142 2.92855C5.42428 2.92855 5.99991 2.35291 5.99991 1.64283C5.99991 0.932751 5.42428 0.357117 4.7142 0.357117C4.00412 0.357117 3.42848 0.932751 3.42848 1.64283C3.42848 2.35291 4.00412 2.92855 4.7142 2.92855Z\" fill=\"%23041F41\"/><path d=\"M4.7142 6.78566C5.42428 6.78566 5.99991 6.21003 5.99991 5.49995C5.99991 4.78987 5.42428 4.21423 4.7142 4.21423C4.00412 4.21423 3.42848 4.78987 3.42848 5.49995C3.42848 6.21003 4.00412 6.78566 4.7142 6.78566Z\" fill=\"%23041F41\"/><path d=\"M4.7142 10.6428C5.42428 10.6428 5.99991 10.0672 5.99991 9.35713C5.99991 8.64704 5.42428 8.07141 4.7142 8.07141C4.00412 8.07141 3.42848 8.64704 3.42848 9.35713C3.42848 10.0672 4.00412 10.6428 4.7142 10.6428Z\" fill=\"%23041F41\"/><path d=\"M1.28571 2.92855C1.99579 2.92855 2.57143 2.35291 2.57143 1.64283C2.57143 0.932751 1.99579 0.357117 1.28571 0.357117C0.575634 0.357117 0 0.932751 0 1.64283C0 2.35291 0.575634 2.92855 1.28571 2.92855Z\" fill=\"%23041F41\"/><path d=\"M1.28571 6.78566C1.99579 6.78566 2.57143 6.21003 2.57143 5.49995C2.57143 4.78987 1.99579 4.21423 1.28571 4.21423C0.575634 4.21423 0 4.78987 0 5.49995C0 6.21003 0.575634 6.78566 1.28571 6.78566Z\" fill=\"%23041F41\"/><path d=\"M1.28571 10.6428C1.99579 10.6428 2.57143 10.0672 2.57143 9.35713C2.57143 8.64704 1.99579 8.07141 1.28571 8.07141C0.575634 8.07141 0 8.64704 0 9.35713C0 10.0672 0.575634 10.6428 1.28571 10.6428Z\" fill=\"%23041F41\"/></svg>')!important}.bottom-container{padding:16px 12px;flex-grow:1;display:flex;flex-direction:column}.bottom-nav-section{margin-top:auto}.bottom-nav-section .nav-items-container{border-bottom:none}@container (max-width: 70px){.bottom-container{flex-grow:unset}.bottom-container:hover{background-color:var(--color-secondary-hover)}.bottom-container:hover ads-icon ::ng-deep svg{stroke:var(--color-white)}.bottom-container:active{background-color:var(--color-secondary-pressed)}.hide-on-collapsed{display:none}.show-on-collapsed{display:contents}}@container (min-width: 71px){.hide-on-collapsed{display:contents}.show-on-collapsed{display:none}}\n"], dependencies: [{ kind: "component", type: AdsPrimaryLogoComponent, selector: "ads-primary-logo" }, { kind: "component", type: i3$4.SplitComponent, selector: "as-split", inputs: ["gutterSize", "gutterStep", "disabled", "gutterClickDeltaPx", "direction", "dir", "unit", "gutterAriaLabel", "restrictMove", "useTransition", "gutterDblClickDuration"], outputs: ["gutterClick", "gutterDblClick", "dragStart", "dragEnd", "transitionEnd"], exportAs: ["asSplit"] }, { kind: "component", type: i3$4.SplitAreaComponent, selector: "as-split-area", inputs: ["size", "minSize", "maxSize", "lockSize", "visible"], exportAs: ["asSplitArea"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AdsSideNavBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ads-side-nav-bar', standalone: false, template: "<as-split\n  #splitter\n  [useTransition]=\"true\"\n  unit=\"pixel\"\n  [gutterSize]=\"10\"\n  (gutterDblClick)=\"expandSidebar()\"\n  [gutterDblClickDuration]=\"500\"\n  (dragEnd)=\"dragEnd($event)\"\n>\n  <as-split-area [size]=\"sidebarSize()\" [minSize]=\"50\" [maxSize]=\"maxExpandedWidth()\" #sideNavArea>\n    <div class=\"left-side-content-container\">\n      <div class=\"logo-container\">\n        <a [routerLink]=\"'/'\">\n          <ads-primary-logo [mobileWidth]=\"70\" [isCollapsed]=\"true\" class=\"show-on-collapsed\" />\n          <ads-primary-logo [mobileWidth]=\"70\" [isCollapsed]=\"false\" class=\"hide-on-collapsed\" />\n        </a>\n      </div>\n\n      <div class=\"nav-items-container\">\n        @for (item of navItems(); track $index) {\n          <a\n            [routerLink]=\"item.href\"\n            routerLinkActive=\"active-nav-link\"\n            [routerLinkActiveOptions]=\"{ exact: true }\"\n            class=\"ads-nav-link\"\n          >\n            <div class=\"ads-nav-item-container\">\n              @if (!!item.icon) {\n                <ads-icon [name]=\"item.icon!\" size=\"sm\" theme=\"iconPrimary\" stroke=\"iconPrimary\" />\n              }\n\n              <span class=\"hide-on-collapsed\">{{ item.label }}</span>\n            </div>\n          </a>\n        }\n      </div>\n      <div class=\"bottom-container\" (click)=\"!!searchTemplate() && isCollapsed() ? expandSidebar() : null\">\n        @if (!!searchTemplate()) {\n          <ads-icon name=\"search\" size=\"sm\" theme=\"iconPrimary\" class=\"show-on-collapsed\" />\n          <div class=\"hide-on-collapsed\">\n            <ng-container *ngTemplateOutlet=\"searchTemplate()!\" />\n          </div>\n        }\n\n        @if (!!extraDataTemplate()) {\n          <div class=\"hide-on-collapsed\">\n            <ng-container *ngTemplateOutlet=\"extraDataTemplate()!\" />\n          </div>\n        }\n      </div>\n    </div>\n  </as-split-area>\n\n  <as-split-area>\n    <ng-content></ng-content>\n  </as-split-area>\n</as-split>\n", styles: [".nav-items-container{display:flex;flex-direction:column;border-bottom:1px solid var(--color-light)}.nav-items-container .ads-nav-item-container{display:flex;padding:14px 12px;gap:12px;background-color:var(--color-white);align-items:center;overflow:hidden;white-space:nowrap}.nav-items-container .ads-nav-item-container span{font-weight:400;line-height:20px;color:var(--color-medium);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-decoration:unset;display:inline-block}.nav-items-container .ads-nav-item-container ads-icon{flex-shrink:0}.nav-items-container .ads-nav-item-container:hover span,.nav-items-container .ads-nav-item-container:focus span,.nav-items-container .ads-nav-item-container:active span{color:var(--color-white)}.nav-items-container .ads-nav-item-container:hover ads-icon ::ng-deep svg,.nav-items-container .ads-nav-item-container:focus ads-icon ::ng-deep svg,.nav-items-container .ads-nav-item-container:active ads-icon ::ng-deep svg{stroke:var(--color-white);fill:var(--color-white)!important}.nav-items-container .ads-nav-item-container:hover{background-color:var(--color-secondary-hover)!important}.nav-items-container .ads-nav-item-container:active{background-color:var(--color-secondary-pressed)!important}.nav-items-container .ads-nav-item-container:focus{background-color:var(--color-secondary)!important}as-split-area{background-color:var(--color-white)}.logo-container{padding:16px 12px;border-bottom:1px solid var(--color-light);height:auto}.ads-nav-link.active-nav-link .ads-nav-item-container{background-color:var(--color-secondary)!important}.ads-nav-link.active-nav-link .ads-nav-item-container span{color:var(--color-white)!important}.ads-nav-link.active-nav-link .ads-nav-item-container ads-icon ::ng-deep svg{stroke:var(--color-white)!important;fill:var(--color-white)!important}.ads-nav-link{text-decoration:none}.left-side-content-container{container-type:inline-size;display:flex;flex-direction:column;height:100vh}::ng-deep as-split .as-split-gutter{background-color:var(--color-light-30)}::ng-deep as-split .as-split-gutter:hover,::ng-deep as-split .as-split-gutter:focus{outline:none}::ng-deep as-split .as-split-gutter:hover .as-split-gutter-icon,::ng-deep as-split .as-split-gutter:focus .as-split-gutter-icon{background-color:var(--color-light-80)}::ng-deep as-split .as-split-gutter:active{background-color:var(--color-light)}::ng-deep as-split .as-split-gutter-icon{width:8px;background-color:var(--color-light-30);background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"6\" height=\"11\" viewBox=\"0 0 6 11\" fill=\"none\"><path d=\"M4.7142 2.92855C5.42428 2.92855 5.99991 2.35291 5.99991 1.64283C5.99991 0.932751 5.42428 0.357117 4.7142 0.357117C4.00412 0.357117 3.42848 0.932751 3.42848 1.64283C3.42848 2.35291 4.00412 2.92855 4.7142 2.92855Z\" fill=\"%23041F41\"/><path d=\"M4.7142 6.78566C5.42428 6.78566 5.99991 6.21003 5.99991 5.49995C5.99991 4.78987 5.42428 4.21423 4.7142 4.21423C4.00412 4.21423 3.42848 4.78987 3.42848 5.49995C3.42848 6.21003 4.00412 6.78566 4.7142 6.78566Z\" fill=\"%23041F41\"/><path d=\"M4.7142 10.6428C5.42428 10.6428 5.99991 10.0672 5.99991 9.35713C5.99991 8.64704 5.42428 8.07141 4.7142 8.07141C4.00412 8.07141 3.42848 8.64704 3.42848 9.35713C3.42848 10.0672 4.00412 10.6428 4.7142 10.6428Z\" fill=\"%23041F41\"/><path d=\"M1.28571 2.92855C1.99579 2.92855 2.57143 2.35291 2.57143 1.64283C2.57143 0.932751 1.99579 0.357117 1.28571 0.357117C0.575634 0.357117 0 0.932751 0 1.64283C0 2.35291 0.575634 2.92855 1.28571 2.92855Z\" fill=\"%23041F41\"/><path d=\"M1.28571 6.78566C1.99579 6.78566 2.57143 6.21003 2.57143 5.49995C2.57143 4.78987 1.99579 4.21423 1.28571 4.21423C0.575634 4.21423 0 4.78987 0 5.49995C0 6.21003 0.575634 6.78566 1.28571 6.78566Z\" fill=\"%23041F41\"/><path d=\"M1.28571 10.6428C1.99579 10.6428 2.57143 10.0672 2.57143 9.35713C2.57143 8.64704 1.99579 8.07141 1.28571 8.07141C0.575634 8.07141 0 8.64704 0 9.35713C0 10.0672 0.575634 10.6428 1.28571 10.6428Z\" fill=\"%23041F41\"/></svg>')!important}.bottom-container{padding:16px 12px;flex-grow:1;display:flex;flex-direction:column}@container (max-width: 70px){.bottom-container{flex-grow:unset}.bottom-container:hover{background-color:var(--color-secondary-hover)}.bottom-container:hover ads-icon ::ng-deep svg{stroke:var(--color-white)}.bottom-container:active{background-color:var(--color-secondary-pressed)}.hide-on-collapsed{display:none}.show-on-collapsed{display:contents}}@container (min-width: 71px){.hide-on-collapsed{display:contents}.show-on-collapsed{display:none}}\n"] }]
+            args: [{ selector: 'ads-side-nav-bar', standalone: false, template: "<as-split\n  #splitter\n  [useTransition]=\"true\"\n  unit=\"pixel\"\n  [gutterSize]=\"10\"\n  (gutterDblClick)=\"expandSidebar()\"\n  [gutterDblClickDuration]=\"500\"\n  (dragEnd)=\"dragEnd($event)\"\n>\n  <as-split-area [size]=\"sidebarSize()\" [minSize]=\"50\" [maxSize]=\"maxExpandedWidth()\" #sideNavArea>\n    <div class=\"left-side-content-container\">\n      <div class=\"logo-container\">\n        <a [routerLink]=\"'/'\">\n          <ads-primary-logo [mobileWidth]=\"70\" [isCollapsed]=\"true\" class=\"show-on-collapsed\" />\n          <ads-primary-logo [mobileWidth]=\"70\" [isCollapsed]=\"false\" class=\"hide-on-collapsed\" />\n        </a>\n      </div>\n\n      <div class=\"nav-items-wrapper\">\n        <!-- Regular navigation items -->\n        <div class=\"nav-items-container\">\n          @for (item of regularNavItems(); track $index) {\n            <a\n              [routerLink]=\"item.href\"\n              routerLinkActive=\"active-nav-link\"\n              [routerLinkActiveOptions]=\"{ exact: true }\"\n              class=\"ads-nav-link\"\n            >\n              <div class=\"ads-nav-item-container\">\n                @if (!!item.icon) {\n                  <ads-icon [name]=\"item.icon!\" size=\"sm\" theme=\"iconPrimary\" stroke=\"iconPrimary\" />\n                }\n\n                <span class=\"hide-on-collapsed\">{{ item.label }}</span>\n              </div>\n            </a>\n          }\n        </div>\n\n        <!-- Bottom navigation items -->\n        @if (hasBottomItems()) {\n          <div class=\"bottom-nav-section\">\n            <div class=\"nav-items-container bottom-items\">\n              @for (item of bottomNavItems(); track $index) {\n                <a\n                  [routerLink]=\"item.href\"\n                  routerLinkActive=\"active-nav-link\"\n                  [routerLinkActiveOptions]=\"{ exact: true }\"\n                  class=\"ads-nav-link bottom-item\"\n                >\n                  <div class=\"ads-nav-item-container\">\n                    @if (!!item.icon) {\n                      <ads-icon [name]=\"item.icon!\" size=\"sm\" theme=\"iconPrimary\" stroke=\"iconPrimary\" />\n                    }\n\n                    <span class=\"hide-on-collapsed\">{{ item.label }}</span>\n                  </div>\n                </a>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n  </as-split-area>\n\n  <as-split-area>\n    <ng-content></ng-content>\n  </as-split-area>\n</as-split>\n", styles: [".nav-items-wrapper{display:flex;flex-direction:column;height:100%;min-height:0}.nav-items-container{display:flex;flex-direction:column;border-bottom:1px solid var(--color-light)}.nav-items-container .ads-nav-item-container{display:flex;padding:14px 12px;gap:12px;background-color:var(--color-white);align-items:center;overflow:hidden;white-space:nowrap}.nav-items-container .ads-nav-item-container span{font-weight:400;line-height:20px;color:var(--color-medium);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-decoration:unset;display:inline-block}.nav-items-container .ads-nav-item-container ads-icon{flex-shrink:0}.nav-items-container .ads-nav-item-container:hover span,.nav-items-container .ads-nav-item-container:focus span,.nav-items-container .ads-nav-item-container:active span{color:var(--color-white)}.nav-items-container .ads-nav-item-container:hover ads-icon ::ng-deep svg,.nav-items-container .ads-nav-item-container:focus ads-icon ::ng-deep svg,.nav-items-container .ads-nav-item-container:active ads-icon ::ng-deep svg{stroke:var(--color-white);fill:var(--color-white)!important}.nav-items-container .ads-nav-item-container:hover{background-color:var(--color-secondary-hover)!important}.nav-items-container .ads-nav-item-container:active{background-color:var(--color-secondary-pressed)!important}.nav-items-container .ads-nav-item-container:focus{background-color:var(--color-secondary)!important}as-split-area{background-color:var(--color-white)}.logo-container{padding:16px 12px;border-bottom:1px solid var(--color-light);height:auto}.ads-nav-link.active-nav-link .ads-nav-item-container{background-color:var(--color-secondary)!important}.ads-nav-link.active-nav-link .ads-nav-item-container span{color:var(--color-white)!important}.ads-nav-link.active-nav-link .ads-nav-item-container ads-icon ::ng-deep svg{stroke:var(--color-white)!important;fill:var(--color-white)!important}.ads-nav-link{text-decoration:none}.left-side-content-container{container-type:inline-size;display:flex;flex-direction:column;height:100vh}::ng-deep as-split .as-split-gutter{background-color:var(--color-light-30)}::ng-deep as-split .as-split-gutter:hover,::ng-deep as-split .as-split-gutter:focus{outline:none}::ng-deep as-split .as-split-gutter:hover .as-split-gutter-icon,::ng-deep as-split .as-split-gutter:focus .as-split-gutter-icon{background-color:var(--color-light-80)}::ng-deep as-split .as-split-gutter:active{background-color:var(--color-light)}::ng-deep as-split .as-split-gutter-icon{width:8px;background-color:var(--color-light-30);background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"6\" height=\"11\" viewBox=\"0 0 6 11\" fill=\"none\"><path d=\"M4.7142 2.92855C5.42428 2.92855 5.99991 2.35291 5.99991 1.64283C5.99991 0.932751 5.42428 0.357117 4.7142 0.357117C4.00412 0.357117 3.42848 0.932751 3.42848 1.64283C3.42848 2.35291 4.00412 2.92855 4.7142 2.92855Z\" fill=\"%23041F41\"/><path d=\"M4.7142 6.78566C5.42428 6.78566 5.99991 6.21003 5.99991 5.49995C5.99991 4.78987 5.42428 4.21423 4.7142 4.21423C4.00412 4.21423 3.42848 4.78987 3.42848 5.49995C3.42848 6.21003 4.00412 6.78566 4.7142 6.78566Z\" fill=\"%23041F41\"/><path d=\"M4.7142 10.6428C5.42428 10.6428 5.99991 10.0672 5.99991 9.35713C5.99991 8.64704 5.42428 8.07141 4.7142 8.07141C4.00412 8.07141 3.42848 8.64704 3.42848 9.35713C3.42848 10.0672 4.00412 10.6428 4.7142 10.6428Z\" fill=\"%23041F41\"/><path d=\"M1.28571 2.92855C1.99579 2.92855 2.57143 2.35291 2.57143 1.64283C2.57143 0.932751 1.99579 0.357117 1.28571 0.357117C0.575634 0.357117 0 0.932751 0 1.64283C0 2.35291 0.575634 2.92855 1.28571 2.92855Z\" fill=\"%23041F41\"/><path d=\"M1.28571 6.78566C1.99579 6.78566 2.57143 6.21003 2.57143 5.49995C2.57143 4.78987 1.99579 4.21423 1.28571 4.21423C0.575634 4.21423 0 4.78987 0 5.49995C0 6.21003 0.575634 6.78566 1.28571 6.78566Z\" fill=\"%23041F41\"/><path d=\"M1.28571 10.6428C1.99579 10.6428 2.57143 10.0672 2.57143 9.35713C2.57143 8.64704 1.99579 8.07141 1.28571 8.07141C0.575634 8.07141 0 8.64704 0 9.35713C0 10.0672 0.575634 10.6428 1.28571 10.6428Z\" fill=\"%23041F41\"/></svg>')!important}.bottom-container{padding:16px 12px;flex-grow:1;display:flex;flex-direction:column}.bottom-nav-section{margin-top:auto}.bottom-nav-section .nav-items-container{border-bottom:none}@container (max-width: 70px){.bottom-container{flex-grow:unset}.bottom-container:hover{background-color:var(--color-secondary-hover)}.bottom-container:hover ads-icon ::ng-deep svg{stroke:var(--color-white)}.bottom-container:active{background-color:var(--color-secondary-pressed)}.hide-on-collapsed{display:none}.show-on-collapsed{display:contents}}@container (min-width: 71px){.hide-on-collapsed{display:contents}.show-on-collapsed{display:none}}\n"] }]
         }], ctorParameters: () => [{ type: i1.AdsIconRegistry }], propDecorators: { splitter: [{
                 type: ViewChild,
                 args: ['splitter']
@@ -6586,12 +6592,14 @@ class AdsSideNavBarModule {
             RouterOutlet,
             RouterLink,
             RouterLinkActive,
-            AdsIconModule], exports: [AdsSideNavBarComponent] }); }
+            AdsIconModule,
+            AdsDividerModule], exports: [AdsSideNavBarComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AdsSideNavBarModule, imports: [CommonModule,
             AdsPrimaryLogoModule,
             SplitComponent,
             SplitAreaComponent,
-            AdsIconModule] }); }
+            AdsIconModule,
+            AdsDividerModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AdsSideNavBarModule, decorators: [{
             type: NgModule,
@@ -6605,6 +6613,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                         RouterLink,
                         RouterLinkActive,
                         AdsIconModule,
+                        AdsDividerModule,
                     ],
                     exports: [AdsSideNavBarComponent],
                     declarations: [AdsSideNavBarComponent],
@@ -6679,11 +6688,11 @@ class AdsScmsSideNavBarComponent extends AbstractSideNavBarComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AdsScmsSideNavBarComponent, deps: [{ token: i1$2.Router }, { token: i1.AdsIconRegistry }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AdsScmsSideNavBarComponent, isStandalone: false, selector: "ads-scms-side-nav-bar", inputs: { navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, breadcrumbs: { classPropertyName: "breadcrumbs", publicName: "breadcrumbs", isSignal: true, isRequired: false, transformFunction: null }, showBreadcrumbs: { classPropertyName: "showBreadcrumbs", publicName: "showBreadcrumbs", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "checkScreenWidth($event)" } }, viewQueries: [{ propertyName: "accordion", first: true, predicate: MatAccordion, descendants: true, isSignal: true }, { propertyName: "splitter", first: true, predicate: ["splitter"], descendants: true }, { propertyName: "sideNavArea", first: true, predicate: ["sideNavArea"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "@if (!isTablet()) {\n  <as-split\n    #splitter\n    [useTransition]=\"true\"\n    unit=\"pixel\"\n    [gutterSize]=\"10\"\n    (gutterDblClick)=\"expandSidebar()\"\n    [gutterDblClickDuration]=\"500\"\n    (dragEnd)=\"dragEnd($event)\"\n  >\n    <as-split-area [size]=\"sidebarSize()\" [minSize]=\"50\" [maxSize]=\"maxExpandedWidth()\" #sideNavArea>\n      <div class=\"navigation-menu-content-container regular-menu-content-container\">\n        <div class=\"logo-container\">\n          <a [routerLink]=\"'/'\">\n            <ads-ascent-logo size=\"small\" [mobileWidth]=\"70\" [isCollapsed]=\"isCollapsed()\" />\n          </a>\n        </div>\n\n        <div class=\"nav-container\">\n          <ng-container *ngTemplateOutlet=\"matAccordion\" />\n        </div>\n      </div>\n    </as-split-area>\n\n    <as-split-area class=\"split-area-content\">\n      @if (showBreadcrumbs()) {\n        <div class=\"breadcrumbs-container\">\n          <ads-breadcrumb [breadcrumbs]=\"breadcrumbs()\" />\n        </div>\n      }\n      <ng-container *ngTemplateOutlet=\"router\" />\n    </as-split-area>\n  </as-split>\n} @else {\n  <mat-toolbar [hidden]=\"!isTablet()\" class=\"ads-toolbar\">\n    <button mat-icon-button #menuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu\">\n      <ads-icon [name]=\"menuTrigger.menuOpen ? 'cross' : 'hamburger_menu'\" theme=\"secondary\" stroke=\"secondary\" size=\"sm\" />\n    </button>\n  </mat-toolbar>\n\n  <mat-menu #menu=\"matMenu\">\n    <div class=\"navigation-menu-content-container\">\n      <div class=\"burger-logo-container\">\n        <a [routerLink]=\"'/'\">\n          <ads-ascent-logo size=\"small\" [isCollapsed]=\"false\" [mobileWidth]=\"70\" />\n        </a>\n      </div>\n\n      <ng-container *ngTemplateOutlet=\"matAccordion\" />\n    </div>\n  </mat-menu>\n  <div class=\"mobile-wrapper\">\n    @if (showBreadcrumbs()) {\n      <div class=\"breadcrumbs-container\" [class.is-mobile]=\"isMobile()\" >\n        <ads-breadcrumb [breadcrumbs]=\"breadcrumbs()\" />\n      </div>\n    }\n    <ng-container *ngTemplateOutlet=\"router\" />\n  </div>\n\n}\n\n<ng-template #router>\n  <ng-content></ng-content>\n</ng-template>\n\n\n<ng-template #matAccordion>\n  <div class=\"nav-items-wrapper\">\n    <!-- Regular navigation items -->\n    <mat-accordion class=\"nav-items-container regular-items\">\n      @for (item of regularNavItems(); track $index) {\n        @if (item.subItems?.length) {\n          <mat-expansion-panel\n            #panel\n            [ngClass]=\"{\n              'active-expansion-panel': hasActiveLink(item),\n              'panel-expanded': panel.expanded,\n            }\"\n          >\n            <mat-expansion-panel-header\n              (click)=\"panel.expanded && isCollapsed() && expandSidebar(); $event.stopPropagation()\"\n              (keydown.enter)=\"panel.expanded && isCollapsed() && expandSidebar()\"\n            >\n              <mat-panel-title>\n                <ng-container *ngTemplateOutlet=\"itemTitle; context: { data: item }\" />\n              </mat-panel-title>\n              <mat-panel-description>\n                @if (panel.expanded) {\n                  <ads-icon size=\"xs\" name=\"chevron_up\" theme=\"iconPrimary\" />\n                } @else {\n                  <ads-icon size=\"xs\" name=\"chevron_down\" theme=\"iconPrimary\" />\n                }\n              </mat-panel-description>\n            </mat-expansion-panel-header>\n            @for (subItem of item.subItems; track $index) {\n              <ng-container *ngTemplateOutlet=\"navItem; context: { navItem: subItem, class: '' }\" />\n            }\n          </mat-expansion-panel>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"navItem; context: { navItem: item, class: 'main-item' }\" />\n        }\n        @if (item?.showDividerAfterItem) {\n          <ads-divider />\n        }\n      }\n    </mat-accordion>\n\n    <!-- Bottom navigation items -->\n    @if (hasBottomItems()) {\n      <div class=\"bottom-nav-section\">\n        <ads-divider />\n        <mat-accordion class=\"nav-items-container bottom-items\">\n          @for (item of bottomNavItems(); track $index) {\n            @if (item.subItems?.length) {\n              <mat-expansion-panel\n                #panel\n                [ngClass]=\"{\n                  'active-expansion-panel': hasActiveLink(item),\n                  'panel-expanded': panel.expanded,\n                }\"\n              >\n                <mat-expansion-panel-header\n                  (click)=\"panel.expanded && isCollapsed() && expandSidebar(); $event.stopPropagation()\"\n                  (keydown.enter)=\"panel.expanded && isCollapsed() && expandSidebar()\"\n                >\n                  <mat-panel-title>\n                    <ng-container *ngTemplateOutlet=\"itemTitle; context: { data: item }\" />\n                  </mat-panel-title>\n                  <mat-panel-description>\n                    @if (panel.expanded) {\n                      <ads-icon size=\"xs\" name=\"chevron_up\" theme=\"iconPrimary\" />\n                    } @else {\n                      <ads-icon size=\"xs\" name=\"chevron_down\" theme=\"iconPrimary\" />\n                    }\n                  </mat-panel-description>\n                </mat-expansion-panel-header>\n                @for (subItem of item.subItems; track $index) {\n                  <ng-container *ngTemplateOutlet=\"navItem; context: { navItem: subItem, class: '' }\" />\n                }\n              </mat-expansion-panel>\n            } @else {\n              <ng-container *ngTemplateOutlet=\"navItem; context: { navItem: item, class: 'main-item bottom-item' }\" />\n            }\n            @if (item?.showDividerAfterItem) {\n              <ads-divider />\n            }\n          }\n        </mat-accordion>\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #navItem let-item=\"navItem\" let-className=\"class\">\n  <a\n    [routerLink]=\"item.href\"\n    class=\"ads-nav-link\"\n    [ngClass]=\"{\n      className,\n      'active-nav-link': hasActiveSubLink(item),\n    }\"\n  >\n    <ng-container *ngTemplateOutlet=\"itemTitle; context: { data: item }\" />\n  </a>\n</ng-template>\n\n<ng-template #itemTitle let-item=\"data\">\n  <div class=\"ads-nav-item-container\" [matTooltip]=\"item.label\" [matTooltipDisabled]=\"!isCollapsed() || isTablet()\">\n    @if (!!item.icon) {\n      <ads-icon [name]=\"item.icon!\" size=\"sm\" theme=\"iconPrimary\" stroke=\"iconPrimary\" />\n    }\n    @if (!isCollapsed() || isTablet()) {\n      <span>{{ item.label }}</span>\n    }\n  </div>\n</ng-template>\n", styles: [".mat-expansion-panel{--mat-expansion-container-shape: 5px;--mat-expansion-container-background-color: var(--color-white);--mat-expansion-container-text-color: var(--color-medium);--mat-expansion-container-text-size: font-size(text-base);box-shadow:none!important;border:1px solid var(--color-light)}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header{--mat-expansion-header-collapsed-state-height: unset;min-height:24px;height:auto;padding:16px}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header.mat-expanded{padding-bottom:8px}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header mat-panel-title{--mat-expansion-header-text-color: var(--color-dark);font-size:1.25rem;line-height:26px;font-weight:600;flex-basis:auto}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header mat-panel-description{margin:0;justify-content:end;flex-basis:auto}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header .mat-expansion-indicator{display:none}.mat-expansion-panel ::ng-deep .mat-expansion-panel-content .mat-expansion-panel-body{--mat-expansion-container-text-size: font-size(text-base);line-height:21px;padding:0 16px 16px}.mat-expansion-panel .mat-expansion-panel-header[aria-disabled=true]{background-color:var(--color-muted)}.mat-expansion-panel .mat-expansion-panel-header[aria-disabled=true] .mat-expansion-panel-header-title{color:var(--color-medium)}\n", ".nav-items-container{display:flex;flex-direction:column;border-bottom:1px solid var(--color-light)}.nav-items-container .ads-nav-item-container{display:flex;padding:14px 12px;gap:12px;background-color:var(--color-white);align-items:center;overflow:hidden;white-space:nowrap}.nav-items-container .ads-nav-item-container span{font-weight:400;line-height:20px;color:var(--color-medium);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-decoration:unset;display:inline-block}.nav-items-container .ads-nav-item-container ads-icon{flex-shrink:0}.nav-items-container .ads-nav-item-container:hover span,.nav-items-container .ads-nav-item-container:focus span,.nav-items-container .ads-nav-item-container:active span{color:var(--color-white)}.nav-items-container .ads-nav-item-container:hover ads-icon ::ng-deep svg,.nav-items-container .ads-nav-item-container:focus ads-icon ::ng-deep svg,.nav-items-container .ads-nav-item-container:active ads-icon ::ng-deep svg{stroke:var(--color-white);fill:var(--color-white)!important}.nav-items-container .ads-nav-item-container:hover{background-color:var(--color-secondary-hover)!important}.nav-items-container .ads-nav-item-container:active{background-color:var(--color-secondary-pressed)!important}.nav-items-container .ads-nav-item-container:focus{background-color:var(--color-secondary)!important}as-split-area{background-color:var(--color-white)}.logo-container{padding:16px 12px;border-bottom:1px solid var(--color-light);height:auto}.ads-nav-link.active-nav-link .ads-nav-item-container{background-color:var(--color-secondary)!important}.ads-nav-link.active-nav-link .ads-nav-item-container span{color:var(--color-white)!important}.ads-nav-link.active-nav-link .ads-nav-item-container ads-icon ::ng-deep svg{stroke:var(--color-white)!important;fill:var(--color-white)!important}.ads-nav-link{text-decoration:none}.left-side-content-container{container-type:inline-size;display:flex;flex-direction:column;height:100vh}::ng-deep as-split .as-split-gutter{background-color:var(--color-light-30)}::ng-deep as-split .as-split-gutter:hover,::ng-deep as-split .as-split-gutter:focus{outline:none}::ng-deep as-split .as-split-gutter:hover .as-split-gutter-icon,::ng-deep as-split .as-split-gutter:focus .as-split-gutter-icon{background-color:var(--color-light-80)}::ng-deep as-split .as-split-gutter:active{background-color:var(--color-light)}::ng-deep as-split .as-split-gutter-icon{width:8px;background-color:var(--color-light-30);background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"6\" height=\"11\" viewBox=\"0 0 6 11\" fill=\"none\"><path d=\"M4.7142 2.92855C5.42428 2.92855 5.99991 2.35291 5.99991 1.64283C5.99991 0.932751 5.42428 0.357117 4.7142 0.357117C4.00412 0.357117 3.42848 0.932751 3.42848 1.64283C3.42848 2.35291 4.00412 2.92855 4.7142 2.92855Z\" fill=\"%23041F41\"/><path d=\"M4.7142 6.78566C5.42428 6.78566 5.99991 6.21003 5.99991 5.49995C5.99991 4.78987 5.42428 4.21423 4.7142 4.21423C4.00412 4.21423 3.42848 4.78987 3.42848 5.49995C3.42848 6.21003 4.00412 6.78566 4.7142 6.78566Z\" fill=\"%23041F41\"/><path d=\"M4.7142 10.6428C5.42428 10.6428 5.99991 10.0672 5.99991 9.35713C5.99991 8.64704 5.42428 8.07141 4.7142 8.07141C4.00412 8.07141 3.42848 8.64704 3.42848 9.35713C3.42848 10.0672 4.00412 10.6428 4.7142 10.6428Z\" fill=\"%23041F41\"/><path d=\"M1.28571 2.92855C1.99579 2.92855 2.57143 2.35291 2.57143 1.64283C2.57143 0.932751 1.99579 0.357117 1.28571 0.357117C0.575634 0.357117 0 0.932751 0 1.64283C0 2.35291 0.575634 2.92855 1.28571 2.92855Z\" fill=\"%23041F41\"/><path d=\"M1.28571 6.78566C1.99579 6.78566 2.57143 6.21003 2.57143 5.49995C2.57143 4.78987 1.99579 4.21423 1.28571 4.21423C0.575634 4.21423 0 4.78987 0 5.49995C0 6.21003 0.575634 6.78566 1.28571 6.78566Z\" fill=\"%23041F41\"/><path d=\"M1.28571 10.6428C1.99579 10.6428 2.57143 10.0672 2.57143 9.35713C2.57143 8.64704 1.99579 8.07141 1.28571 8.07141C0.575634 8.07141 0 8.64704 0 9.35713C0 10.0672 0.575634 10.6428 1.28571 10.6428Z\" fill=\"%23041F41\"/></svg>')!important}.bottom-container{padding:16px 12px;flex-grow:1;display:flex;flex-direction:column}@container (max-width: 70px){.bottom-container{flex-grow:unset}.bottom-container:hover{background-color:var(--color-secondary-hover)}.bottom-container:hover ads-icon ::ng-deep svg{stroke:var(--color-white)}.bottom-container:active{background-color:var(--color-secondary-pressed)}.hide-on-collapsed{display:none}.show-on-collapsed{display:contents}}@container (min-width: 71px){.hide-on-collapsed{display:contents}.show-on-collapsed{display:none}}\n", ".nav-container{display:flex;flex-direction:column;height:calc(100vh - 64px);overflow-y:auto}.nav-items-wrapper{display:flex;flex-direction:column;height:100%;min-height:0}.nav-items-container{border-bottom:none}.bottom-nav-section{margin-top:auto}.nav-items-container>ads-divider:last-of-type{margin-top:auto}::ng-deep .navigation-menu-content-container .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header{background-color:var(--color-secondary)!important}::ng-deep .navigation-menu-content-container .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header .ads-nav-item-container{background-color:var(--color-secondary)!important}::ng-deep .navigation-menu-content-container .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header .ads-nav-item-container span{color:var(--color-white)!important}::ng-deep .navigation-menu-content-container .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header .ads-nav-item-container ads-icon ::ng-deep svg{stroke:var(--color-white)!important;fill:var(--color-white)!important}::ng-deep .navigation-menu-content-container .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header mat-panel-description ads-icon{fill:var(--color-white)!important}::ng-deep .navigation-menu-content-container .panel-expanded mat-expansion-panel_header,::ng-deep .navigation-menu-content-container .panel-expanded .ads-nav-item-container{background-color:var(--color-secondary-10)!important}::ng-deep .navigation-menu-content-container .panel-expanded mat-panel-title .ads-nav-item-container{background-color:transparent!important}::ng-deep .navigation-menu-content-container .panel-expanded mat-panel-title .ads-nav-item-container span{font-weight:600!important}::ng-deep .navigation-menu-content-container mat-expansion-panel{border:none!important;border-radius:unset!important;margin:unset!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-body{padding:0!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-body a .ads-nav-item-container{padding-left:48px!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header{padding:6px 12px 6px 0!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header mat-panel-description ads-icon{width:16px!important;height:auto!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header mat-panel-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;min-width:50px}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header mat-panel-title .ads-nav-item-container span{font-size:1rem}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:hover,::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:focus{background-color:var(--color-secondary-hover)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container,::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:focus .ads-nav-item-container{background-color:var(--color-secondary-hover)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container ads-icon ::ng-deep svg,::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:focus .ads-nav-item-container ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container span,::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:focus .ads-nav-item-container span{color:var(--color-white)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:hover mat-panel-description ads-icon,::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:focus mat-panel-description ads-icon{fill:var(--color-white)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:active{background-color:var(--color-secondary-pressed)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:active .ads-nav-item-container{background-color:var(--color-secondary-pressed)!important}::ng-deep .navigation-menu-content-container .main-item .ads-nav-item-container{padding:20px 12px!important}::ng-deep .navigation-menu-content-container .main-item .ads-nav-item-container .hide-on-collapsed{font-size:1rem}::ng-deep .navigation-menu-content-container .ads-nav-link:focus{background-color:var(--color-secondary-hover)!important;outline:none}::ng-deep .navigation-menu-content-container .ads-nav-link:focus .ads-nav-item-container{background-color:var(--color-secondary-hover)!important}::ng-deep .navigation-menu-content-container .ads-nav-link:focus .ads-nav-item-container ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}::ng-deep .navigation-menu-content-container .ads-nav-link:focus .ads-nav-item-container span{color:var(--color-white)!important}::ng-deep .navigation-menu-content-container .logo-container{padding-left:8px;padding-right:7px}.breadcrumbs-container{padding:72px 48px 48px}.split-area-content{container-type:inline-size}@container (max-width: 768px){.breadcrumbs-container{padding:72px 32px 48px}}:host::ng-deep{--mat-toolbar-mobile-height: 64px;--mat-toolbar-container-background-color: transparent}:host::ng-deep mat-toolbar{border-bottom:1px solid var(--color-light)}:host::ng-deep .mdc-icon-button{display:flex}:host::ng-deep .mdc-icon-button:hover{background-color:var(--color-light-30)}:host::ng-deep .mdc-icon-button:hover ads-icon ::ng-deep svg{fill:var(--color-secondary-hover)!important;stroke:var(--color-secondary-hover)!important}:host::ng-deep .mdc-icon-button:focus,:host::ng-deep .mdc-icon-button:active{background-color:var(--color-light-30)}:host::ng-deep .mdc-icon-button:focus ads-icon ::ng-deep svg,:host::ng-deep .mdc-icon-button:active ads-icon ::ng-deep svg{fill:var(--color-secondary-pressed)!important;stroke:var(--color-secondary-pressed)!important}::ng-deep .mat-mdc-menu-content{padding:0!important}::ng-deep .mat-mdc-menu-panel{margin-top:3px!important;margin-left:10px}.regular-menu-content-container{height:100vh}.burger-logo-container{padding:18px 8px;border-bottom:1px solid var(--color-light);height:auto;background-color:var(--color-white);width:280px}.mobile-wrapper{background-color:var(--color-white);min-height:calc(100vh - 64px)}.mobile-wrapper .breadcrumbs-container{padding:16px 0 48px 32px}.mobile-wrapper .breadcrumbs-container.is-mobile{padding:16px 0 48px 24px}.ads-toolbar{background-color:var(--color-white)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4$4.SplitComponent, selector: "as-split", inputs: ["gutterSize", "gutterStep", "disabled", "gutterClickDeltaPx", "direction", "dir", "unit", "gutterAriaLabel", "restrictMove", "useTransition", "gutterDblClickDuration"], outputs: ["gutterClick", "gutterDblClick", "dragStart", "dragEnd", "transitionEnd"], exportAs: ["asSplit"] }, { kind: "component", type: i4$4.SplitAreaComponent, selector: "as-split-area", inputs: ["size", "minSize", "maxSize", "lockSize", "visible"], exportAs: ["asSplitArea"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "component", type: DividerComponent, selector: "ads-divider", inputs: ["margin", "color"] }, { kind: "directive", type: i6$1.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i6$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i6$1.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: i6$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i6$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: AdsAscentLogoComponent, selector: "ads-ascent-logo", inputs: ["invertTheme", "size"] }, { kind: "directive", type: i13.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: AdsBreadcrumbComponent, selector: "ads-breadcrumb", inputs: ["breadcrumbs"] }, { kind: "component", type: i4$3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i11$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i4$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AdsScmsSideNavBarComponent, isStandalone: false, selector: "ads-scms-side-nav-bar", inputs: { navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, breadcrumbs: { classPropertyName: "breadcrumbs", publicName: "breadcrumbs", isSignal: true, isRequired: false, transformFunction: null }, showBreadcrumbs: { classPropertyName: "showBreadcrumbs", publicName: "showBreadcrumbs", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "checkScreenWidth($event)" } }, viewQueries: [{ propertyName: "accordion", first: true, predicate: MatAccordion, descendants: true, isSignal: true }, { propertyName: "splitter", first: true, predicate: ["splitter"], descendants: true }, { propertyName: "sideNavArea", first: true, predicate: ["sideNavArea"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "@if (!isTablet()) {\n  <as-split\n    #splitter\n    [useTransition]=\"true\"\n    unit=\"pixel\"\n    [gutterSize]=\"10\"\n    (gutterDblClick)=\"expandSidebar()\"\n    [gutterDblClickDuration]=\"500\"\n    (dragEnd)=\"dragEnd($event)\"\n  >\n    <as-split-area [size]=\"sidebarSize()\" [minSize]=\"50\" [maxSize]=\"maxExpandedWidth()\" #sideNavArea>\n      <div class=\"navigation-menu-content-container regular-menu-content-container\">\n        <div class=\"logo-container\">\n          <a [routerLink]=\"'/'\">\n            <ads-ascent-logo size=\"small\" [mobileWidth]=\"70\" [isCollapsed]=\"isCollapsed()\" />\n          </a>\n        </div>\n\n        <div class=\"nav-container\">\n          <ng-container *ngTemplateOutlet=\"matAccordion\" />\n        </div>\n      </div>\n    </as-split-area>\n\n    <as-split-area class=\"split-area-content\">\n      @if (showBreadcrumbs()) {\n        <div class=\"breadcrumbs-container\">\n          <ads-breadcrumb [breadcrumbs]=\"breadcrumbs()\" />\n        </div>\n      }\n      <ng-container *ngTemplateOutlet=\"router\" />\n    </as-split-area>\n  </as-split>\n} @else {\n  <mat-toolbar [hidden]=\"!isTablet()\" class=\"ads-toolbar\">\n    <button mat-icon-button #menuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu\">\n      <ads-icon [name]=\"menuTrigger.menuOpen ? 'cross' : 'hamburger_menu'\" theme=\"secondary\" stroke=\"secondary\" size=\"sm\" />\n    </button>\n  </mat-toolbar>\n\n  <mat-menu #menu=\"matMenu\">\n    <div class=\"navigation-menu-content-container\">\n      <div class=\"burger-logo-container\">\n        <a [routerLink]=\"'/'\">\n          <ads-ascent-logo size=\"small\" [isCollapsed]=\"false\" [mobileWidth]=\"70\" />\n        </a>\n      </div>\n\n      <ng-container *ngTemplateOutlet=\"matAccordion\" />\n    </div>\n  </mat-menu>\n  <div class=\"mobile-wrapper\">\n    @if (showBreadcrumbs()) {\n      <div class=\"breadcrumbs-container\" [class.is-mobile]=\"isMobile()\" >\n        <ads-breadcrumb [breadcrumbs]=\"breadcrumbs()\" />\n      </div>\n    }\n    <ng-container *ngTemplateOutlet=\"router\" />\n  </div>\n\n}\n\n<ng-template #router>\n  <ng-content></ng-content>\n</ng-template>\n\n\n<ng-template #matAccordion>\n  <div class=\"nav-items-wrapper\">\n    <!-- Regular navigation items -->\n    <mat-accordion class=\"nav-items-container regular-items\">\n      @for (item of regularNavItems(); track $index) {\n        @if (item.subItems?.length) {\n          <mat-expansion-panel\n            #panel\n            [ngClass]=\"{\n              'active-expansion-panel': hasActiveLink(item),\n              'panel-expanded': panel.expanded,\n            }\"\n          >\n            <mat-expansion-panel-header\n              (click)=\"panel.expanded && isCollapsed() && expandSidebar(); $event.stopPropagation()\"\n              (keydown.enter)=\"panel.expanded && isCollapsed() && expandSidebar()\"\n            >\n              <mat-panel-title>\n                <ng-container *ngTemplateOutlet=\"itemTitle; context: { data: item }\" />\n              </mat-panel-title>\n              <mat-panel-description>\n                @if (panel.expanded) {\n                  <ads-icon size=\"xs\" name=\"chevron_up\" theme=\"iconPrimary\" />\n                } @else {\n                  <ads-icon size=\"xs\" name=\"chevron_down\" theme=\"iconPrimary\" />\n                }\n              </mat-panel-description>\n            </mat-expansion-panel-header>\n            @for (subItem of item.subItems; track $index) {\n              <ng-container *ngTemplateOutlet=\"navItem; context: { navItem: subItem, class: '' }\" />\n            }\n          </mat-expansion-panel>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"navItem; context: { navItem: item, class: 'main-item' }\" />\n        }\n        @if (item?.showDividerAfterItem) {\n          <ads-divider />\n        }\n      }\n    </mat-accordion>\n\n    <!-- Bottom navigation items -->\n    @if (hasBottomItems()) {\n      <div class=\"bottom-nav-section\">\n        <ads-divider />\n        <mat-accordion class=\"nav-items-container bottom-items\">\n          @for (item of bottomNavItems(); track $index) {\n            @if (item.subItems?.length) {\n              <mat-expansion-panel\n                #panel\n                [ngClass]=\"{\n                  'active-expansion-panel': hasActiveLink(item),\n                  'panel-expanded': panel.expanded,\n                }\"\n              >\n                <mat-expansion-panel-header\n                  (click)=\"panel.expanded && isCollapsed() && expandSidebar(); $event.stopPropagation()\"\n                  (keydown.enter)=\"panel.expanded && isCollapsed() && expandSidebar()\"\n                >\n                  <mat-panel-title>\n                    <ng-container *ngTemplateOutlet=\"itemTitle; context: { data: item }\" />\n                  </mat-panel-title>\n                  <mat-panel-description>\n                    @if (panel.expanded) {\n                      <ads-icon size=\"xs\" name=\"chevron_up\" theme=\"iconPrimary\" />\n                    } @else {\n                      <ads-icon size=\"xs\" name=\"chevron_down\" theme=\"iconPrimary\" />\n                    }\n                  </mat-panel-description>\n                </mat-expansion-panel-header>\n                @for (subItem of item.subItems; track $index) {\n                  <ng-container *ngTemplateOutlet=\"navItem; context: { navItem: subItem, class: '' }\" />\n                }\n              </mat-expansion-panel>\n            } @else {\n              <ng-container *ngTemplateOutlet=\"navItem; context: { navItem: item, class: 'main-item bottom-item' }\" />\n            }\n            @if (item?.showDividerAfterItem) {\n              <ads-divider />\n            }\n          }\n        </mat-accordion>\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #navItem let-item=\"navItem\" let-className=\"class\">\n  <a\n    [routerLink]=\"item.href\"\n    class=\"ads-nav-link\"\n    [ngClass]=\"{\n      className,\n      'active-nav-link': hasActiveSubLink(item),\n    }\"\n  >\n    <ng-container *ngTemplateOutlet=\"itemTitle; context: { data: item }\" />\n  </a>\n</ng-template>\n\n<ng-template #itemTitle let-item=\"data\">\n  <div class=\"ads-nav-item-container\" [matTooltip]=\"item.label\" [matTooltipDisabled]=\"!isCollapsed() || isTablet()\">\n    @if (!!item.icon) {\n      <ads-icon [name]=\"item.icon!\" size=\"sm\" theme=\"iconPrimary\" stroke=\"iconPrimary\" />\n    }\n    @if (!isCollapsed() || isTablet()) {\n      <span>{{ item.label }}</span>\n    }\n  </div>\n</ng-template>\n", styles: [".mat-expansion-panel{--mat-expansion-container-shape: 5px;--mat-expansion-container-background-color: var(--color-white);--mat-expansion-container-text-color: var(--color-medium);--mat-expansion-container-text-size: font-size(text-base);box-shadow:none!important;border:1px solid var(--color-light)}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header{--mat-expansion-header-collapsed-state-height: unset;min-height:24px;height:auto;padding:16px}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header.mat-expanded{padding-bottom:8px}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header mat-panel-title{--mat-expansion-header-text-color: var(--color-dark);font-size:1.25rem;line-height:26px;font-weight:600;flex-basis:auto}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header mat-panel-description{margin:0;justify-content:end;flex-basis:auto}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header .mat-expansion-indicator{display:none}.mat-expansion-panel ::ng-deep .mat-expansion-panel-content .mat-expansion-panel-body{--mat-expansion-container-text-size: font-size(text-base);line-height:21px;padding:0 16px 16px}.mat-expansion-panel .mat-expansion-panel-header[aria-disabled=true]{background-color:var(--color-muted)}.mat-expansion-panel .mat-expansion-panel-header[aria-disabled=true] .mat-expansion-panel-header-title{color:var(--color-medium)}\n", ".nav-items-wrapper{display:flex;flex-direction:column;height:100%;min-height:0}.nav-items-container{display:flex;flex-direction:column;border-bottom:1px solid var(--color-light)}.nav-items-container .ads-nav-item-container{display:flex;padding:14px 12px;gap:12px;background-color:var(--color-white);align-items:center;overflow:hidden;white-space:nowrap}.nav-items-container .ads-nav-item-container span{font-weight:400;line-height:20px;color:var(--color-medium);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-decoration:unset;display:inline-block}.nav-items-container .ads-nav-item-container ads-icon{flex-shrink:0}.nav-items-container .ads-nav-item-container:hover span,.nav-items-container .ads-nav-item-container:focus span,.nav-items-container .ads-nav-item-container:active span{color:var(--color-white)}.nav-items-container .ads-nav-item-container:hover ads-icon ::ng-deep svg,.nav-items-container .ads-nav-item-container:focus ads-icon ::ng-deep svg,.nav-items-container .ads-nav-item-container:active ads-icon ::ng-deep svg{stroke:var(--color-white);fill:var(--color-white)!important}.nav-items-container .ads-nav-item-container:hover{background-color:var(--color-secondary-hover)!important}.nav-items-container .ads-nav-item-container:active{background-color:var(--color-secondary-pressed)!important}.nav-items-container .ads-nav-item-container:focus{background-color:var(--color-secondary)!important}as-split-area{background-color:var(--color-white)}.logo-container{padding:16px 12px;border-bottom:1px solid var(--color-light);height:auto}.ads-nav-link.active-nav-link .ads-nav-item-container{background-color:var(--color-secondary)!important}.ads-nav-link.active-nav-link .ads-nav-item-container span{color:var(--color-white)!important}.ads-nav-link.active-nav-link .ads-nav-item-container ads-icon ::ng-deep svg{stroke:var(--color-white)!important;fill:var(--color-white)!important}.ads-nav-link{text-decoration:none}.left-side-content-container{container-type:inline-size;display:flex;flex-direction:column;height:100vh}::ng-deep as-split .as-split-gutter{background-color:var(--color-light-30)}::ng-deep as-split .as-split-gutter:hover,::ng-deep as-split .as-split-gutter:focus{outline:none}::ng-deep as-split .as-split-gutter:hover .as-split-gutter-icon,::ng-deep as-split .as-split-gutter:focus .as-split-gutter-icon{background-color:var(--color-light-80)}::ng-deep as-split .as-split-gutter:active{background-color:var(--color-light)}::ng-deep as-split .as-split-gutter-icon{width:8px;background-color:var(--color-light-30);background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"6\" height=\"11\" viewBox=\"0 0 6 11\" fill=\"none\"><path d=\"M4.7142 2.92855C5.42428 2.92855 5.99991 2.35291 5.99991 1.64283C5.99991 0.932751 5.42428 0.357117 4.7142 0.357117C4.00412 0.357117 3.42848 0.932751 3.42848 1.64283C3.42848 2.35291 4.00412 2.92855 4.7142 2.92855Z\" fill=\"%23041F41\"/><path d=\"M4.7142 6.78566C5.42428 6.78566 5.99991 6.21003 5.99991 5.49995C5.99991 4.78987 5.42428 4.21423 4.7142 4.21423C4.00412 4.21423 3.42848 4.78987 3.42848 5.49995C3.42848 6.21003 4.00412 6.78566 4.7142 6.78566Z\" fill=\"%23041F41\"/><path d=\"M4.7142 10.6428C5.42428 10.6428 5.99991 10.0672 5.99991 9.35713C5.99991 8.64704 5.42428 8.07141 4.7142 8.07141C4.00412 8.07141 3.42848 8.64704 3.42848 9.35713C3.42848 10.0672 4.00412 10.6428 4.7142 10.6428Z\" fill=\"%23041F41\"/><path d=\"M1.28571 2.92855C1.99579 2.92855 2.57143 2.35291 2.57143 1.64283C2.57143 0.932751 1.99579 0.357117 1.28571 0.357117C0.575634 0.357117 0 0.932751 0 1.64283C0 2.35291 0.575634 2.92855 1.28571 2.92855Z\" fill=\"%23041F41\"/><path d=\"M1.28571 6.78566C1.99579 6.78566 2.57143 6.21003 2.57143 5.49995C2.57143 4.78987 1.99579 4.21423 1.28571 4.21423C0.575634 4.21423 0 4.78987 0 5.49995C0 6.21003 0.575634 6.78566 1.28571 6.78566Z\" fill=\"%23041F41\"/><path d=\"M1.28571 10.6428C1.99579 10.6428 2.57143 10.0672 2.57143 9.35713C2.57143 8.64704 1.99579 8.07141 1.28571 8.07141C0.575634 8.07141 0 8.64704 0 9.35713C0 10.0672 0.575634 10.6428 1.28571 10.6428Z\" fill=\"%23041F41\"/></svg>')!important}.bottom-container{padding:16px 12px;flex-grow:1;display:flex;flex-direction:column}.bottom-nav-section{margin-top:auto}.bottom-nav-section .nav-items-container{border-bottom:none}@container (max-width: 70px){.bottom-container{flex-grow:unset}.bottom-container:hover{background-color:var(--color-secondary-hover)}.bottom-container:hover ads-icon ::ng-deep svg{stroke:var(--color-white)}.bottom-container:active{background-color:var(--color-secondary-pressed)}.hide-on-collapsed{display:none}.show-on-collapsed{display:contents}}@container (min-width: 71px){.hide-on-collapsed{display:contents}.show-on-collapsed{display:none}}\n", ".nav-container{display:flex;flex-direction:column;height:calc(100vh - 64px);overflow-y:auto}.nav-items-wrapper{display:flex;flex-direction:column;height:100%;min-height:0}.nav-items-container{border-bottom:none}.bottom-nav-section{margin-top:auto}.nav-items-container>ads-divider:last-of-type{margin-top:auto}::ng-deep .navigation-menu-content-container .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header{background-color:var(--color-secondary)!important}::ng-deep .navigation-menu-content-container .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header .ads-nav-item-container{background-color:var(--color-secondary)!important}::ng-deep .navigation-menu-content-container .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header .ads-nav-item-container span{color:var(--color-white)!important}::ng-deep .navigation-menu-content-container .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header .ads-nav-item-container ads-icon ::ng-deep svg{stroke:var(--color-white)!important;fill:var(--color-white)!important}::ng-deep .navigation-menu-content-container .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header mat-panel-description ads-icon{fill:var(--color-white)!important}::ng-deep .navigation-menu-content-container .panel-expanded mat-expansion-panel_header,::ng-deep .navigation-menu-content-container .panel-expanded .ads-nav-item-container{background-color:var(--color-secondary-10)!important}::ng-deep .navigation-menu-content-container .panel-expanded mat-panel-title .ads-nav-item-container{background-color:transparent!important}::ng-deep .navigation-menu-content-container .panel-expanded mat-panel-title .ads-nav-item-container span{font-weight:600!important}::ng-deep .navigation-menu-content-container mat-expansion-panel{border:none!important;border-radius:unset!important;margin:unset!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-body{padding:0!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-body a .ads-nav-item-container{padding-left:48px!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header{padding:6px 12px 6px 0!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header mat-panel-description ads-icon{width:16px!important;height:auto!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header mat-panel-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;min-width:50px}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header mat-panel-title .ads-nav-item-container span{font-size:1rem}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:hover,::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:focus{background-color:var(--color-secondary-hover)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container,::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:focus .ads-nav-item-container{background-color:var(--color-secondary-hover)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container ads-icon ::ng-deep svg,::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:focus .ads-nav-item-container ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container span,::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:focus .ads-nav-item-container span{color:var(--color-white)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:hover mat-panel-description ads-icon,::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:focus mat-panel-description ads-icon{fill:var(--color-white)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:active{background-color:var(--color-secondary-pressed)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:active .ads-nav-item-container{background-color:var(--color-secondary-pressed)!important}::ng-deep .navigation-menu-content-container .main-item .ads-nav-item-container{padding:20px 12px!important}::ng-deep .navigation-menu-content-container .main-item .ads-nav-item-container .hide-on-collapsed{font-size:1rem}::ng-deep .navigation-menu-content-container .ads-nav-link:focus{background-color:var(--color-secondary-hover)!important;outline:none}::ng-deep .navigation-menu-content-container .ads-nav-link:focus .ads-nav-item-container{background-color:var(--color-secondary-hover)!important}::ng-deep .navigation-menu-content-container .ads-nav-link:focus .ads-nav-item-container ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}::ng-deep .navigation-menu-content-container .ads-nav-link:focus .ads-nav-item-container span{color:var(--color-white)!important}::ng-deep .navigation-menu-content-container .logo-container{padding-left:8px;padding-right:7px}.breadcrumbs-container{padding:72px 48px 48px}.split-area-content{container-type:inline-size}@container (max-width: 768px){.breadcrumbs-container{padding:72px 32px 48px}}:host::ng-deep{--mat-toolbar-mobile-height: 64px;--mat-toolbar-container-background-color: transparent}:host::ng-deep mat-toolbar{border-bottom:1px solid var(--color-light)}:host::ng-deep .mdc-icon-button{display:flex}:host::ng-deep .mdc-icon-button:hover{background-color:var(--color-light-30)}:host::ng-deep .mdc-icon-button:hover ads-icon ::ng-deep svg{fill:var(--color-secondary-hover)!important;stroke:var(--color-secondary-hover)!important}:host::ng-deep .mdc-icon-button:focus,:host::ng-deep .mdc-icon-button:active{background-color:var(--color-light-30)}:host::ng-deep .mdc-icon-button:focus ads-icon ::ng-deep svg,:host::ng-deep .mdc-icon-button:active ads-icon ::ng-deep svg{fill:var(--color-secondary-pressed)!important;stroke:var(--color-secondary-pressed)!important}::ng-deep .mat-mdc-menu-content{padding:0!important}::ng-deep .mat-mdc-menu-panel{margin-top:3px!important;margin-left:10px}.regular-menu-content-container{height:100vh}.burger-logo-container{padding:18px 8px;border-bottom:1px solid var(--color-light);height:auto;background-color:var(--color-white);width:280px}.mobile-wrapper{background-color:var(--color-white);min-height:calc(100vh - 64px)}.mobile-wrapper .breadcrumbs-container{padding:16px 0 48px 32px}.mobile-wrapper .breadcrumbs-container.is-mobile{padding:16px 0 48px 24px}.ads-toolbar{background-color:var(--color-white)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$4.SplitComponent, selector: "as-split", inputs: ["gutterSize", "gutterStep", "disabled", "gutterClickDeltaPx", "direction", "dir", "unit", "gutterAriaLabel", "restrictMove", "useTransition", "gutterDblClickDuration"], outputs: ["gutterClick", "gutterDblClick", "dragStart", "dragEnd", "transitionEnd"], exportAs: ["asSplit"] }, { kind: "component", type: i3$4.SplitAreaComponent, selector: "as-split-area", inputs: ["size", "minSize", "maxSize", "lockSize", "visible"], exportAs: ["asSplitArea"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "component", type: DividerComponent, selector: "ads-divider", inputs: ["margin", "color"] }, { kind: "directive", type: i6$1.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i6$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i6$1.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: i6$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i6$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: AdsAscentLogoComponent, selector: "ads-ascent-logo", inputs: ["invertTheme", "size"] }, { kind: "directive", type: i13.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: AdsBreadcrumbComponent, selector: "ads-breadcrumb", inputs: ["breadcrumbs"] }, { kind: "component", type: i4$3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i11$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i4$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AdsScmsSideNavBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ads-scms-side-nav-bar', standalone: false, template: "@if (!isTablet()) {\n  <as-split\n    #splitter\n    [useTransition]=\"true\"\n    unit=\"pixel\"\n    [gutterSize]=\"10\"\n    (gutterDblClick)=\"expandSidebar()\"\n    [gutterDblClickDuration]=\"500\"\n    (dragEnd)=\"dragEnd($event)\"\n  >\n    <as-split-area [size]=\"sidebarSize()\" [minSize]=\"50\" [maxSize]=\"maxExpandedWidth()\" #sideNavArea>\n      <div class=\"navigation-menu-content-container regular-menu-content-container\">\n        <div class=\"logo-container\">\n          <a [routerLink]=\"'/'\">\n            <ads-ascent-logo size=\"small\" [mobileWidth]=\"70\" [isCollapsed]=\"isCollapsed()\" />\n          </a>\n        </div>\n\n        <div class=\"nav-container\">\n          <ng-container *ngTemplateOutlet=\"matAccordion\" />\n        </div>\n      </div>\n    </as-split-area>\n\n    <as-split-area class=\"split-area-content\">\n      @if (showBreadcrumbs()) {\n        <div class=\"breadcrumbs-container\">\n          <ads-breadcrumb [breadcrumbs]=\"breadcrumbs()\" />\n        </div>\n      }\n      <ng-container *ngTemplateOutlet=\"router\" />\n    </as-split-area>\n  </as-split>\n} @else {\n  <mat-toolbar [hidden]=\"!isTablet()\" class=\"ads-toolbar\">\n    <button mat-icon-button #menuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu\">\n      <ads-icon [name]=\"menuTrigger.menuOpen ? 'cross' : 'hamburger_menu'\" theme=\"secondary\" stroke=\"secondary\" size=\"sm\" />\n    </button>\n  </mat-toolbar>\n\n  <mat-menu #menu=\"matMenu\">\n    <div class=\"navigation-menu-content-container\">\n      <div class=\"burger-logo-container\">\n        <a [routerLink]=\"'/'\">\n          <ads-ascent-logo size=\"small\" [isCollapsed]=\"false\" [mobileWidth]=\"70\" />\n        </a>\n      </div>\n\n      <ng-container *ngTemplateOutlet=\"matAccordion\" />\n    </div>\n  </mat-menu>\n  <div class=\"mobile-wrapper\">\n    @if (showBreadcrumbs()) {\n      <div class=\"breadcrumbs-container\" [class.is-mobile]=\"isMobile()\" >\n        <ads-breadcrumb [breadcrumbs]=\"breadcrumbs()\" />\n      </div>\n    }\n    <ng-container *ngTemplateOutlet=\"router\" />\n  </div>\n\n}\n\n<ng-template #router>\n  <ng-content></ng-content>\n</ng-template>\n\n\n<ng-template #matAccordion>\n  <div class=\"nav-items-wrapper\">\n    <!-- Regular navigation items -->\n    <mat-accordion class=\"nav-items-container regular-items\">\n      @for (item of regularNavItems(); track $index) {\n        @if (item.subItems?.length) {\n          <mat-expansion-panel\n            #panel\n            [ngClass]=\"{\n              'active-expansion-panel': hasActiveLink(item),\n              'panel-expanded': panel.expanded,\n            }\"\n          >\n            <mat-expansion-panel-header\n              (click)=\"panel.expanded && isCollapsed() && expandSidebar(); $event.stopPropagation()\"\n              (keydown.enter)=\"panel.expanded && isCollapsed() && expandSidebar()\"\n            >\n              <mat-panel-title>\n                <ng-container *ngTemplateOutlet=\"itemTitle; context: { data: item }\" />\n              </mat-panel-title>\n              <mat-panel-description>\n                @if (panel.expanded) {\n                  <ads-icon size=\"xs\" name=\"chevron_up\" theme=\"iconPrimary\" />\n                } @else {\n                  <ads-icon size=\"xs\" name=\"chevron_down\" theme=\"iconPrimary\" />\n                }\n              </mat-panel-description>\n            </mat-expansion-panel-header>\n            @for (subItem of item.subItems; track $index) {\n              <ng-container *ngTemplateOutlet=\"navItem; context: { navItem: subItem, class: '' }\" />\n            }\n          </mat-expansion-panel>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"navItem; context: { navItem: item, class: 'main-item' }\" />\n        }\n        @if (item?.showDividerAfterItem) {\n          <ads-divider />\n        }\n      }\n    </mat-accordion>\n\n    <!-- Bottom navigation items -->\n    @if (hasBottomItems()) {\n      <div class=\"bottom-nav-section\">\n        <ads-divider />\n        <mat-accordion class=\"nav-items-container bottom-items\">\n          @for (item of bottomNavItems(); track $index) {\n            @if (item.subItems?.length) {\n              <mat-expansion-panel\n                #panel\n                [ngClass]=\"{\n                  'active-expansion-panel': hasActiveLink(item),\n                  'panel-expanded': panel.expanded,\n                }\"\n              >\n                <mat-expansion-panel-header\n                  (click)=\"panel.expanded && isCollapsed() && expandSidebar(); $event.stopPropagation()\"\n                  (keydown.enter)=\"panel.expanded && isCollapsed() && expandSidebar()\"\n                >\n                  <mat-panel-title>\n                    <ng-container *ngTemplateOutlet=\"itemTitle; context: { data: item }\" />\n                  </mat-panel-title>\n                  <mat-panel-description>\n                    @if (panel.expanded) {\n                      <ads-icon size=\"xs\" name=\"chevron_up\" theme=\"iconPrimary\" />\n                    } @else {\n                      <ads-icon size=\"xs\" name=\"chevron_down\" theme=\"iconPrimary\" />\n                    }\n                  </mat-panel-description>\n                </mat-expansion-panel-header>\n                @for (subItem of item.subItems; track $index) {\n                  <ng-container *ngTemplateOutlet=\"navItem; context: { navItem: subItem, class: '' }\" />\n                }\n              </mat-expansion-panel>\n            } @else {\n              <ng-container *ngTemplateOutlet=\"navItem; context: { navItem: item, class: 'main-item bottom-item' }\" />\n            }\n            @if (item?.showDividerAfterItem) {\n              <ads-divider />\n            }\n          }\n        </mat-accordion>\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #navItem let-item=\"navItem\" let-className=\"class\">\n  <a\n    [routerLink]=\"item.href\"\n    class=\"ads-nav-link\"\n    [ngClass]=\"{\n      className,\n      'active-nav-link': hasActiveSubLink(item),\n    }\"\n  >\n    <ng-container *ngTemplateOutlet=\"itemTitle; context: { data: item }\" />\n  </a>\n</ng-template>\n\n<ng-template #itemTitle let-item=\"data\">\n  <div class=\"ads-nav-item-container\" [matTooltip]=\"item.label\" [matTooltipDisabled]=\"!isCollapsed() || isTablet()\">\n    @if (!!item.icon) {\n      <ads-icon [name]=\"item.icon!\" size=\"sm\" theme=\"iconPrimary\" stroke=\"iconPrimary\" />\n    }\n    @if (!isCollapsed() || isTablet()) {\n      <span>{{ item.label }}</span>\n    }\n  </div>\n</ng-template>\n", styles: [".mat-expansion-panel{--mat-expansion-container-shape: 5px;--mat-expansion-container-background-color: var(--color-white);--mat-expansion-container-text-color: var(--color-medium);--mat-expansion-container-text-size: font-size(text-base);box-shadow:none!important;border:1px solid var(--color-light)}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header{--mat-expansion-header-collapsed-state-height: unset;min-height:24px;height:auto;padding:16px}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header.mat-expanded{padding-bottom:8px}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header mat-panel-title{--mat-expansion-header-text-color: var(--color-dark);font-size:1.25rem;line-height:26px;font-weight:600;flex-basis:auto}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header mat-panel-description{margin:0;justify-content:end;flex-basis:auto}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header .mat-expansion-indicator{display:none}.mat-expansion-panel ::ng-deep .mat-expansion-panel-content .mat-expansion-panel-body{--mat-expansion-container-text-size: font-size(text-base);line-height:21px;padding:0 16px 16px}.mat-expansion-panel .mat-expansion-panel-header[aria-disabled=true]{background-color:var(--color-muted)}.mat-expansion-panel .mat-expansion-panel-header[aria-disabled=true] .mat-expansion-panel-header-title{color:var(--color-medium)}\n", ".nav-items-container{display:flex;flex-direction:column;border-bottom:1px solid var(--color-light)}.nav-items-container .ads-nav-item-container{display:flex;padding:14px 12px;gap:12px;background-color:var(--color-white);align-items:center;overflow:hidden;white-space:nowrap}.nav-items-container .ads-nav-item-container span{font-weight:400;line-height:20px;color:var(--color-medium);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-decoration:unset;display:inline-block}.nav-items-container .ads-nav-item-container ads-icon{flex-shrink:0}.nav-items-container .ads-nav-item-container:hover span,.nav-items-container .ads-nav-item-container:focus span,.nav-items-container .ads-nav-item-container:active span{color:var(--color-white)}.nav-items-container .ads-nav-item-container:hover ads-icon ::ng-deep svg,.nav-items-container .ads-nav-item-container:focus ads-icon ::ng-deep svg,.nav-items-container .ads-nav-item-container:active ads-icon ::ng-deep svg{stroke:var(--color-white);fill:var(--color-white)!important}.nav-items-container .ads-nav-item-container:hover{background-color:var(--color-secondary-hover)!important}.nav-items-container .ads-nav-item-container:active{background-color:var(--color-secondary-pressed)!important}.nav-items-container .ads-nav-item-container:focus{background-color:var(--color-secondary)!important}as-split-area{background-color:var(--color-white)}.logo-container{padding:16px 12px;border-bottom:1px solid var(--color-light);height:auto}.ads-nav-link.active-nav-link .ads-nav-item-container{background-color:var(--color-secondary)!important}.ads-nav-link.active-nav-link .ads-nav-item-container span{color:var(--color-white)!important}.ads-nav-link.active-nav-link .ads-nav-item-container ads-icon ::ng-deep svg{stroke:var(--color-white)!important;fill:var(--color-white)!important}.ads-nav-link{text-decoration:none}.left-side-content-container{container-type:inline-size;display:flex;flex-direction:column;height:100vh}::ng-deep as-split .as-split-gutter{background-color:var(--color-light-30)}::ng-deep as-split .as-split-gutter:hover,::ng-deep as-split .as-split-gutter:focus{outline:none}::ng-deep as-split .as-split-gutter:hover .as-split-gutter-icon,::ng-deep as-split .as-split-gutter:focus .as-split-gutter-icon{background-color:var(--color-light-80)}::ng-deep as-split .as-split-gutter:active{background-color:var(--color-light)}::ng-deep as-split .as-split-gutter-icon{width:8px;background-color:var(--color-light-30);background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"6\" height=\"11\" viewBox=\"0 0 6 11\" fill=\"none\"><path d=\"M4.7142 2.92855C5.42428 2.92855 5.99991 2.35291 5.99991 1.64283C5.99991 0.932751 5.42428 0.357117 4.7142 0.357117C4.00412 0.357117 3.42848 0.932751 3.42848 1.64283C3.42848 2.35291 4.00412 2.92855 4.7142 2.92855Z\" fill=\"%23041F41\"/><path d=\"M4.7142 6.78566C5.42428 6.78566 5.99991 6.21003 5.99991 5.49995C5.99991 4.78987 5.42428 4.21423 4.7142 4.21423C4.00412 4.21423 3.42848 4.78987 3.42848 5.49995C3.42848 6.21003 4.00412 6.78566 4.7142 6.78566Z\" fill=\"%23041F41\"/><path d=\"M4.7142 10.6428C5.42428 10.6428 5.99991 10.0672 5.99991 9.35713C5.99991 8.64704 5.42428 8.07141 4.7142 8.07141C4.00412 8.07141 3.42848 8.64704 3.42848 9.35713C3.42848 10.0672 4.00412 10.6428 4.7142 10.6428Z\" fill=\"%23041F41\"/><path d=\"M1.28571 2.92855C1.99579 2.92855 2.57143 2.35291 2.57143 1.64283C2.57143 0.932751 1.99579 0.357117 1.28571 0.357117C0.575634 0.357117 0 0.932751 0 1.64283C0 2.35291 0.575634 2.92855 1.28571 2.92855Z\" fill=\"%23041F41\"/><path d=\"M1.28571 6.78566C1.99579 6.78566 2.57143 6.21003 2.57143 5.49995C2.57143 4.78987 1.99579 4.21423 1.28571 4.21423C0.575634 4.21423 0 4.78987 0 5.49995C0 6.21003 0.575634 6.78566 1.28571 6.78566Z\" fill=\"%23041F41\"/><path d=\"M1.28571 10.6428C1.99579 10.6428 2.57143 10.0672 2.57143 9.35713C2.57143 8.64704 1.99579 8.07141 1.28571 8.07141C0.575634 8.07141 0 8.64704 0 9.35713C0 10.0672 0.575634 10.6428 1.28571 10.6428Z\" fill=\"%23041F41\"/></svg>')!important}.bottom-container{padding:16px 12px;flex-grow:1;display:flex;flex-direction:column}@container (max-width: 70px){.bottom-container{flex-grow:unset}.bottom-container:hover{background-color:var(--color-secondary-hover)}.bottom-container:hover ads-icon ::ng-deep svg{stroke:var(--color-white)}.bottom-container:active{background-color:var(--color-secondary-pressed)}.hide-on-collapsed{display:none}.show-on-collapsed{display:contents}}@container (min-width: 71px){.hide-on-collapsed{display:contents}.show-on-collapsed{display:none}}\n", ".nav-container{display:flex;flex-direction:column;height:calc(100vh - 64px);overflow-y:auto}.nav-items-wrapper{display:flex;flex-direction:column;height:100%;min-height:0}.nav-items-container{border-bottom:none}.bottom-nav-section{margin-top:auto}.nav-items-container>ads-divider:last-of-type{margin-top:auto}::ng-deep .navigation-menu-content-container .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header{background-color:var(--color-secondary)!important}::ng-deep .navigation-menu-content-container .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header .ads-nav-item-container{background-color:var(--color-secondary)!important}::ng-deep .navigation-menu-content-container .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header .ads-nav-item-container span{color:var(--color-white)!important}::ng-deep .navigation-menu-content-container .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header .ads-nav-item-container ads-icon ::ng-deep svg{stroke:var(--color-white)!important;fill:var(--color-white)!important}::ng-deep .navigation-menu-content-container .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header mat-panel-description ads-icon{fill:var(--color-white)!important}::ng-deep .navigation-menu-content-container .panel-expanded mat-expansion-panel_header,::ng-deep .navigation-menu-content-container .panel-expanded .ads-nav-item-container{background-color:var(--color-secondary-10)!important}::ng-deep .navigation-menu-content-container .panel-expanded mat-panel-title .ads-nav-item-container{background-color:transparent!important}::ng-deep .navigation-menu-content-container .panel-expanded mat-panel-title .ads-nav-item-container span{font-weight:600!important}::ng-deep .navigation-menu-content-container mat-expansion-panel{border:none!important;border-radius:unset!important;margin:unset!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-body{padding:0!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-body a .ads-nav-item-container{padding-left:48px!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header{padding:6px 12px 6px 0!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header mat-panel-description ads-icon{width:16px!important;height:auto!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header mat-panel-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;min-width:50px}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header mat-panel-title .ads-nav-item-container span{font-size:1rem}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:hover,::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:focus{background-color:var(--color-secondary-hover)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container,::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:focus .ads-nav-item-container{background-color:var(--color-secondary-hover)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container ads-icon ::ng-deep svg,::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:focus .ads-nav-item-container ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container span,::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:focus .ads-nav-item-container span{color:var(--color-white)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:hover mat-panel-description ads-icon,::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:focus mat-panel-description ads-icon{fill:var(--color-white)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:active{background-color:var(--color-secondary-pressed)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:active .ads-nav-item-container{background-color:var(--color-secondary-pressed)!important}::ng-deep .navigation-menu-content-container .main-item .ads-nav-item-container{padding:20px 12px!important}::ng-deep .navigation-menu-content-container .main-item .ads-nav-item-container .hide-on-collapsed{font-size:1rem}::ng-deep .navigation-menu-content-container .ads-nav-link:focus{background-color:var(--color-secondary-hover)!important;outline:none}::ng-deep .navigation-menu-content-container .ads-nav-link:focus .ads-nav-item-container{background-color:var(--color-secondary-hover)!important}::ng-deep .navigation-menu-content-container .ads-nav-link:focus .ads-nav-item-container ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}::ng-deep .navigation-menu-content-container .ads-nav-link:focus .ads-nav-item-container span{color:var(--color-white)!important}::ng-deep .navigation-menu-content-container .logo-container{padding-left:8px;padding-right:7px}.breadcrumbs-container{padding:72px 48px 48px}.split-area-content{container-type:inline-size}@container (max-width: 768px){.breadcrumbs-container{padding:72px 32px 48px}}:host::ng-deep{--mat-toolbar-mobile-height: 64px;--mat-toolbar-container-background-color: transparent}:host::ng-deep mat-toolbar{border-bottom:1px solid var(--color-light)}:host::ng-deep .mdc-icon-button{display:flex}:host::ng-deep .mdc-icon-button:hover{background-color:var(--color-light-30)}:host::ng-deep .mdc-icon-button:hover ads-icon ::ng-deep svg{fill:var(--color-secondary-hover)!important;stroke:var(--color-secondary-hover)!important}:host::ng-deep .mdc-icon-button:focus,:host::ng-deep .mdc-icon-button:active{background-color:var(--color-light-30)}:host::ng-deep .mdc-icon-button:focus ads-icon ::ng-deep svg,:host::ng-deep .mdc-icon-button:active ads-icon ::ng-deep svg{fill:var(--color-secondary-pressed)!important;stroke:var(--color-secondary-pressed)!important}::ng-deep .mat-mdc-menu-content{padding:0!important}::ng-deep .mat-mdc-menu-panel{margin-top:3px!important;margin-left:10px}.regular-menu-content-container{height:100vh}.burger-logo-container{padding:18px 8px;border-bottom:1px solid var(--color-light);height:auto;background-color:var(--color-white);width:280px}.mobile-wrapper{background-color:var(--color-white);min-height:calc(100vh - 64px)}.mobile-wrapper .breadcrumbs-container{padding:16px 0 48px 32px}.mobile-wrapper .breadcrumbs-container.is-mobile{padding:16px 0 48px 24px}.ads-toolbar{background-color:var(--color-white)}\n"] }]
+            args: [{ selector: 'ads-scms-side-nav-bar', standalone: false, template: "@if (!isTablet()) {\n  <as-split\n    #splitter\n    [useTransition]=\"true\"\n    unit=\"pixel\"\n    [gutterSize]=\"10\"\n    (gutterDblClick)=\"expandSidebar()\"\n    [gutterDblClickDuration]=\"500\"\n    (dragEnd)=\"dragEnd($event)\"\n  >\n    <as-split-area [size]=\"sidebarSize()\" [minSize]=\"50\" [maxSize]=\"maxExpandedWidth()\" #sideNavArea>\n      <div class=\"navigation-menu-content-container regular-menu-content-container\">\n        <div class=\"logo-container\">\n          <a [routerLink]=\"'/'\">\n            <ads-ascent-logo size=\"small\" [mobileWidth]=\"70\" [isCollapsed]=\"isCollapsed()\" />\n          </a>\n        </div>\n\n        <div class=\"nav-container\">\n          <ng-container *ngTemplateOutlet=\"matAccordion\" />\n        </div>\n      </div>\n    </as-split-area>\n\n    <as-split-area class=\"split-area-content\">\n      @if (showBreadcrumbs()) {\n        <div class=\"breadcrumbs-container\">\n          <ads-breadcrumb [breadcrumbs]=\"breadcrumbs()\" />\n        </div>\n      }\n      <ng-container *ngTemplateOutlet=\"router\" />\n    </as-split-area>\n  </as-split>\n} @else {\n  <mat-toolbar [hidden]=\"!isTablet()\" class=\"ads-toolbar\">\n    <button mat-icon-button #menuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu\">\n      <ads-icon [name]=\"menuTrigger.menuOpen ? 'cross' : 'hamburger_menu'\" theme=\"secondary\" stroke=\"secondary\" size=\"sm\" />\n    </button>\n  </mat-toolbar>\n\n  <mat-menu #menu=\"matMenu\">\n    <div class=\"navigation-menu-content-container\">\n      <div class=\"burger-logo-container\">\n        <a [routerLink]=\"'/'\">\n          <ads-ascent-logo size=\"small\" [isCollapsed]=\"false\" [mobileWidth]=\"70\" />\n        </a>\n      </div>\n\n      <ng-container *ngTemplateOutlet=\"matAccordion\" />\n    </div>\n  </mat-menu>\n  <div class=\"mobile-wrapper\">\n    @if (showBreadcrumbs()) {\n      <div class=\"breadcrumbs-container\" [class.is-mobile]=\"isMobile()\" >\n        <ads-breadcrumb [breadcrumbs]=\"breadcrumbs()\" />\n      </div>\n    }\n    <ng-container *ngTemplateOutlet=\"router\" />\n  </div>\n\n}\n\n<ng-template #router>\n  <ng-content></ng-content>\n</ng-template>\n\n\n<ng-template #matAccordion>\n  <div class=\"nav-items-wrapper\">\n    <!-- Regular navigation items -->\n    <mat-accordion class=\"nav-items-container regular-items\">\n      @for (item of regularNavItems(); track $index) {\n        @if (item.subItems?.length) {\n          <mat-expansion-panel\n            #panel\n            [ngClass]=\"{\n              'active-expansion-panel': hasActiveLink(item),\n              'panel-expanded': panel.expanded,\n            }\"\n          >\n            <mat-expansion-panel-header\n              (click)=\"panel.expanded && isCollapsed() && expandSidebar(); $event.stopPropagation()\"\n              (keydown.enter)=\"panel.expanded && isCollapsed() && expandSidebar()\"\n            >\n              <mat-panel-title>\n                <ng-container *ngTemplateOutlet=\"itemTitle; context: { data: item }\" />\n              </mat-panel-title>\n              <mat-panel-description>\n                @if (panel.expanded) {\n                  <ads-icon size=\"xs\" name=\"chevron_up\" theme=\"iconPrimary\" />\n                } @else {\n                  <ads-icon size=\"xs\" name=\"chevron_down\" theme=\"iconPrimary\" />\n                }\n              </mat-panel-description>\n            </mat-expansion-panel-header>\n            @for (subItem of item.subItems; track $index) {\n              <ng-container *ngTemplateOutlet=\"navItem; context: { navItem: subItem, class: '' }\" />\n            }\n          </mat-expansion-panel>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"navItem; context: { navItem: item, class: 'main-item' }\" />\n        }\n        @if (item?.showDividerAfterItem) {\n          <ads-divider />\n        }\n      }\n    </mat-accordion>\n\n    <!-- Bottom navigation items -->\n    @if (hasBottomItems()) {\n      <div class=\"bottom-nav-section\">\n        <ads-divider />\n        <mat-accordion class=\"nav-items-container bottom-items\">\n          @for (item of bottomNavItems(); track $index) {\n            @if (item.subItems?.length) {\n              <mat-expansion-panel\n                #panel\n                [ngClass]=\"{\n                  'active-expansion-panel': hasActiveLink(item),\n                  'panel-expanded': panel.expanded,\n                }\"\n              >\n                <mat-expansion-panel-header\n                  (click)=\"panel.expanded && isCollapsed() && expandSidebar(); $event.stopPropagation()\"\n                  (keydown.enter)=\"panel.expanded && isCollapsed() && expandSidebar()\"\n                >\n                  <mat-panel-title>\n                    <ng-container *ngTemplateOutlet=\"itemTitle; context: { data: item }\" />\n                  </mat-panel-title>\n                  <mat-panel-description>\n                    @if (panel.expanded) {\n                      <ads-icon size=\"xs\" name=\"chevron_up\" theme=\"iconPrimary\" />\n                    } @else {\n                      <ads-icon size=\"xs\" name=\"chevron_down\" theme=\"iconPrimary\" />\n                    }\n                  </mat-panel-description>\n                </mat-expansion-panel-header>\n                @for (subItem of item.subItems; track $index) {\n                  <ng-container *ngTemplateOutlet=\"navItem; context: { navItem: subItem, class: '' }\" />\n                }\n              </mat-expansion-panel>\n            } @else {\n              <ng-container *ngTemplateOutlet=\"navItem; context: { navItem: item, class: 'main-item bottom-item' }\" />\n            }\n            @if (item?.showDividerAfterItem) {\n              <ads-divider />\n            }\n          }\n        </mat-accordion>\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #navItem let-item=\"navItem\" let-className=\"class\">\n  <a\n    [routerLink]=\"item.href\"\n    class=\"ads-nav-link\"\n    [ngClass]=\"{\n      className,\n      'active-nav-link': hasActiveSubLink(item),\n    }\"\n  >\n    <ng-container *ngTemplateOutlet=\"itemTitle; context: { data: item }\" />\n  </a>\n</ng-template>\n\n<ng-template #itemTitle let-item=\"data\">\n  <div class=\"ads-nav-item-container\" [matTooltip]=\"item.label\" [matTooltipDisabled]=\"!isCollapsed() || isTablet()\">\n    @if (!!item.icon) {\n      <ads-icon [name]=\"item.icon!\" size=\"sm\" theme=\"iconPrimary\" stroke=\"iconPrimary\" />\n    }\n    @if (!isCollapsed() || isTablet()) {\n      <span>{{ item.label }}</span>\n    }\n  </div>\n</ng-template>\n", styles: [".mat-expansion-panel{--mat-expansion-container-shape: 5px;--mat-expansion-container-background-color: var(--color-white);--mat-expansion-container-text-color: var(--color-medium);--mat-expansion-container-text-size: font-size(text-base);box-shadow:none!important;border:1px solid var(--color-light)}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header{--mat-expansion-header-collapsed-state-height: unset;min-height:24px;height:auto;padding:16px}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header.mat-expanded{padding-bottom:8px}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header mat-panel-title{--mat-expansion-header-text-color: var(--color-dark);font-size:1.25rem;line-height:26px;font-weight:600;flex-basis:auto}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header mat-panel-description{margin:0;justify-content:end;flex-basis:auto}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header .mat-expansion-indicator{display:none}.mat-expansion-panel ::ng-deep .mat-expansion-panel-content .mat-expansion-panel-body{--mat-expansion-container-text-size: font-size(text-base);line-height:21px;padding:0 16px 16px}.mat-expansion-panel .mat-expansion-panel-header[aria-disabled=true]{background-color:var(--color-muted)}.mat-expansion-panel .mat-expansion-panel-header[aria-disabled=true] .mat-expansion-panel-header-title{color:var(--color-medium)}\n", ".nav-items-wrapper{display:flex;flex-direction:column;height:100%;min-height:0}.nav-items-container{display:flex;flex-direction:column;border-bottom:1px solid var(--color-light)}.nav-items-container .ads-nav-item-container{display:flex;padding:14px 12px;gap:12px;background-color:var(--color-white);align-items:center;overflow:hidden;white-space:nowrap}.nav-items-container .ads-nav-item-container span{font-weight:400;line-height:20px;color:var(--color-medium);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-decoration:unset;display:inline-block}.nav-items-container .ads-nav-item-container ads-icon{flex-shrink:0}.nav-items-container .ads-nav-item-container:hover span,.nav-items-container .ads-nav-item-container:focus span,.nav-items-container .ads-nav-item-container:active span{color:var(--color-white)}.nav-items-container .ads-nav-item-container:hover ads-icon ::ng-deep svg,.nav-items-container .ads-nav-item-container:focus ads-icon ::ng-deep svg,.nav-items-container .ads-nav-item-container:active ads-icon ::ng-deep svg{stroke:var(--color-white);fill:var(--color-white)!important}.nav-items-container .ads-nav-item-container:hover{background-color:var(--color-secondary-hover)!important}.nav-items-container .ads-nav-item-container:active{background-color:var(--color-secondary-pressed)!important}.nav-items-container .ads-nav-item-container:focus{background-color:var(--color-secondary)!important}as-split-area{background-color:var(--color-white)}.logo-container{padding:16px 12px;border-bottom:1px solid var(--color-light);height:auto}.ads-nav-link.active-nav-link .ads-nav-item-container{background-color:var(--color-secondary)!important}.ads-nav-link.active-nav-link .ads-nav-item-container span{color:var(--color-white)!important}.ads-nav-link.active-nav-link .ads-nav-item-container ads-icon ::ng-deep svg{stroke:var(--color-white)!important;fill:var(--color-white)!important}.ads-nav-link{text-decoration:none}.left-side-content-container{container-type:inline-size;display:flex;flex-direction:column;height:100vh}::ng-deep as-split .as-split-gutter{background-color:var(--color-light-30)}::ng-deep as-split .as-split-gutter:hover,::ng-deep as-split .as-split-gutter:focus{outline:none}::ng-deep as-split .as-split-gutter:hover .as-split-gutter-icon,::ng-deep as-split .as-split-gutter:focus .as-split-gutter-icon{background-color:var(--color-light-80)}::ng-deep as-split .as-split-gutter:active{background-color:var(--color-light)}::ng-deep as-split .as-split-gutter-icon{width:8px;background-color:var(--color-light-30);background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"6\" height=\"11\" viewBox=\"0 0 6 11\" fill=\"none\"><path d=\"M4.7142 2.92855C5.42428 2.92855 5.99991 2.35291 5.99991 1.64283C5.99991 0.932751 5.42428 0.357117 4.7142 0.357117C4.00412 0.357117 3.42848 0.932751 3.42848 1.64283C3.42848 2.35291 4.00412 2.92855 4.7142 2.92855Z\" fill=\"%23041F41\"/><path d=\"M4.7142 6.78566C5.42428 6.78566 5.99991 6.21003 5.99991 5.49995C5.99991 4.78987 5.42428 4.21423 4.7142 4.21423C4.00412 4.21423 3.42848 4.78987 3.42848 5.49995C3.42848 6.21003 4.00412 6.78566 4.7142 6.78566Z\" fill=\"%23041F41\"/><path d=\"M4.7142 10.6428C5.42428 10.6428 5.99991 10.0672 5.99991 9.35713C5.99991 8.64704 5.42428 8.07141 4.7142 8.07141C4.00412 8.07141 3.42848 8.64704 3.42848 9.35713C3.42848 10.0672 4.00412 10.6428 4.7142 10.6428Z\" fill=\"%23041F41\"/><path d=\"M1.28571 2.92855C1.99579 2.92855 2.57143 2.35291 2.57143 1.64283C2.57143 0.932751 1.99579 0.357117 1.28571 0.357117C0.575634 0.357117 0 0.932751 0 1.64283C0 2.35291 0.575634 2.92855 1.28571 2.92855Z\" fill=\"%23041F41\"/><path d=\"M1.28571 6.78566C1.99579 6.78566 2.57143 6.21003 2.57143 5.49995C2.57143 4.78987 1.99579 4.21423 1.28571 4.21423C0.575634 4.21423 0 4.78987 0 5.49995C0 6.21003 0.575634 6.78566 1.28571 6.78566Z\" fill=\"%23041F41\"/><path d=\"M1.28571 10.6428C1.99579 10.6428 2.57143 10.0672 2.57143 9.35713C2.57143 8.64704 1.99579 8.07141 1.28571 8.07141C0.575634 8.07141 0 8.64704 0 9.35713C0 10.0672 0.575634 10.6428 1.28571 10.6428Z\" fill=\"%23041F41\"/></svg>')!important}.bottom-container{padding:16px 12px;flex-grow:1;display:flex;flex-direction:column}.bottom-nav-section{margin-top:auto}.bottom-nav-section .nav-items-container{border-bottom:none}@container (max-width: 70px){.bottom-container{flex-grow:unset}.bottom-container:hover{background-color:var(--color-secondary-hover)}.bottom-container:hover ads-icon ::ng-deep svg{stroke:var(--color-white)}.bottom-container:active{background-color:var(--color-secondary-pressed)}.hide-on-collapsed{display:none}.show-on-collapsed{display:contents}}@container (min-width: 71px){.hide-on-collapsed{display:contents}.show-on-collapsed{display:none}}\n", ".nav-container{display:flex;flex-direction:column;height:calc(100vh - 64px);overflow-y:auto}.nav-items-wrapper{display:flex;flex-direction:column;height:100%;min-height:0}.nav-items-container{border-bottom:none}.bottom-nav-section{margin-top:auto}.nav-items-container>ads-divider:last-of-type{margin-top:auto}::ng-deep .navigation-menu-content-container .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header{background-color:var(--color-secondary)!important}::ng-deep .navigation-menu-content-container .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header .ads-nav-item-container{background-color:var(--color-secondary)!important}::ng-deep .navigation-menu-content-container .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header .ads-nav-item-container span{color:var(--color-white)!important}::ng-deep .navigation-menu-content-container .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header .ads-nav-item-container ads-icon ::ng-deep svg{stroke:var(--color-white)!important;fill:var(--color-white)!important}::ng-deep .navigation-menu-content-container .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header mat-panel-description ads-icon{fill:var(--color-white)!important}::ng-deep .navigation-menu-content-container .panel-expanded mat-expansion-panel_header,::ng-deep .navigation-menu-content-container .panel-expanded .ads-nav-item-container{background-color:var(--color-secondary-10)!important}::ng-deep .navigation-menu-content-container .panel-expanded mat-panel-title .ads-nav-item-container{background-color:transparent!important}::ng-deep .navigation-menu-content-container .panel-expanded mat-panel-title .ads-nav-item-container span{font-weight:600!important}::ng-deep .navigation-menu-content-container mat-expansion-panel{border:none!important;border-radius:unset!important;margin:unset!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-body{padding:0!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-body a .ads-nav-item-container{padding-left:48px!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header{padding:6px 12px 6px 0!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header mat-panel-description ads-icon{width:16px!important;height:auto!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header mat-panel-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;min-width:50px}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header mat-panel-title .ads-nav-item-container span{font-size:1rem}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:hover,::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:focus{background-color:var(--color-secondary-hover)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container,::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:focus .ads-nav-item-container{background-color:var(--color-secondary-hover)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container ads-icon ::ng-deep svg,::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:focus .ads-nav-item-container ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container span,::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:focus .ads-nav-item-container span{color:var(--color-white)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:hover mat-panel-description ads-icon,::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:focus mat-panel-description ads-icon{fill:var(--color-white)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:active{background-color:var(--color-secondary-pressed)!important}::ng-deep .navigation-menu-content-container mat-expansion-panel .mat-expansion-panel-header:active .ads-nav-item-container{background-color:var(--color-secondary-pressed)!important}::ng-deep .navigation-menu-content-container .main-item .ads-nav-item-container{padding:20px 12px!important}::ng-deep .navigation-menu-content-container .main-item .ads-nav-item-container .hide-on-collapsed{font-size:1rem}::ng-deep .navigation-menu-content-container .ads-nav-link:focus{background-color:var(--color-secondary-hover)!important;outline:none}::ng-deep .navigation-menu-content-container .ads-nav-link:focus .ads-nav-item-container{background-color:var(--color-secondary-hover)!important}::ng-deep .navigation-menu-content-container .ads-nav-link:focus .ads-nav-item-container ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}::ng-deep .navigation-menu-content-container .ads-nav-link:focus .ads-nav-item-container span{color:var(--color-white)!important}::ng-deep .navigation-menu-content-container .logo-container{padding-left:8px;padding-right:7px}.breadcrumbs-container{padding:72px 48px 48px}.split-area-content{container-type:inline-size}@container (max-width: 768px){.breadcrumbs-container{padding:72px 32px 48px}}:host::ng-deep{--mat-toolbar-mobile-height: 64px;--mat-toolbar-container-background-color: transparent}:host::ng-deep mat-toolbar{border-bottom:1px solid var(--color-light)}:host::ng-deep .mdc-icon-button{display:flex}:host::ng-deep .mdc-icon-button:hover{background-color:var(--color-light-30)}:host::ng-deep .mdc-icon-button:hover ads-icon ::ng-deep svg{fill:var(--color-secondary-hover)!important;stroke:var(--color-secondary-hover)!important}:host::ng-deep .mdc-icon-button:focus,:host::ng-deep .mdc-icon-button:active{background-color:var(--color-light-30)}:host::ng-deep .mdc-icon-button:focus ads-icon ::ng-deep svg,:host::ng-deep .mdc-icon-button:active ads-icon ::ng-deep svg{fill:var(--color-secondary-pressed)!important;stroke:var(--color-secondary-pressed)!important}::ng-deep .mat-mdc-menu-content{padding:0!important}::ng-deep .mat-mdc-menu-panel{margin-top:3px!important;margin-left:10px}.regular-menu-content-container{height:100vh}.burger-logo-container{padding:18px 8px;border-bottom:1px solid var(--color-light);height:auto;background-color:var(--color-white);width:280px}.mobile-wrapper{background-color:var(--color-white);min-height:calc(100vh - 64px)}.mobile-wrapper .breadcrumbs-container{padding:16px 0 48px 32px}.mobile-wrapper .breadcrumbs-container.is-mobile{padding:16px 0 48px 24px}.ads-toolbar{background-color:var(--color-white)}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.Router }, { type: i1.AdsIconRegistry }], propDecorators: { splitter: [{
                 type: ViewChild,
                 args: ['splitter']
@@ -7626,12 +7635,20 @@ class AdsTabsComponent {
         this.selectedIndex = 0;
         this.selectedIndexChange = new EventEmitter();
     }
+    focusChange(event) {
+    }
+    tabClicked(event) {
+        // @ts-ignore
+        console.log(event.target?.closest('.mdc-tab'));
+        event.stopPropagation();
+        event.preventDefault();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AdsTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AdsTabsComponent, isStandalone: false, selector: "ads-tabs", inputs: { tabs: "tabs", selectedIndex: "selectedIndex" }, outputs: { selectedIndexChange: "selectedIndexChange" }, ngImport: i0, template: "<mat-tab-group\n  [selectedIndex]=\"selectedIndex\"\n  (selectedIndexChange)=\"selectedIndexChange.emit($event)\"\n  class=\"custom-tabs\"\n  [disableRipple]=\"true\"\n>\n  @for(tab of tabs; track $index) {\n    @if (tab.headerTemplate) {\n      <mat-tab [disabled]=\"tab.disabled\">\n        <ng-template mat-tab-label>\n          <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\n        </ng-template>\n        @if(tab.template) {\n          <ng-container *ngTemplateOutlet=\"tab.template\"></ng-container>\n        }\n      </mat-tab>\n    } @else {\n      <mat-tab [disabled]=\"tab.disabled\" [label]=\"tab.text || ''\">\n        @if(tab.template) {\n          <ng-container *ngTemplateOutlet=\"tab.template\"></ng-container>\n        }\n      </mat-tab>\n    }\n  }\n</mat-tab-group>\n", styles: [":host::ng-deep .mat-mdc-tab.mdc-tab{border-bottom:2px solid var(--color-medium-30)}:host::ng-deep .mat-mdc-tab.mdc-tab .mdc-tab__text-label{line-height:normal;font-weight:400;color:var(--color-medium-30)!important}:host::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active{border-bottom:2px solid var(--color-primary-hover)}:host::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active .mdc-tab__text-label{color:var(--color-primary-hover)!important;font-weight:500}:host::ng-deep .mat-mdc-tab-disabled{border-bottom:2px solid var(--color-medium-opacity-50)!important}:host::ng-deep .mat-mdc-tab-disabled .mdc-tab__text-label{color:var(--color-medium-opacity-50)!important}:host::ng-deep .mdc-tab-indicator{display:none}\n"], dependencies: [{ kind: "component", type: i2$4.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: i2$4.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$4.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AdsTabsComponent, isStandalone: false, selector: "ads-tabs", inputs: { tabs: "tabs", selectedIndex: "selectedIndex" }, outputs: { selectedIndexChange: "selectedIndexChange" }, ngImport: i0, template: "<mat-tab-group\n  [selectedIndex]=\"selectedIndex\"\n  (selectedIndexChange)=\"selectedIndex = $event\"\n  (focusChange)=\"focusChange($event)\"\n  class=\"custom-tabs\"\n  [disableRipple]=\"true\"\n  (mousedown)=\"tabClicked($event)\"\n>\n  @for(tab of tabs; track $index) {\n    @if (tab.headerTemplate) {\n      <mat-tab [disabled]=\"tab.disabled\">\n        <ng-template mat-tab-label>\n          <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\n        </ng-template>\n        @if(tab.template) {\n          <ng-container *ngTemplateOutlet=\"tab.template\"></ng-container>\n        }\n      </mat-tab>\n    } @else {\n      <mat-tab [disabled]=\"tab.disabled\" [label]=\"tab.text || ''\" >\n        @if(tab.template) {\n          <ng-container *ngTemplateOutlet=\"tab.template\"></ng-container>\n        }\n      </mat-tab>\n    }\n  }\n</mat-tab-group>\n", styles: [":host::ng-deep .mat-mdc-tab.mdc-tab{border-bottom:2px solid var(--color-medium-30)}:host::ng-deep .mat-mdc-tab.mdc-tab .mdc-tab__text-label{line-height:normal;font-weight:400;color:var(--color-medium-30)!important}:host::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active{border-bottom:2px solid var(--color-primary-hover)}:host::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active .mdc-tab__text-label{color:var(--color-primary-hover)!important;font-weight:500}:host::ng-deep .mat-mdc-tab-disabled{border-bottom:2px solid var(--color-medium-opacity-50)!important}:host::ng-deep .mat-mdc-tab-disabled .mdc-tab__text-label{color:var(--color-medium-opacity-50)!important}:host::ng-deep .mdc-tab-indicator{display:none}\n"], dependencies: [{ kind: "component", type: i2$4.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: i2$4.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$4.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AdsTabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ads-tabs', standalone: false, template: "<mat-tab-group\n  [selectedIndex]=\"selectedIndex\"\n  (selectedIndexChange)=\"selectedIndexChange.emit($event)\"\n  class=\"custom-tabs\"\n  [disableRipple]=\"true\"\n>\n  @for(tab of tabs; track $index) {\n    @if (tab.headerTemplate) {\n      <mat-tab [disabled]=\"tab.disabled\">\n        <ng-template mat-tab-label>\n          <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\n        </ng-template>\n        @if(tab.template) {\n          <ng-container *ngTemplateOutlet=\"tab.template\"></ng-container>\n        }\n      </mat-tab>\n    } @else {\n      <mat-tab [disabled]=\"tab.disabled\" [label]=\"tab.text || ''\">\n        @if(tab.template) {\n          <ng-container *ngTemplateOutlet=\"tab.template\"></ng-container>\n        }\n      </mat-tab>\n    }\n  }\n</mat-tab-group>\n", styles: [":host::ng-deep .mat-mdc-tab.mdc-tab{border-bottom:2px solid var(--color-medium-30)}:host::ng-deep .mat-mdc-tab.mdc-tab .mdc-tab__text-label{line-height:normal;font-weight:400;color:var(--color-medium-30)!important}:host::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active{border-bottom:2px solid var(--color-primary-hover)}:host::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active .mdc-tab__text-label{color:var(--color-primary-hover)!important;font-weight:500}:host::ng-deep .mat-mdc-tab-disabled{border-bottom:2px solid var(--color-medium-opacity-50)!important}:host::ng-deep .mat-mdc-tab-disabled .mdc-tab__text-label{color:var(--color-medium-opacity-50)!important}:host::ng-deep .mdc-tab-indicator{display:none}\n"] }]
+            args: [{ selector: 'ads-tabs', standalone: false, template: "<mat-tab-group\n  [selectedIndex]=\"selectedIndex\"\n  (selectedIndexChange)=\"selectedIndex = $event\"\n  (focusChange)=\"focusChange($event)\"\n  class=\"custom-tabs\"\n  [disableRipple]=\"true\"\n  (mousedown)=\"tabClicked($event)\"\n>\n  @for(tab of tabs; track $index) {\n    @if (tab.headerTemplate) {\n      <mat-tab [disabled]=\"tab.disabled\">\n        <ng-template mat-tab-label>\n          <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\n        </ng-template>\n        @if(tab.template) {\n          <ng-container *ngTemplateOutlet=\"tab.template\"></ng-container>\n        }\n      </mat-tab>\n    } @else {\n      <mat-tab [disabled]=\"tab.disabled\" [label]=\"tab.text || ''\" >\n        @if(tab.template) {\n          <ng-container *ngTemplateOutlet=\"tab.template\"></ng-container>\n        }\n      </mat-tab>\n    }\n  }\n</mat-tab-group>\n", styles: [":host::ng-deep .mat-mdc-tab.mdc-tab{border-bottom:2px solid var(--color-medium-30)}:host::ng-deep .mat-mdc-tab.mdc-tab .mdc-tab__text-label{line-height:normal;font-weight:400;color:var(--color-medium-30)!important}:host::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active{border-bottom:2px solid var(--color-primary-hover)}:host::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active .mdc-tab__text-label{color:var(--color-primary-hover)!important;font-weight:500}:host::ng-deep .mat-mdc-tab-disabled{border-bottom:2px solid var(--color-medium-opacity-50)!important}:host::ng-deep .mat-mdc-tab-disabled .mdc-tab__text-label{color:var(--color-medium-opacity-50)!important}:host::ng-deep .mdc-tab-indicator{display:none}\n"] }]
         }], propDecorators: { tabs: [{
                 type: Input
             }], selectedIndex: [{
@@ -8024,7 +8041,7 @@ class AdsProgressStepperComponent {
         return Math.floor((this.window.innerWidth - this.containerPadding) / stepWidth);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AdsProgressStepperComponent, deps: [{ token: i0.Renderer2 }, { token: i1.AdsIconRegistry }, { token: Window }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AdsProgressStepperComponent, isStandalone: false, selector: "ads-progress-stepper", inputs: { isMobile: "isMobile", containerPadding: "containerPadding", steps: "steps" }, viewQueries: [{ propertyName: "stepper", first: true, predicate: ["stepper"], descendants: true }, { propertyName: "stepElements", predicate: ["stepElements"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  #stepper\n  adsGesture\n  class=\"progress-stepper\"\n  [ngStyle]=\"styles?.step\"\n  [draggable]=\"false\"\n  (gestureleft)=\"onSwipeLeft()\"\n  (gestureright)=\"onSwipeRight()\"\n>\n  @for (step of steps; track $index;  let first = $first; let last = $last) {\n  <div\n    #stepElements\n    class=\"progress-stepper-step\"\n    [draggable]=\"false\"\n  >\n      <div class=\"progress-bar\" [class.first]=\"first\" [class.last]=\"last\">\n        <div\n          class=\"progress-bar-highlight\"\n          [class.completed]=\"step.completed\"\n          [class.roundedLeft]=\"first || (!steps[$index - 1].completed && step.completed)\"\n          [class.roundedRight]=\"\n          last || (!steps[$index + 1].completed && step.completed) || (first && !steps[$index + 1].completed)\n        \"\n        ></div>\n      </div>\n      <div class=\"progress-step-info\" [class.first]=\"first\" [class.last]=\"last\">\n        <div class=\"progress-step-info-container\">\n          <div class=\"title\">\n            <div class=\"title-text\">{{ step.title }}</div>\n            @if (step.completed) {\n              <div class=\"title-completed-icon\">\n                <ads-icon name=\"check_circle_filled\" size=\"xxs\" theme=\"success\" stroke=\"success\" />\n              </div>\n            }\n\n          </div>\n          @if (step?.date) {\n            <div class=\"date\">{{ step?.date }}</div>\n          }\n        </div>\n\n      </div>\n  </div>\n  }\n</div>\n", styles: [":host{box-sizing:border-box}.progress-stepper{display:grid;max-width:100%;-webkit-user-select:none;user-select:none;transition:margin .3s ease-in-out}.progress-stepper-step{display:flex;flex-direction:column;flex:1}.progress-step-info{display:flex;flex-direction:column;align-items:center;padding:8px}.progress-step-info.first{align-items:flex-start}.progress-step-info.last{align-items:flex-end}.progress-stepper-step:last-of-type .title,.progress-stepper-step:last-of-type .date{text-align:right}.title{color:var(--color-medium);font-size:13px;font-weight:500;display:flex;height:24px;align-items:center}.title-text{margin-right:6px;line-height:24px;white-space:nowrap}.title-completed-icon{line-height:24px;display:flex;align-items:center}.date{color:var(--color-black);font-size:12px;line-height:14px;white-space:nowrap}.progress-bar{width:100%;background-color:var(--color-medium-50);height:12px}.progress-bar.first,.progress-bar.first .progress-bar-highlight{border-top-left-radius:12px;border-bottom-left-radius:12px}.progress-bar.last,.progress-bar.last .progress-bar-highlight{border-top-right-radius:12px;border-bottom-right-radius:12px}.progress-bar-highlight{height:12px;width:100%}.progress-bar-highlight.completed{background-color:var(--color-success)}.progress-bar-highlight.roundedLeft{border-top-left-radius:12px;border-bottom-left-radius:12px}.progress-bar-highlight.roundedRight{border-top-right-radius:12px;border-bottom-right-radius:12px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "directive", type: i3$4.AdsGestureDirective, selector: "[adsGesture]", outputs: ["gesturedown", "gestureleft", "gestureright", "gestureup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AdsProgressStepperComponent, isStandalone: false, selector: "ads-progress-stepper", inputs: { isMobile: "isMobile", containerPadding: "containerPadding", steps: "steps" }, viewQueries: [{ propertyName: "stepper", first: true, predicate: ["stepper"], descendants: true }, { propertyName: "stepElements", predicate: ["stepElements"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  #stepper\n  adsGesture\n  class=\"progress-stepper\"\n  [ngStyle]=\"styles?.step\"\n  [draggable]=\"false\"\n  (gestureleft)=\"onSwipeLeft()\"\n  (gestureright)=\"onSwipeRight()\"\n>\n  @for (step of steps; track $index;  let first = $first; let last = $last) {\n  <div\n    #stepElements\n    class=\"progress-stepper-step\"\n    [draggable]=\"false\"\n  >\n      <div class=\"progress-bar\" [class.first]=\"first\" [class.last]=\"last\">\n        <div\n          class=\"progress-bar-highlight\"\n          [class.completed]=\"step.completed\"\n          [class.roundedLeft]=\"first || (!steps[$index - 1].completed && step.completed)\"\n          [class.roundedRight]=\"\n          last || (!steps[$index + 1].completed && step.completed) || (first && !steps[$index + 1].completed)\n        \"\n        ></div>\n      </div>\n      <div class=\"progress-step-info\" [class.first]=\"first\" [class.last]=\"last\">\n        <div class=\"progress-step-info-container\">\n          <div class=\"title\">\n            <div class=\"title-text\">{{ step.title }}</div>\n            @if (step.completed) {\n              <div class=\"title-completed-icon\">\n                <ads-icon name=\"check_circle_filled\" size=\"xxs\" theme=\"success\" stroke=\"success\" />\n              </div>\n            }\n\n          </div>\n          @if (step?.date) {\n            <div class=\"date\">{{ step?.date }}</div>\n          }\n        </div>\n\n      </div>\n  </div>\n  }\n</div>\n", styles: [":host{box-sizing:border-box}.progress-stepper{display:grid;max-width:100%;-webkit-user-select:none;user-select:none;transition:margin .3s ease-in-out}.progress-stepper-step{display:flex;flex-direction:column;flex:1}.progress-step-info{display:flex;flex-direction:column;align-items:center;padding:8px}.progress-step-info.first{align-items:flex-start}.progress-step-info.last{align-items:flex-end}.progress-stepper-step:last-of-type .title,.progress-stepper-step:last-of-type .date{text-align:right}.title{color:var(--color-medium);font-size:13px;font-weight:500;display:flex;height:24px;align-items:center}.title-text{margin-right:6px;line-height:24px;white-space:nowrap}.title-completed-icon{line-height:24px;display:flex;align-items:center}.date{color:var(--color-black);font-size:12px;line-height:14px;white-space:nowrap}.progress-bar{width:100%;background-color:var(--color-medium-50);height:12px}.progress-bar.first,.progress-bar.first .progress-bar-highlight{border-top-left-radius:12px;border-bottom-left-radius:12px}.progress-bar.last,.progress-bar.last .progress-bar-highlight{border-top-right-radius:12px;border-bottom-right-radius:12px}.progress-bar-highlight{height:12px;width:100%}.progress-bar-highlight.completed{background-color:var(--color-success)}.progress-bar-highlight.roundedLeft{border-top-left-radius:12px;border-bottom-left-radius:12px}.progress-bar-highlight.roundedRight{border-top-right-radius:12px;border-bottom-right-radius:12px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "directive", type: i3$5.AdsGestureDirective, selector: "[adsGesture]", outputs: ["gesturedown", "gestureleft", "gestureright", "gestureup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AdsProgressStepperComponent, decorators: [{
             type: Component,