@ascentgl/ads-ui 22.8.0 → 22.10.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.
|
@@ -676,7 +676,7 @@ class AdsRateOptionCardComponent {
|
|
|
676
676
|
this.activate.emit(this.cardId());
|
|
677
677
|
}
|
|
678
678
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: AdsRateOptionCardComponent, deps: [{ token: i1.AdsIconRegistry }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
679
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: AdsRateOptionCardComponent, isStandalone: true, selector: "ads-rate-option-card", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, subheading: { classPropertyName: "subheading", publicName: "subheading", isSignal: true, isRequired: false, transformFunction: null }, price: { classPropertyName: "price", publicName: "price", isSignal: true, isRequired: false, transformFunction: null }, showCheckIcon: { classPropertyName: "showCheckIcon", publicName: "showCheckIcon", isSignal: true, isRequired: false, transformFunction: null }, tag: { classPropertyName: "tag", publicName: "tag", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, cardId: { classPropertyName: "cardId", publicName: "cardId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activate: "activate" }, host: { listeners: { "click": "onActivate()", "keydown.enter": "onActivate($event)", "keydown.space": "onActivate($event)" }, properties: { "class.rate-option-card-selected": "selected()", "class.rate-option-card-disabled": "disabled()", "attr.role": "'button'", "attr.tabindex": "disabled() ? null : 0", "attr.aria-pressed": "selected()", "attr.aria-disabled": "disabled() ? true : null", "attr.data-test": "'rate-option-card-' + cardId()" }, classAttribute: "rate-option-card" }, ngImport: i0, template: "<div class=\"rate-option-card-header\">\n <div class=\"rate-option-card-info\">\n <div class=\"rate-option-card-title-row\">\n <span class=\"rate-option-card-title\" [attr.data-test]=\"cardId() + '-heading'\">{{ heading() }}</span>\n\n @let t = tag();\n @if (t) {\n <ads-tag\n class=\"rate-option-card-tag\"\n [id]=\"cardId() + '-tag'\"\n [color]=\"tagBackground()\"\n [textColor]=\"tagTextColor()\"\n [borderWidth]=\"tagBorderWidth()\"\n [borderColor]=\"tagBorderColor\"\n [tag]=\"t.label\"\n [removable]=\"false\"\n >\n @if (t.icon) {\n <ads-icon\n class=\"rate-option-card-tag-icon\"\n [name]=\"t.icon.name\"\n [stroke]=\"tagIconStroke()\"\n [theme]=\"tagIconTheme()\"\n size=\"xxs\"\n />\n }\n </ads-tag>\n }\n </div>\n\n @if (subheading(); as sub) {\n <span class=\"rate-option-card-subtitle\">{{ sub }}</span>\n }\n </div>\n\n <div class=\"rate-option-card-price-row\">\n @if (price(); as p) {\n <span class=\"rate-option-card-price\" [attr.data-test]=\"cardId() + '-price'\">{{ p }}</span>\n }\n @if (showCheckIcon()) {\n <span class=\"rate-option-card-indicator\" aria-hidden=\"true\">\n <ads-icon class=\"rate-option-card-indicator-check\" name=\"check\" size=\"xxxs\" stroke=\"white\" />\n </span>\n }\n </div>\n</div>\n\n<div class=\"rate-option-card-footer\">\n <ng-content />\n</div>\n", styles: [":host{display:flex;flex-direction:column;box-sizing:border-box;gap:32px;padding:16px;border:1px solid var(--color-light);border-radius:5px;background-color:var(--color-white);cursor:
|
|
679
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: AdsRateOptionCardComponent, isStandalone: true, selector: "ads-rate-option-card", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, subheading: { classPropertyName: "subheading", publicName: "subheading", isSignal: true, isRequired: false, transformFunction: null }, price: { classPropertyName: "price", publicName: "price", isSignal: true, isRequired: false, transformFunction: null }, showCheckIcon: { classPropertyName: "showCheckIcon", publicName: "showCheckIcon", isSignal: true, isRequired: false, transformFunction: null }, tag: { classPropertyName: "tag", publicName: "tag", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, cardId: { classPropertyName: "cardId", publicName: "cardId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activate: "activate" }, host: { listeners: { "click": "onActivate()", "keydown.enter": "onActivate($event)", "keydown.space": "onActivate($event)" }, properties: { "class.rate-option-card-selected": "selected()", "class.rate-option-card-disabled": "disabled()", "class.rate-option-card-static": "!showCheckIcon()", "attr.role": "'button'", "attr.tabindex": "disabled() ? null : 0", "attr.aria-pressed": "selected()", "attr.aria-disabled": "disabled() ? true : null", "attr.data-test": "'rate-option-card-' + cardId()" }, classAttribute: "rate-option-card" }, ngImport: i0, template: "<div class=\"rate-option-card-header\">\n <div class=\"rate-option-card-info\">\n <div class=\"rate-option-card-title-row\">\n <span class=\"rate-option-card-title\" [attr.data-test]=\"cardId() + '-heading'\">{{ heading() }}</span>\n\n @let t = tag();\n @if (t) {\n <ads-tag\n class=\"rate-option-card-tag\"\n [id]=\"cardId() + '-tag'\"\n [color]=\"tagBackground()\"\n [textColor]=\"tagTextColor()\"\n [borderWidth]=\"tagBorderWidth()\"\n [borderColor]=\"tagBorderColor\"\n [tag]=\"t.label\"\n [removable]=\"false\"\n >\n @if (t.icon) {\n <ads-icon\n class=\"rate-option-card-tag-icon\"\n [name]=\"t.icon.name\"\n [stroke]=\"tagIconStroke()\"\n [theme]=\"tagIconTheme()\"\n size=\"xxs\"\n />\n }\n </ads-tag>\n }\n </div>\n\n @if (subheading(); as sub) {\n <span class=\"rate-option-card-subtitle\">{{ sub }}</span>\n }\n </div>\n\n <div class=\"rate-option-card-price-row\">\n @if (price(); as p) {\n <span class=\"rate-option-card-price\" [attr.data-test]=\"cardId() + '-price'\">{{ p }}</span>\n }\n @if (showCheckIcon()) {\n <span class=\"rate-option-card-indicator\" aria-hidden=\"true\">\n <ads-icon class=\"rate-option-card-indicator-check\" name=\"check\" size=\"xxxs\" stroke=\"white\" />\n </span>\n }\n </div>\n</div>\n\n<div class=\"rate-option-card-footer\">\n <ng-content />\n</div>\n", styles: [":host{display:flex;flex-direction:column;box-sizing:border-box;gap:32px;padding:16px;border:1px solid var(--color-light);border-radius:5px;background-color:var(--color-white);cursor:default;outline:none;transition:border-color .15s ease,background-color .15s ease}:host:not(.rate-option-card-disabled):not(.rate-option-card-selected):not(.rate-option-card-static){cursor:pointer}:host:focus-visible{outline:2px solid var(--color-secondary);outline-offset:2px}:host:not(.rate-option-card-disabled):not(.rate-option-card-selected):not(.rate-option-card-static):hover:not(:active){background-color:var(--color-light-30);border-color:var(--color-light)}:host:not(.rate-option-card-disabled):not(.rate-option-card-selected):not(.rate-option-card-static):active{background-color:var(--color-light-80);border-color:var(--color-light)}:host.rate-option-card-selected:not(.rate-option-card-disabled){background-color:var(--color-secondary-10);border-color:var(--color-secondary)}:host.rate-option-card-disabled{background-color:var(--color-muted-30);border-color:var(--color-light)}:host.rate-option-card-disabled .rate-option-card-title,:host.rate-option-card-disabled .rate-option-card-price{color:var(--color-medium-50)}:host.rate-option-card-disabled .rate-option-card-subtitle,:host.rate-option-card-disabled .rate-option-card-footer{color:var(--color-medium-30)}.rate-option-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;width:100%}.rate-option-card-info{display:flex;flex-direction:column;gap:4px;min-width:0}.rate-option-card-title-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.rate-option-card-title{font-size:1.125rem;font-weight:600;line-height:23px;color:var(--color-dark)}.rate-option-card-subtitle{font-size:.75rem;line-height:16px;color:var(--color-medium)}.rate-option-card-tag-icon{display:inline-flex}.rate-option-card-price-row{display:flex;align-items:center;gap:8px;white-space:nowrap}.rate-option-card-price{font-size:1.5rem;font-weight:600;line-height:31px;color:var(--color-dark)}.rate-option-card-indicator{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:24px;height:24px;flex-shrink:0;border:2px solid var(--color-light);border-radius:50%;background-color:transparent;transition:background-color .15s ease,border-color .15s ease}.rate-option-card-indicator-check{opacity:0;transition:opacity .15s ease}:host(:not(.rate-option-card-disabled):not(.rate-option-card-selected)):hover:not(:active) .rate-option-card-indicator{background-color:var(--color-secondary-10);border-color:var(--color-secondary-10)}:host(:not(.rate-option-card-disabled):not(.rate-option-card-selected)):hover:not(:active) .rate-option-card-indicator-check{opacity:1}:host(.rate-option-card-selected:not(.rate-option-card-disabled)) .rate-option-card-indicator,:host(:not(.rate-option-card-disabled):not(.rate-option-card-selected)):active .rate-option-card-indicator{background-color:var(--color-secondary);border-color:var(--color-secondary)}:host(.rate-option-card-selected:not(.rate-option-card-disabled)) .rate-option-card-indicator-check,:host(:not(.rate-option-card-disabled):not(.rate-option-card-selected)):active .rate-option-card-indicator-check{opacity:1}:host(.rate-option-card-disabled) .rate-option-card-indicator{border-color:var(--color-light);background-color:transparent}.rate-option-card-footer{display:flex;align-items:center;gap:8px;font-size:.75rem;line-height:16px;color:var(--color-medium)}:host ::ng-deep .rate-option-card-footer strong{color:var(--color-dark);font-weight:600}:host(.rate-option-card-disabled) ::ng-deep .rate-option-card-footer strong{color:var(--color-medium-50)}\n"], dependencies: [{ kind: "component", type: AdsTagComponent, selector: "ads-tag", inputs: ["color", "borderColor", "borderWidth", "width", "id", "removable", "textColor", "clickable", "tag"], outputs: ["remove", "selected"] }, { kind: "component", type: AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
680
680
|
}
|
|
681
681
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: AdsRateOptionCardComponent, decorators: [{
|
|
682
682
|
type: Component,
|
|
@@ -684,6 +684,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
684
684
|
class: 'rate-option-card',
|
|
685
685
|
'[class.rate-option-card-selected]': 'selected()',
|
|
686
686
|
'[class.rate-option-card-disabled]': 'disabled()',
|
|
687
|
+
// When the selection indicator is hidden the card is display-only: no hover/
|
|
688
|
+
// press affordance and a default cursor.
|
|
689
|
+
'[class.rate-option-card-static]': '!showCheckIcon()',
|
|
687
690
|
'[attr.role]': "'button'",
|
|
688
691
|
'[attr.tabindex]': 'disabled() ? null : 0',
|
|
689
692
|
'[attr.aria-pressed]': 'selected()',
|
|
@@ -692,7 +695,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
692
695
|
'(click)': 'onActivate()',
|
|
693
696
|
'(keydown.enter)': 'onActivate($event)',
|
|
694
697
|
'(keydown.space)': 'onActivate($event)',
|
|
695
|
-
}, template: "<div class=\"rate-option-card-header\">\n <div class=\"rate-option-card-info\">\n <div class=\"rate-option-card-title-row\">\n <span class=\"rate-option-card-title\" [attr.data-test]=\"cardId() + '-heading'\">{{ heading() }}</span>\n\n @let t = tag();\n @if (t) {\n <ads-tag\n class=\"rate-option-card-tag\"\n [id]=\"cardId() + '-tag'\"\n [color]=\"tagBackground()\"\n [textColor]=\"tagTextColor()\"\n [borderWidth]=\"tagBorderWidth()\"\n [borderColor]=\"tagBorderColor\"\n [tag]=\"t.label\"\n [removable]=\"false\"\n >\n @if (t.icon) {\n <ads-icon\n class=\"rate-option-card-tag-icon\"\n [name]=\"t.icon.name\"\n [stroke]=\"tagIconStroke()\"\n [theme]=\"tagIconTheme()\"\n size=\"xxs\"\n />\n }\n </ads-tag>\n }\n </div>\n\n @if (subheading(); as sub) {\n <span class=\"rate-option-card-subtitle\">{{ sub }}</span>\n }\n </div>\n\n <div class=\"rate-option-card-price-row\">\n @if (price(); as p) {\n <span class=\"rate-option-card-price\" [attr.data-test]=\"cardId() + '-price'\">{{ p }}</span>\n }\n @if (showCheckIcon()) {\n <span class=\"rate-option-card-indicator\" aria-hidden=\"true\">\n <ads-icon class=\"rate-option-card-indicator-check\" name=\"check\" size=\"xxxs\" stroke=\"white\" />\n </span>\n }\n </div>\n</div>\n\n<div class=\"rate-option-card-footer\">\n <ng-content />\n</div>\n", styles: [":host{display:flex;flex-direction:column;box-sizing:border-box;gap:32px;padding:16px;border:1px solid var(--color-light);border-radius:5px;background-color:var(--color-white);cursor:
|
|
698
|
+
}, template: "<div class=\"rate-option-card-header\">\n <div class=\"rate-option-card-info\">\n <div class=\"rate-option-card-title-row\">\n <span class=\"rate-option-card-title\" [attr.data-test]=\"cardId() + '-heading'\">{{ heading() }}</span>\n\n @let t = tag();\n @if (t) {\n <ads-tag\n class=\"rate-option-card-tag\"\n [id]=\"cardId() + '-tag'\"\n [color]=\"tagBackground()\"\n [textColor]=\"tagTextColor()\"\n [borderWidth]=\"tagBorderWidth()\"\n [borderColor]=\"tagBorderColor\"\n [tag]=\"t.label\"\n [removable]=\"false\"\n >\n @if (t.icon) {\n <ads-icon\n class=\"rate-option-card-tag-icon\"\n [name]=\"t.icon.name\"\n [stroke]=\"tagIconStroke()\"\n [theme]=\"tagIconTheme()\"\n size=\"xxs\"\n />\n }\n </ads-tag>\n }\n </div>\n\n @if (subheading(); as sub) {\n <span class=\"rate-option-card-subtitle\">{{ sub }}</span>\n }\n </div>\n\n <div class=\"rate-option-card-price-row\">\n @if (price(); as p) {\n <span class=\"rate-option-card-price\" [attr.data-test]=\"cardId() + '-price'\">{{ p }}</span>\n }\n @if (showCheckIcon()) {\n <span class=\"rate-option-card-indicator\" aria-hidden=\"true\">\n <ads-icon class=\"rate-option-card-indicator-check\" name=\"check\" size=\"xxxs\" stroke=\"white\" />\n </span>\n }\n </div>\n</div>\n\n<div class=\"rate-option-card-footer\">\n <ng-content />\n</div>\n", styles: [":host{display:flex;flex-direction:column;box-sizing:border-box;gap:32px;padding:16px;border:1px solid var(--color-light);border-radius:5px;background-color:var(--color-white);cursor:default;outline:none;transition:border-color .15s ease,background-color .15s ease}:host:not(.rate-option-card-disabled):not(.rate-option-card-selected):not(.rate-option-card-static){cursor:pointer}:host:focus-visible{outline:2px solid var(--color-secondary);outline-offset:2px}:host:not(.rate-option-card-disabled):not(.rate-option-card-selected):not(.rate-option-card-static):hover:not(:active){background-color:var(--color-light-30);border-color:var(--color-light)}:host:not(.rate-option-card-disabled):not(.rate-option-card-selected):not(.rate-option-card-static):active{background-color:var(--color-light-80);border-color:var(--color-light)}:host.rate-option-card-selected:not(.rate-option-card-disabled){background-color:var(--color-secondary-10);border-color:var(--color-secondary)}:host.rate-option-card-disabled{background-color:var(--color-muted-30);border-color:var(--color-light)}:host.rate-option-card-disabled .rate-option-card-title,:host.rate-option-card-disabled .rate-option-card-price{color:var(--color-medium-50)}:host.rate-option-card-disabled .rate-option-card-subtitle,:host.rate-option-card-disabled .rate-option-card-footer{color:var(--color-medium-30)}.rate-option-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;width:100%}.rate-option-card-info{display:flex;flex-direction:column;gap:4px;min-width:0}.rate-option-card-title-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.rate-option-card-title{font-size:1.125rem;font-weight:600;line-height:23px;color:var(--color-dark)}.rate-option-card-subtitle{font-size:.75rem;line-height:16px;color:var(--color-medium)}.rate-option-card-tag-icon{display:inline-flex}.rate-option-card-price-row{display:flex;align-items:center;gap:8px;white-space:nowrap}.rate-option-card-price{font-size:1.5rem;font-weight:600;line-height:31px;color:var(--color-dark)}.rate-option-card-indicator{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:24px;height:24px;flex-shrink:0;border:2px solid var(--color-light);border-radius:50%;background-color:transparent;transition:background-color .15s ease,border-color .15s ease}.rate-option-card-indicator-check{opacity:0;transition:opacity .15s ease}:host(:not(.rate-option-card-disabled):not(.rate-option-card-selected)):hover:not(:active) .rate-option-card-indicator{background-color:var(--color-secondary-10);border-color:var(--color-secondary-10)}:host(:not(.rate-option-card-disabled):not(.rate-option-card-selected)):hover:not(:active) .rate-option-card-indicator-check{opacity:1}:host(.rate-option-card-selected:not(.rate-option-card-disabled)) .rate-option-card-indicator,:host(:not(.rate-option-card-disabled):not(.rate-option-card-selected)):active .rate-option-card-indicator{background-color:var(--color-secondary);border-color:var(--color-secondary)}:host(.rate-option-card-selected:not(.rate-option-card-disabled)) .rate-option-card-indicator-check,:host(:not(.rate-option-card-disabled):not(.rate-option-card-selected)):active .rate-option-card-indicator-check{opacity:1}:host(.rate-option-card-disabled) .rate-option-card-indicator{border-color:var(--color-light);background-color:transparent}.rate-option-card-footer{display:flex;align-items:center;gap:8px;font-size:.75rem;line-height:16px;color:var(--color-medium)}:host ::ng-deep .rate-option-card-footer strong{color:var(--color-dark);font-weight:600}:host(.rate-option-card-disabled) ::ng-deep .rate-option-card-footer strong{color:var(--color-medium-50)}\n"] }]
|
|
696
699
|
}], ctorParameters: () => [{ type: i1.AdsIconRegistry }], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: true }] }], subheading: [{ type: i0.Input, args: [{ isSignal: true, alias: "subheading", required: false }] }], price: [{ type: i0.Input, args: [{ isSignal: true, alias: "price", required: false }] }], showCheckIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCheckIcon", required: false }] }], tag: [{ type: i0.Input, args: [{ isSignal: true, alias: "tag", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], cardId: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardId", required: false }] }], activate: [{ type: i0.Output, args: ["activate"] }] } });
|
|
697
700
|
|
|
698
701
|
class AdsTagContainerComponent {
|
|
@@ -10108,7 +10111,7 @@ class AdsSideNavBarV2Component {
|
|
|
10108
10111
|
});
|
|
10109
10112
|
}
|
|
10110
10113
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: AdsSideNavBarV2Component, deps: [{ token: i1$2.Router }, { token: i1.AdsIconRegistry }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10111
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: AdsSideNavBarV2Component, isStandalone: true, selector: "ads-side-nav-bar-v2", inputs: { navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsedChange: "collapsedChange", itemSelect: "itemSelect" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "sideNavArea", first: true, predicate: ["sideNavArea"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"side-nav-bar-container\">\n @if (!shouldHideNavBar || isMobile()) {\n <div class=\"nav-container\" [class.collapsed]=\"isCollapsed\" [class.mobile]=\"isMobile()\">\n <ng-container *ngTemplateOutlet=\"matAccordion\" />\n @if(!isMobile()) {\n <button class=\"collapse-toggle-btn\" (click)=\"toggleCollapsed()\">\n @if (isCollapsed) {\n <ads-icon size=\"auto\" name=\"chevron_right\" theme=\"iconPrimary\" />\n } @else {\n <ads-icon size=\"auto\" name=\"chevron_left\" theme=\"iconPrimary\" />\n }\n </button>\n }\n </div>\n }\n</div>\n\n\n<ng-template #matAccordion>\n <div class=\"nav-items-wrapper\">\n <mat-accordion class=\"nav-items-container regular-items\">\n @for (item of navItems(); track $index) {\n @if (item.subItems?.length) {\n <mat-expansion-panel\n #panel\n [ngClass]=\"{\n 'active-expansion-panel': hasActiveLink(item),\n 'panel-expanded': panel.expanded,\n }\"\n >\n <mat-expansion-panel-header>\n <mat-panel-title>\n <ng-container *ngTemplateOutlet=\"itemTitle; context: { data: item }\" />\n </mat-panel-title>\n <mat-panel-description>\n @if (panel.expanded) {\n <ads-icon size=\"xs\" name=\"chevron_up\" theme=\"iconPrimary\" />\n } @else {\n <ads-icon size=\"xs\" name=\"chevron_down\" theme=\"iconPrimary\" />\n }\n </mat-panel-description>\n </mat-expansion-panel-header>\n @for (subItem of item.subItems; track $index) {\n <ng-container *ngTemplateOutlet=\"navItem; context: { navItem: subItem, class: 'sub-item' }\" />\n }\n </mat-expansion-panel>\n } @else {\n <ng-container *ngTemplateOutlet=\"navItem; context: { navItem: item, class: 'main-item' }\" />\n }\n @if (item?.showDividerAfterItem) {\n <ads-divider [margin]=\"'16px 0'\" />\n }\n }\n </mat-accordion>\n </div>\n</ng-template>\n\n<ng-template #navItem let-item=\"navItem\" let-className=\"class\">\n @if (item.href) {\n <a\n [routerLink]=\"item.href\"\n class=\"ads-nav-link\"\n [ngClass]=\"[className, hasActiveSubLink(item) ? 'active-nav-link' : '']\"\n (click)=\"onSubItemClick(item)\"\n >\n <ng-container *ngTemplateOutlet=\"itemTitle; context: { data: item }\" />\n </a>\n } @else {\n <button\n type=\"button\"\n class=\"ads-nav-link\"\n [ngClass]=\"[className, hasActiveSubLink(item) ? 'active-nav-link' : '']\"\n (click)=\"onSubItemClick(item)\"\n >\n <ng-container *ngTemplateOutlet=\"itemTitle; context: { data: item }\" />\n </button>\n }\n</ng-template>\n\n<ng-template #itemTitle let-item=\"data\">\n <div class=\"ads-nav-item-container\">\n @if (!isCollapsed) {\n @if (!!item.icon) {\n <ads-icon [name]=\"item.icon!\" size=\"xxs\" theme=\"iconPrimary\" stroke=\"iconPrimary\" />\n }\n <span>{{ item.label }}</span>\n }\n </div>\n</ng-template>\n", styles: [".mat-expansion-panel{--mat-expansion-container-shape: 5px;--mat-expansion-container-text-color: var(--color-medium);--mat-expansion-container-text-size: font-size(text-base);--mat-expansion-container-background-color: transparent;box-shadow:none!important;border:1px solid}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header{--mat-expansion-header-collapsed-state-height: unset;min-height:24px;height:auto;padding:16px}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header.mat-expanded{padding-bottom:8px}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header mat-panel-title{--mat-expansion-header-text-color: var(--color-dark);font-size:1.25rem;line-height:26px;font-weight:600;flex-basis:auto}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header mat-panel-description{margin:0;justify-content:end;flex-basis:auto}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header .mat-expansion-indicator{display:none}.mat-expansion-panel ::ng-deep .mat-expansion-panel-content .mat-expansion-panel-body{--mat-expansion-container-text-size: font-size(text-base);line-height:21px;padding:0 16px 16px}.mat-expansion-panel .mat-expansion-panel-header[aria-disabled=true]{background-color:var(--color-muted)}.mat-expansion-panel .mat-expansion-panel-header[aria-disabled=true] .mat-expansion-panel-header-title{color:var(--color-medium)}\n", ":host{display:block;height:100%}.side-nav-bar-container{display:block;height:100%;position:relative}.nav-container{width:226px;padding:16px;display:flex;flex-direction:column;background-color:var(--color-white);border-right:1px solid var(--color-light);transition:width .3s ease;box-sizing:border-box;height:100%;flex-shrink:0;overflow-y:auto;overflow-x:hidden;z-index:1}.nav-container.mobile{position:absolute;top:0;left:0;height:100%;border-right:none;box-shadow:4px 1px 4px 0 var(--color-light-opacity-50);z-index:100;transition:transform .35s ease-in-out,opacity .35s ease-in-out;transform:translate(0);opacity:1}.nav-container.mobile.collapsed{transform:translate(-100%);opacity:0;pointer-events:none;width:226px;padding:16px}.nav-container.mobile.collapsed .nav-items-wrapper{display:flex}.nav-container.collapsed{width:24px;padding:16px 8px}.nav-container.collapsed .nav-items-wrapper{display:none}.collapse-toggle-btn{position:absolute;top:24px;right:-16px;width:32px;height:32px;border-radius:50%;border:1px solid var(--color-light);background-color:var(--color-white);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;z-index:10}.collapse-toggle-btn ads-icon{width:16px!important;height:16px!important}.collapse-toggle-btn ads-icon ::ng-deep svg{width:16px!important;height:16px!important}.collapse-toggle-btn:hover,.collapse-toggle-btn:focus,.collapse-toggle-btn:focus-visible{background-color:var(--color-light-30);outline:none}.collapse-toggle-btn:active{background-color:var(--color-light-50)}.nav-items-wrapper{display:flex;flex-direction:column;height:100%;min-height:0}.ads-nav-item-container{display:flex;gap:8px;align-items:center}.ads-nav-item-container span{font-size:14px;font-weight:600;color:var(--color-medium);white-space:nowrap}.ads-nav-link{display:block;width:100%;text-align:left;text-decoration:none;font-size:14px;line-height:18px;color:var(--color-medium);border-radius:5px;background:none;border:none;font-family:inherit;cursor:pointer}.ads-nav-link:hover,.ads-nav-link:focus,.ads-nav-link:focus-visible{background-color:var(--color-secondary-hover)!important;color:var(--color-white)}.ads-nav-link:hover .ads-nav-item-container ads-icon ::ng-deep svg,.ads-nav-link:focus .ads-nav-item-container ads-icon ::ng-deep svg,.ads-nav-link:focus-visible .ads-nav-item-container ads-icon ::ng-deep svg{color:var(--color-white)!important;fill:var(--color-white)!important;stroke:var(--color-white)!important}.ads-nav-link:hover .ads-nav-item-container span,.ads-nav-link:focus .ads-nav-item-container span,.ads-nav-link:focus-visible .ads-nav-item-container span{color:var(--color-white)!important}.ads-nav-link:hover,.ads-nav-link:focus,.ads-nav-link:focus-visible{outline:none}.ads-nav-link:active{background-color:var(--color-secondary-pressed)!important;color:var(--color-white)}.ads-nav-link:active .ads-nav-item-container ads-icon ::ng-deep svg{color:var(--color-white)!important;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{color:var(--color-white)!important;fill:var(--color-white)!important;stroke:var(--color-white)!important}.ads-nav-link.active-nav-link .ads-nav-item-container span{color:var(--color-white)!important}.ads-nav-link.active-nav-link .ads-nav-item-container span{font-weight:600}.ads-nav-link.main-item{padding:8px 12px}.ads-nav-link.sub-item{padding:12px;margin:4px 0}.nav-items-wrapper ::ng-deep mat-panel-title{margin-right:8px!important}.nav-items-wrapper ::ng-deep mat-panel-title .ads-nav-item-container{align-items:center;background-color:transparent!important}.nav-items-wrapper ::ng-deep mat-panel-title .ads-nav-item-container span{font-size:14px;line-height:18px;font-weight:600!important;color:var(--color-medium)}.nav-items-wrapper ::ng-deep mat-expansion-panel{border:none!important;border-radius:unset!important;margin:unset!important;box-shadow:none!important;background-color:transparent!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-body{padding:0!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-body .ads-nav-link .ads-nav-item-container span{font-weight:400!important;font-size:16px;line-height:21px;white-space:nowrap}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-body .ads-nav-link.active-nav-link .ads-nav-item-container span{font-weight:400!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header{padding:8px 12px!important;border-radius:5px;background-color:transparent!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-description ads-icon{width:16px!important;height:18px!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-title .ads-nav-item-container{display:flex;gap:8px}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-title .ads-nav-item-container span{font-size:.875rem}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible{background-color:var(--color-secondary-hover)!important;color:var(--color-white)}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container ads-icon ::ng-deep svg,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible .ads-nav-item-container ads-icon ::ng-deep svg{color:var(--color-white)!important;fill:var(--color-white)!important;stroke:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container span,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible .ads-nav-item-container span{color:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible{outline:none}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover mat-panel-description ads-icon ::ng-deep svg,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible mat-panel-description ads-icon ::ng-deep svg{color:var(--color-white)!important;fill:var(--color-white)!important;stroke:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible{background-color:var(--color-secondary-hover)!important;color:var(--color-white)}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover .ads-nav-item-container ads-icon ::ng-deep svg,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible .ads-nav-item-container ads-icon ::ng-deep svg{color:var(--color-white)!important;fill:var(--color-white)!important;stroke:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover .ads-nav-item-container span,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible .ads-nav-item-container span{color:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible{outline:none}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover mat-panel-description ads-icon ::ng-deep svg,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible mat-panel-description ads-icon ::ng-deep svg{color:var(--color-white)!important;fill:var(--color-white)!important;stroke:var(--color-white)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "directive", type: MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: DividerComponent, selector: "ads-divider", inputs: ["margin", "color"] }] }); }
|
|
10114
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: AdsSideNavBarV2Component, isStandalone: true, selector: "ads-side-nav-bar-v2", inputs: { navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsedChange: "collapsedChange", itemSelect: "itemSelect" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "sideNavArea", first: true, predicate: ["sideNavArea"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"side-nav-bar-container\">\n @if (!shouldHideNavBar || isMobile()) {\n <div class=\"nav-container\" [class.collapsed]=\"isCollapsed\" [class.mobile]=\"isMobile()\">\n <ng-container *ngTemplateOutlet=\"matAccordion\" />\n @if(!isMobile()) {\n <button class=\"collapse-toggle-btn\" (click)=\"toggleCollapsed()\">\n @if (isCollapsed) {\n <ads-icon size=\"auto\" name=\"chevron_right\" theme=\"iconPrimary\" />\n } @else {\n <ads-icon size=\"auto\" name=\"chevron_left\" theme=\"iconPrimary\" />\n }\n </button>\n }\n </div>\n }\n</div>\n\n\n<ng-template #matAccordion>\n <div class=\"nav-items-wrapper\">\n <mat-accordion class=\"nav-items-container regular-items\">\n @for (item of navItems(); track $index) {\n @if (item.subItems?.length) {\n <mat-expansion-panel\n #panel\n [ngClass]=\"{\n 'active-expansion-panel': hasActiveLink(item),\n 'panel-expanded': panel.expanded,\n }\"\n >\n <mat-expansion-panel-header>\n <mat-panel-title>\n <ng-container *ngTemplateOutlet=\"itemTitle; context: { data: item }\" />\n </mat-panel-title>\n <mat-panel-description>\n @if (panel.expanded) {\n <ads-icon size=\"xs\" name=\"chevron_up\" theme=\"iconPrimary\" />\n } @else {\n <ads-icon size=\"xs\" name=\"chevron_down\" theme=\"iconPrimary\" />\n }\n </mat-panel-description>\n </mat-expansion-panel-header>\n @for (subItem of item.subItems; track $index) {\n <ng-container *ngTemplateOutlet=\"navItem; context: { navItem: subItem, class: 'sub-item' }\" />\n }\n </mat-expansion-panel>\n } @else {\n <ng-container *ngTemplateOutlet=\"navItem; context: { navItem: item, class: 'main-item' }\" />\n }\n @if (item?.showDividerAfterItem) {\n <ads-divider [margin]=\"'16px 0'\" />\n }\n }\n </mat-accordion>\n </div>\n</ng-template>\n\n<ng-template #navItem let-item=\"navItem\" let-className=\"class\">\n @if (item.href) {\n <a\n [routerLink]=\"item.href\"\n class=\"ads-nav-link\"\n [ngClass]=\"[className, hasActiveSubLink(item) ? 'active-nav-link' : '']\"\n (click)=\"onSubItemClick(item)\"\n >\n <ng-container *ngTemplateOutlet=\"itemTitle; context: { data: item }\" />\n </a>\n } @else {\n <button\n type=\"button\"\n class=\"ads-nav-link\"\n [ngClass]=\"[className, hasActiveSubLink(item) ? 'active-nav-link' : '']\"\n (click)=\"onSubItemClick(item)\"\n >\n <ng-container *ngTemplateOutlet=\"itemTitle; context: { data: item }\" />\n </button>\n }\n</ng-template>\n\n<ng-template #itemTitle let-item=\"data\">\n <div class=\"ads-nav-item-container\">\n @if (!isCollapsed) {\n @if (!!item.icon) {\n <ads-icon [name]=\"item.icon!\" size=\"xxs\" theme=\"iconPrimary\" stroke=\"iconPrimary\" />\n }\n <span>{{ item.label }}</span>\n }\n </div>\n</ng-template>\n", styles: [".mat-expansion-panel{--mat-expansion-container-shape: 5px;--mat-expansion-container-text-color: var(--color-medium);--mat-expansion-container-text-size: font-size(text-base);--mat-expansion-container-background-color: transparent;box-shadow:none!important;border:1px solid}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header{--mat-expansion-header-collapsed-state-height: unset;min-height:24px;height:auto;padding:16px}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header.mat-expanded{padding-bottom:8px}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header mat-panel-title{--mat-expansion-header-text-color: var(--color-dark);font-size:1.25rem;line-height:26px;font-weight:600;flex-basis:auto}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header mat-panel-description{margin:0;justify-content:end;flex-basis:auto}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header .mat-expansion-indicator{display:none}.mat-expansion-panel ::ng-deep .mat-expansion-panel-content .mat-expansion-panel-body{--mat-expansion-container-text-size: font-size(text-base);line-height:21px;padding:0 16px 16px}.mat-expansion-panel .mat-expansion-panel-header[aria-disabled=true]{background-color:var(--color-muted)}.mat-expansion-panel .mat-expansion-panel-header[aria-disabled=true] .mat-expansion-panel-header-title{color:var(--color-medium)}\n", ":host{display:block;height:100%}.side-nav-bar-container{display:block;height:100%;position:relative}.nav-container{width:226px;padding:16px;display:flex;flex-direction:column;background-color:var(--color-white);border-right:1px solid var(--color-light);transition:width .3s ease;box-sizing:border-box;height:100%;flex-shrink:0;overflow-y:auto;overflow-x:hidden;z-index:1}.nav-container.mobile{position:absolute;top:0;left:0;height:100%;border-right:none;box-shadow:4px 1px 4px 0 var(--color-light-opacity-50);z-index:100;transition:transform .35s ease-in-out,opacity .35s ease-in-out;transform:translate(0);opacity:1}.nav-container.mobile.collapsed{transform:translate(-100%);opacity:0;pointer-events:none;width:226px;padding:16px}.nav-container.mobile.collapsed .nav-items-wrapper{display:flex}.nav-container.collapsed{width:24px;padding:16px 8px}.nav-container.collapsed .nav-items-wrapper{display:none}.collapse-toggle-btn{position:absolute;top:50%;transform:translateY(-50%);right:-16px;width:32px;height:32px;border-radius:50%;border:1px solid var(--color-light);background-color:var(--color-white);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;z-index:10}.collapse-toggle-btn ads-icon{width:16px!important;height:16px!important}.collapse-toggle-btn ads-icon ::ng-deep svg{width:16px!important;height:16px!important}.collapse-toggle-btn:hover,.collapse-toggle-btn:focus,.collapse-toggle-btn:focus-visible{background-color:var(--color-light-30);outline:none}.collapse-toggle-btn:active{background-color:var(--color-light-50)}.nav-items-wrapper{display:flex;flex-direction:column;height:100%;min-height:0}.ads-nav-item-container{display:flex;gap:8px;align-items:center}.ads-nav-item-container span{font-size:14px;font-weight:600;color:var(--color-medium);white-space:nowrap}.ads-nav-link{display:block;width:100%;text-align:left;text-decoration:none;font-size:14px;line-height:18px;color:var(--color-medium);border-radius:5px;background:none;border:none;font-family:inherit;cursor:pointer}.ads-nav-link:hover,.ads-nav-link:focus,.ads-nav-link:focus-visible{background-color:var(--color-secondary-hover)!important;color:var(--color-white)}.ads-nav-link:hover .ads-nav-item-container ads-icon ::ng-deep svg,.ads-nav-link:focus .ads-nav-item-container ads-icon ::ng-deep svg,.ads-nav-link:focus-visible .ads-nav-item-container ads-icon ::ng-deep svg{color:var(--color-white)!important;fill:var(--color-white)!important;stroke:var(--color-white)!important}.ads-nav-link:hover .ads-nav-item-container span,.ads-nav-link:focus .ads-nav-item-container span,.ads-nav-link:focus-visible .ads-nav-item-container span{color:var(--color-white)!important}.ads-nav-link:hover,.ads-nav-link:focus,.ads-nav-link:focus-visible{outline:none}.ads-nav-link:active{background-color:var(--color-secondary-pressed)!important;color:var(--color-white)}.ads-nav-link:active .ads-nav-item-container ads-icon ::ng-deep svg{color:var(--color-white)!important;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{color:var(--color-white)!important;fill:var(--color-white)!important;stroke:var(--color-white)!important}.ads-nav-link.active-nav-link .ads-nav-item-container span{color:var(--color-white)!important}.ads-nav-link.active-nav-link .ads-nav-item-container span{font-weight:600}.ads-nav-link.main-item{padding:8px 12px}.ads-nav-link.sub-item{padding:12px;margin:4px 0}.nav-items-wrapper ::ng-deep mat-panel-title{margin-right:8px!important}.nav-items-wrapper ::ng-deep mat-panel-title .ads-nav-item-container{align-items:center;background-color:transparent!important}.nav-items-wrapper ::ng-deep mat-panel-title .ads-nav-item-container span{font-size:14px;line-height:18px;font-weight:600!important;color:var(--color-medium)}.nav-items-wrapper ::ng-deep mat-expansion-panel{border:none!important;border-radius:unset!important;margin:unset!important;box-shadow:none!important;background-color:transparent!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-body{padding:0!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-body .ads-nav-link .ads-nav-item-container span{font-weight:400!important;font-size:16px;line-height:21px;white-space:nowrap}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-body .ads-nav-link.active-nav-link .ads-nav-item-container span{font-weight:400!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header{padding:8px 12px!important;border-radius:5px;background-color:transparent!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-description ads-icon{width:16px!important;height:18px!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-title .ads-nav-item-container{display:flex;gap:8px}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-title .ads-nav-item-container span{font-size:.875rem}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible{background-color:var(--color-secondary-hover)!important;color:var(--color-white)}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container ads-icon ::ng-deep svg,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible .ads-nav-item-container ads-icon ::ng-deep svg{color:var(--color-white)!important;fill:var(--color-white)!important;stroke:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container span,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible .ads-nav-item-container span{color:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible{outline:none}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover mat-panel-description ads-icon ::ng-deep svg,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible mat-panel-description ads-icon ::ng-deep svg{color:var(--color-white)!important;fill:var(--color-white)!important;stroke:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible{background-color:var(--color-secondary-hover)!important;color:var(--color-white)}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover .ads-nav-item-container ads-icon ::ng-deep svg,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible .ads-nav-item-container ads-icon ::ng-deep svg{color:var(--color-white)!important;fill:var(--color-white)!important;stroke:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover .ads-nav-item-container span,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible .ads-nav-item-container span{color:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible{outline:none}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover mat-panel-description ads-icon ::ng-deep svg,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible mat-panel-description ads-icon ::ng-deep svg{color:var(--color-white)!important;fill:var(--color-white)!important;stroke:var(--color-white)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "directive", type: MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: DividerComponent, selector: "ads-divider", inputs: ["margin", "color"] }] }); }
|
|
10112
10115
|
}
|
|
10113
10116
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: AdsSideNavBarV2Component, decorators: [{
|
|
10114
10117
|
type: Component,
|
|
@@ -10122,7 +10125,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
10122
10125
|
MatExpansionPanelHeader,
|
|
10123
10126
|
MatExpansionPanelTitle,
|
|
10124
10127
|
DividerComponent,
|
|
10125
|
-
], template: "<div class=\"side-nav-bar-container\">\n @if (!shouldHideNavBar || isMobile()) {\n <div class=\"nav-container\" [class.collapsed]=\"isCollapsed\" [class.mobile]=\"isMobile()\">\n <ng-container *ngTemplateOutlet=\"matAccordion\" />\n @if(!isMobile()) {\n <button class=\"collapse-toggle-btn\" (click)=\"toggleCollapsed()\">\n @if (isCollapsed) {\n <ads-icon size=\"auto\" name=\"chevron_right\" theme=\"iconPrimary\" />\n } @else {\n <ads-icon size=\"auto\" name=\"chevron_left\" theme=\"iconPrimary\" />\n }\n </button>\n }\n </div>\n }\n</div>\n\n\n<ng-template #matAccordion>\n <div class=\"nav-items-wrapper\">\n <mat-accordion class=\"nav-items-container regular-items\">\n @for (item of navItems(); track $index) {\n @if (item.subItems?.length) {\n <mat-expansion-panel\n #panel\n [ngClass]=\"{\n 'active-expansion-panel': hasActiveLink(item),\n 'panel-expanded': panel.expanded,\n }\"\n >\n <mat-expansion-panel-header>\n <mat-panel-title>\n <ng-container *ngTemplateOutlet=\"itemTitle; context: { data: item }\" />\n </mat-panel-title>\n <mat-panel-description>\n @if (panel.expanded) {\n <ads-icon size=\"xs\" name=\"chevron_up\" theme=\"iconPrimary\" />\n } @else {\n <ads-icon size=\"xs\" name=\"chevron_down\" theme=\"iconPrimary\" />\n }\n </mat-panel-description>\n </mat-expansion-panel-header>\n @for (subItem of item.subItems; track $index) {\n <ng-container *ngTemplateOutlet=\"navItem; context: { navItem: subItem, class: 'sub-item' }\" />\n }\n </mat-expansion-panel>\n } @else {\n <ng-container *ngTemplateOutlet=\"navItem; context: { navItem: item, class: 'main-item' }\" />\n }\n @if (item?.showDividerAfterItem) {\n <ads-divider [margin]=\"'16px 0'\" />\n }\n }\n </mat-accordion>\n </div>\n</ng-template>\n\n<ng-template #navItem let-item=\"navItem\" let-className=\"class\">\n @if (item.href) {\n <a\n [routerLink]=\"item.href\"\n class=\"ads-nav-link\"\n [ngClass]=\"[className, hasActiveSubLink(item) ? 'active-nav-link' : '']\"\n (click)=\"onSubItemClick(item)\"\n >\n <ng-container *ngTemplateOutlet=\"itemTitle; context: { data: item }\" />\n </a>\n } @else {\n <button\n type=\"button\"\n class=\"ads-nav-link\"\n [ngClass]=\"[className, hasActiveSubLink(item) ? 'active-nav-link' : '']\"\n (click)=\"onSubItemClick(item)\"\n >\n <ng-container *ngTemplateOutlet=\"itemTitle; context: { data: item }\" />\n </button>\n }\n</ng-template>\n\n<ng-template #itemTitle let-item=\"data\">\n <div class=\"ads-nav-item-container\">\n @if (!isCollapsed) {\n @if (!!item.icon) {\n <ads-icon [name]=\"item.icon!\" size=\"xxs\" theme=\"iconPrimary\" stroke=\"iconPrimary\" />\n }\n <span>{{ item.label }}</span>\n }\n </div>\n</ng-template>\n", styles: [".mat-expansion-panel{--mat-expansion-container-shape: 5px;--mat-expansion-container-text-color: var(--color-medium);--mat-expansion-container-text-size: font-size(text-base);--mat-expansion-container-background-color: transparent;box-shadow:none!important;border:1px solid}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header{--mat-expansion-header-collapsed-state-height: unset;min-height:24px;height:auto;padding:16px}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header.mat-expanded{padding-bottom:8px}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header mat-panel-title{--mat-expansion-header-text-color: var(--color-dark);font-size:1.25rem;line-height:26px;font-weight:600;flex-basis:auto}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header mat-panel-description{margin:0;justify-content:end;flex-basis:auto}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header .mat-expansion-indicator{display:none}.mat-expansion-panel ::ng-deep .mat-expansion-panel-content .mat-expansion-panel-body{--mat-expansion-container-text-size: font-size(text-base);line-height:21px;padding:0 16px 16px}.mat-expansion-panel .mat-expansion-panel-header[aria-disabled=true]{background-color:var(--color-muted)}.mat-expansion-panel .mat-expansion-panel-header[aria-disabled=true] .mat-expansion-panel-header-title{color:var(--color-medium)}\n", ":host{display:block;height:100%}.side-nav-bar-container{display:block;height:100%;position:relative}.nav-container{width:226px;padding:16px;display:flex;flex-direction:column;background-color:var(--color-white);border-right:1px solid var(--color-light);transition:width .3s ease;box-sizing:border-box;height:100%;flex-shrink:0;overflow-y:auto;overflow-x:hidden;z-index:1}.nav-container.mobile{position:absolute;top:0;left:0;height:100%;border-right:none;box-shadow:4px 1px 4px 0 var(--color-light-opacity-50);z-index:100;transition:transform .35s ease-in-out,opacity .35s ease-in-out;transform:translate(0);opacity:1}.nav-container.mobile.collapsed{transform:translate(-100%);opacity:0;pointer-events:none;width:226px;padding:16px}.nav-container.mobile.collapsed .nav-items-wrapper{display:flex}.nav-container.collapsed{width:24px;padding:16px 8px}.nav-container.collapsed .nav-items-wrapper{display:none}.collapse-toggle-btn{position:absolute;top:24px;right:-16px;width:32px;height:32px;border-radius:50%;border:1px solid var(--color-light);background-color:var(--color-white);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;z-index:10}.collapse-toggle-btn ads-icon{width:16px!important;height:16px!important}.collapse-toggle-btn ads-icon ::ng-deep svg{width:16px!important;height:16px!important}.collapse-toggle-btn:hover,.collapse-toggle-btn:focus,.collapse-toggle-btn:focus-visible{background-color:var(--color-light-30);outline:none}.collapse-toggle-btn:active{background-color:var(--color-light-50)}.nav-items-wrapper{display:flex;flex-direction:column;height:100%;min-height:0}.ads-nav-item-container{display:flex;gap:8px;align-items:center}.ads-nav-item-container span{font-size:14px;font-weight:600;color:var(--color-medium);white-space:nowrap}.ads-nav-link{display:block;width:100%;text-align:left;text-decoration:none;font-size:14px;line-height:18px;color:var(--color-medium);border-radius:5px;background:none;border:none;font-family:inherit;cursor:pointer}.ads-nav-link:hover,.ads-nav-link:focus,.ads-nav-link:focus-visible{background-color:var(--color-secondary-hover)!important;color:var(--color-white)}.ads-nav-link:hover .ads-nav-item-container ads-icon ::ng-deep svg,.ads-nav-link:focus .ads-nav-item-container ads-icon ::ng-deep svg,.ads-nav-link:focus-visible .ads-nav-item-container ads-icon ::ng-deep svg{color:var(--color-white)!important;fill:var(--color-white)!important;stroke:var(--color-white)!important}.ads-nav-link:hover .ads-nav-item-container span,.ads-nav-link:focus .ads-nav-item-container span,.ads-nav-link:focus-visible .ads-nav-item-container span{color:var(--color-white)!important}.ads-nav-link:hover,.ads-nav-link:focus,.ads-nav-link:focus-visible{outline:none}.ads-nav-link:active{background-color:var(--color-secondary-pressed)!important;color:var(--color-white)}.ads-nav-link:active .ads-nav-item-container ads-icon ::ng-deep svg{color:var(--color-white)!important;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{color:var(--color-white)!important;fill:var(--color-white)!important;stroke:var(--color-white)!important}.ads-nav-link.active-nav-link .ads-nav-item-container span{color:var(--color-white)!important}.ads-nav-link.active-nav-link .ads-nav-item-container span{font-weight:600}.ads-nav-link.main-item{padding:8px 12px}.ads-nav-link.sub-item{padding:12px;margin:4px 0}.nav-items-wrapper ::ng-deep mat-panel-title{margin-right:8px!important}.nav-items-wrapper ::ng-deep mat-panel-title .ads-nav-item-container{align-items:center;background-color:transparent!important}.nav-items-wrapper ::ng-deep mat-panel-title .ads-nav-item-container span{font-size:14px;line-height:18px;font-weight:600!important;color:var(--color-medium)}.nav-items-wrapper ::ng-deep mat-expansion-panel{border:none!important;border-radius:unset!important;margin:unset!important;box-shadow:none!important;background-color:transparent!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-body{padding:0!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-body .ads-nav-link .ads-nav-item-container span{font-weight:400!important;font-size:16px;line-height:21px;white-space:nowrap}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-body .ads-nav-link.active-nav-link .ads-nav-item-container span{font-weight:400!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header{padding:8px 12px!important;border-radius:5px;background-color:transparent!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-description ads-icon{width:16px!important;height:18px!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-title .ads-nav-item-container{display:flex;gap:8px}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-title .ads-nav-item-container span{font-size:.875rem}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible{background-color:var(--color-secondary-hover)!important;color:var(--color-white)}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container ads-icon ::ng-deep svg,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible .ads-nav-item-container ads-icon ::ng-deep svg{color:var(--color-white)!important;fill:var(--color-white)!important;stroke:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container span,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible .ads-nav-item-container span{color:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible{outline:none}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover mat-panel-description ads-icon ::ng-deep svg,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible mat-panel-description ads-icon ::ng-deep svg{color:var(--color-white)!important;fill:var(--color-white)!important;stroke:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible{background-color:var(--color-secondary-hover)!important;color:var(--color-white)}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover .ads-nav-item-container ads-icon ::ng-deep svg,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible .ads-nav-item-container ads-icon ::ng-deep svg{color:var(--color-white)!important;fill:var(--color-white)!important;stroke:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover .ads-nav-item-container span,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible .ads-nav-item-container span{color:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible{outline:none}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover mat-panel-description ads-icon ::ng-deep svg,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible mat-panel-description ads-icon ::ng-deep svg{color:var(--color-white)!important;fill:var(--color-white)!important;stroke:var(--color-white)!important}\n"] }]
|
|
10128
|
+
], template: "<div class=\"side-nav-bar-container\">\n @if (!shouldHideNavBar || isMobile()) {\n <div class=\"nav-container\" [class.collapsed]=\"isCollapsed\" [class.mobile]=\"isMobile()\">\n <ng-container *ngTemplateOutlet=\"matAccordion\" />\n @if(!isMobile()) {\n <button class=\"collapse-toggle-btn\" (click)=\"toggleCollapsed()\">\n @if (isCollapsed) {\n <ads-icon size=\"auto\" name=\"chevron_right\" theme=\"iconPrimary\" />\n } @else {\n <ads-icon size=\"auto\" name=\"chevron_left\" theme=\"iconPrimary\" />\n }\n </button>\n }\n </div>\n }\n</div>\n\n\n<ng-template #matAccordion>\n <div class=\"nav-items-wrapper\">\n <mat-accordion class=\"nav-items-container regular-items\">\n @for (item of navItems(); track $index) {\n @if (item.subItems?.length) {\n <mat-expansion-panel\n #panel\n [ngClass]=\"{\n 'active-expansion-panel': hasActiveLink(item),\n 'panel-expanded': panel.expanded,\n }\"\n >\n <mat-expansion-panel-header>\n <mat-panel-title>\n <ng-container *ngTemplateOutlet=\"itemTitle; context: { data: item }\" />\n </mat-panel-title>\n <mat-panel-description>\n @if (panel.expanded) {\n <ads-icon size=\"xs\" name=\"chevron_up\" theme=\"iconPrimary\" />\n } @else {\n <ads-icon size=\"xs\" name=\"chevron_down\" theme=\"iconPrimary\" />\n }\n </mat-panel-description>\n </mat-expansion-panel-header>\n @for (subItem of item.subItems; track $index) {\n <ng-container *ngTemplateOutlet=\"navItem; context: { navItem: subItem, class: 'sub-item' }\" />\n }\n </mat-expansion-panel>\n } @else {\n <ng-container *ngTemplateOutlet=\"navItem; context: { navItem: item, class: 'main-item' }\" />\n }\n @if (item?.showDividerAfterItem) {\n <ads-divider [margin]=\"'16px 0'\" />\n }\n }\n </mat-accordion>\n </div>\n</ng-template>\n\n<ng-template #navItem let-item=\"navItem\" let-className=\"class\">\n @if (item.href) {\n <a\n [routerLink]=\"item.href\"\n class=\"ads-nav-link\"\n [ngClass]=\"[className, hasActiveSubLink(item) ? 'active-nav-link' : '']\"\n (click)=\"onSubItemClick(item)\"\n >\n <ng-container *ngTemplateOutlet=\"itemTitle; context: { data: item }\" />\n </a>\n } @else {\n <button\n type=\"button\"\n class=\"ads-nav-link\"\n [ngClass]=\"[className, hasActiveSubLink(item) ? 'active-nav-link' : '']\"\n (click)=\"onSubItemClick(item)\"\n >\n <ng-container *ngTemplateOutlet=\"itemTitle; context: { data: item }\" />\n </button>\n }\n</ng-template>\n\n<ng-template #itemTitle let-item=\"data\">\n <div class=\"ads-nav-item-container\">\n @if (!isCollapsed) {\n @if (!!item.icon) {\n <ads-icon [name]=\"item.icon!\" size=\"xxs\" theme=\"iconPrimary\" stroke=\"iconPrimary\" />\n }\n <span>{{ item.label }}</span>\n }\n </div>\n</ng-template>\n", styles: [".mat-expansion-panel{--mat-expansion-container-shape: 5px;--mat-expansion-container-text-color: var(--color-medium);--mat-expansion-container-text-size: font-size(text-base);--mat-expansion-container-background-color: transparent;box-shadow:none!important;border:1px solid}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header{--mat-expansion-header-collapsed-state-height: unset;min-height:24px;height:auto;padding:16px}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header.mat-expanded{padding-bottom:8px}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header mat-panel-title{--mat-expansion-header-text-color: var(--color-dark);font-size:1.25rem;line-height:26px;font-weight:600;flex-basis:auto}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header mat-panel-description{margin:0;justify-content:end;flex-basis:auto}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header .mat-expansion-indicator{display:none}.mat-expansion-panel ::ng-deep .mat-expansion-panel-content .mat-expansion-panel-body{--mat-expansion-container-text-size: font-size(text-base);line-height:21px;padding:0 16px 16px}.mat-expansion-panel .mat-expansion-panel-header[aria-disabled=true]{background-color:var(--color-muted)}.mat-expansion-panel .mat-expansion-panel-header[aria-disabled=true] .mat-expansion-panel-header-title{color:var(--color-medium)}\n", ":host{display:block;height:100%}.side-nav-bar-container{display:block;height:100%;position:relative}.nav-container{width:226px;padding:16px;display:flex;flex-direction:column;background-color:var(--color-white);border-right:1px solid var(--color-light);transition:width .3s ease;box-sizing:border-box;height:100%;flex-shrink:0;overflow-y:auto;overflow-x:hidden;z-index:1}.nav-container.mobile{position:absolute;top:0;left:0;height:100%;border-right:none;box-shadow:4px 1px 4px 0 var(--color-light-opacity-50);z-index:100;transition:transform .35s ease-in-out,opacity .35s ease-in-out;transform:translate(0);opacity:1}.nav-container.mobile.collapsed{transform:translate(-100%);opacity:0;pointer-events:none;width:226px;padding:16px}.nav-container.mobile.collapsed .nav-items-wrapper{display:flex}.nav-container.collapsed{width:24px;padding:16px 8px}.nav-container.collapsed .nav-items-wrapper{display:none}.collapse-toggle-btn{position:absolute;top:50%;transform:translateY(-50%);right:-16px;width:32px;height:32px;border-radius:50%;border:1px solid var(--color-light);background-color:var(--color-white);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;z-index:10}.collapse-toggle-btn ads-icon{width:16px!important;height:16px!important}.collapse-toggle-btn ads-icon ::ng-deep svg{width:16px!important;height:16px!important}.collapse-toggle-btn:hover,.collapse-toggle-btn:focus,.collapse-toggle-btn:focus-visible{background-color:var(--color-light-30);outline:none}.collapse-toggle-btn:active{background-color:var(--color-light-50)}.nav-items-wrapper{display:flex;flex-direction:column;height:100%;min-height:0}.ads-nav-item-container{display:flex;gap:8px;align-items:center}.ads-nav-item-container span{font-size:14px;font-weight:600;color:var(--color-medium);white-space:nowrap}.ads-nav-link{display:block;width:100%;text-align:left;text-decoration:none;font-size:14px;line-height:18px;color:var(--color-medium);border-radius:5px;background:none;border:none;font-family:inherit;cursor:pointer}.ads-nav-link:hover,.ads-nav-link:focus,.ads-nav-link:focus-visible{background-color:var(--color-secondary-hover)!important;color:var(--color-white)}.ads-nav-link:hover .ads-nav-item-container ads-icon ::ng-deep svg,.ads-nav-link:focus .ads-nav-item-container ads-icon ::ng-deep svg,.ads-nav-link:focus-visible .ads-nav-item-container ads-icon ::ng-deep svg{color:var(--color-white)!important;fill:var(--color-white)!important;stroke:var(--color-white)!important}.ads-nav-link:hover .ads-nav-item-container span,.ads-nav-link:focus .ads-nav-item-container span,.ads-nav-link:focus-visible .ads-nav-item-container span{color:var(--color-white)!important}.ads-nav-link:hover,.ads-nav-link:focus,.ads-nav-link:focus-visible{outline:none}.ads-nav-link:active{background-color:var(--color-secondary-pressed)!important;color:var(--color-white)}.ads-nav-link:active .ads-nav-item-container ads-icon ::ng-deep svg{color:var(--color-white)!important;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{color:var(--color-white)!important;fill:var(--color-white)!important;stroke:var(--color-white)!important}.ads-nav-link.active-nav-link .ads-nav-item-container span{color:var(--color-white)!important}.ads-nav-link.active-nav-link .ads-nav-item-container span{font-weight:600}.ads-nav-link.main-item{padding:8px 12px}.ads-nav-link.sub-item{padding:12px;margin:4px 0}.nav-items-wrapper ::ng-deep mat-panel-title{margin-right:8px!important}.nav-items-wrapper ::ng-deep mat-panel-title .ads-nav-item-container{align-items:center;background-color:transparent!important}.nav-items-wrapper ::ng-deep mat-panel-title .ads-nav-item-container span{font-size:14px;line-height:18px;font-weight:600!important;color:var(--color-medium)}.nav-items-wrapper ::ng-deep mat-expansion-panel{border:none!important;border-radius:unset!important;margin:unset!important;box-shadow:none!important;background-color:transparent!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-body{padding:0!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-body .ads-nav-link .ads-nav-item-container span{font-weight:400!important;font-size:16px;line-height:21px;white-space:nowrap}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-body .ads-nav-link.active-nav-link .ads-nav-item-container span{font-weight:400!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header{padding:8px 12px!important;border-radius:5px;background-color:transparent!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-description ads-icon{width:16px!important;height:18px!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-title .ads-nav-item-container{display:flex;gap:8px}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header mat-panel-title .ads-nav-item-container span{font-size:.875rem}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible{background-color:var(--color-secondary-hover)!important;color:var(--color-white)}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container ads-icon ::ng-deep svg,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible .ads-nav-item-container ads-icon ::ng-deep svg{color:var(--color-white)!important;fill:var(--color-white)!important;stroke:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover .ads-nav-item-container span,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible .ads-nav-item-container span{color:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible{outline:none}.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover mat-panel-description ads-icon ::ng-deep svg,.nav-items-wrapper ::ng-deep mat-expansion-panel .mat-expansion-panel-header:focus-visible mat-panel-description ads-icon ::ng-deep svg{color:var(--color-white)!important;fill:var(--color-white)!important;stroke:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible{background-color:var(--color-secondary-hover)!important;color:var(--color-white)}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover .ads-nav-item-container ads-icon ::ng-deep svg,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible .ads-nav-item-container ads-icon ::ng-deep svg{color:var(--color-white)!important;fill:var(--color-white)!important;stroke:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover .ads-nav-item-container span,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible .ads-nav-item-container span{color:var(--color-white)!important}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible{outline:none}.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:hover mat-panel-description ads-icon ::ng-deep svg,.nav-items-wrapper ::ng-deep mat-expansion-panel.panel-expanded .mat-expansion-panel-header:focus-visible mat-panel-description ads-icon ::ng-deep svg{color:var(--color-white)!important;fill:var(--color-white)!important;stroke:var(--color-white)!important}\n"] }]
|
|
10126
10129
|
}], ctorParameters: () => [{ type: i1$2.Router }, { type: i1.AdsIconRegistry }], propDecorators: { sideNavArea: [{
|
|
10127
10130
|
type: ViewChild,
|
|
10128
10131
|
args: ['sideNavArea', { read: ElementRef }]
|
|
@@ -10989,11 +10992,11 @@ class AdsTabsComponent {
|
|
|
10989
10992
|
};
|
|
10990
10993
|
}
|
|
10991
10994
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: AdsTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10992
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: AdsTabsComponent, isStandalone: true, selector: "ads-tabs", inputs: { tabs: "tabs", selectedIndex: "selectedIndex", tabWidth: "tabWidth", activeColor: "activeColor", hideInactiveBorder: "hideInactiveBorder", stretchTabs: "stretchTabs", animationDuration: "animationDuration" }, outputs: { selectedIndexChange: "selectedIndexChange", tabChange: "tabChange" }, viewQueries: [{ propertyName: "tabGroup", first: true, predicate: ["tabGroup"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-tab-group\n [selectedIndex]=\"selectedIndex\"\n (selectedIndexChange)=\"selectedIndexChange.emit($event)\"\n [style.--ads-tab-width]=\"tabWidth || null\"\n [style.--ads-tab-active-color]=\"_activeColorVar\"\n class=\"custom-tabs\"\n [class.hide-inactive-border]=\"hideInactiveBorder\"\n #tabGroup\n [disableRipple]=\"true\"\n [mat-stretch-tabs]=\"stretchTabs\"\n [animationDuration]=\"animationDuration ?? ''\"\n>\n @for(tab of tabs; track $index) {\n @if (tab.lazy) {\n <!-- matTabContent must be a direct child of mat-tab: MatTab queries it with a\n static @ContentChild, which cannot see templates wrapped in @if. -->\n <mat-tab [disabled]=\"tab.disabled\" [label]=\"tab.text || ''\" [labelClass]=\"tab.labelClass ?? ''\">\n @if (tab.headerTemplate) {\n <ng-template mat-tab-label>\n <ng-container *ngTemplateOutlet=\"tab.headerTemplate; context: tab.templateContext\"></ng-container>\n </ng-template>\n }\n <ng-template matTabContent>\n @if (tab.template) {\n <ng-container *ngTemplateOutlet=\"tab.template; context: tab.templateContext\"></ng-container>\n }\n </ng-template>\n </mat-tab>\n } @else {\n <mat-tab [disabled]=\"tab.disabled\" [label]=\"tab.text || ''\" [labelClass]=\"tab.labelClass ?? ''\">\n @if (tab.headerTemplate) {\n <ng-template mat-tab-label>\n <ng-container *ngTemplateOutlet=\"tab.headerTemplate; context: tab.templateContext\"></ng-container>\n </ng-template>\n }\n @if (tab.template) {\n <ng-container *ngTemplateOutlet=\"tab.template; context: tab.templateContext\"></ng-container>\n }\n </mat-tab>\n }\n }\n</mat-tab-group>\n", styles: [":host::ng-deep .mat-mdc-tab.mdc-tab{border-bottom:2px solid var(--color-medium-30);min-width:var(--ads-tab-width, auto)!important;max-width:var(--ads-tab-width, none)!important;width:var(--ads-tab-width, auto)!important;flex-basis:var(--ads-tab-width, auto)!important;flex-shrink:0}:host::ng-deep .mat-mdc-tab.mdc-tab .mdc-tab__text-label{line-height:normal;font-weight:400;color:var(--color-medium)!important}:host::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active{border-bottom:2px solid var(--ads-tab-active-color, var(--color-primary-hover))}:host::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active .mdc-tab__text-label{color:var(--ads-tab-active-color, var(--color-primary-hover))!important;font-weight:600}:host::ng-deep .mat-mdc-tab-disabled{border-bottom:2px solid var(--color-medium-opacity-50)!important}:host::ng-deep .mat-mdc-tab-disabled .mdc-tab__text-label{color:var(--color-medium-opacity-50)!important}:host::ng-deep .mdc-tab-indicator{display:none}:host::ng-deep .hide-inactive-border .mat-mdc-tab.mdc-tab:not(.mdc-tab--active):not(.mat-mdc-tab-disabled){border-bottom-color:transparent}:host::ng-deep .mat-mdc-tab-header-pagination{box-sizing:border-box!important;align-self:center!important;flex:0 0 auto!important;width:32px!important;height:32px!important;min-width:32px!important;padding:0!important;margin:0 4px;border-radius:50%;background-color:
|
|
10995
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: AdsTabsComponent, isStandalone: true, selector: "ads-tabs", inputs: { tabs: "tabs", selectedIndex: "selectedIndex", tabWidth: "tabWidth", activeColor: "activeColor", hideInactiveBorder: "hideInactiveBorder", stretchTabs: "stretchTabs", animationDuration: "animationDuration" }, outputs: { selectedIndexChange: "selectedIndexChange", tabChange: "tabChange" }, viewQueries: [{ propertyName: "tabGroup", first: true, predicate: ["tabGroup"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-tab-group\n [selectedIndex]=\"selectedIndex\"\n (selectedIndexChange)=\"selectedIndexChange.emit($event)\"\n [style.--ads-tab-width]=\"tabWidth || null\"\n [style.--ads-tab-active-color]=\"_activeColorVar\"\n class=\"custom-tabs\"\n [class.hide-inactive-border]=\"hideInactiveBorder\"\n #tabGroup\n [disableRipple]=\"true\"\n [mat-stretch-tabs]=\"stretchTabs\"\n [animationDuration]=\"animationDuration ?? ''\"\n>\n @for(tab of tabs; track $index) {\n @if (tab.lazy) {\n <!-- matTabContent must be a direct child of mat-tab: MatTab queries it with a\n static @ContentChild, which cannot see templates wrapped in @if. -->\n <mat-tab [disabled]=\"tab.disabled\" [label]=\"tab.text || ''\" [labelClass]=\"tab.labelClass ?? ''\">\n @if (tab.headerTemplate) {\n <ng-template mat-tab-label>\n <ng-container *ngTemplateOutlet=\"tab.headerTemplate; context: tab.templateContext\"></ng-container>\n </ng-template>\n }\n <ng-template matTabContent>\n @if (tab.template) {\n <ng-container *ngTemplateOutlet=\"tab.template; context: tab.templateContext\"></ng-container>\n }\n </ng-template>\n </mat-tab>\n } @else {\n <mat-tab [disabled]=\"tab.disabled\" [label]=\"tab.text || ''\" [labelClass]=\"tab.labelClass ?? ''\">\n @if (tab.headerTemplate) {\n <ng-template mat-tab-label>\n <ng-container *ngTemplateOutlet=\"tab.headerTemplate; context: tab.templateContext\"></ng-container>\n </ng-template>\n }\n @if (tab.template) {\n <ng-container *ngTemplateOutlet=\"tab.template; context: tab.templateContext\"></ng-container>\n }\n </mat-tab>\n }\n }\n</mat-tab-group>\n", styles: [":host::ng-deep .mat-mdc-tab.mdc-tab{border-bottom:2px solid var(--color-medium-30);min-width:var(--ads-tab-width, auto)!important;max-width:var(--ads-tab-width, none)!important;width:var(--ads-tab-width, auto)!important;flex-basis:var(--ads-tab-width, auto)!important;flex-shrink:0}:host::ng-deep .mat-mdc-tab.mdc-tab .mdc-tab__text-label{line-height:normal;font-weight:400;color:var(--color-medium)!important}:host::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active{border-bottom:2px solid var(--ads-tab-active-color, var(--color-primary-hover))}:host::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active .mdc-tab__text-label{color:var(--ads-tab-active-color, var(--color-primary-hover))!important;font-weight:600}:host::ng-deep .mat-mdc-tab-disabled{border-bottom:2px solid var(--color-medium-opacity-50)!important}:host::ng-deep .mat-mdc-tab-disabled .mdc-tab__text-label{color:var(--color-medium-opacity-50)!important}:host::ng-deep .mdc-tab-indicator{display:none}:host::ng-deep .hide-inactive-border .mat-mdc-tab.mdc-tab:not(.mdc-tab--active):not(.mat-mdc-tab-disabled){border-bottom-color:transparent}:host::ng-deep .mat-mdc-tab-header-pagination{box-sizing:border-box!important;align-self:center!important;flex:0 0 auto!important;width:32px!important;height:32px!important;min-width:32px!important;padding:0!important;margin:0 4px;border-radius:50%;background-color:transparent!important;border:none;box-shadow:none;opacity:1}:host::ng-deep .mat-mdc-tab-header-pagination .mat-mdc-tab-header-pagination-chevron{border-color:var(--color-medium)!important;border-width:2px 2px 0 0;width:14px!important;height:14px!important}:host::ng-deep .mat-mdc-tab-header-pagination.mat-mdc-tab-header-pagination-after .mat-mdc-tab-header-pagination-chevron{transform:translate(-3px) rotate(45deg)}:host::ng-deep .mat-mdc-tab-header-pagination.mat-mdc-tab-header-pagination-before .mat-mdc-tab-header-pagination-chevron{transform:translate(3px) rotate(-135deg)}:host::ng-deep .mat-mdc-tab-header-pagination:hover{background-color:var(--color-light-80)!important}:host::ng-deep .mat-mdc-tab-header-pagination:active{background-color:var(--color-light)!important}:host::ng-deep .mat-mdc-tab-header-pagination.mat-mdc-tab-header-pagination-before:after,:host::ng-deep .mat-mdc-tab-header-pagination.mat-mdc-tab-header-pagination-after:before{content:\"\";position:absolute;top:50%;transform:translateY(-50%);height:var(--mat-tab-container-height, 48px);width:56px;pointer-events:none}:host::ng-deep .mat-mdc-tab-header-pagination.mat-mdc-tab-header-pagination-before:after{left:100%;background:linear-gradient(to right,var(--color-white),transparent)}:host::ng-deep .mat-mdc-tab-header-pagination.mat-mdc-tab-header-pagination-after:before{right:100%;background:linear-gradient(to left,var(--color-white),transparent)}:host::ng-deep .mat-mdc-tab-header-pagination.mat-mdc-tab-header-pagination-disabled{display:none!important}\n"], dependencies: [{ kind: "component", type: MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "directive", type: MatTabContent, selector: "[matTabContent]" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
10993
10996
|
}
|
|
10994
10997
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: AdsTabsComponent, decorators: [{
|
|
10995
10998
|
type: Component,
|
|
10996
|
-
args: [{ selector: 'ads-tabs', imports: [MatTabGroup, MatTab, NgTemplateOutlet, MatTabLabel, MatTabContent], changeDetection: ChangeDetectionStrategy.Eager, template: "<mat-tab-group\n [selectedIndex]=\"selectedIndex\"\n (selectedIndexChange)=\"selectedIndexChange.emit($event)\"\n [style.--ads-tab-width]=\"tabWidth || null\"\n [style.--ads-tab-active-color]=\"_activeColorVar\"\n class=\"custom-tabs\"\n [class.hide-inactive-border]=\"hideInactiveBorder\"\n #tabGroup\n [disableRipple]=\"true\"\n [mat-stretch-tabs]=\"stretchTabs\"\n [animationDuration]=\"animationDuration ?? ''\"\n>\n @for(tab of tabs; track $index) {\n @if (tab.lazy) {\n <!-- matTabContent must be a direct child of mat-tab: MatTab queries it with a\n static @ContentChild, which cannot see templates wrapped in @if. -->\n <mat-tab [disabled]=\"tab.disabled\" [label]=\"tab.text || ''\" [labelClass]=\"tab.labelClass ?? ''\">\n @if (tab.headerTemplate) {\n <ng-template mat-tab-label>\n <ng-container *ngTemplateOutlet=\"tab.headerTemplate; context: tab.templateContext\"></ng-container>\n </ng-template>\n }\n <ng-template matTabContent>\n @if (tab.template) {\n <ng-container *ngTemplateOutlet=\"tab.template; context: tab.templateContext\"></ng-container>\n }\n </ng-template>\n </mat-tab>\n } @else {\n <mat-tab [disabled]=\"tab.disabled\" [label]=\"tab.text || ''\" [labelClass]=\"tab.labelClass ?? ''\">\n @if (tab.headerTemplate) {\n <ng-template mat-tab-label>\n <ng-container *ngTemplateOutlet=\"tab.headerTemplate; context: tab.templateContext\"></ng-container>\n </ng-template>\n }\n @if (tab.template) {\n <ng-container *ngTemplateOutlet=\"tab.template; context: tab.templateContext\"></ng-container>\n }\n </mat-tab>\n }\n }\n</mat-tab-group>\n", styles: [":host::ng-deep .mat-mdc-tab.mdc-tab{border-bottom:2px solid var(--color-medium-30);min-width:var(--ads-tab-width, auto)!important;max-width:var(--ads-tab-width, none)!important;width:var(--ads-tab-width, auto)!important;flex-basis:var(--ads-tab-width, auto)!important;flex-shrink:0}:host::ng-deep .mat-mdc-tab.mdc-tab .mdc-tab__text-label{line-height:normal;font-weight:400;color:var(--color-medium)!important}:host::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active{border-bottom:2px solid var(--ads-tab-active-color, var(--color-primary-hover))}:host::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active .mdc-tab__text-label{color:var(--ads-tab-active-color, var(--color-primary-hover))!important;font-weight:600}:host::ng-deep .mat-mdc-tab-disabled{border-bottom:2px solid var(--color-medium-opacity-50)!important}:host::ng-deep .mat-mdc-tab-disabled .mdc-tab__text-label{color:var(--color-medium-opacity-50)!important}:host::ng-deep .mdc-tab-indicator{display:none}:host::ng-deep .hide-inactive-border .mat-mdc-tab.mdc-tab:not(.mdc-tab--active):not(.mat-mdc-tab-disabled){border-bottom-color:transparent}:host::ng-deep .mat-mdc-tab-header-pagination{box-sizing:border-box!important;align-self:center!important;flex:0 0 auto!important;width:32px!important;height:32px!important;min-width:32px!important;padding:0!important;margin:0 4px;border-radius:50%;background-color:
|
|
10999
|
+
args: [{ selector: 'ads-tabs', imports: [MatTabGroup, MatTab, NgTemplateOutlet, MatTabLabel, MatTabContent], changeDetection: ChangeDetectionStrategy.Eager, template: "<mat-tab-group\n [selectedIndex]=\"selectedIndex\"\n (selectedIndexChange)=\"selectedIndexChange.emit($event)\"\n [style.--ads-tab-width]=\"tabWidth || null\"\n [style.--ads-tab-active-color]=\"_activeColorVar\"\n class=\"custom-tabs\"\n [class.hide-inactive-border]=\"hideInactiveBorder\"\n #tabGroup\n [disableRipple]=\"true\"\n [mat-stretch-tabs]=\"stretchTabs\"\n [animationDuration]=\"animationDuration ?? ''\"\n>\n @for(tab of tabs; track $index) {\n @if (tab.lazy) {\n <!-- matTabContent must be a direct child of mat-tab: MatTab queries it with a\n static @ContentChild, which cannot see templates wrapped in @if. -->\n <mat-tab [disabled]=\"tab.disabled\" [label]=\"tab.text || ''\" [labelClass]=\"tab.labelClass ?? ''\">\n @if (tab.headerTemplate) {\n <ng-template mat-tab-label>\n <ng-container *ngTemplateOutlet=\"tab.headerTemplate; context: tab.templateContext\"></ng-container>\n </ng-template>\n }\n <ng-template matTabContent>\n @if (tab.template) {\n <ng-container *ngTemplateOutlet=\"tab.template; context: tab.templateContext\"></ng-container>\n }\n </ng-template>\n </mat-tab>\n } @else {\n <mat-tab [disabled]=\"tab.disabled\" [label]=\"tab.text || ''\" [labelClass]=\"tab.labelClass ?? ''\">\n @if (tab.headerTemplate) {\n <ng-template mat-tab-label>\n <ng-container *ngTemplateOutlet=\"tab.headerTemplate; context: tab.templateContext\"></ng-container>\n </ng-template>\n }\n @if (tab.template) {\n <ng-container *ngTemplateOutlet=\"tab.template; context: tab.templateContext\"></ng-container>\n }\n </mat-tab>\n }\n }\n</mat-tab-group>\n", styles: [":host::ng-deep .mat-mdc-tab.mdc-tab{border-bottom:2px solid var(--color-medium-30);min-width:var(--ads-tab-width, auto)!important;max-width:var(--ads-tab-width, none)!important;width:var(--ads-tab-width, auto)!important;flex-basis:var(--ads-tab-width, auto)!important;flex-shrink:0}:host::ng-deep .mat-mdc-tab.mdc-tab .mdc-tab__text-label{line-height:normal;font-weight:400;color:var(--color-medium)!important}:host::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active{border-bottom:2px solid var(--ads-tab-active-color, var(--color-primary-hover))}:host::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active .mdc-tab__text-label{color:var(--ads-tab-active-color, var(--color-primary-hover))!important;font-weight:600}:host::ng-deep .mat-mdc-tab-disabled{border-bottom:2px solid var(--color-medium-opacity-50)!important}:host::ng-deep .mat-mdc-tab-disabled .mdc-tab__text-label{color:var(--color-medium-opacity-50)!important}:host::ng-deep .mdc-tab-indicator{display:none}:host::ng-deep .hide-inactive-border .mat-mdc-tab.mdc-tab:not(.mdc-tab--active):not(.mat-mdc-tab-disabled){border-bottom-color:transparent}:host::ng-deep .mat-mdc-tab-header-pagination{box-sizing:border-box!important;align-self:center!important;flex:0 0 auto!important;width:32px!important;height:32px!important;min-width:32px!important;padding:0!important;margin:0 4px;border-radius:50%;background-color:transparent!important;border:none;box-shadow:none;opacity:1}:host::ng-deep .mat-mdc-tab-header-pagination .mat-mdc-tab-header-pagination-chevron{border-color:var(--color-medium)!important;border-width:2px 2px 0 0;width:14px!important;height:14px!important}:host::ng-deep .mat-mdc-tab-header-pagination.mat-mdc-tab-header-pagination-after .mat-mdc-tab-header-pagination-chevron{transform:translate(-3px) rotate(45deg)}:host::ng-deep .mat-mdc-tab-header-pagination.mat-mdc-tab-header-pagination-before .mat-mdc-tab-header-pagination-chevron{transform:translate(3px) rotate(-135deg)}:host::ng-deep .mat-mdc-tab-header-pagination:hover{background-color:var(--color-light-80)!important}:host::ng-deep .mat-mdc-tab-header-pagination:active{background-color:var(--color-light)!important}:host::ng-deep .mat-mdc-tab-header-pagination.mat-mdc-tab-header-pagination-before:after,:host::ng-deep .mat-mdc-tab-header-pagination.mat-mdc-tab-header-pagination-after:before{content:\"\";position:absolute;top:50%;transform:translateY(-50%);height:var(--mat-tab-container-height, 48px);width:56px;pointer-events:none}:host::ng-deep .mat-mdc-tab-header-pagination.mat-mdc-tab-header-pagination-before:after{left:100%;background:linear-gradient(to right,var(--color-white),transparent)}:host::ng-deep .mat-mdc-tab-header-pagination.mat-mdc-tab-header-pagination-after:before{right:100%;background:linear-gradient(to left,var(--color-white),transparent)}:host::ng-deep .mat-mdc-tab-header-pagination.mat-mdc-tab-header-pagination-disabled{display:none!important}\n"] }]
|
|
10997
11000
|
}], propDecorators: { tabGroup: [{ type: i0.ViewChild, args: ['tabGroup', { isSignal: true }] }], tabs: [{
|
|
10998
11001
|
type: Input
|
|
10999
11002
|
}], selectedIndex: [{
|