@rlucan/ui 17.1.1 → 17.1.3

package/fesm2022/rlucan-ui.mjs

@@ -884,7 +884,7 @@ class UiFileService {
     upload() {
         const promises = [];
         this.controls.forEach(c => promises.push(c.beforeSave()));
-        return new Promise((res, rej) => {
+        return new Promise((res) => {
             this.uploadSubscription.subscribe((v) => {
                 if (v.action === 'uploadSuccess' || v.action === 'uploadFailed') {
                     res(v.action);
@@ -892,9 +892,10 @@ class UiFileService {
             });
             this.uploadSubscription.next({ action: 'uploadStarted' });
             Promise.all(promises).then((r) => {
+                console.log(r);
                 const event = {
                     type: 'uploadAll',
-                    url: this.fileServiceConfig.uploadUrl,
+                    url: this.fileServiceConfig.uploadUrl(),
                     method: 'POST',
                     headers: this.fileServiceConfig.getAuthHeader()
                 };
@@ -915,49 +916,77 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                 }] }] });
 
 class FileComponent {
-    get fitImageFileSize() {
-        if (!this.fileServiceConfig.imageSizes[this.fileSize]) {
-            console.error('Missing filesize for ' + this.fileSize);
+    set fileSize(fs) {
+        if (typeof fs === 'string') {
+            const f = this.fileServiceConfig.imageSizes.find(n => n.name === fs);
+            if (!f) {
+                console.error('Missing filesize for ' + fs);
+            }
+            else {
+                this.uiFileSize = f;
+            }
+        }
+        else {
+            this.uiFileSize = fs;
         }
-        return this.fileServiceConfig.imageSizes[this.fileSize][0] < 0 || this.fileServiceConfig.imageSizes[this.fileSize][1] < 0;
+    }
+    get fitImageFileSize() {
+        return this.uiFileSize.limit === 'maxHeight' || this.uiFileSize.limit === 'maxWidth';
     }
     get width() {
         if (this.fitImageFileSize) {
-            if (this.nativeFileSizeRatio === -1) {
-                return '100%';
-            }
-            else {
-                return this.nativeFileWidth + 'px';
-            }
+            return '';
+            // if (this.nativeFileSizeRatio === -1) {
+            //   return '100%';
+            // } else {
+            //   return this.nativeFileWidth + 'px'
+            // }
         }
         else {
-            return this.fileServiceConfig.imageSizes[this.fileSize] ? this.fileServiceConfig.imageSizes[this.fileSize][0] + 'px' : undefined;
+            return this.uiFileSize.width + 'px';
         }
     }
     get maxWidth() {
-        if (this.fileServiceConfig.imageSizes[this.fileSize][0] < 0) {
-            return this.width;
-        }
-        return this.fileServiceConfig.imageSizes[this.fileSize] ? this.fileServiceConfig.imageSizes[this.fileSize][0] + 'px' : undefined;
+        return this.width; // uiFileSize.x + 'px';
+        // if (this.fileServiceConfig.imageSizes[this.fileSize][0] < 0) {
+        //   return this.width;
+        // }
+        // return this.fileServiceConfig.imageSizes[this.fileSize] ? this.fileServiceConfig.imageSizes[this.fileSize][0] + 'px' : undefined;
     }
     get height() {
         if (this.fitImageFileSize) {
-            if (this.nativeFileSizeRatio === -1) {
-                return '100%';
-            }
-            else {
-                return this.nativeFileHeight + 'px';
-            }
+            return '';
+            // if (this.nativeFileSizeRatio === -1) {
+            //   return '100%';
+            // } else {
+            //   return this.nativeFileHeight + 'px';
+            // }
         }
         else {
-            return this.fileServiceConfig.imageSizes[this.fileSize] ? this.fileServiceConfig.imageSizes[this.fileSize][1] + 'px' : undefined;
+            return this.uiFileSize.height + 'px';
         }
     }
     get maxHeight() {
-        if (this.fileServiceConfig.imageSizes[this.fileSize][1] < 0) {
-            return this.height;
+        return this.height; // uiFileSize.y + 'px';
+        // if (this.fileServiceConfig.imageSizes[this.fileSize][1] < 0) {
+        //   return this.height;
+        // }
+        // return this.fileServiceConfig.imageSizes[this.fileSize] ? this.fileServiceConfig.imageSizes[this.fileSize][1] + 'px' : undefined;
+    }
+    get imgStyle() {
+        const ret = {};
+        switch (this.uiFileSize.limit) {
+            case 'maxHeight':
+                ret['height'] = this.uiFileSize.height + 'px';
+                break;
+            case 'maxWidth':
+                ret['width'] = this.uiFileSize.width + 'px';
+                break;
+            default:
+                ret['height'] = '100%';
+                ret['width'] = '100%';
         }
-        return this.fileServiceConfig.imageSizes[this.fileSize] ? this.fileServiceConfig.imageSizes[this.fileSize][1] + 'px' : undefined;
+        return ret;
     }
     get isVideo() {
         return this.mime.startsWith('video/');
@@ -980,12 +1009,9 @@ class FileComponent {
         this.fileServiceConfig = fileServiceConfig;
         this.domSanitizer = domSanitizer;
         this.fileService = fileService;
-        this.fileSize = 'default';
         this.visible = false;
         this.nativeFileSizeRatio = -1;
     }
-    ngOnInit() {
-    }
     ngOnChanges(changes) {
         if (changes.srcData) {
             this.nativeFileSizeRatio = -1;
@@ -994,7 +1020,7 @@ class FileComponent {
                 const img = new Image();
                 img.onload = () => {
                     if (this.fitImageFileSize) {
-                        this.nativeFileSizeRatio = Math.max(img.width / this.fileServiceConfig.imageSizes[this.fileSize][0], img.height / this.fileServiceConfig.imageSizes[this.fileSize][1], 1);
+                        this.nativeFileSizeRatio = Math.max(img.width / this.uiFileSize.width, img.height / this.uiFileSize.height, 1);
                     }
                     else {
                         this.nativeFileSizeRatio = 1;
@@ -1006,7 +1032,7 @@ class FileComponent {
                 img.src = URL.createObjectURL(changes.srcData.currentValue.nativeFile);
             }
             else {
-                this.src = this.fileServiceConfig.getMediaSrc(this.fileSize, changes.srcData.currentValue, this.srcOptions);
+                this.src = this.fileServiceConfig.getMediaSrc(this.uiFileSize, changes.srcData.currentValue, this.srcOptions);
             }
         }
         if (changes.srcUrl) {
@@ -1020,18 +1046,19 @@ class FileComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: FileComponent, deps: [{ token: UI_FILESERVICE, optional: true }, { token: i1$1.DomSanitizer }, { token: UiFileService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: FileComponent, selector: "ui-file", inputs: { fileSize: "fileSize", srcOptions: "srcOptions", srcData: "srcData", srcUrl: "srcUrl" }, host: { properties: { "style.width": "this.width", "style.maxWidth": "this.maxWidth", "style.height": "this.height", "style.maxHeight": "this.maxHeight" } }, usesOnChanges: true, ngImport: i0, template: "<mat-spinner *ngIf=\"visible\"></mat-spinner>\r\n<img *ngIf=\"!isVideo && useRetinaSrc\" [src]=\"src\" [srcset]=\"src + ' 2x'\"/>\r\n<img *ngIf=\"!isVideo && !useRetinaSrc\" [src]=\"src\"/>\r\n<video *ngIf=\"isVideo\" muted controls [src]=\"src\"></video>\r\n\r\n", styles: [":host{display:flex;align-items:center;justify-content:center;position:relative}:host img,:host video{max-width:100%;max-height:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: FileComponent, selector: "ui-file", inputs: { fileSize: "fileSize", srcOptions: "srcOptions", srcData: "srcData", srcUrl: "srcUrl" }, host: { properties: { "style.width": "this.width", "style.maxWidth": "this.maxWidth", "style.height": "this.height", "style.maxHeight": "this.maxHeight" } }, usesOnChanges: true, ngImport: i0, template: "<mat-spinner *ngIf=\"visible\"></mat-spinner>\r\n<img *ngIf=\"!isVideo && useRetinaSrc\" [ngStyle]=\"imgStyle\" [src]=\"src\" [srcset]=\"src + ' 2x'\"/>\r\n<img *ngIf=\"!isVideo && !useRetinaSrc\" [ngStyle]=\"imgStyle\" [src]=\"src\"/>\r\n<video *ngIf=\"isVideo\" muted controls [src]=\"src\"></video>\r\n\r\n", styles: [":host{display:flex;align-items:center;justify-content:center;position:relative}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4$3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: FileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-file', template: "<mat-spinner *ngIf=\"visible\"></mat-spinner>\r\n<img *ngIf=\"!isVideo && useRetinaSrc\" [src]=\"src\" [srcset]=\"src + ' 2x'\"/>\r\n<img *ngIf=\"!isVideo && !useRetinaSrc\" [src]=\"src\"/>\r\n<video *ngIf=\"isVideo\" muted controls [src]=\"src\"></video>\r\n\r\n", styles: [":host{display:flex;align-items:center;justify-content:center;position:relative}:host img,:host video{max-width:100%;max-height:100%}\n"] }]
+            args: [{ selector: 'ui-file', template: "<mat-spinner *ngIf=\"visible\"></mat-spinner>\r\n<img *ngIf=\"!isVideo && useRetinaSrc\" [ngStyle]=\"imgStyle\" [src]=\"src\" [srcset]=\"src + ' 2x'\"/>\r\n<img *ngIf=\"!isVideo && !useRetinaSrc\" [ngStyle]=\"imgStyle\" [src]=\"src\"/>\r\n<video *ngIf=\"isVideo\" muted controls [src]=\"src\"></video>\r\n\r\n", styles: [":host{display:flex;align-items:center;justify-content:center;position:relative}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
                     args: [UI_FILESERVICE]
                 }] }, { type: i1$1.DomSanitizer }, { type: UiFileService }], propDecorators: { fileSize: [{
-                type: Input
+                type: Input,
+                args: [{ required: true }]
             }], srcOptions: [{
                 type: Input
             }], srcData: [{
@@ -1053,12 +1080,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
             }] } });
 
 class UiFileUploaderComponent extends UiSimpleComponent {
+    set fileSize(fs) {
+        this._fileSize = fs;
+        if (typeof fs === 'string') {
+            const f = this.fileServiceConfig.imageSizes.find(n => n.name === fs);
+            if (!f) {
+                console.error('Missing filesize for ' + fs);
+            }
+            else {
+                this.uiFileSize = f;
+            }
+        }
+        else {
+            this.uiFileSize = fs;
+        }
+    }
     get menuTemplate() {
         return this.templates?.menuTemplate;
     }
     get addFileTemplate() {
         return this.templates?.addFileTemplate;
     }
+    get customContentTemplate() {
+        return this.templates?.customContentTemplate;
+    }
     get fileTemplate() {
         return this.templates?.fileTemplate;
     }
@@ -1072,7 +1117,6 @@ class UiFileUploaderComponent extends UiSimpleComponent {
         this.multiple = true;
         this.crop = false;
         this.cropRounded = false;
-        this.fileSize = 'default';
         this.customFileMenu = false;
         this.newFilePosition = 'last';
         this.templates = {};
@@ -1120,12 +1164,12 @@ class UiFileUploaderComponent extends UiSimpleComponent {
     }
     get ngAddStyle() {
         return {
-            width: Math.abs(this.fileServiceConfig.imageSizes[this.fileSize][0]) + 'px',
-            height: Math.abs(this.fileServiceConfig.imageSizes[this.fileSize][1]) + 'px',
+            width: Math.abs(this.uiFileSize.width) + 'px',
+            height: Math.abs(this.uiFileSize.height) + 'px',
         };
     }
     get aspectRatio() {
-        return this.fileServiceConfig.imageSizes[this.fileSize][0] / this.fileServiceConfig.imageSizes[this.fileSize][1];
+        return this.uiFileSize.width / this.uiFileSize.height;
     }
     get addFileImgSrc() {
         return this.fileServiceConfig.addFileImgSrc;
@@ -1183,7 +1227,7 @@ class UiFileUploaderComponent extends UiSimpleComponent {
                     return;
                 }
                 if (!skipCustomValidation && this.fileServiceConfig.fileValidation) {
-                    this.fileServiceConfig.fileValidation(this.fileSize, $event.file).then(valid => {
+                    this.fileServiceConfig.fileValidation(this.uiFileSize, $event.file).then(valid => {
                         if (valid) {
                             this.onUploadOutput($event, true);
                         }
@@ -1278,7 +1322,7 @@ class UiFileUploaderComponent extends UiSimpleComponent {
         //   (this.files.length > 0 ? this.files[0] : null));
     }
     beforeSave() {
-        return new Promise((res, rej) => {
+        return new Promise((res) => {
             this.files.forEach(f => {
                 if (f.$newFile && f.$newFile.progress.status === 2) {
                     f.$newFile.progress.status = 0;
@@ -1383,15 +1427,17 @@ class UiFileUploaderComponent extends UiSimpleComponent {
             f.$newFile.size = f.$newFile.nativeFile.size;
             f.$newFile.type = f.$newFile.nativeFile.type;
             this.imagesDone[id] = true;
-            console.log(f);
         }
     }
+    uploadImgSrc() {
+        return this.addFileImgSrc(this.uiFileSize);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: UiFileUploaderComponent, deps: [{ token: UI_FILESERVICE, optional: true }, { token: UI_TRANSLATESERVICE }, { token: i1.ControlContainer, host: true, optional: true, skipSelf: true }, { token: UiFileService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: UiFileUploaderComponent, selector: "ui-file-uploader", inputs: { maxFiles: "maxFiles", multiple: "multiple", crop: "crop", cropRounded: "cropRounded", cropMaxWidth: "cropMaxWidth", fileSize: "fileSize", customFileMenu: "customFileMenu", addHint: "addHint", newFilePosition: "newFilePosition", templates: "templates", previewPosition: "previewPosition" }, outputs: { imageCropped: "imageCropped", fileEvent: "fileEvent" }, providers: [{
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: UiFileUploaderComponent, selector: "ui-file-uploader", inputs: { fileSize: "fileSize", maxFiles: "maxFiles", multiple: "multiple", crop: "crop", cropRounded: "cropRounded", cropMaxWidth: "cropMaxWidth", customFileMenu: "customFileMenu", addHint: "addHint", newFilePosition: "newFilePosition", templates: "templates", previewPosition: "previewPosition" }, outputs: { imageCropped: "imageCropped", fileEvent: "fileEvent" }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
                 useExisting: UiFileUploaderComponent,
-            }], usesInheritance: true, ngImport: i0, template: "<div class=\"label\" *ngIf=\"label\">\r\n  <div class=\"text-container\" [matTooltip]=\"required ? translateService.instant('ui.controls.validation.required') : undefined\" [matTooltipPosition]=\"'above'\">\r\n    <div class=\"text\">{{label}}</div>\r\n    <div *ngIf=\"required\" class=\"required\">*</div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"files-container\" [ngClass]=\"{dragging: dragging, disabled: uploading || !editable}\">\r\n\r\n  <div class=\"existing-files\">\r\n\r\n    <div class=\"file-container\" *ngFor=\"let f of files\">\r\n\r\n      <div class=\"file-menu\" (click)=\"toggleMenuVisibility(f)\" *ngIf=\"!customFileMenu && editable && !uploading\">\r\n        <mat-icon>menu</mat-icon>\r\n      </div>\r\n      <div class=\"file-menu-container mat-elevation-z2\" [ngClass]=\"{visible: f === fileMenuOpened}\" (click)=\"menuClick()\" (mouseleave)=\"menuClick()\">\r\n        <ng-container *ngIf=\"!menuTemplate\">\r\n          <label class=\"menu-item\">{{ translateService.instant('ui.controls.ui-file-uploader.menu.change') }}\r\n            <input *ngIf=\"!refreshAddInput\" style=\"display: none;\" type=\"file\" ngFileSelect [options]=\"uploadOptions\" (change)=\"fileChangeEvent($event, f)\"\r\n                   (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\">\r\n          </label>\r\n          <div class=\"menu-item\" (click)=\"remove(f)\">{{ translateService.instant('ui.controls.ui-file-uploader.menu.delete') }}</div>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"menuTemplate\">\r\n          <ng-template [ngTemplateOutlet]=\"menuTemplate\" [ngTemplateOutletContext]=\"{fileInput: fileInput}\"></ng-template>\r\n          <ng-template #fileInput>\r\n          <input style=\"display: none;\" type=\"file\" ngFileSelect [options]=\"uploadOptions\" (change)=\"fileChangeEvent($event, f)\"\r\n                 (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\">\r\n          </ng-template>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <div *ngIf=\"crop && !cropDone(f)\" (mouseenter)=\"startCropPreview(f.$newFile.id)\" (mouseleave)=\"stopCropPreview(f.$newFile.id)\">\r\n        <div class=\"crop-container\" [ngStyle]=\"ngAddStyle\">\r\n\r\n          <ui-file *ngIf=\"false && files.length > 0 && !cropSourceImages\" [fileSize]=\"fileSize\" [srcData]=\"files[0].custom\" [ngClass]=\"{rounded: cropRounded}\"></ui-file>\r\n\r\n          <mat-spinner *ngIf=\"!cropperImageLoaded[f.$newFile.id] && cropSourceImages[f.$newFile.id]\" [diameter]=\"75\"></mat-spinner>\r\n\r\n          <image-cropper *ngIf=\"cropSourceImages[f.$newFile.id]\"\r\n                         [imageFile]=\"cropSourceImages[f.$newFile.id]\"\r\n                         [maintainAspectRatio]=\"true\"\r\n                         [containWithinAspectRatio]=\"false\"\r\n                         [aspectRatio]=\"aspectRatio\"\r\n                         [resizeToWidth]=\"cropMaxWidth\"\r\n                         [onlyScaleDown]=\"false\"\r\n                         [roundCropper]=\"cropRounded\"\r\n                         [canvasRotation]=\"canvasRotation[f.$newFile.id]\"\r\n                         [transform]=\"transform[f.$newFile.id]\"\r\n                         [alignImage]=\"'center'\"\r\n                         [style.display]=\"showCropper ? null : 'none'\"\r\n                         [format]=\"'png'\"\r\n                         (imageCropped)=\"onImageCropped($event, f.$newFile.id)\"\r\n                         (imageLoaded)=\"imageLoaded(f.$newFile.id)\"\r\n                         (cropperReady)=\"cropperReady($event, f.$newFile.id)\"\r\n                         (loadImageFailed)=\"loadImageFailed()\"\r\n          ></image-cropper>\r\n\r\n          <div class=\"crop-preview mat-elevation-z2\" [class]=\"previewPosition\" *ngIf=\"true || (showCropPreview[f.$newFile.id] && cropperImageLoaded[f.$newFile.id])\">\r\n            <div class=\"crop-menu\">\r\n              <mat-icon (click)=\"zoomCroppedImage(.1, f.$newFile.id)\">zoom_in</mat-icon>\r\n              <mat-icon (click)=\"zoomCroppedImage(- .1, f.$newFile.id)\">zoom_out</mat-icon>\r\n              <mat-icon (click)=\"rotateCroppedImage(-1, f.$newFile.id)\">rotate_left</mat-icon>\r\n              <mat-icon (click)=\"rotateCroppedImage(1, f.$newFile.id)\">rotate_right</mat-icon>\r\n              <div style=\"flex: 1 1 100%\"></div>\r\n              <label class=\"menu-item\">\r\n                <mat-icon>upload_file</mat-icon>\r\n                <input style=\"display: none;\" type=\"file\" ngFileSelect [options]=\"uploadOptions\" (change)=\"fileChangeEvent($event, f)\"\r\n                       (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\">\r\n              </label>\r\n              <mat-icon (click)=\"remove(f)\">delete_outline</mat-icon>\r\n              <div style=\"flex: 1 1 100%\"></div>\r\n              <mat-icon (click)=\"cropperDone(f.$newFile.id)\">done</mat-icon>\r\n            </div>\r\n            <img *ngIf=\"croppedImages[f.$newFile.id]\" [src]=\"croppedImages[f.$newFile.id].objectUrl\" [ngClass]=\"{rounded: cropRounded}\"/>\r\n          </div>\r\n\r\n        </div>\r\n\r\n\r\n\r\n      </div>\r\n\r\n      <ng-container *ngIf=\"!crop || cropDone(f)\">\r\n        <ng-container *ngIf=\"fileTemplate\">\r\n          <ng-template [ngTemplateOutlet]=\"fileTemplate\" [ngTemplateOutletContext]=\"{file: f, fileInput: fileInput2}\"></ng-template>\r\n          <ng-template #fileInput2>\r\n            <input style=\"display: none;\" type=\"file\" ngFileSelect [options]=\"uploadOptions\" (change)=\"fileChangeEvent($event, f)\"\r\n                   (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\">\r\n          </ng-template>\r\n        </ng-container>\r\n\r\n        <ui-file *ngIf=\"!fileTemplate\" [fileSize]=\"fileSize\" [srcData]=\"f.$newFile ? f.$newFile: f.custom\" [ngClass]=\"{rounded: crop && cropRounded}\">\r\n        </ui-file>\r\n\r\n        <ng-container *ngIf=\"f.$newFile\">\r\n          <div *ngIf=\"f.$newFile.responseStatus && f.$newFile.responseStatus !== 200\" class=\"progress-container error\">\r\n            {{ translateService.instant('ui.controls.ui-file-uploader.uploadError', f.$newFile.response) }}\r\n          </div>\r\n          <div *ngIf=\"!f.$newFile.responseStatus && f.$newFile.progress.status === 1\" class=\"progress-container\">\r\n            <div class=\"progress\" [ngStyle]=\"{width: f.$newFile.progress.data.percentage + '%'}\"></div>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  <div class=\"file-container add\" ngFileDrop  [options]=\"uploadOptions\" (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\" [ngClass]=\"{visible: files.length < maxFiles || maxFiles === 0}\" [ngStyle]=\"addFileTemplate ? {} : ngAddStyle\">\r\n    <label>\r\n      <ng-container *ngIf=\"addFileTemplate\">\r\n        <ng-template [ngTemplateOutlet]=\"addFileTemplate\"></ng-template>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!addFileTemplate\">\r\n        <div class=\"upload-image-container\"></div>\r\n        <img [src]=\"addFileImgSrc\" [ngClass]=\"{'with-hint': addHint}\" />\r\n        <div *ngIf=\"addHint\" class=\"add-hint\">{{addHint}}</div>\r\n      </ng-container>\r\n      <input style=\"display: none;\" type=\"file\" ngFileSelect [options]=\"uploadOptions\" (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\" [multiple]=\"maxFiles === 0 && multiple\">\r\n    </label>\r\n  </div>\r\n\r\n</div>\r\n", styles: [":host{display:flex;flex-wrap:wrap}:host .label .text{font-size:.9em;line-height:1em;padding:6px 0 4px}:host .files-container{display:flex;flex-wrap:wrap;border-style:solid}:host .files-container .existing-files{display:flex;flex-wrap:wrap}:host .files-container.dragging .add label{border:2px dashed grey;background-color:#0000001a}:host .files-container.disabled .add{opacity:.5;pointer-events:none}:host .file-container{max-width:100%;max-height:100%;position:relative;display:flex;align-items:center;justify-content:center}:host .file-container .progress-container{position:absolute;bottom:0;left:1px;right:1px;height:20%;max-height:20px;background-color:#0000001a}:host .file-container .progress-container.error{background-color:red;color:#fff;display:flex;align-items:center;justify-content:center}:host .file-container .progress-container .progress{background-color:#0000004d;height:100%}:host .file-container.add{display:flex;align-items:center;flex-direction:column;transition:opacity .25s;cursor:pointer}:host .file-container.add:not(.visible){display:none}:host .file-container.add img{max-width:100%;max-height:100%}:host .file-container.add img.with-hint{max-height:75%}:host .file-container.add .add-hint{margin-top:8px;font-size:80%;text-align:center}:host .file-container.add label{position:absolute;inset:0;cursor:pointer;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center}:host .file-container.add .upload-image-container{display:none}:host .file-container .file-menu-container{display:none;position:absolute;left:calc(100% - 45px);top:27px;z-index:1000}:host .file-container .file-menu-container ::ng-deep .menu-item{position:relative;padding:12px 24px;cursor:pointer;display:block}:host .file-container .file-menu-container.visible{display:block}:host .file-container .file-menu{display:flex;position:absolute;flex-direction:column;align-items:center;justify-content:center;padding:12px;right:10px;top:10px;background-color:#fff9;border-radius:50%;cursor:pointer;transition:all .25s;z-index:999}:host .file-container:hover .file-menu{background-color:#fff;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}:host .file-container mat-progress-bar{position:absolute;bottom:0;height:6px;left:0;right:0;z-index:1000}:host image-cropper{padding:0}:host ui-file.rounded ::ng-deep img{border-radius:50%}:host .crop-container{display:flex;align-items:center;justify-content:center;position:relative}:host .crop-container mat-spinner{position:absolute;z-index:1}:host .crop-container .crop-preview{position:absolute;top:100%;left:0;right:0;padding:6px;border:1px solid transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000;max-width:350px;margin-right:auto;margin-left:auto}:host .crop-container .crop-preview.left{right:calc(100% + 6px);left:unset;top:0}:host .crop-container .crop-preview.above{bottom:100%;top:unset}:host .crop-container .crop-preview .crop-menu{width:100%;flex:0 0 auto;display:flex}:host .crop-container .crop-preview .crop-menu mat-icon{margin:0 3px;width:calc(1em + 6px);height:1em;font-size:2em;cursor:pointer;-webkit-user-select:none;user-select:none;flex:1 1 100%}:host .crop-container .crop-preview img{margin:16px 0;max-width:256px;max-height:256px}:host .crop-container .crop-preview img.rounded{border-radius:50%}\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: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i6.NgFileDropDirective, selector: "[ngFileDrop]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i6.NgFileSelectDirective, selector: "[ngFileSelect]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "component", type: i4$3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i8.ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "cropperFrameAriaLabel", "output", "format", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "autoCrop", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "cropper", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange"] }, { kind: "component", type: FileComponent, selector: "ui-file", inputs: ["fileSize", "srcOptions", "srcData", "srcUrl"] }] }); }
+            }], usesInheritance: true, ngImport: i0, template: "<div class=\"label\" *ngIf=\"label\">\r\n    <div class=\"text-container\"\r\n         [matTooltip]=\"required ? translateService.instant('ui.controls.validation.required') : undefined\"\r\n         [matTooltipPosition]=\"'above'\">\r\n        <div class=\"text\">{{ label }}</div>\r\n        <div *ngIf=\"required\" class=\"required\">*</div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"files-container\" [ngClass]=\"{dragging: dragging, disabled: uploading || !editable}\">\r\n\r\n    <div class=\"existing-files\">\r\n\r\n        <div class=\"file-container\" *ngFor=\"let f of files\">\r\n\r\n            @if (customContentTemplate) {\r\n                <ng-template [ngTemplateOutlet]=\"customContentTemplate\" [ngTemplateOutletContext]=\"{fileUploader: this, file: f}\"></ng-template>\r\n            }\r\n\r\n            <div class=\"file-menu\" (click)=\"toggleMenuVisibility(f)\" *ngIf=\"!customFileMenu && editable && !uploading\">\r\n                <mat-icon>menu</mat-icon>\r\n            </div>\r\n            <div class=\"file-menu-container mat-elevation-z2\" [ngClass]=\"{visible: f === fileMenuOpened}\"\r\n                 (click)=\"menuClick()\" (mouseleave)=\"menuClick()\">\r\n                <ng-container *ngIf=\"!menuTemplate\">\r\n                    <label class=\"menu-item\">{{ translateService.instant('ui.controls.ui-file-uploader.menu.change') }}\r\n                        <input *ngIf=\"!refreshAddInput\" style=\"display: none;\" type=\"file\" ngFileSelect\r\n                               [options]=\"uploadOptions\" (change)=\"fileChangeEvent($event, f)\"\r\n                               (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\">\r\n                    </label>\r\n                    <div class=\"menu-item\"\r\n                         (click)=\"remove(f)\">{{ translateService.instant('ui.controls.ui-file-uploader.menu.delete') }}\r\n                    </div>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"menuTemplate\">\r\n                    <ng-template [ngTemplateOutlet]=\"menuTemplate\"\r\n                                 [ngTemplateOutletContext]=\"{fileInput: fileInput}\"></ng-template>\r\n                    <ng-template #fileInput>\r\n                        <input style=\"display: none;\" type=\"file\" ngFileSelect [options]=\"uploadOptions\"\r\n                               (change)=\"fileChangeEvent($event, f)\"\r\n                               (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\">\r\n                    </ng-template>\r\n                </ng-container>\r\n            </div>\r\n\r\n            <div *ngIf=\"crop && !cropDone(f)\" (mouseenter)=\"startCropPreview(f.$newFile.id)\"\r\n                 (mouseleave)=\"stopCropPreview(f.$newFile.id)\">\r\n                <div class=\"crop-container\" [ngStyle]=\"ngAddStyle\">\r\n\r\n                    <ui-file *ngIf=\"false && files.length > 0 && !cropSourceImages\" [fileSize]=\"null\"\r\n                             [srcData]=\"files[0].custom\" [ngClass]=\"{rounded: cropRounded}\"></ui-file>\r\n\r\n                    <mat-spinner *ngIf=\"!cropperImageLoaded[f.$newFile.id] && cropSourceImages[f.$newFile.id]\"\r\n                                 [diameter]=\"75\"></mat-spinner>\r\n\r\n                    <image-cropper *ngIf=\"cropSourceImages[f.$newFile.id]\"\r\n                                   [imageFile]=\"cropSourceImages[f.$newFile.id]\"\r\n                                   [maintainAspectRatio]=\"true\"\r\n                                   [containWithinAspectRatio]=\"false\"\r\n                                   [aspectRatio]=\"aspectRatio\"\r\n                                   [resizeToWidth]=\"cropMaxWidth\"\r\n                                   [onlyScaleDown]=\"false\"\r\n                                   [roundCropper]=\"cropRounded\"\r\n                                   [canvasRotation]=\"canvasRotation[f.$newFile.id]\"\r\n                                   [transform]=\"transform[f.$newFile.id]\"\r\n                                   [alignImage]=\"'center'\"\r\n                                   [style.display]=\"showCropper ? null : 'none'\"\r\n                                   [format]=\"'png'\"\r\n                                   (imageCropped)=\"onImageCropped($event, f.$newFile.id)\"\r\n                                   (imageLoaded)=\"imageLoaded(f.$newFile.id)\"\r\n                                   (cropperReady)=\"cropperReady($event, f.$newFile.id)\"\r\n                                   (loadImageFailed)=\"loadImageFailed()\"\r\n                    ></image-cropper>\r\n\r\n                    <div class=\"crop-preview mat-elevation-z2\" [class]=\"previewPosition\"\r\n                         *ngIf=\"true || (showCropPreview[f.$newFile.id] && cropperImageLoaded[f.$newFile.id])\">\r\n                        <div class=\"crop-menu\">\r\n                            <mat-icon (click)=\"zoomCroppedImage(.1, f.$newFile.id)\">zoom_in</mat-icon>\r\n                            <mat-icon (click)=\"zoomCroppedImage(- .1, f.$newFile.id)\">zoom_out</mat-icon>\r\n                            <mat-icon (click)=\"rotateCroppedImage(-1, f.$newFile.id)\">rotate_left</mat-icon>\r\n                            <mat-icon (click)=\"rotateCroppedImage(1, f.$newFile.id)\">rotate_right</mat-icon>\r\n                            <div style=\"flex: 1 1 100%\"></div>\r\n                            <label class=\"menu-item\">\r\n                                <mat-icon>upload_file</mat-icon>\r\n                                <input style=\"display: none;\" type=\"file\" ngFileSelect [options]=\"uploadOptions\"\r\n                                       (change)=\"fileChangeEvent($event, f)\"\r\n                                       (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\">\r\n                            </label>\r\n                            <mat-icon (click)=\"remove(f)\">delete_outline</mat-icon>\r\n                            <div style=\"flex: 1 1 100%\"></div>\r\n                            <mat-icon (click)=\"cropperDone(f.$newFile.id)\">done</mat-icon>\r\n                        </div>\r\n                        <img *ngIf=\"croppedImages[f.$newFile.id]\" [src]=\"croppedImages[f.$newFile.id].objectUrl\"\r\n                             [ngClass]=\"{rounded: cropRounded}\"/>\r\n                    </div>\r\n\r\n                </div>\r\n\r\n\r\n            </div>\r\n\r\n            <ng-container *ngIf=\"!crop || cropDone(f)\">\r\n                <ng-container *ngIf=\"fileTemplate\">\r\n                    <ng-template [ngTemplateOutlet]=\"fileTemplate\"\r\n                                 [ngTemplateOutletContext]=\"{file: f, fileInput: fileInput2}\"></ng-template>\r\n                    <ng-template #fileInput2>\r\n                        <input style=\"display: none;\" type=\"file\" ngFileSelect [options]=\"uploadOptions\"\r\n                               (change)=\"fileChangeEvent($event, f)\"\r\n                               (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\">\r\n                    </ng-template>\r\n                </ng-container>\r\n\r\n                <ui-file *ngIf=\"!fileTemplate\" [fileSize]=\"_fileSize\" [srcData]=\"f.$newFile ? f.$newFile: f.custom\"\r\n                         [ngClass]=\"{rounded: crop && cropRounded}\">\r\n                </ui-file>\r\n\r\n                <ng-container *ngIf=\"f.$newFile\">\r\n                    <div *ngIf=\"f.$newFile.responseStatus && f.$newFile.responseStatus !== 200\"\r\n                         class=\"progress-container error\">\r\n                        {{ translateService.instant('ui.controls.ui-file-uploader.uploadError', f.$newFile.response) }}\r\n                    </div>\r\n                    <div *ngIf=\"!f.$newFile.responseStatus && f.$newFile.progress.status === 1\"\r\n                         class=\"progress-container\">\r\n                        <div class=\"progress\" [ngStyle]=\"{width: f.$newFile.progress.data.percentage + '%'}\"></div>\r\n                    </div>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n\r\n    </div>\r\n\r\n    <div class=\"file-container add\" ngFileDrop [options]=\"uploadOptions\" (uploadOutput)=\"onUploadOutput($event)\"\r\n         [uploadInput]=\"uploadInput\" [ngClass]=\"{visible: files.length < maxFiles || maxFiles === 0}\"\r\n         [ngStyle]=\"addFileTemplate ? {} : ngAddStyle\">\r\n        <label>\r\n            @if (addFileTemplate) {\r\n                <ng-template [ngTemplateOutlet]=\"addFileTemplate\"></ng-template>\r\n            } @else {\r\n                <div class=\"upload-image-container\"></div>\r\n                <img [src]=\"uploadImgSrc()\" [ngClass]=\"{'with-hint': addHint}\"/>\r\n                <div *ngIf=\"addHint\" class=\"add-hint\">{{ addHint }}</div>\r\n            }\r\n            <input style=\"display: none;\" type=\"file\" ngFileSelect [options]=\"uploadOptions\"\r\n                   (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\"\r\n                   [multiple]=\"maxFiles === 0 && multiple\">\r\n        </label>\r\n    </div>\r\n\r\n</div>\r\n", styles: [":host{display:flex;flex-wrap:wrap}:host .label .text{font-size:.9em;line-height:1em;padding:6px 0 4px}:host .files-container{display:flex;flex-wrap:wrap;border-style:solid}:host .files-container .existing-files{display:flex;flex-wrap:wrap}:host .files-container.dragging .add label{border:2px dashed grey;background-color:#0000001a}:host .files-container.disabled .add{opacity:.5;pointer-events:none}:host .file-container{max-width:100%;max-height:100%;position:relative;display:flex;align-items:center;justify-content:center}:host .file-container .progress-container{position:absolute;bottom:0;left:1px;right:1px;height:20%;max-height:20px;background-color:#0000001a}:host .file-container .progress-container.error{background-color:red;color:#fff;display:flex;align-items:center;justify-content:center}:host .file-container .progress-container .progress{background-color:#0000004d;height:100%}:host .file-container.add{display:flex;align-items:center;flex-direction:column;transition:opacity .25s;cursor:pointer}:host .file-container.add:not(.visible){display:none}:host .file-container.add img{max-width:100%;max-height:100%}:host .file-container.add img.with-hint{max-height:75%}:host .file-container.add .add-hint{margin-top:8px;font-size:80%;text-align:center}:host .file-container.add label{cursor:pointer;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center}:host .file-container.add .upload-image-container{display:none}:host .file-container .file-menu-container{display:none;position:absolute;left:calc(100% - 45px);top:27px;z-index:1000}:host .file-container .file-menu-container ::ng-deep .menu-item{position:relative;padding:12px 24px;cursor:pointer;display:block}:host .file-container .file-menu-container.visible{display:block}:host .file-container .file-menu{display:flex;position:absolute;flex-direction:column;align-items:center;justify-content:center;padding:12px;right:10px;top:10px;background-color:#fff9;border-radius:50%;cursor:pointer;transition:all .25s;z-index:999}:host .file-container:hover .file-menu{background-color:#fff;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}:host .file-container mat-progress-bar{position:absolute;bottom:0;height:6px;left:0;right:0;z-index:1000}:host image-cropper{padding:0;--cropper-outline-color: rgba(255, 255, 255, .8)}:host ui-file.rounded ::ng-deep img{border-radius:50%}:host .crop-container{display:flex;align-items:center;justify-content:center;position:relative}:host .crop-container mat-spinner{position:absolute;z-index:1}:host .crop-container .crop-preview{position:absolute;top:100%;left:0;right:0;padding:6px;border:1px solid transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000;max-width:350px;margin-right:auto;margin-left:auto}:host .crop-container .crop-preview.left{right:calc(100% + 6px);left:unset;top:0}:host .crop-container .crop-preview.above{bottom:100%;top:unset}:host .crop-container .crop-preview .crop-menu{width:100%;flex:0 0 auto;display:flex}:host .crop-container .crop-preview .crop-menu mat-icon{margin:0 3px;width:calc(1em + 6px);height:1em;font-size:2em;cursor:pointer;-webkit-user-select:none;user-select:none;flex:1 1 100%}:host .crop-container .crop-preview img{margin:16px 0;max-width:256px;max-height:256px}:host .crop-container .crop-preview img.rounded{border-radius:50%}\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: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i6.NgFileDropDirective, selector: "[ngFileDrop]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i6.NgFileSelectDirective, selector: "[ngFileSelect]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "component", type: i4$3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i8.ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "cropperFrameAriaLabel", "output", "format", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "autoCrop", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "cropper", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange"] }, { kind: "component", type: FileComponent, selector: "ui-file", inputs: ["fileSize", "srcOptions", "srcData", "srcUrl"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: UiFileUploaderComponent, decorators: [{
             type: Component,
@@ -1399,7 +1445,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                             provide: NG_VALUE_ACCESSOR,
                             multi: true,
                             useExisting: UiFileUploaderComponent,
-                        }], template: "<div class=\"label\" *ngIf=\"label\">\r\n  <div class=\"text-container\" [matTooltip]=\"required ? translateService.instant('ui.controls.validation.required') : undefined\" [matTooltipPosition]=\"'above'\">\r\n    <div class=\"text\">{{label}}</div>\r\n    <div *ngIf=\"required\" class=\"required\">*</div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"files-container\" [ngClass]=\"{dragging: dragging, disabled: uploading || !editable}\">\r\n\r\n  <div class=\"existing-files\">\r\n\r\n    <div class=\"file-container\" *ngFor=\"let f of files\">\r\n\r\n      <div class=\"file-menu\" (click)=\"toggleMenuVisibility(f)\" *ngIf=\"!customFileMenu && editable && !uploading\">\r\n        <mat-icon>menu</mat-icon>\r\n      </div>\r\n      <div class=\"file-menu-container mat-elevation-z2\" [ngClass]=\"{visible: f === fileMenuOpened}\" (click)=\"menuClick()\" (mouseleave)=\"menuClick()\">\r\n        <ng-container *ngIf=\"!menuTemplate\">\r\n          <label class=\"menu-item\">{{ translateService.instant('ui.controls.ui-file-uploader.menu.change') }}\r\n            <input *ngIf=\"!refreshAddInput\" style=\"display: none;\" type=\"file\" ngFileSelect [options]=\"uploadOptions\" (change)=\"fileChangeEvent($event, f)\"\r\n                   (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\">\r\n          </label>\r\n          <div class=\"menu-item\" (click)=\"remove(f)\">{{ translateService.instant('ui.controls.ui-file-uploader.menu.delete') }}</div>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"menuTemplate\">\r\n          <ng-template [ngTemplateOutlet]=\"menuTemplate\" [ngTemplateOutletContext]=\"{fileInput: fileInput}\"></ng-template>\r\n          <ng-template #fileInput>\r\n          <input style=\"display: none;\" type=\"file\" ngFileSelect [options]=\"uploadOptions\" (change)=\"fileChangeEvent($event, f)\"\r\n                 (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\">\r\n          </ng-template>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <div *ngIf=\"crop && !cropDone(f)\" (mouseenter)=\"startCropPreview(f.$newFile.id)\" (mouseleave)=\"stopCropPreview(f.$newFile.id)\">\r\n        <div class=\"crop-container\" [ngStyle]=\"ngAddStyle\">\r\n\r\n          <ui-file *ngIf=\"false && files.length > 0 && !cropSourceImages\" [fileSize]=\"fileSize\" [srcData]=\"files[0].custom\" [ngClass]=\"{rounded: cropRounded}\"></ui-file>\r\n\r\n          <mat-spinner *ngIf=\"!cropperImageLoaded[f.$newFile.id] && cropSourceImages[f.$newFile.id]\" [diameter]=\"75\"></mat-spinner>\r\n\r\n          <image-cropper *ngIf=\"cropSourceImages[f.$newFile.id]\"\r\n                         [imageFile]=\"cropSourceImages[f.$newFile.id]\"\r\n                         [maintainAspectRatio]=\"true\"\r\n                         [containWithinAspectRatio]=\"false\"\r\n                         [aspectRatio]=\"aspectRatio\"\r\n                         [resizeToWidth]=\"cropMaxWidth\"\r\n                         [onlyScaleDown]=\"false\"\r\n                         [roundCropper]=\"cropRounded\"\r\n                         [canvasRotation]=\"canvasRotation[f.$newFile.id]\"\r\n                         [transform]=\"transform[f.$newFile.id]\"\r\n                         [alignImage]=\"'center'\"\r\n                         [style.display]=\"showCropper ? null : 'none'\"\r\n                         [format]=\"'png'\"\r\n                         (imageCropped)=\"onImageCropped($event, f.$newFile.id)\"\r\n                         (imageLoaded)=\"imageLoaded(f.$newFile.id)\"\r\n                         (cropperReady)=\"cropperReady($event, f.$newFile.id)\"\r\n                         (loadImageFailed)=\"loadImageFailed()\"\r\n          ></image-cropper>\r\n\r\n          <div class=\"crop-preview mat-elevation-z2\" [class]=\"previewPosition\" *ngIf=\"true || (showCropPreview[f.$newFile.id] && cropperImageLoaded[f.$newFile.id])\">\r\n            <div class=\"crop-menu\">\r\n              <mat-icon (click)=\"zoomCroppedImage(.1, f.$newFile.id)\">zoom_in</mat-icon>\r\n              <mat-icon (click)=\"zoomCroppedImage(- .1, f.$newFile.id)\">zoom_out</mat-icon>\r\n              <mat-icon (click)=\"rotateCroppedImage(-1, f.$newFile.id)\">rotate_left</mat-icon>\r\n              <mat-icon (click)=\"rotateCroppedImage(1, f.$newFile.id)\">rotate_right</mat-icon>\r\n              <div style=\"flex: 1 1 100%\"></div>\r\n              <label class=\"menu-item\">\r\n                <mat-icon>upload_file</mat-icon>\r\n                <input style=\"display: none;\" type=\"file\" ngFileSelect [options]=\"uploadOptions\" (change)=\"fileChangeEvent($event, f)\"\r\n                       (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\">\r\n              </label>\r\n              <mat-icon (click)=\"remove(f)\">delete_outline</mat-icon>\r\n              <div style=\"flex: 1 1 100%\"></div>\r\n              <mat-icon (click)=\"cropperDone(f.$newFile.id)\">done</mat-icon>\r\n            </div>\r\n            <img *ngIf=\"croppedImages[f.$newFile.id]\" [src]=\"croppedImages[f.$newFile.id].objectUrl\" [ngClass]=\"{rounded: cropRounded}\"/>\r\n          </div>\r\n\r\n        </div>\r\n\r\n\r\n\r\n      </div>\r\n\r\n      <ng-container *ngIf=\"!crop || cropDone(f)\">\r\n        <ng-container *ngIf=\"fileTemplate\">\r\n          <ng-template [ngTemplateOutlet]=\"fileTemplate\" [ngTemplateOutletContext]=\"{file: f, fileInput: fileInput2}\"></ng-template>\r\n          <ng-template #fileInput2>\r\n            <input style=\"display: none;\" type=\"file\" ngFileSelect [options]=\"uploadOptions\" (change)=\"fileChangeEvent($event, f)\"\r\n                   (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\">\r\n          </ng-template>\r\n        </ng-container>\r\n\r\n        <ui-file *ngIf=\"!fileTemplate\" [fileSize]=\"fileSize\" [srcData]=\"f.$newFile ? f.$newFile: f.custom\" [ngClass]=\"{rounded: crop && cropRounded}\">\r\n        </ui-file>\r\n\r\n        <ng-container *ngIf=\"f.$newFile\">\r\n          <div *ngIf=\"f.$newFile.responseStatus && f.$newFile.responseStatus !== 200\" class=\"progress-container error\">\r\n            {{ translateService.instant('ui.controls.ui-file-uploader.uploadError', f.$newFile.response) }}\r\n          </div>\r\n          <div *ngIf=\"!f.$newFile.responseStatus && f.$newFile.progress.status === 1\" class=\"progress-container\">\r\n            <div class=\"progress\" [ngStyle]=\"{width: f.$newFile.progress.data.percentage + '%'}\"></div>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  <div class=\"file-container add\" ngFileDrop  [options]=\"uploadOptions\" (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\" [ngClass]=\"{visible: files.length < maxFiles || maxFiles === 0}\" [ngStyle]=\"addFileTemplate ? {} : ngAddStyle\">\r\n    <label>\r\n      <ng-container *ngIf=\"addFileTemplate\">\r\n        <ng-template [ngTemplateOutlet]=\"addFileTemplate\"></ng-template>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!addFileTemplate\">\r\n        <div class=\"upload-image-container\"></div>\r\n        <img [src]=\"addFileImgSrc\" [ngClass]=\"{'with-hint': addHint}\" />\r\n        <div *ngIf=\"addHint\" class=\"add-hint\">{{addHint}}</div>\r\n      </ng-container>\r\n      <input style=\"display: none;\" type=\"file\" ngFileSelect [options]=\"uploadOptions\" (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\" [multiple]=\"maxFiles === 0 && multiple\">\r\n    </label>\r\n  </div>\r\n\r\n</div>\r\n", styles: [":host{display:flex;flex-wrap:wrap}:host .label .text{font-size:.9em;line-height:1em;padding:6px 0 4px}:host .files-container{display:flex;flex-wrap:wrap;border-style:solid}:host .files-container .existing-files{display:flex;flex-wrap:wrap}:host .files-container.dragging .add label{border:2px dashed grey;background-color:#0000001a}:host .files-container.disabled .add{opacity:.5;pointer-events:none}:host .file-container{max-width:100%;max-height:100%;position:relative;display:flex;align-items:center;justify-content:center}:host .file-container .progress-container{position:absolute;bottom:0;left:1px;right:1px;height:20%;max-height:20px;background-color:#0000001a}:host .file-container .progress-container.error{background-color:red;color:#fff;display:flex;align-items:center;justify-content:center}:host .file-container .progress-container .progress{background-color:#0000004d;height:100%}:host .file-container.add{display:flex;align-items:center;flex-direction:column;transition:opacity .25s;cursor:pointer}:host .file-container.add:not(.visible){display:none}:host .file-container.add img{max-width:100%;max-height:100%}:host .file-container.add img.with-hint{max-height:75%}:host .file-container.add .add-hint{margin-top:8px;font-size:80%;text-align:center}:host .file-container.add label{position:absolute;inset:0;cursor:pointer;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center}:host .file-container.add .upload-image-container{display:none}:host .file-container .file-menu-container{display:none;position:absolute;left:calc(100% - 45px);top:27px;z-index:1000}:host .file-container .file-menu-container ::ng-deep .menu-item{position:relative;padding:12px 24px;cursor:pointer;display:block}:host .file-container .file-menu-container.visible{display:block}:host .file-container .file-menu{display:flex;position:absolute;flex-direction:column;align-items:center;justify-content:center;padding:12px;right:10px;top:10px;background-color:#fff9;border-radius:50%;cursor:pointer;transition:all .25s;z-index:999}:host .file-container:hover .file-menu{background-color:#fff;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}:host .file-container mat-progress-bar{position:absolute;bottom:0;height:6px;left:0;right:0;z-index:1000}:host image-cropper{padding:0}:host ui-file.rounded ::ng-deep img{border-radius:50%}:host .crop-container{display:flex;align-items:center;justify-content:center;position:relative}:host .crop-container mat-spinner{position:absolute;z-index:1}:host .crop-container .crop-preview{position:absolute;top:100%;left:0;right:0;padding:6px;border:1px solid transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000;max-width:350px;margin-right:auto;margin-left:auto}:host .crop-container .crop-preview.left{right:calc(100% + 6px);left:unset;top:0}:host .crop-container .crop-preview.above{bottom:100%;top:unset}:host .crop-container .crop-preview .crop-menu{width:100%;flex:0 0 auto;display:flex}:host .crop-container .crop-preview .crop-menu mat-icon{margin:0 3px;width:calc(1em + 6px);height:1em;font-size:2em;cursor:pointer;-webkit-user-select:none;user-select:none;flex:1 1 100%}:host .crop-container .crop-preview img{margin:16px 0;max-width:256px;max-height:256px}:host .crop-container .crop-preview img.rounded{border-radius:50%}\n"] }]
+                        }], template: "<div class=\"label\" *ngIf=\"label\">\r\n    <div class=\"text-container\"\r\n         [matTooltip]=\"required ? translateService.instant('ui.controls.validation.required') : undefined\"\r\n         [matTooltipPosition]=\"'above'\">\r\n        <div class=\"text\">{{ label }}</div>\r\n        <div *ngIf=\"required\" class=\"required\">*</div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"files-container\" [ngClass]=\"{dragging: dragging, disabled: uploading || !editable}\">\r\n\r\n    <div class=\"existing-files\">\r\n\r\n        <div class=\"file-container\" *ngFor=\"let f of files\">\r\n\r\n            @if (customContentTemplate) {\r\n                <ng-template [ngTemplateOutlet]=\"customContentTemplate\" [ngTemplateOutletContext]=\"{fileUploader: this, file: f}\"></ng-template>\r\n            }\r\n\r\n            <div class=\"file-menu\" (click)=\"toggleMenuVisibility(f)\" *ngIf=\"!customFileMenu && editable && !uploading\">\r\n                <mat-icon>menu</mat-icon>\r\n            </div>\r\n            <div class=\"file-menu-container mat-elevation-z2\" [ngClass]=\"{visible: f === fileMenuOpened}\"\r\n                 (click)=\"menuClick()\" (mouseleave)=\"menuClick()\">\r\n                <ng-container *ngIf=\"!menuTemplate\">\r\n                    <label class=\"menu-item\">{{ translateService.instant('ui.controls.ui-file-uploader.menu.change') }}\r\n                        <input *ngIf=\"!refreshAddInput\" style=\"display: none;\" type=\"file\" ngFileSelect\r\n                               [options]=\"uploadOptions\" (change)=\"fileChangeEvent($event, f)\"\r\n                               (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\">\r\n                    </label>\r\n                    <div class=\"menu-item\"\r\n                         (click)=\"remove(f)\">{{ translateService.instant('ui.controls.ui-file-uploader.menu.delete') }}\r\n                    </div>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"menuTemplate\">\r\n                    <ng-template [ngTemplateOutlet]=\"menuTemplate\"\r\n                                 [ngTemplateOutletContext]=\"{fileInput: fileInput}\"></ng-template>\r\n                    <ng-template #fileInput>\r\n                        <input style=\"display: none;\" type=\"file\" ngFileSelect [options]=\"uploadOptions\"\r\n                               (change)=\"fileChangeEvent($event, f)\"\r\n                               (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\">\r\n                    </ng-template>\r\n                </ng-container>\r\n            </div>\r\n\r\n            <div *ngIf=\"crop && !cropDone(f)\" (mouseenter)=\"startCropPreview(f.$newFile.id)\"\r\n                 (mouseleave)=\"stopCropPreview(f.$newFile.id)\">\r\n                <div class=\"crop-container\" [ngStyle]=\"ngAddStyle\">\r\n\r\n                    <ui-file *ngIf=\"false && files.length > 0 && !cropSourceImages\" [fileSize]=\"null\"\r\n                             [srcData]=\"files[0].custom\" [ngClass]=\"{rounded: cropRounded}\"></ui-file>\r\n\r\n                    <mat-spinner *ngIf=\"!cropperImageLoaded[f.$newFile.id] && cropSourceImages[f.$newFile.id]\"\r\n                                 [diameter]=\"75\"></mat-spinner>\r\n\r\n                    <image-cropper *ngIf=\"cropSourceImages[f.$newFile.id]\"\r\n                                   [imageFile]=\"cropSourceImages[f.$newFile.id]\"\r\n                                   [maintainAspectRatio]=\"true\"\r\n                                   [containWithinAspectRatio]=\"false\"\r\n                                   [aspectRatio]=\"aspectRatio\"\r\n                                   [resizeToWidth]=\"cropMaxWidth\"\r\n                                   [onlyScaleDown]=\"false\"\r\n                                   [roundCropper]=\"cropRounded\"\r\n                                   [canvasRotation]=\"canvasRotation[f.$newFile.id]\"\r\n                                   [transform]=\"transform[f.$newFile.id]\"\r\n                                   [alignImage]=\"'center'\"\r\n                                   [style.display]=\"showCropper ? null : 'none'\"\r\n                                   [format]=\"'png'\"\r\n                                   (imageCropped)=\"onImageCropped($event, f.$newFile.id)\"\r\n                                   (imageLoaded)=\"imageLoaded(f.$newFile.id)\"\r\n                                   (cropperReady)=\"cropperReady($event, f.$newFile.id)\"\r\n                                   (loadImageFailed)=\"loadImageFailed()\"\r\n                    ></image-cropper>\r\n\r\n                    <div class=\"crop-preview mat-elevation-z2\" [class]=\"previewPosition\"\r\n                         *ngIf=\"true || (showCropPreview[f.$newFile.id] && cropperImageLoaded[f.$newFile.id])\">\r\n                        <div class=\"crop-menu\">\r\n                            <mat-icon (click)=\"zoomCroppedImage(.1, f.$newFile.id)\">zoom_in</mat-icon>\r\n                            <mat-icon (click)=\"zoomCroppedImage(- .1, f.$newFile.id)\">zoom_out</mat-icon>\r\n                            <mat-icon (click)=\"rotateCroppedImage(-1, f.$newFile.id)\">rotate_left</mat-icon>\r\n                            <mat-icon (click)=\"rotateCroppedImage(1, f.$newFile.id)\">rotate_right</mat-icon>\r\n                            <div style=\"flex: 1 1 100%\"></div>\r\n                            <label class=\"menu-item\">\r\n                                <mat-icon>upload_file</mat-icon>\r\n                                <input style=\"display: none;\" type=\"file\" ngFileSelect [options]=\"uploadOptions\"\r\n                                       (change)=\"fileChangeEvent($event, f)\"\r\n                                       (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\">\r\n                            </label>\r\n                            <mat-icon (click)=\"remove(f)\">delete_outline</mat-icon>\r\n                            <div style=\"flex: 1 1 100%\"></div>\r\n                            <mat-icon (click)=\"cropperDone(f.$newFile.id)\">done</mat-icon>\r\n                        </div>\r\n                        <img *ngIf=\"croppedImages[f.$newFile.id]\" [src]=\"croppedImages[f.$newFile.id].objectUrl\"\r\n                             [ngClass]=\"{rounded: cropRounded}\"/>\r\n                    </div>\r\n\r\n                </div>\r\n\r\n\r\n            </div>\r\n\r\n            <ng-container *ngIf=\"!crop || cropDone(f)\">\r\n                <ng-container *ngIf=\"fileTemplate\">\r\n                    <ng-template [ngTemplateOutlet]=\"fileTemplate\"\r\n                                 [ngTemplateOutletContext]=\"{file: f, fileInput: fileInput2}\"></ng-template>\r\n                    <ng-template #fileInput2>\r\n                        <input style=\"display: none;\" type=\"file\" ngFileSelect [options]=\"uploadOptions\"\r\n                               (change)=\"fileChangeEvent($event, f)\"\r\n                               (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\">\r\n                    </ng-template>\r\n                </ng-container>\r\n\r\n                <ui-file *ngIf=\"!fileTemplate\" [fileSize]=\"_fileSize\" [srcData]=\"f.$newFile ? f.$newFile: f.custom\"\r\n                         [ngClass]=\"{rounded: crop && cropRounded}\">\r\n                </ui-file>\r\n\r\n                <ng-container *ngIf=\"f.$newFile\">\r\n                    <div *ngIf=\"f.$newFile.responseStatus && f.$newFile.responseStatus !== 200\"\r\n                         class=\"progress-container error\">\r\n                        {{ translateService.instant('ui.controls.ui-file-uploader.uploadError', f.$newFile.response) }}\r\n                    </div>\r\n                    <div *ngIf=\"!f.$newFile.responseStatus && f.$newFile.progress.status === 1\"\r\n                         class=\"progress-container\">\r\n                        <div class=\"progress\" [ngStyle]=\"{width: f.$newFile.progress.data.percentage + '%'}\"></div>\r\n                    </div>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n\r\n    </div>\r\n\r\n    <div class=\"file-container add\" ngFileDrop [options]=\"uploadOptions\" (uploadOutput)=\"onUploadOutput($event)\"\r\n         [uploadInput]=\"uploadInput\" [ngClass]=\"{visible: files.length < maxFiles || maxFiles === 0}\"\r\n         [ngStyle]=\"addFileTemplate ? {} : ngAddStyle\">\r\n        <label>\r\n            @if (addFileTemplate) {\r\n                <ng-template [ngTemplateOutlet]=\"addFileTemplate\"></ng-template>\r\n            } @else {\r\n                <div class=\"upload-image-container\"></div>\r\n                <img [src]=\"uploadImgSrc()\" [ngClass]=\"{'with-hint': addHint}\"/>\r\n                <div *ngIf=\"addHint\" class=\"add-hint\">{{ addHint }}</div>\r\n            }\r\n            <input style=\"display: none;\" type=\"file\" ngFileSelect [options]=\"uploadOptions\"\r\n                   (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\"\r\n                   [multiple]=\"maxFiles === 0 && multiple\">\r\n        </label>\r\n    </div>\r\n\r\n</div>\r\n", styles: [":host{display:flex;flex-wrap:wrap}:host .label .text{font-size:.9em;line-height:1em;padding:6px 0 4px}:host .files-container{display:flex;flex-wrap:wrap;border-style:solid}:host .files-container .existing-files{display:flex;flex-wrap:wrap}:host .files-container.dragging .add label{border:2px dashed grey;background-color:#0000001a}:host .files-container.disabled .add{opacity:.5;pointer-events:none}:host .file-container{max-width:100%;max-height:100%;position:relative;display:flex;align-items:center;justify-content:center}:host .file-container .progress-container{position:absolute;bottom:0;left:1px;right:1px;height:20%;max-height:20px;background-color:#0000001a}:host .file-container .progress-container.error{background-color:red;color:#fff;display:flex;align-items:center;justify-content:center}:host .file-container .progress-container .progress{background-color:#0000004d;height:100%}:host .file-container.add{display:flex;align-items:center;flex-direction:column;transition:opacity .25s;cursor:pointer}:host .file-container.add:not(.visible){display:none}:host .file-container.add img{max-width:100%;max-height:100%}:host .file-container.add img.with-hint{max-height:75%}:host .file-container.add .add-hint{margin-top:8px;font-size:80%;text-align:center}:host .file-container.add label{cursor:pointer;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center}:host .file-container.add .upload-image-container{display:none}:host .file-container .file-menu-container{display:none;position:absolute;left:calc(100% - 45px);top:27px;z-index:1000}:host .file-container .file-menu-container ::ng-deep .menu-item{position:relative;padding:12px 24px;cursor:pointer;display:block}:host .file-container .file-menu-container.visible{display:block}:host .file-container .file-menu{display:flex;position:absolute;flex-direction:column;align-items:center;justify-content:center;padding:12px;right:10px;top:10px;background-color:#fff9;border-radius:50%;cursor:pointer;transition:all .25s;z-index:999}:host .file-container:hover .file-menu{background-color:#fff;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}:host .file-container mat-progress-bar{position:absolute;bottom:0;height:6px;left:0;right:0;z-index:1000}:host image-cropper{padding:0;--cropper-outline-color: rgba(255, 255, 255, .8)}:host ui-file.rounded ::ng-deep img{border-radius:50%}:host .crop-container{display:flex;align-items:center;justify-content:center;position:relative}:host .crop-container mat-spinner{position:absolute;z-index:1}:host .crop-container .crop-preview{position:absolute;top:100%;left:0;right:0;padding:6px;border:1px solid transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000;max-width:350px;margin-right:auto;margin-left:auto}:host .crop-container .crop-preview.left{right:calc(100% + 6px);left:unset;top:0}:host .crop-container .crop-preview.above{bottom:100%;top:unset}:host .crop-container .crop-preview .crop-menu{width:100%;flex:0 0 auto;display:flex}:host .crop-container .crop-preview .crop-menu mat-icon{margin:0 3px;width:calc(1em + 6px);height:1em;font-size:2em;cursor:pointer;-webkit-user-select:none;user-select:none;flex:1 1 100%}:host .crop-container .crop-preview img{margin:16px 0;max-width:256px;max-height:256px}:host .crop-container .crop-preview img.rounded{border-radius:50%}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -1414,7 +1460,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                     type: Host
                 }, {
                     type: SkipSelf
-                }] }, { type: UiFileService }], propDecorators: { maxFiles: [{
+                }] }, { type: UiFileService }], propDecorators: { fileSize: [{
+                type: Input,
+                args: [{ required: true }]
+            }], maxFiles: [{
                 type: Input
             }], multiple: [{
                 type: Input
@@ -1424,8 +1473,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                 type: Input
             }], cropMaxWidth: [{
                 type: Input
-            }], fileSize: [{
-                type: Input
             }], customFileMenu: [{
                 type: Input
             }], addHint: [{