cmat 0.0.3 → 0.0.5
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/components/breadcrumb/breadcrumb.component.d.ts +18 -20
- package/components/card/card.component.d.ts +0 -5
- package/components/cascade/cascade-list/cascade-list.component.d.ts +12 -9
- package/components/cascade/cascade-menu/cascade-menu.component.d.ts +0 -1
- package/components/chip-input/chip-input.component.d.ts +34 -0
- package/components/chip-input/index.d.ts +5 -0
- package/components/chip-input/public-api.d.ts +1 -0
- package/components/date-range/date-range.component.d.ts +3 -2
- package/components/json-editor/index.d.ts +5 -0
- package/components/json-editor/json-editor.component.d.ts +25 -0
- package/components/json-editor/public-api.d.ts +1 -0
- package/components/navigation/vertical/components/aside/aside.component.d.ts +2 -2
- package/components/navigation/vertical/components/basic/basic.component.d.ts +2 -2
- package/components/navigation/vertical/components/collapsable/collapsable.component.d.ts +2 -2
- package/components/navigation/vertical/components/divider/divider.component.d.ts +2 -2
- package/components/navigation/vertical/components/group/group.component.d.ts +2 -2
- package/components/navigation/vertical/components/spacer/spacer.component.d.ts +2 -2
- package/components/navigation/vertical/vertical.component.d.ts +2 -2
- package/components/progress-bar/progress-bar.component.d.ts +3 -2
- package/components/rating/rating.component.d.ts +3 -2
- package/components/select-search/select-search.component.d.ts +1 -2
- package/components/select-tree/select-tree.component.d.ts +5 -12
- package/components/timeline/timeline-item/timeline-item.component.d.ts +1 -1
- package/components/transfer-picker/interface.d.ts +1 -1
- package/components/transfer-picker/transfer-picker-source/transfer-picker-source.component.d.ts +4 -4
- package/components/transfer-picker/transfer-picker.service.d.ts +2 -1
- package/directives/autofocus/autofocus.directive.d.ts +1 -3
- package/directives/debounce/debounce-keyup.directive.d.ts +1 -1
- package/directives/digit-only/digit-only.directive.d.ts +2 -0
- package/esm2022/animations/dropdown.mjs +26 -0
- package/esm2022/animations/public-api.mjs +2 -2
- package/esm2022/components/adapter/dayjs-date-adapter.mjs +3 -3
- package/esm2022/components/adapter/dayjs-datetime-adapter.mjs +3 -3
- package/esm2022/components/adapter/native-datetime-adapter.mjs +3 -3
- package/esm2022/components/breadcrumb/breadcrumb-item.directive.mjs +3 -3
- package/esm2022/components/breadcrumb/breadcrumb.component.mjs +16 -17
- package/esm2022/components/breadcrumb/breadcrumb.service.mjs +4 -4
- package/esm2022/components/card/card.component.mjs +5 -14
- package/esm2022/components/cascade/cascade-bottom-sheet/cascade-bottom-sheet.component.mjs +5 -6
- package/esm2022/components/cascade/cascade-list/cascade-list.component.mjs +65 -39
- package/esm2022/components/cascade/cascade-menu/cascade-menu.component.mjs +5 -9
- package/esm2022/components/chip-input/chip-input.component.mjs +144 -0
- package/esm2022/components/chip-input/cmat-components-chip-input.mjs +5 -0
- package/esm2022/components/chip-input/public-api.mjs +2 -0
- package/esm2022/components/date-range/date-range.component.mjs +13 -9
- package/esm2022/components/drawer/drawer.component.mjs +4 -4
- package/esm2022/components/drawer/drawer.service.mjs +3 -3
- package/esm2022/components/fullscreen/fullscreen.component.mjs +3 -3
- package/esm2022/components/highlight/highlight.component.mjs +3 -3
- package/esm2022/components/highlight/highlight.service.mjs +3 -3
- package/esm2022/components/json-editor/cmat-components-json-editor.mjs +5 -0
- package/esm2022/components/json-editor/json-editor.component.mjs +176 -0
- package/esm2022/components/json-editor/public-api.mjs +2 -0
- package/esm2022/components/masonry/masonry.component.mjs +3 -3
- package/esm2022/components/material-color-picker/material-color-picker.component.mjs +6 -6
- package/esm2022/components/material-datetimepicker/calendar-body.mjs +5 -6
- package/esm2022/components/material-datetimepicker/calendar.mjs +7 -8
- package/esm2022/components/material-datetimepicker/clock.mjs +6 -6
- package/esm2022/components/material-datetimepicker/datetimepicker-input.mjs +3 -3
- package/esm2022/components/material-datetimepicker/datetimepicker-intl.mjs +3 -3
- package/esm2022/components/material-datetimepicker/datetimepicker-toggle.mjs +8 -9
- package/esm2022/components/material-datetimepicker/datetimepicker.mjs +7 -7
- package/esm2022/components/material-datetimepicker/month-view.mjs +5 -6
- package/esm2022/components/material-datetimepicker/multi-year-view.mjs +3 -3
- package/esm2022/components/material-datetimepicker/time.mjs +8 -9
- package/esm2022/components/material-datetimepicker/year-view.mjs +3 -3
- package/esm2022/components/navigation/horizontal/components/basic/basic.component.mjs +6 -6
- package/esm2022/components/navigation/horizontal/components/branch/branch.component.mjs +7 -8
- package/esm2022/components/navigation/horizontal/components/divider/divider.component.mjs +3 -3
- package/esm2022/components/navigation/horizontal/components/spacer/spacer.component.mjs +3 -3
- package/esm2022/components/navigation/horizontal/horizontal.component.mjs +5 -6
- package/esm2022/components/navigation/navigation.service.mjs +3 -3
- package/esm2022/components/navigation/vertical/components/aside/aside.component.mjs +9 -9
- package/esm2022/components/navigation/vertical/components/basic/basic.component.mjs +8 -7
- package/esm2022/components/navigation/vertical/components/collapsable/collapsable.component.mjs +9 -11
- package/esm2022/components/navigation/vertical/components/divider/divider.component.mjs +6 -6
- package/esm2022/components/navigation/vertical/components/group/group.component.mjs +10 -11
- package/esm2022/components/navigation/vertical/components/spacer/spacer.component.mjs +7 -7
- package/esm2022/components/navigation/vertical/vertical.component.mjs +9 -11
- package/esm2022/components/pagination/pagination.component.mjs +6 -7
- package/esm2022/components/pagination/pagination.directive.mjs +3 -3
- package/esm2022/components/pagination/pagination.pipe.mjs +5 -5
- package/esm2022/components/pagination/pagination.service.mjs +3 -3
- package/esm2022/components/password-strength/mat-pass-toggle-visibility/mat-pass-toggle-visibility.component.mjs +3 -3
- package/esm2022/components/password-strength/mat-password-strength/mat-password-strength.component.mjs +6 -6
- package/esm2022/components/password-strength/mat-password-strength-info/mat-password-strength-info.component.mjs +8 -9
- package/esm2022/components/popover/popover.component.mjs +5 -5
- package/esm2022/components/progress-bar/progress-bar.component.mjs +11 -8
- package/esm2022/components/rating/rating.component.mjs +14 -6
- package/esm2022/components/select-search/select-no-entries-found.directive.mjs +3 -3
- package/esm2022/components/select-search/select-search-clear.directive.mjs +3 -3
- package/esm2022/components/select-search/select-search.component.mjs +8 -11
- package/esm2022/components/select-tree/select-tree.component.mjs +13 -29
- package/esm2022/components/timeline/timeline-item/timeline-item.component.mjs +18 -16
- package/esm2022/components/timeline/timeline.component.mjs +3 -3
- package/esm2022/components/toast/toast-modal.component.mjs +7 -7
- package/esm2022/components/toast/toast.component.mjs +6 -6
- package/esm2022/components/toast/toast.service.mjs +3 -3
- package/esm2022/components/transfer-picker/filter/filter.component.mjs +17 -8
- package/esm2022/components/transfer-picker/interface.mjs +1 -1
- package/esm2022/components/transfer-picker/search/search.component.mjs +9 -5
- package/esm2022/components/transfer-picker/transfer-picker-source/transfer-picker-source.component.mjs +44 -21
- package/esm2022/components/transfer-picker/transfer-picker-target/transfer-picker-target.component.mjs +7 -6
- package/esm2022/components/transfer-picker/transfer-picker.component.mjs +9 -7
- package/esm2022/components/transfer-picker/transfer-picker.service.mjs +10 -7
- package/esm2022/directives/animate-on-scroll/animate-on-scroll.directive.mjs +3 -3
- package/esm2022/directives/animate-on-scroll/scroll.service.mjs +3 -3
- package/esm2022/directives/autofocus/autofocus.directive.mjs +7 -7
- package/esm2022/directives/debounce/abstract-debounce.directive.mjs +3 -3
- package/esm2022/directives/debounce/debounce-click.directive.mjs +3 -3
- package/esm2022/directives/debounce/debounce-keyup.directive.mjs +5 -5
- package/esm2022/directives/digit-only/digit-only.directive.mjs +20 -4
- package/esm2022/directives/digit-only/mask.directive.mjs +3 -3
- package/esm2022/directives/digit-only/public-api.mjs +1 -1
- package/esm2022/directives/equal-validator/equal-validator.directive.mjs +3 -3
- package/esm2022/lib/mock-api/mock-api.interceptor.mjs +3 -3
- package/esm2022/lib/mock-api/mock-api.service.mjs +3 -3
- package/esm2022/pipes/bytes/bytes.pipe.mjs +3 -3
- package/esm2022/pipes/date-format/date-format.pipe.mjs +3 -3
- package/esm2022/pipes/find-by-key/find-by-key.pipe.mjs +3 -3
- package/esm2022/pipes/group-by/group-by.pipe.mjs +3 -3
- package/esm2022/pipes/keys/keys.pipe.mjs +3 -3
- package/esm2022/pipes/secure/secure-pipe.mjs +5 -5
- package/esm2022/pipes/uppercase/uppercase.pipe.mjs +3 -3
- package/esm2022/services/alert/alert.service.mjs +16 -16
- package/esm2022/services/config/config.constants.mjs +1 -1
- package/esm2022/services/config/config.service.mjs +3 -3
- package/esm2022/services/config/urlStateConfig.service.mjs +5 -5
- package/esm2022/services/confirmation/confirmation.service.mjs +3 -3
- package/esm2022/services/confirmation/dialog/dialog.component.mjs +6 -6
- package/esm2022/services/data/data.service.mjs +4 -4
- package/esm2022/services/loading/loading.interceptor.mjs +3 -3
- package/esm2022/services/loading/loading.service.mjs +3 -3
- package/esm2022/services/local-storage/local-storage.service.mjs +3 -3
- package/esm2022/services/media-watcher/media-watcher.service.mjs +3 -3
- package/esm2022/services/platform/platform.service.mjs +3 -3
- package/esm2022/services/splash-screen/splash-screen.service.mjs +3 -3
- package/esm2022/services/title/title.service.mjs +3 -3
- package/esm2022/services/translation/translation.service.mjs +3 -3
- package/esm2022/services/utils/utils.service.mjs +3 -3
- package/fesm2022/cmat-animations.mjs.map +1 -1
- package/fesm2022/cmat-components-adapter.mjs +9 -9
- package/fesm2022/cmat-components-breadcrumb.mjs +21 -22
- package/fesm2022/cmat-components-breadcrumb.mjs.map +1 -1
- package/fesm2022/cmat-components-card.mjs +4 -13
- package/fesm2022/cmat-components-card.mjs.map +1 -1
- package/fesm2022/cmat-components-cascade.mjs +72 -49
- package/fesm2022/cmat-components-cascade.mjs.map +1 -1
- package/fesm2022/cmat-components-chip-input.mjs +151 -0
- package/fesm2022/cmat-components-chip-input.mjs.map +1 -0
- package/fesm2022/cmat-components-date-range.mjs +12 -8
- package/fesm2022/cmat-components-date-range.mjs.map +1 -1
- package/fesm2022/cmat-components-drawer.mjs +7 -7
- 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-json-editor.mjs +183 -0
- package/fesm2022/cmat-components-json-editor.mjs.map +1 -0
- package/fesm2022/cmat-components-masonry.mjs +3 -3
- package/fesm2022/cmat-components-material-color-picker.mjs +5 -5
- package/fesm2022/cmat-components-material-color-picker.mjs.map +1 -1
- package/fesm2022/cmat-components-material-datetimepicker.mjs +51 -52
- package/fesm2022/cmat-components-material-datetimepicker.mjs.map +1 -1
- package/fesm2022/cmat-components-navigation.mjs +70 -74
- package/fesm2022/cmat-components-navigation.mjs.map +1 -1
- package/fesm2022/cmat-components-pagination.mjs +15 -16
- package/fesm2022/cmat-components-pagination.mjs.map +1 -1
- package/fesm2022/cmat-components-password-strength.mjs +14 -15
- package/fesm2022/cmat-components-password-strength.mjs.map +1 -1
- package/fesm2022/cmat-components-popover.mjs +4 -4
- package/fesm2022/cmat-components-popover.mjs.map +1 -1
- package/fesm2022/cmat-components-progress-bar.mjs +10 -7
- package/fesm2022/cmat-components-progress-bar.mjs.map +1 -1
- package/fesm2022/cmat-components-rating.mjs +13 -5
- package/fesm2022/cmat-components-rating.mjs.map +1 -1
- package/fesm2022/cmat-components-select-search.mjs +13 -16
- package/fesm2022/cmat-components-select-search.mjs.map +1 -1
- package/fesm2022/cmat-components-select-tree.mjs +12 -28
- package/fesm2022/cmat-components-select-tree.mjs.map +1 -1
- package/fesm2022/cmat-components-timeline.mjs +21 -19
- package/fesm2022/cmat-components-timeline.mjs.map +1 -1
- package/fesm2022/cmat-components-toast.mjs +13 -13
- package/fesm2022/cmat-components-toast.mjs.map +1 -1
- package/fesm2022/cmat-components-transfer-picker.mjs +81 -45
- package/fesm2022/cmat-components-transfer-picker.mjs.map +1 -1
- package/fesm2022/cmat-directives-animate-on-scroll.mjs +6 -6
- package/fesm2022/cmat-directives-autofocus.mjs +6 -6
- package/fesm2022/cmat-directives-autofocus.mjs.map +1 -1
- package/fesm2022/cmat-directives-debounce.mjs +10 -10
- package/fesm2022/cmat-directives-debounce.mjs.map +1 -1
- package/fesm2022/cmat-directives-digit-only.mjs +22 -6
- package/fesm2022/cmat-directives-digit-only.mjs.map +1 -1
- 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 +4 -4
- package/fesm2022/cmat-pipes-secure.mjs.map +1 -1
- package/fesm2022/cmat-pipes-uppercase.mjs +3 -3
- package/fesm2022/cmat-services-alert.mjs +15 -15
- package/fesm2022/cmat-services-alert.mjs.map +1 -1
- package/fesm2022/cmat-services-config.mjs +7 -7
- package/fesm2022/cmat-services-config.mjs.map +1 -1
- package/fesm2022/cmat-services-confirmation.mjs +8 -8
- package/fesm2022/cmat-services-confirmation.mjs.map +1 -1
- package/fesm2022/cmat-services-data.mjs +3 -3
- package/fesm2022/cmat-services-data.mjs.map +1 -1
- 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 +46 -36
- package/pipes/secure/secure-pipe.d.ts +1 -1
- package/services/alert/alert.service.d.ts +4 -4
- package/services/config/config.constants.d.ts +1 -1
- package/services/config/urlStateConfig.service.d.ts +3 -2
- package/styles/components/bundle.scss +559 -0
- package/styles/overrides/angular-material.scss +16 -16
- package/styles/styles.scss +6 -1
- package/styles/tailwind.scss +4 -2
- package/components/breadcrumb/breadcrumb.component.scss +0 -18
- package/components/card/card.component.scss +0 -63
- package/components/cascade/cascade-bottom-sheet/cascade-bottom-sheet.component.scss +0 -43
- package/components/cascade/cascade-list/cascade-list.component.scss +0 -22
- package/components/cascade/cascade-menu/cascade-menu.component.scss +0 -48
- package/components/date-range/date-range.component.scss +0 -232
- package/components/drawer/drawer.component.scss +0 -133
- package/components/highlight/highlight.component.scss +0 -3
- package/components/material-color-picker/material-color-picker.component.scss +0 -5
- package/components/material-datetimepicker/calendar-body.scss +0 -58
- package/components/material-datetimepicker/calendar.scss +0 -194
- package/components/material-datetimepicker/clock.scss +0 -90
- package/components/material-datetimepicker/datetimepicker-content.scss +0 -151
- package/components/material-datetimepicker/datetimepicker.scss +0 -145
- package/components/material-datetimepicker/time.scss +0 -82
- package/components/navigation/horizontal/horizontal.component.scss +0 -167
- package/components/navigation/vertical/styles/appearances/compact.scss +0 -103
- package/components/navigation/vertical/styles/appearances/default.scss +0 -550
- package/components/navigation/vertical/styles/appearances/dense.scss +0 -171
- package/components/navigation/vertical/styles/appearances/thin.scss +0 -91
- package/components/navigation/vertical/vertical.component.scss +0 -4
- package/components/password-strength/mat-password-strength-info/mat-password-strength-info.component.scss +0 -19
- package/components/popover/popover.component.scss +0 -174
- package/components/progress-bar/progress-bar.component.scss +0 -7
- package/components/rating/rating.component.scss +0 -33
- package/components/select-search/select-search.component.scss +0 -126
- package/components/select-tree/select-tree.component.scss +0 -54
- package/components/timeline/timeline-item/timeline-item.component.scss +0 -329
- package/components/timeline/timeline.component.scss +0 -42
- package/components/toast/toast-modal.component.scss +0 -119
- package/components/toast/toast.component.scss +0 -62
- package/components/transfer-picker/filter/filter.component.scss +0 -40
- package/components/transfer-picker/search/search.component.scss +0 -7
- package/components/transfer-picker/transfer-picker-source/transfer-picker-source.component.scss +0 -25
- package/components/transfer-picker/transfer-picker-target/transfer-picker-target.component.scss +0 -27
- package/components/transfer-picker/transfer-picker.component.scss +0 -8
- package/esm2022/animations/drop.mjs +0 -26
- package/styles/main.scss +0 -9
- /package/animations/{drop.d.ts → dropdown.d.ts} +0 -0
|
@@ -3,7 +3,7 @@ import { Injectable, Component, ChangeDetectionStrategy, Input, forwardRef, View
|
|
|
3
3
|
import { Subject, ReplaySubject } from 'rxjs';
|
|
4
4
|
import { cmatAnimations } from 'cmat/animations';
|
|
5
5
|
import { takeUntil, filter } from 'rxjs/operators';
|
|
6
|
-
import { NgClass,
|
|
6
|
+
import { NgClass, NgTemplateOutlet } from '@angular/common';
|
|
7
7
|
import * as i2$1 from '@angular/material/menu';
|
|
8
8
|
import { MatMenuModule } from '@angular/material/menu';
|
|
9
9
|
import * as i4 from '@angular/material/icon';
|
|
@@ -146,10 +146,10 @@ class CmatNavigationService {
|
|
|
146
146
|
}
|
|
147
147
|
return null;
|
|
148
148
|
}
|
|
149
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
150
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.
|
|
149
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatNavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
150
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatNavigationService, providedIn: 'root' }); }
|
|
151
151
|
}
|
|
152
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
152
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatNavigationService, decorators: [{
|
|
153
153
|
type: Injectable,
|
|
154
154
|
args: [{
|
|
155
155
|
providedIn: 'root'
|
|
@@ -185,10 +185,10 @@ class CmatHorizontalNavigationSpacerItemComponent {
|
|
|
185
185
|
this._unsubscribeAll.next(void 0);
|
|
186
186
|
this._unsubscribeAll.complete();
|
|
187
187
|
}
|
|
188
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
189
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.
|
|
188
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatHorizontalNavigationSpacerItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CmatNavigationService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
189
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.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 }); }
|
|
190
190
|
}
|
|
191
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
191
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatHorizontalNavigationSpacerItemComponent, decorators: [{
|
|
192
192
|
type: Component,
|
|
193
193
|
args: [{ selector: 'cmat-horizontal-navigation-spacer-item', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgClass], template: "<!-- Spacer -->\r\n<div class=\"cmat-horizontal-navigation-item-wrapper\" [ngClass]=\"item.classes?.wrapper\"></div>" }]
|
|
194
194
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: CmatNavigationService }], propDecorators: { item: [{
|
|
@@ -226,10 +226,10 @@ class CmatHorizontalNavigationDividerItemComponent {
|
|
|
226
226
|
this._unsubscribeAll.next(void 0);
|
|
227
227
|
this._unsubscribeAll.complete();
|
|
228
228
|
}
|
|
229
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
230
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.
|
|
229
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatHorizontalNavigationDividerItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CmatNavigationService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
230
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.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 }); }
|
|
231
231
|
}
|
|
232
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
232
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatHorizontalNavigationDividerItemComponent, decorators: [{
|
|
233
233
|
type: Component,
|
|
234
234
|
args: [{ selector: 'cmat-horizontal-navigation-divider-item', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgClass], template: "<!-- Divider -->\r\n<div class=\"cmat-horizontal-navigation-item-wrapper divider\" [ngClass]=\"item.classes?.wrapper\"></div>" }]
|
|
235
235
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: CmatNavigationService }], propDecorators: { item: [{
|
|
@@ -282,12 +282,12 @@ class CmatHorizontalNavigationBasicItemComponent {
|
|
|
282
282
|
this._unsubscribeAll.next(void 0);
|
|
283
283
|
this._unsubscribeAll.complete();
|
|
284
284
|
}
|
|
285
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
286
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
285
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatHorizontalNavigationBasicItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CmatNavigationService }, { token: i2.CmatUtilsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
286
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CmatHorizontalNavigationBasicItemComponent, isStandalone: true, selector: "cmat-horizontal-navigation-basic-item", inputs: { item: "item", name: "name" }, ngImport: i0, template: "<!-- Item wrapper -->\n<div class=\"cmat-horizontal-navigation-item-wrapper\"\n [class.cmat-horizontal-navigation-item-has-subtitle]=\"!!item.subTitle\" [ngClass]=\"item.classes?.wrapper\">\n\n <!-- Item with an internal link -->\n @if (item.link && !item.externalLink && !item.function && !item.disabled) {\n <div class=\"cmat-horizontal-navigation-item\"\n [ngClass]=\"{'cmat-horizontal-navigation-item-active-forced': item.active}\" [routerLink]=\"[item.link]\"\n [routerLinkActive]=\"'cmat-horizontal-navigation-item-active'\"\n [routerLinkActiveOptions]=\"isActiveMatchOptions\" [matTooltip]=\"item.tooltip || ''\">\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n </div>\n }\n\n <!-- Item with an external link -->\n @if (item.link && item.externalLink && !item.function && !item.disabled) {\n <a class=\"cmat-horizontal-navigation-item\" [href]=\"item.link\" [target]=\"item.target || '_blank'\"\n [matTooltip]=\"item.tooltip || ''\">\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n </a>\n }\n\n <!-- Item with a function -->\n @if (!item.link && item.function && !item.disabled) {\n <div class=\"cmat-horizontal-navigation-item\" role=\"presentation\"\n [ngClass]=\"{'cmat-horizontal-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\"\n (click)=\"item.function(item)\">\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n </div>\n }\n\n <!-- Item with an internal link and function -->\n @if (item.link && !item.externalLink && item.function && !item.disabled) {\n <div class=\"cmat-horizontal-navigation-item\" role=\"presentation\"\n [ngClass]=\"{'cmat-horizontal-navigation-item-active-forced': item.active}\" [routerLink]=\"[item.link]\"\n [routerLinkActive]=\"'cmat-horizontal-navigation-item-active'\"\n [routerLinkActiveOptions]=\"isActiveMatchOptions\" [matTooltip]=\"item.tooltip || ''\"\n (click)=\"item.function(item)\">\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n </div>\n }\n\n <!-- Item with an external link and function -->\n @if (item.link && item.externalLink && item.function && !item.disabled) {\n <a class=\"cmat-horizontal-navigation-item\" [href]=\"item.link\" [target]=\"item.target || '_blank'\"\n [matTooltip]=\"item.tooltip || ''\" (click)=\"item.function(item)\" mat-menu-item>\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n </a>\n }\n\n <!-- Item with a no link and no function -->\n @if (!item.link && !item.function && !item.disabled) {\n <div class=\"cmat-horizontal-navigation-item\"\n [ngClass]=\"{'cmat-horizontal-navigation-item-active-forced': item.active}\"\n [matTooltip]=\"item.tooltip || ''\">\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n </div>\n }\n\n <!-- Item is disabled -->\n @if (item.disabled) {\n <div class=\"cmat-horizontal-navigation-item cmat-horizontal-navigation-item-disabled\">\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n </div>\n }\n\n</div>\n\n<!-- Item template -->\n<ng-template #itemTemplate>\n\n <!-- Icon -->\n @if (item.icon) {\n <mat-icon class=\"cmat-horizontal-navigation-item-icon\" [ngClass]=\"item.classes?.icon\" [svgIcon]=\"item.icon\">\n </mat-icon>\n }\n\n <!-- Title & Subtitle -->\n <div class=\"cmat-horizontal-navigation-item-title-wrapper\">\n <div class=\"cmat-horizontal-navigation-item-title\">\n <span [ngClass]=\"item.classes?.title\">\n {{item.title}}\n </span>\n </div>\n</div>\n\n<!-- Badge -->\n@if (item.badge) {\n <div class=\"cmat-horizontal-navigation-item-badge\">\n <div class=\"cmat-horizontal-navigation-item-badge-content\" [ngClass]=\"item.badge.classes\">\n {{item.badge.title}}\n </div>\n </div>\n}\n\n</ng-template>", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.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: i2$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
287
287
|
}
|
|
288
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
288
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatHorizontalNavigationBasicItemComponent, decorators: [{
|
|
289
289
|
type: Component,
|
|
290
|
-
args: [{ selector: 'cmat-horizontal-navigation-basic-item', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgClass,
|
|
290
|
+
args: [{ selector: 'cmat-horizontal-navigation-basic-item', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgClass, RouterLink, RouterLinkActive, MatTooltipModule, NgTemplateOutlet, MatMenuModule, MatIconModule], template: "<!-- Item wrapper -->\n<div class=\"cmat-horizontal-navigation-item-wrapper\"\n [class.cmat-horizontal-navigation-item-has-subtitle]=\"!!item.subTitle\" [ngClass]=\"item.classes?.wrapper\">\n\n <!-- Item with an internal link -->\n @if (item.link && !item.externalLink && !item.function && !item.disabled) {\n <div class=\"cmat-horizontal-navigation-item\"\n [ngClass]=\"{'cmat-horizontal-navigation-item-active-forced': item.active}\" [routerLink]=\"[item.link]\"\n [routerLinkActive]=\"'cmat-horizontal-navigation-item-active'\"\n [routerLinkActiveOptions]=\"isActiveMatchOptions\" [matTooltip]=\"item.tooltip || ''\">\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n </div>\n }\n\n <!-- Item with an external link -->\n @if (item.link && item.externalLink && !item.function && !item.disabled) {\n <a class=\"cmat-horizontal-navigation-item\" [href]=\"item.link\" [target]=\"item.target || '_blank'\"\n [matTooltip]=\"item.tooltip || ''\">\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n </a>\n }\n\n <!-- Item with a function -->\n @if (!item.link && item.function && !item.disabled) {\n <div class=\"cmat-horizontal-navigation-item\" role=\"presentation\"\n [ngClass]=\"{'cmat-horizontal-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\"\n (click)=\"item.function(item)\">\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n </div>\n }\n\n <!-- Item with an internal link and function -->\n @if (item.link && !item.externalLink && item.function && !item.disabled) {\n <div class=\"cmat-horizontal-navigation-item\" role=\"presentation\"\n [ngClass]=\"{'cmat-horizontal-navigation-item-active-forced': item.active}\" [routerLink]=\"[item.link]\"\n [routerLinkActive]=\"'cmat-horizontal-navigation-item-active'\"\n [routerLinkActiveOptions]=\"isActiveMatchOptions\" [matTooltip]=\"item.tooltip || ''\"\n (click)=\"item.function(item)\">\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n </div>\n }\n\n <!-- Item with an external link and function -->\n @if (item.link && item.externalLink && item.function && !item.disabled) {\n <a class=\"cmat-horizontal-navigation-item\" [href]=\"item.link\" [target]=\"item.target || '_blank'\"\n [matTooltip]=\"item.tooltip || ''\" (click)=\"item.function(item)\" mat-menu-item>\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n </a>\n }\n\n <!-- Item with a no link and no function -->\n @if (!item.link && !item.function && !item.disabled) {\n <div class=\"cmat-horizontal-navigation-item\"\n [ngClass]=\"{'cmat-horizontal-navigation-item-active-forced': item.active}\"\n [matTooltip]=\"item.tooltip || ''\">\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n </div>\n }\n\n <!-- Item is disabled -->\n @if (item.disabled) {\n <div class=\"cmat-horizontal-navigation-item cmat-horizontal-navigation-item-disabled\">\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n </div>\n }\n\n</div>\n\n<!-- Item template -->\n<ng-template #itemTemplate>\n\n <!-- Icon -->\n @if (item.icon) {\n <mat-icon class=\"cmat-horizontal-navigation-item-icon\" [ngClass]=\"item.classes?.icon\" [svgIcon]=\"item.icon\">\n </mat-icon>\n }\n\n <!-- Title & Subtitle -->\n <div class=\"cmat-horizontal-navigation-item-title-wrapper\">\n <div class=\"cmat-horizontal-navigation-item-title\">\n <span [ngClass]=\"item.classes?.title\">\n {{item.title}}\n </span>\n </div>\n</div>\n\n<!-- Badge -->\n@if (item.badge) {\n <div class=\"cmat-horizontal-navigation-item-badge\">\n <div class=\"cmat-horizontal-navigation-item-badge-content\" [ngClass]=\"item.badge.classes\">\n {{item.badge.title}}\n </div>\n </div>\n}\n\n</ng-template>" }]
|
|
291
291
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: CmatNavigationService }, { type: i2.CmatUtilsService }], propDecorators: { item: [{
|
|
292
292
|
type: Input
|
|
293
293
|
}], name: [{
|
|
@@ -344,14 +344,13 @@ class CmatHorizontalNavigationBranchItemComponent {
|
|
|
344
344
|
trackByFn(index, item) {
|
|
345
345
|
return item.id || index;
|
|
346
346
|
}
|
|
347
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
348
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
347
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatHorizontalNavigationBranchItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CmatNavigationService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
348
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CmatHorizontalNavigationBranchItemComponent, isStandalone: true, selector: "cmat-horizontal-navigation-branch-item", inputs: { child: "child", item: "item", name: "name" }, viewQueries: [{ propertyName: "matMenu", first: true, predicate: ["matMenu"], descendants: true, static: true }], ngImport: i0, template: "@if (!child) {\n <div [ngClass]=\"{'cmat-horizontal-navigation-menu-active': trigger.menuOpen,\n 'cmat-horizontal-navigation-menu-active-forced': item.active}\" [matMenuTriggerFor]=\"matMenu\"\n (onMenuOpen)=\"triggerChangeDetection()\" (onMenuClose)=\"triggerChangeDetection()\" #trigger=\"matMenuTrigger\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item}\"></ng-container>\n </div>\n}\n\n<mat-menu class=\"cmat-horizontal-navigation-menu-panel\" [overlapTrigger]=\"false\" #matMenu=\"matMenu\">\n\n @for (item of item.children; track trackByFn($index, item)) {\n <!-- Skip the hidden items -->\n @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\n <!-- Basic -->\n @if (item.type === 'basic') {\n <div class=\"cmat-horizontal-navigation-menu-item\" [disabled]=\"item.disabled\" mat-menu-item>\n <cmat-horizontal-navigation-basic-item [item]=\"item\" [name]=\"name\">\n </cmat-horizontal-navigation-basic-item>\n </div>\n }\n <!-- Branch: aside, collapsable, group -->\n @if (item.type === 'aside' || item.type === 'collapsable' || item.type === 'group') {\n <div class=\"cmat-horizontal-navigation-menu-item\" [disabled]=\"item.disabled\"\n [matMenuTriggerFor]=\"branch.matMenu\" mat-menu-item>\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item}\"></ng-container>\n <cmat-horizontal-navigation-branch-item [child]=\"true\" [item]=\"item\" [name]=\"name\" #branch>\n </cmat-horizontal-navigation-branch-item>\n </div>\n }\n <!-- Divider -->\n @if (item.type === 'divider') {\n <div class=\"cmat-horizontal-navigation-menu-item\" mat-menu-item>\n <cmat-horizontal-navigation-divider-item [item]=\"item\" [name]=\"name\">\n </cmat-horizontal-navigation-divider-item>\n </div>\n }\n }\n }\n\n</mat-menu>\n\n<!-- Item template -->\n<ng-template let-item #itemTemplate>\n\n <div class=\"cmat-horizontal-navigation-item-wrapper\"\n [class.cmat-horizontal-navigation-item-has-subtitle]=\"!!item.subTitle\" [ngClass]=\"item.classes?.wrapper\">\n\n <div class=\"cmat-horizontal-navigation-item\" [ngClass]=\"{'cmat-horizontal-navigation-item-disabled': item.disabled,\n 'cmat-horizontal-navigation-item-active-forced': item.active}\"\n [matTooltip]=\"item.tooltip || ''\">\n\n <!-- Icon -->\n @if (item.icon) {\n <mat-icon class=\"cmat-horizontal-navigation-item-icon\" [ngClass]=\"item.classes?.icon\"\n [svgIcon]=\"item.icon\"></mat-icon>\n }\n\n <!-- Title & Subtitle -->\n <div class=\"cmat-horizontal-navigation-item-title-wrapper\">\n <div class=\"cmat-horizontal-navigation-item-title\">\n <span [ngClass]=\"item.classes?.title\">\n {{item.title}}\n </span>\n </div>\n </div>\n\n <!-- Badge -->\n @if (item.badge) {\n <div class=\"cmat-horizontal-navigation-item-badge\">\n <div class=\"cmat-horizontal-navigation-item-badge-content\" [ngClass]=\"item.badge.classes\">\n {{item.badge.title}}\n </div>\n </div>\n }\n </div>\n</div>\n\n</ng-template>", dependencies: [{ kind: "component", type: i0.forwardRef(() => CmatHorizontalNavigationBranchItemComponent), selector: "cmat-horizontal-navigation-branch-item", inputs: ["child", "item", "name"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatMenuModule) }, { kind: "component", type: i0.forwardRef(() => i2$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(() => i2$1.MatMenuItem), selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i0.forwardRef(() => i2$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"] }, { 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(() => i3.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(() => i4.MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
349
349
|
}
|
|
350
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
350
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatHorizontalNavigationBranchItemComponent, decorators: [{
|
|
351
351
|
type: Component,
|
|
352
|
-
args: [{ selector: 'cmat-horizontal-navigation-branch-item', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
|
|
353
|
-
forwardRef(() => CmatHorizontalNavigationBranchItemComponent),
|
|
354
|
-
CmatHorizontalNavigationDividerItemComponent, MatTooltipModule, MatIconModule], template: "<ng-container *ngIf=\"!child\">\r\n <div [ngClass]=\"{'cmat-horizontal-navigation-menu-active': trigger.menuOpen,\r\n 'cmat-horizontal-navigation-menu-active-forced': item.active}\" [matMenuTriggerFor]=\"matMenu\"\r\n (onMenuOpen)=\"triggerChangeDetection()\" (onMenuClose)=\"triggerChangeDetection()\" #trigger=\"matMenuTrigger\">\r\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item}\"></ng-container>\r\n </div>\r\n</ng-container>\r\n\r\n<mat-menu class=\"cmat-horizontal-navigation-menu-panel\" [overlapTrigger]=\"false\" #matMenu=\"matMenu\">\r\n\r\n <ng-container *ngFor=\"let item of item.children; trackBy: trackByFn\">\r\n\r\n <!-- Skip the hidden items -->\r\n <ng-container *ngIf=\"(item.hidden && !item.hidden(item)) || !item.hidden\">\r\n\r\n <!-- Basic -->\r\n <ng-container *ngIf=\"item.type === 'basic'\">\r\n <div class=\"cmat-horizontal-navigation-menu-item\" [disabled]=\"item.disabled\" mat-menu-item>\r\n <cmat-horizontal-navigation-basic-item [item]=\"item\" [name]=\"name\">\r\n </cmat-horizontal-navigation-basic-item>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- Branch: aside, collapsable, group -->\r\n <ng-container *ngIf=\"item.type === 'aside' || item.type === 'collapsable' || item.type === 'group'\">\r\n <div class=\"cmat-horizontal-navigation-menu-item\" [disabled]=\"item.disabled\"\r\n [matMenuTriggerFor]=\"branch.matMenu\" mat-menu-item>\r\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item}\"></ng-container>\r\n <cmat-horizontal-navigation-branch-item [child]=\"true\" [item]=\"item\" [name]=\"name\" #branch>\r\n </cmat-horizontal-navigation-branch-item>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- Divider -->\r\n <ng-container *ngIf=\"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 </ng-container>\r\n\r\n </ng-container>\r\n\r\n </ng-container>\r\n\r\n</mat-menu>\r\n\r\n<!-- Item template -->\r\n<ng-template let-item #itemTemplate>\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 <ng-container *ngIf=\"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 </ng-container>\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 <!-- <ng-container *ngIf=\"item.subTitle\">\r\n <div class=\"cmat-horizontal-navigation-item-subtitle text-hint\">\r\n <span [ngClass]=\"item.classes?.subtitle\">\r\n {{item.subTitle}}\r\n </span>\r\n </div>\r\n </ng-container> -->\r\n </div>\r\n\r\n <!-- Badge -->\r\n <ng-container *ngIf=\"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 </ng-container>\r\n </div>\r\n </div>\r\n\r\n</ng-template>" }]
|
|
352
|
+
args: [{ selector: 'cmat-horizontal-navigation-branch-item', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgClass, MatMenuModule, NgTemplateOutlet, CmatHorizontalNavigationBasicItemComponent,
|
|
353
|
+
forwardRef(() => CmatHorizontalNavigationBranchItemComponent), CmatHorizontalNavigationDividerItemComponent, MatTooltipModule, MatIconModule], template: "@if (!child) {\n <div [ngClass]=\"{'cmat-horizontal-navigation-menu-active': trigger.menuOpen,\n 'cmat-horizontal-navigation-menu-active-forced': item.active}\" [matMenuTriggerFor]=\"matMenu\"\n (onMenuOpen)=\"triggerChangeDetection()\" (onMenuClose)=\"triggerChangeDetection()\" #trigger=\"matMenuTrigger\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item}\"></ng-container>\n </div>\n}\n\n<mat-menu class=\"cmat-horizontal-navigation-menu-panel\" [overlapTrigger]=\"false\" #matMenu=\"matMenu\">\n\n @for (item of item.children; track trackByFn($index, item)) {\n <!-- Skip the hidden items -->\n @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\n <!-- Basic -->\n @if (item.type === 'basic') {\n <div class=\"cmat-horizontal-navigation-menu-item\" [disabled]=\"item.disabled\" mat-menu-item>\n <cmat-horizontal-navigation-basic-item [item]=\"item\" [name]=\"name\">\n </cmat-horizontal-navigation-basic-item>\n </div>\n }\n <!-- Branch: aside, collapsable, group -->\n @if (item.type === 'aside' || item.type === 'collapsable' || item.type === 'group') {\n <div class=\"cmat-horizontal-navigation-menu-item\" [disabled]=\"item.disabled\"\n [matMenuTriggerFor]=\"branch.matMenu\" mat-menu-item>\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item}\"></ng-container>\n <cmat-horizontal-navigation-branch-item [child]=\"true\" [item]=\"item\" [name]=\"name\" #branch>\n </cmat-horizontal-navigation-branch-item>\n </div>\n }\n <!-- Divider -->\n @if (item.type === 'divider') {\n <div class=\"cmat-horizontal-navigation-menu-item\" mat-menu-item>\n <cmat-horizontal-navigation-divider-item [item]=\"item\" [name]=\"name\">\n </cmat-horizontal-navigation-divider-item>\n </div>\n }\n }\n }\n\n</mat-menu>\n\n<!-- Item template -->\n<ng-template let-item #itemTemplate>\n\n <div class=\"cmat-horizontal-navigation-item-wrapper\"\n [class.cmat-horizontal-navigation-item-has-subtitle]=\"!!item.subTitle\" [ngClass]=\"item.classes?.wrapper\">\n\n <div class=\"cmat-horizontal-navigation-item\" [ngClass]=\"{'cmat-horizontal-navigation-item-disabled': item.disabled,\n 'cmat-horizontal-navigation-item-active-forced': item.active}\"\n [matTooltip]=\"item.tooltip || ''\">\n\n <!-- Icon -->\n @if (item.icon) {\n <mat-icon class=\"cmat-horizontal-navigation-item-icon\" [ngClass]=\"item.classes?.icon\"\n [svgIcon]=\"item.icon\"></mat-icon>\n }\n\n <!-- Title & Subtitle -->\n <div class=\"cmat-horizontal-navigation-item-title-wrapper\">\n <div class=\"cmat-horizontal-navigation-item-title\">\n <span [ngClass]=\"item.classes?.title\">\n {{item.title}}\n </span>\n </div>\n </div>\n\n <!-- Badge -->\n @if (item.badge) {\n <div class=\"cmat-horizontal-navigation-item-badge\">\n <div class=\"cmat-horizontal-navigation-item-badge-content\" [ngClass]=\"item.badge.classes\">\n {{item.badge.title}}\n </div>\n </div>\n }\n </div>\n</div>\n\n</ng-template>" }]
|
|
355
354
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: CmatNavigationService }], propDecorators: { child: [{
|
|
356
355
|
type: Input
|
|
357
356
|
}], item: [{
|
|
@@ -429,12 +428,12 @@ class CmatHorizontalNavigationComponent {
|
|
|
429
428
|
trackByFn(index, item) {
|
|
430
429
|
return item.id || index;
|
|
431
430
|
}
|
|
432
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
433
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
431
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatHorizontalNavigationComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CmatNavigationService }, { token: i2.CmatUtilsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
432
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CmatHorizontalNavigationComponent, isStandalone: true, selector: "cmat-horizontal-navigation", inputs: { name: "name", navigation: "navigation" }, exportAs: ["cmatHorizontalNavigation"], usesOnChanges: true, ngImport: i0, template: "<div class=\"cmat-horizontal-navigation-wrapper\">\n\n @for (item of navigation; track trackByFn($index, item)) {\n <!-- Skip the hidden items -->\n @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\n <!-- Basic -->\n @if (item.type === 'basic') {\n <cmat-horizontal-navigation-basic-item class=\"cmat-horizontal-navigation-menu-item\" [item]=\"item\"\n [name]=\"name\"></cmat-horizontal-navigation-basic-item>\n }\n <!-- Branch: aside, collapsable, group -->\n @if (item.type === 'aside' || item.type === 'collapsable' || item.type === 'group') {\n <cmat-horizontal-navigation-branch-item class=\"cmat-horizontal-navigation-menu-item\" [item]=\"item\"\n [name]=\"name\"></cmat-horizontal-navigation-branch-item>\n }\n <!-- Spacer -->\n @if (item.type === 'spacer') {\n <cmat-horizontal-navigation-spacer-item class=\"cmat-horizontal-navigation-menu-item\" [item]=\"item\"\n [name]=\"name\"></cmat-horizontal-navigation-spacer-item>\n }\n }\n }\n\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-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{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"] }, { kind: "component", type: CmatHorizontalNavigationBranchItemComponent, selector: "cmat-horizontal-navigation-branch-item", inputs: ["child", "item", "name"] }, { kind: "component", type: CmatHorizontalNavigationSpacerItemComponent, selector: "cmat-horizontal-navigation-spacer-item", inputs: ["item", "name"] }], animations: cmatAnimations, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
434
433
|
}
|
|
435
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
434
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatHorizontalNavigationComponent, decorators: [{
|
|
436
435
|
type: Component,
|
|
437
|
-
args: [{ selector: 'cmat-horizontal-navigation', animations: cmatAnimations, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatHorizontalNavigation', standalone: true, imports: [
|
|
436
|
+
args: [{ selector: 'cmat-horizontal-navigation', animations: cmatAnimations, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatHorizontalNavigation', standalone: true, imports: [CmatHorizontalNavigationBasicItemComponent, CmatHorizontalNavigationBranchItemComponent, CmatHorizontalNavigationSpacerItemComponent], template: "<div class=\"cmat-horizontal-navigation-wrapper\">\n\n @for (item of navigation; track trackByFn($index, item)) {\n <!-- Skip the hidden items -->\n @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\n <!-- Basic -->\n @if (item.type === 'basic') {\n <cmat-horizontal-navigation-basic-item class=\"cmat-horizontal-navigation-menu-item\" [item]=\"item\"\n [name]=\"name\"></cmat-horizontal-navigation-basic-item>\n }\n <!-- Branch: aside, collapsable, group -->\n @if (item.type === 'aside' || item.type === 'collapsable' || item.type === 'group') {\n <cmat-horizontal-navigation-branch-item class=\"cmat-horizontal-navigation-menu-item\" [item]=\"item\"\n [name]=\"name\"></cmat-horizontal-navigation-branch-item>\n }\n <!-- Spacer -->\n @if (item.type === 'spacer') {\n <cmat-horizontal-navigation-spacer-item class=\"cmat-horizontal-navigation-menu-item\" [item]=\"item\"\n [name]=\"name\"></cmat-horizontal-navigation-spacer-item>\n }\n }\n }\n\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-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{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"] }]
|
|
438
437
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: CmatNavigationService }, { type: i2.CmatUtilsService }], propDecorators: { name: [{
|
|
439
438
|
type: Input
|
|
440
439
|
}], navigation: [{
|
|
@@ -445,7 +444,7 @@ class CmatVerticalNavigationSpacerItemComponent {
|
|
|
445
444
|
constructor(_changeDetectorRef, _cmatNavigationService) {
|
|
446
445
|
this._changeDetectorRef = _changeDetectorRef;
|
|
447
446
|
this._cmatNavigationService = _cmatNavigationService;
|
|
448
|
-
this.
|
|
447
|
+
this.editState = false;
|
|
449
448
|
this.editSelectedItemChanged = new EventEmitter();
|
|
450
449
|
this._unsubscribeAll = new Subject();
|
|
451
450
|
}
|
|
@@ -475,17 +474,17 @@ class CmatVerticalNavigationSpacerItemComponent {
|
|
|
475
474
|
selectItem(item) {
|
|
476
475
|
this.editSelectedItemChanged.next(item);
|
|
477
476
|
}
|
|
478
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
479
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.
|
|
477
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatVerticalNavigationSpacerItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CmatNavigationService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
478
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.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\" [ngClass]=\"item.classes?.wrapper\" role=\"presentation\" (click)=\"selectItem(item);\"></div>", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
480
479
|
}
|
|
481
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
480
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatVerticalNavigationSpacerItemComponent, decorators: [{
|
|
482
481
|
type: Component,
|
|
483
|
-
args: [{ selector: 'cmat-vertical-navigation-spacer-item', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgClass], template: "<!-- Spacer -->\r\n<div class=\"cmat-vertical-navigation-item-wrapper\"
|
|
482
|
+
args: [{ selector: 'cmat-vertical-navigation-spacer-item', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgClass], template: "<!-- Spacer -->\r\n<div class=\"cmat-vertical-navigation-item-wrapper\" [ngClass]=\"item.classes?.wrapper\" role=\"presentation\" (click)=\"selectItem(item);\"></div>" }]
|
|
484
483
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: CmatNavigationService }], propDecorators: { item: [{
|
|
485
484
|
type: Input
|
|
486
485
|
}], name: [{
|
|
487
486
|
type: Input
|
|
488
|
-
}],
|
|
487
|
+
}], editState: [{
|
|
489
488
|
type: Input
|
|
490
489
|
}], editSelectedItemChanged: [{
|
|
491
490
|
type: Output
|
|
@@ -495,7 +494,7 @@ class CmatVerticalNavigationDividerItemComponent {
|
|
|
495
494
|
constructor(_changeDetectorRef, _cmatNavigationService) {
|
|
496
495
|
this._changeDetectorRef = _changeDetectorRef;
|
|
497
496
|
this._cmatNavigationService = _cmatNavigationService;
|
|
498
|
-
this.
|
|
497
|
+
this.editState = false;
|
|
499
498
|
this.editSelectedItemChanged = new EventEmitter();
|
|
500
499
|
this._unsubscribeAll = new Subject();
|
|
501
500
|
}
|
|
@@ -525,17 +524,17 @@ class CmatVerticalNavigationDividerItemComponent {
|
|
|
525
524
|
selectItem(item) {
|
|
526
525
|
this.editSelectedItemChanged.next(item);
|
|
527
526
|
}
|
|
528
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
529
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.
|
|
527
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatVerticalNavigationDividerItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CmatNavigationService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
528
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.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 }); }
|
|
530
529
|
}
|
|
531
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
530
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatVerticalNavigationDividerItemComponent, decorators: [{
|
|
532
531
|
type: Component,
|
|
533
532
|
args: [{ selector: 'cmat-vertical-navigation-divider-item', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgClass], template: "<!-- Divider -->\r\n<div class=\"cmat-vertical-navigation-item-wrapper divider\" role=\"presentation\" [ngClass]=\"item.classes?.wrapper\" (click)=\"selectItem(item);\"></div>" }]
|
|
534
533
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: CmatNavigationService }], propDecorators: { item: [{
|
|
535
534
|
type: Input
|
|
536
535
|
}], name: [{
|
|
537
536
|
type: Input
|
|
538
|
-
}],
|
|
537
|
+
}], editState: [{
|
|
539
538
|
type: Input
|
|
540
539
|
}], editSelectedItemChanged: [{
|
|
541
540
|
type: Output
|
|
@@ -546,6 +545,7 @@ class CmatVerticalNavigationBasicItemComponent {
|
|
|
546
545
|
this._changeDetectorRef = _changeDetectorRef;
|
|
547
546
|
this._cmatNavigationService = _cmatNavigationService;
|
|
548
547
|
this._cmatUtilsService = _cmatUtilsService;
|
|
548
|
+
this.editState = false;
|
|
549
549
|
this.editSelectedItemChanged = new EventEmitter();
|
|
550
550
|
this._unsubscribeAll = new Subject();
|
|
551
551
|
// Set the equivalent of {exact: false} as default for active match options.
|
|
@@ -589,17 +589,17 @@ class CmatVerticalNavigationBasicItemComponent {
|
|
|
589
589
|
selectItem() {
|
|
590
590
|
this.editSelectedItemChanged.next(this.item);
|
|
591
591
|
}
|
|
592
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
593
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
592
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatVerticalNavigationBasicItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CmatNavigationService }, { token: i2.CmatUtilsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
593
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CmatVerticalNavigationBasicItemComponent, isStandalone: true, selector: "cmat-vertical-navigation-basic-item", inputs: { item: "item", name: "name", editState: "editState" }, outputs: { editSelectedItemChanged: "editSelectedItemChanged" }, ngImport: i0, template: "<!-- Item wrapper -->\n<div class=\"cmat-vertical-navigation-item-wrapper\" [class.cmat-vertical-navigation-item-has-subtitle]=\"!!item.subTitle\"\n [ngClass]=\"item.classes?.wrapper\">\n\n @if(editState){\n <div class=\"cmat-vertical-navigation-item\" role=\"presentation\"\n [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\"\n (click)=\"selectItem()\">\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n </div>\n }@else{\n <!-- Item with an internal link -->\n @if (item.link && !item.externalLink && !item.function && !item.disabled) {\n <a class=\"cmat-vertical-navigation-item\" [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\"\n [routerLink]=\"[item.link]\" [routerLinkActive]=\"'cmat-vertical-navigation-item-active'\"\n [routerLinkActiveOptions]=\"isActiveMatchOptions\" [matTooltip]=\"item.tooltip || ''\">\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n </a>\n }\n\n <!-- Item with an external link -->\n @if (item.link && item.externalLink && !item.function && !item.disabled) {\n <a class=\"cmat-vertical-navigation-item\" [href]=\"item.link\" [target]=\"item.target || '_blank'\"\n [matTooltip]=\"item.tooltip || ''\">\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n </a>\n }\n\n <!-- Item with a function -->\n @if (!item.link && item.function && !item.disabled) {\n <div class=\"cmat-vertical-navigation-item\" role=\"presentation\"\n [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\"\n (click)=\"item.function(item)\">\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n </div>\n }\n\n <!-- Item with an internal link and function -->\n @if (item.link && !item.externalLink && item.function && !item.disabled) {\n <a class=\"cmat-vertical-navigation-item\" [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\"\n [routerLink]=\"[item.link]\" [routerLinkActive]=\"'cmat-vertical-navigation-item-active'\"\n [routerLinkActiveOptions]=\"isActiveMatchOptions\" [matTooltip]=\"item.tooltip || ''\" (click)=\"item.function(item)\">\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n </a>\n }\n\n <!-- Item with an external link and function -->\n @if (item.link && item.externalLink && item.function && !item.disabled) {\n <a class=\"cmat-vertical-navigation-item\" [href]=\"item.link\" [target]=\"item.target || '_blank'\"\n [matTooltip]=\"item.tooltip || ''\" (click)=\"item.function(item)\">\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n </a>\n }\n\n <!-- Item with a no link and no function -->\n @if (!item.link && !item.function && !item.disabled) {\n <div class=\"cmat-vertical-navigation-item\" [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\"\n [matTooltip]=\"item.tooltip || ''\">\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n </div>\n }\n\n <!-- Item is disabled -->\n @if (item.disabled) {\n <div class=\"cmat-vertical-navigation-item cmat-vertical-navigation-item-disabled\" [matTooltip]=\"item.tooltip || ''\">\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n </div>\n }\n }\n</div>\n\n<!-- Item template -->\n<ng-template #itemTemplate>\n\n <!-- Icon -->\n @if (item.icon) {\n <mat-icon class=\"cmat-vertical-navigation-item-icon\" [ngClass]=\"item.classes?.icon\" [svgIcon]=\"item.icon\">\n </mat-icon>\n }\n\n <!-- Title & Subtitle -->\n <div class=\"cmat-vertical-navigation-item-title-wrapper\">\n <div class=\"cmat-vertical-navigation-item-title\">\n <span [ngClass]=\"item.classes?.title\">\n {{item.title}}\n </span>\n </div>\n @if (item.subTitle) {\n <div class=\"cmat-vertical-navigation-item-subtitle\">\n <span [ngClass]=\"item.classes?.subtitle\">\n {{item.subTitle}}\n </span>\n </div>\n }\n </div>\n\n <!-- Badge -->\n @if (item.badge) {\n <div class=\"cmat-vertical-navigation-item-badge\">\n <div class=\"cmat-vertical-navigation-item-badge-content\" [ngClass]=\"item.badge.classes\">\n {{item.badge.title}}\n </div>\n </div>\n }\n</ng-template>", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.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: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
594
594
|
}
|
|
595
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
595
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatVerticalNavigationBasicItemComponent, decorators: [{
|
|
596
596
|
type: Component,
|
|
597
|
-
args: [{ selector: 'cmat-vertical-navigation-basic-item', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgClass,
|
|
597
|
+
args: [{ selector: 'cmat-vertical-navigation-basic-item', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgClass, RouterLink, RouterLinkActive, MatTooltipModule, NgTemplateOutlet, MatIconModule], template: "<!-- Item wrapper -->\n<div class=\"cmat-vertical-navigation-item-wrapper\" [class.cmat-vertical-navigation-item-has-subtitle]=\"!!item.subTitle\"\n [ngClass]=\"item.classes?.wrapper\">\n\n @if(editState){\n <div class=\"cmat-vertical-navigation-item\" role=\"presentation\"\n [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\"\n (click)=\"selectItem()\">\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n </div>\n }@else{\n <!-- Item with an internal link -->\n @if (item.link && !item.externalLink && !item.function && !item.disabled) {\n <a class=\"cmat-vertical-navigation-item\" [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\"\n [routerLink]=\"[item.link]\" [routerLinkActive]=\"'cmat-vertical-navigation-item-active'\"\n [routerLinkActiveOptions]=\"isActiveMatchOptions\" [matTooltip]=\"item.tooltip || ''\">\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n </a>\n }\n\n <!-- Item with an external link -->\n @if (item.link && item.externalLink && !item.function && !item.disabled) {\n <a class=\"cmat-vertical-navigation-item\" [href]=\"item.link\" [target]=\"item.target || '_blank'\"\n [matTooltip]=\"item.tooltip || ''\">\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n </a>\n }\n\n <!-- Item with a function -->\n @if (!item.link && item.function && !item.disabled) {\n <div class=\"cmat-vertical-navigation-item\" role=\"presentation\"\n [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\"\n (click)=\"item.function(item)\">\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n </div>\n }\n\n <!-- Item with an internal link and function -->\n @if (item.link && !item.externalLink && item.function && !item.disabled) {\n <a class=\"cmat-vertical-navigation-item\" [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\"\n [routerLink]=\"[item.link]\" [routerLinkActive]=\"'cmat-vertical-navigation-item-active'\"\n [routerLinkActiveOptions]=\"isActiveMatchOptions\" [matTooltip]=\"item.tooltip || ''\" (click)=\"item.function(item)\">\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n </a>\n }\n\n <!-- Item with an external link and function -->\n @if (item.link && item.externalLink && item.function && !item.disabled) {\n <a class=\"cmat-vertical-navigation-item\" [href]=\"item.link\" [target]=\"item.target || '_blank'\"\n [matTooltip]=\"item.tooltip || ''\" (click)=\"item.function(item)\">\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n </a>\n }\n\n <!-- Item with a no link and no function -->\n @if (!item.link && !item.function && !item.disabled) {\n <div class=\"cmat-vertical-navigation-item\" [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\"\n [matTooltip]=\"item.tooltip || ''\">\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n </div>\n }\n\n <!-- Item is disabled -->\n @if (item.disabled) {\n <div class=\"cmat-vertical-navigation-item cmat-vertical-navigation-item-disabled\" [matTooltip]=\"item.tooltip || ''\">\n <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n </div>\n }\n }\n</div>\n\n<!-- Item template -->\n<ng-template #itemTemplate>\n\n <!-- Icon -->\n @if (item.icon) {\n <mat-icon class=\"cmat-vertical-navigation-item-icon\" [ngClass]=\"item.classes?.icon\" [svgIcon]=\"item.icon\">\n </mat-icon>\n }\n\n <!-- Title & Subtitle -->\n <div class=\"cmat-vertical-navigation-item-title-wrapper\">\n <div class=\"cmat-vertical-navigation-item-title\">\n <span [ngClass]=\"item.classes?.title\">\n {{item.title}}\n </span>\n </div>\n @if (item.subTitle) {\n <div class=\"cmat-vertical-navigation-item-subtitle\">\n <span [ngClass]=\"item.classes?.subtitle\">\n {{item.subTitle}}\n </span>\n </div>\n }\n </div>\n\n <!-- Badge -->\n @if (item.badge) {\n <div class=\"cmat-vertical-navigation-item-badge\">\n <div class=\"cmat-vertical-navigation-item-badge-content\" [ngClass]=\"item.badge.classes\">\n {{item.badge.title}}\n </div>\n </div>\n }\n</ng-template>" }]
|
|
598
598
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: CmatNavigationService }, { type: i2.CmatUtilsService }], propDecorators: { item: [{
|
|
599
599
|
type: Input
|
|
600
600
|
}], name: [{
|
|
601
601
|
type: Input
|
|
602
|
-
}],
|
|
602
|
+
}], editState: [{
|
|
603
603
|
type: Input
|
|
604
604
|
}], editSelectedItemChanged: [{
|
|
605
605
|
type: Output
|
|
@@ -610,7 +610,7 @@ class CmatVerticalNavigationCollapsableItemComponent {
|
|
|
610
610
|
this._changeDetectorRef = _changeDetectorRef;
|
|
611
611
|
this._router = _router;
|
|
612
612
|
this._cmatNavigationService = _cmatNavigationService;
|
|
613
|
-
this.
|
|
613
|
+
this.editState = false;
|
|
614
614
|
this.editSelectedItemChanged = new EventEmitter();
|
|
615
615
|
this.isCollapsed = true;
|
|
616
616
|
this.isExpanded = false;
|
|
@@ -842,23 +842,21 @@ class CmatVerticalNavigationCollapsableItemComponent {
|
|
|
842
842
|
}
|
|
843
843
|
return false;
|
|
844
844
|
}
|
|
845
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
846
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
845
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatVerticalNavigationCollapsableItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.Router }, { token: CmatNavigationService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
846
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CmatVerticalNavigationCollapsableItemComponent, isStandalone: true, selector: "cmat-vertical-navigation-collapsable-item", inputs: { autoCollapse: "autoCollapse", item: "item", name: "name", editState: "editState" }, outputs: { 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\"\n [ngClass]=\"item.classes?.wrapper\">\n\n <div class=\"cmat-vertical-navigation-item\" role=\"presentation\" [ngClass]=\"{'cmat-vertical-navigation-item-disabled': item.disabled}\"\n [matTooltip]=\"item.tooltip || ''\" (click)=\"toggleCollapsable();selectItem(item);\">\n\n <!-- Icon -->\n @if (item.icon) {\n <mat-icon class=\"cmat-vertical-navigation-item-icon\" [ngClass]=\"item.classes?.icon\" [svgIcon]=\"item.icon\">\n </mat-icon>\n }\n\n <!-- Title & Subtitle -->\n <div class=\"cmat-vertical-navigation-item-title-wrapper\">\n <div class=\"cmat-vertical-navigation-item-title\">\n <span [ngClass]=\"item.classes?.title\">\n {{item.title}}\n </span>\n </div>\n @if (item.subTitle) {\n <div class=\"cmat-vertical-navigation-item-subtitle\">\n <span [ngClass]=\"item.classes?.subtitle\">\n {{item.subTitle}}\n </span>\n </div>\n }\n </div>\n\n <!-- Badge -->\n @if (item.badge) {\n <div class=\"cmat-vertical-navigation-item-badge\">\n <div class=\"cmat-vertical-navigation-item-badge-content\" [ngClass]=\"item.badge.classes\">\n {{item.badge.title}}\n </div>\n </div>\n }\n\n <!-- Arrow -->\n <mat-icon class=\"cmat-vertical-navigation-item-arrow icon-size-4\" [svgIcon]=\"'heroicons_outline:chevron-right'\">\n </mat-icon>\n\n </div>\n\n</div>\n\n@if (!isCollapsed) {\n <div class=\"cmat-vertical-navigation-item-children\" @expandCollapse>\n @for (item of item.children; track trackByFn($index, item)) {\n <!-- Skip the hidden items -->\n @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\n <!-- Basic -->\n @if (item.type === 'basic') {\n <cmat-vertical-navigation-basic-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-basic-item>\n }\n <!-- Collapsable -->\n @if (item.type === 'collapsable') {\n <cmat-vertical-navigation-collapsable-item [item]=\"item\" [name]=\"name\" [autoCollapse]=\"autoCollapse\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\n </cmat-vertical-navigation-collapsable-item>\n }\n <!-- Divider -->\n @if (item.type === 'divider') {\n <cmat-vertical-navigation-divider-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\n </cmat-vertical-navigation-divider-item>\n }\n <!-- Group -->\n @if (item.type === 'group') {\n <cmat-vertical-navigation-group-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-group-item>\n }\n <!-- Spacer -->\n @if (item.type === 'spacer') {\n <cmat-vertical-navigation-spacer-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\n </cmat-vertical-navigation-spacer-item>\n }\n }\n }\n </div>\n}", dependencies: [{ kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationCollapsableItemComponent), selector: "cmat-vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatTooltipModule) }, { kind: "directive", type: i0.forwardRef(() => i3.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(() => i4.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"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationGroupItemComponent), selector: "cmat-vertical-navigation-group-item", inputs: ["autoCollapse", "item", "name", "editState"], outputs: ["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"] }], animations: cmatAnimations, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
847
847
|
}
|
|
848
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
848
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatVerticalNavigationCollapsableItemComponent, decorators: [{
|
|
849
849
|
type: Component,
|
|
850
|
-
args: [{ selector: 'cmat-vertical-navigation-collapsable-item', animations: cmatAnimations, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgClass, MatTooltipModule,
|
|
851
|
-
CmatVerticalNavigationBasicItemComponent,
|
|
850
|
+
args: [{ selector: 'cmat-vertical-navigation-collapsable-item', animations: cmatAnimations, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgClass, MatTooltipModule, MatIconModule, CmatVerticalNavigationBasicItemComponent,
|
|
852
851
|
forwardRef(() => CmatVerticalNavigationCollapsableItemComponent),
|
|
853
|
-
CmatVerticalNavigationDividerItemComponent,
|
|
854
|
-
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\" [ngClass]=\"{'cmat-vertical-navigation-item-disabled': item.disabled}\"\r\n [matTooltip]=\"item.tooltip || ''\" (click)=\"toggleCollapsable();selectItem(item);\">\r\n\r\n <!-- Icon -->\r\n <ng-container *ngIf=\"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 </ng-container>\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 <ng-container *ngIf=\"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 </ng-container>\r\n </div>\r\n\r\n <!-- Badge -->\r\n <ng-container *ngIf=\"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 </ng-container>\r\n\r\n <!-- Arrow -->\r\n <mat-icon class=\"cmat-vertical-navigation-item-arrow icon-size-4\" [svgIcon]=\"'heroicons_solid:chevron-right'\">\r\n </mat-icon>\r\n\r\n </div>\r\n\r\n</div>\r\n\r\n<div class=\"cmat-vertical-navigation-item-children\" *ngIf=\"!isCollapsed\" @expandCollapse>\r\n\r\n <ng-container *ngFor=\"let item of item.children; trackBy: trackByFn\">\r\n\r\n <!-- Skip the hidden items -->\r\n <ng-container *ngIf=\"(item.hidden && !item.hidden(item)) || !item.hidden\">\r\n\r\n <!-- Basic -->\r\n <ng-container *ngIf=\"item.type === 'basic'\">\r\n <cmat-vertical-navigation-basic-item [item]=\"item\" [name]=\"name\" [editMode]=\"editMode\" (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-basic-item>\r\n </ng-container>\r\n\r\n <!-- Collapsable -->\r\n <ng-container *ngIf=\"item.type === 'collapsable'\">\r\n <cmat-vertical-navigation-collapsable-item [item]=\"item\" [name]=\"name\" [autoCollapse]=\"autoCollapse\" [editMode]=\"editMode\" (editSelectedItemChanged)=\"selectItem($event)\">\r\n </cmat-vertical-navigation-collapsable-item>\r\n </ng-container>\r\n\r\n <!-- Divider -->\r\n <ng-container *ngIf=\"item.type === 'divider'\">\r\n <cmat-vertical-navigation-divider-item [item]=\"item\" [name]=\"name\" [editMode]=\"editMode\" (editSelectedItemChanged)=\"selectItem($event)\">\r\n </cmat-vertical-navigation-divider-item>\r\n </ng-container>\r\n\r\n <!-- Group -->\r\n <ng-container *ngIf=\"item.type === 'group'\">\r\n <cmat-vertical-navigation-group-item [item]=\"item\" [name]=\"name\" [editMode]=\"editMode\" (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-group-item>\r\n </ng-container>\r\n\r\n <!-- Spacer -->\r\n <ng-container *ngIf=\"item.type === 'spacer'\">\r\n <cmat-vertical-navigation-spacer-item [item]=\"item\" [name]=\"name\" [editMode]=\"editMode\" (editSelectedItemChanged)=\"selectItem($event)\">\r\n </cmat-vertical-navigation-spacer-item>\r\n </ng-container>\r\n\r\n </ng-container>\r\n\r\n </ng-container>\r\n\r\n</div>" }]
|
|
852
|
+
forwardRef(() => CmatVerticalNavigationGroupItemComponent), CmatVerticalNavigationDividerItemComponent, CmatVerticalNavigationSpacerItemComponent], template: "<div class=\"cmat-vertical-navigation-item-wrapper\" [class.cmat-vertical-navigation-item-has-subtitle]=\"!!item.subTitle\"\n [ngClass]=\"item.classes?.wrapper\">\n\n <div class=\"cmat-vertical-navigation-item\" role=\"presentation\" [ngClass]=\"{'cmat-vertical-navigation-item-disabled': item.disabled}\"\n [matTooltip]=\"item.tooltip || ''\" (click)=\"toggleCollapsable();selectItem(item);\">\n\n <!-- Icon -->\n @if (item.icon) {\n <mat-icon class=\"cmat-vertical-navigation-item-icon\" [ngClass]=\"item.classes?.icon\" [svgIcon]=\"item.icon\">\n </mat-icon>\n }\n\n <!-- Title & Subtitle -->\n <div class=\"cmat-vertical-navigation-item-title-wrapper\">\n <div class=\"cmat-vertical-navigation-item-title\">\n <span [ngClass]=\"item.classes?.title\">\n {{item.title}}\n </span>\n </div>\n @if (item.subTitle) {\n <div class=\"cmat-vertical-navigation-item-subtitle\">\n <span [ngClass]=\"item.classes?.subtitle\">\n {{item.subTitle}}\n </span>\n </div>\n }\n </div>\n\n <!-- Badge -->\n @if (item.badge) {\n <div class=\"cmat-vertical-navigation-item-badge\">\n <div class=\"cmat-vertical-navigation-item-badge-content\" [ngClass]=\"item.badge.classes\">\n {{item.badge.title}}\n </div>\n </div>\n }\n\n <!-- Arrow -->\n <mat-icon class=\"cmat-vertical-navigation-item-arrow icon-size-4\" [svgIcon]=\"'heroicons_outline:chevron-right'\">\n </mat-icon>\n\n </div>\n\n</div>\n\n@if (!isCollapsed) {\n <div class=\"cmat-vertical-navigation-item-children\" @expandCollapse>\n @for (item of item.children; track trackByFn($index, item)) {\n <!-- Skip the hidden items -->\n @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\n <!-- Basic -->\n @if (item.type === 'basic') {\n <cmat-vertical-navigation-basic-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-basic-item>\n }\n <!-- Collapsable -->\n @if (item.type === 'collapsable') {\n <cmat-vertical-navigation-collapsable-item [item]=\"item\" [name]=\"name\" [autoCollapse]=\"autoCollapse\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\n </cmat-vertical-navigation-collapsable-item>\n }\n <!-- Divider -->\n @if (item.type === 'divider') {\n <cmat-vertical-navigation-divider-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\n </cmat-vertical-navigation-divider-item>\n }\n <!-- Group -->\n @if (item.type === 'group') {\n <cmat-vertical-navigation-group-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-group-item>\n }\n <!-- Spacer -->\n @if (item.type === 'spacer') {\n <cmat-vertical-navigation-spacer-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\n </cmat-vertical-navigation-spacer-item>\n }\n }\n }\n </div>\n}" }]
|
|
855
853
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.Router }, { type: CmatNavigationService }], propDecorators: { autoCollapse: [{
|
|
856
854
|
type: Input
|
|
857
855
|
}], item: [{
|
|
858
856
|
type: Input
|
|
859
857
|
}], name: [{
|
|
860
858
|
type: Input
|
|
861
|
-
}],
|
|
859
|
+
}], editState: [{
|
|
862
860
|
type: Input
|
|
863
861
|
}], editSelectedItemChanged: [{
|
|
864
862
|
type: Output
|
|
@@ -871,7 +869,7 @@ class CmatVerticalNavigationGroupItemComponent {
|
|
|
871
869
|
constructor(_changeDetectorRef, _cmatNavigationService) {
|
|
872
870
|
this._changeDetectorRef = _changeDetectorRef;
|
|
873
871
|
this._cmatNavigationService = _cmatNavigationService;
|
|
874
|
-
this.
|
|
872
|
+
this.editState = false;
|
|
875
873
|
this.editSelectedItemChanged = new EventEmitter();
|
|
876
874
|
this._unsubscribeAll = new Subject();
|
|
877
875
|
}
|
|
@@ -913,22 +911,21 @@ class CmatVerticalNavigationGroupItemComponent {
|
|
|
913
911
|
selectItem(item) {
|
|
914
912
|
this.editSelectedItemChanged.next(item);
|
|
915
913
|
}
|
|
916
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
917
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
914
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatVerticalNavigationGroupItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CmatNavigationService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
915
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CmatVerticalNavigationGroupItemComponent, isStandalone: true, selector: "cmat-vertical-navigation-group-item", inputs: { autoCollapse: "autoCollapse", item: "item", name: "name", editState: "editState" }, outputs: { editSelectedItemChanged: "editSelectedItemChanged" }, ngImport: i0, template: "<!-- Item wrapper -->\n<div class=\"cmat-vertical-navigation-item-wrapper\" [class.cmat-vertical-navigation-item-has-subtitle]=\"!!item.subTitle\"\n [ngClass]=\"item.classes?.wrapper\" role=\"presentation\" (click)=\"selectItem(item);\">\n\n <div class=\"cmat-vertical-navigation-item\">\n\n <!-- Icon -->\n @if (item.icon) {\n <mat-icon class=\"cmat-vertical-navigation-item-icon\" [ngClass]=\"item.classes?.icon\" [svgIcon]=\"item.icon\">\n </mat-icon>\n }\n\n <!-- Title & Subtitle -->\n <div class=\"cmat-vertical-navigation-item-title-wrapper\">\n <div class=\"cmat-vertical-navigation-item-title\">\n <span [ngClass]=\"item.classes?.title\">\n {{item.title}}\n </span>\n </div>\n @if (item.subTitle) {\n <div class=\"cmat-vertical-navigation-item-subtitle\">\n <span [ngClass]=\"item.classes?.subtitle\">\n {{item.subTitle}}\n </span>\n </div>\n }\n </div>\n\n <!-- Badge -->\n @if (item.badge) {\n <div class=\"cmat-vertical-navigation-item-badge\">\n <div class=\"cmat-vertical-navigation-item-badge-content\" [ngClass]=\"item.badge.classes\">\n {{item.badge.title}}\n </div>\n </div>\n }\n\n </div>\n\n</div>\n\n@for (item of item.children; track trackByFn($index, item)) {\n <!-- Skip the hidden items -->\n @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\n <!-- Basic -->\n @if (item.type === 'basic') {\n <cmat-vertical-navigation-basic-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-basic-item>\n }\n <!-- Collapsable -->\n @if (item.type === 'collapsable') {\n <cmat-vertical-navigation-collapsable-item [item]=\"item\" [name]=\"name\" [autoCollapse]=\"autoCollapse\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\n </cmat-vertical-navigation-collapsable-item>\n }\n <!-- Divider -->\n @if (item.type === 'divider') {\n <cmat-vertical-navigation-divider-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-divider-item>\n }\n <!-- Group -->\n @if (item.type === 'group') {\n <cmat-vertical-navigation-group-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-group-item>\n }\n <!-- Spacer -->\n @if (item.type === 'spacer') {\n <cmat-vertical-navigation-spacer-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-spacer-item>\n }\n }\n}", dependencies: [{ kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationGroupItemComponent), selector: "cmat-vertical-navigation-group-item", inputs: ["autoCollapse", "item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatIconModule) }, { kind: "component", type: i0.forwardRef(() => i4.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"], outputs: ["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"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationSpacerItemComponent), selector: "cmat-vertical-navigation-spacer-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
918
916
|
}
|
|
919
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
917
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatVerticalNavigationGroupItemComponent, decorators: [{
|
|
920
918
|
type: Component,
|
|
921
|
-
args: [{ selector: 'cmat-vertical-navigation-group-item', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgClass,
|
|
922
|
-
|
|
923
|
-
forwardRef(() =>
|
|
924
|
-
CmatVerticalNavigationSpacerItemComponent], 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\" role=\"presentation\" (click)=\"selectItem(item);\">\r\n\r\n <div class=\"cmat-vertical-navigation-item\">\r\n\r\n <!-- Icon -->\r\n <ng-container *ngIf=\"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 </ng-container>\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 <ng-container *ngIf=\"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 </ng-container>\r\n </div>\r\n\r\n <!-- Badge -->\r\n <ng-container *ngIf=\"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 </ng-container>\r\n\r\n </div>\r\n\r\n</div>\r\n\r\n<ng-container *ngFor=\"let item of item.children; trackBy: trackByFn\">\r\n\r\n <!-- Skip the hidden items -->\r\n <ng-container *ngIf=\"(item.hidden && !item.hidden(item)) || !item.hidden\">\r\n\r\n <!-- Basic -->\r\n <ng-container *ngIf=\"item.type === 'basic'\">\r\n <cmat-vertical-navigation-basic-item [item]=\"item\" [name]=\"name\" [editMode]=\"editMode\" (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-basic-item>\r\n </ng-container>\r\n\r\n <!-- Collapsable -->\r\n <ng-container *ngIf=\"item.type === 'collapsable'\">\r\n <cmat-vertical-navigation-collapsable-item [item]=\"item\" [name]=\"name\" [autoCollapse]=\"autoCollapse\" [editMode]=\"editMode\" (editSelectedItemChanged)=\"selectItem($event)\">\r\n </cmat-vertical-navigation-collapsable-item>\r\n </ng-container>\r\n\r\n <!-- Divider -->\r\n <ng-container *ngIf=\"item.type === 'divider'\">\r\n <cmat-vertical-navigation-divider-item [item]=\"item\" [name]=\"name\" [editMode]=\"editMode\" (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-divider-item>\r\n </ng-container>\r\n\r\n <!-- Group -->\r\n <ng-container *ngIf=\"item.type === 'group'\">\r\n <cmat-vertical-navigation-group-item [item]=\"item\" [name]=\"name\" [editMode]=\"editMode\" (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-group-item>\r\n </ng-container>\r\n\r\n <!-- Spacer -->\r\n <ng-container *ngIf=\"item.type === 'spacer'\">\r\n <cmat-vertical-navigation-spacer-item [item]=\"item\" [name]=\"name\" [editMode]=\"editMode\" (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-spacer-item>\r\n </ng-container>\r\n\r\n </ng-container>\r\n\r\n</ng-container>" }]
|
|
919
|
+
args: [{ selector: 'cmat-vertical-navigation-group-item', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgClass, MatIconModule, CmatVerticalNavigationBasicItemComponent,
|
|
920
|
+
CmatVerticalNavigationDividerItemComponent, forwardRef(() => CmatVerticalNavigationGroupItemComponent),
|
|
921
|
+
forwardRef(() => CmatVerticalNavigationCollapsableItemComponent), CmatVerticalNavigationSpacerItemComponent], template: "<!-- Item wrapper -->\n<div class=\"cmat-vertical-navigation-item-wrapper\" [class.cmat-vertical-navigation-item-has-subtitle]=\"!!item.subTitle\"\n [ngClass]=\"item.classes?.wrapper\" role=\"presentation\" (click)=\"selectItem(item);\">\n\n <div class=\"cmat-vertical-navigation-item\">\n\n <!-- Icon -->\n @if (item.icon) {\n <mat-icon class=\"cmat-vertical-navigation-item-icon\" [ngClass]=\"item.classes?.icon\" [svgIcon]=\"item.icon\">\n </mat-icon>\n }\n\n <!-- Title & Subtitle -->\n <div class=\"cmat-vertical-navigation-item-title-wrapper\">\n <div class=\"cmat-vertical-navigation-item-title\">\n <span [ngClass]=\"item.classes?.title\">\n {{item.title}}\n </span>\n </div>\n @if (item.subTitle) {\n <div class=\"cmat-vertical-navigation-item-subtitle\">\n <span [ngClass]=\"item.classes?.subtitle\">\n {{item.subTitle}}\n </span>\n </div>\n }\n </div>\n\n <!-- Badge -->\n @if (item.badge) {\n <div class=\"cmat-vertical-navigation-item-badge\">\n <div class=\"cmat-vertical-navigation-item-badge-content\" [ngClass]=\"item.badge.classes\">\n {{item.badge.title}}\n </div>\n </div>\n }\n\n </div>\n\n</div>\n\n@for (item of item.children; track trackByFn($index, item)) {\n <!-- Skip the hidden items -->\n @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\n <!-- Basic -->\n @if (item.type === 'basic') {\n <cmat-vertical-navigation-basic-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-basic-item>\n }\n <!-- Collapsable -->\n @if (item.type === 'collapsable') {\n <cmat-vertical-navigation-collapsable-item [item]=\"item\" [name]=\"name\" [autoCollapse]=\"autoCollapse\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\n </cmat-vertical-navigation-collapsable-item>\n }\n <!-- Divider -->\n @if (item.type === 'divider') {\n <cmat-vertical-navigation-divider-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-divider-item>\n }\n <!-- Group -->\n @if (item.type === 'group') {\n <cmat-vertical-navigation-group-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-group-item>\n }\n <!-- Spacer -->\n @if (item.type === 'spacer') {\n <cmat-vertical-navigation-spacer-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-spacer-item>\n }\n }\n}" }]
|
|
925
922
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: CmatNavigationService }], propDecorators: { autoCollapse: [{
|
|
926
923
|
type: Input
|
|
927
924
|
}], item: [{
|
|
928
925
|
type: Input
|
|
929
926
|
}], name: [{
|
|
930
927
|
type: Input
|
|
931
|
-
}],
|
|
928
|
+
}], editState: [{
|
|
932
929
|
type: Input
|
|
933
930
|
}], editSelectedItemChanged: [{
|
|
934
931
|
type: Output
|
|
@@ -939,7 +936,7 @@ class CmatVerticalNavigationAsideItemComponent {
|
|
|
939
936
|
this._changeDetectorRef = _changeDetectorRef;
|
|
940
937
|
this._router = _router;
|
|
941
938
|
this._cmatNavigationService = _cmatNavigationService;
|
|
942
|
-
this.
|
|
939
|
+
this.editState = false;
|
|
943
940
|
this.editSelectedItemChanged = new EventEmitter();
|
|
944
941
|
this.active = false;
|
|
945
942
|
this._unsubscribeAll = new Subject();
|
|
@@ -1055,14 +1052,14 @@ class CmatVerticalNavigationAsideItemComponent {
|
|
|
1055
1052
|
// Mark for check
|
|
1056
1053
|
this._changeDetectorRef.markForCheck();
|
|
1057
1054
|
}
|
|
1058
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
1059
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1055
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatVerticalNavigationAsideItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.Router }, { token: CmatNavigationService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1056
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.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" }, outputs: { editSelectedItemChanged: "editSelectedItemChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cmat-vertical-navigation-item-wrapper\" [class.cmat-vertical-navigation-item-has-subtitle]=\"!!item.subTitle\"\n [ngClass]=\"item.classes?.wrapper\" role=\"presentation\" (click)=\"selectItem(item);\">\n\n <div class=\"cmat-vertical-navigation-item\" [ngClass]=\"{'cmat-vertical-navigation-item-active': active,\n 'cmat-vertical-navigation-item-disabled': item.disabled,\n 'cmat-vertical-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\">\n\n <!-- Icon -->\n @if (item.icon) {\n <mat-icon class=\"cmat-vertical-navigation-item-icon\" [ngClass]=\"item.classes?.icon\" [svgIcon]=\"item.icon\">\n </mat-icon>\n }\n\n <!-- Title & Subtitle -->\n <div class=\"cmat-vertical-navigation-item-title-wrapper\">\n <div class=\"cmat-vertical-navigation-item-title\">\n <span [ngClass]=\"item.classes?.title\">\n {{item.title}}\n </span>\n </div>\n @if (item.subTitle) {\n <div class=\"cmat-vertical-navigation-item-subtitle\">\n <span [ngClass]=\"item.classes?.subtitle\">\n {{item.subTitle}}\n </span>\n </div>\n }\n </div>\n\n <!-- Badge -->\n @if (item.badge) {\n <div class=\"cmat-vertical-navigation-item-badge\">\n <div class=\"cmat-vertical-navigation-item-badge-content\" [ngClass]=\"item.badge.classes\">\n {{item.badge.title}}\n </div>\n </div>\n }\n\n </div>\n\n</div>\n\n@if (!skipChildren) {\n <div class=\"cmat-vertical-navigation-item-children\">\n @for (item of item.children; track trackByFn($index, item)) {\n <!-- Skip the hidden items -->\n @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\n <!-- Basic -->\n @if (item.type === 'basic') {\n <cmat-vertical-navigation-basic-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\n </cmat-vertical-navigation-basic-item>\n }\n <!-- Collapsable -->\n @if (item.type === 'collapsable') {\n <cmat-vertical-navigation-collapsable-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\"\n [autoCollapse]=\"autoCollapse\"></cmat-vertical-navigation-collapsable-item>\n }\n <!-- Divider -->\n @if (item.type === 'divider') {\n <cmat-vertical-navigation-divider-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\n </cmat-vertical-navigation-divider-item>\n }\n <!-- Group -->\n @if (item.type === 'group') {\n <cmat-vertical-navigation-group-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\n </cmat-vertical-navigation-group-item>\n }\n <!-- Spacer -->\n @if (item.type === 'spacer') {\n <cmat-vertical-navigation-spacer-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\n </cmat-vertical-navigation-spacer-item>\n }\n }\n }\n </div>\n}", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.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"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationCollapsableItemComponent, selector: "cmat-vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item", "name", "editState"], outputs: ["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"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationSpacerItemComponent, selector: "cmat-vertical-navigation-spacer-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1060
1057
|
}
|
|
1061
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
1058
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatVerticalNavigationAsideItemComponent, decorators: [{
|
|
1062
1059
|
type: Component,
|
|
1063
|
-
args: [{ selector: 'cmat-vertical-navigation-aside-item', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgClass, MatTooltipModule,
|
|
1060
|
+
args: [{ selector: 'cmat-vertical-navigation-aside-item', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgClass, MatTooltipModule, MatIconModule, CmatVerticalNavigationBasicItemComponent,
|
|
1064
1061
|
CmatVerticalNavigationCollapsableItemComponent, CmatVerticalNavigationDividerItemComponent,
|
|
1065
|
-
CmatVerticalNavigationGroupItemComponent, CmatVerticalNavigationSpacerItemComponent], template: "<div class=\"cmat-vertical-navigation-item-wrapper\" [class.cmat-vertical-navigation-item-has-subtitle]=\"!!item.subTitle\"\
|
|
1062
|
+
CmatVerticalNavigationGroupItemComponent, CmatVerticalNavigationSpacerItemComponent], template: "<div class=\"cmat-vertical-navigation-item-wrapper\" [class.cmat-vertical-navigation-item-has-subtitle]=\"!!item.subTitle\"\n [ngClass]=\"item.classes?.wrapper\" role=\"presentation\" (click)=\"selectItem(item);\">\n\n <div class=\"cmat-vertical-navigation-item\" [ngClass]=\"{'cmat-vertical-navigation-item-active': active,\n 'cmat-vertical-navigation-item-disabled': item.disabled,\n 'cmat-vertical-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\">\n\n <!-- Icon -->\n @if (item.icon) {\n <mat-icon class=\"cmat-vertical-navigation-item-icon\" [ngClass]=\"item.classes?.icon\" [svgIcon]=\"item.icon\">\n </mat-icon>\n }\n\n <!-- Title & Subtitle -->\n <div class=\"cmat-vertical-navigation-item-title-wrapper\">\n <div class=\"cmat-vertical-navigation-item-title\">\n <span [ngClass]=\"item.classes?.title\">\n {{item.title}}\n </span>\n </div>\n @if (item.subTitle) {\n <div class=\"cmat-vertical-navigation-item-subtitle\">\n <span [ngClass]=\"item.classes?.subtitle\">\n {{item.subTitle}}\n </span>\n </div>\n }\n </div>\n\n <!-- Badge -->\n @if (item.badge) {\n <div class=\"cmat-vertical-navigation-item-badge\">\n <div class=\"cmat-vertical-navigation-item-badge-content\" [ngClass]=\"item.badge.classes\">\n {{item.badge.title}}\n </div>\n </div>\n }\n\n </div>\n\n</div>\n\n@if (!skipChildren) {\n <div class=\"cmat-vertical-navigation-item-children\">\n @for (item of item.children; track trackByFn($index, item)) {\n <!-- Skip the hidden items -->\n @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\n <!-- Basic -->\n @if (item.type === 'basic') {\n <cmat-vertical-navigation-basic-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\n </cmat-vertical-navigation-basic-item>\n }\n <!-- Collapsable -->\n @if (item.type === 'collapsable') {\n <cmat-vertical-navigation-collapsable-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\"\n [autoCollapse]=\"autoCollapse\"></cmat-vertical-navigation-collapsable-item>\n }\n <!-- Divider -->\n @if (item.type === 'divider') {\n <cmat-vertical-navigation-divider-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\n </cmat-vertical-navigation-divider-item>\n }\n <!-- Group -->\n @if (item.type === 'group') {\n <cmat-vertical-navigation-group-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\n </cmat-vertical-navigation-group-item>\n }\n <!-- Spacer -->\n @if (item.type === 'spacer') {\n <cmat-vertical-navigation-spacer-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\n </cmat-vertical-navigation-spacer-item>\n }\n }\n }\n </div>\n}" }]
|
|
1066
1063
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.Router }, { type: CmatNavigationService }], propDecorators: { activeItemId: [{
|
|
1067
1064
|
type: Input
|
|
1068
1065
|
}], autoCollapse: [{
|
|
@@ -1073,7 +1070,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
|
|
|
1073
1070
|
type: Input
|
|
1074
1071
|
}], skipChildren: [{
|
|
1075
1072
|
type: Input
|
|
1076
|
-
}],
|
|
1073
|
+
}], editState: [{
|
|
1077
1074
|
type: Input
|
|
1078
1075
|
}], editSelectedItemChanged: [{
|
|
1079
1076
|
type: Output
|
|
@@ -1092,7 +1089,7 @@ class CmatVerticalNavigationComponent {
|
|
|
1092
1089
|
/* eslint-enable @typescript-eslint/naming-convention */
|
|
1093
1090
|
this.appearance = 'default';
|
|
1094
1091
|
this.autoCollapse = true;
|
|
1095
|
-
this.
|
|
1092
|
+
this.editState = false;
|
|
1096
1093
|
this.inner = false;
|
|
1097
1094
|
this.mode = 'side';
|
|
1098
1095
|
this.name = this._cmatUtilsService.randomId();
|
|
@@ -1589,20 +1586,19 @@ class CmatVerticalNavigationComponent {
|
|
|
1589
1586
|
// Execute the observable
|
|
1590
1587
|
this.openedChanged.next(open);
|
|
1591
1588
|
}
|
|
1592
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
1593
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: CmatVerticalNavigationComponent, isStandalone: true, selector: "cmat-vertical-navigation", inputs: { appearance: "appearance", autoCollapse: "autoCollapse", editMode: "editMode", inner: "inner", mode: "mode", name: "name", navigation: "navigation", opened: "opened", position: "position", transparentOverlay: "transparentOverlay" }, outputs: { 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 class=\"cmat-vertical-navigation-content overflow-y-auto lg:overflow-y-hidden lg:hover:overflow-y-auto scrollbar-custom\" #navigationContent>\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 <ng-container *ngFor=\"let item of navigation; trackBy: trackByFn\">\r\n\r\n <!-- Skip the hidden items -->\r\n <ng-container *ngIf=\"(item.hidden && !item.hidden(item)) || !item.hidden\">\r\n\r\n <!-- Aside -->\r\n <ng-container *ngIf=\"item.type === 'aside'\">\r\n <cmat-vertical-navigation-aside-item [item]=\"item\" [name]=\"name\" [activeItemId]=\"activeAsideItemId\"\r\n [autoCollapse]=\"autoCollapse\" [skipChildren]=\"true\" (click)=\"toggleAside(item)\" [editMode]=\"editMode\" (editSelectedItemChanged)=\"selectItem($event)\">\r\n </cmat-vertical-navigation-aside-item>\r\n </ng-container>\r\n\r\n <!-- Basic -->\r\n <ng-container *ngIf=\"item.type === 'basic'\">\r\n <cmat-vertical-navigation-basic-item [item]=\"item\" [name]=\"name\" [editMode]=\"editMode\" (editSelectedItemChanged)=\"selectItem($event)\">\r\n </cmat-vertical-navigation-basic-item>\r\n </ng-container>\r\n\r\n <!-- Collapsable -->\r\n <ng-container *ngIf=\"item.type === 'collapsable'\">\r\n <cmat-vertical-navigation-collapsable-item [item]=\"item\" [name]=\"name\" [editMode]=\"editMode\" (editSelectedItemChanged)=\"selectItem($event)\"\r\n [autoCollapse]=\"autoCollapse\"></cmat-vertical-navigation-collapsable-item>\r\n </ng-container>\r\n\r\n <!-- Divider -->\r\n <ng-container *ngIf=\"item.type === 'divider'\">\r\n <cmat-vertical-navigation-divider-item [item]=\"item\" [name]=\"name\" [editMode]=\"editMode\" (editSelectedItemChanged)=\"selectItem($event)\">\r\n </cmat-vertical-navigation-divider-item>\r\n </ng-container>\r\n\r\n <!-- Group -->\r\n <ng-container *ngIf=\"item.type === 'group'\">\r\n <cmat-vertical-navigation-group-item [item]=\"item\" [name]=\"name\" [autoCollapse]=\"autoCollapse\" [editMode]=\"editMode\" (editSelectedItemChanged)=\"selectItem($event)\">\r\n </cmat-vertical-navigation-group-item>\r\n </ng-container>\r\n\r\n <!-- Spacer -->\r\n <ng-container *ngIf=\"item.type === 'spacer'\">\r\n <cmat-vertical-navigation-spacer-item [item]=\"item\" [name]=\"name\" [editMode]=\"editMode\" (editSelectedItemChanged)=\"selectItem($event)\">\r\n </cmat-vertical-navigation-spacer-item>\r\n </ng-container>\r\n\r\n </ng-container>\r\n\r\n </ng-container>\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<ng-container *ngIf=\"activeAsideItemId\">\r\n <div class=\"cmat-vertical-navigation-aside-wrapper overflow-y-auto lg:overflow-y-hidden lg:hover:overflow-y-auto scrollbar-custom\"\r\n [@fadeInLeft]=\"position === 'left'\" [@fadeInRight]=\"position === 'right'\" [@fadeOutLeft]=\"position === 'left'\"\r\n [@fadeOutRight]=\"position === 'right'\">\r\n\r\n <!-- Items -->\r\n <ng-container *ngFor=\"let item of navigation; trackBy: trackByFn\">\r\n\r\n <!-- Skip the hidden items -->\r\n <ng-container *ngIf=\"(item.hidden && !item.hidden(item)) || !item.hidden\">\r\n\r\n <!-- Aside -->\r\n <ng-container *ngIf=\"item.type === 'aside' && item.id === activeAsideItemId\">\r\n <cmat-vertical-navigation-aside-item [item]=\"item\" [name]=\"name\" [autoCollapse]=\"autoCollapse\">\r\n </cmat-vertical-navigation-aside-item>\r\n </ng-container>\r\n\r\n </ng-container>\r\n\r\n </ng-container>\r\n\r\n </div>\r\n</ng-container>", 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-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{color:currentColor}cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon{@apply text-current opacity-60;}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-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-title,cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-title,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{@apply text-current opacity-80;}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-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-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-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle{@apply text-current opacity-50;}cmat-vertical-navigation-aside-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-disabled).cmat-vertical-navigation-item-active,cmat-vertical-navigation-aside-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-disabled).cmat-vertical-navigation-item-active-forced,cmat-vertical-navigation-basic-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-disabled).cmat-vertical-navigation-item-active,cmat-vertical-navigation-basic-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-disabled).cmat-vertical-navigation-item-active-forced,cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-disabled).cmat-vertical-navigation-item-active,cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-disabled).cmat-vertical-navigation-item-active-forced{@apply bg-gray-800 bg-opacity-5 dark:bg-white dark:bg-opacity-12;}cmat-vertical-navigation-aside-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-disabled).cmat-vertical-navigation-item-active .cmat-vertical-navigation-item-icon,cmat-vertical-navigation-aside-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-disabled).cmat-vertical-navigation-item-active-forced .cmat-vertical-navigation-item-icon,cmat-vertical-navigation-basic-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-disabled).cmat-vertical-navigation-item-active .cmat-vertical-navigation-item-icon,cmat-vertical-navigation-basic-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-disabled).cmat-vertical-navigation-item-active-forced .cmat-vertical-navigation-item-icon,cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-disabled).cmat-vertical-navigation-item-active .cmat-vertical-navigation-item-icon,cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-disabled).cmat-vertical-navigation-item-active-forced .cmat-vertical-navigation-item-icon{@apply opacity-100;}cmat-vertical-navigation-aside-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-disabled).cmat-vertical-navigation-item-active .cmat-vertical-navigation-item-title,cmat-vertical-navigation-aside-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-disabled).cmat-vertical-navigation-item-active-forced .cmat-vertical-navigation-item-title,cmat-vertical-navigation-basic-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-disabled).cmat-vertical-navigation-item-active .cmat-vertical-navigation-item-title,cmat-vertical-navigation-basic-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-disabled).cmat-vertical-navigation-item-active-forced .cmat-vertical-navigation-item-title,cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-disabled).cmat-vertical-navigation-item-active .cmat-vertical-navigation-item-title,cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-disabled).cmat-vertical-navigation-item-active-forced .cmat-vertical-navigation-item-title{@apply opacity-100;}cmat-vertical-navigation-aside-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-disabled).cmat-vertical-navigation-item-active .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation-aside-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-disabled).cmat-vertical-navigation-item-active-forced .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation-basic-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-disabled).cmat-vertical-navigation-item-active .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation-basic-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-disabled).cmat-vertical-navigation-item-active-forced .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-disabled).cmat-vertical-navigation-item-active .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-disabled).cmat-vertical-navigation-item-active-forced .cmat-vertical-navigation-item-subtitle{@apply opacity-100;}cmat-vertical-navigation-aside-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-active-forced):not(.cmat-vertical-navigation-item-active):not(.cmat-vertical-navigation-item-disabled):hover,cmat-vertical-navigation-basic-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-active-forced):not(.cmat-vertical-navigation-item-active):not(.cmat-vertical-navigation-item-disabled):hover,cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-active-forced):not(.cmat-vertical-navigation-item-active):not(.cmat-vertical-navigation-item-disabled):hover{@apply bg-gray-800 bg-opacity-5 dark:bg-white dark:bg-opacity-12;}cmat-vertical-navigation-aside-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-active-forced):not(.cmat-vertical-navigation-item-active):not(.cmat-vertical-navigation-item-disabled):hover .cmat-vertical-navigation-item-icon,cmat-vertical-navigation-basic-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-active-forced):not(.cmat-vertical-navigation-item-active):not(.cmat-vertical-navigation-item-disabled):hover .cmat-vertical-navigation-item-icon,cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-active-forced):not(.cmat-vertical-navigation-item-active):not(.cmat-vertical-navigation-item-disabled):hover .cmat-vertical-navigation-item-icon{@apply opacity-100;}cmat-vertical-navigation-aside-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-active-forced):not(.cmat-vertical-navigation-item-active):not(.cmat-vertical-navigation-item-disabled):hover .cmat-vertical-navigation-item-title,cmat-vertical-navigation-aside-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-active-forced):not(.cmat-vertical-navigation-item-active):not(.cmat-vertical-navigation-item-disabled):hover .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation-basic-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-active-forced):not(.cmat-vertical-navigation-item-active):not(.cmat-vertical-navigation-item-disabled):hover .cmat-vertical-navigation-item-title,cmat-vertical-navigation-basic-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-active-forced):not(.cmat-vertical-navigation-item-active):not(.cmat-vertical-navigation-item-disabled):hover .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-active-forced):not(.cmat-vertical-navigation-item-active):not(.cmat-vertical-navigation-item-disabled):hover .cmat-vertical-navigation-item-title,cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-active-forced):not(.cmat-vertical-navigation-item-active):not(.cmat-vertical-navigation-item-disabled):hover .cmat-vertical-navigation-item-arrow{@apply opacity-100;}cmat-vertical-navigation-aside-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-active-forced):not(.cmat-vertical-navigation-item-active):not(.cmat-vertical-navigation-item-disabled):hover .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation-basic-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-active-forced):not(.cmat-vertical-navigation-item-active):not(.cmat-vertical-navigation-item-disabled):hover .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-active-forced):not(.cmat-vertical-navigation-item-active):not(.cmat-vertical-navigation-item-disabled):hover .cmat-vertical-navigation-item-subtitle{@apply opacity-100;}cmat-vertical-navigation-collapsable-item.cmat-vertical-navigation-item-expanded>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon{@apply opacity-100;}cmat-vertical-navigation-collapsable-item.cmat-vertical-navigation-item-expanded>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title,cmat-vertical-navigation-collapsable-item.cmat-vertical-navigation-item-expanded>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow{@apply opacity-100;}cmat-vertical-navigation-collapsable-item.cmat-vertical-navigation-item-expanded>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-subtitle{@apply opacity-100;}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{@apply opacity-100 text-primary-600 dark:text-primary-400;}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: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CmatVerticalNavigationAsideItemComponent, selector: "cmat-vertical-navigation-aside-item", inputs: ["activeItemId", "autoCollapse", "item", "name", "skipChildren", "editMode"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationBasicItemComponent, selector: "cmat-vertical-navigation-basic-item", inputs: ["item", "name", "editMode"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationCollapsableItemComponent, selector: "cmat-vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item", "name", "editMode"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationDividerItemComponent, selector: "cmat-vertical-navigation-divider-item", inputs: ["item", "name", "editMode"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationGroupItemComponent, selector: "cmat-vertical-navigation-group-item", inputs: ["autoCollapse", "item", "name", "editMode"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationSpacerItemComponent, selector: "cmat-vertical-navigation-spacer-item", inputs: ["item", "name", "editMode"], outputs: ["editSelectedItemChanged"] }], animations: cmatAnimations, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1589
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatVerticalNavigationComponent, deps: [{ token: i1$1.AnimationBuilder }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.Router }, { token: i3$1.ScrollStrategyOptions }, { token: CmatNavigationService }, { token: i2.CmatUtilsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1590
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.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" }, outputs: { 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\">\n\n <!-- Header -->\n <div class=\"cmat-vertical-navigation-header\">\n <ng-content select=\"[cmatVerticalNavigationHeader]\"></ng-content>\n </div>\n\n <!-- Content -->\n <div class=\"cmat-vertical-navigation-content overflow-y-auto lg:overflow-y-hidden lg:hover:overflow-y-auto scrollbar-custom\" #navigationContent>\n\n <!-- Content header -->\n <div class=\"cmat-vertical-navigation-content-header\">\n <ng-content select=\"[cmatVerticalNavigationContentHeader]\"></ng-content>\n </div>\n\n <!-- Items -->\n @for (item of navigation; track trackByFn($index, item)) {\n <!-- Skip the hidden items -->\n @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\n <!-- Aside -->\n @if (item.type === 'aside') {\n <cmat-vertical-navigation-aside-item [item]=\"item\" [name]=\"name\" [activeItemId]=\"activeAsideItemId\"\n [autoCollapse]=\"autoCollapse\" [skipChildren]=\"true\" (click)=\"toggleAside(item)\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\n </cmat-vertical-navigation-aside-item>\n }\n <!-- Basic -->\n @if (item.type === 'basic') {\n <cmat-vertical-navigation-basic-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\n </cmat-vertical-navigation-basic-item>\n }\n <!-- Collapsable -->\n @if (item.type === 'collapsable') {\n <cmat-vertical-navigation-collapsable-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\"\n [autoCollapse]=\"autoCollapse\"></cmat-vertical-navigation-collapsable-item>\n }\n <!-- Divider -->\n @if (item.type === 'divider') {\n <cmat-vertical-navigation-divider-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\n </cmat-vertical-navigation-divider-item>\n }\n <!-- Group -->\n @if (item.type === 'group') {\n <cmat-vertical-navigation-group-item [item]=\"item\" [name]=\"name\" [autoCollapse]=\"autoCollapse\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\n </cmat-vertical-navigation-group-item>\n }\n <!-- Spacer -->\n @if (item.type === 'spacer') {\n <cmat-vertical-navigation-spacer-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\n </cmat-vertical-navigation-spacer-item>\n }\n }\n }\n\n <!-- Content footer -->\n <div class=\"cmat-vertical-navigation-content-footer\">\n <ng-content select=\"[cmatVerticalNavigationContentFooter]\"></ng-content>\n </div>\n\n </div>\n <!-- Footer -->\n <div class=\"cmat-vertical-navigation-footer\">\n <ng-content select=\"[cmatVerticalNavigationFooter]\"></ng-content>\n </div>\n\n</div>\n\n<!-- Aside -->\n@if (activeAsideItemId) {\n <div class=\"cmat-vertical-navigation-aside-wrapper overflow-y-auto lg:overflow-y-hidden lg:hover:overflow-y-auto scrollbar-custom\"\n [@fadeInLeft]=\"position === 'left'\" [@fadeInRight]=\"position === 'right'\" [@fadeOutLeft]=\"position === 'left'\"\n [@fadeOutRight]=\"position === 'right'\">\n <!-- Items -->\n @for (item of navigation; track trackByFn($index, item)) {\n <!-- Skip the hidden items -->\n @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\n <!-- Aside -->\n @if (item.type === 'aside' && item.id === activeAsideItemId) {\n <cmat-vertical-navigation-aside-item [item]=\"item\" [name]=\"name\" [autoCollapse]=\"autoCollapse\">\n </cmat-vertical-navigation-aside-item>\n }\n }\n }\n </div>\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"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationBasicItemComponent, selector: "cmat-vertical-navigation-basic-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationCollapsableItemComponent, selector: "cmat-vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item", "name", "editState"], outputs: ["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"], outputs: ["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 }); }
|
|
1594
1591
|
}
|
|
1595
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
1592
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatVerticalNavigationComponent, decorators: [{
|
|
1596
1593
|
type: Component,
|
|
1597
|
-
args: [{ selector: 'cmat-vertical-navigation', animations: cmatAnimations, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatVerticalNavigation', standalone: true, imports: [
|
|
1598
|
-
|
|
1599
|
-
CmatVerticalNavigationDividerItemComponent, CmatVerticalNavigationGroupItemComponent,
|
|
1600
|
-
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 class=\"cmat-vertical-navigation-content overflow-y-auto lg:overflow-y-hidden lg:hover:overflow-y-auto scrollbar-custom\" #navigationContent>\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 <ng-container *ngFor=\"let item of navigation; trackBy: trackByFn\">\r\n\r\n <!-- Skip the hidden items -->\r\n <ng-container *ngIf=\"(item.hidden && !item.hidden(item)) || !item.hidden\">\r\n\r\n <!-- Aside -->\r\n <ng-container *ngIf=\"item.type === 'aside'\">\r\n <cmat-vertical-navigation-aside-item [item]=\"item\" [name]=\"name\" [activeItemId]=\"activeAsideItemId\"\r\n [autoCollapse]=\"autoCollapse\" [skipChildren]=\"true\" (click)=\"toggleAside(item)\" [editMode]=\"editMode\" (editSelectedItemChanged)=\"selectItem($event)\">\r\n </cmat-vertical-navigation-aside-item>\r\n </ng-container>\r\n\r\n <!-- Basic -->\r\n <ng-container *ngIf=\"item.type === 'basic'\">\r\n <cmat-vertical-navigation-basic-item [item]=\"item\" [name]=\"name\" [editMode]=\"editMode\" (editSelectedItemChanged)=\"selectItem($event)\">\r\n </cmat-vertical-navigation-basic-item>\r\n </ng-container>\r\n\r\n <!-- Collapsable -->\r\n <ng-container *ngIf=\"item.type === 'collapsable'\">\r\n <cmat-vertical-navigation-collapsable-item [item]=\"item\" [name]=\"name\" [editMode]=\"editMode\" (editSelectedItemChanged)=\"selectItem($event)\"\r\n [autoCollapse]=\"autoCollapse\"></cmat-vertical-navigation-collapsable-item>\r\n </ng-container>\r\n\r\n <!-- Divider -->\r\n <ng-container *ngIf=\"item.type === 'divider'\">\r\n <cmat-vertical-navigation-divider-item [item]=\"item\" [name]=\"name\" [editMode]=\"editMode\" (editSelectedItemChanged)=\"selectItem($event)\">\r\n </cmat-vertical-navigation-divider-item>\r\n </ng-container>\r\n\r\n <!-- Group -->\r\n <ng-container *ngIf=\"item.type === 'group'\">\r\n <cmat-vertical-navigation-group-item [item]=\"item\" [name]=\"name\" [autoCollapse]=\"autoCollapse\" [editMode]=\"editMode\" (editSelectedItemChanged)=\"selectItem($event)\">\r\n </cmat-vertical-navigation-group-item>\r\n </ng-container>\r\n\r\n <!-- Spacer -->\r\n <ng-container *ngIf=\"item.type === 'spacer'\">\r\n <cmat-vertical-navigation-spacer-item [item]=\"item\" [name]=\"name\" [editMode]=\"editMode\" (editSelectedItemChanged)=\"selectItem($event)\">\r\n </cmat-vertical-navigation-spacer-item>\r\n </ng-container>\r\n\r\n </ng-container>\r\n\r\n </ng-container>\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<ng-container *ngIf=\"activeAsideItemId\">\r\n <div class=\"cmat-vertical-navigation-aside-wrapper overflow-y-auto lg:overflow-y-hidden lg:hover:overflow-y-auto scrollbar-custom\"\r\n [@fadeInLeft]=\"position === 'left'\" [@fadeInRight]=\"position === 'right'\" [@fadeOutLeft]=\"position === 'left'\"\r\n [@fadeOutRight]=\"position === 'right'\">\r\n\r\n <!-- Items -->\r\n <ng-container *ngFor=\"let item of navigation; trackBy: trackByFn\">\r\n\r\n <!-- Skip the hidden items -->\r\n <ng-container *ngIf=\"(item.hidden && !item.hidden(item)) || !item.hidden\">\r\n\r\n <!-- Aside -->\r\n <ng-container *ngIf=\"item.type === 'aside' && item.id === activeAsideItemId\">\r\n <cmat-vertical-navigation-aside-item [item]=\"item\" [name]=\"name\" [autoCollapse]=\"autoCollapse\">\r\n </cmat-vertical-navigation-aside-item>\r\n </ng-container>\r\n\r\n </ng-container>\r\n\r\n </ng-container>\r\n\r\n </div>\r\n</ng-container>", 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-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{color:currentColor}cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon{@apply text-current opacity-60;}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-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-title,cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-title,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{@apply text-current opacity-80;}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-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-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-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle{@apply text-current opacity-50;}cmat-vertical-navigation-aside-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-disabled).cmat-vertical-navigation-item-active,cmat-vertical-navigation-aside-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-disabled).cmat-vertical-navigation-item-active-forced,cmat-vertical-navigation-basic-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-disabled).cmat-vertical-navigation-item-active,cmat-vertical-navigation-basic-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-disabled).cmat-vertical-navigation-item-active-forced,cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-disabled).cmat-vertical-navigation-item-active,cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-disabled).cmat-vertical-navigation-item-active-forced{@apply bg-gray-800 bg-opacity-5 dark:bg-white dark:bg-opacity-12;}cmat-vertical-navigation-aside-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-disabled).cmat-vertical-navigation-item-active .cmat-vertical-navigation-item-icon,cmat-vertical-navigation-aside-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-disabled).cmat-vertical-navigation-item-active-forced .cmat-vertical-navigation-item-icon,cmat-vertical-navigation-basic-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-disabled).cmat-vertical-navigation-item-active .cmat-vertical-navigation-item-icon,cmat-vertical-navigation-basic-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-disabled).cmat-vertical-navigation-item-active-forced .cmat-vertical-navigation-item-icon,cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-disabled).cmat-vertical-navigation-item-active .cmat-vertical-navigation-item-icon,cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-disabled).cmat-vertical-navigation-item-active-forced .cmat-vertical-navigation-item-icon{@apply opacity-100;}cmat-vertical-navigation-aside-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-disabled).cmat-vertical-navigation-item-active .cmat-vertical-navigation-item-title,cmat-vertical-navigation-aside-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-disabled).cmat-vertical-navigation-item-active-forced .cmat-vertical-navigation-item-title,cmat-vertical-navigation-basic-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-disabled).cmat-vertical-navigation-item-active .cmat-vertical-navigation-item-title,cmat-vertical-navigation-basic-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-disabled).cmat-vertical-navigation-item-active-forced .cmat-vertical-navigation-item-title,cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-disabled).cmat-vertical-navigation-item-active .cmat-vertical-navigation-item-title,cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-disabled).cmat-vertical-navigation-item-active-forced .cmat-vertical-navigation-item-title{@apply opacity-100;}cmat-vertical-navigation-aside-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-disabled).cmat-vertical-navigation-item-active .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation-aside-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-disabled).cmat-vertical-navigation-item-active-forced .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation-basic-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-disabled).cmat-vertical-navigation-item-active .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation-basic-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-disabled).cmat-vertical-navigation-item-active-forced .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-disabled).cmat-vertical-navigation-item-active .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-disabled).cmat-vertical-navigation-item-active-forced .cmat-vertical-navigation-item-subtitle{@apply opacity-100;}cmat-vertical-navigation-aside-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-active-forced):not(.cmat-vertical-navigation-item-active):not(.cmat-vertical-navigation-item-disabled):hover,cmat-vertical-navigation-basic-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-active-forced):not(.cmat-vertical-navigation-item-active):not(.cmat-vertical-navigation-item-disabled):hover,cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-active-forced):not(.cmat-vertical-navigation-item-active):not(.cmat-vertical-navigation-item-disabled):hover{@apply bg-gray-800 bg-opacity-5 dark:bg-white dark:bg-opacity-12;}cmat-vertical-navigation-aside-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-active-forced):not(.cmat-vertical-navigation-item-active):not(.cmat-vertical-navigation-item-disabled):hover .cmat-vertical-navigation-item-icon,cmat-vertical-navigation-basic-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-active-forced):not(.cmat-vertical-navigation-item-active):not(.cmat-vertical-navigation-item-disabled):hover .cmat-vertical-navigation-item-icon,cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-active-forced):not(.cmat-vertical-navigation-item-active):not(.cmat-vertical-navigation-item-disabled):hover .cmat-vertical-navigation-item-icon{@apply opacity-100;}cmat-vertical-navigation-aside-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-active-forced):not(.cmat-vertical-navigation-item-active):not(.cmat-vertical-navigation-item-disabled):hover .cmat-vertical-navigation-item-title,cmat-vertical-navigation-aside-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-active-forced):not(.cmat-vertical-navigation-item-active):not(.cmat-vertical-navigation-item-disabled):hover .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation-basic-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-active-forced):not(.cmat-vertical-navigation-item-active):not(.cmat-vertical-navigation-item-disabled):hover .cmat-vertical-navigation-item-title,cmat-vertical-navigation-basic-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-active-forced):not(.cmat-vertical-navigation-item-active):not(.cmat-vertical-navigation-item-disabled):hover .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-active-forced):not(.cmat-vertical-navigation-item-active):not(.cmat-vertical-navigation-item-disabled):hover .cmat-vertical-navigation-item-title,cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-active-forced):not(.cmat-vertical-navigation-item-active):not(.cmat-vertical-navigation-item-disabled):hover .cmat-vertical-navigation-item-arrow{@apply opacity-100;}cmat-vertical-navigation-aside-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-active-forced):not(.cmat-vertical-navigation-item-active):not(.cmat-vertical-navigation-item-disabled):hover .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation-basic-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-active-forced):not(.cmat-vertical-navigation-item-active):not(.cmat-vertical-navigation-item-disabled):hover .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:not(.cmat-vertical-navigation-item-active-forced):not(.cmat-vertical-navigation-item-active):not(.cmat-vertical-navigation-item-disabled):hover .cmat-vertical-navigation-item-subtitle{@apply opacity-100;}cmat-vertical-navigation-collapsable-item.cmat-vertical-navigation-item-expanded>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon{@apply opacity-100;}cmat-vertical-navigation-collapsable-item.cmat-vertical-navigation-item-expanded>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title,cmat-vertical-navigation-collapsable-item.cmat-vertical-navigation-item-expanded>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow{@apply opacity-100;}cmat-vertical-navigation-collapsable-item.cmat-vertical-navigation-item-expanded>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-subtitle{@apply opacity-100;}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{@apply opacity-100 text-primary-600 dark:text-primary-400;}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"] }]
|
|
1594
|
+
args: [{ selector: 'cmat-vertical-navigation', animations: cmatAnimations, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatVerticalNavigation', standalone: true, imports: [CmatVerticalNavigationAsideItemComponent, CmatVerticalNavigationBasicItemComponent,
|
|
1595
|
+
CmatVerticalNavigationCollapsableItemComponent, CmatVerticalNavigationDividerItemComponent,
|
|
1596
|
+
CmatVerticalNavigationGroupItemComponent, CmatVerticalNavigationSpacerItemComponent], template: "<div class=\"cmat-vertical-navigation-wrapper\">\n\n <!-- Header -->\n <div class=\"cmat-vertical-navigation-header\">\n <ng-content select=\"[cmatVerticalNavigationHeader]\"></ng-content>\n </div>\n\n <!-- Content -->\n <div class=\"cmat-vertical-navigation-content overflow-y-auto lg:overflow-y-hidden lg:hover:overflow-y-auto scrollbar-custom\" #navigationContent>\n\n <!-- Content header -->\n <div class=\"cmat-vertical-navigation-content-header\">\n <ng-content select=\"[cmatVerticalNavigationContentHeader]\"></ng-content>\n </div>\n\n <!-- Items -->\n @for (item of navigation; track trackByFn($index, item)) {\n <!-- Skip the hidden items -->\n @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\n <!-- Aside -->\n @if (item.type === 'aside') {\n <cmat-vertical-navigation-aside-item [item]=\"item\" [name]=\"name\" [activeItemId]=\"activeAsideItemId\"\n [autoCollapse]=\"autoCollapse\" [skipChildren]=\"true\" (click)=\"toggleAside(item)\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\n </cmat-vertical-navigation-aside-item>\n }\n <!-- Basic -->\n @if (item.type === 'basic') {\n <cmat-vertical-navigation-basic-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\n </cmat-vertical-navigation-basic-item>\n }\n <!-- Collapsable -->\n @if (item.type === 'collapsable') {\n <cmat-vertical-navigation-collapsable-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\"\n [autoCollapse]=\"autoCollapse\"></cmat-vertical-navigation-collapsable-item>\n }\n <!-- Divider -->\n @if (item.type === 'divider') {\n <cmat-vertical-navigation-divider-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\n </cmat-vertical-navigation-divider-item>\n }\n <!-- Group -->\n @if (item.type === 'group') {\n <cmat-vertical-navigation-group-item [item]=\"item\" [name]=\"name\" [autoCollapse]=\"autoCollapse\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\n </cmat-vertical-navigation-group-item>\n }\n <!-- Spacer -->\n @if (item.type === 'spacer') {\n <cmat-vertical-navigation-spacer-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\n </cmat-vertical-navigation-spacer-item>\n }\n }\n }\n\n <!-- Content footer -->\n <div class=\"cmat-vertical-navigation-content-footer\">\n <ng-content select=\"[cmatVerticalNavigationContentFooter]\"></ng-content>\n </div>\n\n </div>\n <!-- Footer -->\n <div class=\"cmat-vertical-navigation-footer\">\n <ng-content select=\"[cmatVerticalNavigationFooter]\"></ng-content>\n </div>\n\n</div>\n\n<!-- Aside -->\n@if (activeAsideItemId) {\n <div class=\"cmat-vertical-navigation-aside-wrapper overflow-y-auto lg:overflow-y-hidden lg:hover:overflow-y-auto scrollbar-custom\"\n [@fadeInLeft]=\"position === 'left'\" [@fadeInRight]=\"position === 'right'\" [@fadeOutLeft]=\"position === 'left'\"\n [@fadeOutRight]=\"position === 'right'\">\n <!-- Items -->\n @for (item of navigation; track trackByFn($index, item)) {\n <!-- Skip the hidden items -->\n @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\n <!-- Aside -->\n @if (item.type === 'aside' && item.id === activeAsideItemId) {\n <cmat-vertical-navigation-aside-item [item]=\"item\" [name]=\"name\" [autoCollapse]=\"autoCollapse\">\n </cmat-vertical-navigation-aside-item>\n }\n }\n }\n </div>\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"] }]
|
|
1601
1597
|
}], ctorParameters: () => [{ type: i1$1.AnimationBuilder }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.Router }, { type: i3$1.ScrollStrategyOptions }, { type: CmatNavigationService }, { type: i2.CmatUtilsService }], propDecorators: { appearance: [{
|
|
1602
1598
|
type: Input
|
|
1603
1599
|
}], autoCollapse: [{
|
|
1604
1600
|
type: Input
|
|
1605
|
-
}],
|
|
1601
|
+
}], editState: [{
|
|
1606
1602
|
type: Input
|
|
1607
1603
|
}], inner: [{
|
|
1608
1604
|
type: Input
|