@recursyve/nice-ui-kit.v2 14.0.0-beta.119 → 14.0.0-beta.121

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

@@ -1734,7 +1734,7 @@ class NiceAssetsCarouselComponent {
         this.color = this.defaultColor;
         this.edit = false;
         this.loading = false;
-        this.accept = ["image/*"];
+        this.accept = [];
         this.customActions = [];
         this.multipleUpload = false;
         this.visiblePreviewAsset = 4;
@@ -1742,6 +1742,7 @@ class NiceAssetsCarouselComponent {
         this.activeChange = new EventEmitter();
         this.removedAsset = new EventEmitter();
         this.listStyle = { transform: "translateX(0px)" };
+        this._imagesMimeTypes = ["image/png", "image/jpeg", "image/webp", "image/avif"];
         if (!this.options) {
             this.options = {
                 actionButtons: {
@@ -1803,6 +1804,20 @@ class NiceAssetsCarouselComponent {
                 || this._active >= this.visiblePreviewAsset;
         this.activeChange.emit(this._active);
     }
+    ngOnInit() {
+        if (!this.accept?.length) {
+            this.accept = [...this._imagesMimeTypes];
+        }
+    }
+    ngOnChanges(changes) {
+        if ("accept" in changes && this.accept) {
+            const index = this.accept.indexOf("image/*");
+            if (index >= 0) {
+                this.accept.splice(index, 1);
+                this.accept.push(...this._imagesMimeTypes);
+            }
+        }
+    }
     writeValue(assets) {
         this._assets = assets ?? [];
         if (this._assets.length === 0) {
@@ -1845,39 +1860,27 @@ class NiceAssetsCarouselComponent {
         this.activeAsset = index;
     }
     async onFilesChange(event) {
-        let files = event.target?.files;
-        if (this.imagesProcessor) {
-            files = await this.getProcessedFiles(files);
-        }
+        const files = event.target?.files;
         await this.onFilesDrop(files);
         this.inputElement.nativeElement.value = "";
     }
-    async onFilesDrop(files) {
+    async onFilesDrop(fileList) {
+        let files = this.filterOutUnsupportedFiles(fileList);
+        if (this.imagesProcessor) {
+            files = await this.getProcessedFiles(files);
+        }
         if (!files?.length) {
             return;
         }
-        let newAssetsAdded = false;
-        for (let i = 0; i < files.length; i++) {
-            const file = files.item(i);
-            if (!this.accept.some((accept) => {
-                if (accept.endsWith("*")) {
-                    return file.type.startsWith(accept.replace("*", ""));
-                }
-                return accept === file.type;
-            })) {
-                continue;
-            }
-            newAssetsAdded = true;
+        for (const file of files) {
             this._assets.push({
                 file,
                 type: file.type.split("/").shift(),
                 base64: await FileUtils.getDataUrl(file)
             });
         }
-        if (newAssetsAdded) {
-            this.clickAsset(this._assets.length - 1);
-            this.propagate?.(this._assets);
-        }
+        this.clickAsset(this._assets.length - 1);
+        this.propagate?.(this._assets);
     }
     clickRemove() {
         this.removedAsset.emit(this._assets[this._active]);
@@ -1900,11 +1903,31 @@ class NiceAssetsCarouselComponent {
         await this._activeVideoElement.nativeElement.play();
         await this._assetsElement.get(this._active).nativeElement.firstElementChild.play();
     }
+    filterOutUnsupportedFiles(fileList) {
+        const files = [];
+        for (let i = 0; i < fileList.length; i++) {
+            const file = fileList.item(i);
+            if (this.accept.some((accept) => {
+                if (accept.endsWith("*")) {
+                    return file.type.startsWith(accept.replace("*", ""));
+                }
+                return accept === file.type;
+            })) {
+                files.push(file);
+            }
+        }
+        return files;
+    }
     async getProcessedFiles(files) {
         try {
+            if (!files.length) {
+                return null;
+            }
             return await this.imagesProcessor(files);
         }
-        catch (e) { }
+        catch (e) {
+            return null;
+        }
     }
 }
 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 });
@@ -1914,7 +1937,7 @@ NiceAssetsCarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.
             useExisting: forwardRef(() => NiceAssetsCarouselComponent),
             multi: true
         }
-    ], 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 });
+    ], 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 }], usesOnChanges: 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 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceAssetsCarouselComponent, decorators: [{
             type: Component,
             args: [{ selector: "nice-assets-carousel", encapsulation: ViewEncapsulation.None, animations: niceAnimations, providers: [
@@ -10082,16 +10105,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImpor
                 }]
         }] });
 
