@recursyve/nice-ui-kit.v2 13.2.0-beta.117 → 13.2.0-beta.119

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

@@ -1754,14 +1754,14 @@ class NiceAssetsCarouselComponent {
         this.activeChange.emit(this._active);
     }
     writeValue(assets) {
-        var _a;
         this._assets = assets !== null && assets !== void 0 ? assets : [];
-        if ((_a = this._assets) === null || _a === void 0 ? void 0 : _a.length) {
-            this._activeAsset = this._assets[this._active];
-        }
-        else {
+        if (this._assets.length === 0) {
+            this._activeAsset = null;
             this._lastAsset = true;
         }
+        else if (this._assets.length > 0) {
+            this._activeAsset = this._assets[this._active];
+        }
     }
     registerOnChange(fn) {
         this.propagate = fn;
@@ -7837,13 +7837,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }] });
 
+class NiceNavigationHintService {
+    constructor() {
+        this.hasActiveHint$ = new BehaviorSubject(false);
+    }
+    get hasActiveHint() {
+        return this.hasActiveHint$.value;
+    }
+    setActiveHint(isActive) {
+        this.hasActiveHint$.next(isActive);
+    }
+}
+NiceNavigationHintService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceNavigationHintService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+NiceNavigationHintService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceNavigationHintService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceNavigationHintService, decorators: [{
+            type: Injectable
+        }] });
+
 class NiceShowHintDirective {
-    constructor(_overlay, _elementRef, _viewContainerRef, _ngZone, _platform) {
+    constructor(_overlay, _elementRef, _viewContainerRef, _ngZone, _platform, _hintService) {
         this._overlay = _overlay;
         this._elementRef = _elementRef;
         this._viewContainerRef = _viewContainerRef;
         this._ngZone = _ngZone;
         this._platform = _platform;
+        this._hintService = _hintService;
         this.shouldShow = false;
         this._pointerExitEventsInitialized = false;
         this._passiveListeners = [];
@@ -7866,11 +7884,13 @@ class NiceShowHintDirective {
         const overlayRef = this._createOverlay();
         this._detach();
         this._hintInstance = overlayRef.attach(this._portal).instance;
+        this._hintService.setActiveHint(true);
     }
     hide() {
         const instance = this._hintInstance;
         if (instance) {
             this._detach();
+            this._hintService.setActiveHint(false);
         }
     }
     _createOverlay() {
@@ -7899,7 +7919,7 @@ class NiceShowHintDirective {
             .withFlexibleDimensions(false);
         strategy.positionChanges.pipe(takeUntil(this.unsubscribeAll$)).subscribe(change => {
             if (this._hintInstance) {
-                if (change.scrollableViewProperties.isOverlayClipped && this._hintInstance.isVisible()) {
+                if (change.scrollableViewProperties.isOverlayClipped) {
                     // After position changes occur and the overlay is clipped by
                     // a parent scrollable then close the tooltip.
                     this._ngZone.run(() => this.hide());
@@ -7913,10 +7933,10 @@ class NiceShowHintDirective {
             .detachments()
             .pipe(takeUntil(this.unsubscribeAll$))
             .subscribe(() => this._detach());
-        this._overlayRef
+        /*this._overlayRef
             .outsidePointerEvents()
             .pipe(takeUntil(this.unsubscribeAll$))
-            .subscribe(() => { var _a; return (_a = this._hintInstance) === null || _a === void 0 ? void 0 : _a._handleBodyInteraction(); });
+            .subscribe(() => this._hintInstance?._handleBodyInteraction());*/
         return this._overlayRef;
     }
     _detach() {
@@ -7926,7 +7946,7 @@ class NiceShowHintDirective {
         this._hintInstance = null;
     }
     _isHintVisible() {
-        return !!this._hintInstance && this._hintInstance.isVisible();
+        return !!this._hintInstance;
     }
     _setupPointerEnterEventsIfNeeded() {
         // Optimization: Defer hooking up events if there's no message or the tooltip is disabled.
@@ -7976,12 +7996,12 @@ class NiceShowHintDirective {
         });
     }
 }
-NiceShowHintDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceShowHintDirective, deps: [{ token: i1$4.Overlay }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.NgZone }, { token: i1$d.Platform }], target: i0.ɵɵFactoryTarget.Directive });
+NiceShowHintDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceShowHintDirective, deps: [{ token: i1$4.Overlay }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.NgZone }, { token: i1$d.Platform }, { token: NiceNavigationHintService }], target: i0.ɵɵFactoryTarget.Directive });
 NiceShowHintDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: NiceShowHintDirective, selector: "[niceShowHint]", inputs: { shouldShow: "shouldShow", item: "item" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceShowHintDirective, decorators: [{
             type: Directive,
             args: [{ selector: "[niceShowHint]" }]
-        }], ctorParameters: function () { return [{ type: i1$4.Overlay }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i0.NgZone }, { type: i1$d.Platform }]; }, propDecorators: { shouldShow: [{
+        }], ctorParameters: function () { return [{ type: i1$4.Overlay }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i0.NgZone }, { type: i1$d.Platform }, { type: NiceNavigationHintService }]; }, propDecorators: { shouldShow: [{
                 type: Input
             }], item: [{
                 type: Input
@@ -8580,13 +8600,14 @@ class NiceVerticalNavigationComponent extends NiceNavigationComponent {
     /**
      * Constructor
      */
-    constructor(_changeDetectorRef, _niceNavigationService, _niceUtilsService, _animationBuilder, _elementRef, _renderer2, _router, _scrollStrategyOptions) {
+    constructor(_changeDetectorRef, _niceNavigationService, _niceUtilsService, _animationBuilder, _elementRef, _renderer2, _router, _scrollStrategyOptions, _hintService) {
         super(_changeDetectorRef, _niceNavigationService, _niceUtilsService);
         this._animationBuilder = _animationBuilder;
         this._elementRef = _elementRef;
         this._renderer2 = _renderer2;
         this._router = _router;
         this._scrollStrategyOptions = _scrollStrategyOptions;
+        this._hintService = _hintService;
         this._animationsEnabled = false;
         this._scrollStrategy = this._scrollStrategyOptions.block();
         this.name = this._niceUtilsService.randomId();
@@ -8596,11 +8617,13 @@ class NiceVerticalNavigationComponent extends NiceNavigationComponent {
         this.mode = "side";
         this.opened = true;
         this.hovered = false;
+        this.hasHint = false;
         this.position = "left";
         this.transparentOverlay = false;
         this.appearanceChanged = new EventEmitter();
         this.modeChanged = new EventEmitter();
         this.openedChanged = new EventEmitter();
+        this.hoveredChanged = new EventEmitter();
         this.positionChanged = new EventEmitter();
         this.activeAsideItemId = null;
         this.onCollapsableItemCollapsed = new ReplaySubject(1);
@@ -8635,7 +8658,8 @@ class NiceVerticalNavigationComponent extends NiceNavigationComponent {
             "nice-vertical-navigation-mode-side": this.mode === "side",
             "nice-vertical-navigation-opened": this.opened,
             "nice-vertical-navigation-position-left": this.position === "left",
-            "nice-vertical-navigation-position-right": this.position === "right"
+            "nice-vertical-navigation-position-right": this.position === "right",
+            "nice-vertical-navigation-has-hint": this.hasHint
         };
     }
     /**
@@ -8764,6 +8788,10 @@ class NiceVerticalNavigationComponent extends NiceNavigationComponent {
                 this.closeAside();
             }
         });
+        this._hintService.hasActiveHint$.pipe(takeUntil(this._unsubscribeAll)).subscribe(hasHint => {
+            this.hasHint = hasHint;
+            this.hoveredChanged.next(this.hovered || this.hasHint);
+        });
     }
     /**
      * After view init
@@ -9028,6 +9056,7 @@ class NiceVerticalNavigationComponent extends NiceNavigationComponent {
         this._enableAnimations();
         // Set the hovered
         this.hovered = true;
+        this.hoveredChanged.next(this.hovered);
     }
     /**
      * On mouseleave
@@ -9037,6 +9066,7 @@ class NiceVerticalNavigationComponent extends NiceNavigationComponent {
         this._enableAnimations();
         // Set the hovered
         this.hovered = false;
+        this.hoveredChanged.next(this.hovered || this.hasHint);
     }
     /**
      * Open/close the navigation
@@ -9063,12 +9093,12 @@ class NiceVerticalNavigationComponent extends NiceNavigationComponent {
         this.openedChanged.next(open);
     }
 }
-NiceVerticalNavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceVerticalNavigationComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: NiceNavigationService }, { token: NiceUtilsService }, { token: i1$a.AnimationBuilder }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$9.Router }, { token: i1$4.ScrollStrategyOptions }], target: i0.ɵɵFactoryTarget.Component });
-NiceVerticalNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: NiceVerticalNavigationComponent, selector: "nice-vertical-navigation", inputs: { name: "name", appearance: "appearance", autoCollapse: "autoCollapse", inner: "inner", mode: "mode", opened: "opened", hovered: "hovered", position: "position", transparentOverlay: "transparentOverlay", navigation: "navigation" }, outputs: { appearanceChanged: "appearanceChanged", modeChanged: "modeChanged", openedChanged: "openedChanged", 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", components: [{ type: NiceVerticalNavigationAsideItemComponent, selector: "nice-vertical-navigation-aside-item", inputs: ["activeItemId", "autoCollapse", "item", "name", "skipChildren"] }, { type: NiceVerticalNavigationBasicItemComponent, selector: "nice-vertical-navigation-basic-item", inputs: ["item", "name"] }, { type: NiceVerticalNavigationCollapsableItemComponent, selector: "nice-vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item", "name"] }, { type: NiceVerticalNavigationDividerItemComponent, selector: "nice-vertical-navigation-divider-item", inputs: ["item", "name"] }, { type: NiceVerticalNavigationGroupItemComponent, selector: "nice-vertical-navigation-group-item", inputs: ["autoCollapse", "item", "name"] }, { type: NiceVerticalNavigationSpacerItemComponent, selector: "nice-vertical-navigation-spacer-item", inputs: ["item", "name"] }], directives: [{ type: NiceScrollbarDirective, selector: "[niceScrollbar]", inputs: ["niceScrollbar", "niceScrollbarOptions"], exportAs: ["niceScrollbar"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i6.AsyncPipe, "niceShouldHide": NiceShouldHidePipe }, animations: niceAnimations, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+NiceVerticalNavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceVerticalNavigationComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: NiceNavigationService }, { token: NiceUtilsService }, { token: i1$a.AnimationBuilder }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$9.Router }, { token: i1$4.ScrollStrategyOptions }, { token: NiceNavigationHintService }], target: i0.ɵɵFactoryTarget.Component });
+NiceVerticalNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: NiceVerticalNavigationComponent, selector: "nice-vertical-navigation", inputs: { name: "name", appearance: "appearance", autoCollapse: "autoCollapse", inner: "inner", mode: "mode", opened: "opened", hovered: "hovered", hasHint: "hasHint", position: "position", transparentOverlay: "transparentOverlay", navigation: "navigation" }, outputs: { appearanceChanged: "appearanceChanged", modeChanged: "modeChanged", openedChanged: "openedChanged", hoveredChanged: "hoveredChanged", positionChanged: "positionChanged" }, host: { listeners: { "mouseenter": "_onMouseenter()", "mouseleave": "_onMouseleave()" }, properties: { "class": "this.classList", "style": "this.styleList" } }, viewQueries: [{ propertyName: "_navigationContentEl", first: true, predicate: ["navigationContent"], descendants: true }, { propertyName: "niceScrollbarDirectives", predicate: NiceScrollbarDirective, descendants: true }], exportAs: ["niceVerticalNavigation"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"nice-vertical-navigation-wrapper\">\n    <!-- Header -->\n    <div class=\"nice-vertical-navigation-header\">\n        <ng-content select=\"[niceVerticalNavigationHeader]\"></ng-content>\n    </div>\n\n    <!-- Content -->\n    <div\n        class=\"nice-vertical-navigation-content\"\n        niceScrollbar\n        [niceScrollbarOptions]=\"{ wheelPropagation: inner, suppressScrollX: true }\"\n        #navigationContent\n    >\n        <!-- Content header -->\n        <div class=\"nice-vertical-navigation-content-header\">\n            <ng-content select=\"[niceVerticalNavigationContentHeader]\"></ng-content>\n        </div>\n\n        <!-- Items -->\n        <div *ngFor=\"let item of navigation; trackBy: trackByFn\" [@.disabled]=\"!animateNextNavChange\" @slideInRight>\n            <!-- Skip the hidden items -->\n            <ng-container *ngIf=\"!(item | niceShouldHide | async)\">\n                <!-- Aside -->\n                <nice-vertical-navigation-aside-item\n                    *ngIf=\"item.type === 'aside'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                    [activeItemId]=\"activeAsideItemId\"\n                    [autoCollapse]=\"autoCollapse\"\n                    [skipChildren]=\"true\"\n                    (click)=\"toggleAside(item)\"\n                ></nice-vertical-navigation-aside-item>\n\n                <!-- Basic -->\n                <nice-vertical-navigation-basic-item\n                    *ngIf=\"item.type === 'basic'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                ></nice-vertical-navigation-basic-item>\n\n                <!-- Collapsable -->\n                <nice-vertical-navigation-collapsable-item\n                    *ngIf=\"item.type === 'collapsable'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                    [autoCollapse]=\"autoCollapse\"\n                ></nice-vertical-navigation-collapsable-item>\n\n                <!-- Divider -->\n                <nice-vertical-navigation-divider-item\n                    *ngIf=\"item.type === 'divider'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                ></nice-vertical-navigation-divider-item>\n\n                <!-- Group -->\n                <nice-vertical-navigation-group-item\n                    *ngIf=\"item.type === 'group'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                    [autoCollapse]=\"autoCollapse\"\n                ></nice-vertical-navigation-group-item>\n\n                <!-- Spacer -->\n                <nice-vertical-navigation-spacer-item\n                    *ngIf=\"item.type === 'spacer'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                ></nice-vertical-navigation-spacer-item>\n            </ng-container>\n        </div>\n\n        <!-- Content footer -->\n        <div class=\"nice-vertical-navigation-content-footer\">\n            <ng-content select=\"[niceVerticalNavigationContentFooter]\"></ng-content>\n        </div>\n\n    </div>\n\n    <!-- Footer -->\n    <div class=\"nice-vertical-navigation-footer\">\n        <ng-content select=\"[niceVerticalNavigationFooter]\"></ng-content>\n    </div>\n</div>\n\n<!-- Aside -->\n<div\n    class=\"nice-vertical-navigation-aside-wrapper\"\n    *ngIf=\"activeAsideItemId\"\n    niceScrollbar\n    [niceScrollbarOptions]=\"{ wheelPropagation: false, suppressScrollX: true }\"\n    [@fadeInLeft]=\"position === 'left'\"\n    [@fadeInRight]=\"position === 'right'\"\n    [@fadeOutLeft]=\"position === 'left'\"\n    [@fadeOutRight]=\"position === 'right'\"\n>\n\n    <!-- Items -->\n    <ng-container *ngFor=\"let item of navigation; trackBy: trackByFn\">\n        <!-- Skip the hidden items -->\n        <ng-container *ngIf=\"(item.hidden && !item.hidden(item)) || !item.hidden\">\n            <!-- Aside -->\n            <nice-vertical-navigation-aside-item\n                *ngIf=\"item.type === 'aside' && item.id === activeAsideItemId\"\n                [item]=\"item\"\n                [name]=\"name\"\n                [autoCollapse]=\"autoCollapse\"\n            ></nice-vertical-navigation-aside-item>\n        </ng-container>\n    </ng-container>\n</div>\n", components: [{ type: NiceVerticalNavigationAsideItemComponent, selector: "nice-vertical-navigation-aside-item", inputs: ["activeItemId", "autoCollapse", "item", "name", "skipChildren"] }, { type: NiceVerticalNavigationBasicItemComponent, selector: "nice-vertical-navigation-basic-item", inputs: ["item", "name"] }, { type: NiceVerticalNavigationCollapsableItemComponent, selector: "nice-vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item", "name"] }, { type: NiceVerticalNavigationDividerItemComponent, selector: "nice-vertical-navigation-divider-item", inputs: ["item", "name"] }, { type: NiceVerticalNavigationGroupItemComponent, selector: "nice-vertical-navigation-group-item", inputs: ["autoCollapse", "item", "name"] }, { type: NiceVerticalNavigationSpacerItemComponent, selector: "nice-vertical-navigation-spacer-item", inputs: ["item", "name"] }], directives: [{ type: NiceScrollbarDirective, selector: "[niceScrollbar]", inputs: ["niceScrollbar", "niceScrollbarOptions"], exportAs: ["niceScrollbar"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i6.AsyncPipe, "niceShouldHide": NiceShouldHidePipe }, animations: niceAnimations, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceVerticalNavigationComponent, decorators: [{
             type: Component,
             args: [{ selector: "nice-vertical-navigation", animations: niceAnimations, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: "niceVerticalNavigation", template: "<div class=\"nice-vertical-navigation-wrapper\">\n    <!-- Header -->\n    <div class=\"nice-vertical-navigation-header\">\n        <ng-content select=\"[niceVerticalNavigationHeader]\"></ng-content>\n    </div>\n\n    <!-- Content -->\n    <div\n        class=\"nice-vertical-navigation-content\"\n        niceScrollbar\n        [niceScrollbarOptions]=\"{ wheelPropagation: inner, suppressScrollX: true }\"\n        #navigationContent\n    >\n        <!-- Content header -->\n        <div class=\"nice-vertical-navigation-content-header\">\n            <ng-content select=\"[niceVerticalNavigationContentHeader]\"></ng-content>\n        </div>\n\n        <!-- Items -->\n        <div *ngFor=\"let item of navigation; trackBy: trackByFn\" [@.disabled]=\"!animateNextNavChange\" @slideInRight>\n            <!-- Skip the hidden items -->\n            <ng-container *ngIf=\"!(item | niceShouldHide | async)\">\n                <!-- Aside -->\n                <nice-vertical-navigation-aside-item\n                    *ngIf=\"item.type === 'aside'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                    [activeItemId]=\"activeAsideItemId\"\n                    [autoCollapse]=\"autoCollapse\"\n                    [skipChildren]=\"true\"\n                    (click)=\"toggleAside(item)\"\n                ></nice-vertical-navigation-aside-item>\n\n                <!-- Basic -->\n                <nice-vertical-navigation-basic-item\n                    *ngIf=\"item.type === 'basic'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                ></nice-vertical-navigation-basic-item>\n\n                <!-- Collapsable -->\n                <nice-vertical-navigation-collapsable-item\n                    *ngIf=\"item.type === 'collapsable'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                    [autoCollapse]=\"autoCollapse\"\n                ></nice-vertical-navigation-collapsable-item>\n\n                <!-- Divider -->\n                <nice-vertical-navigation-divider-item\n                    *ngIf=\"item.type === 'divider'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                ></nice-vertical-navigation-divider-item>\n\n                <!-- Group -->\n                <nice-vertical-navigation-group-item\n                    *ngIf=\"item.type === 'group'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                    [autoCollapse]=\"autoCollapse\"\n                ></nice-vertical-navigation-group-item>\n\n                <!-- Spacer -->\n                <nice-vertical-navigation-spacer-item\n                    *ngIf=\"item.type === 'spacer'\"\n                    [item]=\"item\"\n                    [name]=\"name\"\n                ></nice-vertical-navigation-spacer-item>\n            </ng-container>\n        </div>\n\n        <!-- Content footer -->\n        <div class=\"nice-vertical-navigation-content-footer\">\n            <ng-content select=\"[niceVerticalNavigationContentFooter]\"></ng-content>\n        </div>\n\n    </div>\n\n    <!-- Footer -->\n    <div class=\"nice-vertical-navigation-footer\">\n        <ng-content select=\"[niceVerticalNavigationFooter]\"></ng-content>\n    </div>\n</div>\n\n<!-- Aside -->\n<div\n    class=\"nice-vertical-navigation-aside-wrapper\"\n    *ngIf=\"activeAsideItemId\"\n    niceScrollbar\n    [niceScrollbarOptions]=\"{ wheelPropagation: false, suppressScrollX: true }\"\n    [@fadeInLeft]=\"position === 'left'\"\n    [@fadeInRight]=\"position === 'right'\"\n    [@fadeOutLeft]=\"position === 'left'\"\n    [@fadeOutRight]=\"position === 'right'\"\n>\n\n    <!-- Items -->\n    <ng-container *ngFor=\"let item of navigation; trackBy: trackByFn\">\n        <!-- Skip the hidden items -->\n        <ng-container *ngIf=\"(item.hidden && !item.hidden(item)) || !item.hidden\">\n            <!-- Aside -->\n            <nice-vertical-navigation-aside-item\n                *ngIf=\"item.type === 'aside' && item.id === activeAsideItemId\"\n                [item]=\"item\"\n                [name]=\"name\"\n                [autoCollapse]=\"autoCollapse\"\n            ></nice-vertical-navigation-aside-item>\n        </ng-container>\n    </ng-container>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: NiceNavigationService }, { type: NiceUtilsService }, { type: i1$a.AnimationBuilder }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$9.Router }, { type: i1$4.ScrollStrategyOptions }]; }, propDecorators: { name: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: NiceNavigationService }, { type: NiceUtilsService }, { type: i1$a.AnimationBuilder }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$9.Router }, { type: i1$4.ScrollStrategyOptions }, { type: NiceNavigationHintService }]; }, propDecorators: { name: [{
                 type: Input
             }], appearance: [{
                 type: Input
@@ -9082,6 +9112,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 type: Input
             }], hovered: [{
                 type: Input
+            }], hasHint: [{
+                type: Input
             }], position: [{
                 type: Input
             }], transparentOverlay: [{
@@ -9092,6 +9124,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 type: Output
             }], openedChanged: [{
                 type: Output
+            }], hoveredChanged: [{
+                type: Output
             }], positionChanged: [{
                 type: Output
             }], _navigationContentEl: [{
@@ -9144,7 +9178,7 @@ NiceNavigationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", ve
         NiceScrollbarModule,
         TranslateModule], exports: [NiceHorizontalNavigationComponent,
         NiceVerticalNavigationComponent] });
-NiceNavigationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceNavigationModule, imports: [[
+NiceNavigationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceNavigationModule, providers: [NiceNavigationHintService], imports: [[
             CommonModule,
             RouterModule,
             MatButtonModule,
@@ -9187,6 +9221,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                         NiceShouldShowHintPipe,
                         NiceShowHintDirective
                     ],
+                    providers: [NiceNavigationHintService],
                     exports: [
                         NiceHorizontalNavigationComponent,
                         NiceVerticalNavigationComponent