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

package/lib/components/assets-carousel/assets-carousel.component.d.ts

@@ -49,6 +49,7 @@ export declare class NiceAssetsCarouselComponent implements ControlValueAccessor
     accept: string[];
     customActions: NiceAssetsCarouselActions[];
     multipleUpload: boolean;
+    visiblePreviewAsset: number;
     showAddAssetContainer: boolean;
     activeChange: EventEmitter<number>;
     removedAsset: EventEmitter<NiceAssets>;
@@ -75,5 +76,5 @@ export declare class NiceAssetsCarouselComponent implements ControlValueAccessor
     clickCustom(action: NiceAssetsCarouselActions): void;
     startSyncVideo(): Promise<void>;
     static ɵfac: i0.ɵɵFactoryDeclaration<NiceAssetsCarouselComponent, [{ optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NiceAssetsCarouselComponent, "nice-assets-carousel", never, { "color": "color"; "edit": "edit"; "accept": "accept"; "customActions": "customActions"; "multipleUpload": "multipleUpload"; "showAddAssetContainer": "showAddAssetContainer"; "assets": "assets"; }, { "activeChange": "activeChange"; "removedAsset": "removedAsset"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NiceAssetsCarouselComponent, "nice-assets-carousel", never, { "color": "color"; "edit": "edit"; "accept": "accept"; "customActions": "customActions"; "multipleUpload": "multipleUpload"; "visiblePreviewAsset": "visiblePreviewAsset"; "showAddAssetContainer": "showAddAssetContainer"; "assets": "assets"; }, { "activeChange": "activeChange"; "removedAsset": "removedAsset"; }, never, never>;
 }

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.109",
+  "version": "13.2.0-beta.111",
   "exports": {
     ".": {
       "sass": "./_index.scss",

package/src/lib/components/assets-carousel/assets-carousel.theme.scss

@@ -1,5 +1,12 @@
 @use "../../nice.utils" as nice;
 
+/* Variables */
+:root {
+    --nice-assets-carousel-asset-width: 90px;
+    --nice-assets-carousel-asset-height: 60px;
+    --nice-assets-carousel-asset-gap: 0.75rem;
+}
+
 @mixin nice-assets-carousel-theme($theme) {
     nice-assets-carousel {
         .carousel-container {
@@ -50,6 +57,7 @@
                 .asset-list {
                     @apply flex flex-row;
 
+                    gap: var(--nice-assets-carousel-asset-gap);
                     transition: transform 500ms cubic-bezier(0.35, 0, 0.25, 1);
                 }
             }
@@ -64,7 +72,7 @@
         }
 
         image, img, video {
-            @apply w-full h-full select-none object-cover rounded;
+            @apply w-full h-full select-none object-cover;
         }
 
         .action-button {
@@ -131,8 +139,8 @@
         .add-asset-container {
             @apply bg-default z-50 cursor-pointer select-none mr-3;
 
-            min-width: 90px;
-            min-height: 60px;
+            min-width: var(--nice-assets-carousel-asset-width);
+            min-height: var(--nice-assets-carousel-asset-height);
 
             .add-asset {
                 @apply h-full w-full flex justify-center items-center border border-white border-solid rounded;
@@ -144,13 +152,13 @@
         }
 
         .asset {
-            width: 90px;
-            height: 60px;
+            width: var(--nice-assets-carousel-asset-width);
+            height: var(--nice-assets-carousel-asset-height);
 
-            @apply rounded mr-3 cursor-pointer;
+            @apply rounded cursor-pointer overflow-hidden border border-transparent;
 
             &.active {
-                @apply border border-opacity-100 #{!important};
+                @apply border-opacity-100 #{!important};
 
                 &.primary {
                     @apply border-primary;

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
+            }
+        }
+    }
 }