@recursyve/nice-ui-kit.v2 14.0.0-beta.126 → 14.0.0-beta.128

package/fesm2020/recursyve-nice-ui-kit.v2.mjs

@@ -64,9 +64,10 @@ import * as i1$e from '@angular/cdk/scrolling';
 import * as i3$1 from '@angular/cdk/bidi';
 import * as i1$f from '@angular/material/snack-bar';
 import { MAT_SNACK_BAR_DATA, MatSnackBarModule } from '@angular/material/snack-bar';
+import * as i6 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import PerfectScrollbar from 'perfect-scrollbar';
 import { MatDividerModule } from '@angular/material/divider';
-import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i1$h from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import * as i3$2 from '@angular/material/button-toggle';
@@ -943,10 +944,10 @@ class NiceAlertComponent {
     }
 }
 NiceAlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceAlertComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: NiceAlertService }, { token: NiceUtilsService }], target: i0.ɵɵFactoryTarget.Component });
-NiceAlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: NiceAlertComponent, selector: "nice-alert", inputs: { appearance: "appearance", dismissed: "dismissed", dismissible: "dismissible", disableAnimation: "disableAnimation", name: "name", showIcon: "showIcon", type: "type", color: "color" }, outputs: { dismissedChanged: "dismissedChanged" }, host: { properties: { "class": "this.classList" } }, exportAs: ["niceAlert"], usesOnChanges: true, ngImport: i0, template: "<div\n    class=\"nice-alert-container\"\n    *ngIf=\"!dismissible || dismissible && !dismissed\"\n    [@fadeIn]=\"!dismissed && !disableAnimation\"\n    [@fadeOut]=\"!dismissed && !disableAnimation\">\n\n    <!-- Border -->\n    <div\n        class=\"nice-alert-border\"\n        *ngIf=\"appearance === 'border'\"></div>\n\n    <!-- Icon -->\n    <div\n        class=\"nice-alert-icon\"\n        *ngIf=\"showIcon\">\n\n        <!-- Custom icon -->\n        <div class=\"nice-alert-custom-icon\">\n            <ng-content select=\"[niceAlertIcon]\"></ng-content>\n        </div>\n\n        <!-- Default icons -->\n        <div class=\"nice-alert-default-icon\">\n\n            <mat-icon\n                *ngIf=\"type === 'primary'\"\n                [svgIcon]=\"'heroicons_solid:check-circle'\"></mat-icon>\n\n            <mat-icon\n                *ngIf=\"type === 'accent'\"\n                [svgIcon]=\"'heroicons_solid:check-circle'\"></mat-icon>\n\n            <mat-icon\n                *ngIf=\"type === 'warn'\"\n                [svgIcon]=\"'heroicons_solid:x-circle'\"></mat-icon>\n\n            <mat-icon\n                *ngIf=\"type === 'basic'\"\n                [svgIcon]=\"'heroicons_solid:check-circle'\"></mat-icon>\n\n            <mat-icon\n                *ngIf=\"type === 'info'\"\n                [svgIcon]=\"'heroicons_solid:information-circle'\"></mat-icon>\n\n            <mat-icon\n                *ngIf=\"type === 'success'\"\n                [svgIcon]=\"'heroicons_solid:check-circle'\"></mat-icon>\n\n            <mat-icon\n                *ngIf=\"type === 'warning'\"\n                [svgIcon]=\"'heroicons_solid:exclamation'\"></mat-icon>\n\n            <mat-icon\n                *ngIf=\"type === 'error'\"\n                [svgIcon]=\"'heroicons_solid:x-circle'\"></mat-icon>\n\n        </div>\n\n    </div>\n\n    <!-- Content -->\n    <div class=\"nice-alert-content\">\n\n        <div class=\"nice-alert-title\">\n            <ng-content select=\"[niceAlertTitle]\"></ng-content>\n        </div>\n\n        <div class=\"nice-alert-message\">\n            <ng-content></ng-content>\n        </div>\n\n    </div>\n\n    <!-- Dismiss button -->\n    <button\n        class=\"nice-alert-dismiss-button\"\n        mat-icon-button\n        (click)=\"dismiss()\">\n        <mat-icon [svgIcon]=\"'heroicons_solid:x'\"></mat-icon>\n    </button>\n\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], animations: niceAnimations, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+NiceAlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: NiceAlertComponent, selector: "nice-alert", inputs: { appearance: "appearance", dismissed: "dismissed", dismissible: "dismissible", disableAnimation: "disableAnimation", name: "name", showIcon: "showIcon", type: "type", color: "color" }, outputs: { dismissedChanged: "dismissedChanged" }, host: { properties: { "class": "this.classList" } }, exportAs: ["niceAlert"], usesOnChanges: true, ngImport: i0, template: "<div\n    class=\"nice-alert-container\"\n    *ngIf=\"!dismissible || dismissible && !dismissed\"\n    [@fadeIn]=\"!dismissed && !disableAnimation\"\n    [@fadeOut]=\"!dismissed && !disableAnimation\">\n\n    <!-- Border -->\n    <div\n        class=\"nice-alert-border\"\n        *ngIf=\"appearance === 'border'\"></div>\n\n    <!-- Icon -->\n    <div\n        class=\"nice-alert-icon\"\n        *ngIf=\"showIcon\">\n\n        <!-- Custom icon -->\n        <div class=\"nice-alert-custom-icon\">\n            <ng-content select=\"[niceAlertIcon]\"></ng-content>\n        </div>\n\n        <!-- Default icons -->\n        <div class=\"nice-alert-default-icon\">\n\n            <mat-icon\n                *ngIf=\"type === 'primary'\"\n                [svgIcon]=\"'heroicons_solid:check-circle'\"></mat-icon>\n\n            <mat-icon\n                *ngIf=\"type === 'accent'\"\n                [svgIcon]=\"'heroicons_solid:check-circle'\"></mat-icon>\n\n            <mat-icon\n                *ngIf=\"type === 'warn'\"\n                [svgIcon]=\"'heroicons_solid:x-circle'\"></mat-icon>\n\n            <mat-icon\n                *ngIf=\"type === 'basic'\"\n                [svgIcon]=\"'heroicons_solid:check-circle'\"></mat-icon>\n\n            <mat-icon\n                *ngIf=\"type === 'info'\"\n                [svgIcon]=\"'heroicons_solid:information-circle'\"></mat-icon>\n\n            <mat-icon\n                *ngIf=\"type === 'success'\"\n                [svgIcon]=\"'heroicons_solid:check-circle'\"></mat-icon>\n\n            <mat-icon\n                *ngIf=\"type === 'warning'\"\n                [svgIcon]=\"'heroicons_solid:exclamation-circle'\"></mat-icon>\n\n            <mat-icon\n                *ngIf=\"type === 'error'\"\n                [svgIcon]=\"'heroicons_solid:x-circle'\"></mat-icon>\n\n        </div>\n\n    </div>\n\n    <!-- Content -->\n    <div class=\"nice-alert-content\">\n\n        <div class=\"nice-alert-title\">\n            <ng-content select=\"[niceAlertTitle]\"></ng-content>\n        </div>\n\n        <div class=\"nice-alert-message\">\n            <ng-content></ng-content>\n        </div>\n\n    </div>\n\n    <!-- Dismiss button -->\n    <button\n        class=\"nice-alert-dismiss-button\"\n        mat-icon-button\n        (click)=\"dismiss()\">\n        <mat-icon [svgIcon]=\"'heroicons_solid:x'\"></mat-icon>\n    </button>\n\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], animations: niceAnimations, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceAlertComponent, decorators: [{
             type: Component,
-            args: [{ selector: "nice-alert", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: niceAnimations, exportAs: "niceAlert", template: "<div\n    class=\"nice-alert-container\"\n    *ngIf=\"!dismissible || dismissible && !dismissed\"\n    [@fadeIn]=\"!dismissed && !disableAnimation\"\n    [@fadeOut]=\"!dismissed && !disableAnimation\">\n\n    <!-- Border -->\n    <div\n        class=\"nice-alert-border\"\n        *ngIf=\"appearance === 'border'\"></div>\n\n    <!-- Icon -->\n    <div\n        class=\"nice-alert-icon\"\n        *ngIf=\"showIcon\">\n\n        <!-- Custom icon -->\n        <div class=\"nice-alert-custom-icon\">\n            <ng-content select=\"[niceAlertIcon]\"></ng-content>\n        </div>\n\n        <!-- Default icons -->\n        <div class=\"nice-alert-default-icon\">\n\n            <mat-icon\n                *ngIf=\"type === 'primary'\"\n                [svgIcon]=\"'heroicons_solid:check-circle'\"></mat-icon>\n\n            <mat-icon\n                *ngIf=\"type === 'accent'\"\n                [svgIcon]=\"'heroicons_solid:check-circle'\"></mat-icon>\n\n            <mat-icon\n                *ngIf=\"type === 'warn'\"\n                [svgIcon]=\"'heroicons_solid:x-circle'\"></mat-icon>\n\n            <mat-icon\n                *ngIf=\"type === 'basic'\"\n                [svgIcon]=\"'heroicons_solid:check-circle'\"></mat-icon>\n\n            <mat-icon\n                *ngIf=\"type === 'info'\"\n                [svgIcon]=\"'heroicons_solid:information-circle'\"></mat-icon>\n\n            <mat-icon\n                *ngIf=\"type === 'success'\"\n                [svgIcon]=\"'heroicons_solid:check-circle'\"></mat-icon>\n\n            <mat-icon\n                *ngIf=\"type === 'warning'\"\n                [svgIcon]=\"'heroicons_solid:exclamation'\"></mat-icon>\n\n            <mat-icon\n                *ngIf=\"type === 'error'\"\n                [svgIcon]=\"'heroicons_solid:x-circle'\"></mat-icon>\n\n        </div>\n\n    </div>\n\n    <!-- Content -->\n    <div class=\"nice-alert-content\">\n\n        <div class=\"nice-alert-title\">\n            <ng-content select=\"[niceAlertTitle]\"></ng-content>\n        </div>\n\n        <div class=\"nice-alert-message\">\n            <ng-content></ng-content>\n        </div>\n\n    </div>\n\n    <!-- Dismiss button -->\n    <button\n        class=\"nice-alert-dismiss-button\"\n        mat-icon-button\n        (click)=\"dismiss()\">\n        <mat-icon [svgIcon]=\"'heroicons_solid:x'\"></mat-icon>\n    </button>\n\n</div>\n" }]
+            args: [{ selector: "nice-alert", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: niceAnimations, exportAs: "niceAlert", template: "<div\n    class=\"nice-alert-container\"\n    *ngIf=\"!dismissible || dismissible && !dismissed\"\n    [@fadeIn]=\"!dismissed && !disableAnimation\"\n    [@fadeOut]=\"!dismissed && !disableAnimation\">\n\n    <!-- Border -->\n    <div\n        class=\"nice-alert-border\"\n        *ngIf=\"appearance === 'border'\"></div>\n\n    <!-- Icon -->\n    <div\n        class=\"nice-alert-icon\"\n        *ngIf=\"showIcon\">\n\n        <!-- Custom icon -->\n        <div class=\"nice-alert-custom-icon\">\n            <ng-content select=\"[niceAlertIcon]\"></ng-content>\n        </div>\n\n        <!-- Default icons -->\n        <div class=\"nice-alert-default-icon\">\n\n            <mat-icon\n                *ngIf=\"type === 'primary'\"\n                [svgIcon]=\"'heroicons_solid:check-circle'\"></mat-icon>\n\n            <mat-icon\n                *ngIf=\"type === 'accent'\"\n                [svgIcon]=\"'heroicons_solid:check-circle'\"></mat-icon>\n\n            <mat-icon\n                *ngIf=\"type === 'warn'\"\n                [svgIcon]=\"'heroicons_solid:x-circle'\"></mat-icon>\n\n            <mat-icon\n                *ngIf=\"type === 'basic'\"\n                [svgIcon]=\"'heroicons_solid:check-circle'\"></mat-icon>\n\n            <mat-icon\n                *ngIf=\"type === 'info'\"\n                [svgIcon]=\"'heroicons_solid:information-circle'\"></mat-icon>\n\n            <mat-icon\n                *ngIf=\"type === 'success'\"\n                [svgIcon]=\"'heroicons_solid:check-circle'\"></mat-icon>\n\n            <mat-icon\n                *ngIf=\"type === 'warning'\"\n                [svgIcon]=\"'heroicons_solid:exclamation-circle'\"></mat-icon>\n\n            <mat-icon\n                *ngIf=\"type === 'error'\"\n                [svgIcon]=\"'heroicons_solid:x-circle'\"></mat-icon>\n\n        </div>\n\n    </div>\n\n    <!-- Content -->\n    <div class=\"nice-alert-content\">\n\n        <div class=\"nice-alert-title\">\n            <ng-content select=\"[niceAlertTitle]\"></ng-content>\n        </div>\n\n        <div class=\"nice-alert-message\">\n            <ng-content></ng-content>\n        </div>\n\n    </div>\n\n    <!-- Dismiss button -->\n    <button\n        class=\"nice-alert-dismiss-button\"\n        mat-icon-button\n        (click)=\"dismiss()\">\n        <mat-icon [svgIcon]=\"'heroicons_solid:x'\"></mat-icon>\n    </button>\n\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: NiceAlertService }, { type: NiceUtilsService }]; }, propDecorators: { appearance: [{
                 type: Input
             }], dismissed: [{
@@ -7753,6 +7754,8 @@ class NiceHorizontalNavigationBasicItemComponent {
         this._changeDetectorRef = _changeDetectorRef;
         this._niceNavigationService = _niceNavigationService;
         this._unsubscribeAll = new Subject();
+        this.showTooltips = false;
+        this.tooltipPosition = "after";
     }
     // -----------------------------------------------------------------------------------------------------
     // @ Lifecycle hooks
@@ -7779,14 +7782,18 @@ class NiceHorizontalNavigationBasicItemComponent {
     }
 }
 NiceHorizontalNavigationBasicItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceHorizontalNavigationBasicItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: NiceNavigationService }], target: i0.ɵɵFactoryTarget.Component });
-NiceHorizontalNavigationBasicItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: NiceHorizontalNavigationBasicItemComponent, selector: "nice-horizontal-navigation-basic-item", inputs: { item: "item", name: "name" }, ngImport: i0, template: "<!-- Item wrapper -->\n<div\n    class=\"nice-horizontal-navigation-item-wrapper\"\n    [class.nice-horizontal-navigation-item-has-subtitle]=\"!!item.subtitle\"\n    [ngClass]=\"item.classes?.wrapper\"\n>\n    <!-- Item with an internal link -->\n    <div\n        class=\"nice-horizontal-navigation-item\"\n        *ngIf=\"item.link && !item.externalLink && !item.function && !item.disabled\"\n        [ngClass]=\"{ 'nice-horizontal-navigation-item-active-forced': item.active }\"\n        [routerLink]=\"[item.link]\"\n        [routerLinkActive]=\"'nice-horizontal-navigation-item-active'\"\n        [routerLinkActiveOptions]=\"{ exact: item.exactMatch || false }\"\n        [queryParams]=\"item?.queryParams\"\n        [state]=\"item?.state\"\n    >\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </div>\n\n    <!-- Item with an external link -->\n    <a\n        class=\"nice-horizontal-navigation-item\"\n        *ngIf=\"item.link && item.externalLink && !item.function && !item.disabled\"\n        [href]=\"item.link\"\n    >\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </a>\n\n    <!-- Item with a function -->\n    <div\n        class=\"nice-horizontal-navigation-item\"\n        *ngIf=\"!item.link && item.function && !item.disabled\"\n        [ngClass]=\"{ 'nice-horizontal-navigation-item-active-forced': item.active }\"\n        (click)=\"item.function(item)\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </div>\n\n    <!-- Item with an internal link and function -->\n    <div\n        class=\"nice-horizontal-navigation-item\"\n        *ngIf=\"item.link && !item.externalLink && item.function && !item.disabled\"\n        [ngClass]=\"{ 'nice-horizontal-navigation-item-active-forced': item.active }\"\n        [routerLink]=\"[item.link]\"\n        [routerLinkActive]=\"'nice-horizontal-navigation-item-active'\"\n        [routerLinkActiveOptions]=\"{ exact: item.exactMatch || false }\"\n        [queryParams]=\"item?.queryParams\"\n        [state]=\"item?.state\"\n        (click)=\"item.function(item)\"\n    >\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </div>\n\n    <!-- Item with an external link and function -->\n    <a\n        class=\"nice-horizontal-navigation-item\"\n        *ngIf=\"item.link && item.externalLink && item.function && !item.disabled\"\n        [href]=\"item.link\"\n        (click)=\"item.function(item)\"\n        mat-menu-item\n    >\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </a>\n\n    <!-- Item with a no link and no function -->\n    <div\n        class=\"nice-horizontal-navigation-item\"\n        *ngIf=\"!item.link && !item.function && !item.disabled\"\n        [ngClass]=\"{'nice-horizontal-navigation-item-active-forced': item.active}\"\n    >\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </div>\n\n    <!-- Item is disabled -->\n    <div\n        class=\"nice-horizontal-navigation-item nice-horizontal-navigation-item-disabled\"\n        *ngIf=\"item.disabled\"\n    >\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </div>\n</div>\n\n<!-- Item template -->\n<ng-template #itemTemplate>\n    <!-- Icon -->\n    <mat-icon\n            class=\"nice-vertical-navigation-item-icon\"\n            [ngClass]=\"item.classes?.icon\"\n            *ngIf=\"item.icon && item.iconType === 'material'\"\n    >\n        {{ item.icon }}\n    </mat-icon>\n\n    <span class=\"nice-vertical-navigation-item-icon\" [ngClass]=\"item.icon\" *ngIf=\"item.icon && item.iconType == 'fontawesome'\"></span>\n\n    <mat-icon\n            class=\"nice-vertical-navigation-item-icon\"\n            [ngClass]=\"item.classes?.icon\"\n            [svgIcon]=\"item.icon\"\n            *ngIf=\"item.icon && item.iconType === 'svg'\"\n    ></mat-icon>\n\n    <!-- Title & Subtitle -->\n    <div class=\"nice-horizontal-navigation-item-title-wrapper\">\n        <div class=\"nice-horizontal-navigation-item-title\">\n            <span [ngClass]=\"item.classes?.title\">\n                {{ item.title | translate }}\n            </span>\n        </div>\n        <div\n            class=\"nice-horizontal-navigation-item-subtitle text-hint\"\n            *ngIf=\"item.subtitle\"\n        >\n            <span [ngClass]=\"item.classes?.subtitle\">\n                {{ item.subtitle | translate }}\n            </span>\n        </div>\n    </div>\n\n    <!-- Badge -->\n    <div\n        class=\"nice-horizontal-navigation-item-badge\"\n        *ngIf=\"item.badge\"\n    >\n        <div\n            class=\"nice-horizontal-navigation-item-badge-content\"\n            [ngClass]=\"item.badge.classes\">\n            {{ item.badge.title | translate }}\n        </div>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$b.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$b.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NiceHorizontalNavigationBasicItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: NiceHorizontalNavigationBasicItemComponent, selector: "nice-horizontal-navigation-basic-item", inputs: { item: "item", name: "name", showTooltips: "showTooltips", tooltipPosition: "tooltipPosition" }, ngImport: i0, template: "<!-- Item wrapper -->\n<div\n    class=\"nice-horizontal-navigation-item-wrapper\"\n    [class.nice-horizontal-navigation-item-has-subtitle]=\"!!item.subtitle\"\n    [ngClass]=\"item.classes?.wrapper\"\n    [matTooltip]=\"item.tooltip | translate\"\n    [matTooltipDisabled]=\"!showTooltips\"\n    [matTooltipPosition]=\"tooltipPosition\"\n>\n    <!-- Item with an internal link -->\n    <div\n        class=\"nice-horizontal-navigation-item\"\n        *ngIf=\"item.link && !item.externalLink && !item.function && !item.disabled\"\n        [ngClass]=\"{ 'nice-horizontal-navigation-item-active-forced': item.active }\"\n        [routerLink]=\"[item.link]\"\n        [routerLinkActive]=\"'nice-horizontal-navigation-item-active'\"\n        [routerLinkActiveOptions]=\"{ exact: item.exactMatch || false }\"\n        [queryParams]=\"item?.queryParams\"\n        [state]=\"item?.state\"\n    >\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </div>\n\n    <!-- Item with an external link -->\n    <a\n        class=\"nice-horizontal-navigation-item\"\n        *ngIf=\"item.link && item.externalLink && !item.function && !item.disabled\"\n        [href]=\"item.link\"\n    >\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </a>\n\n    <!-- Item with a function -->\n    <div\n        class=\"nice-horizontal-navigation-item\"\n        *ngIf=\"!item.link && item.function && !item.disabled\"\n        [ngClass]=\"{ 'nice-horizontal-navigation-item-active-forced': item.active }\"\n        (click)=\"item.function(item)\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </div>\n\n    <!-- Item with an internal link and function -->\n    <div\n        class=\"nice-horizontal-navigation-item\"\n        *ngIf=\"item.link && !item.externalLink && item.function && !item.disabled\"\n        [ngClass]=\"{ 'nice-horizontal-navigation-item-active-forced': item.active }\"\n        [routerLink]=\"[item.link]\"\n        [routerLinkActive]=\"'nice-horizontal-navigation-item-active'\"\n        [routerLinkActiveOptions]=\"{ exact: item.exactMatch || false }\"\n        [queryParams]=\"item?.queryParams\"\n        [state]=\"item?.state\"\n        (click)=\"item.function(item)\"\n    >\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </div>\n\n    <!-- Item with an external link and function -->\n    <a\n        class=\"nice-horizontal-navigation-item\"\n        *ngIf=\"item.link && item.externalLink && item.function && !item.disabled\"\n        [href]=\"item.link\"\n        (click)=\"item.function(item)\"\n        mat-menu-item\n    >\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </a>\n\n    <!-- Item with a no link and no function -->\n    <div\n        class=\"nice-horizontal-navigation-item\"\n        *ngIf=\"!item.link && !item.function && !item.disabled\"\n        [ngClass]=\"{'nice-horizontal-navigation-item-active-forced': item.active}\"\n    >\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </div>\n\n    <!-- Item is disabled -->\n    <div\n        class=\"nice-horizontal-navigation-item nice-horizontal-navigation-item-disabled\"\n        *ngIf=\"item.disabled\"\n    >\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </div>\n</div>\n\n<!-- Item template -->\n<ng-template #itemTemplate>\n    <!-- Icon -->\n    <mat-icon\n            class=\"nice-vertical-navigation-item-icon\"\n            [ngClass]=\"item.classes?.icon\"\n            *ngIf=\"item.icon && item.iconType === 'material'\"\n    >\n        {{ item.icon }}\n    </mat-icon>\n\n    <span class=\"nice-vertical-navigation-item-icon\" [ngClass]=\"item.icon\" *ngIf=\"item.icon && item.iconType == 'fontawesome'\"></span>\n\n    <mat-icon\n            class=\"nice-vertical-navigation-item-icon\"\n            [ngClass]=\"item.classes?.icon\"\n            [svgIcon]=\"item.icon\"\n            *ngIf=\"item.icon && item.iconType === 'svg'\"\n    ></mat-icon>\n\n    <!-- Title & Subtitle -->\n    <div class=\"nice-horizontal-navigation-item-title-wrapper\">\n        <div class=\"nice-horizontal-navigation-item-title\">\n            <span [ngClass]=\"item.classes?.title\">\n                {{ item.title | translate }}\n            </span>\n        </div>\n        <div\n            class=\"nice-horizontal-navigation-item-subtitle text-hint\"\n            *ngIf=\"item.subtitle\"\n        >\n            <span [ngClass]=\"item.classes?.subtitle\">\n                {{ item.subtitle | translate }}\n            </span>\n        </div>\n    </div>\n\n    <!-- Badge -->\n    <div\n        class=\"nice-horizontal-navigation-item-badge\"\n        *ngIf=\"item.badge\"\n    >\n        <div\n            class=\"nice-horizontal-navigation-item-badge-content\"\n            [ngClass]=\"item.badge.classes\">\n            {{ item.badge.title | translate }}\n        </div>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$b.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$b.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceHorizontalNavigationBasicItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: "nice-horizontal-navigation-basic-item", changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Item wrapper -->\n<div\n    class=\"nice-horizontal-navigation-item-wrapper\"\n    [class.nice-horizontal-navigation-item-has-subtitle]=\"!!item.subtitle\"\n    [ngClass]=\"item.classes?.wrapper\"\n>\n    <!-- Item with an internal link -->\n    <div\n        class=\"nice-horizontal-navigation-item\"\n        *ngIf=\"item.link && !item.externalLink && !item.function && !item.disabled\"\n        [ngClass]=\"{ 'nice-horizontal-navigation-item-active-forced': item.active }\"\n        [routerLink]=\"[item.link]\"\n        [routerLinkActive]=\"'nice-horizontal-navigation-item-active'\"\n        [routerLinkActiveOptions]=\"{ exact: item.exactMatch || false }\"\n        [queryParams]=\"item?.queryParams\"\n        [state]=\"item?.state\"\n    >\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </div>\n\n    <!-- Item with an external link -->\n    <a\n        class=\"nice-horizontal-navigation-item\"\n        *ngIf=\"item.link && item.externalLink && !item.function && !item.disabled\"\n        [href]=\"item.link\"\n    >\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </a>\n\n    <!-- Item with a function -->\n    <div\n        class=\"nice-horizontal-navigation-item\"\n        *ngIf=\"!item.link && item.function && !item.disabled\"\n        [ngClass]=\"{ 'nice-horizontal-navigation-item-active-forced': item.active }\"\n        (click)=\"item.function(item)\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </div>\n\n    <!-- Item with an internal link and function -->\n    <div\n        class=\"nice-horizontal-navigation-item\"\n        *ngIf=\"item.link && !item.externalLink && item.function && !item.disabled\"\n        [ngClass]=\"{ 'nice-horizontal-navigation-item-active-forced': item.active }\"\n        [routerLink]=\"[item.link]\"\n        [routerLinkActive]=\"'nice-horizontal-navigation-item-active'\"\n        [routerLinkActiveOptions]=\"{ exact: item.exactMatch || false }\"\n        [queryParams]=\"item?.queryParams\"\n        [state]=\"item?.state\"\n        (click)=\"item.function(item)\"\n    >\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </div>\n\n    <!-- Item with an external link and function -->\n    <a\n        class=\"nice-horizontal-navigation-item\"\n        *ngIf=\"item.link && item.externalLink && item.function && !item.disabled\"\n        [href]=\"item.link\"\n        (click)=\"item.function(item)\"\n        mat-menu-item\n    >\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </a>\n\n    <!-- Item with a no link and no function -->\n    <div\n        class=\"nice-horizontal-navigation-item\"\n        *ngIf=\"!item.link && !item.function && !item.disabled\"\n        [ngClass]=\"{'nice-horizontal-navigation-item-active-forced': item.active}\"\n    >\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </div>\n\n    <!-- Item is disabled -->\n    <div\n        class=\"nice-horizontal-navigation-item nice-horizontal-navigation-item-disabled\"\n        *ngIf=\"item.disabled\"\n    >\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </div>\n</div>\n\n<!-- Item template -->\n<ng-template #itemTemplate>\n    <!-- Icon -->\n    <mat-icon\n            class=\"nice-vertical-navigation-item-icon\"\n            [ngClass]=\"item.classes?.icon\"\n            *ngIf=\"item.icon && item.iconType === 'material'\"\n    >\n        {{ item.icon }}\n    </mat-icon>\n\n    <span class=\"nice-vertical-navigation-item-icon\" [ngClass]=\"item.icon\" *ngIf=\"item.icon && item.iconType == 'fontawesome'\"></span>\n\n    <mat-icon\n            class=\"nice-vertical-navigation-item-icon\"\n            [ngClass]=\"item.classes?.icon\"\n            [svgIcon]=\"item.icon\"\n            *ngIf=\"item.icon && item.iconType === 'svg'\"\n    ></mat-icon>\n\n    <!-- Title & Subtitle -->\n    <div class=\"nice-horizontal-navigation-item-title-wrapper\">\n        <div class=\"nice-horizontal-navigation-item-title\">\n            <span [ngClass]=\"item.classes?.title\">\n                {{ item.title | translate }}\n            </span>\n        </div>\n        <div\n            class=\"nice-horizontal-navigation-item-subtitle text-hint\"\n            *ngIf=\"item.subtitle\"\n        >\n            <span [ngClass]=\"item.classes?.subtitle\">\n                {{ item.subtitle | translate }}\n            </span>\n        </div>\n    </div>\n\n    <!-- Badge -->\n    <div\n        class=\"nice-horizontal-navigation-item-badge\"\n        *ngIf=\"item.badge\"\n    >\n        <div\n            class=\"nice-horizontal-navigation-item-badge-content\"\n            [ngClass]=\"item.badge.classes\">\n            {{ item.badge.title | translate }}\n        </div>\n    </div>\n</ng-template>\n" }]
+            args: [{ selector: "nice-horizontal-navigation-basic-item", changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Item wrapper -->\n<div\n    class=\"nice-horizontal-navigation-item-wrapper\"\n    [class.nice-horizontal-navigation-item-has-subtitle]=\"!!item.subtitle\"\n    [ngClass]=\"item.classes?.wrapper\"\n    [matTooltip]=\"item.tooltip | translate\"\n    [matTooltipDisabled]=\"!showTooltips\"\n    [matTooltipPosition]=\"tooltipPosition\"\n>\n    <!-- Item with an internal link -->\n    <div\n        class=\"nice-horizontal-navigation-item\"\n        *ngIf=\"item.link && !item.externalLink && !item.function && !item.disabled\"\n        [ngClass]=\"{ 'nice-horizontal-navigation-item-active-forced': item.active }\"\n        [routerLink]=\"[item.link]\"\n        [routerLinkActive]=\"'nice-horizontal-navigation-item-active'\"\n        [routerLinkActiveOptions]=\"{ exact: item.exactMatch || false }\"\n        [queryParams]=\"item?.queryParams\"\n        [state]=\"item?.state\"\n    >\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </div>\n\n    <!-- Item with an external link -->\n    <a\n        class=\"nice-horizontal-navigation-item\"\n        *ngIf=\"item.link && item.externalLink && !item.function && !item.disabled\"\n        [href]=\"item.link\"\n    >\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </a>\n\n    <!-- Item with a function -->\n    <div\n        class=\"nice-horizontal-navigation-item\"\n        *ngIf=\"!item.link && item.function && !item.disabled\"\n        [ngClass]=\"{ 'nice-horizontal-navigation-item-active-forced': item.active }\"\n        (click)=\"item.function(item)\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </div>\n\n    <!-- Item with an internal link and function -->\n    <div\n        class=\"nice-horizontal-navigation-item\"\n        *ngIf=\"item.link && !item.externalLink && item.function && !item.disabled\"\n        [ngClass]=\"{ 'nice-horizontal-navigation-item-active-forced': item.active }\"\n        [routerLink]=\"[item.link]\"\n        [routerLinkActive]=\"'nice-horizontal-navigation-item-active'\"\n        [routerLinkActiveOptions]=\"{ exact: item.exactMatch || false }\"\n        [queryParams]=\"item?.queryParams\"\n        [state]=\"item?.state\"\n        (click)=\"item.function(item)\"\n    >\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </div>\n\n    <!-- Item with an external link and function -->\n    <a\n        class=\"nice-horizontal-navigation-item\"\n        *ngIf=\"item.link && item.externalLink && item.function && !item.disabled\"\n        [href]=\"item.link\"\n        (click)=\"item.function(item)\"\n        mat-menu-item\n    >\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </a>\n\n    <!-- Item with a no link and no function -->\n    <div\n        class=\"nice-horizontal-navigation-item\"\n        *ngIf=\"!item.link && !item.function && !item.disabled\"\n        [ngClass]=\"{'nice-horizontal-navigation-item-active-forced': item.active}\"\n    >\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </div>\n\n    <!-- Item is disabled -->\n    <div\n        class=\"nice-horizontal-navigation-item nice-horizontal-navigation-item-disabled\"\n        *ngIf=\"item.disabled\"\n    >\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </div>\n</div>\n\n<!-- Item template -->\n<ng-template #itemTemplate>\n    <!-- Icon -->\n    <mat-icon\n            class=\"nice-vertical-navigation-item-icon\"\n            [ngClass]=\"item.classes?.icon\"\n            *ngIf=\"item.icon && item.iconType === 'material'\"\n    >\n        {{ item.icon }}\n    </mat-icon>\n\n    <span class=\"nice-vertical-navigation-item-icon\" [ngClass]=\"item.icon\" *ngIf=\"item.icon && item.iconType == 'fontawesome'\"></span>\n\n    <mat-icon\n            class=\"nice-vertical-navigation-item-icon\"\n            [ngClass]=\"item.classes?.icon\"\n            [svgIcon]=\"item.icon\"\n            *ngIf=\"item.icon && item.iconType === 'svg'\"\n    ></mat-icon>\n\n    <!-- Title & Subtitle -->\n    <div class=\"nice-horizontal-navigation-item-title-wrapper\">\n        <div class=\"nice-horizontal-navigation-item-title\">\n            <span [ngClass]=\"item.classes?.title\">\n                {{ item.title | translate }}\n            </span>\n        </div>\n        <div\n            class=\"nice-horizontal-navigation-item-subtitle text-hint\"\n            *ngIf=\"item.subtitle\"\n        >\n            <span [ngClass]=\"item.classes?.subtitle\">\n                {{ item.subtitle | translate }}\n            </span>\n        </div>\n    </div>\n\n    <!-- Badge -->\n    <div\n        class=\"nice-horizontal-navigation-item-badge\"\n        *ngIf=\"item.badge\"\n    >\n        <div\n            class=\"nice-horizontal-navigation-item-badge-content\"\n            [ngClass]=\"item.badge.classes\">\n            {{ item.badge.title | translate }}\n        </div>\n    </div>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: NiceNavigationService }]; }, propDecorators: { item: [{
                 type: Input
             }], name: [{
                 type: Input
+            }], showTooltips: [{
+                type: Input
+            }], tooltipPosition: [{
+                type: Input
             }] } });
 
 class NiceHorizontalNavigationDividerItemComponent {
@@ -7870,6 +7877,8 @@ class NiceHorizontalNavigationBranchItemComponent {
         this._niceNavigationService = _niceNavigationService;
         this._unsubscribeAll = new Subject();
         this.child = false;
+        this.showTooltips = false;
+        this.tooltipPosition = "after";
     }
     // -----------------------------------------------------------------------------------------------------
     // @ Lifecycle hooks
@@ -7906,10 +7915,10 @@ class NiceHorizontalNavigationBranchItemComponent {
     }
 }
 NiceHorizontalNavigationBranchItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceHorizontalNavigationBranchItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: NiceNavigationService }], target: i0.ɵɵFactoryTarget.Component });
-NiceHorizontalNavigationBranchItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: NiceHorizontalNavigationBranchItemComponent, selector: "nice-horizontal-navigation-branch-item", inputs: { child: "child", item: "item", name: "name" }, viewQueries: [{ propertyName: "matMenu", first: true, predicate: ["matMenu"], descendants: true, static: true }], ngImport: i0, template: "<div\n    *ngIf=\"!child\"\n    [ngClass]=\"{\n        'nice-horizontal-navigation-menu-active': trigger.menuOpen,\n        'nice-horizontal-navigation-menu-active-forced': item.active\n    }\"\n    [matMenuTriggerFor]=\"matMenu\"\n    (onMenuOpen)=\"triggerChangeDetection()\"\n    (onMenuClose)=\"triggerChangeDetection()\"\n    #trigger=\"matMenuTrigger\"\n>\n    <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item}\"></ng-container>\n</div>\n\n<mat-menu\n    class=\"nice-horizontal-navigation-menu-panel\"\n    [overlapTrigger]=\"false\"\n    #matMenu=\"matMenu\"\n>\n    <ng-container *ngFor=\"let item of item.children\">\n        <!-- Skip the hidden items -->\n        <ng-container *ngIf=\"!(item | niceShouldHide | async)\">\n            <!-- Basic -->\n            <div\n                class=\"nice-horizontal-navigation-menu-item\"\n                *ngIf=\"item.type === 'basic'\"\n                [disabled]=\"item.disabled\"\n                mat-menu-item\n            >\n                <nice-horizontal-navigation-basic-item\n                    [item]=\"item\"\n                    [name]=\"name\"\n                ></nice-horizontal-navigation-basic-item>\n            </div>\n\n            <!-- Branch: aside, collapsable, group -->\n            <div\n                class=\"nice-horizontal-navigation-menu-item\"\n                *ngIf=\"item.type === 'aside' || item.type === 'collapsable' || item.type === 'group'\"\n                [disabled]=\"item.disabled\"\n                [matMenuTriggerFor]=\"branch.matMenu\"\n                mat-menu-item\n            >\n                <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n                <nice-horizontal-navigation-branch-item\n                    [child]=\"true\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                    #branch\n                ></nice-horizontal-navigation-branch-item>\n            </div>\n\n            <!-- Divider -->\n            <div\n                class=\"nice-horizontal-navigation-menu-item\"\n                *ngIf=\"item.type === 'divider'\"\n                mat-menu-item\n            >\n                <nice-horizontal-navigation-divider-item\n                    [item]=\"item\"\n                    [name]=\"name\"\n                ></nice-horizontal-navigation-divider-item>\n            </div>\n        </ng-container>\n    </ng-container>\n</mat-menu>\n\n<!-- Item template -->\n<ng-template\n    let-item\n    #itemTemplate\n>\n    <div\n        class=\"nice-horizontal-navigation-item-wrapper\"\n        [class.nice-horizontal-navigation-item-has-subtitle]=\"!!item.subtitle\"\n        [ngClass]=\"item.classes?.wrapper\"\n    >\n        <div\n            class=\"nice-horizontal-navigation-item\"\n            [ngClass]=\"{\n                'nice-horizontal-navigation-item-disabled': item.disabled,\n                'nice-horizontal-navigation-item-active-forced': item.active\n            }\">\n\n            <!-- Icon -->\n            <mat-icon\n                class=\"nice-vertical-navigation-item-icon\"\n                [ngClass]=\"item.classes?.icon\"\n                *ngIf=\"item.icon && item.iconType === 'material'\"\n            >\n                {{ item.icon }}\n            </mat-icon>\n\n            <span class=\"nice-vertical-navigation-item-icon\" [ngClass]=\"item.icon\" *ngIf=\"item.icon && item.iconType == 'fontawesome'\"></span>\n\n            <mat-icon\n                class=\"nice-vertical-navigation-item-icon\"\n                [ngClass]=\"item.classes?.icon\"\n                [svgIcon]=\"item.icon\"\n                *ngIf=\"item.icon && item.iconType === 'svg'\"\n            ></mat-icon>\n\n            <!-- Title & Subtitle -->\n            <div class=\"nice-horizontal-navigation-item-title-wrapper\">\n                <div class=\"nice-horizontal-navigation-item-title\">\n                    <span [ngClass]=\"item.classes?.title\">\n                        {{ item.title | translate }}\n                    </span>\n                </div>\n                <div\n                    class=\"nice-horizontal-navigation-item-subtitle text-hint\"\n                    *ngIf=\"item.subtitle\"\n                >\n                    <span [ngClass]=\"item.classes?.subtitle\">\n                        {{ item.subtitle | translate }}\n                    </span>\n                </div>\n            </div>\n\n            <!-- Badge -->\n            <div\n                class=\"nice-horizontal-navigation-item-badge\"\n                *ngIf=\"item.badge\">\n                <div\n                    class=\"nice-horizontal-navigation-item-badge-content\"\n                    [ngClass]=\"item.badge.classes\"\n                >\n                    {{ item.badge.title | translate }}\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: NiceHorizontalNavigationBasicItemComponent, selector: "nice-horizontal-navigation-basic-item", inputs: ["item", "name"] }, { kind: "component", type: NiceHorizontalNavigationBranchItemComponent, selector: "nice-horizontal-navigation-branch-item", inputs: ["child", "item", "name"] }, { kind: "component", type: NiceHorizontalNavigationDividerItemComponent, selector: "nice-horizontal-navigation-divider-item", inputs: ["item", "name"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: NiceShouldHidePipe, name: "niceShouldHide" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NiceHorizontalNavigationBranchItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: NiceHorizontalNavigationBranchItemComponent, selector: "nice-horizontal-navigation-branch-item", inputs: { child: "child", item: "item", name: "name", showTooltips: "showTooltips", tooltipPosition: "tooltipPosition" }, viewQueries: [{ propertyName: "matMenu", first: true, predicate: ["matMenu"], descendants: true, static: true }], ngImport: i0, template: "<div\n    *ngIf=\"!child\"\n    [ngClass]=\"{\n        'nice-horizontal-navigation-menu-active': trigger.menuOpen,\n        'nice-horizontal-navigation-menu-active-forced': item.active\n    }\"\n    [matMenuTriggerFor]=\"matMenu\"\n    (onMenuOpen)=\"triggerChangeDetection()\"\n    (onMenuClose)=\"triggerChangeDetection()\"\n    #trigger=\"matMenuTrigger\"\n>\n    <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item}\"></ng-container>\n</div>\n\n<mat-menu\n    class=\"nice-horizontal-navigation-menu-panel\"\n    [overlapTrigger]=\"false\"\n    #matMenu=\"matMenu\"\n>\n    <ng-container *ngFor=\"let item of item.children\">\n        <!-- Skip the hidden items -->\n        <ng-container *ngIf=\"!(item | niceShouldHide | async)\">\n            <!-- Basic -->\n            <div\n                class=\"nice-horizontal-navigation-menu-item\"\n                *ngIf=\"item.type === 'basic'\"\n                [disabled]=\"item.disabled\"\n                mat-menu-item\n            >\n                <nice-horizontal-navigation-basic-item\n                    [item]=\"item\"\n                    [name]=\"name\"\n                    [showTooltips]=\"showTooltips\"\n                    [tooltipPosition]=\"tooltipPosition\"\n                ></nice-horizontal-navigation-basic-item>\n            </div>\n\n            <!-- Branch: aside, collapsable, group -->\n            <div\n                class=\"nice-horizontal-navigation-menu-item\"\n                *ngIf=\"item.type === 'aside' || item.type === 'collapsable' || item.type === 'group'\"\n                [disabled]=\"item.disabled\"\n                [matMenuTriggerFor]=\"branch.matMenu\"\n                mat-menu-item\n            >\n                <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n                <nice-horizontal-navigation-branch-item\n                    [child]=\"true\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                    [showTooltips]=\"showTooltips\"\n                    [tooltipPosition]=\"tooltipPosition\"\n                    #branch\n                ></nice-horizontal-navigation-branch-item>\n            </div>\n\n            <!-- Divider -->\n            <div\n                class=\"nice-horizontal-navigation-menu-item\"\n                *ngIf=\"item.type === 'divider'\"\n                mat-menu-item\n            >\n                <nice-horizontal-navigation-divider-item\n                    [item]=\"item\"\n                    [name]=\"name\"\n                ></nice-horizontal-navigation-divider-item>\n            </div>\n        </ng-container>\n    </ng-container>\n</mat-menu>\n\n<!-- Item template -->\n<ng-template\n    let-item\n    #itemTemplate\n>\n    <div\n        class=\"nice-horizontal-navigation-item-wrapper\"\n        [class.nice-horizontal-navigation-item-has-subtitle]=\"!!item.subtitle\"\n        [ngClass]=\"item.classes?.wrapper\"\n    >\n        <div\n            class=\"nice-horizontal-navigation-item\"\n            [ngClass]=\"{\n                'nice-horizontal-navigation-item-disabled': item.disabled,\n                'nice-horizontal-navigation-item-active-forced': item.active\n            }\">\n\n            <!-- Icon -->\n            <mat-icon\n                class=\"nice-vertical-navigation-item-icon\"\n                [ngClass]=\"item.classes?.icon\"\n                *ngIf=\"item.icon && item.iconType === 'material'\"\n            >\n                {{ item.icon }}\n            </mat-icon>\n\n            <span class=\"nice-vertical-navigation-item-icon\" [ngClass]=\"item.icon\" *ngIf=\"item.icon && item.iconType == 'fontawesome'\"></span>\n\n            <mat-icon\n                class=\"nice-vertical-navigation-item-icon\"\n                [ngClass]=\"item.classes?.icon\"\n                [svgIcon]=\"item.icon\"\n                *ngIf=\"item.icon && item.iconType === 'svg'\"\n            ></mat-icon>\n\n            <!-- Title & Subtitle -->\n            <div class=\"nice-horizontal-navigation-item-title-wrapper\">\n                <div class=\"nice-horizontal-navigation-item-title\">\n                    <span [ngClass]=\"item.classes?.title\">\n                        {{ item.title | translate }}\n                    </span>\n                </div>\n                <div\n                    class=\"nice-horizontal-navigation-item-subtitle text-hint\"\n                    *ngIf=\"item.subtitle\"\n                >\n                    <span [ngClass]=\"item.classes?.subtitle\">\n                        {{ item.subtitle | translate }}\n                    </span>\n                </div>\n            </div>\n\n            <!-- Badge -->\n            <div\n                class=\"nice-horizontal-navigation-item-badge\"\n                *ngIf=\"item.badge\">\n                <div\n                    class=\"nice-horizontal-navigation-item-badge-content\"\n                    [ngClass]=\"item.badge.classes\"\n                >\n                    {{ item.badge.title | translate }}\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: NiceHorizontalNavigationBasicItemComponent, selector: "nice-horizontal-navigation-basic-item", inputs: ["item", "name", "showTooltips", "tooltipPosition"] }, { kind: "component", type: NiceHorizontalNavigationBranchItemComponent, selector: "nice-horizontal-navigation-branch-item", inputs: ["child", "item", "name", "showTooltips", "tooltipPosition"] }, { kind: "component", type: NiceHorizontalNavigationDividerItemComponent, selector: "nice-horizontal-navigation-divider-item", inputs: ["item", "name"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: NiceShouldHidePipe, name: "niceShouldHide" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceHorizontalNavigationBranchItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: "nice-horizontal-navigation-branch-item", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    *ngIf=\"!child\"\n    [ngClass]=\"{\n        'nice-horizontal-navigation-menu-active': trigger.menuOpen,\n        'nice-horizontal-navigation-menu-active-forced': item.active\n    }\"\n    [matMenuTriggerFor]=\"matMenu\"\n    (onMenuOpen)=\"triggerChangeDetection()\"\n    (onMenuClose)=\"triggerChangeDetection()\"\n    #trigger=\"matMenuTrigger\"\n>\n    <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item}\"></ng-container>\n</div>\n\n<mat-menu\n    class=\"nice-horizontal-navigation-menu-panel\"\n    [overlapTrigger]=\"false\"\n    #matMenu=\"matMenu\"\n>\n    <ng-container *ngFor=\"let item of item.children\">\n        <!-- Skip the hidden items -->\n        <ng-container *ngIf=\"!(item | niceShouldHide | async)\">\n            <!-- Basic -->\n            <div\n                class=\"nice-horizontal-navigation-menu-item\"\n                *ngIf=\"item.type === 'basic'\"\n                [disabled]=\"item.disabled\"\n                mat-menu-item\n            >\n                <nice-horizontal-navigation-basic-item\n                    [item]=\"item\"\n                    [name]=\"name\"\n                ></nice-horizontal-navigation-basic-item>\n            </div>\n\n            <!-- Branch: aside, collapsable, group -->\n            <div\n                class=\"nice-horizontal-navigation-menu-item\"\n                *ngIf=\"item.type === 'aside' || item.type === 'collapsable' || item.type === 'group'\"\n                [disabled]=\"item.disabled\"\n                [matMenuTriggerFor]=\"branch.matMenu\"\n                mat-menu-item\n            >\n                <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n                <nice-horizontal-navigation-branch-item\n                    [child]=\"true\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                    #branch\n                ></nice-horizontal-navigation-branch-item>\n            </div>\n\n            <!-- Divider -->\n            <div\n                class=\"nice-horizontal-navigation-menu-item\"\n                *ngIf=\"item.type === 'divider'\"\n                mat-menu-item\n            >\n                <nice-horizontal-navigation-divider-item\n                    [item]=\"item\"\n                    [name]=\"name\"\n                ></nice-horizontal-navigation-divider-item>\n            </div>\n        </ng-container>\n    </ng-container>\n</mat-menu>\n\n<!-- Item template -->\n<ng-template\n    let-item\n    #itemTemplate\n>\n    <div\n        class=\"nice-horizontal-navigation-item-wrapper\"\n        [class.nice-horizontal-navigation-item-has-subtitle]=\"!!item.subtitle\"\n        [ngClass]=\"item.classes?.wrapper\"\n    >\n        <div\n            class=\"nice-horizontal-navigation-item\"\n            [ngClass]=\"{\n                'nice-horizontal-navigation-item-disabled': item.disabled,\n                'nice-horizontal-navigation-item-active-forced': item.active\n            }\">\n\n            <!-- Icon -->\n            <mat-icon\n                class=\"nice-vertical-navigation-item-icon\"\n                [ngClass]=\"item.classes?.icon\"\n                *ngIf=\"item.icon && item.iconType === 'material'\"\n            >\n                {{ item.icon }}\n            </mat-icon>\n\n            <span class=\"nice-vertical-navigation-item-icon\" [ngClass]=\"item.icon\" *ngIf=\"item.icon && item.iconType == 'fontawesome'\"></span>\n\n            <mat-icon\n                class=\"nice-vertical-navigation-item-icon\"\n                [ngClass]=\"item.classes?.icon\"\n                [svgIcon]=\"item.icon\"\n                *ngIf=\"item.icon && item.iconType === 'svg'\"\n            ></mat-icon>\n\n            <!-- Title & Subtitle -->\n            <div class=\"nice-horizontal-navigation-item-title-wrapper\">\n                <div class=\"nice-horizontal-navigation-item-title\">\n                    <span [ngClass]=\"item.classes?.title\">\n                        {{ item.title | translate }}\n                    </span>\n                </div>\n                <div\n                    class=\"nice-horizontal-navigation-item-subtitle text-hint\"\n                    *ngIf=\"item.subtitle\"\n                >\n                    <span [ngClass]=\"item.classes?.subtitle\">\n                        {{ item.subtitle | translate }}\n                    </span>\n                </div>\n            </div>\n\n            <!-- Badge -->\n            <div\n                class=\"nice-horizontal-navigation-item-badge\"\n                *ngIf=\"item.badge\">\n                <div\n                    class=\"nice-horizontal-navigation-item-badge-content\"\n                    [ngClass]=\"item.badge.classes\"\n                >\n                    {{ item.badge.title | translate }}\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n" }]
+            args: [{ selector: "nice-horizontal-navigation-branch-item", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    *ngIf=\"!child\"\n    [ngClass]=\"{\n        'nice-horizontal-navigation-menu-active': trigger.menuOpen,\n        'nice-horizontal-navigation-menu-active-forced': item.active\n    }\"\n    [matMenuTriggerFor]=\"matMenu\"\n    (onMenuOpen)=\"triggerChangeDetection()\"\n    (onMenuClose)=\"triggerChangeDetection()\"\n    #trigger=\"matMenuTrigger\"\n>\n    <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item}\"></ng-container>\n</div>\n\n<mat-menu\n    class=\"nice-horizontal-navigation-menu-panel\"\n    [overlapTrigger]=\"false\"\n    #matMenu=\"matMenu\"\n>\n    <ng-container *ngFor=\"let item of item.children\">\n        <!-- Skip the hidden items -->\n        <ng-container *ngIf=\"!(item | niceShouldHide | async)\">\n            <!-- Basic -->\n            <div\n                class=\"nice-horizontal-navigation-menu-item\"\n                *ngIf=\"item.type === 'basic'\"\n                [disabled]=\"item.disabled\"\n                mat-menu-item\n            >\n                <nice-horizontal-navigation-basic-item\n                    [item]=\"item\"\n                    [name]=\"name\"\n                    [showTooltips]=\"showTooltips\"\n                    [tooltipPosition]=\"tooltipPosition\"\n                ></nice-horizontal-navigation-basic-item>\n            </div>\n\n            <!-- Branch: aside, collapsable, group -->\n            <div\n                class=\"nice-horizontal-navigation-menu-item\"\n                *ngIf=\"item.type === 'aside' || item.type === 'collapsable' || item.type === 'group'\"\n                [disabled]=\"item.disabled\"\n                [matMenuTriggerFor]=\"branch.matMenu\"\n                mat-menu-item\n            >\n                <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n                <nice-horizontal-navigation-branch-item\n                    [child]=\"true\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                    [showTooltips]=\"showTooltips\"\n                    [tooltipPosition]=\"tooltipPosition\"\n                    #branch\n                ></nice-horizontal-navigation-branch-item>\n            </div>\n\n            <!-- Divider -->\n            <div\n                class=\"nice-horizontal-navigation-menu-item\"\n                *ngIf=\"item.type === 'divider'\"\n                mat-menu-item\n            >\n                <nice-horizontal-navigation-divider-item\n                    [item]=\"item\"\n                    [name]=\"name\"\n                ></nice-horizontal-navigation-divider-item>\n            </div>\n        </ng-container>\n    </ng-container>\n</mat-menu>\n\n<!-- Item template -->\n<ng-template\n    let-item\n    #itemTemplate\n>\n    <div\n        class=\"nice-horizontal-navigation-item-wrapper\"\n        [class.nice-horizontal-navigation-item-has-subtitle]=\"!!item.subtitle\"\n        [ngClass]=\"item.classes?.wrapper\"\n    >\n        <div\n            class=\"nice-horizontal-navigation-item\"\n            [ngClass]=\"{\n                'nice-horizontal-navigation-item-disabled': item.disabled,\n                'nice-horizontal-navigation-item-active-forced': item.active\n            }\">\n\n            <!-- Icon -->\n            <mat-icon\n                class=\"nice-vertical-navigation-item-icon\"\n                [ngClass]=\"item.classes?.icon\"\n                *ngIf=\"item.icon && item.iconType === 'material'\"\n            >\n                {{ item.icon }}\n            </mat-icon>\n\n            <span class=\"nice-vertical-navigation-item-icon\" [ngClass]=\"item.icon\" *ngIf=\"item.icon && item.iconType == 'fontawesome'\"></span>\n\n            <mat-icon\n                class=\"nice-vertical-navigation-item-icon\"\n                [ngClass]=\"item.classes?.icon\"\n                [svgIcon]=\"item.icon\"\n                *ngIf=\"item.icon && item.iconType === 'svg'\"\n            ></mat-icon>\n\n            <!-- Title & Subtitle -->\n            <div class=\"nice-horizontal-navigation-item-title-wrapper\">\n                <div class=\"nice-horizontal-navigation-item-title\">\n                    <span [ngClass]=\"item.classes?.title\">\n                        {{ item.title | translate }}\n                    </span>\n                </div>\n                <div\n                    class=\"nice-horizontal-navigation-item-subtitle text-hint\"\n                    *ngIf=\"item.subtitle\"\n                >\n                    <span [ngClass]=\"item.classes?.subtitle\">\n                        {{ item.subtitle | translate }}\n                    </span>\n                </div>\n            </div>\n\n            <!-- Badge -->\n            <div\n                class=\"nice-horizontal-navigation-item-badge\"\n                *ngIf=\"item.badge\">\n                <div\n                    class=\"nice-horizontal-navigation-item-badge-content\"\n                    [ngClass]=\"item.badge.classes\"\n                >\n                    {{ item.badge.title | translate }}\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: NiceNavigationService }]; }, propDecorators: { child: [{
                 type: Input
             }], item: [{
@@ -7919,6 +7928,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImpor
             }], matMenu: [{
                 type: ViewChild,
                 args: ["matMenu", { static: true }]
+            }], showTooltips: [{
+                type: Input
+            }], tooltipPosition: [{
+                type: Input
             }] } });
 
 class NiceHorizontalNavigationSpacerItemComponent {
@@ -7972,6 +7985,8 @@ class NiceHorizontalNavigationComponent extends NiceNavigationComponent {
     constructor(_changeDetectorRef, _niceNavigationService, _niceUtilsService) {
         super(_changeDetectorRef, _niceNavigationService, _niceUtilsService);
         this.name = this._niceUtilsService.randomId();
+        this.showTooltips = false;
+        this.tooltipPosition = "after";
     }
     set navigation(navigation) {
         this._navigation = navigation;
@@ -7982,12 +7997,16 @@ class NiceHorizontalNavigationComponent extends NiceNavigationComponent {
     }
 }
 NiceHorizontalNavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceHorizontalNavigationComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: NiceNavigationService }, { token: NiceUtilsService }], target: i0.ɵɵFactoryTarget.Component });
-NiceHorizontalNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: NiceHorizontalNavigationComponent, selector: "nice-horizontal-navigation", inputs: { name: "name", navigation: "navigation" }, exportAs: ["niceHorizontalNavigation"], usesInheritance: true, ngImport: i0, template: "<div class=\"nice-horizontal-navigation-wrapper\">\n    <ng-container *ngFor=\"let item of navigation\">\n        <!-- Skip the hidden items -->\n        <ng-container *ngIf=\"!(item | niceShouldHide | async)\">\n            <!-- Basic -->\n            <nice-horizontal-navigation-basic-item\n                class=\"nice-horizontal-navigation-menu-item\"\n                *ngIf=\"item.type === 'basic'\"\n                [item]=\"item\"\n                [name]=\"name\"\n            ></nice-horizontal-navigation-basic-item>\n\n            <!-- Branch: aside, collapsable, group -->\n            <nice-horizontal-navigation-branch-item\n                class=\"nice-horizontal-navigation-menu-item\"\n                *ngIf=\"item.type === 'aside' || item.type === 'collapsable' || item.type === 'group'\"\n                [item]=\"item\"\n                [name]=\"name\"\n            ></nice-horizontal-navigation-branch-item>\n\n            <!-- Spacer -->\n            <nice-horizontal-navigation-spacer-item\n                class=\"nice-horizontal-navigation-menu-item\"\n                *ngIf=\"item.type === 'spacer'\"\n                [item]=\"item\"\n                [name]=\"name\"\n            ></nice-horizontal-navigation-spacer-item>\n        </ng-container>\n    </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NiceHorizontalNavigationBasicItemComponent, selector: "nice-horizontal-navigation-basic-item", inputs: ["item", "name"] }, { kind: "component", type: NiceHorizontalNavigationBranchItemComponent, selector: "nice-horizontal-navigation-branch-item", inputs: ["child", "item", "name"] }, { kind: "component", type: NiceHorizontalNavigationSpacerItemComponent, selector: "nice-horizontal-navigation-spacer-item", inputs: ["item", "name"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: NiceShouldHidePipe, name: "niceShouldHide" }], animations: niceAnimations, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+NiceHorizontalNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: NiceHorizontalNavigationComponent, selector: "nice-horizontal-navigation", inputs: { name: "name", showTooltips: "showTooltips", tooltipPosition: "tooltipPosition", navigation: "navigation" }, exportAs: ["niceHorizontalNavigation"], usesInheritance: true, ngImport: i0, template: "<div class=\"nice-horizontal-navigation-wrapper\">\n    <ng-container *ngFor=\"let item of navigation\">\n        <!-- Skip the hidden items -->\n        <ng-container *ngIf=\"!(item | niceShouldHide | async)\">\n            <!-- Basic -->\n            <nice-horizontal-navigation-basic-item\n                class=\"nice-horizontal-navigation-menu-item\"\n                *ngIf=\"item.type === 'basic'\"\n                [item]=\"item\"\n                [name]=\"name\"\n                [showTooltips]=\"showTooltips\"\n                [tooltipPosition]=\"tooltipPosition\"\n            ></nice-horizontal-navigation-basic-item>\n\n            <!-- Branch: aside, collapsable, group -->\n            <nice-horizontal-navigation-branch-item\n                class=\"nice-horizontal-navigation-menu-item\"\n                *ngIf=\"item.type === 'aside' || item.type === 'collapsable' || item.type === 'group'\"\n                [item]=\"item\"\n                [name]=\"name\"\n                [showTooltips]=\"showTooltips\"\n                [tooltipPosition]=\"tooltipPosition\"\n            ></nice-horizontal-navigation-branch-item>\n\n            <!-- Spacer -->\n            <nice-horizontal-navigation-spacer-item\n                class=\"nice-horizontal-navigation-menu-item\"\n                *ngIf=\"item.type === 'spacer'\"\n                [item]=\"item\"\n                [name]=\"name\"\n            ></nice-horizontal-navigation-spacer-item>\n        </ng-container>\n    </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NiceHorizontalNavigationBasicItemComponent, selector: "nice-horizontal-navigation-basic-item", inputs: ["item", "name", "showTooltips", "tooltipPosition"] }, { kind: "component", type: NiceHorizontalNavigationBranchItemComponent, selector: "nice-horizontal-navigation-branch-item", inputs: ["child", "item", "name", "showTooltips", "tooltipPosition"] }, { kind: "component", type: NiceHorizontalNavigationSpacerItemComponent, selector: "nice-horizontal-navigation-spacer-item", inputs: ["item", "name"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: NiceShouldHidePipe, name: "niceShouldHide" }], animations: niceAnimations, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceHorizontalNavigationComponent, decorators: [{
             type: Component,
-            args: [{ selector: "nice-horizontal-navigation", animations: niceAnimations, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: "niceHorizontalNavigation", template: "<div class=\"nice-horizontal-navigation-wrapper\">\n    <ng-container *ngFor=\"let item of navigation\">\n        <!-- Skip the hidden items -->\n        <ng-container *ngIf=\"!(item | niceShouldHide | async)\">\n            <!-- Basic -->\n            <nice-horizontal-navigation-basic-item\n                class=\"nice-horizontal-navigation-menu-item\"\n                *ngIf=\"item.type === 'basic'\"\n                [item]=\"item\"\n                [name]=\"name\"\n            ></nice-horizontal-navigation-basic-item>\n\n            <!-- Branch: aside, collapsable, group -->\n            <nice-horizontal-navigation-branch-item\n                class=\"nice-horizontal-navigation-menu-item\"\n                *ngIf=\"item.type === 'aside' || item.type === 'collapsable' || item.type === 'group'\"\n                [item]=\"item\"\n                [name]=\"name\"\n            ></nice-horizontal-navigation-branch-item>\n\n            <!-- Spacer -->\n            <nice-horizontal-navigation-spacer-item\n                class=\"nice-horizontal-navigation-menu-item\"\n                *ngIf=\"item.type === 'spacer'\"\n                [item]=\"item\"\n                [name]=\"name\"\n            ></nice-horizontal-navigation-spacer-item>\n        </ng-container>\n    </ng-container>\n</div>\n" }]
+            args: [{ selector: "nice-horizontal-navigation", animations: niceAnimations, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: "niceHorizontalNavigation", template: "<div class=\"nice-horizontal-navigation-wrapper\">\n    <ng-container *ngFor=\"let item of navigation\">\n        <!-- Skip the hidden items -->\n        <ng-container *ngIf=\"!(item | niceShouldHide | async)\">\n            <!-- Basic -->\n            <nice-horizontal-navigation-basic-item\n                class=\"nice-horizontal-navigation-menu-item\"\n                *ngIf=\"item.type === 'basic'\"\n                [item]=\"item\"\n                [name]=\"name\"\n                [showTooltips]=\"showTooltips\"\n                [tooltipPosition]=\"tooltipPosition\"\n            ></nice-horizontal-navigation-basic-item>\n\n            <!-- Branch: aside, collapsable, group -->\n            <nice-horizontal-navigation-branch-item\n                class=\"nice-horizontal-navigation-menu-item\"\n                *ngIf=\"item.type === 'aside' || item.type === 'collapsable' || item.type === 'group'\"\n                [item]=\"item\"\n                [name]=\"name\"\n                [showTooltips]=\"showTooltips\"\n                [tooltipPosition]=\"tooltipPosition\"\n            ></nice-horizontal-navigation-branch-item>\n\n            <!-- Spacer -->\n            <nice-horizontal-navigation-spacer-item\n                class=\"nice-horizontal-navigation-menu-item\"\n                *ngIf=\"item.type === 'spacer'\"\n                [item]=\"item\"\n                [name]=\"name\"\n            ></nice-horizontal-navigation-spacer-item>\n        </ng-container>\n    </ng-container>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: NiceNavigationService }, { type: NiceUtilsService }]; }, propDecorators: { name: [{
                 type: Input
+            }], showTooltips: [{
+                type: Input
+            }], tooltipPosition: [{
+                type: Input
             }], navigation: [{
                 type: Input
             }] } });
@@ -8551,6 +8570,8 @@ class NiceVerticalNavigationBasicItemComponent {
         this._route = _route;
         this._router = _router;
         this._unsubscribeAll = new Subject();
+        this.showTooltips = false;
+        this.tooltipPosition = "after";
         this.itemActive$ = this._route.url.pipe(map(() => {
             const url = this._router.url.split("?").shift();
             if (this.item.exactMatch === true) {
@@ -8584,14 +8605,18 @@ class NiceVerticalNavigationBasicItemComponent {
     }
 }
 NiceVerticalNavigationBasicItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceVerticalNavigationBasicItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: NiceNavigationService }, { token: NiceUtilsService }, { token: i1$b.ActivatedRoute }, { token: i1$b.Router }], target: i0.ɵɵFactoryTarget.Component });
-NiceVerticalNavigationBasicItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: NiceVerticalNavigationBasicItemComponent, selector: "nice-vertical-navigation-basic-item", inputs: { item: "item", name: "name" }, ngImport: i0, template: "<!-- Item wrapper -->\n<div\n    class=\"nice-vertical-navigation-item-wrapper\"\n    [class.nice-vertical-navigation-item-has-subtitle]=\"!!item.subtitle\"\n    [ngClass]=\"item.classes?.wrapper\"\n>\n\n    <!-- Item with an internal link -->\n    <a\n        class=\"nice-vertical-navigation-item\"\n        *ngIf=\"item.link && !item.externalLink && !item.function && !item.disabled\"\n        [ngClass]=\"{'nice-vertical-navigation-item-active-forced': item.active}\"\n        [routerLink]=\"[item.link]\"\n        [routerLinkActive]=\"'nice-vertical-navigation-item-active'\"\n        [routerLinkActiveOptions]=\"{exact: item.exactMatch || false}\"\n        [queryParams]=\"item?.queryParams\"\n        [state]=\"item?.state\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </a>\n\n    <!-- Item with an external link -->\n    <a\n        class=\"nice-vertical-navigation-item\"\n        *ngIf=\"item.link && item.externalLink && !item.function && !item.disabled\"\n        [href]=\"item.link\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </a>\n\n    <!-- Item with a function -->\n    <div\n        class=\"nice-vertical-navigation-item\"\n        *ngIf=\"!item.link && item.function && !item.disabled\"\n        [ngClass]=\"{'nice-vertical-navigation-item-active-forced': item.active}\"\n        (click)=\"item.function(item)\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </div>\n\n    <!-- Item with an internal link and function -->\n    <a\n        class=\"nice-vertical-navigation-item\"\n        *ngIf=\"item.link && !item.externalLink && item.function && !item.disabled\"\n        [ngClass]=\"{'nice-vertical-navigation-item-active-forced': item.active}\"\n        [routerLink]=\"[item.link]\"\n        [routerLinkActive]=\"'nice-vertical-navigation-item-active'\"\n        [routerLinkActiveOptions]=\"{exact: item.exactMatch || false}\"\n        (click)=\"item.function(item)\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </a>\n\n    <!-- Item with an external link and function -->\n    <a\n        class=\"nice-vertical-navigation-item\"\n        *ngIf=\"item.link && item.externalLink && item.function && !item.disabled\"\n        [href]=\"item.link\"\n        (click)=\"item.function(item)\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </a>\n\n    <!-- Item with a no link and no function -->\n    <div\n        class=\"nice-vertical-navigation-item\"\n        *ngIf=\"!item.link && !item.function && !item.disabled\"\n        [ngClass]=\"{'nice-vertical-navigation-item-active-forced': item.active}\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </div>\n\n    <!-- Item is disabled -->\n    <div\n        class=\"nice-vertical-navigation-item nice-vertical-navigation-item-disabled\"\n        *ngIf=\"item.disabled\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </div>\n\n</div>\n\n<!-- Item template -->\n<ng-template #itemTemplate>\n    <ng-container *ngIf=\"{ showHint: item | niceShouldShowHint | async } as ctx\">\n        <!-- Icon -->\n        <div class=\"nice-vertical-navigation-item-icon-wrapper\">\n            <ng-container *ngIf=\"itemActive$ | async; else notActive\">\n                <mat-icon\n                    class=\"nice-vertical-navigation-item-icon\"\n                    [ngClass]=\"item.classes?.icon\"\n                    *ngIf=\"item.icon && item.iconType === 'material'\"\n                >\n                    {{ item.activeIcon || item.icon }}\n                </mat-icon>\n\n                <i class=\"nice-vertical-navigation-item-icon fontawesome\" [ngClass]=\"item.activeIcon || item.icon\" *ngIf=\"item.icon && item.iconType == 'fontawesome'\"></i>\n\n                <mat-icon\n                    class=\"nice-vertical-navigation-item-icon\"\n                    [ngClass]=\"item.classes?.icon\"\n                    [svgIcon]=\"item.activeIcon || item.icon\"\n                    *ngIf=\"item.icon && item.iconType == 'svg'\"\n                ></mat-icon>\n            </ng-container>\n\n            <ng-template #notActive>\n                <mat-icon\n                    class=\"nice-vertical-navigation-item-icon\"\n                    [ngClass]=\"item.classes?.icon\"\n                    *ngIf=\"item.icon && item.iconType === 'material'\"\n                >\n                    {{ item.icon }}\n                </mat-icon>\n\n                <i class=\"nice-vertical-navigation-item-icon fontawesome\" [ngClass]=\"item.icon\" *ngIf=\"item.icon && item.iconType == 'fontawesome'\"></i>\n\n                <mat-icon\n                    class=\"nice-vertical-navigation-item-icon\"\n                    [ngClass]=\"item.classes?.icon\"\n                    [svgIcon]=\"item.icon\"\n                    *ngIf=\"item.icon && item.iconType == 'svg'\"\n                ></mat-icon>\n            </ng-template>\n\n            <div *ngIf=\"ctx.showHint && item.icon\" class=\"nice-vertical-navigation-hint\"></div>\n        </div>\n\n        <!-- Title & Subtitle -->\n        <div class=\"nice-vertical-navigation-item-title-wrapper\">\n            <div class=\"nice-vertical-navigation-item-title\" niceShowHint [shouldShow]=\"ctx.showHint\" [item]=\"item\">\n                <span [ngClass]=\"item.classes?.title\">\n                    {{ item.title | translate }}\n                </span>\n\n                <div *ngIf=\"ctx.showHint\" class=\"nice-vertical-navigation-hint\"></div>\n            </div>\n            <div\n                class=\"nice-vertical-navigation-item-subtitle\"\n                *ngIf=\"item.subtitle\"\n            >\n                <span [ngClass]=\"item.classes?.subtitle\">\n                    {{ item.subtitle | translate }}\n                </span>\n            </div>\n        </div>\n\n        <!-- Badge -->\n        <div\n            class=\"nice-vertical-navigation-item-badge\"\n            *ngIf=\"item.badge\"\n        >\n            <div\n                class=\"nice-vertical-navigation-item-badge-content\"\n                [ngClass]=\"item.badge.classes\"\n            >\n                {{ item.badge.title | translate }}\n            </div>\n        </div>\n    </ng-container>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$b.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$b.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NiceShowHintDirective, selector: "[niceShowHint]", inputs: ["shouldShow", "item"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: NiceShouldShowHintPipe, name: "niceShouldShowHint" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NiceVerticalNavigationBasicItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: NiceVerticalNavigationBasicItemComponent, selector: "nice-vertical-navigation-basic-item", inputs: { item: "item", name: "name", showTooltips: "showTooltips", tooltipPosition: "tooltipPosition" }, ngImport: i0, template: "<!-- Item wrapper -->\n<div\n    class=\"nice-vertical-navigation-item-wrapper\"\n    matTooltipClass=\"nice-vertical-navigation-item-tooltips\"\n    [class.nice-vertical-navigation-item-has-subtitle]=\"!!item.subtitle\"\n    [ngClass]=\"item.classes?.wrapper\"\n    [matTooltip]=\"item.tooltip | translate\"\n    [matTooltipDisabled]=\"!showTooltips\"\n    [matTooltipPosition]=\"tooltipPosition\"\n>\n\n    <!-- Item with an internal link -->\n    <a\n        class=\"nice-vertical-navigation-item\"\n        *ngIf=\"item.link && !item.externalLink && !item.function && !item.disabled\"\n        [ngClass]=\"{'nice-vertical-navigation-item-active-forced': item.active}\"\n        [routerLink]=\"[item.link]\"\n        [routerLinkActive]=\"'nice-vertical-navigation-item-active'\"\n        [routerLinkActiveOptions]=\"{exact: item.exactMatch || false}\"\n        [queryParams]=\"item?.queryParams\"\n        [state]=\"item?.state\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </a>\n\n    <!-- Item with an external link -->\n    <a\n        class=\"nice-vertical-navigation-item\"\n        *ngIf=\"item.link && item.externalLink && !item.function && !item.disabled\"\n        [href]=\"item.link\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </a>\n\n    <!-- Item with a function -->\n    <div\n        class=\"nice-vertical-navigation-item\"\n        *ngIf=\"!item.link && item.function && !item.disabled\"\n        [ngClass]=\"{'nice-vertical-navigation-item-active-forced': item.active}\"\n        (click)=\"item.function(item)\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </div>\n\n    <!-- Item with an internal link and function -->\n    <a\n        class=\"nice-vertical-navigation-item\"\n        *ngIf=\"item.link && !item.externalLink && item.function && !item.disabled\"\n        [ngClass]=\"{'nice-vertical-navigation-item-active-forced': item.active}\"\n        [routerLink]=\"[item.link]\"\n        [routerLinkActive]=\"'nice-vertical-navigation-item-active'\"\n        [routerLinkActiveOptions]=\"{exact: item.exactMatch || false}\"\n        (click)=\"item.function(item)\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </a>\n\n    <!-- Item with an external link and function -->\n    <a\n        class=\"nice-vertical-navigation-item\"\n        *ngIf=\"item.link && item.externalLink && item.function && !item.disabled\"\n        [href]=\"item.link\"\n        (click)=\"item.function(item)\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </a>\n\n    <!-- Item with a no link and no function -->\n    <div\n        class=\"nice-vertical-navigation-item\"\n        *ngIf=\"!item.link && !item.function && !item.disabled\"\n        [ngClass]=\"{'nice-vertical-navigation-item-active-forced': item.active}\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </div>\n\n    <!-- Item is disabled -->\n    <div\n        class=\"nice-vertical-navigation-item nice-vertical-navigation-item-disabled\"\n        *ngIf=\"item.disabled\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </div>\n\n</div>\n\n<!-- Item template -->\n<ng-template #itemTemplate>\n    <ng-container *ngIf=\"{ showHint: item | niceShouldShowHint | async } as ctx\">\n        <!-- Icon -->\n        <div class=\"nice-vertical-navigation-item-icon-wrapper\">\n            <ng-container *ngIf=\"itemActive$ | async; else notActive\">\n                <mat-icon\n                    class=\"nice-vertical-navigation-item-icon\"\n                    [ngClass]=\"item.classes?.icon\"\n                    *ngIf=\"item.icon && item.iconType === 'material'\"\n                >\n                    {{ item.activeIcon || item.icon }}\n                </mat-icon>\n\n                <i class=\"nice-vertical-navigation-item-icon fontawesome\" [ngClass]=\"item.activeIcon || item.icon\" *ngIf=\"item.icon && item.iconType == 'fontawesome'\"></i>\n\n                <mat-icon\n                    class=\"nice-vertical-navigation-item-icon\"\n                    [ngClass]=\"item.classes?.icon\"\n                    [svgIcon]=\"item.activeIcon || item.icon\"\n                    *ngIf=\"item.icon && item.iconType == 'svg'\"\n                ></mat-icon>\n            </ng-container>\n\n            <ng-template #notActive>\n                <mat-icon\n                    class=\"nice-vertical-navigation-item-icon\"\n                    [ngClass]=\"item.classes?.icon\"\n                    *ngIf=\"item.icon && item.iconType === 'material'\"\n                >\n                    {{ item.icon }}\n                </mat-icon>\n\n                <i class=\"nice-vertical-navigation-item-icon fontawesome\" [ngClass]=\"item.icon\" *ngIf=\"item.icon && item.iconType == 'fontawesome'\"></i>\n\n                <mat-icon\n                    class=\"nice-vertical-navigation-item-icon\"\n                    [ngClass]=\"item.classes?.icon\"\n                    [svgIcon]=\"item.icon\"\n                    *ngIf=\"item.icon && item.iconType == 'svg'\"\n                ></mat-icon>\n            </ng-template>\n\n            <div *ngIf=\"ctx.showHint && item.icon\" class=\"nice-vertical-navigation-hint\"></div>\n        </div>\n\n        <!-- Title & Subtitle -->\n        <div class=\"nice-vertical-navigation-item-title-wrapper\">\n            <div class=\"nice-vertical-navigation-item-title\" niceShowHint [shouldShow]=\"ctx.showHint\" [item]=\"item\">\n                <span [ngClass]=\"item.classes?.title\">\n                    {{ item.title | translate }}\n                </span>\n\n                <div *ngIf=\"ctx.showHint\" class=\"nice-vertical-navigation-hint\"></div>\n            </div>\n            <div\n                class=\"nice-vertical-navigation-item-subtitle\"\n                *ngIf=\"item.subtitle\"\n            >\n                <span [ngClass]=\"item.classes?.subtitle\">\n                    {{ item.subtitle | translate }}\n                </span>\n            </div>\n        </div>\n\n        <!-- Badge -->\n        <div\n            class=\"nice-vertical-navigation-item-badge\"\n            *ngIf=\"item.badge\"\n        >\n            <div\n                class=\"nice-vertical-navigation-item-badge-content\"\n                [ngClass]=\"item.badge.classes\"\n            >\n                {{ item.badge.title | translate }}\n            </div>\n        </div>\n    </ng-container>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$b.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$b.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: NiceShowHintDirective, selector: "[niceShowHint]", inputs: ["shouldShow", "item"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: NiceShouldShowHintPipe, name: "niceShouldShowHint" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceVerticalNavigationBasicItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: "nice-vertical-navigation-basic-item", changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Item wrapper -->\n<div\n    class=\"nice-vertical-navigation-item-wrapper\"\n    [class.nice-vertical-navigation-item-has-subtitle]=\"!!item.subtitle\"\n    [ngClass]=\"item.classes?.wrapper\"\n>\n\n    <!-- Item with an internal link -->\n    <a\n        class=\"nice-vertical-navigation-item\"\n        *ngIf=\"item.link && !item.externalLink && !item.function && !item.disabled\"\n        [ngClass]=\"{'nice-vertical-navigation-item-active-forced': item.active}\"\n        [routerLink]=\"[item.link]\"\n        [routerLinkActive]=\"'nice-vertical-navigation-item-active'\"\n        [routerLinkActiveOptions]=\"{exact: item.exactMatch || false}\"\n        [queryParams]=\"item?.queryParams\"\n        [state]=\"item?.state\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </a>\n\n    <!-- Item with an external link -->\n    <a\n        class=\"nice-vertical-navigation-item\"\n        *ngIf=\"item.link && item.externalLink && !item.function && !item.disabled\"\n        [href]=\"item.link\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </a>\n\n    <!-- Item with a function -->\n    <div\n        class=\"nice-vertical-navigation-item\"\n        *ngIf=\"!item.link && item.function && !item.disabled\"\n        [ngClass]=\"{'nice-vertical-navigation-item-active-forced': item.active}\"\n        (click)=\"item.function(item)\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </div>\n\n    <!-- Item with an internal link and function -->\n    <a\n        class=\"nice-vertical-navigation-item\"\n        *ngIf=\"item.link && !item.externalLink && item.function && !item.disabled\"\n        [ngClass]=\"{'nice-vertical-navigation-item-active-forced': item.active}\"\n        [routerLink]=\"[item.link]\"\n        [routerLinkActive]=\"'nice-vertical-navigation-item-active'\"\n        [routerLinkActiveOptions]=\"{exact: item.exactMatch || false}\"\n        (click)=\"item.function(item)\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </a>\n\n    <!-- Item with an external link and function -->\n    <a\n        class=\"nice-vertical-navigation-item\"\n        *ngIf=\"item.link && item.externalLink && item.function && !item.disabled\"\n        [href]=\"item.link\"\n        (click)=\"item.function(item)\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </a>\n\n    <!-- Item with a no link and no function -->\n    <div\n        class=\"nice-vertical-navigation-item\"\n        *ngIf=\"!item.link && !item.function && !item.disabled\"\n        [ngClass]=\"{'nice-vertical-navigation-item-active-forced': item.active}\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </div>\n\n    <!-- Item is disabled -->\n    <div\n        class=\"nice-vertical-navigation-item nice-vertical-navigation-item-disabled\"\n        *ngIf=\"item.disabled\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </div>\n\n</div>\n\n<!-- Item template -->\n<ng-template #itemTemplate>\n    <ng-container *ngIf=\"{ showHint: item | niceShouldShowHint | async } as ctx\">\n        <!-- Icon -->\n        <div class=\"nice-vertical-navigation-item-icon-wrapper\">\n            <ng-container *ngIf=\"itemActive$ | async; else notActive\">\n                <mat-icon\n                    class=\"nice-vertical-navigation-item-icon\"\n                    [ngClass]=\"item.classes?.icon\"\n                    *ngIf=\"item.icon && item.iconType === 'material'\"\n                >\n                    {{ item.activeIcon || item.icon }}\n                </mat-icon>\n\n                <i class=\"nice-vertical-navigation-item-icon fontawesome\" [ngClass]=\"item.activeIcon || item.icon\" *ngIf=\"item.icon && item.iconType == 'fontawesome'\"></i>\n\n                <mat-icon\n                    class=\"nice-vertical-navigation-item-icon\"\n                    [ngClass]=\"item.classes?.icon\"\n                    [svgIcon]=\"item.activeIcon || item.icon\"\n                    *ngIf=\"item.icon && item.iconType == 'svg'\"\n                ></mat-icon>\n            </ng-container>\n\n            <ng-template #notActive>\n                <mat-icon\n                    class=\"nice-vertical-navigation-item-icon\"\n                    [ngClass]=\"item.classes?.icon\"\n                    *ngIf=\"item.icon && item.iconType === 'material'\"\n                >\n                    {{ item.icon }}\n                </mat-icon>\n\n                <i class=\"nice-vertical-navigation-item-icon fontawesome\" [ngClass]=\"item.icon\" *ngIf=\"item.icon && item.iconType == 'fontawesome'\"></i>\n\n                <mat-icon\n                    class=\"nice-vertical-navigation-item-icon\"\n                    [ngClass]=\"item.classes?.icon\"\n                    [svgIcon]=\"item.icon\"\n                    *ngIf=\"item.icon && item.iconType == 'svg'\"\n                ></mat-icon>\n            </ng-template>\n\n            <div *ngIf=\"ctx.showHint && item.icon\" class=\"nice-vertical-navigation-hint\"></div>\n        </div>\n\n        <!-- Title & Subtitle -->\n        <div class=\"nice-vertical-navigation-item-title-wrapper\">\n            <div class=\"nice-vertical-navigation-item-title\" niceShowHint [shouldShow]=\"ctx.showHint\" [item]=\"item\">\n                <span [ngClass]=\"item.classes?.title\">\n                    {{ item.title | translate }}\n                </span>\n\n                <div *ngIf=\"ctx.showHint\" class=\"nice-vertical-navigation-hint\"></div>\n            </div>\n            <div\n                class=\"nice-vertical-navigation-item-subtitle\"\n                *ngIf=\"item.subtitle\"\n            >\n                <span [ngClass]=\"item.classes?.subtitle\">\n                    {{ item.subtitle | translate }}\n                </span>\n            </div>\n        </div>\n\n        <!-- Badge -->\n        <div\n            class=\"nice-vertical-navigation-item-badge\"\n            *ngIf=\"item.badge\"\n        >\n            <div\n                class=\"nice-vertical-navigation-item-badge-content\"\n                [ngClass]=\"item.badge.classes\"\n            >\n                {{ item.badge.title | translate }}\n            </div>\n        </div>\n    </ng-container>\n</ng-template>\n" }]
+            args: [{ selector: "nice-vertical-navigation-basic-item", changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Item wrapper -->\n<div\n    class=\"nice-vertical-navigation-item-wrapper\"\n    matTooltipClass=\"nice-vertical-navigation-item-tooltips\"\n    [class.nice-vertical-navigation-item-has-subtitle]=\"!!item.subtitle\"\n    [ngClass]=\"item.classes?.wrapper\"\n    [matTooltip]=\"item.tooltip | translate\"\n    [matTooltipDisabled]=\"!showTooltips\"\n    [matTooltipPosition]=\"tooltipPosition\"\n>\n\n    <!-- Item with an internal link -->\n    <a\n        class=\"nice-vertical-navigation-item\"\n        *ngIf=\"item.link && !item.externalLink && !item.function && !item.disabled\"\n        [ngClass]=\"{'nice-vertical-navigation-item-active-forced': item.active}\"\n        [routerLink]=\"[item.link]\"\n        [routerLinkActive]=\"'nice-vertical-navigation-item-active'\"\n        [routerLinkActiveOptions]=\"{exact: item.exactMatch || false}\"\n        [queryParams]=\"item?.queryParams\"\n        [state]=\"item?.state\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </a>\n\n    <!-- Item with an external link -->\n    <a\n        class=\"nice-vertical-navigation-item\"\n        *ngIf=\"item.link && item.externalLink && !item.function && !item.disabled\"\n        [href]=\"item.link\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </a>\n\n    <!-- Item with a function -->\n    <div\n        class=\"nice-vertical-navigation-item\"\n        *ngIf=\"!item.link && item.function && !item.disabled\"\n        [ngClass]=\"{'nice-vertical-navigation-item-active-forced': item.active}\"\n        (click)=\"item.function(item)\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </div>\n\n    <!-- Item with an internal link and function -->\n    <a\n        class=\"nice-vertical-navigation-item\"\n        *ngIf=\"item.link && !item.externalLink && item.function && !item.disabled\"\n        [ngClass]=\"{'nice-vertical-navigation-item-active-forced': item.active}\"\n        [routerLink]=\"[item.link]\"\n        [routerLinkActive]=\"'nice-vertical-navigation-item-active'\"\n        [routerLinkActiveOptions]=\"{exact: item.exactMatch || false}\"\n        (click)=\"item.function(item)\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </a>\n\n    <!-- Item with an external link and function -->\n    <a\n        class=\"nice-vertical-navigation-item\"\n        *ngIf=\"item.link && item.externalLink && item.function && !item.disabled\"\n        [href]=\"item.link\"\n        (click)=\"item.function(item)\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </a>\n\n    <!-- Item with a no link and no function -->\n    <div\n        class=\"nice-vertical-navigation-item\"\n        *ngIf=\"!item.link && !item.function && !item.disabled\"\n        [ngClass]=\"{'nice-vertical-navigation-item-active-forced': item.active}\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </div>\n\n    <!-- Item is disabled -->\n    <div\n        class=\"nice-vertical-navigation-item nice-vertical-navigation-item-disabled\"\n        *ngIf=\"item.disabled\">\n        <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n    </div>\n\n</div>\n\n<!-- Item template -->\n<ng-template #itemTemplate>\n    <ng-container *ngIf=\"{ showHint: item | niceShouldShowHint | async } as ctx\">\n        <!-- Icon -->\n        <div class=\"nice-vertical-navigation-item-icon-wrapper\">\n            <ng-container *ngIf=\"itemActive$ | async; else notActive\">\n                <mat-icon\n                    class=\"nice-vertical-navigation-item-icon\"\n                    [ngClass]=\"item.classes?.icon\"\n                    *ngIf=\"item.icon && item.iconType === 'material'\"\n                >\n                    {{ item.activeIcon || item.icon }}\n                </mat-icon>\n\n                <i class=\"nice-vertical-navigation-item-icon fontawesome\" [ngClass]=\"item.activeIcon || item.icon\" *ngIf=\"item.icon && item.iconType == 'fontawesome'\"></i>\n\n                <mat-icon\n                    class=\"nice-vertical-navigation-item-icon\"\n                    [ngClass]=\"item.classes?.icon\"\n                    [svgIcon]=\"item.activeIcon || item.icon\"\n                    *ngIf=\"item.icon && item.iconType == 'svg'\"\n                ></mat-icon>\n            </ng-container>\n\n            <ng-template #notActive>\n                <mat-icon\n                    class=\"nice-vertical-navigation-item-icon\"\n                    [ngClass]=\"item.classes?.icon\"\n                    *ngIf=\"item.icon && item.iconType === 'material'\"\n                >\n                    {{ item.icon }}\n                </mat-icon>\n\n                <i class=\"nice-vertical-navigation-item-icon fontawesome\" [ngClass]=\"item.icon\" *ngIf=\"item.icon && item.iconType == 'fontawesome'\"></i>\n\n                <mat-icon\n                    class=\"nice-vertical-navigation-item-icon\"\n                    [ngClass]=\"item.classes?.icon\"\n                    [svgIcon]=\"item.icon\"\n                    *ngIf=\"item.icon && item.iconType == 'svg'\"\n                ></mat-icon>\n            </ng-template>\n\n            <div *ngIf=\"ctx.showHint && item.icon\" class=\"nice-vertical-navigation-hint\"></div>\n        </div>\n\n        <!-- Title & Subtitle -->\n        <div class=\"nice-vertical-navigation-item-title-wrapper\">\n            <div class=\"nice-vertical-navigation-item-title\" niceShowHint [shouldShow]=\"ctx.showHint\" [item]=\"item\">\n                <span [ngClass]=\"item.classes?.title\">\n                    {{ item.title | translate }}\n                </span>\n\n                <div *ngIf=\"ctx.showHint\" class=\"nice-vertical-navigation-hint\"></div>\n            </div>\n            <div\n                class=\"nice-vertical-navigation-item-subtitle\"\n                *ngIf=\"item.subtitle\"\n            >\n                <span [ngClass]=\"item.classes?.subtitle\">\n                    {{ item.subtitle | translate }}\n                </span>\n            </div>\n        </div>\n\n        <!-- Badge -->\n        <div\n            class=\"nice-vertical-navigation-item-badge\"\n            *ngIf=\"item.badge\"\n        >\n            <div\n                class=\"nice-vertical-navigation-item-badge-content\"\n                [ngClass]=\"item.badge.classes\"\n            >\n                {{ item.badge.title | translate }}\n            </div>\n        </div>\n    </ng-container>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: NiceNavigationService }, { type: NiceUtilsService }, { type: i1$b.ActivatedRoute }, { type: i1$b.Router }]; }, propDecorators: { item: [{
                 type: Input
             }], name: [{
                 type: Input
+            }], showTooltips: [{
+                type: Input
+            }], tooltipPosition: [{
+                type: Input
             }] } });
 
 class NiceVerticalNavigationDividerItemComponent {
@@ -8691,6 +8716,8 @@ class NiceVerticalNavigationCollapsableItemComponent {
         this._router = _router;
         this._niceNavigationService = _niceNavigationService;
         this._unsubscribeAll = new Subject();
+        this.showTooltips = false;
+        this.tooltipPosition = "after";
         this.isCollapsed = true;
         this.isExpanded = false;
         this.hasChildActivated$ = new BehaviorSubject(false);
@@ -8908,16 +8935,20 @@ class NiceVerticalNavigationCollapsableItemComponent {
     }
 }
 NiceVerticalNavigationCollapsableItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceVerticalNavigationCollapsableItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$b.Router }, { token: NiceNavigationService }], target: i0.ɵɵFactoryTarget.Component });
-NiceVerticalNavigationCollapsableItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: NiceVerticalNavigationCollapsableItemComponent, selector: "nice-vertical-navigation-collapsable-item", inputs: { autoCollapse: "autoCollapse", item: "item", name: "name" }, host: { properties: { "class": "this.classList" } }, ngImport: i0, template: "<div\n    class=\"nice-vertical-navigation-item-wrapper\"\n    [class.nice-vertical-navigation-item-has-subtitle]=\"!!item.subtitle\"\n    [ngClass]=\"item.classes?.wrapper\"\n>\n    <div\n        class=\"nice-vertical-navigation-item\"\n        [ngClass]=\"{ 'nice-vertical-navigation-item-disabled': item.disabled }\"\n        [class.child-activated]=\"hasChildActivated$ | async\"\n        (click)=\"toggleCollapsable()\"\n        *ngIf=\"{ showHint: item.children ?? [] | niceShouldShowHint | async } as ctx\"\n    >\n        <!-- Icon -->\n        <div class=\"nice-vertical-navigation-item-icon-wrapper\" style=\"position: relative\">\n            <mat-icon\n                class=\"nice-vertical-navigation-item-icon\"\n                [ngClass]=\"item.classes?.icon\"\n                *ngIf=\"item.icon && item.iconType === 'material'\"\n            >\n                {{ item.icon }}\n            </mat-icon>\n\n            <i class=\"nice-vertical-navigation-item-icon fontawesome\" [ngClass]=\"item.icon\" *ngIf=\"item.icon && item.iconType == 'fontawesome'\"></i>\n\n            <mat-icon\n                class=\"nice-vertical-navigation-item-icon\"\n                [ngClass]=\"item.classes?.icon\"\n                [svgIcon]=\"item.icon\"\n                *ngIf=\"item.icon && item.iconType == 'svg'\"\n            ></mat-icon>\n\n            <div *ngIf=\"ctx.showHint && item.icon\" class=\"nice-vertical-navigation-hint\"></div>\n        </div>\n\n        <!-- Title & Subtitle -->\n        <div class=\"nice-vertical-navigation-item-title-wrapper\">\n            <div class=\"nice-vertical-navigation-item-title\">\n                <span [ngClass]=\"item.classes?.title\">\n                    {{ item.title | translate }}\n                </span>\n\n                <div *ngIf=\"ctx.showHint && isCollapsed\" class=\"nice-vertical-navigation-hint\"></div>\n            </div>\n            <div\n                class=\"nice-vertical-navigation-item-subtitle\"\n                *ngIf=\"item.subtitle\"\n            >\n                <span [ngClass]=\"item.classes?.subtitle\">\n                    {{ item.subtitle | translate }}\n                </span>\n            </div>\n        </div>\n\n        <!-- Badge -->\n        <div\n            class=\"nice-vertical-navigation-item-badge\"\n            *ngIf=\"item.badge\">\n\n            <div\n                class=\"nice-vertical-navigation-item-badge-content\"\n                [ngClass]=\"item.badge.classes\"\n            >\n                {{ item.badge.title | translate }}\n            </div>\n        </div>\n\n        <!-- Arrow -->\n        <mat-icon class=\"nice-vertical-navigation-item-arrow icon-size-4\">chevron_right</mat-icon>\n    </div>\n</div>\n\n<div\n    class=\"nice-vertical-navigation-item-children\"\n    *ngIf=\"!isCollapsed\"\n    @expandCollapse\n>\n    <ng-container *ngFor=\"let item of item.children; trackBy: trackByFn\">\n        <!-- Skip the hidden items -->\n        <ng-container *ngIf=\"!(item | niceShouldHide | async)\">\n            <!-- Basic -->\n            <nice-vertical-navigation-basic-item\n                *ngIf=\"item.type === 'basic'\"\n                [item]=\"item\"\n                [name]=\"name\"\n            ></nice-vertical-navigation-basic-item>\n\n            <!-- Collapsable -->\n            <nice-vertical-navigation-collapsable-item\n                *ngIf=\"item.type === 'collapsable'\"\n                [item]=\"item\"\n                [name]=\"name\"\n                [autoCollapse]=\"autoCollapse\"\n            ></nice-vertical-navigation-collapsable-item>\n\n            <!-- Divider -->\n            <nice-vertical-navigation-divider-item\n                *ngIf=\"item.type === 'divider'\"\n                [item]=\"item\"\n                [name]=\"name\"\n            ></nice-vertical-navigation-divider-item>\n\n            <!-- Group -->\n<!--            <nice-vertical-navigation-group-item\n                *ngIf=\"item.type === 'group'\"\n                [item]=\"item\"\n                [name]=\"name\"\n            ></nice-vertical-navigation-group-item>-->\n\n            <!-- Spacer -->\n            <nice-vertical-navigation-spacer-item\n                *ngIf=\"item.type === 'spacer'\"\n                [item]=\"item\"\n                [name]=\"name\"\n            ></nice-vertical-navigation-spacer-item>\n        </ng-container>\n    </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NiceVerticalNavigationBasicItemComponent, selector: "nice-vertical-navigation-basic-item", inputs: ["item", "name"] }, { kind: "component", type: NiceVerticalNavigationCollapsableItemComponent, selector: "nice-vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item", "name"] }, { kind: "component", type: NiceVerticalNavigationDividerItemComponent, selector: "nice-vertical-navigation-divider-item", inputs: ["item", "name"] }, { kind: "component", type: NiceVerticalNavigationSpacerItemComponent, selector: "nice-vertical-navigation-spacer-item", inputs: ["item", "name"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: NiceShouldHidePipe, name: "niceShouldHide" }, { kind: "pipe", type: NiceShouldShowHintPipe, name: "niceShouldShowHint" }], animations: niceAnimations, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NiceVerticalNavigationCollapsableItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: NiceVerticalNavigationCollapsableItemComponent, selector: "nice-vertical-navigation-collapsable-item", inputs: { autoCollapse: "autoCollapse", item: "item", name: "name", showTooltips: "showTooltips", tooltipPosition: "tooltipPosition" }, host: { properties: { "class": "this.classList" } }, ngImport: i0, template: "<div\n    class=\"nice-vertical-navigation-item-wrapper\"\n    [class.nice-vertical-navigation-item-has-subtitle]=\"!!item.subtitle\"\n    [ngClass]=\"item.classes?.wrapper\"\n>\n    <div\n        class=\"nice-vertical-navigation-item\"\n        [ngClass]=\"{ 'nice-vertical-navigation-item-disabled': item.disabled }\"\n        [class.child-activated]=\"hasChildActivated$ | async\"\n        (click)=\"toggleCollapsable()\"\n        *ngIf=\"{ showHint: item.children ?? [] | niceShouldShowHint | async } as ctx\"\n    >\n        <!-- Icon -->\n        <div class=\"nice-vertical-navigation-item-icon-wrapper\" style=\"position: relative\">\n            <mat-icon\n                class=\"nice-vertical-navigation-item-icon\"\n                [ngClass]=\"item.classes?.icon\"\n                *ngIf=\"item.icon && item.iconType === 'material'\"\n            >\n                {{ item.icon }}\n            </mat-icon>\n\n            <i class=\"nice-vertical-navigation-item-icon fontawesome\" [ngClass]=\"item.icon\" *ngIf=\"item.icon && item.iconType == 'fontawesome'\"></i>\n\n            <mat-icon\n                class=\"nice-vertical-navigation-item-icon\"\n                [ngClass]=\"item.classes?.icon\"\n                [svgIcon]=\"item.icon\"\n                *ngIf=\"item.icon && item.iconType == 'svg'\"\n            ></mat-icon>\n\n            <div *ngIf=\"ctx.showHint && item.icon\" class=\"nice-vertical-navigation-hint\"></div>\n        </div>\n\n        <!-- Title & Subtitle -->\n        <div class=\"nice-vertical-navigation-item-title-wrapper\">\n            <div class=\"nice-vertical-navigation-item-title\">\n                <span [ngClass]=\"item.classes?.title\">\n                    {{ item.title | translate }}\n                </span>\n\n                <div *ngIf=\"ctx.showHint && isCollapsed\" class=\"nice-vertical-navigation-hint\"></div>\n            </div>\n            <div\n                class=\"nice-vertical-navigation-item-subtitle\"\n                *ngIf=\"item.subtitle\"\n            >\n                <span [ngClass]=\"item.classes?.subtitle\">\n                    {{ item.subtitle | translate }}\n                </span>\n            </div>\n        </div>\n\n        <!-- Badge -->\n        <div\n            class=\"nice-vertical-navigation-item-badge\"\n            *ngIf=\"item.badge\">\n\n            <div\n                class=\"nice-vertical-navigation-item-badge-content\"\n                [ngClass]=\"item.badge.classes\"\n            >\n                {{ item.badge.title | translate }}\n            </div>\n        </div>\n\n        <!-- Arrow -->\n        <mat-icon class=\"nice-vertical-navigation-item-arrow icon-size-4\">chevron_right</mat-icon>\n    </div>\n</div>\n\n<div\n    class=\"nice-vertical-navigation-item-children\"\n    *ngIf=\"!isCollapsed\"\n    @expandCollapse\n>\n    <ng-container *ngFor=\"let item of item.children; trackBy: trackByFn\">\n        <!-- Skip the hidden items -->\n        <ng-container *ngIf=\"!(item | niceShouldHide | async)\">\n            <!-- Basic -->\n            <nice-vertical-navigation-basic-item\n                *ngIf=\"item.type === 'basic'\"\n                [item]=\"item\"\n                [name]=\"name\"\n                [showTooltips]=\"showTooltips\"\n                [tooltipPosition]=\"tooltipPosition\"\n            ></nice-vertical-navigation-basic-item>\n\n            <!-- Collapsable -->\n            <nice-vertical-navigation-collapsable-item\n                *ngIf=\"item.type === 'collapsable'\"\n                [item]=\"item\"\n                [name]=\"name\"\n                [autoCollapse]=\"autoCollapse\"\n                [showTooltips]=\"showTooltips\"\n                [tooltipPosition]=\"tooltipPosition\"\n            ></nice-vertical-navigation-collapsable-item>\n\n            <!-- Divider -->\n            <nice-vertical-navigation-divider-item\n                *ngIf=\"item.type === 'divider'\"\n                [item]=\"item\"\n                [name]=\"name\"\n            ></nice-vertical-navigation-divider-item>\n\n            <!-- Group -->\n<!--            <nice-vertical-navigation-group-item\n                *ngIf=\"item.type === 'group'\"\n                [item]=\"item\"\n                [name]=\"name\"\n            ></nice-vertical-navigation-group-item>-->\n\n            <!-- Spacer -->\n            <nice-vertical-navigation-spacer-item\n                *ngIf=\"item.type === 'spacer'\"\n                [item]=\"item\"\n                [name]=\"name\"\n            ></nice-vertical-navigation-spacer-item>\n        </ng-container>\n    </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NiceVerticalNavigationBasicItemComponent, selector: "nice-vertical-navigation-basic-item", inputs: ["item", "name", "showTooltips", "tooltipPosition"] }, { kind: "component", type: NiceVerticalNavigationCollapsableItemComponent, selector: "nice-vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item", "name", "showTooltips", "tooltipPosition"] }, { kind: "component", type: NiceVerticalNavigationDividerItemComponent, selector: "nice-vertical-navigation-divider-item", inputs: ["item", "name"] }, { kind: "component", type: NiceVerticalNavigationSpacerItemComponent, selector: "nice-vertical-navigation-spacer-item", inputs: ["item", "name"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: NiceShouldHidePipe, name: "niceShouldHide" }, { kind: "pipe", type: NiceShouldShowHintPipe, name: "niceShouldShowHint" }], animations: niceAnimations, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceVerticalNavigationCollapsableItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: "nice-vertical-navigation-collapsable-item", animations: niceAnimations, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    class=\"nice-vertical-navigation-item-wrapper\"\n    [class.nice-vertical-navigation-item-has-subtitle]=\"!!item.subtitle\"\n    [ngClass]=\"item.classes?.wrapper\"\n>\n    <div\n        class=\"nice-vertical-navigation-item\"\n        [ngClass]=\"{ 'nice-vertical-navigation-item-disabled': item.disabled }\"\n        [class.child-activated]=\"hasChildActivated$ | async\"\n        (click)=\"toggleCollapsable()\"\n        *ngIf=\"{ showHint: item.children ?? [] | niceShouldShowHint | async } as ctx\"\n    >\n        <!-- Icon -->\n        <div class=\"nice-vertical-navigation-item-icon-wrapper\" style=\"position: relative\">\n            <mat-icon\n                class=\"nice-vertical-navigation-item-icon\"\n                [ngClass]=\"item.classes?.icon\"\n                *ngIf=\"item.icon && item.iconType === 'material'\"\n            >\n                {{ item.icon }}\n            </mat-icon>\n\n            <i class=\"nice-vertical-navigation-item-icon fontawesome\" [ngClass]=\"item.icon\" *ngIf=\"item.icon && item.iconType == 'fontawesome'\"></i>\n\n            <mat-icon\n                class=\"nice-vertical-navigation-item-icon\"\n                [ngClass]=\"item.classes?.icon\"\n                [svgIcon]=\"item.icon\"\n                *ngIf=\"item.icon && item.iconType == 'svg'\"\n            ></mat-icon>\n\n            <div *ngIf=\"ctx.showHint && item.icon\" class=\"nice-vertical-navigation-hint\"></div>\n        </div>\n\n        <!-- Title & Subtitle -->\n        <div class=\"nice-vertical-navigation-item-title-wrapper\">\n            <div class=\"nice-vertical-navigation-item-title\">\n                <span [ngClass]=\"item.classes?.title\">\n                    {{ item.title | translate }}\n                </span>\n\n                <div *ngIf=\"ctx.showHint && isCollapsed\" class=\"nice-vertical-navigation-hint\"></div>\n            </div>\n            <div\n                class=\"nice-vertical-navigation-item-subtitle\"\n                *ngIf=\"item.subtitle\"\n            >\n                <span [ngClass]=\"item.classes?.subtitle\">\n                    {{ item.subtitle | translate }}\n                </span>\n            </div>\n        </div>\n\n        <!-- Badge -->\n        <div\n            class=\"nice-vertical-navigation-item-badge\"\n            *ngIf=\"item.badge\">\n\n            <div\n                class=\"nice-vertical-navigation-item-badge-content\"\n                [ngClass]=\"item.badge.classes\"\n            >\n                {{ item.badge.title | translate }}\n            </div>\n        </div>\n\n        <!-- Arrow -->\n        <mat-icon class=\"nice-vertical-navigation-item-arrow icon-size-4\">chevron_right</mat-icon>\n    </div>\n</div>\n\n<div\n    class=\"nice-vertical-navigation-item-children\"\n    *ngIf=\"!isCollapsed\"\n    @expandCollapse\n>\n    <ng-container *ngFor=\"let item of item.children; trackBy: trackByFn\">\n        <!-- Skip the hidden items -->\n        <ng-container *ngIf=\"!(item | niceShouldHide | async)\">\n            <!-- Basic -->\n            <nice-vertical-navigation-basic-item\n                *ngIf=\"item.type === 'basic'\"\n                [item]=\"item\"\n                [name]=\"name\"\n            ></nice-vertical-navigation-basic-item>\n\n            <!-- Collapsable -->\n            <nice-vertical-navigation-collapsable-item\n                *ngIf=\"item.type === 'collapsable'\"\n                [item]=\"item\"\n                [name]=\"name\"\n                [autoCollapse]=\"autoCollapse\"\n            ></nice-vertical-navigation-collapsable-item>\n\n            <!-- Divider -->\n            <nice-vertical-navigation-divider-item\n                *ngIf=\"item.type === 'divider'\"\n                [item]=\"item\"\n                [name]=\"name\"\n            ></nice-vertical-navigation-divider-item>\n\n            <!-- Group -->\n<!--            <nice-vertical-navigation-group-item\n                *ngIf=\"item.type === 'group'\"\n                [item]=\"item\"\n                [name]=\"name\"\n            ></nice-vertical-navigation-group-item>-->\n\n            <!-- Spacer -->\n            <nice-vertical-navigation-spacer-item\n                *ngIf=\"item.type === 'spacer'\"\n                [item]=\"item\"\n                [name]=\"name\"\n            ></nice-vertical-navigation-spacer-item>\n        </ng-container>\n    </ng-container>\n</div>\n" }]
+            args: [{ selector: "nice-vertical-navigation-collapsable-item", animations: niceAnimations, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    class=\"nice-vertical-navigation-item-wrapper\"\n    [class.nice-vertical-navigation-item-has-subtitle]=\"!!item.subtitle\"\n    [ngClass]=\"item.classes?.wrapper\"\n>\n    <div\n        class=\"nice-vertical-navigation-item\"\n        [ngClass]=\"{ 'nice-vertical-navigation-item-disabled': item.disabled }\"\n        [class.child-activated]=\"hasChildActivated$ | async\"\n        (click)=\"toggleCollapsable()\"\n        *ngIf=\"{ showHint: item.children ?? [] | niceShouldShowHint | async } as ctx\"\n    >\n        <!-- Icon -->\n        <div class=\"nice-vertical-navigation-item-icon-wrapper\" style=\"position: relative\">\n            <mat-icon\n                class=\"nice-vertical-navigation-item-icon\"\n                [ngClass]=\"item.classes?.icon\"\n                *ngIf=\"item.icon && item.iconType === 'material'\"\n            >\n                {{ item.icon }}\n            </mat-icon>\n\n            <i class=\"nice-vertical-navigation-item-icon fontawesome\" [ngClass]=\"item.icon\" *ngIf=\"item.icon && item.iconType == 'fontawesome'\"></i>\n\n            <mat-icon\n                class=\"nice-vertical-navigation-item-icon\"\n                [ngClass]=\"item.classes?.icon\"\n                [svgIcon]=\"item.icon\"\n                *ngIf=\"item.icon && item.iconType == 'svg'\"\n            ></mat-icon>\n\n            <div *ngIf=\"ctx.showHint && item.icon\" class=\"nice-vertical-navigation-hint\"></div>\n        </div>\n\n        <!-- Title & Subtitle -->\n        <div class=\"nice-vertical-navigation-item-title-wrapper\">\n            <div class=\"nice-vertical-navigation-item-title\">\n                <span [ngClass]=\"item.classes?.title\">\n                    {{ item.title | translate }}\n                </span>\n\n                <div *ngIf=\"ctx.showHint && isCollapsed\" class=\"nice-vertical-navigation-hint\"></div>\n            </div>\n            <div\n                class=\"nice-vertical-navigation-item-subtitle\"\n                *ngIf=\"item.subtitle\"\n            >\n                <span [ngClass]=\"item.classes?.subtitle\">\n                    {{ item.subtitle | translate }}\n                </span>\n            </div>\n        </div>\n\n        <!-- Badge -->\n        <div\n            class=\"nice-vertical-navigation-item-badge\"\n            *ngIf=\"item.badge\">\n\n            <div\n                class=\"nice-vertical-navigation-item-badge-content\"\n                [ngClass]=\"item.badge.classes\"\n            >\n                {{ item.badge.title | translate }}\n            </div>\n        </div>\n\n        <!-- Arrow -->\n        <mat-icon class=\"nice-vertical-navigation-item-arrow icon-size-4\">chevron_right</mat-icon>\n    </div>\n</div>\n\n<div\n    class=\"nice-vertical-navigation-item-children\"\n    *ngIf=\"!isCollapsed\"\n    @expandCollapse\n>\n    <ng-container *ngFor=\"let item of item.children; trackBy: trackByFn\">\n        <!-- Skip the hidden items -->\n        <ng-container *ngIf=\"!(item | niceShouldHide | async)\">\n            <!-- Basic -->\n            <nice-vertical-navigation-basic-item\n                *ngIf=\"item.type === 'basic'\"\n                [item]=\"item\"\n                [name]=\"name\"\n                [showTooltips]=\"showTooltips\"\n                [tooltipPosition]=\"tooltipPosition\"\n            ></nice-vertical-navigation-basic-item>\n\n            <!-- Collapsable -->\n            <nice-vertical-navigation-collapsable-item\n                *ngIf=\"item.type === 'collapsable'\"\n                [item]=\"item\"\n                [name]=\"name\"\n                [autoCollapse]=\"autoCollapse\"\n                [showTooltips]=\"showTooltips\"\n                [tooltipPosition]=\"tooltipPosition\"\n            ></nice-vertical-navigation-collapsable-item>\n\n            <!-- Divider -->\n            <nice-vertical-navigation-divider-item\n                *ngIf=\"item.type === 'divider'\"\n                [item]=\"item\"\n                [name]=\"name\"\n            ></nice-vertical-navigation-divider-item>\n\n            <!-- Group -->\n<!--            <nice-vertical-navigation-group-item\n                *ngIf=\"item.type === 'group'\"\n                [item]=\"item\"\n                [name]=\"name\"\n            ></nice-vertical-navigation-group-item>-->\n\n            <!-- Spacer -->\n            <nice-vertical-navigation-spacer-item\n                *ngIf=\"item.type === 'spacer'\"\n                [item]=\"item\"\n                [name]=\"name\"\n            ></nice-vertical-navigation-spacer-item>\n        </ng-container>\n    </ng-container>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$b.Router }, { type: NiceNavigationService }]; }, propDecorators: { autoCollapse: [{
                 type: Input
             }], item: [{
                 type: Input
             }], name: [{
                 type: Input
+            }], showTooltips: [{
+                type: Input
+            }], tooltipPosition: [{
+                type: Input
             }], classList: [{
                 type: HostBinding,
                 args: ["class"]
@@ -8931,6 +8962,8 @@ class NiceVerticalNavigationGroupItemComponent {
         this._changeDetectorRef = _changeDetectorRef;
         this._niceNavigationService = _niceNavigationService;
         this._unsubscribeAll = new Subject();
+        this.showTooltips = false;
+        this.tooltipPosition = "after";
     }
     // -----------------------------------------------------------------------------------------------------
     // @ Lifecycle hooks
@@ -8966,16 +8999,20 @@ class NiceVerticalNavigationGroupItemComponent {
     }
 }
 NiceVerticalNavigationGroupItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceVerticalNavigationGroupItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: NiceNavigationService }], target: i0.ɵɵFactoryTarget.Component });
-NiceVerticalNavigationGroupItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: NiceVerticalNavigationGroupItemComponent, selector: "nice-vertical-navigation-group-item", inputs: { autoCollapse: "autoCollapse", item: "item", name: "name" }, ngImport: i0, template: "<!-- Item wrapper -->\n<div\n    class=\"nice-vertical-navigation-item-wrapper\"\n    [class.nice-vertical-navigation-item-has-subtitle]=\"!!item.subtitle\"\n    [ngClass]=\"item.classes?.wrapper\"\n>\n    <div class=\"nice-vertical-navigation-item\">\n        <!-- Icon -->\n        <mat-icon\n            class=\"nice-vertical-navigation-item-icon\"\n            [ngClass]=\"item.classes?.icon\"\n            *ngIf=\"item.icon && item.iconType === 'material'\"\n        >\n            {{ item.icon }}\n        </mat-icon>\n\n        <span class=\"nice-vertical-navigation-item-icon\" [ngClass]=\"item.icon\" *ngIf=\"item.icon && item.iconType == 'fontawesome'\"></span>\n\n        <mat-icon\n            class=\"nice-vertical-navigation-item-icon\"\n            [ngClass]=\"item.classes?.icon\"\n            [svgIcon]=\"item.icon\"\n            *ngIf=\"item.icon && item.iconType === 'svg'\"\n        ></mat-icon>\n\n        <!-- Title & Subtitle -->\n        <div class=\"nice-vertical-navigation-item-title-wrapper\" *ngIf=\"item.title || item.subtitle\">\n            <div class=\"nice-vertical-navigation-item-title\">\n                <span [ngClass]=\"item.classes?.title\">\n                    {{ item.title | translate }}\n                </span>\n            </div>\n            <div\n                class=\"nice-vertical-navigation-item-subtitle\"\n                *ngIf=\"item.subtitle\"\n            >\n                <span [ngClass]=\"item.classes?.subtitle\">\n                    {{ item.subtitle | translate }}\n                </span>\n            </div>\n        </div>\n\n        <!-- Badge -->\n        <div\n            class=\"nice-vertical-navigation-item-badge\"\n            *ngIf=\"item.badge\"\n        >\n            <div\n                class=\"nice-vertical-navigation-item-badge-content\"\n                [ngClass]=\"item.badge.classes\"\n            >\n                {{ item.badge.title | translate }}\n            </div>\n        </div>\n    </div>\n</div>\n\n<ng-container *ngFor=\"let item of item.children; trackBy: trackByFn\">\n    <!-- Skip the hidden items -->\n    <ng-container *ngIf=\"!(item | niceShouldHide | async)\">\n        <!-- Basic -->\n        <nice-vertical-navigation-basic-item\n            *ngIf=\"item.type === 'basic'\"\n            [item]=\"item\"\n            [name]=\"name\"\n        ></nice-vertical-navigation-basic-item>\n\n        <!-- Collapsable -->\n        <nice-vertical-navigation-collapsable-item\n            *ngIf=\"item.type === 'collapsable'\"\n            [item]=\"item\"\n            [name]=\"name\"\n            [autoCollapse]=\"autoCollapse\"\n        ></nice-vertical-navigation-collapsable-item>\n\n        <!-- Divider -->\n        <nice-vertical-navigation-divider-item\n            *ngIf=\"item.type === 'divider'\"\n            [item]=\"item\"\n            [name]=\"name\"\n        ></nice-vertical-navigation-divider-item>\n\n        <!-- Group -->\n        <nice-vertical-navigation-group-item\n            *ngIf=\"item.type === 'group'\"\n            [item]=\"item\"\n            [name]=\"name\"\n        ></nice-vertical-navigation-group-item>\n\n        <!-- Spacer -->\n        <nice-vertical-navigation-spacer-item\n            *ngIf=\"item.type === 'spacer'\"\n            [item]=\"item\"\n            [name]=\"name\"\n        ></nice-vertical-navigation-spacer-item>\n    </ng-container>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NiceVerticalNavigationBasicItemComponent, selector: "nice-vertical-navigation-basic-item", inputs: ["item", "name"] }, { kind: "component", type: NiceVerticalNavigationCollapsableItemComponent, selector: "nice-vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item", "name"] }, { kind: "component", type: NiceVerticalNavigationDividerItemComponent, selector: "nice-vertical-navigation-divider-item", inputs: ["item", "name"] }, { kind: "component", type: NiceVerticalNavigationGroupItemComponent, selector: "nice-vertical-navigation-group-item", inputs: ["autoCollapse", "item", "name"] }, { kind: "component", type: NiceVerticalNavigationSpacerItemComponent, selector: "nice-vertical-navigation-spacer-item", inputs: ["item", "name"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: NiceShouldHidePipe, name: "niceShouldHide" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NiceVerticalNavigationGroupItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: NiceVerticalNavigationGroupItemComponent, selector: "nice-vertical-navigation-group-item", inputs: { autoCollapse: "autoCollapse", item: "item", name: "name", showTooltips: "showTooltips", tooltipPosition: "tooltipPosition" }, ngImport: i0, template: "<!-- Item wrapper -->\n<div\n    class=\"nice-vertical-navigation-item-wrapper\"\n    [class.nice-vertical-navigation-item-has-subtitle]=\"!!item.subtitle\"\n    [ngClass]=\"item.classes?.wrapper\"\n>\n    <div class=\"nice-vertical-navigation-item\">\n        <!-- Icon -->\n        <mat-icon\n            class=\"nice-vertical-navigation-item-icon\"\n            [ngClass]=\"item.classes?.icon\"\n            *ngIf=\"item.icon && item.iconType === 'material'\"\n        >\n            {{ item.icon }}\n        </mat-icon>\n\n        <span class=\"nice-vertical-navigation-item-icon\" [ngClass]=\"item.icon\" *ngIf=\"item.icon && item.iconType == 'fontawesome'\"></span>\n\n        <mat-icon\n            class=\"nice-vertical-navigation-item-icon\"\n            [ngClass]=\"item.classes?.icon\"\n            [svgIcon]=\"item.icon\"\n            *ngIf=\"item.icon && item.iconType === 'svg'\"\n        ></mat-icon>\n\n        <!-- Title & Subtitle -->\n        <div class=\"nice-vertical-navigation-item-title-wrapper\" *ngIf=\"item.title || item.subtitle\">\n            <div class=\"nice-vertical-navigation-item-title\">\n                <span [ngClass]=\"item.classes?.title\">\n                    {{ item.title | translate }}\n                </span>\n            </div>\n            <div\n                class=\"nice-vertical-navigation-item-subtitle\"\n                *ngIf=\"item.subtitle\"\n            >\n                <span [ngClass]=\"item.classes?.subtitle\">\n                    {{ item.subtitle | translate }}\n                </span>\n            </div>\n        </div>\n\n        <!-- Badge -->\n        <div\n            class=\"nice-vertical-navigation-item-badge\"\n            *ngIf=\"item.badge\"\n        >\n            <div\n                class=\"nice-vertical-navigation-item-badge-content\"\n                [ngClass]=\"item.badge.classes\"\n            >\n                {{ item.badge.title | translate }}\n            </div>\n        </div>\n    </div>\n</div>\n\n<ng-container *ngFor=\"let item of item.children; trackBy: trackByFn\">\n    <!-- Skip the hidden items -->\n    <ng-container *ngIf=\"!(item | niceShouldHide | async)\">\n        <!-- Basic -->\n        <nice-vertical-navigation-basic-item\n            *ngIf=\"item.type === 'basic'\"\n            [item]=\"item\"\n            [name]=\"name\"\n            [showTooltips]=\"showTooltips\"\n            [tooltipPosition]=\"tooltipPosition\"\n        ></nice-vertical-navigation-basic-item>\n\n        <!-- Collapsable -->\n        <nice-vertical-navigation-collapsable-item\n            *ngIf=\"item.type === 'collapsable'\"\n            [item]=\"item\"\n            [name]=\"name\"\n            [autoCollapse]=\"autoCollapse\"\n            [showTooltips]=\"showTooltips\"\n            [tooltipPosition]=\"tooltipPosition\"\n        ></nice-vertical-navigation-collapsable-item>\n\n        <!-- Divider -->\n        <nice-vertical-navigation-divider-item\n            *ngIf=\"item.type === 'divider'\"\n            [item]=\"item\"\n            [name]=\"name\"\n        ></nice-vertical-navigation-divider-item>\n\n        <!-- Group -->\n        <nice-vertical-navigation-group-item\n            *ngIf=\"item.type === 'group'\"\n            [item]=\"item\"\n            [name]=\"name\"\n            [showTooltips]=\"showTooltips\"\n            [tooltipPosition]=\"tooltipPosition\"\n        ></nice-vertical-navigation-group-item>\n\n        <!-- Spacer -->\n        <nice-vertical-navigation-spacer-item\n            *ngIf=\"item.type === 'spacer'\"\n            [item]=\"item\"\n            [name]=\"name\"\n        ></nice-vertical-navigation-spacer-item>\n    </ng-container>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NiceVerticalNavigationBasicItemComponent, selector: "nice-vertical-navigation-basic-item", inputs: ["item", "name", "showTooltips", "tooltipPosition"] }, { kind: "component", type: NiceVerticalNavigationCollapsableItemComponent, selector: "nice-vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item", "name", "showTooltips", "tooltipPosition"] }, { kind: "component", type: NiceVerticalNavigationDividerItemComponent, selector: "nice-vertical-navigation-divider-item", inputs: ["item", "name"] }, { kind: "component", type: NiceVerticalNavigationGroupItemComponent, selector: "nice-vertical-navigation-group-item", inputs: ["autoCollapse", "item", "name", "showTooltips", "tooltipPosition"] }, { kind: "component", type: NiceVerticalNavigationSpacerItemComponent, selector: "nice-vertical-navigation-spacer-item", inputs: ["item", "name"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: NiceShouldHidePipe, name: "niceShouldHide" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceVerticalNavigationGroupItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: "nice-vertical-navigation-group-item", changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Item wrapper -->\n<div\n    class=\"nice-vertical-navigation-item-wrapper\"\n    [class.nice-vertical-navigation-item-has-subtitle]=\"!!item.subtitle\"\n    [ngClass]=\"item.classes?.wrapper\"\n>\n    <div class=\"nice-vertical-navigation-item\">\n        <!-- Icon -->\n        <mat-icon\n            class=\"nice-vertical-navigation-item-icon\"\n            [ngClass]=\"item.classes?.icon\"\n            *ngIf=\"item.icon && item.iconType === 'material'\"\n        >\n            {{ item.icon }}\n        </mat-icon>\n\n        <span class=\"nice-vertical-navigation-item-icon\" [ngClass]=\"item.icon\" *ngIf=\"item.icon && item.iconType == 'fontawesome'\"></span>\n\n        <mat-icon\n            class=\"nice-vertical-navigation-item-icon\"\n            [ngClass]=\"item.classes?.icon\"\n            [svgIcon]=\"item.icon\"\n            *ngIf=\"item.icon && item.iconType === 'svg'\"\n        ></mat-icon>\n\n        <!-- Title & Subtitle -->\n        <div class=\"nice-vertical-navigation-item-title-wrapper\" *ngIf=\"item.title || item.subtitle\">\n            <div class=\"nice-vertical-navigation-item-title\">\n                <span [ngClass]=\"item.classes?.title\">\n                    {{ item.title | translate }}\n                </span>\n            </div>\n            <div\n                class=\"nice-vertical-navigation-item-subtitle\"\n                *ngIf=\"item.subtitle\"\n            >\n                <span [ngClass]=\"item.classes?.subtitle\">\n                    {{ item.subtitle | translate }}\n                </span>\n            </div>\n        </div>\n\n        <!-- Badge -->\n        <div\n            class=\"nice-vertical-navigation-item-badge\"\n            *ngIf=\"item.badge\"\n        >\n            <div\n                class=\"nice-vertical-navigation-item-badge-content\"\n                [ngClass]=\"item.badge.classes\"\n            >\n                {{ item.badge.title | translate }}\n            </div>\n        </div>\n    </div>\n</div>\n\n<ng-container *ngFor=\"let item of item.children; trackBy: trackByFn\">\n    <!-- Skip the hidden items -->\n    <ng-container *ngIf=\"!(item | niceShouldHide | async)\">\n        <!-- Basic -->\n        <nice-vertical-navigation-basic-item\n            *ngIf=\"item.type === 'basic'\"\n            [item]=\"item\"\n            [name]=\"name\"\n        ></nice-vertical-navigation-basic-item>\n\n        <!-- Collapsable -->\n        <nice-vertical-navigation-collapsable-item\n            *ngIf=\"item.type === 'collapsable'\"\n            [item]=\"item\"\n            [name]=\"name\"\n            [autoCollapse]=\"autoCollapse\"\n        ></nice-vertical-navigation-collapsable-item>\n\n        <!-- Divider -->\n        <nice-vertical-navigation-divider-item\n            *ngIf=\"item.type === 'divider'\"\n            [item]=\"item\"\n            [name]=\"name\"\n        ></nice-vertical-navigation-divider-item>\n\n        <!-- Group -->\n        <nice-vertical-navigation-group-item\n            *ngIf=\"item.type === 'group'\"\n            [item]=\"item\"\n            [name]=\"name\"\n        ></nice-vertical-navigation-group-item>\n\n        <!-- Spacer -->\n        <nice-vertical-navigation-spacer-item\n            *ngIf=\"item.type === 'spacer'\"\n            [item]=\"item\"\n            [name]=\"name\"\n        ></nice-vertical-navigation-spacer-item>\n    </ng-container>\n</ng-container>\n" }]
+            args: [{ selector: "nice-vertical-navigation-group-item", changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Item wrapper -->\n<div\n    class=\"nice-vertical-navigation-item-wrapper\"\n    [class.nice-vertical-navigation-item-has-subtitle]=\"!!item.subtitle\"\n    [ngClass]=\"item.classes?.wrapper\"\n>\n    <div class=\"nice-vertical-navigation-item\">\n        <!-- Icon -->\n        <mat-icon\n            class=\"nice-vertical-navigation-item-icon\"\n            [ngClass]=\"item.classes?.icon\"\n            *ngIf=\"item.icon && item.iconType === 'material'\"\n        >\n            {{ item.icon }}\n        </mat-icon>\n\n        <span class=\"nice-vertical-navigation-item-icon\" [ngClass]=\"item.icon\" *ngIf=\"item.icon && item.iconType == 'fontawesome'\"></span>\n\n        <mat-icon\n            class=\"nice-vertical-navigation-item-icon\"\n            [ngClass]=\"item.classes?.icon\"\n            [svgIcon]=\"item.icon\"\n            *ngIf=\"item.icon && item.iconType === 'svg'\"\n        ></mat-icon>\n\n        <!-- Title & Subtitle -->\n        <div class=\"nice-vertical-navigation-item-title-wrapper\" *ngIf=\"item.title || item.subtitle\">\n            <div class=\"nice-vertical-navigation-item-title\">\n                <span [ngClass]=\"item.classes?.title\">\n                    {{ item.title | translate }}\n                </span>\n            </div>\n            <div\n                class=\"nice-vertical-navigation-item-subtitle\"\n                *ngIf=\"item.subtitle\"\n            >\n                <span [ngClass]=\"item.classes?.subtitle\">\n                    {{ item.subtitle | translate }}\n                </span>\n            </div>\n        </div>\n\n        <!-- Badge -->\n        <div\n            class=\"nice-vertical-navigation-item-badge\"\n            *ngIf=\"item.badge\"\n        >\n            <div\n                class=\"nice-vertical-navigation-item-badge-content\"\n                [ngClass]=\"item.badge.classes\"\n            >\n                {{ item.badge.title | translate }}\n            </div>\n        </div>\n    </div>\n</div>\n\n<ng-container *ngFor=\"let item of item.children; trackBy: trackByFn\">\n    <!-- Skip the hidden items -->\n    <ng-container *ngIf=\"!(item | niceShouldHide | async)\">\n        <!-- Basic -->\n        <nice-vertical-navigation-basic-item\n            *ngIf=\"item.type === 'basic'\"\n            [item]=\"item\"\n            [name]=\"name\"\n            [showTooltips]=\"showTooltips\"\n            [tooltipPosition]=\"tooltipPosition\"\n        ></nice-vertical-navigation-basic-item>\n\n        <!-- Collapsable -->\n        <nice-vertical-navigation-collapsable-item\n            *ngIf=\"item.type === 'collapsable'\"\n            [item]=\"item\"\n            [name]=\"name\"\n            [autoCollapse]=\"autoCollapse\"\n            [showTooltips]=\"showTooltips\"\n            [tooltipPosition]=\"tooltipPosition\"\n        ></nice-vertical-navigation-collapsable-item>\n\n        <!-- Divider -->\n        <nice-vertical-navigation-divider-item\n            *ngIf=\"item.type === 'divider'\"\n            [item]=\"item\"\n            [name]=\"name\"\n        ></nice-vertical-navigation-divider-item>\n\n        <!-- Group -->\n        <nice-vertical-navigation-group-item\n            *ngIf=\"item.type === 'group'\"\n            [item]=\"item\"\n            [name]=\"name\"\n            [showTooltips]=\"showTooltips\"\n            [tooltipPosition]=\"tooltipPosition\"\n        ></nice-vertical-navigation-group-item>\n\n        <!-- Spacer -->\n        <nice-vertical-navigation-spacer-item\n            *ngIf=\"item.type === 'spacer'\"\n            [item]=\"item\"\n            [name]=\"name\"\n        ></nice-vertical-navigation-spacer-item>\n    </ng-container>\n</ng-container>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: NiceNavigationService }]; }, propDecorators: { autoCollapse: [{
                 type: Input
             }], item: [{
                 type: Input
             }], name: [{
                 type: Input
+            }], showTooltips: [{
+                type: Input
+            }], tooltipPosition: [{
+                type: Input
             }] } });
 
 class NiceVerticalNavigationAsideItemComponent {
@@ -8987,6 +9024,8 @@ class NiceVerticalNavigationAsideItemComponent {
         this._router = _router;
         this._niceNavigationService = _niceNavigationService;
         this._unsubscribeAll = new Subject();
+        this.showTooltips = false;
+        this.tooltipPosition = "after";
         this.active = false;
     }
     // -----------------------------------------------------------------------------------------------------
@@ -9085,10 +9124,10 @@ class NiceVerticalNavigationAsideItemComponent {
     }
 }
 NiceVerticalNavigationAsideItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceVerticalNavigationAsideItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$b.Router }, { token: NiceNavigationService }], target: i0.ɵɵFactoryTarget.Component });
-NiceVerticalNavigationAsideItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: NiceVerticalNavigationAsideItemComponent, selector: "nice-vertical-navigation-aside-item", inputs: { activeItemId: "activeItemId", autoCollapse: "autoCollapse", item: "item", name: "name", skipChildren: "skipChildren" }, usesOnChanges: true, ngImport: i0, template: "<div\n    class=\"nice-vertical-navigation-item-wrapper\"\n    [class.nice-vertical-navigation-item-has-subtitle]=\"!!item.subtitle\"\n    [ngClass]=\"item.classes?.wrapper\"\n>\n    <div\n        class=\"nice-vertical-navigation-item\"\n        [ngClass]=\"{\n            'nice-vertical-navigation-item-active': active,\n            'nice-vertical-navigation-item-disabled': item.disabled,\n            'nice-vertical-navigation-item-active-forced': item.active\n        }\"\n    >\n        <!-- Icon -->\n        <mat-icon\n                class=\"nice-vertical-navigation-item-icon\"\n                [ngClass]=\"item.classes?.icon\"\n                *ngIf=\"item.icon && item.iconType === 'material'\"\n        >\n            {{ item.icon }}\n        </mat-icon>\n\n        <span class=\"nice-vertical-navigation-item-icon\" [ngClass]=\"item.icon\" *ngIf=\"item.icon && item.iconType == 'fontawesome'\"></span>\n\n        <mat-icon\n                class=\"nice-vertical-navigation-item-icon\"\n                [ngClass]=\"item.classes?.icon\"\n                [svgIcon]=\"item.icon\"\n                *ngIf=\"item.icon && item.iconType === 'svg'\"\n        ></mat-icon>\n\n        <!-- Title & Subtitle -->\n        <div class=\"nice-vertical-navigation-item-title-wrapper\">\n            <div class=\"nice-vertical-navigation-item-title\">\n                <span [ngClass]=\"item.classes?.title\">\n                    {{ item.title | translate }}\n                </span>\n            </div>\n            <div\n                class=\"nice-vertical-navigation-item-subtitle\"\n                *ngIf=\"item.subtitle\"\n            >\n                <span [ngClass]=\"item.classes?.subtitle\">\n                    {{ item.subtitle | translate }}\n                </span>\n            </div>\n        </div>\n\n        <!-- Badge -->\n        <div\n            class=\"nice-vertical-navigation-item-badge\"\n            *ngIf=\"item.badge\"\n        >\n            <div\n                class=\"nice-vertical-navigation-item-badge-content\"\n                [ngClass]=\"item.badge.classes\"\n            >\n                {{ item.badge.title | translate }}\n            </div>\n        </div>\n    </div>\n</div>\n\n<ng-container *ngIf=\"!skipChildren\">\n    <div class=\"nice-vertical-navigation-item-children\">\n        <ng-container *ngFor=\"let item of item.children; trackBy: trackByFn\">\n            <!-- Skip the hidden items -->\n            <ng-container *ngIf=\"(item.hidden && !item.hidden(item)) || !item.hidden\">\n                <!-- Basic -->\n                <nice-vertical-navigation-basic-item\n                    *ngIf=\"item.type === 'basic'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                ></nice-vertical-navigation-basic-item>\n\n                <!-- Collapsable -->\n                <nice-vertical-navigation-collapsable-item\n                    *ngIf=\"item.type === 'collapsable'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                    [autoCollapse]=\"autoCollapse\"\n                ></nice-vertical-navigation-collapsable-item>\n\n                <!-- Divider -->\n                <nice-vertical-navigation-divider-item\n                    *ngIf=\"item.type === 'divider'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                ></nice-vertical-navigation-divider-item>\n\n                <!-- Group -->\n                <nice-vertical-navigation-group-item\n                    *ngIf=\"item.type === 'group'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                ></nice-vertical-navigation-group-item>\n\n                <!-- Spacer -->\n                <nice-vertical-navigation-spacer-item\n                    *ngIf=\"item.type === 'spacer'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                ></nice-vertical-navigation-spacer-item>\n            </ng-container>\n        </ng-container>\n    </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NiceVerticalNavigationBasicItemComponent, selector: "nice-vertical-navigation-basic-item", inputs: ["item", "name"] }, { kind: "component", type: NiceVerticalNavigationCollapsableItemComponent, selector: "nice-vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item", "name"] }, { kind: "component", type: NiceVerticalNavigationDividerItemComponent, selector: "nice-vertical-navigation-divider-item", inputs: ["item", "name"] }, { kind: "component", type: NiceVerticalNavigationGroupItemComponent, selector: "nice-vertical-navigation-group-item", inputs: ["autoCollapse", "item", "name"] }, { kind: "component", type: NiceVerticalNavigationSpacerItemComponent, selector: "nice-vertical-navigation-spacer-item", inputs: ["item", "name"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NiceVerticalNavigationAsideItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: NiceVerticalNavigationAsideItemComponent, selector: "nice-vertical-navigation-aside-item", inputs: { activeItemId: "activeItemId", autoCollapse: "autoCollapse", item: "item", name: "name", showTooltips: "showTooltips", skipChildren: "skipChildren", tooltipPosition: "tooltipPosition" }, usesOnChanges: true, ngImport: i0, template: "<div\n    class=\"nice-vertical-navigation-item-wrapper\"\n    [class.nice-vertical-navigation-item-has-subtitle]=\"!!item.subtitle\"\n    [ngClass]=\"item.classes?.wrapper\"\n>\n    <div\n        class=\"nice-vertical-navigation-item\"\n        [ngClass]=\"{\n            'nice-vertical-navigation-item-active': active,\n            'nice-vertical-navigation-item-disabled': item.disabled,\n            'nice-vertical-navigation-item-active-forced': item.active\n        }\"\n    >\n        <!-- Icon -->\n        <mat-icon\n                class=\"nice-vertical-navigation-item-icon\"\n                [ngClass]=\"item.classes?.icon\"\n                *ngIf=\"item.icon && item.iconType === 'material'\"\n        >\n            {{ item.icon }}\n        </mat-icon>\n\n        <span class=\"nice-vertical-navigation-item-icon\" [ngClass]=\"item.icon\" *ngIf=\"item.icon && item.iconType == 'fontawesome'\"></span>\n\n        <mat-icon\n                class=\"nice-vertical-navigation-item-icon\"\n                [ngClass]=\"item.classes?.icon\"\n                [svgIcon]=\"item.icon\"\n                *ngIf=\"item.icon && item.iconType === 'svg'\"\n        ></mat-icon>\n\n        <!-- Title & Subtitle -->\n        <div class=\"nice-vertical-navigation-item-title-wrapper\">\n            <div class=\"nice-vertical-navigation-item-title\">\n                <span [ngClass]=\"item.classes?.title\">\n                    {{ item.title | translate }}\n                </span>\n            </div>\n            <div\n                class=\"nice-vertical-navigation-item-subtitle\"\n                *ngIf=\"item.subtitle\"\n            >\n                <span [ngClass]=\"item.classes?.subtitle\">\n                    {{ item.subtitle | translate }}\n                </span>\n            </div>\n        </div>\n\n        <!-- Badge -->\n        <div\n            class=\"nice-vertical-navigation-item-badge\"\n            *ngIf=\"item.badge\"\n        >\n            <div\n                class=\"nice-vertical-navigation-item-badge-content\"\n                [ngClass]=\"item.badge.classes\"\n            >\n                {{ item.badge.title | translate }}\n            </div>\n        </div>\n    </div>\n</div>\n\n<ng-container *ngIf=\"!skipChildren\">\n    <div class=\"nice-vertical-navigation-item-children\">\n        <ng-container *ngFor=\"let item of item.children; trackBy: trackByFn\">\n            <!-- Skip the hidden items -->\n            <ng-container *ngIf=\"(item.hidden && !item.hidden(item)) || !item.hidden\">\n                <!-- Basic -->\n                <nice-vertical-navigation-basic-item\n                    *ngIf=\"item.type === 'basic'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                    [showTooltips]=\"showTooltips\"\n                    [tooltipPosition]=\"tooltipPosition\"\n                ></nice-vertical-navigation-basic-item>\n\n                <!-- Collapsable -->\n                <nice-vertical-navigation-collapsable-item\n                    *ngIf=\"item.type === 'collapsable'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                    [autoCollapse]=\"autoCollapse\"\n                    [showTooltips]=\"showTooltips\"\n                    [tooltipPosition]=\"tooltipPosition\"\n                ></nice-vertical-navigation-collapsable-item>\n\n                <!-- Divider -->\n                <nice-vertical-navigation-divider-item\n                    *ngIf=\"item.type === 'divider'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                ></nice-vertical-navigation-divider-item>\n\n                <!-- Group -->\n                <nice-vertical-navigation-group-item\n                    *ngIf=\"item.type === 'group'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                    [showTooltips]=\"showTooltips\"\n                    [tooltipPosition]=\"tooltipPosition\"\n                ></nice-vertical-navigation-group-item>\n\n                <!-- Spacer -->\n                <nice-vertical-navigation-spacer-item\n                    *ngIf=\"item.type === 'spacer'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                ></nice-vertical-navigation-spacer-item>\n            </ng-container>\n        </ng-container>\n    </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NiceVerticalNavigationBasicItemComponent, selector: "nice-vertical-navigation-basic-item", inputs: ["item", "name", "showTooltips", "tooltipPosition"] }, { kind: "component", type: NiceVerticalNavigationCollapsableItemComponent, selector: "nice-vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item", "name", "showTooltips", "tooltipPosition"] }, { kind: "component", type: NiceVerticalNavigationDividerItemComponent, selector: "nice-vertical-navigation-divider-item", inputs: ["item", "name"] }, { kind: "component", type: NiceVerticalNavigationGroupItemComponent, selector: "nice-vertical-navigation-group-item", inputs: ["autoCollapse", "item", "name", "showTooltips", "tooltipPosition"] }, { kind: "component", type: NiceVerticalNavigationSpacerItemComponent, selector: "nice-vertical-navigation-spacer-item", inputs: ["item", "name"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceVerticalNavigationAsideItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: "nice-vertical-navigation-aside-item", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    class=\"nice-vertical-navigation-item-wrapper\"\n    [class.nice-vertical-navigation-item-has-subtitle]=\"!!item.subtitle\"\n    [ngClass]=\"item.classes?.wrapper\"\n>\n    <div\n        class=\"nice-vertical-navigation-item\"\n        [ngClass]=\"{\n            'nice-vertical-navigation-item-active': active,\n            'nice-vertical-navigation-item-disabled': item.disabled,\n            'nice-vertical-navigation-item-active-forced': item.active\n        }\"\n    >\n        <!-- Icon -->\n        <mat-icon\n                class=\"nice-vertical-navigation-item-icon\"\n                [ngClass]=\"item.classes?.icon\"\n                *ngIf=\"item.icon && item.iconType === 'material'\"\n        >\n            {{ item.icon }}\n        </mat-icon>\n\n        <span class=\"nice-vertical-navigation-item-icon\" [ngClass]=\"item.icon\" *ngIf=\"item.icon && item.iconType == 'fontawesome'\"></span>\n\n        <mat-icon\n                class=\"nice-vertical-navigation-item-icon\"\n                [ngClass]=\"item.classes?.icon\"\n                [svgIcon]=\"item.icon\"\n                *ngIf=\"item.icon && item.iconType === 'svg'\"\n        ></mat-icon>\n\n        <!-- Title & Subtitle -->\n        <div class=\"nice-vertical-navigation-item-title-wrapper\">\n            <div class=\"nice-vertical-navigation-item-title\">\n                <span [ngClass]=\"item.classes?.title\">\n                    {{ item.title | translate }}\n                </span>\n            </div>\n            <div\n                class=\"nice-vertical-navigation-item-subtitle\"\n                *ngIf=\"item.subtitle\"\n            >\n                <span [ngClass]=\"item.classes?.subtitle\">\n                    {{ item.subtitle | translate }}\n                </span>\n            </div>\n        </div>\n\n        <!-- Badge -->\n        <div\n            class=\"nice-vertical-navigation-item-badge\"\n            *ngIf=\"item.badge\"\n        >\n            <div\n                class=\"nice-vertical-navigation-item-badge-content\"\n                [ngClass]=\"item.badge.classes\"\n            >\n                {{ item.badge.title | translate }}\n            </div>\n        </div>\n    </div>\n</div>\n\n<ng-container *ngIf=\"!skipChildren\">\n    <div class=\"nice-vertical-navigation-item-children\">\n        <ng-container *ngFor=\"let item of item.children; trackBy: trackByFn\">\n            <!-- Skip the hidden items -->\n            <ng-container *ngIf=\"(item.hidden && !item.hidden(item)) || !item.hidden\">\n                <!-- Basic -->\n                <nice-vertical-navigation-basic-item\n                    *ngIf=\"item.type === 'basic'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                ></nice-vertical-navigation-basic-item>\n\n                <!-- Collapsable -->\n                <nice-vertical-navigation-collapsable-item\n                    *ngIf=\"item.type === 'collapsable'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                    [autoCollapse]=\"autoCollapse\"\n                ></nice-vertical-navigation-collapsable-item>\n\n                <!-- Divider -->\n                <nice-vertical-navigation-divider-item\n                    *ngIf=\"item.type === 'divider'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                ></nice-vertical-navigation-divider-item>\n\n                <!-- Group -->\n                <nice-vertical-navigation-group-item\n                    *ngIf=\"item.type === 'group'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                ></nice-vertical-navigation-group-item>\n\n                <!-- Spacer -->\n                <nice-vertical-navigation-spacer-item\n                    *ngIf=\"item.type === 'spacer'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                ></nice-vertical-navigation-spacer-item>\n            </ng-container>\n        </ng-container>\n    </div>\n</ng-container>\n" }]
+            args: [{ selector: "nice-vertical-navigation-aside-item", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    class=\"nice-vertical-navigation-item-wrapper\"\n    [class.nice-vertical-navigation-item-has-subtitle]=\"!!item.subtitle\"\n    [ngClass]=\"item.classes?.wrapper\"\n>\n    <div\n        class=\"nice-vertical-navigation-item\"\n        [ngClass]=\"{\n            'nice-vertical-navigation-item-active': active,\n            'nice-vertical-navigation-item-disabled': item.disabled,\n            'nice-vertical-navigation-item-active-forced': item.active\n        }\"\n    >\n        <!-- Icon -->\n        <mat-icon\n                class=\"nice-vertical-navigation-item-icon\"\n                [ngClass]=\"item.classes?.icon\"\n                *ngIf=\"item.icon && item.iconType === 'material'\"\n        >\n            {{ item.icon }}\n        </mat-icon>\n\n        <span class=\"nice-vertical-navigation-item-icon\" [ngClass]=\"item.icon\" *ngIf=\"item.icon && item.iconType == 'fontawesome'\"></span>\n\n        <mat-icon\n                class=\"nice-vertical-navigation-item-icon\"\n                [ngClass]=\"item.classes?.icon\"\n                [svgIcon]=\"item.icon\"\n                *ngIf=\"item.icon && item.iconType === 'svg'\"\n        ></mat-icon>\n\n        <!-- Title & Subtitle -->\n        <div class=\"nice-vertical-navigation-item-title-wrapper\">\n            <div class=\"nice-vertical-navigation-item-title\">\n                <span [ngClass]=\"item.classes?.title\">\n                    {{ item.title | translate }}\n                </span>\n            </div>\n            <div\n                class=\"nice-vertical-navigation-item-subtitle\"\n                *ngIf=\"item.subtitle\"\n            >\n                <span [ngClass]=\"item.classes?.subtitle\">\n                    {{ item.subtitle | translate }}\n                </span>\n            </div>\n        </div>\n\n        <!-- Badge -->\n        <div\n            class=\"nice-vertical-navigation-item-badge\"\n            *ngIf=\"item.badge\"\n        >\n            <div\n                class=\"nice-vertical-navigation-item-badge-content\"\n                [ngClass]=\"item.badge.classes\"\n            >\n                {{ item.badge.title | translate }}\n            </div>\n        </div>\n    </div>\n</div>\n\n<ng-container *ngIf=\"!skipChildren\">\n    <div class=\"nice-vertical-navigation-item-children\">\n        <ng-container *ngFor=\"let item of item.children; trackBy: trackByFn\">\n            <!-- Skip the hidden items -->\n            <ng-container *ngIf=\"(item.hidden && !item.hidden(item)) || !item.hidden\">\n                <!-- Basic -->\n                <nice-vertical-navigation-basic-item\n                    *ngIf=\"item.type === 'basic'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                    [showTooltips]=\"showTooltips\"\n                    [tooltipPosition]=\"tooltipPosition\"\n                ></nice-vertical-navigation-basic-item>\n\n                <!-- Collapsable -->\n                <nice-vertical-navigation-collapsable-item\n                    *ngIf=\"item.type === 'collapsable'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                    [autoCollapse]=\"autoCollapse\"\n                    [showTooltips]=\"showTooltips\"\n                    [tooltipPosition]=\"tooltipPosition\"\n                ></nice-vertical-navigation-collapsable-item>\n\n                <!-- Divider -->\n                <nice-vertical-navigation-divider-item\n                    *ngIf=\"item.type === 'divider'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                ></nice-vertical-navigation-divider-item>\n\n                <!-- Group -->\n                <nice-vertical-navigation-group-item\n                    *ngIf=\"item.type === 'group'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                    [showTooltips]=\"showTooltips\"\n                    [tooltipPosition]=\"tooltipPosition\"\n                ></nice-vertical-navigation-group-item>\n\n                <!-- Spacer -->\n                <nice-vertical-navigation-spacer-item\n                    *ngIf=\"item.type === 'spacer'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                ></nice-vertical-navigation-spacer-item>\n            </ng-container>\n        </ng-container>\n    </div>\n</ng-container>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$b.Router }, { type: NiceNavigationService }]; }, propDecorators: { activeItemId: [{
                 type: Input
             }], autoCollapse: [{
@@ -9097,8 +9136,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImpor
                 type: Input
             }], name: [{
                 type: Input
+            }], showTooltips: [{
+                type: Input
             }], skipChildren: [{
                 type: Input
+            }], tooltipPosition: [{
+                type: Input
             }] } });
 
 class NiceVerticalNavigationComponent extends NiceNavigationComponent {
@@ -9125,7 +9168,9 @@ class NiceVerticalNavigationComponent extends NiceNavigationComponent {
         this.hovered = false;
         this.hasHint = false;
         this.position = "left";
+        this.showTooltips = false;
         this.transparentOverlay = false;
+        this.tooltipPosition = "after";
         this.appearanceChanged = new EventEmitter();
         this.modeChanged = new EventEmitter();
         this.openedChanged = new EventEmitter();
@@ -9605,10 +9650,10 @@ class NiceVerticalNavigationComponent extends NiceNavigationComponent {
     }
 }
 NiceVerticalNavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceVerticalNavigationComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: NiceNavigationService }, { token: NiceUtilsService }, { token: i1$c.AnimationBuilder }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$b.Router }, { token: i1$7.ScrollStrategyOptions }, { token: NiceNavigationHintService }], target: i0.ɵɵFactoryTarget.Component });
-NiceVerticalNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: NiceVerticalNavigationComponent, selector: "nice-vertical-navigation", inputs: { name: "name", appearance: "appearance", autoCollapse: "autoCollapse", inner: "inner", mode: "mode", opened: "opened", hovered: "hovered", hasHint: "hasHint", position: "position", transparentOverlay: "transparentOverlay", navigation: "navigation" }, outputs: { appearanceChanged: "appearanceChanged", modeChanged: "modeChanged", openedChanged: "openedChanged", hoveredChanged: "hoveredChanged", positionChanged: "positionChanged" }, host: { listeners: { "mouseenter": "_onMouseenter()", "mouseleave": "_onMouseleave()" }, properties: { "class": "this.classList", "style": "this.styleList" } }, viewQueries: [{ propertyName: "_navigationContentEl", first: true, predicate: ["navigationContent"], descendants: true }, { propertyName: "niceScrollbarDirectives", predicate: NiceScrollbarDirective, descendants: true }], exportAs: ["niceVerticalNavigation"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"nice-vertical-navigation-wrapper\">\n    <!-- Header -->\n    <div class=\"nice-vertical-navigation-header\">\n        <ng-content select=\"[niceVerticalNavigationHeader]\"></ng-content>\n    </div>\n\n    <!-- Content -->\n    <div\n        class=\"nice-vertical-navigation-content\"\n        niceScrollbar\n        [niceScrollbarOptions]=\"{ wheelPropagation: inner, suppressScrollX: true }\"\n        #navigationContent\n    >\n        <!-- Content header -->\n        <div class=\"nice-vertical-navigation-content-header\">\n            <ng-content select=\"[niceVerticalNavigationContentHeader]\"></ng-content>\n        </div>\n\n        <!-- Items -->\n        <div *ngFor=\"let item of navigation; trackBy: trackByFn\" [@.disabled]=\"!animateNextNavChange\" @slideInRight>\n            <!-- Skip the hidden items -->\n            <ng-container *ngIf=\"!(item | niceShouldHide | async)\">\n                <!-- Aside -->\n                <nice-vertical-navigation-aside-item\n                    *ngIf=\"item.type === 'aside'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                    [activeItemId]=\"activeAsideItemId\"\n                    [autoCollapse]=\"autoCollapse\"\n                    [skipChildren]=\"true\"\n                    (click)=\"toggleAside(item)\"\n                ></nice-vertical-navigation-aside-item>\n\n                <!-- Basic -->\n                <nice-vertical-navigation-basic-item\n                    *ngIf=\"item.type === 'basic'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                ></nice-vertical-navigation-basic-item>\n\n                <!-- Collapsable -->\n                <nice-vertical-navigation-collapsable-item\n                    *ngIf=\"item.type === 'collapsable'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                    [autoCollapse]=\"autoCollapse\"\n                ></nice-vertical-navigation-collapsable-item>\n\n                <!-- Divider -->\n                <nice-vertical-navigation-divider-item\n                    *ngIf=\"item.type === 'divider'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                ></nice-vertical-navigation-divider-item>\n\n                <!-- Group -->\n                <nice-vertical-navigation-group-item\n                    *ngIf=\"item.type === 'group'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                    [autoCollapse]=\"autoCollapse\"\n                ></nice-vertical-navigation-group-item>\n\n                <!-- Spacer -->\n                <nice-vertical-navigation-spacer-item\n                    *ngIf=\"item.type === 'spacer'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                ></nice-vertical-navigation-spacer-item>\n            </ng-container>\n        </div>\n\n        <!-- Content footer -->\n        <div class=\"nice-vertical-navigation-content-footer\">\n            <ng-content select=\"[niceVerticalNavigationContentFooter]\"></ng-content>\n        </div>\n\n    </div>\n\n    <!-- Footer -->\n    <div class=\"nice-vertical-navigation-footer\">\n        <ng-content select=\"[niceVerticalNavigationFooter]\"></ng-content>\n    </div>\n</div>\n\n<!-- Aside -->\n<div\n    class=\"nice-vertical-navigation-aside-wrapper\"\n    *ngIf=\"activeAsideItemId\"\n    niceScrollbar\n    [niceScrollbarOptions]=\"{ wheelPropagation: false, suppressScrollX: true }\"\n    [@fadeInLeft]=\"position === 'left'\"\n    [@fadeInRight]=\"position === 'right'\"\n    [@fadeOutLeft]=\"position === 'left'\"\n    [@fadeOutRight]=\"position === 'right'\"\n>\n\n    <!-- Items -->\n    <ng-container *ngFor=\"let item of navigation; trackBy: trackByFn\">\n        <!-- Skip the hidden items -->\n        <ng-container *ngIf=\"(item.hidden && !item.hidden(item)) || !item.hidden\">\n            <!-- Aside -->\n            <nice-vertical-navigation-aside-item\n                *ngIf=\"item.type === 'aside' && item.id === activeAsideItemId\"\n                [item]=\"item\"\n                [name]=\"name\"\n                [autoCollapse]=\"autoCollapse\"\n            ></nice-vertical-navigation-aside-item>\n        </ng-container>\n    </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NiceScrollbarDirective, selector: "[niceScrollbar]", inputs: ["niceScrollbar", "niceScrollbarOptions"], exportAs: ["niceScrollbar"] }, { kind: "component", type: NiceVerticalNavigationAsideItemComponent, selector: "nice-vertical-navigation-aside-item", inputs: ["activeItemId", "autoCollapse", "item", "name", "skipChildren"] }, { kind: "component", type: NiceVerticalNavigationBasicItemComponent, selector: "nice-vertical-navigation-basic-item", inputs: ["item", "name"] }, { kind: "component", type: NiceVerticalNavigationCollapsableItemComponent, selector: "nice-vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item", "name"] }, { kind: "component", type: NiceVerticalNavigationDividerItemComponent, selector: "nice-vertical-navigation-divider-item", inputs: ["item", "name"] }, { kind: "component", type: NiceVerticalNavigationGroupItemComponent, selector: "nice-vertical-navigation-group-item", inputs: ["autoCollapse", "item", "name"] }, { kind: "component", type: NiceVerticalNavigationSpacerItemComponent, selector: "nice-vertical-navigation-spacer-item", inputs: ["item", "name"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: NiceShouldHidePipe, name: "niceShouldHide" }], animations: niceAnimations, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+NiceVerticalNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: NiceVerticalNavigationComponent, selector: "nice-vertical-navigation", inputs: { name: "name", appearance: "appearance", autoCollapse: "autoCollapse", inner: "inner", mode: "mode", opened: "opened", hovered: "hovered", hasHint: "hasHint", position: "position", showTooltips: "showTooltips", transparentOverlay: "transparentOverlay", tooltipPosition: "tooltipPosition", navigation: "navigation" }, outputs: { appearanceChanged: "appearanceChanged", modeChanged: "modeChanged", openedChanged: "openedChanged", hoveredChanged: "hoveredChanged", positionChanged: "positionChanged" }, host: { listeners: { "mouseenter": "_onMouseenter()", "mouseleave": "_onMouseleave()" }, properties: { "class": "this.classList", "style": "this.styleList" } }, viewQueries: [{ propertyName: "_navigationContentEl", first: true, predicate: ["navigationContent"], descendants: true }, { propertyName: "niceScrollbarDirectives", predicate: NiceScrollbarDirective, descendants: true }], exportAs: ["niceVerticalNavigation"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"nice-vertical-navigation-wrapper\">\n    <!-- Header -->\n    <div class=\"nice-vertical-navigation-header\">\n        <ng-content select=\"[niceVerticalNavigationHeader]\"></ng-content>\n    </div>\n\n    <!-- Content -->\n    <div\n        class=\"nice-vertical-navigation-content\"\n        niceScrollbar\n        [niceScrollbarOptions]=\"{ wheelPropagation: inner, suppressScrollX: true }\"\n        #navigationContent\n    >\n        <!-- Content header -->\n        <div class=\"nice-vertical-navigation-content-header\">\n            <ng-content select=\"[niceVerticalNavigationContentHeader]\"></ng-content>\n        </div>\n\n        <!-- Items -->\n        <div *ngFor=\"let item of navigation; trackBy: trackByFn\" [@.disabled]=\"!animateNextNavChange\" @slideInRight>\n            <!-- Skip the hidden items -->\n            <ng-container *ngIf=\"!(item | niceShouldHide | async)\">\n                <!-- Aside -->\n                <nice-vertical-navigation-aside-item\n                    *ngIf=\"item.type === 'aside'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                    [activeItemId]=\"activeAsideItemId\"\n                    [autoCollapse]=\"autoCollapse\"\n                    [skipChildren]=\"true\"\n                    [showTooltips]=\"showTooltips\"\n                    [tooltipPosition]=\"tooltipPosition\"\n                    (click)=\"toggleAside(item)\"\n                ></nice-vertical-navigation-aside-item>\n\n                <!-- Basic -->\n                <nice-vertical-navigation-basic-item\n                    *ngIf=\"item.type === 'basic'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                    [showTooltips]=\"showTooltips\"\n                    [tooltipPosition]=\"tooltipPosition\"\n                ></nice-vertical-navigation-basic-item>\n\n                <!-- Collapsable -->\n                <nice-vertical-navigation-collapsable-item\n                    *ngIf=\"item.type === 'collapsable'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                    [autoCollapse]=\"autoCollapse\"\n                    [showTooltips]=\"showTooltips\"\n                    [tooltipPosition]=\"tooltipPosition\"\n                ></nice-vertical-navigation-collapsable-item>\n\n                <!-- Divider -->\n                <nice-vertical-navigation-divider-item\n                    *ngIf=\"item.type === 'divider'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                ></nice-vertical-navigation-divider-item>\n\n                <!-- Group -->\n                <nice-vertical-navigation-group-item\n                    *ngIf=\"item.type === 'group'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                    [autoCollapse]=\"autoCollapse\"\n                    [showTooltips]=\"showTooltips\"\n                    [tooltipPosition]=\"tooltipPosition\"\n                ></nice-vertical-navigation-group-item>\n\n                <!-- Spacer -->\n                <nice-vertical-navigation-spacer-item\n                    *ngIf=\"item.type === 'spacer'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                ></nice-vertical-navigation-spacer-item>\n            </ng-container>\n        </div>\n\n        <!-- Content footer -->\n        <div class=\"nice-vertical-navigation-content-footer\">\n            <ng-content select=\"[niceVerticalNavigationContentFooter]\"></ng-content>\n        </div>\n\n    </div>\n\n    <!-- Footer -->\n    <div class=\"nice-vertical-navigation-footer\">\n        <ng-content select=\"[niceVerticalNavigationFooter]\"></ng-content>\n    </div>\n</div>\n\n<!-- Aside -->\n<div\n    class=\"nice-vertical-navigation-aside-wrapper\"\n    *ngIf=\"activeAsideItemId\"\n    niceScrollbar\n    [niceScrollbarOptions]=\"{ wheelPropagation: false, suppressScrollX: true }\"\n    [@fadeInLeft]=\"position === 'left'\"\n    [@fadeInRight]=\"position === 'right'\"\n    [@fadeOutLeft]=\"position === 'left'\"\n    [@fadeOutRight]=\"position === 'right'\"\n>\n\n    <!-- Items -->\n    <ng-container *ngFor=\"let item of navigation; trackBy: trackByFn\">\n        <!-- Skip the hidden items -->\n        <ng-container *ngIf=\"(item.hidden && !item.hidden(item)) || !item.hidden\">\n            <!-- Aside -->\n            <nice-vertical-navigation-aside-item\n                *ngIf=\"item.type === 'aside' && item.id === activeAsideItemId\"\n                [item]=\"item\"\n                [name]=\"name\"\n                [autoCollapse]=\"autoCollapse\"\n                [showTooltips]=\"showTooltips\"\n                [tooltipPosition]=\"tooltipPosition\"\n            ></nice-vertical-navigation-aside-item>\n        </ng-container>\n    </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NiceScrollbarDirective, selector: "[niceScrollbar]", inputs: ["niceScrollbar", "niceScrollbarOptions"], exportAs: ["niceScrollbar"] }, { kind: "component", type: NiceVerticalNavigationAsideItemComponent, selector: "nice-vertical-navigation-aside-item", inputs: ["activeItemId", "autoCollapse", "item", "name", "showTooltips", "skipChildren", "tooltipPosition"] }, { kind: "component", type: NiceVerticalNavigationBasicItemComponent, selector: "nice-vertical-navigation-basic-item", inputs: ["item", "name", "showTooltips", "tooltipPosition"] }, { kind: "component", type: NiceVerticalNavigationCollapsableItemComponent, selector: "nice-vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item", "name", "showTooltips", "tooltipPosition"] }, { kind: "component", type: NiceVerticalNavigationDividerItemComponent, selector: "nice-vertical-navigation-divider-item", inputs: ["item", "name"] }, { kind: "component", type: NiceVerticalNavigationGroupItemComponent, selector: "nice-vertical-navigation-group-item", inputs: ["autoCollapse", "item", "name", "showTooltips", "tooltipPosition"] }, { kind: "component", type: NiceVerticalNavigationSpacerItemComponent, selector: "nice-vertical-navigation-spacer-item", inputs: ["item", "name"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: NiceShouldHidePipe, name: "niceShouldHide" }], animations: niceAnimations, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceVerticalNavigationComponent, decorators: [{
             type: Component,
-            args: [{ selector: "nice-vertical-navigation", animations: niceAnimations, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: "niceVerticalNavigation", template: "<div class=\"nice-vertical-navigation-wrapper\">\n    <!-- Header -->\n    <div class=\"nice-vertical-navigation-header\">\n        <ng-content select=\"[niceVerticalNavigationHeader]\"></ng-content>\n    </div>\n\n    <!-- Content -->\n    <div\n        class=\"nice-vertical-navigation-content\"\n        niceScrollbar\n        [niceScrollbarOptions]=\"{ wheelPropagation: inner, suppressScrollX: true }\"\n        #navigationContent\n    >\n        <!-- Content header -->\n        <div class=\"nice-vertical-navigation-content-header\">\n            <ng-content select=\"[niceVerticalNavigationContentHeader]\"></ng-content>\n        </div>\n\n        <!-- Items -->\n        <div *ngFor=\"let item of navigation; trackBy: trackByFn\" [@.disabled]=\"!animateNextNavChange\" @slideInRight>\n            <!-- Skip the hidden items -->\n            <ng-container *ngIf=\"!(item | niceShouldHide | async)\">\n                <!-- Aside -->\n                <nice-vertical-navigation-aside-item\n                    *ngIf=\"item.type === 'aside'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                    [activeItemId]=\"activeAsideItemId\"\n                    [autoCollapse]=\"autoCollapse\"\n                    [skipChildren]=\"true\"\n                    (click)=\"toggleAside(item)\"\n                ></nice-vertical-navigation-aside-item>\n\n                <!-- Basic -->\n                <nice-vertical-navigation-basic-item\n                    *ngIf=\"item.type === 'basic'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                ></nice-vertical-navigation-basic-item>\n\n                <!-- Collapsable -->\n                <nice-vertical-navigation-collapsable-item\n                    *ngIf=\"item.type === 'collapsable'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                    [autoCollapse]=\"autoCollapse\"\n                ></nice-vertical-navigation-collapsable-item>\n\n                <!-- Divider -->\n                <nice-vertical-navigation-divider-item\n                    *ngIf=\"item.type === 'divider'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                ></nice-vertical-navigation-divider-item>\n\n                <!-- Group -->\n                <nice-vertical-navigation-group-item\n                    *ngIf=\"item.type === 'group'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                    [autoCollapse]=\"autoCollapse\"\n                ></nice-vertical-navigation-group-item>\n\n                <!-- Spacer -->\n                <nice-vertical-navigation-spacer-item\n                    *ngIf=\"item.type === 'spacer'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                ></nice-vertical-navigation-spacer-item>\n            </ng-container>\n        </div>\n\n        <!-- Content footer -->\n        <div class=\"nice-vertical-navigation-content-footer\">\n            <ng-content select=\"[niceVerticalNavigationContentFooter]\"></ng-content>\n        </div>\n\n    </div>\n\n    <!-- Footer -->\n    <div class=\"nice-vertical-navigation-footer\">\n        <ng-content select=\"[niceVerticalNavigationFooter]\"></ng-content>\n    </div>\n</div>\n\n<!-- Aside -->\n<div\n    class=\"nice-vertical-navigation-aside-wrapper\"\n    *ngIf=\"activeAsideItemId\"\n    niceScrollbar\n    [niceScrollbarOptions]=\"{ wheelPropagation: false, suppressScrollX: true }\"\n    [@fadeInLeft]=\"position === 'left'\"\n    [@fadeInRight]=\"position === 'right'\"\n    [@fadeOutLeft]=\"position === 'left'\"\n    [@fadeOutRight]=\"position === 'right'\"\n>\n\n    <!-- Items -->\n    <ng-container *ngFor=\"let item of navigation; trackBy: trackByFn\">\n        <!-- Skip the hidden items -->\n        <ng-container *ngIf=\"(item.hidden && !item.hidden(item)) || !item.hidden\">\n            <!-- Aside -->\n            <nice-vertical-navigation-aside-item\n                *ngIf=\"item.type === 'aside' && item.id === activeAsideItemId\"\n                [item]=\"item\"\n                [name]=\"name\"\n                [autoCollapse]=\"autoCollapse\"\n            ></nice-vertical-navigation-aside-item>\n        </ng-container>\n    </ng-container>\n</div>\n" }]
+            args: [{ selector: "nice-vertical-navigation", animations: niceAnimations, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: "niceVerticalNavigation", template: "<div class=\"nice-vertical-navigation-wrapper\">\n    <!-- Header -->\n    <div class=\"nice-vertical-navigation-header\">\n        <ng-content select=\"[niceVerticalNavigationHeader]\"></ng-content>\n    </div>\n\n    <!-- Content -->\n    <div\n        class=\"nice-vertical-navigation-content\"\n        niceScrollbar\n        [niceScrollbarOptions]=\"{ wheelPropagation: inner, suppressScrollX: true }\"\n        #navigationContent\n    >\n        <!-- Content header -->\n        <div class=\"nice-vertical-navigation-content-header\">\n            <ng-content select=\"[niceVerticalNavigationContentHeader]\"></ng-content>\n        </div>\n\n        <!-- Items -->\n        <div *ngFor=\"let item of navigation; trackBy: trackByFn\" [@.disabled]=\"!animateNextNavChange\" @slideInRight>\n            <!-- Skip the hidden items -->\n            <ng-container *ngIf=\"!(item | niceShouldHide | async)\">\n                <!-- Aside -->\n                <nice-vertical-navigation-aside-item\n                    *ngIf=\"item.type === 'aside'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                    [activeItemId]=\"activeAsideItemId\"\n                    [autoCollapse]=\"autoCollapse\"\n                    [skipChildren]=\"true\"\n                    [showTooltips]=\"showTooltips\"\n                    [tooltipPosition]=\"tooltipPosition\"\n                    (click)=\"toggleAside(item)\"\n                ></nice-vertical-navigation-aside-item>\n\n                <!-- Basic -->\n                <nice-vertical-navigation-basic-item\n                    *ngIf=\"item.type === 'basic'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                    [showTooltips]=\"showTooltips\"\n                    [tooltipPosition]=\"tooltipPosition\"\n                ></nice-vertical-navigation-basic-item>\n\n                <!-- Collapsable -->\n                <nice-vertical-navigation-collapsable-item\n                    *ngIf=\"item.type === 'collapsable'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                    [autoCollapse]=\"autoCollapse\"\n                    [showTooltips]=\"showTooltips\"\n                    [tooltipPosition]=\"tooltipPosition\"\n                ></nice-vertical-navigation-collapsable-item>\n\n                <!-- Divider -->\n                <nice-vertical-navigation-divider-item\n                    *ngIf=\"item.type === 'divider'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                ></nice-vertical-navigation-divider-item>\n\n                <!-- Group -->\n                <nice-vertical-navigation-group-item\n                    *ngIf=\"item.type === 'group'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                    [autoCollapse]=\"autoCollapse\"\n                    [showTooltips]=\"showTooltips\"\n                    [tooltipPosition]=\"tooltipPosition\"\n                ></nice-vertical-navigation-group-item>\n\n                <!-- Spacer -->\n                <nice-vertical-navigation-spacer-item\n                    *ngIf=\"item.type === 'spacer'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                ></nice-vertical-navigation-spacer-item>\n            </ng-container>\n        </div>\n\n        <!-- Content footer -->\n        <div class=\"nice-vertical-navigation-content-footer\">\n            <ng-content select=\"[niceVerticalNavigationContentFooter]\"></ng-content>\n        </div>\n\n    </div>\n\n    <!-- Footer -->\n    <div class=\"nice-vertical-navigation-footer\">\n        <ng-content select=\"[niceVerticalNavigationFooter]\"></ng-content>\n    </div>\n</div>\n\n<!-- Aside -->\n<div\n    class=\"nice-vertical-navigation-aside-wrapper\"\n    *ngIf=\"activeAsideItemId\"\n    niceScrollbar\n    [niceScrollbarOptions]=\"{ wheelPropagation: false, suppressScrollX: true }\"\n    [@fadeInLeft]=\"position === 'left'\"\n    [@fadeInRight]=\"position === 'right'\"\n    [@fadeOutLeft]=\"position === 'left'\"\n    [@fadeOutRight]=\"position === 'right'\"\n>\n\n    <!-- Items -->\n    <ng-container *ngFor=\"let item of navigation; trackBy: trackByFn\">\n        <!-- Skip the hidden items -->\n        <ng-container *ngIf=\"(item.hidden && !item.hidden(item)) || !item.hidden\">\n            <!-- Aside -->\n            <nice-vertical-navigation-aside-item\n                *ngIf=\"item.type === 'aside' && item.id === activeAsideItemId\"\n                [item]=\"item\"\n                [name]=\"name\"\n                [autoCollapse]=\"autoCollapse\"\n                [showTooltips]=\"showTooltips\"\n                [tooltipPosition]=\"tooltipPosition\"\n            ></nice-vertical-navigation-aside-item>\n        </ng-container>\n    </ng-container>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: NiceNavigationService }, { type: NiceUtilsService }, { type: i1$c.AnimationBuilder }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$b.Router }, { type: i1$7.ScrollStrategyOptions }, { type: NiceNavigationHintService }]; }, propDecorators: { name: [{
                 type: Input
             }], appearance: [{
@@ -9627,8 +9672,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImpor
                 type: Input
             }], position: [{
                 type: Input
+            }], showTooltips: [{
+                type: Input
             }], transparentOverlay: [{
                 type: Input
+            }], tooltipPosition: [{
+                type: Input
             }], appearanceChanged: [{
                 type: Output
             }], modeChanged: [{