-class TranslationFormService {
+class NiceTranslationFormService {
     constructor() {
         this._languages$ = new BehaviorSubject([]);
         this._requiredLanguages$ = new BehaviorSubject([]);
     }
     get languages$() {
-        return this._languages$;
+        return this._languages$.asObservable();
+    }
+    get languages() {
+        return this._languages$.getValue();
     }
     get requiredLanguages$() {
-        return this._requiredLanguages$;
+        return this._requiredLanguages$.asObservable();
+    }
+    get requiredLanguages() {
+        return this._requiredLanguages$.value;
+    }
+    get hasLanguages$() {
+        return this._languages$.asObservable().pipe(map((languages) => !!languages?.length));
+    }
+    get hasLanguages() {
+        return !!this.languages?.length;
     }
     setLanguages(languages) {
         this._languages$.next(languages ?? []);
@@ -10100,7 +10135,7 @@ class TranslationFormService {
         if (!languages?.length) {
             this._requiredLanguages$.next([]);
         }
-        const languagesValues = this.languages$.getValue();
+        const languagesValues = this.languages;
         const unregisteredLanguages = languages?.filter((language) => !languagesValues.includes(language));
         if (unregisteredLanguages?.length) {
             throw new Error(`You provided languages that are not configured
@@ -10116,9 +10151,9 @@ class TranslationFormService {
         }
     }
 }
-TranslationFormService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: TranslationFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-TranslationFormService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: TranslationFormService, providedIn: "root" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: TranslationFormService, decorators: [{
+NiceTranslationFormService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceTranslationFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+NiceTranslationFormService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceTranslationFormService, providedIn: "root" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: NiceTranslationFormService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: "root",
@@ -10146,12 +10181,12 @@ class TranslationContextDirective {
         this.activeLanguage$.next(language);
     }
 }
-TranslationContextDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: TranslationContextDirective, deps: [{ token: TranslationFormService }], target: i0.ɵɵFactoryTarget.Directive });
+TranslationContextDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: TranslationContextDirective, deps: [{ token: NiceTranslationFormService }], target: i0.ɵɵFactoryTarget.Directive });
 TranslationContextDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.3", type: TranslationContextDirective, selector: "[niceTranslationContext]", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: TranslationContextDirective, decorators: [{
             type: Directive,
             args: [{ selector: "[niceTranslationContext]" }]
-        }], ctorParameters: function () { return [{ type: TranslationFormService }]; } });
+        }], ctorParameters: function () { return [{ type: NiceTranslationFormService }]; } });
 
 class TranslationToggleComponent {
     constructor(context, translationFormService) {
@@ -10164,54 +10199,12 @@ class TranslationToggleComponent {
         this.context.updateLanguage($event.value);
     }
 }
-TranslationToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: TranslationToggleComponent, deps: [{ token: TranslationContextDirective }, { token: TranslationFormService }], target: i0.ɵɵFactoryTarget.Component });
+TranslationToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: TranslationToggleComponent, deps: [{ token: TranslationContextDirective }, { token: NiceTranslationFormService }], target: i0.ɵɵFactoryTarget.Component });
 TranslationToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: TranslationToggleComponent, selector: "nice-translation-toggle", ngImport: i0, template: "<mat-button-toggle-group\n    *ngIf=\"(languages$ | async)?.length > 1\"\n    (change)=\"onChange($event)\"\n    [value]=\"activeLanguage$ | async\"\n>\n    <mat-button-toggle *ngFor=\"let language of languages$ | async\" [value]=\"language\">\n        {{ language | uppercase }}\n    </mat-button-toggle>\n</mat-button-toggle-group>\n", dependencies: [{ kind: "directive", type: i3$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: TranslationToggleComponent, decorators: [{
             type: Component,
             args: [{ selector: "nice-translation-toggle", template: "<mat-button-toggle-group\n    *ngIf=\"(languages$ | async)?.length > 1\"\n    (change)=\"onChange($event)\"\n    [value]=\"activeLanguage$ | async\"\n>\n    <mat-button-toggle *ngFor=\"let language of languages$ | async\" [value]=\"language\">\n        {{ language | uppercase }}\n    </mat-button-toggle>\n</mat-button-toggle-group>\n" }]
-        }], ctorParameters: function () { return [{ type: TranslationContextDirective }, { type: TranslationFormService }]; } });
-
-function RequireForLanguages() {
-    return registerAsyncValidatorDecorator({
-        name: "RequireForLanguages",
-    });
-}
-class RequireForLanguagesValidator extends AsyncValidator {
-    constructor(service) {
-        super();
-        this.service = service;
-        this.name = "RequireForLanguages";
-    }
-    validate(formGroup) {
-        const requiredLanguages = this.service.requiredLanguages$.getValue();
-        if (!requiredLanguages.length) {
-            return of(null);
-        }
-        const missingLanguages = [];
-        for (const requiredLanguage of requiredLanguages) {
-            const control = formGroup.get(requiredLanguage);
-            if (control?.value) {
-                continue;
-            }
-            missingLanguages.push(requiredLanguage);
-        }
-        if (missingLanguages?.length) {
-            return of({ languageRequired: { missingLanguages } });
-        }
-        return of(null);
-    }
-}
-RequireForLanguagesValidator.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: RequireForLanguagesValidator, deps: [{ token: TranslationFormService }], target: i0.ɵɵFactoryTarget.Injectable });
-RequireForLanguagesValidator.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: RequireForLanguagesValidator });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: RequireForLanguagesValidator, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: TranslationFormService }]; } });
-
-class TranslationForm {
-    constructor(values) {
-        Object.assign(this, values ?? {});
-    }
-}
+        }], ctorParameters: function () { return [{ type: TranslationContextDirective }, { type: NiceTranslationFormService }]; } });
 
 class TranslationFormComponent {
     constructor(container, context, service, changeDetectorRef) {
@@ -10335,14 +10328,14 @@ class TranslationFormComponent {
         this.currentControl = this.formGroup.get(languages[0]);
     }
 }
-TranslationFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: TranslationFormComponent, deps: [{ token: i1$2.ControlContainer }, { token: TranslationContextDirective }, { token: TranslationFormService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+TranslationFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: TranslationFormComponent, deps: [{ token: i1$2.ControlContainer }, { token: TranslationContextDirective }, { token: NiceTranslationFormService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 TranslationFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.3", type: TranslationFormComponent, selector: "ng-component", inputs: { required: "required", disabled: "disabled", placeholder: "placeholder", floating: "floating", maxLength: "maxLength" }, host: { properties: { "class": "this.classList", "class.floating": "this.shouldLabelFloat", "id": "this.id", "attr.aria-describedby": "this.describedBy" } }, ngImport: i0, template: ``, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: TranslationFormComponent, decorators: [{
             type: Component,
             args: [{
                     template: ``,
                 }]
-        }], ctorParameters: function () { return [{ type: i1$2.ControlContainer }, { type: TranslationContextDirective }, { type: TranslationFormService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { classList: [{
+        }], ctorParameters: function () { return [{ type: i1$2.ControlContainer }, { type: TranslationContextDirective }, { type: NiceTranslationFormService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { classList: [{
                 type: HostBinding,
                 args: ["class"]
             }], shouldLabelFloat: [{
@@ -10415,6 +10408,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImpor
                     ], template: "<input\n    matInput\n    [formControl]=\"currentControl\"\n    [placeholder]=\"placeholder\"\n    [maxlength]=\"maxLength\"\n/>\n" }]
         }] });
 
+function RequireForLanguages() {
+    return registerAsyncValidatorDecorator({
+        name: "RequireForLanguages",
+    });
+}
+class RequireForLanguagesValidator extends AsyncValidator {
+    constructor(service) {
+        super();
+        this.service = service;
+        this.name = "RequireForLanguages";
+    }
+    validate(formGroup) {
+        return this.service.requiredLanguages$.pipe(take(1), map((requiredLanguages) => {
+            if (!requiredLanguages.length) {
+                return null;
+            }
+            const missingLanguages = [];
+            for (const requiredLanguage of requiredLanguages) {
+                const control = formGroup.get(requiredLanguage);
+                if (control?.value) {
+                    continue;
+                }
+                missingLanguages.push(requiredLanguage);
+            }
+            if (missingLanguages?.length) {
+                return { languageRequired: { missingLanguages } };
+            }
+            return null;
+        }));
+    }
+}
+RequireForLanguagesValidator.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: RequireForLanguagesValidator, deps: [{ token: NiceTranslationFormService }], target: i0.ɵɵFactoryTarget.Injectable });
+RequireForLanguagesValidator.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: RequireForLanguagesValidator });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImport: i0, type: RequireForLanguagesValidator, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: NiceTranslationFormService }]; } });
+
 class NiceTranslationFormModule {
     static forRoot() {
         return {
@@ -10475,7 +10505,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.3", ngImpor
         }] });
 
 // tslint:disable-next-line:variable-name
-const TranslationFormDecorator = () => DynamicGroup();
+const TranslationFormGroup = () => DynamicGroup();
+
+class TranslationForm {
+    constructor(values) {
+        Object.assign(this, values ?? {});
+    }
+}
 
 class NiceAutofocusDirective {
     constructor(elem) {
@@ -11348,5 +11384,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.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, LexoRankUtils, LinkPipe, LocalizedBooleanPipe, LocalizedCurrencyPipe, LocalizedDateOnlyPipe, LocalizedDatePipe, MinutesToTimePipe, ModalMode, NICE_ASYNC_TYPEAHEAD_PROVIDER, 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, NiceDraggableListDirective, NiceDraggableListModule, 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, NiceSweetAlertDirective, NiceSweetAlertModule, NiceSweetAlertService, NiceToastComponent, NiceToastModule, NiceToastService, NiceToggleButtonGroupModule, NiceTransformResponseInterceptor, NiceTranslationFormModule, 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, RequireForLanguages, RequireForLanguagesValidator, RerenderDirective, ResolveDirective, RoundPipe, SanitizeBypassPipe, SecondsToTimePipe, TRANSFORM_TYPE, ToggleButtonComponent, ToggleButtonGroupComponent, TrackByPropPipe, TranslationContextDirective, TranslationForm, TranslationFormDecorator, TranslationFormService, TranslationFormTextareaComponent, TranslationFormTextfieldComponent, TranslationToggleComponent, TypeUtils, UrlUtils, _HintComponentBase, _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, LexoRankUtils, LinkPipe, LocalizedBooleanPipe, LocalizedCurrencyPipe, LocalizedDateOnlyPipe, LocalizedDatePipe, MinutesToTimePipe, ModalMode, NICE_ASYNC_TYPEAHEAD_PROVIDER, 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, NiceDraggableListDirective, NiceDraggableListModule, 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, NiceSweetAlertDirective, NiceSweetAlertModule, NiceSweetAlertService, NiceToastComponent, NiceToastModule, NiceToastService, NiceToggleButtonGroupModule, NiceTransformResponseInterceptor, NiceTranslationFormModule, NiceTranslationFormService, 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, RequireForLanguages, RequireForLanguagesValidator, RerenderDirective, ResolveDirective, RoundPipe, SanitizeBypassPipe, SecondsToTimePipe, TRANSFORM_TYPE, ToggleButtonComponent, ToggleButtonGroupComponent, TrackByPropPipe, TranslationContextDirective, TranslationForm, TranslationFormGroup, TranslationFormTextareaComponent, TranslationFormTextfieldComponent, TranslationToggleComponent, TypeUtils, UrlUtils, _HintComponentBase, _normalizeDegrees, isNotNullOrUndefined, isNullOrUndefined, mergeDeep, mixinNiceApi, niceAnimations, round };
 //# sourceMappingURL=recursyve-nice-ui-kit.v2.mjs.map