@recursyve/ngx-material-components 19.0.0-beta.19 → 19.0.0-beta.20

package/chip-list/index.d.ts

@@ -1,2 +1,41 @@
-export * from "./chip-list";
-export * from "./items/chip-list-items";
+import * as _angular_core from '@angular/core';
+import { Injector, Signal, OnInit } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { Observable } from 'rxjs';
+
+declare class NiceChipListItems<T> {
+    readonly removeChip: _angular_core.OutputEmitterRef<number>;
+    protected readonly injector: Injector;
+    items?: Signal<T[]>;
+    formatLabelFn?: (value: T) => string;
+    setItemsReactivity(items$: Observable<T[]>): void;
+    setFormatLabel(fn: (value: T) => string): void;
+    remove(index: number): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NiceChipListItems<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NiceChipListItems<any>, "nice-chip-list-items", never, {}, { "removeChip": "removeChip"; }, never, never, true, never>;
+}
+
+declare class NiceChipListDirective<T> implements ControlValueAccessor, OnInit {
+    readonly withItemList: _angular_core.InputSignal<NiceChipListItems<T>>;
+    readonly reloadOnSelected: _angular_core.InputSignal<boolean>;
+    readonly separatorKeyboardCodes: _angular_core.InputSignal<string[]>;
+    private readonly elementRef;
+    private readonly injector;
+    private readonly asyncTypeahead;
+    private readonly ngControl;
+    private readonly values;
+    private propagateChanges?;
+    constructor();
+    onKeyDown(event: KeyboardEvent): void;
+    ngOnInit(): void;
+    writeValue(obj: T[] | null): void;
+    registerOnChange(fn: (_: T[]) => void): void;
+    registerOnTouched(): void;
+    private setupAsyncTypeahead;
+    private addValue;
+    private updateTypeaheadSearchOptions;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NiceChipListDirective<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NiceChipListDirective<any>, "input[niceChipList], nice-async-typeahead[niceChipList]", never, { "withItemList": { "alias": "withItemList"; "required": true; "isSignal": true; }; "reloadOnSelected": { "alias": "reloadOnSelected"; "required": false; "isSignal": true; }; "separatorKeyboardCodes": { "alias": "separatorKeyboardCodes"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { NiceChipListDirective, NiceChipListItems };

package/common/index.d.ts

@@ -1,4 +1,24 @@
-export * from "./provider";
-export * from "./translater/constant";
-export * from "./translater/translate-pipe";
-export * from "./translater/translater";
+import * as i0 from '@angular/core';
+import { FactoryProvider, Provider, InjectionToken, PipeTransform } from '@angular/core';
+
+type NiceTranslater = (key: string, params?: Record<string, string>) => string;
+
+type NiceTranslaterOptions = {
+    translater: Omit<FactoryProvider, "provide" | "multi"> & {
+        useFactory: (...args: any[]) => NiceTranslater;
+    };
+};
+
+declare function provideNiceComponents(options: NiceTranslaterOptions): Provider[];
+
+declare const NICE_COMPONENTS_TRANSLATER: InjectionToken<unknown>;
+
+declare class NiceTranslatePipe implements PipeTransform {
+    private readonly translater;
+    transform(key: string, params?: Record<string, string>): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NiceTranslatePipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<NiceTranslatePipe, "niceTranslate", true>;
+}
+
+export { NICE_COMPONENTS_TRANSLATER, NiceTranslatePipe, provideNiceComponents };
+export type { NiceTranslater };

package/dropzone/index.d.ts

@@ -1,6 +1,125 @@
-export * from "./dropzone.directive";
-export * from "./dropzone";
-export * from "./config";
-export * from "./models";
-export * from "./options";
-export * from "./provider";
+import * as _angular_core from '@angular/core';
+import { EventEmitter, OnDestroy, ElementRef, Provider } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { MatRippleLoader } from '@angular/material/core';
+
+declare class NiceDropzoneDirective {
+    fileOver: boolean;
+    filesDropped: EventEmitter<FileList>;
+    files: _angular_core.OutputEmitterRef<void>;
+    onDragOver(event: DragEvent): void;
+    onDragLeave(event: DragEvent): void;
+    ondrop(event: DragEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NiceDropzoneDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NiceDropzoneDirective, "[niceDropzone]", never, {}, { "filesDropped": "filesDropped"; "files": "files"; }, never, never, true, never>;
+}
+
+type NiceDropzoneImageConfig = {
+    minSize?: {
+        width: number;
+        height: number;
+    };
+    maxSize?: {
+        width: number;
+        height: number;
+    };
+    recommendedSize?: {
+        width: number;
+        height: number;
+    };
+};
+type NiceDropzoneFileSizeConfig = {
+    size: number;
+    unit: "B" | "KB" | "MB" | "GB";
+};
+type NiceDropzoneTranslationKeyConfig = {
+    upload: {
+        file: string;
+        files: string;
+        image: string;
+        images: string;
+    };
+    format: {
+        label: string;
+    };
+    ratio: {
+        label: string;
+        pixels: string;
+    };
+    size: {
+        label: string;
+        units: {
+            B: string;
+            KB: string;
+            MB: string;
+            GB: string;
+        };
+    };
+};
+
+type NiceFileDimensions = {
+    width: number;
+    height: number;
+    ratio: number;
+};
+type NiceLocalFile = {
+    file: File;
+    name: string;
+    size?: number;
+    dimensions?: NiceFileDimensions;
+};
+type NiceRemoteFile = {
+    id: string | number;
+    name: string;
+    url: string;
+    size?: number;
+};
+type NiceSelectedFiles = NiceLocalFile | NiceRemoteFile;
+declare function isLocalFile(file: NiceSelectedFiles): file is NiceLocalFile;
+declare function isRemoteFile(file: NiceSelectedFiles): file is NiceRemoteFile;
+
+declare const niceDropzoneModes: readonly ["image", "file", "all"];
+type NiceDropzoneModes = (typeof niceDropzoneModes)[number];
+declare class NiceDropzone implements OnDestroy, ControlValueAccessor {
+    readonly mode: _angular_core.InputSignal<"file" | "image" | "all">;
+    readonly multiple: _angular_core.InputSignalWithTransform<boolean, any>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
+    readonly accept: _angular_core.InputSignal<string[] | undefined>;
+    readonly config: _angular_core.InputSignal<NiceDropzoneImageConfig | undefined>;
+    readonly maxFileSize: _angular_core.InputSignal<NiceDropzoneFileSizeConfig | undefined>;
+    protected readonly _elementRef: _angular_core.Signal<ElementRef<any> | undefined>;
+    protected readonly _inputRef: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
+    /**
+     * Handles the lazy creation of the MatButton ripple.
+     * Used to improve the initial load time of large applications.
+     */
+    protected readonly _rippleLoader: MatRippleLoader;
+    protected readonly _translationKeys: NiceDropzoneTranslationKeyConfig;
+    protected readonly files: _angular_core.WritableSignal<NiceSelectedFiles[]>;
+    protected _disabled: boolean;
+    private _onChange;
+    private _value;
+    constructor();
+    ngOnDestroy(): void;
+    writeValue(value: NiceSelectedFiles | NiceSelectedFiles[] | null): void;
+    registerOnChange(fn: (value: NiceSelectedFiles | NiceSelectedFiles[] | null) => void): void;
+    registerOnTouched(): void;
+    setDisabledState(disabled: boolean): void;
+    onFileChanged(event: Event): void;
+    onFilesDropped(fileList: FileList): Promise<void>;
+    onFileDelete(index: number): void;
+    protected propagateChanges(value: NiceSelectedFiles | NiceSelectedFiles[] | null): void;
+    protected getImageDimension(file: File): Promise<NiceFileDimensions>;
+    protected resetInput(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NiceDropzone, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NiceDropzone, "nice-dropzone", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "config": { "alias": "config"; "required": false; "isSignal": true; }; "maxFileSize": { "alias": "maxFileSize"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+type NiceDropzoneOptions = {
+    translationKeys: NiceDropzoneTranslationKeyConfig;
+};
+
+declare function provideDropzone(options?: NiceDropzoneOptions): Provider[];
+
+export { NiceDropzone, NiceDropzoneDirective, isLocalFile, isRemoteFile, niceDropzoneModes, provideDropzone };
+export type { NiceDropzoneFileSizeConfig, NiceDropzoneImageConfig, NiceDropzoneModes, NiceDropzoneOptions, NiceDropzoneTranslationKeyConfig, NiceFileDimensions, NiceLocalFile, NiceRemoteFile, NiceSelectedFiles };

package/fesm2022/recursyve-ngx-material-components-chip-list.mjs

@@ -6,14 +6,14 @@ import { NiceAsyncTypeahead } from '@recursyve/ngx-material-components/typeahead
 import { MatChipSet, MatChipRemove, MatChipRow } from '@angular/material/chips';
 
 class NiceChipListDirective {
-    withItemList = input.required();
-    reloadOnSelected = input(true);
-    separatorKeyboardCodes = input(["Enter"]);
+    withItemList = input.required(...(ngDevMode ? [{ debugName: "withItemList" }] : []));
+    reloadOnSelected = input(true, ...(ngDevMode ? [{ debugName: "reloadOnSelected" }] : []));
+    separatorKeyboardCodes = input(["Enter"], ...(ngDevMode ? [{ debugName: "separatorKeyboardCodes" }] : []));
     elementRef = inject(ElementRef);
     injector = inject(Injector);
     asyncTypeahead = inject(NiceAsyncTypeahead, { optional: true });
     ngControl = inject(NgControl, { optional: true });
-    values = signal([]);
+    values = signal([], ...(ngDevMode ? [{ debugName: "values" }] : []));
     propagateChanges;
     constructor() {
         if (this.ngControl) {
@@ -100,10 +100,10 @@ class NiceChipListDirective {
         const searchOptions = this.asyncTypeahead.searchOptions();
         this.asyncTypeahead.setSearchOptions({ ...(searchOptions ?? {}), ignore });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: NiceChipListDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.10", type: NiceChipListDirective, isStandalone: true, selector: "input[niceChipList], nice-async-typeahead[niceChipList]", inputs: { withItemList: { classPropertyName: "withItemList", publicName: "withItemList", isSignal: true, isRequired: true, transformFunction: null }, reloadOnSelected: { classPropertyName: "reloadOnSelected", publicName: "reloadOnSelected", isSignal: true, isRequired: false, transformFunction: null }, separatorKeyboardCodes: { classPropertyName: "separatorKeyboardCodes", publicName: "separatorKeyboardCodes", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "onKeyDown($event)" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NiceChipListDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.1", type: NiceChipListDirective, isStandalone: true, selector: "input[niceChipList], nice-async-typeahead[niceChipList]", inputs: { withItemList: { classPropertyName: "withItemList", publicName: "withItemList", isSignal: true, isRequired: true, transformFunction: null }, reloadOnSelected: { classPropertyName: "reloadOnSelected", publicName: "reloadOnSelected", isSignal: true, isRequired: false, transformFunction: null }, separatorKeyboardCodes: { classPropertyName: "separatorKeyboardCodes", publicName: "separatorKeyboardCodes", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "onKeyDown($event)" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: NiceChipListDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NiceChipListDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "input[niceChipList], nice-async-typeahead[niceChipList]"
@@ -114,10 +114,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             }] } });
 
 class NiceChipListItemsClearIcon {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: NiceChipListItemsClearIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: NiceChipListItemsClearIcon, isStandalone: true, selector: "nice-chip-list-items-clear-icon", ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n    <path d=\"M12 0a12 12 0 1 0 12 12A12 12 0 0 0 12 0Zm5.49 16.07a1 1 0 0 1 -1.41 1.42l-3.9 -3.9a0.25 0.25 0 0 0 -0.36 0l-3.9 3.9a1 1 0 1 1 -1.41 -1.42l3.9 -3.89a0.25 0.25 0 0 0 0 -0.36l-3.9 -3.9a1 1 0 0 1 1.41 -1.41l3.9 3.9a0.25 0.25 0 0 0 0.36 0l3.9 -3.9a1 1 0 0 1 1.41 1.41l-3.9 3.9a0.25 0.25 0 0 0 0 0.36Z\" fill=\"currentColor\" stroke-width=\"1\"></path>\n</svg>\n" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NiceChipListItemsClearIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: NiceChipListItemsClearIcon, isStandalone: true, selector: "nice-chip-list-items-clear-icon", ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n    <path d=\"M12 0a12 12 0 1 0 12 12A12 12 0 0 0 12 0Zm5.49 16.07a1 1 0 0 1 -1.41 1.42l-3.9 -3.9a0.25 0.25 0 0 0 -0.36 0l-3.9 3.9a1 1 0 1 1 -1.41 -1.42l3.9 -3.89a0.25 0.25 0 0 0 0 -0.36l-3.9 -3.9a1 1 0 0 1 1.41 -1.41l3.9 3.9a0.25 0.25 0 0 0 0.36 0l3.9 -3.9a1 1 0 0 1 1.41 1.41l-3.9 3.9a0.25 0.25 0 0 0 0 0.36Z\" fill=\"currentColor\" stroke-width=\"1\"></path>\n</svg>\n" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: NiceChipListItemsClearIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NiceChipListItemsClearIcon, decorators: [{
             type: Component,
             args: [{ selector: "nice-chip-list-items-clear-icon", template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n    <path d=\"M12 0a12 12 0 1 0 12 12A12 12 0 0 0 12 0Zm5.49 16.07a1 1 0 0 1 -1.41 1.42l-3.9 -3.9a0.25 0.25 0 0 0 -0.36 0l-3.9 3.9a1 1 0 1 1 -1.41 -1.42l3.9 -3.89a0.25 0.25 0 0 0 0 -0.36l-3.9 -3.9a1 1 0 0 1 1.41 -1.41l3.9 3.9a0.25 0.25 0 0 0 0.36 0l3.9 -3.9a1 1 0 0 1 1.41 1.41l-3.9 3.9a0.25 0.25 0 0 0 0 0.36Z\" fill=\"currentColor\" stroke-width=\"1\"></path>\n</svg>\n" }]
         }] });
@@ -136,10 +136,10 @@ class NiceChipListItems {
     remove(index) {
         this.removeChip.emit(index);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: NiceChipListItems, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: NiceChipListItems, isStandalone: true, selector: "nice-chip-list-items", outputs: { removeChip: "removeChip" }, ngImport: i0, template: "@if (items) {\n    <mat-chip-set>\n        @for (item of items(); track item) {\n            <mat-chip-row [highlighted]=\"true\" (removed)=\"remove($index)\">\n                @if (formatLabelFn) {\n                    {{ formatLabelFn(item) }}\n                } @else {\n                    {{ item }}\n                }\n\n                <button matChipRemove>\n                    <nice-chip-list-items-clear-icon />\n                </button>\n            </mat-chip-row>\n        }\n    </mat-chip-set>\n}\n", styles: ["nice-chip-list-items-clear-icon{margin-top:-1px;width:16px;height:16px}\n"], dependencies: [{ kind: "component", type: MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: NiceChipListItemsClearIcon, selector: "nice-chip-list-items-clear-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NiceChipListItems, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: NiceChipListItems, isStandalone: true, selector: "nice-chip-list-items", outputs: { removeChip: "removeChip" }, ngImport: i0, template: "@if (items) {\n    <mat-chip-set>\n        @for (item of items(); track item) {\n            <mat-chip-row [highlighted]=\"true\" (removed)=\"remove($index)\">\n                @if (formatLabelFn) {\n                    {{ formatLabelFn(item) }}\n                } @else {\n                    {{ item }}\n                }\n\n                <button matChipRemove>\n                    <nice-chip-list-items-clear-icon />\n                </button>\n            </mat-chip-row>\n        }\n    </mat-chip-set>\n}\n", styles: ["nice-chip-list-items-clear-icon{margin-top:-1px;width:16px;height:16px}\n"], dependencies: [{ kind: "component", type: MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: NiceChipListItemsClearIcon, selector: "nice-chip-list-items-clear-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: NiceChipListItems, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NiceChipListItems, decorators: [{
             type: Component,
             args: [{ selector: "nice-chip-list-items", imports: [
                         MatChipSet,

package/fesm2022/recursyve-ngx-material-components-chip-list.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"recursyve-ngx-material-components-chip-list.mjs","sources":["../../../src/material-components/chip-list/chip-list.ts","../../../src/material-components/chip-list/icons/clear/chip-list-items-clear-icon.ts","../../../src/material-components/chip-list/icons/clear/chip-list-items-clear-icon.svg","../../../src/material-components/chip-list/items/chip-list-items.ts","../../../src/material-components/chip-list/items/chip-list-items.html","../../../src/material-components/chip-list/recursyve-ngx-material-components-chip-list.ts"],"sourcesContent":["import {\n    Directive,\n    effect,\n    ElementRef,\n    HostListener,\n    inject,\n    Injector,\n    input,\n    OnInit,\n    signal,\n    untracked\n} from \"@angular/core\";\nimport { toObservable } from \"@angular/core/rxjs-interop\";\nimport { ControlValueAccessor, NgControl } from \"@angular/forms\";\nimport { NiceAsyncTypeahead } from \"@recursyve/ngx-material-components/typeahead\";\nimport { NiceChipListItems } from \"./items/chip-list-items\";\n\n@Directive({\n    selector: \"input[niceChipList], nice-async-typeahead[niceChipList]\"\n})\nexport class NiceChipListDirective<T> implements ControlValueAccessor, OnInit {\n    public readonly withItemList = input.required<NiceChipListItems<T>>();\n    public readonly reloadOnSelected = input<boolean>(true);\n    public readonly separatorKeyboardCodes = input<string[]>([\"Enter\"]);\n\n    private readonly elementRef = inject(ElementRef);\n    private readonly injector = inject(Injector);\n    private readonly asyncTypeahead = inject<NiceAsyncTypeahead<T>>(NiceAsyncTypeahead, { optional: true });\n    private readonly ngControl = inject<NgControl>(NgControl, { optional: true });\n\n    private readonly values = signal<T[]>([]);\n\n    private propagateChanges?: (_: T[]) => void;\n\n    constructor() {\n        if (this.ngControl) {\n            this.ngControl.valueAccessor = this;\n        }\n\n        effect(() => {\n            const values = this.values();\n            untracked(() => this.updateTypeaheadSearchOptions(values));\n        });\n    }\n\n    @HostListener(\"keydown\", [\"$event\"])\n    public onKeyDown(event: KeyboardEvent): void {\n        if (this.asyncTypeahead) {\n            return;\n        }\n\n        if (!this.separatorKeyboardCodes().includes(event.code)) {\n            return;\n        }\n\n        if (!this.elementRef.nativeElement.validity.valid) {\n            return;\n        }\n\n        this.addValue(this.elementRef.nativeElement.value);\n        this.elementRef.nativeElement.value = \"\";\n        event.preventDefault();\n    }\n\n    public ngOnInit(): void {\n        this.setupAsyncTypeahead();\n\n        const parentElement = this.elementRef.nativeElement.parentElement;\n        if (parentElement.classList.contains(\"mat-mdc-form-field-infix\")) {\n            parentElement.style.alignItems = \"flex-start\";\n            parentElement.style.flexDirection = \"column-reverse\";\n        }\n\n        const withItemList = this.withItemList();\n        withItemList.setItemsReactivity(toObservable(this.values, { injector: this.injector }));\n        withItemList.removeChip.subscribe((index) => {\n            const values = [...this.values()];\n            values.splice(index, 1);\n\n            this.propagateChanges?.(values);\n            this.values.set(values);\n        });\n\n        if (this.asyncTypeahead) {\n            withItemList.setFormatLabel((item) => this.asyncTypeahead!.formatLabel(item));\n        }\n    }\n\n    public writeValue(obj: T[] | null): void {\n        if (!obj) {\n            this.values.set([]);\n        } else if (Array.isArray(obj)) {\n            this.values.set([...obj]);\n        }\n    }\n\n    public registerOnChange(fn: (_: T[]) => void): void {\n        this.propagateChanges = fn;\n    }\n\n    public registerOnTouched(): void {\n        return;\n    }\n\n    private setupAsyncTypeahead(): void {\n        if (!this.asyncTypeahead) {\n            return;\n        }\n\n        this.asyncTypeahead.selected\n            .subscribe((value) => {\n                if (!value) {\n                    return;\n                }\n\n                this.addValue(value);\n                this.asyncTypeahead?.removeActiveValue();\n            });\n    }\n\n    private addValue(value: T): void {\n        const values = [...this.values()];\n        if (values.includes(value)) {\n            return;\n        }\n\n        values.push(value);\n        this.propagateChanges?.(values);\n        this.values.set(values);\n    }\n\n    private updateTypeaheadSearchOptions(ignore: T[]): void {\n        if (!this.asyncTypeahead) {\n            return;\n        }\n\n        const searchOptions = this.asyncTypeahead.searchOptions();\n        this.asyncTypeahead.setSearchOptions({ ...(searchOptions ?? {}), ignore });\n    }\n}\n","import { Component } from \"@angular/core\";\n\n@Component({\n    selector: \"nice-chip-list-items-clear-icon\",\n    templateUrl: \"chip-list-items-clear-icon.svg\"\n})\nexport class NiceChipListItemsClearIcon {}\n","<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n    <path d=\"M12 0a12 12 0 1 0 12 12A12 12 0 0 0 12 0Zm5.49 16.07a1 1 0 0 1 -1.41 1.42l-3.9 -3.9a0.25 0.25 0 0 0 -0.36 0l-3.9 3.9a1 1 0 1 1 -1.41 -1.42l3.9 -3.89a0.25 0.25 0 0 0 0 -0.36l-3.9 -3.9a1 1 0 0 1 1.41 -1.41l3.9 3.9a0.25 0.25 0 0 0 0.36 0l3.9 -3.9a1 1 0 0 1 1.41 1.41l-3.9 3.9a0.25 0.25 0 0 0 0 0.36Z\" fill=\"currentColor\" stroke-width=\"1\"></path>\n</svg>\n","import { ChangeDetectionStrategy, Component, inject, Injector, output, Signal } from \"@angular/core\";\nimport { toSignal } from \"@angular/core/rxjs-interop\";\nimport { MatChipRemove, MatChipRow, MatChipSet } from \"@angular/material/chips\";\nimport { Observable } from \"rxjs\";\nimport { NiceChipListItemsClearIcon } from \"../icons/clear/chip-list-items-clear-icon\";\n\n@Component({\n    selector: \"nice-chip-list-items\",\n    templateUrl: \"./chip-list-items.html\",\n    styleUrls: [\"./chip-list-items.scss\"],\n    imports: [\n        MatChipSet,\n        MatChipRemove,\n        MatChipRow,\n        NiceChipListItemsClearIcon\n    ],\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class NiceChipListItems<T> {\n    public readonly removeChip = output<number>();\n\n    protected readonly injector = inject(Injector);\n\n    public items?: Signal<T[]>;\n    public formatLabelFn?: (value: T) => string;\n\n    public setItemsReactivity(items$: Observable<T[]>): void {\n        this.items = toSignal(items$, { injector: this.injector, initialValue: [] });\n    }\n\n    public setFormatLabel(fn: (value: T) => string): void {\n        this.formatLabelFn = fn;\n    }\n\n    public remove(index: number): void {\n        this.removeChip.emit(index);\n    }\n}\n","@if (items) {\n    <mat-chip-set>\n        @for (item of items(); track item) {\n            <mat-chip-row [highlighted]=\"true\" (removed)=\"remove($index)\">\n                @if (formatLabelFn) {\n                    {{ formatLabelFn(item) }}\n                } @else {\n                    {{ item }}\n                }\n\n                <button matChipRemove>\n                    <nice-chip-list-items-clear-icon />\n                </button>\n            </mat-chip-row>\n        }\n    </mat-chip-set>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"recursyve-ngx-material-components-chip-list.mjs","sources":["../../../src/material-components/chip-list/chip-list.ts","../../../src/material-components/chip-list/icons/clear/chip-list-items-clear-icon.ts","../../../src/material-components/chip-list/icons/clear/chip-list-items-clear-icon.svg","../../../src/material-components/chip-list/items/chip-list-items.ts","../../../src/material-components/chip-list/items/chip-list-items.html","../../../src/material-components/chip-list/recursyve-ngx-material-components-chip-list.ts"],"sourcesContent":["import {\n    Directive,\n    effect,\n    ElementRef,\n    HostListener,\n    inject,\n    Injector,\n    input,\n    OnInit,\n    signal,\n    untracked\n} from \"@angular/core\";\nimport { toObservable } from \"@angular/core/rxjs-interop\";\nimport { ControlValueAccessor, NgControl } from \"@angular/forms\";\nimport { NiceAsyncTypeahead } from \"@recursyve/ngx-material-components/typeahead\";\nimport { NiceChipListItems } from \"./items/chip-list-items\";\n\n@Directive({\n    selector: \"input[niceChipList], nice-async-typeahead[niceChipList]\"\n})\nexport class NiceChipListDirective<T> implements ControlValueAccessor, OnInit {\n    public readonly withItemList = input.required<NiceChipListItems<T>>();\n    public readonly reloadOnSelected = input<boolean>(true);\n    public readonly separatorKeyboardCodes = input<string[]>([\"Enter\"]);\n\n    private readonly elementRef = inject(ElementRef);\n    private readonly injector = inject(Injector);\n    private readonly asyncTypeahead = inject<NiceAsyncTypeahead<T>>(NiceAsyncTypeahead, { optional: true });\n    private readonly ngControl = inject<NgControl>(NgControl, { optional: true });\n\n    private readonly values = signal<T[]>([]);\n\n    private propagateChanges?: (_: T[]) => void;\n\n    constructor() {\n        if (this.ngControl) {\n            this.ngControl.valueAccessor = this;\n        }\n\n        effect(() => {\n            const values = this.values();\n            untracked(() => this.updateTypeaheadSearchOptions(values));\n        });\n    }\n\n    @HostListener(\"keydown\", [\"$event\"])\n    public onKeyDown(event: KeyboardEvent): void {\n        if (this.asyncTypeahead) {\n            return;\n        }\n\n        if (!this.separatorKeyboardCodes().includes(event.code)) {\n            return;\n        }\n\n        if (!this.elementRef.nativeElement.validity.valid) {\n            return;\n        }\n\n        this.addValue(this.elementRef.nativeElement.value);\n        this.elementRef.nativeElement.value = \"\";\n        event.preventDefault();\n    }\n\n    public ngOnInit(): void {\n        this.setupAsyncTypeahead();\n\n        const parentElement = this.elementRef.nativeElement.parentElement;\n        if (parentElement.classList.contains(\"mat-mdc-form-field-infix\")) {\n            parentElement.style.alignItems = \"flex-start\";\n            parentElement.style.flexDirection = \"column-reverse\";\n        }\n\n        const withItemList = this.withItemList();\n        withItemList.setItemsReactivity(toObservable(this.values, { injector: this.injector }));\n        withItemList.removeChip.subscribe((index) => {\n            const values = [...this.values()];\n            values.splice(index, 1);\n\n            this.propagateChanges?.(values);\n            this.values.set(values);\n        });\n\n        if (this.asyncTypeahead) {\n            withItemList.setFormatLabel((item) => this.asyncTypeahead!.formatLabel(item));\n        }\n    }\n\n    public writeValue(obj: T[] | null): void {\n        if (!obj) {\n            this.values.set([]);\n        } else if (Array.isArray(obj)) {\n            this.values.set([...obj]);\n        }\n    }\n\n    public registerOnChange(fn: (_: T[]) => void): void {\n        this.propagateChanges = fn;\n    }\n\n    public registerOnTouched(): void {\n        return;\n    }\n\n    private setupAsyncTypeahead(): void {\n        if (!this.asyncTypeahead) {\n            return;\n        }\n\n        this.asyncTypeahead.selected\n            .subscribe((value) => {\n                if (!value) {\n                    return;\n                }\n\n                this.addValue(value);\n                this.asyncTypeahead?.removeActiveValue();\n            });\n    }\n\n    private addValue(value: T): void {\n        const values = [...this.values()];\n        if (values.includes(value)) {\n            return;\n        }\n\n        values.push(value);\n        this.propagateChanges?.(values);\n        this.values.set(values);\n    }\n\n    private updateTypeaheadSearchOptions(ignore: T[]): void {\n        if (!this.asyncTypeahead) {\n            return;\n        }\n\n        const searchOptions = this.asyncTypeahead.searchOptions();\n        this.asyncTypeahead.setSearchOptions({ ...(searchOptions ?? {}), ignore });\n    }\n}\n","import { Component } from \"@angular/core\";\n\n@Component({\n    selector: \"nice-chip-list-items-clear-icon\",\n    templateUrl: \"chip-list-items-clear-icon.svg\"\n})\nexport class NiceChipListItemsClearIcon {}\n","<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n    <path d=\"M12 0a12 12 0 1 0 12 12A12 12 0 0 0 12 0Zm5.49 16.07a1 1 0 0 1 -1.41 1.42l-3.9 -3.9a0.25 0.25 0 0 0 -0.36 0l-3.9 3.9a1 1 0 1 1 -1.41 -1.42l3.9 -3.89a0.25 0.25 0 0 0 0 -0.36l-3.9 -3.9a1 1 0 0 1 1.41 -1.41l3.9 3.9a0.25 0.25 0 0 0 0.36 0l3.9 -3.9a1 1 0 0 1 1.41 1.41l-3.9 3.9a0.25 0.25 0 0 0 0 0.36Z\" fill=\"currentColor\" stroke-width=\"1\"></path>\n</svg>\n","import { ChangeDetectionStrategy, Component, inject, Injector, output, Signal } from \"@angular/core\";\nimport { toSignal } from \"@angular/core/rxjs-interop\";\nimport { MatChipRemove, MatChipRow, MatChipSet } from \"@angular/material/chips\";\nimport { Observable } from \"rxjs\";\nimport { NiceChipListItemsClearIcon } from \"../icons/clear/chip-list-items-clear-icon\";\n\n@Component({\n    selector: \"nice-chip-list-items\",\n    templateUrl: \"./chip-list-items.html\",\n    styleUrls: [\"./chip-list-items.scss\"],\n    imports: [\n        MatChipSet,\n        MatChipRemove,\n        MatChipRow,\n        NiceChipListItemsClearIcon\n    ],\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class NiceChipListItems<T> {\n    public readonly removeChip = output<number>();\n\n    protected readonly injector = inject(Injector);\n\n    public items?: Signal<T[]>;\n    public formatLabelFn?: (value: T) => string;\n\n    public setItemsReactivity(items$: Observable<T[]>): void {\n        this.items = toSignal(items$, { injector: this.injector, initialValue: [] });\n    }\n\n    public setFormatLabel(fn: (value: T) => string): void {\n        this.formatLabelFn = fn;\n    }\n\n    public remove(index: number): void {\n        this.removeChip.emit(index);\n    }\n}\n","@if (items) {\n    <mat-chip-set>\n        @for (item of items(); track item) {\n            <mat-chip-row [highlighted]=\"true\" (removed)=\"remove($index)\">\n                @if (formatLabelFn) {\n                    {{ formatLabelFn(item) }}\n                } @else {\n                    {{ item }}\n                }\n\n                <button matChipRemove>\n                    <nice-chip-list-items-clear-icon />\n                </button>\n            </mat-chip-row>\n        }\n    </mat-chip-set>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;MAoBa,qBAAqB,CAAA;AACd,IAAA,YAAY,GAAG,KAAK,CAAC,QAAQ,uDAAwB;AACrD,IAAA,gBAAgB,GAAG,KAAK,CAAU,IAAI,4DAAC;AACvC,IAAA,sBAAsB,GAAG,KAAK,CAAW,CAAC,OAAO,CAAC,kEAAC;AAElD,IAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;AAC/B,IAAA,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC;IAC3B,cAAc,GAAG,MAAM,CAAwB,kBAAkB,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;IACtF,SAAS,GAAG,MAAM,CAAY,SAAS,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AAE5D,IAAA,MAAM,GAAG,MAAM,CAAM,EAAE,kDAAC;AAEjC,IAAA,gBAAgB;AAExB,IAAA,WAAA,GAAA;AACI,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;AAChB,YAAA,IAAI,CAAC,SAAS,CAAC,aAAa,GAAG,IAAI;QACvC;QAEA,MAAM,CAAC,MAAK;AACR,YAAA,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE;YAC5B,SAAS,CAAC,MAAM,IAAI,CAAC,4BAA4B,CAAC,MAAM,CAAC,CAAC;AAC9D,QAAA,CAAC,CAAC;IACN;AAGO,IAAA,SAAS,CAAC,KAAoB,EAAA;AACjC,QAAA,IAAI,IAAI,CAAC,cAAc,EAAE;YACrB;QACJ;AAEA,QAAA,IAAI,CAAC,IAAI,CAAC,sBAAsB,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE;YACrD;QACJ;QAEA,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,KAAK,EAAE;YAC/C;QACJ;QAEA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC;QAClD,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,GAAG,EAAE;QACxC,KAAK,CAAC,cAAc,EAAE;IAC1B;IAEO,QAAQ,GAAA;QACX,IAAI,CAAC,mBAAmB,EAAE;QAE1B,MAAM,aAAa,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa;QACjE,IAAI,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,0BAA0B,CAAC,EAAE;AAC9D,YAAA,aAAa,CAAC,KAAK,CAAC,UAAU,GAAG,YAAY;AAC7C,YAAA,aAAa,CAAC,KAAK,CAAC,aAAa,GAAG,gBAAgB;QACxD;AAEA,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,EAAE;AACxC,QAAA,YAAY,CAAC,kBAAkB,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;QACvF,YAAY,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,KAAK,KAAI;YACxC,MAAM,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;AACjC,YAAA,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;AAEvB,YAAA,IAAI,CAAC,gBAAgB,GAAG,MAAM,CAAC;AAC/B,YAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC;AAC3B,QAAA,CAAC,CAAC;AAEF,QAAA,IAAI,IAAI,CAAC,cAAc,EAAE;AACrB,YAAA,YAAY,CAAC,cAAc,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,cAAe,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QACjF;IACJ;AAEO,IAAA,UAAU,CAAC,GAAe,EAAA;QAC7B,IAAI,CAAC,GAAG,EAAE;AACN,YAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC;QACvB;AAAO,aAAA,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YAC3B,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC;QAC7B;IACJ;AAEO,IAAA,gBAAgB,CAAC,EAAoB,EAAA;AACxC,QAAA,IAAI,CAAC,gBAAgB,GAAG,EAAE;IAC9B;IAEO,iBAAiB,GAAA;QACpB;IACJ;IAEQ,mBAAmB,GAAA;AACvB,QAAA,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;YACtB;QACJ;QAEA,IAAI,CAAC,cAAc,CAAC;AACf,aAAA,SAAS,CAAC,CAAC,KAAK,KAAI;YACjB,IAAI,CAAC,KAAK,EAAE;gBACR;YACJ;AAEA,YAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;AACpB,YAAA,IAAI,CAAC,cAAc,EAAE,iBAAiB,EAAE;AAC5C,QAAA,CAAC,CAAC;IACV;AAEQ,IAAA,QAAQ,CAAC,KAAQ,EAAA;QACrB,MAAM,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;AACjC,QAAA,IAAI,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE;YACxB;QACJ;AAEA,QAAA,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;AAClB,QAAA,IAAI,CAAC,gBAAgB,GAAG,MAAM,CAAC;AAC/B,QAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC;IAC3B;AAEQ,IAAA,4BAA4B,CAAC,MAAW,EAAA;AAC5C,QAAA,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;YACtB;QACJ;QAEA,MAAM,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,aAAa,EAAE;AACzD,QAAA,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,IAAI,aAAa,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC;IAC9E;uGAtHS,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAArB,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,yDAAA,EAAA,MAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,gBAAA,EAAA,EAAA,iBAAA,EAAA,kBAAA,EAAA,UAAA,EAAA,kBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,sBAAA,EAAA,EAAA,iBAAA,EAAA,wBAAA,EAAA,UAAA,EAAA,wBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,SAAA,EAAA,mBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAArB,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAHjC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE;AACb,iBAAA;wDA2BU,SAAS,EAAA,CAAA;sBADf,YAAY;uBAAC,SAAS,EAAE,CAAC,QAAQ,CAAC;;;MCvC1B,0BAA0B,CAAA;uGAA1B,0BAA0B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAA1B,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,0BAA0B,2FCNvC,ubAGA,EAAA,CAAA;;2FDGa,0BAA0B,EAAA,UAAA,EAAA,CAAA;kBAJtC,SAAS;+BACI,iCAAiC,EAAA,QAAA,EAAA,ubAAA,EAAA;;;MEelC,iBAAiB,CAAA;IACV,UAAU,GAAG,MAAM,EAAU;AAE1B,IAAA,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC;AAEvC,IAAA,KAAK;AACL,IAAA,aAAa;AAEb,IAAA,kBAAkB,CAAC,MAAuB,EAAA;AAC7C,QAAA,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC;IAChF;AAEO,IAAA,cAAc,CAAC,EAAwB,EAAA;AAC1C,QAAA,IAAI,CAAC,aAAa,GAAG,EAAE;IAC3B;AAEO,IAAA,MAAM,CAAC,KAAa,EAAA;AACvB,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC;IAC/B;uGAlBS,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAjB,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,sBAAA,EAAA,OAAA,EAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EClB9B,qgBAiBA,EAAA,MAAA,EAAA,CAAA,2EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDNQ,UAAU,mGACV,aAAa,EAAA,QAAA,EAAA,iBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACb,UAAU,EAAA,QAAA,EAAA,wEAAA,EAAA,MAAA,EAAA,CAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACV,0BAA0B,EAAA,QAAA,EAAA,iCAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAIrB,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAZ7B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,sBAAsB,EAAA,OAAA,EAGvB;wBACL,UAAU;wBACV,aAAa;wBACb,UAAU;wBACV;qBACH,EAAA,eAAA,EACgB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,qgBAAA,EAAA,MAAA,EAAA,CAAA,2EAAA,CAAA,EAAA;;;AEhBnD;;AAEG;;;;"}

package/fesm2022/recursyve-ngx-material-components-common.mjs

@@ -17,10 +17,10 @@ class NiceTranslatePipe {
     transform(key, params) {
         return this.translater(key, params);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: NiceTranslatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.10", ngImport: i0, type: NiceTranslatePipe, isStandalone: true, name: "niceTranslate" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NiceTranslatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.2.1", ngImport: i0, type: NiceTranslatePipe, isStandalone: true, name: "niceTranslate" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: NiceTranslatePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NiceTranslatePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: "niceTranslate"

package/fesm2022/recursyve-ngx-material-components-common.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"recursyve-ngx-material-components-common.mjs","sources":["../../../src/material-components/common/translater/constant.ts","../../../src/material-components/common/provider.ts","../../../src/material-components/common/translater/translate-pipe.ts","../../../src/material-components/common/index.ts","../../../src/material-components/common/recursyve-ngx-material-components-common.ts"],"sourcesContent":["import { InjectionToken } from \"@angular/core\";\n\nexport const NICE_COMPONENTS_TRANSLATER = new InjectionToken(\"nice_components_translater\");\n","import { Provider } from \"@angular/core\";\nimport { NICE_COMPONENTS_TRANSLATER } from \"./translater/constant\";\nimport { NiceTranslaterOptions } from \"./translater/options\";\n\nexport function provideNiceComponents(options: NiceTranslaterOptions): Provider[] {\n    return [\n        { \n            provide: NICE_COMPONENTS_TRANSLATER,\n            ...options.translater\n        }\n    ];\n}\n","import { inject, Pipe, PipeTransform } from \"@angular/core\";\nimport { NICE_COMPONENTS_TRANSLATER } from \"./constant\";\nimport { NiceTranslater } from \"./translater\";\n\n@Pipe({\n    name: \"niceTranslate\"\n})\nexport class NiceTranslatePipe implements PipeTransform {\n    private readonly translater = inject<NiceTranslater>(NICE_COMPONENTS_TRANSLATER);\n\n    public transform(key: string, params?: Record<string, string>): string {\n        return this.translater(key, params);\n    }\n}\n","/*\n * Public API Surface of dropzone\n */\n\nexport * from \"./provider\";\nexport * from \"./translater/constant\";\nexport * from \"./translater/translate-pipe\";\nexport * from \"./translater/translater\";\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAEa,0BAA0B,GAAG,IAAI,cAAc,CAAC,4BAA4B;;ACEnF,SAAU,qBAAqB,CAAC,OAA8B,EAAA;IAChE,OAAO;AACH,QAAA;AACI,YAAA,OAAO,EAAE,0BAA0B;YACnC,GAAG,OAAO,CAAC;AACd;KACJ;AACL;;MCJa,iBAAiB,CAAA;AACT,IAAA,UAAU,GAAG,MAAM,CAAiB,0BAA0B,CAAC;IAEzE,SAAS,CAAC,GAAW,EAAE,MAA+B,EAAA;QACzD,OAAO,IAAI,CAAC,UAAU,CAAC,GAAG,EAAE,MAAM,CAAC;;wGAJ9B,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,IAAA,EAAA,CAAA;sGAAjB,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,IAAA,EAAA,eAAA,EAAA,CAAA;;4FAAjB,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAH7B,IAAI;AAAC,YAAA,IAAA,EAAA,CAAA;AACF,oBAAA,IAAI,EAAE;AACT,iBAAA;;;ACND;;AAEG;;ACFH;;AAEG;;;;"}
+{"version":3,"file":"recursyve-ngx-material-components-common.mjs","sources":["../../../src/material-components/common/translater/constant.ts","../../../src/material-components/common/provider.ts","../../../src/material-components/common/translater/translate-pipe.ts","../../../src/material-components/common/index.ts","../../../src/material-components/common/recursyve-ngx-material-components-common.ts"],"sourcesContent":["import { InjectionToken } from \"@angular/core\";\n\nexport const NICE_COMPONENTS_TRANSLATER = new InjectionToken(\"nice_components_translater\");\n","import { Provider } from \"@angular/core\";\nimport { NICE_COMPONENTS_TRANSLATER } from \"./translater/constant\";\nimport { NiceTranslaterOptions } from \"./translater/options\";\n\nexport function provideNiceComponents(options: NiceTranslaterOptions): Provider[] {\n    return [\n        { \n            provide: NICE_COMPONENTS_TRANSLATER,\n            ...options.translater\n        }\n    ];\n}\n","import { inject, Pipe, PipeTransform } from \"@angular/core\";\nimport { NICE_COMPONENTS_TRANSLATER } from \"./constant\";\nimport { NiceTranslater } from \"./translater\";\n\n@Pipe({\n    name: \"niceTranslate\"\n})\nexport class NiceTranslatePipe implements PipeTransform {\n    private readonly translater = inject<NiceTranslater>(NICE_COMPONENTS_TRANSLATER);\n\n    public transform(key: string, params?: Record<string, string>): string {\n        return this.translater(key, params);\n    }\n}\n","/*\n * Public API Surface of dropzone\n */\n\nexport * from \"./provider\";\nexport * from \"./translater/constant\";\nexport * from \"./translater/translate-pipe\";\nexport * from \"./translater/translater\";\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAEa,0BAA0B,GAAG,IAAI,cAAc,CAAC,4BAA4B;;ACEnF,SAAU,qBAAqB,CAAC,OAA8B,EAAA;IAChE,OAAO;AACH,QAAA;AACI,YAAA,OAAO,EAAE,0BAA0B;YACnC,GAAG,OAAO,CAAC;AACd;KACJ;AACL;;MCJa,iBAAiB,CAAA;AACT,IAAA,UAAU,GAAG,MAAM,CAAiB,0BAA0B,CAAC;IAEzE,SAAS,CAAC,GAAW,EAAE,MAA+B,EAAA;QACzD,OAAO,IAAI,CAAC,UAAU,CAAC,GAAG,EAAE,MAAM,CAAC;IACvC;uGALS,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,IAAA,EAAA,CAAA;qGAAjB,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,IAAA,EAAA,eAAA,EAAA,CAAA;;2FAAjB,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAH7B,IAAI;AAAC,YAAA,IAAA,EAAA,CAAA;AACF,oBAAA,IAAI,EAAE;AACT,iBAAA;;;ACND;;AAEG;;ACFH;;AAEG;;;;"}

package/fesm2022/recursyve-ngx-material-components-dropzone.mjs

@@ -34,10 +34,10 @@ class NiceDropzoneDirective {
             this.filesDropped.emit(files);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: NiceDropzoneDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.10", type: NiceDropzoneDirective, isStandalone: true, selector: "[niceDropzone]", outputs: { filesDropped: "filesDropped", files: "files" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "ondrop($event)" }, properties: { "class.file-over": "this.fileOver" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NiceDropzoneDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.1", type: NiceDropzoneDirective, isStandalone: true, selector: "[niceDropzone]", outputs: { filesDropped: "filesDropped", files: "files" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "ondrop($event)" }, properties: { "class.file-over": "this.fileOver" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: NiceDropzoneDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NiceDropzoneDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "[niceDropzone]",
@@ -62,19 +62,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
 const NICE_DROPZONE_TRANSLATION_KEYS = new InjectionToken("nice_dropzone_translation_keys");
 
 class NiceDropzoneFileIcon {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: NiceDropzoneFileIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: NiceDropzoneFileIcon, isStandalone: true, selector: "nice-dropzone-file-icon", ngImport: i0, template: "<svg fill=\"none\" viewBox=\"-1.25 -1.25 40 40\" height=\"40\" width=\"40\">\n    <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M5.859375 36.328125h25.78125c1.294375 0 2.34375 -1.049375 2.34375 -2.34375V12.6890625c-0.00015625 -0.621171875 -0.246875 -1.2168750000000002 -0.6859375 -1.65625l-9.175 -9.175c-0.439375 -0.43909062499999996 -1.03515625 -0.6858046875 -1.65625 -0.6859375H5.859375c-1.2765624999999998 0 -2.34375 1.0671875000000002 -2.34375 2.34375v30.46875c0 1.2765624999999998 1.0671875000000002 2.34375 2.34375 2.34375Z\" stroke-width=\"2.5\"></path>\n    <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M33.984375 12.890625h-9.375c-0.6215625 0 -1.2178125 -0.24693750000000003 -1.65734375 -0.68646875S22.265625 11.16846875 22.265625 10.546875v-9.375\" stroke-width=\"2.5\"></path>\n</svg>" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NiceDropzoneFileIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: NiceDropzoneFileIcon, isStandalone: true, selector: "nice-dropzone-file-icon", ngImport: i0, template: "<svg fill=\"none\" viewBox=\"-1.25 -1.25 40 40\" height=\"40\" width=\"40\">\n    <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M5.859375 36.328125h25.78125c1.294375 0 2.34375 -1.049375 2.34375 -2.34375V12.6890625c-0.00015625 -0.621171875 -0.246875 -1.2168750000000002 -0.6859375 -1.65625l-9.175 -9.175c-0.439375 -0.43909062499999996 -1.03515625 -0.6858046875 -1.65625 -0.6859375H5.859375c-1.2765624999999998 0 -2.34375 1.0671875000000002 -2.34375 2.34375v30.46875c0 1.2765624999999998 1.0671875000000002 2.34375 2.34375 2.34375Z\" stroke-width=\"2.5\"></path>\n    <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M33.984375 12.890625h-9.375c-0.6215625 0 -1.2178125 -0.24693750000000003 -1.65734375 -0.68646875S22.265625 11.16846875 22.265625 10.546875v-9.375\" stroke-width=\"2.5\"></path>\n</svg>" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: NiceDropzoneFileIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NiceDropzoneFileIcon, decorators: [{
             type: Component,
             args: [{ selector: "nice-dropzone-file-icon", template: "<svg fill=\"none\" viewBox=\"-1.25 -1.25 40 40\" height=\"40\" width=\"40\">\n    <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M5.859375 36.328125h25.78125c1.294375 0 2.34375 -1.049375 2.34375 -2.34375V12.6890625c-0.00015625 -0.621171875 -0.246875 -1.2168750000000002 -0.6859375 -1.65625l-9.175 -9.175c-0.439375 -0.43909062499999996 -1.03515625 -0.6858046875 -1.65625 -0.6859375H5.859375c-1.2765624999999998 0 -2.34375 1.0671875000000002 -2.34375 2.34375v30.46875c0 1.2765624999999998 1.0671875000000002 2.34375 2.34375 2.34375Z\" stroke-width=\"2.5\"></path>\n    <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M33.984375 12.890625h-9.375c-0.6215625 0 -1.2178125 -0.24693750000000003 -1.65734375 -0.68646875S22.265625 11.16846875 22.265625 10.546875v-9.375\" stroke-width=\"2.5\"></path>\n</svg>" }]
         }] });
 
 class NiceDropzoneImageIcon {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: NiceDropzoneImageIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: NiceDropzoneImageIcon, isStandalone: true, selector: "nice-dropzone-image-icon", ngImport: i0, template: "<svg width=\"40\" height=\"43\" viewBox=\"0 0 40 43\" fill=\"none\">\n    <path d=\"M29.333 1.5H2.66634C1.92996 1.5 1.33301 2.09695 1.33301 2.83333V33.0556C1.33301 33.7919 1.92996 34.3889 2.66634 34.3889H29.333C30.0694 34.3889 30.6663 33.7919 30.6663 33.0556V2.83333C30.6663 2.09695 30.0694 1.5 29.333 1.5Z\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M38.6667 11.2778V40.1667C38.6621 40.5189 38.5201 40.8554 38.2711 41.1044C38.022 41.3535 37.6855 41.4954 37.3333 41.5001H12\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M30.6663 27.2778H1.33301\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M7.55566 27.2778L16.8001 14.0689C17.0316 13.7366 17.3357 13.4614 17.6895 13.2642C18.0432 13.0669 18.4372 12.9528 18.8415 12.9306C19.2459 12.9083 19.6501 12.9784 20.0233 13.1356C20.3965 13.2928 20.7291 13.533 20.9957 13.8378L30.6668 25.0556\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M9.33268 6.8335C9.8601 6.8335 10.3757 6.98989 10.8142 7.28291C11.2527 7.57593 11.5945 7.9924 11.7964 8.47967C11.9982 8.96694 12.051 9.50312 11.9481 10.0204C11.8452 10.5377 11.5912 11.0128 11.2183 11.3858C10.8454 11.7587 10.3702 12.0127 9.85292 12.1156C9.33564 12.2185 8.79946 12.1657 8.31219 11.9638C7.82492 11.762 7.40845 11.4202 7.11543 10.9817C6.82241 10.5432 6.66602 10.0276 6.66602 9.50016C6.66602 8.79292 6.94697 8.11464 7.44706 7.61454C7.94716 7.11445 8.62544 6.8335 9.33268 6.8335\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NiceDropzoneImageIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: NiceDropzoneImageIcon, isStandalone: true, selector: "nice-dropzone-image-icon", ngImport: i0, template: "<svg width=\"40\" height=\"43\" viewBox=\"0 0 40 43\" fill=\"none\">\n    <path d=\"M29.333 1.5H2.66634C1.92996 1.5 1.33301 2.09695 1.33301 2.83333V33.0556C1.33301 33.7919 1.92996 34.3889 2.66634 34.3889H29.333C30.0694 34.3889 30.6663 33.7919 30.6663 33.0556V2.83333C30.6663 2.09695 30.0694 1.5 29.333 1.5Z\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M38.6667 11.2778V40.1667C38.6621 40.5189 38.5201 40.8554 38.2711 41.1044C38.022 41.3535 37.6855 41.4954 37.3333 41.5001H12\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M30.6663 27.2778H1.33301\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M7.55566 27.2778L16.8001 14.0689C17.0316 13.7366 17.3357 13.4614 17.6895 13.2642C18.0432 13.0669 18.4372 12.9528 18.8415 12.9306C19.2459 12.9083 19.6501 12.9784 20.0233 13.1356C20.3965 13.2928 20.7291 13.533 20.9957 13.8378L30.6668 25.0556\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M9.33268 6.8335C9.8601 6.8335 10.3757 6.98989 10.8142 7.28291C11.2527 7.57593 11.5945 7.9924 11.7964 8.47967C11.9982 8.96694 12.051 9.50312 11.9481 10.0204C11.8452 10.5377 11.5912 11.0128 11.2183 11.3858C10.8454 11.7587 10.3702 12.0127 9.85292 12.1156C9.33564 12.2185 8.79946 12.1657 8.31219 11.9638C7.82492 11.762 7.40845 11.4202 7.11543 10.9817C6.82241 10.5432 6.66602 10.0276 6.66602 9.50016C6.66602 8.79292 6.94697 8.11464 7.44706 7.61454C7.94716 7.11445 8.62544 6.8335 9.33268 6.8335\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: NiceDropzoneImageIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NiceDropzoneImageIcon, decorators: [{
             type: Component,
             args: [{ selector: "nice-dropzone-image-icon", template: "<svg width=\"40\" height=\"43\" viewBox=\"0 0 40 43\" fill=\"none\">\n    <path d=\"M29.333 1.5H2.66634C1.92996 1.5 1.33301 2.09695 1.33301 2.83333V33.0556C1.33301 33.7919 1.92996 34.3889 2.66634 34.3889H29.333C30.0694 34.3889 30.6663 33.7919 30.6663 33.0556V2.83333C30.6663 2.09695 30.0694 1.5 29.333 1.5Z\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M38.6667 11.2778V40.1667C38.6621 40.5189 38.5201 40.8554 38.2711 41.1044C38.022 41.3535 37.6855 41.4954 37.3333 41.5001H12\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M30.6663 27.2778H1.33301\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M7.55566 27.2778L16.8001 14.0689C17.0316 13.7366 17.3357 13.4614 17.6895 13.2642C18.0432 13.0669 18.4372 12.9528 18.8415 12.9306C19.2459 12.9083 19.6501 12.9784 20.0233 13.1356C20.3965 13.2928 20.7291 13.533 20.9957 13.8378L30.6668 25.0556\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M9.33268 6.8335C9.8601 6.8335 10.3757 6.98989 10.8142 7.28291C11.2527 7.57593 11.5945 7.9924 11.7964 8.47967C11.9982 8.96694 12.051 9.50312 11.9481 10.0204C11.8452 10.5377 11.5912 11.0128 11.2183 11.3858C10.8454 11.7587 10.3702 12.0127 9.85292 12.1156C9.33564 12.2185 8.79946 12.1657 8.31219 11.9638C7.82492 11.762 7.40845 11.4202 7.11543 10.9817C6.82241 10.5432 6.66602 10.0276 6.66602 9.50016C6.66602 8.79292 6.94697 8.11464 7.44706 7.61454C7.94716 7.11445 8.62544 6.8335 9.33268 6.8335\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n" }]
         }] });
@@ -101,10 +101,10 @@ class FileSizePipe {
         const unit = this.translater(this.translationKeys.size.units[this.units[boundedUnitIndex]]);
         return `${size.toFixed(precision)} ${unit}`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: FileSizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.10", ngImport: i0, type: FileSizePipe, isStandalone: true, name: "niceFileSize" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: FileSizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.2.1", ngImport: i0, type: FileSizePipe, isStandalone: true, name: "niceFileSize" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: FileSizePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: FileSizePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: "niceFileSize"
@@ -112,38 +112,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
         }] });
 
 class NiceDropzoneDeleteIcon {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: NiceDropzoneDeleteIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: NiceDropzoneDeleteIcon, isStandalone: true, selector: "nice-dropzone-delete-icon", ngImport: i0, template: "<svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" focusable=\"false\" aria-hidden=\"true\">\n    <path d=\"M12 0a12 12 0 1 0 12 12A12 12 0 0 0 12 0Zm5.49 16.07a1 1 0 0 1 -1.41 1.42l-3.9 -3.9a0.25 0.25 0 0 0 -0.36 0l-3.9 3.9a1 1 0 1 1 -1.41 -1.42l3.9 -3.89a0.25 0.25 0 0 0 0 -0.36l-3.9 -3.9a1 1 0 0 1 1.41 -1.41l3.9 3.9a0.25 0.25 0 0 0 0.36 0l3.9 -3.9a1 1 0 0 1 1.41 1.41l-3.9 3.9a0.25 0.25 0 0 0 0 0.36Z\" fill=\"currentColor\" stroke-width=\"1\"></path>\n</svg>" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NiceDropzoneDeleteIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: NiceDropzoneDeleteIcon, isStandalone: true, selector: "nice-dropzone-delete-icon", ngImport: i0, template: "<svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" focusable=\"false\" aria-hidden=\"true\">\n    <path d=\"M12 0a12 12 0 1 0 12 12A12 12 0 0 0 12 0Zm5.49 16.07a1 1 0 0 1 -1.41 1.42l-3.9 -3.9a0.25 0.25 0 0 0 -0.36 0l-3.9 3.9a1 1 0 1 1 -1.41 -1.42l3.9 -3.89a0.25 0.25 0 0 0 0 -0.36l-3.9 -3.9a1 1 0 0 1 1.41 -1.41l3.9 3.9a0.25 0.25 0 0 0 0.36 0l3.9 -3.9a1 1 0 0 1 1.41 1.41l-3.9 3.9a0.25 0.25 0 0 0 0 0.36Z\" fill=\"currentColor\" stroke-width=\"1\"></path>\n</svg>" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: NiceDropzoneDeleteIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NiceDropzoneDeleteIcon, decorators: [{
             type: Component,
             args: [{ selector: "nice-dropzone-delete-icon", template: "<svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" focusable=\"false\" aria-hidden=\"true\">\n    <path d=\"M12 0a12 12 0 1 0 12 12A12 12 0 0 0 12 0Zm5.49 16.07a1 1 0 0 1 -1.41 1.42l-3.9 -3.9a0.25 0.25 0 0 0 -0.36 0l-3.9 3.9a1 1 0 1 1 -1.41 -1.42l3.9 -3.89a0.25 0.25 0 0 0 0 -0.36l-3.9 -3.9a1 1 0 0 1 1.41 -1.41l3.9 3.9a0.25 0.25 0 0 0 0.36 0l3.9 -3.9a1 1 0 0 1 1.41 1.41l-3.9 3.9a0.25 0.25 0 0 0 0 0.36Z\" fill=\"currentColor\" stroke-width=\"1\"></path>\n</svg>" }]
         }] });
 
 class NiceDropzoneFilePreview {
-    file = input.required();
-    mode = input.required();
+    file = input.required(...(ngDevMode ? [{ debugName: "file" }] : []));
+    mode = input.required(...(ngDevMode ? [{ debugName: "mode" }] : []));
     clickDelete = output();
-    isImage = computed(() => this.mode() === "image");
+    isImage = computed(() => this.mode() === "image", ...(ngDevMode ? [{ debugName: "isImage" }] : []));
     imageDimensions = computed(() => {
         const file = this.file();
         if (isLocalFile(file)) {
             return file.dimensions ?? null;
         }
         return null;
-    });
+    }, ...(ngDevMode ? [{ debugName: "imageDimensions" }] : []));
     imageUrl = computed(() => {
         const file = this.file();
         if (isLocalFile(file)) {
             return URL.createObjectURL(file.file);
         }
         return file.url;
-    });
+    }, ...(ngDevMode ? [{ debugName: "imageUrl" }] : []));
     _translationKeys = inject(NICE_DROPZONE_TRANSLATION_KEYS);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: NiceDropzoneFilePreview, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: NiceDropzoneFilePreview, isStandalone: true, selector: "nice-dropzone-file-preview", inputs: { file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { clickDelete: "clickDelete" }, host: { styleAttribute: "flex: 1 1 auto;" }, ngImport: i0, template: "<div class=\"nice-dropzone-preview\">\n    @if (isImage()) {\n        <img class=\"nice-dropzone-preview-image\" alt=\"\" draggable=\"false\" [src]=\"imageUrl()\" />\n    } @else {\n        <div class=\"nice-dropzone-preview-file\">\n            <nice-dropzone-file-icon />\n        </div>\n    }\n\n    <div class=\"nice-dropzone-preview-file-info\">\n        <span class=\"mat-body-medium\">{{ file().name }}</span>\n\n        @if (imageDimensions(); as dimension) {\n            <span class=\"mat-label-medium\">\n                {{ `${dimension.width}x${dimension.height}` }} {{ _translationKeys.ratio.pixels | niceTranslate }}\n            </span>\n        }\n\n        @if (file().size; as size) {\n            <span class=\"mat-label-medium\">{{ size | niceFileSize }}</span>\n        }\n    </div>\n\n    <div class=\"nice-dropzone-preview-actions\">\n        <button class=\"nice-dropzone-preview-actions-delete\" (click)=\"$event.stopPropagation(); clickDelete.emit()\">\n            <nice-dropzone-delete-icon />\n        </button>\n    </div>\n</div>\n", styles: [".nice-dropzone-preview{position:relative;display:flex;align-items:center;justify-content:center;flex:1 1 auto;gap:32px;height:100px;padding-top:12px;padding-bottom:12px;border-style:solid;border-radius:var(--nice-dropzone-shape, 8px);border-width:var(--nice-dropzone-border-width, 1px);border-color:var(--nice-dropzone-border-color, var(--mat-sys-primary))}.nice-dropzone-preview .nice-dropzone-preview-image{max-height:100%;max-width:min(200px,50%);-webkit-user-select:none;user-select:none}.nice-dropzone-preview .nice-dropzone-preview-file{color:var(--mat-sys-primary)}.nice-dropzone-preview .nice-dropzone-preview-file-info{display:flex;flex-direction:column;gap:4px;max-width:min(400px,40%);-webkit-user-select:none;user-select:none}.nice-dropzone-preview .nice-dropzone-preview-actions{position:absolute;width:24px;height:24px;background-color:var(--mat-sys-on-primary);border-radius:50%;top:-12px;right:-12px;opacity:0;transition:opacity .1s ease-in-out}.nice-dropzone-preview .nice-dropzone-preview-actions .nice-dropzone-preview-actions-delete{background-color:transparent;color:var(--mat-sys-primary);border:none;cursor:pointer;padding:0}.nice-dropzone-preview:hover .nice-dropzone-preview-actions,.nice-dropzone-preview:focus .nice-dropzone-preview-actions{opacity:1}\n"], dependencies: [{ kind: "component", type: NiceDropzoneDeleteIcon, selector: "nice-dropzone-delete-icon" }, { kind: "pipe", type: NiceTranslatePipe, name: "niceTranslate" }, { kind: "pipe", type: FileSizePipe, name: "niceFileSize" }, { kind: "component", type: NiceDropzoneFileIcon, selector: "nice-dropzone-file-icon" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NiceDropzoneFilePreview, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: NiceDropzoneFilePreview, isStandalone: true, selector: "nice-dropzone-file-preview", inputs: { file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { clickDelete: "clickDelete" }, host: { styleAttribute: "flex: 1 1 auto;" }, ngImport: i0, template: "<div class=\"nice-dropzone-preview\">\n    @if (isImage()) {\n        <img class=\"nice-dropzone-preview-image\" alt=\"\" draggable=\"false\" [src]=\"imageUrl()\" />\n    } @else {\n        <div class=\"nice-dropzone-preview-file\">\n            <nice-dropzone-file-icon />\n        </div>\n    }\n\n    <div class=\"nice-dropzone-preview-file-info\">\n        <span class=\"mat-body-medium\">{{ file().name }}</span>\n\n        @if (imageDimensions(); as dimension) {\n            <span class=\"mat-label-medium\">\n                {{ `${dimension.width}x${dimension.height}` }} {{ _translationKeys.ratio.pixels | niceTranslate }}\n            </span>\n        }\n\n        @if (file().size; as size) {\n            <span class=\"mat-label-medium\">{{ size | niceFileSize }}</span>\n        }\n    </div>\n\n    <div class=\"nice-dropzone-preview-actions\">\n        <button class=\"nice-dropzone-preview-actions-delete\" (click)=\"$event.stopPropagation(); clickDelete.emit()\">\n            <nice-dropzone-delete-icon />\n        </button>\n    </div>\n</div>\n", styles: [".nice-dropzone-preview{position:relative;display:flex;align-items:center;justify-content:center;flex:1 1 auto;gap:32px;height:100px;padding-top:12px;padding-bottom:12px;border-style:solid;border-radius:var(--nice-dropzone-shape, 8px);border-width:var(--nice-dropzone-border-width, 1px);border-color:var(--nice-dropzone-border-color, var(--mat-sys-primary))}.nice-dropzone-preview .nice-dropzone-preview-image{max-height:100%;max-width:min(200px,50%);-webkit-user-select:none;user-select:none}.nice-dropzone-preview .nice-dropzone-preview-file{color:var(--mat-sys-primary)}.nice-dropzone-preview .nice-dropzone-preview-file-info{display:flex;flex-direction:column;gap:4px;max-width:min(400px,40%);-webkit-user-select:none;user-select:none}.nice-dropzone-preview .nice-dropzone-preview-actions{position:absolute;width:24px;height:24px;background-color:var(--mat-sys-on-primary);border-radius:50%;top:-12px;right:-12px;opacity:0;transition:opacity .1s ease-in-out}.nice-dropzone-preview .nice-dropzone-preview-actions .nice-dropzone-preview-actions-delete{background-color:transparent;color:var(--mat-sys-primary);border:none;cursor:pointer;padding:0}.nice-dropzone-preview:hover .nice-dropzone-preview-actions,.nice-dropzone-preview:focus .nice-dropzone-preview-actions{opacity:1}\n"], dependencies: [{ kind: "component", type: NiceDropzoneDeleteIcon, selector: "nice-dropzone-delete-icon" }, { kind: "component", type: NiceDropzoneFileIcon, selector: "nice-dropzone-file-icon" }, { kind: "pipe", type: NiceTranslatePipe, name: "niceTranslate" }, { kind: "pipe", type: FileSizePipe, name: "niceFileSize" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: NiceDropzoneFilePreview, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NiceDropzoneFilePreview, decorators: [{
             type: Component,
             args: [{ selector: "nice-dropzone-file-preview", imports: [NiceDropzoneDeleteIcon, NiceTranslatePipe, FileSizePipe, NiceDropzoneFileIcon], host: {
                         style: "flex: 1 1 auto;"
@@ -152,21 +152,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
 
 const niceDropzoneModes = ["image", "file", "all"];
 class NiceDropzone {
-    mode = input("all");
-    multiple = input(false, { transform: coerceBooleanProperty });
-    disabled = input(false, { transform: coerceBooleanProperty });
-    accept = input();
-    config = input();
-    maxFileSize = input();
-    _elementRef = viewChild("element", { read: ElementRef });
-    _inputRef = viewChild("fileInput");
+    mode = input("all", ...(ngDevMode ? [{ debugName: "mode" }] : []));
+    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
+    accept = input(...(ngDevMode ? [undefined, { debugName: "accept" }] : []));
+    config = input(...(ngDevMode ? [undefined, { debugName: "config" }] : []));
+    maxFileSize = input(...(ngDevMode ? [undefined, { debugName: "maxFileSize" }] : []));
+    _elementRef = viewChild("element", ...(ngDevMode ? [{ debugName: "_elementRef", read: ElementRef }] : [{ read: ElementRef }]));
+    _inputRef = viewChild("fileInput", ...(ngDevMode ? [{ debugName: "_inputRef" }] : []));
     /**
      * Handles the lazy creation of the MatButton ripple.
      * Used to improve the initial load time of large applications.
      */
     _rippleLoader = inject(MatRippleLoader);
     _translationKeys = inject(NICE_DROPZONE_TRANSLATION_KEYS);
-    files = signal([]);
+    files = signal([], ...(ngDevMode ? [{ debugName: "files" }] : []));
     _disabled = false;
     _onChange;
     _value = null;
@@ -283,8 +283,8 @@ class NiceDropzone {
         }
         input.nativeElement.value = "";
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: NiceDropzone, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: NiceDropzone, isStandalone: true, selector: "nice-dropzone", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NiceDropzone, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: NiceDropzone, isStandalone: true, selector: "nice-dropzone", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => NiceDropzone),
@@ -292,7 +292,7 @@ class NiceDropzone {
             }
         ], viewQueries: [{ propertyName: "_elementRef", first: true, predicate: ["element"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_inputRef", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n    class=\"nice-dropzone-container\"\n>\n    <div\n        #element\n        role=\"none\"\n        class=\"nice-dropzone\"\n        [class.nice-dropzone-disabled]=\"_disabled\"\n        [class.nice-dropzone-multiple]=\"multiple()\"\n        [class.nice-dropzone-single]=\"!multiple()\"\n        [class.nice-dropzone-image]=\"mode() === 'image'\"\n        [class.nice-dropzone-file]=\"mode() === 'file'\"\n        [class.nice-dropzone-all]=\"mode() === 'all'\"\n        [class.nice-dropzone-selected]=\"files().length > 0\"\n\n        niceDropzone\n        (filesDropped)=\"onFilesDropped($event)\"\n        (click)=\"fileInput.click()\"\n        (keyup.enter)=\"fileInput.click()\"\n    >\n        <div class=\"nice-dropzone-ripple\"></div>\n\n        @if (multiple() || (!multiple() && !files().length)) {\n            <div class=\"nice-dropzone-placeholder\">\n                <div class=\"nice-dropzone-icon\">\n                    @if (mode() === \"image\") {\n                        <nice-dropzone-image-icon />\n                    } @else {\n                        <nice-dropzone-file-icon />\n                    }\n                </div>\n\n                <div class=\"nice-dropzone-content\">\n                    <span class=\"nice-dropzone-content-title\">\n                        @if (mode() === \"image\") {\n                            @if (multiple()) {\n                                {{ _translationKeys.upload.images | niceTranslate }}\n                            } @else {\n                                {{ _translationKeys.upload.image | niceTranslate }}\n                            }\n                        } @else {\n                            @if (multiple()) {\n                                {{ _translationKeys.upload.files | niceTranslate }}\n                            } @else {\n                                {{ _translationKeys.upload.file | niceTranslate }}\n                            }\n                        }\n                    </span>\n\n                    <div class=\"nice-dropzone-content-description\">\n                        @if (accept()?.length) {\n                            <span>\n                                {{ _translationKeys.format.label | niceTranslate }}:&nbsp;\n\n                                <span>\n                                    {{ accept()?.join(\", \") }}\n                                </span>\n                            </span>\n                        }\n\n                        @if (mode() === \"image\" && config()?.recommendedSize; as recommendedSize) {\n                            <span>\n                                {{ _translationKeys.ratio.label | niceTranslate }}:&nbsp;\n\n                                <span>{{ recommendedSize.width }}x{{ recommendedSize.height }} {{ _translationKeys.ratio.pixels | niceTranslate }}</span>\n                            </span>\n                        }\n\n                        @if (maxFileSize(); as maxFileSize) {\n                            <span>\n                                {{ _translationKeys.size.label | niceTranslate }}:&nbsp;\n\n                                <span>{{ maxFileSize.size }} {{ _translationKeys.size.units[maxFileSize.unit] | niceTranslate }}</span>\n                            </span>\n                        }\n                    </div>\n                </div>\n            </div>\n        } @else {\n            <nice-dropzone-file-preview [file]=\"files()[0]\" [mode]=\"mode()\" (clickDelete)=\"onFileDelete(0)\" />\n        }\n    </div>\n\n    @if (multiple()) {\n        <div class=\"nice-dropzone-multiple-files-preview\">\n            @for (file of files(); track file) {\n                <nice-dropzone-file-preview [file]=\"file\" [mode]=\"mode()\" (clickDelete)=\"onFileDelete($index)\" />\n            }\n        </div>\n    }\n</div>\n\n<input #fileInput style=\"display: none;\" type=\"file\" [accept]=\"accept()\" [multiple]=\"multiple()\" (change)=\"onFileChanged($event)\" />\n", styles: [".nice-dropzone-container{--nice-dropzone-ripple-color: color-mix(in srgb, var(--mat-sys-primary) 10%, transparent);--mat-ripple-color: var(--nice-dropzone-ripple-color)}.nice-dropzone-container .nice-dropzone{position:relative;display:flex;justify-content:center;place-items:center;cursor:pointer;min-height:124px;border-radius:var(--nice-dropzone-shape, 8px)}.nice-dropzone-container .nice-dropzone.nice-dropzone-single:not(.nice-dropzone-selected),.nice-dropzone-container .nice-dropzone.nice-dropzone-multiple{border-style:dashed;border-width:var(--nice-dropzone-border-width, 1px);border-color:var(--nice-dropzone-border-color, var(--mat-sys-primary))}.nice-dropzone-container .nice-dropzone .nice-dropzone-placeholder{display:flex;justify-content:center;place-items:center;gap:32px}.nice-dropzone-container .nice-dropzone .nice-dropzone-icon{color:var(--nice-dropzone-icon-color, var(--mat-sys-primary))}.nice-dropzone-container .nice-dropzone .nice-dropzone-content{-webkit-user-select:none;user-select:none;color:var(--nice-dropzone-text-color, var(--mat-sys-primary))}.nice-dropzone-container .nice-dropzone .nice-dropzone-content .nice-dropzone-content-title{font-size:var(--nice-dropzone-content-title-font-size, 18px);font-weight:var(--nice-dropzone-content-title-font-weight, 600);line-height:var(--nice-dropzone-content-title-line-height, 22px)}.nice-dropzone-container .nice-dropzone .nice-dropzone-content .nice-dropzone-content-description{padding-top:4px;display:flex;flex-direction:column;gap:4px;font-size:var(--nice-dropzone-content-description-font-size, 14px);font-weight:var(--nice-dropzone-content-description-font-weight, 400);line-height:var(--nice-dropzone-content-description-line-height, 16px)}.nice-dropzone-container .nice-dropzone .nice-dropzone-ripple,.nice-dropzone-container .nice-dropzone .nice-dropzone-ripple:before{inset:0;position:absolute;pointer-events:none;border-radius:inherit}.nice-dropzone-container .nice-dropzone .nice-dropzone-ripple{overflow:hidden}.nice-dropzone-container .nice-dropzone .mat-ripple-element{background-color:var(--nice-dropzone-ripple-color)}.nice-dropzone-container .nice-dropzone:hover{background-color:var(--nice-dropzone-hover-color, color-mix(in srgb, var(--mat-sys-primary) 20%, transparent))}.nice-dropzone-container .nice-dropzone.nice-dropzone-disabled{cursor:default;pointer-events:none;opacity:.5}.nice-dropzone-container .nice-dropzone-multiple-files-preview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding-top:16px}\n"], dependencies: [{ kind: "directive", type: NiceDropzoneDirective, selector: "[niceDropzone]", outputs: ["filesDropped", "files"] }, { kind: "component", type: NiceDropzoneImageIcon, selector: "nice-dropzone-image-icon" }, { kind: "component", type: NiceDropzoneFileIcon, selector: "nice-dropzone-file-icon" }, { kind: "component", type: NiceDropzoneFilePreview, selector: "nice-dropzone-file-preview", inputs: ["file", "mode"], outputs: ["clickDelete"] }, { kind: "pipe", type: NiceTranslatePipe, name: "niceTranslate" }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: NiceDropzone, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: NiceDropzone, decorators: [{
             type: Component,
             args: [{ selector: "nice-dropzone", imports: [
                         NiceDropzoneDirective,