cmat 0.0.29 → 0.0.30

package/fesm2022/cmat-components-navigation.mjs

@@ -1,22 +1,20 @@
 import * as i0 from '@angular/core';
-import { Injectable, Input, ChangeDetectionStrategy, Component, ViewChild, forwardRef, ViewEncapsulation, EventEmitter, Output, HostBinding, HostListener } from '@angular/core';
+import { Injectable, inject, ChangeDetectorRef, Input, ChangeDetectionStrategy, Component, ViewChild, forwardRef, ViewEncapsulation, EventEmitter, Output, HostBinding, ElementRef, Renderer2, HostListener } from '@angular/core';
 import { Subject, ReplaySubject } from 'rxjs';
 import { cmatAnimations } from 'cmat/animations';
+import { CmatUtilsService } from 'cmat/services/utils';
 import { NgClass, NgTemplateOutlet } from '@angular/common';
-import * as i4 from '@angular/material/icon';
+import * as i2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i2$1 from '@angular/material/menu';
+import * as i1$1 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import * as i3 from '@angular/material/tooltip';
+import * as i1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i1 from '@angular/router';
-import { RouterLink, RouterLinkActive, NavigationEnd } from '@angular/router';
+import { RouterLink, RouterLinkActive, Router, NavigationEnd } from '@angular/router';
 import { takeUntil, filter } from 'rxjs/operators';
