@ascentgl/ads-ui 21.29.1 → 21.30.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/fesm2022/ascentgl-ads-ui.mjs +4 -20
  2. package/fesm2022/ascentgl-ads-ui.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/types/ascentgl-ads-ui.d.ts +51 -55
package/fesm2022/ascentgl-ads-ui.mjs CHANGED
@@ -7982,10 +7982,6 @@ class AdsScmsSideNavBarV2Component {
7982
7982
  this.registry = registry;
7983
7983
  /** Array of nav elements */
7984
7984
  this.navItems = input([], ...(ngDevMode ? [{ debugName: "navItems" }] : []));
7985
- /** Array of breadcrumb elements */
7986
- this.breadcrumbs = input([], ...(ngDevMode ? [{ debugName: "breadcrumbs" }] : []));
7987
- /** Show/hide breadcrumbs on the current page */
7988
- this.showBreadcrumbs = input(false, ...(ngDevMode ? [{ debugName: "showBreadcrumbs" }] : []));
7989
7985
  /** Control collapsed state from outside */
7990
7986
  this.collapsed = input(undefined, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
7991
7987
  /** Emits when collapsed state changes */
@@ -8044,22 +8040,22 @@ class AdsScmsSideNavBarV2Component {
8044
8040
  /** @ignore */
8045
8041
  isActive(href) {
8046
8042
  return this.router.isActive(href, {
8047
- paths: 'subset',
8043
+ paths: 'exact',
8048
8044
  matrixParams: 'ignored',
8049
8045
  queryParams: 'ignored',
8050
8046
  fragment: 'ignored',
8051
8047
  });
8052
8048
  }
8053
8049
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsScmsSideNavBarV2Component, deps: [{ token: i1$2.Router }, { token: i1.AdsIconRegistry }], target: i0.ɵɵFactoryTarget.Component }); }
8054
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsScmsSideNavBarV2Component, isStandalone: false, selector: "ads-scms-side-nav-bar-v2", 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 }, 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) {\n <div class=\"nav-container\" [class.collapsed]=\"isCollapsed\">\n <ng-container *ngTemplateOutlet=\"matAccordion\" />\n <button class=\"collapse-toggle-btn\" (click)=\"toggleCollapsed()\">\n @if (isCollapsed) {\n <ads-icon size=\"xxs\" name=\"chevron_right\" theme=\"iconPrimary\" />\n } @else {\n <ads-icon size=\"xxs\" name=\"chevron_left\" theme=\"iconPrimary\" />\n }\n </button>\n </div>\n }\n <div class=\"content-container\">\n @if (showBreadcrumbs()) {\n <div class=\"breadcrumbs-container\">\n <ads-breadcrumb [breadcrumbs]=\"breadcrumbs()\" />\n </div>\n }\n <ng-container *ngTemplateOutlet=\"router\" />\n\n <ng-template #router>\n <ng-content></ng-content>\n </ng-template>\n </div>\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]=\"{\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\">\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-background-color: var(--color-white);--mat-expansion-container-text-color: var(--color-medium);--mat-expansion-container-text-size: font-size(text-base);box-shadow:none!important;border:1px solid var(--color-light)}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header{--mat-expansion-header-collapsed-state-height: unset;min-height:24px;height:auto;padding:16px}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header.mat-expanded{padding-bottom:8px}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header mat-panel-title{--mat-expansion-header-text-color: var(--color-dark);font-size:1.25rem;line-height:26px;font-weight:600;flex-basis:auto}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header mat-panel-description{margin:0;justify-content:end;flex-basis:auto}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header .mat-expansion-indicator{display:none}.mat-expansion-panel ::ng-deep .mat-expansion-panel-content .mat-expansion-panel-body{--mat-expansion-container-text-size: font-size(text-base);line-height:21px;padding:0 16px 16px}.mat-expansion-panel .mat-expansion-panel-header[aria-disabled=true]{background-color:var(--color-muted)}.mat-expansion-panel .mat-expansion-panel-header[aria-disabled=true] .mat-expansion-panel-header-title{color:var(--color-medium)}\n", ":host{--nav-top-offset: 0px;display:block;height:100%}.side-nav-bar-container{display:flex;flex-direction:row;height:100%}.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;position:sticky;top:72px;height:calc(100vh - 72px);flex-shrink:0;overflow:visible;z-index:1}.nav-container.collapsed{width:24px;padding:16px 8px}.nav-container.collapsed .nav-items-wrapper{display:none}.collapse-toggle-btn{position:absolute;top:24px;right:-12px;width:24px;height:24px;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: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}.nav-items-container{border-bottom:none}.bottom-nav-section{margin-top:auto}.breadcrumbs-container{padding:72px 48px 48px}.content-container{flex:1;overflow:auto}.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-dark)}.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{background-color:var(--color-secondary-hover);color:var(--color-white)}.ads-nav-link:hover .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{color:var(--color-white)!important}.ads-nav-link:focus,.ads-nav-link:focus-visible{background-color:var(--color-secondary-hover);color:var(--color-white);outline:none}.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:focus .ads-nav-item-container span,.ads-nav-link:focus-visible .ads-nav-item-container span{color:var(--color-white)!important}.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;font-weight:600}.ads-nav-link.main-item{padding:8px 12px}.ads-nav-link.sub-item{padding:12px}::ng-deep mat-panel-title{margin-right:8px!important}::ng-deep mat-panel-title .ads-nav-item-container{align-items:center;background-color:transparent!important}::ng-deep mat-panel-title .ads-nav-item-container span{font-size:14px;line-height:18px;font-weight:600!important;color:var(--color-dark)}::ng-deep mat-expansion-panel{border:none!important;border-radius:unset!important;margin:unset!important;box-shadow:none!important;background-color:transparent!important}::ng-deep mat-expansion-panel .mat-expansion-panel-body{padding:0!important}::ng-deep mat-expansion-panel .mat-expansion-panel-body .ads-nav-link .ads-nav-item-container span{font-weight:400;font-size:16px;line-height:21px}::ng-deep mat-expansion-panel .mat-expansion-panel-header{padding:8px 12px!important;border-radius:5px;background-color:transparent!important}::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-description ads-icon{width:16px!important;height:auto!important}::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-title .ads-nav-item-container{display:flex;gap:8px}::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-title .ads-nav-item-container span{font-size:1rem}::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover,::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible{background-color:var(--color-secondary-hover)!important}::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container ads-icon ::ng-deep svg,::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}::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container span,::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible .ads-nav-item-container span{color:var(--color-white)!important}::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover,::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible{outline:none}::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover mat-panel-description ads-icon ::ng-deep svg,::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}::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover,::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible{background-color:var(--color-secondary-hover)!important;outline:none}::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover .ads-nav-item-container ads-icon ::ng-deep svg,::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}::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover .ads-nav-item-container span,::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible .ads-nav-item-container span{color:var(--color-white)!important}::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover mat-panel-description ads-icon ::ng-deep svg,::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}::ng-deep ads-divider{margin:8px 0}\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: AdsBreadcrumbComponent, selector: "ads-breadcrumb", inputs: ["breadcrumbs"] }, { kind: "component", type: DividerComponent, selector: "ads-divider", inputs: ["margin", "color"] }] }); }
8050
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsScmsSideNavBarV2Component, isStandalone: false, selector: "ads-scms-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 class=\"content-container\">\n <ng-container *ngTemplateOutlet=\"router\" />\n\n <ng-template #router>\n <ng-content></ng-content>\n </ng-template>\n </div>\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 >\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-background-color: var(--color-white);--mat-expansion-container-text-color: var(--color-medium);--mat-expansion-container-text-size: font-size(text-base);box-shadow:none!important;border:1px solid var(--color-light)}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header{--mat-expansion-header-collapsed-state-height: unset;min-height:24px;height:auto;padding:16px}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header.mat-expanded{padding-bottom:8px}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header mat-panel-title{--mat-expansion-header-text-color: var(--color-dark);font-size:1.25rem;line-height:26px;font-weight:600;flex-basis:auto}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header mat-panel-description{margin:0;justify-content:end;flex-basis:auto}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header .mat-expansion-indicator{display:none}.mat-expansion-panel ::ng-deep .mat-expansion-panel-content .mat-expansion-panel-body{--mat-expansion-container-text-size: font-size(text-base);line-height:21px;padding:0 16px 16px}.mat-expansion-panel .mat-expansion-panel-header[aria-disabled=true]{background-color:var(--color-muted)}.mat-expansion-panel .mat-expansion-panel-header[aria-disabled=true] .mat-expansion-panel-header-title{color:var(--color-medium)}\n", ":host{display:block;height:100%}.side-nav-bar-container{display:flex;flex-direction:row;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;position:sticky;top:72px;height:calc(100vh - 72px);flex-shrink:0;overflow:visible;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}.nav-items-container{border-bottom:none}.bottom-nav-section{margin-top:auto}.content-container{flex:1;overflow:auto}.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-dark);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{background-color:var(--color-secondary-hover);color:var(--color-white)}.ads-nav-link:hover .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{color:var(--color-white)!important}.ads-nav-link:focus,.ads-nav-link:focus-visible{background-color:var(--color-secondary-hover);color:var(--color-white);outline:none}.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:focus .ads-nav-item-container span,.ads-nav-link:focus-visible .ads-nav-item-container span{color:var(--color-white)!important}.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;font-weight:600}.ads-nav-link.main-item{padding:8px 12px}.ads-nav-link.sub-item{padding:12px}::ng-deep mat-panel-title{margin-right:8px!important}::ng-deep mat-panel-title .ads-nav-item-container{align-items:center;background-color:transparent!important}::ng-deep mat-panel-title .ads-nav-item-container span{font-size:14px;line-height:18px;font-weight:600!important;color:var(--color-dark)}::ng-deep mat-expansion-panel{border:none!important;border-radius:unset!important;margin:unset!important;box-shadow:none!important;background-color:transparent!important}::ng-deep mat-expansion-panel .mat-expansion-panel-body{padding:0!important}::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}::ng-deep mat-expansion-panel .mat-expansion-panel-body .ads-nav-link.active-nav-link .ads-nav-item-container span{font-weight:400!important}::ng-deep mat-expansion-panel .mat-expansion-panel-header{padding:8px 12px!important;border-radius:5px;background-color:transparent!important}::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-description ads-icon{width:16px!important;height:18px!important}::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-title .ads-nav-item-container{display:flex;gap:8px}::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-title .ads-nav-item-container span{font-size:1rem}::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover,::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible{background-color:var(--color-secondary-hover)!important}::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container ads-icon ::ng-deep svg,::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}::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container span,::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible .ads-nav-item-container span{color:var(--color-white)!important}::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover,::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible{outline:none}::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover mat-panel-description ads-icon ::ng-deep svg,::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}::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover,::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible{background-color:var(--color-secondary-hover)!important;outline:none}::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover .ads-nav-item-container ads-icon ::ng-deep svg,::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}::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover .ads-nav-item-container span,::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible .ads-nav-item-container span{color:var(--color-white)!important}::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover mat-panel-description ads-icon ::ng-deep svg,::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}::ng-deep ads-divider{margin:8px 0}\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"] }] }); }
8055
8051
  }
