@recursyve/nice-ui-kit.v2 13.2.0-beta.110 → 13.2.0-beta.111

package/lib/components/navigation/directives/show-hint.directive.d.ts

@@ -0,0 +1,34 @@
+import { Overlay } from "@angular/cdk/overlay";
+import { Platform } from "@angular/cdk/platform";
+import { AfterViewInit, ElementRef, NgZone, OnDestroy, ViewContainerRef } from "@angular/core";
+import { NiceNavigationItem } from "../navigation.types";
+import * as i0 from "@angular/core";
+export declare class NiceShowHintDirective implements AfterViewInit, OnDestroy {
+    private _overlay;
+    private _elementRef;
+    private _viewContainerRef;
+    private _ngZone;
+    private _platform;
+    shouldShow: boolean;
+    item: NiceNavigationItem;
+    private _pointerExitEventsInitialized;
+    private _portal;
+    private _hintInstance;
+    private _overlayRef;
+    private readonly _passiveListeners;
+    private readonly unsubscribeAll$;
+    constructor(_overlay: Overlay, _elementRef: ElementRef<HTMLElement>, _viewContainerRef: ViewContainerRef, _ngZone: NgZone, _platform: Platform);
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    show(): void;
+    hide(): void;
+    private _createOverlay;
+    private _detach;
+    private _isHintVisible;
+    private _setupPointerEnterEventsIfNeeded;
+    private _setupPointerExitEventsIfNeeded;
+    private _platformSupportsMouseEvents;
+    private _addListeners;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NiceShowHintDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NiceShowHintDirective, "[niceShowHint]", never, { "shouldShow": "shouldShow"; "item": "item"; }, {}, never>;
+}

package/lib/components/navigation/navigation.module.d.ts

@@ -12,17 +12,19 @@ import * as i10 from "./vertical/components/divider/divider.component";
 import * as i11 from "./vertical/components/group/group.component";
 import * as i12 from "./vertical/components/spacer/spacer.component";
 import * as i13 from "./vertical/vertical.component";
