@ascentgl/ads-ui 21.28.0 → 21.29.1
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.
|
@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import { Input, Component, NgModule, input, output, computed, ChangeDetectionStrategy, EventEmitter, signal, effect, ViewChild, Output, ElementRef, HostListener, Directive, InjectionToken, inject, DestroyRef, Pipe, contentChild, TemplateRef, Inject, Optional, ChangeDetectorRef, Injectable, Renderer2, viewChild, ViewChildren } from '@angular/core';
|
|
3
3
|
import * as i1 from '@ascentgl/ads-icons';
|
|
4
4
|
import { AdsIconModule, AdsIconRegistry } from '@ascentgl/ads-icons';
|
|
5
|
-
import { adsIconUserCircle, adsIconBell, adsIconChevronRight, adsIconCross, adsIconPlus, adsIconWarning, adsIconLock, adsIconPlusCircle, adsIconSearch, adsIconSortDescending, adsIconCheckCircleFilled, adsIconVisibilityEye, adsIconVisibilityEyeNone, adsIconStatusProcessing, adsIconInformation, adsIconChevronDown, adsIconLoading, adsIconDatepicker, adsIconTimepicker, adsIconCheck, adsIconDropdownArrow, adsIconChevronUp, adsIconFilter, adsIconArrowUpAndDown, adsIconMenuMoreInfo, adsIconHamburgerMenu, adsIconStatusNew } from '@ascentgl/ads-icons/icons';
|
|
5
|
+
import { adsIconUserCircle, adsIconBell, adsIconChevronRight, adsIconCross, adsIconPlus, adsIconWarning, adsIconLock, adsIconPlusCircle, adsIconSearch, adsIconSortDescending, adsIconCheckCircleFilled, adsIconVisibilityEye, adsIconVisibilityEyeNone, adsIconStatusProcessing, adsIconInformation, adsIconChevronDown, adsIconLoading, adsIconDatepicker, adsIconTimepicker, adsIconCheck, adsIconDropdownArrow, adsIconChevronUp, adsIconFilter, adsIconArrowUpAndDown, adsIconMenuMoreInfo, adsIconHamburgerMenu, adsIconChevronLeft, adsIconStatusNew } from '@ascentgl/ads-icons/icons';
|
|
6
6
|
import * as i1$1 from '@angular/common';
|
|
7
7
|
import { CommonModule, NgOptimizedImage, NgTemplateOutlet, NgClass, NgStyle, DOCUMENT } from '@angular/common';
|
|
8
8
|
import * as i2 from '@angular/material/badge';
|
|
@@ -4128,8 +4128,10 @@ class AdsSearchDropdownComponent extends AbstractDropdownComponent {
|
|
|
4128
4128
|
this.displayControl.setValue(eventTarget.value, { emitEvent: false });
|
|
4129
4129
|
}
|
|
4130
4130
|
if (typeof this.onEnterKeyDown === 'function') {
|
|
4131
|
+
// Capture the value before setTimeout to prevent race condition with blur
|
|
4132
|
+
const currentValue = eventTarget.value;
|
|
4131
4133
|
setTimeout(() => {
|
|
4132
|
-
this.onEnterKeyDown?.(
|
|
4134
|
+
this.onEnterKeyDown?.(currentValue);
|
|
4133
4135
|
}, 0);
|
|
4134
4136
|
}
|
|
4135
4137
|
this.unselectComponent();
|
|
@@ -7972,6 +7974,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
7972
7974
|
}]
|
|
7973
7975
|
}] });
|
|
7974
7976
|
|
|
7977
|
+
const MOBILE_BREAKPOINT = 770;
|
|
7975
7978
|
class AdsScmsSideNavBarV2Component {
|
|
7976
7979
|
/** @ignore */
|
|
7977
7980
|
constructor(router, registry) {
|
|
@@ -7983,11 +7986,52 @@ class AdsScmsSideNavBarV2Component {
|
|
|
7983
7986
|
this.breadcrumbs = input([], ...(ngDevMode ? [{ debugName: "breadcrumbs" }] : []));
|
|
7984
7987
|
/** Show/hide breadcrumbs on the current page */
|
|
7985
7988
|
this.showBreadcrumbs = input(false, ...(ngDevMode ? [{ debugName: "showBreadcrumbs" }] : []));
|
|
7989
|
+
/** Control collapsed state from outside */
|
|
7990
|
+
this.collapsed = input(undefined, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
|
|
7991
|
+
/** Emits when collapsed state changes */
|
|
7992
|
+
this.collapsedChange = output();
|
|
7986
7993
|
/** @ignore */
|
|
7987
7994
|
this.isMobile = signal(false, ...(ngDevMode ? [{ debugName: "isMobile" }] : []));
|
|
7988
7995
|
/** @ignore */
|
|
7989
|
-
this.
|
|
7990
|
-
this.registry.register([adsIconChevronDown, adsIconChevronUp, adsIconCross, adsIconHamburgerMenu]);
|
|
7996
|
+
this.isCollapsedInternal = signal(false, ...(ngDevMode ? [{ debugName: "isCollapsedInternal" }] : []));
|
|
7997
|
+
this.registry.register([adsIconChevronDown, adsIconChevronUp, adsIconChevronLeft, adsIconChevronRight, adsIconCross, adsIconHamburgerMenu]);
|
|
7998
|
+
// Sync internal collapsed state with input
|
|
7999
|
+
effect(() => {
|
|
8000
|
+
const inputValue = this.collapsed();
|
|
8001
|
+
if (inputValue !== undefined) {
|
|
8002
|
+
this.isCollapsedInternal.set(inputValue);
|
|
8003
|
+
}
|
|
8004
|
+
});
|
|
8005
|
+
}
|
|
8006
|
+
/** @ignore */
|
|
8007
|
+
get isCollapsed() {
|
|
8008
|
+
return this.isCollapsedInternal();
|
|
8009
|
+
}
|
|
8010
|
+
/** @ignore */
|
|
8011
|
+
get shouldHideNavBar() {
|
|
8012
|
+
return this.isMobile() && this.isCollapsedInternal();
|
|
8013
|
+
}
|
|
8014
|
+
/** @ignore */
|
|
8015
|
+
onResize() {
|
|
8016
|
+
this.checkMobile();
|
|
8017
|
+
}
|
|
8018
|
+
/** @ignore */
|
|
8019
|
+
ngOnInit() {
|
|
8020
|
+
this.checkMobile();
|
|
8021
|
+
}
|
|
8022
|
+
/** @ignore */
|
|
8023
|
+
ngOnDestroy() {
|
|
8024
|
+
// Cleanup if needed
|
|
8025
|
+
}
|
|
8026
|
+
/** @ignore */
|
|
8027
|
+
toggleCollapsed() {
|
|
8028
|
+
const newValue = !this.isCollapsedInternal();
|
|
8029
|
+
this.isCollapsedInternal.set(newValue);
|
|
8030
|
+
this.collapsedChange.emit(newValue);
|
|
8031
|
+
}
|
|
8032
|
+
/** @ignore */
|
|
8033
|
+
checkMobile() {
|
|
8034
|
+
this.isMobile.set(window.innerWidth < MOBILE_BREAKPOINT);
|
|
7991
8035
|
}
|
|
7992
8036
|
/** @ignore */
|
|
7993
8037
|
hasActiveLink(item) {
|
|
@@ -8007,15 +8051,18 @@ class AdsScmsSideNavBarV2Component {
|
|
|
8007
8051
|
});
|
|
8008
8052
|
}
|
|
8009
8053
|
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 }); }
|
|
8010
|
-
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 } }, viewQueries: [{ propertyName: "sideNavArea", first: true, predicate: ["sideNavArea"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"side-nav-bar-container\">\n <div class=\"nav-container\">\n <ng-container *ngTemplateOutlet=\"matAccordion\" />\n </div>\n <div>\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: '' }\" />\n }\n </mat-expansion-panel>\n } @else {\n <ng-container *ngTemplateOutlet=\"navItem; context: { navItem: item, class: 'main-item' }\" />\n }\n @if (item?.showDividerAfterItem) {\n <ads-divider />\n }\n }\n </mat-accordion>\n </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", ".nav-items-wrapper{display:flex;flex-direction:column;height:100%;min-height:0}.nav-items-container{display:flex;flex-direction:column;border-bottom:1px solid var(--color-light)}.nav-items-container a{cursor:pointer}.nav-items-container .ads-nav-item-container{display:flex;padding:14px 12px;gap:12px;background-color:var(--color-white);align-items:center;overflow:hidden;white-space:nowrap}.nav-items-container .ads-nav-item-container span{font-weight:400;line-height:20px;color:var(--color-medium);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-decoration:unset;display:inline-block}.nav-items-container .ads-nav-item-container ads-icon{flex-shrink:0}.nav-items-container .ads-nav-item-container:hover span,.nav-items-container .ads-nav-item-container:focus span,.nav-items-container .ads-nav-item-container:active span{color:var(--color-white)}.nav-items-container .ads-nav-item-container:hover ads-icon ::ng-deep svg,.nav-items-container .ads-nav-item-container:focus ads-icon ::ng-deep svg,.nav-items-container .ads-nav-item-container:active ads-icon ::ng-deep svg{stroke:var(--color-white);fill:var(--color-white)!important}.nav-items-container .ads-nav-item-container:hover{background-color:var(--color-secondary-hover)!important}.nav-items-container .ads-nav-item-container:active{background-color:var(--color-secondary-pressed)!important}.nav-items-container .ads-nav-item-container:focus{background-color:var(--color-secondary)!important}as-split-area{background-color:var(--color-white)}.logo-container{padding:16px 12px;border-bottom:1px solid var(--color-light);height:auto}.ads-nav-link.active-nav-link .ads-nav-item-container{background-color:var(--color-secondary)!important}.ads-nav-link.active-nav-link .ads-nav-item-container span{color:var(--color-white)!important}.ads-nav-link.active-nav-link .ads-nav-item-container ads-icon ::ng-deep svg{stroke:var(--color-white)!important;fill:var(--color-white)!important}.ads-nav-link{text-decoration:none}.left-side-content-container{container-type:inline-size;display:flex;flex-direction:column;height:100vh}::ng-deep as-split .as-split-gutter{background-color:var(--color-light-30)}::ng-deep as-split .as-split-gutter:hover,::ng-deep as-split .as-split-gutter:focus{outline:none}::ng-deep as-split .as-split-gutter:hover .as-split-gutter-icon,::ng-deep as-split .as-split-gutter:focus .as-split-gutter-icon{background-color:var(--color-light-80)}::ng-deep as-split .as-split-gutter:active{background-color:var(--color-light)}::ng-deep as-split .as-split-gutter-icon{width:8px;background-color:var(--color-light-30);background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"6\" height=\"11\" viewBox=\"0 0 6 11\" fill=\"none\"><path d=\"M4.7142 2.92855C5.42428 2.92855 5.99991 2.35291 5.99991 1.64283C5.99991 0.932751 5.42428 0.357117 4.7142 0.357117C4.00412 0.357117 3.42848 0.932751 3.42848 1.64283C3.42848 2.35291 4.00412 2.92855 4.7142 2.92855Z\" fill=\"%23041F41\"/><path d=\"M4.7142 6.78566C5.42428 6.78566 5.99991 6.21003 5.99991 5.49995C5.99991 4.78987 5.42428 4.21423 4.7142 4.21423C4.00412 4.21423 3.42848 4.78987 3.42848 5.49995C3.42848 6.21003 4.00412 6.78566 4.7142 6.78566Z\" fill=\"%23041F41\"/><path d=\"M4.7142 10.6428C5.42428 10.6428 5.99991 10.0672 5.99991 9.35713C5.99991 8.64704 5.42428 8.07141 4.7142 8.07141C4.00412 8.07141 3.42848 8.64704 3.42848 9.35713C3.42848 10.0672 4.00412 10.6428 4.7142 10.6428Z\" fill=\"%23041F41\"/><path d=\"M1.28571 2.92855C1.99579 2.92855 2.57143 2.35291 2.57143 1.64283C2.57143 0.932751 1.99579 0.357117 1.28571 0.357117C0.575634 0.357117 0 0.932751 0 1.64283C0 2.35291 0.575634 2.92855 1.28571 2.92855Z\" fill=\"%23041F41\"/><path d=\"M1.28571 6.78566C1.99579 6.78566 2.57143 6.21003 2.57143 5.49995C2.57143 4.78987 1.99579 4.21423 1.28571 4.21423C0.575634 4.21423 0 4.78987 0 5.49995C0 6.21003 0.575634 6.78566 1.28571 6.78566Z\" fill=\"%23041F41\"/><path d=\"M1.28571 10.6428C1.99579 10.6428 2.57143 10.0672 2.57143 9.35713C2.57143 8.64704 1.99579 8.07141 1.28571 8.07141C0.575634 8.07141 0 8.64704 0 9.35713C0 10.0672 0.575634 10.6428 1.28571 10.6428Z\" fill=\"%23041F41\"/></svg>')!important}.bottom-container{padding:16px 12px;flex-grow:1;display:flex;flex-direction:column}.bottom-nav-section{margin-top:auto}.bottom-nav-section .nav-items-container{border-bottom:none}@container (max-width: 70px){.bottom-container{flex-grow:unset}.bottom-container:hover{background-color:var(--color-secondary-hover)}.bottom-container:hover ads-icon ::ng-deep svg{stroke:var(--color-white)}.bottom-container:active{background-color:var(--color-secondary-pressed)}.hide-on-collapsed{display:none}.show-on-collapsed{display:contents}}@container (min-width: 71px){.hide-on-collapsed{display:contents}.show-on-collapsed{display:none}}\n", ".side-nav-bar-container{display:flex;flex-direction:row}.nav-container{width:226px;padding:16px;display:flex;flex-direction:column;height:100%}.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}::ng-deep .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header{background-color:var(--color-secondary)!important}::ng-deep .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header .ads-nav-item-container{background-color:var(--color-secondary)!important}::ng-deep .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header .ads-nav-item-container span{color:var(--color-white)!important}::ng-deep .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header .ads-nav-item-container ads-icon ::ng-deep svg{stroke:var(--color-white)!important;fill:var(--color-white)!important}::ng-deep .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header mat-panel-description ads-icon{fill:var(--color-white)!important}::ng-deep .panel-expanded mat-expansion-panel_header,::ng-deep .panel-expanded .ads-nav-item-container{background-color:var(--color-secondary-10)!important}::ng-deep .panel-expanded mat-panel-title .ads-nav-item-container{background-color:transparent!important}::ng-deep .panel-expanded mat-panel-title .ads-nav-item-container span{font-weight:600!important}::ng-deep mat-expansion-panel{border:none!important;border-radius:unset!important;margin:unset!important}::ng-deep mat-expansion-panel .mat-expansion-panel-body{padding:0!important}::ng-deep mat-expansion-panel .mat-expansion-panel-body a .ads-nav-item-container{padding-left:48px!important}::ng-deep mat-expansion-panel .mat-expansion-panel-header{padding:8px 12px!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;min-width:50px}::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{background-color:var(--color-secondary-hover)!important}::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container,::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus .ads-nav-item-container{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 .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 .ads-nav-item-container span{color:var(--color-white)!important}::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover mat-panel-description ads-icon,::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus mat-panel-description ads-icon{fill:var(--color-white)!important}::ng-deep mat-expansion-panel .mat-expansion-panel-header:active{background-color:var(--color-secondary-pressed)!important}::ng-deep mat-expansion-panel .mat-expansion-panel-header:active .ads-nav-item-container{background-color:var(--color-secondary-pressed)!important}::ng-deep .main-item .ads-nav-item-container{padding:20px 12px!important}::ng-deep .main-item .ads-nav-item-container .hide-on-collapsed{font-size:1rem}::ng-deep .ads-nav-link:focus{background-color:var(--color-secondary-hover)!important;outline:none}::ng-deep .ads-nav-link:focus .ads-nav-item-container{background-color:var(--color-secondary-hover)!important}::ng-deep .ads-nav-link:focus .ads-nav-item-container ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}::ng-deep .ads-nav-link:focus .ads-nav-item-container span{color:var(--color-white)!important}::ng-deep .logo-container{padding-left:8px;padding-right:7px}.breadcrumbs-container{padding:72px 48px 48px}\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"] }] }); }
|
|
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"] }] }); }
|
|
8011
8055
|
}
|
|
8012
8056
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsScmsSideNavBarV2Component, decorators: [{
|
|
8013
8057
|
type: Component,
|
|
8014
|
-
args: [{ selector: 'ads-scms-side-nav-bar-v2', standalone: false, template: "<div class=\"side-nav-bar-container\">\n <div class=\"nav-container\">\n <ng-container *ngTemplateOutlet=\"matAccordion\" />\n </div>\n <div>\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: '' }\" />\n }\n </mat-expansion-panel>\n } @else {\n <ng-container *ngTemplateOutlet=\"navItem; context: { navItem: item, class: 'main-item' }\" />\n }\n @if (item?.showDividerAfterItem) {\n <ads-divider />\n }\n }\n </mat-accordion>\n </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", ".nav-items-wrapper{display:flex;flex-direction:column;height:100%;min-height:0}.nav-items-container{display:flex;flex-direction:column;border-bottom:1px solid var(--color-light)}.nav-items-container a{cursor:pointer}.nav-items-container .ads-nav-item-container{display:flex;padding:14px 12px;gap:12px;background-color:var(--color-white);align-items:center;overflow:hidden;white-space:nowrap}.nav-items-container .ads-nav-item-container span{font-weight:400;line-height:20px;color:var(--color-medium);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-decoration:unset;display:inline-block}.nav-items-container .ads-nav-item-container ads-icon{flex-shrink:0}.nav-items-container .ads-nav-item-container:hover span,.nav-items-container .ads-nav-item-container:focus span,.nav-items-container .ads-nav-item-container:active span{color:var(--color-white)}.nav-items-container .ads-nav-item-container:hover ads-icon ::ng-deep svg,.nav-items-container .ads-nav-item-container:focus ads-icon ::ng-deep svg,.nav-items-container .ads-nav-item-container:active ads-icon ::ng-deep svg{stroke:var(--color-white);fill:var(--color-white)!important}.nav-items-container .ads-nav-item-container:hover{background-color:var(--color-secondary-hover)!important}.nav-items-container .ads-nav-item-container:active{background-color:var(--color-secondary-pressed)!important}.nav-items-container .ads-nav-item-container:focus{background-color:var(--color-secondary)!important}as-split-area{background-color:var(--color-white)}.logo-container{padding:16px 12px;border-bottom:1px solid var(--color-light);height:auto}.ads-nav-link.active-nav-link .ads-nav-item-container{background-color:var(--color-secondary)!important}.ads-nav-link.active-nav-link .ads-nav-item-container span{color:var(--color-white)!important}.ads-nav-link.active-nav-link .ads-nav-item-container ads-icon ::ng-deep svg{stroke:var(--color-white)!important;fill:var(--color-white)!important}.ads-nav-link{text-decoration:none}.left-side-content-container{container-type:inline-size;display:flex;flex-direction:column;height:100vh}::ng-deep as-split .as-split-gutter{background-color:var(--color-light-30)}::ng-deep as-split .as-split-gutter:hover,::ng-deep as-split .as-split-gutter:focus{outline:none}::ng-deep as-split .as-split-gutter:hover .as-split-gutter-icon,::ng-deep as-split .as-split-gutter:focus .as-split-gutter-icon{background-color:var(--color-light-80)}::ng-deep as-split .as-split-gutter:active{background-color:var(--color-light)}::ng-deep as-split .as-split-gutter-icon{width:8px;background-color:var(--color-light-30);background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"6\" height=\"11\" viewBox=\"0 0 6 11\" fill=\"none\"><path d=\"M4.7142 2.92855C5.42428 2.92855 5.99991 2.35291 5.99991 1.64283C5.99991 0.932751 5.42428 0.357117 4.7142 0.357117C4.00412 0.357117 3.42848 0.932751 3.42848 1.64283C3.42848 2.35291 4.00412 2.92855 4.7142 2.92855Z\" fill=\"%23041F41\"/><path d=\"M4.7142 6.78566C5.42428 6.78566 5.99991 6.21003 5.99991 5.49995C5.99991 4.78987 5.42428 4.21423 4.7142 4.21423C4.00412 4.21423 3.42848 4.78987 3.42848 5.49995C3.42848 6.21003 4.00412 6.78566 4.7142 6.78566Z\" fill=\"%23041F41\"/><path d=\"M4.7142 10.6428C5.42428 10.6428 5.99991 10.0672 5.99991 9.35713C5.99991 8.64704 5.42428 8.07141 4.7142 8.07141C4.00412 8.07141 3.42848 8.64704 3.42848 9.35713C3.42848 10.0672 4.00412 10.6428 4.7142 10.6428Z\" fill=\"%23041F41\"/><path d=\"M1.28571 2.92855C1.99579 2.92855 2.57143 2.35291 2.57143 1.64283C2.57143 0.932751 1.99579 0.357117 1.28571 0.357117C0.575634 0.357117 0 0.932751 0 1.64283C0 2.35291 0.575634 2.92855 1.28571 2.92855Z\" fill=\"%23041F41\"/><path d=\"M1.28571 6.78566C1.99579 6.78566 2.57143 6.21003 2.57143 5.49995C2.57143 4.78987 1.99579 4.21423 1.28571 4.21423C0.575634 4.21423 0 4.78987 0 5.49995C0 6.21003 0.575634 6.78566 1.28571 6.78566Z\" fill=\"%23041F41\"/><path d=\"M1.28571 10.6428C1.99579 10.6428 2.57143 10.0672 2.57143 9.35713C2.57143 8.64704 1.99579 8.07141 1.28571 8.07141C0.575634 8.07141 0 8.64704 0 9.35713C0 10.0672 0.575634 10.6428 1.28571 10.6428Z\" fill=\"%23041F41\"/></svg>')!important}.bottom-container{padding:16px 12px;flex-grow:1;display:flex;flex-direction:column}.bottom-nav-section{margin-top:auto}.bottom-nav-section .nav-items-container{border-bottom:none}@container (max-width: 70px){.bottom-container{flex-grow:unset}.bottom-container:hover{background-color:var(--color-secondary-hover)}.bottom-container:hover ads-icon ::ng-deep svg{stroke:var(--color-white)}.bottom-container:active{background-color:var(--color-secondary-pressed)}.hide-on-collapsed{display:none}.show-on-collapsed{display:contents}}@container (min-width: 71px){.hide-on-collapsed{display:contents}.show-on-collapsed{display:none}}\n", ".side-nav-bar-container{display:flex;flex-direction:row}.nav-container{width:226px;padding:16px;display:flex;flex-direction:column;height:100%}.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}::ng-deep .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header{background-color:var(--color-secondary)!important}::ng-deep .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header .ads-nav-item-container{background-color:var(--color-secondary)!important}::ng-deep .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header .ads-nav-item-container span{color:var(--color-white)!important}::ng-deep .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header .ads-nav-item-container ads-icon ::ng-deep svg{stroke:var(--color-white)!important;fill:var(--color-white)!important}::ng-deep .active-expansion-panel:not(.panel-expanded) mat-expansion-panel_header mat-panel-description ads-icon{fill:var(--color-white)!important}::ng-deep .panel-expanded mat-expansion-panel_header,::ng-deep .panel-expanded .ads-nav-item-container{background-color:var(--color-secondary-10)!important}::ng-deep .panel-expanded mat-panel-title .ads-nav-item-container{background-color:transparent!important}::ng-deep .panel-expanded mat-panel-title .ads-nav-item-container span{font-weight:600!important}::ng-deep mat-expansion-panel{border:none!important;border-radius:unset!important;margin:unset!important}::ng-deep mat-expansion-panel .mat-expansion-panel-body{padding:0!important}::ng-deep mat-expansion-panel .mat-expansion-panel-body a .ads-nav-item-container{padding-left:48px!important}::ng-deep mat-expansion-panel .mat-expansion-panel-header{padding:8px 12px!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;min-width:50px}::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{background-color:var(--color-secondary-hover)!important}::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container,::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus .ads-nav-item-container{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 .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 .ads-nav-item-container span{color:var(--color-white)!important}::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover mat-panel-description ads-icon,::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus mat-panel-description ads-icon{fill:var(--color-white)!important}::ng-deep mat-expansion-panel .mat-expansion-panel-header:active{background-color:var(--color-secondary-pressed)!important}::ng-deep mat-expansion-panel .mat-expansion-panel-header:active .ads-nav-item-container{background-color:var(--color-secondary-pressed)!important}::ng-deep .main-item .ads-nav-item-container{padding:20px 12px!important}::ng-deep .main-item .ads-nav-item-container .hide-on-collapsed{font-size:1rem}::ng-deep .ads-nav-link:focus{background-color:var(--color-secondary-hover)!important;outline:none}::ng-deep .ads-nav-link:focus .ads-nav-item-container{background-color:var(--color-secondary-hover)!important}::ng-deep .ads-nav-link:focus .ads-nav-item-container ads-icon ::ng-deep svg{fill:var(--color-white)!important;stroke:var(--color-white)!important}::ng-deep .ads-nav-link:focus .ads-nav-item-container span{color:var(--color-white)!important}::ng-deep .logo-container{padding-left:8px;padding-right:7px}.breadcrumbs-container{padding:72px 48px 48px}\n"] }]
|
|
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"] }]
|
|
8015
8059
|
}], ctorParameters: () => [{ type: i1$2.Router }, { type: i1.AdsIconRegistry }], propDecorators: { sideNavArea: [{
|
|
8016
8060
|
type: ViewChild,
|
|
8017
8061
|
args: ['sideNavArea', { read: ElementRef }]
|
|
8018
|
-
}], navItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "navItems", required: false }] }], breadcrumbs: [{ type: i0.Input, args: [{ isSignal: true, alias: "breadcrumbs", required: false }] }], showBreadcrumbs: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBreadcrumbs", required: false }] }] } }
|
|
8062
|
+
}], navItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "navItems", required: false }] }], breadcrumbs: [{ type: i0.Input, args: [{ isSignal: true, alias: "breadcrumbs", required: false }] }], showBreadcrumbs: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBreadcrumbs", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], collapsedChange: [{ type: i0.Output, args: ["collapsedChange"] }], onResize: [{
|
|
8063
|
+
type: HostListener,
|
|
8064
|
+
args: ['window:resize']
|
|
8065
|
+
}] } });
|
|
8019
8066
|
|
|
8020
8067
|
class AdsScmsSideNavBarV2Module {
|
|
8021
8068
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsScmsSideNavBarV2Module, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|