@recursyve/nice-ui-kit.v2 13.2.0-beta.122 → 13.2.0-beta.124

package/fesm2015/recursyve-nice-ui-kit.v2.mjs

@@ -2,7 +2,7 @@ import * as i1$a from '@angular/animations';
 import { animation, style, animate, trigger, transition, useAnimation, state, keyframes } from '@angular/animations';
 import { HttpContextToken, HttpResponse, HttpContext, HttpParams } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { Injectable, NgModule, EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, HostBinding, InjectionToken, Directive, HostListener, forwardRef, Optional, Inject, ViewChild, ViewChildren, Self, Pipe, ElementRef, PLATFORM_ID, TemplateRef, ContentChildren, ContentChild, SimpleChange, SkipSelf } from '@angular/core';
+import { Injectable, NgModule, EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, HostBinding, InjectionToken, Directive, HostListener, forwardRef, TemplateRef, Optional, Inject, ViewChild, ContentChild, ViewChildren, Self, Pipe, ElementRef, PLATFORM_ID, ContentChildren, SimpleChange, SkipSelf } from '@angular/core';
 import { plainToInstance } from 'class-transformer';
 import { map, filter, takeUntil, tap, take, debounceTime as debounceTime$1, delay, switchMap } from 'rxjs/operators';
 import { __rest, __awaiter } from 'tslib';
@@ -1448,6 +1448,7 @@ var KeyboardCodes;
     KeyboardCodes["ArrowDown"] = "ArrowDown";
     KeyboardCodes["Enter"] = "Enter";
     KeyboardCodes["Shift"] = "Shift";
+    KeyboardCodes["Comma"] = "Comma";
 })(KeyboardCodes || (KeyboardCodes = {}));
 
 var ModalMode;
