cmat 0.0.86 → 0.0.88

package/fesm2022/cmat-components-navigation.mjs

@@ -1,15 +1,14 @@
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, inject, Output, Input, ChangeDetectionStrategy, Component, ViewChild, forwardRef, signal, ViewEncapsulation, DestroyRef, HostBinding, ElementRef, Renderer2, HostListener } from '@angular/core';
+import { Injectable, output, input, computed, inject, ChangeDetectionStrategy, Component, viewChild, forwardRef, signal, effect, ViewEncapsulation, DestroyRef, untracked, ElementRef, Renderer2 } from '@angular/core';
 import { CmatUtilsService } from 'cmat/services/utils';
 import { NgClass, NgTemplateOutlet } from '@angular/common';
 import * as i2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i1$1 from '@angular/material/menu';
-import { MatMenuModule } from '@angular/material/menu';
+import { MatMenuModule, MatMenu } from '@angular/material/menu';
 import * as i1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { Router, isActive, RouterLink, RouterLinkActive, NavigationEnd } from '@angular/router';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { ScrollStrategyOptions } from '@angular/cdk/overlay';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ReplaySubject } from 'rxjs';
@@ -83,10 +82,10 @@ class CmatNavigationService {
         }
         return null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatNavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatNavigationService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatNavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatNavigationService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatNavigationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatNavigationService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -95,125 +94,147 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
 
 class CmatHorizontalNavigationBasicItemComponent {
     constructor() {
-        this.routeReuseStrategyEmitUrl = new EventEmitter();
-        this._router = inject(Router);
-        this._cmatUtilsService = inject(CmatUtilsService);
-        this.isActiveMatchOptions = this._cmatUtilsService.subsetMatchOptions;
-        this.isActiveMatchOptions =
-            this.item?.isActiveMatchOptions ?? this.item?.exactMatch
+        this.routeReuseStrategyEmitUrl = output();
+        this.item = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
+        this.name = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+        this.hasRouteReuseStrategy = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "hasRouteReuseStrategy" }] : /* istanbul ignore next */ []));
+        this.isActiveMatchOptions = computed(() => {
+            const item = this.item();
+            return (item?.isActiveMatchOptions ?? item?.exactMatch)
                 ? this._cmatUtilsService.exactMatchOptions
                 : this._cmatUtilsService.subsetMatchOptions;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isActiveMatchOptions" }] : /* istanbul ignore next */ []));
+        this._router = inject(Router);
+        this._cmatUtilsService = inject(CmatUtilsService);
     }
     isRouteActive(link) {
-        return isActive(link, this._router, this.isActiveMatchOptions)();
+        if (!link) {
+            return false;
+        }
+        return isActive(link, this._router, this.isActiveMatchOptions())();
     }
     goToRouterLink(link) {
-        if (this.hasRouteReuseStrategy) {
+        if (!link) {
+            return;
+        }
+        if (this.hasRouteReuseStrategy()) {
             this.routeReuseStrategyEmitUrl.emit(link);
         }
         else {
             void this._router.navigate([link]);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatHorizontalNavigationBasicItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CmatHorizontalNavigationBasicItemComponent, isStandalone: true, selector: "cmat-horizontal-navigation-basic-item", inputs: { item: "item", name: "name", hasRouteReuseStrategy: "hasRouteReuseStrategy" }, outputs: { routeReuseStrategyEmitUrl: "routeReuseStrategyEmitUrl" }, ngImport: i0, template: "<div class=\"cmat-horizontal-navigation-item-wrapper\" [class.cmat-horizontal-navigation-item-has-subtitle]=\"!!item.subTitle\" [ngClass]=\"item.classes?.wrapper\">\r\n\r\n  \r\n  @if (item.link && !item.externalLink && !item.function && !item.disabled) {\r\n  <div class=\"cmat-horizontal-navigation-item\" role=\"presentation\"\r\n    [ngClass]=\"{'cmat-horizontal-navigation-item-active-forced': item.active,'cmat-horizontal-navigation-item-active':isRouteActive(item.link)}\"\r\n    [matTooltip]=\"item.tooltip || ''\" (click)=\"goToRouterLink(item.link)\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </div>\r\n  }\r\n\r\n  \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  \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  \r\n  @if (item.link && !item.externalLink && item.function && !item.disabled) {\r\n  <div class=\"cmat-horizontal-navigation-item\" role=\"presentation\"\r\n    [ngClass]=\"{'cmat-horizontal-navigation-item-active-forced': item.active,'cmat-horizontal-navigation-item-active':isRouteActive(item.link)}\"\r\n    [matTooltip]=\"item.tooltip || ''\" (click)=\"item.function(item);goToRouterLink(item.link)\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </div>\r\n  }\r\n\r\n  \r\n  @if (item.link && item.externalLink && item.function && !item.disabled) {\r\n  <a class=\"cmat-horizontal-navigation-item\" mat-menu-item [href]=\"item.link\" [target]=\"item.target || '_blank'\"\r\n    [matTooltip]=\"item.tooltip || ''\" (click)=\"item.function(item)\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </a>\r\n  }\r\n\r\n  \r\n  @if (!item.link && !item.function && !item.disabled) {\r\n  <div class=\"cmat-horizontal-navigation-item\"\r\n    [ngClass]=\"{'cmat-horizontal-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </div>\r\n  }\r\n\r\n  \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\r\n<ng-template #itemTemplate>\r\n\r\n  \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  \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  \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>\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: "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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatHorizontalNavigationBasicItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CmatHorizontalNavigationBasicItemComponent, isStandalone: true, selector: "cmat-horizontal-navigation-basic-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, hasRouteReuseStrategy: { classPropertyName: "hasRouteReuseStrategy", publicName: "hasRouteReuseStrategy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { routeReuseStrategyEmitUrl: "routeReuseStrategyEmitUrl" }, ngImport: i0, template: "<div\r\n  class=\"cmat-horizontal-navigation-item-wrapper\"\r\n  [class.cmat-horizontal-navigation-item-has-subtitle]=\"!!item().subTitle\"\r\n  [ngClass]=\"item().classes?.wrapper\"\r\n>\r\n  @if (\r\n    item().link && !item().externalLink && !item().function && !item().disabled\r\n  ) {\r\n    <div\r\n      class=\"cmat-horizontal-navigation-item\"\r\n      role=\"presentation\"\r\n      [ngClass]=\"{\r\n        'cmat-horizontal-navigation-item-active-forced': item().active,\r\n        'cmat-horizontal-navigation-item-active': isRouteActive(item().link),\r\n      }\"\r\n      [matTooltip]=\"item().tooltip || ''\"\r\n      (click)=\"goToRouterLink(item().link)\"\r\n    >\r\n      <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n    </div>\r\n  }\r\n\r\n  @if (\r\n    item().link && item().externalLink && !item().function && !item().disabled\r\n  ) {\r\n    <a\r\n      class=\"cmat-horizontal-navigation-item\"\r\n      [href]=\"item().link\"\r\n      [target]=\"item().target || '_blank'\"\r\n      [matTooltip]=\"item().tooltip || ''\"\r\n    >\r\n      <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n    </a>\r\n  }\r\n\r\n  @if (!item().link && item().function && !item().disabled) {\r\n    <div\r\n      class=\"cmat-horizontal-navigation-item\"\r\n      role=\"presentation\"\r\n      [ngClass]=\"{\r\n        'cmat-horizontal-navigation-item-active-forced': item().active,\r\n      }\"\r\n      [matTooltip]=\"item().tooltip || ''\"\r\n      (click)=\"item().function!(item())\"\r\n    >\r\n      <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n    </div>\r\n  }\r\n\r\n  @if (\r\n    item().link && !item().externalLink && item().function && !item().disabled\r\n  ) {\r\n    <div\r\n      class=\"cmat-horizontal-navigation-item\"\r\n      role=\"presentation\"\r\n      [ngClass]=\"{\r\n        'cmat-horizontal-navigation-item-active-forced': item().active,\r\n        'cmat-horizontal-navigation-item-active': isRouteActive(item().link),\r\n      }\"\r\n      [matTooltip]=\"item().tooltip || ''\"\r\n      (click)=\"item().function!(item()); goToRouterLink(item().link)\"\r\n    >\r\n      <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n    </div>\r\n  }\r\n\r\n  @if (\r\n    item().link && item().externalLink && item().function && !item().disabled\r\n  ) {\r\n    <a\r\n      class=\"cmat-horizontal-navigation-item\"\r\n      mat-menu-item\r\n      [href]=\"item().link\"\r\n      [target]=\"item().target || '_blank'\"\r\n      [matTooltip]=\"item().tooltip || ''\"\r\n      (click)=\"item().function!(item())\"\r\n    >\r\n      <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n    </a>\r\n  }\r\n\r\n  @if (!item().link && !item().function && !item().disabled) {\r\n    <div\r\n      class=\"cmat-horizontal-navigation-item\"\r\n      [ngClass]=\"{\r\n        'cmat-horizontal-navigation-item-active-forced': item().active,\r\n      }\"\r\n      [matTooltip]=\"item().tooltip || ''\"\r\n    >\r\n      <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n    </div>\r\n  }\r\n\r\n  @if (item().disabled) {\r\n    <div\r\n      class=\"cmat-horizontal-navigation-item cmat-horizontal-navigation-item-disabled\"\r\n    >\r\n      <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n    </div>\r\n  }\r\n</div>\r\n\r\n<ng-template #itemTemplate>\r\n  @if (item().icon) {\r\n    <mat-icon\r\n      class=\"cmat-horizontal-navigation-item-icon\"\r\n      [ngClass]=\"item().classes?.icon\"\r\n      [svgIcon]=\"item().icon!\"\r\n    >\r\n    </mat-icon>\r\n  }\r\n\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  @if (item().badge) {\r\n    <div class=\"cmat-horizontal-navigation-item-badge\">\r\n      <div\r\n        class=\"cmat-horizontal-navigation-item-badge-content\"\r\n        [ngClass]=\"item().badge!.classes\"\r\n      >\r\n        {{ item().badge!.title }}\r\n      </div>\r\n    </div>\r\n  }\r\n</ng-template>\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: "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: "21.2.10", ngImport: i0, type: CmatHorizontalNavigationBasicItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.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: "<div class=\"cmat-horizontal-navigation-item-wrapper\" [class.cmat-horizontal-navigation-item-has-subtitle]=\"!!item.subTitle\" [ngClass]=\"item.classes?.wrapper\">\r\n\r\n  \r\n  @if (item.link && !item.externalLink && !item.function && !item.disabled) {\r\n  <div class=\"cmat-horizontal-navigation-item\" role=\"presentation\"\r\n    [ngClass]=\"{'cmat-horizontal-navigation-item-active-forced': item.active,'cmat-horizontal-navigation-item-active':isRouteActive(item.link)}\"\r\n    [matTooltip]=\"item.tooltip || ''\" (click)=\"goToRouterLink(item.link)\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </div>\r\n  }\r\n\r\n  \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  \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  \r\n  @if (item.link && !item.externalLink && item.function && !item.disabled) {\r\n  <div class=\"cmat-horizontal-navigation-item\" role=\"presentation\"\r\n    [ngClass]=\"{'cmat-horizontal-navigation-item-active-forced': item.active,'cmat-horizontal-navigation-item-active':isRouteActive(item.link)}\"\r\n    [matTooltip]=\"item.tooltip || ''\" (click)=\"item.function(item);goToRouterLink(item.link)\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </div>\r\n  }\r\n\r\n  \r\n  @if (item.link && item.externalLink && item.function && !item.disabled) {\r\n  <a class=\"cmat-horizontal-navigation-item\" mat-menu-item [href]=\"item.link\" [target]=\"item.target || '_blank'\"\r\n    [matTooltip]=\"item.tooltip || ''\" (click)=\"item.function(item)\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </a>\r\n  }\r\n\r\n  \r\n  @if (!item.link && !item.function && !item.disabled) {\r\n  <div class=\"cmat-horizontal-navigation-item\"\r\n    [ngClass]=\"{'cmat-horizontal-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </div>\r\n  }\r\n\r\n  \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\r\n<ng-template #itemTemplate>\r\n\r\n  \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  \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  \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>\r\n" }]
-        }], ctorParameters: () => [], propDecorators: { item: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }], hasRouteReuseStrategy: [{
-                type: Input
-            }], routeReuseStrategyEmitUrl: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'cmat-horizontal-navigation-basic-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        NgClass,
+                        RouterLink,
+                        RouterLinkActive,
+                        MatTooltipModule,
+                        NgTemplateOutlet,
+                        MatMenuModule,
+                        MatIconModule,
+                    ], template: "<div\r\n  class=\"cmat-horizontal-navigation-item-wrapper\"\r\n  [class.cmat-horizontal-navigation-item-has-subtitle]=\"!!item().subTitle\"\r\n  [ngClass]=\"item().classes?.wrapper\"\r\n>\r\n  @if (\r\n    item().link && !item().externalLink && !item().function && !item().disabled\r\n  ) {\r\n    <div\r\n      class=\"cmat-horizontal-navigation-item\"\r\n      role=\"presentation\"\r\n      [ngClass]=\"{\r\n        'cmat-horizontal-navigation-item-active-forced': item().active,\r\n        'cmat-horizontal-navigation-item-active': isRouteActive(item().link),\r\n      }\"\r\n      [matTooltip]=\"item().tooltip || ''\"\r\n      (click)=\"goToRouterLink(item().link)\"\r\n    >\r\n      <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n    </div>\r\n  }\r\n\r\n  @if (\r\n    item().link && item().externalLink && !item().function && !item().disabled\r\n  ) {\r\n    <a\r\n      class=\"cmat-horizontal-navigation-item\"\r\n      [href]=\"item().link\"\r\n      [target]=\"item().target || '_blank'\"\r\n      [matTooltip]=\"item().tooltip || ''\"\r\n    >\r\n      <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n    </a>\r\n  }\r\n\r\n  @if (!item().link && item().function && !item().disabled) {\r\n    <div\r\n      class=\"cmat-horizontal-navigation-item\"\r\n      role=\"presentation\"\r\n      [ngClass]=\"{\r\n        'cmat-horizontal-navigation-item-active-forced': item().active,\r\n      }\"\r\n      [matTooltip]=\"item().tooltip || ''\"\r\n      (click)=\"item().function!(item())\"\r\n    >\r\n      <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n    </div>\r\n  }\r\n\r\n  @if (\r\n    item().link && !item().externalLink && item().function && !item().disabled\r\n  ) {\r\n    <div\r\n      class=\"cmat-horizontal-navigation-item\"\r\n      role=\"presentation\"\r\n      [ngClass]=\"{\r\n        'cmat-horizontal-navigation-item-active-forced': item().active,\r\n        'cmat-horizontal-navigation-item-active': isRouteActive(item().link),\r\n      }\"\r\n      [matTooltip]=\"item().tooltip || ''\"\r\n      (click)=\"item().function!(item()); goToRouterLink(item().link)\"\r\n    >\r\n      <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n    </div>\r\n  }\r\n\r\n  @if (\r\n    item().link && item().externalLink && item().function && !item().disabled\r\n  ) {\r\n    <a\r\n      class=\"cmat-horizontal-navigation-item\"\r\n      mat-menu-item\r\n      [href]=\"item().link\"\r\n      [target]=\"item().target || '_blank'\"\r\n      [matTooltip]=\"item().tooltip || ''\"\r\n      (click)=\"item().function!(item())\"\r\n    >\r\n      <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n    </a>\r\n  }\r\n\r\n  @if (!item().link && !item().function && !item().disabled) {\r\n    <div\r\n      class=\"cmat-horizontal-navigation-item\"\r\n      [ngClass]=\"{\r\n        'cmat-horizontal-navigation-item-active-forced': item().active,\r\n      }\"\r\n      [matTooltip]=\"item().tooltip || ''\"\r\n    >\r\n      <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n    </div>\r\n  }\r\n\r\n  @if (item().disabled) {\r\n    <div\r\n      class=\"cmat-horizontal-navigation-item cmat-horizontal-navigation-item-disabled\"\r\n    >\r\n      <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n    </div>\r\n  }\r\n</div>\r\n\r\n<ng-template #itemTemplate>\r\n  @if (item().icon) {\r\n    <mat-icon\r\n      class=\"cmat-horizontal-navigation-item-icon\"\r\n      [ngClass]=\"item().classes?.icon\"\r\n      [svgIcon]=\"item().icon!\"\r\n    >\r\n    </mat-icon>\r\n  }\r\n\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  @if (item().badge) {\r\n    <div class=\"cmat-horizontal-navigation-item-badge\">\r\n      <div\r\n        class=\"cmat-horizontal-navigation-item-badge-content\"\r\n        [ngClass]=\"item().badge!.classes\"\r\n      >\r\n        {{ item().badge!.title }}\r\n      </div>\r\n    </div>\r\n  }\r\n</ng-template>\r\n" }]
+        }], propDecorators: { routeReuseStrategyEmitUrl: [{ type: i0.Output, args: ["routeReuseStrategyEmitUrl"] }], item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], hasRouteReuseStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasRouteReuseStrategy", required: false }] }] } });
 
 class CmatHorizontalNavigationDividerItemComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatHorizontalNavigationDividerItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: CmatHorizontalNavigationDividerItemComponent, isStandalone: true, selector: "cmat-horizontal-navigation-divider-item", inputs: { item: "item", name: "name" }, ngImport: i0, template: "\r\n<div class=\"cmat-horizontal-navigation-item-wrapper divider\" [ngClass]=\"item.classes?.wrapper\"></div>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    constructor() {
+        this.item = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
+        this.name = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "name" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatHorizontalNavigationDividerItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: CmatHorizontalNavigationDividerItemComponent, isStandalone: true, selector: "cmat-horizontal-navigation-divider-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\r\n  class=\"cmat-horizontal-navigation-item-wrapper divider\"\r\n  [ngClass]=\"item().classes?.wrapper\"\r\n></div>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatHorizontalNavigationDividerItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatHorizontalNavigationDividerItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-horizontal-navigation-divider-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "\r\n<div class=\"cmat-horizontal-navigation-item-wrapper divider\" [ngClass]=\"item.classes?.wrapper\"></div>\r\n" }]
-        }], propDecorators: { item: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'cmat-horizontal-navigation-divider-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "<div\r\n  class=\"cmat-horizontal-navigation-item-wrapper divider\"\r\n  [ngClass]=\"item().classes?.wrapper\"\r\n></div>\r\n" }]
+        }], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }] } });
 
 class CmatHorizontalNavigationBranchItemComponent {
     constructor() {
-        /* eslint-enable @typescript-eslint/naming-convention */
-        this.child = false;
-        this.routeReuseStrategyEmitUrl = new EventEmitter();
-    }
-    triggerChangeDetection() {
-        // no-op: keep menu state changes local to Material menu interactions
-    }
+        this.routeReuseStrategyEmitUrl = output();
+        this.matMenu = viewChild('matMenu', { ...(ngDevMode ? { debugName: "matMenu" } : /* istanbul ignore next */ {}), read: MatMenu });
+        this.matMenuPanel = computed(() => this.matMenu() ?? null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "matMenuPanel" }] : /* istanbul ignore next */ []));
+        this.child = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "child" }] : /* istanbul ignore next */ []));
+        this.item = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
+        this.name = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+        this.hasRouteReuseStrategy = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "hasRouteReuseStrategy" }] : /* istanbul ignore next */ []));
+    }
+    triggerChangeDetection() { }
     trackByFn(index, item) {
         return item.id ?? index;
     }
     goToRouterLink(link) {
         this.routeReuseStrategyEmitUrl.emit(link);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatHorizontalNavigationBranchItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CmatHorizontalNavigationBranchItemComponent, isStandalone: true, selector: "cmat-horizontal-navigation-branch-item", inputs: { child: "child", item: "item", name: "name", hasRouteReuseStrategy: "hasRouteReuseStrategy" }, outputs: { routeReuseStrategyEmitUrl: "routeReuseStrategyEmitUrl" }, viewQueries: [{ propertyName: "matMenu", first: true, predicate: ["matMenu"], descendants: true, static: true }], ngImport: i0, template: "@if (!child) {\r\n<div #trigger=\"matMenuTrigger\"  [ngClass]=\"{'cmat-horizontal-navigation-menu-active': trigger.menuOpen,\r\n                 'cmat-horizontal-navigation-menu-active-forced': item.active}\" [matMenuTriggerFor]=\"matMenu\"\r\n  (menuOpened)=\"triggerChangeDetection()\" (onMenuClose)=\"triggerChangeDetection()\">\r\n  <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item}\"></ng-container>\r\n</div>\r\n}\r\n\r\n<mat-menu #matMenu=\"matMenu\" class=\"cmat-horizontal-navigation-menu-panel\" [overlapTrigger]=\"false\">\r\n\r\n  @for (item of item.children; track trackByFn($index, item)) {\r\n  \r\n  @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\r\n  \r\n  @if (item.type === 'basic') {\r\n  <div class=\"cmat-horizontal-navigation-menu-item\" mat-menu-item [disabled]=\"item.disabled\">\r\n    <cmat-horizontal-navigation-basic-item [item]=\"item\" [name]=\"name\" [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\"\r\n      (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\">\r\n    </cmat-horizontal-navigation-basic-item>\r\n  </div>\r\n  }\r\n  \r\n  @if (item.type === 'aside' || item.type === 'collapsable' || item.type === 'group') {\r\n  <div class=\"cmat-horizontal-navigation-menu-item\" mat-menu-item [disabled]=\"item.disabled\"\r\n    [matMenuTriggerFor]=\"branch.matMenu\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item}\"></ng-container>\r\n    <cmat-horizontal-navigation-branch-item #branch [child]=\"true\" [item]=\"item\" [name]=\"name\"\r\n      [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\" (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\">\r\n    </cmat-horizontal-navigation-branch-item>\r\n  </div>\r\n  }\r\n  \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\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      \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      \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      \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>\r\n", dependencies: [{ kind: "component", type: i0.forwardRef(() => CmatHorizontalNavigationBranchItemComponent), selector: "cmat-horizontal-navigation-branch-item", inputs: ["child", "item", "name", "hasRouteReuseStrategy"], outputs: ["routeReuseStrategyEmitUrl"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatMenuModule) }, { kind: "component", type: i0.forwardRef(() => i1$1.MatMenu), selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i0.forwardRef(() => i1$1.MatMenuItem), selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.MatMenuTrigger), selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i0.forwardRef(() => NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i0.forwardRef(() => CmatHorizontalNavigationBasicItemComponent), selector: "cmat-horizontal-navigation-basic-item", inputs: ["item", "name", "hasRouteReuseStrategy"], outputs: ["routeReuseStrategyEmitUrl"] }, { kind: "component", type: i0.forwardRef(() => CmatHorizontalNavigationDividerItemComponent), selector: "cmat-horizontal-navigation-divider-item", inputs: ["item", "name"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatTooltipModule) }, { kind: "directive", type: i0.forwardRef(() => i1.MatTooltip), selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatIconModule) }, { kind: "component", type: i0.forwardRef(() => i2.MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatHorizontalNavigationBranchItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CmatHorizontalNavigationBranchItemComponent, isStandalone: true, selector: "cmat-horizontal-navigation-branch-item", inputs: { child: { classPropertyName: "child", publicName: "child", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, hasRouteReuseStrategy: { classPropertyName: "hasRouteReuseStrategy", publicName: "hasRouteReuseStrategy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { routeReuseStrategyEmitUrl: "routeReuseStrategyEmitUrl" }, viewQueries: [{ propertyName: "matMenu", first: true, predicate: ["matMenu"], descendants: true, read: MatMenu, isSignal: true }], ngImport: i0, template: "@if (!child()) {\r\n  <div\r\n    #trigger=\"matMenuTrigger\"\r\n    [ngClass]=\"{\r\n      'cmat-horizontal-navigation-menu-active': trigger.menuOpen,\r\n      'cmat-horizontal-navigation-menu-active-forced': item().active,\r\n    }\"\r\n    [matMenuTriggerFor]=\"matMenu\"\r\n    (menuOpened)=\"triggerChangeDetection()\"\r\n    (onMenuClose)=\"triggerChangeDetection()\"\r\n  >\r\n    <ng-container\r\n      *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item() }\"\r\n    ></ng-container>\r\n  </div>\r\n}\r\n\r\n<mat-menu\r\n  #matMenu=\"matMenu\"\r\n  class=\"cmat-horizontal-navigation-menu-panel\"\r\n  [overlapTrigger]=\"false\"\r\n>\r\n  @for (item of item().children; track trackByFn($index, item)) {\r\n    @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\r\n      @if (item.type === \"basic\") {\r\n        <div\r\n          class=\"cmat-horizontal-navigation-menu-item\"\r\n          mat-menu-item\r\n          [disabled]=\"item.disabled\"\r\n        >\r\n          <cmat-horizontal-navigation-basic-item\r\n            [item]=\"item\"\r\n            [name]=\"name()\"\r\n            [hasRouteReuseStrategy]=\"hasRouteReuseStrategy()\"\r\n            (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\"\r\n          >\r\n          </cmat-horizontal-navigation-basic-item>\r\n        </div>\r\n      }\r\n\r\n      @if (\r\n        item.type === \"aside\" ||\r\n        item.type === \"collapsable\" ||\r\n        item.type === \"group\"\r\n      ) {\r\n        <div\r\n          class=\"cmat-horizontal-navigation-menu-item\"\r\n          mat-menu-item\r\n          [disabled]=\"item.disabled\"\r\n          [matMenuTriggerFor]=\"branch.matMenuPanel()\"\r\n        >\r\n          <ng-container\r\n            *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"\r\n          ></ng-container>\r\n          <cmat-horizontal-navigation-branch-item\r\n            #branch\r\n            [child]=\"true\"\r\n            [item]=\"item\"\r\n            [name]=\"name()\"\r\n            [hasRouteReuseStrategy]=\"hasRouteReuseStrategy()\"\r\n            (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\"\r\n          >\r\n          </cmat-horizontal-navigation-branch-item>\r\n        </div>\r\n      }\r\n\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\r\n            [item]=\"item\"\r\n            [name]=\"name()\"\r\n          >\r\n          </cmat-horizontal-navigation-divider-item>\r\n        </div>\r\n      }\r\n    }\r\n  }\r\n</mat-menu>\r\n\r\n<ng-template #itemTemplate let-item>\r\n  <div\r\n    class=\"cmat-horizontal-navigation-item-wrapper\"\r\n    [class.cmat-horizontal-navigation-item-has-subtitle]=\"!!item.subTitle\"\r\n    [ngClass]=\"item.classes?.wrapper\"\r\n  >\r\n    <div\r\n      class=\"cmat-horizontal-navigation-item\"\r\n      [ngClass]=\"{\r\n        'cmat-horizontal-navigation-item-disabled': item.disabled,\r\n        'cmat-horizontal-navigation-item-active-forced': item.active,\r\n      }\"\r\n      [matTooltip]=\"item.tooltip || ''\"\r\n    >\r\n      @if (item.icon) {\r\n        <mat-icon\r\n          class=\"cmat-horizontal-navigation-item-icon\"\r\n          [ngClass]=\"item.classes?.icon\"\r\n          [svgIcon]=\"item.icon\"\r\n        ></mat-icon>\r\n      }\r\n\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      @if (item.badge) {\r\n        <div class=\"cmat-horizontal-navigation-item-badge\">\r\n          <div\r\n            class=\"cmat-horizontal-navigation-item-badge-content\"\r\n            [ngClass]=\"item.badge.classes\"\r\n          >\r\n            {{ item.badge.title }}\r\n          </div>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>", dependencies: [{ kind: "component", type: i0.forwardRef(() => CmatHorizontalNavigationBranchItemComponent), selector: "cmat-horizontal-navigation-branch-item", inputs: ["child", "item", "name", "hasRouteReuseStrategy"], outputs: ["routeReuseStrategyEmitUrl"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatMenuModule) }, { kind: "component", type: i0.forwardRef(() => i1$1.MatMenu), selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i0.forwardRef(() => i1$1.MatMenuItem), selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.MatMenuTrigger), selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i0.forwardRef(() => NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i0.forwardRef(() => CmatHorizontalNavigationBasicItemComponent), selector: "cmat-horizontal-navigation-basic-item", inputs: ["item", "name", "hasRouteReuseStrategy"], outputs: ["routeReuseStrategyEmitUrl"] }, { kind: "component", type: i0.forwardRef(() => CmatHorizontalNavigationDividerItemComponent), selector: "cmat-horizontal-navigation-divider-item", inputs: ["item", "name"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatTooltipModule) }, { kind: "directive", type: i0.forwardRef(() => i1.MatTooltip), selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatIconModule) }, { kind: "component", type: i0.forwardRef(() => i2.MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatHorizontalNavigationBranchItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.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}\" [matMenuTriggerFor]=\"matMenu\"\r\n  (menuOpened)=\"triggerChangeDetection()\" (onMenuClose)=\"triggerChangeDetection()\">\r\n  <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item}\"></ng-container>\r\n</div>\r\n}\r\n\r\n<mat-menu #matMenu=\"matMenu\" class=\"cmat-horizontal-navigation-menu-panel\" [overlapTrigger]=\"false\">\r\n\r\n  @for (item of item.children; track trackByFn($index, item)) {\r\n  \r\n  @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\r\n  \r\n  @if (item.type === 'basic') {\r\n  <div class=\"cmat-horizontal-navigation-menu-item\" mat-menu-item [disabled]=\"item.disabled\">\r\n    <cmat-horizontal-navigation-basic-item [item]=\"item\" [name]=\"name\" [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\"\r\n      (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\">\r\n    </cmat-horizontal-navigation-basic-item>\r\n  </div>\r\n  }\r\n  \r\n  @if (item.type === 'aside' || item.type === 'collapsable' || item.type === 'group') {\r\n  <div class=\"cmat-horizontal-navigation-menu-item\" mat-menu-item [disabled]=\"item.disabled\"\r\n    [matMenuTriggerFor]=\"branch.matMenu\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item}\"></ng-container>\r\n    <cmat-horizontal-navigation-branch-item #branch [child]=\"true\" [item]=\"item\" [name]=\"name\"\r\n      [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\" (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\">\r\n    </cmat-horizontal-navigation-branch-item>\r\n  </div>\r\n  }\r\n  \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\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      \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      \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      \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>\r\n" }]
-        }], propDecorators: { child: [{
-                type: Input
-            }], item: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }], hasRouteReuseStrategy: [{
-                type: Input
-            }], routeReuseStrategyEmitUrl: [{
-                type: Output
-            }], matMenu: [{
-                type: ViewChild,
-                args: ['matMenu', { static: true }]
-            }] } });
+            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\r\n    #trigger=\"matMenuTrigger\"\r\n    [ngClass]=\"{\r\n      'cmat-horizontal-navigation-menu-active': trigger.menuOpen,\r\n      'cmat-horizontal-navigation-menu-active-forced': item().active,\r\n    }\"\r\n    [matMenuTriggerFor]=\"matMenu\"\r\n    (menuOpened)=\"triggerChangeDetection()\"\r\n    (onMenuClose)=\"triggerChangeDetection()\"\r\n  >\r\n    <ng-container\r\n      *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item() }\"\r\n    ></ng-container>\r\n  </div>\r\n}\r\n\r\n<mat-menu\r\n  #matMenu=\"matMenu\"\r\n  class=\"cmat-horizontal-navigation-menu-panel\"\r\n  [overlapTrigger]=\"false\"\r\n>\r\n  @for (item of item().children; track trackByFn($index, item)) {\r\n    @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\r\n      @if (item.type === \"basic\") {\r\n        <div\r\n          class=\"cmat-horizontal-navigation-menu-item\"\r\n          mat-menu-item\r\n          [disabled]=\"item.disabled\"\r\n        >\r\n          <cmat-horizontal-navigation-basic-item\r\n            [item]=\"item\"\r\n            [name]=\"name()\"\r\n            [hasRouteReuseStrategy]=\"hasRouteReuseStrategy()\"\r\n            (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\"\r\n          >\r\n          </cmat-horizontal-navigation-basic-item>\r\n        </div>\r\n      }\r\n\r\n      @if (\r\n        item.type === \"aside\" ||\r\n        item.type === \"collapsable\" ||\r\n        item.type === \"group\"\r\n      ) {\r\n        <div\r\n          class=\"cmat-horizontal-navigation-menu-item\"\r\n          mat-menu-item\r\n          [disabled]=\"item.disabled\"\r\n          [matMenuTriggerFor]=\"branch.matMenuPanel()\"\r\n        >\r\n          <ng-container\r\n            *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"\r\n          ></ng-container>\r\n          <cmat-horizontal-navigation-branch-item\r\n            #branch\r\n            [child]=\"true\"\r\n            [item]=\"item\"\r\n            [name]=\"name()\"\r\n            [hasRouteReuseStrategy]=\"hasRouteReuseStrategy()\"\r\n            (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\"\r\n          >\r\n          </cmat-horizontal-navigation-branch-item>\r\n        </div>\r\n      }\r\n\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\r\n            [item]=\"item\"\r\n            [name]=\"name()\"\r\n          >\r\n          </cmat-horizontal-navigation-divider-item>\r\n        </div>\r\n      }\r\n    }\r\n  }\r\n</mat-menu>\r\n\r\n<ng-template #itemTemplate let-item>\r\n  <div\r\n    class=\"cmat-horizontal-navigation-item-wrapper\"\r\n    [class.cmat-horizontal-navigation-item-has-subtitle]=\"!!item.subTitle\"\r\n    [ngClass]=\"item.classes?.wrapper\"\r\n  >\r\n    <div\r\n      class=\"cmat-horizontal-navigation-item\"\r\n      [ngClass]=\"{\r\n        'cmat-horizontal-navigation-item-disabled': item.disabled,\r\n        'cmat-horizontal-navigation-item-active-forced': item.active,\r\n      }\"\r\n      [matTooltip]=\"item.tooltip || ''\"\r\n    >\r\n      @if (item.icon) {\r\n        <mat-icon\r\n          class=\"cmat-horizontal-navigation-item-icon\"\r\n          [ngClass]=\"item.classes?.icon\"\r\n          [svgIcon]=\"item.icon\"\r\n        ></mat-icon>\r\n      }\r\n\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      @if (item.badge) {\r\n        <div class=\"cmat-horizontal-navigation-item-badge\">\r\n          <div\r\n            class=\"cmat-horizontal-navigation-item-badge-content\"\r\n            [ngClass]=\"item.badge.classes\"\r\n          >\r\n            {{ item.badge.title }}\r\n          </div>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>" }]
+        }], propDecorators: { routeReuseStrategyEmitUrl: [{ type: i0.Output, args: ["routeReuseStrategyEmitUrl"] }], matMenu: [{ type: i0.ViewChild, args: ['matMenu', { ...{ read: MatMenu }, isSignal: true }] }], child: [{ type: i0.Input, args: [{ isSignal: true, alias: "child", required: false }] }], item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], hasRouteReuseStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasRouteReuseStrategy", required: false }] }] } });
 
 class CmatHorizontalNavigationSpacerItemComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatHorizontalNavigationSpacerItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: CmatHorizontalNavigationSpacerItemComponent, isStandalone: true, selector: "cmat-horizontal-navigation-spacer-item", inputs: { item: "item", name: "name" }, ngImport: i0, template: "\r\n<div class=\"cmat-horizontal-navigation-item-wrapper\" [ngClass]=\"item.classes?.wrapper\"></div>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    constructor() {
