@recursyve/nice-ui-kit.v2 14.0.0-beta.115 → 14.0.0-beta.117

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -21,6 +21,8 @@ import * as i4$1 from '@angular/material/menu';
21
21
  import { MatMenuModule } from '@angular/material/menu';
22
22
  import * as i2$1 from '@angular/material/core';
23
23
  import { MatRippleModule, MatOption, mixinErrorState, MAT_DATE_FORMATS, MATERIAL_SANITY_CHECKS } from '@angular/material/core';
24
+ import * as i7 from '@angular/material/progress-spinner';
25
+ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
24
26
  import * as i1 from '@ngx-translate/core';
25
27
  import { TranslateModule } from '@ngx-translate/core';
26
28
  import * as i1$3 from '@angular/material/form-field';
@@ -31,8 +33,6 @@ import { MatAutocompleteModule } from '@angular/material/autocomplete';
31
33
  import * as i2$2 from '@angular/cdk/a11y';
32
34
  import * as i8 from '@angular/material/input';
33
35
  import { MatInputModule } from '@angular/material/input';
34
- import * as i9 from '@angular/material/progress-spinner';
35
- import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
36
36
  import * as i10 from '@angular/material/progress-bar';
37
37
  import { MatProgressBarModule } from '@angular/material/progress-bar';
38
38
  import { CdkStepper, CdkStep, CdkStepperModule } from '@angular/cdk/stepper';
@@ -1727,6 +1727,7 @@ class NiceAssetsCarouselComponent {
1727
1727
  this.defaultColor = "primary";
1728
1728
  this.color = this.defaultColor;
1729
1729
  this.edit = false;
1730
+ this.loading = false;
1730
1731
  this.accept = ["image/*"];
1731
1732
  this.customActions = [];
1732
1733
  this.multipleUpload = false;
@@ -1912,13 +1913,13 @@ class NiceAssetsCarouselComponent {
1912
1913
  }
1913
1914
  }