@@ -1625,6 +1626,18 @@ class UrlUtils {
 
 const NICE_ASSETS_CAROUSEL_OPTIONS = new InjectionToken("nice_assets_options");
 
+class NiceAssetsCarouselActiveContentDirective {
+    constructor(template) {
+        this.template = template;
+    }
+}
+NiceAssetsCarouselActiveContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceAssetsCarouselActiveContentDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+NiceAssetsCarouselActiveContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: NiceAssetsCarouselActiveContentDirective, selector: "[niceAssetsCarouselActiveContent]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceAssetsCarouselActiveContentDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: "[niceAssetsCarouselActiveContent]" }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+
 class NiceDropzoneDirective {
     constructor() {
         this.filesDropped = new EventEmitter();
@@ -1864,7 +1877,7 @@ NiceAssetsCarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
             useExisting: forwardRef(() => NiceAssetsCarouselComponent),
             multi: true
         }
-    ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "activeVideoElement", first: true, predicate: ["activeVideo"], descendants: true }, { propertyName: "assetsElement", predicate: ["assets"], descendants: true }], ngImport: i0, template: "<div class=\"carousel-container\" niceDropzone (filesDropped)=\"onFilesDrop($event)\">\n    <div class=\"active-image\"\n         matRipple\n         [class.empty-state]=\"!_activeAsset\"\n         (click)=\"edit && fileInput.click(); $event.stopPropagation()\"\n    >\n        <img\n            *ngIf=\"_activeAsset?.type === 'image'\"\n            (mouseover)=\"showOverlay=true\"\n            [src]=\"_activeAsset.url ?? _activeAsset.base64\"\n            draggable=\"false\"\n            class=\"relative\"\n            alt=\"active-image\"\n        >\n        <video #activeVideo *ngIf=\"_activeAsset?.type === 'video'\" draggable=\"false\" loop [src]=\"_activeAsset.url ?? _activeAsset.base64\"></video>\n\n        <div class=\"empty-state-content\" *ngIf=\"!_activeAsset\">\n            <mat-icon *ngIf=\"options.upload.matIcon\">{{ options.upload.matIcon }}</mat-icon>\n            <mat-icon *ngIf=\"options.upload.svgIcon\" [svgIcon]=\"options.upload.svgIcon\"></mat-icon>\n\n            <div class=\"text\">\n                {{ \"nice_ui_kit.assets_carousel.upload_here\" | translate }}\n            </div>\n        </div>\n\n        <div *ngIf=\"_activeAsset && showOverlay && edit\" class=\"active-image-overlay\">\n            <div\n                (mouseout)=\"showOverlay=false\"\n                class=\"flex flex-col justify-center items-center w-full h-full\"\n            >\n                <mat-icon *ngIf=\"options.upload.matIcon\">{{ options.upload.matIcon }}</mat-icon>\n                <mat-icon *ngIf=\"options.upload.svgIcon\" [svgIcon]=\"options.upload.svgIcon\"></mat-icon>\n            </div>\n        </div>\n\n        <div *ngIf=\"edit\" class=\"active-buttons\">\n            <button mat-icon-button (click)=\"fileInput.click(); $event.stopPropagation()\">\n                <mat-icon *ngIf=\"options.actionButtons.addPhoto.matIcon\">{{ options.actionButtons.addPhoto.matIcon }}</mat-icon>\n                <mat-icon *ngIf=\"options.actionButtons.addPhoto.svgIcon\" [svgIcon]=\"options.actionButtons.addPhoto.svgIcon\"></mat-icon>\n            </button>\n            <button mat-icon-button [matMenuTriggerFor]=\"assetActions\" (click)=\"$event.stopPropagation()\" [disabled]=\"!_activeAsset\">\n                <mat-icon *ngIf=\"options.actionButtons.moreOptions.matIcon\">{{ options.actionButtons.moreOptions.matIcon }}</mat-icon>\n                <mat-icon *ngIf=\"options.actionButtons.moreOptions.svgIcon\" [svgIcon]=\"options.actionButtons.moreOptions.svgIcon\"></mat-icon>\n            </button>\n\n            <mat-menu class=\"nice-asset-options-menu\" [xPosition]=\"'before'\" #assetActions=\"matMenu\">\n                <button\n                    mat-menu-item\n                    *ngFor=\"let action of customActions\"\n                    (click)=\"clickCustom(action)\"\n                >\n                    <mat-icon *ngIf=\"action.icon.matIcon\">{{ action.icon.matIcon }}</mat-icon>\n                    <mat-icon [svgIcon]=\"action.icon.svgIcon\" *ngIf=\"action.icon.svgIcon\"></mat-icon>\n                    <span>{{ action.name | translate }}</span>\n                </button>\n                <button mat-menu-item (click)=\"clickRemove()\">\n                    <mat-icon *ngIf=\"options.actionButtons.remove.matIcon\">{{ options.actionButtons.remove.matIcon }}</mat-icon>\n                    <mat-icon *ngIf=\"options.actionButtons.remove.svgIcon\" [svgIcon]=\"options.actionButtons.remove.svgIcon\"></mat-icon>\n                    <span>{{ \"nice_ui_kit.assets_carousel.delete\" | translate }}</span>\n                </button>\n            </mat-menu>\n        </div>\n    </div>\n\n    <div class=\"carousel\">\n        <button *ngIf=\"showAddAssetContainer || _activeAsset\" class=\"action-button left-arrow\" mat-icon-button [disabled]=\"!_active\" (click)=\"clickLeft()\">\n            <mat-icon *ngIf=\"options.leftArrow.matIcon\">{{ options.leftArrow.matIcon }}</mat-icon>\n            <mat-icon class=\"arrows\" *ngIf=\"options.leftArrow.svgIcon\" [svgIcon]=\"options.leftArrow.svgIcon\"></mat-icon>\n        </button>\n        <div class=\"asset-list-container\">\n            <div *ngIf=\"showAddAssetContainer && edit\" class=\"add-asset-container\">\n                <div class=\"add-asset\" matRipple (click)=\"fileInput.click()\">\n                    <mat-icon *ngIf=\"options.addPhoto.matIcon\">{{ options.addPhoto.matIcon }}</mat-icon>\n                    <mat-icon *ngIf=\"options.addPhoto.svgIcon\" [svgIcon]=\"options.addPhoto.svgIcon\"></mat-icon>\n                </div>\n            </div>\n\n            <div class=\"asset-list\" [ngStyle]=\"listStyle\">\n                <div #assets class=\"asset\" *ngFor=\"let asset of _assets; let i = index\" (click)=\"clickAsset(i)\" [ngClass]=\"color\" [class.active]=\"_active === i\">\n                    <img *ngIf=\"asset.type === 'image'\" draggable=\"false\" [src]=\"asset.url ?? asset.base64\" alt=\"add-image\">\n                    <video *ngIf=\"asset.type === 'video'\" draggable=\"false\" loop [src]=\"asset.url ?? asset.base64\"></video>\n                </div>\n            </div>\n        </div>\n        <button *ngIf=\"showAddAssetContainer || _activeAsset\" class=\"action-button right-arrow\" mat-icon-button [disabled]=\"_lastAsset\" (click)=\"clickRight()\">\n            <mat-icon *ngIf=\"options.rightArrow.matIcon\">{{ options.rightArrow.matIcon }}</mat-icon>\n            <mat-icon class=\"arrows\" *ngIf=\"options.rightArrow.svgIcon\" [svgIcon]=\"options.rightArrow.svgIcon\"></mat-icon>\n        </button>\n    </div>\n</div>\n\n<input #fileInput type=\"file\" hidden [accept]=\"accept\" (change)=\"onFilesChange($event)\" [multiple]=\"multipleUpload\">\n", styles: [":root{--nice-assets-carousel-asset-width: 90px;--nice-assets-carousel-asset-height: 60px;--nice-assets-carousel-asset-gap: .75rem}\n"], components: [{ type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: NiceDropzoneDirective, selector: "[niceDropzone]", outputs: ["filesDropped"] }, { type: i2$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "translate": i1.TranslatePipe }, animations: niceAnimations, encapsulation: i0.ViewEncapsulation.None });
+    ], queries: [{ propertyName: "activeContent", first: true, predicate: NiceAssetsCarouselActiveContentDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "activeVideoElement", first: true, predicate: ["activeVideo"], descendants: true }, { propertyName: "assetsElement", predicate: ["assets"], descendants: true }], ngImport: i0, template: "<div class=\"carousel-container\" niceDropzone (filesDropped)=\"onFilesDrop($event)\">\n    <div\n        class=\"active-image\"\n        matRipple\n        [class.empty-state]=\"!_activeAsset\"\n        (click)=\"edit && fileInput.click();\n        $event.stopPropagation()\"\n    >\n        <ng-container\n            *ngIf=\"_activeAsset && activeContent\"\n            [ngTemplateOutlet]=\"activeContent\"\n            [ngTemplateOutletContext]=\"{ $implicit: _activeAsset}\"\n        ></ng-container>\n        <img\n            *ngIf=\"_activeAsset?.type === 'image'\"\n            (mouseover)=\"showOverlay=true\"\n            [src]=\"_activeAsset.url ?? _activeAsset.base64\"\n            draggable=\"false\"\n            class=\"relative\"\n            alt=\"active-image\"\n        >\n        <video #activeVideo *ngIf=\"_activeAsset?.type === 'video'\" draggable=\"false\" loop [src]=\"_activeAsset.url ?? _activeAsset.base64\"></video>\n\n        <div class=\"empty-state-content\" *ngIf=\"!_activeAsset\">\n            <mat-icon *ngIf=\"options.upload.matIcon\">{{ options.upload.matIcon }}</mat-icon>\n            <mat-icon *ngIf=\"options.upload.svgIcon\" [svgIcon]=\"options.upload.svgIcon\"></mat-icon>\n            <div class=\"text\">\n                {{ \"nice_ui_kit.assets_carousel.upload_here\" | translate }}\n            </div>\n        </div>\n\n        <div *ngIf=\"_activeAsset && showOverlay && edit\" class=\"active-image-overlay\">\n            <div\n                (mouseout)=\"showOverlay=false\"\n                class=\"flex flex-col justify-center items-center w-full h-full\"\n            >\n                <mat-icon *ngIf=\"options.upload.matIcon\">{{ options.upload.matIcon }}</mat-icon>\n                <mat-icon *ngIf=\"options.upload.svgIcon\" [svgIcon]=\"options.upload.svgIcon\"></mat-icon>\n            </div>\n        </div>\n\n        <div *ngIf=\"edit\" class=\"active-buttons\">\n            <button mat-icon-button (click)=\"fileInput.click(); $event.stopPropagation()\">\n                <mat-icon *ngIf=\"options.actionButtons.addPhoto.matIcon\">{{ options.actionButtons.addPhoto.matIcon }}</mat-icon>\n                <mat-icon *ngIf=\"options.actionButtons.addPhoto.svgIcon\" [svgIcon]=\"options.actionButtons.addPhoto.svgIcon\"></mat-icon>\n            </button>\n            <button mat-icon-button [matMenuTriggerFor]=\"assetActions\" (click)=\"$event.stopPropagation()\" [disabled]=\"!_activeAsset\">\n                <mat-icon *ngIf=\"options.actionButtons.moreOptions.matIcon\">{{ options.actionButtons.moreOptions.matIcon }}</mat-icon>\n                <mat-icon *ngIf=\"options.actionButtons.moreOptions.svgIcon\" [svgIcon]=\"options.actionButtons.moreOptions.svgIcon\"></mat-icon>\n            </button>\n            <mat-menu class=\"nice-asset-options-menu\" [xPosition]=\"'before'\" #assetActions=\"matMenu\">\n                <button\n                    mat-menu-item\n                    *ngFor=\"let action of customActions\"\n                    (click)=\"clickCustom(action)\"\n                >\n                    <mat-icon *ngIf=\"action.icon.matIcon\">{{ action.icon.matIcon }}</mat-icon>\n                    <mat-icon [svgIcon]=\"action.icon.svgIcon\" *ngIf=\"action.icon.svgIcon\"></mat-icon>\n                    <span>{{ action.name | translate }}</span>\n                </button>\n                <button mat-menu-item (click)=\"clickRemove()\">\n                    <mat-icon *ngIf=\"options.actionButtons.remove.matIcon\">{{ options.actionButtons.remove.matIcon }}</mat-icon>\n                    <mat-icon *ngIf=\"options.actionButtons.remove.svgIcon\" [svgIcon]=\"options.actionButtons.remove.svgIcon\"></mat-icon>\n                    <span>{{ \"nice_ui_kit.assets_carousel.delete\" | translate }}</span>\n                </button>\n            </mat-menu>\n        </div>\n    </div>\n\n    <div class=\"carousel\">\n        <button *ngIf=\"showAddAssetContainer || _activeAsset\" class=\"action-button left-arrow\" mat-icon-button [disabled]=\"!_active\" (click)=\"clickLeft()\">\n            <mat-icon *ngIf=\"options.leftArrow.matIcon\">{{ options.leftArrow.matIcon }}</mat-icon>\n            <mat-icon class=\"arrows\" *ngIf=\"options.leftArrow.svgIcon\" [svgIcon]=\"options.leftArrow.svgIcon\"></mat-icon>\n        </button>\n        <div class=\"asset-list-container\">\n            <div *ngIf=\"showAddAssetContainer && edit\" class=\"add-asset-container\">\n                <div class=\"add-asset\" matRipple (click)=\"fileInput.click()\">\n                    <mat-icon *ngIf=\"options.addPhoto.matIcon\">{{ options.addPhoto.matIcon }}</mat-icon>\n                    <mat-icon *ngIf=\"options.addPhoto.svgIcon\" [svgIcon]=\"options.addPhoto.svgIcon\"></mat-icon>\n                </div>\n            </div>\n            <div class=\"asset-list\" [ngStyle]=\"listStyle\">\n                <div #assets class=\"asset\" *ngFor=\"let asset of _assets; let i = index\" (click)=\"clickAsset(i)\" [ngClass]=\"color\" [class.active]=\"_active === i\">\n                    <img *ngIf=\"asset.type === 'image'\" draggable=\"false\" [src]=\"asset.url ?? asset.base64\" alt=\"add-image\">\n                    <video *ngIf=\"asset.type === 'video'\" draggable=\"false\" loop [src]=\"asset.url ?? asset.base64\"></video>\n                </div>\n            </div>\n        </div>\n        <button *ngIf=\"showAddAssetContainer || _activeAsset\" class=\"action-button right-arrow\" mat-icon-button [disabled]=\"_lastAsset\" (click)=\"clickRight()\">\n            <mat-icon *ngIf=\"options.rightArrow.matIcon\">{{ options.rightArrow.matIcon }}</mat-icon>\n            <mat-icon class=\"arrows\" *ngIf=\"options.rightArrow.svgIcon\" [svgIcon]=\"options.rightArrow.svgIcon\"></mat-icon>\n        </button>\n    </div>\n</div>\n\n<input #fileInput type=\"file\" hidden [accept]=\"accept\" (change)=\"onFilesChange($event)\" [multiple]=\"multipleUpload\">\n", styles: [":root{--nice-assets-carousel-asset-width: 90px;--nice-assets-carousel-asset-height: 60px;--nice-assets-carousel-asset-gap: .75rem}\n"], components: [{ type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: NiceDropzoneDirective, selector: "[niceDropzone]", outputs: ["filesDropped"] }, { type: i2$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "translate": i1.TranslatePipe }, animations: niceAnimations, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceAssetsCarouselComponent, decorators: [{
             type: Component,
             args: [{ selector: "nice-assets-carousel", encapsulation: ViewEncapsulation.None, animations: niceAnimations, providers: [
@@ -1873,7 +1886,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                             useExisting: forwardRef(() => NiceAssetsCarouselComponent),
                             multi: true
                         }
-                    ], template: "<div class=\"carousel-container\" niceDropzone (filesDropped)=\"onFilesDrop($event)\">\n    <div class=\"active-image\"\n         matRipple\n         [class.empty-state]=\"!_activeAsset\"\n         (click)=\"edit && fileInput.click(); $event.stopPropagation()\"\n    >\n        <img\n            *ngIf=\"_activeAsset?.type === 'image'\"\n            (mouseover)=\"showOverlay=true\"\n            [src]=\"_activeAsset.url ?? _activeAsset.base64\"\n            draggable=\"false\"\n            class=\"relative\"\n            alt=\"active-image\"\n        >\n        <video #activeVideo *ngIf=\"_activeAsset?.type === 'video'\" draggable=\"false\" loop [src]=\"_activeAsset.url ?? _activeAsset.base64\"></video>\n\n        <div class=\"empty-state-content\" *ngIf=\"!_activeAsset\">\n            <mat-icon *ngIf=\"options.upload.matIcon\">{{ options.upload.matIcon }}</mat-icon>\n            <mat-icon *ngIf=\"options.upload.svgIcon\" [svgIcon]=\"options.upload.svgIcon\"></mat-icon>\n\n            <div class=\"text\">\n                {{ \"nice_ui_kit.assets_carousel.upload_here\" | translate }}\n            </div>\n        </div>\n\n        <div *ngIf=\"_activeAsset && showOverlay && edit\" class=\"active-image-overlay\">\n            <div\n                (mouseout)=\"showOverlay=false\"\n                class=\"flex flex-col justify-center items-center w-full h-full\"\n            >\n                <mat-icon *ngIf=\"options.upload.matIcon\">{{ options.upload.matIcon }}</mat-icon>\n                <mat-icon *ngIf=\"options.upload.svgIcon\" [svgIcon]=\"options.upload.svgIcon\"></mat-icon>\n            </div>\n        </div>\n\n        <div *ngIf=\"edit\" class=\"active-buttons\">\n            <button mat-icon-button (click)=\"fileInput.click(); $event.stopPropagation()\">\n                <mat-icon *ngIf=\"options.actionButtons.addPhoto.matIcon\">{{ options.actionButtons.addPhoto.matIcon }}</mat-icon>\n                <mat-icon *ngIf=\"options.actionButtons.addPhoto.svgIcon\" [svgIcon]=\"options.actionButtons.addPhoto.svgIcon\"></mat-icon>\n            </button>\n            <button mat-icon-button [matMenuTriggerFor]=\"assetActions\" (click)=\"$event.stopPropagation()\" [disabled]=\"!_activeAsset\">\n                <mat-icon *ngIf=\"options.actionButtons.moreOptions.matIcon\">{{ options.actionButtons.moreOptions.matIcon }}</mat-icon>\n                <mat-icon *ngIf=\"options.actionButtons.moreOptions.svgIcon\" [svgIcon]=\"options.actionButtons.moreOptions.svgIcon\"></mat-icon>\n            </button>\n\n            <mat-menu class=\"nice-asset-options-menu\" [xPosition]=\"'before'\" #assetActions=\"matMenu\">\n                <button\n                    mat-menu-item\n                    *ngFor=\"let action of customActions\"\n                    (click)=\"clickCustom(action)\"\n                >\n                    <mat-icon *ngIf=\"action.icon.matIcon\">{{ action.icon.matIcon }}</mat-icon>\n                    <mat-icon [svgIcon]=\"action.icon.svgIcon\" *ngIf=\"action.icon.svgIcon\"></mat-icon>\n                    <span>{{ action.name | translate }}</span>\n                </button>\n                <button mat-menu-item (click)=\"clickRemove()\">\n                    <mat-icon *ngIf=\"options.actionButtons.remove.matIcon\">{{ options.actionButtons.remove.matIcon }}</mat-icon>\n                    <mat-icon *ngIf=\"options.actionButtons.remove.svgIcon\" [svgIcon]=\"options.actionButtons.remove.svgIcon\"></mat-icon>\n                    <span>{{ \"nice_ui_kit.assets_carousel.delete\" | translate }}</span>\n                </button>\n            </mat-menu>\n        </div>\n    </div>\n\n    <div class=\"carousel\">\n        <button *ngIf=\"showAddAssetContainer || _activeAsset\" class=\"action-button left-arrow\" mat-icon-button [disabled]=\"!_active\" (click)=\"clickLeft()\">\n            <mat-icon *ngIf=\"options.leftArrow.matIcon\">{{ options.leftArrow.matIcon }}</mat-icon>\n            <mat-icon class=\"arrows\" *ngIf=\"options.leftArrow.svgIcon\" [svgIcon]=\"options.leftArrow.svgIcon\"></mat-icon>\n        </button>\n        <div class=\"asset-list-container\">\n            <div *ngIf=\"showAddAssetContainer && edit\" class=\"add-asset-container\">\n                <div class=\"add-asset\" matRipple (click)=\"fileInput.click()\">\n                    <mat-icon *ngIf=\"options.addPhoto.matIcon\">{{ options.addPhoto.matIcon }}</mat-icon>\n                    <mat-icon *ngIf=\"options.addPhoto.svgIcon\" [svgIcon]=\"options.addPhoto.svgIcon\"></mat-icon>\n                </div>\n            </div>\n\n            <div class=\"asset-list\" [ngStyle]=\"listStyle\">\n                <div #assets class=\"asset\" *ngFor=\"let asset of _assets; let i = index\" (click)=\"clickAsset(i)\" [ngClass]=\"color\" [class.active]=\"_active === i\">\n                    <img *ngIf=\"asset.type === 'image'\" draggable=\"false\" [src]=\"asset.url ?? asset.base64\" alt=\"add-image\">\n                    <video *ngIf=\"asset.type === 'video'\" draggable=\"false\" loop [src]=\"asset.url ?? asset.base64\"></video>\n                </div>\n            </div>\n        </div>\n        <button *ngIf=\"showAddAssetContainer || _activeAsset\" class=\"action-button right-arrow\" mat-icon-button [disabled]=\"_lastAsset\" (click)=\"clickRight()\">\n            <mat-icon *ngIf=\"options.rightArrow.matIcon\">{{ options.rightArrow.matIcon }}</mat-icon>\n            <mat-icon class=\"arrows\" *ngIf=\"options.rightArrow.svgIcon\" [svgIcon]=\"options.rightArrow.svgIcon\"></mat-icon>\n        </button>\n    </div>\n</div>\n\n<input #fileInput type=\"file\" hidden [accept]=\"accept\" (change)=\"onFilesChange($event)\" [multiple]=\"multipleUpload\">\n", styles: [":root{--nice-assets-carousel-asset-width: 90px;--nice-assets-carousel-asset-height: 60px;--nice-assets-carousel-asset-gap: .75rem}\n"] }]
+                    ], template: "<div class=\"carousel-container\" niceDropzone (filesDropped)=\"onFilesDrop($event)\">\n    <div\n        class=\"active-image\"\n        matRipple\n        [class.empty-state]=\"!_activeAsset\"\n        (click)=\"edit && fileInput.click();\n        $event.stopPropagation()\"\n    >\n        <ng-container\n            *ngIf=\"_activeAsset && activeContent\"\n            [ngTemplateOutlet]=\"activeContent\"\n            [ngTemplateOutletContext]=\"{ $implicit: _activeAsset}\"\n        ></ng-container>\n        <img\n            *ngIf=\"_activeAsset?.type === 'image'\"\n            (mouseover)=\"showOverlay=true\"\n            [src]=\"_activeAsset.url ?? _activeAsset.base64\"\n            draggable=\"false\"\n            class=\"relative\"\n            alt=\"active-image\"\n        >\n        <video #activeVideo *ngIf=\"_activeAsset?.type === 'video'\" draggable=\"false\" loop [src]=\"_activeAsset.url ?? _activeAsset.base64\"></video>\n\n        <div class=\"empty-state-content\" *ngIf=\"!_activeAsset\">\n            <mat-icon *ngIf=\"options.upload.matIcon\">{{ options.upload.matIcon }}</mat-icon>\n            <mat-icon *ngIf=\"options.upload.svgIcon\" [svgIcon]=\"options.upload.svgIcon\"></mat-icon>\n            <div class=\"text\">\n                {{ \"nice_ui_kit.assets_carousel.upload_here\" | translate }}\n            </div>\n        </div>\n\n        <div *ngIf=\"_activeAsset && showOverlay && edit\" class=\"active-image-overlay\">\n            <div\n                (mouseout)=\"showOverlay=false\"\n                class=\"flex flex-col justify-center items-center w-full h-full\"\n            >\n                <mat-icon *ngIf=\"options.upload.matIcon\">{{ options.upload.matIcon }}</mat-icon>\n                <mat-icon *ngIf=\"options.upload.svgIcon\" [svgIcon]=\"options.upload.svgIcon\"></mat-icon>\n            </div>\n        </div>\n\n        <div *ngIf=\"edit\" class=\"active-buttons\">\n            <button mat-icon-button (click)=\"fileInput.click(); $event.stopPropagation()\">\n                <mat-icon *ngIf=\"options.actionButtons.addPhoto.matIcon\">{{ options.actionButtons.addPhoto.matIcon }}</mat-icon>\n                <mat-icon *ngIf=\"options.actionButtons.addPhoto.svgIcon\" [svgIcon]=\"options.actionButtons.addPhoto.svgIcon\"></mat-icon>\n            </button>\n            <button mat-icon-button [matMenuTriggerFor]=\"assetActions\" (click)=\"$event.stopPropagation()\" [disabled]=\"!_activeAsset\">\n                <mat-icon *ngIf=\"options.actionButtons.moreOptions.matIcon\">{{ options.actionButtons.moreOptions.matIcon }}</mat-icon>\n                <mat-icon *ngIf=\"options.actionButtons.moreOptions.svgIcon\" [svgIcon]=\"options.actionButtons.moreOptions.svgIcon\"></mat-icon>\n            </button>\n            <mat-menu class=\"nice-asset-options-menu\" [xPosition]=\"'before'\" #assetActions=\"matMenu\">\n                <button\n                    mat-menu-item\n                    *ngFor=\"let action of customActions\"\n                    (click)=\"clickCustom(action)\"\n                >\n                    <mat-icon *ngIf=\"action.icon.matIcon\">{{ action.icon.matIcon }}</mat-icon>\n                    <mat-icon [svgIcon]=\"action.icon.svgIcon\" *ngIf=\"action.icon.svgIcon\"></mat-icon>\n                    <span>{{ action.name | translate }}</span>\n                </button>\n                <button mat-menu-item (click)=\"clickRemove()\">\n                    <mat-icon *ngIf=\"options.actionButtons.remove.matIcon\">{{ options.actionButtons.remove.matIcon }}</mat-icon>\n                    <mat-icon *ngIf=\"options.actionButtons.remove.svgIcon\" [svgIcon]=\"options.actionButtons.remove.svgIcon\"></mat-icon>\n                    <span>{{ \"nice_ui_kit.assets_carousel.delete\" | translate }}</span>\n                </button>\n            </mat-menu>\n        </div>\n    </div>\n\n    <div class=\"carousel\">\n        <button *ngIf=\"showAddAssetContainer || _activeAsset\" class=\"action-button left-arrow\" mat-icon-button [disabled]=\"!_active\" (click)=\"clickLeft()\">\n            <mat-icon *ngIf=\"options.leftArrow.matIcon\">{{ options.leftArrow.matIcon }}</mat-icon>\n            <mat-icon class=\"arrows\" *ngIf=\"options.leftArrow.svgIcon\" [svgIcon]=\"options.leftArrow.svgIcon\"></mat-icon>\n        </button>\n        <div class=\"asset-list-container\">\n            <div *ngIf=\"showAddAssetContainer && edit\" class=\"add-asset-container\">\n                <div class=\"add-asset\" matRipple (click)=\"fileInput.click()\">\n                    <mat-icon *ngIf=\"options.addPhoto.matIcon\">{{ options.addPhoto.matIcon }}</mat-icon>\n                    <mat-icon *ngIf=\"options.addPhoto.svgIcon\" [svgIcon]=\"options.addPhoto.svgIcon\"></mat-icon>\n                </div>\n            </div>\n            <div class=\"asset-list\" [ngStyle]=\"listStyle\">\n                <div #assets class=\"asset\" *ngFor=\"let asset of _assets; let i = index\" (click)=\"clickAsset(i)\" [ngClass]=\"color\" [class.active]=\"_active === i\">\n                    <img *ngIf=\"asset.type === 'image'\" draggable=\"false\" [src]=\"asset.url ?? asset.base64\" alt=\"add-image\">\n                    <video *ngIf=\"asset.type === 'video'\" draggable=\"false\" loop [src]=\"asset.url ?? asset.base64\"></video>\n                </div>\n            </div>\n        </div>\n        <button *ngIf=\"showAddAssetContainer || _activeAsset\" class=\"action-button right-arrow\" mat-icon-button [disabled]=\"_lastAsset\" (click)=\"clickRight()\">\n            <mat-icon *ngIf=\"options.rightArrow.matIcon\">{{ options.rightArrow.matIcon }}</mat-icon>\n            <mat-icon class=\"arrows\" *ngIf=\"options.rightArrow.svgIcon\" [svgIcon]=\"options.rightArrow.svgIcon\"></mat-icon>\n        </button>\n    </div>\n</div>\n\n<input #fileInput type=\"file\" hidden [accept]=\"accept\" (change)=\"onFilesChange($event)\" [multiple]=\"multipleUpload\">\n", styles: [":root{--nice-assets-carousel-asset-width: 90px;--nice-assets-carousel-asset-height: 60px;--nice-assets-carousel-asset-gap: .75rem}\n"] }]
         }], ctorParameters: function () {
         return [{ type: undefined, decorators: [{
                         type: Optional
@@ -1898,6 +1911,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 type: Input
             }], showAddAssetContainer: [{
                 type: Input
+            }], activeContent: [{
+                type: ContentChild,
+                args: [NiceAssetsCarouselActiveContentDirective, { read: TemplateRef }]
             }], activeChange: [{
                 type: Output
             }], removedAsset: [{
@@ -1967,13 +1983,13 @@ class NiceAssetsCarouselModule {
     }
 }
 NiceAssetsCarouselModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceAssetsCarouselModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NiceAssetsCarouselModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceAssetsCarouselModule, declarations: [NiceAssetsCarouselComponent], imports: [CommonModule,
+NiceAssetsCarouselModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceAssetsCarouselModule, declarations: [NiceAssetsCarouselComponent, NiceAssetsCarouselActiveContentDirective], imports: [CommonModule,
         MatIconModule,
         MatButtonModule,
         MatMenuModule,
         MatRippleModule,
         NiceDropzoneModule,
-        TranslateModule], exports: [NiceAssetsCarouselComponent] });
+        TranslateModule], exports: [NiceAssetsCarouselComponent, NiceAssetsCarouselActiveContentDirective] });
 NiceAssetsCarouselModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceAssetsCarouselModule, providers: [], imports: [[
             CommonModule,
             MatIconModule,
@@ -1995,9 +2011,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                         NiceDropzoneModule,
                         TranslateModule
                     ],
-                    declarations: [NiceAssetsCarouselComponent],
+                    declarations: [NiceAssetsCarouselComponent, NiceAssetsCarouselActiveContentDirective],
                     providers: [],
-                    exports: [NiceAssetsCarouselComponent]
+                    exports: [NiceAssetsCarouselComponent, NiceAssetsCarouselActiveContentDirective]
                 }]
         }] });
 
