@recursyve/nice-ui-kit.v2 13.2.0-beta.97 → 13.2.0-beta.99

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]", "*"]>;
+    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]", "*"]>;
 }

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/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;
     /**
@@ -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>;
+    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>;
 }
 export {};

package/lib/components/base-form/base-form.component.d.ts

@@ -11,6 +11,7 @@ export declare abstract class NiceBaseFormComponent<Form> implements OnInit, OnD
     protected unsubscribeAll$: Subject<void>;
     private propagate;
     constructor(formGroup: GeneratedFormGroup<Form>);
+    onChange(event: KeyboardEvent): void;
     ngOnInit(): void;
     ngOnDestroy(): void;
     registerOnChange(fn: (form: Form) => void): void;

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

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

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

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

@@ -0,0 +1,27 @@
+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;
+    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;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NiceChipListDirective, [{ optional: true; }, { optional: true; }, null]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NiceChipListDirective, "input[niceChipList], nice-async-typeahead[niceChipList]", never, { "withItemList": "withItemList"; }, {}, never>;
+}

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,6 +1,7 @@
 export * from "./autofocus";
 export * from "./autogrow";
-export * from "./dropzone";
+export * from "./chip-async-typeahead";
+export * from "./chip-list";
 export * from "./image-error-placeholder";
 export * from "./material";
 export * from "./modals";

package/package.json

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

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) {