+        this.item = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
+        this.name = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatHorizontalNavigationSpacerItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: CmatHorizontalNavigationSpacerItemComponent, isStandalone: true, selector: "cmat-horizontal-navigation-spacer-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div\r\n  class=\"cmat-horizontal-navigation-item-wrapper\"\r\n  [ngClass]=\"item().classes?.wrapper\"\r\n></div>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatHorizontalNavigationSpacerItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatHorizontalNavigationSpacerItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-horizontal-navigation-spacer-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "\r\n<div class=\"cmat-horizontal-navigation-item-wrapper\" [ngClass]=\"item.classes?.wrapper\"></div>\r\n" }]
-        }], propDecorators: { item: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'cmat-horizontal-navigation-spacer-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "<div\r\n  class=\"cmat-horizontal-navigation-item-wrapper\"\r\n  [ngClass]=\"item().classes?.wrapper\"\r\n></div>\r\n" }]
+        }], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }] } });
 
 class CmatHorizontalNavigationComponent {
     constructor() {
-        this.name = inject(CmatUtilsService).randomId();
-        this.routeReuseStrategyEmitUrl = new EventEmitter();
-        this.refreshToken = signal(0, ...(ngDevMode ? [{ debugName: "refreshToken" }] : /* istanbul ignore next */ []));
+        this.routeReuseStrategyEmitUrl = output();
+        this.refreshToken = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "refreshToken" }] : /* istanbul ignore next */ []));
+        this.name = input(inject(CmatUtilsService).randomId(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+        this.navigation = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "navigation" }] : /* istanbul ignore next */ []));
+        this.hasRouteReuseStrategy = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "hasRouteReuseStrategy" }] : /* istanbul ignore next */ []));
         this._cmatNavigationService = inject(CmatNavigationService);
-    }
-    ngOnChanges(changes) {
-        if ('navigation' in changes) {
+        effect(() => {
+            this.navigation();
             this.refreshToken.update(value => value + 1);
-        }
+        });
     }
     ngOnInit() {
-        if (this.name === '') {
-            this.name = inject(CmatUtilsService).randomId();
-        }
-        this._cmatNavigationService.registerComponent(this.name, this);
+        this._cmatNavigationService.registerComponent(this.name(), this);
     }
     ngOnDestroy() {
-        this._cmatNavigationService.deregisterComponent(this.name);
+        this._cmatNavigationService.deregisterComponent(this.name());
     }
     refresh() {
         this.refreshToken.update(value => value + 1);
@@ -224,126 +245,131 @@ class CmatHorizontalNavigationComponent {
     goToRouterLink(link) {
         this.routeReuseStrategyEmitUrl.emit(link);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatHorizontalNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CmatHorizontalNavigationComponent, isStandalone: true, selector: "cmat-horizontal-navigation", inputs: { name: "name", navigation: "navigation", hasRouteReuseStrategy: "hasRouteReuseStrategy" }, outputs: { routeReuseStrategyEmitUrl: "routeReuseStrategyEmitUrl" }, exportAs: ["cmatHorizontalNavigation"], usesOnChanges: true, ngImport: i0, template: "<div class=\"cmat-horizontal-navigation-wrapper\" [attr.data-refresh]=\"refreshToken()\">\r\n\r\n  @for (item of navigation; track trackByFn($index, item)) {\r\n  \r\n  @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\r\n  \r\n  @if (item.type === 'basic') {\r\n  <cmat-horizontal-navigation-basic-item class=\"cmat-horizontal-navigation-menu-item\" [item]=\"item\"\r\n    [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\" [name]=\"name\"\r\n    (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\"></cmat-horizontal-navigation-basic-item>\r\n  }\r\n  \r\n  @if (item.type === 'aside' || item.type === 'collapsable' || item.type === 'group') {\r\n  <cmat-horizontal-navigation-branch-item class=\"cmat-horizontal-navigation-menu-item\" [item]=\"item\" [name]=\"name\"\r\n    [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\"\r\n    (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\"></cmat-horizontal-navigation-branch-item>\r\n  }\r\n  \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>\r\n", styles: ["cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper{display:flex;align-items:center}cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-basic-item .cmat-horizontal-navigation-item-wrapper,cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-branch-item .cmat-horizontal-navigation-item-wrapper{border-radius:4px;overflow:hidden}cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-basic-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item,cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-branch-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item{padding:0 16px;cursor:pointer;-webkit-user-select:none;user-select:none}cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-basic-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item .cmat-horizontal-navigation-item-icon,cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-branch-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item .cmat-horizontal-navigation-item-icon{margin-right:12px}cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-spacer-item{margin:12px 0}.cmat-horizontal-navigation-menu-panel .cmat-horizontal-navigation-menu-item{height:auto;min-height:0;line-height:normal;white-space:normal}.cmat-horizontal-navigation-menu-panel .cmat-horizontal-navigation-menu-item cmat-horizontal-navigation-basic-item,.cmat-horizontal-navigation-menu-panel .cmat-horizontal-navigation-menu-item cmat-horizontal-navigation-branch-item,.cmat-horizontal-navigation-menu-panel .cmat-horizontal-navigation-menu-item cmat-horizontal-navigation-divider-item{display:flex;flex:1 1 auto}.cmat-horizontal-navigation-menu-panel .cmat-horizontal-navigation-menu-item cmat-horizontal-navigation-divider-item{margin:8px -16px}.cmat-horizontal-navigation-menu-panel .cmat-horizontal-navigation-menu-item cmat-horizontal-navigation-divider-item .cmat-horizontal-navigation-item-wrapper{height:1px;box-shadow:0 1px}.cmat-horizontal-navigation-menu-panel .cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-title-wrapper .cmat-horizontal-navigation-item-title{white-space:normal!important}.cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-wrapper{width:100%}.cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-wrapper.cmat-horizontal-navigation-item-has-subtitle .cmat-horizontal-navigation-item{min-height:56px}.cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item{position:relative;display:flex;align-items:center;justify-content:flex-start;min-height:48px;width:100%;font-size:13px;font-weight:500;text-decoration:none}.cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item .cmat-horizontal-navigation-item-title-wrapper .cmat-horizontal-navigation-item-title{white-space:nowrap}.cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item .cmat-horizontal-navigation-item-title-wrapper .cmat-horizontal-navigation-item-subtitle{font-size:12px}.cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item .cmat-horizontal-navigation-item-badge{margin-left:auto}.cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item .cmat-horizontal-navigation-item-badge .cmat-horizontal-navigation-item-badge-content{display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;white-space:nowrap;height:20px}\n"], dependencies: [{ kind: "component", type: CmatHorizontalNavigationBasicItemComponent, selector: "cmat-horizontal-navigation-basic-item", inputs: ["item", "name", "hasRouteReuseStrategy"], outputs: ["routeReuseStrategyEmitUrl"] }, { kind: "component", type: CmatHorizontalNavigationBranchItemComponent, selector: "cmat-horizontal-navigation-branch-item", inputs: ["child", "item", "name", "hasRouteReuseStrategy"], outputs: ["routeReuseStrategyEmitUrl"] }, { kind: "component", type: CmatHorizontalNavigationSpacerItemComponent, selector: "cmat-horizontal-navigation-spacer-item", inputs: ["item", "name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatHorizontalNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CmatHorizontalNavigationComponent, isStandalone: true, selector: "cmat-horizontal-navigation", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, navigation: { classPropertyName: "navigation", publicName: "navigation", isSignal: true, isRequired: false, transformFunction: null }, hasRouteReuseStrategy: { classPropertyName: "hasRouteReuseStrategy", publicName: "hasRouteReuseStrategy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { routeReuseStrategyEmitUrl: "routeReuseStrategyEmitUrl" }, exportAs: ["cmatHorizontalNavigation"], ngImport: i0, template: "<div\r\n  class=\"cmat-horizontal-navigation-wrapper\"\r\n  [attr.data-refresh]=\"refreshToken()\"\r\n>\r\n  @for (item of navigation(); track trackByFn($index, item)) {\r\n    @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\r\n      @if (item.type === \"basic\") {\r\n        <cmat-horizontal-navigation-basic-item\r\n          class=\"cmat-horizontal-navigation-menu-item\"\r\n          [item]=\"item\"\r\n          [hasRouteReuseStrategy]=\"hasRouteReuseStrategy()\"\r\n          [name]=\"name()\"\r\n          (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\"\r\n        ></cmat-horizontal-navigation-basic-item>\r\n      }\r\n\r\n      @if (\r\n        item.type === \"aside\" ||\r\n        item.type === \"collapsable\" ||\r\n        item.type === \"group\"\r\n      ) {\r\n        <cmat-horizontal-navigation-branch-item\r\n          class=\"cmat-horizontal-navigation-menu-item\"\r\n          [item]=\"item\"\r\n          [name]=\"name()\"\r\n          [hasRouteReuseStrategy]=\"hasRouteReuseStrategy()\"\r\n          (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\"\r\n        ></cmat-horizontal-navigation-branch-item>\r\n      }\r\n\r\n      @if (item.type === \"spacer\") {\r\n        <cmat-horizontal-navigation-spacer-item\r\n          class=\"cmat-horizontal-navigation-menu-item\"\r\n          [item]=\"item\"\r\n          [name]=\"name()\"\r\n        ></cmat-horizontal-navigation-spacer-item>\r\n      }\r\n    }\r\n  }\r\n</div>\r\n", styles: ["cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper{display:flex;align-items:center}cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-basic-item .cmat-horizontal-navigation-item-wrapper,cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-branch-item .cmat-horizontal-navigation-item-wrapper{border-radius:4px;overflow:hidden}cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-basic-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item,cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-branch-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item{padding:0 16px;cursor:pointer;-webkit-user-select:none;user-select:none}cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-basic-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item .cmat-horizontal-navigation-item-icon,cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-branch-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item .cmat-horizontal-navigation-item-icon{margin-right:12px}cmat-horizontal-navigation .cmat-horizontal-navigation-wrapper cmat-horizontal-navigation-spacer-item{margin:12px 0}.cmat-horizontal-navigation-menu-panel .cmat-horizontal-navigation-menu-item{height:auto;min-height:0;line-height:normal;white-space:normal}.cmat-horizontal-navigation-menu-panel .cmat-horizontal-navigation-menu-item cmat-horizontal-navigation-basic-item,.cmat-horizontal-navigation-menu-panel .cmat-horizontal-navigation-menu-item cmat-horizontal-navigation-branch-item,.cmat-horizontal-navigation-menu-panel .cmat-horizontal-navigation-menu-item cmat-horizontal-navigation-divider-item{display:flex;flex:1 1 auto}.cmat-horizontal-navigation-menu-panel .cmat-horizontal-navigation-menu-item cmat-horizontal-navigation-divider-item{margin:8px -16px}.cmat-horizontal-navigation-menu-panel .cmat-horizontal-navigation-menu-item cmat-horizontal-navigation-divider-item .cmat-horizontal-navigation-item-wrapper{height:1px;box-shadow:0 1px}.cmat-horizontal-navigation-menu-panel .cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-title-wrapper .cmat-horizontal-navigation-item-title{white-space:normal!important}.cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-wrapper{width:100%}.cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-wrapper.cmat-horizontal-navigation-item-has-subtitle .cmat-horizontal-navigation-item{min-height:56px}.cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item{position:relative;display:flex;align-items:center;justify-content:flex-start;min-height:48px;width:100%;font-size:13px;font-weight:500;text-decoration:none}.cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item .cmat-horizontal-navigation-item-title-wrapper .cmat-horizontal-navigation-item-title{white-space:nowrap}.cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item .cmat-horizontal-navigation-item-title-wrapper .cmat-horizontal-navigation-item-subtitle{font-size:12px}.cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item .cmat-horizontal-navigation-item-badge{margin-left:auto}.cmat-horizontal-navigation-menu-item .cmat-horizontal-navigation-item-wrapper .cmat-horizontal-navigation-item .cmat-horizontal-navigation-item-badge .cmat-horizontal-navigation-item-badge-content{display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;white-space:nowrap;height:20px}\n"], dependencies: [{ kind: "component", type: CmatHorizontalNavigationBasicItemComponent, selector: "cmat-horizontal-navigation-basic-item", inputs: ["item", "name", "hasRouteReuseStrategy"], outputs: ["routeReuseStrategyEmitUrl"] }, { kind: "component", type: CmatHorizontalNavigationBranchItemComponent, selector: "cmat-horizontal-navigation-branch-item", inputs: ["child", "item", "name", "hasRouteReuseStrategy"], outputs: ["routeReuseStrategyEmitUrl"] }, { kind: "component", type: CmatHorizontalNavigationSpacerItemComponent, selector: "cmat-horizontal-navigation-spacer-item", inputs: ["item", "name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatHorizontalNavigationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatHorizontalNavigationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-horizontal-navigation', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatHorizontalNavigation', imports: [CmatHorizontalNavigationBasicItemComponent, CmatHorizontalNavigationBranchItemComponent, CmatHorizontalNavigationSpacerItemComponent], template: "<div class=\"cmat-horizontal-navigation-wrapper\" [attr.data-refresh]=\"refreshToken()\">\r\n\r\n  @for (item of navigation; track trackByFn($index, item)) {\r\n  \r\n  @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\r\n  \r\n  @if (item.type === 'basic') {\r\n  <cmat-horizontal-navigation-basic-item class=\"cmat-horizontal-navigation-menu-item\" [item]=\"item\"\r\n    [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\" [name]=\"name\"\r\n    (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\"></cmat-horizontal-navigation-basic-item>\r\n  }\r\n  \r\n  @if (item.type === 'aside' || item.type === 'collapsable' || item.type === 'group') {\r\n  <cmat-horizontal-navigation-branch-item class=\"cmat-horizontal-navigation-menu-item\" [item]=\"item\" [name]=\"name\"\r\n    [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\"\r\n    (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\"></cmat-horizontal-navigation-branch-item>\r\n  }\r\n  \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>\r\n", 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"] }]
-        }], propDecorators: { name: [{
-                type: Input
-            }], navigation: [{
-                type: Input
-            }], hasRouteReuseStrategy: [{
-                type: Input
-            }], routeReuseStrategyEmitUrl: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'cmat-horizontal-navigation', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatHorizontalNavigation', imports: [
+                        CmatHorizontalNavigationBasicItemComponent,
+                        CmatHorizontalNavigationBranchItemComponent,
+                        CmatHorizontalNavigationSpacerItemComponent,
+                    ], template: "<div\r\n  class=\"cmat-horizontal-navigation-wrapper\"\r\n  [attr.data-refresh]=\"refreshToken()\"\r\n>\r\n  @for (item of navigation(); track trackByFn($index, item)) {\r\n    @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\r\n      @if (item.type === \"basic\") {\r\n        <cmat-horizontal-navigation-basic-item\r\n          class=\"cmat-horizontal-navigation-menu-item\"\r\n          [item]=\"item\"\r\n          [hasRouteReuseStrategy]=\"hasRouteReuseStrategy()\"\r\n          [name]=\"name()\"\r\n          (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\"\r\n        ></cmat-horizontal-navigation-basic-item>\r\n      }\r\n\r\n      @if (\r\n        item.type === \"aside\" ||\r\n        item.type === \"collapsable\" ||\r\n        item.type === \"group\"\r\n      ) {\r\n        <cmat-horizontal-navigation-branch-item\r\n          class=\"cmat-horizontal-navigation-menu-item\"\r\n          [item]=\"item\"\r\n          [name]=\"name()\"\r\n          [hasRouteReuseStrategy]=\"hasRouteReuseStrategy()\"\r\n          (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\"\r\n        ></cmat-horizontal-navigation-branch-item>\r\n      }\r\n\r\n      @if (item.type === \"spacer\") {\r\n        <cmat-horizontal-navigation-spacer-item\r\n          class=\"cmat-horizontal-navigation-menu-item\"\r\n          [item]=\"item\"\r\n          [name]=\"name()\"\r\n        ></cmat-horizontal-navigation-spacer-item>\r\n      }\r\n    }\r\n  }\r\n</div>\r\n", 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: () => [], propDecorators: { routeReuseStrategyEmitUrl: [{ type: i0.Output, args: ["routeReuseStrategyEmitUrl"] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], navigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigation", required: false }] }], hasRouteReuseStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasRouteReuseStrategy", required: false }] }] } });
 
 class CmatVerticalNavigationBasicItemComponent {
     constructor() {
-        this.editState = false;
-        this.hasRouteReuseStrategy = false;
-        this.routeReuseStrategyEmitUrl = new EventEmitter();
-        this.editSelectedItemChanged = new EventEmitter();
-        this._router = inject(Router);
-        this._cmatUtilsService = inject(CmatUtilsService);
-        this.isActiveMatchOptions = this._cmatUtilsService.subsetMatchOptions;
-    }
-    ngOnInit() {
-        this.isActiveMatchOptions =
-            this.item.isActiveMatchOptions ?? this.item.exactMatch
+        this.routeReuseStrategyEmitUrl = output();
+        this.editSelectedItemChanged = output();
+        this.item = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
+        this.name = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "name" }] : /* istanbul ignore next */ []));
+        this.editState = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "editState" }] : /* istanbul ignore next */ []));
+        this.hasRouteReuseStrategy = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasRouteReuseStrategy" }] : /* istanbul ignore next */ []));
+        this.isActiveMatchOptions = computed(() => {
+            const item = this.item();
+            return (item?.isActiveMatchOptions ?? item?.exactMatch)
                 ? this._cmatUtilsService.exactMatchOptions
                 : this._cmatUtilsService.subsetMatchOptions;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isActiveMatchOptions" }] : /* istanbul ignore next */ []));
+        this._router = inject(Router);
+        this._cmatUtilsService = inject(CmatUtilsService);
     }
     selectItem() {
-        this.editSelectedItemChanged.emit(this.item);
+        this.editSelectedItemChanged.emit(this.item());
     }
     isRouteActive(link) {
-        return isActive(link, this._router, this.isActiveMatchOptions)();
+        if (!link) {
+            return false;
+        }
+        return isActive(link, this._router, this.isActiveMatchOptions())();
     }
     goToRouterLink(link) {
-        if (this.hasRouteReuseStrategy) {
+        if (!link) {
+            return;
+        }
+        if (this.hasRouteReuseStrategy()) {
             this.routeReuseStrategyEmitUrl.emit(link);
         }
         else {
             void this._router.navigate([link]);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatVerticalNavigationBasicItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CmatVerticalNavigationBasicItemComponent, isStandalone: true, selector: "cmat-vertical-navigation-basic-item", inputs: { item: "item", name: "name", editState: "editState", hasRouteReuseStrategy: "hasRouteReuseStrategy" }, outputs: { routeReuseStrategyEmitUrl: "routeReuseStrategyEmitUrl", editSelectedItemChanged: "editSelectedItemChanged" }, ngImport: i0, template: "\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  \r\n  @if (item.link && !item.externalLink && !item.function && !item.disabled) {\r\n  <a class=\"cmat-vertical-navigation-item\" role=\"presentation\"\r\n    [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active,'cmat-vertical-navigation-item-active': isRouteActive(item.link)}\"\r\n    [matTooltip]=\"item.tooltip || ''\" (click)=\"goToRouterLink(item.link)\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </a>\r\n  }\r\n\r\n  \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  \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  \r\n  @if (item.link && !item.externalLink && item.function && !item.disabled) {\r\n  <a class=\"cmat-vertical-navigation-item\" role=\"presentation\"\r\n    [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active,'cmat-vertical-navigation-item-active': isRouteActive(item.link)}\"\r\n    [matTooltip]=\"item.tooltip || ''\" (click)=\"item.function(item);goToRouterLink(item.link)\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </a>\r\n  }\r\n\r\n  \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  \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  \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\r\n<ng-template #itemTemplate>\r\n\r\n  \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  \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  \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>\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: "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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatVerticalNavigationBasicItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CmatVerticalNavigationBasicItemComponent, isStandalone: true, selector: "cmat-vertical-navigation-basic-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, editState: { classPropertyName: "editState", publicName: "editState", isSignal: true, isRequired: false, transformFunction: null }, hasRouteReuseStrategy: { classPropertyName: "hasRouteReuseStrategy", publicName: "hasRouteReuseStrategy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { routeReuseStrategyEmitUrl: "routeReuseStrategyEmitUrl", editSelectedItemChanged: "editSelectedItemChanged" }, ngImport: i0, template: "<div\r\n  class=\"cmat-vertical-navigation-item-wrapper\"\r\n  [class.cmat-vertical-navigation-item-has-subtitle]=\"!!item().subTitle\"\r\n  [ngClass]=\"item().classes?.wrapper\"\r\n>\r\n  @if (editState()) {\r\n    <div\r\n      class=\"cmat-vertical-navigation-item\"\r\n      role=\"presentation\"\r\n      [ngClass]=\"{\r\n        'cmat-vertical-navigation-item-active-forced': item().active,\r\n      }\"\r\n      [matTooltip]=\"item().tooltip || ''\"\r\n      (click)=\"selectItem()\"\r\n    >\r\n      <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n    </div>\r\n  } @else {\r\n    @if (\r\n      item().link &&\r\n      !item().externalLink &&\r\n      !item().function &&\r\n      !item().disabled\r\n    ) {\r\n      <a\r\n        class=\"cmat-vertical-navigation-item\"\r\n        role=\"presentation\"\r\n        [ngClass]=\"{\r\n          'cmat-vertical-navigation-item-active-forced': item().active,\r\n          'cmat-vertical-navigation-item-active': isRouteActive(item().link),\r\n        }\"\r\n        [matTooltip]=\"item().tooltip || ''\"\r\n        (click)=\"goToRouterLink(item().link)\"\r\n      >\r\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n      </a>\r\n    }\r\n\r\n    @if (\r\n      item().link && item().externalLink && !item().function && !item().disabled\r\n    ) {\r\n      <a\r\n        class=\"cmat-vertical-navigation-item\"\r\n        [href]=\"item().link\"\r\n        [target]=\"item().target || '_blank'\"\r\n        [matTooltip]=\"item().tooltip || ''\"\r\n      >\r\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n      </a>\r\n    }\r\n\r\n    @if (!item().link && item().function && !item().disabled) {\r\n      <div\r\n        class=\"cmat-vertical-navigation-item\"\r\n        role=\"presentation\"\r\n        [ngClass]=\"{\r\n          'cmat-vertical-navigation-item-active-forced': item().active,\r\n        }\"\r\n        [matTooltip]=\"item().tooltip || ''\"\r\n        (click)=\"item().function!(item())\"\r\n      >\r\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n      </div>\r\n    }\r\n\r\n    @if (\r\n      item().link && !item().externalLink && item().function && !item().disabled\r\n    ) {\r\n      <a\r\n        class=\"cmat-vertical-navigation-item\"\r\n        role=\"presentation\"\r\n        [ngClass]=\"{\r\n          'cmat-vertical-navigation-item-active-forced': item().active,\r\n          'cmat-vertical-navigation-item-active': isRouteActive(item().link),\r\n        }\"\r\n        [matTooltip]=\"item().tooltip || ''\"\r\n        (click)=\"item().function!(item()); goToRouterLink(item().link)\"\r\n      >\r\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n      </a>\r\n    }\r\n\r\n    @if (\r\n      item().link && item().externalLink && item().function && !item().disabled\r\n    ) {\r\n      <a\r\n        class=\"cmat-vertical-navigation-item\"\r\n        [href]=\"item().link\"\r\n        [target]=\"item().target || '_blank'\"\r\n        [matTooltip]=\"item().tooltip || ''\"\r\n        (click)=\"item().function!(item())\"\r\n      >\r\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n      </a>\r\n    }\r\n\r\n    @if (!item().link && !item().function && !item().disabled) {\r\n      <div\r\n        class=\"cmat-vertical-navigation-item\"\r\n        [ngClass]=\"{\r\n          'cmat-vertical-navigation-item-active-forced': item().active,\r\n        }\"\r\n        [matTooltip]=\"item().tooltip || ''\"\r\n      >\r\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n      </div>\r\n    }\r\n\r\n    @if (item().disabled) {\r\n      <div\r\n        class=\"cmat-vertical-navigation-item cmat-vertical-navigation-item-disabled\"\r\n        [matTooltip]=\"item().tooltip || ''\"\r\n      >\r\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n      </div>\r\n    }\r\n  }\r\n</div>\r\n\r\n<ng-template #itemTemplate>\r\n  @if (item().icon) {\r\n    <mat-icon\r\n      class=\"cmat-vertical-navigation-item-icon\"\r\n      [ngClass]=\"item().classes?.icon\"\r\n      [svgIcon]=\"item().icon!\"\r\n    >\r\n    </mat-icon>\r\n  }\r\n\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  @if (item().badge) {\r\n    <div class=\"cmat-vertical-navigation-item-badge\">\r\n      <div\r\n        class=\"cmat-vertical-navigation-item-badge-content\"\r\n        [ngClass]=\"item().badge!.classes\"\r\n      >\r\n        {{ item().badge!.title }}\r\n      </div>\r\n    </div>\r\n  }\r\n</ng-template>\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: "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: "21.2.10", ngImport: i0, type: CmatVerticalNavigationBasicItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.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: "\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  \r\n  @if (item.link && !item.externalLink && !item.function && !item.disabled) {\r\n  <a class=\"cmat-vertical-navigation-item\" role=\"presentation\"\r\n    [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active,'cmat-vertical-navigation-item-active': isRouteActive(item.link)}\"\r\n    [matTooltip]=\"item.tooltip || ''\" (click)=\"goToRouterLink(item.link)\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </a>\r\n  }\r\n\r\n  \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  \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  \r\n  @if (item.link && !item.externalLink && item.function && !item.disabled) {\r\n  <a class=\"cmat-vertical-navigation-item\" role=\"presentation\"\r\n    [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active,'cmat-vertical-navigation-item-active': isRouteActive(item.link)}\"\r\n    [matTooltip]=\"item.tooltip || ''\" (click)=\"item.function(item);goToRouterLink(item.link)\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </a>\r\n  }\r\n\r\n  \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  \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  \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\r\n<ng-template #itemTemplate>\r\n\r\n  \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  \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  \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>\r\n" }]
-        }], ctorParameters: () => [], propDecorators: { item: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }], editState: [{
-                type: Input
-            }], hasRouteReuseStrategy: [{
-                type: Input
-            }], routeReuseStrategyEmitUrl: [{
-                type: Output
-            }], editSelectedItemChanged: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'cmat-vertical-navigation-basic-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        NgClass,
+                        RouterLink,
+                        RouterLinkActive,
+                        MatTooltipModule,
+                        NgTemplateOutlet,
+                        MatIconModule,
+                    ], template: "<div\r\n  class=\"cmat-vertical-navigation-item-wrapper\"\r\n  [class.cmat-vertical-navigation-item-has-subtitle]=\"!!item().subTitle\"\r\n  [ngClass]=\"item().classes?.wrapper\"\r\n>\r\n  @if (editState()) {\r\n    <div\r\n      class=\"cmat-vertical-navigation-item\"\r\n      role=\"presentation\"\r\n      [ngClass]=\"{\r\n        'cmat-vertical-navigation-item-active-forced': item().active,\r\n      }\"\r\n      [matTooltip]=\"item().tooltip || ''\"\r\n      (click)=\"selectItem()\"\r\n    >\r\n      <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n    </div>\r\n  } @else {\r\n    @if (\r\n      item().link &&\r\n      !item().externalLink &&\r\n      !item().function &&\r\n      !item().disabled\r\n    ) {\r\n      <a\r\n        class=\"cmat-vertical-navigation-item\"\r\n        role=\"presentation\"\r\n        [ngClass]=\"{\r\n          'cmat-vertical-navigation-item-active-forced': item().active,\r\n          'cmat-vertical-navigation-item-active': isRouteActive(item().link),\r\n        }\"\r\n        [matTooltip]=\"item().tooltip || ''\"\r\n        (click)=\"goToRouterLink(item().link)\"\r\n      >\r\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n      </a>\r\n    }\r\n\r\n    @if (\r\n      item().link && item().externalLink && !item().function && !item().disabled\r\n    ) {\r\n      <a\r\n        class=\"cmat-vertical-navigation-item\"\r\n        [href]=\"item().link\"\r\n        [target]=\"item().target || '_blank'\"\r\n        [matTooltip]=\"item().tooltip || ''\"\r\n      >\r\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n      </a>\r\n    }\r\n\r\n    @if (!item().link && item().function && !item().disabled) {\r\n      <div\r\n        class=\"cmat-vertical-navigation-item\"\r\n        role=\"presentation\"\r\n        [ngClass]=\"{\r\n          'cmat-vertical-navigation-item-active-forced': item().active,\r\n        }\"\r\n        [matTooltip]=\"item().tooltip || ''\"\r\n        (click)=\"item().function!(item())\"\r\n      >\r\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n      </div>\r\n    }\r\n\r\n    @if (\r\n      item().link && !item().externalLink && item().function && !item().disabled\r\n    ) {\r\n      <a\r\n        class=\"cmat-vertical-navigation-item\"\r\n        role=\"presentation\"\r\n        [ngClass]=\"{\r\n          'cmat-vertical-navigation-item-active-forced': item().active,\r\n          'cmat-vertical-navigation-item-active': isRouteActive(item().link),\r\n        }\"\r\n        [matTooltip]=\"item().tooltip || ''\"\r\n        (click)=\"item().function!(item()); goToRouterLink(item().link)\"\r\n      >\r\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n      </a>\r\n    }\r\n\r\n    @if (\r\n      item().link && item().externalLink && item().function && !item().disabled\r\n    ) {\r\n      <a\r\n        class=\"cmat-vertical-navigation-item\"\r\n        [href]=\"item().link\"\r\n        [target]=\"item().target || '_blank'\"\r\n        [matTooltip]=\"item().tooltip || ''\"\r\n        (click)=\"item().function!(item())\"\r\n      >\r\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n      </a>\r\n    }\r\n\r\n    @if (!item().link && !item().function && !item().disabled) {\r\n      <div\r\n        class=\"cmat-vertical-navigation-item\"\r\n        [ngClass]=\"{\r\n          'cmat-vertical-navigation-item-active-forced': item().active,\r\n        }\"\r\n        [matTooltip]=\"item().tooltip || ''\"\r\n      >\r\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n      </div>\r\n    }\r\n\r\n    @if (item().disabled) {\r\n      <div\r\n        class=\"cmat-vertical-navigation-item cmat-vertical-navigation-item-disabled\"\r\n        [matTooltip]=\"item().tooltip || ''\"\r\n      >\r\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n      </div>\r\n    }\r\n  }\r\n</div>\r\n\r\n<ng-template #itemTemplate>\r\n  @if (item().icon) {\r\n    <mat-icon\r\n      class=\"cmat-vertical-navigation-item-icon\"\r\n      [ngClass]=\"item().classes?.icon\"\r\n      [svgIcon]=\"item().icon!\"\r\n    >\r\n    </mat-icon>\r\n  }\r\n\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  @if (item().badge) {\r\n    <div class=\"cmat-vertical-navigation-item-badge\">\r\n      <div\r\n        class=\"cmat-vertical-navigation-item-badge-content\"\r\n        [ngClass]=\"item().badge!.classes\"\r\n      >\r\n        {{ item().badge!.title }}\r\n      </div>\r\n    </div>\r\n  }\r\n</ng-template>\r\n" }]
+        }], propDecorators: { routeReuseStrategyEmitUrl: [{ type: i0.Output, args: ["routeReuseStrategyEmitUrl"] }], editSelectedItemChanged: [{ type: i0.Output, args: ["editSelectedItemChanged"] }], item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], editState: [{ type: i0.Input, args: [{ isSignal: true, alias: "editState", required: false }] }], hasRouteReuseStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasRouteReuseStrategy", required: false }] }] } });
 
 class CmatVerticalNavigationDividerItemComponent {
     constructor() {
-        this.editState = false;
-        this.editSelectedItemChanged = new EventEmitter();
+        this.editSelectedItemChanged = output();
+        this.item = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
+        this.name = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+        this.editState = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "editState" }] : /* istanbul ignore next */ []));
     }
     selectItem(item) {
         this.editSelectedItemChanged.emit(item);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatVerticalNavigationDividerItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: CmatVerticalNavigationDividerItemComponent, isStandalone: true, selector: "cmat-vertical-navigation-divider-item", inputs: { item: "item", name: "name", editState: "editState" }, outputs: { editSelectedItemChanged: "editSelectedItemChanged" }, ngImport: i0, template: "\r\n<div class=\"cmat-vertical-navigation-item-wrapper divider\" role=\"presentation\" [ngClass]=\"item.classes?.wrapper\" (click)=\"selectItem(item);\"></div>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatVerticalNavigationDividerItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: CmatVerticalNavigationDividerItemComponent, isStandalone: true, selector: "cmat-vertical-navigation-divider-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, editState: { classPropertyName: "editState", publicName: "editState", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editSelectedItemChanged: "editSelectedItemChanged" }, ngImport: i0, template: "<div\r\n  class=\"cmat-vertical-navigation-item-wrapper divider\"\r\n  role=\"presentation\"\r\n  [ngClass]=\"item().classes?.wrapper\"\r\n  (click)=\"selectItem(item())\"\r\n></div>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatVerticalNavigationDividerItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatVerticalNavigationDividerItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-vertical-navigation-divider-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "\r\n<div class=\"cmat-vertical-navigation-item-wrapper divider\" role=\"presentation\" [ngClass]=\"item.classes?.wrapper\" (click)=\"selectItem(item);\"></div>\r\n" }]