@@ -2111,7 +2127,7 @@ class NiceTypeaheadComponent {
             }
             this.focused = !!origin;
             this.stateChanges.next();
-            if (this.focused && (!this._items || !this._items.length) && !this.loading) {
+            if (this.focused && ((!this._items || !this._items.length) && !this.allowNotFoundItems) && !this.loading) {
                 this.searchControl.patchValue("");
             }
             if (!this.focused && !this._value) {
@@ -2786,6 +2802,7 @@ class NiceAsyncTypeaheadComponent extends _BaseAsyncTypeaheadComponent {
         this.open = false;
         this.panelWidth = 0;
         this.active$ = this.service.active$;
+        this.entityRemoved = new EventEmitter();
         this.preloadResource = false;
         this.allowNotFoundItems = false;
         this.panelClass = [];
@@ -3000,6 +3017,7 @@ class NiceAsyncTypeaheadComponent extends _BaseAsyncTypeaheadComponent {
             this.ngControl.control.markAsTouched();
         }
         this.stateChanges.next();
+        this.entityRemoved.emit();
         if (reload) {
             this.service.search(this.resource, "", this.searchOptions);
         }
@@ -3087,7 +3105,7 @@ class NiceAsyncTypeaheadComponent extends _BaseAsyncTypeaheadComponent {
     }
 }
 NiceAsyncTypeaheadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceAsyncTypeaheadComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i1$2.NgForm, optional: true }, { token: i1$2.FormGroupDirective, optional: true }, { token: i2$1.ErrorStateMatcher }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: NiceAsyncTypeaheadService }], target: i0.ɵɵFactoryTarget.Component });
-NiceAsyncTypeaheadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: NiceAsyncTypeaheadComponent, selector: "nice-async-typeahead", inputs: { 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" }, outputs: { selected: "selected" }, host: { properties: { "class.floating": "this.shouldLabelFloat", "id": "this.id", "attr.aria-describedby": "this.describedBy" } }, providers: [
+NiceAsyncTypeaheadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: NiceAsyncTypeaheadComponent, selector: "nice-async-typeahead", inputs: { 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" }, outputs: { entityRemoved: "entityRemoved", selected: "selected" }, host: { properties: { "class.floating": "this.shouldLabelFloat", "id": "this.id", "attr.aria-describedby": "this.describedBy" } }, providers: [
         {
             provide: MatFormFieldControl,
             useExisting: NiceAsyncTypeaheadComponent
@@ -3119,6 +3137,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             }], options: [{
                 type: ViewChildren,
                 args: [MatOption]
+            }], entityRemoved: [{
+                type: Output
             }], resource: [{
                 type: Input
             }], searchOptions: [{
@@ -3569,10 +3589,10 @@ class NiceCollapsableComponent {
     }
 }
 NiceCollapsableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceCollapsableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NiceCollapsableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: NiceCollapsableComponent, selector: "nice-collapsable", inputs: { open: "open" }, outputs: { openChange: "openChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"collapse\">\n    <input type=\"checkbox\" class=\"peer cursor-pointer\" [formControl]=\"control\"/>\n    <div class=\"collapse-title\">\n        <ng-content select=\"[niceCollapsableTitle]\"></ng-content>\n    </div>\n    <div class=\"collapse-content\">\n        <div class=\"content\">\n            <ng-content select=\"[niceCollapsableContent]\"></ng-content>\n        </div>\n    </div>\n</div>\n", styles: [""], directives: [{ type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+NiceCollapsableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: NiceCollapsableComponent, selector: "nice-collapsable", inputs: { open: "open" }, outputs: { openChange: "openChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"nice-collapse\">\n    <input type=\"checkbox\" class=\"peer cursor-pointer\" [formControl]=\"control\"/>\n    <div class=\"collapse-title\">\n        <ng-content select=\"[niceCollapsableTitle]\"></ng-content>\n    </div>\n    <div class=\"collapse-content\">\n        <div class=\"content\">\n            <ng-content select=\"[niceCollapsableContent]\"></ng-content>\n        </div>\n    </div>\n</div>\n", styles: [""], directives: [{ type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceCollapsableComponent, decorators: [{
             type: Component,
-            args: [{ selector: "nice-collapsable", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"collapse\">\n    <input type=\"checkbox\" class=\"peer cursor-pointer\" [formControl]=\"control\"/>\n    <div class=\"collapse-title\">\n        <ng-content select=\"[niceCollapsableTitle]\"></ng-content>\n    </div>\n    <div class=\"collapse-content\">\n        <div class=\"content\">\n            <ng-content select=\"[niceCollapsableContent]\"></ng-content>\n        </div>\n    </div>\n</div>\n", styles: [""] }]
+            args: [{ selector: "nice-collapsable", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"nice-collapse\">\n    <input type=\"checkbox\" class=\"peer cursor-pointer\" [formControl]=\"control\"/>\n    <div class=\"collapse-title\">\n        <ng-content select=\"[niceCollapsableTitle]\"></ng-content>\n    </div>\n    <div class=\"collapse-content\">\n        <div class=\"content\">\n            <ng-content select=\"[niceCollapsableContent]\"></ng-content>\n        </div>\n    </div>\n</div>\n", styles: [""] }]
         }], propDecorators: { open: [{
                 type: Input
             }], openChange: [{
@@ -4197,6 +4217,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             args: [{ name: "sanitizeBypass" }]
         }], ctorParameters: function () { return [{ type: i1$7.DomSanitizer }]; } });
 
+class TrackByPropPipe {
+    transform(prop) {
+        return (_, item) => item[prop];
+    }
+}
+TrackByPropPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TrackByPropPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+TrackByPropPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TrackByPropPipe, name: "trackByProp" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TrackByPropPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: "trackByProp" }]
+        }] });
+
 class NicePipesModule {
 }
 NicePipesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NicePipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -4221,7 +4253,8 @@ NicePipesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         RangePipe,
         RoundPipe,
         SanitizeBypassPipe,
-        SecondsToTimePipe], exports: [BooleanPipe,
+        SecondsToTimePipe,
+        TrackByPropPipe], exports: [BooleanPipe,
         CapitalizeFirstLetterPipe,
         CeilPipe,
         FindByKeyPipe,
@@ -4242,7 +4275,8 @@ NicePipesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         RangePipe,
         RoundPipe,
         SanitizeBypassPipe,
-        SecondsToTimePipe] });
+        SecondsToTimePipe,
+        TrackByPropPipe] });
 NicePipesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NicePipesModule, providers: [
         BooleanPipe,
         CapitalizeFirstLetterPipe,
@@ -4292,7 +4326,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                         RangePipe,
                         RoundPipe,
                         SanitizeBypassPipe,
-                        SecondsToTimePipe
+                        SecondsToTimePipe,
+                        TrackByPropPipe
                     ],
                     providers: [
                         BooleanPipe,
@@ -4340,7 +4375,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                         RangePipe,
                         RoundPipe,
                         SanitizeBypassPipe,
-                        SecondsToTimePipe
+                        SecondsToTimePipe,
+                        TrackByPropPipe
                     ]
                 }]
         }] });
