npm - cmat - Versions diffs - 0.0.9 → 0.0.11 - Mend

cmat 0.0.9 → 0.0.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (187) hide show

package/esm2022/components/navigation/vertical/components/basic/basic.component.mjs CHANGED Viewed

@@ -42,10 +42,10 @@ export class CmatVerticalNavigationBasicItemComponent {
     selectItem() {
         this.editSelectedItemChanged.next(this.item);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatVerticalNavigationBasicItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.CmatNavigationService }, { token: i2.CmatUtilsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.7", type: CmatVerticalNavigationBasicItemComponent, isStandalone: true, selector: "cmat-vertical-navigation-basic-item", inputs: { item: "item", name: "name", editState: "editState" }, outputs: { editSelectedItemChanged: "editSelectedItemChanged" }, ngImport: i0, template: "<!-- Item wrapper -->\n<div class=\"cmat-vertical-navigation-item-wrapper\" [class.cmat-vertical-navigation-item-has-subtitle]=\"!!item.subTitle\"\n  [ngClass]=\"item.classes?.wrapper\">\n\n  @if(editState){\n  <div class=\"cmat-vertical-navigation-item\" role=\"presentation\"\n    [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\"\n    (click)=\"selectItem()\">\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n  </div>\n  }@else{\n  <!-- Item with an internal link -->\n  @if (item.link && !item.externalLink && !item.function && !item.disabled) {\n  <a class=\"cmat-vertical-navigation-item\" [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\"\n    [routerLink]=\"[item.link]\" [routerLinkActive]=\"'cmat-vertical-navigation-item-active'\"\n    [routerLinkActiveOptions]=\"isActiveMatchOptions\" [matTooltip]=\"item.tooltip || ''\">\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n  </a>\n  }\n\n  <!-- Item with an external link -->\n  @if (item.link && item.externalLink && !item.function && !item.disabled) {\n  <a class=\"cmat-vertical-navigation-item\" [href]=\"item.link\" [target]=\"item.target || '_blank'\"\n    [matTooltip]=\"item.tooltip || ''\">\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n  </a>\n  }\n\n  <!-- Item with a function -->\n  @if (!item.link && item.function && !item.disabled) {\n  <div class=\"cmat-vertical-navigation-item\" role=\"presentation\"\n    [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\"\n    (click)=\"item.function(item)\">\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n  </div>\n  }\n\n  <!-- Item with an internal link and function -->\n  @if (item.link && !item.externalLink && item.function && !item.disabled) {\n  <a class=\"cmat-vertical-navigation-item\" [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\"\n    [routerLink]=\"[item.link]\" [routerLinkActive]=\"'cmat-vertical-navigation-item-active'\"\n    [routerLinkActiveOptions]=\"isActiveMatchOptions\" [matTooltip]=\"item.tooltip || ''\" (click)=\"item.function(item)\">\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n  </a>\n  }\n\n  <!-- Item with an external link and function -->\n  @if (item.link && item.externalLink && item.function && !item.disabled) {\n  <a class=\"cmat-vertical-navigation-item\" [href]=\"item.link\" [target]=\"item.target || '_blank'\"\n    [matTooltip]=\"item.tooltip || ''\" (click)=\"item.function(item)\">\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n  </a>\n  }\n\n  <!-- Item with a no link and no function -->\n  @if (!item.link && !item.function && !item.disabled) {\n  <div class=\"cmat-vertical-navigation-item\" [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\"\n    [matTooltip]=\"item.tooltip || ''\">\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n  </div>\n  }\n\n  <!-- Item is disabled -->\n  @if (item.disabled) {\n  <div class=\"cmat-vertical-navigation-item cmat-vertical-navigation-item-disabled\" [matTooltip]=\"item.tooltip || ''\">\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n  </div>\n  }\n  }\n</div>\n\n<!-- Item template -->\n<ng-template #itemTemplate>\n\n  <!-- Icon -->\n  @if (item.icon) {\n  <mat-icon class=\"cmat-vertical-navigation-item-icon\" [ngClass]=\"item.classes?.icon\" [svgIcon]=\"item.icon\">\n  </mat-icon>\n  }\n\n  <!-- Title & Subtitle -->\n  <div class=\"cmat-vertical-navigation-item-title-wrapper\">\n    <div class=\"cmat-vertical-navigation-item-title\">\n      <span [ngClass]=\"item.classes?.title\">\n        {{item.title}}\n      </span>\n    </div>\n    @if (item.subTitle) {\n    <div class=\"cmat-vertical-navigation-item-subtitle\">\n      <span [ngClass]=\"item.classes?.subtitle\">\n        {{item.subTitle}}\n      </span>\n    </div>\n    }\n  </div>\n\n  <!-- Badge -->\n  @if (item.badge) {\n  <div class=\"cmat-vertical-navigation-item-badge\">\n    <div class=\"cmat-vertical-navigation-item-badge-content\" [ngClass]=\"item.badge.classes\">\n      {{item.badge.title}}\n    </div>\n  </div>\n  }\n</ng-template>", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CmatVerticalNavigationBasicItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.CmatNavigationService }, { token: i2.CmatUtilsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.9", type: CmatVerticalNavigationBasicItemComponent, isStandalone: true, selector: "cmat-vertical-navigation-basic-item", inputs: { item: "item", name: "name", editState: "editState" }, outputs: { editSelectedItemChanged: "editSelectedItemChanged" }, ngImport: i0, template: "<!-- Item wrapper -->\n<div class=\"cmat-vertical-navigation-item-wrapper\" [class.cmat-vertical-navigation-item-has-subtitle]=\"!!item.subTitle\"\n  [ngClass]=\"item.classes?.wrapper\">\n\n  @if(editState){\n  <div class=\"cmat-vertical-navigation-item\" role=\"presentation\"\n    [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\"\n    (click)=\"selectItem()\">\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n  </div>\n  }@else{\n  <!-- Item with an internal link -->\n  @if (item.link && !item.externalLink && !item.function && !item.disabled) {\n  <a class=\"cmat-vertical-navigation-item\" [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\"\n    [routerLink]=\"[item.link]\" [routerLinkActive]=\"'cmat-vertical-navigation-item-active'\"\n    [routerLinkActiveOptions]=\"isActiveMatchOptions\" [matTooltip]=\"item.tooltip || ''\">\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n  </a>\n  }\n\n  <!-- Item with an external link -->\n  @if (item.link && item.externalLink && !item.function && !item.disabled) {\n  <a class=\"cmat-vertical-navigation-item\" [href]=\"item.link\" [target]=\"item.target || '_blank'\"\n    [matTooltip]=\"item.tooltip || ''\">\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n  </a>\n  }\n\n  <!-- Item with a function -->\n  @if (!item.link && item.function && !item.disabled) {\n  <div class=\"cmat-vertical-navigation-item\" role=\"presentation\"\n    [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\"\n    (click)=\"item.function(item)\">\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n  </div>\n  }\n\n  <!-- Item with an internal link and function -->\n  @if (item.link && !item.externalLink && item.function && !item.disabled) {\n  <a class=\"cmat-vertical-navigation-item\" [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\"\n    [routerLink]=\"[item.link]\" [routerLinkActive]=\"'cmat-vertical-navigation-item-active'\"\n    [routerLinkActiveOptions]=\"isActiveMatchOptions\" [matTooltip]=\"item.tooltip || ''\" (click)=\"item.function(item)\">\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n  </a>\n  }\n\n  <!-- Item with an external link and function -->\n  @if (item.link && item.externalLink && item.function && !item.disabled) {\n  <a class=\"cmat-vertical-navigation-item\" [href]=\"item.link\" [target]=\"item.target || '_blank'\"\n    [matTooltip]=\"item.tooltip || ''\" (click)=\"item.function(item)\">\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n  </a>\n  }\n\n  <!-- Item with a no link and no function -->\n  @if (!item.link && !item.function && !item.disabled) {\n  <div class=\"cmat-vertical-navigation-item\" [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\"\n    [matTooltip]=\"item.tooltip || ''\">\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n  </div>\n  }\n\n  <!-- Item is disabled -->\n  @if (item.disabled) {\n  <div class=\"cmat-vertical-navigation-item cmat-vertical-navigation-item-disabled\" [matTooltip]=\"item.tooltip || ''\">\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n  </div>\n  }\n  }\n</div>\n\n<!-- Item template -->\n<ng-template #itemTemplate>\n\n  <!-- Icon -->\n  @if (item.icon) {\n  <mat-icon class=\"cmat-vertical-navigation-item-icon\" [ngClass]=\"item.classes?.icon\" [svgIcon]=\"item.icon\">\n  </mat-icon>\n  }\n\n  <!-- Title & Subtitle -->\n  <div class=\"cmat-vertical-navigation-item-title-wrapper\">\n    <div class=\"cmat-vertical-navigation-item-title\">\n      <span [ngClass]=\"item.classes?.title\">\n        {{item.title}}\n      </span>\n    </div>\n    @if (item.subTitle) {\n    <div class=\"cmat-vertical-navigation-item-subtitle\">\n      <span [ngClass]=\"item.classes?.subtitle\">\n        {{item.subTitle}}\n      </span>\n    </div>\n    }\n  </div>\n\n  <!-- Badge -->\n  @if (item.badge) {\n  <div class=\"cmat-vertical-navigation-item-badge\">\n    <div class=\"cmat-vertical-navigation-item-badge-content\" [ngClass]=\"item.badge.classes\">\n      {{item.badge.title}}\n    </div>\n  </div>\n  }\n</ng-template>", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatVerticalNavigationBasicItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CmatVerticalNavigationBasicItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-vertical-navigation-basic-item', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgClass, RouterLink, RouterLinkActive, MatTooltipModule, NgTemplateOutlet, MatIconModule], template: "<!-- Item wrapper -->\n<div class=\"cmat-vertical-navigation-item-wrapper\" [class.cmat-vertical-navigation-item-has-subtitle]=\"!!item.subTitle\"\n  [ngClass]=\"item.classes?.wrapper\">\n\n  @if(editState){\n  <div class=\"cmat-vertical-navigation-item\" role=\"presentation\"\n    [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\"\n    (click)=\"selectItem()\">\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n  </div>\n  }@else{\n  <!-- Item with an internal link -->\n  @if (item.link && !item.externalLink && !item.function && !item.disabled) {\n  <a class=\"cmat-vertical-navigation-item\" [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\"\n    [routerLink]=\"[item.link]\" [routerLinkActive]=\"'cmat-vertical-navigation-item-active'\"\n    [routerLinkActiveOptions]=\"isActiveMatchOptions\" [matTooltip]=\"item.tooltip || ''\">\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n  </a>\n  }\n\n  <!-- Item with an external link -->\n  @if (item.link && item.externalLink && !item.function && !item.disabled) {\n  <a class=\"cmat-vertical-navigation-item\" [href]=\"item.link\" [target]=\"item.target || '_blank'\"\n    [matTooltip]=\"item.tooltip || ''\">\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n  </a>\n  }\n\n  <!-- Item with a function -->\n  @if (!item.link && item.function && !item.disabled) {\n  <div class=\"cmat-vertical-navigation-item\" role=\"presentation\"\n    [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\"\n    (click)=\"item.function(item)\">\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n  </div>\n  }\n\n  <!-- Item with an internal link and function -->\n  @if (item.link && !item.externalLink && item.function && !item.disabled) {\n  <a class=\"cmat-vertical-navigation-item\" [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\"\n    [routerLink]=\"[item.link]\" [routerLinkActive]=\"'cmat-vertical-navigation-item-active'\"\n    [routerLinkActiveOptions]=\"isActiveMatchOptions\" [matTooltip]=\"item.tooltip || ''\" (click)=\"item.function(item)\">\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n  </a>\n  }\n\n  <!-- Item with an external link and function -->\n  @if (item.link && item.externalLink && item.function && !item.disabled) {\n  <a class=\"cmat-vertical-navigation-item\" [href]=\"item.link\" [target]=\"item.target || '_blank'\"\n    [matTooltip]=\"item.tooltip || ''\" (click)=\"item.function(item)\">\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n  </a>\n  }\n\n  <!-- Item with a no link and no function -->\n  @if (!item.link && !item.function && !item.disabled) {\n  <div class=\"cmat-vertical-navigation-item\" [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\"\n    [matTooltip]=\"item.tooltip || ''\">\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n  </div>\n  }\n\n  <!-- Item is disabled -->\n  @if (item.disabled) {\n  <div class=\"cmat-vertical-navigation-item cmat-vertical-navigation-item-disabled\" [matTooltip]=\"item.tooltip || ''\">\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n  </div>\n  }\n  }\n</div>\n\n<!-- Item template -->\n<ng-template #itemTemplate>\n\n  <!-- Icon -->\n  @if (item.icon) {\n  <mat-icon class=\"cmat-vertical-navigation-item-icon\" [ngClass]=\"item.classes?.icon\" [svgIcon]=\"item.icon\">\n  </mat-icon>\n  }\n\n  <!-- Title & Subtitle -->\n  <div class=\"cmat-vertical-navigation-item-title-wrapper\">\n    <div class=\"cmat-vertical-navigation-item-title\">\n      <span [ngClass]=\"item.classes?.title\">\n        {{item.title}}\n      </span>\n    </div>\n    @if (item.subTitle) {\n    <div class=\"cmat-vertical-navigation-item-subtitle\">\n      <span [ngClass]=\"item.classes?.subtitle\">\n        {{item.subTitle}}\n      </span>\n    </div>\n    }\n  </div>\n\n  <!-- Badge -->\n  @if (item.badge) {\n  <div class=\"cmat-vertical-navigation-item-badge\">\n    <div class=\"cmat-vertical-navigation-item-badge-content\" [ngClass]=\"item.badge.classes\">\n      {{item.badge.title}}\n    </div>\n  </div>\n  }\n</ng-template>" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.CmatNavigationService }, { type: i2.CmatUtilsService }], propDecorators: { item: [{

package/esm2022/components/navigation/vertical/components/collapsable/collapsable.component.mjs CHANGED Viewed

@@ -252,10 +252,10 @@ export class CmatVerticalNavigationCollapsableItemComponent {
         }
         return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatVerticalNavigationCollapsableItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.Router }, { token: i2.CmatNavigationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.7", type: CmatVerticalNavigationCollapsableItemComponent, isStandalone: true, selector: "cmat-vertical-navigation-collapsable-item", inputs: { autoCollapse: "autoCollapse", item: "item", name: "name", editState: "editState" }, outputs: { editSelectedItemChanged: "editSelectedItemChanged" }, host: { properties: { "class": "this.classList" } }, ngImport: i0, template: "<div class=\"cmat-vertical-navigation-item-wrapper\" [class.cmat-vertical-navigation-item-has-subtitle]=\"!!item.subTitle\"\n  [ngClass]=\"item.classes?.wrapper\">\n\n  <div class=\"cmat-vertical-navigation-item\" role=\"presentation\" [ngClass]=\"{'cmat-vertical-navigation-item-disabled': item.disabled}\"\n    [matTooltip]=\"item.tooltip || ''\" (click)=\"toggleCollapsable();selectItem(item);\">\n\n    <!-- Icon -->\n    @if (item.icon) {\n      <mat-icon class=\"cmat-vertical-navigation-item-icon\" [ngClass]=\"item.classes?.icon\" [svgIcon]=\"item.icon\">\n      </mat-icon>\n    }\n\n    <!-- Title & Subtitle -->\n    <div class=\"cmat-vertical-navigation-item-title-wrapper\">\n      <div class=\"cmat-vertical-navigation-item-title\">\n        <span [ngClass]=\"item.classes?.title\">\n          {{item.title}}\n        </span>\n      </div>\n      @if (item.subTitle) {\n        <div class=\"cmat-vertical-navigation-item-subtitle\">\n          <span [ngClass]=\"item.classes?.subtitle\">\n            {{item.subTitle}}\n          </span>\n        </div>\n      }\n    </div>\n\n    <!-- Badge -->\n    @if (item.badge) {\n      <div class=\"cmat-vertical-navigation-item-badge\">\n        <div class=\"cmat-vertical-navigation-item-badge-content\" [ngClass]=\"item.badge.classes\">\n          {{item.badge.title}}\n        </div>\n      </div>\n    }\n\n    <!-- Arrow -->\n    <mat-icon class=\"cmat-vertical-navigation-item-arrow icon-size-4\" [svgIcon]=\"'heroicons_outline:chevron-right'\">\n    </mat-icon>\n\n  </div>\n\n</div>\n\n@if (!isCollapsed) {\n  <div class=\"cmat-vertical-navigation-item-children\" @expandCollapse>\n    @for (item of item.children; track trackByFn($index, item)) {\n      <!-- Skip the hidden items -->\n      @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\n        <!-- Basic -->\n        @if (item.type === 'basic') {\n          <cmat-vertical-navigation-basic-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-basic-item>\n        }\n        <!-- Collapsable -->\n        @if (item.type === 'collapsable') {\n          <cmat-vertical-navigation-collapsable-item [item]=\"item\" [name]=\"name\" [autoCollapse]=\"autoCollapse\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\n          </cmat-vertical-navigation-collapsable-item>\n        }\n        <!-- Divider -->\n        @if (item.type === 'divider') {\n          <cmat-vertical-navigation-divider-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\n          </cmat-vertical-navigation-divider-item>\n        }\n        <!-- Group -->\n        @if (item.type === 'group') {\n          <cmat-vertical-navigation-group-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-group-item>\n        }\n        <!-- Spacer -->\n        @if (item.type === 'spacer') {\n          <cmat-vertical-navigation-spacer-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\n          </cmat-vertical-navigation-spacer-item>\n        }\n      }\n    }\n  </div>\n}", dependencies: [{ kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationCollapsableItemComponent), selector: "cmat-vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatTooltipModule) }, { kind: "directive", type: i0.forwardRef(() => i3.MatTooltip), selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatIconModule) }, { kind: "component", type: i0.forwardRef(() => i4.MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationBasicItemComponent), selector: "cmat-vertical-navigation-basic-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationGroupItemComponent), selector: "cmat-vertical-navigation-group-item", inputs: ["autoCollapse", "item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationDividerItemComponent), selector: "cmat-vertical-navigation-divider-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationSpacerItemComponent), selector: "cmat-vertical-navigation-spacer-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }], animations: cmatAnimations, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CmatVerticalNavigationCollapsableItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.Router }, { token: i2.CmatNavigationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.9", type: CmatVerticalNavigationCollapsableItemComponent, isStandalone: true, selector: "cmat-vertical-navigation-collapsable-item", inputs: { autoCollapse: "autoCollapse", item: "item", name: "name", editState: "editState" }, outputs: { editSelectedItemChanged: "editSelectedItemChanged" }, host: { properties: { "class": "this.classList" } }, ngImport: i0, template: "<div class=\"cmat-vertical-navigation-item-wrapper\" [class.cmat-vertical-navigation-item-has-subtitle]=\"!!item.subTitle\"\n  [ngClass]=\"item.classes?.wrapper\">\n\n  <div class=\"cmat-vertical-navigation-item\" role=\"presentation\" [ngClass]=\"{'cmat-vertical-navigation-item-disabled': item.disabled}\"\n    [matTooltip]=\"item.tooltip || ''\" (click)=\"toggleCollapsable();selectItem(item);\">\n\n    <!-- Icon -->\n    @if (item.icon) {\n      <mat-icon class=\"cmat-vertical-navigation-item-icon\" [ngClass]=\"item.classes?.icon\" [svgIcon]=\"item.icon\">\n      </mat-icon>\n    }\n\n    <!-- Title & Subtitle -->\n    <div class=\"cmat-vertical-navigation-item-title-wrapper\">\n      <div class=\"cmat-vertical-navigation-item-title\">\n        <span [ngClass]=\"item.classes?.title\">\n          {{item.title}}\n        </span>\n      </div>\n      @if (item.subTitle) {\n        <div class=\"cmat-vertical-navigation-item-subtitle\">\n          <span [ngClass]=\"item.classes?.subtitle\">\n            {{item.subTitle}}\n          </span>\n        </div>\n      }\n    </div>\n\n    <!-- Badge -->\n    @if (item.badge) {\n      <div class=\"cmat-vertical-navigation-item-badge\">\n        <div class=\"cmat-vertical-navigation-item-badge-content\" [ngClass]=\"item.badge.classes\">\n          {{item.badge.title}}\n        </div>\n      </div>\n    }\n\n    <!-- Arrow -->\n    <mat-icon class=\"cmat-vertical-navigation-item-arrow icon-size-4\" [svgIcon]=\"'heroicons_outline:chevron-right'\">\n    </mat-icon>\n\n  </div>\n\n</div>\n\n@if (!isCollapsed) {\n  <div class=\"cmat-vertical-navigation-item-children\" @expandCollapse>\n    @for (item of item.children; track trackByFn($index, item)) {\n      <!-- Skip the hidden items -->\n      @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\n        <!-- Basic -->\n        @if (item.type === 'basic') {\n          <cmat-vertical-navigation-basic-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-basic-item>\n        }\n        <!-- Collapsable -->\n        @if (item.type === 'collapsable') {\n          <cmat-vertical-navigation-collapsable-item [item]=\"item\" [name]=\"name\" [autoCollapse]=\"autoCollapse\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\n          </cmat-vertical-navigation-collapsable-item>\n        }\n        <!-- Divider -->\n        @if (item.type === 'divider') {\n          <cmat-vertical-navigation-divider-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\n          </cmat-vertical-navigation-divider-item>\n        }\n        <!-- Group -->\n        @if (item.type === 'group') {\n          <cmat-vertical-navigation-group-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-group-item>\n        }\n        <!-- Spacer -->\n        @if (item.type === 'spacer') {\n          <cmat-vertical-navigation-spacer-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\n          </cmat-vertical-navigation-spacer-item>\n        }\n      }\n    }\n  </div>\n}", dependencies: [{ kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationCollapsableItemComponent), selector: "cmat-vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatTooltipModule) }, { kind: "directive", type: i0.forwardRef(() => i3.MatTooltip), selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatIconModule) }, { kind: "component", type: i0.forwardRef(() => i4.MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationBasicItemComponent), selector: "cmat-vertical-navigation-basic-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationGroupItemComponent), selector: "cmat-vertical-navigation-group-item", inputs: ["autoCollapse", "item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationDividerItemComponent), selector: "cmat-vertical-navigation-divider-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationSpacerItemComponent), selector: "cmat-vertical-navigation-spacer-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }], animations: cmatAnimations, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatVerticalNavigationCollapsableItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CmatVerticalNavigationCollapsableItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-vertical-navigation-collapsable-item', animations: cmatAnimations, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgClass, MatTooltipModule, MatIconModule, CmatVerticalNavigationBasicItemComponent,
                         forwardRef(() => CmatVerticalNavigationCollapsableItemComponent),

package/esm2022/components/navigation/vertical/components/divider/divider.component.mjs CHANGED Viewed

@@ -38,10 +38,10 @@ export class CmatVerticalNavigationDividerItemComponent {
     selectItem(item) {
         this.editSelectedItemChanged.next(item);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatVerticalNavigationDividerItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.CmatNavigationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: CmatVerticalNavigationDividerItemComponent, isStandalone: true, selector: "cmat-vertical-navigation-divider-item", inputs: { item: "item", name: "name", editState: "editState" }, outputs: { editSelectedItemChanged: "editSelectedItemChanged" }, ngImport: i0, template: "<!-- Divider -->\r\n<div class=\"cmat-vertical-navigation-item-wrapper divider\" role=\"presentation\" [ngClass]=\"item.classes?.wrapper\" (click)=\"selectItem(item);\"></div>", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CmatVerticalNavigationDividerItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.CmatNavigationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: CmatVerticalNavigationDividerItemComponent, isStandalone: true, selector: "cmat-vertical-navigation-divider-item", inputs: { item: "item", name: "name", editState: "editState" }, outputs: { editSelectedItemChanged: "editSelectedItemChanged" }, ngImport: i0, template: "<!-- Divider -->\r\n<div class=\"cmat-vertical-navigation-item-wrapper divider\" role=\"presentation\" [ngClass]=\"item.classes?.wrapper\" (click)=\"selectItem(item);\"></div>", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatVerticalNavigationDividerItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CmatVerticalNavigationDividerItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-vertical-navigation-divider-item', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgClass], template: "<!-- Divider -->\r\n<div class=\"cmat-vertical-navigation-item-wrapper divider\" role=\"presentation\" [ngClass]=\"item.classes?.wrapper\" (click)=\"selectItem(item);\"></div>" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.CmatNavigationService }], propDecorators: { item: [{

package/esm2022/components/navigation/vertical/components/group/group.component.mjs CHANGED Viewed

@@ -56,10 +56,10 @@ export class CmatVerticalNavigationGroupItemComponent {
     selectItem(item) {
         this.editSelectedItemChanged.next(item);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatVerticalNavigationGroupItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.CmatNavigationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.7", type: CmatVerticalNavigationGroupItemComponent, isStandalone: true, selector: "cmat-vertical-navigation-group-item", inputs: { autoCollapse: "autoCollapse", item: "item", name: "name", editState: "editState" }, outputs: { editSelectedItemChanged: "editSelectedItemChanged" }, ngImport: i0, template: "<!-- Item wrapper -->\n<div class=\"cmat-vertical-navigation-item-wrapper\" [class.cmat-vertical-navigation-item-has-subtitle]=\"!!item.subTitle\"\n  [ngClass]=\"item.classes?.wrapper\" role=\"presentation\" (click)=\"selectItem(item);\">\n\n  <div class=\"cmat-vertical-navigation-item\">\n\n    <!-- Icon -->\n    @if (item.icon) {\n      <mat-icon class=\"cmat-vertical-navigation-item-icon\" [ngClass]=\"item.classes?.icon\" [svgIcon]=\"item.icon\">\n      </mat-icon>\n    }\n\n    <!-- Title & Subtitle -->\n    <div class=\"cmat-vertical-navigation-item-title-wrapper\">\n      <div class=\"cmat-vertical-navigation-item-title\">\n        <span [ngClass]=\"item.classes?.title\">\n          {{item.title}}\n        </span>\n      </div>\n      @if (item.subTitle) {\n        <div class=\"cmat-vertical-navigation-item-subtitle\">\n          <span [ngClass]=\"item.classes?.subtitle\">\n            {{item.subTitle}}\n          </span>\n        </div>\n      }\n    </div>\n\n    <!-- Badge -->\n    @if (item.badge) {\n      <div class=\"cmat-vertical-navigation-item-badge\">\n        <div class=\"cmat-vertical-navigation-item-badge-content\" [ngClass]=\"item.badge.classes\">\n          {{item.badge.title}}\n        </div>\n      </div>\n    }\n\n  </div>\n\n</div>\n\n@for (item of item.children; track trackByFn($index, item)) {\n  <!-- Skip the hidden items -->\n  @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\n    <!-- Basic -->\n    @if (item.type === 'basic') {\n      <cmat-vertical-navigation-basic-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-basic-item>\n    }\n    <!-- Collapsable -->\n    @if (item.type === 'collapsable') {\n      <cmat-vertical-navigation-collapsable-item [item]=\"item\" [name]=\"name\" [autoCollapse]=\"autoCollapse\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\n      </cmat-vertical-navigation-collapsable-item>\n    }\n    <!-- Divider -->\n    @if (item.type === 'divider') {\n      <cmat-vertical-navigation-divider-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-divider-item>\n    }\n    <!-- Group -->\n    @if (item.type === 'group') {\n      <cmat-vertical-navigation-group-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-group-item>\n    }\n    <!-- Spacer -->\n    @if (item.type === 'spacer') {\n      <cmat-vertical-navigation-spacer-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-spacer-item>\n    }\n  }\n}", dependencies: [{ kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationGroupItemComponent), selector: "cmat-vertical-navigation-group-item", inputs: ["autoCollapse", "item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatIconModule) }, { kind: "component", type: i0.forwardRef(() => i2.MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationBasicItemComponent), selector: "cmat-vertical-navigation-basic-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationDividerItemComponent), selector: "cmat-vertical-navigation-divider-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationCollapsableItemComponent), selector: "cmat-vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationSpacerItemComponent), selector: "cmat-vertical-navigation-spacer-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CmatVerticalNavigationGroupItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.CmatNavigationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.9", type: CmatVerticalNavigationGroupItemComponent, isStandalone: true, selector: "cmat-vertical-navigation-group-item", inputs: { autoCollapse: "autoCollapse", item: "item", name: "name", editState: "editState" }, outputs: { editSelectedItemChanged: "editSelectedItemChanged" }, ngImport: i0, template: "<!-- Item wrapper -->\n<div class=\"cmat-vertical-navigation-item-wrapper\" [class.cmat-vertical-navigation-item-has-subtitle]=\"!!item.subTitle\"\n  [ngClass]=\"item.classes?.wrapper\" role=\"presentation\" (click)=\"selectItem(item);\">\n\n  <div class=\"cmat-vertical-navigation-item\">\n\n    <!-- Icon -->\n    @if (item.icon) {\n      <mat-icon class=\"cmat-vertical-navigation-item-icon\" [ngClass]=\"item.classes?.icon\" [svgIcon]=\"item.icon\">\n      </mat-icon>\n    }\n\n    <!-- Title & Subtitle -->\n    <div class=\"cmat-vertical-navigation-item-title-wrapper\">\n      <div class=\"cmat-vertical-navigation-item-title\">\n        <span [ngClass]=\"item.classes?.title\">\n          {{item.title}}\n        </span>\n      </div>\n      @if (item.subTitle) {\n        <div class=\"cmat-vertical-navigation-item-subtitle\">\n          <span [ngClass]=\"item.classes?.subtitle\">\n            {{item.subTitle}}\n          </span>\n        </div>\n      }\n    </div>\n\n    <!-- Badge -->\n    @if (item.badge) {\n      <div class=\"cmat-vertical-navigation-item-badge\">\n        <div class=\"cmat-vertical-navigation-item-badge-content\" [ngClass]=\"item.badge.classes\">\n          {{item.badge.title}}\n        </div>\n      </div>\n    }\n\n  </div>\n\n</div>\n\n@for (item of item.children; track trackByFn($index, item)) {\n  <!-- Skip the hidden items -->\n  @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\n    <!-- Basic -->\n    @if (item.type === 'basic') {\n      <cmat-vertical-navigation-basic-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-basic-item>\n    }\n    <!-- Collapsable -->\n    @if (item.type === 'collapsable') {\n      <cmat-vertical-navigation-collapsable-item [item]=\"item\" [name]=\"name\" [autoCollapse]=\"autoCollapse\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\n      </cmat-vertical-navigation-collapsable-item>\n    }\n    <!-- Divider -->\n    @if (item.type === 'divider') {\n      <cmat-vertical-navigation-divider-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-divider-item>\n    }\n    <!-- Group -->\n    @if (item.type === 'group') {\n      <cmat-vertical-navigation-group-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-group-item>\n    }\n    <!-- Spacer -->\n    @if (item.type === 'spacer') {\n      <cmat-vertical-navigation-spacer-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\"></cmat-vertical-navigation-spacer-item>\n    }\n  }\n}", dependencies: [{ kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationGroupItemComponent), selector: "cmat-vertical-navigation-group-item", inputs: ["autoCollapse", "item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatIconModule) }, { kind: "component", type: i0.forwardRef(() => i2.MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationBasicItemComponent), selector: "cmat-vertical-navigation-basic-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationDividerItemComponent), selector: "cmat-vertical-navigation-divider-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationCollapsableItemComponent), selector: "cmat-vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: i0.forwardRef(() => CmatVerticalNavigationSpacerItemComponent), selector: "cmat-vertical-navigation-spacer-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatVerticalNavigationGroupItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CmatVerticalNavigationGroupItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-vertical-navigation-group-item', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgClass, MatIconModule, CmatVerticalNavigationBasicItemComponent,
                         CmatVerticalNavigationDividerItemComponent, forwardRef(() => CmatVerticalNavigationGroupItemComponent),

package/esm2022/components/navigation/vertical/components/spacer/spacer.component.mjs CHANGED Viewed

@@ -38,10 +38,10 @@ export class CmatVerticalNavigationSpacerItemComponent {
     selectItem(item) {
         this.editSelectedItemChanged.next(item);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatVerticalNavigationSpacerItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.CmatNavigationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: CmatVerticalNavigationSpacerItemComponent, isStandalone: true, selector: "cmat-vertical-navigation-spacer-item", inputs: { item: "item", name: "name", editState: "editState" }, outputs: { editSelectedItemChanged: "editSelectedItemChanged" }, ngImport: i0, template: "<!-- Spacer -->\r\n<div class=\"cmat-vertical-navigation-item-wrapper\" [ngClass]=\"item.classes?.wrapper\" role=\"presentation\" (click)=\"selectItem(item);\"></div>", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CmatVerticalNavigationSpacerItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.CmatNavigationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: CmatVerticalNavigationSpacerItemComponent, isStandalone: true, selector: "cmat-vertical-navigation-spacer-item", inputs: { item: "item", name: "name", editState: "editState" }, outputs: { editSelectedItemChanged: "editSelectedItemChanged" }, ngImport: i0, template: "<!-- Spacer -->\r\n<div class=\"cmat-vertical-navigation-item-wrapper\" [ngClass]=\"item.classes?.wrapper\" role=\"presentation\" (click)=\"selectItem(item);\"></div>", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatVerticalNavigationSpacerItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CmatVerticalNavigationSpacerItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-vertical-navigation-spacer-item', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgClass], template: "<!-- Spacer -->\r\n<div class=\"cmat-vertical-navigation-item-wrapper\" [ngClass]=\"item.classes?.wrapper\" role=\"presentation\" (click)=\"selectItem(item);\"></div>" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.CmatNavigationService }], propDecorators: { item: [{

package/esm2022/components/navigation/vertical/vertical.component.mjs CHANGED Viewed

@@ -527,10 +527,10 @@ export class CmatVerticalNavigationComponent {
         // Execute the observable
         this.openedChanged.next(open);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatVerticalNavigationComponent, deps: [{ token: i1.AnimationBuilder }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i2.Router }, { token: i3.ScrollStrategyOptions }, { token: i4.CmatNavigationService }, { token: i5.CmatUtilsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.7", type: CmatVerticalNavigationComponent, isStandalone: true, selector: "cmat-vertical-navigation", inputs: { appearance: "appearance", autoCollapse: "autoCollapse", editState: "editState", inner: "inner", mode: "mode", name: "name", navigation: "navigation", opened: "opened", position: "position", transparentOverlay: "transparentOverlay" }, outputs: { appearanceChanged: "appearanceChanged", modeChanged: "modeChanged", openedChanged: "openedChanged", positionChanged: "positionChanged", editSelectedItemChanged: "editSelectedItemChanged" }, host: { listeners: { "mouseenter": "onMouseenter()", "mouseleave": "onMouseleave()" }, properties: { "class": "this.classList", "style": "this.styleList" } }, viewQueries: [{ propertyName: "_navigationContentEl", first: true, predicate: ["navigationContent"], descendants: true }], exportAs: ["cmatVerticalNavigation"], usesOnChanges: true, ngImport: i0, template: "<div class=\"cmat-vertical-navigation-wrapper\">\n\n  <!-- Header -->\n  <div class=\"cmat-vertical-navigation-header\">\n    <ng-content select=\"[cmatVerticalNavigationHeader]\"></ng-content>\n  </div>\n\n  <!-- Content -->\n  <div class=\"cmat-vertical-navigation-content overflow-y-auto lg:overflow-y-hidden lg:hover:overflow-y-auto scrollbar-custom\" #navigationContent>\n\n    <!-- Content header -->\n    <div class=\"cmat-vertical-navigation-content-header\">\n      <ng-content select=\"[cmatVerticalNavigationContentHeader]\"></ng-content>\n    </div>\n\n    <!-- Items -->\n    @for (item of navigation; track trackByFn($index, item)) {\n      <!-- Skip the hidden items -->\n      @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\n        <!-- Aside -->\n        @if (item.type === 'aside') {\n          <cmat-vertical-navigation-aside-item [item]=\"item\" [name]=\"name\" [activeItemId]=\"activeAsideItemId\"\n            [autoCollapse]=\"autoCollapse\" [skipChildren]=\"true\" (click)=\"toggleAside(item)\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\n          </cmat-vertical-navigation-aside-item>\n        }\n        <!-- Basic -->\n        @if (item.type === 'basic') {\n          <cmat-vertical-navigation-basic-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\n          </cmat-vertical-navigation-basic-item>\n        }\n        <!-- Collapsable -->\n        @if (item.type === 'collapsable') {\n          <cmat-vertical-navigation-collapsable-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\"\n          [autoCollapse]=\"autoCollapse\"></cmat-vertical-navigation-collapsable-item>\n        }\n        <!-- Divider -->\n        @if (item.type === 'divider') {\n          <cmat-vertical-navigation-divider-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\n          </cmat-vertical-navigation-divider-item>\n        }\n        <!-- Group -->\n        @if (item.type === 'group') {\n          <cmat-vertical-navigation-group-item [item]=\"item\" [name]=\"name\" [autoCollapse]=\"autoCollapse\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\n          </cmat-vertical-navigation-group-item>\n        }\n        <!-- Spacer -->\n        @if (item.type === 'spacer') {\n          <cmat-vertical-navigation-spacer-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\n          </cmat-vertical-navigation-spacer-item>\n        }\n      }\n    }\n\n    <!-- Content footer -->\n    <div class=\"cmat-vertical-navigation-content-footer\">\n      <ng-content select=\"[cmatVerticalNavigationContentFooter]\"></ng-content>\n    </div>\n\n  </div>\n  <!-- Footer -->\n  <div class=\"cmat-vertical-navigation-footer\">\n    <ng-content select=\"[cmatVerticalNavigationFooter]\"></ng-content>\n  </div>\n\n</div>\n\n<!-- Aside -->\n@if (activeAsideItemId) {\n  <div class=\"cmat-vertical-navigation-aside-wrapper overflow-y-auto lg:overflow-y-hidden lg:hover:overflow-y-auto scrollbar-custom\"\n    [@fadeInLeft]=\"position === 'left'\" [@fadeInRight]=\"position === 'right'\" [@fadeOutLeft]=\"position === 'left'\"\n    [@fadeOutRight]=\"position === 'right'\">\n    <!-- Items -->\n    @for (item of navigation; track trackByFn($index, item)) {\n      <!-- Skip the hidden items -->\n      @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\n        <!-- Aside -->\n        @if (item.type === 'aside' && item.id === activeAsideItemId) {\n          <cmat-vertical-navigation-aside-item [item]=\"item\" [name]=\"name\" [autoCollapse]=\"autoCollapse\">\n          </cmat-vertical-navigation-aside-item>\n        }\n      }\n    }\n  </div>\n}", styles: ["cmat-vertical-navigation{position:sticky;display:flex;flex-direction:column;flex:1 0 auto;top:0;width:280px;min-width:280px;max-width:280px;height:100%;z-index:200}cmat-vertical-navigation.cmat-vertical-navigation-animations-enabled{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:visibility,margin-left,margin-right,transform,width,max-width,min-width}cmat-vertical-navigation.cmat-vertical-navigation-animations-enabled .cmat-vertical-navigation-wrapper{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:width,max-width,min-width}cmat-vertical-navigation.cmat-vertical-navigation-mode-over{position:fixed;top:0;bottom:0}cmat-vertical-navigation.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side{margin-left:-280px}cmat-vertical-navigation.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side.cmat-vertical-navigation-opened{margin-left:0}cmat-vertical-navigation.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-over{left:0;transform:translate3d(-100%,0,0)}cmat-vertical-navigation.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-over.cmat-vertical-navigation-opened{transform:translateZ(0)}cmat-vertical-navigation.cmat-vertical-navigation-position-left .cmat-vertical-navigation-wrapper{left:0}cmat-vertical-navigation.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side{margin-right:-280px}cmat-vertical-navigation.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side.cmat-vertical-navigation-opened{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-over{right:0;transform:translate3d(100%,0,0)}cmat-vertical-navigation.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-over.cmat-vertical-navigation-opened{transform:translateZ(0)}cmat-vertical-navigation.cmat-vertical-navigation-position-right .cmat-vertical-navigation-wrapper{right:0}cmat-vertical-navigation.cmat-vertical-navigation-inner{position:relative;width:auto;min-width:0;max-width:none;height:auto;min-height:0;max-height:none;box-shadow:none}cmat-vertical-navigation.cmat-vertical-navigation-inner .cmat-vertical-navigation-wrapper{position:relative;overflow:visible;height:auto}cmat-vertical-navigation.cmat-vertical-navigation-inner .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content{overflow:visible!important}cmat-vertical-navigation .cmat-vertical-navigation-wrapper{position:absolute;display:flex;flex:1 1 auto;flex-direction:column;top:0;bottom:0;width:100%;height:100%;overflow:hidden;z-index:10;background:inherit;box-shadow:inset -1px 0 0 var(--cmat-border)}cmat-vertical-navigation .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content{flex:1 1 auto;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}cmat-vertical-navigation .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-divider-item{margin:24px 0}cmat-vertical-navigation .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-group-item{margin-top:24px}cmat-vertical-navigation .cmat-vertical-navigation-aside-wrapper{position:absolute;display:flex;flex:1 1 auto;flex-direction:column;top:0;bottom:0;left:280px;width:280px;height:100%;z-index:5;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;transition-duration:.4s;transition-property:left,right;transition-timing-function:cubic-bezier(.25,.8,.25,1);background:inherit}cmat-vertical-navigation .cmat-vertical-navigation-aside-wrapper>cmat-vertical-navigation-aside-item{padding:24px 0}cmat-vertical-navigation .cmat-vertical-navigation-aside-wrapper>cmat-vertical-navigation-aside-item>.cmat-vertical-navigation-item-wrapper{display:none!important}cmat-vertical-navigation.cmat-vertical-navigation-position-right .cmat-vertical-navigation-aside-wrapper{left:auto;right:280px}cmat-vertical-navigation cmat-vertical-navigation-aside-item,cmat-vertical-navigation cmat-vertical-navigation-basic-item,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item,cmat-vertical-navigation cmat-vertical-navigation-divider-item,cmat-vertical-navigation cmat-vertical-navigation-group-item,cmat-vertical-navigation cmat-vertical-navigation-spacer-item{display:flex;flex-direction:column;flex:1 0 auto;-webkit-user-select:none;user-select:none}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{position:relative;display:flex;align-items:center;justify-content:flex-start;padding:10px 16px;font-size:13px;font-weight:500;line-height:20px;text-decoration:none;border-radius:6px}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled{cursor:default;opacity:.4}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon{margin-right:16px}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle{font-size:11px;line-height:1.5}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge{margin-left:auto}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content{display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;white-space:nowrap;height:20px}cmat-vertical-navigation cmat-vertical-navigation-aside-item>.cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation cmat-vertical-navigation-basic-item>.cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper{margin:0 12px}cmat-vertical-navigation cmat-vertical-navigation-aside-item,cmat-vertical-navigation cmat-vertical-navigation-basic-item,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item{margin-bottom:4px}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item{cursor:pointer}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge+.cmat-vertical-navigation-item-arrow{margin-left:8px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow{height:20px;line-height:20px;margin-left:auto;transition:transform .3s cubic-bezier(.25,.8,.25,1),color 375ms cubic-bezier(.25,.8,.25,1)}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item.cmat-vertical-navigation-item-expanded>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow{transform:rotate(90deg)}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-children{margin-top:6px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-children>*:last-child{padding-bottom:6px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-children>*:last-child>.cmat-vertical-navigation-item-children>*:last-child{padding-bottom:0}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding:10px 16px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children{overflow:hidden}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding-left:56px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding-left:72px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding-left:88px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding-left:104px}cmat-vertical-navigation cmat-vertical-navigation-divider-item{margin:12px 0}cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper{height:1px;box-shadow:0 1px}cmat-vertical-navigation cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon{display:none!important}cmat-vertical-navigation cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-title{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}cmat-vertical-navigation cmat-vertical-navigation-spacer-item{margin:6px 0}.cmat-vertical-navigation-overlay{position:absolute;inset:0;z-index:170;opacity:0;background-color:#0009}.cmat-vertical-navigation-overlay+.cmat-vertical-navigation-aside-overlay{background-color:transparent}.cmat-vertical-navigation-aside-overlay{position:absolute;inset:0;z-index:169;opacity:0;background-color:#0000004d}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact{width:112px;min-width:112px;max-width:112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side{margin-left:-112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-left.cmat-vertical-navigation-opened{margin-left:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side{margin-right:-112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-right.cmat-vertical-navigation-opened{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-right .cmat-vertical-navigation-aside-wrapper{left:auto;right:112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper{margin:4px 8px 0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{flex-direction:column;justify-content:center;padding:12px;border-radius:6px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{margin-top:8px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-title,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-title{font-size:12px;font-weight:500;text-align:center;line-height:16px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle{display:none!important}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge{position:absolute;top:12px;left:64px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item>cmat-vertical-navigation-collapsable-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item>cmat-vertical-navigation-collapsable-item{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item>cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item>cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-aside-wrapper{left:112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over){width:80px;min-width:80px;max-width:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side{margin-left:-80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-left.cmat-vertical-navigation-opened{margin-left:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side{margin-right:-80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-right.cmat-vertical-navigation-opened{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-right .cmat-vertical-navigation-aside-wrapper{left:auto;right:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-right.cmat-vertical-navigation-hover .cmat-vertical-navigation-aside-wrapper{left:auto;right:280px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{width:280px-24px;min-width:280px-24px;max-width:280px-24px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{transition:opacity .4s cubic-bezier(.25,.8,.25,1)}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item:first-of-type{margin-top:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{padding:10px 16px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{white-space:nowrap;opacity:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:before{content:\"\";position:absolute;top:20px;width:23px;border-top-width:2px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-aside-wrapper{left:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-wrapper{width:280px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{white-space:nowrap;animation:removeWhiteSpaceNoWrap 1ms linear .35s;animation-fill-mode:forwards}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-aside-wrapper{left:280px}@keyframes removeWhiteSpaceNoWrap{0%{white-space:nowrap}99%{white-space:nowrap}to{white-space:normal}}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin{width:80px;min-width:80px;max-width:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side{margin-left:-80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-left.cmat-vertical-navigation-opened{margin-left:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side{margin-right:-80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-right.cmat-vertical-navigation-opened{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-right .cmat-vertical-navigation-aside-wrapper{left:auto;right:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item{flex-direction:column;justify-content:center;height:64px;min-height:64px;max-height:64px;padding:0 16px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper{display:flex;align-items:center;justify-content:center}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{justify-content:center;padding:12px;border-radius:4px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon{margin:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-collapsable-item{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-aside-wrapper{left:80px}\n"], dependencies: [{ kind: "component", type: CmatVerticalNavigationAsideItemComponent, selector: "cmat-vertical-navigation-aside-item", inputs: ["activeItemId", "autoCollapse", "item", "name", "skipChildren", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationBasicItemComponent, selector: "cmat-vertical-navigation-basic-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationCollapsableItemComponent, selector: "cmat-vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationDividerItemComponent, selector: "cmat-vertical-navigation-divider-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationGroupItemComponent, selector: "cmat-vertical-navigation-group-item", inputs: ["autoCollapse", "item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationSpacerItemComponent, selector: "cmat-vertical-navigation-spacer-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }], animations: cmatAnimations, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CmatVerticalNavigationComponent, deps: [{ token: i1.AnimationBuilder }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i2.Router }, { token: i3.ScrollStrategyOptions }, { token: i4.CmatNavigationService }, { token: i5.CmatUtilsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.9", type: CmatVerticalNavigationComponent, isStandalone: true, selector: "cmat-vertical-navigation", inputs: { appearance: "appearance", autoCollapse: "autoCollapse", editState: "editState", inner: "inner", mode: "mode", name: "name", navigation: "navigation", opened: "opened", position: "position", transparentOverlay: "transparentOverlay" }, outputs: { appearanceChanged: "appearanceChanged", modeChanged: "modeChanged", openedChanged: "openedChanged", positionChanged: "positionChanged", editSelectedItemChanged: "editSelectedItemChanged" }, host: { listeners: { "mouseenter": "onMouseenter()", "mouseleave": "onMouseleave()" }, properties: { "class": "this.classList", "style": "this.styleList" } }, viewQueries: [{ propertyName: "_navigationContentEl", first: true, predicate: ["navigationContent"], descendants: true }], exportAs: ["cmatVerticalNavigation"], usesOnChanges: true, ngImport: i0, template: "<div class=\"cmat-vertical-navigation-wrapper\">\n\n  <!-- Header -->\n  <div class=\"cmat-vertical-navigation-header\">\n    <ng-content select=\"[cmatVerticalNavigationHeader]\"></ng-content>\n  </div>\n\n  <!-- Content -->\n  <div class=\"cmat-vertical-navigation-content overflow-y-auto lg:overflow-y-hidden lg:hover:overflow-y-auto scrollbar-custom\" #navigationContent>\n\n    <!-- Content header -->\n    <div class=\"cmat-vertical-navigation-content-header\">\n      <ng-content select=\"[cmatVerticalNavigationContentHeader]\"></ng-content>\n    </div>\n\n    <!-- Items -->\n    @for (item of navigation; track trackByFn($index, item)) {\n      <!-- Skip the hidden items -->\n      @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\n        <!-- Aside -->\n        @if (item.type === 'aside') {\n          <cmat-vertical-navigation-aside-item [item]=\"item\" [name]=\"name\" [activeItemId]=\"activeAsideItemId\"\n            [autoCollapse]=\"autoCollapse\" [skipChildren]=\"true\" (click)=\"toggleAside(item)\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\n          </cmat-vertical-navigation-aside-item>\n        }\n        <!-- Basic -->\n        @if (item.type === 'basic') {\n          <cmat-vertical-navigation-basic-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\n          </cmat-vertical-navigation-basic-item>\n        }\n        <!-- Collapsable -->\n        @if (item.type === 'collapsable') {\n          <cmat-vertical-navigation-collapsable-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\"\n          [autoCollapse]=\"autoCollapse\"></cmat-vertical-navigation-collapsable-item>\n        }\n        <!-- Divider -->\n        @if (item.type === 'divider') {\n          <cmat-vertical-navigation-divider-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\n          </cmat-vertical-navigation-divider-item>\n        }\n        <!-- Group -->\n        @if (item.type === 'group') {\n          <cmat-vertical-navigation-group-item [item]=\"item\" [name]=\"name\" [autoCollapse]=\"autoCollapse\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\n          </cmat-vertical-navigation-group-item>\n        }\n        <!-- Spacer -->\n        @if (item.type === 'spacer') {\n          <cmat-vertical-navigation-spacer-item [item]=\"item\" [name]=\"name\" [editState]=\"editState\" (editSelectedItemChanged)=\"selectItem($event)\">\n          </cmat-vertical-navigation-spacer-item>\n        }\n      }\n    }\n\n    <!-- Content footer -->\n    <div class=\"cmat-vertical-navigation-content-footer\">\n      <ng-content select=\"[cmatVerticalNavigationContentFooter]\"></ng-content>\n    </div>\n\n  </div>\n  <!-- Footer -->\n  <div class=\"cmat-vertical-navigation-footer\">\n    <ng-content select=\"[cmatVerticalNavigationFooter]\"></ng-content>\n  </div>\n\n</div>\n\n<!-- Aside -->\n@if (activeAsideItemId) {\n  <div class=\"cmat-vertical-navigation-aside-wrapper overflow-y-auto lg:overflow-y-hidden lg:hover:overflow-y-auto scrollbar-custom\"\n    [@fadeInLeft]=\"position === 'left'\" [@fadeInRight]=\"position === 'right'\" [@fadeOutLeft]=\"position === 'left'\"\n    [@fadeOutRight]=\"position === 'right'\">\n    <!-- Items -->\n    @for (item of navigation; track trackByFn($index, item)) {\n      <!-- Skip the hidden items -->\n      @if ((item.hidden && !item.hidden(item)) || !item.hidden) {\n        <!-- Aside -->\n        @if (item.type === 'aside' && item.id === activeAsideItemId) {\n          <cmat-vertical-navigation-aside-item [item]=\"item\" [name]=\"name\" [autoCollapse]=\"autoCollapse\">\n          </cmat-vertical-navigation-aside-item>\n        }\n      }\n    }\n  </div>\n}", styles: ["cmat-vertical-navigation{position:sticky;display:flex;flex-direction:column;flex:1 0 auto;top:0;width:280px;min-width:280px;max-width:280px;height:100%;z-index:200}cmat-vertical-navigation.cmat-vertical-navigation-animations-enabled{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:visibility,margin-left,margin-right,transform,width,max-width,min-width}cmat-vertical-navigation.cmat-vertical-navigation-animations-enabled .cmat-vertical-navigation-wrapper{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:width,max-width,min-width}cmat-vertical-navigation.cmat-vertical-navigation-mode-over{position:fixed;top:0;bottom:0}cmat-vertical-navigation.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side{margin-left:-280px}cmat-vertical-navigation.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side.cmat-vertical-navigation-opened{margin-left:0}cmat-vertical-navigation.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-over{left:0;transform:translate3d(-100%,0,0)}cmat-vertical-navigation.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-over.cmat-vertical-navigation-opened{transform:translateZ(0)}cmat-vertical-navigation.cmat-vertical-navigation-position-left .cmat-vertical-navigation-wrapper{left:0}cmat-vertical-navigation.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side{margin-right:-280px}cmat-vertical-navigation.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side.cmat-vertical-navigation-opened{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-over{right:0;transform:translate3d(100%,0,0)}cmat-vertical-navigation.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-over.cmat-vertical-navigation-opened{transform:translateZ(0)}cmat-vertical-navigation.cmat-vertical-navigation-position-right .cmat-vertical-navigation-wrapper{right:0}cmat-vertical-navigation.cmat-vertical-navigation-inner{position:relative;width:auto;min-width:0;max-width:none;height:auto;min-height:0;max-height:none;box-shadow:none}cmat-vertical-navigation.cmat-vertical-navigation-inner .cmat-vertical-navigation-wrapper{position:relative;overflow:visible;height:auto}cmat-vertical-navigation.cmat-vertical-navigation-inner .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content{overflow:visible!important}cmat-vertical-navigation .cmat-vertical-navigation-wrapper{position:absolute;display:flex;flex:1 1 auto;flex-direction:column;top:0;bottom:0;width:100%;height:100%;overflow:hidden;z-index:10;background:inherit;box-shadow:inset -1px 0 0 var(--cmat-border)}cmat-vertical-navigation .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content{flex:1 1 auto;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}cmat-vertical-navigation .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-divider-item{margin:24px 0}cmat-vertical-navigation .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-group-item{margin-top:24px}cmat-vertical-navigation .cmat-vertical-navigation-aside-wrapper{position:absolute;display:flex;flex:1 1 auto;flex-direction:column;top:0;bottom:0;left:280px;width:280px;height:100%;z-index:5;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;transition-duration:.4s;transition-property:left,right;transition-timing-function:cubic-bezier(.25,.8,.25,1);background:inherit}cmat-vertical-navigation .cmat-vertical-navigation-aside-wrapper>cmat-vertical-navigation-aside-item{padding:24px 0}cmat-vertical-navigation .cmat-vertical-navigation-aside-wrapper>cmat-vertical-navigation-aside-item>.cmat-vertical-navigation-item-wrapper{display:none!important}cmat-vertical-navigation.cmat-vertical-navigation-position-right .cmat-vertical-navigation-aside-wrapper{left:auto;right:280px}cmat-vertical-navigation cmat-vertical-navigation-aside-item,cmat-vertical-navigation cmat-vertical-navigation-basic-item,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item,cmat-vertical-navigation cmat-vertical-navigation-divider-item,cmat-vertical-navigation cmat-vertical-navigation-group-item,cmat-vertical-navigation cmat-vertical-navigation-spacer-item{display:flex;flex-direction:column;flex:1 0 auto;-webkit-user-select:none;user-select:none}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{position:relative;display:flex;align-items:center;justify-content:flex-start;padding:10px 16px;font-size:13px;font-weight:500;line-height:20px;text-decoration:none;border-radius:6px}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item.cmat-vertical-navigation-item-disabled{cursor:default;opacity:.4}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon{margin-right:16px}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle{font-size:11px;line-height:1.5}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge{margin-left:auto}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation cmat-vertical-navigation-spacer-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge .cmat-vertical-navigation-item-badge-content{display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;white-space:nowrap;height:20px}cmat-vertical-navigation cmat-vertical-navigation-aside-item>.cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation cmat-vertical-navigation-basic-item>.cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper{margin:0 12px}cmat-vertical-navigation cmat-vertical-navigation-aside-item,cmat-vertical-navigation cmat-vertical-navigation-basic-item,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item{margin-bottom:4px}cmat-vertical-navigation cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item,cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item{cursor:pointer}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge+.cmat-vertical-navigation-item-arrow{margin-left:8px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow{height:20px;line-height:20px;margin-left:auto;transition:transform .3s cubic-bezier(.25,.8,.25,1),color 375ms cubic-bezier(.25,.8,.25,1)}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item.cmat-vertical-navigation-item-expanded>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow{transform:rotate(90deg)}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-children{margin-top:6px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-children>*:last-child{padding-bottom:6px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-children>*:last-child>.cmat-vertical-navigation-item-children>*:last-child{padding-bottom:0}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item>.cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding:10px 16px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children{overflow:hidden}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding-left:56px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding-left:72px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding-left:88px}cmat-vertical-navigation cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item-children .cmat-vertical-navigation-item{padding-left:104px}cmat-vertical-navigation cmat-vertical-navigation-divider-item{margin:12px 0}cmat-vertical-navigation cmat-vertical-navigation-divider-item .cmat-vertical-navigation-item-wrapper{height:1px;box-shadow:0 1px}cmat-vertical-navigation cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon{display:none!important}cmat-vertical-navigation cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-title{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}cmat-vertical-navigation cmat-vertical-navigation-spacer-item{margin:6px 0}.cmat-vertical-navigation-overlay{position:absolute;inset:0;z-index:170;opacity:0;background-color:#0009}.cmat-vertical-navigation-overlay+.cmat-vertical-navigation-aside-overlay{background-color:transparent}.cmat-vertical-navigation-aside-overlay{position:absolute;inset:0;z-index:169;opacity:0;background-color:#0000004d}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact{width:112px;min-width:112px;max-width:112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side{margin-left:-112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-left.cmat-vertical-navigation-opened{margin-left:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side{margin-right:-112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-right.cmat-vertical-navigation-opened{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact.cmat-vertical-navigation-position-right .cmat-vertical-navigation-aside-wrapper{left:auto;right:112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper{margin:4px 8px 0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{flex-direction:column;justify-content:center;padding:12px;border-radius:6px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{margin-top:8px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-title,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-title{font-size:12px;font-weight:500;text-align:center;line-height:16px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper .cmat-vertical-navigation-item-subtitle{display:none!important}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge{position:absolute;top:12px;left:64px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item>cmat-vertical-navigation-collapsable-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item>cmat-vertical-navigation-collapsable-item{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item>cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item>cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-compact .cmat-vertical-navigation-aside-wrapper{left:112px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over){width:80px;min-width:80px;max-width:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side{margin-left:-80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-left.cmat-vertical-navigation-opened{margin-left:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side{margin-right:-80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-right.cmat-vertical-navigation-opened{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-right .cmat-vertical-navigation-aside-wrapper{left:auto;right:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-mode-over).cmat-vertical-navigation-position-right.cmat-vertical-navigation-hover .cmat-vertical-navigation-aside-wrapper{left:auto;right:280px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{width:280px-24px;min-width:280px-24px;max-width:280px-24px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{transition:opacity .4s cubic-bezier(.25,.8,.25,1)}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item:first-of-type{margin-top:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{padding:10px 16px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{white-space:nowrap;opacity:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-collapsable-item .cmat-vertical-navigation-item-children{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item:before{content:\"\";position:absolute;top:20px;width:23px;border-top-width:2px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense .cmat-vertical-navigation-aside-wrapper{left:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-wrapper{width:280px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge,cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{white-space:nowrap;animation:removeWhiteSpaceNoWrap 1ms linear .35s;animation-fill-mode:forwards}cmat-vertical-navigation.cmat-vertical-navigation-appearance-dense.cmat-vertical-navigation-hover .cmat-vertical-navigation-aside-wrapper{left:280px}@keyframes removeWhiteSpaceNoWrap{0%{white-space:nowrap}99%{white-space:nowrap}to{white-space:normal}}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin{width:80px;min-width:80px;max-width:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-left.cmat-vertical-navigation-mode-side{margin-left:-80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-left.cmat-vertical-navigation-opened{margin-left:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-right.cmat-vertical-navigation-mode-side{margin-right:-80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-right.cmat-vertical-navigation-opened{margin-right:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin.cmat-vertical-navigation-position-right .cmat-vertical-navigation-aside-wrapper{left:auto;right:80px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item{flex-direction:column;justify-content:center;height:64px;min-height:64px;max-height:64px;padding:0 16px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper{display:flex;align-items:center;justify-content:center}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item{justify-content:center;padding:12px;border-radius:4px}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-icon{margin:0}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-aside-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-arrow,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-badge-content,cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-basic-item .cmat-vertical-navigation-item-wrapper .cmat-vertical-navigation-item .cmat-vertical-navigation-item-title-wrapper{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-collapsable-item{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-wrapper .cmat-vertical-navigation-content>cmat-vertical-navigation-group-item>.cmat-vertical-navigation-item-wrapper{display:none}cmat-vertical-navigation.cmat-vertical-navigation-appearance-thin .cmat-vertical-navigation-aside-wrapper{left:80px}\n"], dependencies: [{ kind: "component", type: CmatVerticalNavigationAsideItemComponent, selector: "cmat-vertical-navigation-aside-item", inputs: ["activeItemId", "autoCollapse", "item", "name", "skipChildren", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationBasicItemComponent, selector: "cmat-vertical-navigation-basic-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationCollapsableItemComponent, selector: "cmat-vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationDividerItemComponent, selector: "cmat-vertical-navigation-divider-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationGroupItemComponent, selector: "cmat-vertical-navigation-group-item", inputs: ["autoCollapse", "item", "name", "editState"], outputs: ["editSelectedItemChanged"] }, { kind: "component", type: CmatVerticalNavigationSpacerItemComponent, selector: "cmat-vertical-navigation-spacer-item", inputs: ["item", "name", "editState"], outputs: ["editSelectedItemChanged"] }], animations: cmatAnimations, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatVerticalNavigationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CmatVerticalNavigationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-vertical-navigation', animations: cmatAnimations, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatVerticalNavigation', standalone: true, imports: [CmatVerticalNavigationAsideItemComponent, CmatVerticalNavigationBasicItemComponent,
                         CmatVerticalNavigationCollapsableItemComponent, CmatVerticalNavigationDividerItemComponent,

package/esm2022/components/pagination/pagination.component.mjs CHANGED Viewed

@@ -44,10 +44,10 @@ export class CmatPaginationComponent {
     trackByIndex(index) {
         return index;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatPaginationComponent, deps: [{ token: i1.CmatMediaWatcherService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.7", type: CmatPaginationComponent, isStandalone: true, selector: "cmat-pagination", inputs: { id: "id", maxSize: "maxSize", itemsPerPages: "itemsPerPages", initPerPage: "initPerPage", autoHide: "autoHide" }, outputs: { pageChange: "pageChange", pageBoundsCorrection: "pageBoundsCorrection", perPageCountChange: "perPageCountChange" }, exportAs: ["cmatPagination"], ngImport: i0, template: "<pagination-template #p=\"paginationApi\" [id]=\"id\" [maxSize]=\"isScreenSmall&&maxSize>5?5:maxSize\"\n  (pageChange)=\"pageChange.emit($event)\" class=\"w-full px-4 py-2 flex\"\n  (pageBoundsCorrection)=\"pageBoundsCorrection.emit($event)\" (perPageCountChange)=\"perPageCountChange.emit($event)\">\n  <div class=\"hidden md:flex flex-auto items-center\">\n    <span>\u603B\u8BA1:{{p.getTotalItems()}}</span>\n  </div>\n  <nav role=\"navigation\" class=\"flex min-h-12 w-full md:w-0\">\n    @if (!(autoHide && p.pages.length <= 1)) {\n      <ul\n        class=\"flex flex-row space-x-6 items-center justify-center md:justify-end w-full\">\n        <li>\n          <button type=\"button\" class=\"flex items-center\" mat-button mat-icon-button (click)=\"p.goFirstPage()\"\n            [disabled]=\"p.getCurrent()===1\">\n            <mat-icon svgIcon=\"mat_outline:first_page\"></mat-icon>\n          </button>\n        </li>\n        <li>\n          <button type=\"button\" class=\"flex items-center\" mat-button mat-icon-button (click)=\"p.previous()\"\n            [disabled]=\"p.getCurrent()===1\">\n            <mat-icon svgIcon=\"mat_outline:navigate_before\"></mat-icon>\n          </button>\n        </li>\n        @for (page of p.pages; track trackByIndex($index)) {\n          <li class=\"flex text-xl lg:text-2xl\">\n            @if (p.getCurrent() !== page.value) {\n              <a tabindex=\"0\" (click)=\"p.setCurrent(page.value)\"\n                role=\"presentation\" class=\"cursor-pointer text-gray-400 hover:text-black\">\n                <span>{{ (page.label === '...') ? page.label : (page.label | number:'') }}</span>\n              </a>\n            }\n            @if (p.getCurrent() === page.value) {\n              <span class=\"text-black\">\n                <span>{{ (page.label === '...') ? page.label : (page.label | number:'') }}</span>\n              </span>\n            }\n          </li>\n        }\n        <li>\n          <button type=\"button\" class=\"flex items-center\" mat-button mat-icon-button (click)=\"p.next()\"\n            [disabled]=\"p.getCurrent()===p.getLastPage()\">\n            <mat-icon svgIcon=\"mat_outline:navigate_next\"></mat-icon>\n          </button>\n        </li>\n        <li>\n          <button type=\"button\" class=\"flex items-center\" mat-button mat-icon-button (click)=\"p.goLastPage()\"\n            [disabled]=\"p.getCurrent()===p.getLastPage()\">\n            <mat-icon svgIcon=\"mat_outline:last_page\"></mat-icon>\n          </button>\n        </li>\n        <li class=\"hidden md:block\">\n          <mat-form-field [ngStyle]=\"{'width':((p.getLastPage()?.toString()?.length||0)*8+64)+'px'}\">\n            <input matInput #current [value]=\"p.getCurrent()\" [autocomplete]=\"'off'\" [min]=\"0\"\n              [max]=\"p.getLastPage()||0\" type=\"text\" cmatDigitOnly class=\"text-end\"\n              (keyup.enter)=\"p.setCurrent(current.value)\">\n              <span matSuffix>/<div class=\"pl-1\">{{p.getLastPage()}}</div></span>\n            </mat-form-field>\n          </li>\n          <li class=\"hidden md:block\">\n            <mat-form-field class=\"w-24\">\n              <mat-select name=\"pageCount\" #pageCount [value]=\"initPerPage\"\n                (selectionChange)=\"p.setItemsPerPage(pageCount.value)\">\n                @for (perPage of itemsPerPages; track perPage) {\n                  <mat-option [value]=\"perPage\">\n                    {{perPage}}\n                  </mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n          </li>\n        </ul>\n      }\n    </nav>\n  </pagination-template>", dependencies: [{ kind: "directive", type: CmatPaginationDirective, selector: "pagination-template,[pagination-template]", inputs: ["id", "maxSize"], outputs: ["pageChange", "pageBoundsCorrection", "perPageCountChange"], exportAs: ["paginationApi"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: CmatDigitOnlyDirective, selector: "[cmatDigitOnly]", inputs: ["decimal", "decimalSeparator", "allowNegatives", "allowPaste", "negativeSign", "min", "max", "pattern"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "pipe", type: DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CmatPaginationComponent, deps: [{ token: i1.CmatMediaWatcherService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.9", type: CmatPaginationComponent, isStandalone: true, selector: "cmat-pagination", inputs: { id: "id", maxSize: "maxSize", itemsPerPages: "itemsPerPages", initPerPage: "initPerPage", autoHide: "autoHide" }, outputs: { pageChange: "pageChange", pageBoundsCorrection: "pageBoundsCorrection", perPageCountChange: "perPageCountChange" }, exportAs: ["cmatPagination"], ngImport: i0, template: "<pagination-template #p=\"paginationApi\" [id]=\"id\" [maxSize]=\"isScreenSmall&&maxSize>5?5:maxSize\"\n  (pageChange)=\"pageChange.emit($event)\" class=\"w-full px-4 py-2 flex\"\n  (pageBoundsCorrection)=\"pageBoundsCorrection.emit($event)\" (perPageCountChange)=\"perPageCountChange.emit($event)\">\n  <div class=\"hidden md:flex flex-auto items-center\">\n    <span>\u603B\u8BA1:{{p.getTotalItems()}}</span>\n  </div>\n  <nav role=\"navigation\" class=\"flex min-h-12 w-full md:w-0\">\n    @if (!(autoHide && p.pages.length <= 1)) {\n      <ul\n        class=\"flex flex-row space-x-6 items-center justify-center md:justify-end w-full\">\n        <li>\n          <button type=\"button\" class=\"flex items-center\" mat-button mat-icon-button (click)=\"p.goFirstPage()\"\n            [disabled]=\"p.getCurrent()===1\">\n            <mat-icon svgIcon=\"mat_outline:first_page\"></mat-icon>\n          </button>\n        </li>\n        <li>\n          <button type=\"button\" class=\"flex items-center\" mat-button mat-icon-button (click)=\"p.previous()\"\n            [disabled]=\"p.getCurrent()===1\">\n            <mat-icon svgIcon=\"mat_outline:navigate_before\"></mat-icon>\n          </button>\n        </li>\n        @for (page of p.pages; track trackByIndex($index)) {\n          <li class=\"flex text-xl lg:text-2xl\">\n            @if (p.getCurrent() !== page.value) {\n              <a tabindex=\"0\" (click)=\"p.setCurrent(page.value)\"\n                role=\"presentation\" class=\"cursor-pointer text-gray-400 hover:text-black\">\n                <span>{{ (page.label === '...') ? page.label : (page.label | number:'') }}</span>\n              </a>\n            }\n            @if (p.getCurrent() === page.value) {\n              <span class=\"text-black\">\n                <span>{{ (page.label === '...') ? page.label : (page.label | number:'') }}</span>\n              </span>\n            }\n          </li>\n        }\n        <li>\n          <button type=\"button\" class=\"flex items-center\" mat-button mat-icon-button (click)=\"p.next()\"\n            [disabled]=\"p.getCurrent()===p.getLastPage()\">\n            <mat-icon svgIcon=\"mat_outline:navigate_next\"></mat-icon>\n          </button>\n        </li>\n        <li>\n          <button type=\"button\" class=\"flex items-center\" mat-button mat-icon-button (click)=\"p.goLastPage()\"\n            [disabled]=\"p.getCurrent()===p.getLastPage()\">\n            <mat-icon svgIcon=\"mat_outline:last_page\"></mat-icon>\n          </button>\n        </li>\n        <li class=\"hidden md:block\">\n          <mat-form-field [ngStyle]=\"{'width':((p.getLastPage()?.toString()?.length||0)*8+64)+'px'}\">\n            <input matInput #current [value]=\"p.getCurrent()\" [autocomplete]=\"'off'\" [min]=\"0\"\n              [max]=\"p.getLastPage()||0\" type=\"text\" cmatDigitOnly class=\"text-end\"\n              (keyup.enter)=\"p.setCurrent(current.value)\">\n              <span matSuffix>/<div class=\"pl-1\">{{p.getLastPage()}}</div></span>\n            </mat-form-field>\n          </li>\n          <li class=\"hidden md:block\">\n            <mat-form-field class=\"w-24\">\n              <mat-select name=\"pageCount\" #pageCount [value]=\"initPerPage\"\n                (selectionChange)=\"p.setItemsPerPage(pageCount.value)\">\n                @for (perPage of itemsPerPages; track perPage) {\n                  <mat-option [value]=\"perPage\">\n                    {{perPage}}\n                  </mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n          </li>\n        </ul>\n      }\n    </nav>\n  </pagination-template>", dependencies: [{ kind: "directive", type: CmatPaginationDirective, selector: "pagination-template,[pagination-template]", inputs: ["id", "maxSize"], outputs: ["pageChange", "pageBoundsCorrection", "perPageCountChange"], exportAs: ["paginationApi"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: CmatDigitOnlyDirective, selector: "[cmatDigitOnly]", inputs: ["decimal", "decimalSeparator", "allowNegatives", "allowPaste", "negativeSign", "min", "max", "pattern"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "pipe", type: DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatPaginationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CmatPaginationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-pagination', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'cmatPagination', standalone: true, imports: [CmatPaginationDirective, MatIconModule, NgStyle, MatFormFieldModule, MatInputModule, CmatDigitOnlyDirective, MatSelectModule, DecimalPipe], template: "<pagination-template #p=\"paginationApi\" [id]=\"id\" [maxSize]=\"isScreenSmall&&maxSize>5?5:maxSize\"\n  (pageChange)=\"pageChange.emit($event)\" class=\"w-full px-4 py-2 flex\"\n  (pageBoundsCorrection)=\"pageBoundsCorrection.emit($event)\" (perPageCountChange)=\"perPageCountChange.emit($event)\">\n  <div class=\"hidden md:flex flex-auto items-center\">\n    <span>\u603B\u8BA1:{{p.getTotalItems()}}</span>\n  </div>\n  <nav role=\"navigation\" class=\"flex min-h-12 w-full md:w-0\">\n    @if (!(autoHide && p.pages.length <= 1)) {\n      <ul\n        class=\"flex flex-row space-x-6 items-center justify-center md:justify-end w-full\">\n        <li>\n          <button type=\"button\" class=\"flex items-center\" mat-button mat-icon-button (click)=\"p.goFirstPage()\"\n            [disabled]=\"p.getCurrent()===1\">\n            <mat-icon svgIcon=\"mat_outline:first_page\"></mat-icon>\n          </button>\n        </li>\n        <li>\n          <button type=\"button\" class=\"flex items-center\" mat-button mat-icon-button (click)=\"p.previous()\"\n            [disabled]=\"p.getCurrent()===1\">\n            <mat-icon svgIcon=\"mat_outline:navigate_before\"></mat-icon>\n          </button>\n        </li>\n        @for (page of p.pages; track trackByIndex($index)) {\n          <li class=\"flex text-xl lg:text-2xl\">\n            @if (p.getCurrent() !== page.value) {\n              <a tabindex=\"0\" (click)=\"p.setCurrent(page.value)\"\n                role=\"presentation\" class=\"cursor-pointer text-gray-400 hover:text-black\">\n                <span>{{ (page.label === '...') ? page.label : (page.label | number:'') }}</span>\n              </a>\n            }\n            @if (p.getCurrent() === page.value) {\n              <span class=\"text-black\">\n                <span>{{ (page.label === '...') ? page.label : (page.label | number:'') }}</span>\n              </span>\n            }\n          </li>\n        }\n        <li>\n          <button type=\"button\" class=\"flex items-center\" mat-button mat-icon-button (click)=\"p.next()\"\n            [disabled]=\"p.getCurrent()===p.getLastPage()\">\n            <mat-icon svgIcon=\"mat_outline:navigate_next\"></mat-icon>\n          </button>\n        </li>\n        <li>\n          <button type=\"button\" class=\"flex items-center\" mat-button mat-icon-button (click)=\"p.goLastPage()\"\n            [disabled]=\"p.getCurrent()===p.getLastPage()\">\n            <mat-icon svgIcon=\"mat_outline:last_page\"></mat-icon>\n          </button>\n        </li>\n        <li class=\"hidden md:block\">\n          <mat-form-field [ngStyle]=\"{'width':((p.getLastPage()?.toString()?.length||0)*8+64)+'px'}\">\n            <input matInput #current [value]=\"p.getCurrent()\" [autocomplete]=\"'off'\" [min]=\"0\"\n              [max]=\"p.getLastPage()||0\" type=\"text\" cmatDigitOnly class=\"text-end\"\n              (keyup.enter)=\"p.setCurrent(current.value)\">\n              <span matSuffix>/<div class=\"pl-1\">{{p.getLastPage()}}</div></span>\n            </mat-form-field>\n          </li>\n          <li class=\"hidden md:block\">\n            <mat-form-field class=\"w-24\">\n              <mat-select name=\"pageCount\" #pageCount [value]=\"initPerPage\"\n                (selectionChange)=\"p.setItemsPerPage(pageCount.value)\">\n                @for (perPage of itemsPerPages; track perPage) {\n                  <mat-option [value]=\"perPage\">\n                    {{perPage}}\n                  </mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n          </li>\n        </ul>\n      }\n    </nav>\n  </pagination-template>" }]
         }], ctorParameters: () => [{ type: i1.CmatMediaWatcherService }, { type: i0.ChangeDetectorRef }], propDecorators: { pageChange: [{

package/esm2022/components/pagination/pagination.directive.mjs CHANGED Viewed

@@ -173,10 +173,10 @@ export class CmatPaginationDirective {
             return i;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatPaginationDirective, deps: [{ token: i1.CmatPaginationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.7", type: CmatPaginationDirective, isStandalone: true, selector: "pagination-template,[pagination-template]", inputs: { id: "id", maxSize: "maxSize" }, outputs: { pageChange: "pageChange", pageBoundsCorrection: "pageBoundsCorrection", perPageCountChange: "perPageCountChange" }, exportAs: ["paginationApi"], usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CmatPaginationDirective, deps: [{ token: i1.CmatPaginationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: CmatPaginationDirective, isStandalone: true, selector: "pagination-template,[pagination-template]", inputs: { id: "id", maxSize: "maxSize" }, outputs: { pageChange: "pageChange", pageBoundsCorrection: "pageBoundsCorrection", perPageCountChange: "perPageCountChange" }, exportAs: ["paginationApi"], usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatPaginationDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CmatPaginationDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'pagination-template,[pagination-template]',

package/esm2022/components/pagination/pagination.pipe.mjs CHANGED Viewed

@@ -86,10 +86,10 @@ export class CmatPaginatePipe {
         }
         return state.slice.every((element, index) => element === collection[start + index]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatPaginatePipe, deps: [{ token: i1.CmatPaginationService }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.7", ngImport: i0, type: CmatPaginatePipe, isStandalone: true, name: "paginate" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CmatPaginatePipe, deps: [{ token: i1.CmatPaginationService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: CmatPaginatePipe, isStandalone: true, name: "paginate" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatPaginatePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CmatPaginatePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'paginate',

package/esm2022/components/pagination/pagination.service.mjs CHANGED Viewed

@@ -78,10 +78,10 @@ export class CmatPaginationService {
         }
         return target;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatPaginationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatPaginationService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CmatPaginationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CmatPaginationService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatPaginationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CmatPaginationService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'

package/esm2022/components/password-strength/mat-pass-toggle-visibility/mat-pass-toggle-visibility.component.mjs CHANGED Viewed

@@ -13,10 +13,10 @@ export class CmatPassToggleVisibilityComponent {
     get type() {
         return this.isVisible ? 'text' : 'password';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatPassToggleVisibilityComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: CmatPassToggleVisibilityComponent, isStandalone: true, selector: "cmat-pass-toggle-visibility", inputs: { isVisible: "isVisible", tabindex: "tabindex" }, exportAs: ["cmatPassToggleVisibility"], ngImport: i0, template: "<button (click)=\"isVisible = !isVisible\" type=\"button\" class=\"mat-icon-button cdk-focused cdk-mouse-focused\"\n    mat-icon-button [matRippleCentered]=\"true\" matRipple [attr.tabindex]=\"tabindex ? tabindex : null\">\n    <mat-icon svgIcon=\"{{isVisible ? 'mat_outline:visibility' : 'mat_outline:visibility_off' }}\"></mat-icon>\n</button>", dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CmatPassToggleVisibilityComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: CmatPassToggleVisibilityComponent, isStandalone: true, selector: "cmat-pass-toggle-visibility", inputs: { isVisible: "isVisible", tabindex: "tabindex" }, exportAs: ["cmatPassToggleVisibility"], ngImport: i0, template: "<button (click)=\"isVisible = !isVisible\" type=\"button\" class=\"mat-icon-button cdk-focused cdk-mouse-focused\"\n    mat-icon-button [matRippleCentered]=\"true\" matRipple [attr.tabindex]=\"tabindex ? tabindex : null\">\n    <mat-icon svgIcon=\"{{isVisible ? 'mat_outline:visibility' : 'mat_outline:visibility_off' }}\"></mat-icon>\n</button>", dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatPassToggleVisibilityComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CmatPassToggleVisibilityComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-pass-toggle-visibility', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatPassToggleVisibility', standalone: true, imports: [MatButtonModule, MatRippleModule, MatIconModule], template: "<button (click)=\"isVisible = !isVisible\" type=\"button\" class=\"mat-icon-button cdk-focused cdk-mouse-focused\"\n    mat-icon-button [matRippleCentered]=\"true\" matRipple [attr.tabindex]=\"tabindex ? tabindex : null\">\n    <mat-icon svgIcon=\"{{isVisible ? 'mat_outline:visibility' : 'mat_outline:visibility_off' }}\"></mat-icon>\n</button>" }]
         }], propDecorators: { isVisible: [{

package/esm2022/components/password-strength/mat-password-strength/mat-password-strength.component.mjs CHANGED Viewed

@@ -170,10 +170,10 @@ export class CmatPasswordStrengthComponent {
         this.calculatePasswordStrength();
         this.passwordConfirmationFormControl.updateValueAndValidity();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatPasswordStrengthComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: CmatPasswordStrengthComponent, isStandalone: true, selector: "cmat-password-strength", inputs: { password: "password", externalError: "externalError", enableLengthRule: "enableLengthRule", enableLowerCaseLetterRule: "enableLowerCaseLetterRule", enableUpperCaseLetterRule: "enableUpperCaseLetterRule", enableDigitRule: "enableDigitRule", enableSpecialCharRule: "enableSpecialCharRule", min: "min", max: "max", customValidator: "customValidator", warnThreshold: "warnThreshold", accentThreshold: "accentThreshold" }, outputs: { strengthChanged: "strengthChanged" }, exportAs: ["cmatPasswordStrength"], usesOnChanges: true, ngImport: i0, template: "<mat-progress-bar mode=\"determinate\" [color]=\"color\" [value]=\"strength\"></mat-progress-bar>", dependencies: [{ kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CmatPasswordStrengthComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: CmatPasswordStrengthComponent, isStandalone: true, selector: "cmat-password-strength", inputs: { password: "password", externalError: "externalError", enableLengthRule: "enableLengthRule", enableLowerCaseLetterRule: "enableLowerCaseLetterRule", enableUpperCaseLetterRule: "enableUpperCaseLetterRule", enableDigitRule: "enableDigitRule", enableSpecialCharRule: "enableSpecialCharRule", min: "min", max: "max", customValidator: "customValidator", warnThreshold: "warnThreshold", accentThreshold: "accentThreshold" }, outputs: { strengthChanged: "strengthChanged" }, exportAs: ["cmatPasswordStrength"], usesOnChanges: true, ngImport: i0, template: "<mat-progress-bar mode=\"determinate\" [color]=\"color\" [value]=\"strength\"></mat-progress-bar>", dependencies: [{ kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatPasswordStrengthComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CmatPasswordStrengthComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-password-strength', exportAs: 'cmatPasswordStrength', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MatProgressBarModule], template: "<mat-progress-bar mode=\"determinate\" [color]=\"color\" [value]=\"strength\"></mat-progress-bar>" }]
         }], propDecorators: { password: [{