8056
8052
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsScmsSideNavBarV2Component, decorators: [{
8057
8053
  type: Component,
8058
- args: [{ selector: 'ads-scms-side-nav-bar-v2', standalone: false, template: "<div class=\"side-nav-bar-container\">\n @if (!shouldHideNavBar) {\n <div class=\"nav-container\" [class.collapsed]=\"isCollapsed\">\n <ng-container *ngTemplateOutlet=\"matAccordion\" />\n <button class=\"collapse-toggle-btn\" (click)=\"toggleCollapsed()\">\n @if (isCollapsed) {\n <ads-icon size=\"xxs\" name=\"chevron_right\" theme=\"iconPrimary\" />\n } @else {\n <ads-icon size=\"xxs\" name=\"chevron_left\" theme=\"iconPrimary\" />\n }\n </button>\n </div>\n }\n <div class=\"content-container\">\n @if (showBreadcrumbs()) {\n <div class=\"breadcrumbs-container\">\n <ads-breadcrumb [breadcrumbs]=\"breadcrumbs()\" />\n </div>\n }\n <ng-container *ngTemplateOutlet=\"router\" />\n\n <ng-template #router>\n <ng-content></ng-content>\n </ng-template>\n </div>\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]=\"{\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\">\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-background-color: var(--color-white);--mat-expansion-container-text-color: var(--color-medium);--mat-expansion-container-text-size: font-size(text-base);box-shadow:none!important;border:1px solid var(--color-light)}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header{--mat-expansion-header-collapsed-state-height: unset;min-height:24px;height:auto;padding:16px}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header.mat-expanded{padding-bottom:8px}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header mat-panel-title{--mat-expansion-header-text-color: var(--color-dark);font-size:1.25rem;line-height:26px;font-weight:600;flex-basis:auto}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header mat-panel-description{margin:0;justify-content:end;flex-basis:auto}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header .mat-expansion-indicator{display:none}.mat-expansion-panel ::ng-deep .mat-expansion-panel-content .mat-expansion-panel-body{--mat-expansion-container-text-size: font-size(text-base);line-height:21px;padding:0 16px 16px}.mat-expansion-panel .mat-expansion-panel-header[aria-disabled=true]{background-color:var(--color-muted)}.mat-expansion-panel .mat-expansion-panel-header[aria-disabled=true] .mat-expansion-panel-header-title{color:var(--color-medium)}\n", ":host{--nav-top-offset: 0px;display:block;height:100%}.side-nav-bar-container{display:flex;flex-direction:row;height:100%}.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;position:sticky;top:72px;height:calc(100vh - 72px);flex-shrink:0;overflow:visible;z-index:1}.nav-container.collapsed{width:24px;padding:16px 8px}.nav-container.collapsed .nav-items-wrapper{display:none}.collapse-toggle-btn{position:absolute;top:24px;right:-12px;width:24px;height:24px;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: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}.nav-items-container{border-bottom:none}.bottom-nav-section{margin-top:auto}.breadcrumbs-container{padding:72px 48px 48px}.content-container{flex:1;overflow:auto}.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-dark)}.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{background-color:var(--color-secondary-hover);color:var(--color-white)}.ads-nav-link:hover .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{color:var(--color-white)!important}.ads-nav-link:focus,.ads-nav-link:focus-visible{background-color:var(--color-secondary-hover);color:var(--color-white);outline:none}.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:focus .ads-nav-item-container span,.ads-nav-link:focus-visible .ads-nav-item-container span{color:var(--color-white)!important}.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;font-weight:600}.ads-nav-link.main-item{padding:8px 12px}.ads-nav-link.sub-item{padding:12px}::ng-deep mat-panel-title{margin-right:8px!important}::ng-deep mat-panel-title .ads-nav-item-container{align-items:center;background-color:transparent!important}::ng-deep mat-panel-title .ads-nav-item-container span{font-size:14px;line-height:18px;font-weight:600!important;color:var(--color-dark)}::ng-deep mat-expansion-panel{border:none!important;border-radius:unset!important;margin:unset!important;box-shadow:none!important;background-color:transparent!important}::ng-deep mat-expansion-panel .mat-expansion-panel-body{padding:0!important}::ng-deep mat-expansion-panel .mat-expansion-panel-body .ads-nav-link .ads-nav-item-container span{font-weight:400;font-size:16px;line-height:21px}::ng-deep mat-expansion-panel .mat-expansion-panel-header{padding:8px 12px!important;border-radius:5px;background-color:transparent!important}::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-description ads-icon{width:16px!important;height:auto!important}::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-title .ads-nav-item-container{display:flex;gap:8px}::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-title .ads-nav-item-container span{font-size:1rem}::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover,::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible{background-color:var(--color-secondary-hover)!important}::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container ads-icon ::ng-deep svg,::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}::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container span,::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible .ads-nav-item-container span{color:var(--color-white)!important}::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover,::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible{outline:none}::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover mat-panel-description ads-icon ::ng-deep svg,::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}::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover,::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible{background-color:var(--color-secondary-hover)!important;outline:none}::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover .ads-nav-item-container ads-icon ::ng-deep svg,::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}::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover .ads-nav-item-container span,::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible .ads-nav-item-container span{color:var(--color-white)!important}::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover mat-panel-description ads-icon ::ng-deep svg,::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}::ng-deep ads-divider{margin:8px 0}\n"] }]
8054
+ args: [{ selector: 'ads-scms-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 class=\"content-container\">\n <ng-container *ngTemplateOutlet=\"router\" />\n\n <ng-template #router>\n <ng-content></ng-content>\n </ng-template>\n </div>\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 >\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-background-color: var(--color-white);--mat-expansion-container-text-color: var(--color-medium);--mat-expansion-container-text-size: font-size(text-base);box-shadow:none!important;border:1px solid var(--color-light)}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header{--mat-expansion-header-collapsed-state-height: unset;min-height:24px;height:auto;padding:16px}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header.mat-expanded{padding-bottom:8px}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header mat-panel-title{--mat-expansion-header-text-color: var(--color-dark);font-size:1.25rem;line-height:26px;font-weight:600;flex-basis:auto}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header mat-panel-description{margin:0;justify-content:end;flex-basis:auto}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header .mat-expansion-indicator{display:none}.mat-expansion-panel ::ng-deep .mat-expansion-panel-content .mat-expansion-panel-body{--mat-expansion-container-text-size: font-size(text-base);line-height:21px;padding:0 16px 16px}.mat-expansion-panel .mat-expansion-panel-header[aria-disabled=true]{background-color:var(--color-muted)}.mat-expansion-panel .mat-expansion-panel-header[aria-disabled=true] .mat-expansion-panel-header-title{color:var(--color-medium)}\n", ":host{display:block;height:100%}.side-nav-bar-container{display:flex;flex-direction:row;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;position:sticky;top:72px;height:calc(100vh - 72px);flex-shrink:0;overflow:visible;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}.nav-items-container{border-bottom:none}.bottom-nav-section{margin-top:auto}.content-container{flex:1;overflow:auto}.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-dark);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{background-color:var(--color-secondary-hover);color:var(--color-white)}.ads-nav-link:hover .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{color:var(--color-white)!important}.ads-nav-link:focus,.ads-nav-link:focus-visible{background-color:var(--color-secondary-hover);color:var(--color-white);outline:none}.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:focus .ads-nav-item-container span,.ads-nav-link:focus-visible .ads-nav-item-container span{color:var(--color-white)!important}.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;font-weight:600}.ads-nav-link.main-item{padding:8px 12px}.ads-nav-link.sub-item{padding:12px}::ng-deep mat-panel-title{margin-right:8px!important}::ng-deep mat-panel-title .ads-nav-item-container{align-items:center;background-color:transparent!important}::ng-deep mat-panel-title .ads-nav-item-container span{font-size:14px;line-height:18px;font-weight:600!important;color:var(--color-dark)}::ng-deep mat-expansion-panel{border:none!important;border-radius:unset!important;margin:unset!important;box-shadow:none!important;background-color:transparent!important}::ng-deep mat-expansion-panel .mat-expansion-panel-body{padding:0!important}::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}::ng-deep mat-expansion-panel .mat-expansion-panel-body .ads-nav-link.active-nav-link .ads-nav-item-container span{font-weight:400!important}::ng-deep mat-expansion-panel .mat-expansion-panel-header{padding:8px 12px!important;border-radius:5px;background-color:transparent!important}::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-description ads-icon{width:16px!important;height:18px!important}::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-title .ads-nav-item-container{display:flex;gap:8px}::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-title .ads-nav-item-container span{font-size:1rem}::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover,::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible{background-color:var(--color-secondary-hover)!important}::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container ads-icon ::ng-deep svg,::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}::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container span,::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible .ads-nav-item-container span{color:var(--color-white)!important}::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover,::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible{outline:none}::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover mat-panel-description ads-icon ::ng-deep svg,::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}::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover,::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible{background-color:var(--color-secondary-hover)!important;outline:none}::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover .ads-nav-item-container ads-icon ::ng-deep svg,::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}::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover .ads-nav-item-container span,::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible .ads-nav-item-container span{color:var(--color-white)!important}::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover mat-panel-description ads-icon ::ng-deep svg,::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}::ng-deep ads-divider{margin:8px 0}\n"] }]
8059
8055
  }], ctorParameters: () => [{ type: i1$2.Router }, { type: i1.AdsIconRegistry }], propDecorators: { sideNavArea: [{
8060
8056
  type: ViewChild,
8061
8057
  args: ['sideNavArea', { read: ElementRef }]
8062
- }], navItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "navItems", required: false }] }], breadcrumbs: [{ type: i0.Input, args: [{ isSignal: true, alias: "breadcrumbs", required: false }] }], showBreadcrumbs: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBreadcrumbs", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], collapsedChange: [{ type: i0.Output, args: ["collapsedChange"] }], onResize: [{
8058
+ }], navItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "navItems", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], collapsedChange: [{ type: i0.Output, args: ["collapsedChange"] }], onResize: [{
8063
8059
  type: HostListener,
8064
8060
  args: ['window:resize']
8065
8061
  }] } });
