@recursyve/nice-ui-kit.v2 14.0.0-beta.95 → 14.0.0-beta.96

package/lib/components/alert/alert.component.d.ts

@@ -2,7 +2,7 @@ import { BooleanInput } from "@angular/cdk/coercion";
 import { ChangeDetectorRef, EventEmitter, OnChanges, OnDestroy, OnInit, SimpleChanges } from "@angular/core";
 import { NiceUtilsService } from "../../providers/utils";
 import { NiceAlertService } from "./alert.service";
-import { NiceAlertType, NiceAlertAppearance } from "./alert.types";
+import { NiceAlertType, NiceAlertAppearance, NiceAlertColor } from "./alert.types";
 import * as i0 from "@angular/core";
 export declare class NiceAlertComponent implements OnChanges, OnInit, OnDestroy {
     private _changeDetectorRef;
@@ -19,6 +19,7 @@ export declare class NiceAlertComponent implements OnChanges, OnInit, OnDestroy
     name: string;
     showIcon: boolean;
     type: NiceAlertType;
+    color?: NiceAlertColor;
     readonly dismissedChanged: EventEmitter<boolean>;
     private _unsubscribeAll;
     /**
@@ -59,5 +60,5 @@ export declare class NiceAlertComponent implements OnChanges, OnInit, OnDestroy
      */
     private _toggleDismiss;
     static ɵfac: i0.ɵɵFactoryDeclaration<NiceAlertComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NiceAlertComponent, "nice-alert", ["niceAlert"], { "appearance": "appearance"; "dismissed": "dismissed"; "dismissible": "dismissible"; "disableAnimation": "disableAnimation"; "name": "name"; "showIcon": "showIcon"; "type": "type"; }, { "dismissedChanged": "dismissedChanged"; }, never, ["[niceAlertIcon]", "[niceAlertTitle]", "*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NiceAlertComponent, "nice-alert", ["niceAlert"], { "appearance": "appearance"; "dismissed": "dismissed"; "dismissible": "dismissible"; "disableAnimation": "disableAnimation"; "name": "name"; "showIcon": "showIcon"; "type": "type"; "color": "color"; }, { "dismissedChanged": "dismissedChanged"; }, never, ["[niceAlertIcon]", "[niceAlertTitle]", "*"], false>;
 }

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

@@ -1,2 +1,3 @@
 export declare type NiceAlertAppearance = "border" | "fill" | "outline" | "soft";
 export declare type NiceAlertType = "primary" | "accent" | "warn" | "basic" | "info" | "success" | "warning" | "error";
+export declare type NiceAlertColor = "primary" | "accent" | "warn";

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

@@ -48,10 +48,13 @@ export declare class NiceAssetsCarouselComponent implements ControlValueAccessor
     edit: boolean;
     accept: string[];
     customActions: NiceAssetsCarouselActions[];
+    multipleUpload: boolean;
+    showAddAssetContainer: boolean;
     activeChange: EventEmitter<number>;
     listStyle: {
         transform: string;
     };
+    showOverlay: boolean;
     private propagate;
     set activeVideoElement(activeVideoElement: ElementRef<HTMLVideoElement>);
     set assetsElement(assetsElement: QueryList<ElementRef<HTMLDivElement>>);
@@ -71,5 +74,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"; "assets": "assets"; }, { "activeChange": "activeChange"; }, never, never, false>;
+    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"; }, never, never, false>;
 }

package/lib/components/async-typeahead/async-typeahead.component.d.ts

@@ -1,5 +1,5 @@
 import { BooleanInput } from "@angular/cdk/coercion";
-import { ChangeDetectorRef, DoCheck, ElementRef, NgZone, OnChanges, OnDestroy, OnInit, SimpleChanges, TemplateRef } from "@angular/core";
+import { ChangeDetectorRef, DoCheck, ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, OnInit, SimpleChanges, TemplateRef } from "@angular/core";
 import { ControlValueAccessor, FormControl, FormGroupDirective, NgControl, NgForm } from "@angular/forms";
 import { MatAutocompleteActivatedEvent, MatAutocompleteSelectedEvent } from "@angular/material/autocomplete";
 import { ErrorStateMatcher, MatOption } from "@angular/material/core";
