cmat 0.0.3

package/fesm2022/cmat-components-navigation.mjs

@@ -0,0 +1,1656 @@
+import * as i0 from '@angular/core';
+import { Injectable, Component, ChangeDetectionStrategy, Input, forwardRef, ViewChild, ViewEncapsulation, EventEmitter, Output, HostBinding, HostListener } from '@angular/core';
+import { Subject, ReplaySubject } from 'rxjs';
+import { cmatAnimations } from 'cmat/animations';
+import { takeUntil, filter } from 'rxjs/operators';
+import { NgClass, NgIf, NgTemplateOutlet, NgFor } from '@angular/common';
+import * as i2$1 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import * as i4 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i3 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i1 from '@angular/router';
+import { RouterLink, RouterLinkActive, NavigationEnd } from '@angular/router';
+import * as i2 from 'cmat/services/utils';
+import * as i1$1 from '@angular/animations';
+import { style, animate } from '@angular/animations';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import * as i3$1 from '@angular/cdk/overlay';
+
+class CmatNavigationService {
+    constructor() {
+        this._componentRegistry = new Map();
+        this._navigationStore = new Map();
+    }
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+    /**
+     * Register navigation component
+     *
+     * @param name
+     * @param component
+     */
+    registerComponent(name, component) {
+        this._componentRegistry.set(name, component);
+    }
+    /**
+     * Deregister navigation component
+     *
+     * @param name
+     */
+    deregisterComponent(name) {
+        this._componentRegistry.delete(name);
+    }
+    /**
+     * Get navigation component from the registry
+     *
+     * @param name
+     */
+    getComponent(name) {
+        return this._componentRegistry.get(name);
+    }
+    /**
+     * Store the given navigation with the given key
+     *
+     * @param key
+     * @param navigation
+     */
+    storeNavigation(key, navigation) {
+        // Add to the store
+        this._navigationStore.set(key, navigation);
+    }
+    /**
+     * Get navigation from storage by key
+     *
+     * @param key
+     */
+    getNavigation(key) {
+        return this._navigationStore.get(key) ?? [];
+    }
+    /**
+     * Delete the navigation from the storage
+     *
+     * @param key
+     */
+    deleteNavigation(key) {
+        // Check if the navigation exists
+        if (!this._navigationStore.has(key)) {
+            console.warn(`Navigation with the key '${key}' does not exist in the store.`);
+        }
+        // Delete from the storage
+        this._navigationStore.delete(key);
+    }
+    /**
+     * Utility function that returns a flattened
+     * version of the given navigation array
+     *
+     * @param navigation
+     * @param flatNavigation
+     */
+    getFlatNavigation(navigation, flatNavigation = []) {
+        for (const item of navigation) {
+            if (item.type === 'basic') {
+                flatNavigation.push(item);
+                continue;
+            }
+            if (item.type === 'aside' || item.type === 'collapsable' || item.type === 'group') {
+                if (item.children) {
+                    this.getFlatNavigation(item.children, flatNavigation);
+                }
+            }
+        }
+        return flatNavigation;
+    }
+    /**
+     * Utility function that returns the item
+     * with the given id from given navigation
+     *
+     * @param id
+     * @param navigation
+     */
+    getItem(id, navigation) {
+        for (const item of navigation) {
+            if (item.id === id) {
+                return item;
+            }
+            if (item.children) {
+                const childItem = this.getItem(id, item.children);
+                if (childItem) {
+                    return childItem;
+                }
+            }
+        }
+        return null;
+    }
+    /**
+     * Utility function that returns the item's parent
+     * with the given id from given navigation
+     *
+     * @param id
+     * @param navigation
+     * @param parent
+     */
+    getItemParent(id, navigation, parent) {
+        for (const item of navigation) {
+            if (item.id === id) {
+                return parent;
+            }
+            if (item.children) {
+                const childItem = this.getItemParent(id, item.children, item);
+                if (childItem) {
+                    return childItem;
+                }
+            }
+        }
+        return null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatNavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatNavigationService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatNavigationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class CmatHorizontalNavigationSpacerItemComponent {
+    constructor(_changeDetectorRef, _cmatNavigationService) {
+        this._changeDetectorRef = _changeDetectorRef;
+        this._cmatNavigationService = _cmatNavigationService;
+        this._unsubscribeAll = new Subject();
+    }
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+    /**
+     * On init
+     */
+    ngOnInit() {
+        // Get the parent navigation component
+        this._cmatHorizontalNavigationComponent = this._cmatNavigationService.getComponent(this.name);
+        // Subscribe to onRefreshed on the navigation component
+        this._cmatHorizontalNavigationComponent.onRefreshed.pipe(takeUntil(this._unsubscribeAll)).subscribe(() => {
+            // Mark for check
+            this._changeDetectorRef.markForCheck();
+        });
+    }
+    /**
+     * On destroy
+     */
+    ngOnDestroy() {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next(void 0);
+        this._unsubscribeAll.complete();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatHorizontalNavigationSpacerItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CmatNavigationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatHorizontalNavigationSpacerItemComponent, decorators: [{
+            type: Component,
+            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>" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: CmatNavigationService }], propDecorators: { item: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }] } });
+
+class CmatHorizontalNavigationDividerItemComponent {
+    constructor(_changeDetectorRef, _cmatNavigationService) {
+        this._changeDetectorRef = _changeDetectorRef;
+        this._cmatNavigationService = _cmatNavigationService;
+        this._unsubscribeAll = new Subject();
+    }
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+    /**
+     * On init
+     */
+    ngOnInit() {
+        // Get the parent navigation component
+        this._cmatHorizontalNavigationComponent = this._cmatNavigationService.getComponent(this.name);
+        // Subscribe to onRefreshed on the navigation component
+        this._cmatHorizontalNavigationComponent.onRefreshed.pipe(takeUntil(this._unsubscribeAll)).subscribe(() => {
+            // Mark for check
+            this._changeDetectorRef.markForCheck();
+        });
+    }
+    /**
+     * On destroy
+     */
+    ngOnDestroy() {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next(void 0);
+        this._unsubscribeAll.complete();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatHorizontalNavigationDividerItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CmatNavigationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatHorizontalNavigationDividerItemComponent, decorators: [{
+            type: Component,
+            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>" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: CmatNavigationService }], propDecorators: { item: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }] } });
+
+class CmatHorizontalNavigationBasicItemComponent {
+    constructor(_changeDetectorRef, _cmatNavigationService, _cmatUtilsService) {
+        this._changeDetectorRef = _changeDetectorRef;
+        this._cmatNavigationService = _cmatNavigationService;
+        this._cmatUtilsService = _cmatUtilsService;
+        this._unsubscribeAll = new Subject();
+        // Set the equivalent of {exact: false} as default for active match options.
+        // We are not assigning the item.isActiveMatchOptions directly to the
+        // [routerLinkActiveOptions] because if it's "undefined" initially, the router
+        // will throw an error and stop working.
+        this.isActiveMatchOptions = this._cmatUtilsService.subsetMatchOptions;
+    }
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+    /**
+     * On init
+     */
+    ngOnInit() {
+        // Set the "isActiveMatchOptions" either from item's
+        // "isActiveMatchOptions" or the equivalent form of
+        // item's "exactMatch" option
+        this.isActiveMatchOptions =
+            this.item.isActiveMatchOptions ?? this.item.exactMatch
+                ? this._cmatUtilsService.exactMatchOptions
+                : this._cmatUtilsService.subsetMatchOptions;
+        // Get the parent navigation component
+        this._cmatHorizontalNavigationComponent = this._cmatNavigationService.getComponent(this.name);
+        // Mark for check
+        this._changeDetectorRef.markForCheck();
+        // Subscribe to onRefreshed on the navigation component
+        this._cmatHorizontalNavigationComponent.onRefreshed.pipe(takeUntil(this._unsubscribeAll)).subscribe(() => {
+            // Mark for check
+            this._changeDetectorRef.markForCheck();
+        });
+    }
+    /**
+     * On destroy
+     */
+    ngOnDestroy() {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next(void 0);
+        this._unsubscribeAll.complete();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatHorizontalNavigationBasicItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CmatNavigationService }, { token: i2.CmatUtilsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: CmatHorizontalNavigationBasicItemComponent, isStandalone: true, selector: "cmat-horizontal-navigation-basic-item", inputs: { item: "item", name: "name" }, ngImport: i0, template: "<!-- Item wrapper -->\r\n<div class=\"cmat-horizontal-navigation-item-wrapper\"\r\n    [class.cmat-horizontal-navigation-item-has-subtitle]=\"!!item.subTitle\" [ngClass]=\"item.classes?.wrapper\">\r\n\r\n    <!-- Item with an internal link -->\r\n    <ng-container *ngIf=\"item.link && !item.externalLink && !item.function && !item.disabled\">\r\n        <div class=\"cmat-horizontal-navigation-item\"\r\n            [ngClass]=\"{'cmat-horizontal-navigation-item-active-forced': item.active}\" [routerLink]=\"[item.link]\"\r\n            [routerLinkActive]=\"'cmat-horizontal-navigation-item-active'\"\r\n            [routerLinkActiveOptions]=\"isActiveMatchOptions\" [matTooltip]=\"item.tooltip || ''\">\r\n            <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <!-- Item with an external link -->\r\n    <ng-container *ngIf=\"item.link && item.externalLink && !item.function && !item.disabled\">\r\n        <a class=\"cmat-horizontal-navigation-item\" [href]=\"item.link\" [target]=\"item.target || '_blank'\"\r\n            [matTooltip]=\"item.tooltip || ''\">\r\n            <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n        </a>\r\n    </ng-container>\r\n\r\n    <!-- Item with a function -->\r\n    <ng-container *ngIf=\"!item.link && item.function && !item.disabled\">\r\n        <div class=\"cmat-horizontal-navigation-item\" role=\"presentation\"\r\n            [ngClass]=\"{'cmat-horizontal-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\"\r\n            (click)=\"item.function(item)\">\r\n            <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <!-- Item with an internal link and function -->\r\n    <ng-container *ngIf=\"item.link && !item.externalLink && item.function && !item.disabled\">\r\n        <div class=\"cmat-horizontal-navigation-item\" role=\"presentation\"\r\n            [ngClass]=\"{'cmat-horizontal-navigation-item-active-forced': item.active}\" [routerLink]=\"[item.link]\"\r\n            [routerLinkActive]=\"'cmat-horizontal-navigation-item-active'\"\r\n            [routerLinkActiveOptions]=\"isActiveMatchOptions\" [matTooltip]=\"item.tooltip || ''\"\r\n            (click)=\"item.function(item)\">\r\n            <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <!-- Item with an external link and function -->\r\n    <ng-container *ngIf=\"item.link && item.externalLink && item.function && !item.disabled\">\r\n        <a class=\"cmat-horizontal-navigation-item\" [href]=\"item.link\" [target]=\"item.target || '_blank'\"\r\n            [matTooltip]=\"item.tooltip || ''\" (click)=\"item.function(item)\" mat-menu-item>\r\n            <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n        </a>\r\n    </ng-container>\r\n\r\n    <!-- Item with a no link and no function -->\r\n    <ng-container *ngIf=\"!item.link && !item.function && !item.disabled\">\r\n        <div class=\"cmat-horizontal-navigation-item\"\r\n            [ngClass]=\"{'cmat-horizontal-navigation-item-active-forced': item.active}\"\r\n            [matTooltip]=\"item.tooltip || ''\">\r\n            <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <!-- Item is disabled -->\r\n    <ng-container *ngIf=\"item.disabled\">\r\n        <div class=\"cmat-horizontal-navigation-item cmat-horizontal-navigation-item-disabled\">\r\n            <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n        </div>\r\n    </ng-container>\r\n\r\n</div>\r\n\r\n<!-- Item template -->\r\n<ng-template #itemTemplate>\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\" [svgIcon]=\"item.icon\">\r\n        </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\r\n</ng-template>", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatHorizontalNavigationBasicItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cmat-horizontal-navigation-basic-item', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgClass, NgIf, RouterLink, RouterLinkActive, MatTooltipModule, NgTemplateOutlet, MatMenuModule, MatIconModule], template: "<!-- Item wrapper -->\r\n<div class=\"cmat-horizontal-navigation-item-wrapper\"\r\n    [class.cmat-horizontal-navigation-item-has-subtitle]=\"!!item.subTitle\" [ngClass]=\"item.classes?.wrapper\">\r\n\r\n    <!-- Item with an internal link -->\r\n    <ng-container *ngIf=\"item.link && !item.externalLink && !item.function && !item.disabled\">\r\n        <div class=\"cmat-horizontal-navigation-item\"\r\n            [ngClass]=\"{'cmat-horizontal-navigation-item-active-forced': item.active}\" [routerLink]=\"[item.link]\"\r\n            [routerLinkActive]=\"'cmat-horizontal-navigation-item-active'\"\r\n            [routerLinkActiveOptions]=\"isActiveMatchOptions\" [matTooltip]=\"item.tooltip || ''\">\r\n            <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <!-- Item with an external link -->\r\n    <ng-container *ngIf=\"item.link && item.externalLink && !item.function && !item.disabled\">\r\n        <a class=\"cmat-horizontal-navigation-item\" [href]=\"item.link\" [target]=\"item.target || '_blank'\"\r\n            [matTooltip]=\"item.tooltip || ''\">\r\n            <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n        </a>\r\n    </ng-container>\r\n\r\n    <!-- Item with a function -->\r\n    <ng-container *ngIf=\"!item.link && item.function && !item.disabled\">\r\n        <div class=\"cmat-horizontal-navigation-item\" role=\"presentation\"\r\n            [ngClass]=\"{'cmat-horizontal-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\"\r\n            (click)=\"item.function(item)\">\r\n            <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <!-- Item with an internal link and function -->\r\n    <ng-container *ngIf=\"item.link && !item.externalLink && item.function && !item.disabled\">\r\n        <div class=\"cmat-horizontal-navigation-item\" role=\"presentation\"\r\n            [ngClass]=\"{'cmat-horizontal-navigation-item-active-forced': item.active}\" [routerLink]=\"[item.link]\"\r\n            [routerLinkActive]=\"'cmat-horizontal-navigation-item-active'\"\r\n            [routerLinkActiveOptions]=\"isActiveMatchOptions\" [matTooltip]=\"item.tooltip || ''\"\r\n            (click)=\"item.function(item)\">\r\n            <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <!-- Item with an external link and function -->\r\n    <ng-container *ngIf=\"item.link && item.externalLink && item.function && !item.disabled\">\r\n        <a class=\"cmat-horizontal-navigation-item\" [href]=\"item.link\" [target]=\"item.target || '_blank'\"\r\n            [matTooltip]=\"item.tooltip || ''\" (click)=\"item.function(item)\" mat-menu-item>\r\n            <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n        </a>\r\n    </ng-container>\r\n\r\n    <!-- Item with a no link and no function -->\r\n    <ng-container *ngIf=\"!item.link && !item.function && !item.disabled\">\r\n        <div class=\"cmat-horizontal-navigation-item\"\r\n            [ngClass]=\"{'cmat-horizontal-navigation-item-active-forced': item.active}\"\r\n            [matTooltip]=\"item.tooltip || ''\">\r\n            <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <!-- Item is disabled -->\r\n    <ng-container *ngIf=\"item.disabled\">\r\n        <div class=\"cmat-horizontal-navigation-item cmat-horizontal-navigation-item-disabled\">\r\n            <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n        </div>\r\n    </ng-container>\r\n\r\n</div>\r\n\r\n<!-- Item template -->\r\n<ng-template #itemTemplate>\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\" [svgIcon]=\"item.icon\">\r\n        </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\r\n</ng-template>" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: CmatNavigationService }, { type: i2.CmatUtilsService }], propDecorators: { item: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }] } });
+
+class CmatHorizontalNavigationBranchItemComponent {
+    constructor(_changeDetectorRef, _cmatNavigationService) {
+        this._changeDetectorRef = _changeDetectorRef;
+        this._cmatNavigationService = _cmatNavigationService;
+        /* eslint-enable @typescript-eslint/naming-convention */
+        this.child = false;
+        this._unsubscribeAll = new Subject();
+    }
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+    /**
+     * On init
+     */
+    ngOnInit() {
+        // Get the parent navigation component
+        this._cmatHorizontalNavigationComponent = this._cmatNavigationService.getComponent(this.name);
+        // Subscribe to onRefreshed on the navigation component
+        this._cmatHorizontalNavigationComponent.onRefreshed.pipe(takeUntil(this._unsubscribeAll)).subscribe(() => {
+            // Mark for check
+            this._changeDetectorRef.markForCheck();
+        });
+    }
+    /**
+     * On destroy
+     */
+    ngOnDestroy() {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next(void 0);
+        this._unsubscribeAll.complete();
+    }
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+    /**
+     * Trigger the change detection
+     */
+    triggerChangeDetection() {
+        // Mark for check
+        this._changeDetectorRef.markForCheck();
+    }
+    /**
+     * Track by function for ngFor loops
+     *
+     * @param index
+     * @param item
+     */
+    trackByFn(index, item) {
+        return item.id || index;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatHorizontalNavigationBranchItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CmatNavigationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", 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: "<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>", dependencies: [{ kind: "component", type: i0.forwardRef(() => CmatHorizontalNavigationBranchItemComponent), selector: "cmat-horizontal-navigation-branch-item", inputs: ["child", "item", "name"] }, { kind: "directive", type: i0.forwardRef(() => NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "directive", type: i0.forwardRef(() => NgFor), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatHorizontalNavigationBranchItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cmat-horizontal-navigation-branch-item', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf, NgClass, MatMenuModule, NgTemplateOutlet, NgFor, CmatHorizontalNavigationBasicItemComponent,
+                        forwardRef(() => CmatHorizontalNavigationBranchItemComponent),
+                        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>" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: CmatNavigationService }], propDecorators: { child: [{
+                type: Input
+            }], item: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], matMenu: [{
+                type: ViewChild,
+                args: ['matMenu', { static: true }]
+            }] } });
+
+class CmatHorizontalNavigationComponent {
+    constructor(_changeDetectorRef, _cmatNavigationService, _cmatUtilsService) {
+        this._changeDetectorRef = _changeDetectorRef;
+        this._cmatNavigationService = _cmatNavigationService;
+        this._cmatUtilsService = _cmatUtilsService;
+        this.name = this._cmatUtilsService.randomId();
+        this.onRefreshed = new ReplaySubject(1);
+        this._unsubscribeAll = new Subject();
+    }
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+    /**
+     * On changes
+     *
+     * @param changes
+     */
+    ngOnChanges(changes) {
+        // Navigation
+        if ('navigation' in changes) {
+            // Mark for check
+            this._changeDetectorRef.markForCheck();
+        }
+    }
+    /**
+     * On init
+     */
+    ngOnInit() {
+        // Make sure the name input is not an empty string
+        if (this.name === '') {
+            this.name = this._cmatUtilsService.randomId();
+        }
+        // Register the navigation component
+        this._cmatNavigationService.registerComponent(this.name, this);
+    }
+    /**
+     * On destroy
+     */
+    ngOnDestroy() {
+        // Deregister the navigation component from the registry
+        this._cmatNavigationService.deregisterComponent(this.name);
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next(void 0);
+        this._unsubscribeAll.complete();
+    }
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+    /**
+     * Refresh the component to apply the changes
+     */
+    refresh() {
+        // Mark for check
+        this._changeDetectorRef.markForCheck();
+        // Execute the observable
+        this.onRefreshed.next(true);
+    }
+    /**
+     * Track by function for ngFor loops
+     *
+     * @param index
+     * @param item
+     */
+    trackByFn(index, item) {
+        return item.id || index;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatHorizontalNavigationComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CmatNavigationService }, { token: i2.CmatUtilsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", 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\">\r\n\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            <!-- Basic -->\r\n            <ng-container *ngIf=\"item.type === 'basic'\">\r\n                <cmat-horizontal-navigation-basic-item class=\"cmat-horizontal-navigation-menu-item\" [item]=\"item\"\r\n                    [name]=\"name\"></cmat-horizontal-navigation-basic-item>\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                <cmat-horizontal-navigation-branch-item class=\"cmat-horizontal-navigation-menu-item\" [item]=\"item\"\r\n                    [name]=\"name\"></cmat-horizontal-navigation-branch-item>\r\n            </ng-container>\r\n\r\n            <!-- Spacer -->\r\n            <ng-container *ngIf=\"item.type === 'spacer'\">\r\n                <cmat-horizontal-navigation-spacer-item class=\"cmat-horizontal-navigation-menu-item\" [item]=\"item\"\r\n                    [name]=\"name\"></cmat-horizontal-navigation-spacer-item>\r\n            </ng-container>\r\n\r\n        </ng-container>\r\n\r\n    </ng-container>\r\n\r\n</div>", styles: ["cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper{display:flex;align-items:center}@screen sm{cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-basic-item:hover .cmat-horizontal-navigation-item-wrapper,cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-branch-item:hover .cmat-horizontal-navigation-item-wrapper {@apply bg-hover;}}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-basic-item .cmat-horizontal-navigation-item-active .cmat-horizontal-navigation-item-title,cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-basic-item .cmat-horizontal-navigation-item-active-forced .cmat-horizontal-navigation-item-title{@apply text-primary !important;}cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-basic-item .cmat-horizontal-navigation-item-active .cmat-horizontal-navigation-item-subtitle,cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-basic-item .cmat-horizontal-navigation-item-active-forced .cmat-horizontal-navigation-item-subtitle{@apply text-primary-400 !important;}.dark cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-basic-item .cmat-horizontal-navigation-item-active .cmat-horizontal-navigation-item-subtitle,.dark cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-basic-item .cmat-horizontal-navigation-item-active-forced .cmat-horizontal-navigation-item-subtitle{@apply text-primary-600 !important;}cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-basic-item .cmat-horizontal-navigation-item-active .cmat-horizontal-navigation-item-icon,cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-basic-item .cmat-horizontal-navigation-item-active-forced .cmat-horizontal-navigation-item-icon{@apply text-primary !important;}cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-branch-item .cmat-horizontal-navigation-menu-active .cmat-horizontal-navigation-item-wrapper,cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-branch-item .cmat-horizontal-navigation-menu-active-forced .cmat-horizontal-navigation-item-wrapper{@apply bg-hover;}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-basic-item .cmat-horizontal-navigation-item-active .cmat-horizontal-navigation-item-title,.cmat-horizontal-navigation-menu-item cmat-horizontal-navigation-basic-item .cmat-horizontal-navigation-item-active-forced .cmat-horizontal-navigation-item-title{@apply text-primary !important;}.cmat-horizontal-navigation-menu-item cmat-horizontal-navigation-basic-item .cmat-horizontal-navigation-item-active .cmat-horizontal-navigation-item-subtitle,.cmat-horizontal-navigation-menu-item cmat-horizontal-navigation-basic-item .cmat-horizontal-navigation-item-active-forced .cmat-horizontal-navigation-item-subtitle{@apply text-primary-400 !important;}.dark .cmat-horizontal-navigation-menu-item cmat-horizontal-navigation-basic-item .cmat-horizontal-navigation-item-active .cmat-horizontal-navigation-item-subtitle,.dark .cmat-horizontal-navigation-menu-item cmat-horizontal-navigation-basic-item .cmat-horizontal-navigation-item-active-forced .cmat-horizontal-navigation-item-subtitle{@apply text-primary-600 !important;}.cmat-horizontal-navigation-menu-item cmat-horizontal-navigation-basic-item .cmat-horizontal-navigation-item-active .cmat-horizontal-navigation-item-icon,.cmat-horizontal-navigation-menu-item cmat-horizontal-navigation-basic-item .cmat-horizontal-navigation-item-active-forced .cmat-horizontal-navigation-item-icon{@apply text-primary !important;}.cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-wrapper{width:100%}.cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-wrapper.cmat-horizontal-navigation-item-has-subtitle .cmat-horizontal-navigation-item{min-height:56px}.cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item{position:relative;display:flex;align-items:center;justify-content:flex-start;min-height:48px;width:100%;font-size:13px;font-weight:500;text-decoration:none}.cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item .cmat-horizontal-navigation-item-title-wrapper{@apply whitespace-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: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatHorizontalNavigationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cmat-horizontal-navigation', animations: cmatAnimations, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatHorizontalNavigation', standalone: true, imports: [NgFor, NgIf, CmatHorizontalNavigationBasicItemComponent, CmatHorizontalNavigationBranchItemComponent, CmatHorizontalNavigationSpacerItemComponent], template: "<div class=\"cmat-horizontal-navigation-wrapper\">\r\n\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            <!-- Basic -->\r\n            <ng-container *ngIf=\"item.type === 'basic'\">\r\n                <cmat-horizontal-navigation-basic-item class=\"cmat-horizontal-navigation-menu-item\" [item]=\"item\"\r\n                    [name]=\"name\"></cmat-horizontal-navigation-basic-item>\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                <cmat-horizontal-navigation-branch-item class=\"cmat-horizontal-navigation-menu-item\" [item]=\"item\"\r\n                    [name]=\"name\"></cmat-horizontal-navigation-branch-item>\r\n            </ng-container>\r\n\r\n            <!-- Spacer -->\r\n            <ng-container *ngIf=\"item.type === 'spacer'\">\r\n                <cmat-horizontal-navigation-spacer-item class=\"cmat-horizontal-navigation-menu-item\" [item]=\"item\"\r\n                    [name]=\"name\"></cmat-horizontal-navigation-spacer-item>\r\n            </ng-container>\r\n\r\n        </ng-container>\r\n\r\n    </ng-container>\r\n\r\n</div>", styles: ["cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper{display:flex;align-items:center}@screen sm{cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-basic-item:hover .cmat-horizontal-navigation-item-wrapper,cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-branch-item:hover .cmat-horizontal-navigation-item-wrapper {@apply bg-hover;}}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-basic-item .cmat-horizontal-navigation-item-active .cmat-horizontal-navigation-item-title,cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-basic-item .cmat-horizontal-navigation-item-active-forced .cmat-horizontal-navigation-item-title{@apply text-primary !important;}cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-basic-item .cmat-horizontal-navigation-item-active .cmat-horizontal-navigation-item-subtitle,cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-basic-item .cmat-horizontal-navigation-item-active-forced .cmat-horizontal-navigation-item-subtitle{@apply text-primary-400 !important;}.dark cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-basic-item .cmat-horizontal-navigation-item-active .cmat-horizontal-navigation-item-subtitle,.dark cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-basic-item .cmat-horizontal-navigation-item-active-forced .cmat-horizontal-navigation-item-subtitle{@apply text-primary-600 !important;}cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-basic-item .cmat-horizontal-navigation-item-active .cmat-horizontal-navigation-item-icon,cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-basic-item .cmat-horizontal-navigation-item-active-forced .cmat-horizontal-navigation-item-icon{@apply text-primary !important;}cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-branch-item .cmat-horizontal-navigation-menu-active .cmat-horizontal-navigation-item-wrapper,cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-branch-item .cmat-horizontal-navigation-menu-active-forced .cmat-horizontal-navigation-item-wrapper{@apply bg-hover;}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-basic-item .cmat-horizontal-navigation-item-active .cmat-horizontal-navigation-item-title,.cmat-horizontal-navigation-menu-item cmat-horizontal-navigation-basic-item .cmat-horizontal-navigation-item-active-forced .cmat-horizontal-navigation-item-title{@apply text-primary !important;}.cmat-horizontal-navigation-menu-item cmat-horizontal-navigation-basic-item .cmat-horizontal-navigation-item-active .cmat-horizontal-navigation-item-subtitle,.cmat-horizontal-navigation-menu-item cmat-horizontal-navigation-basic-item .cmat-horizontal-navigation-item-active-forced .cmat-horizontal-navigation-item-subtitle{@apply text-primary-400 !important;}.dark .cmat-horizontal-navigation-menu-item cmat-horizontal-navigation-basic-item .cmat-horizontal-navigation-item-active .cmat-horizontal-navigation-item-subtitle,.dark .cmat-horizontal-navigation-menu-item cmat-horizontal-navigation-basic-item .cmat-horizontal-navigation-item-active-forced .cmat-horizontal-navigation-item-subtitle{@apply text-primary-600 !important;}.cmat-horizontal-navigation-menu-item cmat-horizontal-navigation-basic-item .cmat-horizontal-navigation-item-active .cmat-horizontal-navigation-item-icon,.cmat-horizontal-navigation-menu-item cmat-horizontal-navigation-basic-item .cmat-horizontal-navigation-item-active-forced .cmat-horizontal-navigation-item-icon{@apply text-primary !important;}.cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-wrapper{width:100%}.cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-wrapper.cmat-horizontal-navigation-item-has-subtitle .cmat-horizontal-navigation-item{min-height:56px}.cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item{position:relative;display:flex;align-items:center;justify-content:flex-start;min-height:48px;width:100%;font-size:13px;font-weight:500;text-decoration:none}.cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item .cmat-horizontal-navigation-item-title-wrapper{@apply whitespace-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"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: CmatNavigationService }, { type: i2.CmatUtilsService }], propDecorators: { name: [{
+                type: Input
+            }], navigation: [{
+                type: Input
+            }] } });
+
+class CmatVerticalNavigationSpacerItemComponent {
+    constructor(_changeDetectorRef, _cmatNavigationService) {
+        this._changeDetectorRef = _changeDetectorRef;
+        this._cmatNavigationService = _cmatNavigationService;
+        this.editMode = false;
+        this.editSelectedItemChanged = new EventEmitter();
+        this._unsubscribeAll = new Subject();
+    }
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+    /**
+     * On init
+     */
+    ngOnInit() {
+        // Get the parent navigation component
+        this._cmatVerticalNavigationComponent = this._cmatNavigationService.getComponent(this.name);
+        // Subscribe to onRefreshed on the navigation component
+        this._cmatVerticalNavigationComponent.onRefreshed.pipe(takeUntil(this._unsubscribeAll)).subscribe(() => {
+            // Mark for check
+            this._changeDetectorRef.markForCheck();
+        });
+    }
+    /**
+     * On destroy
+     */
+    ngOnDestroy() {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next(void 0);
+        this._unsubscribeAll.complete();
+    }
+    selectItem(item) {
+        this.editSelectedItemChanged.next(item);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatVerticalNavigationSpacerItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CmatNavigationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: CmatVerticalNavigationSpacerItemComponent, isStandalone: true, selector: "cmat-vertical-navigation-spacer-item", inputs: { item: "item", name: "name", editMode: "editMode" }, outputs: { editSelectedItemChanged: "editSelectedItemChanged" }, ngImport: i0, template: "<!-- Spacer -->\r\n<div class=\"cmat-vertical-navigation-item-wrapper\" role=\"presentation\" [ngClass]=\"item.classes?.wrapper\" (click)=\"selectItem(item);\"></div>", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatVerticalNavigationSpacerItemComponent, decorators: [{
+            type: Component,
+            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\" role=\"presentation\" [ngClass]=\"item.classes?.wrapper\" (click)=\"selectItem(item);\"></div>" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: CmatNavigationService }], propDecorators: { item: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], editMode: [{
+                type: Input
+            }], editSelectedItemChanged: [{
+                type: Output
+            }] } });
+
+class CmatVerticalNavigationDividerItemComponent {
+    constructor(_changeDetectorRef, _cmatNavigationService) {
+        this._changeDetectorRef = _changeDetectorRef;
+        this._cmatNavigationService = _cmatNavigationService;
+        this.editMode = false;
+        this.editSelectedItemChanged = new EventEmitter();
+        this._unsubscribeAll = new Subject();
+    }
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+    /**
+     * On init
+     */
+    ngOnInit() {
+        // Get the parent navigation component
+        this._cmatVerticalNavigationComponent = this._cmatNavigationService.getComponent(this.name);
+        // Subscribe to onRefreshed on the navigation component
+        this._cmatVerticalNavigationComponent.onRefreshed.pipe(takeUntil(this._unsubscribeAll)).subscribe(() => {
+            // Mark for check
+            this._changeDetectorRef.markForCheck();
+        });
+    }
+    /**
+     * On destroy
+     */
+    ngOnDestroy() {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next(void 0);
+        this._unsubscribeAll.complete();
+    }
+    selectItem(item) {
+        this.editSelectedItemChanged.next(item);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatVerticalNavigationDividerItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CmatNavigationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: CmatVerticalNavigationDividerItemComponent, isStandalone: true, selector: "cmat-vertical-navigation-divider-item", inputs: { item: "item", name: "name", editMode: "editMode" }, 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatVerticalNavigationDividerItemComponent, decorators: [{
+            type: Component,
+            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>" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: CmatNavigationService }], propDecorators: { item: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], editMode: [{
+                type: Input
+            }], editSelectedItemChanged: [{
+                type: Output
+            }] } });
+
+class CmatVerticalNavigationBasicItemComponent {
+    constructor(_changeDetectorRef, _cmatNavigationService, _cmatUtilsService) {
+        this._changeDetectorRef = _changeDetectorRef;
+        this._cmatNavigationService = _cmatNavigationService;
+        this._cmatUtilsService = _cmatUtilsService;
+        this.editSelectedItemChanged = new EventEmitter();
+        this._unsubscribeAll = new Subject();
+        // Set the equivalent of {exact: false} as default for active match options.
+        // We are not assigning the item.isActiveMatchOptions directly to the
+        // [routerLinkActiveOptions] because if it's "undefined" initially, the router
+        // will throw an error and stop working.
+        this.isActiveMatchOptions = this._cmatUtilsService.subsetMatchOptions;
+    }
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+    /**
+     * On init
+     */
+    ngOnInit() {
+        // Set the "isActiveMatchOptions" either from item's
+        // "isActiveMatchOptions" or the equivalent form of
+        // item's "exactMatch" option
+        this.isActiveMatchOptions =
+            this.item.isActiveMatchOptions ?? this.item.exactMatch
+                ? this._cmatUtilsService.exactMatchOptions
+                : this._cmatUtilsService.subsetMatchOptions;
+        // Get the parent navigation component
+        this._cmatVerticalNavigationComponent = this._cmatNavigationService.getComponent(this.name);
+        // Mark for check
+        this._changeDetectorRef.markForCheck();
+        // Subscribe to onRefreshed on the navigation component
+        this._cmatVerticalNavigationComponent.onRefreshed.pipe(takeUntil(this._unsubscribeAll)).subscribe(() => {
+            // Mark for check
+            this._changeDetectorRef.markForCheck();
+        });
+    }
+    /**
+     * On destroy
+     */
+    ngOnDestroy() {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next(void 0);
+        this._unsubscribeAll.complete();
+    }
+    selectItem() {
+        this.editSelectedItemChanged.next(this.item);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatVerticalNavigationBasicItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CmatNavigationService }, { token: i2.CmatUtilsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: CmatVerticalNavigationBasicItemComponent, isStandalone: true, selector: "cmat-vertical-navigation-basic-item", inputs: { item: "item", name: "name", editMode: "editMode" }, outputs: { editSelectedItemChanged: "editSelectedItemChanged" }, ngImport: i0, template: "<!-- Item wrapper -->\r\n<div class=\"cmat-vertical-navigation-item-wrapper\" [class.cmat-vertical-navigation-item-has-subtitle]=\"!!item.subTitle\"\r\n    [ngClass]=\"item.classes?.wrapper\">\r\n\r\n    <ng-container *ngIf=\"editMode\">\r\n        <div class=\"cmat-vertical-navigation-item\" role=\"presentation\"\r\n            [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\"\r\n            (click)=\"selectItem()\">\r\n            <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"!editMode\">\r\n        <!-- Item with an internal link -->\r\n        <ng-container *ngIf=\"item.link && !item.externalLink && !item.function && !item.disabled\">\r\n            <a class=\"cmat-vertical-navigation-item\"\r\n                [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\" [routerLink]=\"[item.link]\"\r\n                [routerLinkActive]=\"'cmat-vertical-navigation-item-active'\"\r\n                [routerLinkActiveOptions]=\"isActiveMatchOptions\" [matTooltip]=\"item.tooltip || ''\">\r\n                <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n            </a>\r\n        </ng-container>\r\n\r\n        <!-- Item with an external link -->\r\n        <ng-container *ngIf=\"item.link && item.externalLink && !item.function && !item.disabled\">\r\n            <a class=\"cmat-vertical-navigation-item\" [href]=\"item.link\" [target]=\"item.target || '_blank'\"\r\n                [matTooltip]=\"item.tooltip || ''\">\r\n                <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n            </a>\r\n        </ng-container>\r\n\r\n        <!-- Item with a function -->\r\n        <ng-container *ngIf=\"!item.link && item.function && !item.disabled\">\r\n            <div class=\"cmat-vertical-navigation-item\" role=\"presentation\"\r\n                [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\"\r\n                [matTooltip]=\"item.tooltip || ''\" (click)=\"item.function(item)\">\r\n                <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n            </div>\r\n        </ng-container>\r\n\r\n        <!-- Item with an internal link and function -->\r\n        <ng-container *ngIf=\"item.link && !item.externalLink && item.function && !item.disabled\">\r\n            <a class=\"cmat-vertical-navigation-item\"\r\n                [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\" [routerLink]=\"[item.link]\"\r\n                [routerLinkActive]=\"'cmat-vertical-navigation-item-active'\"\r\n                [routerLinkActiveOptions]=\"isActiveMatchOptions\" [matTooltip]=\"item.tooltip || ''\"\r\n                (click)=\"item.function(item)\">\r\n                <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n            </a>\r\n        </ng-container>\r\n\r\n        <!-- Item with an external link and function -->\r\n        <ng-container *ngIf=\"item.link && item.externalLink && item.function && !item.disabled\">\r\n            <a class=\"cmat-vertical-navigation-item\" [href]=\"item.link\" [target]=\"item.target || '_blank'\"\r\n                [matTooltip]=\"item.tooltip || ''\" (click)=\"item.function(item)\">\r\n                <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n            </a>\r\n        </ng-container>\r\n\r\n        <!-- Item with a no link and no function -->\r\n        <ng-container *ngIf=\"!item.link && !item.function && !item.disabled\">\r\n            <div class=\"cmat-vertical-navigation-item\"\r\n                [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\"\r\n                [matTooltip]=\"item.tooltip || ''\">\r\n                <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n            </div>\r\n        </ng-container>\r\n\r\n        <!-- Item is disabled -->\r\n        <ng-container *ngIf=\"item.disabled\">\r\n            <div class=\"cmat-vertical-navigation-item cmat-vertical-navigation-item-disabled\"\r\n                [matTooltip]=\"item.tooltip || ''\">\r\n                <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n            </div>\r\n        </ng-container>\r\n    </ng-container>\r\n\r\n</div>\r\n\r\n<!-- Item template -->\r\n<ng-template #itemTemplate>\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</ng-template>", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatVerticalNavigationBasicItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cmat-vertical-navigation-basic-item', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgClass, NgIf, RouterLink, RouterLinkActive, MatTooltipModule, NgTemplateOutlet, MatIconModule], template: "<!-- Item wrapper -->\r\n<div class=\"cmat-vertical-navigation-item-wrapper\" [class.cmat-vertical-navigation-item-has-subtitle]=\"!!item.subTitle\"\r\n    [ngClass]=\"item.classes?.wrapper\">\r\n\r\n    <ng-container *ngIf=\"editMode\">\r\n        <div class=\"cmat-vertical-navigation-item\" role=\"presentation\"\r\n            [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\"\r\n            (click)=\"selectItem()\">\r\n            <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"!editMode\">\r\n        <!-- Item with an internal link -->\r\n        <ng-container *ngIf=\"item.link && !item.externalLink && !item.function && !item.disabled\">\r\n            <a class=\"cmat-vertical-navigation-item\"\r\n                [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\" [routerLink]=\"[item.link]\"\r\n                [routerLinkActive]=\"'cmat-vertical-navigation-item-active'\"\r\n                [routerLinkActiveOptions]=\"isActiveMatchOptions\" [matTooltip]=\"item.tooltip || ''\">\r\n                <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n            </a>\r\n        </ng-container>\r\n\r\n        <!-- Item with an external link -->\r\n        <ng-container *ngIf=\"item.link && item.externalLink && !item.function && !item.disabled\">\r\n            <a class=\"cmat-vertical-navigation-item\" [href]=\"item.link\" [target]=\"item.target || '_blank'\"\r\n                [matTooltip]=\"item.tooltip || ''\">\r\n                <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n            </a>\r\n        </ng-container>\r\n\r\n        <!-- Item with a function -->\r\n        <ng-container *ngIf=\"!item.link && item.function && !item.disabled\">\r\n            <div class=\"cmat-vertical-navigation-item\" role=\"presentation\"\r\n                [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\"\r\n                [matTooltip]=\"item.tooltip || ''\" (click)=\"item.function(item)\">\r\n                <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n            </div>\r\n        </ng-container>\r\n\r\n        <!-- Item with an internal link and function -->\r\n        <ng-container *ngIf=\"item.link && !item.externalLink && item.function && !item.disabled\">\r\n            <a class=\"cmat-vertical-navigation-item\"\r\n                [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\" [routerLink]=\"[item.link]\"\r\n                [routerLinkActive]=\"'cmat-vertical-navigation-item-active'\"\r\n                [routerLinkActiveOptions]=\"isActiveMatchOptions\" [matTooltip]=\"item.tooltip || ''\"\r\n                (click)=\"item.function(item)\">\r\n                <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n            </a>\r\n        </ng-container>\r\n\r\n        <!-- Item with an external link and function -->\r\n        <ng-container *ngIf=\"item.link && item.externalLink && item.function && !item.disabled\">\r\n            <a class=\"cmat-vertical-navigation-item\" [href]=\"item.link\" [target]=\"item.target || '_blank'\"\r\n                [matTooltip]=\"item.tooltip || ''\" (click)=\"item.function(item)\">\r\n                <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n            </a>\r\n        </ng-container>\r\n\r\n        <!-- Item with a no link and no function -->\r\n        <ng-container *ngIf=\"!item.link && !item.function && !item.disabled\">\r\n            <div class=\"cmat-vertical-navigation-item\"\r\n                [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\"\r\n                [matTooltip]=\"item.tooltip || ''\">\r\n                <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n            </div>\r\n        </ng-container>\r\n\r\n        <!-- Item is disabled -->\r\n        <ng-container *ngIf=\"item.disabled\">\r\n            <div class=\"cmat-vertical-navigation-item cmat-vertical-navigation-item-disabled\"\r\n                [matTooltip]=\"item.tooltip || ''\">\r\n                <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n            </div>\r\n        </ng-container>\r\n    </ng-container>\r\n\r\n</div>\r\n\r\n<!-- Item template -->\r\n<ng-template #itemTemplate>\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</ng-template>" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: CmatNavigationService }, { type: i2.CmatUtilsService }], propDecorators: { item: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], editMode: [{
+                type: Input
+            }], editSelectedItemChanged: [{
+                type: Output
+            }] } });
+
+class CmatVerticalNavigationCollapsableItemComponent {
+    constructor(_changeDetectorRef, _router, _cmatNavigationService) {
+        this._changeDetectorRef = _changeDetectorRef;
+        this._router = _router;
+        this._cmatNavigationService = _cmatNavigationService;
+        this.editMode = false;
+        this.editSelectedItemChanged = new EventEmitter();
+        this.isCollapsed = true;
+        this.isExpanded = false;
+        this._unsubscribeAll = new Subject();
+    }
+    // -----------------------------------------------------------------------------------------------------
+    // @ Accessors
+    // -----------------------------------------------------------------------------------------------------
+    /**
+     * Host binding for component classes
+     */
+    get classList() {
+        return {
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            'cmat-vertical-navigation-item-collapsed': this.isCollapsed,
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            'cmat-vertical-navigation-item-expanded': this.isExpanded
+        };
+    }
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+    /**
+     * On init
+     */
+    ngOnInit() {
+        // Get the parent navigation component
+        this._cmatVerticalNavigationComponent = this._cmatNavigationService.getComponent(this.name);
+        // If the item has a children that has a matching url with the current url, expand...
+        if (this._hasActiveChild(this.item, this._router.url)) {
+            this.expand();
+        }
+        // Otherwise...
+        else {
+            // If the autoCollapse is on, collapse...
+            if (this.autoCollapse) {
+                this.collapse();
+            }
+        }
+        // Listen for the onCollapsableItemCollapsed from the service
+        this._cmatVerticalNavigationComponent.onCollapsableItemCollapsed
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((collapsedItem) => {
+            // Check if the collapsed item is null
+            if (collapsedItem === null) {
+                return;
+            }
+            // Collapse if this is a children of the collapsed item
+            if (this._isChildrenOf(collapsedItem, this.item)) {
+                this.collapse();
+            }
+        });
+        // Listen for the onCollapsableItemExpanded from the service if the autoCollapse is on
+        if (this.autoCollapse) {
+            this._cmatVerticalNavigationComponent.onCollapsableItemExpanded
+                .pipe(takeUntil(this._unsubscribeAll))
+                .subscribe((expandedItem) => {
+                // Check if the expanded item is null
+                if (expandedItem === null) {
+                    return;
+                }
+                // Check if this is a parent of the expanded item
+                if (this._isChildrenOf(this.item, expandedItem)) {
+                    return;
+                }
+                // Check if this has a children with a matching url with the current active url
+                if (this._hasActiveChild(this.item, this._router.url)) {
+                    return;
+                }
+                // Check if this is the expanded item
+                if (this.item === expandedItem) {
+                    return;
+                }
+                // If none of the above conditions are matched, collapse this item
+                this.collapse();
+            });
+        }
+        // Attach a listener to the NavigationEnd event
+        this._router.events
+            .pipe(filter((event) => event instanceof NavigationEnd), takeUntil(this._unsubscribeAll))
+            .subscribe((event) => {
+            // If the item has a children that has a matching url with the current url, expand...
+            if (this._hasActiveChild(this.item, event.urlAfterRedirects)) {
+                this.expand();
+            }
+            // Otherwise...
+            else {
+                // If the autoCollapse is on, collapse...
+                if (this.autoCollapse) {
+                    this.collapse();
+                }
+            }
+        });
+        // Subscribe to onRefreshed on the navigation component
+        this._cmatVerticalNavigationComponent.onRefreshed.pipe(takeUntil(this._unsubscribeAll)).subscribe(() => {
+            // Mark for check
+            this._changeDetectorRef.markForCheck();
+        });
+    }
+    /**
+     * On destroy
+     */
+    ngOnDestroy() {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next(void 0);
+        this._unsubscribeAll.complete();
+    }
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+    /**
+     * Collapse
+     */
+    collapse() {
+        // Return if the item is disabled
+        if (this.item.disabled) {
+            return;
+        }
+        // Return if the item is already collapsed
+        if (this.isCollapsed) {
+            return;
+        }
+        // Collapse it
+        this.isCollapsed = true;
+        this.isExpanded = !this.isCollapsed;
+        // Mark for check
+        this._changeDetectorRef.markForCheck();
+        // Execute the observable
+        this._cmatVerticalNavigationComponent.onCollapsableItemCollapsed.next(this.item);
+    }
+    /**
+     * Expand
+     */
+    expand() {
+        // Return if the item is disabled
+        if (this.item.disabled) {
+            return;
+        }
+        // Return if the item is already expanded
+        if (!this.isCollapsed) {
+            return;
+        }
+        // Expand it
+        this.isCollapsed = false;
+        this.isExpanded = !this.isCollapsed;
+        // Mark for check
+        this._changeDetectorRef.markForCheck();
+        // Execute the observable
+        this._cmatVerticalNavigationComponent.onCollapsableItemExpanded.next(this.item);
+    }
+    /**
+     * Toggle collapsable
+     */
+    toggleCollapsable() {
+        // Toggle collapse/expand
+        if (this.isCollapsed) {
+            this.expand();
+        }
+        else {
+            this.collapse();
+        }
+    }
+    /**
+     * Track by function for ngFor loops
+     *
+     * @param index
+     * @param item
+     */
+    trackByFn(index, item) {
+        return item.id || index;
+    }
+    selectItem(item) {
+        this.editSelectedItemChanged.next(item);
+    }
+    // -----------------------------------------------------------------------------------------------------
+    // @ Private methods
+    // -----------------------------------------------------------------------------------------------------
+    /**
+     * Check if the given item has the given url
+     * in one of its children
+     *
+     * @param item
+     * @param currentUrl
+     * @private
+     */
+    _hasActiveChild(item, currentUrl) {
+        const children = item.children;
+        if (!children) {
+            return false;
+        }
+        for (const child of children) {
+            if (child.children) {
+                if (this._hasActiveChild(child, currentUrl)) {
+                    return true;
+                }
+            }
+            // Check if the child has a link and is active
+            if (child.link && this._router.isActive(child.link, {
+                paths: child.exactMatch || false ? 'exact' : 'subset',
+                queryParams: child.exactMatch || false ? 'exact' : 'subset', matrixParams: 'ignored', fragment: 'ignored'
+            })) {
+                return true;
+            }
+        }
+        return false;
+    }
+    /**
+     * Check if this is a children
+     * of the given item
+     *
+     * @param parent
+     * @param item
+     * @private
+     */
+    _isChildrenOf(parent, item) {
+        const children = parent.children;
+        if (!children) {
+            return false;
+        }
+        if (children.indexOf(item) > -1) {
+            return true;
+        }
+        for (const child of children) {
+            if (child.children) {
+                if (this._isChildrenOf(child, item)) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatVerticalNavigationCollapsableItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.Router }, { token: CmatNavigationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: CmatVerticalNavigationCollapsableItemComponent, isStandalone: true, selector: "cmat-vertical-navigation-collapsable-item", inputs: { autoCollapse: "autoCollapse", item: "item", name: "name", editMode: "editMode" }, 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\"\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>", dependencies: [{ kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationCollapsableItemComponent), selector: "cmat-vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item", "name", "editMode"], 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: "directive", type: i0.forwardRef(() => NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "directive", type: i0.forwardRef(() => NgFor), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationBasicItemComponent), selector: "cmat-vertical-navigation-basic-item", inputs: ["item", "name", "editMode"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationDividerItemComponent), selector: "cmat-vertical-navigation-divider-item", inputs: ["item", "name", "editMode"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationGroupItemComponent), selector: "cmat-vertical-navigation-group-item", inputs: ["autoCollapse", "item", "name", "editMode"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationSpacerItemComponent), selector: "cmat-vertical-navigation-spacer-item", inputs: ["item", "name", "editMode"], outputs: ["editSelectedItemChanged"] }], animations: cmatAnimations, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatVerticalNavigationCollapsableItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cmat-vertical-navigation-collapsable-item', animations: cmatAnimations, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgClass, MatTooltipModule, NgIf, MatIconModule, NgFor,
+                        CmatVerticalNavigationBasicItemComponent,
+                        forwardRef(() => CmatVerticalNavigationCollapsableItemComponent),
+                        CmatVerticalNavigationDividerItemComponent, CmatVerticalNavigationGroupItemComponent,
+                        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>" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.Router }, { type: CmatNavigationService }], propDecorators: { autoCollapse: [{
+                type: Input
+            }], item: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], editMode: [{
+                type: Input
+            }], editSelectedItemChanged: [{
+                type: Output
+            }], classList: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class CmatVerticalNavigationGroupItemComponent {
+    constructor(_changeDetectorRef, _cmatNavigationService) {
+        this._changeDetectorRef = _changeDetectorRef;
+        this._cmatNavigationService = _cmatNavigationService;
+        this.editMode = false;
+        this.editSelectedItemChanged = new EventEmitter();
+        this._unsubscribeAll = new Subject();
+    }
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+    /**
+     * On init
+     */
+    ngOnInit() {
+        // Get the parent navigation component
+        this._cmatVerticalNavigationComponent = this._cmatNavigationService.getComponent(this.name);
+        // Subscribe to onRefreshed on the navigation component
+        this._cmatVerticalNavigationComponent.onRefreshed.pipe(takeUntil(this._unsubscribeAll)).subscribe(() => {
+            // Mark for check
+            this._changeDetectorRef.markForCheck();
+        });
+    }
+    /**
+     * On destroy
+     */
+    ngOnDestroy() {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next(void 0);
+        this._unsubscribeAll.complete();
+    }
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+    /**
+     * Track by function for ngFor loops
+     *
+     * @param index
+     * @param item
+     */
+    trackByFn(index, item) {
+        return item.id || index;
+    }
+    selectItem(item) {
+        this.editSelectedItemChanged.next(item);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatVerticalNavigationGroupItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CmatNavigationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: CmatVerticalNavigationGroupItemComponent, isStandalone: true, selector: "cmat-vertical-navigation-group-item", inputs: { autoCollapse: "autoCollapse", item: "item", name: "name", editMode: "editMode" }, outputs: { editSelectedItemChanged: "editSelectedItemChanged" }, ngImport: i0, template: "<!-- Item wrapper -->\r\n<div class=\"cmat-vertical-navigation-item-wrapper\" [class.cmat-vertical-navigation-item-has-subtitle]=\"!!item.subTitle\"\r\n    [ngClass]=\"item.classes?.wrapper\"  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>", dependencies: [{ kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationGroupItemComponent), selector: "cmat-vertical-navigation-group-item", inputs: ["autoCollapse", "item", "name", "editMode"], outputs: ["editSelectedItemChanged"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "directive", type: i0.forwardRef(() => NgFor), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationBasicItemComponent), selector: "cmat-vertical-navigation-basic-item", inputs: ["item", "name", "editMode"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationCollapsableItemComponent), selector: "cmat-vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item", "name", "editMode"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationDividerItemComponent), selector: "cmat-vertical-navigation-divider-item", inputs: ["item", "name", "editMode"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationSpacerItemComponent), selector: "cmat-vertical-navigation-spacer-item", inputs: ["item", "name", "editMode"], outputs: ["editSelectedItemChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatVerticalNavigationGroupItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cmat-vertical-navigation-group-item', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgClass, NgIf, MatIconModule, NgFor, CmatVerticalNavigationBasicItemComponent,
+                        CmatVerticalNavigationCollapsableItemComponent, CmatVerticalNavigationDividerItemComponent,
+                        forwardRef(() => CmatVerticalNavigationGroupItemComponent),
+                        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>" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: CmatNavigationService }], propDecorators: { autoCollapse: [{
+                type: Input
+            }], item: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], editMode: [{
+                type: Input
+            }], editSelectedItemChanged: [{
+                type: Output
+            }] } });
+
+class CmatVerticalNavigationAsideItemComponent {
+    constructor(_changeDetectorRef, _router, _cmatNavigationService) {
+        this._changeDetectorRef = _changeDetectorRef;
+        this._router = _router;
+        this._cmatNavigationService = _cmatNavigationService;
+        this.editMode = false;
+        this.editSelectedItemChanged = new EventEmitter();
+        this.active = false;
+        this._unsubscribeAll = new Subject();
+    }
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+    /**
+     * On changes
+     *
+     * @param changes
+     */
+    ngOnChanges(changes) {
+        // Active item id
+        if ('activeItemId' in changes) {
+            // Mark if active
+            this._markIfActive(this._router.url);
+        }
+    }
+    /**
+     * On init
+     */
+    ngOnInit() {
+        // Mark if active
+        this._markIfActive(this._router.url);
+        // Attach a listener to the NavigationEnd event
+        this._router.events
+            .pipe(filter((event) => event instanceof NavigationEnd), takeUntil(this._unsubscribeAll))
+            .subscribe((event) => {
+            // Mark if active
+            this._markIfActive(event.urlAfterRedirects);
+        });
+        // Get the parent navigation component
+        this._cmatVerticalNavigationComponent = this._cmatNavigationService.getComponent(this.name);
+        // Subscribe to onRefreshed on the navigation component
+        this._cmatVerticalNavigationComponent.onRefreshed.pipe(takeUntil(this._unsubscribeAll)).subscribe(() => {
+            // Mark for check
+            this._changeDetectorRef.markForCheck();
+        });
+    }
+    /**
+     * On destroy
+     */
+    ngOnDestroy() {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next(void 0);
+        this._unsubscribeAll.complete();
+    }
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+    /**
+     * Track by function for ngFor loops
+     *
+     * @param index
+     * @param item
+     */
+    trackByFn(index, item) {
+        return item.id || index;
+    }
+    selectItem(item) {
+        this.editSelectedItemChanged.next(item);
+    }
+    // -----------------------------------------------------------------------------------------------------
+    // @ Private methods
+    // -----------------------------------------------------------------------------------------------------
+    /**
+     * Check if the given item has the given url
+     * in one of its children
+     *
+     * @param item
+     * @param currentUrl
+     * @private
+     */
+    _hasActiveChild(item, currentUrl) {
+        const children = item.children;
+        if (!children) {
+            return false;
+        }
+        for (const child of children) {
+            if (child.children) {
+                if (this._hasActiveChild(child, currentUrl)) {
+                    return true;
+                }
+            }
+            // Skip items other than 'basic'
+            if (child.type !== 'basic') {
+                continue;
+            }
+            // Check if the child has a link and is active
+            if (child.link && this._router.isActive(child.link, {
+                paths: child.exactMatch || false ? 'exact' : 'subset',
+                queryParams: child.exactMatch || false ? 'exact' : 'subset', fragment: 'ignored', matrixParams: 'ignored'
+            })) {
+                return true;
+            }
+        }
+        return false;
+    }
+    /**
+     * Decide and mark if the item is active
+     *
+     * @private
+     */
+    _markIfActive(currentUrl) {
+        // Check if the activeItemId is equals to this item id
+        this.active = this.activeItemId === this.item.id;
+        // If the aside has a children that is active,
+        // always mark it as active
+        if (this._hasActiveChild(this.item, currentUrl)) {
+            this.active = true;
+        }
+        // Mark for check
+        this._changeDetectorRef.markForCheck();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatVerticalNavigationAsideItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.Router }, { token: CmatNavigationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: CmatVerticalNavigationAsideItemComponent, isStandalone: true, selector: "cmat-vertical-navigation-aside-item", inputs: { activeItemId: "activeItemId", autoCollapse: "autoCollapse", item: "item", name: "name", skipChildren: "skipChildren", editMode: "editMode" }, outputs: { editSelectedItemChanged: "editSelectedItemChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cmat-vertical-navigation-item-wrapper\" [class.cmat-vertical-navigation-item-has-subtitle]=\"!!item.subTitle\"\r\n    [ngClass]=\"item.classes?.wrapper\" role=\"presentation\" (click)=\"selectItem(item);\">\r\n\r\n    <div class=\"cmat-vertical-navigation-item\" [ngClass]=\"{'cmat-vertical-navigation-item-active': active,\r\n                    'cmat-vertical-navigation-item-disabled': item.disabled,\r\n                    'cmat-vertical-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\">\r\n\r\n        <!-- Icon -->\r\n        <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 *ngIf=\"!skipChildren\">\r\n\r\n    <div class=\"cmat-vertical-navigation-item-children\">\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)\">\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\"  [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    </div>\r\n\r\n</ng-container>", 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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatVerticalNavigationAsideItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cmat-vertical-navigation-aside-item', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgClass, MatTooltipModule, NgIf, MatIconModule, NgFor, CmatVerticalNavigationBasicItemComponent,
+                        CmatVerticalNavigationCollapsableItemComponent, CmatVerticalNavigationDividerItemComponent,
+                        CmatVerticalNavigationGroupItemComponent, CmatVerticalNavigationSpacerItemComponent], template: "<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\" [ngClass]=\"{'cmat-vertical-navigation-item-active': active,\r\n                    'cmat-vertical-navigation-item-disabled': item.disabled,\r\n                    'cmat-vertical-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\">\r\n\r\n        <!-- Icon -->\r\n        <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 *ngIf=\"!skipChildren\">\r\n\r\n    <div class=\"cmat-vertical-navigation-item-children\">\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)\">\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\"  [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    </div>\r\n\r\n</ng-container>" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.Router }, { type: CmatNavigationService }], propDecorators: { activeItemId: [{
+                type: Input
+            }], autoCollapse: [{
+                type: Input
+            }], item: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], skipChildren: [{
+                type: Input
+            }], editMode: [{
+                type: Input
+            }], editSelectedItemChanged: [{
+                type: Output
+            }] } });
+
+class CmatVerticalNavigationComponent {
+    constructor(_animationBuilder, _changeDetectorRef, _elementRef, _renderer2, _router, _scrollStrategyOptions, _cmatNavigationService, _cmatUtilsService) {
+        this._animationBuilder = _animationBuilder;
+        this._changeDetectorRef = _changeDetectorRef;
+        this._elementRef = _elementRef;
+        this._renderer2 = _renderer2;
+        this._router = _router;
+        this._scrollStrategyOptions = _scrollStrategyOptions;
+        this._cmatNavigationService = _cmatNavigationService;
+        this._cmatUtilsService = _cmatUtilsService;
+        /* eslint-enable @typescript-eslint/naming-convention */
+        this.appearance = 'default';
+        this.autoCollapse = true;
+        this.editMode = false;
+        this.inner = false;
+        this.mode = 'side';
+        this.name = this._cmatUtilsService.randomId();
+        this.opened = true;
+        this.position = 'left';
+        this.transparentOverlay = false;
+        this.appearanceChanged = new EventEmitter();
+        this.modeChanged = new EventEmitter();
+        this.openedChanged = new EventEmitter();
+        this.positionChanged = new EventEmitter();
+        this.editSelectedItemChanged = new EventEmitter();
+        this.activeAsideItemId = null;
+        this.onCollapsableItemCollapsed = new ReplaySubject(1);
+        this.onCollapsableItemExpanded = new ReplaySubject(1);
+        this.onRefreshed = new ReplaySubject(1);
+        this._animationsEnabled = false;
+        this._hovered = false;
+        this._scrollStrategy = this._scrollStrategyOptions.block();
+        this._unsubscribeAll = new Subject();
+        this._handleAsideOverlayClick = () => {
+            this.closeAside();
+        };
+        this._handleOverlayClick = () => {
+            this.close();
+        };
+    }
+    // -----------------------------------------------------------------------------------------------------
+    // @ Accessors
+    // -----------------------------------------------------------------------------------------------------
+    /**
+     * Host binding for component classes
+     */
+    get classList() {
+        return {
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            'cmat-vertical-navigation-animations-enabled': this._animationsEnabled,
+            [`cmat-vertical-navigation-appearance-${this.appearance}`]: true,
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            'cmat-vertical-navigation-hover': this._hovered,
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            'cmat-vertical-navigation-inner': this.inner,
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            'cmat-vertical-navigation-mode-over': this.mode === 'over',
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            'cmat-vertical-navigation-mode-side': this.mode === 'side',
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            'cmat-vertical-navigation-opened': this.opened,
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            'cmat-vertical-navigation-position-left': this.position === 'left',
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            'cmat-vertical-navigation-position-right': this.position === 'right'
+        };
+    }
+    /**
+     * Host binding for component inline styles
+     */
+    get styleList() {
+        return {
+            'visibility': this.opened ? 'visible' : 'hidden'
+        };
+    }
+    // -----------------------------------------------------------------------------------------------------
+    // @ Decorated methods
+    // -----------------------------------------------------------------------------------------------------
+    /**
+     * On mouseenter
+     *
+     * @private
+     */
+    onMouseenter() {
+        // Enable the animations
+        this._enableAnimations();
+        // Set the hovered
+        this._hovered = true;
+    }
+    /**
+     * On mouseleave
+     *
+     * @private
+     */
+    onMouseleave() {
+        // Enable the animations
+        this._enableAnimations();
+        // Set the hovered
+        this._hovered = false;
+    }
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+    /**
+     * On changes
+     *
+     * @param changes
+     */
+    ngOnChanges(changes) {
+        // Appearance
+        if ('appearance' in changes) {
+            // Execute the observable
+            this.appearanceChanged.next(changes['appearance'].currentValue);
+        }
+        // Inner
+        if ('inner' in changes) {
+            // Coerce the value to a boolean
+            this.inner = coerceBooleanProperty(changes['inner'].currentValue);
+        }
+        // Mode
+        if ('mode' in changes) {
+            // Get the previous and current values
+            const currentMode = changes['mode'].currentValue;
+            const previousMode = changes['mode'].previousValue;
+            // Disable the animations
+            this._disableAnimations();
+            // If the mode changes: 'over -> side'
+            if (previousMode === 'over' && currentMode === 'side') {
+                // Hide the overlay
+                this._hideOverlay();
+            }
+            // If the mode changes: 'side -> over'
+            if (previousMode === 'side' && currentMode === 'over') {
+                // Close the aside
+                this.closeAside();
+                // If the navigation is opened
+                if (this.opened) {
+                    // Show the overlay
+                    this._showOverlay();
+                }
+            }
+            // Execute the observable
+            this.modeChanged.next(currentMode);
+            // Enable the animations after a delay
+            // The delay must be bigger than the current transition-duration
+            // to make sure nothing will be animated while the mode changing
+            setTimeout(() => {
+                this._enableAnimations();
+            }, 500);
+        }
+        // Navigation
+        if ('navigation' in changes) {
+            // Mark for check
+            this._changeDetectorRef.markForCheck();
+        }
+        // Opened
+        if ('opened' in changes) {
+            // Coerce the value to a boolean
+            this.opened = coerceBooleanProperty(changes['opened'].currentValue);
+            // Open/close the navigation
+            this._toggleOpened(this.opened);
+        }
+        // Position
+        if ('position' in changes) {
+            // Execute the observable
+            this.positionChanged.next(changes['position'].currentValue);
+        }
+        // Transparent overlay
+        if ('transparentOverlay' in changes) {
+            // Coerce the value to a boolean
+            this.transparentOverlay = coerceBooleanProperty(changes['transparentOverlay'].currentValue);
+        }
+    }
+    /**
+     * On init
+     */
+    ngOnInit() {
+        // Make sure the name input is not an empty string
+        if (this.name === '') {
+            this.name = this._cmatUtilsService.randomId();
+        }
+        // Register the navigation component
+        this._cmatNavigationService.registerComponent(this.name, this);
+        // Subscribe to the 'NavigationEnd' event
+        this._router.events
+            .pipe(filter(event => event instanceof NavigationEnd), takeUntil(this._unsubscribeAll))
+            .subscribe(() => {
+            // If the mode is 'over' and the navigation is opened...
+            if (this.mode === 'over' && this.opened) {
+                // Close the navigation
+                this.close();
+            }
+            // If the mode is 'side' and the aside is active...
+            if (this.mode === 'side' && this.activeAsideItemId) {
+                // Close the aside
+                this.closeAside();
+            }
+        });
+    }
+    /**
+     * After view init
+     */
+    ngAfterViewInit() {
+        setTimeout(() => {
+            // Return if 'navigation content' element does not exist
+            if (!this._navigationContentEl) {
+                return;
+            }
+            const activeItem = this._navigationContentEl.nativeElement.querySelector('.cmat-vertical-navigation-item-active');
+            // If the active item exists, scroll it into view
+            if (activeItem) {
+                if (activeItem.getBoundingClientRect().bottom
+                    <= (this._navigationContentEl.nativeElement.getBoundingClientRect().bottom - Math.abs(-120))) {
+                    return;
+                }
+                this._navigationContentEl.nativeElement.scrollTo({
+                    top: activeItem.getBoundingClientRect().top -
+                        this._navigationContentEl.nativeElement.getBoundingClientRect().top - 120, behavior: 'smooth'
+                });
+            }
+        });
+    }
+    /**
+     * On destroy
+     */
+    ngOnDestroy() {
+        // Forcefully close the navigation and aside in case they are opened
+        this.close();
+        this.closeAside();
+        // Deregister the navigation component from the registry
+        this._cmatNavigationService.deregisterComponent(this.name);
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next(void 0);
+        this._unsubscribeAll.complete();
+    }
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+    /**
+     * Refresh the component to apply the changes
+     */
+    refresh() {
+        // Mark for check
+        this._changeDetectorRef.markForCheck();
+        // Execute the observable
+        this.onRefreshed.next(true);
+    }
+    /**
+     * Open the navigation
+     */
+    open() {
+        // Return if the navigation is already open
+        if (this.opened) {
+            return;
+        }
+        // Set the opened
+        this._toggleOpened(true);
+    }
+    /**
+     * Close the navigation
+     */
+    close() {
+        // Return if the navigation is already closed
+        if (!this.opened) {
+            return;
+        }
+        // Close the aside
+        this.closeAside();
+        // Set the opened
+        this._toggleOpened(false);
+    }
+    /**
+     * Toggle the navigation
+     */
+    toggle() {
+        // Toggle
+        if (this.opened) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    /**
+     * Open the aside
+     *
+     * @param item
+     */
+    openAside(item) {
+        // Return if the item is disabled
+        if (item.disabled || !item.id) {
+            return;
+        }
+        // Open
+        this.activeAsideItemId = item.id;
+        // Show the aside overlay
+        this._showAsideOverlay();
+        // Mark for check
+        this._changeDetectorRef.markForCheck();
+    }
+    /**
+     * Close the aside
+     */
+    closeAside() {
+        // Close
+        this.activeAsideItemId = null;
+        // Hide the aside overlay
+        this._hideAsideOverlay();
+        // Mark for check
+        this._changeDetectorRef.markForCheck();
+    }
+    /**
+     * Toggle the aside
+     *
+     * @param item
+     */
+    toggleAside(item) {
+        // Toggle
+        if (this.activeAsideItemId === item.id) {
+            this.closeAside();
+        }
+        else {
+            this.openAside(item);
+        }
+    }
+    /**
+     * Track by function for ngFor loops
+     *
+     * @param index
+     * @param item
+     */
+    trackByFn(index, item) {
+        return item.id || index;
+    }
+    selectItem(item) {
+        this.editSelectedItemChanged.next(item);
+    }
+    // -----------------------------------------------------------------------------------------------------
+    // @ Private methods
+    // -----------------------------------------------------------------------------------------------------
+    /**
+     * Enable the animations
+     *
+     * @private
+     */
+    _enableAnimations() {
+        // Return if the animations are already enabled
+        if (this._animationsEnabled) {
+            return;
+        }
+        // Enable the animations
+        this._animationsEnabled = true;
+    }
+    /**
+     * Disable the animations
+     *
+     * @private
+     */
+    _disableAnimations() {
+        // Return if the animations are already disabled
+        if (!this._animationsEnabled) {
+            return;
+        }
+        // Disable the animations
+        this._animationsEnabled = false;
+    }
+    /**
+     * Show the overlay
+     *
+     * @private
+     */
+    _showOverlay() {
+        // Return if there is already an overlay
+        if (this._asideOverlay) {
+            return;
+        }
+        // Create the overlay element
+        this._overlay = this._renderer2.createElement('div');
+        if (this._overlay) {
+            // Add a class to the overlay element
+            this._overlay.classList.add('cmat-vertical-navigation-overlay');
+            // Add a class depending on the transparentOverlay option
+            if (this.transparentOverlay) {
+                this._overlay.classList.add('cmat-vertical-navigation-overlay-transparent');
+            }
+            // Append the overlay to the parent of the navigation
+            this._renderer2.appendChild(this._elementRef.nativeElement.parentElement, this._overlay);
+            // Enable block scroll strategy
+            this._scrollStrategy.enable();
+            // Create the enter animation and attach it to the player
+            this._player = this._animationBuilder.build([
+                animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({ opacity: 1 }))
+            ]).create(this._overlay);
+            // Play the animation
+            this._player.play();
+            // Add an event listener to the overlay
+            this._overlay.addEventListener('click', this._handleOverlayClick);
+        }
+    }
+    /**
+     * Hide the overlay
+     *
+     * @private
+     */
+    _hideOverlay() {
+        if (!this._overlay) {
+            return;
+        }
+        // Create the leave animation and attach it to the player
+        this._player = this._animationBuilder.build([
+            animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({ opacity: 0 }))
+        ]).create(this._overlay);
+        // Play the animation
+        this._player.play();
+        // Once the animation is done...
+        this._player.onDone(() => {
+            // If the overlay still exists...
+            if (this._overlay) {
+                // Remove the event listener
+                this._overlay.removeEventListener('click', this._handleOverlayClick);
+                // Remove the overlay
+                this._overlay.parentNode?.removeChild(this._overlay);
+                this._overlay = null;
+            }
+            // Disable block scroll strategy
+            this._scrollStrategy.disable();
+        });
+    }
+    /**
+     * Show the aside overlay
+     *
+     * @private
+     */
+    _showAsideOverlay() {
+        // Return if there is already an overlay
+        if (this._asideOverlay) {
+            return;
+        }
+        // Create the aside overlay element
+        this._asideOverlay = this._renderer2.createElement('div');
+        if (this._asideOverlay) {
+            // Add a class to the aside overlay element
+            this._asideOverlay.classList.add('cmat-vertical-navigation-aside-overlay');
+            // Append the aside overlay to the parent of the navigation
+            this._renderer2.appendChild(this._elementRef.nativeElement.parentElement, this._asideOverlay);
+            // Create the enter animation and attach it to the player
+            this._player =
+                this._animationBuilder
+                    .build([
+                    animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({ opacity: 1 }))
+                ]).create(this._asideOverlay);
+            // Play the animation
+            this._player.play();
+            // Add an event listener to the aside overlay
+            this._asideOverlay.addEventListener('click', this._handleAsideOverlayClick);
+        }
+    }
+    /**
+     * Hide the aside overlay
+     *
+     * @private
+     */
+    _hideAsideOverlay() {
+        if (!this._asideOverlay) {
+            return;
+        }
+        // Create the leave animation and attach it to the player
+        this._player =
+            this._animationBuilder
+                .build([
+                animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({ opacity: 0 }))
+            ]).create(this._asideOverlay);
+        // Play the animation
+        this._player.play();
+        // Once the animation is done...
+        this._player.onDone(() => {
+            // If the aside overlay still exists...
+            if (this._asideOverlay) {
+                // Remove the event listener
+                this._asideOverlay.removeEventListener('click', this._handleAsideOverlayClick);
+                // Remove the aside overlay
+                this._asideOverlay.parentNode?.removeChild(this._asideOverlay);
+                this._asideOverlay = null;
+            }
+        });
+    }
+    /**
+     * Open/close the navigation
+     *
+     * @param open
+     * @private
+     */
+    _toggleOpened(open) {
+        // Set the opened
+        this.opened = open;
+        // Enable the animations
+        this._enableAnimations();
+        // If the navigation opened, and the mode
+        // is 'over', show the overlay
+        if (this.mode === 'over') {
+            if (this.opened) {
+                this._showOverlay();
+            }
+            else {
+                this._hideOverlay();
+            }
+        }
+        // Execute the observable
+        this.openedChanged.next(open);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", 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 }); }
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatVerticalNavigationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cmat-vertical-navigation', animations: cmatAnimations, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatVerticalNavigation', standalone: true, imports: [NgFor, NgIf, CmatVerticalNavigationAsideItemComponent,
+                        CmatVerticalNavigationBasicItemComponent, CmatVerticalNavigationCollapsableItemComponent,
+                        CmatVerticalNavigationDividerItemComponent, CmatVerticalNavigationGroupItemComponent,
+                        CmatVerticalNavigationSpacerItemComponent], template: "<div class=\"cmat-vertical-navigation-wrapper\">\r\n\r\n    <!-- Header -->\r\n    <div class=\"cmat-vertical-navigation-header\">\r\n        <ng-content select=\"[cmatVerticalNavigationHeader]\"></ng-content>\r\n    </div>\r\n\r\n    <!-- Content -->\r\n    <div 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"] }]
+        }], 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: [{
+                type: Input
+            }], autoCollapse: [{
+                type: Input
+            }], editMode: [{
+                type: Input
+            }], inner: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], navigation: [{
+                type: Input
+            }], opened: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }], transparentOverlay: [{
+                type: Input
+            }], appearanceChanged: [{
+                type: Output
+            }], modeChanged: [{
+                type: Output
+            }], openedChanged: [{
+                type: Output
+            }], positionChanged: [{
+                type: Output
+            }], editSelectedItemChanged: [{
+                type: Output
+            }], _navigationContentEl: [{
+                type: ViewChild,
+                args: ['navigationContent']
+            }], classList: [{
+                type: HostBinding,
+                args: ['class']
+            }], styleList: [{
+                type: HostBinding,
+                args: ['style']
+            }], onMouseenter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseleave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }] } });
+
+class CmatNavigationItem {
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CmatHorizontalNavigationComponent, CmatNavigationItem, CmatNavigationService, CmatVerticalNavigationComponent };
+//# sourceMappingURL=cmat-components-navigation.mjs.map