-import * as i14 from "@angular/common";
-import * as i15 from "@angular/router";
-import * as i16 from "@angular/material/button";
-import * as i17 from "@angular/material/divider";
-import * as i18 from "@angular/material/icon";
-import * as i19 from "@angular/material/menu";
-import * as i20 from "@angular/material/tooltip";
-import * as i21 from "../../directives/scrollbar/scrollbar.module";
-import * as i22 from "@ngx-translate/core";
+import * as i14 from "./pipes/should-show-hint.pipe";
+import * as i15 from "./directives/show-hint.directive";
+import * as i16 from "@angular/common";
+import * as i17 from "@angular/router";
+import * as i18 from "@angular/material/button";
+import * as i19 from "@angular/material/divider";
+import * as i20 from "@angular/material/icon";
+import * as i21 from "@angular/material/menu";
+import * as i22 from "@angular/material/tooltip";
+import * as i23 from "../../directives/scrollbar/scrollbar.module";
+import * as i24 from "@ngx-translate/core";
 export declare class NiceNavigationModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<NiceNavigationModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<NiceNavigationModule, [typeof i1.NiceNavigationComponent, typeof i2.NiceHorizontalNavigationBasicItemComponent, typeof i3.NiceHorizontalNavigationBranchItemComponent, typeof i4.NiceHorizontalNavigationDividerItemComponent, typeof i5.NiceHorizontalNavigationSpacerItemComponent, typeof i6.NiceHorizontalNavigationComponent, typeof i7.NiceVerticalNavigationAsideItemComponent, typeof i8.NiceVerticalNavigationBasicItemComponent, typeof i9.NiceVerticalNavigationCollapsableItemComponent, typeof i10.NiceVerticalNavigationDividerItemComponent, typeof i11.NiceVerticalNavigationGroupItemComponent, typeof i12.NiceVerticalNavigationSpacerItemComponent, typeof i13.NiceVerticalNavigationComponent], [typeof i14.CommonModule, typeof i15.RouterModule, typeof i16.MatButtonModule, typeof i17.MatDividerModule, typeof i18.MatIconModule, typeof i19.MatMenuModule, typeof i20.MatTooltipModule, typeof i21.NiceScrollbarModule, typeof i22.TranslateModule], [typeof i6.NiceHorizontalNavigationComponent, typeof i13.NiceVerticalNavigationComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NiceNavigationModule, [typeof i1.NiceNavigationComponent, typeof i2.NiceHorizontalNavigationBasicItemComponent, typeof i3.NiceHorizontalNavigationBranchItemComponent, typeof i4.NiceHorizontalNavigationDividerItemComponent, typeof i5.NiceHorizontalNavigationSpacerItemComponent, typeof i6.NiceHorizontalNavigationComponent, typeof i7.NiceVerticalNavigationAsideItemComponent, typeof i8.NiceVerticalNavigationBasicItemComponent, typeof i9.NiceVerticalNavigationCollapsableItemComponent, typeof i10.NiceVerticalNavigationDividerItemComponent, typeof i11.NiceVerticalNavigationGroupItemComponent, typeof i12.NiceVerticalNavigationSpacerItemComponent, typeof i13.NiceVerticalNavigationComponent, typeof i14.NiceShouldShowHintPipe, typeof i15.NiceShowHintDirective], [typeof i16.CommonModule, typeof i17.RouterModule, typeof i18.MatButtonModule, typeof i19.MatDividerModule, typeof i20.MatIconModule, typeof i21.MatMenuModule, typeof i22.MatTooltipModule, typeof i23.NiceScrollbarModule, typeof i24.TranslateModule], [typeof i6.NiceHorizontalNavigationComponent, typeof i13.NiceVerticalNavigationComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<NiceNavigationModule>;
 }

package/lib/components/navigation/navigation.types.d.ts

@@ -1,3 +1,5 @@
+import { Type } from "@angular/core";
+import { NavigationHintResolver } from "./providers/hint.resolver";
 export declare type IconType = "fontawesome" | "material" | "svg";
 export interface NiceNavigationItem {
     id?: string;
@@ -28,6 +30,10 @@ export interface NiceNavigationItem {
     };
     children?: NiceNavigationItem[];
     meta?: any;
+    hint?: {
+        resolver: Type<NavigationHintResolver>;
+        component: Type<any>;
+    };
 }
 export declare type NiceVerticalNavigationAppearance = "default" | "compact" | "dense" | "thin";
 export declare type NiceVerticalNavigationMode = "over" | "side";

package/lib/components/navigation/pipes/should-show-hint.pipe.d.ts

@@ -0,0 +1,12 @@
+import { Injector, PipeTransform } from "@angular/core";
+import { Observable } from "rxjs";
+import { NiceNavigationItem } from "../navigation.types";
+import * as i0 from "@angular/core";
+export declare class NiceShouldShowHintPipe implements PipeTransform {
+    private injector;
+    constructor(injector: Injector);
+    transform(value: NiceNavigationItem | NiceNavigationItem[]): Observable<boolean>;
+    private transformHint;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NiceShouldShowHintPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<NiceShouldShowHintPipe, "niceShouldShowHint">;
+}

package/lib/components/navigation/providers/hint.resolver.d.ts

@@ -0,0 +1,4 @@
+import { Observable } from "rxjs";
+export declare abstract class NavigationHintResolver {
+    abstract shouldShowHint(): Observable<boolean>;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@recursyve/nice-ui-kit.v2",
-  "version": "13.2.0-beta.110",
+  "version": "13.2.0-beta.111",
   "exports": {
     ".": {
       "sass": "./_index.scss",

package/src/lib/components/navigation/vertical/styles/appearances/default.theme.scss

@@ -240,6 +240,14 @@
                         opacity: 0.4;
                     }
 
+                    .nice-vertical-navigation-item-icon-wrapper {
+                        position: relative;
+
+                        .nice-vertical-navigation-hint {
+                            display: none;
+                        }
+                    }
+
                     .nice-vertical-navigation-item-icon {
                         margin-right: 16px;
 
@@ -254,6 +262,20 @@
                     }
 
                     .nice-vertical-navigation-item-title-wrapper {
+                        .nice-vertical-navigation-item-title {
+                            position: relative;
+
+                            span {
+                                padding: 16px;
+                            }
+                        }
+
+                        .nice-vertical-navigation-hint {
+                            width: 8px;
+                            height: 8px;
+                            top: -4px;
+                            right: 4px
+                        }
 
                         .nice-vertical-navigation-item-subtitle {
                             font-size: 11px;
@@ -481,6 +503,9 @@
     nice-vertical-navigation-basic-item,
     nice-vertical-navigation-collapsable-item,
     nice-vertical-navigation-group-item {
+        .nice-vertical-navigation-hint {
+            @apply absolute h-2 w-2 rounded-full bg-accent;
+        }
 
         .nice-vertical-navigation-item-wrapper {
 
@@ -602,4 +627,17 @@
             }
         }
     }
+
+    nice-vertical-navigation {
+        &.nice-vertical-navigation-appearance-dense:not(.nice-vertical-navigation-hover) {
+            .nice-vertical-navigation-hint {
+                display: block !important;
+
+                width: 8px;
+                height: 8px;
+                top: -4px;
+                right: 8px
+            }
+        }
+    }
 }