@ascentgl/ads-ui 21.29.1 → 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.
|
@@ -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 */
|
|
@@ -8030,6 +8026,13 @@ class AdsScmsSideNavBarV2Component {
|
|
|
8030
8026
|
this.collapsedChange.emit(newValue);
|
|
8031
8027
|
}
|
|
8032
8028
|
/** @ignore */
|
|
8029
|
+
onNavItemClick() {
|
|
8030
|
+
if (this.isMobile()) {
|
|
8031
|
+
this.isCollapsedInternal.set(true);
|
|
8032
|
+
this.collapsedChange.emit(true);
|
|
8033
|
+
}
|
|
8034
|
+
}
|
|
8035
|
+
/** @ignore */
|
|
8033
8036
|
checkMobile() {
|
|
8034
8037
|
this.isMobile.set(window.innerWidth < MOBILE_BREAKPOINT);
|
|
8035
8038
|
}
|
|
@@ -8044,22 +8047,22 @@ class AdsScmsSideNavBarV2Component {
|
|
|
8044
8047
|
/** @ignore */
|
|
8045
8048
|
isActive(href) {
|
|
8046
8049
|
return this.router.isActive(href, {
|
|
8047
|
-
paths: '
|
|
8050
|
+
paths: 'exact',
|
|
8048
8051
|
matrixParams: 'ignored',
|
|
8049
8052
|
queryParams: 'ignored',
|
|
8050
8053
|
fragment: 'ignored',
|
|
8051
8054
|
});
|
|
8052
8055
|
}
|
|
8053
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 }); }
|
|
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"] }] }); }
|
|
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"] }] }); }
|
|
8055
8058
|
}
|
|
8056
8059
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsScmsSideNavBarV2Component, decorators: [{
|
|
8057
8060
|
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"] }]
|
|
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"] }]
|
|
8059
8062
|
}], ctorParameters: () => [{ type: i1$2.Router }, { type: i1.AdsIconRegistry }], propDecorators: { sideNavArea: [{
|
|
8060
8063
|
type: ViewChild,
|
|
8061
8064
|
args: ['sideNavArea', { read: ElementRef }]
|
|
8062
|
-
}], navItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "navItems", required: false }] }],
|
|
8065
|
+
}], 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
8066
|
type: HostListener,
|
|
8064
8067
|
args: ['window:resize']
|
|
8065
8068
|
}] } });
|
|
@@ -8067,8 +8070,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
8067
8070
|
class AdsScmsSideNavBarV2Module {
|
|
8068
8071
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsScmsSideNavBarV2Module, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
8069
8072
|
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
8073
|
RouterLink,
|
|
8073
8074
|
RouterLinkActive,
|
|
8074
8075
|
AdsIconModule,
|
|
@@ -8077,8 +8078,6 @@ class AdsScmsSideNavBarV2Module {
|
|
|
8077
8078
|
MatExpansionPanelDescription,
|
|
8078
8079
|
MatExpansionPanelHeader,
|
|
8079
8080
|
MatExpansionPanelTitle,
|
|
8080
|
-
AdsAscentLogoModule,
|
|
8081
|
-
AdsBreadcrumbModule,
|
|
8082
8081
|
MatMenu,
|
|
8083
8082
|
MatToolbar,
|
|
8084
8083
|
MatMenuTrigger,
|
|
@@ -8086,13 +8085,9 @@ class AdsScmsSideNavBarV2Module {
|
|
|
8086
8085
|
RouterOutlet,
|
|
8087
8086
|
AdsDividerModule], exports: [AdsScmsSideNavBarV2Component] }); }
|
|
8088
8087
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsScmsSideNavBarV2Module, imports: [CommonModule,
|
|
8089
|
-
SplitComponent,
|
|
8090
|
-
SplitAreaComponent,
|
|
8091
8088
|
AdsIconModule,
|
|
8092
8089
|
MatExpansionPanel,
|
|
8093
8090
|
MatExpansionPanelHeader,
|
|
8094
|
-
AdsAscentLogoModule,
|
|
8095
|
-
AdsBreadcrumbModule,
|
|
8096
8091
|
MatMenu,
|
|
8097
8092
|
MatToolbar,
|
|
8098
8093
|
MatIconButton,
|
|
@@ -8103,8 +8098,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
8103
8098
|
args: [{
|
|
8104
8099
|
imports: [
|
|
8105
8100
|
CommonModule,
|
|
8106
|
-
SplitComponent,
|
|
8107
|
-
SplitAreaComponent,
|
|
8108
8101
|
RouterLink,
|
|
8109
8102
|
RouterLinkActive,
|
|
8110
8103
|
AdsIconModule,
|
|
@@ -8113,8 +8106,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
8113
8106
|
MatExpansionPanelDescription,
|
|
8114
8107
|
MatExpansionPanelHeader,
|
|
8115
8108
|
MatExpansionPanelTitle,
|
|
8116
|
-
AdsAscentLogoModule,
|
|
8117
|
-
AdsBreadcrumbModule,
|
|
8118
8109
|
MatMenu,
|
|
8119
8110
|
MatToolbar,
|
|
8120
8111
|
MatMenuTrigger,
|