@@ -5263,7 +5299,7 @@ class NiceControlStatusDirective {
                         }
                         if (error === "max") {
                             param = {
-                                min: this.control.errors[error].max,
+                                max: this.control.errors[error].max,
                                 actual: this.control.errors[error].actual
                             };
                         }
@@ -10073,6 +10109,7 @@ class NiceChipListDirective {
         this.ngControl = ngControl;
         this.elementRef = elementRef;
         this.reloadOnSelected = true;
+        this.separatorKeyboardCodes = [KeyboardCodes.Enter];
         this.unsubscribeAll$ = new Subject();
         this.values$ = new BehaviorSubject([]);
         this._values = [];
@@ -10088,12 +10125,13 @@ class NiceChipListDirective {
         if (this.asyncTypeahead) {
             return;
         }
-        if (event.code === KeyboardCodes.Enter) {
+        if (this.separatorKeyboardCodes.includes(event.code)) {
             if (!this.elementRef.nativeElement.validity.valid) {
                 return;
             }
             this.addValue(this.elementRef.nativeElement.value);
             this.elementRef.nativeElement.value = "";
+            event.preventDefault();
             return;
         }
     }
@@ -10142,6 +10180,7 @@ class NiceChipListDirective {
         });
     }
     addValue(value) {
+        var _a;
         if (this._values.includes(value)) {
             return;
         }
@@ -10150,7 +10189,7 @@ class NiceChipListDirective {
                 return;
             }
         }