-import * as i2 from 'cmat/services/utils';
-import * as i1$1 from '@angular/animations';
-import { animate, style } from '@angular/animations';
+import { AnimationBuilder, animate, style } from '@angular/animations';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import * as i3$1 from '@angular/cdk/overlay';
+import { ScrollStrategyOptions } from '@angular/cdk/overlay';
 
 class CmatNavigationService {
     constructor() {
@@ -146,10 +144,10 @@ class CmatNavigationService {
         }
         return null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: CmatNavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: CmatNavigationService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: CmatNavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: CmatNavigationService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: CmatNavigationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: CmatNavigationService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -157,10 +155,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
         }] });
 
 class CmatHorizontalNavigationBasicItemComponent {
-    constructor(_changeDetectorRef, _cmatNavigationService, _cmatUtilsService) {
-        this._changeDetectorRef = _changeDetectorRef;
-        this._cmatNavigationService = _cmatNavigationService;
-        this._cmatUtilsService = _cmatUtilsService;
+    constructor() {
+        this._changeDetectorRef = inject(ChangeDetectorRef);
+        this._cmatNavigationService = inject(CmatNavigationService);
+        this._cmatUtilsService = inject(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
@@ -200,22 +198,22 @@ class CmatHorizontalNavigationBasicItemComponent {
         this._unsubscribeAll.next(void 0);
         this._unsubscribeAll.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: CmatHorizontalNavigationBasicItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CmatNavigationService }, { token: i2.CmatUtilsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.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  @if (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  }\r\n\r\n  <!-- Item with an external link -->\r\n  @if (item.link && item.externalLink && !item.function && !item.disabled) {\r\n    <a class=\"cmat-horizontal-navigation-item\" [href]=\"item.link\" [target]=\"item.target || '_blank'\"\r\n      [matTooltip]=\"item.tooltip || ''\">\r\n      <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n    </a>\r\n  }\r\n\r\n  <!-- Item with a function -->\r\n  @if (!item.link && item.function && !item.disabled) {\r\n    <div class=\"cmat-horizontal-navigation-item\" role=\"presentation\"\r\n      [ngClass]=\"{'cmat-horizontal-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\"\r\n      (click)=\"item.function(item)\">\r\n      <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n    </div>\r\n  }\r\n\r\n  <!-- Item with an internal link and function -->\r\n  @if (item.link && !item.externalLink && item.function && !item.disabled) {\r\n    <div class=\"cmat-horizontal-navigation-item\" role=\"presentation\"\r\n      [ngClass]=\"{'cmat-horizontal-navigation-item-active-forced': item.active}\" [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  }\r\n\r\n  <!-- Item with an external link and function -->\r\n  @if (item.link && item.externalLink && item.function && !item.disabled) {\r\n    <a class=\"cmat-horizontal-navigation-item\" mat-menu-item [href]=\"item.link\"\r\n      [target]=\"item.target || '_blank'\" [matTooltip]=\"item.tooltip || ''\" (click)=\"item.function(item)\">\r\n      <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n    </a>\r\n  }\r\n\r\n  <!-- Item with a no link and no function -->\r\n  @if (!item.link && !item.function && !item.disabled) {\r\n    <div class=\"cmat-horizontal-navigation-item\"\r\n      [ngClass]=\"{'cmat-horizontal-navigation-item-active-forced': item.active}\"\r\n      [matTooltip]=\"item.tooltip || ''\">\r\n      <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n    </div>\r\n  }\r\n\r\n  <!-- Item is disabled -->\r\n  @if (item.disabled) {\r\n    <div class=\"cmat-horizontal-navigation-item cmat-horizontal-navigation-item-disabled\">\r\n      <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n    </div>\r\n  }\r\n\r\n</div>\r\n\r\n<!-- Item template -->\r\n<ng-template #itemTemplate>\r\n\r\n  <!-- Icon -->\r\n  @if (item.icon) {\r\n    <mat-icon class=\"cmat-horizontal-navigation-item-icon\" [ngClass]=\"item.classes?.icon\" [svgIcon]=\"item.icon\">\r\n    </mat-icon>\r\n  }\r\n\r\n  <!-- Title & Subtitle -->\r\n  <div class=\"cmat-horizontal-navigation-item-title-wrapper\">\r\n    <div class=\"cmat-horizontal-navigation-item-title\">\r\n      <span [ngClass]=\"item.classes?.title\">\r\n        {{item.title}}\r\n      </span>\r\n    </div>\r\n</div>\r\n\r\n<!-- Badge -->\r\n@if (item.badge) {\r\n  <div class=\"cmat-horizontal-navigation-item-badge\">\r\n    <div class=\"cmat-horizontal-navigation-item-badge-content\" [ngClass]=\"item.badge.classes\">\r\n      {{item.badge.title}}\r\n    </div>\r\n  </div>\r\n}\r\n\r\n</ng-template>", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: CmatHorizontalNavigationBasicItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", 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  @if (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  }\r\n\r\n  <!-- Item with an external link -->\r\n  @if (item.link && item.externalLink && !item.function && !item.disabled) {\r\n    <a class=\"cmat-horizontal-navigation-item\" [href]=\"item.link\" [target]=\"item.target || '_blank'\"\r\n      [matTooltip]=\"item.tooltip || ''\">\r\n      <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n    </a>\r\n  }\r\n\r\n  <!-- Item with a function -->\r\n  @if (!item.link && item.function && !item.disabled) {\r\n    <div class=\"cmat-horizontal-navigation-item\" role=\"presentation\"\r\n      [ngClass]=\"{'cmat-horizontal-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\"\r\n      (click)=\"item.function(item)\">\r\n      <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n    </div>\r\n  }\r\n\r\n  <!-- Item with an internal link and function -->\r\n  @if (item.link && !item.externalLink && item.function && !item.disabled) {\r\n    <div class=\"cmat-horizontal-navigation-item\" role=\"presentation\"\r\n      [ngClass]=\"{'cmat-horizontal-navigation-item-active-forced': item.active}\" [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  }\r\n\r\n  <!-- Item with an external link and function -->\r\n  @if (item.link && item.externalLink && item.function && !item.disabled) {\r\n    <a class=\"cmat-horizontal-navigation-item\" mat-menu-item [href]=\"item.link\"\r\n      [target]=\"item.target || '_blank'\" [matTooltip]=\"item.tooltip || ''\" (click)=\"item.function(item)\">\r\n      <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n    </a>\r\n  }\r\n\r\n  <!-- Item with a no link and no function -->\r\n  @if (!item.link && !item.function && !item.disabled) {\r\n    <div class=\"cmat-horizontal-navigation-item\"\r\n      [ngClass]=\"{'cmat-horizontal-navigation-item-active-forced': item.active}\"\r\n      [matTooltip]=\"item.tooltip || ''\">\r\n      <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n    </div>\r\n  }\r\n\r\n  <!-- Item is disabled -->\r\n  @if (item.disabled) {\r\n    <div class=\"cmat-horizontal-navigation-item cmat-horizontal-navigation-item-disabled\">\r\n      <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n    </div>\r\n  }\r\n\r\n</div>\r\n\r\n<!-- Item template -->\r\n<ng-template #itemTemplate>\r\n\r\n  <!-- Icon -->\r\n  @if (item.icon) {\r\n    <mat-icon class=\"cmat-horizontal-navigation-item-icon\" [ngClass]=\"item.classes?.icon\" [svgIcon]=\"item.icon\">\r\n    </mat-icon>\r\n  }\r\n\r\n  <!-- Title & Subtitle -->\r\n  <div class=\"cmat-horizontal-navigation-item-title-wrapper\">\r\n    <div class=\"cmat-horizontal-navigation-item-title\">\r\n      <span [ngClass]=\"item.classes?.title\">\r\n        {{item.title}}\r\n      </span>\r\n    </div>\r\n</div>\r\n\r\n<!-- Badge -->\r\n@if (item.badge) {\r\n  <div class=\"cmat-horizontal-navigation-item-badge\">\r\n    <div class=\"cmat-horizontal-navigation-item-badge-content\" [ngClass]=\"item.badge.classes\">\r\n      {{item.badge.title}}\r\n    </div>\r\n  </div>\r\n}\r\n\r\n</ng-template>", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "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: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: CmatHorizontalNavigationBasicItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: CmatHorizontalNavigationBasicItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-horizontal-navigation-basic-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, RouterLink, RouterLinkActive, MatTooltipModule, NgTemplateOutlet, MatMenuModule, MatIconModule], template: "<!-- Item wrapper -->\r\n<div class=\"cmat-horizontal-navigation-item-wrapper\"\r\n  [class.cmat-horizontal-navigation-item-has-subtitle]=\"!!item.subTitle\" [ngClass]=\"item.classes?.wrapper\">\r\n\r\n  <!-- Item with an internal link -->\r\n  @if (item.link && !item.externalLink && !item.function && !item.disabled) {\r\n    <div class=\"cmat-horizontal-navigation-item\"\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  }\r\n\r\n  <!-- Item with an external link -->\r\n  @if (item.link && item.externalLink && !item.function && !item.disabled) {\r\n    <a class=\"cmat-horizontal-navigation-item\" [href]=\"item.link\" [target]=\"item.target || '_blank'\"\r\n      [matTooltip]=\"item.tooltip || ''\">\r\n      <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n    </a>\r\n  }\r\n\r\n  <!-- Item with a function -->\r\n  @if (!item.link && item.function && !item.disabled) {\r\n    <div class=\"cmat-horizontal-navigation-item\" role=\"presentation\"\r\n      [ngClass]=\"{'cmat-horizontal-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\"\r\n      (click)=\"item.function(item)\">\r\n      <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n    </div>\r\n  }\r\n\r\n  <!-- Item with an internal link and function -->\r\n  @if (item.link && !item.externalLink && item.function && !item.disabled) {\r\n    <div class=\"cmat-horizontal-navigation-item\" role=\"presentation\"\r\n      [ngClass]=\"{'cmat-horizontal-navigation-item-active-forced': item.active}\" [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  }\r\n\r\n  <!-- Item with an external link and function -->\r\n  @if (item.link && item.externalLink && item.function && !item.disabled) {\r\n    <a class=\"cmat-horizontal-navigation-item\" mat-menu-item [href]=\"item.link\"\r\n      [target]=\"item.target || '_blank'\" [matTooltip]=\"item.tooltip || ''\" (click)=\"item.function(item)\">\r\n      <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n    </a>\r\n  }\r\n\r\n  <!-- Item with a no link and no function -->\r\n  @if (!item.link && !item.function && !item.disabled) {\r\n    <div class=\"cmat-horizontal-navigation-item\"\r\n      [ngClass]=\"{'cmat-horizontal-navigation-item-active-forced': item.active}\"\r\n      [matTooltip]=\"item.tooltip || ''\">\r\n      <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n    </div>\r\n  }\r\n\r\n  <!-- Item is disabled -->\r\n  @if (item.disabled) {\r\n    <div class=\"cmat-horizontal-navigation-item cmat-horizontal-navigation-item-disabled\">\r\n      <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n    </div>\r\n  }\r\n\r\n</div>\r\n\r\n<!-- Item template -->\r\n<ng-template #itemTemplate>\r\n\r\n  <!-- Icon -->\r\n  @if (item.icon) {\r\n    <mat-icon class=\"cmat-horizontal-navigation-item-icon\" [ngClass]=\"item.classes?.icon\" [svgIcon]=\"item.icon\">\r\n    </mat-icon>\r\n  }\r\n\r\n  <!-- Title & Subtitle -->\r\n  <div class=\"cmat-horizontal-navigation-item-title-wrapper\">\r\n    <div class=\"cmat-horizontal-navigation-item-title\">\r\n      <span [ngClass]=\"item.classes?.title\">\r\n        {{item.title}}\r\n      </span>\r\n    </div>\r\n</div>\r\n\r\n<!-- Badge -->\r\n@if (item.badge) {\r\n  <div class=\"cmat-horizontal-navigation-item-badge\">\r\n    <div class=\"cmat-horizontal-navigation-item-badge-content\" [ngClass]=\"item.badge.classes\">\r\n      {{item.badge.title}}\r\n    </div>\r\n  </div>\r\n}\r\n\r\n</ng-template>" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: CmatNavigationService }, { type: i2.CmatUtilsService }], propDecorators: { item: [{
+        }], ctorParameters: () => [], propDecorators: { item: [{
                 type: Input
             }], name: [{
                 type: Input
             }] } });
 
 class CmatHorizontalNavigationDividerItemComponent {
-    constructor(_changeDetectorRef, _cmatNavigationService) {
-        this._changeDetectorRef = _changeDetectorRef;
-        this._cmatNavigationService = _cmatNavigationService;
+    constructor() {
+        this._changeDetectorRef = inject(ChangeDetectorRef);
+        this._cmatNavigationService = inject(CmatNavigationService);
         this._unsubscribeAll = new Subject();
     }
     // -----------------------------------------------------------------------------------------------------
@@ -241,24 +239,24 @@ class CmatHorizontalNavigationDividerItemComponent {
         this._unsubscribeAll.next(void 0);
         this._unsubscribeAll.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.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: "20.0.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: CmatHorizontalNavigationDividerItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", 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: "20.0.0", ngImport: i0, type: CmatHorizontalNavigationDividerItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: CmatHorizontalNavigationDividerItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-horizontal-navigation-divider-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "<!-- Divider -->\r\n<div class=\"cmat-horizontal-navigation-item-wrapper divider\" [ngClass]=\"item.classes?.wrapper\"></div>" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: CmatNavigationService }], propDecorators: { item: [{
+        }], propDecorators: { item: [{
                 type: Input
             }], name: [{
                 type: Input
             }] } });
 
 class CmatHorizontalNavigationBranchItemComponent {
-    constructor(_changeDetectorRef, _cmatNavigationService) {
-        this._changeDetectorRef = _changeDetectorRef;
-        this._cmatNavigationService = _cmatNavigationService;
+    constructor() {
         /* eslint-enable @typescript-eslint/naming-convention */
         this.child = false;
+        this._changeDetectorRef = inject(ChangeDetectorRef);
+        this._cmatNavigationService = inject(CmatNavigationService);
         this._unsubscribeAll = new Subject();
     }
     // -----------------------------------------------------------------------------------------------------
@@ -303,14 +301,14 @@ class CmatHorizontalNavigationBranchItemComponent {
     trackByFn(index, item) {
         return item.id ?? index;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: CmatHorizontalNavigationBranchItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CmatNavigationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.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: "@if (!child) {\r\n    <div #trigger=\"matMenuTrigger\" [ngClass]=\"{'cmat-horizontal-navigation-menu-active': trigger.menuOpen,\r\n                 'cmat-horizontal-navigation-menu-active-forced': item.active}\"\r\n    [matMenuTriggerFor]=\"matMenu\" (onMenuOpen)=\"triggerChangeDetection()\" (onMenuClose)=\"triggerChangeDetection()\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item}\"></ng-container>\r\n  </div>\r\n}\r\n\r\n<mat-menu #matMenu=\"matMenu\" class=\"cmat-horizontal-navigation-menu-panel\" [overlapTrigger]=\"false\">\r\n\r\n  @for (item of item.children; track trackByFn($index, item)) {\r\n    <!-- Skip the hidden items -->\r\n    @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\r\n      <!-- Basic -->\r\n      @if (item.type === 'basic') {\r\n        <div class=\"cmat-horizontal-navigation-menu-item\" mat-menu-item [disabled]=\"item.disabled\">\r\n          <cmat-horizontal-navigation-basic-item [item]=\"item\" [name]=\"name\">\r\n          </cmat-horizontal-navigation-basic-item>\r\n        </div>\r\n      }\r\n      <!-- Branch: aside, collapsable, group -->\r\n      @if (item.type === 'aside' || item.type === 'collapsable' || item.type === 'group') {\r\n        <div class=\"cmat-horizontal-navigation-menu-item\" mat-menu-item\r\n          [disabled]=\"item.disabled\" [matMenuTriggerFor]=\"branch.matMenu\">\r\n          <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item}\"></ng-container>\r\n          <cmat-horizontal-navigation-branch-item #branch [child]=\"true\" [item]=\"item\" [name]=\"name\">\r\n          </cmat-horizontal-navigation-branch-item>\r\n        </div>\r\n      }\r\n      <!-- Divider -->\r\n      @if (item.type === 'divider') {\r\n        <div class=\"cmat-horizontal-navigation-menu-item\" mat-menu-item>\r\n          <cmat-horizontal-navigation-divider-item [item]=\"item\" [name]=\"name\">\r\n          </cmat-horizontal-navigation-divider-item>\r\n        </div>\r\n      }\r\n    }\r\n  }\r\n\r\n</mat-menu>\r\n\r\n<!-- Item template -->\r\n<ng-template #itemTemplate let-item>\r\n\r\n  <div class=\"cmat-horizontal-navigation-item-wrapper\"\r\n    [class.cmat-horizontal-navigation-item-has-subtitle]=\"!!item.subTitle\" [ngClass]=\"item.classes?.wrapper\">\r\n\r\n        <div class=\"cmat-horizontal-navigation-item\" [ngClass]=\"{'cmat-horizontal-navigation-item-disabled': item.disabled,\r\n                         'cmat-horizontal-navigation-item-active-forced': item.active}\"\r\n      [matTooltip]=\"item.tooltip || ''\">\r\n\r\n      <!-- Icon -->\r\n      @if (item.icon) {\r\n        <mat-icon class=\"cmat-horizontal-navigation-item-icon\" [ngClass]=\"item.classes?.icon\"\r\n        [svgIcon]=\"item.icon\"></mat-icon>\r\n      }\r\n\r\n      <!-- Title & Subtitle -->\r\n      <div class=\"cmat-horizontal-navigation-item-title-wrapper\">\r\n        <div class=\"cmat-horizontal-navigation-item-title\">\r\n          <span [ngClass]=\"item.classes?.title\">\r\n            {{item.title}}\r\n          </span>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Badge -->\r\n    @if (item.badge) {\r\n      <div class=\"cmat-horizontal-navigation-item-badge\">\r\n        <div class=\"cmat-horizontal-navigation-item-badge-content\" [ngClass]=\"item.badge.classes\">\r\n          {{item.badge.title}}\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n\r\n</ng-template>", dependencies: [{ kind: "component", type: i0.forwardRef(() => CmatHorizontalNavigationBranchItemComponent), selector: "cmat-horizontal-navigation-branch-item", inputs: ["child", "item", "name"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatMenuModule) }, { kind: "component", type: i0.forwardRef(() => i2$1.MatMenu), selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i0.forwardRef(() => i2$1.MatMenuItem), selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i0.forwardRef(() => i2$1.MatMenuTrigger), selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i0.forwardRef(() => NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i0.forwardRef(() => CmatHorizontalNavigationBasicItemComponent), selector: "cmat-horizontal-navigation-basic-item", inputs: ["item", "name"] }, { kind: "component", type: i0.forwardRef(() => CmatHorizontalNavigationDividerItemComponent), selector: "cmat-horizontal-navigation-divider-item", inputs: ["item", "name"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatTooltipModule) }, { kind: "directive", type: i0.forwardRef(() => i3.MatTooltip), selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatIconModule) }, { kind: "component", type: i0.forwardRef(() => i4.MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: CmatHorizontalNavigationBranchItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: CmatHorizontalNavigationBranchItemComponent, isStandalone: true, selector: "cmat-horizontal-navigation-branch-item", inputs: { child: "child", item: "item", name: "name" }, viewQueries: [{ propertyName: "matMenu", first: true, predicate: ["matMenu"], descendants: true, static: true }], ngImport: i0, template: "@if (!child) {\r\n    <div #trigger=\"matMenuTrigger\" [ngClass]=\"{'cmat-horizontal-navigation-menu-active': trigger.menuOpen,\r\n                 'cmat-horizontal-navigation-menu-active-forced': item.active}\"\r\n    [matMenuTriggerFor]=\"matMenu\" (onMenuOpen)=\"triggerChangeDetection()\" (onMenuClose)=\"triggerChangeDetection()\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item}\"></ng-container>\r\n  </div>\r\n}\r\n\r\n<mat-menu #matMenu=\"matMenu\" class=\"cmat-horizontal-navigation-menu-panel\" [overlapTrigger]=\"false\">\r\n\r\n  @for (item of item.children; track trackByFn($index, item)) {\r\n    <!-- Skip the hidden items -->\r\n    @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\r\n      <!-- Basic -->\r\n      @if (item.type === 'basic') {\r\n        <div class=\"cmat-horizontal-navigation-menu-item\" mat-menu-item [disabled]=\"item.disabled\">\r\n          <cmat-horizontal-navigation-basic-item [item]=\"item\" [name]=\"name\">\r\n          </cmat-horizontal-navigation-basic-item>\r\n        </div>\r\n      }\r\n      <!-- Branch: aside, collapsable, group -->\r\n      @if (item.type === 'aside' || item.type === 'collapsable' || item.type === 'group') {\r\n        <div class=\"cmat-horizontal-navigation-menu-item\" mat-menu-item\r\n          [disabled]=\"item.disabled\" [matMenuTriggerFor]=\"branch.matMenu\">\r\n          <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item}\"></ng-container>\r\n          <cmat-horizontal-navigation-branch-item #branch [child]=\"true\" [item]=\"item\" [name]=\"name\">\r\n          </cmat-horizontal-navigation-branch-item>\r\n        </div>\r\n      }\r\n      <!-- Divider -->\r\n      @if (item.type === 'divider') {\r\n        <div class=\"cmat-horizontal-navigation-menu-item\" mat-menu-item>\r\n          <cmat-horizontal-navigation-divider-item [item]=\"item\" [name]=\"name\">\r\n          </cmat-horizontal-navigation-divider-item>\r\n        </div>\r\n      }\r\n    }\r\n  }\r\n\r\n</mat-menu>\r\n\r\n<!-- Item template -->\r\n<ng-template #itemTemplate let-item>\r\n\r\n  <div class=\"cmat-horizontal-navigation-item-wrapper\"\r\n    [class.cmat-horizontal-navigation-item-has-subtitle]=\"!!item.subTitle\" [ngClass]=\"item.classes?.wrapper\">\r\n\r\n        <div class=\"cmat-horizontal-navigation-item\" [ngClass]=\"{'cmat-horizontal-navigation-item-disabled': item.disabled,\r\n                         'cmat-horizontal-navigation-item-active-forced': item.active}\"\r\n      [matTooltip]=\"item.tooltip || ''\">\r\n\r\n      <!-- Icon -->\r\n      @if (item.icon) {\r\n        <mat-icon class=\"cmat-horizontal-navigation-item-icon\" [ngClass]=\"item.classes?.icon\"\r\n        [svgIcon]=\"item.icon\"></mat-icon>\r\n      }\r\n\r\n      <!-- Title & Subtitle -->\r\n      <div class=\"cmat-horizontal-navigation-item-title-wrapper\">\r\n        <div class=\"cmat-horizontal-navigation-item-title\">\r\n          <span [ngClass]=\"item.classes?.title\">\r\n            {{item.title}}\r\n          </span>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Badge -->\r\n    @if (item.badge) {\r\n      <div class=\"cmat-horizontal-navigation-item-badge\">\r\n        <div class=\"cmat-horizontal-navigation-item-badge-content\" [ngClass]=\"item.badge.classes\">\r\n          {{item.badge.title}}\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n\r\n</ng-template>", dependencies: [{ kind: "component", type: i0.forwardRef(() => CmatHorizontalNavigationBranchItemComponent), selector: "cmat-horizontal-navigation-branch-item", inputs: ["child", "item", "name"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatMenuModule) }, { kind: "component", type: i0.forwardRef(() => i1$1.MatMenu), selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i0.forwardRef(() => i1$1.MatMenuItem), selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.MatMenuTrigger), selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i0.forwardRef(() => NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i0.forwardRef(() => CmatHorizontalNavigationBasicItemComponent), selector: "cmat-horizontal-navigation-basic-item", inputs: ["item", "name"] }, { kind: "component", type: i0.forwardRef(() => CmatHorizontalNavigationDividerItemComponent), selector: "cmat-horizontal-navigation-divider-item", inputs: ["item", "name"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatTooltipModule) }, { kind: "directive", type: i0.forwardRef(() => i1.MatTooltip), selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatIconModule) }, { kind: "component", type: i0.forwardRef(() => i2.MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: CmatHorizontalNavigationBranchItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: CmatHorizontalNavigationBranchItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-horizontal-navigation-branch-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, MatMenuModule, NgTemplateOutlet, CmatHorizontalNavigationBasicItemComponent,
                         forwardRef(() => CmatHorizontalNavigationBranchItemComponent), CmatHorizontalNavigationDividerItemComponent, MatTooltipModule, MatIconModule], template: "@if (!child) {\r\n    <div #trigger=\"matMenuTrigger\" [ngClass]=\"{'cmat-horizontal-navigation-menu-active': trigger.menuOpen,\r\n                 'cmat-horizontal-navigation-menu-active-forced': item.active}\"\r\n    [matMenuTriggerFor]=\"matMenu\" (onMenuOpen)=\"triggerChangeDetection()\" (onMenuClose)=\"triggerChangeDetection()\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item}\"></ng-container>\r\n  </div>\r\n}\r\n\r\n<mat-menu #matMenu=\"matMenu\" class=\"cmat-horizontal-navigation-menu-panel\" [overlapTrigger]=\"false\">\r\n\r\n  @for (item of item.children; track trackByFn($index, item)) {\r\n    <!-- Skip the hidden items -->\r\n    @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\r\n      <!-- Basic -->\r\n      @if (item.type === 'basic') {\r\n        <div class=\"cmat-horizontal-navigation-menu-item\" mat-menu-item [disabled]=\"item.disabled\">\r\n          <cmat-horizontal-navigation-basic-item [item]=\"item\" [name]=\"name\">\r\n          </cmat-horizontal-navigation-basic-item>\r\n        </div>\r\n      }\r\n      <!-- Branch: aside, collapsable, group -->\r\n      @if (item.type === 'aside' || item.type === 'collapsable' || item.type === 'group') {\r\n        <div class=\"cmat-horizontal-navigation-menu-item\" mat-menu-item\r\n          [disabled]=\"item.disabled\" [matMenuTriggerFor]=\"branch.matMenu\">\r\n          <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item}\"></ng-container>\r\n          <cmat-horizontal-navigation-branch-item #branch [child]=\"true\" [item]=\"item\" [name]=\"name\">\r\n          </cmat-horizontal-navigation-branch-item>\r\n        </div>\r\n      }\r\n      <!-- Divider -->\r\n      @if (item.type === 'divider') {\r\n        <div class=\"cmat-horizontal-navigation-menu-item\" mat-menu-item>\r\n          <cmat-horizontal-navigation-divider-item [item]=\"item\" [name]=\"name\">\r\n          </cmat-horizontal-navigation-divider-item>\r\n        </div>\r\n      }\r\n    }\r\n  }\r\n\r\n</mat-menu>\r\n\r\n<!-- Item template -->\r\n<ng-template #itemTemplate let-item>\r\n\r\n  <div class=\"cmat-horizontal-navigation-item-wrapper\"\r\n    [class.cmat-horizontal-navigation-item-has-subtitle]=\"!!item.subTitle\" [ngClass]=\"item.classes?.wrapper\">\r\n\r\n        <div class=\"cmat-horizontal-navigation-item\" [ngClass]=\"{'cmat-horizontal-navigation-item-disabled': item.disabled,\r\n                         'cmat-horizontal-navigation-item-active-forced': item.active}\"\r\n      [matTooltip]=\"item.tooltip || ''\">\r\n\r\n      <!-- Icon -->\r\n      @if (item.icon) {\r\n        <mat-icon class=\"cmat-horizontal-navigation-item-icon\" [ngClass]=\"item.classes?.icon\"\r\n        [svgIcon]=\"item.icon\"></mat-icon>\r\n      }\r\n\r\n      <!-- Title & Subtitle -->\r\n      <div class=\"cmat-horizontal-navigation-item-title-wrapper\">\r\n        <div class=\"cmat-horizontal-navigation-item-title\">\r\n          <span [ngClass]=\"item.classes?.title\">\r\n            {{item.title}}\r\n          </span>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Badge -->\r\n    @if (item.badge) {\r\n      <div class=\"cmat-horizontal-navigation-item-badge\">\r\n        <div class=\"cmat-horizontal-navigation-item-badge-content\" [ngClass]=\"item.badge.classes\">\r\n          {{item.badge.title}}\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n\r\n</ng-template>" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: CmatNavigationService }], propDecorators: { child: [{
+        }], propDecorators: { child: [{
                 type: Input
             }], item: [{
                 type: Input
@@ -322,9 +320,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
             }] } });
 
 class CmatHorizontalNavigationSpacerItemComponent {
-    constructor(_changeDetectorRef, _cmatNavigationService) {
-        this._changeDetectorRef = _changeDetectorRef;
-        this._cmatNavigationService = _cmatNavigationService;
+    constructor() {
+        this._changeDetectorRef = inject(ChangeDetectorRef);
+        this._cmatNavigationService = inject(CmatNavigationService);
         this._unsubscribeAll = new Subject();
     }
     // -----------------------------------------------------------------------------------------------------
@@ -350,25 +348,24 @@ class CmatHorizontalNavigationSpacerItemComponent {
         this._unsubscribeAll.next(void 0);
         this._unsubscribeAll.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.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: "20.0.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: CmatHorizontalNavigationSpacerItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", 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: "20.0.0", ngImport: i0, type: CmatHorizontalNavigationSpacerItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: CmatHorizontalNavigationSpacerItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-horizontal-navigation-spacer-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "<!-- Spacer -->\r\n<div class=\"cmat-horizontal-navigation-item-wrapper\" [ngClass]=\"item.classes?.wrapper\"></div>" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: CmatNavigationService }], propDecorators: { item: [{
+        }], propDecorators: { item: [{
                 type: Input
             }], name: [{
                 type: Input
             }] } });
 
 class CmatHorizontalNavigationComponent {
-    constructor(_changeDetectorRef, _cmatNavigationService, _cmatUtilsService) {
-        this._changeDetectorRef = _changeDetectorRef;
-        this._cmatNavigationService = _cmatNavigationService;
-        this._cmatUtilsService = _cmatUtilsService;
-        this.name = this._cmatUtilsService.randomId();
+    constructor() {
+        this.name = inject(CmatUtilsService).randomId();
         this.onRefreshed = new ReplaySubject(1);
+        this._changeDetectorRef = inject(ChangeDetectorRef);
+        this._cmatNavigationService = inject(CmatNavigationService);
         this._unsubscribeAll = new Subject();
     }
     // -----------------------------------------------------------------------------------------------------
@@ -392,7 +389,7 @@ class CmatHorizontalNavigationComponent {
     ngOnInit() {
         // Make sure the name input is not an empty string
         if (this.name === '') {
-            this.name = this._cmatUtilsService.randomId();
+            this.name = inject(CmatUtilsService).randomId();
         }
         // Register the navigation component
         this._cmatNavigationService.registerComponent(this.name, this);
@@ -428,25 +425,25 @@ class CmatHorizontalNavigationComponent {
     trackByFn(index, item) {
         return item.id ?? index;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: CmatHorizontalNavigationComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CmatNavigationService }, { token: i2.CmatUtilsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.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  @for (item of navigation; track trackByFn($index, item)) {\r\n    <!-- Skip the hidden items -->\r\n    @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\r\n      <!-- Basic -->\r\n      @if (item.type === 'basic') {\r\n        <cmat-horizontal-navigation-basic-item class=\"cmat-horizontal-navigation-menu-item\" [item]=\"item\"\r\n        [name]=\"name\"></cmat-horizontal-navigation-basic-item>\r\n      }\r\n      <!-- Branch: aside, collapsable, group -->\r\n      @if (item.type === 'aside' || item.type === 'collapsable' || item.type === 'group') {\r\n        <cmat-horizontal-navigation-branch-item class=\"cmat-horizontal-navigation-menu-item\" [item]=\"item\"\r\n        [name]=\"name\"></cmat-horizontal-navigation-branch-item>\r\n      }\r\n      <!-- Spacer -->\r\n      @if (item.type === 'spacer') {\r\n        <cmat-horizontal-navigation-spacer-item class=\"cmat-horizontal-navigation-menu-item\" [item]=\"item\"\r\n        [name]=\"name\"></cmat-horizontal-navigation-spacer-item>\r\n      }\r\n    }\r\n  }\r\n\r\n</div>", styles: ["cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper{display:flex;align-items:center}cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-basic-item .cmat-horizontal-navigation-item-wrapper,cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-branch-item .cmat-horizontal-navigation-item-wrapper{border-radius:4px;overflow:hidden}cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-basic-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item,cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-branch-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item{padding:0 16px;cursor:pointer;-webkit-user-select:none;user-select:none}cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-basic-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item .cmat-horizontal-navigation-item-icon,cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-branch-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item .cmat-horizontal-navigation-item-icon{margin-right:12px}cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-spacer-item{margin:12px 0}.cmat-horizontal-navigation-menu-panel .cmat-horizontal-navigation-menu-item{height:auto;min-height:0;line-height:normal;white-space:normal}.cmat-horizontal-navigation-menu-panel .cmat-horizontal-navigation-menu-item cmat-horizontal-navigation-basic-item,.cmat-horizontal-navigation-menu-panel .cmat-horizontal-navigation-menu-item cmat-horizontal-navigation-branch-item,.cmat-horizontal-navigation-menu-panel .cmat-horizontal-navigation-menu-item cmat-horizontal-navigation-divider-item{display:flex;flex:1 1 auto}.cmat-horizontal-navigation-menu-panel .cmat-horizontal-navigation-menu-item cmat-horizontal-navigation-divider-item{margin:8px -16px}.cmat-horizontal-navigation-menu-panel .cmat-horizontal-navigation-menu-item cmat-horizontal-navigation-divider-item .cmat-horizontal-navigation-item-wrapper{height:1px;box-shadow:0 1px}.cmat-horizontal-navigation-menu-panel .cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-title-wrapper .cmat-horizontal-navigation-item-title{white-space:normal!important}.cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-wrapper{width:100%}.cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-wrapper.cmat-horizontal-navigation-item-has-subtitle .cmat-horizontal-navigation-item{min-height:56px}.cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item{position:relative;display:flex;align-items:center;justify-content:flex-start;min-height:48px;width:100%;font-size:13px;font-weight:500;text-decoration:none}.cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item .cmat-horizontal-navigation-item-title-wrapper .cmat-horizontal-navigation-item-title{white-space:nowrap}.cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item .cmat-horizontal-navigation-item-title-wrapper .cmat-horizontal-navigation-item-subtitle{font-size:12px}.cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item .cmat-horizontal-navigation-item-badge{margin-left:auto}.cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item .cmat-horizontal-navigation-item-badge .cmat-horizontal-navigation-item-badge-content{display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;white-space:nowrap;height:20px}\n"], dependencies: [{ kind: "component", type: CmatHorizontalNavigationBasicItemComponent, selector: "cmat-horizontal-navigation-basic-item", inputs: ["item", "name"] }, { 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: CmatHorizontalNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", 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  @for (item of navigation; track trackByFn($index, item)) {\r\n    <!-- Skip the hidden items -->\r\n    @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\r\n      <!-- Basic -->\r\n      @if (item.type === 'basic') {\r\n        <cmat-horizontal-navigation-basic-item class=\"cmat-horizontal-navigation-menu-item\" [item]=\"item\"\r\n        [name]=\"name\"></cmat-horizontal-navigation-basic-item>\r\n      }\r\n      <!-- Branch: aside, collapsable, group -->\r\n      @if (item.type === 'aside' || item.type === 'collapsable' || item.type === 'group') {\r\n        <cmat-horizontal-navigation-branch-item class=\"cmat-horizontal-navigation-menu-item\" [item]=\"item\"\r\n        [name]=\"name\"></cmat-horizontal-navigation-branch-item>\r\n      }\r\n      <!-- Spacer -->\r\n      @if (item.type === 'spacer') {\r\n        <cmat-horizontal-navigation-spacer-item class=\"cmat-horizontal-navigation-menu-item\" [item]=\"item\"\r\n        [name]=\"name\"></cmat-horizontal-navigation-spacer-item>\r\n      }\r\n    }\r\n  }\r\n\r\n</div>", styles: ["cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper{display:flex;align-items:center}cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-basic-item .cmat-horizontal-navigation-item-wrapper,cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-branch-item .cmat-horizontal-navigation-item-wrapper{border-radius:4px;overflow:hidden}cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-basic-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item,cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-branch-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item{padding:0 16px;cursor:pointer;-webkit-user-select:none;user-select:none}cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-basic-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item .cmat-horizontal-navigation-item-icon,cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-branch-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item .cmat-horizontal-navigation-item-icon{margin-right:12px}cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-spacer-item{margin:12px 0}.cmat-horizontal-navigation-menu-panel .cmat-horizontal-navigation-menu-item{height:auto;min-height:0;line-height:normal;white-space:normal}.cmat-horizontal-navigation-menu-panel .cmat-horizontal-navigation-menu-item cmat-horizontal-navigation-basic-item,.cmat-horizontal-navigation-menu-panel .cmat-horizontal-navigation-menu-item cmat-horizontal-navigation-branch-item,.cmat-horizontal-navigation-menu-panel .cmat-horizontal-navigation-menu-item cmat-horizontal-navigation-divider-item{display:flex;flex:1 1 auto}.cmat-horizontal-navigation-menu-panel .cmat-horizontal-navigation-menu-item cmat-horizontal-navigation-divider-item{margin:8px -16px}.cmat-horizontal-navigation-menu-panel .cmat-horizontal-navigation-menu-item cmat-horizontal-navigation-divider-item .cmat-horizontal-navigation-item-wrapper{height:1px;box-shadow:0 1px}.cmat-horizontal-navigation-menu-panel .cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-title-wrapper .cmat-horizontal-navigation-item-title{white-space:normal!important}.cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-wrapper{width:100%}.cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-wrapper.cmat-horizontal-navigation-item-has-subtitle .cmat-horizontal-navigation-item{min-height:56px}.cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item{position:relative;display:flex;align-items:center;justify-content:flex-start;min-height:48px;width:100%;font-size:13px;font-weight:500;text-decoration:none}.cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item .cmat-horizontal-navigation-item-title-wrapper .cmat-horizontal-navigation-item-title{white-space:nowrap}.cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item .cmat-horizontal-navigation-item-title-wrapper .cmat-horizontal-navigation-item-subtitle{font-size:12px}.cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item .cmat-horizontal-navigation-item-badge{margin-left:auto}.cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item .cmat-horizontal-navigation-item-badge .cmat-horizontal-navigation-item-badge-content{display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;white-space:nowrap;height:20px}\n"], dependencies: [{ kind: "component", type: CmatHorizontalNavigationBasicItemComponent, selector: "cmat-horizontal-navigation-basic-item", inputs: ["item", "name"] }, { 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: "20.0.0", ngImport: i0, type: CmatHorizontalNavigationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: CmatHorizontalNavigationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-horizontal-navigation', animations: cmatAnimations, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatHorizontalNavigation', imports: [CmatHorizontalNavigationBasicItemComponent, CmatHorizontalNavigationBranchItemComponent, CmatHorizontalNavigationSpacerItemComponent], template: "<div class=\"cmat-horizontal-navigation-wrapper\">\r\n\r\n  @for (item of navigation; track trackByFn($index, item)) {\r\n    <!-- Skip the hidden items -->\r\n    @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\r\n      <!-- Basic -->\r\n      @if (item.type === 'basic') {\r\n        <cmat-horizontal-navigation-basic-item class=\"cmat-horizontal-navigation-menu-item\" [item]=\"item\"\r\n        [name]=\"name\"></cmat-horizontal-navigation-basic-item>\r\n      }\r\n      <!-- Branch: aside, collapsable, group -->\r\n      @if (item.type === 'aside' || item.type === 'collapsable' || item.type === 'group') {\r\n        <cmat-horizontal-navigation-branch-item class=\"cmat-horizontal-navigation-menu-item\" [item]=\"item\"\r\n        [name]=\"name\"></cmat-horizontal-navigation-branch-item>\r\n      }\r\n      <!-- Spacer -->\r\n      @if (item.type === 'spacer') {\r\n        <cmat-horizontal-navigation-spacer-item class=\"cmat-horizontal-navigation-menu-item\" [item]=\"item\"\r\n        [name]=\"name\"></cmat-horizontal-navigation-spacer-item>\r\n      }\r\n    }\r\n  }\r\n\r\n</div>", styles: ["cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper{display:flex;align-items:center}cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-basic-item .cmat-horizontal-navigation-item-wrapper,cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-branch-item .cmat-horizontal-navigation-item-wrapper{border-radius:4px;overflow:hidden}cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-basic-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item,cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-branch-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item{padding:0 16px;cursor:pointer;-webkit-user-select:none;user-select:none}cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-basic-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item .cmat-horizontal-navigation-item-icon,cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-branch-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item .cmat-horizontal-navigation-item-icon{margin-right:12px}cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-spacer-item{margin:12px 0}.cmat-horizontal-navigation-menu-panel .cmat-horizontal-navigation-menu-item{height:auto;min-height:0;line-height:normal;white-space:normal}.cmat-horizontal-navigation-menu-panel .cmat-horizontal-navigation-menu-item cmat-horizontal-navigation-basic-item,.cmat-horizontal-navigation-menu-panel .cmat-horizontal-navigation-menu-item cmat-horizontal-navigation-branch-item,.cmat-horizontal-navigation-menu-panel .cmat-horizontal-navigation-menu-item cmat-horizontal-navigation-divider-item{display:flex;flex:1 1 auto}.cmat-horizontal-navigation-menu-panel .cmat-horizontal-navigation-menu-item cmat-horizontal-navigation-divider-item{margin:8px -16px}.cmat-horizontal-navigation-menu-panel .cmat-horizontal-navigation-menu-item cmat-horizontal-navigation-divider-item .cmat-horizontal-navigation-item-wrapper{height:1px;box-shadow:0 1px}.cmat-horizontal-navigation-menu-panel .cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-title-wrapper .cmat-horizontal-navigation-item-title{white-space:normal!important}.cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-wrapper{width:100%}.cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-wrapper.cmat-horizontal-navigation-item-has-subtitle .cmat-horizontal-navigation-item{min-height:56px}.cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item{position:relative;display:flex;align-items:center;justify-content:flex-start;min-height:48px;width:100%;font-size:13px;font-weight:500;text-decoration:none}.cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item .cmat-horizontal-navigation-item-title-wrapper .cmat-horizontal-navigation-item-title{white-space:nowrap}.cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item .cmat-horizontal-navigation-item-title-wrapper .cmat-horizontal-navigation-item-subtitle{font-size:12px}.cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item .cmat-horizontal-navigation-item-badge{margin-left:auto}.cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item .cmat-horizontal-navigation-item-badge .cmat-horizontal-navigation-item-badge-content{display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;white-space:nowrap;height:20px}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: CmatNavigationService }, { type: i2.CmatUtilsService }], propDecorators: { name: [{
+        }], propDecorators: { name: [{
                 type: Input
             }], navigation: [{
                 type: Input
             }] } });
 
 class CmatVerticalNavigationBasicItemComponent {
-    constructor(_changeDetectorRef, _cmatNavigationService, _cmatUtilsService) {
-        this._changeDetectorRef = _changeDetectorRef;
-        this._cmatNavigationService = _cmatNavigationService;
-        this._cmatUtilsService = _cmatUtilsService;
+    constructor() {
         this.editState = false;
         this.editSelectedItemChanged = new EventEmitter();
+        this._changeDetectorRef = inject(ChangeDetectorRef);
+        this._cmatNavigationService = inject(CmatNavigationService);
+        this._cmatUtilsService = inject(CmatUtilsService);
         this._unsubscribeAll = new Subject();
         this.isActiveMatchOptions = this._cmatUtilsService.subsetMatchOptions;
     }
@@ -472,13 +469,13 @@ class CmatVerticalNavigationBasicItemComponent {
     selectItem() {
         this.editSelectedItemChanged.next(this.item);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: CmatVerticalNavigationBasicItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CmatNavigationService }, { token: i2.CmatUtilsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: CmatVerticalNavigationBasicItemComponent, isStandalone: true, selector: "cmat-vertical-navigation-basic-item", inputs: { item: "item", name: "name", editState: "editState" }, outputs: { editSelectedItemChanged: "editSelectedItemChanged" }, ngImport: i0, template: "<!-- Item wrapper -->\r\n<div class=\"cmat-vertical-navigation-item-wrapper\" [class.cmat-vertical-navigation-item-has-subtitle]=\"!!item.subTitle\"\r\n  [ngClass]=\"item.classes?.wrapper\">\r\n\r\n  @if(editState){\r\n  <div class=\"cmat-vertical-navigation-item\" role=\"presentation\"\r\n    [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\"\r\n    (click)=\"selectItem()\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </div>\r\n  }@else{\r\n  <!-- Item with an internal link -->\r\n  @if (item.link && !item.externalLink && !item.function && !item.disabled) {\r\n  <a class=\"cmat-vertical-navigation-item\" [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\"\r\n    [routerLink]=\"[item.link]\" [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  }\r\n\r\n  <!-- Item with an external link -->\r\n  @if (item.link && item.externalLink && !item.function && !item.disabled) {\r\n  <a class=\"cmat-vertical-navigation-item\" [href]=\"item.link\" [target]=\"item.target || '_blank'\"\r\n    [matTooltip]=\"item.tooltip || ''\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </a>\r\n  }\r\n\r\n  <!-- Item with a function -->\r\n  @if (!item.link && item.function && !item.disabled) {\r\n  <div class=\"cmat-vertical-navigation-item\" role=\"presentation\"\r\n    [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\"\r\n    (click)=\"item.function(item)\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </div>\r\n  }\r\n\r\n  <!-- Item with an internal link and function -->\r\n  @if (item.link && !item.externalLink && item.function && !item.disabled) {\r\n  <a class=\"cmat-vertical-navigation-item\" [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\"\r\n    [routerLink]=\"[item.link]\" [routerLinkActive]=\"'cmat-vertical-navigation-item-active'\"\r\n    [routerLinkActiveOptions]=\"isActiveMatchOptions\" [matTooltip]=\"item.tooltip || ''\" (click)=\"item.function(item)\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </a>\r\n  }\r\n\r\n  <!-- Item with an external link and function -->\r\n  @if (item.link && item.externalLink && item.function && !item.disabled) {\r\n  <a class=\"cmat-vertical-navigation-item\" [href]=\"item.link\" [target]=\"item.target || '_blank'\"\r\n    [matTooltip]=\"item.tooltip || ''\" (click)=\"item.function(item)\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </a>\r\n  }\r\n\r\n  <!-- Item with a no link and no function -->\r\n  @if (!item.link && !item.function && !item.disabled) {\r\n  <div class=\"cmat-vertical-navigation-item\" [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\"\r\n    [matTooltip]=\"item.tooltip || ''\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </div>\r\n  }\r\n\r\n  <!-- Item is disabled -->\r\n  @if (item.disabled) {\r\n  <div class=\"cmat-vertical-navigation-item cmat-vertical-navigation-item-disabled\" [matTooltip]=\"item.tooltip || ''\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </div>\r\n  }\r\n  }\r\n</div>\r\n\r\n<!-- Item template -->\r\n<ng-template #itemTemplate>\r\n\r\n  <!-- Icon -->\r\n  @if (item.icon) {\r\n  <mat-icon class=\"cmat-vertical-navigation-item-icon\" [ngClass]=\"item.classes?.icon\" [svgIcon]=\"item.icon\">\r\n  </mat-icon>\r\n  }\r\n\r\n  <!-- Title & Subtitle -->\r\n  <div class=\"cmat-vertical-navigation-item-title-wrapper\">\r\n    <div class=\"cmat-vertical-navigation-item-title\">\r\n      <span [ngClass]=\"item.classes?.title\">\r\n        {{item.title}}\r\n      </span>\r\n    </div>\r\n    @if (item.subTitle) {\r\n    <div class=\"cmat-vertical-navigation-item-subtitle\">\r\n      <span [ngClass]=\"item.classes?.subtitle\">\r\n        {{item.subTitle}}\r\n      </span>\r\n    </div>\r\n    }\r\n  </div>\r\n\r\n  <!-- Badge -->\r\n  @if (item.badge) {\r\n  <div class=\"cmat-vertical-navigation-item-badge\">\r\n    <div class=\"cmat-vertical-navigation-item-badge-content\" [ngClass]=\"item.badge.classes\">\r\n      {{item.badge.title}}\r\n    </div>\r\n  </div>\r\n  }\r\n</ng-template>", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: CmatVerticalNavigationBasicItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: CmatVerticalNavigationBasicItemComponent, isStandalone: true, selector: "cmat-vertical-navigation-basic-item", inputs: { item: "item", name: "name", editState: "editState" }, outputs: { editSelectedItemChanged: "editSelectedItemChanged" }, ngImport: i0, template: "<!-- Item wrapper -->\r\n<div class=\"cmat-vertical-navigation-item-wrapper\" [class.cmat-vertical-navigation-item-has-subtitle]=\"!!item.subTitle\"\r\n  [ngClass]=\"item.classes?.wrapper\">\r\n\r\n  @if(editState){\r\n  <div class=\"cmat-vertical-navigation-item\" role=\"presentation\"\r\n    [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\"\r\n    (click)=\"selectItem()\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </div>\r\n  }@else{\r\n  <!-- Item with an internal link -->\r\n  @if (item.link && !item.externalLink && !item.function && !item.disabled) {\r\n  <a class=\"cmat-vertical-navigation-item\" [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\"\r\n    [routerLink]=\"[item.link]\" [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  }\r\n\r\n  <!-- Item with an external link -->\r\n  @if (item.link && item.externalLink && !item.function && !item.disabled) {\r\n  <a class=\"cmat-vertical-navigation-item\" [href]=\"item.link\" [target]=\"item.target || '_blank'\"\r\n    [matTooltip]=\"item.tooltip || ''\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </a>\r\n  }\r\n\r\n  <!-- Item with a function -->\r\n  @if (!item.link && item.function && !item.disabled) {\r\n  <div class=\"cmat-vertical-navigation-item\" role=\"presentation\"\r\n    [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\"\r\n    (click)=\"item.function(item)\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </div>\r\n  }\r\n\r\n  <!-- Item with an internal link and function -->\r\n  @if (item.link && !item.externalLink && item.function && !item.disabled) {\r\n  <a class=\"cmat-vertical-navigation-item\" [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\"\r\n    [routerLink]=\"[item.link]\" [routerLinkActive]=\"'cmat-vertical-navigation-item-active'\"\r\n    [routerLinkActiveOptions]=\"isActiveMatchOptions\" [matTooltip]=\"item.tooltip || ''\" (click)=\"item.function(item)\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </a>\r\n  }\r\n\r\n  <!-- Item with an external link and function -->\r\n  @if (item.link && item.externalLink && item.function && !item.disabled) {\r\n  <a class=\"cmat-vertical-navigation-item\" [href]=\"item.link\" [target]=\"item.target || '_blank'\"\r\n    [matTooltip]=\"item.tooltip || ''\" (click)=\"item.function(item)\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </a>\r\n  }\r\n\r\n  <!-- Item with a no link and no function -->\r\n  @if (!item.link && !item.function && !item.disabled) {\r\n  <div class=\"cmat-vertical-navigation-item\" [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\"\r\n    [matTooltip]=\"item.tooltip || ''\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </div>\r\n  }\r\n\r\n  <!-- Item is disabled -->\r\n  @if (item.disabled) {\r\n  <div class=\"cmat-vertical-navigation-item cmat-vertical-navigation-item-disabled\" [matTooltip]=\"item.tooltip || ''\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </div>\r\n  }\r\n  }\r\n</div>\r\n\r\n<!-- Item template -->\r\n<ng-template #itemTemplate>\r\n\r\n  <!-- Icon -->\r\n  @if (item.icon) {\r\n  <mat-icon class=\"cmat-vertical-navigation-item-icon\" [ngClass]=\"item.classes?.icon\" [svgIcon]=\"item.icon\">\r\n  </mat-icon>\r\n  }\r\n\r\n  <!-- Title & Subtitle -->\r\n  <div class=\"cmat-vertical-navigation-item-title-wrapper\">\r\n    <div class=\"cmat-vertical-navigation-item-title\">\r\n      <span [ngClass]=\"item.classes?.title\">\r\n        {{item.title}}\r\n      </span>\r\n    </div>\r\n    @if (item.subTitle) {\r\n    <div class=\"cmat-vertical-navigation-item-subtitle\">\r\n      <span [ngClass]=\"item.classes?.subtitle\">\r\n        {{item.subTitle}}\r\n      </span>\r\n    </div>\r\n    }\r\n  </div>\r\n\r\n  <!-- Badge -->\r\n  @if (item.badge) {\r\n  <div class=\"cmat-vertical-navigation-item-badge\">\r\n    <div class=\"cmat-vertical-navigation-item-badge-content\" [ngClass]=\"item.badge.classes\">\r\n      {{item.badge.title}}\r\n    </div>\r\n  </div>\r\n  }\r\n</ng-template>", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "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: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: CmatVerticalNavigationBasicItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: CmatVerticalNavigationBasicItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-vertical-navigation-basic-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, RouterLink, RouterLinkActive, MatTooltipModule, NgTemplateOutlet, MatIconModule], template: "<!-- Item wrapper -->\r\n<div class=\"cmat-vertical-navigation-item-wrapper\" [class.cmat-vertical-navigation-item-has-subtitle]=\"!!item.subTitle\"\r\n  [ngClass]=\"item.classes?.wrapper\">\r\n\r\n  @if(editState){\r\n  <div class=\"cmat-vertical-navigation-item\" role=\"presentation\"\r\n    [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\"\r\n    (click)=\"selectItem()\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </div>\r\n  }@else{\r\n  <!-- Item with an internal link -->\r\n  @if (item.link && !item.externalLink && !item.function && !item.disabled) {\r\n  <a class=\"cmat-vertical-navigation-item\" [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\"\r\n    [routerLink]=\"[item.link]\" [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  }\r\n\r\n  <!-- Item with an external link -->\r\n  @if (item.link && item.externalLink && !item.function && !item.disabled) {\r\n  <a class=\"cmat-vertical-navigation-item\" [href]=\"item.link\" [target]=\"item.target || '_blank'\"\r\n    [matTooltip]=\"item.tooltip || ''\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </a>\r\n  }\r\n\r\n  <!-- Item with a function -->\r\n  @if (!item.link && item.function && !item.disabled) {\r\n  <div class=\"cmat-vertical-navigation-item\" role=\"presentation\"\r\n    [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\"\r\n    (click)=\"item.function(item)\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </div>\r\n  }\r\n\r\n  <!-- Item with an internal link and function -->\r\n  @if (item.link && !item.externalLink && item.function && !item.disabled) {\r\n  <a class=\"cmat-vertical-navigation-item\" [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\"\r\n    [routerLink]=\"[item.link]\" [routerLinkActive]=\"'cmat-vertical-navigation-item-active'\"\r\n    [routerLinkActiveOptions]=\"isActiveMatchOptions\" [matTooltip]=\"item.tooltip || ''\" (click)=\"item.function(item)\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </a>\r\n  }\r\n\r\n  <!-- Item with an external link and function -->\r\n  @if (item.link && item.externalLink && item.function && !item.disabled) {\r\n  <a class=\"cmat-vertical-navigation-item\" [href]=\"item.link\" [target]=\"item.target || '_blank'\"\r\n    [matTooltip]=\"item.tooltip || ''\" (click)=\"item.function(item)\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </a>\r\n  }\r\n\r\n  <!-- Item with a no link and no function -->\r\n  @if (!item.link && !item.function && !item.disabled) {\r\n  <div class=\"cmat-vertical-navigation-item\" [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\"\r\n    [matTooltip]=\"item.tooltip || ''\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </div>\r\n  }\r\n\r\n  <!-- Item is disabled -->\r\n  @if (item.disabled) {\r\n  <div class=\"cmat-vertical-navigation-item cmat-vertical-navigation-item-disabled\" [matTooltip]=\"item.tooltip || ''\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </div>\r\n  }\r\n  }\r\n</div>\r\n\r\n<!-- Item template -->\r\n<ng-template #itemTemplate>\r\n\r\n  <!-- Icon -->\r\n  @if (item.icon) {\r\n  <mat-icon class=\"cmat-vertical-navigation-item-icon\" [ngClass]=\"item.classes?.icon\" [svgIcon]=\"item.icon\">\r\n  </mat-icon>\r\n  }\r\n\r\n  <!-- Title & Subtitle -->\r\n  <div class=\"cmat-vertical-navigation-item-title-wrapper\">\r\n    <div class=\"cmat-vertical-navigation-item-title\">\r\n      <span [ngClass]=\"item.classes?.title\">\r\n        {{item.title}}\r\n      </span>\r\n    </div>\r\n    @if (item.subTitle) {\r\n    <div class=\"cmat-vertical-navigation-item-subtitle\">\r\n      <span [ngClass]=\"item.classes?.subtitle\">\r\n        {{item.subTitle}}\r\n      </span>\r\n    </div>\r\n    }\r\n  </div>\r\n\r\n  <!-- Badge -->\r\n  @if (item.badge) {\r\n  <div class=\"cmat-vertical-navigation-item-badge\">\r\n    <div class=\"cmat-vertical-navigation-item-badge-content\" [ngClass]=\"item.badge.classes\">\r\n      {{item.badge.title}}\r\n    </div>\r\n  </div>\r\n  }\r\n</ng-template>" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: CmatNavigationService }, { type: i2.CmatUtilsService }], propDecorators: { item: [{
+        }], ctorParameters: () => [], propDecorators: { item: [{
                 type: Input
             }], name: [{
                 type: Input
@@ -489,11 +486,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
             }] } });
 
 class CmatVerticalNavigationDividerItemComponent {
-    constructor(_changeDetectorRef, _cmatNavigationService) {
-        this._changeDetectorRef = _changeDetectorRef;
-        this._cmatNavigationService = _cmatNavigationService;
+    constructor() {
         this.editState = false;
         this.editSelectedItemChanged = new EventEmitter();
+        this._changeDetectorRef = inject(ChangeDetectorRef);
+        this._cmatNavigationService = inject(CmatNavigationService);
         this._unsubscribeAll = new Subject();
     }
     // -----------------------------------------------------------------------------------------------------
@@ -522,13 +519,13 @@ class CmatVerticalNavigationDividerItemComponent {
     selectItem(item) {
         this.editSelectedItemChanged.next(item);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.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: "20.0.0", type: CmatVerticalNavigationDividerItemComponent, isStandalone: true, selector: "cmat-vertical-navigation-divider-item", inputs: { item: "item", name: "name", editState: "editState" }, outputs: { editSelectedItemChanged: "editSelectedItemChanged" }, ngImport: i0, template: "<!-- Divider -->\r\n<div class=\"cmat-vertical-navigation-item-wrapper divider\" role=\"presentation\" [ngClass]=\"item.classes?.wrapper\" (click)=\"selectItem(item);\"></div>", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: CmatVerticalNavigationDividerItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: CmatVerticalNavigationDividerItemComponent, isStandalone: true, selector: "cmat-vertical-navigation-divider-item", inputs: { item: "item", name: "name", editState: "editState" }, outputs: { editSelectedItemChanged: "editSelectedItemChanged" }, ngImport: i0, template: "<!-- Divider -->\r\n<div class=\"cmat-vertical-navigation-item-wrapper divider\" role=\"presentation\" [ngClass]=\"item.classes?.wrapper\" (click)=\"selectItem(item);\"></div>", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: CmatVerticalNavigationDividerItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: CmatVerticalNavigationDividerItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-vertical-navigation-divider-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "<!-- Divider -->\r\n<div class=\"cmat-vertical-navigation-item-wrapper divider\" role=\"presentation\" [ngClass]=\"item.classes?.wrapper\" (click)=\"selectItem(item);\"></div>" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: CmatNavigationService }], propDecorators: { item: [{
+        }], propDecorators: { item: [{
                 type: Input
             }], name: [{
                 type: Input
@@ -539,12 +536,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
             }] } });
 
 class CmatVerticalNavigationSpacerItemComponent {
-    constructor(_changeDetectorRef, _cmatNavigationService) {
-        this._changeDetectorRef = _changeDetectorRef;
-        this._cmatNavigationService = _cmatNavigationService;
+    constructor() {
         this.editState = false;
         this.editSelectedItemChanged = new EventEmitter();
         this._unsubscribeAll = new Subject();
+        this._changeDetectorRef = inject(ChangeDetectorRef);
+        this._cmatNavigationService = inject(CmatNavigationService);
     }
     // -----------------------------------------------------------------------------------------------------
     // @ Lifecycle hooks
@@ -572,13 +569,13 @@ class CmatVerticalNavigationSpacerItemComponent {
     selectItem(item) {
         this.editSelectedItemChanged.next(item);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.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: "20.0.0", type: CmatVerticalNavigationSpacerItemComponent, isStandalone: true, selector: "cmat-vertical-navigation-spacer-item", inputs: { item: "item", name: "name", editState: "editState" }, outputs: { editSelectedItemChanged: "editSelectedItemChanged" }, ngImport: i0, template: "<!-- Spacer -->\r\n<div class=\"cmat-vertical-navigation-item-wrapper\" role=\"presentation\" [ngClass]=\"item.classes?.wrapper\" (click)=\"selectItem(item);\"></div>", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: CmatVerticalNavigationSpacerItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: CmatVerticalNavigationSpacerItemComponent, isStandalone: true, selector: "cmat-vertical-navigation-spacer-item", inputs: { item: "item", name: "name", editState: "editState" }, outputs: { editSelectedItemChanged: "editSelectedItemChanged" }, ngImport: i0, template: "<!-- Spacer -->\r\n<div class=\"cmat-vertical-navigation-item-wrapper\" role=\"presentation\" [ngClass]=\"item.classes?.wrapper\" (click)=\"selectItem(item);\"></div>", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: CmatVerticalNavigationSpacerItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: CmatVerticalNavigationSpacerItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-vertical-navigation-spacer-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "<!-- Spacer -->\r\n<div class=\"cmat-vertical-navigation-item-wrapper\" role=\"presentation\" [ngClass]=\"item.classes?.wrapper\" (click)=\"selectItem(item);\"></div>" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: CmatNavigationService }], propDecorators: { item: [{
+        }], propDecorators: { item: [{
                 type: Input
             }], name: [{
                 type: Input
@@ -589,11 +586,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
             }] } });
 
 class CmatVerticalNavigationGroupItemComponent {
-    constructor(_changeDetectorRef, _cmatNavigationService) {
-        this._changeDetectorRef = _changeDetectorRef;
-        this._cmatNavigationService = _cmatNavigationService;
+    constructor() {
         this.editState = false;
         this.editSelectedItemChanged = new EventEmitter();
+        this._changeDetectorRef = inject(ChangeDetectorRef);
+        this._cmatNavigationService = inject(CmatNavigationService);
         this._unsubscribeAll = new Subject();
     }
     // -----------------------------------------------------------------------------------------------------
@@ -634,15 +631,15 @@ class CmatVerticalNavigationGroupItemComponent {
     selectItem(item) {
         this.editSelectedItemChanged.next(item);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: CmatVerticalNavigationGroupItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CmatNavigationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: CmatVerticalNavigationGroupItemComponent, isStandalone: true, selector: "cmat-vertical-navigation-group-item", inputs: { autoCollapse: "autoCollapse", item: "item", name: "name", editState: "editState" }, outputs: { editSelectedItemChanged: "editSelectedItemChanged" }, ngImport: i0, template: "<!-- Item wrapper -->\r\n<div class=\"cmat-vertical-navigation-item-wrapper\" role=\"presentation\"\r\n  [class.cmat-vertical-navigation-item-has-subtitle]=\"!!item.subTitle\" [ngClass]=\"item.classes?.wrapper\" (click)=\"selectItem(item);\">\r\n\r\n  <div class=\"cmat-vertical-navigation-item\">\r\n\r\n    <!-- Icon -->\r\n    @if (item.icon) {\r\n      <mat-icon class=\"cmat-vertical-navigation-item-icon\" [ngClass]=\"item.classes?.icon\" [svgIcon]=\"item.icon\">\r\n      </mat-icon>\r\n    }\r\n\r\n    <!-- Title & Subtitle -->\r\n    <div class=\"cmat-vertical-navigation-item-title-wrapper\">\r\n      <div class=\"cmat-vertical-navigation-item-title\">\r\n        <span [ngClass]=\"item.classes?.title\">\r\n          {{item.title}}\r\n        </span>\r\n      </div>\r\n      @if (item.subTitle) {\r\n        <div class=\"cmat-vertical-navigation-item-subtitle\">\r\n          <span [ngClass]=\"item.classes?.subtitle\">\r\n            {{item.subTitle}}\r\n          </span>\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    <!-- Badge -->\r\n    @if (item.badge) {\r\n      <div class=\"cmat-vertical-navigation-item-badge\">\r\n        <div class=\"cmat-vertical-navigation-item-badge-content\" [ngClass]=\"item.badge.classes\">\r\n          {{item.badge.title}}\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n  </div>\r\n\r\n</div>\r\n\r\n@for (item of item.children; track trackByFn($index, item)) {\r\n  <!-- Skip the hidden items -->\r\n  @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\r\n    <!-- Basic -->\r\n    @if (item.type === 'basic') {\r\n      <cmat-vertical-navigation-basic-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-basic-item>\r\n    }\r\n    <!-- Collapsable -->\r\n    @if (item.type === 'collapsable') {\r\n      <cmat-vertical-navigation-collapsable-item [item]=\"item\" [name]=\"name\" [autoCollapse]=\"autoCollapse\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\r\n      </cmat-vertical-navigation-collapsable-item>\r\n    }\r\n    <!-- Divider -->\r\n    @if (item.type === 'divider') {\r\n      <cmat-vertical-navigation-divider-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-divider-item>\r\n    }\r\n    <!-- Group -->\r\n    @if (item.type === 'group') {\r\n      <cmat-vertical-navigation-group-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-group-item>\r\n    }\r\n    <!-- Spacer -->\r\n    @if (item.type === 'spacer') {\r\n      <cmat-vertical-navigation-spacer-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-spacer-item>\r\n    }\r\n  }\r\n}", dependencies: [{ kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationGroupItemComponent), selector: "cmat-vertical-navigation-group-item", inputs: ["autoCollapse", "item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatIconModule) }, { kind: "component", type: i0.forwardRef(() => i4.MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationBasicItemComponent), selector: "cmat-vertical-navigation-basic-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationDividerItemComponent), selector: "cmat-vertical-navigation-divider-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationCollapsableItemComponent), selector: "cmat-vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationSpacerItemComponent), selector: "cmat-vertical-navigation-spacer-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: CmatVerticalNavigationGroupItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: CmatVerticalNavigationGroupItemComponent, isStandalone: true, selector: "cmat-vertical-navigation-group-item", inputs: { autoCollapse: "autoCollapse", item: "item", name: "name", editState: "editState" }, outputs: { editSelectedItemChanged: "editSelectedItemChanged" }, ngImport: i0, template: "<!-- Item wrapper -->\r\n<div class=\"cmat-vertical-navigation-item-wrapper\" role=\"presentation\"\r\n  [class.cmat-vertical-navigation-item-has-subtitle]=\"!!item.subTitle\" [ngClass]=\"item.classes?.wrapper\" (click)=\"selectItem(item);\">\r\n\r\n  <div class=\"cmat-vertical-navigation-item\">\r\n\r\n    <!-- Icon -->\r\n    @if (item.icon) {\r\n      <mat-icon class=\"cmat-vertical-navigation-item-icon\" [ngClass]=\"item.classes?.icon\" [svgIcon]=\"item.icon\">\r\n      </mat-icon>\r\n    }\r\n\r\n    <!-- Title & Subtitle -->\r\n    <div class=\"cmat-vertical-navigation-item-title-wrapper\">\r\n      <div class=\"cmat-vertical-navigation-item-title\">\r\n        <span [ngClass]=\"item.classes?.title\">\r\n          {{item.title}}\r\n        </span>\r\n      </div>\r\n      @if (item.subTitle) {\r\n        <div class=\"cmat-vertical-navigation-item-subtitle\">\r\n          <span [ngClass]=\"item.classes?.subtitle\">\r\n            {{item.subTitle}}\r\n          </span>\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    <!-- Badge -->\r\n    @if (item.badge) {\r\n      <div class=\"cmat-vertical-navigation-item-badge\">\r\n        <div class=\"cmat-vertical-navigation-item-badge-content\" [ngClass]=\"item.badge.classes\">\r\n          {{item.badge.title}}\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n  </div>\r\n\r\n</div>\r\n\r\n@for (item of item.children; track trackByFn($index, item)) {\r\n  <!-- Skip the hidden items -->\r\n  @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\r\n    <!-- Basic -->\r\n    @if (item.type === 'basic') {\r\n      <cmat-vertical-navigation-basic-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-basic-item>\r\n    }\r\n    <!-- Collapsable -->\r\n    @if (item.type === 'collapsable') {\r\n      <cmat-vertical-navigation-collapsable-item [item]=\"item\" [name]=\"name\" [autoCollapse]=\"autoCollapse\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\r\n      </cmat-vertical-navigation-collapsable-item>\r\n    }\r\n    <!-- Divider -->\r\n    @if (item.type === 'divider') {\r\n      <cmat-vertical-navigation-divider-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-divider-item>\r\n    }\r\n    <!-- Group -->\r\n    @if (item.type === 'group') {\r\n      <cmat-vertical-navigation-group-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-group-item>\r\n    }\r\n    <!-- Spacer -->\r\n    @if (item.type === 'spacer') {\r\n      <cmat-vertical-navigation-spacer-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-spacer-item>\r\n    }\r\n  }\r\n}", dependencies: [{ kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationGroupItemComponent), selector: "cmat-vertical-navigation-group-item", inputs: ["autoCollapse", "item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatIconModule) }, { kind: "component", type: i0.forwardRef(() => i2.MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationBasicItemComponent), selector: "cmat-vertical-navigation-basic-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationDividerItemComponent), selector: "cmat-vertical-navigation-divider-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationCollapsableItemComponent), selector: "cmat-vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationSpacerItemComponent), selector: "cmat-vertical-navigation-spacer-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: CmatVerticalNavigationGroupItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: CmatVerticalNavigationGroupItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-vertical-navigation-group-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, MatIconModule, CmatVerticalNavigationBasicItemComponent,
                         CmatVerticalNavigationDividerItemComponent, forwardRef(() => CmatVerticalNavigationGroupItemComponent),
                         forwardRef(() => CmatVerticalNavigationCollapsableItemComponent), CmatVerticalNavigationSpacerItemComponent], template: "<!-- Item wrapper -->\r\n<div class=\"cmat-vertical-navigation-item-wrapper\" role=\"presentation\"\r\n  [class.cmat-vertical-navigation-item-has-subtitle]=\"!!item.subTitle\" [ngClass]=\"item.classes?.wrapper\" (click)=\"selectItem(item);\">\r\n\r\n  <div class=\"cmat-vertical-navigation-item\">\r\n\r\n    <!-- Icon -->\r\n    @if (item.icon) {\r\n      <mat-icon class=\"cmat-vertical-navigation-item-icon\" [ngClass]=\"item.classes?.icon\" [svgIcon]=\"item.icon\">\r\n      </mat-icon>\r\n    }\r\n\r\n    <!-- Title & Subtitle -->\r\n    <div class=\"cmat-vertical-navigation-item-title-wrapper\">\r\n      <div class=\"cmat-vertical-navigation-item-title\">\r\n        <span [ngClass]=\"item.classes?.title\">\r\n          {{item.title}}\r\n        </span>\r\n      </div>\r\n      @if (item.subTitle) {\r\n        <div class=\"cmat-vertical-navigation-item-subtitle\">\r\n          <span [ngClass]=\"item.classes?.subtitle\">\r\n            {{item.subTitle}}\r\n          </span>\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    <!-- Badge -->\r\n    @if (item.badge) {\r\n      <div class=\"cmat-vertical-navigation-item-badge\">\r\n        <div class=\"cmat-vertical-navigation-item-badge-content\" [ngClass]=\"item.badge.classes\">\r\n          {{item.badge.title}}\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n  </div>\r\n\r\n</div>\r\n\r\n@for (item of item.children; track trackByFn($index, item)) {\r\n  <!-- Skip the hidden items -->\r\n  @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\r\n    <!-- Basic -->\r\n    @if (item.type === 'basic') {\r\n      <cmat-vertical-navigation-basic-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-basic-item>\r\n    }\r\n    <!-- Collapsable -->\r\n    @if (item.type === 'collapsable') {\r\n      <cmat-vertical-navigation-collapsable-item [item]=\"item\" [name]=\"name\" [autoCollapse]=\"autoCollapse\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\r\n      </cmat-vertical-navigation-collapsable-item>\r\n    }\r\n    <!-- Divider -->\r\n    @if (item.type === 'divider') {\r\n      <cmat-vertical-navigation-divider-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-divider-item>\r\n    }\r\n    <!-- Group -->\r\n    @if (item.type === 'group') {\r\n      <cmat-vertical-navigation-group-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-group-item>\r\n    }\r\n    <!-- Spacer -->\r\n    @if (item.type === 'spacer') {\r\n      <cmat-vertical-navigation-spacer-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-spacer-item>\r\n    }\r\n  }\r\n}" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: CmatNavigationService }], propDecorators: { autoCollapse: [{
+        }], propDecorators: { autoCollapse: [{
                 type: Input
             }], item: [{
                 type: Input
@@ -655,14 +652,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
             }] } });
 
 class CmatVerticalNavigationCollapsableItemComponent {
-    constructor(_changeDetectorRef, _router, _cmatNavigationService) {
-        this._changeDetectorRef = _changeDetectorRef;
-        this._router = _router;
-        this._cmatNavigationService = _cmatNavigationService;
+    constructor() {
         this.editState = false;
         this.editSelectedItemChanged = new EventEmitter();
         this.isCollapsed = true;
         this.isExpanded = false;
+        this._changeDetectorRef = inject(ChangeDetectorRef);
+        this._router = inject(Router);
+        this._cmatNavigationService = inject(CmatNavigationService);
         this._unsubscribeAll = new Subject();
     }
     // -----------------------------------------------------------------------------------------------------
@@ -891,15 +888,15 @@ class CmatVerticalNavigationCollapsableItemComponent {
         }
         return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: CmatVerticalNavigationCollapsableItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.Router }, { token: CmatNavigationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: CmatVerticalNavigationCollapsableItemComponent, isStandalone: true, selector: "cmat-vertical-navigation-collapsable-item", inputs: { autoCollapse: "autoCollapse", item: "item", name: "name", editState: "editState" }, outputs: { editSelectedItemChanged: "editSelectedItemChanged" }, host: { properties: { "class": "this.classList" } }, ngImport: i0, template: "<div class=\"cmat-vertical-navigation-item-wrapper\" [class.cmat-vertical-navigation-item-has-subtitle]=\"!!item.subTitle\"\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    @if (item.icon) {\r\n      <mat-icon class=\"cmat-vertical-navigation-item-icon\" [ngClass]=\"item.classes?.icon\" [svgIcon]=\"item.icon\">\r\n      </mat-icon>\r\n    }\r\n\r\n    <!-- Title & Subtitle -->\r\n    <div class=\"cmat-vertical-navigation-item-title-wrapper\">\r\n      <div class=\"cmat-vertical-navigation-item-title\">\r\n        <span [ngClass]=\"item.classes?.title\">\r\n          {{item.title}}\r\n        </span>\r\n      </div>\r\n      @if (item.subTitle) {\r\n        <div class=\"cmat-vertical-navigation-item-subtitle\">\r\n          <span [ngClass]=\"item.classes?.subtitle\">\r\n            {{item.subTitle}}\r\n          </span>\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    <!-- Badge -->\r\n    @if (item.badge) {\r\n      <div class=\"cmat-vertical-navigation-item-badge\">\r\n        <div class=\"cmat-vertical-navigation-item-badge-content\" [ngClass]=\"item.badge.classes\">\r\n          {{item.badge.title}}\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n    <!-- Arrow -->\r\n    <mat-icon class=\"cmat-vertical-navigation-item-arrow icon-size-4\" [svgIcon]=\"'heroicons_outline:chevron-right'\">\r\n    </mat-icon>\r\n\r\n  </div>\r\n\r\n</div>\r\n\r\n@if (!isCollapsed) {\r\n  <div @expandCollapse class=\"cmat-vertical-navigation-item-children\">\r\n    @for (item of item.children; track trackByFn($index, item)) {\r\n      <!-- Skip the hidden items -->\r\n      @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\r\n        <!-- Basic -->\r\n        @if (item.type === 'basic') {\r\n          <cmat-vertical-navigation-basic-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-basic-item>\r\n        }\r\n        <!-- Collapsable -->\r\n        @if (item.type === 'collapsable') {\r\n          <cmat-vertical-navigation-collapsable-item [item]=\"item\" [name]=\"name\" [autoCollapse]=\"autoCollapse\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\r\n          </cmat-vertical-navigation-collapsable-item>\r\n        }\r\n        <!-- Divider -->\r\n        @if (item.type === 'divider') {\r\n          <cmat-vertical-navigation-divider-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\r\n          </cmat-vertical-navigation-divider-item>\r\n        }\r\n        <!-- Group -->\r\n        @if (item.type === 'group') {\r\n          <cmat-vertical-navigation-group-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-group-item>\r\n        }\r\n        <!-- Spacer -->\r\n        @if (item.type === 'spacer') {\r\n          <cmat-vertical-navigation-spacer-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\r\n          </cmat-vertical-navigation-spacer-item>\r\n        }\r\n      }\r\n    }\r\n  </div>\r\n}", dependencies: [{ kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationCollapsableItemComponent), selector: "cmat-vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatTooltipModule) }, { kind: "directive", type: i0.forwardRef(() => i3.MatTooltip), selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatIconModule) }, { kind: "component", type: i0.forwardRef(() => i4.MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationBasicItemComponent), selector: "cmat-vertical-navigation-basic-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationGroupItemComponent), selector: "cmat-vertical-navigation-group-item", inputs: ["autoCollapse", "item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationDividerItemComponent), selector: "cmat-vertical-navigation-divider-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationSpacerItemComponent), selector: "cmat-vertical-navigation-spacer-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }], animations: cmatAnimations, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: CmatVerticalNavigationCollapsableItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: CmatVerticalNavigationCollapsableItemComponent, isStandalone: true, selector: "cmat-vertical-navigation-collapsable-item", inputs: { autoCollapse: "autoCollapse", item: "item", name: "name", editState: "editState" }, outputs: { editSelectedItemChanged: "editSelectedItemChanged" }, host: { properties: { "class": "this.classList" } }, ngImport: i0, template: "<div class=\"cmat-vertical-navigation-item-wrapper\" [class.cmat-vertical-navigation-item-has-subtitle]=\"!!item.subTitle\"\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    @if (item.icon) {\r\n      <mat-icon class=\"cmat-vertical-navigation-item-icon\" [ngClass]=\"item.classes?.icon\" [svgIcon]=\"item.icon\">\r\n      </mat-icon>\r\n    }\r\n\r\n    <!-- Title & Subtitle -->\r\n    <div class=\"cmat-vertical-navigation-item-title-wrapper\">\r\n      <div class=\"cmat-vertical-navigation-item-title\">\r\n        <span [ngClass]=\"item.classes?.title\">\r\n          {{item.title}}\r\n        </span>\r\n      </div>\r\n      @if (item.subTitle) {\r\n        <div class=\"cmat-vertical-navigation-item-subtitle\">\r\n          <span [ngClass]=\"item.classes?.subtitle\">\r\n            {{item.subTitle}}\r\n          </span>\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    <!-- Badge -->\r\n    @if (item.badge) {\r\n      <div class=\"cmat-vertical-navigation-item-badge\">\r\n        <div class=\"cmat-vertical-navigation-item-badge-content\" [ngClass]=\"item.badge.classes\">\r\n          {{item.badge.title}}\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n    <!-- Arrow -->\r\n    <mat-icon class=\"cmat-vertical-navigation-item-arrow icon-size-4\" [svgIcon]=\"'heroicons_outline:chevron-right'\">\r\n    </mat-icon>\r\n\r\n  </div>\r\n\r\n</div>\r\n\r\n@if (!isCollapsed) {\r\n  <div @expandCollapse class=\"cmat-vertical-navigation-item-children\">\r\n    @for (item of item.children; track trackByFn($index, item)) {\r\n      <!-- Skip the hidden items -->\r\n      @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\r\n        <!-- Basic -->\r\n        @if (item.type === 'basic') {\r\n          <cmat-vertical-navigation-basic-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-basic-item>\r\n        }\r\n        <!-- Collapsable -->\r\n        @if (item.type === 'collapsable') {\r\n          <cmat-vertical-navigation-collapsable-item [item]=\"item\" [name]=\"name\" [autoCollapse]=\"autoCollapse\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\r\n          </cmat-vertical-navigation-collapsable-item>\r\n        }\r\n        <!-- Divider -->\r\n        @if (item.type === 'divider') {\r\n          <cmat-vertical-navigation-divider-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\r\n          </cmat-vertical-navigation-divider-item>\r\n        }\r\n        <!-- Group -->\r\n        @if (item.type === 'group') {\r\n          <cmat-vertical-navigation-group-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-group-item>\r\n        }\r\n        <!-- Spacer -->\r\n        @if (item.type === 'spacer') {\r\n          <cmat-vertical-navigation-spacer-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\r\n          </cmat-vertical-navigation-spacer-item>\r\n        }\r\n      }\r\n    }\r\n  </div>\r\n}", dependencies: [{ kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationCollapsableItemComponent), selector: "cmat-vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatTooltipModule) }, { kind: "directive", type: i0.forwardRef(() => i1.MatTooltip), selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatIconModule) }, { kind: "component", type: i0.forwardRef(() => i2.MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationBasicItemComponent), selector: "cmat-vertical-navigation-basic-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationGroupItemComponent), selector: "cmat-vertical-navigation-group-item", inputs: ["autoCollapse", "item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationDividerItemComponent), selector: "cmat-vertical-navigation-divider-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationSpacerItemComponent), selector: "cmat-vertical-navigation-spacer-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }], animations: cmatAnimations, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: CmatVerticalNavigationCollapsableItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: CmatVerticalNavigationCollapsableItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-vertical-navigation-collapsable-item', animations: cmatAnimations, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, MatTooltipModule, MatIconModule, CmatVerticalNavigationBasicItemComponent,
                         forwardRef(() => CmatVerticalNavigationCollapsableItemComponent),
                         forwardRef(() => CmatVerticalNavigationGroupItemComponent), CmatVerticalNavigationDividerItemComponent, CmatVerticalNavigationSpacerItemComponent], template: "<div class=\"cmat-vertical-navigation-item-wrapper\" [class.cmat-vertical-navigation-item-has-subtitle]=\"!!item.subTitle\"\r\n  [ngClass]=\"item.classes?.wrapper\">\r\n\r\n  <div class=\"cmat-vertical-navigation-item\" role=\"presentation\" [ngClass]=\"{'cmat-vertical-navigation-item-disabled': item.disabled}\"\r\n    [matTooltip]=\"item.tooltip || ''\" (click)=\"toggleCollapsable();selectItem(item);\">\r\n\r\n    <!-- Icon -->\r\n    @if (item.icon) {\r\n      <mat-icon class=\"cmat-vertical-navigation-item-icon\" [ngClass]=\"item.classes?.icon\" [svgIcon]=\"item.icon\">\r\n      </mat-icon>\r\n    }\r\n\r\n    <!-- Title & Subtitle -->\r\n    <div class=\"cmat-vertical-navigation-item-title-wrapper\">\r\n      <div class=\"cmat-vertical-navigation-item-title\">\r\n        <span [ngClass]=\"item.classes?.title\">\r\n          {{item.title}}\r\n        </span>\r\n      </div>\r\n      @if (item.subTitle) {\r\n        <div class=\"cmat-vertical-navigation-item-subtitle\">\r\n          <span [ngClass]=\"item.classes?.subtitle\">\r\n            {{item.subTitle}}\r\n          </span>\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    <!-- Badge -->\r\n    @if (item.badge) {\r\n      <div class=\"cmat-vertical-navigation-item-badge\">\r\n        <div class=\"cmat-vertical-navigation-item-badge-content\" [ngClass]=\"item.badge.classes\">\r\n          {{item.badge.title}}\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n    <!-- Arrow -->\r\n    <mat-icon class=\"cmat-vertical-navigation-item-arrow icon-size-4\" [svgIcon]=\"'heroicons_outline:chevron-right'\">\r\n    </mat-icon>\r\n\r\n  </div>\r\n\r\n</div>\r\n\r\n@if (!isCollapsed) {\r\n  <div @expandCollapse class=\"cmat-vertical-navigation-item-children\">\r\n    @for (item of item.children; track trackByFn($index, item)) {\r\n      <!-- Skip the hidden items -->\r\n      @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\r\n        <!-- Basic -->\r\n        @if (item.type === 'basic') {\r\n          <cmat-vertical-navigation-basic-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-basic-item>\r\n        }\r\n        <!-- Collapsable -->\r\n        @if (item.type === 'collapsable') {\r\n          <cmat-vertical-navigation-collapsable-item [item]=\"item\" [name]=\"name\" [autoCollapse]=\"autoCollapse\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\r\n          </cmat-vertical-navigation-collapsable-item>\r\n        }\r\n        <!-- Divider -->\r\n        @if (item.type === 'divider') {\r\n          <cmat-vertical-navigation-divider-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\r\n          </cmat-vertical-navigation-divider-item>\r\n        }\r\n        <!-- Group -->\r\n        @if (item.type === 'group') {\r\n          <cmat-vertical-navigation-group-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-group-item>\r\n        }\r\n        <!-- Spacer -->\r\n        @if (item.type === 'spacer') {\r\n          <cmat-vertical-navigation-spacer-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\r\n          </cmat-vertical-navigation-spacer-item>\r\n        }\r\n      }\r\n    }\r\n  </div>\r\n}" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.Router }, { type: CmatNavigationService }], propDecorators: { autoCollapse: [{
+        }], propDecorators: { autoCollapse: [{
                 type: Input
             }], item: [{
                 type: Input
@@ -915,13 +912,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
             }] } });
 
 class CmatVerticalNavigationAsideItemComponent {
-    constructor(_changeDetectorRef, _router, _cmatNavigationService) {
-        this._changeDetectorRef = _changeDetectorRef;
-        this._router = _router;
-        this._cmatNavigationService = _cmatNavigationService;
+    constructor() {
         this.editState = false;
         this.editSelectedItemChanged = new EventEmitter();
         this.active = false;
+        this._changeDetectorRef = inject(ChangeDetectorRef);
+        this._router = inject(Router);
+        this._cmatNavigationService = inject(CmatNavigationService);
         this._unsubscribeAll = new Subject();
     }
     // -----------------------------------------------------------------------------------------------------
@@ -1035,15 +1032,15 @@ class CmatVerticalNavigationAsideItemComponent {
         // Mark for check
         this._changeDetectorRef.markForCheck();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: CmatVerticalNavigationAsideItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.Router }, { token: CmatNavigationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: CmatVerticalNavigationAsideItemComponent, isStandalone: true, selector: "cmat-vertical-navigation-aside-item", inputs: { activeItemId: "activeItemId", autoCollapse: "autoCollapse", item: "item", name: "name", skipChildren: "skipChildren", editState: "editState" }, outputs: { editSelectedItemChanged: "editSelectedItemChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cmat-vertical-navigation-item-wrapper\" role=\"presentation\"\r\n  [class.cmat-vertical-navigation-item-has-subtitle]=\"!!item.subTitle\" [ngClass]=\"item.classes?.wrapper\" (click)=\"selectItem(item);\">\r\n\r\n    <div class=\"cmat-vertical-navigation-item\" [ngClass]=\"{'cmat-vertical-navigation-item-active': active,\r\n                    'cmat-vertical-navigation-item-disabled': item.disabled,\r\n                    'cmat-vertical-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\">\r\n\r\n    <!-- Icon -->\r\n    @if (item.icon) {\r\n      <mat-icon class=\"cmat-vertical-navigation-item-icon\" [ngClass]=\"item.classes?.icon\" [svgIcon]=\"item.icon\">\r\n      </mat-icon>\r\n    }\r\n\r\n    <!-- Title & Subtitle -->\r\n    <div class=\"cmat-vertical-navigation-item-title-wrapper\">\r\n      <div class=\"cmat-vertical-navigation-item-title\">\r\n        <span [ngClass]=\"item.classes?.title\">\r\n          {{item.title}}\r\n        </span>\r\n      </div>\r\n      @if (item.subTitle) {\r\n        <div class=\"cmat-vertical-navigation-item-subtitle\">\r\n          <span [ngClass]=\"item.classes?.subtitle\">\r\n            {{item.subTitle}}\r\n          </span>\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    <!-- Badge -->\r\n    @if (item.badge) {\r\n      <div class=\"cmat-vertical-navigation-item-badge\">\r\n        <div class=\"cmat-vertical-navigation-item-badge-content\" [ngClass]=\"item.badge.classes\">\r\n          {{item.badge.title}}\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n  </div>\r\n\r\n</div>\r\n\r\n@if (!skipChildren) {\r\n  <div class=\"cmat-vertical-navigation-item-children\">\r\n    @for (item of item.children; track trackByFn($index, item)) {\r\n      <!-- Skip the hidden items -->\r\n      @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\r\n        <!-- Basic -->\r\n        @if (item.type === 'basic') {\r\n          <cmat-vertical-navigation-basic-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\r\n          </cmat-vertical-navigation-basic-item>\r\n        }\r\n        <!-- Collapsable -->\r\n        @if (item.type === 'collapsable') {\r\n          <cmat-vertical-navigation-collapsable-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" [autoCollapse]=\"autoCollapse\"\r\n          (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-collapsable-item>\r\n        }\r\n        <!-- Divider -->\r\n        @if (item.type === 'divider') {\r\n          <cmat-vertical-navigation-divider-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\r\n          </cmat-vertical-navigation-divider-item>\r\n        }\r\n        <!-- Group -->\r\n        @if (item.type === 'group') {\r\n          <cmat-vertical-navigation-group-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\r\n          </cmat-vertical-navigation-group-item>\r\n        }\r\n        <!-- Spacer -->\r\n        @if (item.type === 'spacer') {\r\n          <cmat-vertical-navigation-spacer-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\r\n          </cmat-vertical-navigation-spacer-item>\r\n        }\r\n      }\r\n    }\r\n  </div>\r\n}", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: CmatVerticalNavigationBasicItemComponent, selector: "cmat-vertical-navigation-basic-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationCollapsableItemComponent, selector: "cmat-vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationDividerItemComponent, selector: "cmat-vertical-navigation-divider-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationGroupItemComponent, selector: "cmat-vertical-navigation-group-item", inputs: ["autoCollapse", "item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationSpacerItemComponent, selector: "cmat-vertical-navigation-spacer-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: CmatVerticalNavigationAsideItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: CmatVerticalNavigationAsideItemComponent, isStandalone: true, selector: "cmat-vertical-navigation-aside-item", inputs: { activeItemId: "activeItemId", autoCollapse: "autoCollapse", item: "item", name: "name", skipChildren: "skipChildren", editState: "editState" }, outputs: { editSelectedItemChanged: "editSelectedItemChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cmat-vertical-navigation-item-wrapper\" role=\"presentation\"\r\n  [class.cmat-vertical-navigation-item-has-subtitle]=\"!!item.subTitle\" [ngClass]=\"item.classes?.wrapper\" (click)=\"selectItem(item);\">\r\n\r\n    <div class=\"cmat-vertical-navigation-item\" [ngClass]=\"{'cmat-vertical-navigation-item-active': active,\r\n                    'cmat-vertical-navigation-item-disabled': item.disabled,\r\n                    'cmat-vertical-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\">\r\n\r\n    <!-- Icon -->\r\n    @if (item.icon) {\r\n      <mat-icon class=\"cmat-vertical-navigation-item-icon\" [ngClass]=\"item.classes?.icon\" [svgIcon]=\"item.icon\">\r\n      </mat-icon>\r\n    }\r\n\r\n    <!-- Title & Subtitle -->\r\n    <div class=\"cmat-vertical-navigation-item-title-wrapper\">\r\n      <div class=\"cmat-vertical-navigation-item-title\">\r\n        <span [ngClass]=\"item.classes?.title\">\r\n          {{item.title}}\r\n        </span>\r\n      </div>\r\n      @if (item.subTitle) {\r\n        <div class=\"cmat-vertical-navigation-item-subtitle\">\r\n          <span [ngClass]=\"item.classes?.subtitle\">\r\n            {{item.subTitle}}\r\n          </span>\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    <!-- Badge -->\r\n    @if (item.badge) {\r\n      <div class=\"cmat-vertical-navigation-item-badge\">\r\n        <div class=\"cmat-vertical-navigation-item-badge-content\" [ngClass]=\"item.badge.classes\">\r\n          {{item.badge.title}}\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n  </div>\r\n\r\n</div>\r\n\r\n@if (!skipChildren) {\r\n  <div class=\"cmat-vertical-navigation-item-children\">\r\n    @for (item of item.children; track trackByFn($index, item)) {\r\n      <!-- Skip the hidden items -->\r\n      @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\r\n        <!-- Basic -->\r\n        @if (item.type === 'basic') {\r\n          <cmat-vertical-navigation-basic-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\r\n          </cmat-vertical-navigation-basic-item>\r\n        }\r\n        <!-- Collapsable -->\r\n        @if (item.type === 'collapsable') {\r\n          <cmat-vertical-navigation-collapsable-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" [autoCollapse]=\"autoCollapse\"\r\n          (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-collapsable-item>\r\n        }\r\n        <!-- Divider -->\r\n        @if (item.type === 'divider') {\r\n          <cmat-vertical-navigation-divider-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\r\n          </cmat-vertical-navigation-divider-item>\r\n        }\r\n        <!-- Group -->\r\n        @if (item.type === 'group') {\r\n          <cmat-vertical-navigation-group-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\r\n          </cmat-vertical-navigation-group-item>\r\n        }\r\n        <!-- Spacer -->\r\n        @if (item.type === 'spacer') {\r\n          <cmat-vertical-navigation-spacer-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\r\n          </cmat-vertical-navigation-spacer-item>\r\n        }\r\n      }\r\n    }\r\n  </div>\r\n}", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: CmatVerticalNavigationBasicItemComponent, selector: "cmat-vertical-navigation-basic-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationCollapsableItemComponent, selector: "cmat-vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationDividerItemComponent, selector: "cmat-vertical-navigation-divider-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationGroupItemComponent, selector: "cmat-vertical-navigation-group-item", inputs: ["autoCollapse", "item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationSpacerItemComponent, selector: "cmat-vertical-navigation-spacer-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: CmatVerticalNavigationAsideItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: CmatVerticalNavigationAsideItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-vertical-navigation-aside-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, MatTooltipModule, MatIconModule, CmatVerticalNavigationBasicItemComponent,
                         CmatVerticalNavigationCollapsableItemComponent, CmatVerticalNavigationDividerItemComponent,
                         CmatVerticalNavigationGroupItemComponent, CmatVerticalNavigationSpacerItemComponent], template: "<div class=\"cmat-vertical-navigation-item-wrapper\" role=\"presentation\"\r\n  [class.cmat-vertical-navigation-item-has-subtitle]=\"!!item.subTitle\" [ngClass]=\"item.classes?.wrapper\" (click)=\"selectItem(item);\">\r\n\r\n    <div class=\"cmat-vertical-navigation-item\" [ngClass]=\"{'cmat-vertical-navigation-item-active': active,\r\n                    'cmat-vertical-navigation-item-disabled': item.disabled,\r\n                    'cmat-vertical-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\">\r\n\r\n    <!-- Icon -->\r\n    @if (item.icon) {\r\n      <mat-icon class=\"cmat-vertical-navigation-item-icon\" [ngClass]=\"item.classes?.icon\" [svgIcon]=\"item.icon\">\r\n      </mat-icon>\r\n    }\r\n\r\n    <!-- Title & Subtitle -->\r\n    <div class=\"cmat-vertical-navigation-item-title-wrapper\">\r\n      <div class=\"cmat-vertical-navigation-item-title\">\r\n        <span [ngClass]=\"item.classes?.title\">\r\n          {{item.title}}\r\n        </span>\r\n      </div>\r\n      @if (item.subTitle) {\r\n        <div class=\"cmat-vertical-navigation-item-subtitle\">\r\n          <span [ngClass]=\"item.classes?.subtitle\">\r\n            {{item.subTitle}}\r\n          </span>\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    <!-- Badge -->\r\n    @if (item.badge) {\r\n      <div class=\"cmat-vertical-navigation-item-badge\">\r\n        <div class=\"cmat-vertical-navigation-item-badge-content\" [ngClass]=\"item.badge.classes\">\r\n          {{item.badge.title}}\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n  </div>\r\n\r\n</div>\r\n\r\n@if (!skipChildren) {\r\n  <div class=\"cmat-vertical-navigation-item-children\">\r\n    @for (item of item.children; track trackByFn($index, item)) {\r\n      <!-- Skip the hidden items -->\r\n      @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\r\n        <!-- Basic -->\r\n        @if (item.type === 'basic') {\r\n          <cmat-vertical-navigation-basic-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\r\n          </cmat-vertical-navigation-basic-item>\r\n        }\r\n        <!-- Collapsable -->\r\n        @if (item.type === 'collapsable') {\r\n          <cmat-vertical-navigation-collapsable-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" [autoCollapse]=\"autoCollapse\"\r\n          (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-collapsable-item>\r\n        }\r\n        <!-- Divider -->\r\n        @if (item.type === 'divider') {\r\n          <cmat-vertical-navigation-divider-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\r\n          </cmat-vertical-navigation-divider-item>\r\n        }\r\n        <!-- Group -->\r\n        @if (item.type === 'group') {\r\n          <cmat-vertical-navigation-group-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\r\n          </cmat-vertical-navigation-group-item>\r\n        }\r\n        <!-- Spacer -->\r\n        @if (item.type === 'spacer') {\r\n          <cmat-vertical-navigation-spacer-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\r\n          </cmat-vertical-navigation-spacer-item>\r\n        }\r\n      }\r\n    }\r\n  </div>\r\n}" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.Router }, { type: CmatNavigationService }], propDecorators: { activeItemId: [{
+        }], propDecorators: { activeItemId: [{
                 type: Input
             }], autoCollapse: [{
                 type: Input
@@ -1060,22 +1057,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
             }] } });
 
 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;
+    constructor() {
         /* eslint-enable @typescript-eslint/naming-convention */
         this.appearance = 'default';
         this.autoCollapse = true;
         this.editState = false;
         this.inner = false;
         this.mode = 'side';
-        this.name = this._cmatUtilsService.randomId();
+        this.name = inject(CmatUtilsService).randomId();
         this.opened = true;
         this.position = 'left';
         this.transparentOverlay = false;
@@ -1088,6 +1077,13 @@ class CmatVerticalNavigationComponent {
         this.onCollapsableItemCollapsed = new ReplaySubject(1);
         this.onCollapsableItemExpanded = new ReplaySubject(1);
         this.onRefreshed = new ReplaySubject(1);
+        this._animationBuilder = inject(AnimationBuilder);
+        this._changeDetectorRef = inject(ChangeDetectorRef);
+        this._elementRef = inject(ElementRef);
+        this._renderer2 = inject(Renderer2);
+        this._router = inject(Router);
+        this._scrollStrategyOptions = inject(ScrollStrategyOptions);
+        this._cmatNavigationService = inject(CmatNavigationService);
         this._animationsEnabled = false;
         this._hovered = false;
         this._scrollStrategy = this._scrollStrategyOptions.block();
@@ -1238,7 +1234,7 @@ class CmatVerticalNavigationComponent {
     ngOnInit() {
         // Make sure the name input is not an empty string
         if (this.name === '') {
-            this.name = this._cmatUtilsService.randomId();
+            this.name = inject(CmatUtilsService).randomId();
         }
         // Register the navigation component
         this._cmatNavigationService.registerComponent(this.name, this);
@@ -1569,15 +1565,15 @@ class CmatVerticalNavigationComponent {
         // Execute the observable
         this.openedChanged.next(open);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.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: "17.0.0", version: "20.0.0", type: CmatVerticalNavigationComponent, isStandalone: true, selector: "cmat-vertical-navigation", inputs: { appearance: "appearance", autoCollapse: "autoCollapse", editState: "editState", inner: "inner", mode: "mode", name: "name", navigation: "navigation", opened: "opened", position: "position", transparentOverlay: "transparentOverlay" }, outputs: { appearanceChanged: "appearanceChanged", modeChanged: "modeChanged", openedChanged: "openedChanged", positionChanged: "positionChanged", editSelectedItemChanged: "editSelectedItemChanged" }, host: { listeners: { "mouseenter": "onMouseenter()", "mouseleave": "onMouseleave()" }, properties: { "class": "this.classList", "style": "this.styleList" } }, viewQueries: [{ propertyName: "_navigationContentEl", first: true, predicate: ["navigationContent"], descendants: true }], exportAs: ["cmatVerticalNavigation"], usesOnChanges: true, ngImport: i0, template: "<div class=\"cmat-vertical-navigation-wrapper\">\r\n\r\n  <!-- Header -->\r\n  <div class=\"cmat-vertical-navigation-header\">\r\n    <ng-content select=\"[cmatVerticalNavigationHeader]\"></ng-content>\r\n  </div>\r\n\r\n  <!-- Content -->\r\n  <div #navigationContent class=\"cmat-vertical-navigation-content py-2 overflow-y-auto scrollbar-custom\">\r\n\r\n    <!-- Content header -->\r\n    <div class=\"cmat-vertical-navigation-content-header\">\r\n      <ng-content select=\"[cmatVerticalNavigationContentHeader]\"></ng-content>\r\n    </div>\r\n\r\n    <!-- Items -->\r\n    @for (item of navigation; track trackByFn($index, item)) {\r\n      <!-- Skip the hidden items -->\r\n      @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\r\n        <!-- Aside -->\r\n        @if (item.type === 'aside') {\r\n          <cmat-vertical-navigation-aside-item [item]=\"item\" [name]=\"name\" [activeItemId]=\"activeAsideItemId\"\r\n            [autoCollapse]=\"autoCollapse\" [skipChildren]=\"true\" [editState]=\"editState\" (click)=\"toggleAside(item)\" (editSelectedItemChanged)=\"selectItem($event)\">\r\n          </cmat-vertical-navigation-aside-item>\r\n        }\r\n        <!-- Basic -->\r\n        @if (item.type === 'basic') {\r\n          <cmat-vertical-navigation-basic-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\r\n          </cmat-vertical-navigation-basic-item>\r\n        }\r\n        <!-- Collapsable -->\r\n        @if (item.type === 'collapsable') {\r\n          <cmat-vertical-navigation-collapsable-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" [autoCollapse]=\"autoCollapse\"\r\n          (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-collapsable-item>\r\n        }\r\n        <!-- Divider -->\r\n        @if (item.type === 'divider') {\r\n          <cmat-vertical-navigation-divider-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\r\n          </cmat-vertical-navigation-divider-item>\r\n        }\r\n        <!-- Group -->\r\n        @if (item.type === 'group') {\r\n          <cmat-vertical-navigation-group-item [item]=\"item\" [name]=\"name\" [autoCollapse]=\"autoCollapse\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\r\n          </cmat-vertical-navigation-group-item>\r\n        }\r\n        <!-- Spacer -->\r\n        @if (item.type === 'spacer') {\r\n          <cmat-vertical-navigation-spacer-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\r\n          </cmat-vertical-navigation-spacer-item>\r\n        }\r\n      }\r\n    }\r\n\r\n    <!-- Content footer -->\r\n    <div class=\"cmat-vertical-navigation-content-footer\">\r\n      <ng-content select=\"[cmatVerticalNavigationContentFooter]\"></ng-content>\r\n    </div>\r\n\r\n  </div>\r\n  <!-- Footer -->\r\n  <div class=\"cmat-vertical-navigation-footer\">\r\n    <ng-content select=\"[cmatVerticalNavigationFooter]\"></ng-content>\r\n  </div>\r\n\r\n</div>\r\n\r\n<!-- Aside -->\r\n@if (activeAsideItemId) {\r\n  <div class=\"cmat-vertical-navigation-aside-wrapper overflow-y-auto scrollbar-custom\"\r\n    [@fadeInLeft]=\"position === 'left'\" [@fadeInRight]=\"position === 'right'\" [@fadeOutLeft]=\"position === 'left'\"\r\n    [@fadeOutRight]=\"position === 'right'\">\r\n    <!-- Items -->\r\n    @for (item of navigation; track trackByFn($index, item)) {\r\n      <!-- Skip the hidden items -->\r\n      @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\r\n        <!-- Aside -->\r\n        @if (item.type === 'aside' && item.id === activeAsideItemId) {\r\n          <cmat-vertical-navigation-aside-item [item]=\"item\" [name]=\"name\" [autoCollapse]=\"autoCollapse\">\r\n          </cmat-vertical-navigation-aside-item>\r\n        }\r\n      }\r\n    }\r\n  </div>\r\n}", styles: ["cmat-vertical-navigation{position:sticky;display:flex;flex-direction:column;flex:1 0 auto;top:0;width:280px;min-width:280px;max-width:280px;height:100%;z-index:200}cmat-vertical-navigation.cmat-vertical-navigation-animations-enabled{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:visibility,margin-left,margin-right,transform,width,max-width,min-width}cmat-vertical-navigation.cmat-vertical-navigation-animations-enabled .cmat-vertical-navigation-wrapper{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:width,max-width,min-width}cmat-vertical-navigation.cmat-vertical-navigation-mode-over{position:fixed;top:0;bottom:0}cmat-vertical-navigation.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side{margin-left:-280px}cmat-vertical-navigation.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side.cmat-vertical-navigation-opened{margin-left:0}cmat-vertical-navigation.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-over{left:0;transform:translate3d(-100%,0,0)}cmat-vertical-navigation.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-over.cmat-vertical-navigation-opened{transform:translateZ(0)}cmat-vertical-navigation.cmat-vertical-navigation-position-left .cmat-vertical-navigation-wrapper{left:0}cmat-vertical-navigation.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side{margin-right:-280px}cmat-vertical-navigation.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side.cmat-vertical-navigation-opened{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-over{right:0;transform:translate3d(100%,0,0)}cmat-vertical-navigation.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-over.cmat-vertical-navigation-opened{transform:translateZ(0)}cmat-vertical-navigation.cmat-vertical-navigation-position-right .cmat-vertical-navigation-wrapper{right:0}cmat-vertical-navigation.cmat-vertical-navigation-inner{position:relative;width:auto;min-width:0;max-width:none;height:auto;min-height:0;max-height:none;box-shadow:none}cmat-vertical-navigation.cmat-vertical-navigation-inner .cmat-vertical-navigation-wrapper{position:relative;overflow:visible;height:auto}cmat-vertical-navigation.cmat-vertical-navigation-inner .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content{overflow:visible!important}cmat-vertical-navigation .cmat-vertical-navigation-wrapper{position:absolute;display:flex;flex:1 1 auto;flex-direction:column;top:0;bottom:0;width:100%;height:100%;overflow:hidden;z-index:10;background:inherit;box-shadow:inset -1px 0 0 var(--cmat-border)}cmat-vertical-navigation .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content{flex:1 1 auto;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}cmat-vertical-navigation .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-divider-item{margin:24px 0}cmat-vertical-navigation .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-group-item{margin-top:24px}cmat-vertical-navigation .cmat-vertical-navigation-aside-wrapper{position:absolute;display:flex;flex:1 1 auto;flex-direction:column;top:0;bottom:0;left:280px;width:280px;height:100%;z-index:5;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;transition-duration:.4s;transition-property:left,right;transition-timing-function:cubic-bezier(.25,.8,.25,1);background:inherit}cmat-vertical-navigation .cmat-vertical-navigation-aside-wrapper>cmat-vertical-navigation-aside-item{padding:24px 0}cmat-vertical-navigation .cmat-vertical-navigation-aside-wrapper>cmat-vertical-navigation-aside-item>.cmat-vertical-navigation-item-wrapper{display:none!important}cmat-vertical-navigation.cmat-vertical-navigation-position-right .cmat-vertical-navigation-aside-wrapper{left:auto;right:280px}cmat-vertical-navigation cmat-vertical-navigation-aside-item,cmat-vertical-navigation cmat-vertical-navigation-basic-item,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item,cmat-vertical-navigation cmat-vertical-navigation-divider-item,cmat-vertical-navigation cmat-vertical-navigation-group-item,cmat-vertical-navigation cmat-vertical-navigation-spacer-item{display:flex;flex-direction:column;flex:1 0 auto;-webkit-user-select:none;user-select:none}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{position:relative;display:flex;align-items:center;justify-content:flex-start;padding:10px 16px;font-size:13px;font-weight:500;line-height:20px;text-decoration:none;border-radius:6px}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled{cursor:default;opacity:.4}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon{margin-right:16px}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle{font-size:11px;line-height:1.5}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge{margin-left:auto}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content{display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;white-space:nowrap;height:20px}cmat-vertical-navigation cmat-vertical-navigation-aside-item>.cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation cmat-vertical-navigation-basic-item>.cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper{margin:0 12px}cmat-vertical-navigation cmat-vertical-navigation-aside-item,cmat-vertical-navigation cmat-vertical-navigation-basic-item,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item{margin-bottom:4px}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item{cursor:pointer}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge+.cmat-vertical-navigation-item-arrow{margin-left:8px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow{height:20px;line-height:20px;margin-left:auto;transition:transform .3s cubic-bezier(.25,.8,.25,1),color 375ms cubic-bezier(.25,.8,.25,1)}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item.cmat-vertical-navigation-item-expanded>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow{transform:rotate(90deg)}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-children{margin-top:6px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-children>*:last-child{padding-bottom:6px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-children>*:last-child>.cmat-vertical-navigation-item-children>*:last-child{padding-bottom:0}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding:10px 16px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children{overflow:hidden}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding-left:56px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding-left:72px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding-left:88px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding-left:104px}cmat-vertical-navigation cmat-vertical-navigation-divider-item{margin:12px 0}cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper{height:1px;box-shadow:0 1px}cmat-vertical-navigation cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon{display:none!important}cmat-vertical-navigation cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-title{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}cmat-vertical-navigation cmat-vertical-navigation-spacer-item{margin:6px 0}.cmat-vertical-navigation-overlay{position:absolute;inset:0;z-index:170;opacity:0;background-color:#0009}.cmat-vertical-navigation-overlay+.cmat-vertical-navigation-aside-overlay{background-color:transparent}.cmat-vertical-navigation-aside-overlay{position:absolute;inset:0;z-index:169;opacity:0;background-color:#0000004d}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact{width:112px;min-width:112px;max-width:112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side{margin-left:-112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-left.cmat-vertical-navigation-opened{margin-left:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side{margin-right:-112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-right.cmat-vertical-navigation-opened{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-right .cmat-vertical-navigation-aside-wrapper{left:auto;right:112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper{margin:4px 8px 0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{flex-direction:column;justify-content:center;padding:12px;border-radius:6px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{margin-top:8px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-title,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-title{font-size:12px;font-weight:500;text-align:center;line-height:16px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle{display:none!important}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge{position:absolute;top:12px;left:64px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item>cmat-vertical-navigation-collapsable-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item>cmat-vertical-navigation-collapsable-item{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item>cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item>cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-aside-wrapper{left:112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over){width:80px;min-width:80px;max-width:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side{margin-left:-80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-left.cmat-vertical-navigation-opened{margin-left:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side{margin-right:-80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-right.cmat-vertical-navigation-opened{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-right .cmat-vertical-navigation-aside-wrapper{left:auto;right:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-right.cmat-vertical-navigation-hover .cmat-vertical-navigation-aside-wrapper{left:auto;right:280px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{width:280px-24px;min-width:280px-24px;max-width:280px-24px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{transition:opacity .4s cubic-bezier(.25,.8,.25,1)}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item:first-of-type{margin-top:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{padding:10px 16px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{white-space:nowrap;opacity:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:before{content:\"\";position:absolute;top:20px;width:23px;border-top-width:2px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-aside-wrapper{left:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-wrapper{width:280px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{white-space:nowrap;animation:removeWhiteSpaceNoWrap 1ms linear .35s;animation-fill-mode:forwards}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-aside-wrapper{left:280px}@keyframes removeWhiteSpaceNoWrap{0%{white-space:nowrap}99%{white-space:nowrap}to{white-space:normal}}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin{width:80px;min-width:80px;max-width:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side{margin-left:-80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-left.cmat-vertical-navigation-opened{margin-left:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side{margin-right:-80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-right.cmat-vertical-navigation-opened{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-right .cmat-vertical-navigation-aside-wrapper{left:auto;right:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item{flex-direction:column;justify-content:center;height:64px;min-height:64px;max-height:64px;padding:0 16px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper{display:flex;align-items:center;justify-content:center}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{justify-content:center;padding:12px;border-radius:4px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon{margin:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-collapsable-item{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-aside-wrapper{left:80px}\n"], dependencies: [{ kind: "component", type: CmatVerticalNavigationAsideItemComponent, selector: "cmat-vertical-navigation-aside-item", inputs: ["activeItemId", "autoCollapse", "item", "name", "skipChildren", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationBasicItemComponent, selector: "cmat-vertical-navigation-basic-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationCollapsableItemComponent, selector: "cmat-vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationDividerItemComponent, selector: "cmat-vertical-navigation-divider-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationGroupItemComponent, selector: "cmat-vertical-navigation-group-item", inputs: ["autoCollapse", "item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationSpacerItemComponent, selector: "cmat-vertical-navigation-spacer-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }], animations: cmatAnimations, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: CmatVerticalNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: CmatVerticalNavigationComponent, isStandalone: true, selector: "cmat-vertical-navigation", inputs: { appearance: "appearance", autoCollapse: "autoCollapse", editState: "editState", inner: "inner", mode: "mode", name: "name", navigation: "navigation", opened: "opened", position: "position", transparentOverlay: "transparentOverlay" }, outputs: { appearanceChanged: "appearanceChanged", modeChanged: "modeChanged", openedChanged: "openedChanged", positionChanged: "positionChanged", editSelectedItemChanged: "editSelectedItemChanged" }, host: { listeners: { "mouseenter": "onMouseenter()", "mouseleave": "onMouseleave()" }, properties: { "class": "this.classList", "style": "this.styleList" } }, viewQueries: [{ propertyName: "_navigationContentEl", first: true, predicate: ["navigationContent"], descendants: true }], exportAs: ["cmatVerticalNavigation"], usesOnChanges: true, ngImport: i0, template: "<div class=\"cmat-vertical-navigation-wrapper\">\r\n\r\n  <!-- Header -->\r\n  <div class=\"cmat-vertical-navigation-header\">\r\n    <ng-content select=\"[cmatVerticalNavigationHeader]\"></ng-content>\r\n  </div>\r\n\r\n  <!-- Content -->\r\n  <div #navigationContent class=\"cmat-vertical-navigation-content py-2 overflow-y-auto scrollbar-custom\">\r\n\r\n    <!-- Content header -->\r\n    <div class=\"cmat-vertical-navigation-content-header\">\r\n      <ng-content select=\"[cmatVerticalNavigationContentHeader]\"></ng-content>\r\n    </div>\r\n\r\n    <!-- Items -->\r\n    @for (item of navigation; track trackByFn($index, item)) {\r\n      <!-- Skip the hidden items -->\r\n      @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\r\n        <!-- Aside -->\r\n        @if (item.type === 'aside') {\r\n          <cmat-vertical-navigation-aside-item [item]=\"item\" [name]=\"name\" [activeItemId]=\"activeAsideItemId\"\r\n            [autoCollapse]=\"autoCollapse\" [skipChildren]=\"true\" [editState]=\"editState\" (click)=\"toggleAside(item)\" (editSelectedItemChanged)=\"selectItem($event)\">\r\n          </cmat-vertical-navigation-aside-item>\r\n        }\r\n        <!-- Basic -->\r\n        @if (item.type === 'basic') {\r\n          <cmat-vertical-navigation-basic-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\r\n          </cmat-vertical-navigation-basic-item>\r\n        }\r\n        <!-- Collapsable -->\r\n        @if (item.type === 'collapsable') {\r\n          <cmat-vertical-navigation-collapsable-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" [autoCollapse]=\"autoCollapse\"\r\n          (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-collapsable-item>\r\n        }\r\n        <!-- Divider -->\r\n        @if (item.type === 'divider') {\r\n          <cmat-vertical-navigation-divider-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\r\n          </cmat-vertical-navigation-divider-item>\r\n        }\r\n        <!-- Group -->\r\n        @if (item.type === 'group') {\r\n          <cmat-vertical-navigation-group-item [item]=\"item\" [name]=\"name\" [autoCollapse]=\"autoCollapse\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\r\n          </cmat-vertical-navigation-group-item>\r\n        }\r\n        <!-- Spacer -->\r\n        @if (item.type === 'spacer') {\r\n          <cmat-vertical-navigation-spacer-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\r\n          </cmat-vertical-navigation-spacer-item>\r\n        }\r\n      }\r\n    }\r\n\r\n    <!-- Content footer -->\r\n    <div class=\"cmat-vertical-navigation-content-footer\">\r\n      <ng-content select=\"[cmatVerticalNavigationContentFooter]\"></ng-content>\r\n    </div>\r\n\r\n  </div>\r\n  <!-- Footer -->\r\n  <div class=\"cmat-vertical-navigation-footer\">\r\n    <ng-content select=\"[cmatVerticalNavigationFooter]\"></ng-content>\r\n  </div>\r\n\r\n</div>\r\n\r\n<!-- Aside -->\r\n@if (activeAsideItemId) {\r\n  <div class=\"cmat-vertical-navigation-aside-wrapper overflow-y-auto scrollbar-custom\"\r\n    [@fadeInLeft]=\"position === 'left'\" [@fadeInRight]=\"position === 'right'\" [@fadeOutLeft]=\"position === 'left'\"\r\n    [@fadeOutRight]=\"position === 'right'\">\r\n    <!-- Items -->\r\n    @for (item of navigation; track trackByFn($index, item)) {\r\n      <!-- Skip the hidden items -->\r\n      @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\r\n        <!-- Aside -->\r\n        @if (item.type === 'aside' && item.id === activeAsideItemId) {\r\n          <cmat-vertical-navigation-aside-item [item]=\"item\" [name]=\"name\" [autoCollapse]=\"autoCollapse\">\r\n          </cmat-vertical-navigation-aside-item>\r\n        }\r\n      }\r\n    }\r\n  </div>\r\n}", styles: ["cmat-vertical-navigation{position:sticky;display:flex;flex-direction:column;flex:1 0 auto;top:0;width:280px;min-width:280px;max-width:280px;height:100%;z-index:200}cmat-vertical-navigation.cmat-vertical-navigation-animations-enabled{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:visibility,margin-left,margin-right,transform,width,max-width,min-width}cmat-vertical-navigation.cmat-vertical-navigation-animations-enabled .cmat-vertical-navigation-wrapper{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:width,max-width,min-width}cmat-vertical-navigation.cmat-vertical-navigation-mode-over{position:fixed;top:0;bottom:0}cmat-vertical-navigation.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side{margin-left:-280px}cmat-vertical-navigation.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side.cmat-vertical-navigation-opened{margin-left:0}cmat-vertical-navigation.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-over{left:0;transform:translate3d(-100%,0,0)}cmat-vertical-navigation.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-over.cmat-vertical-navigation-opened{transform:translateZ(0)}cmat-vertical-navigation.cmat-vertical-navigation-position-left .cmat-vertical-navigation-wrapper{left:0}cmat-vertical-navigation.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side{margin-right:-280px}cmat-vertical-navigation.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side.cmat-vertical-navigation-opened{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-over{right:0;transform:translate3d(100%,0,0)}cmat-vertical-navigation.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-over.cmat-vertical-navigation-opened{transform:translateZ(0)}cmat-vertical-navigation.cmat-vertical-navigation-position-right .cmat-vertical-navigation-wrapper{right:0}cmat-vertical-navigation.cmat-vertical-navigation-inner{position:relative;width:auto;min-width:0;max-width:none;height:auto;min-height:0;max-height:none;box-shadow:none}cmat-vertical-navigation.cmat-vertical-navigation-inner .cmat-vertical-navigation-wrapper{position:relative;overflow:visible;height:auto}cmat-vertical-navigation.cmat-vertical-navigation-inner .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content{overflow:visible!important}cmat-vertical-navigation .cmat-vertical-navigation-wrapper{position:absolute;display:flex;flex:1 1 auto;flex-direction:column;top:0;bottom:0;width:100%;height:100%;overflow:hidden;z-index:10;background:inherit;box-shadow:inset -1px 0 0 var(--cmat-border)}cmat-vertical-navigation .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content{flex:1 1 auto;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}cmat-vertical-navigation .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-divider-item{margin:24px 0}cmat-vertical-navigation .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-group-item{margin-top:24px}cmat-vertical-navigation .cmat-vertical-navigation-aside-wrapper{position:absolute;display:flex;flex:1 1 auto;flex-direction:column;top:0;bottom:0;left:280px;width:280px;height:100%;z-index:5;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;transition-duration:.4s;transition-property:left,right;transition-timing-function:cubic-bezier(.25,.8,.25,1);background:inherit}cmat-vertical-navigation .cmat-vertical-navigation-aside-wrapper>cmat-vertical-navigation-aside-item{padding:24px 0}cmat-vertical-navigation .cmat-vertical-navigation-aside-wrapper>cmat-vertical-navigation-aside-item>.cmat-vertical-navigation-item-wrapper{display:none!important}cmat-vertical-navigation.cmat-vertical-navigation-position-right .cmat-vertical-navigation-aside-wrapper{left:auto;right:280px}cmat-vertical-navigation cmat-vertical-navigation-aside-item,cmat-vertical-navigation cmat-vertical-navigation-basic-item,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item,cmat-vertical-navigation cmat-vertical-navigation-divider-item,cmat-vertical-navigation cmat-vertical-navigation-group-item,cmat-vertical-navigation cmat-vertical-navigation-spacer-item{display:flex;flex-direction:column;flex:1 0 auto;-webkit-user-select:none;user-select:none}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{position:relative;display:flex;align-items:center;justify-content:flex-start;padding:10px 16px;font-size:13px;font-weight:500;line-height:20px;text-decoration:none;border-radius:6px}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled{cursor:default;opacity:.4}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon{margin-right:16px}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle{font-size:11px;line-height:1.5}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge{margin-left:auto}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content{display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;white-space:nowrap;height:20px}cmat-vertical-navigation cmat-vertical-navigation-aside-item>.cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation cmat-vertical-navigation-basic-item>.cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper{margin:0 12px}cmat-vertical-navigation cmat-vertical-navigation-aside-item,cmat-vertical-navigation cmat-vertical-navigation-basic-item,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item{margin-bottom:4px}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item{cursor:pointer}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge+.cmat-vertical-navigation-item-arrow{margin-left:8px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow{height:20px;line-height:20px;margin-left:auto;transition:transform .3s cubic-bezier(.25,.8,.25,1),color 375ms cubic-bezier(.25,.8,.25,1)}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item.cmat-vertical-navigation-item-expanded>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow{transform:rotate(90deg)}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-children{margin-top:6px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-children>*:last-child{padding-bottom:6px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-children>*:last-child>.cmat-vertical-navigation-item-children>*:last-child{padding-bottom:0}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding:10px 16px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children{overflow:hidden}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding-left:56px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding-left:72px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding-left:88px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding-left:104px}cmat-vertical-navigation cmat-vertical-navigation-divider-item{margin:12px 0}cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper{height:1px;box-shadow:0 1px}cmat-vertical-navigation cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon{display:none!important}cmat-vertical-navigation cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-title{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}cmat-vertical-navigation cmat-vertical-navigation-spacer-item{margin:6px 0}.cmat-vertical-navigation-overlay{position:absolute;inset:0;z-index:170;opacity:0;background-color:#0009}.cmat-vertical-navigation-overlay+.cmat-vertical-navigation-aside-overlay{background-color:transparent}.cmat-vertical-navigation-aside-overlay{position:absolute;inset:0;z-index:169;opacity:0;background-color:#0000004d}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact{width:112px;min-width:112px;max-width:112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side{margin-left:-112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-left.cmat-vertical-navigation-opened{margin-left:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side{margin-right:-112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-right.cmat-vertical-navigation-opened{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-right .cmat-vertical-navigation-aside-wrapper{left:auto;right:112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper{margin:4px 8px 0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{flex-direction:column;justify-content:center;padding:12px;border-radius:6px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{margin-top:8px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-title,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-title{font-size:12px;font-weight:500;text-align:center;line-height:16px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle{display:none!important}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge{position:absolute;top:12px;left:64px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item>cmat-vertical-navigation-collapsable-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item>cmat-vertical-navigation-collapsable-item{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item>cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item>cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-aside-wrapper{left:112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over){width:80px;min-width:80px;max-width:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side{margin-left:-80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-left.cmat-vertical-navigation-opened{margin-left:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side{margin-right:-80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-right.cmat-vertical-navigation-opened{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-right .cmat-vertical-navigation-aside-wrapper{left:auto;right:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-right.cmat-vertical-navigation-hover .cmat-vertical-navigation-aside-wrapper{left:auto;right:280px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{width:280px-24px;min-width:280px-24px;max-width:280px-24px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{transition:opacity .4s cubic-bezier(.25,.8,.25,1)}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item:first-of-type{margin-top:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{padding:10px 16px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{white-space:nowrap;opacity:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:before{content:\"\";position:absolute;top:20px;width:23px;border-top-width:2px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-aside-wrapper{left:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-wrapper{width:280px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{white-space:nowrap;animation:removeWhiteSpaceNoWrap 1ms linear .35s;animation-fill-mode:forwards}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-aside-wrapper{left:280px}@keyframes removeWhiteSpaceNoWrap{0%{white-space:nowrap}99%{white-space:nowrap}to{white-space:normal}}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin{width:80px;min-width:80px;max-width:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side{margin-left:-80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-left.cmat-vertical-navigation-opened{margin-left:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side{margin-right:-80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-right.cmat-vertical-navigation-opened{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-right .cmat-vertical-navigation-aside-wrapper{left:auto;right:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item{flex-direction:column;justify-content:center;height:64px;min-height:64px;max-height:64px;padding:0 16px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper{display:flex;align-items:center;justify-content:center}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{justify-content:center;padding:12px;border-radius:4px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon{margin:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-collapsable-item{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-aside-wrapper{left:80px}\n"], dependencies: [{ kind: "component", type: CmatVerticalNavigationAsideItemComponent, selector: "cmat-vertical-navigation-aside-item", inputs: ["activeItemId", "autoCollapse", "item", "name", "skipChildren", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationBasicItemComponent, selector: "cmat-vertical-navigation-basic-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationCollapsableItemComponent, selector: "cmat-vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationDividerItemComponent, selector: "cmat-vertical-navigation-divider-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationGroupItemComponent, selector: "cmat-vertical-navigation-group-item", inputs: ["autoCollapse", "item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationSpacerItemComponent, selector: "cmat-vertical-navigation-spacer-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }], animations: cmatAnimations, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: CmatVerticalNavigationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: CmatVerticalNavigationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-vertical-navigation', animations: cmatAnimations, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatVerticalNavigation', imports: [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 #navigationContent class=\"cmat-vertical-navigation-content py-2 overflow-y-auto scrollbar-custom\">\r\n\r\n    <!-- Content header -->\r\n    <div class=\"cmat-vertical-navigation-content-header\">\r\n      <ng-content select=\"[cmatVerticalNavigationContentHeader]\"></ng-content>\r\n    </div>\r\n\r\n    <!-- Items -->\r\n    @for (item of navigation; track trackByFn($index, item)) {\r\n      <!-- Skip the hidden items -->\r\n      @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\r\n        <!-- Aside -->\r\n        @if (item.type === 'aside') {\r\n          <cmat-vertical-navigation-aside-item [item]=\"item\" [name]=\"name\" [activeItemId]=\"activeAsideItemId\"\r\n            [autoCollapse]=\"autoCollapse\" [skipChildren]=\"true\" [editState]=\"editState\" (click)=\"toggleAside(item)\" (editSelectedItemChanged)=\"selectItem($event)\">\r\n          </cmat-vertical-navigation-aside-item>\r\n        }\r\n        <!-- Basic -->\r\n        @if (item.type === 'basic') {\r\n          <cmat-vertical-navigation-basic-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\r\n          </cmat-vertical-navigation-basic-item>\r\n        }\r\n        <!-- Collapsable -->\r\n        @if (item.type === 'collapsable') {\r\n          <cmat-vertical-navigation-collapsable-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" [autoCollapse]=\"autoCollapse\"\r\n          (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-collapsable-item>\r\n        }\r\n        <!-- Divider -->\r\n        @if (item.type === 'divider') {\r\n          <cmat-vertical-navigation-divider-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\r\n          </cmat-vertical-navigation-divider-item>\r\n        }\r\n        <!-- Group -->\r\n        @if (item.type === 'group') {\r\n          <cmat-vertical-navigation-group-item [item]=\"item\" [name]=\"name\" [autoCollapse]=\"autoCollapse\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\r\n          </cmat-vertical-navigation-group-item>\r\n        }\r\n        <!-- Spacer -->\r\n        @if (item.type === 'spacer') {\r\n          <cmat-vertical-navigation-spacer-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\r\n          </cmat-vertical-navigation-spacer-item>\r\n        }\r\n      }\r\n    }\r\n\r\n    <!-- Content footer -->\r\n    <div class=\"cmat-vertical-navigation-content-footer\">\r\n      <ng-content select=\"[cmatVerticalNavigationContentFooter]\"></ng-content>\r\n    </div>\r\n\r\n  </div>\r\n  <!-- Footer -->\r\n  <div class=\"cmat-vertical-navigation-footer\">\r\n    <ng-content select=\"[cmatVerticalNavigationFooter]\"></ng-content>\r\n  </div>\r\n\r\n</div>\r\n\r\n<!-- Aside -->\r\n@if (activeAsideItemId) {\r\n  <div class=\"cmat-vertical-navigation-aside-wrapper overflow-y-auto scrollbar-custom\"\r\n    [@fadeInLeft]=\"position === 'left'\" [@fadeInRight]=\"position === 'right'\" [@fadeOutLeft]=\"position === 'left'\"\r\n    [@fadeOutRight]=\"position === 'right'\">\r\n    <!-- Items -->\r\n    @for (item of navigation; track trackByFn($index, item)) {\r\n      <!-- Skip the hidden items -->\r\n      @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\r\n        <!-- Aside -->\r\n        @if (item.type === 'aside' && item.id === activeAsideItemId) {\r\n          <cmat-vertical-navigation-aside-item [item]=\"item\" [name]=\"name\" [autoCollapse]=\"autoCollapse\">\r\n          </cmat-vertical-navigation-aside-item>\r\n        }\r\n      }\r\n    }\r\n  </div>\r\n}", styles: ["cmat-vertical-navigation{position:sticky;display:flex;flex-direction:column;flex:1 0 auto;top:0;width:280px;min-width:280px;max-width:280px;height:100%;z-index:200}cmat-vertical-navigation.cmat-vertical-navigation-animations-enabled{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:visibility,margin-left,margin-right,transform,width,max-width,min-width}cmat-vertical-navigation.cmat-vertical-navigation-animations-enabled .cmat-vertical-navigation-wrapper{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:width,max-width,min-width}cmat-vertical-navigation.cmat-vertical-navigation-mode-over{position:fixed;top:0;bottom:0}cmat-vertical-navigation.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side{margin-left:-280px}cmat-vertical-navigation.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side.cmat-vertical-navigation-opened{margin-left:0}cmat-vertical-navigation.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-over{left:0;transform:translate3d(-100%,0,0)}cmat-vertical-navigation.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-over.cmat-vertical-navigation-opened{transform:translateZ(0)}cmat-vertical-navigation.cmat-vertical-navigation-position-left .cmat-vertical-navigation-wrapper{left:0}cmat-vertical-navigation.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side{margin-right:-280px}cmat-vertical-navigation.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side.cmat-vertical-navigation-opened{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-over{right:0;transform:translate3d(100%,0,0)}cmat-vertical-navigation.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-over.cmat-vertical-navigation-opened{transform:translateZ(0)}cmat-vertical-navigation.cmat-vertical-navigation-position-right .cmat-vertical-navigation-wrapper{right:0}cmat-vertical-navigation.cmat-vertical-navigation-inner{position:relative;width:auto;min-width:0;max-width:none;height:auto;min-height:0;max-height:none;box-shadow:none}cmat-vertical-navigation.cmat-vertical-navigation-inner .cmat-vertical-navigation-wrapper{position:relative;overflow:visible;height:auto}cmat-vertical-navigation.cmat-vertical-navigation-inner .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content{overflow:visible!important}cmat-vertical-navigation .cmat-vertical-navigation-wrapper{position:absolute;display:flex;flex:1 1 auto;flex-direction:column;top:0;bottom:0;width:100%;height:100%;overflow:hidden;z-index:10;background:inherit;box-shadow:inset -1px 0 0 var(--cmat-border)}cmat-vertical-navigation .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content{flex:1 1 auto;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}cmat-vertical-navigation .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-divider-item{margin:24px 0}cmat-vertical-navigation .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-group-item{margin-top:24px}cmat-vertical-navigation .cmat-vertical-navigation-aside-wrapper{position:absolute;display:flex;flex:1 1 auto;flex-direction:column;top:0;bottom:0;left:280px;width:280px;height:100%;z-index:5;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;transition-duration:.4s;transition-property:left,right;transition-timing-function:cubic-bezier(.25,.8,.25,1);background:inherit}cmat-vertical-navigation .cmat-vertical-navigation-aside-wrapper>cmat-vertical-navigation-aside-item{padding:24px 0}cmat-vertical-navigation .cmat-vertical-navigation-aside-wrapper>cmat-vertical-navigation-aside-item>.cmat-vertical-navigation-item-wrapper{display:none!important}cmat-vertical-navigation.cmat-vertical-navigation-position-right .cmat-vertical-navigation-aside-wrapper{left:auto;right:280px}cmat-vertical-navigation cmat-vertical-navigation-aside-item,cmat-vertical-navigation cmat-vertical-navigation-basic-item,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item,cmat-vertical-navigation cmat-vertical-navigation-divider-item,cmat-vertical-navigation cmat-vertical-navigation-group-item,cmat-vertical-navigation cmat-vertical-navigation-spacer-item{display:flex;flex-direction:column;flex:1 0 auto;-webkit-user-select:none;user-select:none}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{position:relative;display:flex;align-items:center;justify-content:flex-start;padding:10px 16px;font-size:13px;font-weight:500;line-height:20px;text-decoration:none;border-radius:6px}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled{cursor:default;opacity:.4}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon{margin-right:16px}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle{font-size:11px;line-height:1.5}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge{margin-left:auto}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content{display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;white-space:nowrap;height:20px}cmat-vertical-navigation cmat-vertical-navigation-aside-item>.cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation cmat-vertical-navigation-basic-item>.cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper{margin:0 12px}cmat-vertical-navigation cmat-vertical-navigation-aside-item,cmat-vertical-navigation cmat-vertical-navigation-basic-item,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item{margin-bottom:4px}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item{cursor:pointer}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge+.cmat-vertical-navigation-item-arrow{margin-left:8px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow{height:20px;line-height:20px;margin-left:auto;transition:transform .3s cubic-bezier(.25,.8,.25,1),color 375ms cubic-bezier(.25,.8,.25,1)}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item.cmat-vertical-navigation-item-expanded>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow{transform:rotate(90deg)}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-children{margin-top:6px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-children>*:last-child{padding-bottom:6px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-children>*:last-child>.cmat-vertical-navigation-item-children>*:last-child{padding-bottom:0}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding:10px 16px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children{overflow:hidden}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding-left:56px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding-left:72px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding-left:88px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding-left:104px}cmat-vertical-navigation cmat-vertical-navigation-divider-item{margin:12px 0}cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper{height:1px;box-shadow:0 1px}cmat-vertical-navigation cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon{display:none!important}cmat-vertical-navigation cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-title{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}cmat-vertical-navigation cmat-vertical-navigation-spacer-item{margin:6px 0}.cmat-vertical-navigation-overlay{position:absolute;inset:0;z-index:170;opacity:0;background-color:#0009}.cmat-vertical-navigation-overlay+.cmat-vertical-navigation-aside-overlay{background-color:transparent}.cmat-vertical-navigation-aside-overlay{position:absolute;inset:0;z-index:169;opacity:0;background-color:#0000004d}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact{width:112px;min-width:112px;max-width:112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side{margin-left:-112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-left.cmat-vertical-navigation-opened{margin-left:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side{margin-right:-112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-right.cmat-vertical-navigation-opened{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-right .cmat-vertical-navigation-aside-wrapper{left:auto;right:112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper{margin:4px 8px 0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{flex-direction:column;justify-content:center;padding:12px;border-radius:6px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{margin-top:8px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-title,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-title{font-size:12px;font-weight:500;text-align:center;line-height:16px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle{display:none!important}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge{position:absolute;top:12px;left:64px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item>cmat-vertical-navigation-collapsable-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item>cmat-vertical-navigation-collapsable-item{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item>cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item>cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-aside-wrapper{left:112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over){width:80px;min-width:80px;max-width:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side{margin-left:-80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-left.cmat-vertical-navigation-opened{margin-left:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side{margin-right:-80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-right.cmat-vertical-navigation-opened{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-right .cmat-vertical-navigation-aside-wrapper{left:auto;right:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-right.cmat-vertical-navigation-hover .cmat-vertical-navigation-aside-wrapper{left:auto;right:280px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{width:280px-24px;min-width:280px-24px;max-width:280px-24px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{transition:opacity .4s cubic-bezier(.25,.8,.25,1)}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item:first-of-type{margin-top:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{padding:10px 16px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{white-space:nowrap;opacity:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:before{content:\"\";position:absolute;top:20px;width:23px;border-top-width:2px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-aside-wrapper{left:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-wrapper{width:280px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{white-space:nowrap;animation:removeWhiteSpaceNoWrap 1ms linear .35s;animation-fill-mode:forwards}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-aside-wrapper{left:280px}@keyframes removeWhiteSpaceNoWrap{0%{white-space:nowrap}99%{white-space:nowrap}to{white-space:normal}}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin{width:80px;min-width:80px;max-width:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side{margin-left:-80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-left.cmat-vertical-navigation-opened{margin-left:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side{margin-right:-80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-right.cmat-vertical-navigation-opened{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-right .cmat-vertical-navigation-aside-wrapper{left:auto;right:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item{flex-direction:column;justify-content:center;height:64px;min-height:64px;max-height:64px;padding:0 16px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper{display:flex;align-items:center;justify-content:center}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{justify-content:center;padding:12px;border-radius:4px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon{margin:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-collapsable-item{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-aside-wrapper{left:80px}\n"] }]
-        }], 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: [{
+        }], ctorParameters: () => [], propDecorators: { appearance: [{
                 type: Input
             }], autoCollapse: [{
                 type: Input