@ascentgl/ads-ui 21.115.0 → 21.117.0

package/fesm2022/ascentgl-ads-ui.mjs

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { Input, Component, NgModule, input, output, computed, ChangeDetectionStrategy, inject, model, signal, viewChild, effect, HostListener, ElementRef, ViewChild, Directive, EventEmitter, Output, InjectionToken, DestroyRef, HostBinding, Pipe, contentChild, TemplateRef, Inject, Optional, ChangeDetectorRef, Injectable, Renderer2, ViewChildren } from '@angular/core';
 import * as i1 from '@ascentgl/ads-icons';
 import { AdsIconModule, AdsIconRegistry } from '@ascentgl/ads-icons';
-import { adsIconUserCircle, adsIconBell, adsIconChevronRight, adsIconCross, adsIconPlus, adsIconWarning, adsIconLock, adsIconPlusCircle, adsIconSearch, adsIconSortDescending, adsIconCheckCircleFilled, adsIconVisibilityEye, adsIconVisibilityEyeNone, adsIconStatusProcessing, adsIconInformation, adsIconChevronDown, adsIconLoading, adsIconDatepicker, adsIconTimepicker, adsIconCheck, adsIconDropdownArrow, adsIconChevronUp, adsIconSortDownToUp, adsIconSortUpToDown, adsIconMenuFilters, adsIconSortingArrowUp, adsIconSortingArrowDown, adsIconDrag, adsIconFilter, adsIconArrowUpAndDown, adsIconListView, adsIconGridView, adsIconMenuMoreInfo, adsIconHamburgerMenu, adsIconChevronLeft, adsIconStatusNew } from '@ascentgl/ads-icons/icons';
+import { adsIconUserCircle, adsIconBell, adsIconChevronRight, adsIconCross, adsIconPlus, adsIconWarning, adsIconLock, adsIconPlusCircle, adsIconSearch, adsIconSortDescending, adsIconCheckCircleFilled, adsIconVisibilityEye, adsIconVisibilityEyeNone, adsIconStatusProcessing, adsIconInformation, adsIconChevronDown, adsIconLoading, adsIconDatepicker, adsIconTimepicker, adsIconCheck, adsIconDropdownArrow, adsIconChevronUp, adsIconSortDownToUp, adsIconSortUpToDown, adsIconMenuFilters, adsIconSortingArrowUp, adsIconSortingArrowDown, adsIconTableFilter, adsIconDrag, adsIconFilter, adsIconArrowUpAndDown, adsIconListView, adsIconGridView, adsIconMenuMoreInfo, adsIconHamburgerMenu, adsIconChevronLeft, adsIconStatusNew } from '@ascentgl/ads-icons/icons';
 import * as i1$1 from '@angular/common';
 import { CommonModule, NgOptimizedImage, NgTemplateOutlet, NgClass, NgStyle, DOCUMENT } from '@angular/common';
 import * as i2 from '@angular/material/badge';