-        }], propDecorators: { item: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }], editState: [{
-                type: Input
-            }], editSelectedItemChanged: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'cmat-vertical-navigation-divider-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "<div\r\n  class=\"cmat-vertical-navigation-item-wrapper divider\"\r\n  role=\"presentation\"\r\n  [ngClass]=\"item().classes?.wrapper\"\r\n  (click)=\"selectItem(item())\"\r\n></div>\r\n" }]
+        }], propDecorators: { editSelectedItemChanged: [{ type: i0.Output, args: ["editSelectedItemChanged"] }], item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], editState: [{ type: i0.Input, args: [{ isSignal: true, alias: "editState", required: false }] }] } });
 
 class CmatVerticalNavigationSpacerItemComponent {
     constructor() {
-        this.editState = false;
-        this.editSelectedItemChanged = new EventEmitter();
+        this.editSelectedItemChanged = output();
+        this.item = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
+        this.name = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+        this.editState = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "editState" }] : /* istanbul ignore next */ []));
     }
     selectItem(item) {
         this.editSelectedItemChanged.emit(item);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatVerticalNavigationSpacerItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: CmatVerticalNavigationSpacerItemComponent, isStandalone: true, selector: "cmat-vertical-navigation-spacer-item", inputs: { item: "item", name: "name", editState: "editState" }, outputs: { editSelectedItemChanged: "editSelectedItemChanged" }, ngImport: i0, template: "\r\n<div class=\"cmat-vertical-navigation-item-wrapper\" role=\"presentation\" [ngClass]=\"item.classes?.wrapper\" (click)=\"selectItem(item);\"></div>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatVerticalNavigationSpacerItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: CmatVerticalNavigationSpacerItemComponent, isStandalone: true, selector: "cmat-vertical-navigation-spacer-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, editState: { classPropertyName: "editState", publicName: "editState", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editSelectedItemChanged: "editSelectedItemChanged" }, ngImport: i0, template: "<div\r\n  class=\"cmat-vertical-navigation-item-wrapper\"\r\n  role=\"presentation\"\r\n  [ngClass]=\"item().classes?.wrapper\"\r\n  (click)=\"selectItem(item())\"\r\n></div>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatVerticalNavigationSpacerItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatVerticalNavigationSpacerItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-vertical-navigation-spacer-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "\r\n<div class=\"cmat-vertical-navigation-item-wrapper\" role=\"presentation\" [ngClass]=\"item.classes?.wrapper\" (click)=\"selectItem(item);\"></div>\r\n" }]
-        }], propDecorators: { item: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }], editState: [{
-                type: Input
-            }], editSelectedItemChanged: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'cmat-vertical-navigation-spacer-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "<div\r\n  class=\"cmat-vertical-navigation-item-wrapper\"\r\n  role=\"presentation\"\r\n  [ngClass]=\"item().classes?.wrapper\"\r\n  (click)=\"selectItem(item())\"\r\n></div>\r\n" }]
+        }], propDecorators: { editSelectedItemChanged: [{ type: i0.Output, args: ["editSelectedItemChanged"] }], item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], editState: [{ type: i0.Input, args: [{ isSignal: true, alias: "editState", required: false }] }] } });
 
 class CmatVerticalNavigationGroupItemComponent {
     constructor() {
-        this.editState = false;
-        this.hasRouteReuseStrategy = false;
-        this.routeReuseStrategyEmitUrl = new EventEmitter();
-        this.editSelectedItemChanged = new EventEmitter();
+        this.routeReuseStrategyEmitUrl = output();
+        this.editSelectedItemChanged = output();
+        this.autoCollapse = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "autoCollapse" }] : /* istanbul ignore next */ []));
+        this.item = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
+        this.name = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+        this.editState = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "editState" }] : /* istanbul ignore next */ []));
+        this.hasRouteReuseStrategy = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasRouteReuseStrategy" }] : /* istanbul ignore next */ []));
     }
     trackByFn(index, item) {
         return item.id ?? index;
@@ -354,58 +380,57 @@ class CmatVerticalNavigationGroupItemComponent {
     selectItem(item) {
         this.editSelectedItemChanged.emit(item);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatVerticalNavigationGroupItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CmatVerticalNavigationGroupItemComponent, isStandalone: true, selector: "cmat-vertical-navigation-group-item", inputs: { autoCollapse: "autoCollapse", item: "item", name: "name", editState: "editState", hasRouteReuseStrategy: "hasRouteReuseStrategy" }, outputs: { routeReuseStrategyEmitUrl: "routeReuseStrategyEmitUrl", editSelectedItemChanged: "editSelectedItemChanged" }, ngImport: i0, template: "\r\n<div class=\"cmat-vertical-navigation-item-wrapper\" role=\"presentation\"\r\n  [class.cmat-vertical-navigation-item-has-subtitle]=\"!!item.subTitle\" [ngClass]=\"item.classes?.wrapper\"\r\n  (click)=\"selectItem(item);\">\r\n\r\n  <div class=\"cmat-vertical-navigation-item\">\r\n\r\n    \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    \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    \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\r\n@if ((item.hidden && !item.hidden(item)) || !item.hidden) {\r\n\r\n@if (item.type === 'basic') {\r\n<cmat-vertical-navigation-basic-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\"\r\n  [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\" (editSelectedItemChanged)=\"selectItem($event)\"\r\n  (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\">\r\n</cmat-vertical-navigation-basic-item>\r\n}\r\n\r\n@if (item.type === 'collapsable') {\r\n<cmat-vertical-navigation-collapsable-item [item]=\"item\" [name]=\"name\" [autoCollapse]=\"autoCollapse\"\r\n  [editState]=\"editState\" [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\" (editSelectedItemChanged)=\"selectItem($event)\"\r\n  (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\">\r\n</cmat-vertical-navigation-collapsable-item>\r\n}\r\n\r\n@if (item.type === 'divider') {\r\n<cmat-vertical-navigation-divider-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\"\r\n  (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-divider-item>\r\n}\r\n\r\n@if (item.type === 'group') {\r\n<cmat-vertical-navigation-group-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\"\r\n  [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\" (editSelectedItemChanged)=\"selectItem($event)\"\r\n  (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\"></cmat-vertical-navigation-group-item>\r\n}\r\n\r\n@if (item.type === 'spacer') {\r\n<cmat-vertical-navigation-spacer-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\"\r\n  (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-spacer-item>\r\n}\r\n}\r\n}\r\n", dependencies: [{ kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationGroupItemComponent), selector: "cmat-vertical-navigation-group-item", inputs: ["autoCollapse", "item", "name", "editState", "hasRouteReuseStrategy"], outputs: ["routeReuseStrategyEmitUrl", "editSelectedItemChanged"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatIconModule) }, { kind: "component", type: i0.forwardRef(() => i2.MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationBasicItemComponent), selector: "cmat-vertical-navigation-basic-item", inputs: ["item", "name", "editState", "hasRouteReuseStrategy"], outputs: ["routeReuseStrategyEmitUrl", "editSelectedItemChanged"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationDividerItemComponent), selector: "cmat-vertical-navigation-divider-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationCollapsableItemComponent), selector: "cmat-vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item", "name", "editState", "hasRouteReuseStrategy"], outputs: ["routeReuseStrategyEmitUrl", "editSelectedItemChanged"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationSpacerItemComponent), selector: "cmat-vertical-navigation-spacer-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatVerticalNavigationGroupItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CmatVerticalNavigationGroupItemComponent, isStandalone: true, selector: "cmat-vertical-navigation-group-item", inputs: { autoCollapse: { classPropertyName: "autoCollapse", publicName: "autoCollapse", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, editState: { classPropertyName: "editState", publicName: "editState", isSignal: true, isRequired: false, transformFunction: null }, hasRouteReuseStrategy: { classPropertyName: "hasRouteReuseStrategy", publicName: "hasRouteReuseStrategy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { routeReuseStrategyEmitUrl: "routeReuseStrategyEmitUrl", editSelectedItemChanged: "editSelectedItemChanged" }, ngImport: i0, template: "<div\r\n  class=\"cmat-vertical-navigation-item-wrapper\"\r\n  role=\"presentation\"\r\n  [class.cmat-vertical-navigation-item-has-subtitle]=\"!!item().subTitle\"\r\n  [ngClass]=\"item().classes?.wrapper\"\r\n  (click)=\"selectItem(item())\"\r\n>\r\n  <div class=\"cmat-vertical-navigation-item\">\r\n    @if (item().icon) {\r\n      <mat-icon\r\n        class=\"cmat-vertical-navigation-item-icon\"\r\n        [ngClass]=\"item().classes?.icon\"\r\n        [svgIcon]=\"item().icon!\"\r\n      >\r\n      </mat-icon>\r\n    }\r\n\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    @if (item().badge) {\r\n      <div class=\"cmat-vertical-navigation-item-badge\">\r\n        <div\r\n          class=\"cmat-vertical-navigation-item-badge-content\"\r\n          [ngClass]=\"item().badge!.classes\"\r\n        >\r\n          {{ item().badge!.title }}\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n\r\n@for (item of item().children; track trackByFn($index, item)) {\r\n  @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\r\n    @if (item.type === \"basic\") {\r\n      <cmat-vertical-navigation-basic-item\r\n        [item]=\"item\"\r\n        [name]=\"name()\"\r\n        [editState]=\"editState()\"\r\n        [hasRouteReuseStrategy]=\"hasRouteReuseStrategy()\"\r\n        (editSelectedItemChanged)=\"selectItem($event)\"\r\n        (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\"\r\n      >\r\n      </cmat-vertical-navigation-basic-item>\r\n    }\r\n\r\n    @if (item.type === \"collapsable\") {\r\n      <cmat-vertical-navigation-collapsable-item\r\n        [item]=\"item\"\r\n        [name]=\"name()\"\r\n        [autoCollapse]=\"autoCollapse()\"\r\n        [editState]=\"editState()\"\r\n        [hasRouteReuseStrategy]=\"hasRouteReuseStrategy()\"\r\n        (editSelectedItemChanged)=\"selectItem($event)\"\r\n        (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\"\r\n      >\r\n      </cmat-vertical-navigation-collapsable-item>\r\n    }\r\n\r\n    @if (item.type === \"divider\") {\r\n      <cmat-vertical-navigation-divider-item\r\n        [item]=\"item\"\r\n        [name]=\"name()\"\r\n        [editState]=\"editState()\"\r\n        (editSelectedItemChanged)=\"selectItem($event)\"\r\n      ></cmat-vertical-navigation-divider-item>\r\n    }\r\n\r\n    @if (item.type === \"group\") {\r\n      <cmat-vertical-navigation-group-item\r\n        [item]=\"item\"\r\n        [name]=\"name()\"\r\n        [editState]=\"editState()\"\r\n        [hasRouteReuseStrategy]=\"hasRouteReuseStrategy()\"\r\n        (editSelectedItemChanged)=\"selectItem($event)\"\r\n        (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\"\r\n      ></cmat-vertical-navigation-group-item>\r\n    }\r\n\r\n    @if (item.type === \"spacer\") {\r\n      <cmat-vertical-navigation-spacer-item\r\n        [item]=\"item\"\r\n        [name]=\"name()\"\r\n        [editState]=\"editState()\"\r\n        (editSelectedItemChanged)=\"selectItem($event)\"\r\n      ></cmat-vertical-navigation-spacer-item>\r\n    }\r\n  }\r\n}\r\n", dependencies: [{ kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationGroupItemComponent), selector: "cmat-vertical-navigation-group-item", inputs: ["autoCollapse", "item", "name", "editState", "hasRouteReuseStrategy"], outputs: ["routeReuseStrategyEmitUrl", "editSelectedItemChanged"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatIconModule) }, { kind: "component", type: i0.forwardRef(() => i2.MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationBasicItemComponent), selector: "cmat-vertical-navigation-basic-item", inputs: ["item", "name", "editState", "hasRouteReuseStrategy"], outputs: ["routeReuseStrategyEmitUrl", "editSelectedItemChanged"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationDividerItemComponent), selector: "cmat-vertical-navigation-divider-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationCollapsableItemComponent), selector: "cmat-vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item", "name", "editState", "hasRouteReuseStrategy"], outputs: ["routeReuseStrategyEmitUrl", "editSelectedItemChanged"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationSpacerItemComponent), selector: "cmat-vertical-navigation-spacer-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatVerticalNavigationGroupItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.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: "\r\n<div class=\"cmat-vertical-navigation-item-wrapper\" role=\"presentation\"\r\n  [class.cmat-vertical-navigation-item-has-subtitle]=\"!!item.subTitle\" [ngClass]=\"item.classes?.wrapper\"\r\n  (click)=\"selectItem(item);\">\r\n\r\n  <div class=\"cmat-vertical-navigation-item\">\r\n\r\n    \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    \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    \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\r\n@if ((item.hidden && !item.hidden(item)) || !item.hidden) {\r\n\r\n@if (item.type === 'basic') {\r\n<cmat-vertical-navigation-basic-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\"\r\n  [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\" (editSelectedItemChanged)=\"selectItem($event)\"\r\n  (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\">\r\n</cmat-vertical-navigation-basic-item>\r\n}\r\n\r\n@if (item.type === 'collapsable') {\r\n<cmat-vertical-navigation-collapsable-item [item]=\"item\" [name]=\"name\" [autoCollapse]=\"autoCollapse\"\r\n  [editState]=\"editState\" [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\" (editSelectedItemChanged)=\"selectItem($event)\"\r\n  (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\">\r\n</cmat-vertical-navigation-collapsable-item>\r\n}\r\n\r\n@if (item.type === 'divider') {\r\n<cmat-vertical-navigation-divider-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\"\r\n  (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-divider-item>\r\n}\r\n\r\n@if (item.type === 'group') {\r\n<cmat-vertical-navigation-group-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\"\r\n  [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\" (editSelectedItemChanged)=\"selectItem($event)\"\r\n  (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\"></cmat-vertical-navigation-group-item>\r\n}\r\n\r\n@if (item.type === 'spacer') {\r\n<cmat-vertical-navigation-spacer-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\"\r\n  (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-spacer-item>\r\n}\r\n}\r\n}\r\n" }]
-        }], propDecorators: { autoCollapse: [{
-                type: Input
-            }], item: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }], editState: [{
-                type: Input
-            }], hasRouteReuseStrategy: [{
-                type: Input
-            }], routeReuseStrategyEmitUrl: [{
-                type: Output
-            }], editSelectedItemChanged: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'cmat-vertical-navigation-group-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        NgClass,
+                        MatIconModule,
+                        CmatVerticalNavigationBasicItemComponent,
+                        CmatVerticalNavigationDividerItemComponent,
+                        forwardRef(() => CmatVerticalNavigationGroupItemComponent),
+                        forwardRef(() => CmatVerticalNavigationCollapsableItemComponent),
+                        CmatVerticalNavigationSpacerItemComponent,
+                    ], template: "<div\r\n  class=\"cmat-vertical-navigation-item-wrapper\"\r\n  role=\"presentation\"\r\n  [class.cmat-vertical-navigation-item-has-subtitle]=\"!!item().subTitle\"\r\n  [ngClass]=\"item().classes?.wrapper\"\r\n  (click)=\"selectItem(item())\"\r\n>\r\n  <div class=\"cmat-vertical-navigation-item\">\r\n    @if (item().icon) {\r\n      <mat-icon\r\n        class=\"cmat-vertical-navigation-item-icon\"\r\n        [ngClass]=\"item().classes?.icon\"\r\n        [svgIcon]=\"item().icon!\"\r\n      >\r\n      </mat-icon>\r\n    }\r\n\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    @if (item().badge) {\r\n      <div class=\"cmat-vertical-navigation-item-badge\">\r\n        <div\r\n          class=\"cmat-vertical-navigation-item-badge-content\"\r\n          [ngClass]=\"item().badge!.classes\"\r\n        >\r\n          {{ item().badge!.title }}\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n\r\n@for (item of item().children; track trackByFn($index, item)) {\r\n  @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\r\n    @if (item.type === \"basic\") {\r\n      <cmat-vertical-navigation-basic-item\r\n        [item]=\"item\"\r\n        [name]=\"name()\"\r\n        [editState]=\"editState()\"\r\n        [hasRouteReuseStrategy]=\"hasRouteReuseStrategy()\"\r\n        (editSelectedItemChanged)=\"selectItem($event)\"\r\n        (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\"\r\n      >\r\n      </cmat-vertical-navigation-basic-item>\r\n    }\r\n\r\n    @if (item.type === \"collapsable\") {\r\n      <cmat-vertical-navigation-collapsable-item\r\n        [item]=\"item\"\r\n        [name]=\"name()\"\r\n        [autoCollapse]=\"autoCollapse()\"\r\n        [editState]=\"editState()\"\r\n        [hasRouteReuseStrategy]=\"hasRouteReuseStrategy()\"\r\n        (editSelectedItemChanged)=\"selectItem($event)\"\r\n        (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\"\r\n      >\r\n      </cmat-vertical-navigation-collapsable-item>\r\n    }\r\n\r\n    @if (item.type === \"divider\") {\r\n      <cmat-vertical-navigation-divider-item\r\n        [item]=\"item\"\r\n        [name]=\"name()\"\r\n        [editState]=\"editState()\"\r\n        (editSelectedItemChanged)=\"selectItem($event)\"\r\n      ></cmat-vertical-navigation-divider-item>\r\n    }\r\n\r\n    @if (item.type === \"group\") {\r\n      <cmat-vertical-navigation-group-item\r\n        [item]=\"item\"\r\n        [name]=\"name()\"\r\n        [editState]=\"editState()\"\r\n        [hasRouteReuseStrategy]=\"hasRouteReuseStrategy()\"\r\n        (editSelectedItemChanged)=\"selectItem($event)\"\r\n        (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\"\r\n      ></cmat-vertical-navigation-group-item>\r\n    }\r\n\r\n    @if (item.type === \"spacer\") {\r\n      <cmat-vertical-navigation-spacer-item\r\n        [item]=\"item\"\r\n        [name]=\"name()\"\r\n        [editState]=\"editState()\"\r\n        (editSelectedItemChanged)=\"selectItem($event)\"\r\n      ></cmat-vertical-navigation-spacer-item>\r\n    }\r\n  }\r\n}\r\n" }]
+        }], propDecorators: { routeReuseStrategyEmitUrl: [{ type: i0.Output, args: ["routeReuseStrategyEmitUrl"] }], editSelectedItemChanged: [{ type: i0.Output, args: ["editSelectedItemChanged"] }], autoCollapse: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoCollapse", required: false }] }], item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], editState: [{ type: i0.Input, args: [{ isSignal: true, alias: "editState", required: false }] }], hasRouteReuseStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasRouteReuseStrategy", required: false }] }] } });
 
