cmat 0.0.43 → 0.0.44
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.
- package/animations/dropdown.css +16 -0
- package/animations/expand-collapse.css +27 -0
- package/animations/fade.css +105 -0
- package/animations/shake.css +9 -0
- package/animations/slide.css +71 -0
- package/animations/zoom.css +21 -0
- package/components/drawer/index.d.ts +2 -2
- package/components/image-viewer/index.d.ts +9 -17
- package/components/material-datetimepicker/index.d.ts +19 -13
- package/components/navigation/index.d.ts +0 -2
- package/components/password-strength/index.d.ts +7 -2
- package/components/popover/index.d.ts +0 -1
- package/fesm2022/cmat-components-adapter.mjs +9 -9
- package/fesm2022/cmat-components-breadcrumb.mjs +9 -9
- package/fesm2022/cmat-components-card.mjs +4 -5
- package/fesm2022/cmat-components-card.mjs.map +1 -1
- package/fesm2022/cmat-components-carousel.mjs +12 -12
- package/fesm2022/cmat-components-cascade.mjs +10 -11
- package/fesm2022/cmat-components-cascade.mjs.map +1 -1
- package/fesm2022/cmat-components-chip-input.mjs +3 -3
- package/fesm2022/cmat-components-custom-formly.mjs +88 -88
- package/fesm2022/cmat-components-custom-formly.mjs.map +1 -1
- package/fesm2022/cmat-components-date-range.mjs +3 -3
- package/fesm2022/cmat-components-drawer.mjs +28 -39
- package/fesm2022/cmat-components-drawer.mjs.map +1 -1
- package/fesm2022/cmat-components-fullscreen.mjs +3 -3
- package/fesm2022/cmat-components-highlight.mjs +6 -6
- package/fesm2022/cmat-components-image-viewer.mjs +49 -73
- package/fesm2022/cmat-components-image-viewer.mjs.map +1 -1
- package/fesm2022/cmat-components-json-editor.mjs +3 -3
- package/fesm2022/cmat-components-knob-input.mjs +3 -3
- package/fesm2022/cmat-components-masonry.mjs +4 -5
- package/fesm2022/cmat-components-masonry.mjs.map +1 -1
- package/fesm2022/cmat-components-material-color-picker.mjs +4 -5
- package/fesm2022/cmat-components-material-color-picker.mjs.map +1 -1
- package/fesm2022/cmat-components-material-datetimepicker.mjs +130 -111
- package/fesm2022/cmat-components-material-datetimepicker.mjs.map +1 -1
- package/fesm2022/cmat-components-navigation.mjs +75 -100
- package/fesm2022/cmat-components-navigation.mjs.map +1 -1
- package/fesm2022/cmat-components-opt-input.mjs +3 -3
- package/fesm2022/cmat-components-org-chart.mjs +9 -9
- package/fesm2022/cmat-components-pagination.mjs +12 -12
- package/fesm2022/cmat-components-password-strength.mjs +69 -163
- package/fesm2022/cmat-components-password-strength.mjs.map +1 -1
- package/fesm2022/cmat-components-popover.mjs +11 -11
- package/fesm2022/cmat-components-popover.mjs.map +1 -1
- package/fesm2022/cmat-components-progress-bar.mjs +3 -3
- package/fesm2022/cmat-components-qrcode.mjs +3 -3
- package/fesm2022/cmat-components-rating.mjs +3 -3
- package/fesm2022/cmat-components-select-search.mjs +9 -9
- package/fesm2022/cmat-components-select-table.mjs +3 -3
- package/fesm2022/cmat-components-select-tree.mjs +3 -3
- package/fesm2022/cmat-components-speed-dial.mjs +9 -9
- package/fesm2022/cmat-components-timeline.mjs +12 -12
- package/fesm2022/cmat-components-toast.mjs +9 -9
- package/fesm2022/cmat-components-transfer-picker.mjs +18 -18
- package/fesm2022/cmat-components-treetable.mjs +6 -6
- package/fesm2022/cmat-components-upload.mjs +9 -9
- package/fesm2022/cmat-directives-animate-on-scroll.mjs +6 -6
- package/fesm2022/cmat-directives-arrow-cursor.mjs +3 -3
- package/fesm2022/cmat-directives-autofocus.mjs +3 -3
- package/fesm2022/cmat-directives-data-exporter.mjs +21 -21
- package/fesm2022/cmat-directives-debounce.mjs +9 -9
- package/fesm2022/cmat-directives-digit-only.mjs +6 -6
- package/fesm2022/cmat-directives-equal-validator.mjs +3 -3
- package/fesm2022/cmat-lib-mock-api.mjs +6 -6
- package/fesm2022/cmat-pipes-bytes.mjs +3 -3
- package/fesm2022/cmat-pipes-date-format.mjs +3 -3
- package/fesm2022/cmat-pipes-find-by-key.mjs +3 -3
- package/fesm2022/cmat-pipes-group-by.mjs +3 -3
- package/fesm2022/cmat-pipes-keys.mjs +3 -3
- package/fesm2022/cmat-pipes-secure.mjs +3 -3
- package/fesm2022/cmat-pipes-uppercase.mjs +3 -3
- package/fesm2022/cmat-services-alert.mjs +3 -3
- package/fesm2022/cmat-services-config.mjs +6 -6
- package/fesm2022/cmat-services-confirmation.mjs +6 -6
- package/fesm2022/cmat-services-data.mjs +3 -3
- package/fesm2022/cmat-services-export-as.mjs +3 -3
- package/fesm2022/cmat-services-loading.mjs +6 -6
- package/fesm2022/cmat-services-local-storage.mjs +3 -3
- package/fesm2022/cmat-services-media-watcher.mjs +3 -3
- package/fesm2022/cmat-services-platform.mjs +3 -3
- package/fesm2022/cmat-services-splash-screen.mjs +3 -3
- package/fesm2022/cmat-services-title.mjs +3 -3
- package/fesm2022/cmat-services-translation.mjs +3 -3
- package/fesm2022/cmat-services-utils.mjs +3 -3
- package/package.json +54 -59
- package/styles/overrides/angular-material.scss +2 -2
- package/animations/index.d.ts +0 -5
- package/fesm2022/cmat-animations.mjs +0 -466
- package/fesm2022/cmat-animations.mjs.map +0 -1
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { Injectable, EventEmitter, inject, ChangeDetectorRef, Output, Input, ChangeDetectionStrategy, Component, ViewChild, forwardRef, ViewEncapsulation, HostBinding, ElementRef, Renderer2, HostListener } from '@angular/core';
|
|
3
3
|
import { Subject, ReplaySubject } from 'rxjs';
|
|
4
|
-
import { cmatAnimations } from 'cmat/animations';
|
|
5
4
|
import { CmatUtilsService } from 'cmat/services/utils';
|
|
6
5
|
import { NgClass, NgTemplateOutlet } from '@angular/common';
|
|
7
6
|
import * as i2 from '@angular/material/icon';
|
|
@@ -12,7 +11,6 @@ import * as i1 from '@angular/material/tooltip';
|
|
|
12
11
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
13
12
|
import { Router, RouterLink, RouterLinkActive, NavigationEnd } from '@angular/router';
|
|
14
13
|
import { takeUntil, filter } from 'rxjs/operators';
|
|
15
|
-
import { AnimationBuilder, animate, style } from '@angular/animations';
|
|
16
14
|
import { coerceBooleanProperty } from '@angular/cdk/coercion';
|
|
17
15
|
import { ScrollStrategyOptions } from '@angular/cdk/overlay';
|
|
18
16
|
|
|
@@ -144,10 +142,10 @@ class CmatNavigationService {
|
|
|
144
142
|
}
|
|
145
143
|
return null;
|
|
146
144
|
}
|
|
147
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
148
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.
|
|
145
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CmatNavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
146
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CmatNavigationService, providedIn: 'root' }); }
|
|
149
147
|
}
|
|
150
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
148
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CmatNavigationService, decorators: [{
|
|
151
149
|
type: Injectable,
|
|
152
150
|
args: [{
|
|
153
151
|
providedIn: 'root'
|
|
@@ -214,10 +212,10 @@ class CmatHorizontalNavigationBasicItemComponent {
|
|
|
214
212
|
void this._router.navigate([link]);
|
|
215
213
|
}
|
|
216
214
|
}
|
|
217
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
218
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
215
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CmatHorizontalNavigationBasicItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
216
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: CmatHorizontalNavigationBasicItemComponent, isStandalone: true, selector: "cmat-horizontal-navigation-basic-item", inputs: { item: "item", name: "name", hasRouteReuseStrategy: "hasRouteReuseStrategy" }, outputs: { routeReuseStrategyEmitUrl: "routeReuseStrategyEmitUrl" }, ngImport: i0, template: "<!-- Item wrapper -->\r\n<div class=\"cmat-horizontal-navigation-item-wrapper\"\r\n [class.cmat-horizontal-navigation-item-has-subtitle]=\"!!item.subTitle\" [ngClass]=\"item.classes?.wrapper\">\r\n\r\n <!-- Item with an internal link -->\r\n @if (item.link && !item.externalLink && !item.function && !item.disabled) {\r\n <div class=\"cmat-horizontal-navigation-item\" role=\"presentation\"\r\n [ngClass]=\"{'cmat-horizontal-navigation-item-active-forced': item.active,'cmat-horizontal-navigation-item-active':isRouteActive(item.link)}\"\r\n [matTooltip]=\"item.tooltip || ''\" (click)=\"goToRouterLink(item.link)\">\r\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n </div>\r\n }\r\n\r\n <!-- Item with an external link -->\r\n @if (item.link && item.externalLink && !item.function && !item.disabled) {\r\n <a class=\"cmat-horizontal-navigation-item\" [href]=\"item.link\" [target]=\"item.target || '_blank'\"\r\n [matTooltip]=\"item.tooltip || ''\">\r\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n </a>\r\n }\r\n\r\n <!-- Item with a function -->\r\n @if (!item.link && item.function && !item.disabled) {\r\n <div class=\"cmat-horizontal-navigation-item\" role=\"presentation\"\r\n [ngClass]=\"{'cmat-horizontal-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\"\r\n (click)=\"item.function(item)\">\r\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n </div>\r\n }\r\n\r\n <!-- Item with an internal link and function -->\r\n @if (item.link && !item.externalLink && item.function && !item.disabled) {\r\n <div class=\"cmat-horizontal-navigation-item\" role=\"presentation\"\r\n [ngClass]=\"{'cmat-horizontal-navigation-item-active-forced': item.active,'cmat-horizontal-navigation-item-active':isRouteActive(item.link)}\"\r\n [matTooltip]=\"item.tooltip || ''\" (click)=\"item.function(item);goToRouterLink(item.link)\">\r\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n </div>\r\n }\r\n\r\n <!-- Item with an external link and function -->\r\n @if (item.link && item.externalLink && item.function && !item.disabled) {\r\n <a class=\"cmat-horizontal-navigation-item\" mat-menu-item [href]=\"item.link\" [target]=\"item.target || '_blank'\"\r\n [matTooltip]=\"item.tooltip || ''\" (click)=\"item.function(item)\">\r\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n </a>\r\n }\r\n\r\n <!-- Item with a no link and no function -->\r\n @if (!item.link && !item.function && !item.disabled) {\r\n <div class=\"cmat-horizontal-navigation-item\"\r\n [ngClass]=\"{'cmat-horizontal-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\">\r\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n </div>\r\n }\r\n\r\n <!-- Item is disabled -->\r\n @if (item.disabled) {\r\n <div class=\"cmat-horizontal-navigation-item cmat-horizontal-navigation-item-disabled\">\r\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n </div>\r\n }\r\n\r\n</div>\r\n\r\n<!-- Item template -->\r\n<ng-template #itemTemplate>\r\n\r\n <!-- Icon -->\r\n @if (item.icon) {\r\n <mat-icon class=\"cmat-horizontal-navigation-item-icon\" [ngClass]=\"item.classes?.icon\" [svgIcon]=\"item.icon\">\r\n </mat-icon>\r\n }\r\n\r\n <!-- Title & Subtitle -->\r\n <div class=\"cmat-horizontal-navigation-item-title-wrapper\">\r\n <div class=\"cmat-horizontal-navigation-item-title\">\r\n <span [ngClass]=\"item.classes?.title\">\r\n {{item.title}}\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <!-- Badge -->\r\n @if (item.badge) {\r\n <div class=\"cmat-horizontal-navigation-item-badge\">\r\n <div class=\"cmat-horizontal-navigation-item-badge-content\" [ngClass]=\"item.badge.classes\">\r\n {{item.badge.title}}\r\n </div>\r\n </div>\r\n }\r\n\r\n</ng-template>", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
219
217
|
}
|
|
220
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
218
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CmatHorizontalNavigationBasicItemComponent, decorators: [{
|
|
221
219
|
type: Component,
|
|
222
220
|
args: [{ selector: 'cmat-horizontal-navigation-basic-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, RouterLink, RouterLinkActive, MatTooltipModule, NgTemplateOutlet, MatMenuModule, MatIconModule], template: "<!-- Item wrapper -->\r\n<div class=\"cmat-horizontal-navigation-item-wrapper\"\r\n [class.cmat-horizontal-navigation-item-has-subtitle]=\"!!item.subTitle\" [ngClass]=\"item.classes?.wrapper\">\r\n\r\n <!-- Item with an internal link -->\r\n @if (item.link && !item.externalLink && !item.function && !item.disabled) {\r\n <div class=\"cmat-horizontal-navigation-item\" role=\"presentation\"\r\n [ngClass]=\"{'cmat-horizontal-navigation-item-active-forced': item.active,'cmat-horizontal-navigation-item-active':isRouteActive(item.link)}\"\r\n [matTooltip]=\"item.tooltip || ''\" (click)=\"goToRouterLink(item.link)\">\r\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n </div>\r\n }\r\n\r\n <!-- Item with an external link -->\r\n @if (item.link && item.externalLink && !item.function && !item.disabled) {\r\n <a class=\"cmat-horizontal-navigation-item\" [href]=\"item.link\" [target]=\"item.target || '_blank'\"\r\n [matTooltip]=\"item.tooltip || ''\">\r\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n </a>\r\n }\r\n\r\n <!-- Item with a function -->\r\n @if (!item.link && item.function && !item.disabled) {\r\n <div class=\"cmat-horizontal-navigation-item\" role=\"presentation\"\r\n [ngClass]=\"{'cmat-horizontal-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\"\r\n (click)=\"item.function(item)\">\r\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n </div>\r\n }\r\n\r\n <!-- Item with an internal link and function -->\r\n @if (item.link && !item.externalLink && item.function && !item.disabled) {\r\n <div class=\"cmat-horizontal-navigation-item\" role=\"presentation\"\r\n [ngClass]=\"{'cmat-horizontal-navigation-item-active-forced': item.active,'cmat-horizontal-navigation-item-active':isRouteActive(item.link)}\"\r\n [matTooltip]=\"item.tooltip || ''\" (click)=\"item.function(item);goToRouterLink(item.link)\">\r\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n </div>\r\n }\r\n\r\n <!-- Item with an external link and function -->\r\n @if (item.link && item.externalLink && item.function && !item.disabled) {\r\n <a class=\"cmat-horizontal-navigation-item\" mat-menu-item [href]=\"item.link\" [target]=\"item.target || '_blank'\"\r\n [matTooltip]=\"item.tooltip || ''\" (click)=\"item.function(item)\">\r\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n </a>\r\n }\r\n\r\n <!-- Item with a no link and no function -->\r\n @if (!item.link && !item.function && !item.disabled) {\r\n <div class=\"cmat-horizontal-navigation-item\"\r\n [ngClass]=\"{'cmat-horizontal-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\">\r\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n </div>\r\n }\r\n\r\n <!-- Item is disabled -->\r\n @if (item.disabled) {\r\n <div class=\"cmat-horizontal-navigation-item cmat-horizontal-navigation-item-disabled\">\r\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n </div>\r\n }\r\n\r\n</div>\r\n\r\n<!-- Item template -->\r\n<ng-template #itemTemplate>\r\n\r\n <!-- Icon -->\r\n @if (item.icon) {\r\n <mat-icon class=\"cmat-horizontal-navigation-item-icon\" [ngClass]=\"item.classes?.icon\" [svgIcon]=\"item.icon\">\r\n </mat-icon>\r\n }\r\n\r\n <!-- Title & Subtitle -->\r\n <div class=\"cmat-horizontal-navigation-item-title-wrapper\">\r\n <div class=\"cmat-horizontal-navigation-item-title\">\r\n <span [ngClass]=\"item.classes?.title\">\r\n {{item.title}}\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <!-- Badge -->\r\n @if (item.badge) {\r\n <div class=\"cmat-horizontal-navigation-item-badge\">\r\n <div class=\"cmat-horizontal-navigation-item-badge-content\" [ngClass]=\"item.badge.classes\">\r\n {{item.badge.title}}\r\n </div>\r\n </div>\r\n }\r\n\r\n</ng-template>" }]
|
|
223
221
|
}], ctorParameters: () => [], propDecorators: { item: [{
|
|
@@ -259,10 +257,10 @@ class CmatHorizontalNavigationDividerItemComponent {
|
|
|
259
257
|
this._unsubscribeAll.next(void 0);
|
|
260
258
|
this._unsubscribeAll.complete();
|
|
261
259
|
}
|
|
262
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
263
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.
|
|
260
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CmatHorizontalNavigationDividerItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
261
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: CmatHorizontalNavigationDividerItemComponent, isStandalone: true, selector: "cmat-horizontal-navigation-divider-item", inputs: { item: "item", name: "name" }, ngImport: i0, template: "<!-- Divider -->\r\n<div class=\"cmat-horizontal-navigation-item-wrapper divider\" [ngClass]=\"item.classes?.wrapper\"></div>", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
264
262
|
}
|
|
265
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
263
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CmatHorizontalNavigationDividerItemComponent, decorators: [{
|
|
266
264
|
type: Component,
|
|
267
265
|
args: [{ selector: 'cmat-horizontal-navigation-divider-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "<!-- Divider -->\r\n<div class=\"cmat-horizontal-navigation-item-wrapper divider\" [ngClass]=\"item.classes?.wrapper\"></div>" }]
|
|
268
266
|
}], propDecorators: { item: [{
|
|
@@ -325,10 +323,10 @@ class CmatHorizontalNavigationBranchItemComponent {
|
|
|
325
323
|
goToRouterLink(link) {
|
|
326
324
|
this.routeReuseStrategyEmitUrl.emit(link);
|
|
327
325
|
}
|
|
328
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
329
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
326
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CmatHorizontalNavigationBranchItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
327
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: CmatHorizontalNavigationBranchItemComponent, isStandalone: true, selector: "cmat-horizontal-navigation-branch-item", inputs: { child: "child", item: "item", name: "name", hasRouteReuseStrategy: "hasRouteReuseStrategy" }, outputs: { routeReuseStrategyEmitUrl: "routeReuseStrategyEmitUrl" }, viewQueries: [{ propertyName: "matMenu", first: true, predicate: ["matMenu"], descendants: true, static: true }], ngImport: i0, template: "@if (!child) {\r\n<div #trigger=\"matMenuTrigger\" [ngClass]=\"{'cmat-horizontal-navigation-menu-active': trigger.menuOpen,\r\n 'cmat-horizontal-navigation-menu-active-forced': item.active}\" [matMenuTriggerFor]=\"matMenu\"\r\n (menuOpened)=\"triggerChangeDetection()\" (onMenuClose)=\"triggerChangeDetection()\">\r\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item}\"></ng-container>\r\n</div>\r\n}\r\n\r\n<mat-menu #matMenu=\"matMenu\" class=\"cmat-horizontal-navigation-menu-panel\" [overlapTrigger]=\"false\">\r\n\r\n @for (item of item.children; track trackByFn($index, item)) {\r\n <!-- Skip the hidden items -->\r\n @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\r\n <!-- Basic -->\r\n @if (item.type === 'basic') {\r\n <div class=\"cmat-horizontal-navigation-menu-item\" mat-menu-item [disabled]=\"item.disabled\">\r\n <cmat-horizontal-navigation-basic-item [item]=\"item\" [name]=\"name\" [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\"\r\n (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\">\r\n </cmat-horizontal-navigation-basic-item>\r\n </div>\r\n }\r\n <!-- Branch: aside, collapsable, group -->\r\n @if (item.type === 'aside' || item.type === 'collapsable' || item.type === 'group') {\r\n <div class=\"cmat-horizontal-navigation-menu-item\" mat-menu-item [disabled]=\"item.disabled\"\r\n [matMenuTriggerFor]=\"branch.matMenu\">\r\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item}\"></ng-container>\r\n <cmat-horizontal-navigation-branch-item #branch [child]=\"true\" [item]=\"item\" [name]=\"name\"\r\n [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\" (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\">\r\n </cmat-horizontal-navigation-branch-item>\r\n </div>\r\n }\r\n <!-- Divider -->\r\n @if (item.type === 'divider') {\r\n <div class=\"cmat-horizontal-navigation-menu-item\" mat-menu-item>\r\n <cmat-horizontal-navigation-divider-item [item]=\"item\" [name]=\"name\">\r\n </cmat-horizontal-navigation-divider-item>\r\n </div>\r\n }\r\n }\r\n }\r\n\r\n</mat-menu>\r\n\r\n<!-- Item template -->\r\n<ng-template #itemTemplate let-item>\r\n\r\n <div class=\"cmat-horizontal-navigation-item-wrapper\"\r\n [class.cmat-horizontal-navigation-item-has-subtitle]=\"!!item.subTitle\" [ngClass]=\"item.classes?.wrapper\">\r\n\r\n <div class=\"cmat-horizontal-navigation-item\" [ngClass]=\"{'cmat-horizontal-navigation-item-disabled': item.disabled,\r\n 'cmat-horizontal-navigation-item-active-forced': item.active}\"\r\n [matTooltip]=\"item.tooltip || ''\">\r\n\r\n <!-- Icon -->\r\n @if (item.icon) {\r\n <mat-icon class=\"cmat-horizontal-navigation-item-icon\" [ngClass]=\"item.classes?.icon\"\r\n [svgIcon]=\"item.icon\"></mat-icon>\r\n }\r\n\r\n <!-- Title & Subtitle -->\r\n <div class=\"cmat-horizontal-navigation-item-title-wrapper\">\r\n <div class=\"cmat-horizontal-navigation-item-title\">\r\n <span [ngClass]=\"item.classes?.title\">\r\n {{item.title}}\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <!-- Badge -->\r\n @if (item.badge) {\r\n <div class=\"cmat-horizontal-navigation-item-badge\">\r\n <div class=\"cmat-horizontal-navigation-item-badge-content\" [ngClass]=\"item.badge.classes\">\r\n {{item.badge.title}}\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n</ng-template>", dependencies: [{ kind: "component", type: i0.forwardRef(() => CmatHorizontalNavigationBranchItemComponent), selector: "cmat-horizontal-navigation-branch-item", inputs: ["child", "item", "name", "hasRouteReuseStrategy"], outputs: ["routeReuseStrategyEmitUrl"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatMenuModule) }, { kind: "component", type: i0.forwardRef(() => i1$1.MatMenu), selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i0.forwardRef(() => i1$1.MatMenuItem), selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.MatMenuTrigger), selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i0.forwardRef(() => NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i0.forwardRef(() => CmatHorizontalNavigationBasicItemComponent), selector: "cmat-horizontal-navigation-basic-item", inputs: ["item", "name", "hasRouteReuseStrategy"], outputs: ["routeReuseStrategyEmitUrl"] }, { kind: "component", type: i0.forwardRef(() => CmatHorizontalNavigationDividerItemComponent), selector: "cmat-horizontal-navigation-divider-item", inputs: ["item", "name"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatTooltipModule) }, { kind: "directive", type: i0.forwardRef(() => i1.MatTooltip), selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatIconModule) }, { kind: "component", type: i0.forwardRef(() => i2.MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
330
328
|
}
|
|
331
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
329
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CmatHorizontalNavigationBranchItemComponent, decorators: [{
|
|
332
330
|
type: Component,
|
|
333
331
|
args: [{ selector: 'cmat-horizontal-navigation-branch-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, MatMenuModule, NgTemplateOutlet, CmatHorizontalNavigationBasicItemComponent,
|
|
334
332
|
forwardRef(() => CmatHorizontalNavigationBranchItemComponent), CmatHorizontalNavigationDividerItemComponent, MatTooltipModule, MatIconModule], template: "@if (!child) {\r\n<div #trigger=\"matMenuTrigger\" [ngClass]=\"{'cmat-horizontal-navigation-menu-active': trigger.menuOpen,\r\n 'cmat-horizontal-navigation-menu-active-forced': item.active}\" [matMenuTriggerFor]=\"matMenu\"\r\n (menuOpened)=\"triggerChangeDetection()\" (onMenuClose)=\"triggerChangeDetection()\">\r\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item}\"></ng-container>\r\n</div>\r\n}\r\n\r\n<mat-menu #matMenu=\"matMenu\" class=\"cmat-horizontal-navigation-menu-panel\" [overlapTrigger]=\"false\">\r\n\r\n @for (item of item.children; track trackByFn($index, item)) {\r\n <!-- Skip the hidden items -->\r\n @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\r\n <!-- Basic -->\r\n @if (item.type === 'basic') {\r\n <div class=\"cmat-horizontal-navigation-menu-item\" mat-menu-item [disabled]=\"item.disabled\">\r\n <cmat-horizontal-navigation-basic-item [item]=\"item\" [name]=\"name\" [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\"\r\n (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\">\r\n </cmat-horizontal-navigation-basic-item>\r\n </div>\r\n }\r\n <!-- Branch: aside, collapsable, group -->\r\n @if (item.type === 'aside' || item.type === 'collapsable' || item.type === 'group') {\r\n <div class=\"cmat-horizontal-navigation-menu-item\" mat-menu-item [disabled]=\"item.disabled\"\r\n [matMenuTriggerFor]=\"branch.matMenu\">\r\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item}\"></ng-container>\r\n <cmat-horizontal-navigation-branch-item #branch [child]=\"true\" [item]=\"item\" [name]=\"name\"\r\n [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\" (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\">\r\n </cmat-horizontal-navigation-branch-item>\r\n </div>\r\n }\r\n <!-- Divider -->\r\n @if (item.type === 'divider') {\r\n <div class=\"cmat-horizontal-navigation-menu-item\" mat-menu-item>\r\n <cmat-horizontal-navigation-divider-item [item]=\"item\" [name]=\"name\">\r\n </cmat-horizontal-navigation-divider-item>\r\n </div>\r\n }\r\n }\r\n }\r\n\r\n</mat-menu>\r\n\r\n<!-- Item template -->\r\n<ng-template #itemTemplate let-item>\r\n\r\n <div class=\"cmat-horizontal-navigation-item-wrapper\"\r\n [class.cmat-horizontal-navigation-item-has-subtitle]=\"!!item.subTitle\" [ngClass]=\"item.classes?.wrapper\">\r\n\r\n <div class=\"cmat-horizontal-navigation-item\" [ngClass]=\"{'cmat-horizontal-navigation-item-disabled': item.disabled,\r\n 'cmat-horizontal-navigation-item-active-forced': item.active}\"\r\n [matTooltip]=\"item.tooltip || ''\">\r\n\r\n <!-- Icon -->\r\n @if (item.icon) {\r\n <mat-icon class=\"cmat-horizontal-navigation-item-icon\" [ngClass]=\"item.classes?.icon\"\r\n [svgIcon]=\"item.icon\"></mat-icon>\r\n }\r\n\r\n <!-- Title & Subtitle -->\r\n <div class=\"cmat-horizontal-navigation-item-title-wrapper\">\r\n <div class=\"cmat-horizontal-navigation-item-title\">\r\n <span [ngClass]=\"item.classes?.title\">\r\n {{item.title}}\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <!-- Badge -->\r\n @if (item.badge) {\r\n <div class=\"cmat-horizontal-navigation-item-badge\">\r\n <div class=\"cmat-horizontal-navigation-item-badge-content\" [ngClass]=\"item.badge.classes\">\r\n {{item.badge.title}}\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n</ng-template>" }]
|
|
@@ -376,10 +374,10 @@ class CmatHorizontalNavigationSpacerItemComponent {
|
|
|
376
374
|
this._unsubscribeAll.next(void 0);
|
|
377
375
|
this._unsubscribeAll.complete();
|
|
378
376
|
}
|
|
379
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
380
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.
|
|
377
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CmatHorizontalNavigationSpacerItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
378
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: CmatHorizontalNavigationSpacerItemComponent, isStandalone: true, selector: "cmat-horizontal-navigation-spacer-item", inputs: { item: "item", name: "name" }, ngImport: i0, template: "<!-- Spacer -->\r\n<div class=\"cmat-horizontal-navigation-item-wrapper\" [ngClass]=\"item.classes?.wrapper\"></div>", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
381
379
|
}
|
|
382
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
380
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CmatHorizontalNavigationSpacerItemComponent, decorators: [{
|
|
383
381
|
type: Component,
|
|
384
382
|
args: [{ selector: 'cmat-horizontal-navigation-spacer-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "<!-- Spacer -->\r\n<div class=\"cmat-horizontal-navigation-item-wrapper\" [ngClass]=\"item.classes?.wrapper\"></div>" }]
|
|
385
383
|
}], propDecorators: { item: [{
|
|
@@ -431,12 +429,12 @@ class CmatHorizontalNavigationComponent {
|
|
|
431
429
|
goToRouterLink(link) {
|
|
432
430
|
this.routeReuseStrategyEmitUrl.emit(link);
|
|
433
431
|
}
|
|
434
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
435
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
432
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CmatHorizontalNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
433
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: CmatHorizontalNavigationComponent, isStandalone: true, selector: "cmat-horizontal-navigation", inputs: { name: "name", navigation: "navigation", hasRouteReuseStrategy: "hasRouteReuseStrategy" }, outputs: { routeReuseStrategyEmitUrl: "routeReuseStrategyEmitUrl" }, exportAs: ["cmatHorizontalNavigation"], usesOnChanges: true, ngImport: i0, template: "<div class=\"cmat-horizontal-navigation-wrapper\">\r\n\r\n @for (item of navigation; track trackByFn($index, item)) {\r\n <!-- Skip the hidden items -->\r\n @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\r\n <!-- Basic -->\r\n @if (item.type === 'basic') {\r\n <cmat-horizontal-navigation-basic-item class=\"cmat-horizontal-navigation-menu-item\" [item]=\"item\"\r\n [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\" [name]=\"name\"\r\n (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\"></cmat-horizontal-navigation-basic-item>\r\n }\r\n <!-- Branch: aside, collapsable, group -->\r\n @if (item.type === 'aside' || item.type === 'collapsable' || item.type === 'group') {\r\n <cmat-horizontal-navigation-branch-item class=\"cmat-horizontal-navigation-menu-item\" [item]=\"item\" [name]=\"name\"\r\n [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\"\r\n (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\"></cmat-horizontal-navigation-branch-item>\r\n }\r\n <!-- Spacer -->\r\n @if (item.type === 'spacer') {\r\n <cmat-horizontal-navigation-spacer-item class=\"cmat-horizontal-navigation-menu-item\" [item]=\"item\"\r\n [name]=\"name\"></cmat-horizontal-navigation-spacer-item>\r\n }\r\n }\r\n }\r\n\r\n</div>", styles: ["cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper{display:flex;align-items:center}cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-basic-item .cmat-horizontal-navigation-item-wrapper,cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-branch-item .cmat-horizontal-navigation-item-wrapper{border-radius:4px;overflow:hidden}cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-basic-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item,cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-branch-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item{padding:0 16px;cursor:pointer;-webkit-user-select:none;user-select:none}cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-basic-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item .cmat-horizontal-navigation-item-icon,cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-branch-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item .cmat-horizontal-navigation-item-icon{margin-right:12px}cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-spacer-item{margin:12px 0}.cmat-horizontal-navigation-menu-panel .cmat-horizontal-navigation-menu-item{height:auto;min-height:0;line-height:normal;white-space:normal}.cmat-horizontal-navigation-menu-panel .cmat-horizontal-navigation-menu-item cmat-horizontal-navigation-basic-item,.cmat-horizontal-navigation-menu-panel .cmat-horizontal-navigation-menu-item cmat-horizontal-navigation-branch-item,.cmat-horizontal-navigation-menu-panel .cmat-horizontal-navigation-menu-item cmat-horizontal-navigation-divider-item{display:flex;flex:1 1 auto}.cmat-horizontal-navigation-menu-panel .cmat-horizontal-navigation-menu-item cmat-horizontal-navigation-divider-item{margin:8px -16px}.cmat-horizontal-navigation-menu-panel .cmat-horizontal-navigation-menu-item cmat-horizontal-navigation-divider-item .cmat-horizontal-navigation-item-wrapper{height:1px;box-shadow:0 1px}.cmat-horizontal-navigation-menu-panel .cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-title-wrapper .cmat-horizontal-navigation-item-title{white-space:normal!important}.cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-wrapper{width:100%}.cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-wrapper.cmat-horizontal-navigation-item-has-subtitle .cmat-horizontal-navigation-item{min-height:56px}.cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item{position:relative;display:flex;align-items:center;justify-content:flex-start;min-height:48px;width:100%;font-size:13px;font-weight:500;text-decoration:none}.cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item .cmat-horizontal-navigation-item-title-wrapper .cmat-horizontal-navigation-item-title{white-space:nowrap}.cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item .cmat-horizontal-navigation-item-title-wrapper .cmat-horizontal-navigation-item-subtitle{font-size:12px}.cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item .cmat-horizontal-navigation-item-badge{margin-left:auto}.cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item .cmat-horizontal-navigation-item-badge .cmat-horizontal-navigation-item-badge-content{display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;white-space:nowrap;height:20px}\n"], dependencies: [{ kind: "component", type: CmatHorizontalNavigationBasicItemComponent, selector: "cmat-horizontal-navigation-basic-item", inputs: ["item", "name", "hasRouteReuseStrategy"], outputs: ["routeReuseStrategyEmitUrl"] }, { kind: "component", type: CmatHorizontalNavigationBranchItemComponent, selector: "cmat-horizontal-navigation-branch-item", inputs: ["child", "item", "name", "hasRouteReuseStrategy"], outputs: ["routeReuseStrategyEmitUrl"] }, { kind: "component", type: CmatHorizontalNavigationSpacerItemComponent, selector: "cmat-horizontal-navigation-spacer-item", inputs: ["item", "name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
436
434
|
}
|
|
437
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
435
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CmatHorizontalNavigationComponent, decorators: [{
|
|
438
436
|
type: Component,
|
|
439
|
-
args: [{ selector: 'cmat-horizontal-navigation',
|
|
437
|
+
args: [{ selector: 'cmat-horizontal-navigation', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatHorizontalNavigation', imports: [CmatHorizontalNavigationBasicItemComponent, CmatHorizontalNavigationBranchItemComponent, CmatHorizontalNavigationSpacerItemComponent], template: "<div class=\"cmat-horizontal-navigation-wrapper\">\r\n\r\n @for (item of navigation; track trackByFn($index, item)) {\r\n <!-- Skip the hidden items -->\r\n @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\r\n <!-- Basic -->\r\n @if (item.type === 'basic') {\r\n <cmat-horizontal-navigation-basic-item class=\"cmat-horizontal-navigation-menu-item\" [item]=\"item\"\r\n [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\" [name]=\"name\"\r\n (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\"></cmat-horizontal-navigation-basic-item>\r\n }\r\n <!-- Branch: aside, collapsable, group -->\r\n @if (item.type === 'aside' || item.type === 'collapsable' || item.type === 'group') {\r\n <cmat-horizontal-navigation-branch-item class=\"cmat-horizontal-navigation-menu-item\" [item]=\"item\" [name]=\"name\"\r\n [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\"\r\n (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\"></cmat-horizontal-navigation-branch-item>\r\n }\r\n <!-- Spacer -->\r\n @if (item.type === 'spacer') {\r\n <cmat-horizontal-navigation-spacer-item class=\"cmat-horizontal-navigation-menu-item\" [item]=\"item\"\r\n [name]=\"name\"></cmat-horizontal-navigation-spacer-item>\r\n }\r\n }\r\n }\r\n\r\n</div>", styles: ["cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper{display:flex;align-items:center}cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-basic-item .cmat-horizontal-navigation-item-wrapper,cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-branch-item .cmat-horizontal-navigation-item-wrapper{border-radius:4px;overflow:hidden}cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-basic-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item,cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-branch-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item{padding:0 16px;cursor:pointer;-webkit-user-select:none;user-select:none}cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-basic-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item .cmat-horizontal-navigation-item-icon,cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-branch-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item .cmat-horizontal-navigation-item-icon{margin-right:12px}cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-spacer-item{margin:12px 0}.cmat-horizontal-navigation-menu-panel .cmat-horizontal-navigation-menu-item{height:auto;min-height:0;line-height:normal;white-space:normal}.cmat-horizontal-navigation-menu-panel .cmat-horizontal-navigation-menu-item cmat-horizontal-navigation-basic-item,.cmat-horizontal-navigation-menu-panel .cmat-horizontal-navigation-menu-item cmat-horizontal-navigation-branch-item,.cmat-horizontal-navigation-menu-panel .cmat-horizontal-navigation-menu-item cmat-horizontal-navigation-divider-item{display:flex;flex:1 1 auto}.cmat-horizontal-navigation-menu-panel .cmat-horizontal-navigation-menu-item cmat-horizontal-navigation-divider-item{margin:8px -16px}.cmat-horizontal-navigation-menu-panel .cmat-horizontal-navigation-menu-item cmat-horizontal-navigation-divider-item .cmat-horizontal-navigation-item-wrapper{height:1px;box-shadow:0 1px}.cmat-horizontal-navigation-menu-panel .cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-title-wrapper .cmat-horizontal-navigation-item-title{white-space:normal!important}.cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-wrapper{width:100%}.cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-wrapper.cmat-horizontal-navigation-item-has-subtitle .cmat-horizontal-navigation-item{min-height:56px}.cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item{position:relative;display:flex;align-items:center;justify-content:flex-start;min-height:48px;width:100%;font-size:13px;font-weight:500;text-decoration:none}.cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item .cmat-horizontal-navigation-item-title-wrapper .cmat-horizontal-navigation-item-title{white-space:nowrap}.cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item .cmat-horizontal-navigation-item-title-wrapper .cmat-horizontal-navigation-item-subtitle{font-size:12px}.cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item .cmat-horizontal-navigation-item-badge{margin-left:auto}.cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item .cmat-horizontal-navigation-item-badge .cmat-horizontal-navigation-item-badge-content{display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;white-space:nowrap;height:20px}\n"] }]
|
|
440
438
|
}], propDecorators: { name: [{
|
|
441
439
|
type: Input
|
|
442
440
|
}], navigation: [{
|
|
@@ -496,10 +494,10 @@ class CmatVerticalNavigationBasicItemComponent {
|
|
|
496
494
|
void this._router.navigate([link]);
|
|
497
495
|
}
|
|
498
496
|
}
|
|
499
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
500
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
497
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CmatVerticalNavigationBasicItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
498
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: CmatVerticalNavigationBasicItemComponent, isStandalone: true, selector: "cmat-vertical-navigation-basic-item", inputs: { item: "item", name: "name", editState: "editState", hasRouteReuseStrategy: "hasRouteReuseStrategy" }, outputs: { routeReuseStrategyEmitUrl: "routeReuseStrategyEmitUrl", editSelectedItemChanged: "editSelectedItemChanged" }, ngImport: i0, template: "<!-- Item wrapper -->\r\n<div class=\"cmat-vertical-navigation-item-wrapper\" [class.cmat-vertical-navigation-item-has-subtitle]=\"!!item.subTitle\"\r\n [ngClass]=\"item.classes?.wrapper\">\r\n\r\n @if(editState){\r\n <div class=\"cmat-vertical-navigation-item\" role=\"presentation\"\r\n [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\"\r\n (click)=\"selectItem()\">\r\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n </div>\r\n }@else{\r\n <!-- Item with an internal link -->\r\n @if (item.link && !item.externalLink && !item.function && !item.disabled) {\r\n <a class=\"cmat-vertical-navigation-item\" role=\"presentation\"\r\n [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active,'cmat-vertical-navigation-item-active': isRouteActive(item.link)}\"\r\n [matTooltip]=\"item.tooltip || ''\" (click)=\"goToRouterLink(item.link)\">\r\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n </a>\r\n }\r\n\r\n <!-- Item with an external link -->\r\n @if (item.link && item.externalLink && !item.function && !item.disabled) {\r\n <a class=\"cmat-vertical-navigation-item\" [href]=\"item.link\" [target]=\"item.target || '_blank'\"\r\n [matTooltip]=\"item.tooltip || ''\">\r\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n </a>\r\n }\r\n\r\n <!-- Item with a function -->\r\n @if (!item.link && item.function && !item.disabled) {\r\n <div class=\"cmat-vertical-navigation-item\" role=\"presentation\"\r\n [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\"\r\n (click)=\"item.function(item)\">\r\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n </div>\r\n }\r\n\r\n <!-- Item with an internal link and function -->\r\n @if (item.link && !item.externalLink && item.function && !item.disabled) {\r\n <a class=\"cmat-vertical-navigation-item\" role=\"presentation\"\r\n [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active,'cmat-vertical-navigation-item-active': isRouteActive(item.link)}\"\r\n [matTooltip]=\"item.tooltip || ''\" (click)=\"item.function(item);goToRouterLink(item.link)\">\r\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n </a>\r\n }\r\n\r\n <!-- Item with an external link and function -->\r\n @if (item.link && item.externalLink && item.function && !item.disabled) {\r\n <a class=\"cmat-vertical-navigation-item\" [href]=\"item.link\" [target]=\"item.target || '_blank'\"\r\n [matTooltip]=\"item.tooltip || ''\" (click)=\"item.function(item)\">\r\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n </a>\r\n }\r\n\r\n <!-- Item with a no link and no function -->\r\n @if (!item.link && !item.function && !item.disabled) {\r\n <div class=\"cmat-vertical-navigation-item\" [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\"\r\n [matTooltip]=\"item.tooltip || ''\">\r\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n </div>\r\n }\r\n\r\n <!-- Item is disabled -->\r\n @if (item.disabled) {\r\n <div class=\"cmat-vertical-navigation-item cmat-vertical-navigation-item-disabled\" [matTooltip]=\"item.tooltip || ''\">\r\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n </div>\r\n }\r\n }\r\n</div>\r\n\r\n<!-- Item template -->\r\n<ng-template #itemTemplate>\r\n\r\n <!-- Icon -->\r\n @if (item.icon) {\r\n <mat-icon class=\"cmat-vertical-navigation-item-icon\" [ngClass]=\"item.classes?.icon\" [svgIcon]=\"item.icon\">\r\n </mat-icon>\r\n }\r\n\r\n <!-- Title & Subtitle -->\r\n <div class=\"cmat-vertical-navigation-item-title-wrapper\">\r\n <div class=\"cmat-vertical-navigation-item-title\">\r\n <span [ngClass]=\"item.classes?.title\">\r\n {{item.title}}\r\n </span>\r\n </div>\r\n @if (item.subTitle) {\r\n <div class=\"cmat-vertical-navigation-item-subtitle\">\r\n <span [ngClass]=\"item.classes?.subtitle\">\r\n {{item.subTitle}}\r\n </span>\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Badge -->\r\n @if (item.badge) {\r\n <div class=\"cmat-vertical-navigation-item-badge\">\r\n <div class=\"cmat-vertical-navigation-item-badge-content\" [ngClass]=\"item.badge.classes\">\r\n {{item.badge.title}}\r\n </div>\r\n </div>\r\n }\r\n</ng-template>", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
501
499
|
}
|
|
502
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
500
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CmatVerticalNavigationBasicItemComponent, decorators: [{
|
|
503
501
|
type: Component,
|
|
504
502
|
args: [{ selector: 'cmat-vertical-navigation-basic-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, RouterLink, RouterLinkActive, MatTooltipModule, NgTemplateOutlet, MatIconModule], template: "<!-- Item wrapper -->\r\n<div class=\"cmat-vertical-navigation-item-wrapper\" [class.cmat-vertical-navigation-item-has-subtitle]=\"!!item.subTitle\"\r\n [ngClass]=\"item.classes?.wrapper\">\r\n\r\n @if(editState){\r\n <div class=\"cmat-vertical-navigation-item\" role=\"presentation\"\r\n [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\"\r\n (click)=\"selectItem()\">\r\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n </div>\r\n }@else{\r\n <!-- Item with an internal link -->\r\n @if (item.link && !item.externalLink && !item.function && !item.disabled) {\r\n <a class=\"cmat-vertical-navigation-item\" role=\"presentation\"\r\n [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active,'cmat-vertical-navigation-item-active': isRouteActive(item.link)}\"\r\n [matTooltip]=\"item.tooltip || ''\" (click)=\"goToRouterLink(item.link)\">\r\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n </a>\r\n }\r\n\r\n <!-- Item with an external link -->\r\n @if (item.link && item.externalLink && !item.function && !item.disabled) {\r\n <a class=\"cmat-vertical-navigation-item\" [href]=\"item.link\" [target]=\"item.target || '_blank'\"\r\n [matTooltip]=\"item.tooltip || ''\">\r\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n </a>\r\n }\r\n\r\n <!-- Item with a function -->\r\n @if (!item.link && item.function && !item.disabled) {\r\n <div class=\"cmat-vertical-navigation-item\" role=\"presentation\"\r\n [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\"\r\n (click)=\"item.function(item)\">\r\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n </div>\r\n }\r\n\r\n <!-- Item with an internal link and function -->\r\n @if (item.link && !item.externalLink && item.function && !item.disabled) {\r\n <a class=\"cmat-vertical-navigation-item\" role=\"presentation\"\r\n [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active,'cmat-vertical-navigation-item-active': isRouteActive(item.link)}\"\r\n [matTooltip]=\"item.tooltip || ''\" (click)=\"item.function(item);goToRouterLink(item.link)\">\r\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n </a>\r\n }\r\n\r\n <!-- Item with an external link and function -->\r\n @if (item.link && item.externalLink && item.function && !item.disabled) {\r\n <a class=\"cmat-vertical-navigation-item\" [href]=\"item.link\" [target]=\"item.target || '_blank'\"\r\n [matTooltip]=\"item.tooltip || ''\" (click)=\"item.function(item)\">\r\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n </a>\r\n }\r\n\r\n <!-- Item with a no link and no function -->\r\n @if (!item.link && !item.function && !item.disabled) {\r\n <div class=\"cmat-vertical-navigation-item\" [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\"\r\n [matTooltip]=\"item.tooltip || ''\">\r\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n </div>\r\n }\r\n\r\n <!-- Item is disabled -->\r\n @if (item.disabled) {\r\n <div class=\"cmat-vertical-navigation-item cmat-vertical-navigation-item-disabled\" [matTooltip]=\"item.tooltip || ''\">\r\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n </div>\r\n }\r\n }\r\n</div>\r\n\r\n<!-- Item template -->\r\n<ng-template #itemTemplate>\r\n\r\n <!-- Icon -->\r\n @if (item.icon) {\r\n <mat-icon class=\"cmat-vertical-navigation-item-icon\" [ngClass]=\"item.classes?.icon\" [svgIcon]=\"item.icon\">\r\n </mat-icon>\r\n }\r\n\r\n <!-- Title & Subtitle -->\r\n <div class=\"cmat-vertical-navigation-item-title-wrapper\">\r\n <div class=\"cmat-vertical-navigation-item-title\">\r\n <span [ngClass]=\"item.classes?.title\">\r\n {{item.title}}\r\n </span>\r\n </div>\r\n @if (item.subTitle) {\r\n <div class=\"cmat-vertical-navigation-item-subtitle\">\r\n <span [ngClass]=\"item.classes?.subtitle\">\r\n {{item.subTitle}}\r\n </span>\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Badge -->\r\n @if (item.badge) {\r\n <div class=\"cmat-vertical-navigation-item-badge\">\r\n <div class=\"cmat-vertical-navigation-item-badge-content\" [ngClass]=\"item.badge.classes\">\r\n {{item.badge.title}}\r\n </div>\r\n </div>\r\n }\r\n</ng-template>" }]
|
|
505
503
|
}], ctorParameters: () => [], propDecorators: { item: [{
|
|
@@ -550,10 +548,10 @@ class CmatVerticalNavigationDividerItemComponent {
|
|
|
550
548
|
selectItem(item) {
|
|
551
549
|
this.editSelectedItemChanged.emit(item);
|
|
552
550
|
}
|
|
553
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
554
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.
|
|
551
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CmatVerticalNavigationDividerItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
552
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: CmatVerticalNavigationDividerItemComponent, isStandalone: true, selector: "cmat-vertical-navigation-divider-item", inputs: { item: "item", name: "name", editState: "editState" }, outputs: { editSelectedItemChanged: "editSelectedItemChanged" }, ngImport: i0, template: "<!-- Divider -->\r\n<div class=\"cmat-vertical-navigation-item-wrapper divider\" role=\"presentation\" [ngClass]=\"item.classes?.wrapper\" (click)=\"selectItem(item);\"></div>", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
555
553
|
}
|
|
556
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
554
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CmatVerticalNavigationDividerItemComponent, decorators: [{
|
|
557
555
|
type: Component,
|
|
558
556
|
args: [{ selector: 'cmat-vertical-navigation-divider-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "<!-- Divider -->\r\n<div class=\"cmat-vertical-navigation-item-wrapper divider\" role=\"presentation\" [ngClass]=\"item.classes?.wrapper\" (click)=\"selectItem(item);\"></div>" }]
|
|
559
557
|
}], propDecorators: { item: [{
|
|
@@ -600,10 +598,10 @@ class CmatVerticalNavigationSpacerItemComponent {
|
|
|
600
598
|
selectItem(item) {
|
|
601
599
|
this.editSelectedItemChanged.emit(item);
|
|
602
600
|
}
|
|
603
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
604
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.
|
|
601
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CmatVerticalNavigationSpacerItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
602
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: CmatVerticalNavigationSpacerItemComponent, isStandalone: true, selector: "cmat-vertical-navigation-spacer-item", inputs: { item: "item", name: "name", editState: "editState" }, outputs: { editSelectedItemChanged: "editSelectedItemChanged" }, ngImport: i0, template: "<!-- Spacer -->\r\n<div class=\"cmat-vertical-navigation-item-wrapper\" role=\"presentation\" [ngClass]=\"item.classes?.wrapper\" (click)=\"selectItem(item);\"></div>", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
605
603
|
}
|
|
606
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
604
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CmatVerticalNavigationSpacerItemComponent, decorators: [{
|
|
607
605
|
type: Component,
|
|
608
606
|
args: [{ selector: 'cmat-vertical-navigation-spacer-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "<!-- Spacer -->\r\n<div class=\"cmat-vertical-navigation-item-wrapper\" role=\"presentation\" [ngClass]=\"item.classes?.wrapper\" (click)=\"selectItem(item);\"></div>" }]
|
|
609
607
|
}], propDecorators: { item: [{
|
|
@@ -667,10 +665,10 @@ class CmatVerticalNavigationGroupItemComponent {
|
|
|
667
665
|
selectItem(item) {
|
|
668
666
|
this.editSelectedItemChanged.emit(item);
|
|
669
667
|
}
|
|
670
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
671
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
668
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CmatVerticalNavigationGroupItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
669
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: CmatVerticalNavigationGroupItemComponent, isStandalone: true, selector: "cmat-vertical-navigation-group-item", inputs: { autoCollapse: "autoCollapse", item: "item", name: "name", editState: "editState", hasRouteReuseStrategy: "hasRouteReuseStrategy" }, outputs: { routeReuseStrategyEmitUrl: "routeReuseStrategyEmitUrl", editSelectedItemChanged: "editSelectedItemChanged" }, ngImport: i0, template: "<!-- Item wrapper -->\r\n<div class=\"cmat-vertical-navigation-item-wrapper\" role=\"presentation\"\r\n [class.cmat-vertical-navigation-item-has-subtitle]=\"!!item.subTitle\" [ngClass]=\"item.classes?.wrapper\"\r\n (click)=\"selectItem(item);\">\r\n\r\n <div class=\"cmat-vertical-navigation-item\">\r\n\r\n <!-- Icon -->\r\n @if (item.icon) {\r\n <mat-icon class=\"cmat-vertical-navigation-item-icon\" [ngClass]=\"item.classes?.icon\" [svgIcon]=\"item.icon\">\r\n </mat-icon>\r\n }\r\n\r\n <!-- Title & Subtitle -->\r\n <div class=\"cmat-vertical-navigation-item-title-wrapper\">\r\n <div class=\"cmat-vertical-navigation-item-title\">\r\n <span [ngClass]=\"item.classes?.title\">\r\n {{item.title}}\r\n </span>\r\n </div>\r\n @if (item.subTitle) {\r\n <div class=\"cmat-vertical-navigation-item-subtitle\">\r\n <span [ngClass]=\"item.classes?.subtitle\">\r\n {{item.subTitle}}\r\n </span>\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Badge -->\r\n @if (item.badge) {\r\n <div class=\"cmat-vertical-navigation-item-badge\">\r\n <div class=\"cmat-vertical-navigation-item-badge-content\" [ngClass]=\"item.badge.classes\">\r\n {{item.badge.title}}\r\n </div>\r\n </div>\r\n }\r\n\r\n </div>\r\n\r\n</div>\r\n\r\n@for (item of item.children; track trackByFn($index, item)) {\r\n<!-- Skip the hidden items -->\r\n@if ((item.hidden && !item.hidden(item)) || !item.hidden) {\r\n<!-- Basic -->\r\n@if (item.type === 'basic') {\r\n<cmat-vertical-navigation-basic-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\"\r\n [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\" (editSelectedItemChanged)=\"selectItem($event)\"\r\n (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\">\r\n</cmat-vertical-navigation-basic-item>\r\n}\r\n<!-- Collapsable -->\r\n@if (item.type === 'collapsable') {\r\n<cmat-vertical-navigation-collapsable-item [item]=\"item\" [name]=\"name\" [autoCollapse]=\"autoCollapse\"\r\n [editState]=\"editState\" [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\" (editSelectedItemChanged)=\"selectItem($event)\"\r\n (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\">\r\n</cmat-vertical-navigation-collapsable-item>\r\n}\r\n<!-- Divider -->\r\n@if (item.type === 'divider') {\r\n<cmat-vertical-navigation-divider-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\"\r\n (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-divider-item>\r\n}\r\n<!-- Group -->\r\n@if (item.type === 'group') {\r\n<cmat-vertical-navigation-group-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\"\r\n [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\" (editSelectedItemChanged)=\"selectItem($event)\"\r\n (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\"></cmat-vertical-navigation-group-item>\r\n}\r\n<!-- Spacer -->\r\n@if (item.type === 'spacer') {\r\n<cmat-vertical-navigation-spacer-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\"\r\n (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-spacer-item>\r\n}\r\n}\r\n}", dependencies: [{ kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationGroupItemComponent), selector: "cmat-vertical-navigation-group-item", inputs: ["autoCollapse", "item", "name", "editState", "hasRouteReuseStrategy"], outputs: ["routeReuseStrategyEmitUrl", "editSelectedItemChanged"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatIconModule) }, { kind: "component", type: i0.forwardRef(() => i2.MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationBasicItemComponent), selector: "cmat-vertical-navigation-basic-item", inputs: ["item", "name", "editState", "hasRouteReuseStrategy"], outputs: ["routeReuseStrategyEmitUrl", "editSelectedItemChanged"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationDividerItemComponent), selector: "cmat-vertical-navigation-divider-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationCollapsableItemComponent), selector: "cmat-vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item", "name", "editState", "hasRouteReuseStrategy"], outputs: ["routeReuseStrategyEmitUrl", "editSelectedItemChanged"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationSpacerItemComponent), selector: "cmat-vertical-navigation-spacer-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
672
670
|
}
|
|
673
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
671
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CmatVerticalNavigationGroupItemComponent, decorators: [{
|
|
674
672
|
type: Component,
|
|
675
673
|
args: [{ selector: 'cmat-vertical-navigation-group-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, MatIconModule, CmatVerticalNavigationBasicItemComponent,
|
|
676
674
|
CmatVerticalNavigationDividerItemComponent, forwardRef(() => CmatVerticalNavigationGroupItemComponent),
|
|
@@ -718,9 +716,6 @@ class CmatVerticalNavigationCollapsableItemComponent {
|
|
|
718
716
|
'cmat-vertical-navigation-item-expanded': this.isExpanded
|
|
719
717
|
};
|
|
720
718
|
}
|
|
721
|
-
// -----------------------------------------------------------------------------------------------------
|
|
722
|
-
// @ Lifecycle hooks
|
|
723
|
-
// -----------------------------------------------------------------------------------------------------
|
|
724
719
|
/**
|
|
725
720
|
* On init
|
|
726
721
|
*/
|
|
@@ -933,14 +928,14 @@ class CmatVerticalNavigationCollapsableItemComponent {
|
|
|
933
928
|
}
|
|
934
929
|
return false;
|
|
935
930
|
}
|
|
936
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
937
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
931
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CmatVerticalNavigationCollapsableItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
932
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: CmatVerticalNavigationCollapsableItemComponent, isStandalone: true, selector: "cmat-vertical-navigation-collapsable-item", inputs: { autoCollapse: "autoCollapse", item: "item", name: "name", editState: "editState", hasRouteReuseStrategy: "hasRouteReuseStrategy" }, outputs: { routeReuseStrategyEmitUrl: "routeReuseStrategyEmitUrl", editSelectedItemChanged: "editSelectedItemChanged" }, host: { properties: { "class": "this.classList" } }, ngImport: i0, template: "<div class=\"cmat-vertical-navigation-item-wrapper\" [class.cmat-vertical-navigation-item-has-subtitle]=\"!!item.subTitle\"\r\n [ngClass]=\"item.classes?.wrapper\">\r\n\r\n <div class=\"cmat-vertical-navigation-item\" role=\"presentation\"\r\n [ngClass]=\"{'cmat-vertical-navigation-item-disabled': item.disabled}\" [matTooltip]=\"item.tooltip || ''\"\r\n (click)=\"toggleCollapsable();selectItem(item);\">\r\n\r\n <!-- Icon -->\r\n @if (item.icon) {\r\n <mat-icon class=\"cmat-vertical-navigation-item-icon\" [ngClass]=\"item.classes?.icon\" [svgIcon]=\"item.icon\">\r\n </mat-icon>\r\n }\r\n\r\n <!-- Title & Subtitle -->\r\n <div class=\"cmat-vertical-navigation-item-title-wrapper\">\r\n <div class=\"cmat-vertical-navigation-item-title\">\r\n <span [ngClass]=\"item.classes?.title\">\r\n {{item.title}}\r\n </span>\r\n </div>\r\n @if (item.subTitle) {\r\n <div class=\"cmat-vertical-navigation-item-subtitle\">\r\n <span [ngClass]=\"item.classes?.subtitle\">\r\n {{item.subTitle}}\r\n </span>\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Badge -->\r\n @if (item.badge) {\r\n <div class=\"cmat-vertical-navigation-item-badge\">\r\n <div class=\"cmat-vertical-navigation-item-badge-content\" [ngClass]=\"item.badge.classes\">\r\n {{item.badge.title}}\r\n </div>\r\n </div>\r\n }\r\n\r\n <!-- Arrow -->\r\n <mat-icon class=\"cmat-vertical-navigation-item-arrow icon-size-4\" [svgIcon]=\"'heroicons_outline:chevron-right'\">\r\n </mat-icon>\r\n\r\n </div>\r\n\r\n</div>\r\n\r\n@if (!isCollapsed) {\r\n<div animate.leave=\"expand-collapse-animation-leaving\"\r\n class=\"cmat-vertical-navigation-item-children expand-collapse-animation\">\r\n <div>\r\n @for (item of item.children; track trackByFn($index, item)) {\r\n <!-- Skip the hidden items -->\r\n @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\r\n <!-- Basic -->\r\n @if (item.type === 'basic') {\r\n <cmat-vertical-navigation-basic-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\"\r\n [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\" (editSelectedItemChanged)=\"selectItem($event)\"\r\n (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\">\r\n </cmat-vertical-navigation-basic-item>\r\n }\r\n <!-- Collapsable -->\r\n @if (item.type === 'collapsable') {\r\n <cmat-vertical-navigation-collapsable-item [item]=\"item\" [name]=\"name\" [autoCollapse]=\"autoCollapse\"\r\n [editState]=\"editState\" [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\"\r\n (editSelectedItemChanged)=\"selectItem($event)\" (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\">\r\n </cmat-vertical-navigation-collapsable-item>\r\n }\r\n <!-- Divider -->\r\n @if (item.type === 'divider') {\r\n <cmat-vertical-navigation-divider-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\"\r\n (editSelectedItemChanged)=\"selectItem($event)\">\r\n </cmat-vertical-navigation-divider-item>\r\n }\r\n <!-- Group -->\r\n @if (item.type === 'group') {\r\n <cmat-vertical-navigation-group-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\"\r\n [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\" (editSelectedItemChanged)=\"selectItem($event)\"\r\n (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\"></cmat-vertical-navigation-group-item>\r\n }\r\n <!-- Spacer -->\r\n @if (item.type === 'spacer') {\r\n <cmat-vertical-navigation-spacer-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\"\r\n (editSelectedItemChanged)=\"selectItem($event)\">\r\n </cmat-vertical-navigation-spacer-item>\r\n }\r\n }\r\n }\r\n </div>\r\n</div>\r\n}", styles: [".expand-collapse-animation{display:grid!important;grid-template-rows:1fr;overflow:hidden;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}@starting-style{.expand-collapse-animation{grid-template-rows:0fr}}.expand-collapse-animation>div{min-height:0;transition:opacity 225ms ease-in-out}.expand-collapse-animation.collapsed{grid-template-rows:0fr}.expand-collapse-animation.collapsed>div{opacity:0}.expand-collapse-animation-leaving{grid-template-rows:0fr}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationCollapsableItemComponent), selector: "cmat-vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item", "name", "editState", "hasRouteReuseStrategy"], outputs: ["routeReuseStrategyEmitUrl", "editSelectedItemChanged"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatTooltipModule) }, { kind: "directive", type: i0.forwardRef(() => i1.MatTooltip), selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatIconModule) }, { kind: "component", type: i0.forwardRef(() => i2.MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationBasicItemComponent), selector: "cmat-vertical-navigation-basic-item", inputs: ["item", "name", "editState", "hasRouteReuseStrategy"], outputs: ["routeReuseStrategyEmitUrl", "editSelectedItemChanged"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationGroupItemComponent), selector: "cmat-vertical-navigation-group-item", inputs: ["autoCollapse", "item", "name", "editState", "hasRouteReuseStrategy"], outputs: ["routeReuseStrategyEmitUrl", "editSelectedItemChanged"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationDividerItemComponent), selector: "cmat-vertical-navigation-divider-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationSpacerItemComponent), selector: "cmat-vertical-navigation-spacer-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
938
933
|
}
|
|
939
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
934
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CmatVerticalNavigationCollapsableItemComponent, decorators: [{
|
|
940
935
|
type: Component,
|
|
941
|
-
args: [{ selector: 'cmat-vertical-navigation-collapsable-item',
|
|
936
|
+
args: [{ selector: 'cmat-vertical-navigation-collapsable-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, MatTooltipModule, MatIconModule, CmatVerticalNavigationBasicItemComponent,
|
|
942
937
|
forwardRef(() => CmatVerticalNavigationCollapsableItemComponent),
|
|
943
|
-
forwardRef(() => CmatVerticalNavigationGroupItemComponent), CmatVerticalNavigationDividerItemComponent, CmatVerticalNavigationSpacerItemComponent], template: "<div class=\"cmat-vertical-navigation-item-wrapper\" [class.cmat-vertical-navigation-item-has-subtitle]=\"!!item.subTitle\"\r\n [ngClass]=\"item.classes?.wrapper\">\r\n\r\n <div class=\"cmat-vertical-navigation-item\" role=\"presentation\"
|
|
938
|
+
forwardRef(() => CmatVerticalNavigationGroupItemComponent), CmatVerticalNavigationDividerItemComponent, CmatVerticalNavigationSpacerItemComponent], template: "<div class=\"cmat-vertical-navigation-item-wrapper\" [class.cmat-vertical-navigation-item-has-subtitle]=\"!!item.subTitle\"\r\n [ngClass]=\"item.classes?.wrapper\">\r\n\r\n <div class=\"cmat-vertical-navigation-item\" role=\"presentation\"\r\n [ngClass]=\"{'cmat-vertical-navigation-item-disabled': item.disabled}\" [matTooltip]=\"item.tooltip || ''\"\r\n (click)=\"toggleCollapsable();selectItem(item);\">\r\n\r\n <!-- Icon -->\r\n @if (item.icon) {\r\n <mat-icon class=\"cmat-vertical-navigation-item-icon\" [ngClass]=\"item.classes?.icon\" [svgIcon]=\"item.icon\">\r\n </mat-icon>\r\n }\r\n\r\n <!-- Title & Subtitle -->\r\n <div class=\"cmat-vertical-navigation-item-title-wrapper\">\r\n <div class=\"cmat-vertical-navigation-item-title\">\r\n <span [ngClass]=\"item.classes?.title\">\r\n {{item.title}}\r\n </span>\r\n </div>\r\n @if (item.subTitle) {\r\n <div class=\"cmat-vertical-navigation-item-subtitle\">\r\n <span [ngClass]=\"item.classes?.subtitle\">\r\n {{item.subTitle}}\r\n </span>\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Badge -->\r\n @if (item.badge) {\r\n <div class=\"cmat-vertical-navigation-item-badge\">\r\n <div class=\"cmat-vertical-navigation-item-badge-content\" [ngClass]=\"item.badge.classes\">\r\n {{item.badge.title}}\r\n </div>\r\n </div>\r\n }\r\n\r\n <!-- Arrow -->\r\n <mat-icon class=\"cmat-vertical-navigation-item-arrow icon-size-4\" [svgIcon]=\"'heroicons_outline:chevron-right'\">\r\n </mat-icon>\r\n\r\n </div>\r\n\r\n</div>\r\n\r\n@if (!isCollapsed) {\r\n<div animate.leave=\"expand-collapse-animation-leaving\"\r\n class=\"cmat-vertical-navigation-item-children expand-collapse-animation\">\r\n <div>\r\n @for (item of item.children; track trackByFn($index, item)) {\r\n <!-- Skip the hidden items -->\r\n @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\r\n <!-- Basic -->\r\n @if (item.type === 'basic') {\r\n <cmat-vertical-navigation-basic-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\"\r\n [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\" (editSelectedItemChanged)=\"selectItem($event)\"\r\n (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\">\r\n </cmat-vertical-navigation-basic-item>\r\n }\r\n <!-- Collapsable -->\r\n @if (item.type === 'collapsable') {\r\n <cmat-vertical-navigation-collapsable-item [item]=\"item\" [name]=\"name\" [autoCollapse]=\"autoCollapse\"\r\n [editState]=\"editState\" [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\"\r\n (editSelectedItemChanged)=\"selectItem($event)\" (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\">\r\n </cmat-vertical-navigation-collapsable-item>\r\n }\r\n <!-- Divider -->\r\n @if (item.type === 'divider') {\r\n <cmat-vertical-navigation-divider-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\"\r\n (editSelectedItemChanged)=\"selectItem($event)\">\r\n </cmat-vertical-navigation-divider-item>\r\n }\r\n <!-- Group -->\r\n @if (item.type === 'group') {\r\n <cmat-vertical-navigation-group-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\"\r\n [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\" (editSelectedItemChanged)=\"selectItem($event)\"\r\n (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\"></cmat-vertical-navigation-group-item>\r\n }\r\n <!-- Spacer -->\r\n @if (item.type === 'spacer') {\r\n <cmat-vertical-navigation-spacer-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\"\r\n (editSelectedItemChanged)=\"selectItem($event)\">\r\n </cmat-vertical-navigation-spacer-item>\r\n }\r\n }\r\n }\r\n </div>\r\n</div>\r\n}", styles: [".expand-collapse-animation{display:grid!important;grid-template-rows:1fr;overflow:hidden;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}@starting-style{.expand-collapse-animation{grid-template-rows:0fr}}.expand-collapse-animation>div{min-height:0;transition:opacity 225ms ease-in-out}.expand-collapse-animation.collapsed{grid-template-rows:0fr}.expand-collapse-animation.collapsed>div{opacity:0}.expand-collapse-animation-leaving{grid-template-rows:0fr}\n"] }]
|
|
944
939
|
}], propDecorators: { autoCollapse: [{
|
|
945
940
|
type: Input
|
|
946
941
|
}], item: [{
|
|
@@ -1086,10 +1081,10 @@ class CmatVerticalNavigationAsideItemComponent {
|
|
|
1086
1081
|
// Mark for check
|
|
1087
1082
|
this._changeDetectorRef.markForCheck();
|
|
1088
1083
|
}
|
|
1089
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1090
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
1084
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CmatVerticalNavigationAsideItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1085
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: CmatVerticalNavigationAsideItemComponent, isStandalone: true, selector: "cmat-vertical-navigation-aside-item", inputs: { activeItemId: "activeItemId", autoCollapse: "autoCollapse", item: "item", name: "name", skipChildren: "skipChildren", editState: "editState", hasRouteReuseStrategy: "hasRouteReuseStrategy" }, outputs: { routeReuseStrategyEmitUrl: "routeReuseStrategyEmitUrl", editSelectedItemChanged: "editSelectedItemChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cmat-vertical-navigation-item-wrapper\" role=\"presentation\"\r\n [class.cmat-vertical-navigation-item-has-subtitle]=\"!!item.subTitle\" [ngClass]=\"item.classes?.wrapper\" (click)=\"selectItem(item);\">\r\n\r\n <div class=\"cmat-vertical-navigation-item\" [ngClass]=\"{'cmat-vertical-navigation-item-active': active,\r\n 'cmat-vertical-navigation-item-disabled': item.disabled,\r\n 'cmat-vertical-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\">\r\n\r\n <!-- Icon -->\r\n @if (item.icon) {\r\n <mat-icon class=\"cmat-vertical-navigation-item-icon\" [ngClass]=\"item.classes?.icon\" [svgIcon]=\"item.icon\">\r\n </mat-icon>\r\n }\r\n\r\n <!-- Title & Subtitle -->\r\n <div class=\"cmat-vertical-navigation-item-title-wrapper\">\r\n <div class=\"cmat-vertical-navigation-item-title\">\r\n <span [ngClass]=\"item.classes?.title\">\r\n {{item.title}}\r\n </span>\r\n </div>\r\n @if (item.subTitle) {\r\n <div class=\"cmat-vertical-navigation-item-subtitle\">\r\n <span [ngClass]=\"item.classes?.subtitle\">\r\n {{item.subTitle}}\r\n </span>\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Badge -->\r\n @if (item.badge) {\r\n <div class=\"cmat-vertical-navigation-item-badge\">\r\n <div class=\"cmat-vertical-navigation-item-badge-content\" [ngClass]=\"item.badge.classes\">\r\n {{item.badge.title}}\r\n </div>\r\n </div>\r\n }\r\n\r\n </div>\r\n\r\n</div>\r\n\r\n@if (!skipChildren) {\r\n <div class=\"cmat-vertical-navigation-item-children\">\r\n @for (item of item.children; track trackByFn($index, item)) {\r\n <!-- Skip the hidden items -->\r\n @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\r\n <!-- Basic -->\r\n @if (item.type === 'basic') {\r\n <cmat-vertical-navigation-basic-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\" (editSelectedItemChanged)=\"selectItem($event)\" (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\">\r\n </cmat-vertical-navigation-basic-item>\r\n }\r\n <!-- Collapsable -->\r\n @if (item.type === 'collapsable') {\r\n <cmat-vertical-navigation-collapsable-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" [autoCollapse]=\"autoCollapse\"\r\n (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-collapsable-item>\r\n }\r\n <!-- Divider -->\r\n @if (item.type === 'divider') {\r\n <cmat-vertical-navigation-divider-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\r\n </cmat-vertical-navigation-divider-item>\r\n }\r\n <!-- Group -->\r\n @if (item.type === 'group') {\r\n <cmat-vertical-navigation-group-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\r\n </cmat-vertical-navigation-group-item>\r\n }\r\n <!-- Spacer -->\r\n @if (item.type === 'spacer') {\r\n <cmat-vertical-navigation-spacer-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\r\n </cmat-vertical-navigation-spacer-item>\r\n }\r\n }\r\n }\r\n </div>\r\n}", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: CmatVerticalNavigationBasicItemComponent, selector: "cmat-vertical-navigation-basic-item", inputs: ["item", "name", "editState", "hasRouteReuseStrategy"], outputs: ["routeReuseStrategyEmitUrl", "editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationCollapsableItemComponent, selector: "cmat-vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item", "name", "editState", "hasRouteReuseStrategy"], outputs: ["routeReuseStrategyEmitUrl", "editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationDividerItemComponent, selector: "cmat-vertical-navigation-divider-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationGroupItemComponent, selector: "cmat-vertical-navigation-group-item", inputs: ["autoCollapse", "item", "name", "editState", "hasRouteReuseStrategy"], outputs: ["routeReuseStrategyEmitUrl", "editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationSpacerItemComponent, selector: "cmat-vertical-navigation-spacer-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1091
1086
|
}
|
|
1092
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1087
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CmatVerticalNavigationAsideItemComponent, decorators: [{
|
|
1093
1088
|
type: Component,
|
|
1094
1089
|
args: [{ selector: 'cmat-vertical-navigation-aside-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, MatTooltipModule, MatIconModule, CmatVerticalNavigationBasicItemComponent,
|
|
1095
1090
|
CmatVerticalNavigationCollapsableItemComponent, CmatVerticalNavigationDividerItemComponent,
|
|
@@ -1137,7 +1132,6 @@ class CmatVerticalNavigationComponent {
|
|
|
1137
1132
|
this.onCollapsableItemCollapsed = new ReplaySubject(1);
|
|
1138
1133
|
this.onCollapsableItemExpanded = new ReplaySubject(1);
|
|
1139
1134
|
this.onRefreshed = new ReplaySubject(1);
|
|
1140
|
-
this._animationBuilder = inject(AnimationBuilder);
|
|
1141
1135
|
this._changeDetectorRef = inject(ChangeDetectorRef);
|
|
1142
1136
|
this._elementRef = inject(ElementRef);
|
|
1143
1137
|
this._renderer2 = inject(Renderer2);
|
|
@@ -1507,12 +1501,9 @@ class CmatVerticalNavigationComponent {
|
|
|
1507
1501
|
this._renderer2.appendChild(this._elementRef.nativeElement.parentElement, this._overlay);
|
|
1508
1502
|
// Enable block scroll strategy
|
|
1509
1503
|
this._scrollStrategy.enable();
|
|
1510
|
-
|
|
1511
|
-
|
|
1512
|
-
|
|
1513
|
-
]).create(this._overlay);
|
|
1514
|
-
// Play the animation
|
|
1515
|
-
this._player.play();
|
|
1504
|
+
setTimeout(() => {
|
|
1505
|
+
this._overlay?.classList.add('cmat-vertical-navigation-overlay-enter');
|
|
1506
|
+
}, 10);
|
|
1516
1507
|
// Add an event listener to the overlay
|
|
1517
1508
|
this._overlay.addEventListener('click', this._handleOverlayClick);
|
|
1518
1509
|
}
|
|
@@ -1526,25 +1517,20 @@ class CmatVerticalNavigationComponent {
|
|
|
1526
1517
|
if (!this._overlay) {
|
|
1527
1518
|
return;
|
|
1528
1519
|
}
|
|
1529
|
-
|
|
1530
|
-
this.
|
|
1531
|
-
|
|
1532
|
-
|
|
1533
|
-
|
|
1534
|
-
|
|
1535
|
-
|
|
1536
|
-
|
|
1537
|
-
|
|
1538
|
-
|
|
1539
|
-
|
|
1540
|
-
this._overlay.removeEventListener('click', this._handleOverlayClick);
|
|
1541
|
-
// Remove the overlay
|
|
1542
|
-
this._overlay.parentNode?.removeChild(this._overlay);
|
|
1543
|
-
this._overlay = null;
|
|
1520
|
+
this._overlay.classList.remove('cmat-vertical-navigation-overlay-enter');
|
|
1521
|
+
this._overlay.classList.add('cmat-vertical-navigation-overlay-leave');
|
|
1522
|
+
const handleAnimationEnd = (event) => {
|
|
1523
|
+
if (event.animationName === 'vertical-navigation-overlay-leave') {
|
|
1524
|
+
this._overlay?.removeEventListener('animationend', handleAnimationEnd);
|
|
1525
|
+
if (this._overlay) {
|
|
1526
|
+
this._overlay.removeEventListener('click', this._handleOverlayClick);
|
|
1527
|
+
this._overlay.parentNode?.removeChild(this._overlay);
|
|
1528
|
+
this._overlay = null;
|
|
1529
|
+
}
|
|
1530
|
+
this._scrollStrategy.disable();
|
|
1544
1531
|
}
|
|
1545
|
-
|
|
1546
|
-
|
|
1547
|
-
});
|
|
1532
|
+
};
|
|
1533
|
+
this._overlay.addEventListener('animationend', handleAnimationEnd);
|
|
1548
1534
|
}
|
|
1549
1535
|
/**
|
|
1550
1536
|
* Show the aside overlay
|
|
@@ -1563,14 +1549,9 @@ class CmatVerticalNavigationComponent {
|
|
|
1563
1549
|
this._asideOverlay.classList.add('cmat-vertical-navigation-aside-overlay');
|
|
1564
1550
|
// Append the aside overlay to the parent of the navigation
|
|
1565
1551
|
this._renderer2.appendChild(this._elementRef.nativeElement.parentElement, this._asideOverlay);
|
|
1566
|
-
|
|
1567
|
-
|
|
1568
|
-
|
|
1569
|
-
.build([
|
|
1570
|
-
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({ opacity: 1 }))
|
|
1571
|
-
]).create(this._asideOverlay);
|
|
1572
|
-
// Play the animation
|
|
1573
|
-
this._player.play();
|
|
1552
|
+
setTimeout(() => {
|
|
1553
|
+
this._overlay?.classList.add('cmat-vertical-navigation-aside-overlay-enter');
|
|
1554
|
+
}, 10);
|
|
1574
1555
|
// Add an event listener to the aside overlay
|
|
1575
1556
|
this._asideOverlay.addEventListener('click', this._handleAsideOverlayClick);
|
|
1576
1557
|
}
|
|
@@ -1584,25 +1565,19 @@ class CmatVerticalNavigationComponent {
|
|
|
1584
1565
|
if (!this._asideOverlay) {
|
|
1585
1566
|
return;
|
|
1586
1567
|
}
|
|
1587
|
-
|
|
1588
|
-
this.
|
|
1589
|
-
|
|
1590
|
-
|
|
1591
|
-
|
|
1592
|
-
|
|
1593
|
-
|
|
1594
|
-
|
|
1595
|
-
|
|
1596
|
-
|
|
1597
|
-
// If the aside overlay still exists...
|
|
1598
|
-
if (this._asideOverlay) {
|
|
1599
|
-
// Remove the event listener
|
|
1600
|
-
this._asideOverlay.removeEventListener('click', this._handleAsideOverlayClick);
|
|
1601
|
-
// Remove the aside overlay
|
|
1602
|
-
this._asideOverlay.parentNode?.removeChild(this._asideOverlay);
|
|
1603
|
-
this._asideOverlay = null;
|
|
1568
|
+
this._asideOverlay.classList.remove('cmat-vertical-navigation-aside-overlay-enter');
|
|
1569
|
+
this._asideOverlay.classList.add('cmat-vertical-navigation-aside-overlay-leave');
|
|
1570
|
+
const handleAnimationEnd = (event) => {
|
|
1571
|
+
if (event.animationName === 'vertical-navigation-overlay-leave') {
|
|
1572
|
+
this._asideOverlay?.removeEventListener('animationend', handleAnimationEnd);
|
|
1573
|
+
if (this._asideOverlay) {
|
|
1574
|
+
this._asideOverlay.removeEventListener('click', this._handleOverlayClick);
|
|
1575
|
+
this._asideOverlay.parentNode?.removeChild(this._asideOverlay);
|
|
1576
|
+
this._asideOverlay = null;
|
|
1577
|
+
}
|
|
1604
1578
|
}
|
|
1605
|
-
}
|
|
1579
|
+
};
|
|
1580
|
+
this._asideOverlay.addEventListener('animationend', handleAnimationEnd);
|
|
1606
1581
|
}
|
|
1607
1582
|
/**
|
|
1608
1583
|
* Open/close the navigation
|
|
@@ -1628,14 +1603,14 @@ class CmatVerticalNavigationComponent {
|
|
|
1628
1603
|
// Execute the observable
|
|
1629
1604
|
this.openedChanged.emit(open);
|
|
1630
1605
|
}
|
|
1631
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1632
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CmatVerticalNavigationComponent, isStandalone: true, selector: "cmat-vertical-navigation", inputs: { appearance: "appearance", autoCollapse: "autoCollapse", editState: "editState", inner: "inner", mode: "mode", name: "name", navigation: "navigation", opened: "opened", position: "position", transparentOverlay: "transparentOverlay", hasRouteReuseStrategy: "hasRouteReuseStrategy" }, outputs: { routeReuseStrategyEmitUrl: "routeReuseStrategyEmitUrl", appearanceChanged: "appearanceChanged", modeChanged: "modeChanged", openedChanged: "openedChanged", positionChanged: "positionChanged", editSelectedItemChanged: "editSelectedItemChanged" }, host: { listeners: { "mouseenter": "onMouseenter()", "mouseleave": "onMouseleave()" }, properties: { "class": "this.classList", "style": "this.styleList" } }, viewQueries: [{ propertyName: "_navigationContentEl", first: true, predicate: ["navigationContent"], descendants: true }], exportAs: ["cmatVerticalNavigation"], usesOnChanges: true, ngImport: i0, template: "<div class=\"cmat-vertical-navigation-wrapper\">\r\n\r\n <!-- Header -->\r\n <div class=\"cmat-vertical-navigation-header\">\r\n <ng-content select=\"[cmatVerticalNavigationHeader]\"></ng-content>\r\n </div>\r\n\r\n <!-- Content -->\r\n <div #navigationContent class=\"cmat-vertical-navigation-content py-2 overflow-y-auto scrollbar-custom\">\r\n\r\n <!-- Content header -->\r\n <div class=\"cmat-vertical-navigation-content-header\">\r\n <ng-content select=\"[cmatVerticalNavigationContentHeader]\"></ng-content>\r\n </div>\r\n\r\n <!-- Items -->\r\n @for (item of navigation; track trackByFn($index, item)) {\r\n <!-- Skip the hidden items -->\r\n @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\r\n <!-- Aside -->\r\n @if (item.type === 'aside') {\r\n <cmat-vertical-navigation-aside-item [item]=\"item\" [name]=\"name\" [activeItemId]=\"activeAsideItemId\"\r\n [autoCollapse]=\"autoCollapse\" [skipChildren]=\"true\" [editState]=\"editState\"\r\n [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\" (click)=\"toggleAside(item)\"\r\n (editSelectedItemChanged)=\"selectItem($event)\" (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\">\r\n </cmat-vertical-navigation-aside-item>\r\n }\r\n <!-- Basic -->\r\n @if (item.type === 'basic') {\r\n <cmat-vertical-navigation-basic-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\"\r\n [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\" (editSelectedItemChanged)=\"selectItem($event)\"\r\n (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\">\r\n </cmat-vertical-navigation-basic-item>\r\n }\r\n <!-- Collapsable -->\r\n @if (item.type === 'collapsable') {\r\n <cmat-vertical-navigation-collapsable-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\"\r\n [autoCollapse]=\"autoCollapse\" [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\"\r\n (editSelectedItemChanged)=\"selectItem($event)\"\r\n (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\"></cmat-vertical-navigation-collapsable-item>\r\n }\r\n <!-- Divider -->\r\n @if (item.type === 'divider') {\r\n <cmat-vertical-navigation-divider-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\"\r\n (editSelectedItemChanged)=\"selectItem($event)\">\r\n </cmat-vertical-navigation-divider-item>\r\n }\r\n <!-- Group -->\r\n @if (item.type === 'group') {\r\n <cmat-vertical-navigation-group-item [item]=\"item\" [name]=\"name\" [autoCollapse]=\"autoCollapse\"\r\n [editState]=\"editState\" [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\"\r\n (editSelectedItemChanged)=\"selectItem($event)\" (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\">\r\n </cmat-vertical-navigation-group-item>\r\n }\r\n <!-- Spacer -->\r\n @if (item.type === 'spacer') {\r\n <cmat-vertical-navigation-spacer-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\"\r\n (editSelectedItemChanged)=\"selectItem($event)\">\r\n </cmat-vertical-navigation-spacer-item>\r\n }\r\n }\r\n }\r\n\r\n <!-- Content footer -->\r\n <div class=\"cmat-vertical-navigation-content-footer\">\r\n <ng-content select=\"[cmatVerticalNavigationContentFooter]\"></ng-content>\r\n </div>\r\n\r\n </div>\r\n <!-- Footer -->\r\n <div class=\"cmat-vertical-navigation-footer\">\r\n <ng-content select=\"[cmatVerticalNavigationFooter]\"></ng-content>\r\n </div>\r\n\r\n</div>\r\n\r\n<!-- Aside -->\r\n@if (activeAsideItemId) {\r\n<div class=\"cmat-vertical-navigation-aside-wrapper overflow-y-auto scrollbar-custom\" [@fadeInLeft]=\"position === 'left'\"\r\n [@fadeInRight]=\"position === 'right'\" [@fadeOutLeft]=\"position === 'left'\" [@fadeOutRight]=\"position === 'right'\">\r\n <!-- Items -->\r\n @for (item of navigation; track trackByFn($index, item)) {\r\n <!-- Skip the hidden items -->\r\n @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\r\n <!-- Aside -->\r\n @if (item.type === 'aside' && item.id === activeAsideItemId) {\r\n <cmat-vertical-navigation-aside-item [item]=\"item\" [name]=\"name\" [autoCollapse]=\"autoCollapse\"\r\n [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\" (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\">\r\n </cmat-vertical-navigation-aside-item>\r\n }\r\n }\r\n }\r\n</div>\r\n}", styles: ["cmat-vertical-navigation{position:sticky;display:flex;flex-direction:column;flex:1 0 auto;top:0;width:280px;min-width:280px;max-width:280px;height:100%;z-index:200}cmat-vertical-navigation.cmat-vertical-navigation-animations-enabled{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:visibility,margin-left,margin-right,transform,width,max-width,min-width}cmat-vertical-navigation.cmat-vertical-navigation-animations-enabled .cmat-vertical-navigation-wrapper{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:width,max-width,min-width}cmat-vertical-navigation.cmat-vertical-navigation-mode-over{position:fixed;top:0;bottom:0}cmat-vertical-navigation.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side{margin-left:-280px}cmat-vertical-navigation.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side.cmat-vertical-navigation-opened{margin-left:0}cmat-vertical-navigation.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-over{left:0;transform:translate3d(-100%,0,0)}cmat-vertical-navigation.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-over.cmat-vertical-navigation-opened{transform:translateZ(0)}cmat-vertical-navigation.cmat-vertical-navigation-position-left .cmat-vertical-navigation-wrapper{left:0}cmat-vertical-navigation.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side{margin-right:-280px}cmat-vertical-navigation.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side.cmat-vertical-navigation-opened{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-over{right:0;transform:translate3d(100%,0,0)}cmat-vertical-navigation.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-over.cmat-vertical-navigation-opened{transform:translateZ(0)}cmat-vertical-navigation.cmat-vertical-navigation-position-right .cmat-vertical-navigation-wrapper{right:0}cmat-vertical-navigation.cmat-vertical-navigation-inner{position:relative;width:auto;min-width:0;max-width:none;height:auto;min-height:0;max-height:none;box-shadow:none}cmat-vertical-navigation.cmat-vertical-navigation-inner .cmat-vertical-navigation-wrapper{position:relative;overflow:visible;height:auto}cmat-vertical-navigation.cmat-vertical-navigation-inner .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content{overflow:visible!important}cmat-vertical-navigation .cmat-vertical-navigation-wrapper{position:absolute;display:flex;flex:1 1 auto;flex-direction:column;top:0;bottom:0;width:100%;height:100%;overflow:hidden;z-index:10;background:inherit;box-shadow:inset -1px 0 0 var(--cmat-border)}cmat-vertical-navigation .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content{flex:1 1 auto;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}cmat-vertical-navigation .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-divider-item{margin:24px 0}cmat-vertical-navigation .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-group-item{margin-top:24px}cmat-vertical-navigation .cmat-vertical-navigation-aside-wrapper{position:absolute;display:flex;flex:1 1 auto;flex-direction:column;top:0;bottom:0;left:280px;width:280px;height:100%;z-index:5;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;transition-duration:.4s;transition-property:left,right;transition-timing-function:cubic-bezier(.25,.8,.25,1);background:inherit}cmat-vertical-navigation .cmat-vertical-navigation-aside-wrapper>cmat-vertical-navigation-aside-item{padding:24px 0}cmat-vertical-navigation .cmat-vertical-navigation-aside-wrapper>cmat-vertical-navigation-aside-item>.cmat-vertical-navigation-item-wrapper{display:none!important}cmat-vertical-navigation.cmat-vertical-navigation-position-right .cmat-vertical-navigation-aside-wrapper{left:auto;right:280px}cmat-vertical-navigation cmat-vertical-navigation-aside-item,cmat-vertical-navigation cmat-vertical-navigation-basic-item,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item,cmat-vertical-navigation cmat-vertical-navigation-divider-item,cmat-vertical-navigation cmat-vertical-navigation-group-item,cmat-vertical-navigation cmat-vertical-navigation-spacer-item{display:flex;flex-direction:column;flex:1 0 auto;-webkit-user-select:none;user-select:none}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{position:relative;display:flex;align-items:center;justify-content:flex-start;padding:10px 16px;font-size:13px;font-weight:500;line-height:20px;text-decoration:none;border-radius:6px}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled{cursor:default;opacity:.4}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon{margin-right:16px}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle{font-size:11px;line-height:1.5}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge{margin-left:auto}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content{display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;white-space:nowrap;height:20px}cmat-vertical-navigation cmat-vertical-navigation-aside-item>.cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation cmat-vertical-navigation-basic-item>.cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper{margin:0 12px}cmat-vertical-navigation cmat-vertical-navigation-aside-item,cmat-vertical-navigation cmat-vertical-navigation-basic-item,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item{margin-bottom:4px}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item{cursor:pointer}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge+.cmat-vertical-navigation-item-arrow{margin-left:8px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow{height:20px;line-height:20px;margin-left:auto;transition:transform .3s cubic-bezier(.25,.8,.25,1),color 375ms cubic-bezier(.25,.8,.25,1)}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item.cmat-vertical-navigation-item-expanded>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow{transform:rotate(90deg)}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-children{margin-top:6px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-children>*:last-child{padding-bottom:6px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-children>*:last-child>.cmat-vertical-navigation-item-children>*:last-child{padding-bottom:0}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding:10px 16px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children{overflow:hidden}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding-left:56px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding-left:72px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding-left:88px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding-left:104px}cmat-vertical-navigation cmat-vertical-navigation-divider-item{margin:12px 0}cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper{height:1px;box-shadow:0 1px}cmat-vertical-navigation cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon{display:none!important}cmat-vertical-navigation cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-title{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}cmat-vertical-navigation cmat-vertical-navigation-spacer-item{margin:6px 0}.cmat-vertical-navigation-overlay{position:absolute;inset:0;z-index:170;opacity:0;background-color:#0009}.cmat-vertical-navigation-overlay+.cmat-vertical-navigation-aside-overlay{background-color:transparent}.cmat-vertical-navigation-aside-overlay{position:absolute;inset:0;z-index:169;opacity:0;background-color:#0000004d}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact{width:112px;min-width:112px;max-width:112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side{margin-left:-112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-left.cmat-vertical-navigation-opened{margin-left:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side{margin-right:-112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-right.cmat-vertical-navigation-opened{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-right .cmat-vertical-navigation-aside-wrapper{left:auto;right:112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper{margin:4px 8px 0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{flex-direction:column;justify-content:center;padding:12px;border-radius:6px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{margin-top:8px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-title,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-title{font-size:12px;font-weight:500;text-align:center;line-height:16px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle{display:none!important}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge{position:absolute;top:12px;left:64px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item>cmat-vertical-navigation-collapsable-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item>cmat-vertical-navigation-collapsable-item{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item>cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item>cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-aside-wrapper{left:112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over){width:80px;min-width:80px;max-width:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side{margin-left:-80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-left.cmat-vertical-navigation-opened{margin-left:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side{margin-right:-80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-right.cmat-vertical-navigation-opened{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-right .cmat-vertical-navigation-aside-wrapper{left:auto;right:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-right.cmat-vertical-navigation-hover .cmat-vertical-navigation-aside-wrapper{left:auto;right:280px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{width:280px-24px;min-width:280px-24px;max-width:280px-24px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{transition:opacity .4s cubic-bezier(.25,.8,.25,1)}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item:first-of-type{margin-top:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{padding:10px 16px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{white-space:nowrap;opacity:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:before{content:\"\";position:absolute;top:20px;width:23px;border-top-width:2px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-aside-wrapper{left:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-wrapper{width:280px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{white-space:nowrap;animation:removeWhiteSpaceNoWrap 1ms linear .35s;animation-fill-mode:forwards}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-aside-wrapper{left:280px}@keyframes removeWhiteSpaceNoWrap{0%{white-space:nowrap}99%{white-space:nowrap}to{white-space:normal}}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin{width:80px;min-width:80px;max-width:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side{margin-left:-80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-left.cmat-vertical-navigation-opened{margin-left:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side{margin-right:-80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-right.cmat-vertical-navigation-opened{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-right .cmat-vertical-navigation-aside-wrapper{left:auto;right:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item{flex-direction:column;justify-content:center;height:64px;min-height:64px;max-height:64px;padding:0 16px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper{display:flex;align-items:center;justify-content:center}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{justify-content:center;padding:12px;border-radius:4px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon{margin:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-collapsable-item{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-aside-wrapper{left:80px}\n"], dependencies: [{ kind: "component", type: CmatVerticalNavigationAsideItemComponent, selector: "cmat-vertical-navigation-aside-item", inputs: ["activeItemId", "autoCollapse", "item", "name", "skipChildren", "editState", "hasRouteReuseStrategy"], outputs: ["routeReuseStrategyEmitUrl", "editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationBasicItemComponent, selector: "cmat-vertical-navigation-basic-item", inputs: ["item", "name", "editState", "hasRouteReuseStrategy"], outputs: ["routeReuseStrategyEmitUrl", "editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationCollapsableItemComponent, selector: "cmat-vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item", "name", "editState", "hasRouteReuseStrategy"], outputs: ["routeReuseStrategyEmitUrl", "editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationDividerItemComponent, selector: "cmat-vertical-navigation-divider-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationGroupItemComponent, selector: "cmat-vertical-navigation-group-item", inputs: ["autoCollapse", "item", "name", "editState", "hasRouteReuseStrategy"], outputs: ["routeReuseStrategyEmitUrl", "editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationSpacerItemComponent, selector: "cmat-vertical-navigation-spacer-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }], animations: cmatAnimations, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1606
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CmatVerticalNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1607
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: CmatVerticalNavigationComponent, isStandalone: true, selector: "cmat-vertical-navigation", inputs: { appearance: "appearance", autoCollapse: "autoCollapse", editState: "editState", inner: "inner", mode: "mode", name: "name", navigation: "navigation", opened: "opened", position: "position", transparentOverlay: "transparentOverlay", hasRouteReuseStrategy: "hasRouteReuseStrategy" }, outputs: { routeReuseStrategyEmitUrl: "routeReuseStrategyEmitUrl", appearanceChanged: "appearanceChanged", modeChanged: "modeChanged", openedChanged: "openedChanged", positionChanged: "positionChanged", editSelectedItemChanged: "editSelectedItemChanged" }, host: { listeners: { "mouseenter": "onMouseenter()", "mouseleave": "onMouseleave()" }, properties: { "class": "this.classList", "style": "this.styleList" } }, viewQueries: [{ propertyName: "_navigationContentEl", first: true, predicate: ["navigationContent"], descendants: true }], exportAs: ["cmatVerticalNavigation"], usesOnChanges: true, ngImport: i0, template: "<div class=\"cmat-vertical-navigation-wrapper\">\r\n\r\n <!-- Header -->\r\n <div class=\"cmat-vertical-navigation-header\">\r\n <ng-content select=\"[cmatVerticalNavigationHeader]\"></ng-content>\r\n </div>\r\n\r\n <!-- Content -->\r\n <div #navigationContent class=\"cmat-vertical-navigation-content py-2 overflow-y-auto scrollbar-custom\">\r\n\r\n <!-- Content header -->\r\n <div class=\"cmat-vertical-navigation-content-header\">\r\n <ng-content select=\"[cmatVerticalNavigationContentHeader]\"></ng-content>\r\n </div>\r\n\r\n <!-- Items -->\r\n @for (item of navigation; track trackByFn($index, item)) {\r\n <!-- Skip the hidden items -->\r\n @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\r\n <!-- Aside -->\r\n @if (item.type === 'aside') {\r\n <cmat-vertical-navigation-aside-item [item]=\"item\" [name]=\"name\" [activeItemId]=\"activeAsideItemId\"\r\n [autoCollapse]=\"autoCollapse\" [skipChildren]=\"true\" [editState]=\"editState\"\r\n [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\" (click)=\"toggleAside(item)\"\r\n (editSelectedItemChanged)=\"selectItem($event)\" (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\">\r\n </cmat-vertical-navigation-aside-item>\r\n }\r\n <!-- Basic -->\r\n @if (item.type === 'basic') {\r\n <cmat-vertical-navigation-basic-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\"\r\n [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\" (editSelectedItemChanged)=\"selectItem($event)\"\r\n (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\">\r\n </cmat-vertical-navigation-basic-item>\r\n }\r\n <!-- Collapsable -->\r\n @if (item.type === 'collapsable') {\r\n <cmat-vertical-navigation-collapsable-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\"\r\n [autoCollapse]=\"autoCollapse\" [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\"\r\n (editSelectedItemChanged)=\"selectItem($event)\"\r\n (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\"></cmat-vertical-navigation-collapsable-item>\r\n }\r\n <!-- Divider -->\r\n @if (item.type === 'divider') {\r\n <cmat-vertical-navigation-divider-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\"\r\n (editSelectedItemChanged)=\"selectItem($event)\">\r\n </cmat-vertical-navigation-divider-item>\r\n }\r\n <!-- Group -->\r\n @if (item.type === 'group') {\r\n <cmat-vertical-navigation-group-item [item]=\"item\" [name]=\"name\" [autoCollapse]=\"autoCollapse\"\r\n [editState]=\"editState\" [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\"\r\n (editSelectedItemChanged)=\"selectItem($event)\" (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\">\r\n </cmat-vertical-navigation-group-item>\r\n }\r\n <!-- Spacer -->\r\n @if (item.type === 'spacer') {\r\n <cmat-vertical-navigation-spacer-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\"\r\n (editSelectedItemChanged)=\"selectItem($event)\">\r\n </cmat-vertical-navigation-spacer-item>\r\n }\r\n }\r\n }\r\n\r\n <!-- Content footer -->\r\n <div class=\"cmat-vertical-navigation-content-footer\">\r\n <ng-content select=\"[cmatVerticalNavigationContentFooter]\"></ng-content>\r\n </div>\r\n\r\n </div>\r\n <!-- Footer -->\r\n <div class=\"cmat-vertical-navigation-footer\">\r\n <ng-content select=\"[cmatVerticalNavigationFooter]\"></ng-content>\r\n </div>\r\n\r\n</div>\r\n\r\n<!-- Aside -->\r\n@if (activeAsideItemId) {\r\n<div class=\"cmat-vertical-navigation-aside-wrapper overflow-y-auto scrollbar-custom\"\r\n [animate.enter]=\"position === 'left'?'fade-in-left-animation':'fade-in-right-animation'\"\r\n [animate.leave]=\"position === 'left'?'fade-out-left-animation':'fade-out-right-animation'\">\r\n <!-- Items -->\r\n @for (item of navigation; track trackByFn($index, item)) {\r\n <!-- Skip the hidden items -->\r\n @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\r\n <!-- Aside -->\r\n @if (item.type === 'aside' && item.id === activeAsideItemId) {\r\n <cmat-vertical-navigation-aside-item [item]=\"item\" [name]=\"name\" [autoCollapse]=\"autoCollapse\"\r\n [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\" (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\">\r\n </cmat-vertical-navigation-aside-item>\r\n }\r\n }\r\n }\r\n</div>\r\n}", styles: ["cmat-vertical-navigation{position:sticky;display:flex;flex-direction:column;flex:1 0 auto;top:0;width:280px;min-width:280px;max-width:280px;height:100%;z-index:200}cmat-vertical-navigation.cmat-vertical-navigation-animations-enabled{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:visibility,margin-left,margin-right,transform,width,max-width,min-width}cmat-vertical-navigation.cmat-vertical-navigation-animations-enabled .cmat-vertical-navigation-wrapper{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:width,max-width,min-width}cmat-vertical-navigation.cmat-vertical-navigation-mode-over{position:fixed;top:0;bottom:0}cmat-vertical-navigation.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side{margin-left:-280px}cmat-vertical-navigation.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side.cmat-vertical-navigation-opened{margin-left:0}cmat-vertical-navigation.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-over{left:0;transform:translate3d(-100%,0,0)}cmat-vertical-navigation.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-over.cmat-vertical-navigation-opened{transform:translateZ(0)}cmat-vertical-navigation.cmat-vertical-navigation-position-left .cmat-vertical-navigation-wrapper{left:0}cmat-vertical-navigation.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side{margin-right:-280px}cmat-vertical-navigation.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side.cmat-vertical-navigation-opened{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-over{right:0;transform:translate3d(100%,0,0)}cmat-vertical-navigation.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-over.cmat-vertical-navigation-opened{transform:translateZ(0)}cmat-vertical-navigation.cmat-vertical-navigation-position-right .cmat-vertical-navigation-wrapper{right:0}cmat-vertical-navigation.cmat-vertical-navigation-inner{position:relative;width:auto;min-width:0;max-width:none;height:auto;min-height:0;max-height:none;box-shadow:none}cmat-vertical-navigation.cmat-vertical-navigation-inner .cmat-vertical-navigation-wrapper{position:relative;overflow:visible;height:auto}cmat-vertical-navigation.cmat-vertical-navigation-inner .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content{overflow:visible!important}cmat-vertical-navigation .cmat-vertical-navigation-wrapper{position:absolute;display:flex;flex:1 1 auto;flex-direction:column;top:0;bottom:0;width:100%;height:100%;overflow:hidden;z-index:10;background:inherit;box-shadow:inset -1px 0 0 var(--cmat-border)}cmat-vertical-navigation .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content{flex:1 1 auto;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}cmat-vertical-navigation .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-divider-item{margin:24px 0}cmat-vertical-navigation .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-group-item{margin-top:24px}cmat-vertical-navigation .cmat-vertical-navigation-aside-wrapper{position:absolute;display:flex;flex:1 1 auto;flex-direction:column;top:0;bottom:0;left:280px;width:280px;height:100%;z-index:5;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;background:inherit}cmat-vertical-navigation .cmat-vertical-navigation-aside-wrapper>cmat-vertical-navigation-aside-item{padding:24px 0}cmat-vertical-navigation .cmat-vertical-navigation-aside-wrapper>cmat-vertical-navigation-aside-item>.cmat-vertical-navigation-item-wrapper{display:none!important}cmat-vertical-navigation.cmat-vertical-navigation-position-right .cmat-vertical-navigation-aside-wrapper{left:auto;right:280px}cmat-vertical-navigation cmat-vertical-navigation-aside-item,cmat-vertical-navigation cmat-vertical-navigation-basic-item,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item,cmat-vertical-navigation cmat-vertical-navigation-divider-item,cmat-vertical-navigation cmat-vertical-navigation-group-item,cmat-vertical-navigation cmat-vertical-navigation-spacer-item{display:flex;flex-direction:column;flex:1 0 auto;-webkit-user-select:none;user-select:none}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{position:relative;display:flex;align-items:center;justify-content:flex-start;padding:10px 16px;font-size:13px;font-weight:500;line-height:20px;text-decoration:none;border-radius:6px}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled{cursor:default;opacity:.4}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon{margin-right:16px}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle{font-size:11px;line-height:1.5}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge{margin-left:auto}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content{display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;white-space:nowrap;height:20px}cmat-vertical-navigation cmat-vertical-navigation-aside-item>.cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation cmat-vertical-navigation-basic-item>.cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper{margin:0 12px}cmat-vertical-navigation cmat-vertical-navigation-aside-item,cmat-vertical-navigation cmat-vertical-navigation-basic-item,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item{margin-bottom:4px}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item{cursor:pointer}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge+.cmat-vertical-navigation-item-arrow{margin-left:8px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow{height:20px;line-height:20px;margin-left:auto;transition:transform .3s cubic-bezier(.25,.8,.25,1),color 375ms cubic-bezier(.25,.8,.25,1)}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item.cmat-vertical-navigation-item-expanded>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow{transform:rotate(90deg)}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-children{margin-top:6px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-children>*:last-child{padding-bottom:6px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-children>*:last-child>.cmat-vertical-navigation-item-children>*:last-child{padding-bottom:0}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding:10px 16px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children{overflow:hidden}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding-left:56px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding-left:72px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding-left:88px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding-left:104px}cmat-vertical-navigation cmat-vertical-navigation-divider-item{margin:12px 0}cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper{height:1px;box-shadow:0 1px}cmat-vertical-navigation cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon{display:none!important}cmat-vertical-navigation cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-title{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}cmat-vertical-navigation cmat-vertical-navigation-spacer-item{margin:6px 0}.cmat-vertical-navigation-overlay{position:absolute;inset:0;z-index:170;background-color:#0009}.cmat-vertical-navigation-overlay+.cmat-vertical-navigation-aside-overlay{background-color:transparent}.cmat-vertical-navigation-overlay.cmat-vertical-navigation-overlay-enter{animation:vertical-navigation-overlay-enter .3s cubic-bezier(.25,.8,.25,1)}.cmat-vertical-navigation-overlay.cmat-vertical-navigation-overlay-leave{animation:vertical-navigation-overlay-leave .3s cubic-bezier(.25,.8,.25,1)}.cmat-vertical-navigation-aside-overlay{position:absolute;inset:0;z-index:169;background-color:#0000004d}.cmat-vertical-navigation-aside-overlay.cmat-vertical-navigation-aside-overlay-enter{animation:vertical-navigation-overlay-enter .3s cubic-bezier(.25,.8,.25,1)}.cmat-vertical-navigation-aside-overlay.cmat-vertical-navigation-aside-overlay-leave{animation:vertical-navigation-overlay-leave .3s cubic-bezier(.25,.8,.25,1)}@keyframes vertical-navigation-overlay-enter{0%{opacity:0}to{opacity:1}}@keyframes vertical-navigation-overlay-leave{0%{opacity:1}to{opacity:0}}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact{width:112px;min-width:112px;max-width:112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side{margin-left:-112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-left.cmat-vertical-navigation-opened{margin-left:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side{margin-right:-112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-right.cmat-vertical-navigation-opened{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-right .cmat-vertical-navigation-aside-wrapper{left:auto;right:112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper{margin:4px 8px 0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{flex-direction:column;justify-content:center;padding:12px;border-radius:6px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{margin-top:8px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-title,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-title{font-size:12px;font-weight:500;text-align:center;line-height:16px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle{display:none!important}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge{position:absolute;top:12px;left:64px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item>cmat-vertical-navigation-collapsable-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item>cmat-vertical-navigation-collapsable-item{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item>cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item>cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-aside-wrapper{left:112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over){width:80px;min-width:80px;max-width:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side{margin-left:-80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-left.cmat-vertical-navigation-opened{margin-left:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side{margin-right:-80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-right.cmat-vertical-navigation-opened{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-right .cmat-vertical-navigation-aside-wrapper{left:auto;right:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-right.cmat-vertical-navigation-hover .cmat-vertical-navigation-aside-wrapper{left:auto;right:280px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{width:280px-24px;min-width:280px-24px;max-width:280px-24px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{transition:opacity .4s cubic-bezier(.25,.8,.25,1)}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item:first-of-type{margin-top:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{padding:10px 16px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{white-space:nowrap;opacity:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:before{content:\"\";position:absolute;top:20px;width:23px;border-top-width:2px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-aside-wrapper{left:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-wrapper{width:280px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{white-space:nowrap;animation:removeWhiteSpaceNoWrap 1ms linear .35s;animation-fill-mode:forwards}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-aside-wrapper{left:280px}@keyframes removeWhiteSpaceNoWrap{0%{white-space:nowrap}99%{white-space:nowrap}to{white-space:normal}}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin{width:80px;min-width:80px;max-width:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side{margin-left:-80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-left.cmat-vertical-navigation-opened{margin-left:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side{margin-right:-80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-right.cmat-vertical-navigation-opened{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-right .cmat-vertical-navigation-aside-wrapper{left:auto;right:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item{flex-direction:column;justify-content:center;height:64px;min-height:64px;max-height:64px;padding:0 16px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper{display:flex;align-items:center;justify-content:center}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{justify-content:center;padding:12px;border-radius:4px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon{margin:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-collapsable-item{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-aside-wrapper{left:80px}.fade-in-animation{opacity:1;transition:opacity 225ms cubic-bezier(0,0,.2,1)}@starting-style{.fade-in-animation{opacity:0}}.fade-in-top-animation{opacity:1;transform:translateZ(0);transition:all 225ms cubic-bezier(0,0,.2,1)}@starting-style{.fade-in-top-animation{opacity:0;transform:translate3d(0,-100%,0)}}.fade-in-bottom-animation{opacity:1;transform:translateZ(0);transition:all 225ms cubic-bezier(0,0,.2,1)}@starting-style{.fade-in-bottom-animation{opacity:0;transform:translate3d(0,100%,0)}}.fade-in-left-animation{opacity:1;transform:translateZ(0);transition:all 225ms cubic-bezier(0,0,.2,1)}@starting-style{.fade-in-left-animation{opacity:0;transform:translate3d(-100%,0,0)}}.fade-in-right-animation{opacity:1;transform:translateZ(0);transition:all 225ms cubic-bezier(0,0,.2,1)}@starting-style{.fade-in-right-animation{opacity:0;transform:translate3d(100%,0,0)}}.fade-out-animation{opacity:0;transition:opacity 195ms cubic-bezier(.4,0,1,1)}@starting-style{.fade-out-animation{opacity:1}}.fade-out-top-animation{opacity:0;transform:translate3d(0,-100%,0);transition:all 195ms cubic-bezier(.4,0,1,1)}@starting-style{.fade-out-top-animation{opacity:1;transform:translateZ(0)}}.fade-out-bottom-animation{opacity:0;transform:translate3d(0,100%,0);transition:all 195ms cubic-bezier(.4,0,1,1)}@starting-style{.fade-out-bottom-animation{opacity:1;transform:translateZ(0)}}.fade-out-left-animation{opacity:0;transform:translate3d(-100%,0,0);transition:all 195ms cubic-bezier(.4,0,1,1)}@starting-style{.fade-out-left-animation{opacity:1;transform:translateZ(0)}}.fade-out-right-animation{opacity:0;transform:translate3d(100%,0,0);transition:all 195ms cubic-bezier(.4,0,1,1)}@starting-style{.fade-out-right-animation{opacity:1;transform:translateZ(0)}}\n"], dependencies: [{ kind: "component", type: CmatVerticalNavigationAsideItemComponent, selector: "cmat-vertical-navigation-aside-item", inputs: ["activeItemId", "autoCollapse", "item", "name", "skipChildren", "editState", "hasRouteReuseStrategy"], outputs: ["routeReuseStrategyEmitUrl", "editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationBasicItemComponent, selector: "cmat-vertical-navigation-basic-item", inputs: ["item", "name", "editState", "hasRouteReuseStrategy"], outputs: ["routeReuseStrategyEmitUrl", "editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationCollapsableItemComponent, selector: "cmat-vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item", "name", "editState", "hasRouteReuseStrategy"], outputs: ["routeReuseStrategyEmitUrl", "editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationDividerItemComponent, selector: "cmat-vertical-navigation-divider-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationGroupItemComponent, selector: "cmat-vertical-navigation-group-item", inputs: ["autoCollapse", "item", "name", "editState", "hasRouteReuseStrategy"], outputs: ["routeReuseStrategyEmitUrl", "editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationSpacerItemComponent, selector: "cmat-vertical-navigation-spacer-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1633
1608
|
}
|
|
1634
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1609
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CmatVerticalNavigationComponent, decorators: [{
|
|
1635
1610
|
type: Component,
|
|
1636
|
-
args: [{ selector: 'cmat-vertical-navigation',
|
|
1611
|
+
args: [{ selector: 'cmat-vertical-navigation', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatVerticalNavigation', imports: [CmatVerticalNavigationAsideItemComponent, CmatVerticalNavigationBasicItemComponent,
|
|
1637
1612
|
CmatVerticalNavigationCollapsableItemComponent, CmatVerticalNavigationDividerItemComponent,
|
|
1638
|
-
CmatVerticalNavigationGroupItemComponent, CmatVerticalNavigationSpacerItemComponent], template: "<div class=\"cmat-vertical-navigation-wrapper\">\r\n\r\n <!-- Header -->\r\n <div class=\"cmat-vertical-navigation-header\">\r\n <ng-content select=\"[cmatVerticalNavigationHeader]\"></ng-content>\r\n </div>\r\n\r\n <!-- Content -->\r\n <div #navigationContent class=\"cmat-vertical-navigation-content py-2 overflow-y-auto scrollbar-custom\">\r\n\r\n <!-- Content header -->\r\n <div class=\"cmat-vertical-navigation-content-header\">\r\n <ng-content select=\"[cmatVerticalNavigationContentHeader]\"></ng-content>\r\n </div>\r\n\r\n <!-- Items -->\r\n @for (item of navigation; track trackByFn($index, item)) {\r\n <!-- Skip the hidden items -->\r\n @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\r\n <!-- Aside -->\r\n @if (item.type === 'aside') {\r\n <cmat-vertical-navigation-aside-item [item]=\"item\" [name]=\"name\" [activeItemId]=\"activeAsideItemId\"\r\n [autoCollapse]=\"autoCollapse\" [skipChildren]=\"true\" [editState]=\"editState\"\r\n [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\" (click)=\"toggleAside(item)\"\r\n (editSelectedItemChanged)=\"selectItem($event)\" (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\">\r\n </cmat-vertical-navigation-aside-item>\r\n }\r\n <!-- Basic -->\r\n @if (item.type === 'basic') {\r\n <cmat-vertical-navigation-basic-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\"\r\n [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\" (editSelectedItemChanged)=\"selectItem($event)\"\r\n (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\">\r\n </cmat-vertical-navigation-basic-item>\r\n }\r\n <!-- Collapsable -->\r\n @if (item.type === 'collapsable') {\r\n <cmat-vertical-navigation-collapsable-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\"\r\n [autoCollapse]=\"autoCollapse\" [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\"\r\n (editSelectedItemChanged)=\"selectItem($event)\"\r\n (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\"></cmat-vertical-navigation-collapsable-item>\r\n }\r\n <!-- Divider -->\r\n @if (item.type === 'divider') {\r\n <cmat-vertical-navigation-divider-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\"\r\n (editSelectedItemChanged)=\"selectItem($event)\">\r\n </cmat-vertical-navigation-divider-item>\r\n }\r\n <!-- Group -->\r\n @if (item.type === 'group') {\r\n <cmat-vertical-navigation-group-item [item]=\"item\" [name]=\"name\" [autoCollapse]=\"autoCollapse\"\r\n [editState]=\"editState\" [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\"\r\n (editSelectedItemChanged)=\"selectItem($event)\" (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\">\r\n </cmat-vertical-navigation-group-item>\r\n }\r\n <!-- Spacer -->\r\n @if (item.type === 'spacer') {\r\n <cmat-vertical-navigation-spacer-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\"\r\n (editSelectedItemChanged)=\"selectItem($event)\">\r\n </cmat-vertical-navigation-spacer-item>\r\n }\r\n }\r\n }\r\n\r\n <!-- Content footer -->\r\n <div class=\"cmat-vertical-navigation-content-footer\">\r\n <ng-content select=\"[cmatVerticalNavigationContentFooter]\"></ng-content>\r\n </div>\r\n\r\n </div>\r\n <!-- Footer -->\r\n <div class=\"cmat-vertical-navigation-footer\">\r\n <ng-content select=\"[cmatVerticalNavigationFooter]\"></ng-content>\r\n </div>\r\n\r\n</div>\r\n\r\n<!-- Aside -->\r\n@if (activeAsideItemId) {\r\n<div class=\"cmat-vertical-navigation-aside-wrapper overflow-y-auto scrollbar-custom\" [@fadeInLeft]=\"position === 'left'\"\r\n [@fadeInRight]=\"position === 'right'\" [@fadeOutLeft]=\"position === 'left'\" [@fadeOutRight]=\"position === 'right'\">\r\n <!-- Items -->\r\n @for (item of navigation; track trackByFn($index, item)) {\r\n <!-- Skip the hidden items -->\r\n @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\r\n <!-- Aside -->\r\n @if (item.type === 'aside' && item.id === activeAsideItemId) {\r\n <cmat-vertical-navigation-aside-item [item]=\"item\" [name]=\"name\" [autoCollapse]=\"autoCollapse\"\r\n [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\" (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\">\r\n </cmat-vertical-navigation-aside-item>\r\n }\r\n }\r\n }\r\n</div>\r\n}", styles: ["cmat-vertical-navigation{position:sticky;display:flex;flex-direction:column;flex:1 0 auto;top:0;width:280px;min-width:280px;max-width:280px;height:100%;z-index:200}cmat-vertical-navigation.cmat-vertical-navigation-animations-enabled{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:visibility,margin-left,margin-right,transform,width,max-width,min-width}cmat-vertical-navigation.cmat-vertical-navigation-animations-enabled .cmat-vertical-navigation-wrapper{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:width,max-width,min-width}cmat-vertical-navigation.cmat-vertical-navigation-mode-over{position:fixed;top:0;bottom:0}cmat-vertical-navigation.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side{margin-left:-280px}cmat-vertical-navigation.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side.cmat-vertical-navigation-opened{margin-left:0}cmat-vertical-navigation.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-over{left:0;transform:translate3d(-100%,0,0)}cmat-vertical-navigation.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-over.cmat-vertical-navigation-opened{transform:translateZ(0)}cmat-vertical-navigation.cmat-vertical-navigation-position-left .cmat-vertical-navigation-wrapper{left:0}cmat-vertical-navigation.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side{margin-right:-280px}cmat-vertical-navigation.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side.cmat-vertical-navigation-opened{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-over{right:0;transform:translate3d(100%,0,0)}cmat-vertical-navigation.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-over.cmat-vertical-navigation-opened{transform:translateZ(0)}cmat-vertical-navigation.cmat-vertical-navigation-position-right .cmat-vertical-navigation-wrapper{right:0}cmat-vertical-navigation.cmat-vertical-navigation-inner{position:relative;width:auto;min-width:0;max-width:none;height:auto;min-height:0;max-height:none;box-shadow:none}cmat-vertical-navigation.cmat-vertical-navigation-inner .cmat-vertical-navigation-wrapper{position:relative;overflow:visible;height:auto}cmat-vertical-navigation.cmat-vertical-navigation-inner .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content{overflow:visible!important}cmat-vertical-navigation .cmat-vertical-navigation-wrapper{position:absolute;display:flex;flex:1 1 auto;flex-direction:column;top:0;bottom:0;width:100%;height:100%;overflow:hidden;z-index:10;background:inherit;box-shadow:inset -1px 0 0 var(--cmat-border)}cmat-vertical-navigation .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content{flex:1 1 auto;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}cmat-vertical-navigation .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-divider-item{margin:24px 0}cmat-vertical-navigation .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-group-item{margin-top:24px}cmat-vertical-navigation .cmat-vertical-navigation-aside-wrapper{position:absolute;display:flex;flex:1 1 auto;flex-direction:column;top:0;bottom:0;left:280px;width:280px;height:100%;z-index:5;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;transition-duration:.4s;transition-property:left,right;transition-timing-function:cubic-bezier(.25,.8,.25,1);background:inherit}cmat-vertical-navigation .cmat-vertical-navigation-aside-wrapper>cmat-vertical-navigation-aside-item{padding:24px 0}cmat-vertical-navigation .cmat-vertical-navigation-aside-wrapper>cmat-vertical-navigation-aside-item>.cmat-vertical-navigation-item-wrapper{display:none!important}cmat-vertical-navigation.cmat-vertical-navigation-position-right .cmat-vertical-navigation-aside-wrapper{left:auto;right:280px}cmat-vertical-navigation cmat-vertical-navigation-aside-item,cmat-vertical-navigation cmat-vertical-navigation-basic-item,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item,cmat-vertical-navigation cmat-vertical-navigation-divider-item,cmat-vertical-navigation cmat-vertical-navigation-group-item,cmat-vertical-navigation cmat-vertical-navigation-spacer-item{display:flex;flex-direction:column;flex:1 0 auto;-webkit-user-select:none;user-select:none}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{position:relative;display:flex;align-items:center;justify-content:flex-start;padding:10px 16px;font-size:13px;font-weight:500;line-height:20px;text-decoration:none;border-radius:6px}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled{cursor:default;opacity:.4}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon{margin-right:16px}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle{font-size:11px;line-height:1.5}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge{margin-left:auto}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content{display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;white-space:nowrap;height:20px}cmat-vertical-navigation cmat-vertical-navigation-aside-item>.cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation cmat-vertical-navigation-basic-item>.cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper{margin:0 12px}cmat-vertical-navigation cmat-vertical-navigation-aside-item,cmat-vertical-navigation cmat-vertical-navigation-basic-item,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item{margin-bottom:4px}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item{cursor:pointer}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge+.cmat-vertical-navigation-item-arrow{margin-left:8px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow{height:20px;line-height:20px;margin-left:auto;transition:transform .3s cubic-bezier(.25,.8,.25,1),color 375ms cubic-bezier(.25,.8,.25,1)}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item.cmat-vertical-navigation-item-expanded>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow{transform:rotate(90deg)}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-children{margin-top:6px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-children>*:last-child{padding-bottom:6px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-children>*:last-child>.cmat-vertical-navigation-item-children>*:last-child{padding-bottom:0}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding:10px 16px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children{overflow:hidden}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding-left:56px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding-left:72px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding-left:88px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding-left:104px}cmat-vertical-navigation cmat-vertical-navigation-divider-item{margin:12px 0}cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper{height:1px;box-shadow:0 1px}cmat-vertical-navigation cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon{display:none!important}cmat-vertical-navigation cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-title{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}cmat-vertical-navigation cmat-vertical-navigation-spacer-item{margin:6px 0}.cmat-vertical-navigation-overlay{position:absolute;inset:0;z-index:170;opacity:0;background-color:#0009}.cmat-vertical-navigation-overlay+.cmat-vertical-navigation-aside-overlay{background-color:transparent}.cmat-vertical-navigation-aside-overlay{position:absolute;inset:0;z-index:169;opacity:0;background-color:#0000004d}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact{width:112px;min-width:112px;max-width:112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side{margin-left:-112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-left.cmat-vertical-navigation-opened{margin-left:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side{margin-right:-112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-right.cmat-vertical-navigation-opened{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-right .cmat-vertical-navigation-aside-wrapper{left:auto;right:112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper{margin:4px 8px 0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{flex-direction:column;justify-content:center;padding:12px;border-radius:6px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{margin-top:8px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-title,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-title{font-size:12px;font-weight:500;text-align:center;line-height:16px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle{display:none!important}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge{position:absolute;top:12px;left:64px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item>cmat-vertical-navigation-collapsable-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item>cmat-vertical-navigation-collapsable-item{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item>cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item>cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-aside-wrapper{left:112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over){width:80px;min-width:80px;max-width:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side{margin-left:-80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-left.cmat-vertical-navigation-opened{margin-left:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side{margin-right:-80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-right.cmat-vertical-navigation-opened{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-right .cmat-vertical-navigation-aside-wrapper{left:auto;right:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-right.cmat-vertical-navigation-hover .cmat-vertical-navigation-aside-wrapper{left:auto;right:280px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{width:280px-24px;min-width:280px-24px;max-width:280px-24px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{transition:opacity .4s cubic-bezier(.25,.8,.25,1)}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item:first-of-type{margin-top:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{padding:10px 16px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{white-space:nowrap;opacity:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:before{content:\"\";position:absolute;top:20px;width:23px;border-top-width:2px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-aside-wrapper{left:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-wrapper{width:280px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{white-space:nowrap;animation:removeWhiteSpaceNoWrap 1ms linear .35s;animation-fill-mode:forwards}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-aside-wrapper{left:280px}@keyframes removeWhiteSpaceNoWrap{0%{white-space:nowrap}99%{white-space:nowrap}to{white-space:normal}}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin{width:80px;min-width:80px;max-width:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side{margin-left:-80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-left.cmat-vertical-navigation-opened{margin-left:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side{margin-right:-80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-right.cmat-vertical-navigation-opened{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-right .cmat-vertical-navigation-aside-wrapper{left:auto;right:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item{flex-direction:column;justify-content:center;height:64px;min-height:64px;max-height:64px;padding:0 16px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper{display:flex;align-items:center;justify-content:center}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{justify-content:center;padding:12px;border-radius:4px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon{margin:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-collapsable-item{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-aside-wrapper{left:80px}\n"] }]
|
|
1613
|
+
CmatVerticalNavigationGroupItemComponent, CmatVerticalNavigationSpacerItemComponent], template: "<div class=\"cmat-vertical-navigation-wrapper\">\r\n\r\n <!-- Header -->\r\n <div class=\"cmat-vertical-navigation-header\">\r\n <ng-content select=\"[cmatVerticalNavigationHeader]\"></ng-content>\r\n </div>\r\n\r\n <!-- Content -->\r\n <div #navigationContent class=\"cmat-vertical-navigation-content py-2 overflow-y-auto scrollbar-custom\">\r\n\r\n <!-- Content header -->\r\n <div class=\"cmat-vertical-navigation-content-header\">\r\n <ng-content select=\"[cmatVerticalNavigationContentHeader]\"></ng-content>\r\n </div>\r\n\r\n <!-- Items -->\r\n @for (item of navigation; track trackByFn($index, item)) {\r\n <!-- Skip the hidden items -->\r\n @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\r\n <!-- Aside -->\r\n @if (item.type === 'aside') {\r\n <cmat-vertical-navigation-aside-item [item]=\"item\" [name]=\"name\" [activeItemId]=\"activeAsideItemId\"\r\n [autoCollapse]=\"autoCollapse\" [skipChildren]=\"true\" [editState]=\"editState\"\r\n [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\" (click)=\"toggleAside(item)\"\r\n (editSelectedItemChanged)=\"selectItem($event)\" (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\">\r\n </cmat-vertical-navigation-aside-item>\r\n }\r\n <!-- Basic -->\r\n @if (item.type === 'basic') {\r\n <cmat-vertical-navigation-basic-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\"\r\n [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\" (editSelectedItemChanged)=\"selectItem($event)\"\r\n (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\">\r\n </cmat-vertical-navigation-basic-item>\r\n }\r\n <!-- Collapsable -->\r\n @if (item.type === 'collapsable') {\r\n <cmat-vertical-navigation-collapsable-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\"\r\n [autoCollapse]=\"autoCollapse\" [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\"\r\n (editSelectedItemChanged)=\"selectItem($event)\"\r\n (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\"></cmat-vertical-navigation-collapsable-item>\r\n }\r\n <!-- Divider -->\r\n @if (item.type === 'divider') {\r\n <cmat-vertical-navigation-divider-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\"\r\n (editSelectedItemChanged)=\"selectItem($event)\">\r\n </cmat-vertical-navigation-divider-item>\r\n }\r\n <!-- Group -->\r\n @if (item.type === 'group') {\r\n <cmat-vertical-navigation-group-item [item]=\"item\" [name]=\"name\" [autoCollapse]=\"autoCollapse\"\r\n [editState]=\"editState\" [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\"\r\n (editSelectedItemChanged)=\"selectItem($event)\" (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\">\r\n </cmat-vertical-navigation-group-item>\r\n }\r\n <!-- Spacer -->\r\n @if (item.type === 'spacer') {\r\n <cmat-vertical-navigation-spacer-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\"\r\n (editSelectedItemChanged)=\"selectItem($event)\">\r\n </cmat-vertical-navigation-spacer-item>\r\n }\r\n }\r\n }\r\n\r\n <!-- Content footer -->\r\n <div class=\"cmat-vertical-navigation-content-footer\">\r\n <ng-content select=\"[cmatVerticalNavigationContentFooter]\"></ng-content>\r\n </div>\r\n\r\n </div>\r\n <!-- Footer -->\r\n <div class=\"cmat-vertical-navigation-footer\">\r\n <ng-content select=\"[cmatVerticalNavigationFooter]\"></ng-content>\r\n </div>\r\n\r\n</div>\r\n\r\n<!-- Aside -->\r\n@if (activeAsideItemId) {\r\n<div class=\"cmat-vertical-navigation-aside-wrapper overflow-y-auto scrollbar-custom\"\r\n [animate.enter]=\"position === 'left'?'fade-in-left-animation':'fade-in-right-animation'\"\r\n [animate.leave]=\"position === 'left'?'fade-out-left-animation':'fade-out-right-animation'\">\r\n <!-- Items -->\r\n @for (item of navigation; track trackByFn($index, item)) {\r\n <!-- Skip the hidden items -->\r\n @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\r\n <!-- Aside -->\r\n @if (item.type === 'aside' && item.id === activeAsideItemId) {\r\n <cmat-vertical-navigation-aside-item [item]=\"item\" [name]=\"name\" [autoCollapse]=\"autoCollapse\"\r\n [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\" (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\">\r\n </cmat-vertical-navigation-aside-item>\r\n }\r\n }\r\n }\r\n</div>\r\n}", styles: ["cmat-vertical-navigation{position:sticky;display:flex;flex-direction:column;flex:1 0 auto;top:0;width:280px;min-width:280px;max-width:280px;height:100%;z-index:200}cmat-vertical-navigation.cmat-vertical-navigation-animations-enabled{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:visibility,margin-left,margin-right,transform,width,max-width,min-width}cmat-vertical-navigation.cmat-vertical-navigation-animations-enabled .cmat-vertical-navigation-wrapper{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:width,max-width,min-width}cmat-vertical-navigation.cmat-vertical-navigation-mode-over{position:fixed;top:0;bottom:0}cmat-vertical-navigation.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side{margin-left:-280px}cmat-vertical-navigation.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side.cmat-vertical-navigation-opened{margin-left:0}cmat-vertical-navigation.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-over{left:0;transform:translate3d(-100%,0,0)}cmat-vertical-navigation.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-over.cmat-vertical-navigation-opened{transform:translateZ(0)}cmat-vertical-navigation.cmat-vertical-navigation-position-left .cmat-vertical-navigation-wrapper{left:0}cmat-vertical-navigation.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side{margin-right:-280px}cmat-vertical-navigation.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side.cmat-vertical-navigation-opened{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-over{right:0;transform:translate3d(100%,0,0)}cmat-vertical-navigation.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-over.cmat-vertical-navigation-opened{transform:translateZ(0)}cmat-vertical-navigation.cmat-vertical-navigation-position-right .cmat-vertical-navigation-wrapper{right:0}cmat-vertical-navigation.cmat-vertical-navigation-inner{position:relative;width:auto;min-width:0;max-width:none;height:auto;min-height:0;max-height:none;box-shadow:none}cmat-vertical-navigation.cmat-vertical-navigation-inner .cmat-vertical-navigation-wrapper{position:relative;overflow:visible;height:auto}cmat-vertical-navigation.cmat-vertical-navigation-inner .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content{overflow:visible!important}cmat-vertical-navigation .cmat-vertical-navigation-wrapper{position:absolute;display:flex;flex:1 1 auto;flex-direction:column;top:0;bottom:0;width:100%;height:100%;overflow:hidden;z-index:10;background:inherit;box-shadow:inset -1px 0 0 var(--cmat-border)}cmat-vertical-navigation .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content{flex:1 1 auto;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}cmat-vertical-navigation .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-divider-item{margin:24px 0}cmat-vertical-navigation .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-group-item{margin-top:24px}cmat-vertical-navigation .cmat-vertical-navigation-aside-wrapper{position:absolute;display:flex;flex:1 1 auto;flex-direction:column;top:0;bottom:0;left:280px;width:280px;height:100%;z-index:5;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;background:inherit}cmat-vertical-navigation .cmat-vertical-navigation-aside-wrapper>cmat-vertical-navigation-aside-item{padding:24px 0}cmat-vertical-navigation .cmat-vertical-navigation-aside-wrapper>cmat-vertical-navigation-aside-item>.cmat-vertical-navigation-item-wrapper{display:none!important}cmat-vertical-navigation.cmat-vertical-navigation-position-right .cmat-vertical-navigation-aside-wrapper{left:auto;right:280px}cmat-vertical-navigation cmat-vertical-navigation-aside-item,cmat-vertical-navigation cmat-vertical-navigation-basic-item,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item,cmat-vertical-navigation cmat-vertical-navigation-divider-item,cmat-vertical-navigation cmat-vertical-navigation-group-item,cmat-vertical-navigation cmat-vertical-navigation-spacer-item{display:flex;flex-direction:column;flex:1 0 auto;-webkit-user-select:none;user-select:none}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{position:relative;display:flex;align-items:center;justify-content:flex-start;padding:10px 16px;font-size:13px;font-weight:500;line-height:20px;text-decoration:none;border-radius:6px}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled{cursor:default;opacity:.4}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon{margin-right:16px}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle{font-size:11px;line-height:1.5}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge{margin-left:auto}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content{display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;white-space:nowrap;height:20px}cmat-vertical-navigation cmat-vertical-navigation-aside-item>.cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation cmat-vertical-navigation-basic-item>.cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper{margin:0 12px}cmat-vertical-navigation cmat-vertical-navigation-aside-item,cmat-vertical-navigation cmat-vertical-navigation-basic-item,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item{margin-bottom:4px}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item{cursor:pointer}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge+.cmat-vertical-navigation-item-arrow{margin-left:8px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow{height:20px;line-height:20px;margin-left:auto;transition:transform .3s cubic-bezier(.25,.8,.25,1),color 375ms cubic-bezier(.25,.8,.25,1)}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item.cmat-vertical-navigation-item-expanded>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow{transform:rotate(90deg)}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-children{margin-top:6px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-children>*:last-child{padding-bottom:6px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-children>*:last-child>.cmat-vertical-navigation-item-children>*:last-child{padding-bottom:0}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding:10px 16px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children{overflow:hidden}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding-left:56px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding-left:72px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding-left:88px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding-left:104px}cmat-vertical-navigation cmat-vertical-navigation-divider-item{margin:12px 0}cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper{height:1px;box-shadow:0 1px}cmat-vertical-navigation cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon{display:none!important}cmat-vertical-navigation cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-title{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}cmat-vertical-navigation cmat-vertical-navigation-spacer-item{margin:6px 0}.cmat-vertical-navigation-overlay{position:absolute;inset:0;z-index:170;background-color:#0009}.cmat-vertical-navigation-overlay+.cmat-vertical-navigation-aside-overlay{background-color:transparent}.cmat-vertical-navigation-overlay.cmat-vertical-navigation-overlay-enter{animation:vertical-navigation-overlay-enter .3s cubic-bezier(.25,.8,.25,1)}.cmat-vertical-navigation-overlay.cmat-vertical-navigation-overlay-leave{animation:vertical-navigation-overlay-leave .3s cubic-bezier(.25,.8,.25,1)}.cmat-vertical-navigation-aside-overlay{position:absolute;inset:0;z-index:169;background-color:#0000004d}.cmat-vertical-navigation-aside-overlay.cmat-vertical-navigation-aside-overlay-enter{animation:vertical-navigation-overlay-enter .3s cubic-bezier(.25,.8,.25,1)}.cmat-vertical-navigation-aside-overlay.cmat-vertical-navigation-aside-overlay-leave{animation:vertical-navigation-overlay-leave .3s cubic-bezier(.25,.8,.25,1)}@keyframes vertical-navigation-overlay-enter{0%{opacity:0}to{opacity:1}}@keyframes vertical-navigation-overlay-leave{0%{opacity:1}to{opacity:0}}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact{width:112px;min-width:112px;max-width:112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side{margin-left:-112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-left.cmat-vertical-navigation-opened{margin-left:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side{margin-right:-112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-right.cmat-vertical-navigation-opened{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-right .cmat-vertical-navigation-aside-wrapper{left:auto;right:112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper{margin:4px 8px 0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{flex-direction:column;justify-content:center;padding:12px;border-radius:6px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{margin-top:8px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-title,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-title{font-size:12px;font-weight:500;text-align:center;line-height:16px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle{display:none!important}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge{position:absolute;top:12px;left:64px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item>cmat-vertical-navigation-collapsable-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item>cmat-vertical-navigation-collapsable-item{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item>cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item>cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-aside-wrapper{left:112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over){width:80px;min-width:80px;max-width:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side{margin-left:-80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-left.cmat-vertical-navigation-opened{margin-left:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side{margin-right:-80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-right.cmat-vertical-navigation-opened{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-right .cmat-vertical-navigation-aside-wrapper{left:auto;right:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-right.cmat-vertical-navigation-hover .cmat-vertical-navigation-aside-wrapper{left:auto;right:280px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{width:280px-24px;min-width:280px-24px;max-width:280px-24px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{transition:opacity .4s cubic-bezier(.25,.8,.25,1)}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item:first-of-type{margin-top:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{padding:10px 16px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{white-space:nowrap;opacity:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:before{content:\"\";position:absolute;top:20px;width:23px;border-top-width:2px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-aside-wrapper{left:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-wrapper{width:280px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{white-space:nowrap;animation:removeWhiteSpaceNoWrap 1ms linear .35s;animation-fill-mode:forwards}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-aside-wrapper{left:280px}@keyframes removeWhiteSpaceNoWrap{0%{white-space:nowrap}99%{white-space:nowrap}to{white-space:normal}}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin{width:80px;min-width:80px;max-width:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side{margin-left:-80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-left.cmat-vertical-navigation-opened{margin-left:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side{margin-right:-80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-right.cmat-vertical-navigation-opened{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-right .cmat-vertical-navigation-aside-wrapper{left:auto;right:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item{flex-direction:column;justify-content:center;height:64px;min-height:64px;max-height:64px;padding:0 16px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper{display:flex;align-items:center;justify-content:center}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{justify-content:center;padding:12px;border-radius:4px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon{margin:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-collapsable-item{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-aside-wrapper{left:80px}.fade-in-animation{opacity:1;transition:opacity 225ms cubic-bezier(0,0,.2,1)}@starting-style{.fade-in-animation{opacity:0}}.fade-in-top-animation{opacity:1;transform:translateZ(0);transition:all 225ms cubic-bezier(0,0,.2,1)}@starting-style{.fade-in-top-animation{opacity:0;transform:translate3d(0,-100%,0)}}.fade-in-bottom-animation{opacity:1;transform:translateZ(0);transition:all 225ms cubic-bezier(0,0,.2,1)}@starting-style{.fade-in-bottom-animation{opacity:0;transform:translate3d(0,100%,0)}}.fade-in-left-animation{opacity:1;transform:translateZ(0);transition:all 225ms cubic-bezier(0,0,.2,1)}@starting-style{.fade-in-left-animation{opacity:0;transform:translate3d(-100%,0,0)}}.fade-in-right-animation{opacity:1;transform:translateZ(0);transition:all 225ms cubic-bezier(0,0,.2,1)}@starting-style{.fade-in-right-animation{opacity:0;transform:translate3d(100%,0,0)}}.fade-out-animation{opacity:0;transition:opacity 195ms cubic-bezier(.4,0,1,1)}@starting-style{.fade-out-animation{opacity:1}}.fade-out-top-animation{opacity:0;transform:translate3d(0,-100%,0);transition:all 195ms cubic-bezier(.4,0,1,1)}@starting-style{.fade-out-top-animation{opacity:1;transform:translateZ(0)}}.fade-out-bottom-animation{opacity:0;transform:translate3d(0,100%,0);transition:all 195ms cubic-bezier(.4,0,1,1)}@starting-style{.fade-out-bottom-animation{opacity:1;transform:translateZ(0)}}.fade-out-left-animation{opacity:0;transform:translate3d(-100%,0,0);transition:all 195ms cubic-bezier(.4,0,1,1)}@starting-style{.fade-out-left-animation{opacity:1;transform:translateZ(0)}}.fade-out-right-animation{opacity:0;transform:translate3d(100%,0,0);transition:all 195ms cubic-bezier(.4,0,1,1)}@starting-style{.fade-out-right-animation{opacity:1;transform:translateZ(0)}}\n"] }]
|
|
1639
1614
|
}], ctorParameters: () => [], propDecorators: { appearance: [{
|
|
1640
1615
|
type: Input
|
|
1641
1616
|
}], autoCollapse: [{
|