1914
1915
  NiceAssetsCarouselComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceAssetsCarouselComponent, deps: [{ token: NICE_ASSETS_CAROUSEL_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
1915
- NiceAssetsCarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: NiceAssetsCarouselComponent, selector: "nice-assets-carousel", inputs: { color: "color", edit: "edit", accept: "accept", customActions: "customActions", imagesProcessor: "imagesProcessor", multipleUpload: "multipleUpload", visiblePreviewAsset: "visiblePreviewAsset", showAddAssetContainer: "showAddAssetContainer", assets: "assets" }, outputs: { activeChange: "activeChange", removedAsset: "removedAsset" }, providers: [
1916
+ NiceAssetsCarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: NiceAssetsCarouselComponent, selector: "nice-assets-carousel", inputs: { color: "color", edit: "edit", loading: "loading", accept: "accept", customActions: "customActions", imagesProcessor: "imagesProcessor", multipleUpload: "multipleUpload", visiblePreviewAsset: "visiblePreviewAsset", showAddAssetContainer: "showAddAssetContainer", assets: "assets" }, outputs: { activeChange: "activeChange", removedAsset: "removedAsset" }, providers: [
1916
1917
  {
1917
1918
  provide: NG_VALUE_ACCESSOR,
1918
1919
  useExisting: forwardRef(() => NiceAssetsCarouselComponent),
1919
1920
  multi: true
1920
1921
  }
1921
- ], 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"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.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"] }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i2$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: NiceDropzoneDirective, selector: "[niceDropzone]", outputs: ["filesDropped"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], animations: niceAnimations, encapsulation: i0.ViewEncapsulation.None });
1922
+ ], 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 <div *ngIf=\"loading\" class=\"flex flex-row justify-center items-center h-full\">\n <mat-spinner [diameter]=\"32\"></mat-spinner>\n </div>\n <ng-container *ngIf=\"!loading\">\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 </ng-container>\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\n #assets\n class=\"asset\"\n *ngFor=\"let asset of _assets; let i = index\"\n (click)=\"clickAsset(i)\"\n [ngClass]=\"color\"\n [class.active]=\"_active === i\"\n >\n <ng-container>\n <img\n *ngIf=\"asset.type === 'image'\"\n draggable=\"false\"\n [src]=\"asset.url ?? asset.base64\"\n alt=\"add-image\"\n />\n <video\n *ngIf=\"asset.type === 'video'\"\n draggable=\"false\"\n loop\n [src]=\"asset.url ?? asset.base64\"\n ></video>\n </ng-container>\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"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.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"] }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i2$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: NiceDropzoneDirective, selector: "[niceDropzone]", outputs: ["filesDropped"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], animations: niceAnimations, encapsulation: i0.ViewEncapsulation.None });
1922
1923
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceAssetsCarouselComponent, decorators: [{
1923
1924
  type: Component,
1924
1925
  args: [{ selector: "nice-assets-carousel", encapsulation: ViewEncapsulation.None, animations: niceAnimations, providers: [
@@ -1927,7 +1928,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImpor
1927
1928
  useExisting: forwardRef(() => NiceAssetsCarouselComponent),
1928
1929
  multi: true
1929
1930
  }
1930
- ], 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"] }]
1931
+ ], 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 <div *ngIf=\"loading\" class=\"flex flex-row justify-center items-center h-full\">\n <mat-spinner [diameter]=\"32\"></mat-spinner>\n </div>\n <ng-container *ngIf=\"!loading\">\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 </ng-container>\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\n #assets\n class=\"asset\"\n *ngFor=\"let asset of _assets; let i = index\"\n (click)=\"clickAsset(i)\"\n [ngClass]=\"color\"\n [class.active]=\"_active === i\"\n >\n <ng-container>\n <img\n *ngIf=\"asset.type === 'image'\"\n draggable=\"false\"\n [src]=\"asset.url ?? asset.base64\"\n alt=\"add-image\"\n />\n <video\n *ngIf=\"asset.type === 'video'\"\n draggable=\"false\"\n loop\n [src]=\"asset.url ?? asset.base64\"\n ></video>\n </ng-container>\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"] }]
1931
1932
  }], ctorParameters: function () {
1932
1933
  return [{ type: undefined, decorators: [{
1933
1934
  type: Optional
@@ -1942,6 +1943,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImpor
1942
1943
  type: Input
1943
1944
  }], edit: [{
1944
1945
  type: Input
1946
+ }], loading: [{
1947
+ type: Input
1945
1948
  }], accept: [{
1946
1949
  type: Input
1947
1950
  }], customActions: [{
@@ -2032,14 +2035,16 @@ NiceAssetsCarouselModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0"
2032
2035
  MatMenuModule,
2033
2036
  MatRippleModule,
2034
2037
  NiceDropzoneModule,
2035
- TranslateModule], exports: [NiceAssetsCarouselComponent, NiceAssetsCarouselActiveContentDirective] });
2038
+ TranslateModule,
2039
+ MatProgressSpinnerModule], exports: [NiceAssetsCarouselComponent, NiceAssetsCarouselActiveContentDirective] });
2036
2040
  NiceAssetsCarouselModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceAssetsCarouselModule, imports: [CommonModule,
2037
2041
  MatIconModule,
2038
2042
  MatButtonModule,
2039
2043
  MatMenuModule,
2040
2044
  MatRippleModule,
2041
2045
  NiceDropzoneModule,
2042
- TranslateModule] });
2046
+ TranslateModule,
2047
+ MatProgressSpinnerModule] });
2043
2048
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceAssetsCarouselModule, decorators: [{
2044
2049
  type: NgModule,
2045
2050
  args: [{
@@ -2050,7 +2055,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImpor
2050
2055
  MatMenuModule,
2051
2056
  MatRippleModule,
2052
2057
  NiceDropzoneModule,
2053
- TranslateModule
2058
+ TranslateModule,
2059
+ MatProgressSpinnerModule
2054
2060
  ],
2055
2061
  declarations: [NiceAssetsCarouselComponent, NiceAssetsCarouselActiveContentDirective],
2056
2062
  providers: [],
@@ -2531,7 +2537,7 @@ NiceTypeaheadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
2531
2537
  provide: MatFormFieldControl,
2532
2538
  useExisting: NiceTypeaheadComponent
2533
2539
  }
2534
- ], viewQueries: [{ propertyName: "input", first: true, predicate: ["searchInput"], descendants: true, static: true }, { propertyName: "options", predicate: MatOption, descendants: true }], ngImport: i0, template: "<div class=\"flex\" *ngIf=\"!disabled; else disable\">\n <input\n #searchInput\n matInput\n class=\"flex-auto\"\n type=\"text\"\n name=\"mat-autocomplete\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [formControl]=\"searchControl\"\n [matAutocomplete]=\"auto\"\n [required]=\"required\"\n />\n <mat-icon *ngIf=\"value && !loading\" matSuffix class=\"close-button secondary-text\" (click)=\"onRemove($event)\">\n close\n </mat-icon>\n\n <mat-spinner class=\"self-center\" [diameter]=\"16\" *ngIf=\"loading\"></mat-spinner>\n</div>\n<mat-autocomplete\n #auto=\"matAutocomplete\"\n [panelWidth]=\"panelWidth\"\n [class]=\"panelClass\"\n (optionActivated)=\"onOptionActivated($event)\"\n (optionSelected)=\"onOptionSelected($event)\"\n (closed)=\"updateState(false)\"\n (opened)=\"updateState(true)\"\n (optionsScroll)=\"onEndScroll()\"\n autoActiveFirstOption\n>\n <mat-progress-bar *ngIf=\"open && loading\" mode=\"indeterminate\" color=\"primary\"></mat-progress-bar>\n <mat-option *ngFor=\"let option of values\" [value]=\"option\">\n <ng-container\n *ngIf=\"optionTemplate; else format\"\n [ngTemplateOutlet]=\"optionTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: option }\">\n </ng-container>\n <ng-template #format>\n {{ formatLabel(option) }}\n </ng-template>\n </mat-option>\n <mat-option *ngIf=\"!values?.length && !allowNotFoundItems\" disabled>\n <ng-container *ngIf=\"emptyPlaceholder; else defaultEmptyPlaceholder\">\n {{ emptyPlaceholder }}\n </ng-container>\n <ng-template #defaultEmptyPlaceholder>\n {{ \"components.typeahead.no_item_found\" | translate }}\n </ng-template>\n </mat-option>\n <mat-option *ngIf=\"!values?.length && allowNotFoundItems\" id=\"new-value-option\" [value]=\"searchControl.value\">\n <span class=\"italic\">{{ searchControl.value }}</span>\n </mat-option>\n <mat-progress-bar *ngIf=\"open && loadingPage\" mode=\"indeterminate\" color=\"primary\"></mat-progress-bar>\n</mat-autocomplete>\n\n<ng-template #disable>\n <input\n matInput\n class=\"disabled-input\"\n type=\"text\"\n [disabled]=\"true\"\n [placeholder]=\"placeholder\"\n [formControl]=\"searchControl\"\n [required]=\"required\"\n />\n</ng-template>\n", styles: ["nice-typeahead{width:100%}nice-typeahead .close-button{flex:1 1 18px;cursor:pointer;min-height:18px!important;min-width:18px!important;height:18px!important;width:18px!important;font-size:18px!important;align-self:center}nice-typeahead .disabled-input{flex:1 1 95%}nice-typeahead .arrow-container{display:flex;bottom:7px;align-self:flex-end;position:relative;text-align:center;-webkit-user-select:none;user-select:none}nice-typeahead .arrow{border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid;margin:0 4px;color:#0000008a}.italic{font-style:italic}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: OptionsScrollDirective, selector: "mat-autocomplete[optionsScroll]", inputs: ["thresholdPercent"], outputs: ["optionsScroll"] }, { kind: "component", type: i1$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i1$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i10.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
2540
+ ], viewQueries: [{ propertyName: "input", first: true, predicate: ["searchInput"], descendants: true, static: true }, { propertyName: "options", predicate: MatOption, descendants: true }], ngImport: i0, template: "<div class=\"flex\" *ngIf=\"!disabled; else disable\">\n <input\n #searchInput\n matInput\n class=\"flex-auto\"\n type=\"text\"\n name=\"mat-autocomplete\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [formControl]=\"searchControl\"\n [matAutocomplete]=\"auto\"\n [required]=\"required\"\n />\n <mat-icon *ngIf=\"value && !loading\" matSuffix class=\"close-button secondary-text\" (click)=\"onRemove($event)\">\n close\n </mat-icon>\n\n <mat-spinner class=\"self-center\" [diameter]=\"16\" *ngIf=\"loading\"></mat-spinner>\n</div>\n<mat-autocomplete\n #auto=\"matAutocomplete\"\n [panelWidth]=\"panelWidth\"\n [class]=\"panelClass\"\n (optionActivated)=\"onOptionActivated($event)\"\n (optionSelected)=\"onOptionSelected($event)\"\n (closed)=\"updateState(false)\"\n (opened)=\"updateState(true)\"\n (optionsScroll)=\"onEndScroll()\"\n autoActiveFirstOption\n>\n <mat-progress-bar *ngIf=\"open && loading\" mode=\"indeterminate\" color=\"primary\"></mat-progress-bar>\n <mat-option *ngFor=\"let option of values\" [value]=\"option\">\n <ng-container\n *ngIf=\"optionTemplate; else format\"\n [ngTemplateOutlet]=\"optionTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: option }\">\n </ng-container>\n <ng-template #format>\n {{ formatLabel(option) }}\n </ng-template>\n </mat-option>\n <mat-option *ngIf=\"!values?.length && !allowNotFoundItems\" disabled>\n <ng-container *ngIf=\"emptyPlaceholder; else defaultEmptyPlaceholder\">\n {{ emptyPlaceholder }}\n </ng-container>\n <ng-template #defaultEmptyPlaceholder>\n {{ \"components.typeahead.no_item_found\" | translate }}\n </ng-template>\n </mat-option>\n <mat-option *ngIf=\"!values?.length && allowNotFoundItems\" id=\"new-value-option\" [value]=\"searchControl.value\">\n <span class=\"italic\">{{ searchControl.value }}</span>\n </mat-option>\n <mat-progress-bar *ngIf=\"open && loadingPage\" mode=\"indeterminate\" color=\"primary\"></mat-progress-bar>\n</mat-autocomplete>\n\n<ng-template #disable>\n <input\n matInput\n class=\"disabled-input\"\n type=\"text\"\n [disabled]=\"true\"\n [placeholder]=\"placeholder\"\n [formControl]=\"searchControl\"\n [required]=\"required\"\n />\n</ng-template>\n", styles: ["nice-typeahead{width:100%}nice-typeahead .close-button{flex:1 1 18px;cursor:pointer;min-height:18px!important;min-width:18px!important;height:18px!important;width:18px!important;font-size:18px!important;align-self:center}nice-typeahead .disabled-input{flex:1 1 95%}nice-typeahead .arrow-container{display:flex;bottom:7px;align-self:flex-end;position:relative;text-align:center;-webkit-user-select:none;user-select:none}nice-typeahead .arrow{border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid;margin:0 4px;color:#0000008a}.italic{font-style:italic}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: OptionsScrollDirective, selector: "mat-autocomplete[optionsScroll]", inputs: ["thresholdPercent"], outputs: ["optionsScroll"] }, { kind: "component", type: i1$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i1$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i10.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
2535
2541
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceTypeaheadComponent, decorators: [{
2536
2542
  type: Component,
2537
2543
  args: [{ selector: "nice-typeahead", encapsulation: ViewEncapsulation.None, providers: [
@@ -3165,7 +3171,7 @@ NiceAsyncTypeaheadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.
3165
3171
  useExisting: NiceAsyncTypeaheadComponent
3166
3172
  },
3167
3173
  NiceAsyncTypeaheadService
3168
- ], viewQueries: [{ propertyName: "input", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "options", predicate: MatOption, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"{ loading: service.loading$ | async, loadingPage: service.loadingPage$ | async, values: service.filteredItems$ | async } as ctx\">\n <div class=\"flex\" *ngIf=\"!disabled; else disable\">\n <input\n #searchInput\n matInput\n class=\"flex-auto\"\n type=\"text\"\n name=\"mat-autocomplete\"\n [disabled]=\"$any(disabled)\"\n [placeholder]=\"placeholder\"\n [formControl]=\"searchControl\"\n [matAutocomplete]=\"auto\"\n [required]=\"$any(required)\"\n (focus)=\"focusChanged(true)\"\n />\n <mat-icon *ngIf=\"value && !ctx.loading\" matSuffix class=\"close-button secondary-text\" (click)=\"onRemove($event)\">\n close\n </mat-icon>\n\n <mat-spinner class=\"self-center\" [diameter]=\"16\" *ngIf=\"ctx.loading\"></mat-spinner>\n </div>\n <mat-autocomplete\n #auto=\"matAutocomplete\"\n [panelWidth]=\"panelWidth\"\n [class]=\"panelClass\"\n (optionActivated)=\"onOptionActivated($event)\"\n (optionSelected)=\"onOptionSelected($event)\"\n (closed)=\"updateState(false)\"\n (opened)=\"updateState(true)\"\n (optionsScroll)=\"onEndScroll()\"\n autoActiveFirstOption\n >\n <mat-progress-bar *ngIf=\"open && ctx.loading\" mode=\"indeterminate\" color=\"primary\"></mat-progress-bar>\n <mat-option *ngFor=\"let option of ctx.values\" [value]=\"option\">\n <ng-container\n *ngIf=\"optionTemplate; else format\"\n [ngTemplateOutlet]=\"optionTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: option }\">\n </ng-container>\n <ng-template #format>\n {{ formatLabel(option) }}\n </ng-template>\n </mat-option>\n <mat-option *ngIf=\"!ctx.values?.length && !allowNotFoundItems\" disabled>\n <ng-container *ngIf=\"emptyPlaceholder; else defaultEmptyPlaceholder\">\n {{ emptyPlaceholder }}\n </ng-container>\n <ng-template #defaultEmptyPlaceholder>\n {{ \"components.typeahead.no_item_found\" | translate }}\n </ng-template>\n </mat-option>\n <mat-option *ngIf=\"!ctx.values?.length && allowNotFoundItems\" id=\"new-value-option\" [value]=\"searchControl.value\">\n <span class=\"italic\">{{ searchControl.value }}</span>\n </mat-option>\n <mat-progress-bar *ngIf=\"open && ctx.loadingPage\" mode=\"indeterminate\" color=\"primary\"></mat-progress-bar>\n </mat-autocomplete>\n</ng-container>\n\n<ng-template #disable>\n <input\n matInput\n class=\"disabled-input\"\n type=\"text\"\n [disabled]=\"true\"\n [placeholder]=\"placeholder\"\n [formControl]=\"searchControl\"\n [required]=\"$any(required)\"\n />\n</ng-template>\n", styles: ["nice-async-typeahead{width:100%}nice-async-typeahead .close-button{flex:1 1 18px;cursor:pointer;min-height:18px!important;min-width:18px!important;height:18px!important;width:18px!important;font-size:18px!important;align-self:center}nice-async-typeahead .disabled-input{flex:1 1 95%}nice-async-typeahead .arrow-container{display:flex;bottom:7px;align-self:flex-end;position:relative;text-align:center;-webkit-user-select:none;user-select:none}nice-async-typeahead .arrow{border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid;margin:0 4px;color:#0000008a}.italic{font-style:italic}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: OptionsScrollDirective, selector: "mat-autocomplete[optionsScroll]", inputs: ["thresholdPercent"], outputs: ["optionsScroll"] }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i1$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i1$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i10.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
3174
+ ], viewQueries: [{ propertyName: "input", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "options", predicate: MatOption, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"{ loading: service.loading$ | async, loadingPage: service.loadingPage$ | async, values: service.filteredItems$ | async } as ctx\">\n <div class=\"flex\" *ngIf=\"!disabled; else disable\">\n <input\n #searchInput\n matInput\n class=\"flex-auto\"\n type=\"text\"\n name=\"mat-autocomplete\"\n [disabled]=\"$any(disabled)\"\n [placeholder]=\"placeholder\"\n [formControl]=\"searchControl\"\n [matAutocomplete]=\"auto\"\n [required]=\"$any(required)\"\n (focus)=\"focusChanged(true)\"\n />\n <mat-icon *ngIf=\"value && !ctx.loading\" matSuffix class=\"close-button secondary-text\" (click)=\"onRemove($event)\">\n close\n </mat-icon>\n\n <mat-spinner class=\"self-center\" [diameter]=\"16\" *ngIf=\"ctx.loading\"></mat-spinner>\n </div>\n <mat-autocomplete\n #auto=\"matAutocomplete\"\n [panelWidth]=\"panelWidth\"\n [class]=\"panelClass\"\n (optionActivated)=\"onOptionActivated($event)\"\n (optionSelected)=\"onOptionSelected($event)\"\n (closed)=\"updateState(false)\"\n (opened)=\"updateState(true)\"\n (optionsScroll)=\"onEndScroll()\"\n autoActiveFirstOption\n >\n <mat-progress-bar *ngIf=\"open && ctx.loading\" mode=\"indeterminate\" color=\"primary\"></mat-progress-bar>\n <mat-option *ngFor=\"let option of ctx.values\" [value]=\"option\">\n <ng-container\n *ngIf=\"optionTemplate; else format\"\n [ngTemplateOutlet]=\"optionTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: option }\">\n </ng-container>\n <ng-template #format>\n {{ formatLabel(option) }}\n </ng-template>\n </mat-option>\n <mat-option *ngIf=\"!ctx.values?.length && !allowNotFoundItems\" disabled>\n <ng-container *ngIf=\"emptyPlaceholder; else defaultEmptyPlaceholder\">\n {{ emptyPlaceholder }}\n </ng-container>\n <ng-template #defaultEmptyPlaceholder>\n {{ \"components.typeahead.no_item_found\" | translate }}\n </ng-template>\n </mat-option>\n <mat-option *ngIf=\"!ctx.values?.length && allowNotFoundItems\" id=\"new-value-option\" [value]=\"searchControl.value\">\n <span class=\"italic\">{{ searchControl.value }}</span>\n </mat-option>\n <mat-progress-bar *ngIf=\"open && ctx.loadingPage\" mode=\"indeterminate\" color=\"primary\"></mat-progress-bar>\n </mat-autocomplete>\n</ng-container>\n\n<ng-template #disable>\n <input\n matInput\n class=\"disabled-input\"\n type=\"text\"\n [disabled]=\"true\"\n [placeholder]=\"placeholder\"\n [formControl]=\"searchControl\"\n [required]=\"$any(required)\"\n />\n</ng-template>\n", styles: ["nice-async-typeahead{width:100%}nice-async-typeahead .close-button{flex:1 1 18px;cursor:pointer;min-height:18px!important;min-width:18px!important;height:18px!important;width:18px!important;font-size:18px!important;align-self:center}nice-async-typeahead .disabled-input{flex:1 1 95%}nice-async-typeahead .arrow-container{display:flex;bottom:7px;align-self:flex-end;position:relative;text-align:center;-webkit-user-select:none;user-select:none}nice-async-typeahead .arrow{border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid;margin:0 4px;color:#0000008a}.italic{font-style:italic}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: OptionsScrollDirective, selector: "mat-autocomplete[optionsScroll]", inputs: ["thresholdPercent"], outputs: ["optionsScroll"] }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i1$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i1$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i10.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
3169
3175
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceAsyncTypeaheadComponent, decorators: [{
3170
3176
  type: Component,
3171
3177
  args: [{ selector: "nice-async-typeahead", encapsulation: ViewEncapsulation.None, providers: [
@@ -6921,7 +6927,7 @@ class NiceLoadingSpinnerComponent {
6921
6927
  }
6922
6928
  }
6923
6929
  NiceLoadingSpinnerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceLoadingSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
6924
- NiceLoadingSpinnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: NiceLoadingSpinnerComponent, selector: "nice-loading-spinner", inputs: { loading: "loading", mode: "mode", diameter: "diameter" }, ngImport: i0, template: "<mat-spinner [diameter]=\"diameter\" [mode]=\"mode\" [color]=\"'accent'\"></mat-spinner>\n", styles: [":host{display:inline-block}\n"], dependencies: [{ kind: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }] });
6930
+ NiceLoadingSpinnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: NiceLoadingSpinnerComponent, selector: "nice-loading-spinner", inputs: { loading: "loading", mode: "mode", diameter: "diameter" }, ngImport: i0, template: "<mat-spinner [diameter]=\"diameter\" [mode]=\"mode\" [color]=\"'accent'\"></mat-spinner>\n", styles: [":host{display:inline-block}\n"], dependencies: [{ kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }] });
6925
6931
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceLoadingSpinnerComponent, decorators: [{
6926
6932
  type: Component,
6927
6933
  args: [{ selector: "nice-loading-spinner", template: "<mat-spinner [diameter]=\"diameter\" [mode]=\"mode\" [color]=\"'accent'\"></mat-spinner>\n", styles: [":host{display:inline-block}\n"] }]
@@ -10381,7 +10387,7 @@ class NiceChipListDirective {
10381
10387
  }
10382
10388
  writeValue(obj) {
10383
10389
  if (obj && Array.isArray(obj)) {
10384
- this._values = obj;
10390
+ this._values = [...obj];
10385
10391
  }
10386
10392
  else {
10387
10393
  this._values = [];