@@ -53,6 +53,7 @@ export declare class NiceAsyncTypeaheadComponent extends _BaseAsyncTypeaheadComp
     emptyPlaceholder: string;
     optionTemplate: TemplateRef<HTMLElement>;
     filterFn: (value: any) => boolean | Promise<boolean> | Observable<boolean>;
+    selected: EventEmitter<any>;
     set labelFormatFn(labelFormatFn: (item: any) => string);
     private _labelFormatFn;
     /**
@@ -96,7 +97,7 @@ export declare class NiceAsyncTypeaheadComponent extends _BaseAsyncTypeaheadComp
     onOptionActivated(event: MatAutocompleteActivatedEvent): void;
     onOptionSelected(event: MatAutocompleteSelectedEvent): void;
     updateState(open: boolean): void;
-    onRemove(event?: Event): void;
+    onRemove(event?: Event, reload?: boolean): void;
     formatLabel(item: any): string;
     onEndScroll(): void;
     focusChanged(isFocused: boolean): void;
@@ -106,6 +107,6 @@ export declare class NiceAsyncTypeaheadComponent extends _BaseAsyncTypeaheadComp
     private updateSearchInput;
     private checkIfValueStillExist;
     static ɵfac: i0.ɵɵFactoryDeclaration<NiceAsyncTypeaheadComponent, [{ optional: true; self: true; }, { optional: true; }, { optional: true; }, null, null, null, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NiceAsyncTypeaheadComponent, "nice-async-typeahead", never, { "resource": "resource"; "searchOptions": "searchOptions"; "preloadResource": "preloadResource"; "allowNotFoundItems": "allowNotFoundItems"; "panelClass": "panelClass"; "bindValue": "bindValue"; "bindLabel": "bindLabel"; "placeholder": "placeholder"; "emptyPlaceholder": "emptyPlaceholder"; "optionTemplate": "optionTemplate"; "filterFn": "filterFn"; "labelFormatFn": "labelFormatFn"; "disabled": "disabled"; "value": "value"; "required": "required"; }, {}, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NiceAsyncTypeaheadComponent, "nice-async-typeahead", never, { "resource": "resource"; "searchOptions": "searchOptions"; "preloadResource": "preloadResource"; "allowNotFoundItems": "allowNotFoundItems"; "panelClass": "panelClass"; "bindValue": "bindValue"; "bindLabel": "bindLabel"; "placeholder": "placeholder"; "emptyPlaceholder": "emptyPlaceholder"; "optionTemplate": "optionTemplate"; "filterFn": "filterFn"; "labelFormatFn": "labelFormatFn"; "disabled": "disabled"; "value": "value"; "required": "required"; }, { "selected": "selected"; }, never, never, false>;
 }
 export {};

package/lib/directives/chip-async-typeahead/chip-async-typeahead.directive.d.ts

@@ -0,0 +1,14 @@
+import { ElementRef, EventEmitter, OnDestroy, OnInit } from "@angular/core";
+import { NiceAsyncTypeaheadComponent } from "../../components";
+import * as i0 from "@angular/core";
+export declare class NiceChipAsyncTypeaheadDirective implements OnInit, OnDestroy {
+    private typeahead;
+    private elementRef;
+    niceChipAsyncTypeaheadTokenEnd: EventEmitter<any>;
+    private unsubscribeAll$;
+    constructor(typeahead: NiceAsyncTypeaheadComponent, elementRef: ElementRef<HTMLElement>);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NiceChipAsyncTypeaheadDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NiceChipAsyncTypeaheadDirective, "[niceChipAsyncTypeahead]", ["niceChipAsyncTypeahead"], {}, { "niceChipAsyncTypeaheadTokenEnd": "niceChipAsyncTypeaheadTokenEnd"; }, never, never, false>;
+}

package/lib/directives/chip-async-typeahead/index.d.ts

@@ -0,0 +1 @@
+export * from "./public-api";

package/lib/directives/chip-async-typeahead/public-api.d.ts

@@ -0,0 +1 @@
+export * from "./chip-async-typeahead.directive";

package/lib/directives/chip-list/chip-list-items/chip-list-item-label.directive.d.ts

@@ -0,0 +1,8 @@
+import { TemplateRef } from "@angular/core";
+import * as i0 from "@angular/core";
+export declare class ChipListItemLabelDirective {
+    template: TemplateRef<any>;
+    constructor(template: TemplateRef<any>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<ChipListItemLabelDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ChipListItemLabelDirective, "[niceChipListItemLabel]", never, {}, {}, never, never, false>;
+}

package/lib/directives/chip-list/chip-list-items/chip-list-items.component.d.ts

@@ -0,0 +1,14 @@
+import { EventEmitter, TemplateRef } from "@angular/core";
+import { CanColor, ThemePalette } from "@angular/material/core";
+import { Observable } from "rxjs";
+import * as i0 from "@angular/core";
+export declare class NiceChipListItemsComponent implements CanColor {
+    itemLabel: TemplateRef<any>;
+    color: ThemePalette;
+    removeChip: EventEmitter<number>;
+    items$: Observable<any[]>;
+    defaultColor: ThemePalette;
+    remove(index: number): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NiceChipListItemsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NiceChipListItemsComponent, "nice-chip-list-items", never, { "color": "color"; "items$": "items$"; }, { "removeChip": "removeChip"; }, ["itemLabel"], never, false>;
+}

package/lib/directives/chip-list/chip-list.directive.d.ts

@@ -0,0 +1,29 @@
+import { ElementRef, OnChanges, OnInit, SimpleChanges } from "@angular/core";
+import { ControlValueAccessor, NgControl } from "@angular/forms";
+import { NiceAsyncTypeaheadComponent } from "../../components";
+import { NiceChipListItemsComponent } from "./chip-list-items/chip-list-items.component";
+import * as i0 from "@angular/core";
+export declare class NiceChipListDirective implements ControlValueAccessor, OnInit, OnChanges {
+    private asyncTypeahead;
+    private ngControl;
+    private elementRef;
+    withItemList: NiceChipListItemsComponent;
+    reloadOnSelected: boolean;
+    private unsubscribeAll$;
+    private values$;
+    private _values;
+    private propagateChanges;
+    get values(): any[];
+    constructor(asyncTypeahead: NiceAsyncTypeaheadComponent, ngControl: NgControl, elementRef: ElementRef<HTMLInputElement>);
+    onKeyDown(event: KeyboardEvent): void;
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    writeValue(obj: any[]): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    private setupAsyncTypeahead;
+    private addValue;
+    private updateTypeaheadSearchOptions;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NiceChipListDirective, [{ optional: true; }, { optional: true; }, null]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NiceChipListDirective, "input[niceChipList], nice-async-typeahead[niceChipList]", never, { "withItemList": "withItemList"; "reloadOnSelected": "reloadOnSelected"; }, {}, never, never, false>;
+}

package/lib/directives/chip-list/chip-list.module.d.ts

@@ -0,0 +1,11 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./chip-list.directive";
+import * as i2 from "./chip-list-items/chip-list-items.component";
+import * as i3 from "./chip-list-items/chip-list-item-label.directive";
+import * as i4 from "@angular/common";
+import * as i5 from "@angular/material/icon";
+export declare class NiceChipListDirectiveModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<NiceChipListDirectiveModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NiceChipListDirectiveModule, [typeof i1.NiceChipListDirective, typeof i2.NiceChipListItemsComponent, typeof i3.ChipListItemLabelDirective], [typeof i4.CommonModule, typeof i5.MatIconModule], [typeof i1.NiceChipListDirective, typeof i2.NiceChipListItemsComponent, typeof i3.ChipListItemLabelDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<NiceChipListDirectiveModule>;
+}

package/lib/directives/chip-list/index.d.ts

@@ -0,0 +1 @@
+export * from "./public-api";

package/lib/directives/chip-list/public-api.d.ts

@@ -0,0 +1,4 @@
+export * from "./chip-list-items/chip-list-item-label.directive";
+export * from "./chip-list-items/chip-list-items.component";
+export * from "./chip-list.directive";
+export * from "./chip-list.module";

package/lib/directives/public-api.d.ts

@@ -1,5 +1,7 @@
 export * from "./autofocus";
 export * from "./autogrow";
+export * from "./chip-async-typeahead";
+export * from "./chip-list";
 export * from "./dropzone";
 export * from "./image-error-placeholder";
 export * from "./material";

package/lib/utils/array.utils.d.ts

@@ -8,7 +8,7 @@ export declare class ArrayUtils {
     }): boolean;
     private static unorderedShallowEquals;
     static sortByKey(array: any[], key: string): any[];
-    static sortByKeyFn(key: string): (a: any, b: any) => 0 | 1 | -1;
+    static sortByKeyFn(key: string): (a: any, b: any) => 1 | -1 | 0;
     static groupBy<Item, Key, Value>(array: Item[], keySelector: (item: Item) => Key, valueSelector: (item: Item) => Value[] | Value): Map<Key, Value[]>;
 }
 declare global {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@recursyve/nice-ui-kit.v2",
-  "version": "14.0.0-beta.95",
+  "version": "14.0.0-beta.96",
   "exports": {
     ".": {
       "sass": "./_index.scss",

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

@@ -42,13 +42,10 @@
         }
 
         .carousel {
-            @apply flex flex-row items-center;
+            @apply relative flex flex-row items-center;
 
             .asset-list-container {
-                @apply flex flex-row overflow-x-hidden;
-
-                min-width: 400px;
-                max-width: 400px;
+                @apply flex flex-row overflow-x-hidden min-w-full max-w-full;
 
                 .asset-list {
                     @apply flex flex-row;
@@ -56,33 +53,34 @@
                     transition: transform 500ms cubic-bezier(0.35, 0, 0.25, 1);
                 }
             }
+        }
 
-            .action-button {
-                @apply mx-2;
-            }
+        .left-arrow {
+            @apply -left-[10%];
+        }
+
+        .right-arrow {
+            @apply -right-[10%];
         }
 
         image, img, video {
-            width: 100%;
-            height: 100%;
+            @apply w-full h-full select-none object-cover rounded;
+        }
+
+        .action-button {
+            @apply absolute w-8 h-8 min-w-8 min-h-8;
 
-            -webkit-user-select: none;
-            user-select: none;
-            object-fit: cover;
-            border-radius: 4px;
+            .mat-button-wrapper {
+                @apply w-full;
+            }
         }
 
         .active-image {
-            @apply mx-14 relative;
-
-            width: 400px;
+            @apply relative cursor-pointer mb-4 w-full rounded;
             height: 280px;
 
-            margin-bottom: 16px;
-            border-radius: 4px;
-
             &.empty-state {
-                @apply border border-white select-none cursor-pointer;
+                @apply border border-white select-none;
 
                 .empty-state-content {
                     @apply h-full flex flex-col justify-center items-center;
@@ -101,10 +99,9 @@
                 @apply absolute top-3 right-3 flex flex-row;
 
                 .mat-icon-button {
-                    @apply bg-white ml-2.5;
+                    @apply bg-white ml-2.5 rounded;
 
                     @include nice.override-mat-icon-size(32, true);
-                    border-radius: 4px;
 
                     &[disabled] * {
                         @apply text-black text-opacity-80 #{!important};
@@ -119,22 +116,26 @@
             }
         }
 
+        .active-image-overlay {
+            @apply absolute top-0 w-full h-full bg-default bg-opacity-50;
+
+            .mat-icon {
+                @include nice.override-mat-icon-size(60, true);
+            }
+        }
+
         .arrows {
             @include nice.override-mat-icon-size(16, true);
         }
 
         .add-asset-container {
-            @apply bg-default z-50 cursor-pointer select-none;
+            @apply bg-default z-50 cursor-pointer select-none mr-3;
 
             min-width: 90px;
             min-height: 60px;
-            margin-right: 12px;
 
             .add-asset {
-                @apply h-full w-full flex justify-center items-center;
-                @apply border border-white border-solid;
-
-                border-radius: 4px;
+                @apply h-full w-full flex justify-center items-center border border-white border-solid rounded;
 
                 .mat-icon {
                     @apply text-default text-opacity-50 #{!important};
@@ -145,11 +146,8 @@
         .asset {
             width: 90px;
             height: 60px;
-            border-radius: 4px;
-
-            margin-right: 12px;
 
-            cursor: pointer;
+            @apply rounded mr-3 cursor-pointer;
 
             &.active {
                 @apply border border-opacity-100 #{!important};

package/src/lib/components/chip-list/chip-list.theme.scss

@@ -0,0 +1,14 @@
+@use "../../nice.utils" as nice;
+@import "components/item-list/item-list.theme";
+
+@mixin nice-chip-list-theme($theme) {
+    @include nice-item-list-theme($theme);
+
+    nice-chip-list {
+        @apply w-full;
+
+        .nice-chip-row {
+            @apply gap-2;
+        }
+    }
+}

package/src/lib/components/chip-list/components/item-list/item-list.theme.scss

@@ -0,0 +1,37 @@
+@use "../../../../nice.utils" as nice;
+
+@mixin nice-item-list-theme($theme) {
+    mat-form-field {
+        nice-item-list {
+            .nice-items-row {
+                @apply mt-4;
+            }
+        }
+    }
+
+    nice-item-list {
+        .nice-items-row {
+            @apply flex flex-row flex-wrap items-center gap-2;
+
+            .nice-chip {
+                @apply flex flex-row items-center justify-start rounded-3xl gap-3 px-3 py-0.5 min-w-24;
+
+                .close-icon {
+                    @apply mt-1 opacity-70;
+                }
+
+                &.primary {
+                    @apply bg-primary;
+                }
+
+                &.accent {
+                    @apply bg-accent;
+                }
+
+                &.warn {
+                    @apply bg-warn;
+                }
+            }
+        }
+    }
+}

package/src/lib/directives/chip-list/chip-list-items/chip-list-items.theme.scss

@@ -0,0 +1,35 @@
+@mixin nice-chip-list-items-theme($theme) {
+    mat-form-field {
+        nice-chip-list-items {
+            .nice-items-row {
+                @apply mt-4;
+            }
+        }
+    }
+
+    nice-chip-list-items {
+        .nice-items-row {
+            @apply flex flex-row flex-wrap items-center gap-2;
+
+            .nice-chip {
+                @apply flex flex-row items-center justify-start rounded-3xl gap-3 px-3 py-0.5 min-w-24;
+
+                .close-icon {
+                    @apply mt-1 opacity-70;
+                }
+
+                &.primary {
+                    @apply bg-primary;
+                }
+
+                &.accent {
+                    @apply bg-accent;
+                }
+
+                &.warn {
+                    @apply bg-warn;
+                }
+            }
+        }
+    }
+}

package/src/lib/nice.theme.scss

@@ -13,6 +13,9 @@
 @import "./components/navigation/horizontal/horizontal.theme";
 @import "./components/navigation/vertical/vertical.theme";
 @import "./components/toggle-button-group/toggle-button-group.theme";
+@import "./components/chip-list/chip-list.theme";
+@import "./directives/chip-list/chip-list-items/chip-list-items.theme";
+
 @mixin nice-components-theme($theme) {
     @include nice-alert-theme($theme);
     @include nice-assets-carousel-theme($theme);
@@ -21,6 +24,8 @@
     @include nice-drawer-theme($theme);
     @include nice-horizontal-stepper-theme($theme);
     @include nice-toggle-button-group-theme($theme);
+    @include nice-chip-list-theme($theme);
+    @include nice-chip-list-items-theme($theme);
 }
 
 @mixin nice-custom-theme($theme) {