+/* eslint-disable @typescript-eslint/naming-convention */
 class CmatVerticalNavigationCollapsableItemComponent {
     constructor() {
-        this.editState = false;
-        this.hasRouteReuseStrategy = false;
-        this.routeReuseStrategyEmitUrl = new EventEmitter();
-        this.editSelectedItemChanged = new EventEmitter();
-        this.isCollapsed = true;
-        this.isExpanded = false;
+        this.routeReuseStrategyEmitUrl = output();
+        this.editSelectedItemChanged = output();
+        this.autoCollapse = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "autoCollapse" }] : /* istanbul ignore next */ []));
+        this.item = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
+        this.name = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+        this.editState = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "editState" }] : /* istanbul ignore next */ []));
+        this.hasRouteReuseStrategy = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasRouteReuseStrategy" }] : /* istanbul ignore next */ []));
+        this.isCollapsed = signal(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
+        this.isExpanded = computed(() => !this.isCollapsed(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isExpanded" }] : /* istanbul ignore next */ []));
         this._router = inject(Router);
         this._destroyRef = inject(DestroyRef);
         this._cmatNavigationService = inject(CmatNavigationService);
     }
-    get isCollapsedClass() {
-        return this.isCollapsed;
-    }
-    get isExpandedClass() {
-        return this.isExpanded;
-    }
     ngOnInit() {
-        this._cmatVerticalNavigationComponent = this._cmatNavigationService.getComponent(this.name);
+        this._cmatVerticalNavigationComponent =
+            this._cmatNavigationService.getComponent(this.name());
         if (!this._cmatVerticalNavigationComponent) {
             return;
         }
-        if (this._hasActiveChild(this.item, this._router.url)) {
+        const autoCollapse = this.autoCollapse();
+        if (this._hasActiveChild(this.item(), this._router.url)) {
             this.expand();
         }
         else {
-            if (this.autoCollapse) {
+            if (autoCollapse) {
                 this.collapse();
             }
         }
@@ -415,24 +440,25 @@ class CmatVerticalNavigationCollapsableItemComponent {
             if (collapsedItem === null) {
                 return;
             }
-            if (this._isChildrenOf(collapsedItem, this.item)) {
+            if (this._isChildrenOf(collapsedItem, this.item())) {
                 this.collapse();
             }
         });
-        if (this.autoCollapse) {
+        if (autoCollapse) {
             this._cmatVerticalNavigationComponent.onCollapsableItemExpanded
                 .pipe(takeUntilDestroyed(this._destroyRef))
                 .subscribe((expandedItem) => {
                 if (expandedItem === null) {
                     return;
                 }
-                if (this._isChildrenOf(this.item, expandedItem)) {
+                const item = this.item();
+                if (this._isChildrenOf(item, expandedItem)) {
                     return;
                 }
-                if (this._hasActiveChild(this.item, this._router.url)) {
+                if (this._hasActiveChild(item, this._router.url)) {
                     return;
                 }
-                if (this.item === expandedItem) {
+                if (item === expandedItem) {
                     return;
                 }
                 this.collapse();
@@ -441,40 +467,40 @@ class CmatVerticalNavigationCollapsableItemComponent {
         this._router.events
             .pipe(filter((event) => event instanceof NavigationEnd), takeUntilDestroyed(this._destroyRef))
             .subscribe((event) => {
-            if (this._hasActiveChild(this.item, event.urlAfterRedirects)) {
+            if (this._hasActiveChild(this.item(), event.urlAfterRedirects)) {
                 this.expand();
             }
             else {
-                if (this.autoCollapse) {
+                if (this.autoCollapse()) {
                     this.collapse();
                 }
             }
         });
     }
     collapse() {
-        if (this.item.disabled || !this._cmatVerticalNavigationComponent) {
+        const item = this.item();
+        if (item.disabled || !this._cmatVerticalNavigationComponent) {
             return;
         }
-        if (this.isCollapsed) {
+        if (this.isCollapsed()) {
             return;
         }
-        this.isCollapsed = true;
-        this.isExpanded = !this.isCollapsed;
-        this._cmatVerticalNavigationComponent.onCollapsableItemCollapsed.next(this.item);
+        this.isCollapsed.set(true);
+        this._cmatVerticalNavigationComponent.onCollapsableItemCollapsed.next(item);
     }
     expand() {
-        if (this.item.disabled || !this._cmatVerticalNavigationComponent) {
+        const item = this.item();
+        if (item.disabled || !this._cmatVerticalNavigationComponent) {
             return;
         }
-        if (!this.isCollapsed) {
+        if (!this.isCollapsed()) {
             return;
         }
-        this.isCollapsed = false;
-        this.isExpanded = !this.isCollapsed;
-        this._cmatVerticalNavigationComponent.onCollapsableItemExpanded.next(this.item);
+        this.isCollapsed.set(false);
+        this._cmatVerticalNavigationComponent.onCollapsableItemExpanded.next(item);
     }
     toggleCollapsable() {
-        if (this.isCollapsed) {
+        if (this.isCollapsed()) {
             this.expand();
         }
         else {
@@ -501,10 +527,13 @@ class CmatVerticalNavigationCollapsableItemComponent {
                     return true;
                 }
             }
-            if (child.link && isActive(child.link, this._router, {
-                paths: child.exactMatch || false ? 'exact' : 'subset',
-                queryParams: child.exactMatch || false ? 'exact' : 'subset', matrixParams: 'ignored', fragment: 'ignored'
-            })()) {
+            if (child.link &&
+                isActive(child.link, this._router, {
+                    paths: child.exactMatch || false ? 'exact' : 'subset',
+                    queryParams: child.exactMatch || false ? 'exact' : 'subset',
+                    matrixParams: 'ignored',
+                    fragment: 'ignored',
+                })()) {
                 return true;
             }
         }
@@ -527,50 +556,54 @@ class CmatVerticalNavigationCollapsableItemComponent {
         }
         return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatVerticalNavigationCollapsableItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CmatVerticalNavigationCollapsableItemComponent, isStandalone: true, selector: "cmat-vertical-navigation-collapsable-item", inputs: { autoCollapse: "autoCollapse", item: "item", name: "name", editState: "editState", hasRouteReuseStrategy: "hasRouteReuseStrategy" }, outputs: { routeReuseStrategyEmitUrl: "routeReuseStrategyEmitUrl", editSelectedItemChanged: "editSelectedItemChanged" }, host: { properties: { "class.cmat-vertical-navigation-item-collapsed": "this.isCollapsedClass", "class.cmat-vertical-navigation-item-expanded": "this.isExpandedClass" } }, ngImport: i0, template: "<div class=\"cmat-vertical-navigation-item-wrapper\" [class.cmat-vertical-navigation-item-has-subtitle]=\"!!item.subTitle\"\r\n  [ngClass]=\"item.classes?.wrapper\">\r\n\r\n  <div class=\"cmat-vertical-navigation-item\" role=\"presentation\"\r\n    [ngClass]=\"{'cmat-vertical-navigation-item-disabled': item.disabled}\" [matTooltip]=\"item.tooltip || ''\"\r\n    (click)=\"toggleCollapsable();selectItem(item);\">\r\n\r\n    \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    \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    \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    \r\n    <mat-icon class=\"cmat-vertical-navigation-item-arrow icon-size-4\" [svgIcon]=\"'heroicons_outline:chevron-right'\">\r\n    </mat-icon>\r\n\r\n  </div>\r\n\r\n</div>\r\n\r\n@if (!isCollapsed) {\r\n<div animate.leave=\"expand-collapse-animation-leaving\"\r\n  class=\"cmat-vertical-navigation-item-children expand-collapse-animation\">\r\n  <div>\r\n    @for (item of item.children; track trackByFn($index, item)) {\r\n    \r\n    @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\r\n    \r\n    @if (item.type === 'basic') {\r\n    <cmat-vertical-navigation-basic-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\"\r\n      [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\" (editSelectedItemChanged)=\"selectItem($event)\"\r\n      (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\">\r\n    </cmat-vertical-navigation-basic-item>\r\n    }\r\n    \r\n    @if (item.type === 'collapsable') {\r\n    <cmat-vertical-navigation-collapsable-item [item]=\"item\" [name]=\"name\" [autoCollapse]=\"autoCollapse\"\r\n      [editState]=\"editState\" [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\"\r\n      (editSelectedItemChanged)=\"selectItem($event)\" (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\">\r\n    </cmat-vertical-navigation-collapsable-item>\r\n    }\r\n    \r\n    @if (item.type === 'divider') {\r\n    <cmat-vertical-navigation-divider-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\"\r\n      (editSelectedItemChanged)=\"selectItem($event)\">\r\n    </cmat-vertical-navigation-divider-item>\r\n    }\r\n    \r\n    @if (item.type === 'group') {\r\n    <cmat-vertical-navigation-group-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\"\r\n      [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\" (editSelectedItemChanged)=\"selectItem($event)\"\r\n      (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\"></cmat-vertical-navigation-group-item>\r\n    }\r\n    \r\n    @if (item.type === 'spacer') {\r\n    <cmat-vertical-navigation-spacer-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\"\r\n      (editSelectedItemChanged)=\"selectItem($event)\">\r\n    </cmat-vertical-navigation-spacer-item>\r\n    }\r\n    }\r\n    }\r\n  </div>\r\n</div>\r\n}\r\n", styles: [".expand-collapse-animation{display:grid!important;grid-template-rows:1fr;overflow:hidden;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}@starting-style{.expand-collapse-animation{grid-template-rows:0fr}}.expand-collapse-animation>div{min-height:0;transition:opacity 225ms ease-in-out}.expand-collapse-animation.collapsed{grid-template-rows:0fr}.expand-collapse-animation.collapsed>div{opacity:0}.expand-collapse-animation-leaving{grid-template-rows:0fr}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationCollapsableItemComponent), selector: "cmat-vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item", "name", "editState", "hasRouteReuseStrategy"], outputs: ["routeReuseStrategyEmitUrl", "editSelectedItemChanged"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatTooltipModule) }, { kind: "directive", type: i0.forwardRef(() => i1.MatTooltip), selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatIconModule) }, { kind: "component", type: i0.forwardRef(() => i2.MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationBasicItemComponent), selector: "cmat-vertical-navigation-basic-item", inputs: ["item", "name", "editState", "hasRouteReuseStrategy"], outputs: ["routeReuseStrategyEmitUrl", "editSelectedItemChanged"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationGroupItemComponent), selector: "cmat-vertical-navigation-group-item", inputs: ["autoCollapse", "item", "name", "editState", "hasRouteReuseStrategy"], outputs: ["routeReuseStrategyEmitUrl", "editSelectedItemChanged"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationDividerItemComponent), selector: "cmat-vertical-navigation-divider-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationSpacerItemComponent), selector: "cmat-vertical-navigation-spacer-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatVerticalNavigationCollapsableItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CmatVerticalNavigationCollapsableItemComponent, isStandalone: true, selector: "cmat-vertical-navigation-collapsable-item", inputs: { autoCollapse: { classPropertyName: "autoCollapse", publicName: "autoCollapse", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, editState: { classPropertyName: "editState", publicName: "editState", isSignal: true, isRequired: false, transformFunction: null }, hasRouteReuseStrategy: { classPropertyName: "hasRouteReuseStrategy", publicName: "hasRouteReuseStrategy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { routeReuseStrategyEmitUrl: "routeReuseStrategyEmitUrl", editSelectedItemChanged: "editSelectedItemChanged" }, host: { properties: { "class.cmat-vertical-navigation-item-collapsed": "isCollapsed()", "class.cmat-vertical-navigation-item-expanded": "isExpanded()" } }, ngImport: i0, template: "<div\r\n  class=\"cmat-vertical-navigation-item-wrapper\"\r\n  [class.cmat-vertical-navigation-item-has-subtitle]=\"!!item().subTitle\"\r\n  [ngClass]=\"item().classes?.wrapper\"\r\n>\r\n  <div\r\n    class=\"cmat-vertical-navigation-item\"\r\n    role=\"presentation\"\r\n    [ngClass]=\"{ 'cmat-vertical-navigation-item-disabled': item().disabled }\"\r\n    [matTooltip]=\"item().tooltip || ''\"\r\n    (click)=\"toggleCollapsable(); selectItem(item())\"\r\n  >\r\n    @if (item().icon) {\r\n      <mat-icon\r\n        class=\"cmat-vertical-navigation-item-icon\"\r\n        [ngClass]=\"item().classes?.icon\"\r\n        [svgIcon]=\"item().icon!\"\r\n      >\r\n      </mat-icon>\r\n    }\r\n\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    @if (item().badge) {\r\n      <div class=\"cmat-vertical-navigation-item-badge\">\r\n        <div\r\n          class=\"cmat-vertical-navigation-item-badge-content\"\r\n          [ngClass]=\"item().badge!.classes\"\r\n        >\r\n          {{ item().badge!.title }}\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n    <mat-icon\r\n      class=\"cmat-vertical-navigation-item-arrow icon-size-4\"\r\n      [svgIcon]=\"'heroicons_outline:chevron-right'\"\r\n    >\r\n    </mat-icon>\r\n  </div>\r\n</div>\r\n\r\n@if (!isCollapsed()) {\r\n  <div\r\n    animate.leave=\"expand-collapse-animation-leaving\"\r\n    class=\"cmat-vertical-navigation-item-children expand-collapse-animation\"\r\n  >\r\n    <div>\r\n      @for (item of item().children; track trackByFn($index, item)) {\r\n        @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\r\n          @if (item.type === \"basic\") {\r\n            <cmat-vertical-navigation-basic-item\r\n              [item]=\"item\"\r\n              [name]=\"name()\"\r\n              [editState]=\"editState()\"\r\n              [hasRouteReuseStrategy]=\"hasRouteReuseStrategy()\"\r\n              (editSelectedItemChanged)=\"selectItem($event)\"\r\n              (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\"\r\n            >\r\n            </cmat-vertical-navigation-basic-item>\r\n          }\r\n\r\n          @if (item.type === \"collapsable\") {\r\n            <cmat-vertical-navigation-collapsable-item\r\n              [item]=\"item\"\r\n              [name]=\"name()\"\r\n              [autoCollapse]=\"autoCollapse()\"\r\n              [editState]=\"editState()\"\r\n              [hasRouteReuseStrategy]=\"hasRouteReuseStrategy()\"\r\n              (editSelectedItemChanged)=\"selectItem($event)\"\r\n              (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\"\r\n            >\r\n            </cmat-vertical-navigation-collapsable-item>\r\n          }\r\n\r\n          @if (item.type === \"divider\") {\r\n            <cmat-vertical-navigation-divider-item\r\n              [item]=\"item\"\r\n              [name]=\"name()\"\r\n              [editState]=\"editState()\"\r\n              (editSelectedItemChanged)=\"selectItem($event)\"\r\n            >\r\n            </cmat-vertical-navigation-divider-item>\r\n          }\r\n\r\n          @if (item.type === \"group\") {\r\n            <cmat-vertical-navigation-group-item\r\n              [item]=\"item\"\r\n              [name]=\"name()\"\r\n              [editState]=\"editState()\"\r\n              [hasRouteReuseStrategy]=\"hasRouteReuseStrategy()\"\r\n              (editSelectedItemChanged)=\"selectItem($event)\"\r\n              (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\"\r\n            ></cmat-vertical-navigation-group-item>\r\n          }\r\n\r\n          @if (item.type === \"spacer\") {\r\n            <cmat-vertical-navigation-spacer-item\r\n              [item]=\"item\"\r\n              [name]=\"name()\"\r\n              [editState]=\"editState()\"\r\n              (editSelectedItemChanged)=\"selectItem($event)\"\r\n            >\r\n            </cmat-vertical-navigation-spacer-item>\r\n          }\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n}", styles: [".expand-collapse-animation{display:grid!important;grid-template-rows:1fr;overflow:hidden;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}@starting-style{.expand-collapse-animation{grid-template-rows:0fr}}.expand-collapse-animation>div{min-height:0;transition:opacity 225ms ease-in-out}.expand-collapse-animation.collapsed{grid-template-rows:0fr}.expand-collapse-animation.collapsed>div{opacity:0}.expand-collapse-animation-leaving{grid-template-rows:0fr}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationCollapsableItemComponent), selector: "cmat-vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item", "name", "editState", "hasRouteReuseStrategy"], outputs: ["routeReuseStrategyEmitUrl", "editSelectedItemChanged"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatTooltipModule) }, { kind: "directive", type: i0.forwardRef(() => i1.MatTooltip), selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatIconModule) }, { kind: "component", type: i0.forwardRef(() => i2.MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationBasicItemComponent), selector: "cmat-vertical-navigation-basic-item", inputs: ["item", "name", "editState", "hasRouteReuseStrategy"], outputs: ["routeReuseStrategyEmitUrl", "editSelectedItemChanged"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationGroupItemComponent), selector: "cmat-vertical-navigation-group-item", inputs: ["autoCollapse", "item", "name", "editState", "hasRouteReuseStrategy"], outputs: ["routeReuseStrategyEmitUrl", "editSelectedItemChanged"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationDividerItemComponent), selector: "cmat-vertical-navigation-divider-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationSpacerItemComponent), selector: "cmat-vertical-navigation-spacer-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatVerticalNavigationCollapsableItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatVerticalNavigationCollapsableItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-vertical-navigation-collapsable-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, MatTooltipModule, MatIconModule, CmatVerticalNavigationBasicItemComponent,
+            args: [{ selector: 'cmat-vertical-navigation-collapsable-item', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class.cmat-vertical-navigation-item-collapsed]': 'isCollapsed()',
+                        '[class.cmat-vertical-navigation-item-expanded]': 'isExpanded()',
+                    }, 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\"\r\n    [ngClass]=\"{'cmat-vertical-navigation-item-disabled': item.disabled}\" [matTooltip]=\"item.tooltip || ''\"\r\n    (click)=\"toggleCollapsable();selectItem(item);\">\r\n\r\n    \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    \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    \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    \r\n    <mat-icon class=\"cmat-vertical-navigation-item-arrow icon-size-4\" [svgIcon]=\"'heroicons_outline:chevron-right'\">\r\n    </mat-icon>\r\n\r\n  </div>\r\n\r\n</div>\r\n\r\n@if (!isCollapsed) {\r\n<div animate.leave=\"expand-collapse-animation-leaving\"\r\n  class=\"cmat-vertical-navigation-item-children expand-collapse-animation\">\r\n  <div>\r\n    @for (item of item.children; track trackByFn($index, item)) {\r\n    \r\n    @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\r\n    \r\n    @if (item.type === 'basic') {\r\n    <cmat-vertical-navigation-basic-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\"\r\n      [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\" (editSelectedItemChanged)=\"selectItem($event)\"\r\n      (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\">\r\n    </cmat-vertical-navigation-basic-item>\r\n    }\r\n    \r\n    @if (item.type === 'collapsable') {\r\n    <cmat-vertical-navigation-collapsable-item [item]=\"item\" [name]=\"name\" [autoCollapse]=\"autoCollapse\"\r\n      [editState]=\"editState\" [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\"\r\n      (editSelectedItemChanged)=\"selectItem($event)\" (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\">\r\n    </cmat-vertical-navigation-collapsable-item>\r\n    }\r\n    \r\n    @if (item.type === 'divider') {\r\n    <cmat-vertical-navigation-divider-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\"\r\n      (editSelectedItemChanged)=\"selectItem($event)\">\r\n    </cmat-vertical-navigation-divider-item>\r\n    }\r\n    \r\n    @if (item.type === 'group') {\r\n    <cmat-vertical-navigation-group-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\"\r\n      [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\" (editSelectedItemChanged)=\"selectItem($event)\"\r\n      (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\"></cmat-vertical-navigation-group-item>\r\n    }\r\n    \r\n    @if (item.type === 'spacer') {\r\n    <cmat-vertical-navigation-spacer-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\"\r\n      (editSelectedItemChanged)=\"selectItem($event)\">\r\n    </cmat-vertical-navigation-spacer-item>\r\n    }\r\n    }\r\n    }\r\n  </div>\r\n</div>\r\n}\r\n", styles: [".expand-collapse-animation{display:grid!important;grid-template-rows:1fr;overflow:hidden;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}@starting-style{.expand-collapse-animation{grid-template-rows:0fr}}.expand-collapse-animation>div{min-height:0;transition:opacity 225ms ease-in-out}.expand-collapse-animation.collapsed{grid-template-rows:0fr}.expand-collapse-animation.collapsed>div{opacity:0}.expand-collapse-animation-leaving{grid-template-rows:0fr}\n"] }]
-        }], propDecorators: { autoCollapse: [{
-                type: Input
-            }], item: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }], editState: [{
-                type: Input
-            }], hasRouteReuseStrategy: [{
-                type: Input
-            }], routeReuseStrategyEmitUrl: [{
-                type: Output
-            }], editSelectedItemChanged: [{
-                type: Output
-            }], isCollapsedClass: [{
-                type: HostBinding,
-                args: ['class.cmat-vertical-navigation-item-collapsed']
-            }], isExpandedClass: [{
-                type: HostBinding,
-                args: ['class.cmat-vertical-navigation-item-expanded']
-            }] } });
+                        forwardRef(() => CmatVerticalNavigationGroupItemComponent),
+                        CmatVerticalNavigationDividerItemComponent,
+                        CmatVerticalNavigationSpacerItemComponent,
+                    ], template: "<div\r\n  class=\"cmat-vertical-navigation-item-wrapper\"\r\n  [class.cmat-vertical-navigation-item-has-subtitle]=\"!!item().subTitle\"\r\n  [ngClass]=\"item().classes?.wrapper\"\r\n>\r\n  <div\r\n    class=\"cmat-vertical-navigation-item\"\r\n    role=\"presentation\"\r\n    [ngClass]=\"{ 'cmat-vertical-navigation-item-disabled': item().disabled }\"\r\n    [matTooltip]=\"item().tooltip || ''\"\r\n    (click)=\"toggleCollapsable(); selectItem(item())\"\r\n  >\r\n    @if (item().icon) {\r\n      <mat-icon\r\n        class=\"cmat-vertical-navigation-item-icon\"\r\n        [ngClass]=\"item().classes?.icon\"\r\n        [svgIcon]=\"item().icon!\"\r\n      >\r\n      </mat-icon>\r\n    }\r\n\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    @if (item().badge) {\r\n      <div class=\"cmat-vertical-navigation-item-badge\">\r\n        <div\r\n          class=\"cmat-vertical-navigation-item-badge-content\"\r\n          [ngClass]=\"item().badge!.classes\"\r\n        >\r\n          {{ item().badge!.title }}\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n    <mat-icon\r\n      class=\"cmat-vertical-navigation-item-arrow icon-size-4\"\r\n      [svgIcon]=\"'heroicons_outline:chevron-right'\"\r\n    >\r\n    </mat-icon>\r\n  </div>\r\n</div>\r\n\r\n@if (!isCollapsed()) {\r\n  <div\r\n    animate.leave=\"expand-collapse-animation-leaving\"\r\n    class=\"cmat-vertical-navigation-item-children expand-collapse-animation\"\r\n  >\r\n    <div>\r\n      @for (item of item().children; track trackByFn($index, item)) {\r\n        @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\r\n          @if (item.type === \"basic\") {\r\n            <cmat-vertical-navigation-basic-item\r\n              [item]=\"item\"\r\n              [name]=\"name()\"\r\n              [editState]=\"editState()\"\r\n              [hasRouteReuseStrategy]=\"hasRouteReuseStrategy()\"\r\n              (editSelectedItemChanged)=\"selectItem($event)\"\r\n              (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\"\r\n            >\r\n            </cmat-vertical-navigation-basic-item>\r\n          }\r\n\r\n          @if (item.type === \"collapsable\") {\r\n            <cmat-vertical-navigation-collapsable-item\r\n              [item]=\"item\"\r\n              [name]=\"name()\"\r\n              [autoCollapse]=\"autoCollapse()\"\r\n              [editState]=\"editState()\"\r\n              [hasRouteReuseStrategy]=\"hasRouteReuseStrategy()\"\r\n              (editSelectedItemChanged)=\"selectItem($event)\"\r\n              (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\"\r\n            >\r\n            </cmat-vertical-navigation-collapsable-item>\r\n          }\r\n\r\n          @if (item.type === \"divider\") {\r\n            <cmat-vertical-navigation-divider-item\r\n              [item]=\"item\"\r\n              [name]=\"name()\"\r\n              [editState]=\"editState()\"\r\n              (editSelectedItemChanged)=\"selectItem($event)\"\r\n            >\r\n            </cmat-vertical-navigation-divider-item>\r\n          }\r\n\r\n          @if (item.type === \"group\") {\r\n            <cmat-vertical-navigation-group-item\r\n              [item]=\"item\"\r\n              [name]=\"name()\"\r\n              [editState]=\"editState()\"\r\n              [hasRouteReuseStrategy]=\"hasRouteReuseStrategy()\"\r\n              (editSelectedItemChanged)=\"selectItem($event)\"\r\n              (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\"\r\n            ></cmat-vertical-navigation-group-item>\r\n          }\r\n\r\n          @if (item.type === \"spacer\") {\r\n            <cmat-vertical-navigation-spacer-item\r\n              [item]=\"item\"\r\n              [name]=\"name()\"\r\n              [editState]=\"editState()\"\r\n              (editSelectedItemChanged)=\"selectItem($event)\"\r\n            >\r\n            </cmat-vertical-navigation-spacer-item>\r\n          }\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n}", styles: [".expand-collapse-animation{display:grid!important;grid-template-rows:1fr;overflow:hidden;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}@starting-style{.expand-collapse-animation{grid-template-rows:0fr}}.expand-collapse-animation>div{min-height:0;transition:opacity 225ms ease-in-out}.expand-collapse-animation.collapsed{grid-template-rows:0fr}.expand-collapse-animation.collapsed>div{opacity:0}.expand-collapse-animation-leaving{grid-template-rows:0fr}\n"] }]
+        }], propDecorators: { routeReuseStrategyEmitUrl: [{ type: i0.Output, args: ["routeReuseStrategyEmitUrl"] }], editSelectedItemChanged: [{ type: i0.Output, args: ["editSelectedItemChanged"] }], autoCollapse: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoCollapse", required: false }] }], item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], editState: [{ type: i0.Input, args: [{ isSignal: true, alias: "editState", required: false }] }], hasRouteReuseStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasRouteReuseStrategy", required: false }] }] } });
 
 class CmatVerticalNavigationAsideItemComponent {
     constructor() {
-        this.editState = false;
-        this.hasRouteReuseStrategy = false;
-        this.routeReuseStrategyEmitUrl = new EventEmitter();
-        this.editSelectedItemChanged = new EventEmitter();
-        this.active = false;
+        this.routeReuseStrategyEmitUrl = output();
+        this.editSelectedItemChanged = output();
+        this.activeItemId = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "activeItemId" }] : /* istanbul ignore next */ []));
+        this.autoCollapse = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "autoCollapse" }] : /* istanbul ignore next */ []));
+        this.item = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
+        this.name = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+        this.skipChildren = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "skipChildren" }] : /* istanbul ignore next */ []));
+        this.editState = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "editState" }] : /* istanbul ignore next */ []));
+        this.hasRouteReuseStrategy = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasRouteReuseStrategy" }] : /* istanbul ignore next */ []));
+        this.active = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
         this._router = inject(Router);
         this._destroyRef = inject(DestroyRef);