-        this._values.push(value);
+        (_a = this._values) === null || _a === void 0 ? void 0 : _a.push(value);
         this.propagateChanges(this._values);
         this.values$.next(this._values);
     }
@@ -10167,7 +10206,7 @@ class NiceChipListDirective {
     }
 }
 NiceChipListDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceChipListDirective, deps: [{ token: NiceAsyncTypeaheadComponent, optional: true }, { token: i1$2.NgControl, optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-NiceChipListDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: NiceChipListDirective, selector: "input[niceChipList], nice-async-typeahead[niceChipList]", inputs: { withItemList: "withItemList", reloadOnSelected: "reloadOnSelected" }, host: { listeners: { "keydown": "onKeyDown($event)" } }, usesOnChanges: true, ngImport: i0 });
+NiceChipListDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: NiceChipListDirective, selector: "input[niceChipList], nice-async-typeahead[niceChipList]", inputs: { withItemList: "withItemList", reloadOnSelected: "reloadOnSelected", separatorKeyboardCodes: "separatorKeyboardCodes" }, host: { listeners: { "keydown": "onKeyDown($event)" } }, usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NiceChipListDirective, decorators: [{
             type: Directive,
             args: [{
@@ -10183,6 +10222,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 type: Input
             }], reloadOnSelected: [{
                 type: Input
+            }], separatorKeyboardCodes: [{
+                type: Input
             }], onKeyDown: [{
                 type: HostListener,
                 args: ["keydown", ["$event"]]
@@ -10546,5 +10587,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ArrayUtils, BooleanPipe, CapitalizeFirstLetterPipe, CarouselComponent, CaseUtils, CeilPipe, ChipListItemLabelDirective, ColorsUtils, DateUtils, DefaultExportBottomSheetService, EntriesPipe, ExportBottomSheetComponent, ExportBottomSheetService, FileUtils, FindByKeyPipe, FirstLetterPipe, FloorPipe, FontAwesomeUtils, FormDataUtils, HttpStatusCodes, ImgCropperConfig, ImgCropperError, ImgResolution, JoinPipe, KeyboardCodes, LinkPipe, LocalizedBooleanPipe, LocalizedCurrencyPipe, LocalizedDateOnlyPipe, LocalizedDatePipe, MinutesToTimePipe, ModalMode, NavigationHideItemResolver, NavigationHintResolver, NiceAlertComponent, NiceAlertModule, NiceAlertService, NiceApiException, NiceAssetsCarouselComponent, NiceAssetsCarouselModule, NiceAsyncTypeaheadComponent, NiceAsyncTypeaheadModule, NiceAsyncTypeaheadProvider, NiceAutofocusDirective, NiceAutofocusDirectiveModule, NiceAutogrowDirective, NiceAutogrowModule, NiceBaseForm, NiceBaseFormComponent, NiceBaseFormModule, NiceCardComponent, NiceCardModule, NiceCarouselModule, NiceChipAsyncTypeaheadDirective, NiceChipListDirective, NiceChipListDirectiveModule, NiceChipListItemsComponent, NiceClickStopPropagationDirective, NiceCollapsableComponent, NiceCollapsableModule, NiceConfigModule, NiceConfigService, NiceControlStatusDirective, NiceCropperAreaComponent, NiceDateRangePickerComponent, NiceDateRangePickerModule, NiceDrawerComponent, NiceDrawerModule, NiceDrawerService, NiceDropzoneDirective, NiceDropzoneModule, NiceExportBottomSheetModule, NiceFormErrorComponent, NiceFormErrorModule, NiceFormSubmitDirective, NiceHorizontalNavigationBasicItemComponent, NiceHorizontalNavigationBranchItemComponent, NiceHorizontalNavigationComponent, NiceHorizontalNavigationDividerItemComponent, NiceHorizontalNavigationSpacerItemComponent, NiceHorizontalStepperComponent, NiceHorizontalStepperModule, NiceHttpExceptionFactory, NiceImageCropperComponent, NiceImageCropperModule, NiceImageErrorPlaceholderDirective, NiceImageErrorPlaceholderDirectiveModule, NiceLayoutComponent, NiceLayoutModule, NiceLoadingDirective, NiceLoadingSpinnerComponent, NiceLoadingSpinnerModule, NiceLottieComponent, NiceLottieModule, NiceMaterialModule, NiceMaterialStyleDirective, NiceMediaWatcherModule, NiceMediaWatcherService, NiceModalOnClickDirective, NiceModalOpenerDirective, NiceModule, NiceNavigationComponent, NiceNavigationModule, NiceNavigationService, NicePipesModule, NicePreventCloseWindowDirective, NiceRoundedStyleDirective, NiceScrollResetDirective, NiceScrollResetModule, NiceScrollbarDirective, NiceScrollbarModule, NiceSearchBarComponent, NiceSearchBarModule, NiceSplashScreenModule, NiceSplashScreenService, NiceStepComponent, NiceStopPropagationModule, NiceSweetAlertComponent, NiceSweetAlertModule, NiceSweetAlertService, NiceToastComponent, NiceToastModule, NiceToastService, NiceToggleButtonGroupModule, NiceTransformResponseInterceptor, NiceTypeaheadComponent, NiceTypeaheadModule, NiceTypeaheadNewValue, NiceUtilsModule, NiceUtilsService, NiceVerticalNavigationAsideItemComponent, NiceVerticalNavigationBasicItemComponent, NiceVerticalNavigationCollapsableItemComponent, NiceVerticalNavigationComponent, NiceVerticalNavigationDividerItemComponent, NiceVerticalNavigationGroupItemComponent, NiceVerticalNavigationSpacerItemComponent, NiceWindowDirectiveModule, NumberToOrdinalIndicatorPipe, NumberUtils, ObjectUtils, OptionsScrollDirective, PadPipe, PhonePipe, PictureModalComponent, PictureModalService, PostalCodePipe, PromiseUtils, QueryParamsUtils, RangePipe, RegexUtils, RoundPipe, SanitizeBypassPipe, SecondsToTimePipe, TRANSFORM_TYPE, ToggleButtonComponent, ToggleButtonGroupComponent, TypeUtils, UrlUtils, _normalizeDegrees, isNotNullOrUndefined, isNullOrUndefined, mergeDeep, mixinNiceApi, niceAnimations, round };
+export { ArrayUtils, BooleanPipe, CapitalizeFirstLetterPipe, CarouselComponent, CaseUtils, CeilPipe, ChipListItemLabelDirective, ColorsUtils, DateUtils, DefaultExportBottomSheetService, EntriesPipe, ExportBottomSheetComponent, ExportBottomSheetService, FileUtils, FindByKeyPipe, FirstLetterPipe, FloorPipe, FontAwesomeUtils, FormDataUtils, HttpStatusCodes, ImgCropperConfig, ImgCropperError, ImgResolution, JoinPipe, KeyboardCodes, LinkPipe, LocalizedBooleanPipe, LocalizedCurrencyPipe, LocalizedDateOnlyPipe, LocalizedDatePipe, MinutesToTimePipe, ModalMode, NavigationHideItemResolver, NavigationHintResolver, NiceAlertComponent, NiceAlertModule, NiceAlertService, NiceApiException, NiceAssetsCarouselActiveContentDirective, NiceAssetsCarouselComponent, NiceAssetsCarouselModule, NiceAsyncTypeaheadComponent, NiceAsyncTypeaheadModule, NiceAsyncTypeaheadProvider, NiceAutofocusDirective, NiceAutofocusDirectiveModule, NiceAutogrowDirective, NiceAutogrowModule, NiceBaseForm, NiceBaseFormComponent, NiceBaseFormModule, NiceCardComponent, NiceCardModule, NiceCarouselModule, NiceChipAsyncTypeaheadDirective, NiceChipListDirective, NiceChipListDirectiveModule, NiceChipListItemsComponent, NiceClickStopPropagationDirective, NiceCollapsableComponent, NiceCollapsableModule, NiceConfigModule, NiceConfigService, NiceControlStatusDirective, NiceCropperAreaComponent, NiceDateRangePickerComponent, NiceDateRangePickerModule, NiceDrawerComponent, NiceDrawerModule, NiceDrawerService, NiceDropzoneDirective, NiceDropzoneModule, NiceExportBottomSheetModule, NiceFormErrorComponent, NiceFormErrorModule, NiceFormSubmitDirective, NiceHorizontalNavigationBasicItemComponent, NiceHorizontalNavigationBranchItemComponent, NiceHorizontalNavigationComponent, NiceHorizontalNavigationDividerItemComponent, NiceHorizontalNavigationSpacerItemComponent, NiceHorizontalStepperComponent, NiceHorizontalStepperModule, NiceHttpExceptionFactory, NiceImageCropperComponent, NiceImageCropperModule, NiceImageErrorPlaceholderDirective, NiceImageErrorPlaceholderDirectiveModule, NiceLayoutComponent, NiceLayoutModule, NiceLoadingDirective, NiceLoadingSpinnerComponent, NiceLoadingSpinnerModule, NiceLottieComponent, NiceLottieModule, NiceMaterialModule, NiceMaterialStyleDirective, NiceMediaWatcherModule, NiceMediaWatcherService, NiceModalOnClickDirective, NiceModalOpenerDirective, NiceModule, NiceNavigationComponent, NiceNavigationModule, NiceNavigationService, NicePipesModule, NicePreventCloseWindowDirective, NiceRoundedStyleDirective, NiceScrollResetDirective, NiceScrollResetModule, NiceScrollbarDirective, NiceScrollbarModule, NiceSearchBarComponent, NiceSearchBarModule, NiceSplashScreenModule, NiceSplashScreenService, NiceStepComponent, NiceStopPropagationModule, NiceSweetAlertComponent, NiceSweetAlertModule, NiceSweetAlertService, NiceToastComponent, NiceToastModule, NiceToastService, NiceToggleButtonGroupModule, NiceTransformResponseInterceptor, NiceTypeaheadComponent, NiceTypeaheadModule, NiceTypeaheadNewValue, NiceUtilsModule, NiceUtilsService, NiceVerticalNavigationAsideItemComponent, NiceVerticalNavigationBasicItemComponent, NiceVerticalNavigationCollapsableItemComponent, NiceVerticalNavigationComponent, NiceVerticalNavigationDividerItemComponent, NiceVerticalNavigationGroupItemComponent, NiceVerticalNavigationSpacerItemComponent, NiceWindowDirectiveModule, NumberToOrdinalIndicatorPipe, NumberUtils, ObjectUtils, OptionsScrollDirective, PadPipe, PhonePipe, PictureModalComponent, PictureModalService, PostalCodePipe, PromiseUtils, QueryParamsUtils, RangePipe, RegexUtils, RoundPipe, SanitizeBypassPipe, SecondsToTimePipe, TRANSFORM_TYPE, ToggleButtonComponent, ToggleButtonGroupComponent, TrackByPropPipe, TypeUtils, UrlUtils, _normalizeDegrees, isNotNullOrUndefined, isNullOrUndefined, mergeDeep, mixinNiceApi, niceAnimations, round };
 //# sourceMappingURL=recursyve-nice-ui-kit.v2.mjs.map