@recursyve/nice-ui-kit.v2 15.0.0-beta.125 → 15.0.0-beta.127

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

@@ -4,8 +4,8 @@ import { HttpContextToken, HttpResponse, HttpContext, HttpParams } from '@angula
 import * as i0 from '@angular/core';
 import { Injectable, NgModule, EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, HostBinding, InjectionToken, Directive, HostListener, forwardRef, TemplateRef, Optional, Inject, ViewChild, ContentChild, ViewChildren, Self, Pipe, ElementRef, PLATFORM_ID, ContentChildren, SimpleChange, SkipSelf } from '@angular/core';
 import { plainToInstance } from 'class-transformer';
-import { map, filter, takeUntil, tap, take, finalize, debounceTime as debounceTime$1, delay, switchMap } from 'rxjs/operators';
-import { catchError, ReplaySubject, Subject, BehaviorSubject, mergeMap, from, isObservable, firstValueFrom, debounceTime, distinctUntilChanged, startWith, pairwise, tap as tap$1, Observable, combineLatest, defer, timer, of, fromEvent, merge as merge$1 } from 'rxjs';
+import { map, filter, takeUntil, tap, finalize, take, debounceTime as debounceTime$1, delay, switchMap as switchMap$1 } from 'rxjs/operators';
+import { catchError, ReplaySubject, Subject, BehaviorSubject, distinctUntilChanged, switchMap, defer, EMPTY, isObservable, mergeMap, from, firstValueFrom, debounceTime, startWith, pairwise, tap as tap$1, Observable, combineLatest, timer, of, fromEvent, merge as merge$1 } from 'rxjs';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i2 from '@angular/common';
 import { CommonModule, DatePipe, CurrencyPipe, DOCUMENT, isPlatformServer, NgForOf, NgIf, AsyncPipe, UpperCasePipe } from '@angular/common';
@@ -34,6 +34,7 @@ import * as i1$4 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import * as i10 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { fromPromise } from 'rxjs/internal/observable/innerFrom';
 import { CdkStepper, CdkStep, CdkStepperModule } from '@angular/cdk/stepper';
 import * as i1$6 from '@recursyve/ngx-form-generator';
 import { registerAsyncValidatorDecorator, AsyncValidator, NGX_FORM_GENERATOR_ASYNC_VALIDATORS, DynamicGroup } from '@recursyve/ngx-form-generator';
@@ -63,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';
@@ -944,10 +946,10 @@ class NiceAlertComponent {
     }
 }
 NiceAlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", 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: "15.2.9", 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.MatIconButton, selector: "button[mat-icon-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: "15.2.9", 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.MatIconButton, selector: "button[mat-icon-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: "15.2.9", 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: [{
@@ -2692,15 +2694,22 @@ class NiceAsyncTypeaheadService {
             isLastPage: false,
             excludedIds: []
         });
-        this.loading$ = this.state$.pipe(map(x => x.loading));
-        this.loadingPage$ = this.state$.pipe(map(x => x.loadingPage));
-        this.active$ = this.state$.pipe(map(x => x.active));
-        this.items$ = this.state$.pipe(map(x => x.items));
-        this.filteredItems$ = this.state$.pipe(map(x => x.items.filter(item => !x.excludedIds.includes(item.id))));
+        this.loading$ = this.state$.pipe(map(x => x.loading), distinctUntilChanged());
+        this.loadingPage$ = this.state$.pipe(map(x => x.loadingPage), distinctUntilChanged());
+        this.active$ = this.state$.pipe(map(x => x.active), distinctUntilChanged());
+        this.items$ = this.state$.pipe(map(x => x.items), distinctUntilChanged());
+        this.filteredItems$ = this.state$.pipe(map(x => x.items.filter(item => !x.excludedIds.includes(item.id))), distinctUntilChanged());
+        this.requests$ = new Subject();
         if (!this.apis) {
             this.apis = [];
         }
     }
