@ascentgl/ads-ui 21.30.0 → 21.31.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.
|
@@ -8026,6 +8026,13 @@ class AdsScmsSideNavBarV2Component {
|
|
|
8026
8026
|
this.collapsedChange.emit(newValue);
|
|
8027
8027
|
}
|
|
8028
8028
|
/** @ignore */
|
|
8029
|
+
onNavItemClick() {
|
|
8030
|
+
if (this.isMobile()) {
|
|
8031
|
+
this.isCollapsedInternal.set(true);
|
|
8032
|
+
this.collapsedChange.emit(true);
|
|
8033
|
+
}
|
|
8034
|
+
}
|
|
8035
|
+
/** @ignore */
|
|
8029
8036
|
checkMobile() {
|
|
8030
8037
|
this.isMobile.set(window.innerWidth < MOBILE_BREAKPOINT);
|
|
8031
8038
|
}
|
|
@@ -8047,11 +8054,11 @@ class AdsScmsSideNavBarV2Component {
|
|
|
8047
8054
|
});
|
|
8048
8055
|
}
|
|
8049
8056
|
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 }); }
|
|
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"] }] }); }
|
|
8057
|
+
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 (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-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"] }] }); }
|
|
8051
8058
|
}
|
|
8052
8059
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsScmsSideNavBarV2Component, decorators: [{
|
|
8053
8060
|
type: Component,
|
|
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"] }]
|
|
8061
|
+
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 (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-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"] }]
|
|
8055
8062
|
}], ctorParameters: () => [{ type: i1$2.Router }, { type: i1.AdsIconRegistry }], propDecorators: { sideNavArea: [{
|
|
8056
8063
|
type: ViewChild,
|
|
8057
8064
|
args: ['sideNavArea', { read: ElementRef }]
|