@@ -8067,8 +8063,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
8067
8063
  class AdsScmsSideNavBarV2Module {
8068
8064
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsScmsSideNavBarV2Module, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
8069
8065
  static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: AdsScmsSideNavBarV2Module, declarations: [AdsScmsSideNavBarV2Component], imports: [CommonModule,
8070
- SplitComponent,
8071
- SplitAreaComponent,
8072
8066
  RouterLink,
8073
8067
  RouterLinkActive,
8074
8068
  AdsIconModule,
@@ -8077,8 +8071,6 @@ class AdsScmsSideNavBarV2Module {
8077
8071
  MatExpansionPanelDescription,
8078
8072
  MatExpansionPanelHeader,
8079
8073
  MatExpansionPanelTitle,
8080
- AdsAscentLogoModule,
8081
- AdsBreadcrumbModule,
8082
8074
  MatMenu,
8083
8075
  MatToolbar,
8084
8076
  MatMenuTrigger,
@@ -8086,13 +8078,9 @@ class AdsScmsSideNavBarV2Module {
8086
8078
  RouterOutlet,
8087
8079
  AdsDividerModule], exports: [AdsScmsSideNavBarV2Component] }); }
8088
8080
  static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsScmsSideNavBarV2Module, imports: [CommonModule,
8089
- SplitComponent,
8090
- SplitAreaComponent,
8091
8081
  AdsIconModule,
8092
8082
  MatExpansionPanel,
8093
8083
  MatExpansionPanelHeader,
8094
- AdsAscentLogoModule,
8095
- AdsBreadcrumbModule,
8096
8084
  MatMenu,
8097
8085
  MatToolbar,
8098
8086
  MatIconButton,
@@ -8103,8 +8091,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
8103
8091
  args: [{
8104
8092
  imports: [
8105
8093
  CommonModule,
8106
- SplitComponent,
8107
- SplitAreaComponent,
8108
8094
  RouterLink,
8109
8095
  RouterLinkActive,
8110
8096
  AdsIconModule,
@@ -8113,8 +8099,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
8113
8099
  MatExpansionPanelDescription,
8114
8100
  MatExpansionPanelHeader,
8115
8101
  MatExpansionPanelTitle,
8116
- AdsAscentLogoModule,
8117
- AdsBreadcrumbModule,
8118
8102
  MatMenu,
8119
8103
  MatToolbar,
8120
8104
  MatMenuTrigger,