+    listenForRequest() {
+        this.requestsSubscription$ = this.requests$.pipe(switchMap((request) => this.sendRequest(request))).subscribe();
+    }
+    closeRequestSubscription() {
+        this.requestsSubscription$?.unsubscribe();
+    }
     async initialize(resource, options) {
         const { initialized } = this.state$.getValue();
         if (initialized) {
@@ -2708,74 +2717,76 @@ class NiceAsyncTypeaheadService {
         }
         return this.search(resource, "", options);
     }
-    async search(resource, searchQuery, options) {
-        const { active, initialized } = this.state$.getValue();
-        if (active && !initialized) {
-            this.state$.next({
-                ...this.state$.value,
-                initialized: true
-            });
-            return;
-        }
-        const api = this.apis.find(x => x.resource === resource);
-        if (!api) {
-            return;
-        }
-        try {
-            this.state$.next({
-                ...this.state$.value,
-                loading: true,
-                initialized: true,
-                page: 0,
-                isLastPage: false,
-                searchQuery
-            });
-            const result = await api.search(searchQuery, 0, options);
+    sendRequest(request) {
+        return defer(() => {
+            const { active, initialized } = this.state$.getValue();
+            if (active && !initialized) {
+                this.state$.next({
+                    ...this.state$.value,
+                    initialized: true
+                });
+                return EMPTY;
+            }
+            const api = this.apis.find(x => x.resource === request.resource);
+            if (!api) {
+                return EMPTY;
+            }
+            if (request.page === 0) {
+                this.state$.next({
+                    ...this.state$.value,
+                    loading: true,
+                    initialized: true,
+                    page: request.page,
+                    isLastPage: false,
+                    searchQuery: request.searchQuery
+                });
+            }
+            else {
+                this.state$.next({
+                    ...this.state$.value,
+                    loadingPage: true
+                });
+            }
+            const result = api.search(request.searchQuery, request.page, request.searchOptions);
+            if (isObservable(result)) {
+                return result;
+            }
+            return fromPromise(result);
+        }).pipe(map((result) => {
             this.state$.next({
                 ...this.state$.value,
-                items: result.items,
+                items: request.page === 0 ? result.items : [...(this.state$.value.items ?? []), ...result.items],
                 page: result.nextPage ? result.nextPage : this.state$.value.page,
                 isLastPage: !result.nextPage
             });
-        }
-        catch { }
-        finally {
+        }), catchError(() => EMPTY), finalize(() => {
             this.state$.next({
                 ...this.state$.value,
-                loading: false
+                loading: false,
+                loadingPage: false
             });
-        }
+        }));
     }
-    async loadMore(resource, options) {
+    search(resource, searchQuery, options) {
+        this.requests$.next({
+            resource,
+            searchQuery,
+            searchOptions: options,
+            page: 0
+        });
+    }
+    loadMore(resource, options) {
         const { loadingPage, isLastPage } = this.state$.getValue();
         if (loadingPage || isLastPage) {
             return;
         }
-        const api = this.apis.find(x => x.resource === resource);
-        if (!api) {
-            return;
-        }
-        try {
-            this.state$.next({
-                ...this.state$.value,
-                loadingPage: true
-            });
-            const { searchQuery, page, items } = this.state$.getValue();
-            const result = await api.search(searchQuery, page, options);
-            this.state$.next({
-                ...this.state$.value,
-                items: [...items, ...result.items],
-                page: result.nextPage ? result.nextPage : this.state$.value.page,
-                isLastPage: !result.nextPage
-            });
-        }
-        catch { }
-        finally {
-            this.state$.next({
-                ...this.state$.value,
-                loadingPage: false
-            });
-        }
+        const { searchQuery, page } = this.state$.getValue();
+        this.requests$.next({
+            resource,
+            page,
+            searchQuery,
+            searchOptions: options,
+        });
     }
     getActive() {
         return this.state$.value.active;
@@ -2985,6 +2996,7 @@ class NiceAsyncTypeaheadComponent extends _BaseAsyncTypeaheadComponent {
         }
     }
     ngOnInit() {
+        this.service.listenForRequest();
         if (this.ngControl) {
             if (this.ngControl.disabled) {
                 this.searchControl.disable({ emitEvent: false });
@@ -3015,13 +3027,15 @@ class NiceAsyncTypeaheadComponent extends _BaseAsyncTypeaheadComponent {
         }
     }
     ngOnDestroy() {
+        this.service.closeRequestSubscription();
         this.valueChangesSub$.unsubscribe();
     }
     ngOnChanges(changes) {
         if ("searchOptions" in changes) {
             const change = changes.searchOptions;
             if (!change.isFirstChange() && change.currentValue !== change.previousValue && this.autoReload) {
-                this.service.search(this.resource, "", change.currentValue).then(() => this.checkIfValueStillExist());
+                this.service.search(this.resource, "", change.currentValue);
+                this.service.items$.pipe(take(1)).subscribe(() => this.checkIfValueStillExist());
             }
         }
         if ("filterFn" in changes) {
@@ -5347,10 +5361,15 @@ class NiceControlStatusDirective {
         this.vcr = vcr;
         this.formField = formField;
         this.translateService = translateService;
+        this.unsubscribeAll$ = new Subject();
     }
     ngAfterViewInit() {
         this.control = this.formField._control.ngControl;
-        this.control.statusChanges.subscribe(() => this.onChange());
+        this.control.statusChanges.pipe(takeUntil(this.unsubscribeAll$)).subscribe(() => this.onChange());
+    }
+    ngOnDestroy() {
+        this.unsubscribeAll$.next();
+        this.unsubscribeAll$.complete();
     }
     onChange() {
         if (this.control.pending) {
@@ -7747,6 +7766,8 @@ class NiceHorizontalNavigationBasicItemComponent {
         this._changeDetectorRef = _changeDetectorRef;
         this._niceNavigationService = _niceNavigationService;
         this._unsubscribeAll = new Subject();
+        this.showTooltips = false;
+        this.tooltipPosition = "after";
     }
     // -----------------------------------------------------------------------------------------------------
     // @ Lifecycle hooks
@@ -7773,14 +7794,18 @@ class NiceHorizontalNavigationBasicItemComponent {
     }
 }
 NiceHorizontalNavigationBasicItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceHorizontalNavigationBasicItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: NiceNavigationService }], target: i0.ɵɵFactoryTarget.Component });
-NiceHorizontalNavigationBasicItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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: "[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: "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: "15.2.9", 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: "[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: "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: "15.2.9", 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 {
@@ -7864,6 +7889,8 @@ class NiceHorizontalNavigationBranchItemComponent {
         this._niceNavigationService = _niceNavigationService;
         this._unsubscribeAll = new Subject();
         this.child = false;
+        this.showTooltips = false;
+        this.tooltipPosition = "after";
     }
     // -----------------------------------------------------------------------------------------------------
     // @ Lifecycle hooks
@@ -7900,10 +7927,10 @@ class NiceHorizontalNavigationBranchItemComponent {
     }
 }
 NiceHorizontalNavigationBranchItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceHorizontalNavigationBranchItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: NiceNavigationService }], target: i0.ɵɵFactoryTarget.Component });
-NiceHorizontalNavigationBranchItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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: "15.2.9", 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: "15.2.9", 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: [{
@@ -7913,6 +7940,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
             }], matMenu: [{
                 type: ViewChild,
                 args: ["matMenu", { static: true }]
+            }], showTooltips: [{
+                type: Input
+            }], tooltipPosition: [{
+                type: Input
             }] } });
 
 class NiceHorizontalNavigationSpacerItemComponent {
@@ -7973,15 +8004,21 @@ class NiceHorizontalNavigationComponent extends NiceNavigationComponent {
     constructor(_changeDetectorRef, _niceNavigationService, _niceUtilsService) {
         super(_changeDetectorRef, _niceNavigationService, _niceUtilsService);
         this.name = this._niceUtilsService.randomId();
+        this.showTooltips = false;
+        this.tooltipPosition = "after";
     }
 }
 NiceHorizontalNavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", 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: "15.2.9", 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: "15.2.9", 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: "15.2.9", 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
             }] } });
@@ -8545,6 +8582,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) {
@@ -8578,14 +8617,18 @@ class NiceVerticalNavigationBasicItemComponent {
     }
 }
 NiceVerticalNavigationBasicItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", 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: "15.2.9", 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.RouterLink, selector: "[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: "15.2.9", 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.RouterLink, selector: "[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: "15.2.9", 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 {
@@ -8685,6 +8728,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);
@@ -8902,16 +8947,20 @@ class NiceVerticalNavigationCollapsableItemComponent {
     }
 }
 NiceVerticalNavigationCollapsableItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", 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: "15.2.9", 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: "15.2.9", 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: "15.2.9", 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"]