-    }
-    ngOnChanges(changes) {
-        if ('activeItemId' in changes) {
-            this._markIfActive(this._router.url);
-        }
+        effect(() => {
+            this.activeItemId();
+            untracked(() => {
+                this._markIfActive(this._router.url);
+            });
+        });
     }
     ngOnInit() {
         this._markIfActive(this._router.url);
@@ -603,89 +636,127 @@ class CmatVerticalNavigationAsideItemComponent {
             if (child.type !== 'basic') {
                 continue;
             }
-            if (child.link && isActive(child.link, this._router, {
-                paths: child.exactMatch || false ? 'exact' : 'subset',
-                queryParams: child.exactMatch || false ? 'exact' : 'subset', fragment: 'ignored', matrixParams: 'ignored'
-            })()) {
+            if (child.link &&
+                isActive(child.link, this._router, {
+                    paths: child.exactMatch || false ? 'exact' : 'subset',
+                    queryParams: child.exactMatch || false ? 'exact' : 'subset',
+                    fragment: 'ignored',
+                    matrixParams: 'ignored',
+                })()) {
                 return true;
             }
         }
         return false;
     }
     _markIfActive(currentUrl) {
-        this.active = this.activeItemId === this.item.id;
-        if (this._hasActiveChild(this.item, currentUrl)) {
-            this.active = true;
+        this.active.set(this.activeItemId() === this.item().id);
+        if (this._hasActiveChild(this.item(), currentUrl)) {
+            this.active.set(true);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatVerticalNavigationAsideItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CmatVerticalNavigationAsideItemComponent, isStandalone: true, selector: "cmat-vertical-navigation-aside-item", inputs: { activeItemId: "activeItemId", autoCollapse: "autoCollapse", item: "item", name: "name", skipChildren: "skipChildren", editState: "editState", hasRouteReuseStrategy: "hasRouteReuseStrategy" }, outputs: { routeReuseStrategyEmitUrl: "routeReuseStrategyEmitUrl", editSelectedItemChanged: "editSelectedItemChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cmat-vertical-navigation-item-wrapper\" role=\"presentation\"\r\n  [class.cmat-vertical-navigation-item-has-subtitle]=\"!!item.subTitle\" [ngClass]=\"item.classes?.wrapper\" (click)=\"selectItem(item);\">\r\n\r\n    <div class=\"cmat-vertical-navigation-item\" [ngClass]=\"{'cmat-vertical-navigation-item-active': active,\r\n                    'cmat-vertical-navigation-item-disabled': item.disabled,\r\n                    'cmat-vertical-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\">\r\n\r\n    \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    \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    \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      \r\n      @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\r\n        \r\n        @if (item.type === 'basic') {\r\n          <cmat-vertical-navigation-basic-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\" (editSelectedItemChanged)=\"selectItem($event)\" (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\">\r\n          </cmat-vertical-navigation-basic-item>\r\n        }\r\n        \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        \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        \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        \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}\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: CmatVerticalNavigationBasicItemComponent, selector: "cmat-vertical-navigation-basic-item", inputs: ["item", "name", "editState", "hasRouteReuseStrategy"], outputs: ["routeReuseStrategyEmitUrl", "editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationCollapsableItemComponent, selector: "cmat-vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item", "name", "editState", "hasRouteReuseStrategy"], outputs: ["routeReuseStrategyEmitUrl", "editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationDividerItemComponent, selector: "cmat-vertical-navigation-divider-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationGroupItemComponent, selector: "cmat-vertical-navigation-group-item", inputs: ["autoCollapse", "item", "name", "editState", "hasRouteReuseStrategy"], outputs: ["routeReuseStrategyEmitUrl", "editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationSpacerItemComponent, selector: "cmat-vertical-navigation-spacer-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatVerticalNavigationAsideItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CmatVerticalNavigationAsideItemComponent, isStandalone: true, selector: "cmat-vertical-navigation-aside-item", inputs: { activeItemId: { classPropertyName: "activeItemId", publicName: "activeItemId", isSignal: true, isRequired: false, transformFunction: null }, autoCollapse: { classPropertyName: "autoCollapse", publicName: "autoCollapse", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, skipChildren: { classPropertyName: "skipChildren", publicName: "skipChildren", isSignal: true, isRequired: false, transformFunction: null }, editState: { classPropertyName: "editState", publicName: "editState", isSignal: true, isRequired: false, transformFunction: null }, hasRouteReuseStrategy: { classPropertyName: "hasRouteReuseStrategy", publicName: "hasRouteReuseStrategy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { routeReuseStrategyEmitUrl: "routeReuseStrategyEmitUrl", editSelectedItemChanged: "editSelectedItemChanged" }, ngImport: i0, template: "<div\r\n  class=\"cmat-vertical-navigation-item-wrapper\"\r\n  role=\"presentation\"\r\n  [class.cmat-vertical-navigation-item-has-subtitle]=\"!!item().subTitle\"\r\n  [ngClass]=\"item().classes?.wrapper\"\r\n  (click)=\"selectItem(item())\"\r\n>\r\n  <div\r\n    class=\"cmat-vertical-navigation-item\"\r\n    [ngClass]=\"{\r\n      '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,\r\n    }\"\r\n    [matTooltip]=\"item().tooltip || ''\"\r\n  >\r\n    @if (item().icon) {\r\n      <mat-icon\r\n        class=\"cmat-vertical-navigation-item-icon\"\r\n        [ngClass]=\"item().classes?.icon\"\r\n        [svgIcon]=\"item().icon!\"\r\n      >\r\n      </mat-icon>\r\n    }\r\n\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    @if (item().badge) {\r\n      <div class=\"cmat-vertical-navigation-item-badge\">\r\n        <div\r\n          class=\"cmat-vertical-navigation-item-badge-content\"\r\n          [ngClass]=\"item().badge!.classes\"\r\n        >\r\n          {{ item().badge!.title }}\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\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      @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\r\n        @if (item.type === \"basic\") {\r\n          <cmat-vertical-navigation-basic-item\r\n            [item]=\"item\"\r\n            [name]=\"name()\"\r\n            [editState]=\"editState()\"\r\n            [hasRouteReuseStrategy]=\"hasRouteReuseStrategy()\"\r\n            (editSelectedItemChanged)=\"selectItem($event)\"\r\n            (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\"\r\n          >\r\n          </cmat-vertical-navigation-basic-item>\r\n        }\r\n\r\n        @if (item.type === \"collapsable\") {\r\n          <cmat-vertical-navigation-collapsable-item\r\n            [item]=\"item\"\r\n            [name]=\"name()\"\r\n            [editState]=\"editState()\"\r\n            [autoCollapse]=\"autoCollapse()\"\r\n            (editSelectedItemChanged)=\"selectItem($event)\"\r\n          ></cmat-vertical-navigation-collapsable-item>\r\n        }\r\n\r\n        @if (item.type === \"divider\") {\r\n          <cmat-vertical-navigation-divider-item\r\n            [item]=\"item\"\r\n            [name]=\"name()\"\r\n            [editState]=\"editState()\"\r\n            (editSelectedItemChanged)=\"selectItem($event)\"\r\n          >\r\n          </cmat-vertical-navigation-divider-item>\r\n        }\r\n\r\n        @if (item.type === \"group\") {\r\n          <cmat-vertical-navigation-group-item\r\n            [item]=\"item\"\r\n            [name]=\"name()\"\r\n            [editState]=\"editState()\"\r\n            (editSelectedItemChanged)=\"selectItem($event)\"\r\n          >\r\n          </cmat-vertical-navigation-group-item>\r\n        }\r\n\r\n        @if (item.type === \"spacer\") {\r\n          <cmat-vertical-navigation-spacer-item\r\n            [item]=\"item\"\r\n            [name]=\"name()\"\r\n            [editState]=\"editState()\"\r\n            (editSelectedItemChanged)=\"selectItem($event)\"\r\n          >\r\n          </cmat-vertical-navigation-spacer-item>\r\n        }\r\n      }\r\n    }\r\n  </div>\r\n}", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: CmatVerticalNavigationBasicItemComponent, selector: "cmat-vertical-navigation-basic-item", inputs: ["item", "name", "editState", "hasRouteReuseStrategy"], outputs: ["routeReuseStrategyEmitUrl", "editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationCollapsableItemComponent, selector: "cmat-vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item", "name", "editState", "hasRouteReuseStrategy"], outputs: ["routeReuseStrategyEmitUrl", "editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationDividerItemComponent, selector: "cmat-vertical-navigation-divider-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationGroupItemComponent, selector: "cmat-vertical-navigation-group-item", inputs: ["autoCollapse", "item", "name", "editState", "hasRouteReuseStrategy"], outputs: ["routeReuseStrategyEmitUrl", "editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationSpacerItemComponent, selector: "cmat-vertical-navigation-spacer-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatVerticalNavigationAsideItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.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    \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    \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    \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      \r\n      @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\r\n        \r\n        @if (item.type === 'basic') {\r\n          <cmat-vertical-navigation-basic-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\" (editSelectedItemChanged)=\"selectItem($event)\" (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\">\r\n          </cmat-vertical-navigation-basic-item>\r\n        }\r\n        \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        \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        \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        \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}\r\n" }]
-        }], propDecorators: { activeItemId: [{
-                type: Input
-            }], autoCollapse: [{
-                type: Input
-            }], item: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }], skipChildren: [{
-                type: Input
-            }], editState: [{
-                type: Input
-            }], hasRouteReuseStrategy: [{
-                type: Input
-            }], routeReuseStrategyEmitUrl: [{
-                type: Output
-            }], editSelectedItemChanged: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'cmat-vertical-navigation-aside-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        NgClass,
+                        MatTooltipModule,
+                        MatIconModule,
+                        CmatVerticalNavigationBasicItemComponent,
+                        CmatVerticalNavigationCollapsableItemComponent,
+                        CmatVerticalNavigationDividerItemComponent,
+                        CmatVerticalNavigationGroupItemComponent,
+                        CmatVerticalNavigationSpacerItemComponent,
+                    ], template: "<div\r\n  class=\"cmat-vertical-navigation-item-wrapper\"\r\n  role=\"presentation\"\r\n  [class.cmat-vertical-navigation-item-has-subtitle]=\"!!item().subTitle\"\r\n  [ngClass]=\"item().classes?.wrapper\"\r\n  (click)=\"selectItem(item())\"\r\n>\r\n  <div\r\n    class=\"cmat-vertical-navigation-item\"\r\n    [ngClass]=\"{\r\n      '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,\r\n    }\"\r\n    [matTooltip]=\"item().tooltip || ''\"\r\n  >\r\n    @if (item().icon) {\r\n      <mat-icon\r\n        class=\"cmat-vertical-navigation-item-icon\"\r\n        [ngClass]=\"item().classes?.icon\"\r\n        [svgIcon]=\"item().icon!\"\r\n      >\r\n      </mat-icon>\r\n    }\r\n\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    @if (item().badge) {\r\n      <div class=\"cmat-vertical-navigation-item-badge\">\r\n        <div\r\n          class=\"cmat-vertical-navigation-item-badge-content\"\r\n          [ngClass]=\"item().badge!.classes\"\r\n        >\r\n          {{ item().badge!.title }}\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\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      @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\r\n        @if (item.type === \"basic\") {\r\n          <cmat-vertical-navigation-basic-item\r\n            [item]=\"item\"\r\n            [name]=\"name()\"\r\n            [editState]=\"editState()\"\r\n            [hasRouteReuseStrategy]=\"hasRouteReuseStrategy()\"\r\n            (editSelectedItemChanged)=\"selectItem($event)\"\r\n            (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\"\r\n          >\r\n          </cmat-vertical-navigation-basic-item>\r\n        }\r\n\r\n        @if (item.type === \"collapsable\") {\r\n          <cmat-vertical-navigation-collapsable-item\r\n            [item]=\"item\"\r\n            [name]=\"name()\"\r\n            [editState]=\"editState()\"\r\n            [autoCollapse]=\"autoCollapse()\"\r\n            (editSelectedItemChanged)=\"selectItem($event)\"\r\n          ></cmat-vertical-navigation-collapsable-item>\r\n        }\r\n\r\n        @if (item.type === \"divider\") {\r\n          <cmat-vertical-navigation-divider-item\r\n            [item]=\"item\"\r\n            [name]=\"name()\"\r\n            [editState]=\"editState()\"\r\n            (editSelectedItemChanged)=\"selectItem($event)\"\r\n          >\r\n          </cmat-vertical-navigation-divider-item>\r\n        }\r\n\r\n        @if (item.type === \"group\") {\r\n          <cmat-vertical-navigation-group-item\r\n            [item]=\"item\"\r\n            [name]=\"name()\"\r\n            [editState]=\"editState()\"\r\n            (editSelectedItemChanged)=\"selectItem($event)\"\r\n          >\r\n          </cmat-vertical-navigation-group-item>\r\n        }\r\n\r\n        @if (item.type === \"spacer\") {\r\n          <cmat-vertical-navigation-spacer-item\r\n            [item]=\"item\"\r\n            [name]=\"name()\"\r\n            [editState]=\"editState()\"\r\n            (editSelectedItemChanged)=\"selectItem($event)\"\r\n          >\r\n          </cmat-vertical-navigation-spacer-item>\r\n        }\r\n      }\r\n    }\r\n  </div>\r\n}" }]
+        }], ctorParameters: () => [], propDecorators: { routeReuseStrategyEmitUrl: [{ type: i0.Output, args: ["routeReuseStrategyEmitUrl"] }], editSelectedItemChanged: [{ type: i0.Output, args: ["editSelectedItemChanged"] }], activeItemId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeItemId", required: false }] }], autoCollapse: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoCollapse", required: false }] }], item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], skipChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "skipChildren", required: false }] }], editState: [{ type: i0.Input, args: [{ isSignal: true, alias: "editState", required: false }] }], hasRouteReuseStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasRouteReuseStrategy", required: false }] }] } });
 
-/* eslint-disable @typescript-eslint/member-ordering */
+/* eslint-disable @typescript-eslint/naming-convention */
 class CmatVerticalNavigationComponent {
     constructor() {
-        /* eslint-enable @typescript-eslint/naming-convention */
-        this.classList = signal('', ...(ngDevMode ? [{ debugName: "classList" }] : /* istanbul ignore next */ []));
-        this.styleList = signal('visibility: visible;', ...(ngDevMode ? [{ debugName: "styleList" }] : /* istanbul ignore next */ []));
-        this.appearance = 'default';
-        this.autoCollapse = true;
-        this.editState = false;
-        this.inner = false;
-        this.mode = 'side';
-        this.name = '';
-        this.navigation = [];
-        this.opened = true;
-        this.position = 'left';
-        this.transparentOverlay = false;
-        this.hasRouteReuseStrategy = false;
-        this.routeReuseStrategyEmitUrl = new EventEmitter();
-        this.appearanceChanged = new EventEmitter();
-        this.modeChanged = new EventEmitter();
-        this.openedChanged = new EventEmitter();
-        this.positionChanged = new EventEmitter();
-        this.editSelectedItemChanged = new EventEmitter();
-        this.activeAsideItemId = signal(null, ...(ngDevMode ? [{ debugName: "activeAsideItemId" }] : /* istanbul ignore next */ []));
-        this.asideOverlayVisible = signal(false, ...(ngDevMode ? [{ debugName: "asideOverlayVisible" }] : /* istanbul ignore next */ []));
+        this.routeReuseStrategyEmitUrl = output();
+        this.appearanceChanged = output();
+        this.modeChanged = output();
+        this.openedChanged = output();
+        this.positionChanged = output();
+        this.editSelectedItemChanged = output();
+        this.appearance = input('default', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+        this.autoCollapse = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "autoCollapse" }] : /* istanbul ignore next */ []));
+        this.editState = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "editState" }] : /* istanbul ignore next */ []));
+        this.inner = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inner" }] : /* istanbul ignore next */ []));
+        this.mode = input('side', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+        this.name = input(inject(CmatUtilsService).randomId(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+        this.navigation = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "navigation" }] : /* istanbul ignore next */ []));
+        this.opened = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "opened" }] : /* istanbul ignore next */ []));
+        this.position = input('left', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+        this.transparentOverlay = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "transparentOverlay" }] : /* istanbul ignore next */ []));
+        this.hasRouteReuseStrategy = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasRouteReuseStrategy" }] : /* istanbul ignore next */ []));
+        this.activeAsideItemId = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeAsideItemId" }] : /* istanbul ignore next */ []));
+        this.asideOverlayVisible = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "asideOverlayVisible" }] : /* istanbul ignore next */ []));
         this.onCollapsableItemCollapsed = new ReplaySubject(1);
         this.onCollapsableItemExpanded = new ReplaySubject(1);
