cmat 0.0.41 → 0.0.43

package/components/popover/index.d.ts

@@ -1,7 +1,7 @@
 import { AnimationEvent } from '@angular/animations';
 import { BooleanInput } from '@angular/cdk/coercion';
 import * as i0 from '@angular/core';
-import { TemplateRef, EventEmitter, ElementRef, OnDestroy, AfterViewInit } from '@angular/core';
+import { TemplateRef, EventEmitter, ElementRef, OnDestroy, OnChanges, AfterViewInit, SimpleChanges } from '@angular/core';
 import { Direction } from '@angular/cdk/bidi';
 import { Subject } from 'rxjs';
 
@@ -171,7 +171,7 @@ declare class CmatPopoverComponent implements CmatPopoverPanel, OnDestroy {
  * This directive is intended to be used in conjunction with an cmat-popover tag. It is
  * responsible for toggling the display of the provided popover instance.
  */
-declare class CmatPopoverTriggerDirective implements AfterViewInit, OnDestroy {
+declare class CmatPopoverTriggerDirective implements OnChanges, AfterViewInit, OnDestroy {
     ariaHaspopup: boolean;
     /** References the popover instance that the trigger is associated with. */
     popover: CmatPopoverPanel;
@@ -208,6 +208,7 @@ declare class CmatPopoverTriggerDirective implements AfterViewInit, OnDestroy {
     onMouseEnter(): void;
     onMouseLeave(): void;
     handleMousedown(event: MouseEvent): void;
+    ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     /** Toggles the popover between the open and closed states. */

package/fesm2022/cmat-components-navigation.mjs

@@ -10,7 +10,7 @@ import * as i1$1 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 import * as i1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { RouterLink, RouterLinkActive, Router, NavigationEnd } from '@angular/router';
+import { Router, RouterLink, RouterLinkActive, NavigationEnd } from '@angular/router';
 import { takeUntil, filter } from 'rxjs/operators';
 import { AnimationBuilder, animate, style } from '@angular/animations';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
@@ -157,6 +157,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
 class CmatHorizontalNavigationBasicItemComponent {
     constructor() {
         this.routeReuseStrategyEmitUrl = new EventEmitter();
+        this._router = inject(Router);
         this._changeDetectorRef = inject(ChangeDetectorRef);
         this._cmatNavigationService = inject(CmatNavigationService);
         this._cmatUtilsService = inject(CmatUtilsService);
@@ -190,6 +191,9 @@ class CmatHorizontalNavigationBasicItemComponent {
             // Mark for check
             this._changeDetectorRef.markForCheck();
         });
+        this._router.events.pipe(takeUntil(this._unsubscribeAll)).subscribe(() => {
+            this._changeDetectorRef.markForCheck();
+        });
     }
     /**
      * On destroy
@@ -199,18 +203,23 @@ class CmatHorizontalNavigationBasicItemComponent {
         this._unsubscribeAll.next(void 0);
         this._unsubscribeAll.complete();
     }
-    goToRouterLink(event, link) {
+    isRouteActive(link) {
+        return this._router.isActive(link, this.isActiveMatchOptions);
+    }
+    goToRouterLink(link) {
         if (this.hasRouteReuseStrategy) {
-            event.preventDefault();
             this.routeReuseStrategyEmitUrl.emit(link);
         }
+        else {
+            void this._router.navigate([link]);
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CmatHorizontalNavigationBasicItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CmatHorizontalNavigationBasicItemComponent, isStandalone: true, selector: "cmat-horizontal-navigation-basic-item", inputs: { item: "item", name: "name", hasRouteReuseStrategy: "hasRouteReuseStrategy" }, outputs: { routeReuseStrategyEmitUrl: "routeReuseStrategyEmitUrl" }, ngImport: i0, template: "<!-- Item wrapper -->\r\n<div class=\"cmat-horizontal-navigation-item-wrapper\"\r\n  [class.cmat-horizontal-navigation-item-has-subtitle]=\"!!item.subTitle\" [ngClass]=\"item.classes?.wrapper\">\r\n\r\n  <!-- Item with an internal link -->\r\n  @if (item.link && !item.externalLink && !item.function && !item.disabled) {\r\n  <div class=\"cmat-horizontal-navigation-item\" role=\"presentation\"\r\n    [ngClass]=\"{'cmat-horizontal-navigation-item-active-forced': item.active}\"\r\n    [routerLinkActive]=\"'cmat-horizontal-navigation-item-active'\" [routerLinkActiveOptions]=\"isActiveMatchOptions\"\r\n    [routerLink]=\"item.link\"\r\n    [matTooltip]=\"item.tooltip || ''\" (click)=\"goToRouterLink($event,item.link)\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </div>\r\n  }\r\n\r\n  <!-- Item with an external link -->\r\n  @if (item.link && item.externalLink && !item.function && !item.disabled) {\r\n  <a class=\"cmat-horizontal-navigation-item\" [href]=\"item.link\" [target]=\"item.target || '_blank'\"\r\n    [matTooltip]=\"item.tooltip || ''\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </a>\r\n  }\r\n\r\n  <!-- Item with a function -->\r\n  @if (!item.link && item.function && !item.disabled) {\r\n  <div class=\"cmat-horizontal-navigation-item\" role=\"presentation\"\r\n    [ngClass]=\"{'cmat-horizontal-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\"\r\n    (click)=\"item.function(item)\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </div>  \r\n  }\r\n\r\n  <!-- Item with an internal link and function -->\r\n  @if (item.link && !item.externalLink && item.function && !item.disabled) {\r\n  <div class=\"cmat-horizontal-navigation-item\" role=\"presentation\"\r\n    [ngClass]=\"{'cmat-horizontal-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\"\r\n    [routerLinkActive]=\"'cmat-horizontal-navigation-item-active'\" [routerLinkActiveOptions]=\"isActiveMatchOptions\"\r\n    [routerLink]=\"item.link\"\r\n    (click)=\"item.function(item);goToRouterLink($event,item.link)\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </div>\r\n  }\r\n\r\n  <!-- Item with an external link and function -->\r\n  @if (item.link && item.externalLink && item.function && !item.disabled) {\r\n  <a class=\"cmat-horizontal-navigation-item\" mat-menu-item [href]=\"item.link\" [target]=\"item.target || '_blank'\"\r\n    [matTooltip]=\"item.tooltip || ''\" (click)=\"item.function(item)\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </a>\r\n  }\r\n\r\n  <!-- Item with a no link and no function -->\r\n  @if (!item.link && !item.function && !item.disabled) {\r\n  <div class=\"cmat-horizontal-navigation-item\"\r\n    [ngClass]=\"{'cmat-horizontal-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </div>\r\n  }\r\n\r\n  <!-- Item is disabled -->\r\n  @if (item.disabled) {\r\n  <div class=\"cmat-horizontal-navigation-item cmat-horizontal-navigation-item-disabled\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </div>\r\n  }\r\n\r\n</div>\r\n\r\n<!-- Item template -->\r\n<ng-template #itemTemplate>\r\n\r\n  <!-- Icon -->\r\n  @if (item.icon) {\r\n  <mat-icon class=\"cmat-horizontal-navigation-item-icon\" [ngClass]=\"item.classes?.icon\" [svgIcon]=\"item.icon\">\r\n  </mat-icon>\r\n  }\r\n\r\n  <!-- Title & Subtitle -->\r\n  <div class=\"cmat-horizontal-navigation-item-title-wrapper\">\r\n    <div class=\"cmat-horizontal-navigation-item-title\">\r\n      <span [ngClass]=\"item.classes?.title\">\r\n        {{item.title}}\r\n      </span>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Badge -->\r\n  @if (item.badge) {\r\n  <div class=\"cmat-horizontal-navigation-item-badge\">\r\n    <div class=\"cmat-horizontal-navigation-item-badge-content\" [ngClass]=\"item.badge.classes\">\r\n      {{item.badge.title}}\r\n    </div>\r\n  </div>\r\n  }\r\n\r\n</ng-template>", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CmatHorizontalNavigationBasicItemComponent, isStandalone: true, selector: "cmat-horizontal-navigation-basic-item", inputs: { item: "item", name: "name", hasRouteReuseStrategy: "hasRouteReuseStrategy" }, outputs: { routeReuseStrategyEmitUrl: "routeReuseStrategyEmitUrl" }, ngImport: i0, template: "<!-- Item wrapper -->\r\n<div class=\"cmat-horizontal-navigation-item-wrapper\"\r\n  [class.cmat-horizontal-navigation-item-has-subtitle]=\"!!item.subTitle\" [ngClass]=\"item.classes?.wrapper\">\r\n\r\n  <!-- Item with an internal link -->\r\n  @if (item.link && !item.externalLink && !item.function && !item.disabled) {\r\n  <div class=\"cmat-horizontal-navigation-item\" role=\"presentation\"\r\n    [ngClass]=\"{'cmat-horizontal-navigation-item-active-forced': item.active,'cmat-horizontal-navigation-item-active':isRouteActive(item.link)}\"\r\n    [matTooltip]=\"item.tooltip || ''\" (click)=\"goToRouterLink(item.link)\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </div>\r\n  }\r\n\r\n  <!-- Item with an external link -->\r\n  @if (item.link && item.externalLink && !item.function && !item.disabled) {\r\n  <a class=\"cmat-horizontal-navigation-item\" [href]=\"item.link\" [target]=\"item.target || '_blank'\"\r\n    [matTooltip]=\"item.tooltip || ''\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </a>\r\n  }\r\n\r\n  <!-- Item with a function -->\r\n  @if (!item.link && item.function && !item.disabled) {\r\n  <div class=\"cmat-horizontal-navigation-item\" role=\"presentation\"\r\n    [ngClass]=\"{'cmat-horizontal-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\"\r\n    (click)=\"item.function(item)\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </div>\r\n  }\r\n\r\n  <!-- Item with an internal link and function -->\r\n  @if (item.link && !item.externalLink && item.function && !item.disabled) {\r\n  <div class=\"cmat-horizontal-navigation-item\" role=\"presentation\"\r\n    [ngClass]=\"{'cmat-horizontal-navigation-item-active-forced': item.active,'cmat-horizontal-navigation-item-active':isRouteActive(item.link)}\"\r\n    [matTooltip]=\"item.tooltip || ''\" (click)=\"item.function(item);goToRouterLink(item.link)\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </div>\r\n  }\r\n\r\n  <!-- Item with an external link and function -->\r\n  @if (item.link && item.externalLink && item.function && !item.disabled) {\r\n  <a class=\"cmat-horizontal-navigation-item\" mat-menu-item [href]=\"item.link\" [target]=\"item.target || '_blank'\"\r\n    [matTooltip]=\"item.tooltip || ''\" (click)=\"item.function(item)\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </a>\r\n  }\r\n\r\n  <!-- Item with a no link and no function -->\r\n  @if (!item.link && !item.function && !item.disabled) {\r\n  <div class=\"cmat-horizontal-navigation-item\"\r\n    [ngClass]=\"{'cmat-horizontal-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </div>\r\n  }\r\n\r\n  <!-- Item is disabled -->\r\n  @if (item.disabled) {\r\n  <div class=\"cmat-horizontal-navigation-item cmat-horizontal-navigation-item-disabled\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </div>\r\n  }\r\n\r\n</div>\r\n\r\n<!-- Item template -->\r\n<ng-template #itemTemplate>\r\n\r\n  <!-- Icon -->\r\n  @if (item.icon) {\r\n  <mat-icon class=\"cmat-horizontal-navigation-item-icon\" [ngClass]=\"item.classes?.icon\" [svgIcon]=\"item.icon\">\r\n  </mat-icon>\r\n  }\r\n\r\n  <!-- Title & Subtitle -->\r\n  <div class=\"cmat-horizontal-navigation-item-title-wrapper\">\r\n    <div class=\"cmat-horizontal-navigation-item-title\">\r\n      <span [ngClass]=\"item.classes?.title\">\r\n        {{item.title}}\r\n      </span>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Badge -->\r\n  @if (item.badge) {\r\n  <div class=\"cmat-horizontal-navigation-item-badge\">\r\n    <div class=\"cmat-horizontal-navigation-item-badge-content\" [ngClass]=\"item.badge.classes\">\r\n      {{item.badge.title}}\r\n    </div>\r\n  </div>\r\n  }\r\n\r\n</ng-template>", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CmatHorizontalNavigationBasicItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-horizontal-navigation-basic-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, RouterLink, RouterLinkActive, MatTooltipModule, NgTemplateOutlet, MatMenuModule, MatIconModule], template: "<!-- Item wrapper -->\r\n<div class=\"cmat-horizontal-navigation-item-wrapper\"\r\n  [class.cmat-horizontal-navigation-item-has-subtitle]=\"!!item.subTitle\" [ngClass]=\"item.classes?.wrapper\">\r\n\r\n  <!-- Item with an internal link -->\r\n  @if (item.link && !item.externalLink && !item.function && !item.disabled) {\r\n  <div class=\"cmat-horizontal-navigation-item\" role=\"presentation\"\r\n    [ngClass]=\"{'cmat-horizontal-navigation-item-active-forced': item.active}\"\r\n    [routerLinkActive]=\"'cmat-horizontal-navigation-item-active'\" [routerLinkActiveOptions]=\"isActiveMatchOptions\"\r\n    [routerLink]=\"item.link\"\r\n    [matTooltip]=\"item.tooltip || ''\" (click)=\"goToRouterLink($event,item.link)\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </div>\r\n  }\r\n\r\n  <!-- Item with an external link -->\r\n  @if (item.link && item.externalLink && !item.function && !item.disabled) {\r\n  <a class=\"cmat-horizontal-navigation-item\" [href]=\"item.link\" [target]=\"item.target || '_blank'\"\r\n    [matTooltip]=\"item.tooltip || ''\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </a>\r\n  }\r\n\r\n  <!-- Item with a function -->\r\n  @if (!item.link && item.function && !item.disabled) {\r\n  <div class=\"cmat-horizontal-navigation-item\" role=\"presentation\"\r\n    [ngClass]=\"{'cmat-horizontal-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\"\r\n    (click)=\"item.function(item)\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </div>  \r\n  }\r\n\r\n  <!-- Item with an internal link and function -->\r\n  @if (item.link && !item.externalLink && item.function && !item.disabled) {\r\n  <div class=\"cmat-horizontal-navigation-item\" role=\"presentation\"\r\n    [ngClass]=\"{'cmat-horizontal-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\"\r\n    [routerLinkActive]=\"'cmat-horizontal-navigation-item-active'\" [routerLinkActiveOptions]=\"isActiveMatchOptions\"\r\n    [routerLink]=\"item.link\"\r\n    (click)=\"item.function(item);goToRouterLink($event,item.link)\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </div>\r\n  }\r\n\r\n  <!-- Item with an external link and function -->\r\n  @if (item.link && item.externalLink && item.function && !item.disabled) {\r\n  <a class=\"cmat-horizontal-navigation-item\" mat-menu-item [href]=\"item.link\" [target]=\"item.target || '_blank'\"\r\n    [matTooltip]=\"item.tooltip || ''\" (click)=\"item.function(item)\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </a>\r\n  }\r\n\r\n  <!-- Item with a no link and no function -->\r\n  @if (!item.link && !item.function && !item.disabled) {\r\n  <div class=\"cmat-horizontal-navigation-item\"\r\n    [ngClass]=\"{'cmat-horizontal-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </div>\r\n  }\r\n\r\n  <!-- Item is disabled -->\r\n  @if (item.disabled) {\r\n  <div class=\"cmat-horizontal-navigation-item cmat-horizontal-navigation-item-disabled\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </div>\r\n  }\r\n\r\n</div>\r\n\r\n<!-- Item template -->\r\n<ng-template #itemTemplate>\r\n\r\n  <!-- Icon -->\r\n  @if (item.icon) {\r\n  <mat-icon class=\"cmat-horizontal-navigation-item-icon\" [ngClass]=\"item.classes?.icon\" [svgIcon]=\"item.icon\">\r\n  </mat-icon>\r\n  }\r\n\r\n  <!-- Title & Subtitle -->\r\n  <div class=\"cmat-horizontal-navigation-item-title-wrapper\">\r\n    <div class=\"cmat-horizontal-navigation-item-title\">\r\n      <span [ngClass]=\"item.classes?.title\">\r\n        {{item.title}}\r\n      </span>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Badge -->\r\n  @if (item.badge) {\r\n  <div class=\"cmat-horizontal-navigation-item-badge\">\r\n    <div class=\"cmat-horizontal-navigation-item-badge-content\" [ngClass]=\"item.badge.classes\">\r\n      {{item.badge.title}}\r\n    </div>\r\n  </div>\r\n  }\r\n\r\n</ng-template>" }]
+            args: [{ selector: 'cmat-horizontal-navigation-basic-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, RouterLink, RouterLinkActive, MatTooltipModule, NgTemplateOutlet, MatMenuModule, MatIconModule], template: "<!-- Item wrapper -->\r\n<div class=\"cmat-horizontal-navigation-item-wrapper\"\r\n  [class.cmat-horizontal-navigation-item-has-subtitle]=\"!!item.subTitle\" [ngClass]=\"item.classes?.wrapper\">\r\n\r\n  <!-- Item with an internal link -->\r\n  @if (item.link && !item.externalLink && !item.function && !item.disabled) {\r\n  <div class=\"cmat-horizontal-navigation-item\" role=\"presentation\"\r\n    [ngClass]=\"{'cmat-horizontal-navigation-item-active-forced': item.active,'cmat-horizontal-navigation-item-active':isRouteActive(item.link)}\"\r\n    [matTooltip]=\"item.tooltip || ''\" (click)=\"goToRouterLink(item.link)\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </div>\r\n  }\r\n\r\n  <!-- Item with an external link -->\r\n  @if (item.link && item.externalLink && !item.function && !item.disabled) {\r\n  <a class=\"cmat-horizontal-navigation-item\" [href]=\"item.link\" [target]=\"item.target || '_blank'\"\r\n    [matTooltip]=\"item.tooltip || ''\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </a>\r\n  }\r\n\r\n  <!-- Item with a function -->\r\n  @if (!item.link && item.function && !item.disabled) {\r\n  <div class=\"cmat-horizontal-navigation-item\" role=\"presentation\"\r\n    [ngClass]=\"{'cmat-horizontal-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\"\r\n    (click)=\"item.function(item)\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </div>\r\n  }\r\n\r\n  <!-- Item with an internal link and function -->\r\n  @if (item.link && !item.externalLink && item.function && !item.disabled) {\r\n  <div class=\"cmat-horizontal-navigation-item\" role=\"presentation\"\r\n    [ngClass]=\"{'cmat-horizontal-navigation-item-active-forced': item.active,'cmat-horizontal-navigation-item-active':isRouteActive(item.link)}\"\r\n    [matTooltip]=\"item.tooltip || ''\" (click)=\"item.function(item);goToRouterLink(item.link)\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </div>\r\n  }\r\n\r\n  <!-- Item with an external link and function -->\r\n  @if (item.link && item.externalLink && item.function && !item.disabled) {\r\n  <a class=\"cmat-horizontal-navigation-item\" mat-menu-item [href]=\"item.link\" [target]=\"item.target || '_blank'\"\r\n    [matTooltip]=\"item.tooltip || ''\" (click)=\"item.function(item)\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </a>\r\n  }\r\n\r\n  <!-- Item with a no link and no function -->\r\n  @if (!item.link && !item.function && !item.disabled) {\r\n  <div class=\"cmat-horizontal-navigation-item\"\r\n    [ngClass]=\"{'cmat-horizontal-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </div>\r\n  }\r\n\r\n  <!-- Item is disabled -->\r\n  @if (item.disabled) {\r\n  <div class=\"cmat-horizontal-navigation-item cmat-horizontal-navigation-item-disabled\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </div>\r\n  }\r\n\r\n</div>\r\n\r\n<!-- Item template -->\r\n<ng-template #itemTemplate>\r\n\r\n  <!-- Icon -->\r\n  @if (item.icon) {\r\n  <mat-icon class=\"cmat-horizontal-navigation-item-icon\" [ngClass]=\"item.classes?.icon\" [svgIcon]=\"item.icon\">\r\n  </mat-icon>\r\n  }\r\n\r\n  <!-- Title & Subtitle -->\r\n  <div class=\"cmat-horizontal-navigation-item-title-wrapper\">\r\n    <div class=\"cmat-horizontal-navigation-item-title\">\r\n      <span [ngClass]=\"item.classes?.title\">\r\n        {{item.title}}\r\n      </span>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Badge -->\r\n  @if (item.badge) {\r\n  <div class=\"cmat-horizontal-navigation-item-badge\">\r\n    <div class=\"cmat-horizontal-navigation-item-badge-content\" [ngClass]=\"item.badge.classes\">\r\n      {{item.badge.title}}\r\n    </div>\r\n  </div>\r\n  }\r\n\r\n</ng-template>" }]
         }], ctorParameters: () => [], propDecorators: { item: [{
                 type: Input
             }], name: [{
@@ -465,6 +474,9 @@ class CmatVerticalNavigationBasicItemComponent {
             // Mark for check
             this._changeDetectorRef.markForCheck();
         });
+        this._router.events.pipe(takeUntil(this._unsubscribeAll)).subscribe(() => {
+            this._changeDetectorRef.markForCheck();
+        });
     }
     ngOnDestroy() {
         this._unsubscribeAll.next(void 0);
@@ -485,11 +497,11 @@ class CmatVerticalNavigationBasicItemComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CmatVerticalNavigationBasicItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CmatVerticalNavigationBasicItemComponent, isStandalone: true, selector: "cmat-vertical-navigation-basic-item", inputs: { item: "item", name: "name", editState: "editState", hasRouteReuseStrategy: "hasRouteReuseStrategy" }, outputs: { routeReuseStrategyEmitUrl: "routeReuseStrategyEmitUrl", editSelectedItemChanged: "editSelectedItemChanged" }, ngImport: i0, template: "<!-- Item wrapper -->\r\n<div class=\"cmat-vertical-navigation-item-wrapper\" [class.cmat-vertical-navigation-item-has-subtitle]=\"!!item.subTitle\"\r\n  [ngClass]=\"item.classes?.wrapper\">\r\n\r\n  @if(editState){\r\n  <div class=\"cmat-vertical-navigation-item\" role=\"presentation\"\r\n    [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\"\r\n    (click)=\"selectItem()\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </div>\r\n  }@else{\r\n  <!-- Item with an internal link -->\r\n  @if (item.link && !item.externalLink && !item.function && !item.disabled) {\r\n  <a class=\"cmat-vertical-navigation-item\" role=\"presentation\" [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active,\r\n      'cmat-vertical-navigation-item-active': isRouteActive(item.link)\r\n    }\" [matTooltip]=\"item.tooltip || ''\" (click)=\"goToRouterLink(item.link)\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </a>\r\n  }\r\n\r\n  <!-- Item with an external link -->\r\n  @if (item.link && item.externalLink && !item.function && !item.disabled) {\r\n  <a class=\"cmat-vertical-navigation-item\" [href]=\"item.link\" [target]=\"item.target || '_blank'\"\r\n    [matTooltip]=\"item.tooltip || ''\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </a>\r\n  }\r\n\r\n  <!-- Item with a function -->\r\n  @if (!item.link && item.function && !item.disabled) {\r\n  <div class=\"cmat-vertical-navigation-item\" role=\"presentation\"\r\n    [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\"\r\n    (click)=\"item.function(item)\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </div>\r\n  }\r\n\r\n  <!-- Item with an internal link and function -->\r\n  @if (item.link && !item.externalLink && item.function && !item.disabled) {\r\n  <a class=\"cmat-vertical-navigation-item\" role=\"presentation\"\r\n    [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active,'cmat-vertical-navigation-item-active': isRouteActive(item.link)}\"\r\n    [matTooltip]=\"item.tooltip || ''\" (click)=\"item.function(item);goToRouterLink(item.link)\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </a>\r\n  }\r\n\r\n  <!-- Item with an external link and function -->\r\n  @if (item.link && item.externalLink && item.function && !item.disabled) {\r\n  <a class=\"cmat-vertical-navigation-item\" [href]=\"item.link\" [target]=\"item.target || '_blank'\"\r\n    [matTooltip]=\"item.tooltip || ''\" (click)=\"item.function(item)\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </a>\r\n  }\r\n\r\n  <!-- Item with a no link and no function -->\r\n  @if (!item.link && !item.function && !item.disabled) {\r\n  <div class=\"cmat-vertical-navigation-item\" [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\"\r\n    [matTooltip]=\"item.tooltip || ''\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </div>\r\n  }\r\n\r\n  <!-- Item is disabled -->\r\n  @if (item.disabled) {\r\n  <div class=\"cmat-vertical-navigation-item cmat-vertical-navigation-item-disabled\" [matTooltip]=\"item.tooltip || ''\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </div>\r\n  }\r\n  }\r\n</div>\r\n\r\n<!-- Item template -->\r\n<ng-template #itemTemplate>\r\n\r\n  <!-- Icon -->\r\n  @if (item.icon) {\r\n  <mat-icon class=\"cmat-vertical-navigation-item-icon\" [ngClass]=\"item.classes?.icon\" [svgIcon]=\"item.icon\">\r\n  </mat-icon>\r\n  }\r\n\r\n  <!-- Title & Subtitle -->\r\n  <div class=\"cmat-vertical-navigation-item-title-wrapper\">\r\n    <div class=\"cmat-vertical-navigation-item-title\">\r\n      <span [ngClass]=\"item.classes?.title\">\r\n        {{item.title}}\r\n      </span>\r\n    </div>\r\n    @if (item.subTitle) {\r\n    <div class=\"cmat-vertical-navigation-item-subtitle\">\r\n      <span [ngClass]=\"item.classes?.subtitle\">\r\n        {{item.subTitle}}\r\n      </span>\r\n    </div>\r\n    }\r\n  </div>\r\n\r\n  <!-- Badge -->\r\n  @if (item.badge) {\r\n  <div class=\"cmat-vertical-navigation-item-badge\">\r\n    <div class=\"cmat-vertical-navigation-item-badge-content\" [ngClass]=\"item.badge.classes\">\r\n      {{item.badge.title}}\r\n    </div>\r\n  </div>\r\n  }\r\n</ng-template>", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CmatVerticalNavigationBasicItemComponent, isStandalone: true, selector: "cmat-vertical-navigation-basic-item", inputs: { item: "item", name: "name", editState: "editState", hasRouteReuseStrategy: "hasRouteReuseStrategy" }, outputs: { routeReuseStrategyEmitUrl: "routeReuseStrategyEmitUrl", editSelectedItemChanged: "editSelectedItemChanged" }, ngImport: i0, template: "<!-- Item wrapper -->\r\n<div class=\"cmat-vertical-navigation-item-wrapper\" [class.cmat-vertical-navigation-item-has-subtitle]=\"!!item.subTitle\"\r\n  [ngClass]=\"item.classes?.wrapper\">\r\n\r\n  @if(editState){\r\n  <div class=\"cmat-vertical-navigation-item\" role=\"presentation\"\r\n    [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\"\r\n    (click)=\"selectItem()\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </div>\r\n  }@else{\r\n  <!-- Item with an internal link -->\r\n  @if (item.link && !item.externalLink && !item.function && !item.disabled) {\r\n  <a class=\"cmat-vertical-navigation-item\" role=\"presentation\"\r\n    [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active,'cmat-vertical-navigation-item-active': isRouteActive(item.link)}\"\r\n    [matTooltip]=\"item.tooltip || ''\" (click)=\"goToRouterLink(item.link)\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </a>\r\n  }\r\n\r\n  <!-- Item with an external link -->\r\n  @if (item.link && item.externalLink && !item.function && !item.disabled) {\r\n  <a class=\"cmat-vertical-navigation-item\" [href]=\"item.link\" [target]=\"item.target || '_blank'\"\r\n    [matTooltip]=\"item.tooltip || ''\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </a>\r\n  }\r\n\r\n  <!-- Item with a function -->\r\n  @if (!item.link && item.function && !item.disabled) {\r\n  <div class=\"cmat-vertical-navigation-item\" role=\"presentation\"\r\n    [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\"\r\n    (click)=\"item.function(item)\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </div>\r\n  }\r\n\r\n  <!-- Item with an internal link and function -->\r\n  @if (item.link && !item.externalLink && item.function && !item.disabled) {\r\n  <a class=\"cmat-vertical-navigation-item\" role=\"presentation\"\r\n    [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active,'cmat-vertical-navigation-item-active': isRouteActive(item.link)}\"\r\n    [matTooltip]=\"item.tooltip || ''\" (click)=\"item.function(item);goToRouterLink(item.link)\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </a>\r\n  }\r\n\r\n  <!-- Item with an external link and function -->\r\n  @if (item.link && item.externalLink && item.function && !item.disabled) {\r\n  <a class=\"cmat-vertical-navigation-item\" [href]=\"item.link\" [target]=\"item.target || '_blank'\"\r\n    [matTooltip]=\"item.tooltip || ''\" (click)=\"item.function(item)\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </a>\r\n  }\r\n\r\n  <!-- Item with a no link and no function -->\r\n  @if (!item.link && !item.function && !item.disabled) {\r\n  <div class=\"cmat-vertical-navigation-item\" [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\"\r\n    [matTooltip]=\"item.tooltip || ''\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </div>\r\n  }\r\n\r\n  <!-- Item is disabled -->\r\n  @if (item.disabled) {\r\n  <div class=\"cmat-vertical-navigation-item cmat-vertical-navigation-item-disabled\" [matTooltip]=\"item.tooltip || ''\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </div>\r\n  }\r\n  }\r\n</div>\r\n\r\n<!-- Item template -->\r\n<ng-template #itemTemplate>\r\n\r\n  <!-- Icon -->\r\n  @if (item.icon) {\r\n  <mat-icon class=\"cmat-vertical-navigation-item-icon\" [ngClass]=\"item.classes?.icon\" [svgIcon]=\"item.icon\">\r\n  </mat-icon>\r\n  }\r\n\r\n  <!-- Title & Subtitle -->\r\n  <div class=\"cmat-vertical-navigation-item-title-wrapper\">\r\n    <div class=\"cmat-vertical-navigation-item-title\">\r\n      <span [ngClass]=\"item.classes?.title\">\r\n        {{item.title}}\r\n      </span>\r\n    </div>\r\n    @if (item.subTitle) {\r\n    <div class=\"cmat-vertical-navigation-item-subtitle\">\r\n      <span [ngClass]=\"item.classes?.subtitle\">\r\n        {{item.subTitle}}\r\n      </span>\r\n    </div>\r\n    }\r\n  </div>\r\n\r\n  <!-- Badge -->\r\n  @if (item.badge) {\r\n  <div class=\"cmat-vertical-navigation-item-badge\">\r\n    <div class=\"cmat-vertical-navigation-item-badge-content\" [ngClass]=\"item.badge.classes\">\r\n      {{item.badge.title}}\r\n    </div>\r\n  </div>\r\n  }\r\n</ng-template>", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CmatVerticalNavigationBasicItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-vertical-navigation-basic-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, RouterLink, RouterLinkActive, MatTooltipModule, NgTemplateOutlet, MatIconModule], template: "<!-- Item wrapper -->\r\n<div class=\"cmat-vertical-navigation-item-wrapper\" [class.cmat-vertical-navigation-item-has-subtitle]=\"!!item.subTitle\"\r\n  [ngClass]=\"item.classes?.wrapper\">\r\n\r\n  @if(editState){\r\n  <div class=\"cmat-vertical-navigation-item\" role=\"presentation\"\r\n    [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\"\r\n    (click)=\"selectItem()\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </div>\r\n  }@else{\r\n  <!-- Item with an internal link -->\r\n  @if (item.link && !item.externalLink && !item.function && !item.disabled) {\r\n  <a class=\"cmat-vertical-navigation-item\" role=\"presentation\" [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active,\r\n      'cmat-vertical-navigation-item-active': isRouteActive(item.link)\r\n    }\" [matTooltip]=\"item.tooltip || ''\" (click)=\"goToRouterLink(item.link)\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </a>\r\n  }\r\n\r\n  <!-- Item with an external link -->\r\n  @if (item.link && item.externalLink && !item.function && !item.disabled) {\r\n  <a class=\"cmat-vertical-navigation-item\" [href]=\"item.link\" [target]=\"item.target || '_blank'\"\r\n    [matTooltip]=\"item.tooltip || ''\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </a>\r\n  }\r\n\r\n  <!-- Item with a function -->\r\n  @if (!item.link && item.function && !item.disabled) {\r\n  <div class=\"cmat-vertical-navigation-item\" role=\"presentation\"\r\n    [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\"\r\n    (click)=\"item.function(item)\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </div>\r\n  }\r\n\r\n  <!-- Item with an internal link and function -->\r\n  @if (item.link && !item.externalLink && item.function && !item.disabled) {\r\n  <a class=\"cmat-vertical-navigation-item\" role=\"presentation\"\r\n    [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active,'cmat-vertical-navigation-item-active': isRouteActive(item.link)}\"\r\n    [matTooltip]=\"item.tooltip || ''\" (click)=\"item.function(item);goToRouterLink(item.link)\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </a>\r\n  }\r\n\r\n  <!-- Item with an external link and function -->\r\n  @if (item.link && item.externalLink && item.function && !item.disabled) {\r\n  <a class=\"cmat-vertical-navigation-item\" [href]=\"item.link\" [target]=\"item.target || '_blank'\"\r\n    [matTooltip]=\"item.tooltip || ''\" (click)=\"item.function(item)\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </a>\r\n  }\r\n\r\n  <!-- Item with a no link and no function -->\r\n  @if (!item.link && !item.function && !item.disabled) {\r\n  <div class=\"cmat-vertical-navigation-item\" [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\"\r\n    [matTooltip]=\"item.tooltip || ''\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </div>\r\n  }\r\n\r\n  <!-- Item is disabled -->\r\n  @if (item.disabled) {\r\n  <div class=\"cmat-vertical-navigation-item cmat-vertical-navigation-item-disabled\" [matTooltip]=\"item.tooltip || ''\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </div>\r\n  }\r\n  }\r\n</div>\r\n\r\n<!-- Item template -->\r\n<ng-template #itemTemplate>\r\n\r\n  <!-- Icon -->\r\n  @if (item.icon) {\r\n  <mat-icon class=\"cmat-vertical-navigation-item-icon\" [ngClass]=\"item.classes?.icon\" [svgIcon]=\"item.icon\">\r\n  </mat-icon>\r\n  }\r\n\r\n  <!-- Title & Subtitle -->\r\n  <div class=\"cmat-vertical-navigation-item-title-wrapper\">\r\n    <div class=\"cmat-vertical-navigation-item-title\">\r\n      <span [ngClass]=\"item.classes?.title\">\r\n        {{item.title}}\r\n      </span>\r\n    </div>\r\n    @if (item.subTitle) {\r\n    <div class=\"cmat-vertical-navigation-item-subtitle\">\r\n      <span [ngClass]=\"item.classes?.subtitle\">\r\n        {{item.subTitle}}\r\n      </span>\r\n    </div>\r\n    }\r\n  </div>\r\n\r\n  <!-- Badge -->\r\n  @if (item.badge) {\r\n  <div class=\"cmat-vertical-navigation-item-badge\">\r\n    <div class=\"cmat-vertical-navigation-item-badge-content\" [ngClass]=\"item.badge.classes\">\r\n      {{item.badge.title}}\r\n    </div>\r\n  </div>\r\n  }\r\n</ng-template>" }]
+            args: [{ selector: 'cmat-vertical-navigation-basic-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, RouterLink, RouterLinkActive, MatTooltipModule, NgTemplateOutlet, MatIconModule], template: "<!-- Item wrapper -->\r\n<div class=\"cmat-vertical-navigation-item-wrapper\" [class.cmat-vertical-navigation-item-has-subtitle]=\"!!item.subTitle\"\r\n  [ngClass]=\"item.classes?.wrapper\">\r\n\r\n  @if(editState){\r\n  <div class=\"cmat-vertical-navigation-item\" role=\"presentation\"\r\n    [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\"\r\n    (click)=\"selectItem()\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </div>\r\n  }@else{\r\n  <!-- Item with an internal link -->\r\n  @if (item.link && !item.externalLink && !item.function && !item.disabled) {\r\n  <a class=\"cmat-vertical-navigation-item\" role=\"presentation\"\r\n    [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active,'cmat-vertical-navigation-item-active': isRouteActive(item.link)}\"\r\n    [matTooltip]=\"item.tooltip || ''\" (click)=\"goToRouterLink(item.link)\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </a>\r\n  }\r\n\r\n  <!-- Item with an external link -->\r\n  @if (item.link && item.externalLink && !item.function && !item.disabled) {\r\n  <a class=\"cmat-vertical-navigation-item\" [href]=\"item.link\" [target]=\"item.target || '_blank'\"\r\n    [matTooltip]=\"item.tooltip || ''\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </a>\r\n  }\r\n\r\n  <!-- Item with a function -->\r\n  @if (!item.link && item.function && !item.disabled) {\r\n  <div class=\"cmat-vertical-navigation-item\" role=\"presentation\"\r\n    [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\" [matTooltip]=\"item.tooltip || ''\"\r\n    (click)=\"item.function(item)\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </div>\r\n  }\r\n\r\n  <!-- Item with an internal link and function -->\r\n  @if (item.link && !item.externalLink && item.function && !item.disabled) {\r\n  <a class=\"cmat-vertical-navigation-item\" role=\"presentation\"\r\n    [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active,'cmat-vertical-navigation-item-active': isRouteActive(item.link)}\"\r\n    [matTooltip]=\"item.tooltip || ''\" (click)=\"item.function(item);goToRouterLink(item.link)\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </a>\r\n  }\r\n\r\n  <!-- Item with an external link and function -->\r\n  @if (item.link && item.externalLink && item.function && !item.disabled) {\r\n  <a class=\"cmat-vertical-navigation-item\" [href]=\"item.link\" [target]=\"item.target || '_blank'\"\r\n    [matTooltip]=\"item.tooltip || ''\" (click)=\"item.function(item)\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </a>\r\n  }\r\n\r\n  <!-- Item with a no link and no function -->\r\n  @if (!item.link && !item.function && !item.disabled) {\r\n  <div class=\"cmat-vertical-navigation-item\" [ngClass]=\"{'cmat-vertical-navigation-item-active-forced': item.active}\"\r\n    [matTooltip]=\"item.tooltip || ''\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </div>\r\n  }\r\n\r\n  <!-- Item is disabled -->\r\n  @if (item.disabled) {\r\n  <div class=\"cmat-vertical-navigation-item cmat-vertical-navigation-item-disabled\" [matTooltip]=\"item.tooltip || ''\">\r\n    <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\r\n  </div>\r\n  }\r\n  }\r\n</div>\r\n\r\n<!-- Item template -->\r\n<ng-template #itemTemplate>\r\n\r\n  <!-- Icon -->\r\n  @if (item.icon) {\r\n  <mat-icon class=\"cmat-vertical-navigation-item-icon\" [ngClass]=\"item.classes?.icon\" [svgIcon]=\"item.icon\">\r\n  </mat-icon>\r\n  }\r\n\r\n  <!-- Title & Subtitle -->\r\n  <div class=\"cmat-vertical-navigation-item-title-wrapper\">\r\n    <div class=\"cmat-vertical-navigation-item-title\">\r\n      <span [ngClass]=\"item.classes?.title\">\r\n        {{item.title}}\r\n      </span>\r\n    </div>\r\n    @if (item.subTitle) {\r\n    <div class=\"cmat-vertical-navigation-item-subtitle\">\r\n      <span [ngClass]=\"item.classes?.subtitle\">\r\n        {{item.subTitle}}\r\n      </span>\r\n    </div>\r\n    }\r\n  </div>\r\n\r\n  <!-- Badge -->\r\n  @if (item.badge) {\r\n  <div class=\"cmat-vertical-navigation-item-badge\">\r\n    <div class=\"cmat-vertical-navigation-item-badge-content\" [ngClass]=\"item.badge.classes\">\r\n      {{item.badge.title}}\r\n    </div>\r\n  </div>\r\n  }\r\n</ng-template>" }]
         }], ctorParameters: () => [], propDecorators: { item: [{
                 type: Input
             }], name: [{