@@ -8925,6 +8974,8 @@ class NiceVerticalNavigationGroupItemComponent {
         this._changeDetectorRef = _changeDetectorRef;
         this._niceNavigationService = _niceNavigationService;
         this._unsubscribeAll = new Subject();
+        this.showTooltips = false;
+        this.tooltipPosition = "after";
     }
     // -----------------------------------------------------------------------------------------------------
     // @ Lifecycle hooks
@@ -8960,16 +9011,20 @@ class NiceVerticalNavigationGroupItemComponent {
     }
 }
 NiceVerticalNavigationGroupItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NiceVerticalNavigationGroupItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: NiceNavigationService }], target: i0.ɵɵFactoryTarget.Component });
-NiceVerticalNavigationGroupItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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: "15.2.9", 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: "15.2.9", 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 {
@@ -8981,6 +9036,8 @@ class NiceVerticalNavigationAsideItemComponent {
         this._router = _router;
         this._niceNavigationService = _niceNavigationService;
         this._unsubscribeAll = new Subject();
+        this.showTooltips = false;
+        this.tooltipPosition = "after";
         this.active = false;
     }
     // -----------------------------------------------------------------------------------------------------
@@ -9079,10 +9136,10 @@ class NiceVerticalNavigationAsideItemComponent {
     }
 }
 NiceVerticalNavigationAsideItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", 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: "15.2.9", 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: "15.2.9", 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: "15.2.9", 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: [{
@@ -9091,8 +9148,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Input
             }], name: [{
                 type: Input
+            }], showTooltips: [{
+                type: Input
             }], skipChildren: [{
                 type: Input
+            }], tooltipPosition: [{
+                type: Input
             }] } });
 
 class NiceVerticalNavigationComponent extends NiceNavigationComponent {
@@ -9131,7 +9192,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();
@@ -9599,10 +9662,10 @@ class NiceVerticalNavigationComponent extends NiceNavigationComponent {
     }
 }
 NiceVerticalNavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", 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: "15.2.9", 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: "15.2.9", 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: "15.2.9", 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: [{
@@ -9621,8 +9684,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Input
             }], position: [{
                 type: Input
+            }], showTooltips: [{
+                type: Input
             }], transparentOverlay: [{
                 type: Input
+            }], tooltipPosition: [{
+                type: Input
             }], appearanceChanged: [{
                 type: Output
             }], modeChanged: [{
@@ -9901,7 +9968,7 @@ class NiceSweetAlertService {
     }
     success(...args) {
         const [titleKey, messageKey, buttonsKey, params] = this.transformArgs(args);
-        return this.getTranslations(titleKey, messageKey, buttonsKey, params).pipe(switchMap(([title, message, buttons]) => {
+        return this.getTranslations(titleKey, messageKey, buttonsKey, params).pipe(switchMap$1(([title, message, buttons]) => {
             return this.matDialog
                 .open(this.modal, {
                 panelClass: "nice-alert-modal",
@@ -9917,7 +9984,7 @@ class NiceSweetAlertService {
     }
     warning(...args) {
         const [titleKey, messageKey, buttonsKey, params] = this.transformArgs(args);
-        return this.getTranslations(titleKey, messageKey, buttonsKey, params).pipe(switchMap(([title, message, buttons]) => {
+        return this.getTranslations(titleKey, messageKey, buttonsKey, params).pipe(switchMap$1(([title, message, buttons]) => {
             return this.matDialog
                 .open(this.modal, {
                 panelClass: "nice-alert-modal",
@@ -9933,7 +10000,7 @@ class NiceSweetAlertService {
     }
     info(...args) {
         const [titleKey, messageKey, buttonsKey, params] = this.transformArgs(args);
-        return this.getTranslations(titleKey, messageKey, buttonsKey, params).pipe(switchMap(([title, message, buttons]) => {
+        return this.getTranslations(titleKey, messageKey, buttonsKey, params).pipe(switchMap$1(([title, message, buttons]) => {
             return this.matDialog
                 .open(this.modal, {
                 panelClass: "nice-alert-modal",