@@ -7652,11 +7652,11 @@ class AdsExpansionPanelComponent {
         event.stopPropagation();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsExpansionPanelComponent, deps: [{ token: i1.AdsIconRegistry }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsExpansionPanelComponent, isStandalone: false, selector: "ads-expansion-panel", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, chevronColor: { classPropertyName: "chevronColor", publicName: "chevronColor", isSignal: true, isRequired: false, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: true, isRequired: false, transformFunction: null }, headerTemplateData: { classPropertyName: "headerTemplateData", publicName: "headerTemplateData", isSignal: true, isRequired: false, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, chevronSize: { classPropertyName: "chevronSize", publicName: "chevronSize", isSignal: true, isRequired: false, transformFunction: null }, headerPadding: { classPropertyName: "headerPadding", publicName: "headerPadding", isSignal: true, isRequired: false, transformFunction: null }, contentPadding: { classPropertyName: "contentPadding", publicName: "contentPadding", isSignal: true, isRequired: false, transformFunction: null }, noBorder: { classPropertyName: "noBorder", publicName: "noBorder", isSignal: true, isRequired: false, transformFunction: null }, borderColor: { classPropertyName: "borderColor", publicName: "borderColor", isSignal: true, isRequired: false, transformFunction: null }, transparentBackground: { classPropertyName: "transparentBackground", publicName: "transparentBackground", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandedChange: "expandedChange" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true, static: true }], ngImport: i0, template: "<mat-expansion-panel [expanded]=\"isExpanded()\" [ngStyle]=\"{ width: width() }\" #panel [disabled]=\"disabled()\">\n  <mat-expansion-panel-header>\n    <mat-panel-title>\n      @if (!!headerTemplate()) {\n        <ng-container *ngTemplateOutlet=\"headerTemplate()!; context: { data: headerTemplateData() }\" />\n      } @else {\n        {{ header() }}\n      }\n    </mat-panel-title>\n    <mat-panel-description (click)=\"toggleAndStop(panel, $event)\">\n      @if (panel.expanded) {\n        <ads-icon [size]=\"chevronSize() === 'base' ? 'xs' : 'xxxs'\" name=\"chevron_up\" [theme]=\"chevronColor()\" />\n      } @else {\n        <ads-icon [size]=\"chevronSize() === 'base' ? 'xs' : 'xxxs'\" name=\"chevron_down\" [theme]=\"chevronColor()\" />\n      }\n    </mat-panel-description>\n  </mat-expansion-panel-header>\n  <ng-content />\n</mat-expansion-panel>\n", styles: [".mat-expansion-panel{--mat-expansion-container-shape: 5px;--mat-expansion-container-text-color: var(--color-medium);--mat-expansion-container-text-size: font-size(text-base);box-shadow:none!important;border:1px solid}.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"], 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: "component", type: i6$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i6$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: i6$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i6$1.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsExpansionPanelComponent, isStandalone: false, selector: "ads-expansion-panel", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, chevronColor: { classPropertyName: "chevronColor", publicName: "chevronColor", isSignal: true, isRequired: false, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: true, isRequired: false, transformFunction: null }, headerTemplateData: { classPropertyName: "headerTemplateData", publicName: "headerTemplateData", isSignal: true, isRequired: false, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, chevronSize: { classPropertyName: "chevronSize", publicName: "chevronSize", isSignal: true, isRequired: false, transformFunction: null }, headerPadding: { classPropertyName: "headerPadding", publicName: "headerPadding", isSignal: true, isRequired: false, transformFunction: null }, contentPadding: { classPropertyName: "contentPadding", publicName: "contentPadding", isSignal: true, isRequired: false, transformFunction: null }, noBorder: { classPropertyName: "noBorder", publicName: "noBorder", isSignal: true, isRequired: false, transformFunction: null }, borderColor: { classPropertyName: "borderColor", publicName: "borderColor", isSignal: true, isRequired: false, transformFunction: null }, transparentBackground: { classPropertyName: "transparentBackground", publicName: "transparentBackground", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandedChange: "expandedChange" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true, static: true }], ngImport: i0, template: "<mat-expansion-panel [expanded]=\"isExpanded()\" [ngStyle]=\"{ width: width() }\" #panel [disabled]=\"disabled()\">\n  <mat-expansion-panel-header>\n    <mat-panel-title>\n      @if (!!headerTemplate()) {\n        <ng-container *ngTemplateOutlet=\"headerTemplate()!; context: { data: headerTemplateData() }\" />\n      } @else {\n        {{ header() }}\n      }\n    </mat-panel-title>\n    <mat-panel-description (click)=\"toggleAndStop(panel, $event)\">\n      @if (panel.expanded) {\n        <ads-icon [size]=\"chevronSize() === 'base' ? 'xs' : 'xxxs'\" name=\"chevron_up\" [theme]=\"chevronColor()\" />\n      } @else {\n        <ads-icon [size]=\"chevronSize() === 'base' ? 'xs' : 'xxxs'\" name=\"chevron_down\" [theme]=\"chevronColor()\" />\n      }\n    </mat-panel-description>\n  </mat-expansion-panel-header>\n  <ng-content />\n</mat-expansion-panel>\n", styles: [".mat-expansion-panel{--mat-expansion-container-shape: 5px;--mat-expansion-container-text-color: var(--color-medium);--mat-expansion-container-text-size: font-size(text-base);--mat-expansion-container-background-color: transparent;box-shadow:none!important;border:1px solid}.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"], 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: "component", type: i6$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i6$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: i6$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i6$1.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsExpansionPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ads-expansion-panel', standalone: false, template: "<mat-expansion-panel [expanded]=\"isExpanded()\" [ngStyle]=\"{ width: width() }\" #panel [disabled]=\"disabled()\">\n  <mat-expansion-panel-header>\n    <mat-panel-title>\n      @if (!!headerTemplate()) {\n        <ng-container *ngTemplateOutlet=\"headerTemplate()!; context: { data: headerTemplateData() }\" />\n      } @else {\n        {{ header() }}\n      }\n    </mat-panel-title>\n    <mat-panel-description (click)=\"toggleAndStop(panel, $event)\">\n      @if (panel.expanded) {\n        <ads-icon [size]=\"chevronSize() === 'base' ? 'xs' : 'xxxs'\" name=\"chevron_up\" [theme]=\"chevronColor()\" />\n      } @else {\n        <ads-icon [size]=\"chevronSize() === 'base' ? 'xs' : 'xxxs'\" name=\"chevron_down\" [theme]=\"chevronColor()\" />\n      }\n    </mat-panel-description>\n  </mat-expansion-panel-header>\n  <ng-content />\n</mat-expansion-panel>\n", styles: [".mat-expansion-panel{--mat-expansion-container-shape: 5px;--mat-expansion-container-text-color: var(--color-medium);--mat-expansion-container-text-size: font-size(text-base);box-shadow:none!important;border:1px solid}.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"] }]
+            args: [{ selector: 'ads-expansion-panel', standalone: false, template: "<mat-expansion-panel [expanded]=\"isExpanded()\" [ngStyle]=\"{ width: width() }\" #panel [disabled]=\"disabled()\">\n  <mat-expansion-panel-header>\n    <mat-panel-title>\n      @if (!!headerTemplate()) {\n        <ng-container *ngTemplateOutlet=\"headerTemplate()!; context: { data: headerTemplateData() }\" />\n      } @else {\n        {{ header() }}\n      }\n    </mat-panel-title>\n    <mat-panel-description (click)=\"toggleAndStop(panel, $event)\">\n      @if (panel.expanded) {\n        <ads-icon [size]=\"chevronSize() === 'base' ? 'xs' : 'xxxs'\" name=\"chevron_up\" [theme]=\"chevronColor()\" />\n      } @else {\n        <ads-icon [size]=\"chevronSize() === 'base' ? 'xs' : 'xxxs'\" name=\"chevron_down\" [theme]=\"chevronColor()\" />\n      }\n    </mat-panel-description>\n  </mat-expansion-panel-header>\n  <ng-content />\n</mat-expansion-panel>\n", styles: [".mat-expansion-panel{--mat-expansion-container-shape: 5px;--mat-expansion-container-text-color: var(--color-medium);--mat-expansion-container-text-size: font-size(text-base);--mat-expansion-container-background-color: transparent;box-shadow:none!important;border:1px solid}.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"] }]
         }], ctorParameters: () => [{ type: i1.AdsIconRegistry }, { type: i0.ElementRef }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], chevronColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "chevronColor", required: false }] }], headerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTemplate", required: false }] }], headerTemplateData: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTemplateData", required: false }] }], isExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isExpanded", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], chevronSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "chevronSize", required: false }] }], headerPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerPadding", required: false }] }], contentPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentPadding", required: false }] }], noBorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "noBorder", required: false }] }], borderColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderColor", required: false }] }], transparentBackground: [{ type: i0.Input, args: [{ isSignal: true, alias: "transparentBackground", required: false }] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }], panel: [{
                 type: ViewChild,
                 args: ['panel', { static: true }]
@@ -8017,15 +8017,29 @@ class AdsCustomHeaderComponent {
     constructor(registry) {
         this.registry = registry;
         this.menuOpen = false;
-        this.registry.register([adsIconMenuFilters, adsIconSortingArrowUp, adsIconSortingArrowDown]);
+        this.registry.register([adsIconMenuFilters, adsIconSortingArrowUp, adsIconSortingArrowDown, adsIconTableFilter]);
     }
+    static { this.ACTIVE_CLASS = 'ag-header-cell--active'; }
     agInit(params) {
         this.params = params;
+        this.updateHeaderCellClass();
     }
     refresh(params) {
         this.params = params;
+        this.updateHeaderCellClass();
         return true;
     }
+    updateHeaderCellClass() {
+        const el = this.params.eGridHeader;
+        if (!el)
+            return;
+        if (this.isActive) {
+            el.classList.add(AdsCustomHeaderComponent.ACTIVE_CLASS);
+        }
+        else {
+            el.classList.remove(AdsCustomHeaderComponent.ACTIVE_CLASS);
+        }
+    }
     get displayName() {
         return this.params.displayName || '';
     }
@@ -8047,12 +8061,18 @@ class AdsCustomHeaderComponent {
     get isColumnSorted() {
         return this.params.isColumnSorted?.(this.field) ?? false;
     }
+    get sortOrder() {
+        return this.params.getColumnSortOrder?.(this.field) ?? 0;
+    }
     get isColumnFiltered() {
         return this.params.isColumnFiltered?.(this.field) ?? false;
     }
     get isActive() {
         return this.isColumnSorted || this.isColumnFiltered;
     }
+    get sortArrowColor() {
+        return this.isActive ? 'secondary' : 'iconPrimary';
+    }
     get isLastColumn() {
         const allColumns = this.params.api.getAllDisplayedColumns();
         const lastColumn = allColumns[allColumns.length - 1];
@@ -8060,9 +8080,11 @@ class AdsCustomHeaderComponent {
     }
     onSortChanged(event) {
         this.params.onSortChanged?.(event);
+        this.updateHeaderCellClass();
     }
     onFilterChanged(event) {
         this.params.onFilterChanged?.(event);
+        this.updateHeaderCellClass();
     }
     onHideColumn(field) {
         this.params.onHideColumn?.(field);
@@ -8077,11 +8099,11 @@ class AdsCustomHeaderComponent {
         this.params.onMenuClosed?.();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsCustomHeaderComponent, deps: [{ token: i1.AdsIconRegistry }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsCustomHeaderComponent, isStandalone: false, selector: "ads-custom-header", ngImport: i0, template: "<div class=\"ads-custom-header\">\n  <span\n    class=\"menu-trigger-anchor\"\n    [class.align-right]=\"isLastColumn\"\n    #menuTrigger=\"matMenuTrigger\"\n    [matMenuTriggerFor]=\"sortFilterMenu\"\n    (menuOpened)=\"menuOpen = true\"\n    (menuClosed)=\"closeMenu()\"\n  ></span>\n\n  <span class=\"header-text\">{{ displayName }}</span>\n\n  @if (hasSortFilterConfig) {\n    <button\n      class=\"header-menu-button\"\n      [class.active]=\"isActive\"\n      (click)=\"menuTrigger.openMenu(); $event.stopPropagation()\"\n    >\n      @if (sortDirection === 'asc') {\n        <ads-icon name=\"sorting_arrow_up\" theme=\"iconPrimary\" stroke=\"iconPrimary\" size=\"auto\" />\n      } @else if (sortDirection === 'desc') {\n        <ads-icon name=\"sorting_arrow_down\" theme=\"iconPrimary\" stroke=\"iconPrimary\" size=\"auto\" />\n      } @else {\n        <ads-icon name=\"menu_filters\" theme=\"iconPrimary\" stroke=\"iconPrimary\" size=\"auto\" />\n      }\n    </button>\n  }\n</div>\n\n<mat-menu #sortFilterMenu=\"matMenu\" class=\"column-sort-filter-panel\" [xPosition]=\"isLastColumn ? 'before' : 'after'\">\n  @if (sortFilterConfig) {\n    <ads-column-sort-filter-menu\n      [config]=\"sortFilterConfig\"\n      [currentSortDirection]=\"sortDirection\"\n      [selectedFilterValues]=\"filterValues\"\n      (sortChanged)=\"onSortChanged($event)\"\n      (filterChanged)=\"onFilterChanged($event)\"\n      (hideColumn)=\"onHideColumn($event)\"\n    />\n  }\n</mat-menu>\n\n", styles: [":host{display:block;width:100%;height:100%}.ads-custom-header{display:flex;align-items:center;justify-content:flex-start;width:100%;height:100%;position:relative}.ads-custom-header .menu-trigger-anchor{position:absolute;left:0;bottom:0;width:1px;height:1px;pointer-events:none}.ads-custom-header .menu-trigger-anchor.align-right{left:auto;right:0}.ads-custom-header .header-text{font-weight:600;font-size:16px;line-height:21px;color:var(--color-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-custom-header .header-menu-button{display:flex;align-items:center;justify-content:center;gap:2px;padding:4px;background:transparent;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s ease;flex-shrink:0}::ng-deep .column-sort-filter-panel{margin-top:1px}::ng-deep .column-sort-filter-panel .mat-mdc-menu-content{padding:0}\n"], dependencies: [{ kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i4$2.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: AdsColumnSortFilterMenuComponent, selector: "ads-column-sort-filter-menu", inputs: ["config", "currentSortDirection", "selectedFilterValues"], outputs: ["sortChanged", "filterChanged", "hideColumn"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsCustomHeaderComponent, isStandalone: false, selector: "ads-custom-header", ngImport: i0, template: "<div class=\"ads-custom-header\">\n  <span\n    class=\"menu-trigger-anchor\"\n    [class.align-right]=\"isLastColumn\"\n    #menuTrigger=\"matMenuTrigger\"\n    [matMenuTriggerFor]=\"sortFilterMenu\"\n    (menuOpened)=\"menuOpen = true\"\n    (menuClosed)=\"closeMenu()\"\n  ></span>\n\n  <span class=\"header-text\" [class.header-text--filtered]=\"isColumnFiltered\" [class.header-text--sorted]=\"isColumnSorted\">\n    @if (isColumnSorted) {\n      <div class=\"sort-order-badge\">\n        <span>{{ sortOrder }}</span>\n      </div>\n    }\n    @if (isColumnFiltered) {\n      <ads-icon name=\"table_filter\" size=\"xxs_16\" stroke=\"secondary\" />\n    }\n    {{ displayName }}\n  </span>\n\n  @if (hasSortFilterConfig) {\n    <button\n      class=\"header-menu-button\"\n      [class.active]=\"isActive\"\n      (click)=\"menuTrigger.openMenu(); $event.stopPropagation()\"\n    >\n      @if (sortDirection === 'asc') {\n        <ads-icon name=\"sorting_arrow_up\" [theme]=\"sortArrowColor\" [stroke]=\"sortArrowColor\" size=\"auto\" />\n      } @else if (sortDirection === 'desc') {\n        <ads-icon name=\"sorting_arrow_down\" [theme]=\"sortArrowColor\" [stroke]=\"sortArrowColor\" size=\"auto\" />\n      } @else {\n        <ads-icon name=\"menu_filters\" [theme]=\"sortArrowColor\" [stroke]=\"sortArrowColor\" size=\"auto\" />\n      }\n    </button>\n  }\n</div>\n\n<mat-menu #sortFilterMenu=\"matMenu\" class=\"column-sort-filter-panel\" [xPosition]=\"isLastColumn ? 'before' : 'after'\">\n  @if (sortFilterConfig) {\n    <ads-column-sort-filter-menu\n      [config]=\"sortFilterConfig\"\n      [currentSortDirection]=\"sortDirection\"\n      [selectedFilterValues]=\"filterValues\"\n      (sortChanged)=\"onSortChanged($event)\"\n      (filterChanged)=\"onFilterChanged($event)\"\n      (hideColumn)=\"onHideColumn($event)\"\n    />\n  }\n</mat-menu>\n\n", styles: [":host{display:block;width:100%;height:100%}.ads-custom-header{display:flex;align-items:center;justify-content:flex-start;width:100%;height:100%;position:relative}.ads-custom-header .menu-trigger-anchor{position:absolute;left:0;bottom:0;width:1px;height:1px;pointer-events:none}.ads-custom-header .menu-trigger-anchor.align-right{left:auto;right:0}.ads-custom-header .header-text{font-weight:600;font-size:16px;line-height:21px;color:var(--color-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-custom-header .header-text--filtered,.ads-custom-header .header-text--sorted{display:flex;align-items:center;gap:8px;overflow:visible;color:var(--color-secondary)}.ads-custom-header .header-text .sort-order-badge{display:flex;width:20px;height:20px;flex-direction:column;justify-content:center;align-items:center;border-radius:100px;background:var(--color-secondary)}.ads-custom-header .header-text .sort-order-badge span{color:var(--color-white);text-align:center;font-size:12px;font-weight:600;line-height:16px}.ads-custom-header .header-menu-button{display:flex;align-items:center;justify-content:center;gap:2px;padding:4px;background:transparent;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s ease;flex-shrink:0}::ng-deep .column-sort-filter-panel{margin-top:1px}::ng-deep .column-sort-filter-panel .mat-mdc-menu-content{padding:0}\n"], dependencies: [{ kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i4$2.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: AdsColumnSortFilterMenuComponent, selector: "ads-column-sort-filter-menu", inputs: ["config", "currentSortDirection", "selectedFilterValues"], outputs: ["sortChanged", "filterChanged", "hideColumn"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsCustomHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ads-custom-header', standalone: false, template: "<div class=\"ads-custom-header\">\n  <span\n    class=\"menu-trigger-anchor\"\n    [class.align-right]=\"isLastColumn\"\n    #menuTrigger=\"matMenuTrigger\"\n    [matMenuTriggerFor]=\"sortFilterMenu\"\n    (menuOpened)=\"menuOpen = true\"\n    (menuClosed)=\"closeMenu()\"\n  ></span>\n\n  <span class=\"header-text\">{{ displayName }}</span>\n\n  @if (hasSortFilterConfig) {\n    <button\n      class=\"header-menu-button\"\n      [class.active]=\"isActive\"\n      (click)=\"menuTrigger.openMenu(); $event.stopPropagation()\"\n    >\n      @if (sortDirection === 'asc') {\n        <ads-icon name=\"sorting_arrow_up\" theme=\"iconPrimary\" stroke=\"iconPrimary\" size=\"auto\" />\n      } @else if (sortDirection === 'desc') {\n        <ads-icon name=\"sorting_arrow_down\" theme=\"iconPrimary\" stroke=\"iconPrimary\" size=\"auto\" />\n      } @else {\n        <ads-icon name=\"menu_filters\" theme=\"iconPrimary\" stroke=\"iconPrimary\" size=\"auto\" />\n      }\n    </button>\n  }\n</div>\n\n<mat-menu #sortFilterMenu=\"matMenu\" class=\"column-sort-filter-panel\" [xPosition]=\"isLastColumn ? 'before' : 'after'\">\n  @if (sortFilterConfig) {\n    <ads-column-sort-filter-menu\n      [config]=\"sortFilterConfig\"\n      [currentSortDirection]=\"sortDirection\"\n      [selectedFilterValues]=\"filterValues\"\n      (sortChanged)=\"onSortChanged($event)\"\n      (filterChanged)=\"onFilterChanged($event)\"\n      (hideColumn)=\"onHideColumn($event)\"\n    />\n  }\n</mat-menu>\n\n", styles: [":host{display:block;width:100%;height:100%}.ads-custom-header{display:flex;align-items:center;justify-content:flex-start;width:100%;height:100%;position:relative}.ads-custom-header .menu-trigger-anchor{position:absolute;left:0;bottom:0;width:1px;height:1px;pointer-events:none}.ads-custom-header .menu-trigger-anchor.align-right{left:auto;right:0}.ads-custom-header .header-text{font-weight:600;font-size:16px;line-height:21px;color:var(--color-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-custom-header .header-menu-button{display:flex;align-items:center;justify-content:center;gap:2px;padding:4px;background:transparent;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s ease;flex-shrink:0}::ng-deep .column-sort-filter-panel{margin-top:1px}::ng-deep .column-sort-filter-panel .mat-mdc-menu-content{padding:0}\n"] }]
+            args: [{ selector: 'ads-custom-header', standalone: false, template: "<div class=\"ads-custom-header\">\n  <span\n    class=\"menu-trigger-anchor\"\n    [class.align-right]=\"isLastColumn\"\n    #menuTrigger=\"matMenuTrigger\"\n    [matMenuTriggerFor]=\"sortFilterMenu\"\n    (menuOpened)=\"menuOpen = true\"\n    (menuClosed)=\"closeMenu()\"\n  ></span>\n\n  <span class=\"header-text\" [class.header-text--filtered]=\"isColumnFiltered\" [class.header-text--sorted]=\"isColumnSorted\">\n    @if (isColumnSorted) {\n      <div class=\"sort-order-badge\">\n        <span>{{ sortOrder }}</span>\n      </div>\n    }\n    @if (isColumnFiltered) {\n      <ads-icon name=\"table_filter\" size=\"xxs_16\" stroke=\"secondary\" />\n    }\n    {{ displayName }}\n  </span>\n\n  @if (hasSortFilterConfig) {\n    <button\n      class=\"header-menu-button\"\n      [class.active]=\"isActive\"\n      (click)=\"menuTrigger.openMenu(); $event.stopPropagation()\"\n    >\n      @if (sortDirection === 'asc') {\n        <ads-icon name=\"sorting_arrow_up\" [theme]=\"sortArrowColor\" [stroke]=\"sortArrowColor\" size=\"auto\" />\n      } @else if (sortDirection === 'desc') {\n        <ads-icon name=\"sorting_arrow_down\" [theme]=\"sortArrowColor\" [stroke]=\"sortArrowColor\" size=\"auto\" />\n      } @else {\n        <ads-icon name=\"menu_filters\" [theme]=\"sortArrowColor\" [stroke]=\"sortArrowColor\" size=\"auto\" />\n      }\n    </button>\n  }\n</div>\n\n<mat-menu #sortFilterMenu=\"matMenu\" class=\"column-sort-filter-panel\" [xPosition]=\"isLastColumn ? 'before' : 'after'\">\n  @if (sortFilterConfig) {\n    <ads-column-sort-filter-menu\n      [config]=\"sortFilterConfig\"\n      [currentSortDirection]=\"sortDirection\"\n      [selectedFilterValues]=\"filterValues\"\n      (sortChanged)=\"onSortChanged($event)\"\n      (filterChanged)=\"onFilterChanged($event)\"\n      (hideColumn)=\"onHideColumn($event)\"\n    />\n  }\n</mat-menu>\n\n", styles: [":host{display:block;width:100%;height:100%}.ads-custom-header{display:flex;align-items:center;justify-content:flex-start;width:100%;height:100%;position:relative}.ads-custom-header .menu-trigger-anchor{position:absolute;left:0;bottom:0;width:1px;height:1px;pointer-events:none}.ads-custom-header .menu-trigger-anchor.align-right{left:auto;right:0}.ads-custom-header .header-text{font-weight:600;font-size:16px;line-height:21px;color:var(--color-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-custom-header .header-text--filtered,.ads-custom-header .header-text--sorted{display:flex;align-items:center;gap:8px;overflow:visible;color:var(--color-secondary)}.ads-custom-header .header-text .sort-order-badge{display:flex;width:20px;height:20px;flex-direction:column;justify-content:center;align-items:center;border-radius:100px;background:var(--color-secondary)}.ads-custom-header .header-text .sort-order-badge span{color:var(--color-white);text-align:center;font-size:12px;font-weight:600;line-height:16px}.ads-custom-header .header-menu-button{display:flex;align-items:center;justify-content:center;gap:2px;padding:4px;background:transparent;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s ease;flex-shrink:0}::ng-deep .column-sort-filter-panel{margin-top:1px}::ng-deep .column-sort-filter-panel .mat-mdc-menu-content{padding:0}\n"] }]
         }], ctorParameters: () => [{ type: i1.AdsIconRegistry }] });
 
 class AdsColumnSortFilterMenuModule {
@@ -8877,6 +8899,7 @@ class AdsTableComponent {
                         getFilterValues: this.getColumnFilterValues.bind(this),
                         isColumnSorted: this.isColumnSorted.bind(this),
                         isColumnFiltered: this.isColumnFiltered.bind(this),
+                        getColumnSortOrder: this.getColumnSortOrder.bind(this),
                     },
                     sortable: true, // Enable AG Grid sorting
                     comparator: comparator,
@@ -9118,11 +9141,28 @@ class AdsTableComponent {
         if (hiddenCount === 0) {
             return 'Hide Column';
         }
-        else if (hiddenCount === 1) {
-            return '1 Hidden Column';
+        else {
+            return `Hidden Column (${hiddenCount})`;
+        }
+    }
+    /** @ignore */
+    get filterButtonLabel() {
+        const filteredCount = this.filteredColumns().length;
+        if (filteredCount === 0) {
+            return 'Filter';
+        }
+        else {
+            return `Filter (${filteredCount})`;
+        }
+    }
+    /** @ignore */
+    get sortButtonLabel() {
+        const sortedCount = this.sortedColumns.length;
+        if (sortedCount === 0) {
+            return 'Sort';
         }
         else {
-            return `${hiddenCount} Hidden Columns`;
+            return `Sort (${sortedCount})`;
         }
     }
     /** @ignore */
@@ -9646,6 +9686,11 @@ class AdsTableComponent {
         return this.columnSortStates().get(field) !== null && this.columnSortStates().get(field) !== undefined;
     }
     /** @ignore */
+    getColumnSortOrder(field) {
+        const index = this.sortedColumns.indexOf(field);
+        return index === -1 ? 0 : index + 1;
+    }
+    /** @ignore */
     isColumnFiltered(field) {
         // Use base config to get all possible options (not filtered options)
         const config = this.getBaseColumnSortFilterConfig(field);
@@ -9821,15 +9866,33 @@ class AdsTableComponent {
         });
         // Remove filters for hidden columns
         if (columnsBeingHidden.length > 0) {
+            // Clear AG Grid native filter model
             const updatedFilterModel = { ...currentFilterModel };
             columnsBeingHidden.forEach(colId => {
                 delete updatedFilterModel[colId];
             });
             this.gridApi.setFilterModel(updatedFilterModel);
+            // Clear custom column filter states for hidden columns
+            const newFilterStates = new Map(this.columnFilterStates());
+            columnsBeingHidden.forEach(colId => {
+                newFilterStates.delete(colId);
+            });
+            this.columnFilterStates.set(newFilterStates);
+            this.invalidateFilterCache();
+            // Re-evaluate external filters so grid rows update immediately
+            this.gridApi.onFilterChanged();
+            // Emit columnFilterChanged for each cleared column so external listeners (e.g. header dropdowns) can sync
+            columnsBeingHidden.forEach(colId => {
+                this.columnFilterChanged.emit({ field: colId, values: [] });
+            });
         }
         // Update internal state tracking
         this.updateSortingState();
         this.updateFilteringState();
+        // Refresh headers so remaining columns reflect updated sort/filter state
+        if (this.enableCustomSortFilter) {
+            this.gridApi.refreshHeader();
+        }
         // Fit columns to grid width after visibility changes (only when grid is visible)
         setTimeout(() => {
             if (!this.isListView()) {
@@ -10104,11 +10167,11 @@ class AdsTableComponent {
         return options.map((v) => this.serializeCellValue(v));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsTableComponent, deps: [{ token: i0.ElementRef }, { token: i1.AdsIconRegistry }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsTableComponent, isStandalone: false, selector: "ads-table", inputs: { width: "width", height: "height", headerTemplate: "headerTemplate", gridOptions: "gridOptions", rowData: "rowData", columnDefs: "columnDefs", icons: "icons", defaultColDef: "defaultColDef", loading: "loading", columnDefsByBreakpoint: "columnDefsByBreakpoint", showHeaderActions: "showHeaderActions", showChangeViewButton: "showChangeViewButton", defaultViewMode: "defaultViewMode", listItemTemplate: "listItemTemplate", listBatchSize: "listBatchSize", enableCustomSortFilter: "enableCustomSortFilter", mobileHeaderView: "mobileHeaderView", showBorder: "showBorder", columnSortFilterConfigs: "columnSortFilterConfigs" }, outputs: { filtersCleared: "filtersCleared", columnFilterChanged: "columnFilterChanged", viewChanged: "viewChanged" }, viewQueries: [{ propertyName: "virtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "menuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"ads-table-container\" [style.width]=\"width\" [class.with-header]=\"showHeaderActions\" [class.no-border]=\"!showBorder\">\n  @if (showHeaderActions) {\n    <div class=\"table-header\">\n      <div class=\"header-template-container\">\n        @if (showChangeViewButton) {\n          <div class=\"change-view-button\" (click)=\"toggleView()\">\n            @if (isListView()) {\n              <ads-icon name=\"grid_view\" size=\"xxxs\" stroke=\"iconPrimary\" />\n            } @else {\n              <ads-icon name=\"list_view\" size=\"xxxs\" stroke=\"iconPrimary\" />\n            }\n          </div>\n        }\n        <div class=\"header-template\">\n          @if (headerTemplate) {\n            <ng-container *ngTemplateOutlet=\"headerTemplate\" />\n          }\n        </div>\n\n      </div>\n\n      <div class=\"header-actions\">\n        @if (!isListView()) {\n          <ads-table-button\n            id=\"show-hide-columns-button\"\n            [matMenuTriggerFor]=\"columnVisibilityMenu\"\n            (menuOpened)=\"openColumnVisibilityMenu()\"\n            (menuClosed)=\"onColumnVisibilityMenuClosed()\"\n          >\n            <ads-icon\n              name=\"visibility_eye_none\"\n              theme=\"secondary\"\n              stroke=\"secondary\"\n              size=\"xxxs\"\n            />\n            @if (!mobileHeaderView) {\n              {{ hideColumnButtonLabel }}\n            }\n          </ads-table-button>\n        }\n\n        <ads-table-button\n          id=\"filter-button\"\n          [matMenuTriggerFor]=\"filterMenu\"\n          (menuOpened)=\"openFilterMenu()\"\n          (menuClosed)=\"onFilterMenuClosed()\"\n        >\n          <ads-icon\n            name=\"filter\"\n            theme=\"secondary\"\n            size=\"xxxs\"\n          />\n          @if (!mobileHeaderView) {\n           Filter\n          }\n\n        </ads-table-button>\n        <ads-table-button\n          id=\"sort-button\"\n          [matMenuTriggerFor]=\"sortMenu\"\n        >\n          <ads-icon\n            name=\"arrow_up_and_down\"\n            theme=\"secondary\"\n            size=\"xxxs\"\n          />\n          @if (!mobileHeaderView) {\n            Sort\n          }\n        </ads-table-button>\n      </div>\n    </div>\n  }\n\n  <ag-grid-angular\n    [ngStyle]=\"{ height: height }\"\n    [style.display]=\"isListView() ? 'none' : ''\"\n    [icons]=\"getAgGridIcons()\"\n    class=\"ag-theme-quartz\"\n    [gridOptions]=\"gridOptions\"\n    [rowData]=\"rowData\"\n    [columnDefs]=\"getProcessedColumnDefs()\"\n    [defaultColDef]=\"getDefaultColDef()\"\n    [components]=\"frameworkComponents\"\n    [isExternalFilterPresent]=\"isExternalFilterPresent\"\n    [doesExternalFilterPass]=\"doesExternalFilterPass\"\n    (gridReady)=\"gridReady($event)\"\n    (firstDataRendered)=\"firstDataRendered($event)\"\n    (sortChanged)=\"sortChanged($event)\"\n    (filterChanged)=\"filterChanged($event)\"\n    [theme]=\"themeQuartz\"\n    [loading]=\"loading\"\n    [enableCellTextSelection]=\"true\"\n    [ensureDomOrder]=\"true\"\n  />\n\n  @if (isListView()) {\n    @if (loading) {\n      <div class=\"list-view-container list-view-loading-container\" [ngStyle]=\"{ height: height }\">\n        <div class=\"list-view-loading\">\n          <ads-progress-spinner [size]=\"SpinnerSize.small\" />\n        </div>\n      </div>\n    } @else {\n      <cdk-virtual-scroll-viewport\n        class=\"list-view-container\"\n        [itemSize]=\"listItemHeight()\"\n        [minBufferPx]=\"listItemHeight() * 4\"\n        [maxBufferPx]=\"listItemHeight() * 8\"\n        [ngStyle]=\"{ height: height }\"\n      >\n        <div\n          *cdkVirtualFor=\"let row of listRowDataCache(); trackBy: listTrackBy\"\n          class=\"list-view-item\"\n        >\n          @if (listItemTemplate) {\n            <ng-container\n              [ngTemplateOutlet]=\"listItemTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: row }\"\n            />\n          }\n        </div>\n      </cdk-virtual-scroll-viewport>\n    }\n  }\n\n  <!-- Column Visibility Menu -->\n  <mat-menu #columnVisibilityMenu=\"matMenu\" class=\"column-visibility-menu\" [class.has-header]=\"showHeaderActions\">\n    <div class=\"menu-content\" (click)=\"$event.stopPropagation()\">\n      <p class=\"dropdown-label\">Show/Hide Columns</p>\n      <div class=\"dropdown-body\">\n        @for (column of columnVisibilityList(); track $index) {\n          <div class=\"column-row\">\n            <span\n              class=\"column-name\"\n              [matTooltip]=\"column.headerName\"\n              [matTooltipDisabled]=\"getTooltipDisabled(column.headerName)\"\n            >\n              {{ column.headerName }}\n            </span>\n            <div class=\"column-toggle\">\n              <ads-slide-toggle\n                [id]=\"'toggle-' + column.field\"\n                [control]=\"column.control\"\n                [showFooter]=\"false\"\n                [customTitles]=\"['Show', 'Hide']\"\n              />\n            </div>\n          </div>\n        }\n      </div>\n\n      <ads-divider />\n\n      <div class=\"dropdown-footer\">\n        <ads-button\n          [fullWidth]=\"true\"\n          (click)=\"hideAllColumns()\"\n          [disabled]=\"allColumnsHidden\"\n          variant=\"tertiary\"\n          id='hide-all-button'\n          size=\"xs\"\n        >\n          Hide All\n        </ads-button>\n        <ads-button\n          [fullWidth]=\"true\"\n          (click)=\"showAllColumns()\"\n          [disabled]=\"allColumnsVisible\"\n          variant=\"tertiary\"\n          id=\"show-all-button\"\n          size=\"xs\"\n        >\n          Show All\n        </ads-button>\n      </div>\n    </div>\n  </mat-menu>\n\n  <!-- Filter Menu -->\n  <mat-menu #filterMenu=\"matMenu\" class=\"filter-menu-panel\" (closed)=\"filterMenuComponent.onMenuClosed()\">\n    <ads-filter-menu\n      #filterMenuComponent\n      [columnSortFilterConfigs]=\"columnSortFilterConfigs\"\n      [columnFilterStates]=\"columnFilterStates()\"\n      [getFilterOptionsForField]=\"getFilterOptionsForFieldFn\"\n      [getHierarchicalFilterOptionsForField]=\"getHierarchicalFilterOptionsForFieldFn\"\n      [getFilterValuesForField]=\"getFilterValuesForFieldFn\"\n      [isColumnFilteredFn]=\"isColumnFilteredFn\"\n      [getFilterValueFormatterForField]=\"getFilterValueFormatterForFieldFn\"\n      (filterChanged)=\"onFilterMenuFilterChanged($event)\"\n      (filtersRemoved)=\"onFilterMenuFilterRemoved($event)\"\n    />\n  </mat-menu>\n\n  <!-- Sort Menu -->\n  <mat-menu #sortMenu=\"matMenu\" class=\"sort-menu-panel\">\n    <ads-sort-menu\n      [columnSortFilterConfigs]=\"columnSortFilterConfigs\"\n      [columnSortStates]=\"columnSortStates()\"\n      (sortChanged)=\"onSortMenuSortChanged($event)\"\n      (sortsRemoved)=\"onSortMenuSortsRemoved($event)\"\n    />\n  </mat-menu>\n</div>\n", styles: [":host::ng-deep{--ag-wrapper-border-radius: 10px}:host::ng-deep ag-grid-angular{--ag-grid-size: 4px;--ag-border-radius: 5px;--ag-font-family: \"Roboto\";--ag-font-size: 16px;--ag-header-foreground-color: var(--color-medium);--ag-header-background-color: var(--color-light-30);--ag-background-color: var(--color-white);--ag-header-height: 45px;--ag-row-height: 45px;--ag-border-color: var(--color-light);--ag-foreground-color: var(--color-medium);--ag-spacing: 4px;--ag-inherited-accent-color: var(--color-secondary-hover)}:host::ng-deep ag-grid-angular .ag-overlay-no-matching-rows-wrapper{display:flex;justify-content:center;align-items:center;height:100%}:host::ng-deep ag-grid-angular .ag-overlay-no-matching-rows-wrapper .ag-overlay-no-matching-rows-center{color:var(--color-medium);font-family:Roboto,sans-serif;font-size:16px;border:none;padding:0;background:transparent}:host::ng-deep ag-grid-angular .ag-header-cell-text{font-weight:600;line-height:21px}:host::ng-deep ag-grid-angular .ag-cell:focus,:host::ng-deep ag-grid-angular .ag-cell-focus{outline:none!important;border:none!important;box-shadow:none!important}:host::ng-deep ag-grid-angular .ag-row,:host::ng-deep ag-grid-angular .ag-header,:host::ng-deep ag-grid-angular .ag-advanced-filter-header{border-bottom:none}:host::ng-deep ag-grid-angular .ag-row-even{background-color:var(--color-white)}:host::ng-deep ag-grid-angular .ag-row-odd{background-color:var(--color-white)}:host::ng-deep ag-grid-angular .ag-sort-indicator-container{min-width:fit-content}:host::ng-deep ag-grid-angular .ag-sort-indicator-icon>svg{fill:var(--color-medium);stroke:var(--color-medium)}:host::ng-deep ag-grid-angular .ag-header-cell-filter-button>svg{fill:var(--color-medium);stroke:var(--color-medium)}:host::ng-deep ag-grid-angular .ag-theme-quartz{--ag-background-color: var(--color-light-30);--ag-foreground-color: var(--color-black);--ag-input-border-color: var(--color-light);--ag-input-focus-border-color: var(--color-medium);--ag-input-focus-box-shadow: none}:host::ng-deep ag-grid-angular .ag-theme-quartz .ag-input-wrapper input::placeholder{color:var(--color-medium);opacity:1}:host::ng-deep ag-grid-angular .ag-theme-quartz .ag-input-wrapper:before{background-image:none;content:none}:host::ng-deep ag-grid-angular .ag-theme-quartz .ag-input-wrapper input{padding-left:8px!important}:host::ng-deep .ads-table-container{display:flex;flex-direction:column;width:100%;height:100%}:host::ng-deep .ads-table-container.no-border .table-header{border:none;border-radius:0}:host::ng-deep .ads-table-container.no-border::ng-deep ag-grid-angular .ag-root-wrapper{border:none;border-radius:0}:host::ng-deep .ads-table-container.no-border .list-view-container{border:none;border-radius:0}:host::ng-deep .ads-table-container.with-header::ng-deep ag-grid-angular .ag-root-wrapper{border-top:none;border-top-left-radius:0;border-top-right-radius:0}:host::ng-deep .ads-table-container.with-header .list-view-container{border-top:none;border-top-left-radius:0;border-top-right-radius:0}:host::ng-deep .ads-table-container .table-header{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:16px;background-color:var(--color-white);border:1px solid var(--color-light);border-top-left-radius:var(--ag-wrapper-border-radius);border-top-right-radius:var(--ag-wrapper-border-radius)}:host::ng-deep .ads-table-container .table-header .header-template-container{display:flex;align-items:center;gap:8px;min-width:0;flex:1 1 0}:host::ng-deep .ads-table-container .table-header .header-template-container .header-template{min-width:0;flex:1 1 0}:host::ng-deep .ads-table-container .table-header .header-actions{display:flex;gap:8px;flex-wrap:nowrap;flex-shrink:0;justify-content:flex-end}:host::ng-deep .ads-table-container .table-header .header-actions ads-table-button{display:flex}:host::ng-deep .ads-table-container .table-header .change-view-button{display:flex;height:30px;padding:0 12px;border-radius:100px;background-color:var(--color-muted);align-items:center;cursor:pointer;flex-shrink:0}:host::ng-deep .ads-table-container .table-header .change-view-button:hover{background-color:var(--color-secondary-hover)}:host::ng-deep .ads-table-container .table-header .change-view-button:hover ::ng-deep svg{stroke:var(--color-white)}:host::ng-deep .list-view-container{display:flex;flex-direction:column;border:1px solid var(--color-light);border-radius:var(--ag-wrapper-border-radius)}:host::ng-deep .list-view-container .list-view-item{flex-shrink:0}:host::ng-deep .list-view-container .list-view-loading{display:flex;justify-content:center;align-items:center;height:100%}:host::ng-deep .list-view-container .list-view-empty{display:flex;justify-content:center;align-items:center;height:100%;color:var(--color-medium)}:host::ng-deep .list-view-loading-container{overflow:hidden}:host::ng-deep cdk-virtual-scroll-viewport.list-view-container .cdk-virtual-scroll-content-wrapper{display:flex;flex-direction:column;width:100%}::ng-deep .column-visibility-menu{width:234px;max-width:498px;border-radius:5px;box-shadow:0 4px 12px #00000026;border:1px solid var(--color-light)}::ng-deep .column-visibility-menu .mat-mdc-menu-content{padding:0}::ng-deep .column-visibility-menu .mat-mdc-menu-content .menu-content{background-color:var(--color-white)}::ng-deep .column-visibility-menu .mat-mdc-menu-content .menu-content .dropdown-label{padding:12px 12px 0;color:var(--color-medium);font-size:12px;font-weight:600;line-height:16px}::ng-deep .column-visibility-menu .mat-mdc-menu-content .menu-content .dropdown-body{overflow-y:auto}::ng-deep .column-visibility-menu .mat-mdc-menu-content .menu-content .dropdown-body .column-row{display:flex;justify-content:space-between;align-items:center;padding:0 12px;height:45px;gap:12px}::ng-deep .column-visibility-menu .mat-mdc-menu-content .menu-content .dropdown-body .column-row .column-name{font-size:16px;font-weight:400;color:var(--color-dark);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px;flex:1}::ng-deep .column-visibility-menu .mat-mdc-menu-content .menu-content .dropdown-body .column-row .column-toggle{display:flex;justify-content:flex-end}::ng-deep .column-visibility-menu .mat-mdc-menu-content .menu-content .dropdown-body .column-row .column-toggle ::ng-deep ads-slide-toggle .ads-toggle{height:45px!important}::ng-deep .column-visibility-menu .mat-mdc-menu-content .menu-content .dropdown-footer{display:flex;justify-content:space-between;gap:12px;padding:12px}::ng-deep .column-visibility-menu .mat-mdc-menu-content .menu-content .dropdown-footer ::ng-deep ads-button{flex:1}::ng-deep .filter-menu-panel{width:316px;border-radius:5px;box-shadow:0 4px 12px #00000026;border:1px solid var(--color-light)}::ng-deep .sort-menu-panel{width:316px;border-radius:5px;box-shadow:0 4px 12px #00000026;border:1px solid var(--color-light)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.ɵɵCdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.ɵɵCdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.ɵɵCdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "component", type: i4$3.AgGridAngular, selector: "ag-grid-angular", inputs: ["gridOptions", "modules", "statusBar", "sideBar", "suppressContextMenu", "preventDefaultOnContextMenu", "allowContextMenuWithControlKey", "columnMenu", "suppressMenuHide", "enableBrowserTooltips", "tooltipTrigger", "tooltipShowDelay", "tooltipHideDelay", "tooltipMouseTrack", "tooltipShowMode", "tooltipInteraction", "popupParent", "copyHeadersToClipboard", "copyGroupHeadersToClipboard", "clipboardDelimiter", "suppressCopyRowsToClipboard", "suppressCopySingleCellRanges", "suppressLastEmptyLineOnPaste", "suppressClipboardPaste", "suppressClipboardApi", "suppressCutToClipboard", "columnDefs", "defaultColDef", "defaultColGroupDef", "columnTypes", "dataTypeDefinitions", "maintainColumnOrder", "enableStrictPivotColumnOrder", "suppressFieldDotNotation", "headerHeight", "groupHeaderHeight", "floatingFiltersHeight", "pivotHeaderHeight", "pivotGroupHeaderHeight", "hidePaddedHeaderRows", "allowDragFromColumnsToolPanel", "suppressMovableColumns", "suppressColumnMoveAnimation", "suppressMoveWhenColumnDragging", "suppressDragLeaveHidesColumns", "suppressGroupChangesColumnVisibility", "suppressMakeColumnVisibleAfterUnGroup", "suppressRowGroupHidesColumns", "colResizeDefault", "suppressAutoSize", "autoSizePadding", "skipHeaderOnAutoSize", "autoSizeStrategy", "animateColumnResizing", "components", "editType", "suppressStartEditOnTab", "getFullRowEditValidationErrors", "invalidEditValueMode", "singleClickEdit", "suppressClickEdit", "readOnlyEdit", "stopEditingWhenCellsLoseFocus", "enterNavigatesVertically", "enterNavigatesVerticallyAfterEdit", "enableCellEditingOnBackspace", "undoRedoCellEditing", "undoRedoCellEditingLimit", "defaultCsvExportParams", "suppressCsvExport", "defaultExcelExportParams", "suppressExcelExport", "excelStyles", "findSearchValue", "findOptions", "quickFilterText", "cacheQuickFilter", "includeHiddenColumnsInQuickFilter", "quickFilterParser", "quickFilterMatcher", "applyQuickFilterBeforePivotOrAgg", "excludeChildrenWhenTreeDataFiltering", "enableAdvancedFilter", "alwaysPassFilter", "includeHiddenColumnsInAdvancedFilter", "advancedFilterParent", "advancedFilterBuilderParams", "advancedFilterParams", "suppressAdvancedFilterEval", "suppressSetFilterByDefault", "enableFilterHandlers", "filterHandlers", "enableCharts", "chartThemes", "customChartThemes", "chartThemeOverrides", "chartToolPanelsDef", "chartMenuItems", "loadingCellRenderer", "loadingCellRendererParams", "loadingCellRendererSelector", "localeText", "masterDetail", "keepDetailRows", "keepDetailRowsCount", "detailCellRenderer", "detailCellRendererParams", "detailRowHeight", "detailRowAutoHeight", "context", "alignedGrids", "tabIndex", "rowBuffer", "valueCache", "valueCacheNeverExpires", "enableCellExpressions", "suppressTouch", "suppressFocusAfterRefresh", "suppressBrowserResizeObserver", "suppressPropertyNamesCheck", "suppressChangeDetection", "debug", "loading", "overlayLoadingTemplate", "loadingOverlayComponent", "loadingOverlayComponentParams", "suppressLoadingOverlay", "overlayNoRowsTemplate", "noRowsOverlayComponent", "noRowsOverlayComponentParams", "suppressNoRowsOverlay", "suppressOverlays", "overlayComponent", "overlayComponentParams", "overlayComponentSelector", "activeOverlay", "activeOverlayParams", "pagination", "paginationPageSize", "paginationPageSizeSelector", "paginationAutoPageSize", "paginateChildRows", "suppressPaginationPanel", "pivotMode", "pivotPanelShow", "pivotMaxGeneratedColumns", "pivotDefaultExpanded", "pivotColumnGroupTotals", "pivotRowTotals", "pivotSuppressAutoColumn", "suppressExpandablePivotGroups", "functionsReadOnly", "aggFuncs", "formulaDataSource", "formulaFuncs", "suppressAggFuncInHeader", "alwaysAggregateAtRootLevel", "aggregateOnlyChangedColumns", "suppressAggFilteredOnly", "removePivotHeaderRowWhenSingleValueColumn", "animateRows", "cellFlashDuration", "cellFadeDuration", "allowShowChangeAfterFilter", "domLayout", "ensureDomOrder", "enableCellSpan", "enableRtl", "suppressColumnVirtualisation", "suppressMaxRenderedRowRestriction", "suppressRowVirtualisation", "rowDragManaged", "refreshAfterGroupEdit", "rowDragInsertDelay", "suppressRowDrag", "suppressMoveWhenRowDragging", "rowDragEntireRow", "rowDragMultiRow", "rowDragText", "dragAndDropImageComponent", "dragAndDropImageComponentParams", "fullWidthCellRenderer", "fullWidthCellRendererParams", "embedFullWidthRows", "groupDisplayType", "groupDefaultExpanded", "autoGroupColumnDef", "groupMaintainOrder", "groupSelectsChildren", "groupLockGroupColumns", "groupAggFiltering", "groupTotalRow", "grandTotalRow", "suppressStickyTotalRow", "groupSuppressBlankHeader", "groupSelectsFiltered", "showOpenedGroup", "groupHideParentOfSingleChild", "groupRemoveSingleChildren", "groupRemoveLowestSingleChildren", "groupHideOpenParents", "groupAllowUnbalanced", "rowGroupPanelShow", "groupRowRenderer", "groupRowRendererParams", "treeData", "treeDataChildrenField", "treeDataParentIdField", "rowGroupPanelSuppressSort", "suppressGroupRowsSticky", "groupHierarchyConfig", "pinnedTopRowData", "pinnedBottomRowData", "enableRowPinning", "isRowPinnable", "isRowPinned", "rowModelType", "rowData", "asyncTransactionWaitMillis", "suppressModelUpdateAfterUpdateTransaction", "datasource", "cacheOverflowSize", "infiniteInitialRowCount", "serverSideInitialRowCount", "suppressServerSideFullWidthLoadingRow", "cacheBlockSize", "maxBlocksInCache", "maxConcurrentDatasourceRequests", "blockLoadDebounceMillis", "purgeClosedRowNodes", "serverSideDatasource", "serverSideSortAllLevels", "serverSideEnableClientSideSort", "serverSideOnlyRefreshFilteredGroups", "serverSidePivotResultFieldSeparator", "viewportDatasource", "viewportRowModelPageSize", "viewportRowModelBufferSize", "alwaysShowHorizontalScroll", "alwaysShowVerticalScroll", "debounceVerticalScrollbar", "suppressHorizontalScroll", "suppressScrollOnNewData", "suppressScrollWhenPopupsAreOpen", "suppressAnimationFrame", "suppressMiddleClickScrolls", "suppressPreventDefaultOnMouseWheel", "scrollbarWidth", "rowSelection", "cellSelection", "rowMultiSelectWithClick", "suppressRowDeselection", "suppressRowClickSelection", "suppressCellFocus", "suppressHeaderFocus", "selectionColumnDef", "rowNumbers", "suppressMultiRangeSelection", "enableCellTextSelection", "enableRangeSelection", "enableRangeHandle", "enableFillHandle", "fillHandleDirection", "suppressClearOnFillReduction", "sortingOrder", "accentedSort", "unSortIcon", "suppressMultiSort", "alwaysMultiSort", "multiSortKey", "suppressMaintainUnsortedOrder", "icons", "rowHeight", "rowStyle", "rowClass", "rowClassRules", "suppressRowHoverHighlight", "suppressRowTransform", "columnHoverHighlight", "gridId", "deltaSort", "treeDataDisplayType", "enableGroupEdit", "initialState", "theme", "loadThemeGoogleFonts", "themeCssLayer", "styleNonce", "themeStyleContainer", "getContextMenuItems", "getMainMenuItems", "postProcessPopup", "processUnpinnedColumns", "processCellForClipboard", "processHeaderForClipboard", "processGroupHeaderForClipboard", "processCellFromClipboard", "sendToClipboard", "processDataFromClipboard", "isExternalFilterPresent", "doesExternalFilterPass", "getChartToolbarItems", "createChartContainer", "focusGridInnerElement", "navigateToNextHeader", "tabToNextHeader", "navigateToNextCell", "tabToNextCell", "getLocaleText", "getDocument", "paginationNumberFormatter", "getGroupRowAgg", "isGroupOpenByDefault", "ssrmExpandAllAffectsAllRows", "initialGroupOrderComparator", "processPivotResultColDef", "processPivotResultColGroupDef", "getDataPath", "getChildCount", "getServerSideGroupLevelParams", "isServerSideGroupOpenByDefault", "isApplyServerSideTransaction", "isServerSideGroup", "getServerSideGroupKey", "getBusinessKeyForNode", "getRowId", "resetRowDataOnUpdate", "processRowPostCreate", "isRowSelectable", "isRowMaster", "fillOperation", "postSortRows", "getRowStyle", "getRowClass", "getRowHeight", "isFullWidthRow", "isRowValidDropPosition"], outputs: ["toolPanelVisibleChanged", "toolPanelSizeChanged", "columnMenuVisibleChanged", "contextMenuVisibleChanged", "cutStart", "cutEnd", "pasteStart", "pasteEnd", "columnVisible", "columnPinned", "columnResized", "columnMoved", "columnValueChanged", "columnPivotModeChanged", "columnPivotChanged", "columnGroupOpened", "newColumnsLoaded", "gridColumnsChanged", "displayedColumnsChanged", "virtualColumnsChanged", "columnEverythingChanged", "columnsReset", "columnHeaderMouseOver", "columnHeaderMouseLeave", "columnHeaderClicked", "columnHeaderContextMenu", "componentStateChanged", "cellValueChanged", "cellEditRequest", "rowValueChanged", "cellEditingStarted", "cellEditingStopped", "rowEditingStarted", "rowEditingStopped", "bulkEditingStarted", "bulkEditingStopped", "batchEditingStarted", "batchEditingStopped", "undoStarted", "undoEnded", "redoStarted", "redoEnded", "cellSelectionDeleteStart", "cellSelectionDeleteEnd", "rangeDeleteStart", "rangeDeleteEnd", "fillStart", "fillEnd", "filterOpened", "filterChanged", "filterModified", "filterUiChanged", "floatingFilterUiChanged", "advancedFilterBuilderVisibleChanged", "findChanged", "chartCreated", "chartRangeSelectionChanged", "chartOptionsChanged", "chartDestroyed", "cellKeyDown", "gridReady", "firstDataRendered", "gridSizeChanged", "modelUpdated", "virtualRowRemoved", "viewportChanged", "bodyScroll", "bodyScrollEnd", "dragStarted", "dragStopped", "dragCancelled", "stateUpdated", "paginationChanged", "rowDragEnter", "rowDragMove", "rowDragLeave", "rowDragEnd", "rowDragCancel", "rowResizeStarted", "rowResizeEnded", "columnRowGroupChanged", "rowGroupOpened", "expandOrCollapseAll", "pivotMaxColumnsExceeded", "pinnedRowDataChanged", "pinnedRowsChanged", "rowDataUpdated", "asyncTransactionsFlushed", "storeRefreshed", "headerFocused", "cellClicked", "cellDoubleClicked", "cellFocused", "cellMouseOver", "cellMouseOut", "cellMouseDown", "rowClicked", "rowDoubleClicked", "rowSelected", "selectionChanged", "cellContextMenu", "rangeSelectionChanged", "cellSelectionChanged", "tooltipShow", "tooltipHide", "sortChanged"] }, { kind: "component", type: AdsSlideToggleComponent, selector: "ads-slide-toggle", inputs: ["enableYesOrNo", "customTitles", "control", "label", "id", "width"] }, { kind: "component", type: AdsButtonComponent, selector: "ads-button", inputs: ["id", "variant", "disabled", "size", "type", "fullWidth"] }, { kind: "component", type: AdsTableButtonComponent, selector: "ads-table-button", inputs: ["id", "disabled", "fullWidth", "matMenuTriggerFor"], outputs: ["menuOpened", "menuClosed"] }, { kind: "component", type: DividerComponent, selector: "ads-divider", inputs: ["margin", "color"] }, { kind: "directive", type: i13.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i4$2.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: AdsFilterMenuComponent, selector: "ads-filter-menu", inputs: ["columnSortFilterConfigs", "columnFilterStates", "getFilterOptionsForField", "getHierarchicalFilterOptionsForField", "getFilterValuesForField", "isColumnFilteredFn", "getFilterValueFormatterForField"], outputs: ["filterChanged", "filtersRemoved"] }, { kind: "component", type: AdsSortMenuComponent, selector: "ads-sort-menu", inputs: ["columnSortFilterConfigs", "columnSortStates"], outputs: ["sortChanged", "sortsRemoved"] }, { kind: "component", type: AdsProgressSpinnerComponent, selector: "ads-progress-spinner", inputs: ["zIndex", "scrollContainer", "size", "diameter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsTableComponent, isStandalone: false, selector: "ads-table", inputs: { width: "width", height: "height", headerTemplate: "headerTemplate", gridOptions: "gridOptions", rowData: "rowData", columnDefs: "columnDefs", icons: "icons", defaultColDef: "defaultColDef", loading: "loading", columnDefsByBreakpoint: "columnDefsByBreakpoint", showHeaderActions: "showHeaderActions", showChangeViewButton: "showChangeViewButton", defaultViewMode: "defaultViewMode", listItemTemplate: "listItemTemplate", listBatchSize: "listBatchSize", enableCustomSortFilter: "enableCustomSortFilter", mobileHeaderView: "mobileHeaderView", showBorder: "showBorder", columnSortFilterConfigs: "columnSortFilterConfigs" }, outputs: { filtersCleared: "filtersCleared", columnFilterChanged: "columnFilterChanged", viewChanged: "viewChanged" }, viewQueries: [{ propertyName: "virtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "menuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"ads-table-container\" [style.width]=\"width\" [class.with-header]=\"showHeaderActions\" [class.no-border]=\"!showBorder\">\n  @if (showHeaderActions) {\n    <div class=\"table-header\">\n      <div class=\"header-template-container\">\n        @if (showChangeViewButton) {\n          <div class=\"change-view-button\" (click)=\"toggleView()\">\n            @if (isListView()) {\n              <ads-icon name=\"grid_view\" size=\"xxxs\" stroke=\"iconPrimary\" />\n            } @else {\n              <ads-icon name=\"list_view\" size=\"xxxs\" stroke=\"iconPrimary\" />\n            }\n          </div>\n        }\n        <div class=\"header-template\">\n          @if (headerTemplate) {\n            <ng-container *ngTemplateOutlet=\"headerTemplate\" />\n          }\n        </div>\n\n      </div>\n\n      <div class=\"header-actions\">\n        @if (!isListView()) {\n          <ads-table-button\n            id=\"show-hide-columns-button\"\n            [matMenuTriggerFor]=\"columnVisibilityMenu\"\n            (menuOpened)=\"openColumnVisibilityMenu()\"\n            (menuClosed)=\"onColumnVisibilityMenuClosed()\"\n          >\n            <ads-icon\n              name=\"visibility_eye_none\"\n              theme=\"secondary\"\n              stroke=\"secondary\"\n              size=\"xxxs\"\n            />\n            @if (!mobileHeaderView) {\n              {{ hideColumnButtonLabel }}\n            }\n          </ads-table-button>\n        }\n\n        <ads-table-button\n          id=\"filter-button\"\n          [matMenuTriggerFor]=\"filterMenu\"\n          (menuOpened)=\"openFilterMenu()\"\n          (menuClosed)=\"onFilterMenuClosed()\"\n        >\n          <ads-icon\n            name=\"filter\"\n            theme=\"secondary\"\n            size=\"xxxs\"\n          />\n          @if (!mobileHeaderView) {\n            {{ filterButtonLabel }}\n          }\n\n        </ads-table-button>\n        <ads-table-button\n          id=\"sort-button\"\n          [matMenuTriggerFor]=\"sortMenu\"\n        >\n          <ads-icon\n            name=\"arrow_up_and_down\"\n            theme=\"secondary\"\n            size=\"xxxs\"\n          />\n          @if (!mobileHeaderView) {\n            {{ sortButtonLabel }}\n          }\n        </ads-table-button>\n      </div>\n    </div>\n  }\n\n  <ag-grid-angular\n    [ngStyle]=\"{ height: height }\"\n    [style.display]=\"isListView() ? 'none' : ''\"\n    [icons]=\"getAgGridIcons()\"\n    class=\"ag-theme-quartz\"\n    [gridOptions]=\"gridOptions\"\n    [rowData]=\"rowData\"\n    [columnDefs]=\"getProcessedColumnDefs()\"\n    [defaultColDef]=\"getDefaultColDef()\"\n    [components]=\"frameworkComponents\"\n    [isExternalFilterPresent]=\"isExternalFilterPresent\"\n    [doesExternalFilterPass]=\"doesExternalFilterPass\"\n    (gridReady)=\"gridReady($event)\"\n    (firstDataRendered)=\"firstDataRendered($event)\"\n    (sortChanged)=\"sortChanged($event)\"\n    (filterChanged)=\"filterChanged($event)\"\n    [theme]=\"themeQuartz\"\n    [loading]=\"loading\"\n    [enableCellTextSelection]=\"true\"\n    [ensureDomOrder]=\"true\"\n  />\n\n  @if (isListView()) {\n    @if (loading) {\n      <div class=\"list-view-container list-view-loading-container\" [ngStyle]=\"{ height: height }\">\n        <div class=\"list-view-loading\">\n          <ads-progress-spinner [size]=\"SpinnerSize.small\" />\n        </div>\n      </div>\n    } @else {\n      <cdk-virtual-scroll-viewport\n        class=\"list-view-container\"\n        [itemSize]=\"listItemHeight()\"\n        [minBufferPx]=\"listItemHeight() * 4\"\n        [maxBufferPx]=\"listItemHeight() * 8\"\n        [ngStyle]=\"{ height: height }\"\n      >\n        <div\n          *cdkVirtualFor=\"let row of listRowDataCache(); trackBy: listTrackBy\"\n          class=\"list-view-item\"\n        >\n          @if (listItemTemplate) {\n            <ng-container\n              [ngTemplateOutlet]=\"listItemTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: row }\"\n            />\n          }\n        </div>\n      </cdk-virtual-scroll-viewport>\n    }\n  }\n\n  <!-- Column Visibility Menu -->\n  <mat-menu #columnVisibilityMenu=\"matMenu\" class=\"column-visibility-menu\" [class.has-header]=\"showHeaderActions\">\n    <div class=\"menu-content\" (click)=\"$event.stopPropagation()\">\n      <p class=\"dropdown-label\">Show/Hide Columns</p>\n      <div class=\"dropdown-body\">\n        @for (column of columnVisibilityList(); track $index) {\n          <div class=\"column-row\">\n            <span\n              class=\"column-name\"\n              [matTooltip]=\"column.headerName\"\n              [matTooltipDisabled]=\"getTooltipDisabled(column.headerName)\"\n            >\n              {{ column.headerName }}\n            </span>\n            <div class=\"column-toggle\">\n              <ads-slide-toggle\n                [id]=\"'toggle-' + column.field\"\n                [control]=\"column.control\"\n                [showFooter]=\"false\"\n                [customTitles]=\"['Show', 'Hide']\"\n              />\n            </div>\n          </div>\n        }\n      </div>\n\n      <ads-divider />\n\n      <div class=\"dropdown-footer\">\n        <ads-button\n          [fullWidth]=\"true\"\n          (click)=\"hideAllColumns()\"\n          [disabled]=\"allColumnsHidden\"\n          variant=\"tertiary\"\n          id='hide-all-button'\n          size=\"xs\"\n        >\n          Hide All\n        </ads-button>\n        <ads-button\n          [fullWidth]=\"true\"\n          (click)=\"showAllColumns()\"\n          [disabled]=\"allColumnsVisible\"\n          variant=\"tertiary\"\n          id=\"show-all-button\"\n          size=\"xs\"\n        >\n          Show All\n        </ads-button>\n      </div>\n    </div>\n  </mat-menu>\n\n  <!-- Filter Menu -->\n  <mat-menu #filterMenu=\"matMenu\" class=\"filter-menu-panel\" (closed)=\"filterMenuComponent.onMenuClosed()\">\n    <ads-filter-menu\n      #filterMenuComponent\n      [columnSortFilterConfigs]=\"columnSortFilterConfigs\"\n      [columnFilterStates]=\"columnFilterStates()\"\n      [getFilterOptionsForField]=\"getFilterOptionsForFieldFn\"\n      [getHierarchicalFilterOptionsForField]=\"getHierarchicalFilterOptionsForFieldFn\"\n      [getFilterValuesForField]=\"getFilterValuesForFieldFn\"\n      [isColumnFilteredFn]=\"isColumnFilteredFn\"\n      [getFilterValueFormatterForField]=\"getFilterValueFormatterForFieldFn\"\n      (filterChanged)=\"onFilterMenuFilterChanged($event)\"\n      (filtersRemoved)=\"onFilterMenuFilterRemoved($event)\"\n    />\n  </mat-menu>\n\n  <!-- Sort Menu -->\n  <mat-menu #sortMenu=\"matMenu\" class=\"sort-menu-panel\">\n    <ads-sort-menu\n      [columnSortFilterConfigs]=\"columnSortFilterConfigs\"\n      [columnSortStates]=\"columnSortStates()\"\n      (sortChanged)=\"onSortMenuSortChanged($event)\"\n      (sortsRemoved)=\"onSortMenuSortsRemoved($event)\"\n    />\n  </mat-menu>\n</div>\n", styles: [":host::ng-deep{--ag-wrapper-border-radius: 10px}:host::ng-deep ag-grid-angular{--ag-grid-size: 4px;--ag-border-radius: 5px;--ag-font-family: \"Roboto\";--ag-font-size: 16px;--ag-header-foreground-color: var(--color-medium);--ag-header-background-color: var(--color-light-30);--ag-background-color: var(--color-white);--ag-header-height: 45px;--ag-row-height: 45px;--ag-border-color: var(--color-light);--ag-foreground-color: var(--color-medium);--ag-spacing: 4px;--ag-inherited-accent-color: var(--color-secondary-hover)}:host::ng-deep ag-grid-angular .ag-overlay-no-matching-rows-wrapper{display:flex;justify-content:center;align-items:center;height:100%}:host::ng-deep ag-grid-angular .ag-overlay-no-matching-rows-wrapper .ag-overlay-no-matching-rows-center{color:var(--color-medium);font-family:Roboto,sans-serif;font-size:16px;border:none;padding:0;background:transparent}:host::ng-deep ag-grid-angular .ag-header-cell-text{font-weight:600;line-height:21px}:host::ng-deep ag-grid-angular .ag-cell:focus,:host::ng-deep ag-grid-angular .ag-cell-focus{outline:none!important;border:none!important;box-shadow:none!important}:host::ng-deep ag-grid-angular .ag-row,:host::ng-deep ag-grid-angular .ag-header,:host::ng-deep ag-grid-angular .ag-advanced-filter-header{border-bottom:none}:host::ng-deep ag-grid-angular .ag-row-even{background-color:var(--color-white)}:host::ng-deep ag-grid-angular .ag-row-odd{background-color:var(--color-white)}:host::ng-deep ag-grid-angular .ag-sort-indicator-container{min-width:fit-content}:host::ng-deep ag-grid-angular .ag-sort-indicator-icon>svg{fill:var(--color-medium);stroke:var(--color-medium)}:host::ng-deep ag-grid-angular .ag-header-cell-filter-button>svg{fill:var(--color-medium);stroke:var(--color-medium)}:host::ng-deep ag-grid-angular .ag-header-cell--active{background-color:var(--color-secondary-10)!important}:host::ng-deep ag-grid-angular .ag-theme-quartz{--ag-background-color: var(--color-light-30);--ag-foreground-color: var(--color-black);--ag-input-border-color: var(--color-light);--ag-input-focus-border-color: var(--color-medium);--ag-input-focus-box-shadow: none}:host::ng-deep ag-grid-angular .ag-theme-quartz .ag-input-wrapper input::placeholder{color:var(--color-medium);opacity:1}:host::ng-deep ag-grid-angular .ag-theme-quartz .ag-input-wrapper:before{background-image:none;content:none}:host::ng-deep ag-grid-angular .ag-theme-quartz .ag-input-wrapper input{padding-left:8px!important}:host::ng-deep .ads-table-container{display:flex;flex-direction:column;width:100%;height:100%}:host::ng-deep .ads-table-container.no-border .table-header{border:none;border-radius:0}:host::ng-deep .ads-table-container.no-border::ng-deep ag-grid-angular .ag-root-wrapper{border:none;border-radius:0}:host::ng-deep .ads-table-container.no-border .list-view-container{border:none;border-radius:0}:host::ng-deep .ads-table-container.with-header::ng-deep ag-grid-angular .ag-root-wrapper{border-top:none;border-top-left-radius:0;border-top-right-radius:0}:host::ng-deep .ads-table-container.with-header .list-view-container{border-top:none;border-top-left-radius:0;border-top-right-radius:0}:host::ng-deep .ads-table-container .table-header{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:16px;background-color:var(--color-white);border:1px solid var(--color-light);border-top-left-radius:var(--ag-wrapper-border-radius);border-top-right-radius:var(--ag-wrapper-border-radius)}:host::ng-deep .ads-table-container .table-header .header-template-container{display:flex;align-items:center;gap:8px;min-width:0;flex:1 1 0}:host::ng-deep .ads-table-container .table-header .header-template-container .header-template{min-width:0;flex:1 1 0}:host::ng-deep .ads-table-container .table-header .header-actions{display:flex;gap:8px;flex-wrap:nowrap;flex-shrink:0;justify-content:flex-end}:host::ng-deep .ads-table-container .table-header .header-actions ads-table-button{display:flex}:host::ng-deep .ads-table-container .table-header .change-view-button{display:flex;height:30px;padding:0 12px;border-radius:100px;background-color:var(--color-muted);align-items:center;cursor:pointer;flex-shrink:0}:host::ng-deep .ads-table-container .table-header .change-view-button:hover{background-color:var(--color-secondary-hover)}:host::ng-deep .ads-table-container .table-header .change-view-button:hover ::ng-deep svg{stroke:var(--color-white)}:host::ng-deep .list-view-container{display:flex;flex-direction:column;border:1px solid var(--color-light);border-radius:var(--ag-wrapper-border-radius)}:host::ng-deep .list-view-container .list-view-item{flex-shrink:0}:host::ng-deep .list-view-container .list-view-loading{display:flex;justify-content:center;align-items:center;height:100%}:host::ng-deep .list-view-container .list-view-empty{display:flex;justify-content:center;align-items:center;height:100%;color:var(--color-medium)}:host::ng-deep .list-view-loading-container{overflow:hidden}:host::ng-deep cdk-virtual-scroll-viewport.list-view-container .cdk-virtual-scroll-content-wrapper{display:flex;flex-direction:column;width:100%}::ng-deep .column-visibility-menu{width:234px;max-width:498px;border-radius:5px;box-shadow:0 4px 12px #00000026;border:1px solid var(--color-light)}::ng-deep .column-visibility-menu .mat-mdc-menu-content{padding:0}::ng-deep .column-visibility-menu .mat-mdc-menu-content .menu-content{background-color:var(--color-white)}::ng-deep .column-visibility-menu .mat-mdc-menu-content .menu-content .dropdown-label{padding:12px 12px 0;color:var(--color-medium);font-size:12px;font-weight:600;line-height:16px}::ng-deep .column-visibility-menu .mat-mdc-menu-content .menu-content .dropdown-body{overflow-y:auto}::ng-deep .column-visibility-menu .mat-mdc-menu-content .menu-content .dropdown-body .column-row{display:flex;justify-content:space-between;align-items:center;padding:0 12px;height:45px;gap:12px}::ng-deep .column-visibility-menu .mat-mdc-menu-content .menu-content .dropdown-body .column-row .column-name{font-size:16px;font-weight:400;color:var(--color-dark);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px;flex:1}::ng-deep .column-visibility-menu .mat-mdc-menu-content .menu-content .dropdown-body .column-row .column-toggle{display:flex;justify-content:flex-end}::ng-deep .column-visibility-menu .mat-mdc-menu-content .menu-content .dropdown-body .column-row .column-toggle ::ng-deep ads-slide-toggle .ads-toggle{height:45px!important}::ng-deep .column-visibility-menu .mat-mdc-menu-content .menu-content .dropdown-footer{display:flex;justify-content:space-between;gap:12px;padding:12px}::ng-deep .column-visibility-menu .mat-mdc-menu-content .menu-content .dropdown-footer ::ng-deep ads-button{flex:1}::ng-deep .filter-menu-panel{width:316px;border-radius:5px;box-shadow:0 4px 12px #00000026;border:1px solid var(--color-light)}::ng-deep .sort-menu-panel{width:316px;border-radius:5px;box-shadow:0 4px 12px #00000026;border:1px solid var(--color-light)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.ɵɵCdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.ɵɵCdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.ɵɵCdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "component", type: i4$3.AgGridAngular, selector: "ag-grid-angular", inputs: ["gridOptions", "modules", "statusBar", "sideBar", "suppressContextMenu", "preventDefaultOnContextMenu", "allowContextMenuWithControlKey", "columnMenu", "suppressMenuHide", "enableBrowserTooltips", "tooltipTrigger", "tooltipShowDelay", "tooltipHideDelay", "tooltipMouseTrack", "tooltipShowMode", "tooltipInteraction", "popupParent", "copyHeadersToClipboard", "copyGroupHeadersToClipboard", "clipboardDelimiter", "suppressCopyRowsToClipboard", "suppressCopySingleCellRanges", "suppressLastEmptyLineOnPaste", "suppressClipboardPaste", "suppressClipboardApi", "suppressCutToClipboard", "columnDefs", "defaultColDef", "defaultColGroupDef", "columnTypes", "dataTypeDefinitions", "maintainColumnOrder", "enableStrictPivotColumnOrder", "suppressFieldDotNotation", "headerHeight", "groupHeaderHeight", "floatingFiltersHeight", "pivotHeaderHeight", "pivotGroupHeaderHeight", "hidePaddedHeaderRows", "allowDragFromColumnsToolPanel", "suppressMovableColumns", "suppressColumnMoveAnimation", "suppressMoveWhenColumnDragging", "suppressDragLeaveHidesColumns", "suppressGroupChangesColumnVisibility", "suppressMakeColumnVisibleAfterUnGroup", "suppressRowGroupHidesColumns", "colResizeDefault", "suppressAutoSize", "autoSizePadding", "skipHeaderOnAutoSize", "autoSizeStrategy", "animateColumnResizing", "components", "editType", "suppressStartEditOnTab", "getFullRowEditValidationErrors", "invalidEditValueMode", "singleClickEdit", "suppressClickEdit", "readOnlyEdit", "stopEditingWhenCellsLoseFocus", "enterNavigatesVertically", "enterNavigatesVerticallyAfterEdit", "enableCellEditingOnBackspace", "undoRedoCellEditing", "undoRedoCellEditingLimit", "defaultCsvExportParams", "suppressCsvExport", "defaultExcelExportParams", "suppressExcelExport", "excelStyles", "findSearchValue", "findOptions", "quickFilterText", "cacheQuickFilter", "includeHiddenColumnsInQuickFilter", "quickFilterParser", "quickFilterMatcher", "applyQuickFilterBeforePivotOrAgg", "excludeChildrenWhenTreeDataFiltering", "enableAdvancedFilter", "alwaysPassFilter", "includeHiddenColumnsInAdvancedFilter", "advancedFilterParent", "advancedFilterBuilderParams", "advancedFilterParams", "suppressAdvancedFilterEval", "suppressSetFilterByDefault", "enableFilterHandlers", "filterHandlers", "enableCharts", "chartThemes", "customChartThemes", "chartThemeOverrides", "chartToolPanelsDef", "chartMenuItems", "loadingCellRenderer", "loadingCellRendererParams", "loadingCellRendererSelector", "localeText", "masterDetail", "keepDetailRows", "keepDetailRowsCount", "detailCellRenderer", "detailCellRendererParams", "detailRowHeight", "detailRowAutoHeight", "context", "alignedGrids", "tabIndex", "rowBuffer", "valueCache", "valueCacheNeverExpires", "enableCellExpressions", "suppressTouch", "suppressFocusAfterRefresh", "suppressBrowserResizeObserver", "suppressPropertyNamesCheck", "suppressChangeDetection", "debug", "loading", "overlayLoadingTemplate", "loadingOverlayComponent", "loadingOverlayComponentParams", "suppressLoadingOverlay", "overlayNoRowsTemplate", "noRowsOverlayComponent", "noRowsOverlayComponentParams", "suppressNoRowsOverlay", "suppressOverlays", "overlayComponent", "overlayComponentParams", "overlayComponentSelector", "activeOverlay", "activeOverlayParams", "pagination", "paginationPageSize", "paginationPageSizeSelector", "paginationAutoPageSize", "paginateChildRows", "suppressPaginationPanel", "pivotMode", "pivotPanelShow", "pivotMaxGeneratedColumns", "pivotDefaultExpanded", "pivotColumnGroupTotals", "pivotRowTotals", "pivotSuppressAutoColumn", "suppressExpandablePivotGroups", "functionsReadOnly", "aggFuncs", "formulaDataSource", "formulaFuncs", "suppressAggFuncInHeader", "alwaysAggregateAtRootLevel", "aggregateOnlyChangedColumns", "suppressAggFilteredOnly", "removePivotHeaderRowWhenSingleValueColumn", "animateRows", "cellFlashDuration", "cellFadeDuration", "allowShowChangeAfterFilter", "domLayout", "ensureDomOrder", "enableCellSpan", "enableRtl", "suppressColumnVirtualisation", "suppressMaxRenderedRowRestriction", "suppressRowVirtualisation", "rowDragManaged", "refreshAfterGroupEdit", "rowDragInsertDelay", "suppressRowDrag", "suppressMoveWhenRowDragging", "rowDragEntireRow", "rowDragMultiRow", "rowDragText", "dragAndDropImageComponent", "dragAndDropImageComponentParams", "fullWidthCellRenderer", "fullWidthCellRendererParams", "embedFullWidthRows", "groupDisplayType", "groupDefaultExpanded", "autoGroupColumnDef", "groupMaintainOrder", "groupSelectsChildren", "groupLockGroupColumns", "groupAggFiltering", "groupTotalRow", "grandTotalRow", "suppressStickyTotalRow", "groupSuppressBlankHeader", "groupSelectsFiltered", "showOpenedGroup", "groupHideParentOfSingleChild", "groupRemoveSingleChildren", "groupRemoveLowestSingleChildren", "groupHideOpenParents", "groupAllowUnbalanced", "rowGroupPanelShow", "groupRowRenderer", "groupRowRendererParams", "treeData", "treeDataChildrenField", "treeDataParentIdField", "rowGroupPanelSuppressSort", "suppressGroupRowsSticky", "groupHierarchyConfig", "pinnedTopRowData", "pinnedBottomRowData", "enableRowPinning", "isRowPinnable", "isRowPinned", "rowModelType", "rowData", "asyncTransactionWaitMillis", "suppressModelUpdateAfterUpdateTransaction", "datasource", "cacheOverflowSize", "infiniteInitialRowCount", "serverSideInitialRowCount", "suppressServerSideFullWidthLoadingRow", "cacheBlockSize", "maxBlocksInCache", "maxConcurrentDatasourceRequests", "blockLoadDebounceMillis", "purgeClosedRowNodes", "serverSideDatasource", "serverSideSortAllLevels", "serverSideEnableClientSideSort", "serverSideOnlyRefreshFilteredGroups", "serverSidePivotResultFieldSeparator", "viewportDatasource", "viewportRowModelPageSize", "viewportRowModelBufferSize", "alwaysShowHorizontalScroll", "alwaysShowVerticalScroll", "debounceVerticalScrollbar", "suppressHorizontalScroll", "suppressScrollOnNewData", "suppressScrollWhenPopupsAreOpen", "suppressAnimationFrame", "suppressMiddleClickScrolls", "suppressPreventDefaultOnMouseWheel", "scrollbarWidth", "rowSelection", "cellSelection", "rowMultiSelectWithClick", "suppressRowDeselection", "suppressRowClickSelection", "suppressCellFocus", "suppressHeaderFocus", "selectionColumnDef", "rowNumbers", "suppressMultiRangeSelection", "enableCellTextSelection", "enableRangeSelection", "enableRangeHandle", "enableFillHandle", "fillHandleDirection", "suppressClearOnFillReduction", "sortingOrder", "accentedSort", "unSortIcon", "suppressMultiSort", "alwaysMultiSort", "multiSortKey", "suppressMaintainUnsortedOrder", "icons", "rowHeight", "rowStyle", "rowClass", "rowClassRules", "suppressRowHoverHighlight", "suppressRowTransform", "columnHoverHighlight", "gridId", "deltaSort", "treeDataDisplayType", "enableGroupEdit", "initialState", "theme", "loadThemeGoogleFonts", "themeCssLayer", "styleNonce", "themeStyleContainer", "getContextMenuItems", "getMainMenuItems", "postProcessPopup", "processUnpinnedColumns", "processCellForClipboard", "processHeaderForClipboard", "processGroupHeaderForClipboard", "processCellFromClipboard", "sendToClipboard", "processDataFromClipboard", "isExternalFilterPresent", "doesExternalFilterPass", "getChartToolbarItems", "createChartContainer", "focusGridInnerElement", "navigateToNextHeader", "tabToNextHeader", "navigateToNextCell", "tabToNextCell", "getLocaleText", "getDocument", "paginationNumberFormatter", "getGroupRowAgg", "isGroupOpenByDefault", "ssrmExpandAllAffectsAllRows", "initialGroupOrderComparator", "processPivotResultColDef", "processPivotResultColGroupDef", "getDataPath", "getChildCount", "getServerSideGroupLevelParams", "isServerSideGroupOpenByDefault", "isApplyServerSideTransaction", "isServerSideGroup", "getServerSideGroupKey", "getBusinessKeyForNode", "getRowId", "resetRowDataOnUpdate", "processRowPostCreate", "isRowSelectable", "isRowMaster", "fillOperation", "postSortRows", "getRowStyle", "getRowClass", "getRowHeight", "isFullWidthRow", "isRowValidDropPosition"], outputs: ["toolPanelVisibleChanged", "toolPanelSizeChanged", "columnMenuVisibleChanged", "contextMenuVisibleChanged", "cutStart", "cutEnd", "pasteStart", "pasteEnd", "columnVisible", "columnPinned", "columnResized", "columnMoved", "columnValueChanged", "columnPivotModeChanged", "columnPivotChanged", "columnGroupOpened", "newColumnsLoaded", "gridColumnsChanged", "displayedColumnsChanged", "virtualColumnsChanged", "columnEverythingChanged", "columnsReset", "columnHeaderMouseOver", "columnHeaderMouseLeave", "columnHeaderClicked", "columnHeaderContextMenu", "componentStateChanged", "cellValueChanged", "cellEditRequest", "rowValueChanged", "cellEditingStarted", "cellEditingStopped", "rowEditingStarted", "rowEditingStopped", "bulkEditingStarted", "bulkEditingStopped", "batchEditingStarted", "batchEditingStopped", "undoStarted", "undoEnded", "redoStarted", "redoEnded", "cellSelectionDeleteStart", "cellSelectionDeleteEnd", "rangeDeleteStart", "rangeDeleteEnd", "fillStart", "fillEnd", "filterOpened", "filterChanged", "filterModified", "filterUiChanged", "floatingFilterUiChanged", "advancedFilterBuilderVisibleChanged", "findChanged", "chartCreated", "chartRangeSelectionChanged", "chartOptionsChanged", "chartDestroyed", "cellKeyDown", "gridReady", "firstDataRendered", "gridSizeChanged", "modelUpdated", "virtualRowRemoved", "viewportChanged", "bodyScroll", "bodyScrollEnd", "dragStarted", "dragStopped", "dragCancelled", "stateUpdated", "paginationChanged", "rowDragEnter", "rowDragMove", "rowDragLeave", "rowDragEnd", "rowDragCancel", "rowResizeStarted", "rowResizeEnded", "columnRowGroupChanged", "rowGroupOpened", "expandOrCollapseAll", "pivotMaxColumnsExceeded", "pinnedRowDataChanged", "pinnedRowsChanged", "rowDataUpdated", "asyncTransactionsFlushed", "storeRefreshed", "headerFocused", "cellClicked", "cellDoubleClicked", "cellFocused", "cellMouseOver", "cellMouseOut", "cellMouseDown", "rowClicked", "rowDoubleClicked", "rowSelected", "selectionChanged", "cellContextMenu", "rangeSelectionChanged", "cellSelectionChanged", "tooltipShow", "tooltipHide", "sortChanged"] }, { kind: "component", type: AdsSlideToggleComponent, selector: "ads-slide-toggle", inputs: ["enableYesOrNo", "customTitles", "control", "label", "id", "width"] }, { kind: "component", type: AdsButtonComponent, selector: "ads-button", inputs: ["id", "variant", "disabled", "size", "type", "fullWidth"] }, { kind: "component", type: AdsTableButtonComponent, selector: "ads-table-button", inputs: ["id", "disabled", "fullWidth", "matMenuTriggerFor"], outputs: ["menuOpened", "menuClosed"] }, { kind: "component", type: DividerComponent, selector: "ads-divider", inputs: ["margin", "color"] }, { kind: "directive", type: i13.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i4$2.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: AdsFilterMenuComponent, selector: "ads-filter-menu", inputs: ["columnSortFilterConfigs", "columnFilterStates", "getFilterOptionsForField", "getHierarchicalFilterOptionsForField", "getFilterValuesForField", "isColumnFilteredFn", "getFilterValueFormatterForField"], outputs: ["filterChanged", "filtersRemoved"] }, { kind: "component", type: AdsSortMenuComponent, selector: "ads-sort-menu", inputs: ["columnSortFilterConfigs", "columnSortStates"], outputs: ["sortChanged", "sortsRemoved"] }, { kind: "component", type: AdsProgressSpinnerComponent, selector: "ads-progress-spinner", inputs: ["zIndex", "scrollContainer", "size", "diameter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ads-table', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ads-table-container\" [style.width]=\"width\" [class.with-header]=\"showHeaderActions\" [class.no-border]=\"!showBorder\">\n  @if (showHeaderActions) {\n    <div class=\"table-header\">\n      <div class=\"header-template-container\">\n        @if (showChangeViewButton) {\n          <div class=\"change-view-button\" (click)=\"toggleView()\">\n            @if (isListView()) {\n              <ads-icon name=\"grid_view\" size=\"xxxs\" stroke=\"iconPrimary\" />\n            } @else {\n              <ads-icon name=\"list_view\" size=\"xxxs\" stroke=\"iconPrimary\" />\n            }\n          </div>\n        }\n        <div class=\"header-template\">\n          @if (headerTemplate) {\n            <ng-container *ngTemplateOutlet=\"headerTemplate\" />\n          }\n        </div>\n\n      </div>\n\n      <div class=\"header-actions\">\n        @if (!isListView()) {\n          <ads-table-button\n            id=\"show-hide-columns-button\"\n            [matMenuTriggerFor]=\"columnVisibilityMenu\"\n            (menuOpened)=\"openColumnVisibilityMenu()\"\n            (menuClosed)=\"onColumnVisibilityMenuClosed()\"\n          >\n            <ads-icon\n              name=\"visibility_eye_none\"\n              theme=\"secondary\"\n              stroke=\"secondary\"\n              size=\"xxxs\"\n            />\n            @if (!mobileHeaderView) {\n              {{ hideColumnButtonLabel }}\n            }\n          </ads-table-button>\n        }\n\n        <ads-table-button\n          id=\"filter-button\"\n          [matMenuTriggerFor]=\"filterMenu\"\n          (menuOpened)=\"openFilterMenu()\"\n          (menuClosed)=\"onFilterMenuClosed()\"\n        >\n          <ads-icon\n            name=\"filter\"\n            theme=\"secondary\"\n            size=\"xxxs\"\n          />\n          @if (!mobileHeaderView) {\n           Filter\n          }\n\n        </ads-table-button>\n        <ads-table-button\n          id=\"sort-button\"\n          [matMenuTriggerFor]=\"sortMenu\"\n        >\n          <ads-icon\n            name=\"arrow_up_and_down\"\n            theme=\"secondary\"\n            size=\"xxxs\"\n          />\n          @if (!mobileHeaderView) {\n            Sort\n          }\n        </ads-table-button>\n      </div>\n    </div>\n  }\n\n  <ag-grid-angular\n    [ngStyle]=\"{ height: height }\"\n    [style.display]=\"isListView() ? 'none' : ''\"\n    [icons]=\"getAgGridIcons()\"\n    class=\"ag-theme-quartz\"\n    [gridOptions]=\"gridOptions\"\n    [rowData]=\"rowData\"\n    [columnDefs]=\"getProcessedColumnDefs()\"\n    [defaultColDef]=\"getDefaultColDef()\"\n    [components]=\"frameworkComponents\"\n    [isExternalFilterPresent]=\"isExternalFilterPresent\"\n    [doesExternalFilterPass]=\"doesExternalFilterPass\"\n    (gridReady)=\"gridReady($event)\"\n    (firstDataRendered)=\"firstDataRendered($event)\"\n    (sortChanged)=\"sortChanged($event)\"\n    (filterChanged)=\"filterChanged($event)\"\n    [theme]=\"themeQuartz\"\n    [loading]=\"loading\"\n    [enableCellTextSelection]=\"true\"\n    [ensureDomOrder]=\"true\"\n  />\n\n  @if (isListView()) {\n    @if (loading) {\n      <div class=\"list-view-container list-view-loading-container\" [ngStyle]=\"{ height: height }\">\n        <div class=\"list-view-loading\">\n          <ads-progress-spinner [size]=\"SpinnerSize.small\" />\n        </div>\n      </div>\n    } @else {\n      <cdk-virtual-scroll-viewport\n        class=\"list-view-container\"\n        [itemSize]=\"listItemHeight()\"\n        [minBufferPx]=\"listItemHeight() * 4\"\n        [maxBufferPx]=\"listItemHeight() * 8\"\n        [ngStyle]=\"{ height: height }\"\n      >\n        <div\n          *cdkVirtualFor=\"let row of listRowDataCache(); trackBy: listTrackBy\"\n          class=\"list-view-item\"\n        >\n          @if (listItemTemplate) {\n            <ng-container\n              [ngTemplateOutlet]=\"listItemTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: row }\"\n            />\n          }\n        </div>\n      </cdk-virtual-scroll-viewport>\n    }\n  }\n\n  <!-- Column Visibility Menu -->\n  <mat-menu #columnVisibilityMenu=\"matMenu\" class=\"column-visibility-menu\" [class.has-header]=\"showHeaderActions\">\n    <div class=\"menu-content\" (click)=\"$event.stopPropagation()\">\n      <p class=\"dropdown-label\">Show/Hide Columns</p>\n      <div class=\"dropdown-body\">\n        @for (column of columnVisibilityList(); track $index) {\n          <div class=\"column-row\">\n            <span\n              class=\"column-name\"\n              [matTooltip]=\"column.headerName\"\n              [matTooltipDisabled]=\"getTooltipDisabled(column.headerName)\"\n            >\n              {{ column.headerName }}\n            </span>\n            <div class=\"column-toggle\">\n              <ads-slide-toggle\n                [id]=\"'toggle-' + column.field\"\n                [control]=\"column.control\"\n                [showFooter]=\"false\"\n                [customTitles]=\"['Show', 'Hide']\"\n              />\n            </div>\n          </div>\n        }\n      </div>\n\n      <ads-divider />\n\n      <div class=\"dropdown-footer\">\n        <ads-button\n          [fullWidth]=\"true\"\n          (click)=\"hideAllColumns()\"\n          [disabled]=\"allColumnsHidden\"\n          variant=\"tertiary\"\n          id='hide-all-button'\n          size=\"xs\"\n        >\n          Hide All\n        </ads-button>\n        <ads-button\n          [fullWidth]=\"true\"\n          (click)=\"showAllColumns()\"\n          [disabled]=\"allColumnsVisible\"\n          variant=\"tertiary\"\n          id=\"show-all-button\"\n          size=\"xs\"\n        >\n          Show All\n        </ads-button>\n      </div>\n    </div>\n  </mat-menu>\n\n  <!-- Filter Menu -->\n  <mat-menu #filterMenu=\"matMenu\" class=\"filter-menu-panel\" (closed)=\"filterMenuComponent.onMenuClosed()\">\n    <ads-filter-menu\n      #filterMenuComponent\n      [columnSortFilterConfigs]=\"columnSortFilterConfigs\"\n      [columnFilterStates]=\"columnFilterStates()\"\n      [getFilterOptionsForField]=\"getFilterOptionsForFieldFn\"\n      [getHierarchicalFilterOptionsForField]=\"getHierarchicalFilterOptionsForFieldFn\"\n      [getFilterValuesForField]=\"getFilterValuesForFieldFn\"\n      [isColumnFilteredFn]=\"isColumnFilteredFn\"\n      [getFilterValueFormatterForField]=\"getFilterValueFormatterForFieldFn\"\n      (filterChanged)=\"onFilterMenuFilterChanged($event)\"\n      (filtersRemoved)=\"onFilterMenuFilterRemoved($event)\"\n    />\n  </mat-menu>\n\n  <!-- Sort Menu -->\n  <mat-menu #sortMenu=\"matMenu\" class=\"sort-menu-panel\">\n    <ads-sort-menu\n      [columnSortFilterConfigs]=\"columnSortFilterConfigs\"\n      [columnSortStates]=\"columnSortStates()\"\n      (sortChanged)=\"onSortMenuSortChanged($event)\"\n      (sortsRemoved)=\"onSortMenuSortsRemoved($event)\"\n    />\n  </mat-menu>\n</div>\n", styles: [":host::ng-deep{--ag-wrapper-border-radius: 10px}:host::ng-deep ag-grid-angular{--ag-grid-size: 4px;--ag-border-radius: 5px;--ag-font-family: \"Roboto\";--ag-font-size: 16px;--ag-header-foreground-color: var(--color-medium);--ag-header-background-color: var(--color-light-30);--ag-background-color: var(--color-white);--ag-header-height: 45px;--ag-row-height: 45px;--ag-border-color: var(--color-light);--ag-foreground-color: var(--color-medium);--ag-spacing: 4px;--ag-inherited-accent-color: var(--color-secondary-hover)}:host::ng-deep ag-grid-angular .ag-overlay-no-matching-rows-wrapper{display:flex;justify-content:center;align-items:center;height:100%}:host::ng-deep ag-grid-angular .ag-overlay-no-matching-rows-wrapper .ag-overlay-no-matching-rows-center{color:var(--color-medium);font-family:Roboto,sans-serif;font-size:16px;border:none;padding:0;background:transparent}:host::ng-deep ag-grid-angular .ag-header-cell-text{font-weight:600;line-height:21px}:host::ng-deep ag-grid-angular .ag-cell:focus,:host::ng-deep ag-grid-angular .ag-cell-focus{outline:none!important;border:none!important;box-shadow:none!important}:host::ng-deep ag-grid-angular .ag-row,:host::ng-deep ag-grid-angular .ag-header,:host::ng-deep ag-grid-angular .ag-advanced-filter-header{border-bottom:none}:host::ng-deep ag-grid-angular .ag-row-even{background-color:var(--color-white)}:host::ng-deep ag-grid-angular .ag-row-odd{background-color:var(--color-white)}:host::ng-deep ag-grid-angular .ag-sort-indicator-container{min-width:fit-content}:host::ng-deep ag-grid-angular .ag-sort-indicator-icon>svg{fill:var(--color-medium);stroke:var(--color-medium)}:host::ng-deep ag-grid-angular .ag-header-cell-filter-button>svg{fill:var(--color-medium);stroke:var(--color-medium)}:host::ng-deep ag-grid-angular .ag-theme-quartz{--ag-background-color: var(--color-light-30);--ag-foreground-color: var(--color-black);--ag-input-border-color: var(--color-light);--ag-input-focus-border-color: var(--color-medium);--ag-input-focus-box-shadow: none}:host::ng-deep ag-grid-angular .ag-theme-quartz .ag-input-wrapper input::placeholder{color:var(--color-medium);opacity:1}:host::ng-deep ag-grid-angular .ag-theme-quartz .ag-input-wrapper:before{background-image:none;content:none}:host::ng-deep ag-grid-angular .ag-theme-quartz .ag-input-wrapper input{padding-left:8px!important}:host::ng-deep .ads-table-container{display:flex;flex-direction:column;width:100%;height:100%}:host::ng-deep .ads-table-container.no-border .table-header{border:none;border-radius:0}:host::ng-deep .ads-table-container.no-border::ng-deep ag-grid-angular .ag-root-wrapper{border:none;border-radius:0}:host::ng-deep .ads-table-container.no-border .list-view-container{border:none;border-radius:0}:host::ng-deep .ads-table-container.with-header::ng-deep ag-grid-angular .ag-root-wrapper{border-top:none;border-top-left-radius:0;border-top-right-radius:0}:host::ng-deep .ads-table-container.with-header .list-view-container{border-top:none;border-top-left-radius:0;border-top-right-radius:0}:host::ng-deep .ads-table-container .table-header{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:16px;background-color:var(--color-white);border:1px solid var(--color-light);border-top-left-radius:var(--ag-wrapper-border-radius);border-top-right-radius:var(--ag-wrapper-border-radius)}:host::ng-deep .ads-table-container .table-header .header-template-container{display:flex;align-items:center;gap:8px;min-width:0;flex:1 1 0}:host::ng-deep .ads-table-container .table-header .header-template-container .header-template{min-width:0;flex:1 1 0}:host::ng-deep .ads-table-container .table-header .header-actions{display:flex;gap:8px;flex-wrap:nowrap;flex-shrink:0;justify-content:flex-end}:host::ng-deep .ads-table-container .table-header .header-actions ads-table-button{display:flex}:host::ng-deep .ads-table-container .table-header .change-view-button{display:flex;height:30px;padding:0 12px;border-radius:100px;background-color:var(--color-muted);align-items:center;cursor:pointer;flex-shrink:0}:host::ng-deep .ads-table-container .table-header .change-view-button:hover{background-color:var(--color-secondary-hover)}:host::ng-deep .ads-table-container .table-header .change-view-button:hover ::ng-deep svg{stroke:var(--color-white)}:host::ng-deep .list-view-container{display:flex;flex-direction:column;border:1px solid var(--color-light);border-radius:var(--ag-wrapper-border-radius)}:host::ng-deep .list-view-container .list-view-item{flex-shrink:0}:host::ng-deep .list-view-container .list-view-loading{display:flex;justify-content:center;align-items:center;height:100%}:host::ng-deep .list-view-container .list-view-empty{display:flex;justify-content:center;align-items:center;height:100%;color:var(--color-medium)}:host::ng-deep .list-view-loading-container{overflow:hidden}:host::ng-deep cdk-virtual-scroll-viewport.list-view-container .cdk-virtual-scroll-content-wrapper{display:flex;flex-direction:column;width:100%}::ng-deep .column-visibility-menu{width:234px;max-width:498px;border-radius:5px;box-shadow:0 4px 12px #00000026;border:1px solid var(--color-light)}::ng-deep .column-visibility-menu .mat-mdc-menu-content{padding:0}::ng-deep .column-visibility-menu .mat-mdc-menu-content .menu-content{background-color:var(--color-white)}::ng-deep .column-visibility-menu .mat-mdc-menu-content .menu-content .dropdown-label{padding:12px 12px 0;color:var(--color-medium);font-size:12px;font-weight:600;line-height:16px}::ng-deep .column-visibility-menu .mat-mdc-menu-content .menu-content .dropdown-body{overflow-y:auto}::ng-deep .column-visibility-menu .mat-mdc-menu-content .menu-content .dropdown-body .column-row{display:flex;justify-content:space-between;align-items:center;padding:0 12px;height:45px;gap:12px}::ng-deep .column-visibility-menu .mat-mdc-menu-content .menu-content .dropdown-body .column-row .column-name{font-size:16px;font-weight:400;color:var(--color-dark);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px;flex:1}::ng-deep .column-visibility-menu .mat-mdc-menu-content .menu-content .dropdown-body .column-row .column-toggle{display:flex;justify-content:flex-end}::ng-deep .column-visibility-menu .mat-mdc-menu-content .menu-content .dropdown-body .column-row .column-toggle ::ng-deep ads-slide-toggle .ads-toggle{height:45px!important}::ng-deep .column-visibility-menu .mat-mdc-menu-content .menu-content .dropdown-footer{display:flex;justify-content:space-between;gap:12px;padding:12px}::ng-deep .column-visibility-menu .mat-mdc-menu-content .menu-content .dropdown-footer ::ng-deep ads-button{flex:1}::ng-deep .filter-menu-panel{width:316px;border-radius:5px;box-shadow:0 4px 12px #00000026;border:1px solid var(--color-light)}::ng-deep .sort-menu-panel{width:316px;border-radius:5px;box-shadow:0 4px 12px #00000026;border:1px solid var(--color-light)}\n"] }]
+            args: [{ selector: 'ads-table', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ads-table-container\" [style.width]=\"width\" [class.with-header]=\"showHeaderActions\" [class.no-border]=\"!showBorder\">\n  @if (showHeaderActions) {\n    <div class=\"table-header\">\n      <div class=\"header-template-container\">\n        @if (showChangeViewButton) {\n          <div class=\"change-view-button\" (click)=\"toggleView()\">\n            @if (isListView()) {\n              <ads-icon name=\"grid_view\" size=\"xxxs\" stroke=\"iconPrimary\" />\n            } @else {\n              <ads-icon name=\"list_view\" size=\"xxxs\" stroke=\"iconPrimary\" />\n            }\n          </div>\n        }\n        <div class=\"header-template\">\n          @if (headerTemplate) {\n            <ng-container *ngTemplateOutlet=\"headerTemplate\" />\n          }\n        </div>\n\n      </div>\n\n      <div class=\"header-actions\">\n        @if (!isListView()) {\n          <ads-table-button\n            id=\"show-hide-columns-button\"\n            [matMenuTriggerFor]=\"columnVisibilityMenu\"\n            (menuOpened)=\"openColumnVisibilityMenu()\"\n            (menuClosed)=\"onColumnVisibilityMenuClosed()\"\n          >\n            <ads-icon\n              name=\"visibility_eye_none\"\n              theme=\"secondary\"\n              stroke=\"secondary\"\n              size=\"xxxs\"\n            />\n            @if (!mobileHeaderView) {\n              {{ hideColumnButtonLabel }}\n            }\n          </ads-table-button>\n        }\n\n        <ads-table-button\n          id=\"filter-button\"\n          [matMenuTriggerFor]=\"filterMenu\"\n          (menuOpened)=\"openFilterMenu()\"\n          (menuClosed)=\"onFilterMenuClosed()\"\n        >\n          <ads-icon\n            name=\"filter\"\n            theme=\"secondary\"\n            size=\"xxxs\"\n          />\n          @if (!mobileHeaderView) {\n            {{ filterButtonLabel }}\n          }\n\n        </ads-table-button>\n        <ads-table-button\n          id=\"sort-button\"\n          [matMenuTriggerFor]=\"sortMenu\"\n        >\n          <ads-icon\n            name=\"arrow_up_and_down\"\n            theme=\"secondary\"\n            size=\"xxxs\"\n          />\n          @if (!mobileHeaderView) {\n            {{ sortButtonLabel }}\n          }\n        </ads-table-button>\n      </div>\n    </div>\n  }\n\n  <ag-grid-angular\n    [ngStyle]=\"{ height: height }\"\n    [style.display]=\"isListView() ? 'none' : ''\"\n    [icons]=\"getAgGridIcons()\"\n    class=\"ag-theme-quartz\"\n    [gridOptions]=\"gridOptions\"\n    [rowData]=\"rowData\"\n    [columnDefs]=\"getProcessedColumnDefs()\"\n    [defaultColDef]=\"getDefaultColDef()\"\n    [components]=\"frameworkComponents\"\n    [isExternalFilterPresent]=\"isExternalFilterPresent\"\n    [doesExternalFilterPass]=\"doesExternalFilterPass\"\n    (gridReady)=\"gridReady($event)\"\n    (firstDataRendered)=\"firstDataRendered($event)\"\n    (sortChanged)=\"sortChanged($event)\"\n    (filterChanged)=\"filterChanged($event)\"\n    [theme]=\"themeQuartz\"\n    [loading]=\"loading\"\n    [enableCellTextSelection]=\"true\"\n    [ensureDomOrder]=\"true\"\n  />\n\n  @if (isListView()) {\n    @if (loading) {\n      <div class=\"list-view-container list-view-loading-container\" [ngStyle]=\"{ height: height }\">\n        <div class=\"list-view-loading\">\n          <ads-progress-spinner [size]=\"SpinnerSize.small\" />\n        </div>\n      </div>\n    } @else {\n      <cdk-virtual-scroll-viewport\n        class=\"list-view-container\"\n        [itemSize]=\"listItemHeight()\"\n        [minBufferPx]=\"listItemHeight() * 4\"\n        [maxBufferPx]=\"listItemHeight() * 8\"\n        [ngStyle]=\"{ height: height }\"\n      >\n        <div\n          *cdkVirtualFor=\"let row of listRowDataCache(); trackBy: listTrackBy\"\n          class=\"list-view-item\"\n        >\n          @if (listItemTemplate) {\n            <ng-container\n              [ngTemplateOutlet]=\"listItemTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: row }\"\n            />\n          }\n        </div>\n      </cdk-virtual-scroll-viewport>\n    }\n  }\n\n  <!-- Column Visibility Menu -->\n  <mat-menu #columnVisibilityMenu=\"matMenu\" class=\"column-visibility-menu\" [class.has-header]=\"showHeaderActions\">\n    <div class=\"menu-content\" (click)=\"$event.stopPropagation()\">\n      <p class=\"dropdown-label\">Show/Hide Columns</p>\n      <div class=\"dropdown-body\">\n        @for (column of columnVisibilityList(); track $index) {\n          <div class=\"column-row\">\n            <span\n              class=\"column-name\"\n              [matTooltip]=\"column.headerName\"\n              [matTooltipDisabled]=\"getTooltipDisabled(column.headerName)\"\n            >\n              {{ column.headerName }}\n            </span>\n            <div class=\"column-toggle\">\n              <ads-slide-toggle\n                [id]=\"'toggle-' + column.field\"\n                [control]=\"column.control\"\n                [showFooter]=\"false\"\n                [customTitles]=\"['Show', 'Hide']\"\n              />\n            </div>\n          </div>\n        }\n      </div>\n\n      <ads-divider />\n\n      <div class=\"dropdown-footer\">\n        <ads-button\n          [fullWidth]=\"true\"\n          (click)=\"hideAllColumns()\"\n          [disabled]=\"allColumnsHidden\"\n          variant=\"tertiary\"\n          id='hide-all-button'\n          size=\"xs\"\n        >\n          Hide All\n        </ads-button>\n        <ads-button\n          [fullWidth]=\"true\"\n          (click)=\"showAllColumns()\"\n          [disabled]=\"allColumnsVisible\"\n          variant=\"tertiary\"\n          id=\"show-all-button\"\n          size=\"xs\"\n        >\n          Show All\n        </ads-button>\n      </div>\n    </div>\n  </mat-menu>\n\n  <!-- Filter Menu -->\n  <mat-menu #filterMenu=\"matMenu\" class=\"filter-menu-panel\" (closed)=\"filterMenuComponent.onMenuClosed()\">\n    <ads-filter-menu\n      #filterMenuComponent\n      [columnSortFilterConfigs]=\"columnSortFilterConfigs\"\n      [columnFilterStates]=\"columnFilterStates()\"\n      [getFilterOptionsForField]=\"getFilterOptionsForFieldFn\"\n      [getHierarchicalFilterOptionsForField]=\"getHierarchicalFilterOptionsForFieldFn\"\n      [getFilterValuesForField]=\"getFilterValuesForFieldFn\"\n      [isColumnFilteredFn]=\"isColumnFilteredFn\"\n      [getFilterValueFormatterForField]=\"getFilterValueFormatterForFieldFn\"\n      (filterChanged)=\"onFilterMenuFilterChanged($event)\"\n      (filtersRemoved)=\"onFilterMenuFilterRemoved($event)\"\n    />\n  </mat-menu>\n\n  <!-- Sort Menu -->\n  <mat-menu #sortMenu=\"matMenu\" class=\"sort-menu-panel\">\n    <ads-sort-menu\n      [columnSortFilterConfigs]=\"columnSortFilterConfigs\"\n      [columnSortStates]=\"columnSortStates()\"\n      (sortChanged)=\"onSortMenuSortChanged($event)\"\n      (sortsRemoved)=\"onSortMenuSortsRemoved($event)\"\n    />\n  </mat-menu>\n</div>\n", styles: [":host::ng-deep{--ag-wrapper-border-radius: 10px}:host::ng-deep ag-grid-angular{--ag-grid-size: 4px;--ag-border-radius: 5px;--ag-font-family: \"Roboto\";--ag-font-size: 16px;--ag-header-foreground-color: var(--color-medium);--ag-header-background-color: var(--color-light-30);--ag-background-color: var(--color-white);--ag-header-height: 45px;--ag-row-height: 45px;--ag-border-color: var(--color-light);--ag-foreground-color: var(--color-medium);--ag-spacing: 4px;--ag-inherited-accent-color: var(--color-secondary-hover)}:host::ng-deep ag-grid-angular .ag-overlay-no-matching-rows-wrapper{display:flex;justify-content:center;align-items:center;height:100%}:host::ng-deep ag-grid-angular .ag-overlay-no-matching-rows-wrapper .ag-overlay-no-matching-rows-center{color:var(--color-medium);font-family:Roboto,sans-serif;font-size:16px;border:none;padding:0;background:transparent}:host::ng-deep ag-grid-angular .ag-header-cell-text{font-weight:600;line-height:21px}:host::ng-deep ag-grid-angular .ag-cell:focus,:host::ng-deep ag-grid-angular .ag-cell-focus{outline:none!important;border:none!important;box-shadow:none!important}:host::ng-deep ag-grid-angular .ag-row,:host::ng-deep ag-grid-angular .ag-header,:host::ng-deep ag-grid-angular .ag-advanced-filter-header{border-bottom:none}:host::ng-deep ag-grid-angular .ag-row-even{background-color:var(--color-white)}:host::ng-deep ag-grid-angular .ag-row-odd{background-color:var(--color-white)}:host::ng-deep ag-grid-angular .ag-sort-indicator-container{min-width:fit-content}:host::ng-deep ag-grid-angular .ag-sort-indicator-icon>svg{fill:var(--color-medium);stroke:var(--color-medium)}:host::ng-deep ag-grid-angular .ag-header-cell-filter-button>svg{fill:var(--color-medium);stroke:var(--color-medium)}:host::ng-deep ag-grid-angular .ag-header-cell--active{background-color:var(--color-secondary-10)!important}:host::ng-deep ag-grid-angular .ag-theme-quartz{--ag-background-color: var(--color-light-30);--ag-foreground-color: var(--color-black);--ag-input-border-color: var(--color-light);--ag-input-focus-border-color: var(--color-medium);--ag-input-focus-box-shadow: none}:host::ng-deep ag-grid-angular .ag-theme-quartz .ag-input-wrapper input::placeholder{color:var(--color-medium);opacity:1}:host::ng-deep ag-grid-angular .ag-theme-quartz .ag-input-wrapper:before{background-image:none;content:none}:host::ng-deep ag-grid-angular .ag-theme-quartz .ag-input-wrapper input{padding-left:8px!important}:host::ng-deep .ads-table-container{display:flex;flex-direction:column;width:100%;height:100%}:host::ng-deep .ads-table-container.no-border .table-header{border:none;border-radius:0}:host::ng-deep .ads-table-container.no-border::ng-deep ag-grid-angular .ag-root-wrapper{border:none;border-radius:0}:host::ng-deep .ads-table-container.no-border .list-view-container{border:none;border-radius:0}:host::ng-deep .ads-table-container.with-header::ng-deep ag-grid-angular .ag-root-wrapper{border-top:none;border-top-left-radius:0;border-top-right-radius:0}:host::ng-deep .ads-table-container.with-header .list-view-container{border-top:none;border-top-left-radius:0;border-top-right-radius:0}:host::ng-deep .ads-table-container .table-header{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:16px;background-color:var(--color-white);border:1px solid var(--color-light);border-top-left-radius:var(--ag-wrapper-border-radius);border-top-right-radius:var(--ag-wrapper-border-radius)}:host::ng-deep .ads-table-container .table-header .header-template-container{display:flex;align-items:center;gap:8px;min-width:0;flex:1 1 0}:host::ng-deep .ads-table-container .table-header .header-template-container .header-template{min-width:0;flex:1 1 0}:host::ng-deep .ads-table-container .table-header .header-actions{display:flex;gap:8px;flex-wrap:nowrap;flex-shrink:0;justify-content:flex-end}:host::ng-deep .ads-table-container .table-header .header-actions ads-table-button{display:flex}:host::ng-deep .ads-table-container .table-header .change-view-button{display:flex;height:30px;padding:0 12px;border-radius:100px;background-color:var(--color-muted);align-items:center;cursor:pointer;flex-shrink:0}:host::ng-deep .ads-table-container .table-header .change-view-button:hover{background-color:var(--color-secondary-hover)}:host::ng-deep .ads-table-container .table-header .change-view-button:hover ::ng-deep svg{stroke:var(--color-white)}:host::ng-deep .list-view-container{display:flex;flex-direction:column;border:1px solid var(--color-light);border-radius:var(--ag-wrapper-border-radius)}:host::ng-deep .list-view-container .list-view-item{flex-shrink:0}:host::ng-deep .list-view-container .list-view-loading{display:flex;justify-content:center;align-items:center;height:100%}:host::ng-deep .list-view-container .list-view-empty{display:flex;justify-content:center;align-items:center;height:100%;color:var(--color-medium)}:host::ng-deep .list-view-loading-container{overflow:hidden}:host::ng-deep cdk-virtual-scroll-viewport.list-view-container .cdk-virtual-scroll-content-wrapper{display:flex;flex-direction:column;width:100%}::ng-deep .column-visibility-menu{width:234px;max-width:498px;border-radius:5px;box-shadow:0 4px 12px #00000026;border:1px solid var(--color-light)}::ng-deep .column-visibility-menu .mat-mdc-menu-content{padding:0}::ng-deep .column-visibility-menu .mat-mdc-menu-content .menu-content{background-color:var(--color-white)}::ng-deep .column-visibility-menu .mat-mdc-menu-content .menu-content .dropdown-label{padding:12px 12px 0;color:var(--color-medium);font-size:12px;font-weight:600;line-height:16px}::ng-deep .column-visibility-menu .mat-mdc-menu-content .menu-content .dropdown-body{overflow-y:auto}::ng-deep .column-visibility-menu .mat-mdc-menu-content .menu-content .dropdown-body .column-row{display:flex;justify-content:space-between;align-items:center;padding:0 12px;height:45px;gap:12px}::ng-deep .column-visibility-menu .mat-mdc-menu-content .menu-content .dropdown-body .column-row .column-name{font-size:16px;font-weight:400;color:var(--color-dark);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px;flex:1}::ng-deep .column-visibility-menu .mat-mdc-menu-content .menu-content .dropdown-body .column-row .column-toggle{display:flex;justify-content:flex-end}::ng-deep .column-visibility-menu .mat-mdc-menu-content .menu-content .dropdown-body .column-row .column-toggle ::ng-deep ads-slide-toggle .ads-toggle{height:45px!important}::ng-deep .column-visibility-menu .mat-mdc-menu-content .menu-content .dropdown-footer{display:flex;justify-content:space-between;gap:12px;padding:12px}::ng-deep .column-visibility-menu .mat-mdc-menu-content .menu-content .dropdown-footer ::ng-deep ads-button{flex:1}::ng-deep .filter-menu-panel{width:316px;border-radius:5px;box-shadow:0 4px 12px #00000026;border:1px solid var(--color-light)}::ng-deep .sort-menu-panel{width:316px;border-radius:5px;box-shadow:0 4px 12px #00000026;border:1px solid var(--color-light)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.AdsIconRegistry }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { width: [{
                 type: Input
             }], height: [{
@@ -10625,11 +10688,11 @@ class AdsScmsSideNavBarComponent extends AbstractSideNavBarComponent {
         this.checkScreenWidth();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", 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: "21.0.6", 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": "onWindowResize()" } }, 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    (dragStart)=\"onSplitDragStart()\"\n    (dragEnd)=\"onSplitDragEnd(); 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-text-color: var(--color-medium);--mat-expansion-container-text-size: font-size(text-base);box-shadow:none!important;border:1px solid}.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 a{cursor:pointer}.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", ":host{min-height:100vh;display:flex;flex-direction:column}.nav-container{display:flex;flex-direction:column;height:auto;overflow:visible}.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}:host ::ng-deep as-split{min-height:100vh;overflow:visible!important}:host ::ng-deep as-split>.as-split-area:first-child{position:relative;top:auto;height:auto;overflow:visible;z-index:1}:host ::ng-deep .regular-menu-content-container{position:fixed;top:0;left:0;height:100vh;width:var(--ads-scms-sidebar-width, 220px);overflow:hidden;background-color:var(--color-white);z-index:2}:host ::ng-deep .regular-menu-content-container .nav-container{height:calc(100vh - 64px);overflow-y:auto;overflow-x:hidden}:host ::ng-deep as-split>.as-split-gutter{position:relative;z-index:1003}:host ::ng-deep as-split.as-dragging{-webkit-user-select:none;user-select:none}.regular-menu-content-container{height:auto}.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);position:fixed;top:0;left:0;right:0;z-index:1001}\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$6.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$6.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$2.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$2.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: "21.0.6", 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": "onWindowResize()" } }, 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    (dragStart)=\"onSplitDragStart()\"\n    (dragEnd)=\"onSplitDragEnd(); 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-text-color: var(--color-medium);--mat-expansion-container-text-size: font-size(text-base);--mat-expansion-container-background-color: transparent;box-shadow:none!important;border:1px solid}.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 a{cursor:pointer}.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", ":host{min-height:100vh;display:flex;flex-direction:column}.nav-container{display:flex;flex-direction:column;height:auto;overflow:visible}.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}:host ::ng-deep as-split{min-height:100vh;overflow:visible!important}:host ::ng-deep as-split>.as-split-area:first-child{position:relative;top:auto;height:auto;overflow:visible;z-index:1}:host ::ng-deep .regular-menu-content-container{position:fixed;top:0;left:0;height:100vh;width:var(--ads-scms-sidebar-width, 220px);overflow:hidden;background-color:var(--color-white);z-index:2}:host ::ng-deep .regular-menu-content-container .nav-container{height:calc(100vh - 64px);overflow-y:auto;overflow-x:hidden}:host ::ng-deep as-split>.as-split-gutter{position:relative;z-index:1003}:host ::ng-deep as-split.as-dragging{-webkit-user-select:none;user-select:none}.regular-menu-content-container{height:auto}.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);position:fixed;top:0;left:0;right:0;z-index:1001}\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$6.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$6.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$2.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$2.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: "21.0.6", 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    (dragStart)=\"onSplitDragStart()\"\n    (dragEnd)=\"onSplitDragEnd(); 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-text-color: var(--color-medium);--mat-expansion-container-text-size: font-size(text-base);box-shadow:none!important;border:1px solid}.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 a{cursor:pointer}.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", ":host{min-height:100vh;display:flex;flex-direction:column}.nav-container{display:flex;flex-direction:column;height:auto;overflow:visible}.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}:host ::ng-deep as-split{min-height:100vh;overflow:visible!important}:host ::ng-deep as-split>.as-split-area:first-child{position:relative;top:auto;height:auto;overflow:visible;z-index:1}:host ::ng-deep .regular-menu-content-container{position:fixed;top:0;left:0;height:100vh;width:var(--ads-scms-sidebar-width, 220px);overflow:hidden;background-color:var(--color-white);z-index:2}:host ::ng-deep .regular-menu-content-container .nav-container{height:calc(100vh - 64px);overflow-y:auto;overflow-x:hidden}:host ::ng-deep as-split>.as-split-gutter{position:relative;z-index:1003}:host ::ng-deep as-split.as-dragging{-webkit-user-select:none;user-select:none}.regular-menu-content-container{height:auto}.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);position:fixed;top:0;left:0;right:0;z-index:1001}\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    (dragStart)=\"onSplitDragStart()\"\n    (dragEnd)=\"onSplitDragEnd(); 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-text-color: var(--color-medium);--mat-expansion-container-text-size: font-size(text-base);--mat-expansion-container-background-color: transparent;box-shadow:none!important;border:1px solid}.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 a{cursor:pointer}.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", ":host{min-height:100vh;display:flex;flex-direction:column}.nav-container{display:flex;flex-direction:column;height:auto;overflow:visible}.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}:host ::ng-deep as-split{min-height:100vh;overflow:visible!important}:host ::ng-deep as-split>.as-split-area:first-child{position:relative;top:auto;height:auto;overflow:visible;z-index:1}:host ::ng-deep .regular-menu-content-container{position:fixed;top:0;left:0;height:100vh;width:var(--ads-scms-sidebar-width, 220px);overflow:hidden;background-color:var(--color-white);z-index:2}:host ::ng-deep .regular-menu-content-container .nav-container{height:calc(100vh - 64px);overflow-y:auto;overflow-x:hidden}:host ::ng-deep as-split>.as-split-gutter{position:relative;z-index:1003}:host ::ng-deep as-split.as-dragging{-webkit-user-select:none;user-select:none}.regular-menu-content-container{height:auto}.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);position:fixed;top:0;left:0;right:0;z-index:1001}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.Router }, { type: i1.AdsIconRegistry }], propDecorators: { splitter: [{
                 type: ViewChild,
                 args: ['splitter']
@@ -10786,11 +10849,11 @@ class AdsSideNavBarV2Component {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsSideNavBarV2Component, deps: [{ token: i1$2.Router }, { token: i1.AdsIconRegistry }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsSideNavBarV2Component, isStandalone: false, selector: "ads-side-nav-bar-v2", inputs: { navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsedChange: "collapsedChange" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "sideNavArea", first: true, predicate: ["sideNavArea"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"side-nav-bar-container\">\n  @if (!shouldHideNavBar || isMobile()) {\n    <div class=\"nav-container\" [class.collapsed]=\"isCollapsed\" [class.mobile]=\"isMobile()\">\n      <ng-container *ngTemplateOutlet=\"matAccordion\" />\n      @if(!isMobile()) {\n        <button class=\"collapse-toggle-btn\" (click)=\"toggleCollapsed()\">\n          @if (isCollapsed) {\n            <ads-icon size=\"auto\" name=\"chevron_right\" theme=\"iconPrimary\" />\n          } @else {\n            <ads-icon size=\"auto\" name=\"chevron_left\" theme=\"iconPrimary\" />\n          }\n        </button>\n      }\n    </div>\n  }\n</div>\n\n\n<ng-template #matAccordion>\n  <div class=\"nav-items-wrapper\">\n    <mat-accordion class=\"nav-items-container regular-items\">\n      @for (item of navItems(); 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              <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: 'sub-item' }\" />\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 [margin]=\"'16px 0'\" />\n        }\n      }\n    </mat-accordion>\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]=\"[className, hasActiveSubLink(item) ? 'active-nav-link' : '']\"\n    (click)=\"onNavItemClick()\"\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\">\n    @if (!isCollapsed) {\n      @if (!!item.icon) {\n        <ads-icon [name]=\"item.icon!\" size=\"xxs\" theme=\"iconPrimary\" stroke=\"iconPrimary\" />\n      }\n      <span>{{ item.label }}</span>\n    }\n  </div>\n</ng-template>\n", styles: [".mat-expansion-panel{--mat-expansion-container-shape: 5px;--mat-expansion-container-text-color: var(--color-medium);--mat-expansion-container-text-size: font-size(text-base);box-shadow:none!important;border:1px solid}.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", ":host{display:block;height:100%}.side-nav-bar-container{display:block;height:100%;position:relative}.nav-container{width:226px;padding:16px;display:flex;flex-direction:column;background-color:var(--color-white);border-right:1px solid var(--color-light);transition:width .3s ease;box-sizing:border-box;height:100%;flex-shrink:0;overflow-y:auto;overflow-x:hidden;z-index:1}.nav-container.mobile{position:absolute;top:0;left:0;height:100%;border-right:none;box-shadow:4px 1px 4px 0 var(--color-light-opacity-50);z-index:100;transition:transform .35s ease-in-out,opacity .35s ease-in-out;transform:translate(0);opacity:1}.nav-container.mobile.collapsed{transform:translate(-100%);opacity:0;pointer-events:none;width:226px;padding:16px}.nav-container.mobile.collapsed .nav-items-wrapper{display:flex}.nav-container.collapsed{width:24px;padding:16px 8px}.nav-container.collapsed .nav-items-wrapper{display:none}.collapse-toggle-btn{position:absolute;top:24px;right:-16px;width:32px;height:32px;border-radius:50%;border:1px solid var(--color-light);background-color:var(--color-white);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;z-index:10}.collapse-toggle-btn ads-icon{width:16px!important;height:16px!important}.collapse-toggle-btn ads-icon ::ng-deep svg{width:16px!important;height:16px!important}.collapse-toggle-btn:hover,.collapse-toggle-btn:focus,.collapse-toggle-btn:focus-visible{background-color:var(--color-light-30);outline:none}.collapse-toggle-btn:active{background-color:var(--color-light-50)}.nav-items-wrapper{display:flex;flex-direction:column;height:100%;min-height:0}.ads-nav-item-container{display:flex;gap:8px;align-items:center}.ads-nav-item-container span{font-size:14px;font-weight:600;color:var(--color-medium);white-space:nowrap}.ads-nav-link{display:block;text-decoration:none;font-size:14px;line-height:18px;color:var(--color-medium);border-radius:5px}.ads-nav-link:hover,.ads-nav-link:focus,.ads-nav-link:focus-visible{background-color:var(--color-secondary-hover)!important;color:var(--color-white)}.ads-nav-link:hover .ads-nav-item-container ads-icon ::ng-deep svg,.ads-nav-link:focus .ads-nav-item-container ads-icon ::ng-deep svg,.ads-nav-link:focus-visible .ads-nav-item-container ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}.ads-nav-link:hover .ads-nav-item-container span,.ads-nav-link:focus .ads-nav-item-container span,.ads-nav-link:focus-visible .ads-nav-item-container span{color:var(--color-white)!important}.ads-nav-link:hover,.ads-nav-link:focus,.ads-nav-link:focus-visible{outline:none}.ads-nav-link:active{background-color:var(--color-secondary-pressed)!important;color:var(--color-white)}.ads-nav-link:active .ads-nav-item-container ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}.ads-nav-link:active .ads-nav-item-container span{color:var(--color-white)!important}.ads-nav-link.active-nav-link{background-color:var(--color-secondary)!important;color:var(--color-white)}.ads-nav-link.active-nav-link .ads-nav-item-container ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!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 span{font-weight:600}.ads-nav-link.main-item{padding:8px 12px}.ads-nav-link.sub-item{padding:12px;margin:4px 0}.nav-items-wrapper ::ng-deep mat-panel-title{margin-right:8px!important}.nav-items-wrapper ::ng-deep mat-panel-title .ads-nav-item-container{align-items:center;background-color:transparent!important}.nav-items-wrapper ::ng-deep mat-panel-title .ads-nav-item-container span{font-size:14px;line-height:18px;font-weight:600!important;color:var(--color-medium)}.nav-items-wrapper ::ng-deep mat-expansion-panel{border:none!important;border-radius:unset!important;margin:unset!important;box-shadow:none!important;background-color:transparent!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-body{padding:0!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-body .ads-nav-link .ads-nav-item-container span{font-weight:400!important;font-size:16px;line-height:21px;white-space:nowrap}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-body .ads-nav-link.active-nav-link .ads-nav-item-container span{font-weight:400!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header{padding:8px 12px!important;border-radius:5px;background-color:transparent!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-description ads-icon{width:16px!important;height:18px!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-title .ads-nav-item-container{display:flex;gap:8px}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-title .ads-nav-item-container span{font-size:.875rem}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible{background-color:var(--color-secondary-hover)!important;color:var(--color-white)}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container ads-icon ::ng-deep svg,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible .ads-nav-item-container ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container span,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible .ads-nav-item-container span{color:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible{outline:none}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover mat-panel-description ads-icon ::ng-deep svg,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible mat-panel-description ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible{background-color:var(--color-secondary-hover)!important;color:var(--color-white)}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover .ads-nav-item-container ads-icon ::ng-deep svg,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible .ads-nav-item-container ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover .ads-nav-item-container span,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible .ads-nav-item-container span{color:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible{outline:none}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover mat-panel-description ads-icon ::ng-deep svg,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible mat-panel-description ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}\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: "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: "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: DividerComponent, selector: "ads-divider", inputs: ["margin", "color"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsSideNavBarV2Component, isStandalone: false, selector: "ads-side-nav-bar-v2", inputs: { navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsedChange: "collapsedChange" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "sideNavArea", first: true, predicate: ["sideNavArea"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"side-nav-bar-container\">\n  @if (!shouldHideNavBar || isMobile()) {\n    <div class=\"nav-container\" [class.collapsed]=\"isCollapsed\" [class.mobile]=\"isMobile()\">\n      <ng-container *ngTemplateOutlet=\"matAccordion\" />\n      @if(!isMobile()) {\n        <button class=\"collapse-toggle-btn\" (click)=\"toggleCollapsed()\">\n          @if (isCollapsed) {\n            <ads-icon size=\"auto\" name=\"chevron_right\" theme=\"iconPrimary\" />\n          } @else {\n            <ads-icon size=\"auto\" name=\"chevron_left\" theme=\"iconPrimary\" />\n          }\n        </button>\n      }\n    </div>\n  }\n</div>\n\n\n<ng-template #matAccordion>\n  <div class=\"nav-items-wrapper\">\n    <mat-accordion class=\"nav-items-container regular-items\">\n      @for (item of navItems(); 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              <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: 'sub-item' }\" />\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 [margin]=\"'16px 0'\" />\n        }\n      }\n    </mat-accordion>\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]=\"[className, hasActiveSubLink(item) ? 'active-nav-link' : '']\"\n    (click)=\"onNavItemClick()\"\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\">\n    @if (!isCollapsed) {\n      @if (!!item.icon) {\n        <ads-icon [name]=\"item.icon!\" size=\"xxs\" theme=\"iconPrimary\" stroke=\"iconPrimary\" />\n      }\n      <span>{{ item.label }}</span>\n    }\n  </div>\n</ng-template>\n", styles: [".mat-expansion-panel{--mat-expansion-container-shape: 5px;--mat-expansion-container-text-color: var(--color-medium);--mat-expansion-container-text-size: font-size(text-base);--mat-expansion-container-background-color: transparent;box-shadow:none!important;border:1px solid}.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", ":host{display:block;height:100%}.side-nav-bar-container{display:block;height:100%;position:relative}.nav-container{width:226px;padding:16px;display:flex;flex-direction:column;background-color:var(--color-white);border-right:1px solid var(--color-light);transition:width .3s ease;box-sizing:border-box;height:100%;flex-shrink:0;overflow-y:auto;overflow-x:hidden;z-index:1}.nav-container.mobile{position:absolute;top:0;left:0;height:100%;border-right:none;box-shadow:4px 1px 4px 0 var(--color-light-opacity-50);z-index:100;transition:transform .35s ease-in-out,opacity .35s ease-in-out;transform:translate(0);opacity:1}.nav-container.mobile.collapsed{transform:translate(-100%);opacity:0;pointer-events:none;width:226px;padding:16px}.nav-container.mobile.collapsed .nav-items-wrapper{display:flex}.nav-container.collapsed{width:24px;padding:16px 8px}.nav-container.collapsed .nav-items-wrapper{display:none}.collapse-toggle-btn{position:absolute;top:24px;right:-16px;width:32px;height:32px;border-radius:50%;border:1px solid var(--color-light);background-color:var(--color-white);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;z-index:10}.collapse-toggle-btn ads-icon{width:16px!important;height:16px!important}.collapse-toggle-btn ads-icon ::ng-deep svg{width:16px!important;height:16px!important}.collapse-toggle-btn:hover,.collapse-toggle-btn:focus,.collapse-toggle-btn:focus-visible{background-color:var(--color-light-30);outline:none}.collapse-toggle-btn:active{background-color:var(--color-light-50)}.nav-items-wrapper{display:flex;flex-direction:column;height:100%;min-height:0}.ads-nav-item-container{display:flex;gap:8px;align-items:center}.ads-nav-item-container span{font-size:14px;font-weight:600;color:var(--color-medium);white-space:nowrap}.ads-nav-link{display:block;text-decoration:none;font-size:14px;line-height:18px;color:var(--color-medium);border-radius:5px}.ads-nav-link:hover,.ads-nav-link:focus,.ads-nav-link:focus-visible{background-color:var(--color-secondary-hover)!important;color:var(--color-white)}.ads-nav-link:hover .ads-nav-item-container ads-icon ::ng-deep svg,.ads-nav-link:focus .ads-nav-item-container ads-icon ::ng-deep svg,.ads-nav-link:focus-visible .ads-nav-item-container ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}.ads-nav-link:hover .ads-nav-item-container span,.ads-nav-link:focus .ads-nav-item-container span,.ads-nav-link:focus-visible .ads-nav-item-container span{color:var(--color-white)!important}.ads-nav-link:hover,.ads-nav-link:focus,.ads-nav-link:focus-visible{outline:none}.ads-nav-link:active{background-color:var(--color-secondary-pressed)!important;color:var(--color-white)}.ads-nav-link:active .ads-nav-item-container ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}.ads-nav-link:active .ads-nav-item-container span{color:var(--color-white)!important}.ads-nav-link.active-nav-link{background-color:var(--color-secondary)!important;color:var(--color-white)}.ads-nav-link.active-nav-link .ads-nav-item-container ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!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 span{font-weight:600}.ads-nav-link.main-item{padding:8px 12px}.ads-nav-link.sub-item{padding:12px;margin:4px 0}.nav-items-wrapper ::ng-deep mat-panel-title{margin-right:8px!important}.nav-items-wrapper ::ng-deep mat-panel-title .ads-nav-item-container{align-items:center;background-color:transparent!important}.nav-items-wrapper ::ng-deep mat-panel-title .ads-nav-item-container span{font-size:14px;line-height:18px;font-weight:600!important;color:var(--color-medium)}.nav-items-wrapper ::ng-deep mat-expansion-panel{border:none!important;border-radius:unset!important;margin:unset!important;box-shadow:none!important;background-color:transparent!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-body{padding:0!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-body .ads-nav-link .ads-nav-item-container span{font-weight:400!important;font-size:16px;line-height:21px;white-space:nowrap}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-body .ads-nav-link.active-nav-link .ads-nav-item-container span{font-weight:400!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header{padding:8px 12px!important;border-radius:5px;background-color:transparent!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-description ads-icon{width:16px!important;height:18px!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-title .ads-nav-item-container{display:flex;gap:8px}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-title .ads-nav-item-container span{font-size:.875rem}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible{background-color:var(--color-secondary-hover)!important;color:var(--color-white)}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container ads-icon ::ng-deep svg,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible .ads-nav-item-container ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container span,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible .ads-nav-item-container span{color:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible{outline:none}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover mat-panel-description ads-icon ::ng-deep svg,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible mat-panel-description ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible{background-color:var(--color-secondary-hover)!important;color:var(--color-white)}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover .ads-nav-item-container ads-icon ::ng-deep svg,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible .ads-nav-item-container ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover .ads-nav-item-container span,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible .ads-nav-item-container span{color:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible{outline:none}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover mat-panel-description ads-icon ::ng-deep svg,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible mat-panel-description ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}\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: "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: "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: DividerComponent, selector: "ads-divider", inputs: ["margin", "color"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsSideNavBarV2Component, decorators: [{
             type: Component,
-            args: [{ selector: 'ads-side-nav-bar-v2', standalone: false, template: "<div class=\"side-nav-bar-container\">\n  @if (!shouldHideNavBar || isMobile()) {\n    <div class=\"nav-container\" [class.collapsed]=\"isCollapsed\" [class.mobile]=\"isMobile()\">\n      <ng-container *ngTemplateOutlet=\"matAccordion\" />\n      @if(!isMobile()) {\n        <button class=\"collapse-toggle-btn\" (click)=\"toggleCollapsed()\">\n          @if (isCollapsed) {\n            <ads-icon size=\"auto\" name=\"chevron_right\" theme=\"iconPrimary\" />\n          } @else {\n            <ads-icon size=\"auto\" name=\"chevron_left\" theme=\"iconPrimary\" />\n          }\n        </button>\n      }\n    </div>\n  }\n</div>\n\n\n<ng-template #matAccordion>\n  <div class=\"nav-items-wrapper\">\n    <mat-accordion class=\"nav-items-container regular-items\">\n      @for (item of navItems(); 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              <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: 'sub-item' }\" />\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 [margin]=\"'16px 0'\" />\n        }\n      }\n    </mat-accordion>\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]=\"[className, hasActiveSubLink(item) ? 'active-nav-link' : '']\"\n    (click)=\"onNavItemClick()\"\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\">\n    @if (!isCollapsed) {\n      @if (!!item.icon) {\n        <ads-icon [name]=\"item.icon!\" size=\"xxs\" theme=\"iconPrimary\" stroke=\"iconPrimary\" />\n      }\n      <span>{{ item.label }}</span>\n    }\n  </div>\n</ng-template>\n", styles: [".mat-expansion-panel{--mat-expansion-container-shape: 5px;--mat-expansion-container-text-color: var(--color-medium);--mat-expansion-container-text-size: font-size(text-base);box-shadow:none!important;border:1px solid}.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", ":host{display:block;height:100%}.side-nav-bar-container{display:block;height:100%;position:relative}.nav-container{width:226px;padding:16px;display:flex;flex-direction:column;background-color:var(--color-white);border-right:1px solid var(--color-light);transition:width .3s ease;box-sizing:border-box;height:100%;flex-shrink:0;overflow-y:auto;overflow-x:hidden;z-index:1}.nav-container.mobile{position:absolute;top:0;left:0;height:100%;border-right:none;box-shadow:4px 1px 4px 0 var(--color-light-opacity-50);z-index:100;transition:transform .35s ease-in-out,opacity .35s ease-in-out;transform:translate(0);opacity:1}.nav-container.mobile.collapsed{transform:translate(-100%);opacity:0;pointer-events:none;width:226px;padding:16px}.nav-container.mobile.collapsed .nav-items-wrapper{display:flex}.nav-container.collapsed{width:24px;padding:16px 8px}.nav-container.collapsed .nav-items-wrapper{display:none}.collapse-toggle-btn{position:absolute;top:24px;right:-16px;width:32px;height:32px;border-radius:50%;border:1px solid var(--color-light);background-color:var(--color-white);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;z-index:10}.collapse-toggle-btn ads-icon{width:16px!important;height:16px!important}.collapse-toggle-btn ads-icon ::ng-deep svg{width:16px!important;height:16px!important}.collapse-toggle-btn:hover,.collapse-toggle-btn:focus,.collapse-toggle-btn:focus-visible{background-color:var(--color-light-30);outline:none}.collapse-toggle-btn:active{background-color:var(--color-light-50)}.nav-items-wrapper{display:flex;flex-direction:column;height:100%;min-height:0}.ads-nav-item-container{display:flex;gap:8px;align-items:center}.ads-nav-item-container span{font-size:14px;font-weight:600;color:var(--color-medium);white-space:nowrap}.ads-nav-link{display:block;text-decoration:none;font-size:14px;line-height:18px;color:var(--color-medium);border-radius:5px}.ads-nav-link:hover,.ads-nav-link:focus,.ads-nav-link:focus-visible{background-color:var(--color-secondary-hover)!important;color:var(--color-white)}.ads-nav-link:hover .ads-nav-item-container ads-icon ::ng-deep svg,.ads-nav-link:focus .ads-nav-item-container ads-icon ::ng-deep svg,.ads-nav-link:focus-visible .ads-nav-item-container ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}.ads-nav-link:hover .ads-nav-item-container span,.ads-nav-link:focus .ads-nav-item-container span,.ads-nav-link:focus-visible .ads-nav-item-container span{color:var(--color-white)!important}.ads-nav-link:hover,.ads-nav-link:focus,.ads-nav-link:focus-visible{outline:none}.ads-nav-link:active{background-color:var(--color-secondary-pressed)!important;color:var(--color-white)}.ads-nav-link:active .ads-nav-item-container ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}.ads-nav-link:active .ads-nav-item-container span{color:var(--color-white)!important}.ads-nav-link.active-nav-link{background-color:var(--color-secondary)!important;color:var(--color-white)}.ads-nav-link.active-nav-link .ads-nav-item-container ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!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 span{font-weight:600}.ads-nav-link.main-item{padding:8px 12px}.ads-nav-link.sub-item{padding:12px;margin:4px 0}.nav-items-wrapper ::ng-deep mat-panel-title{margin-right:8px!important}.nav-items-wrapper ::ng-deep mat-panel-title .ads-nav-item-container{align-items:center;background-color:transparent!important}.nav-items-wrapper ::ng-deep mat-panel-title .ads-nav-item-container span{font-size:14px;line-height:18px;font-weight:600!important;color:var(--color-medium)}.nav-items-wrapper ::ng-deep mat-expansion-panel{border:none!important;border-radius:unset!important;margin:unset!important;box-shadow:none!important;background-color:transparent!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-body{padding:0!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-body .ads-nav-link .ads-nav-item-container span{font-weight:400!important;font-size:16px;line-height:21px;white-space:nowrap}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-body .ads-nav-link.active-nav-link .ads-nav-item-container span{font-weight:400!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header{padding:8px 12px!important;border-radius:5px;background-color:transparent!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-description ads-icon{width:16px!important;height:18px!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-title .ads-nav-item-container{display:flex;gap:8px}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-title .ads-nav-item-container span{font-size:.875rem}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible{background-color:var(--color-secondary-hover)!important;color:var(--color-white)}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container ads-icon ::ng-deep svg,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible .ads-nav-item-container ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container span,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible .ads-nav-item-container span{color:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible{outline:none}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover mat-panel-description ads-icon ::ng-deep svg,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible mat-panel-description ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible{background-color:var(--color-secondary-hover)!important;color:var(--color-white)}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover .ads-nav-item-container ads-icon ::ng-deep svg,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible .ads-nav-item-container ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover .ads-nav-item-container span,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible .ads-nav-item-container span{color:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible{outline:none}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover mat-panel-description ads-icon ::ng-deep svg,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible mat-panel-description ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}\n"] }]
+            args: [{ selector: 'ads-side-nav-bar-v2', standalone: false, template: "<div class=\"side-nav-bar-container\">\n  @if (!shouldHideNavBar || isMobile()) {\n    <div class=\"nav-container\" [class.collapsed]=\"isCollapsed\" [class.mobile]=\"isMobile()\">\n      <ng-container *ngTemplateOutlet=\"matAccordion\" />\n      @if(!isMobile()) {\n        <button class=\"collapse-toggle-btn\" (click)=\"toggleCollapsed()\">\n          @if (isCollapsed) {\n            <ads-icon size=\"auto\" name=\"chevron_right\" theme=\"iconPrimary\" />\n          } @else {\n            <ads-icon size=\"auto\" name=\"chevron_left\" theme=\"iconPrimary\" />\n          }\n        </button>\n      }\n    </div>\n  }\n</div>\n\n\n<ng-template #matAccordion>\n  <div class=\"nav-items-wrapper\">\n    <mat-accordion class=\"nav-items-container regular-items\">\n      @for (item of navItems(); 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              <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: 'sub-item' }\" />\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 [margin]=\"'16px 0'\" />\n        }\n      }\n    </mat-accordion>\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]=\"[className, hasActiveSubLink(item) ? 'active-nav-link' : '']\"\n    (click)=\"onNavItemClick()\"\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\">\n    @if (!isCollapsed) {\n      @if (!!item.icon) {\n        <ads-icon [name]=\"item.icon!\" size=\"xxs\" theme=\"iconPrimary\" stroke=\"iconPrimary\" />\n      }\n      <span>{{ item.label }}</span>\n    }\n  </div>\n</ng-template>\n", styles: [".mat-expansion-panel{--mat-expansion-container-shape: 5px;--mat-expansion-container-text-color: var(--color-medium);--mat-expansion-container-text-size: font-size(text-base);--mat-expansion-container-background-color: transparent;box-shadow:none!important;border:1px solid}.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", ":host{display:block;height:100%}.side-nav-bar-container{display:block;height:100%;position:relative}.nav-container{width:226px;padding:16px;display:flex;flex-direction:column;background-color:var(--color-white);border-right:1px solid var(--color-light);transition:width .3s ease;box-sizing:border-box;height:100%;flex-shrink:0;overflow-y:auto;overflow-x:hidden;z-index:1}.nav-container.mobile{position:absolute;top:0;left:0;height:100%;border-right:none;box-shadow:4px 1px 4px 0 var(--color-light-opacity-50);z-index:100;transition:transform .35s ease-in-out,opacity .35s ease-in-out;transform:translate(0);opacity:1}.nav-container.mobile.collapsed{transform:translate(-100%);opacity:0;pointer-events:none;width:226px;padding:16px}.nav-container.mobile.collapsed .nav-items-wrapper{display:flex}.nav-container.collapsed{width:24px;padding:16px 8px}.nav-container.collapsed .nav-items-wrapper{display:none}.collapse-toggle-btn{position:absolute;top:24px;right:-16px;width:32px;height:32px;border-radius:50%;border:1px solid var(--color-light);background-color:var(--color-white);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;z-index:10}.collapse-toggle-btn ads-icon{width:16px!important;height:16px!important}.collapse-toggle-btn ads-icon ::ng-deep svg{width:16px!important;height:16px!important}.collapse-toggle-btn:hover,.collapse-toggle-btn:focus,.collapse-toggle-btn:focus-visible{background-color:var(--color-light-30);outline:none}.collapse-toggle-btn:active{background-color:var(--color-light-50)}.nav-items-wrapper{display:flex;flex-direction:column;height:100%;min-height:0}.ads-nav-item-container{display:flex;gap:8px;align-items:center}.ads-nav-item-container span{font-size:14px;font-weight:600;color:var(--color-medium);white-space:nowrap}.ads-nav-link{display:block;text-decoration:none;font-size:14px;line-height:18px;color:var(--color-medium);border-radius:5px}.ads-nav-link:hover,.ads-nav-link:focus,.ads-nav-link:focus-visible{background-color:var(--color-secondary-hover)!important;color:var(--color-white)}.ads-nav-link:hover .ads-nav-item-container ads-icon ::ng-deep svg,.ads-nav-link:focus .ads-nav-item-container ads-icon ::ng-deep svg,.ads-nav-link:focus-visible .ads-nav-item-container ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}.ads-nav-link:hover .ads-nav-item-container span,.ads-nav-link:focus .ads-nav-item-container span,.ads-nav-link:focus-visible .ads-nav-item-container span{color:var(--color-white)!important}.ads-nav-link:hover,.ads-nav-link:focus,.ads-nav-link:focus-visible{outline:none}.ads-nav-link:active{background-color:var(--color-secondary-pressed)!important;color:var(--color-white)}.ads-nav-link:active .ads-nav-item-container ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}.ads-nav-link:active .ads-nav-item-container span{color:var(--color-white)!important}.ads-nav-link.active-nav-link{background-color:var(--color-secondary)!important;color:var(--color-white)}.ads-nav-link.active-nav-link .ads-nav-item-container ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!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 span{font-weight:600}.ads-nav-link.main-item{padding:8px 12px}.ads-nav-link.sub-item{padding:12px;margin:4px 0}.nav-items-wrapper ::ng-deep mat-panel-title{margin-right:8px!important}.nav-items-wrapper ::ng-deep mat-panel-title .ads-nav-item-container{align-items:center;background-color:transparent!important}.nav-items-wrapper ::ng-deep mat-panel-title .ads-nav-item-container span{font-size:14px;line-height:18px;font-weight:600!important;color:var(--color-medium)}.nav-items-wrapper ::ng-deep mat-expansion-panel{border:none!important;border-radius:unset!important;margin:unset!important;box-shadow:none!important;background-color:transparent!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-body{padding:0!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-body .ads-nav-link .ads-nav-item-container span{font-weight:400!important;font-size:16px;line-height:21px;white-space:nowrap}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-body .ads-nav-link.active-nav-link .ads-nav-item-container span{font-weight:400!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header{padding:8px 12px!important;border-radius:5px;background-color:transparent!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-description ads-icon{width:16px!important;height:18px!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-title .ads-nav-item-container{display:flex;gap:8px}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-title .ads-nav-item-container span{font-size:.875rem}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible{background-color:var(--color-secondary-hover)!important;color:var(--color-white)}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container ads-icon ::ng-deep svg,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible .ads-nav-item-container ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container span,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible .ads-nav-item-container span{color:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible{outline:none}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover mat-panel-description ads-icon ::ng-deep svg,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible mat-panel-description ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible{background-color:var(--color-secondary-hover)!important;color:var(--color-white)}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover .ads-nav-item-container ads-icon ::ng-deep svg,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible .ads-nav-item-container ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover .ads-nav-item-container span,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible .ads-nav-item-container span{color:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible{outline:none}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover mat-panel-description ads-icon ::ng-deep svg,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible mat-panel-description ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.Router }, { type: i1.AdsIconRegistry }], propDecorators: { sideNavArea: [{
                 type: ViewChild,
                 args: ['sideNavArea', { read: ElementRef }]