-        this.refreshToken = signal(0, ...(ngDevMode ? [{ debugName: "refreshToken" }] : /* istanbul ignore next */ []));
+        this.refreshToken = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "refreshToken" }] : /* istanbul ignore next */ []));
+        this.classList = computed(() => {
+            const opened = this._openedState();
+            return [
+                this._animationsEnabled()
+                    ? 'cmat-vertical-navigation-animations-enabled'
+                    : '',
+                `cmat-vertical-navigation-appearance-${this.appearance()}`,
+                this._hovered() ? 'cmat-vertical-navigation-hover' : '',
+                this.inner() ? 'cmat-vertical-navigation-inner' : '',
+                this.mode() === 'over' ? 'cmat-vertical-navigation-mode-over' : '',
+                this.mode() === 'side' ? 'cmat-vertical-navigation-mode-side' : '',
+                opened ? 'cmat-vertical-navigation-opened' : '',
+                this.position() === 'left'
+                    ? 'cmat-vertical-navigation-position-left'
+                    : '',
+                this.position() === 'right'
+                    ? 'cmat-vertical-navigation-position-right'
+                    : '',
+            ]
+                .filter(Boolean)
+                .join(' ');
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "classList" }] : /* istanbul ignore next */ []));
+        this.styleList = computed(() => {
+            const opened = this._openedState();
+            return `visibility: ${opened ? 'visible' : 'hidden'};`;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "styleList" }] : /* istanbul ignore next */ []));
+        this._openedState = signal(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_openedState" }] : /* istanbul ignore next */ []));
+        this._animationsEnabled = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_animationsEnabled" }] : /* istanbul ignore next */ []));
+        this._hovered = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_hovered" }] : /* istanbul ignore next */ []));
+        this._prevMode = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_prevMode" }] : /* istanbul ignore next */ []));
+        this._navigationContentEl = viewChild('navigationContent', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_navigationContentEl" }] : /* istanbul ignore next */ []));
         this._elementRef = inject(ElementRef);
         this._renderer2 = inject(Renderer2);
         this._router = inject(Router);
         this._scrollStrategyOptions = inject(ScrollStrategyOptions);
         this._cmatNavigationService = inject(CmatNavigationService);
-        this._cmatUtilsService = inject(CmatUtilsService);
         this._destroyRef = inject(DestroyRef);
-        this._animationsEnabled = false;
         this._asideOverlay = null;
         this._asideOverlayClickDestroyFn = null;
         this._asideOverlayLeaveTimeoutId = null;
-        this._hovered = false;
         this._overlay = null;
         this._overlayClickDestroyFn = null;
         this._overlayLeaveTimeoutId = null;
@@ -694,86 +765,87 @@ class CmatVerticalNavigationComponent {
         this._handleOverlayClick = () => {
             this.close();
         };
+        effect(() => {
+            this.appearance();
+            this.appearanceChanged.emit(this.appearance());
+        });
+        effect(() => {
+            const opened = this.opened();
+            untracked(() => {
+                this._toggleOpened(opened);
+            });
+        });
+        effect(() => {
+            const currentMode = this.mode();
+            const previousMode = this._prevMode();
+            untracked(() => {
+                if (currentMode === previousMode)
+                    return;
+                if (previousMode !== null) {
+                    this._disableAnimations();
+                    if (previousMode === 'over' && currentMode === 'side') {
+                        this._hideOverlay();
+                    }
+                    if (previousMode === 'side' && currentMode === 'over') {
+                        this.closeAside();
+                        if (this._openedState()) {
+                            this._showOverlay();
+                        }
+                    }
+                    this.modeChanged.emit(currentMode);
+                    this._modeChangeTimeoutId = window.setTimeout(() => {
+                        this._modeChangeTimeoutId = null;
+                        this._enableAnimations();
+                    }, 500);
+                }
+                this._prevMode.set(currentMode);
+            });
+        });
+        effect(() => {
+            this.position();
+            this.positionChanged.emit(this.position());
+        });
     }
     onMouseenter() {
         this._enableAnimations();
-        this._hovered = true;
-        this._syncHostBindings();
+        this._hovered.set(true);
     }
     onMouseleave() {
         this._enableAnimations();
-        this._hovered = false;
-        this._syncHostBindings();
-    }
-    ngOnChanges(changes) {
-        if ('appearance' in changes) {
-            this.appearanceChanged.emit(changes['appearance'].currentValue);
-        }
-        if ('inner' in changes) {
-            this.inner = coerceBooleanProperty(changes['inner'].currentValue);
-        }
-        if ('mode' in changes) {
-            const currentMode = changes['mode'].currentValue;
-            const previousMode = changes['mode'].previousValue;
-            this._disableAnimations();
-            if (previousMode === 'over' && currentMode === 'side') {
-                this._hideOverlay();
-            }
-            if (previousMode === 'side' && currentMode === 'over') {
-                this.closeAside();
-                if (this.opened) {
-                    this._showOverlay();
-                }
-            }
-            this.modeChanged.emit(currentMode);
-            this._modeChangeTimeoutId = window.setTimeout(() => {
-                this._modeChangeTimeoutId = null;
-                this._enableAnimations();
-            }, 500);
-        }
-        if ('opened' in changes) {
-            this.opened = coerceBooleanProperty(changes['opened'].currentValue);
-            this._toggleOpened(this.opened);
-        }
-        if ('position' in changes) {
-            this.positionChanged.emit(changes['position'].currentValue);
-        }
-        if ('transparentOverlay' in changes) {
-            this.transparentOverlay = coerceBooleanProperty(changes['transparentOverlay'].currentValue);
-        }
-        this._syncHostBindings();
+        this._hovered.set(false);
     }
     ngOnInit() {
-        if (this.name === '') {
-            this.name = this._cmatUtilsService.randomId();
-        }
-        this._cmatNavigationService.registerComponent(this.name, this);
+        this._cmatNavigationService.registerComponent(this.name(), this);
         this._router.events
             .pipe(filter(event => event instanceof NavigationEnd), takeUntilDestroyed(this._destroyRef))
             .subscribe(() => {
-            if (this.mode === 'over' && this.opened) {
+            const mode = this.mode();
+            if (mode === 'over' && this.opened()) {
                 this.close();
             }
-            if (this.mode === 'side' && this.activeAsideItemId()) {
+            if (mode === 'side' && this.activeAsideItemId()) {
                 this.closeAside();
             }
         });
-        this._syncHostBindings();
     }
     ngAfterViewInit() {
         setTimeout(() => {
-            if (!this._navigationContentEl) {
+            const navContent = this._navigationContentEl();
+            if (!navContent) {
                 return;
             }
-            const activeItem = this._navigationContentEl.nativeElement.querySelector('.cmat-vertical-navigation-item-active');
+            const activeItem = navContent.nativeElement.querySelector('.cmat-vertical-navigation-item-active');
             if (activeItem) {
-                if (activeItem.getBoundingClientRect().bottom
-                    <= (this._navigationContentEl.nativeElement.getBoundingClientRect().bottom - Math.abs(-120))) {
+                if (activeItem.getBoundingClientRect().bottom <=
+                    navContent.nativeElement.getBoundingClientRect().bottom -
+                        Math.abs(-120)) {
                     return;
                 }
-                this._navigationContentEl.nativeElement.scrollTo({
+                navContent.nativeElement.scrollTo({
                     top: activeItem.getBoundingClientRect().top -
-                        this._navigationContentEl.nativeElement.getBoundingClientRect().top - 120, behavior: 'smooth'
+                        navContent.nativeElement.getBoundingClientRect().top -
+                        120,
+                    behavior: 'smooth',
                 });
             }
         });
@@ -787,7 +859,7 @@ class CmatVerticalNavigationComponent {
             clearTimeout(this._modeChangeTimeoutId);
             this._modeChangeTimeoutId = null;
         }
-        this._cmatNavigationService.deregisterComponent(this.name);
+        this._cmatNavigationService.deregisterComponent(this.name());
     }
     refresh() {
         this.refreshToken.update(value => value + 1);
@@ -799,7 +871,7 @@ class CmatVerticalNavigationComponent {
         this._setNavigationOpened(false);
     }
     toggle() {
-        if (this.opened) {
+        if (this._openedState()) {
             this.close();
         }
         else {
@@ -882,18 +954,16 @@ class CmatVerticalNavigationComponent {
         }
     }
     _enableAnimations() {
-        if (this._animationsEnabled) {
+        if (this._animationsEnabled()) {
             return;
         }
-        this._animationsEnabled = true;
-        this._syncHostBindings();
+        this._animationsEnabled.set(true);
     }
     _disableAnimations() {
-        if (!this._animationsEnabled) {
+        if (!this._animationsEnabled()) {
             return;
         }
-        this._animationsEnabled = false;
-        this._syncHostBindings();
+        this._animationsEnabled.set(false);
     }
     _showOverlay() {
         if (this._overlay) {
@@ -902,7 +972,7 @@ class CmatVerticalNavigationComponent {
         this._overlay = this._renderer2.createElement('div');
         if (this._overlay) {
             this._overlay.classList.add('cmat-vertical-navigation-overlay');
-            if (this.transparentOverlay) {
+            if (this.transparentOverlay()) {
                 this._overlay.classList.add('cmat-vertical-navigation-overlay-transparent');
             }
             const parentEl = this._elementRef.nativeElement.parentElement;
@@ -985,7 +1055,7 @@ class CmatVerticalNavigationComponent {
         this._setNavigationOpened(open);
     }
     _setNavigationOpened(open) {
-        if (this.opened === open) {
+        if (this._openedState() === open) {
             return;
         }
         if (!open) {
@@ -994,10 +1064,10 @@ class CmatVerticalNavigationComponent {
         this._applyOpenedState(open);
     }
     _applyOpenedState(open) {
-        this.opened = open;
+        this._openedState.set(open);
         this._enableAnimations();
-        if (this.mode === 'over') {
-            if (this.opened) {
+        if (this.mode() === 'over') {
+            if (this._openedState()) {
                 this._showOverlay();
             }
             else {
@@ -1005,7 +1075,6 @@ class CmatVerticalNavigationComponent {
             }
         }
         this.openedChanged.emit(open);
-        this._syncHostBindings();
     }
     _setAsideActive(item) {
         if (this.activeAsideItemId() === (item?.id ?? null)) {
@@ -1020,77 +1089,25 @@ class CmatVerticalNavigationComponent {
             this.activeAsideItemId.set(null);
         }
     }
-    _syncHostBindings() {
-        this.classList.set([
-            this._animationsEnabled ? 'cmat-vertical-navigation-animations-enabled' : '',
-            `cmat-vertical-navigation-appearance-${this.appearance}`,
-            this._hovered ? 'cmat-vertical-navigation-hover' : '',
-            this.inner ? 'cmat-vertical-navigation-inner' : '',
-            this.mode === 'over' ? 'cmat-vertical-navigation-mode-over' : '',
-            this.mode === 'side' ? 'cmat-vertical-navigation-mode-side' : '',
-            this.opened ? 'cmat-vertical-navigation-opened' : '',
-            this.position === 'left' ? 'cmat-vertical-navigation-position-left' : '',
-            this.position === 'right' ? 'cmat-vertical-navigation-position-right' : ''
-        ].filter(Boolean).join(' '));
-        this.styleList.set(`visibility: ${this.opened ? 'visible' : 'hidden'};`);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatVerticalNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CmatVerticalNavigationComponent, isStandalone: true, selector: "cmat-vertical-navigation", inputs: { appearance: "appearance", autoCollapse: "autoCollapse", editState: "editState", inner: "inner", mode: "mode", name: "name", navigation: "navigation", opened: "opened", position: "position", transparentOverlay: "transparentOverlay", hasRouteReuseStrategy: "hasRouteReuseStrategy" }, outputs: { routeReuseStrategyEmitUrl: "routeReuseStrategyEmitUrl", appearanceChanged: "appearanceChanged", modeChanged: "modeChanged", openedChanged: "openedChanged", positionChanged: "positionChanged", editSelectedItemChanged: "editSelectedItemChanged" }, host: { listeners: { "mouseenter": "onMouseenter()", "mouseleave": "onMouseleave()" }, properties: { "class": "classList()", "style": "styleList()" } }, viewQueries: [{ propertyName: "_navigationContentEl", first: true, predicate: ["navigationContent"], descendants: true }], exportAs: ["cmatVerticalNavigation"], usesOnChanges: true, ngImport: i0, template: "<div class=\"cmat-vertical-navigation-wrapper\" [attr.data-refresh]=\"refreshToken()\">\r\n\r\n  \r\n  <div class=\"cmat-vertical-navigation-header\">\r\n    <ng-content select=\"[cmatVerticalNavigationHeader]\"></ng-content>\r\n  </div>\r\n\r\n  \r\n  <div #navigationContent class=\"cmat-vertical-navigation-content py-2 overflow-y-auto scrollbar-custom\">\r\n\r\n    \r\n    <div class=\"cmat-vertical-navigation-content-header\">\r\n      <ng-content select=\"[cmatVerticalNavigationContentHeader]\"></ng-content>\r\n    </div>\r\n\r\n    \r\n    @for (item of navigation; track trackByFn($index, item)) {\r\n    @let isVisible = isItemVisible(item);\r\n    @if (isVisible) {\r\n    @switch (item.type) {\r\n    @case ('aside') {\r\n    <cmat-vertical-navigation-aside-item [item]=\"item\" [name]=\"name\" [activeItemId]=\"activeAsideItemId()\"\r\n      [autoCollapse]=\"autoCollapse\" [skipChildren]=\"true\" [editState]=\"editState\"\r\n      [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\" (click)=\"toggleAside(item)\"\r\n      (editSelectedItemChanged)=\"selectItem($event)\" (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\">\r\n    </cmat-vertical-navigation-aside-item>\r\n    }\r\n    @case ('basic') {\r\n    <cmat-vertical-navigation-basic-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\"\r\n      [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\" (editSelectedItemChanged)=\"selectItem($event)\"\r\n      (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\">\r\n    </cmat-vertical-navigation-basic-item>\r\n    }\r\n    @case ('collapsable') {\r\n    <cmat-vertical-navigation-collapsable-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\"\r\n      [autoCollapse]=\"autoCollapse\" [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\"\r\n      (editSelectedItemChanged)=\"selectItem($event)\"\r\n      (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\"></cmat-vertical-navigation-collapsable-item>\r\n    }\r\n    @case ('divider') {\r\n    <cmat-vertical-navigation-divider-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\"\r\n      (editSelectedItemChanged)=\"selectItem($event)\">\r\n    </cmat-vertical-navigation-divider-item>\r\n    }\r\n    @case ('group') {\r\n    <cmat-vertical-navigation-group-item [item]=\"item\" [name]=\"name\" [autoCollapse]=\"autoCollapse\"\r\n      [editState]=\"editState\" [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\"\r\n      (editSelectedItemChanged)=\"selectItem($event)\" (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\">\r\n    </cmat-vertical-navigation-group-item>\r\n    }\r\n    @case ('spacer') {\r\n    <cmat-vertical-navigation-spacer-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\"\r\n      (editSelectedItemChanged)=\"selectItem($event)\">\r\n    </cmat-vertical-navigation-spacer-item>\r\n    }\r\n    }\r\n    }\r\n    }\r\n\r\n    \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  \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\r\n@if (activeAsideItemId()) {\r\n<div class=\"cmat-vertical-navigation-aside-wrapper overflow-y-auto scrollbar-custom\"\r\n  [animate.enter]=\"position === 'left'?'fade-in-left-animation':'fade-in-right-animation'\"\r\n  [animate.leave]=\"position === 'left'?'fade-out-left-animation':'fade-out-right-animation'\">\r\n  \r\n  @for (item of navigation; track trackByFn($index, item)) {\r\n    @let isVisible = isItemVisible(item);\r\n    @if (isVisible) {\r\n    @if (item.type === 'aside' && item.id === activeAsideItemId()) {\r\n    <cmat-vertical-navigation-aside-item [item]=\"item\" [name]=\"name\" [autoCollapse]=\"autoCollapse\"\r\n      [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\" (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\">\r\n    </cmat-vertical-navigation-aside-item>\r\n  }\r\n  }\r\n  }\r\n</div>\r\n}", styles: ["cmat-vertical-navigation{position:sticky;display:flex;flex-direction:column;flex:1 0 auto;top:0;width:280px;min-width:280px;max-width:280px;height:100%;z-index:200}cmat-vertical-navigation.cmat-vertical-navigation-animations-enabled{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:visibility,margin-left,margin-right,transform,width,max-width,min-width}cmat-vertical-navigation.cmat-vertical-navigation-animations-enabled .cmat-vertical-navigation-wrapper{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:width,max-width,min-width}cmat-vertical-navigation.cmat-vertical-navigation-mode-over{position:fixed;top:0;bottom:0}cmat-vertical-navigation.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side{margin-left:-280px}cmat-vertical-navigation.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side.cmat-vertical-navigation-opened{margin-left:0}cmat-vertical-navigation.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-over{left:0;transform:translate3d(-100%,0,0)}cmat-vertical-navigation.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-over.cmat-vertical-navigation-opened{transform:translateZ(0)}cmat-vertical-navigation.cmat-vertical-navigation-position-left .cmat-vertical-navigation-wrapper{left:0}cmat-vertical-navigation.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side{margin-right:-280px}cmat-vertical-navigation.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side.cmat-vertical-navigation-opened{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-over{right:0;transform:translate3d(100%,0,0)}cmat-vertical-navigation.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-over.cmat-vertical-navigation-opened{transform:translateZ(0)}cmat-vertical-navigation.cmat-vertical-navigation-position-right .cmat-vertical-navigation-wrapper{right:0}cmat-vertical-navigation.cmat-vertical-navigation-inner{position:relative;width:auto;min-width:0;max-width:none;height:auto;min-height:0;max-height:none;box-shadow:none}cmat-vertical-navigation.cmat-vertical-navigation-inner .cmat-vertical-navigation-wrapper{position:relative;overflow:visible;height:auto}cmat-vertical-navigation.cmat-vertical-navigation-inner .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content{overflow:visible!important}cmat-vertical-navigation .cmat-vertical-navigation-wrapper{position:absolute;display:flex;flex:1 1 auto;flex-direction:column;top:0;bottom:0;width:100%;height:100%;overflow:hidden;z-index:10;background:inherit;box-shadow:inset -1px 0 0 var(--cmat-border)}cmat-vertical-navigation .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content{flex:1 1 auto;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}cmat-vertical-navigation .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-divider-item{margin:24px 0}cmat-vertical-navigation .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-group-item{margin-top:24px}cmat-vertical-navigation .cmat-vertical-navigation-aside-wrapper{position:absolute;display:flex;flex:1 1 auto;flex-direction:column;top:0;bottom:0;left:280px;width:280px;height:100%;z-index:5;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;background:inherit}cmat-vertical-navigation .cmat-vertical-navigation-aside-wrapper>cmat-vertical-navigation-aside-item{padding:24px 0}cmat-vertical-navigation .cmat-vertical-navigation-aside-wrapper>cmat-vertical-navigation-aside-item>.cmat-vertical-navigation-item-wrapper{display:none!important}cmat-vertical-navigation.cmat-vertical-navigation-position-right .cmat-vertical-navigation-aside-wrapper{left:auto;right:280px}cmat-vertical-navigation cmat-vertical-navigation-aside-item,cmat-vertical-navigation cmat-vertical-navigation-basic-item,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item,cmat-vertical-navigation cmat-vertical-navigation-divider-item,cmat-vertical-navigation cmat-vertical-navigation-group-item,cmat-vertical-navigation cmat-vertical-navigation-spacer-item{display:flex;flex-direction:column;flex:1 0 auto;-webkit-user-select:none;user-select:none}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{position:relative;display:flex;align-items:center;justify-content:flex-start;padding:10px 16px;font-size:13px;font-weight:500;line-height:20px;text-decoration:none;border-radius:6px}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled{cursor:default;opacity:.4}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon{margin-right:16px}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle{font-size:11px;line-height:1.5}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge{margin-left:auto}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content{display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;white-space:nowrap;height:20px}cmat-vertical-navigation cmat-vertical-navigation-aside-item>.cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation cmat-vertical-navigation-basic-item>.cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper{margin:0 12px}cmat-vertical-navigation cmat-vertical-navigation-aside-item,cmat-vertical-navigation cmat-vertical-navigation-basic-item,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item{margin-bottom:4px}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item{cursor:pointer}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge+.cmat-vertical-navigation-item-arrow{margin-left:8px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow{height:20px;line-height:20px;margin-left:auto;transition:transform .3s cubic-bezier(.25,.8,.25,1),color 375ms cubic-bezier(.25,.8,.25,1)}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item.cmat-vertical-navigation-item-expanded>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow{transform:rotate(90deg)}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-children{margin-top:6px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-children>*:last-child{padding-bottom:6px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-children>*:last-child>.cmat-vertical-navigation-item-children>*:last-child{padding-bottom:0}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding:10px 16px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children{overflow:hidden}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding-left:56px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding-left:72px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding-left:88px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding-left:104px}cmat-vertical-navigation cmat-vertical-navigation-divider-item{margin:12px 0}cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper{height:1px;box-shadow:0 1px}cmat-vertical-navigation cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon{display:none!important}cmat-vertical-navigation cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-title{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}cmat-vertical-navigation cmat-vertical-navigation-spacer-item{margin:6px 0}.cmat-vertical-navigation-overlay{position:absolute;inset:0;z-index:170;background-color:#0009}.cmat-vertical-navigation-overlay+.cmat-vertical-navigation-aside-overlay{background-color:transparent}.cmat-vertical-navigation-overlay.cmat-vertical-navigation-overlay-enter{animation:vertical-navigation-overlay-enter .3s cubic-bezier(.25,.8,.25,1)}.cmat-vertical-navigation-overlay.cmat-vertical-navigation-overlay-leave{animation:vertical-navigation-overlay-leave .3s cubic-bezier(.25,.8,.25,1)}.cmat-vertical-navigation-aside-overlay{position:absolute;inset:0;z-index:169;background-color:#0000004d}.cmat-vertical-navigation-aside-overlay.cmat-vertical-navigation-aside-overlay-enter{animation:vertical-navigation-overlay-enter .3s cubic-bezier(.25,.8,.25,1)}.cmat-vertical-navigation-aside-overlay.cmat-vertical-navigation-aside-overlay-leave{animation:vertical-navigation-overlay-leave .3s cubic-bezier(.25,.8,.25,1)}@keyframes vertical-navigation-overlay-enter{0%{opacity:0}to{opacity:1}}@keyframes vertical-navigation-overlay-leave{0%{opacity:1}to{opacity:0}}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact{width:112px;min-width:112px;max-width:112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side{margin-left:-112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-left.cmat-vertical-navigation-opened{margin-left:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side{margin-right:-112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-right.cmat-vertical-navigation-opened{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-right .cmat-vertical-navigation-aside-wrapper{left:auto;right:112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper{margin:4px 8px 0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{flex-direction:column;justify-content:center;padding:12px;border-radius:6px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{margin-top:8px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-title,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-title{font-size:12px;font-weight:500;text-align:center;line-height:16px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle{display:none!important}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge{position:absolute;top:12px;left:64px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item>cmat-vertical-navigation-collapsable-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item>cmat-vertical-navigation-collapsable-item{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item>cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item>cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-aside-wrapper{left:112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over){width:80px;min-width:80px;max-width:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side{margin-left:-80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-left.cmat-vertical-navigation-opened{margin-left:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side{margin-right:-80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-right.cmat-vertical-navigation-opened{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-right .cmat-vertical-navigation-aside-wrapper{left:auto;right:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-right.cmat-vertical-navigation-hover .cmat-vertical-navigation-aside-wrapper{left:auto;right:280px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{width:280px-24px;min-width:280px-24px;max-width:280px-24px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{transition:opacity .4s cubic-bezier(.25,.8,.25,1)}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item:first-of-type{margin-top:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{padding:10px 16px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{white-space:nowrap;opacity:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:before{content:\"\";position:absolute;top:20px;width:23px;border-top-width:2px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-aside-wrapper{left:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-wrapper{width:280px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{white-space:nowrap;animation:removeWhiteSpaceNoWrap 1ms linear .35s;animation-fill-mode:forwards}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-aside-wrapper{left:280px}@keyframes removeWhiteSpaceNoWrap{0%{white-space:nowrap}99%{white-space:nowrap}to{white-space:normal}}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin{width:80px;min-width:80px;max-width:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side{margin-left:-80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-left.cmat-vertical-navigation-opened{margin-left:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side{margin-right:-80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-right.cmat-vertical-navigation-opened{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-right .cmat-vertical-navigation-aside-wrapper{left:auto;right:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item{flex-direction:column;justify-content:center;height:64px;min-height:64px;max-height:64px;padding:0 16px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper{display:flex;align-items:center;justify-content:center}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{justify-content:center;padding:12px;border-radius:4px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon{margin:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-collapsable-item{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-aside-wrapper{left:80px}.fade-in-animation{opacity:1;transition:opacity 225ms cubic-bezier(0,0,.2,1)}@starting-style{.fade-in-animation{opacity:0}}.fade-in-top-animation{opacity:1;transform:translateZ(0);transition:all 225ms cubic-bezier(0,0,.2,1)}@starting-style{.fade-in-top-animation{opacity:0;transform:translate3d(0,-100%,0)}}.fade-in-bottom-animation{opacity:1;transform:translateZ(0);transition:all 225ms cubic-bezier(0,0,.2,1)}@starting-style{.fade-in-bottom-animation{opacity:0;transform:translate3d(0,100%,0)}}.fade-in-left-animation{opacity:1;transform:translateZ(0);transition:all 225ms cubic-bezier(0,0,.2,1)}@starting-style{.fade-in-left-animation{opacity:0;transform:translate3d(-100%,0,0)}}.fade-in-right-animation{opacity:1;transform:translateZ(0);transition:all 225ms cubic-bezier(0,0,.2,1)}@starting-style{.fade-in-right-animation{opacity:0;transform:translate3d(100%,0,0)}}.fade-out-animation{opacity:0;transition:opacity 195ms cubic-bezier(.4,0,1,1)}@starting-style{.fade-out-animation{opacity:1}}.fade-out-top-animation{opacity:0;transform:translate3d(0,-100%,0);transition:all 195ms cubic-bezier(.4,0,1,1)}@starting-style{.fade-out-top-animation{opacity:1;transform:translateZ(0)}}.fade-out-bottom-animation{opacity:0;transform:translate3d(0,100%,0);transition:all 195ms cubic-bezier(.4,0,1,1)}@starting-style{.fade-out-bottom-animation{opacity:1;transform:translateZ(0)}}.fade-out-left-animation{opacity:0;transform:translate3d(-100%,0,0);transition:all 195ms cubic-bezier(.4,0,1,1)}@starting-style{.fade-out-left-animation{opacity:1;transform:translateZ(0)}}.fade-out-right-animation{opacity:0;transform:translate3d(100%,0,0);transition:all 195ms cubic-bezier(.4,0,1,1)}@starting-style{.fade-out-right-animation{opacity:1;transform:translateZ(0)}}\n"], dependencies: [{ kind: "component", type: CmatVerticalNavigationAsideItemComponent, selector: "cmat-vertical-navigation-aside-item", inputs: ["activeItemId", "autoCollapse", "item", "name", "skipChildren", "editState", "hasRouteReuseStrategy"], outputs: ["routeReuseStrategyEmitUrl", "editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationBasicItemComponent, selector: "cmat-vertical-navigation-basic-item", inputs: ["item", "name", "editState", "hasRouteReuseStrategy"], outputs: ["routeReuseStrategyEmitUrl", "editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationCollapsableItemComponent, selector: "cmat-vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item", "name", "editState", "hasRouteReuseStrategy"], outputs: ["routeReuseStrategyEmitUrl", "editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationDividerItemComponent, selector: "cmat-vertical-navigation-divider-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationGroupItemComponent, selector: "cmat-vertical-navigation-group-item", inputs: ["autoCollapse", "item", "name", "editState", "hasRouteReuseStrategy"], outputs: ["routeReuseStrategyEmitUrl", "editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationSpacerItemComponent, selector: "cmat-vertical-navigation-spacer-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatVerticalNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CmatVerticalNavigationComponent, isStandalone: true, selector: "cmat-vertical-navigation", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, autoCollapse: { classPropertyName: "autoCollapse", publicName: "autoCollapse", isSignal: true, isRequired: false, transformFunction: null }, editState: { classPropertyName: "editState", publicName: "editState", isSignal: true, isRequired: false, transformFunction: null }, inner: { classPropertyName: "inner", publicName: "inner", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, navigation: { classPropertyName: "navigation", publicName: "navigation", isSignal: true, isRequired: false, transformFunction: null }, opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, transparentOverlay: { classPropertyName: "transparentOverlay", publicName: "transparentOverlay", isSignal: true, isRequired: false, transformFunction: null }, hasRouteReuseStrategy: { classPropertyName: "hasRouteReuseStrategy", publicName: "hasRouteReuseStrategy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { routeReuseStrategyEmitUrl: "routeReuseStrategyEmitUrl", appearanceChanged: "appearanceChanged", modeChanged: "modeChanged", openedChanged: "openedChanged", positionChanged: "positionChanged", editSelectedItemChanged: "editSelectedItemChanged" }, host: { listeners: { "mouseenter": "onMouseenter()", "mouseleave": "onMouseleave()" }, properties: { "class": "classList()", "style": "styleList()" } }, viewQueries: [{ propertyName: "_navigationContentEl", first: true, predicate: ["navigationContent"], descendants: true, isSignal: true }], exportAs: ["cmatVerticalNavigation"], ngImport: i0, template: "<div\r\n  class=\"cmat-vertical-navigation-wrapper\"\r\n  [attr.data-refresh]=\"refreshToken()\"\r\n>\r\n  <div class=\"cmat-vertical-navigation-header\">\r\n    <ng-content select=\"[cmatVerticalNavigationHeader]\"></ng-content>\r\n  </div>\r\n\r\n  <div\r\n    #navigationContent\r\n    class=\"cmat-vertical-navigation-content py-2 overflow-y-auto scrollbar-custom\"\r\n  >\r\n    <div class=\"cmat-vertical-navigation-content-header\">\r\n      <ng-content select=\"[cmatVerticalNavigationContentHeader]\"></ng-content>\r\n    </div>\r\n\r\n    @for (item of navigation(); track trackByFn($index, item)) {\r\n      @let isVisible = isItemVisible(item);\r\n      @if (isVisible) {\r\n        @switch (item.type) {\r\n          @case (\"aside\") {\r\n            <cmat-vertical-navigation-aside-item\r\n              [item]=\"item\"\r\n              [name]=\"name()\"\r\n              [activeItemId]=\"activeAsideItemId()\"\r\n              [autoCollapse]=\"autoCollapse()\"\r\n              [skipChildren]=\"true\"\r\n              [editState]=\"editState()\"\r\n              [hasRouteReuseStrategy]=\"hasRouteReuseStrategy()\"\r\n              (click)=\"toggleAside(item)\"\r\n              (editSelectedItemChanged)=\"selectItem($event)\"\r\n              (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\"\r\n            >\r\n            </cmat-vertical-navigation-aside-item>\r\n          }\r\n          @case (\"basic\") {\r\n            <cmat-vertical-navigation-basic-item\r\n              [item]=\"item\"\r\n              [name]=\"name()\"\r\n              [editState]=\"editState()\"\r\n              [hasRouteReuseStrategy]=\"hasRouteReuseStrategy()\"\r\n              (editSelectedItemChanged)=\"selectItem($event)\"\r\n              (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\"\r\n            >\r\n            </cmat-vertical-navigation-basic-item>\r\n          }\r\n          @case (\"collapsable\") {\r\n            <cmat-vertical-navigation-collapsable-item\r\n              [item]=\"item\"\r\n              [name]=\"name()\"\r\n              [editState]=\"editState()\"\r\n              [autoCollapse]=\"autoCollapse()\"\r\n              [hasRouteReuseStrategy]=\"hasRouteReuseStrategy()\"\r\n              (editSelectedItemChanged)=\"selectItem($event)\"\r\n              (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\"\r\n            ></cmat-vertical-navigation-collapsable-item>\r\n          }\r\n          @case (\"divider\") {\r\n            <cmat-vertical-navigation-divider-item\r\n              [item]=\"item\"\r\n              [name]=\"name()\"\r\n              [editState]=\"editState()\"\r\n              (editSelectedItemChanged)=\"selectItem($event)\"\r\n            >\r\n            </cmat-vertical-navigation-divider-item>\r\n          }\r\n          @case (\"group\") {\r\n            <cmat-vertical-navigation-group-item\r\n              [item]=\"item\"\r\n              [name]=\"name()\"\r\n              [autoCollapse]=\"autoCollapse()\"\r\n              [editState]=\"editState()\"\r\n              [hasRouteReuseStrategy]=\"hasRouteReuseStrategy()\"\r\n              (editSelectedItemChanged)=\"selectItem($event)\"\r\n              (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\"\r\n            >\r\n            </cmat-vertical-navigation-group-item>\r\n          }\r\n          @case (\"spacer\") {\r\n            <cmat-vertical-navigation-spacer-item\r\n              [item]=\"item\"\r\n              [name]=\"name()\"\r\n              [editState]=\"editState()\"\r\n              (editSelectedItemChanged)=\"selectItem($event)\"\r\n            >\r\n            </cmat-vertical-navigation-spacer-item>\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n    <div class=\"cmat-vertical-navigation-content-footer\">\r\n      <ng-content select=\"[cmatVerticalNavigationContentFooter]\"></ng-content>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"cmat-vertical-navigation-footer\">\r\n    <ng-content select=\"[cmatVerticalNavigationFooter]\"></ng-content>\r\n  </div>\r\n</div>\r\n\r\n@if (activeAsideItemId()) {\r\n  <div\r\n    class=\"cmat-vertical-navigation-aside-wrapper overflow-y-auto scrollbar-custom\"\r\n    [animate.enter]=\"\r\n      position() === 'left'\r\n        ? 'fade-in-left-animation'\r\n        : 'fade-in-right-animation'\r\n    \"\r\n    [animate.leave]=\"\r\n      position() === 'left'\r\n        ? 'fade-out-left-animation'\r\n        : 'fade-out-right-animation'\r\n    \"\r\n  >\r\n    @for (item of navigation(); track trackByFn($index, item)) {\r\n      @let isVisible = isItemVisible(item);\r\n      @if (isVisible) {\r\n        @if (item.type === \"aside\" && item.id === activeAsideItemId()) {\r\n          <cmat-vertical-navigation-aside-item\r\n            [item]=\"item\"\r\n            [name]=\"name()\"\r\n            [autoCollapse]=\"autoCollapse()\"\r\n            [hasRouteReuseStrategy]=\"hasRouteReuseStrategy()\"\r\n            (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\"\r\n          >\r\n          </cmat-vertical-navigation-aside-item>\r\n        }\r\n      }\r\n    }\r\n  </div>\r\n}\r\n", styles: ["cmat-vertical-navigation{position:sticky;display:flex;flex-direction:column;flex:1 0 auto;top:0;width:280px;min-width:280px;max-width:280px;height:100%;z-index:200}cmat-vertical-navigation.cmat-vertical-navigation-animations-enabled{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:visibility,margin-left,margin-right,transform,width,max-width,min-width}cmat-vertical-navigation.cmat-vertical-navigation-animations-enabled .cmat-vertical-navigation-wrapper{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:width,max-width,min-width}cmat-vertical-navigation.cmat-vertical-navigation-mode-over{position:fixed;top:0;bottom:0}cmat-vertical-navigation.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side{margin-left:-280px}cmat-vertical-navigation.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side.cmat-vertical-navigation-opened{margin-left:0}cmat-vertical-navigation.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-over{left:0;transform:translate3d(-100%,0,0)}cmat-vertical-navigation.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-over.cmat-vertical-navigation-opened{transform:translateZ(0)}cmat-vertical-navigation.cmat-vertical-navigation-position-left .cmat-vertical-navigation-wrapper{left:0}cmat-vertical-navigation.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side{margin-right:-280px}cmat-vertical-navigation.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side.cmat-vertical-navigation-opened{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-over{right:0;transform:translate3d(100%,0,0)}cmat-vertical-navigation.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-over.cmat-vertical-navigation-opened{transform:translateZ(0)}cmat-vertical-navigation.cmat-vertical-navigation-position-right .cmat-vertical-navigation-wrapper{right:0}cmat-vertical-navigation.cmat-vertical-navigation-inner{position:relative;width:auto;min-width:0;max-width:none;height:auto;min-height:0;max-height:none;box-shadow:none}cmat-vertical-navigation.cmat-vertical-navigation-inner .cmat-vertical-navigation-wrapper{position:relative;overflow:visible;height:auto}cmat-vertical-navigation.cmat-vertical-navigation-inner .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content{overflow:visible!important}cmat-vertical-navigation .cmat-vertical-navigation-wrapper{position:absolute;display:flex;flex:1 1 auto;flex-direction:column;top:0;bottom:0;width:100%;height:100%;overflow:hidden;z-index:10;background:inherit;box-shadow:inset -1px 0 0 var(--cmat-border)}cmat-vertical-navigation .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content{flex:1 1 auto;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}cmat-vertical-navigation .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-divider-item{margin:24px 0}cmat-vertical-navigation .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-group-item{margin-top:24px}cmat-vertical-navigation .cmat-vertical-navigation-aside-wrapper{position:absolute;display:flex;flex:1 1 auto;flex-direction:column;top:0;bottom:0;left:280px;width:280px;height:100%;z-index:5;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;background:inherit}cmat-vertical-navigation .cmat-vertical-navigation-aside-wrapper>cmat-vertical-navigation-aside-item{padding:24px 0}cmat-vertical-navigation .cmat-vertical-navigation-aside-wrapper>cmat-vertical-navigation-aside-item>.cmat-vertical-navigation-item-wrapper{display:none!important}cmat-vertical-navigation.cmat-vertical-navigation-position-right .cmat-vertical-navigation-aside-wrapper{left:auto;right:280px}cmat-vertical-navigation cmat-vertical-navigation-aside-item,cmat-vertical-navigation cmat-vertical-navigation-basic-item,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item,cmat-vertical-navigation cmat-vertical-navigation-divider-item,cmat-vertical-navigation cmat-vertical-navigation-group-item,cmat-vertical-navigation cmat-vertical-navigation-spacer-item{display:flex;flex-direction:column;flex:1 0 auto;-webkit-user-select:none;user-select:none}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{position:relative;display:flex;align-items:center;justify-content:flex-start;padding:10px 16px;font-size:13px;font-weight:500;line-height:20px;text-decoration:none;border-radius:6px}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled{cursor:default;opacity:.4}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon{margin-right:16px}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle{font-size:11px;line-height:1.5}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge{margin-left:auto}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content{display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;white-space:nowrap;height:20px}cmat-vertical-navigation cmat-vertical-navigation-aside-item>.cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation cmat-vertical-navigation-basic-item>.cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper{margin:0 12px}cmat-vertical-navigation cmat-vertical-navigation-aside-item,cmat-vertical-navigation cmat-vertical-navigation-basic-item,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item{margin-bottom:4px}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item{cursor:pointer}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge+.cmat-vertical-navigation-item-arrow{margin-left:8px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow{height:20px;line-height:20px;margin-left:auto;transition:transform .3s cubic-bezier(.25,.8,.25,1),color 375ms cubic-bezier(.25,.8,.25,1)}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item.cmat-vertical-navigation-item-expanded>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow{transform:rotate(90deg)}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-children{margin-top:6px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-children>*:last-child{padding-bottom:6px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-children>*:last-child>.cmat-vertical-navigation-item-children>*:last-child{padding-bottom:0}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding:10px 16px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children{overflow:hidden}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding-left:56px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding-left:72px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding-left:88px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding-left:104px}cmat-vertical-navigation cmat-vertical-navigation-divider-item{margin:12px 0}cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper{height:1px;box-shadow:0 1px}cmat-vertical-navigation cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon{display:none!important}cmat-vertical-navigation cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-title{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}cmat-vertical-navigation cmat-vertical-navigation-spacer-item{margin:6px 0}.cmat-vertical-navigation-overlay{position:absolute;inset:0;z-index:170;background-color:#0009}.cmat-vertical-navigation-overlay+.cmat-vertical-navigation-aside-overlay{background-color:transparent}.cmat-vertical-navigation-overlay.cmat-vertical-navigation-overlay-enter{animation:vertical-navigation-overlay-enter .3s cubic-bezier(.25,.8,.25,1)}.cmat-vertical-navigation-overlay.cmat-vertical-navigation-overlay-leave{animation:vertical-navigation-overlay-leave .3s cubic-bezier(.25,.8,.25,1)}.cmat-vertical-navigation-aside-overlay{position:absolute;inset:0;z-index:169;background-color:#0000004d}.cmat-vertical-navigation-aside-overlay.cmat-vertical-navigation-aside-overlay-enter{animation:vertical-navigation-overlay-enter .3s cubic-bezier(.25,.8,.25,1)}.cmat-vertical-navigation-aside-overlay.cmat-vertical-navigation-aside-overlay-leave{animation:vertical-navigation-overlay-leave .3s cubic-bezier(.25,.8,.25,1)}@keyframes vertical-navigation-overlay-enter{0%{opacity:0}to{opacity:1}}@keyframes vertical-navigation-overlay-leave{0%{opacity:1}to{opacity:0}}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact{width:112px;min-width:112px;max-width:112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side{margin-left:-112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-left.cmat-vertical-navigation-opened{margin-left:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side{margin-right:-112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-right.cmat-vertical-navigation-opened{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-right .cmat-vertical-navigation-aside-wrapper{left:auto;right:112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper{margin:4px 8px 0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{flex-direction:column;justify-content:center;padding:12px;border-radius:6px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{margin-top:8px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-title,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-title{font-size:12px;font-weight:500;text-align:center;line-height:16px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle{display:none!important}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge{position:absolute;top:12px;left:64px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item>cmat-vertical-navigation-collapsable-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item>cmat-vertical-navigation-collapsable-item{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item>cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item>cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-aside-wrapper{left:112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over){width:80px;min-width:80px;max-width:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side{margin-left:-80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-left.cmat-vertical-navigation-opened{margin-left:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side{margin-right:-80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-right.cmat-vertical-navigation-opened{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-right .cmat-vertical-navigation-aside-wrapper{left:auto;right:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-right.cmat-vertical-navigation-hover .cmat-vertical-navigation-aside-wrapper{left:auto;right:280px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{width:280px-24px;min-width:280px-24px;max-width:280px-24px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{transition:opacity .4s cubic-bezier(.25,.8,.25,1)}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item:first-of-type{margin-top:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{padding:10px 16px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{white-space:nowrap;opacity:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:before{content:\"\";position:absolute;top:20px;width:23px;border-top-width:2px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-aside-wrapper{left:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-wrapper{width:280px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{white-space:nowrap;animation:removeWhiteSpaceNoWrap 1ms linear .35s;animation-fill-mode:forwards}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-aside-wrapper{left:280px}@keyframes removeWhiteSpaceNoWrap{0%{white-space:nowrap}99%{white-space:nowrap}to{white-space:normal}}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin{width:80px;min-width:80px;max-width:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side{margin-left:-80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-left.cmat-vertical-navigation-opened{margin-left:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side{margin-right:-80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-right.cmat-vertical-navigation-opened{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-right .cmat-vertical-navigation-aside-wrapper{left:auto;right:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item{flex-direction:column;justify-content:center;height:64px;min-height:64px;max-height:64px;padding:0 16px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper{display:flex;align-items:center;justify-content:center}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{justify-content:center;padding:12px;border-radius:4px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon{margin:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-collapsable-item{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-aside-wrapper{left:80px}.fade-in-animation{opacity:1;transition:opacity 225ms cubic-bezier(0,0,.2,1)}@starting-style{.fade-in-animation{opacity:0}}.fade-in-top-animation{opacity:1;transform:translateZ(0);transition:all 225ms cubic-bezier(0,0,.2,1)}@starting-style{.fade-in-top-animation{opacity:0;transform:translate3d(0,-100%,0)}}.fade-in-bottom-animation{opacity:1;transform:translateZ(0);transition:all 225ms cubic-bezier(0,0,.2,1)}@starting-style{.fade-in-bottom-animation{opacity:0;transform:translate3d(0,100%,0)}}.fade-in-left-animation{opacity:1;transform:translateZ(0);transition:all 225ms cubic-bezier(0,0,.2,1)}@starting-style{.fade-in-left-animation{opacity:0;transform:translate3d(-100%,0,0)}}.fade-in-right-animation{opacity:1;transform:translateZ(0);transition:all 225ms cubic-bezier(0,0,.2,1)}@starting-style{.fade-in-right-animation{opacity:0;transform:translate3d(100%,0,0)}}.fade-out-animation{opacity:0;transition:opacity 195ms cubic-bezier(.4,0,1,1)}@starting-style{.fade-out-animation{opacity:1}}.fade-out-top-animation{opacity:0;transform:translate3d(0,-100%,0);transition:all 195ms cubic-bezier(.4,0,1,1)}@starting-style{.fade-out-top-animation{opacity:1;transform:translateZ(0)}}.fade-out-bottom-animation{opacity:0;transform:translate3d(0,100%,0);transition:all 195ms cubic-bezier(.4,0,1,1)}@starting-style{.fade-out-bottom-animation{opacity:1;transform:translateZ(0)}}.fade-out-left-animation{opacity:0;transform:translate3d(-100%,0,0);transition:all 195ms cubic-bezier(.4,0,1,1)}@starting-style{.fade-out-left-animation{opacity:1;transform:translateZ(0)}}.fade-out-right-animation{opacity:0;transform:translate3d(100%,0,0);transition:all 195ms cubic-bezier(.4,0,1,1)}@starting-style{.fade-out-right-animation{opacity:1;transform:translateZ(0)}}\n"], dependencies: [{ kind: "component", type: CmatVerticalNavigationAsideItemComponent, selector: "cmat-vertical-navigation-aside-item", inputs: ["activeItemId", "autoCollapse", "item", "name", "skipChildren", "editState", "hasRouteReuseStrategy"], outputs: ["routeReuseStrategyEmitUrl", "editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationBasicItemComponent, selector: "cmat-vertical-navigation-basic-item", inputs: ["item", "name", "editState", "hasRouteReuseStrategy"], outputs: ["routeReuseStrategyEmitUrl", "editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationCollapsableItemComponent, selector: "cmat-vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item", "name", "editState", "hasRouteReuseStrategy"], outputs: ["routeReuseStrategyEmitUrl", "editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationDividerItemComponent, selector: "cmat-vertical-navigation-divider-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationGroupItemComponent, selector: "cmat-vertical-navigation-group-item", inputs: ["autoCollapse", "item", "name", "editState", "hasRouteReuseStrategy"], outputs: ["routeReuseStrategyEmitUrl", "editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationSpacerItemComponent, selector: "cmat-vertical-navigation-spacer-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatVerticalNavigationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatVerticalNavigationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-vertical-navigation', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatVerticalNavigation', host: {
-                        // eslint-disable-next-line @typescript-eslint/naming-convention
                         '[class]': 'classList()',
-                        // eslint-disable-next-line @typescript-eslint/naming-convention
-                        '[style]': 'styleList()'
-                    }, imports: [CmatVerticalNavigationAsideItemComponent, CmatVerticalNavigationBasicItemComponent,
-                        CmatVerticalNavigationCollapsableItemComponent, CmatVerticalNavigationDividerItemComponent,
-                        CmatVerticalNavigationGroupItemComponent, CmatVerticalNavigationSpacerItemComponent], template: "<div class=\"cmat-vertical-navigation-wrapper\" [attr.data-refresh]=\"refreshToken()\">\r\n\r\n  \r\n  <div class=\"cmat-vertical-navigation-header\">\r\n    <ng-content select=\"[cmatVerticalNavigationHeader]\"></ng-content>\r\n  </div>\r\n\r\n  \r\n  <div #navigationContent class=\"cmat-vertical-navigation-content py-2 overflow-y-auto scrollbar-custom\">\r\n\r\n    \r\n    <div class=\"cmat-vertical-navigation-content-header\">\r\n      <ng-content select=\"[cmatVerticalNavigationContentHeader]\"></ng-content>\r\n    </div>\r\n\r\n    \r\n    @for (item of navigation; track trackByFn($index, item)) {\r\n    @let isVisible = isItemVisible(item);\r\n    @if (isVisible) {\r\n    @switch (item.type) {\r\n    @case ('aside') {\r\n    <cmat-vertical-navigation-aside-item [item]=\"item\" [name]=\"name\" [activeItemId]=\"activeAsideItemId()\"\r\n      [autoCollapse]=\"autoCollapse\" [skipChildren]=\"true\" [editState]=\"editState\"\r\n      [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\" (click)=\"toggleAside(item)\"\r\n      (editSelectedItemChanged)=\"selectItem($event)\" (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\">\r\n    </cmat-vertical-navigation-aside-item>\r\n    }\r\n    @case ('basic') {\r\n    <cmat-vertical-navigation-basic-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\"\r\n      [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\" (editSelectedItemChanged)=\"selectItem($event)\"\r\n      (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\">\r\n    </cmat-vertical-navigation-basic-item>\r\n    }\r\n    @case ('collapsable') {\r\n    <cmat-vertical-navigation-collapsable-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\"\r\n      [autoCollapse]=\"autoCollapse\" [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\"\r\n      (editSelectedItemChanged)=\"selectItem($event)\"\r\n      (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\"></cmat-vertical-navigation-collapsable-item>\r\n    }\r\n    @case ('divider') {\r\n    <cmat-vertical-navigation-divider-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\"\r\n      (editSelectedItemChanged)=\"selectItem($event)\">\r\n    </cmat-vertical-navigation-divider-item>\r\n    }\r\n    @case ('group') {\r\n    <cmat-vertical-navigation-group-item [item]=\"item\" [name]=\"name\" [autoCollapse]=\"autoCollapse\"\r\n      [editState]=\"editState\" [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\"\r\n      (editSelectedItemChanged)=\"selectItem($event)\" (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\">\r\n    </cmat-vertical-navigation-group-item>\r\n    }\r\n    @case ('spacer') {\r\n    <cmat-vertical-navigation-spacer-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\"\r\n      (editSelectedItemChanged)=\"selectItem($event)\">\r\n    </cmat-vertical-navigation-spacer-item>\r\n    }\r\n    }\r\n    }\r\n    }\r\n\r\n    \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  \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\r\n@if (activeAsideItemId()) {\r\n<div class=\"cmat-vertical-navigation-aside-wrapper overflow-y-auto scrollbar-custom\"\r\n  [animate.enter]=\"position === 'left'?'fade-in-left-animation':'fade-in-right-animation'\"\r\n  [animate.leave]=\"position === 'left'?'fade-out-left-animation':'fade-out-right-animation'\">\r\n  \r\n  @for (item of navigation; track trackByFn($index, item)) {\r\n    @let isVisible = isItemVisible(item);\r\n    @if (isVisible) {\r\n    @if (item.type === 'aside' && item.id === activeAsideItemId()) {\r\n    <cmat-vertical-navigation-aside-item [item]=\"item\" [name]=\"name\" [autoCollapse]=\"autoCollapse\"\r\n      [hasRouteReuseStrategy]=\"hasRouteReuseStrategy\" (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\">\r\n    </cmat-vertical-navigation-aside-item>\r\n  }\r\n  }\r\n  }\r\n</div>\r\n}", styles: ["cmat-vertical-navigation{position:sticky;display:flex;flex-direction:column;flex:1 0 auto;top:0;width:280px;min-width:280px;max-width:280px;height:100%;z-index:200}cmat-vertical-navigation.cmat-vertical-navigation-animations-enabled{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:visibility,margin-left,margin-right,transform,width,max-width,min-width}cmat-vertical-navigation.cmat-vertical-navigation-animations-enabled .cmat-vertical-navigation-wrapper{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:width,max-width,min-width}cmat-vertical-navigation.cmat-vertical-navigation-mode-over{position:fixed;top:0;bottom:0}cmat-vertical-navigation.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side{margin-left:-280px}cmat-vertical-navigation.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side.cmat-vertical-navigation-opened{margin-left:0}cmat-vertical-navigation.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-over{left:0;transform:translate3d(-100%,0,0)}cmat-vertical-navigation.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-over.cmat-vertical-navigation-opened{transform:translateZ(0)}cmat-vertical-navigation.cmat-vertical-navigation-position-left .cmat-vertical-navigation-wrapper{left:0}cmat-vertical-navigation.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side{margin-right:-280px}cmat-vertical-navigation.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side.cmat-vertical-navigation-opened{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-over{right:0;transform:translate3d(100%,0,0)}cmat-vertical-navigation.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-over.cmat-vertical-navigation-opened{transform:translateZ(0)}cmat-vertical-navigation.cmat-vertical-navigation-position-right .cmat-vertical-navigation-wrapper{right:0}cmat-vertical-navigation.cmat-vertical-navigation-inner{position:relative;width:auto;min-width:0;max-width:none;height:auto;min-height:0;max-height:none;box-shadow:none}cmat-vertical-navigation.cmat-vertical-navigation-inner .cmat-vertical-navigation-wrapper{position:relative;overflow:visible;height:auto}cmat-vertical-navigation.cmat-vertical-navigation-inner .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content{overflow:visible!important}cmat-vertical-navigation .cmat-vertical-navigation-wrapper{position:absolute;display:flex;flex:1 1 auto;flex-direction:column;top:0;bottom:0;width:100%;height:100%;overflow:hidden;z-index:10;background:inherit;box-shadow:inset -1px 0 0 var(--cmat-border)}cmat-vertical-navigation .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content{flex:1 1 auto;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}cmat-vertical-navigation .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-divider-item{margin:24px 0}cmat-vertical-navigation .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-group-item{margin-top:24px}cmat-vertical-navigation .cmat-vertical-navigation-aside-wrapper{position:absolute;display:flex;flex:1 1 auto;flex-direction:column;top:0;bottom:0;left:280px;width:280px;height:100%;z-index:5;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;background:inherit}cmat-vertical-navigation .cmat-vertical-navigation-aside-wrapper>cmat-vertical-navigation-aside-item{padding:24px 0}cmat-vertical-navigation .cmat-vertical-navigation-aside-wrapper>cmat-vertical-navigation-aside-item>.cmat-vertical-navigation-item-wrapper{display:none!important}cmat-vertical-navigation.cmat-vertical-navigation-position-right .cmat-vertical-navigation-aside-wrapper{left:auto;right:280px}cmat-vertical-navigation cmat-vertical-navigation-aside-item,cmat-vertical-navigation cmat-vertical-navigation-basic-item,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item,cmat-vertical-navigation cmat-vertical-navigation-divider-item,cmat-vertical-navigation cmat-vertical-navigation-group-item,cmat-vertical-navigation cmat-vertical-navigation-spacer-item{display:flex;flex-direction:column;flex:1 0 auto;-webkit-user-select:none;user-select:none}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{position:relative;display:flex;align-items:center;justify-content:flex-start;padding:10px 16px;font-size:13px;font-weight:500;line-height:20px;text-decoration:none;border-radius:6px}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled{cursor:default;opacity:.4}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon{margin-right:16px}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle{font-size:11px;line-height:1.5}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge{margin-left:auto}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content{display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;white-space:nowrap;height:20px}cmat-vertical-navigation cmat-vertical-navigation-aside-item>.cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation cmat-vertical-navigation-basic-item>.cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper{margin:0 12px}cmat-vertical-navigation cmat-vertical-navigation-aside-item,cmat-vertical-navigation cmat-vertical-navigation-basic-item,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item{margin-bottom:4px}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item{cursor:pointer}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge+.cmat-vertical-navigation-item-arrow{margin-left:8px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow{height:20px;line-height:20px;margin-left:auto;transition:transform .3s cubic-bezier(.25,.8,.25,1),color 375ms cubic-bezier(.25,.8,.25,1)}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item.cmat-vertical-navigation-item-expanded>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow{transform:rotate(90deg)}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-children{margin-top:6px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-children>*:last-child{padding-bottom:6px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-children>*:last-child>.cmat-vertical-navigation-item-children>*:last-child{padding-bottom:0}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding:10px 16px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children{overflow:hidden}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding-left:56px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding-left:72px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding-left:88px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding-left:104px}cmat-vertical-navigation cmat-vertical-navigation-divider-item{margin:12px 0}cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper{height:1px;box-shadow:0 1px}cmat-vertical-navigation cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon{display:none!important}cmat-vertical-navigation cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-title{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}cmat-vertical-navigation cmat-vertical-navigation-spacer-item{margin:6px 0}.cmat-vertical-navigation-overlay{position:absolute;inset:0;z-index:170;background-color:#0009}.cmat-vertical-navigation-overlay+.cmat-vertical-navigation-aside-overlay{background-color:transparent}.cmat-vertical-navigation-overlay.cmat-vertical-navigation-overlay-enter{animation:vertical-navigation-overlay-enter .3s cubic-bezier(.25,.8,.25,1)}.cmat-vertical-navigation-overlay.cmat-vertical-navigation-overlay-leave{animation:vertical-navigation-overlay-leave .3s cubic-bezier(.25,.8,.25,1)}.cmat-vertical-navigation-aside-overlay{position:absolute;inset:0;z-index:169;background-color:#0000004d}.cmat-vertical-navigation-aside-overlay.cmat-vertical-navigation-aside-overlay-enter{animation:vertical-navigation-overlay-enter .3s cubic-bezier(.25,.8,.25,1)}.cmat-vertical-navigation-aside-overlay.cmat-vertical-navigation-aside-overlay-leave{animation:vertical-navigation-overlay-leave .3s cubic-bezier(.25,.8,.25,1)}@keyframes vertical-navigation-overlay-enter{0%{opacity:0}to{opacity:1}}@keyframes vertical-navigation-overlay-leave{0%{opacity:1}to{opacity:0}}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact{width:112px;min-width:112px;max-width:112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side{margin-left:-112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-left.cmat-vertical-navigation-opened{margin-left:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side{margin-right:-112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-right.cmat-vertical-navigation-opened{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-right .cmat-vertical-navigation-aside-wrapper{left:auto;right:112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper{margin:4px 8px 0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{flex-direction:column;justify-content:center;padding:12px;border-radius:6px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{margin-top:8px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-title,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-title{font-size:12px;font-weight:500;text-align:center;line-height:16px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle{display:none!important}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge{position:absolute;top:12px;left:64px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item>cmat-vertical-navigation-collapsable-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item>cmat-vertical-navigation-collapsable-item{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item>cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item>cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-aside-wrapper{left:112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over){width:80px;min-width:80px;max-width:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side{margin-left:-80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-left.cmat-vertical-navigation-opened{margin-left:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side{margin-right:-80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-right.cmat-vertical-navigation-opened{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-right .cmat-vertical-navigation-aside-wrapper{left:auto;right:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-right.cmat-vertical-navigation-hover .cmat-vertical-navigation-aside-wrapper{left:auto;right:280px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{width:280px-24px;min-width:280px-24px;max-width:280px-24px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{transition:opacity .4s cubic-bezier(.25,.8,.25,1)}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item:first-of-type{margin-top:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{padding:10px 16px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{white-space:nowrap;opacity:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:before{content:\"\";position:absolute;top:20px;width:23px;border-top-width:2px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-aside-wrapper{left:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-wrapper{width:280px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{white-space:nowrap;animation:removeWhiteSpaceNoWrap 1ms linear .35s;animation-fill-mode:forwards}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-aside-wrapper{left:280px}@keyframes removeWhiteSpaceNoWrap{0%{white-space:nowrap}99%{white-space:nowrap}to{white-space:normal}}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin{width:80px;min-width:80px;max-width:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side{margin-left:-80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-left.cmat-vertical-navigation-opened{margin-left:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side{margin-right:-80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-right.cmat-vertical-navigation-opened{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-right .cmat-vertical-navigation-aside-wrapper{left:auto;right:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item{flex-direction:column;justify-content:center;height:64px;min-height:64px;max-height:64px;padding:0 16px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper{display:flex;align-items:center;justify-content:center}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{justify-content:center;padding:12px;border-radius:4px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon{margin:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-collapsable-item{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-aside-wrapper{left:80px}.fade-in-animation{opacity:1;transition:opacity 225ms cubic-bezier(0,0,.2,1)}@starting-style{.fade-in-animation{opacity:0}}.fade-in-top-animation{opacity:1;transform:translateZ(0);transition:all 225ms cubic-bezier(0,0,.2,1)}@starting-style{.fade-in-top-animation{opacity:0;transform:translate3d(0,-100%,0)}}.fade-in-bottom-animation{opacity:1;transform:translateZ(0);transition:all 225ms cubic-bezier(0,0,.2,1)}@starting-style{.fade-in-bottom-animation{opacity:0;transform:translate3d(0,100%,0)}}.fade-in-left-animation{opacity:1;transform:translateZ(0);transition:all 225ms cubic-bezier(0,0,.2,1)}@starting-style{.fade-in-left-animation{opacity:0;transform:translate3d(-100%,0,0)}}.fade-in-right-animation{opacity:1;transform:translateZ(0);transition:all 225ms cubic-bezier(0,0,.2,1)}@starting-style{.fade-in-right-animation{opacity:0;transform:translate3d(100%,0,0)}}.fade-out-animation{opacity:0;transition:opacity 195ms cubic-bezier(.4,0,1,1)}@starting-style{.fade-out-animation{opacity:1}}.fade-out-top-animation{opacity:0;transform:translate3d(0,-100%,0);transition:all 195ms cubic-bezier(.4,0,1,1)}@starting-style{.fade-out-top-animation{opacity:1;transform:translateZ(0)}}.fade-out-bottom-animation{opacity:0;transform:translate3d(0,100%,0);transition:all 195ms cubic-bezier(.4,0,1,1)}@starting-style{.fade-out-bottom-animation{opacity:1;transform:translateZ(0)}}.fade-out-left-animation{opacity:0;transform:translate3d(-100%,0,0);transition:all 195ms cubic-bezier(.4,0,1,1)}@starting-style{.fade-out-left-animation{opacity:1;transform:translateZ(0)}}.fade-out-right-animation{opacity:0;transform:translate3d(100%,0,0);transition:all 195ms cubic-bezier(.4,0,1,1)}@starting-style{.fade-out-right-animation{opacity:1;transform:translateZ(0)}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { _navigationContentEl: [{
-                type: ViewChild,
-                args: ['navigationContent']
-            }], appearance: [{
-                type: Input
-            }], autoCollapse: [{
-                type: Input
-            }], editState: [{
-                type: Input
-            }], inner: [{
-                type: Input
-            }], mode: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }], navigation: [{
-                type: Input
-            }], opened: [{
-                type: Input
-            }], position: [{
-                type: Input
-            }], transparentOverlay: [{
-                type: Input
-            }], hasRouteReuseStrategy: [{
-                type: Input
-            }], routeReuseStrategyEmitUrl: [{
-                type: Output
-            }], appearanceChanged: [{
-                type: Output
-            }], modeChanged: [{
-                type: Output
-            }], openedChanged: [{
-                type: Output
-            }], positionChanged: [{
-                type: Output
-            }], editSelectedItemChanged: [{
-                type: Output
-            }], onMouseenter: [{
-                type: HostListener,
-                args: ['mouseenter']
-            }], onMouseleave: [{
-                type: HostListener,
-                args: ['mouseleave']
-            }] } });
+                        '[style]': 'styleList()',
+                        '(mouseenter)': 'onMouseenter()',
+                        '(mouseleave)': 'onMouseleave()',
+                    }, imports: [
+                        CmatVerticalNavigationAsideItemComponent,
+                        CmatVerticalNavigationBasicItemComponent,
+                        CmatVerticalNavigationCollapsableItemComponent,
+                        CmatVerticalNavigationDividerItemComponent,
+                        CmatVerticalNavigationGroupItemComponent,
+                        CmatVerticalNavigationSpacerItemComponent,
+                    ], template: "<div\r\n  class=\"cmat-vertical-navigation-wrapper\"\r\n  [attr.data-refresh]=\"refreshToken()\"\r\n>\r\n  <div class=\"cmat-vertical-navigation-header\">\r\n    <ng-content select=\"[cmatVerticalNavigationHeader]\"></ng-content>\r\n  </div>\r\n\r\n  <div\r\n    #navigationContent\r\n    class=\"cmat-vertical-navigation-content py-2 overflow-y-auto scrollbar-custom\"\r\n  >\r\n    <div class=\"cmat-vertical-navigation-content-header\">\r\n      <ng-content select=\"[cmatVerticalNavigationContentHeader]\"></ng-content>\r\n    </div>\r\n\r\n    @for (item of navigation(); track trackByFn($index, item)) {\r\n      @let isVisible = isItemVisible(item);\r\n      @if (isVisible) {\r\n        @switch (item.type) {\r\n          @case (\"aside\") {\r\n            <cmat-vertical-navigation-aside-item\r\n              [item]=\"item\"\r\n              [name]=\"name()\"\r\n              [activeItemId]=\"activeAsideItemId()\"\r\n              [autoCollapse]=\"autoCollapse()\"\r\n              [skipChildren]=\"true\"\r\n              [editState]=\"editState()\"\r\n              [hasRouteReuseStrategy]=\"hasRouteReuseStrategy()\"\r\n              (click)=\"toggleAside(item)\"\r\n              (editSelectedItemChanged)=\"selectItem($event)\"\r\n              (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\"\r\n            >\r\n            </cmat-vertical-navigation-aside-item>\r\n          }\r\n          @case (\"basic\") {\r\n            <cmat-vertical-navigation-basic-item\r\n              [item]=\"item\"\r\n              [name]=\"name()\"\r\n              [editState]=\"editState()\"\r\n              [hasRouteReuseStrategy]=\"hasRouteReuseStrategy()\"\r\n              (editSelectedItemChanged)=\"selectItem($event)\"\r\n              (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\"\r\n            >\r\n            </cmat-vertical-navigation-basic-item>\r\n          }\r\n          @case (\"collapsable\") {\r\n            <cmat-vertical-navigation-collapsable-item\r\n              [item]=\"item\"\r\n              [name]=\"name()\"\r\n              [editState]=\"editState()\"\r\n              [autoCollapse]=\"autoCollapse()\"\r\n              [hasRouteReuseStrategy]=\"hasRouteReuseStrategy()\"\r\n              (editSelectedItemChanged)=\"selectItem($event)\"\r\n              (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\"\r\n            ></cmat-vertical-navigation-collapsable-item>\r\n          }\r\n          @case (\"divider\") {\r\n            <cmat-vertical-navigation-divider-item\r\n              [item]=\"item\"\r\n              [name]=\"name()\"\r\n              [editState]=\"editState()\"\r\n              (editSelectedItemChanged)=\"selectItem($event)\"\r\n            >\r\n            </cmat-vertical-navigation-divider-item>\r\n          }\r\n          @case (\"group\") {\r\n            <cmat-vertical-navigation-group-item\r\n              [item]=\"item\"\r\n              [name]=\"name()\"\r\n              [autoCollapse]=\"autoCollapse()\"\r\n              [editState]=\"editState()\"\r\n              [hasRouteReuseStrategy]=\"hasRouteReuseStrategy()\"\r\n              (editSelectedItemChanged)=\"selectItem($event)\"\r\n              (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\"\r\n            >\r\n            </cmat-vertical-navigation-group-item>\r\n          }\r\n          @case (\"spacer\") {\r\n            <cmat-vertical-navigation-spacer-item\r\n              [item]=\"item\"\r\n              [name]=\"name()\"\r\n              [editState]=\"editState()\"\r\n              (editSelectedItemChanged)=\"selectItem($event)\"\r\n            >\r\n            </cmat-vertical-navigation-spacer-item>\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n    <div class=\"cmat-vertical-navigation-content-footer\">\r\n      <ng-content select=\"[cmatVerticalNavigationContentFooter]\"></ng-content>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"cmat-vertical-navigation-footer\">\r\n    <ng-content select=\"[cmatVerticalNavigationFooter]\"></ng-content>\r\n  </div>\r\n</div>\r\n\r\n@if (activeAsideItemId()) {\r\n  <div\r\n    class=\"cmat-vertical-navigation-aside-wrapper overflow-y-auto scrollbar-custom\"\r\n    [animate.enter]=\"\r\n      position() === 'left'\r\n        ? 'fade-in-left-animation'\r\n        : 'fade-in-right-animation'\r\n    \"\r\n    [animate.leave]=\"\r\n      position() === 'left'\r\n        ? 'fade-out-left-animation'\r\n        : 'fade-out-right-animation'\r\n    \"\r\n  >\r\n    @for (item of navigation(); track trackByFn($index, item)) {\r\n      @let isVisible = isItemVisible(item);\r\n      @if (isVisible) {\r\n        @if (item.type === \"aside\" && item.id === activeAsideItemId()) {\r\n          <cmat-vertical-navigation-aside-item\r\n            [item]=\"item\"\r\n            [name]=\"name()\"\r\n            [autoCollapse]=\"autoCollapse()\"\r\n            [hasRouteReuseStrategy]=\"hasRouteReuseStrategy()\"\r\n            (routeReuseStrategyEmitUrl)=\"goToRouterLink($event)\"\r\n          >\r\n          </cmat-vertical-navigation-aside-item>\r\n        }\r\n      }\r\n    }\r\n  </div>\r\n}\r\n", styles: ["cmat-vertical-navigation{position:sticky;display:flex;flex-direction:column;flex:1 0 auto;top:0;width:280px;min-width:280px;max-width:280px;height:100%;z-index:200}cmat-vertical-navigation.cmat-vertical-navigation-animations-enabled{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:visibility,margin-left,margin-right,transform,width,max-width,min-width}cmat-vertical-navigation.cmat-vertical-navigation-animations-enabled .cmat-vertical-navigation-wrapper{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:width,max-width,min-width}cmat-vertical-navigation.cmat-vertical-navigation-mode-over{position:fixed;top:0;bottom:0}cmat-vertical-navigation.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side{margin-left:-280px}cmat-vertical-navigation.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side.cmat-vertical-navigation-opened{margin-left:0}cmat-vertical-navigation.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-over{left:0;transform:translate3d(-100%,0,0)}cmat-vertical-navigation.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-over.cmat-vertical-navigation-opened{transform:translateZ(0)}cmat-vertical-navigation.cmat-vertical-navigation-position-left .cmat-vertical-navigation-wrapper{left:0}cmat-vertical-navigation.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side{margin-right:-280px}cmat-vertical-navigation.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side.cmat-vertical-navigation-opened{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-over{right:0;transform:translate3d(100%,0,0)}cmat-vertical-navigation.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-over.cmat-vertical-navigation-opened{transform:translateZ(0)}cmat-vertical-navigation.cmat-vertical-navigation-position-right .cmat-vertical-navigation-wrapper{right:0}cmat-vertical-navigation.cmat-vertical-navigation-inner{position:relative;width:auto;min-width:0;max-width:none;height:auto;min-height:0;max-height:none;box-shadow:none}cmat-vertical-navigation.cmat-vertical-navigation-inner .cmat-vertical-navigation-wrapper{position:relative;overflow:visible;height:auto}cmat-vertical-navigation.cmat-vertical-navigation-inner .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content{overflow:visible!important}cmat-vertical-navigation .cmat-vertical-navigation-wrapper{position:absolute;display:flex;flex:1 1 auto;flex-direction:column;top:0;bottom:0;width:100%;height:100%;overflow:hidden;z-index:10;background:inherit;box-shadow:inset -1px 0 0 var(--cmat-border)}cmat-vertical-navigation .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content{flex:1 1 auto;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}cmat-vertical-navigation .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-divider-item{margin:24px 0}cmat-vertical-navigation .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-group-item{margin-top:24px}cmat-vertical-navigation .cmat-vertical-navigation-aside-wrapper{position:absolute;display:flex;flex:1 1 auto;flex-direction:column;top:0;bottom:0;left:280px;width:280px;height:100%;z-index:5;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;background:inherit}cmat-vertical-navigation .cmat-vertical-navigation-aside-wrapper>cmat-vertical-navigation-aside-item{padding:24px 0}cmat-vertical-navigation .cmat-vertical-navigation-aside-wrapper>cmat-vertical-navigation-aside-item>.cmat-vertical-navigation-item-wrapper{display:none!important}cmat-vertical-navigation.cmat-vertical-navigation-position-right .cmat-vertical-navigation-aside-wrapper{left:auto;right:280px}cmat-vertical-navigation cmat-vertical-navigation-aside-item,cmat-vertical-navigation cmat-vertical-navigation-basic-item,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item,cmat-vertical-navigation cmat-vertical-navigation-divider-item,cmat-vertical-navigation cmat-vertical-navigation-group-item,cmat-vertical-navigation cmat-vertical-navigation-spacer-item{display:flex;flex-direction:column;flex:1 0 auto;-webkit-user-select:none;user-select:none}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{position:relative;display:flex;align-items:center;justify-content:flex-start;padding:10px 16px;font-size:13px;font-weight:500;line-height:20px;text-decoration:none;border-radius:6px}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled{cursor:default;opacity:.4}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon{margin-right:16px}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle{font-size:11px;line-height:1.5}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge{margin-left:auto}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content{display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;white-space:nowrap;height:20px}cmat-vertical-navigation cmat-vertical-navigation-aside-item>.cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation cmat-vertical-navigation-basic-item>.cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper{margin:0 12px}cmat-vertical-navigation cmat-vertical-navigation-aside-item,cmat-vertical-navigation cmat-vertical-navigation-basic-item,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item{margin-bottom:4px}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item{cursor:pointer}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge+.cmat-vertical-navigation-item-arrow{margin-left:8px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow{height:20px;line-height:20px;margin-left:auto;transition:transform .3s cubic-bezier(.25,.8,.25,1),color 375ms cubic-bezier(.25,.8,.25,1)}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item.cmat-vertical-navigation-item-expanded>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow{transform:rotate(90deg)}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-children{margin-top:6px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-children>*:last-child{padding-bottom:6px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-children>*:last-child>.cmat-vertical-navigation-item-children>*:last-child{padding-bottom:0}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding:10px 16px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children{overflow:hidden}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding-left:56px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding-left:72px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding-left:88px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding-left:104px}cmat-vertical-navigation cmat-vertical-navigation-divider-item{margin:12px 0}cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper{height:1px;box-shadow:0 1px}cmat-vertical-navigation cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon{display:none!important}cmat-vertical-navigation cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-title{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}cmat-vertical-navigation cmat-vertical-navigation-spacer-item{margin:6px 0}.cmat-vertical-navigation-overlay{position:absolute;inset:0;z-index:170;background-color:#0009}.cmat-vertical-navigation-overlay+.cmat-vertical-navigation-aside-overlay{background-color:transparent}.cmat-vertical-navigation-overlay.cmat-vertical-navigation-overlay-enter{animation:vertical-navigation-overlay-enter .3s cubic-bezier(.25,.8,.25,1)}.cmat-vertical-navigation-overlay.cmat-vertical-navigation-overlay-leave{animation:vertical-navigation-overlay-leave .3s cubic-bezier(.25,.8,.25,1)}.cmat-vertical-navigation-aside-overlay{position:absolute;inset:0;z-index:169;background-color:#0000004d}.cmat-vertical-navigation-aside-overlay.cmat-vertical-navigation-aside-overlay-enter{animation:vertical-navigation-overlay-enter .3s cubic-bezier(.25,.8,.25,1)}.cmat-vertical-navigation-aside-overlay.cmat-vertical-navigation-aside-overlay-leave{animation:vertical-navigation-overlay-leave .3s cubic-bezier(.25,.8,.25,1)}@keyframes vertical-navigation-overlay-enter{0%{opacity:0}to{opacity:1}}@keyframes vertical-navigation-overlay-leave{0%{opacity:1}to{opacity:0}}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact{width:112px;min-width:112px;max-width:112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side{margin-left:-112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-left.cmat-vertical-navigation-opened{margin-left:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side{margin-right:-112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-right.cmat-vertical-navigation-opened{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-right .cmat-vertical-navigation-aside-wrapper{left:auto;right:112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper{margin:4px 8px 0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{flex-direction:column;justify-content:center;padding:12px;border-radius:6px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{margin-top:8px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-title,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-title{font-size:12px;font-weight:500;text-align:center;line-height:16px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle{display:none!important}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge{position:absolute;top:12px;left:64px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item>cmat-vertical-navigation-collapsable-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item>cmat-vertical-navigation-collapsable-item{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item>cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item>cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-aside-wrapper{left:112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over){width:80px;min-width:80px;max-width:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side{margin-left:-80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-left.cmat-vertical-navigation-opened{margin-left:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side{margin-right:-80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-right.cmat-vertical-navigation-opened{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-right .cmat-vertical-navigation-aside-wrapper{left:auto;right:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-right.cmat-vertical-navigation-hover .cmat-vertical-navigation-aside-wrapper{left:auto;right:280px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{width:280px-24px;min-width:280px-24px;max-width:280px-24px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{transition:opacity .4s cubic-bezier(.25,.8,.25,1)}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item:first-of-type{margin-top:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{padding:10px 16px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{white-space:nowrap;opacity:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:before{content:\"\";position:absolute;top:20px;width:23px;border-top-width:2px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-aside-wrapper{left:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-wrapper{width:280px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{white-space:nowrap;animation:removeWhiteSpaceNoWrap 1ms linear .35s;animation-fill-mode:forwards}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-aside-wrapper{left:280px}@keyframes removeWhiteSpaceNoWrap{0%{white-space:nowrap}99%{white-space:nowrap}to{white-space:normal}}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin{width:80px;min-width:80px;max-width:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side{margin-left:-80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-left.cmat-vertical-navigation-opened{margin-left:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side{margin-right:-80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-right.cmat-vertical-navigation-opened{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-right .cmat-vertical-navigation-aside-wrapper{left:auto;right:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item{flex-direction:column;justify-content:center;height:64px;min-height:64px;max-height:64px;padding:0 16px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper{display:flex;align-items:center;justify-content:center}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{justify-content:center;padding:12px;border-radius:4px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon{margin:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-collapsable-item{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-aside-wrapper{left:80px}.fade-in-animation{opacity:1;transition:opacity 225ms cubic-bezier(0,0,.2,1)}@starting-style{.fade-in-animation{opacity:0}}.fade-in-top-animation{opacity:1;transform:translateZ(0);transition:all 225ms cubic-bezier(0,0,.2,1)}@starting-style{.fade-in-top-animation{opacity:0;transform:translate3d(0,-100%,0)}}.fade-in-bottom-animation{opacity:1;transform:translateZ(0);transition:all 225ms cubic-bezier(0,0,.2,1)}@starting-style{.fade-in-bottom-animation{opacity:0;transform:translate3d(0,100%,0)}}.fade-in-left-animation{opacity:1;transform:translateZ(0);transition:all 225ms cubic-bezier(0,0,.2,1)}@starting-style{.fade-in-left-animation{opacity:0;transform:translate3d(-100%,0,0)}}.fade-in-right-animation{opacity:1;transform:translateZ(0);transition:all 225ms cubic-bezier(0,0,.2,1)}@starting-style{.fade-in-right-animation{opacity:0;transform:translate3d(100%,0,0)}}.fade-out-animation{opacity:0;transition:opacity 195ms cubic-bezier(.4,0,1,1)}@starting-style{.fade-out-animation{opacity:1}}.fade-out-top-animation{opacity:0;transform:translate3d(0,-100%,0);transition:all 195ms cubic-bezier(.4,0,1,1)}@starting-style{.fade-out-top-animation{opacity:1;transform:translateZ(0)}}.fade-out-bottom-animation{opacity:0;transform:translate3d(0,100%,0);transition:all 195ms cubic-bezier(.4,0,1,1)}@starting-style{.fade-out-bottom-animation{opacity:1;transform:translateZ(0)}}.fade-out-left-animation{opacity:0;transform:translate3d(-100%,0,0);transition:all 195ms cubic-bezier(.4,0,1,1)}@starting-style{.fade-out-left-animation{opacity:1;transform:translateZ(0)}}.fade-out-right-animation{opacity:0;transform:translate3d(100%,0,0);transition:all 195ms cubic-bezier(.4,0,1,1)}@starting-style{.fade-out-right-animation{opacity:1;transform:translateZ(0)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { routeReuseStrategyEmitUrl: [{ type: i0.Output, args: ["routeReuseStrategyEmitUrl"] }], appearanceChanged: [{ type: i0.Output, args: ["appearanceChanged"] }], modeChanged: [{ type: i0.Output, args: ["modeChanged"] }], openedChanged: [{ type: i0.Output, args: ["openedChanged"] }], positionChanged: [{ type: i0.Output, args: ["positionChanged"] }], editSelectedItemChanged: [{ type: i0.Output, args: ["editSelectedItemChanged"] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], autoCollapse: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoCollapse", required: false }] }], editState: [{ type: i0.Input, args: [{ isSignal: true, alias: "editState", required: false }] }], inner: [{ type: i0.Input, args: [{ isSignal: true, alias: "inner", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], navigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigation", required: false }] }], opened: [{ type: i0.Input, args: [{ isSignal: true, alias: "opened", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], transparentOverlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "transparentOverlay", required: false }] }], hasRouteReuseStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasRouteReuseStrategy", required: false }] }], _navigationContentEl: [{ type: i0.ViewChild, args: ['navigationContent', { isSignal: true }] }] } });
 
 class CmatNavigationItem {
 }