@libs-ui/components-inputs-upload 0.2.306 → 0.2.307-0

package/fesm2022/libs-ui-components-inputs-upload.mjs

@@ -26,13 +26,13 @@ class LibsUiPipesInputsUploadCalcDurationVideoPipe {
         duration = Math.round(duration);
         if (duration >= 3600) {
             const hour = Math.floor(duration / 3600);
-            const minute = Math.floor((duration - (hour * 3600)) / 60);
+            const minute = Math.floor((duration - hour * 3600) / 60);
             const second = duration - (hour * 3600 + minute * 60);
             return `${hour}:${minute < 10 ? `0${minute}` : minute}:${second < 10 ? `0${second}` : second}`;
         }
         if (duration >= 60) {
             const minute = Math.floor(duration / 60);
-            const second = duration - (minute * 60);
+            const second = duration - minute * 60;
             return `${minute}:${second < 10 ? `0${second}` : second}`;
         }
         return `0:${duration}`;
@@ -44,7 +44,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: Pipe,
             args: [{
                     name: 'LibsUiPipesInputsUploadCalcDurationVideoPipe',
-                    standalone: true
+                    standalone: true,
                 }]
         }] });
 
@@ -78,7 +78,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: Pipe,
             args: [{
                     name: 'LibsUiPipesInputsUploadCheckFileExtensionPipe',
-                    standalone: true
+                    standalone: true,
                 }]
         }] });
 
@@ -103,18 +103,11 @@ class LibsUiComponentsInputsUploadAvatarComponent {
         this.outOpenPreview.emit(this.item());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsInputsUploadAvatarComponent, deps: [{ token: LINK_IMAGE_ERROR_TOKEN_INJECT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsInputsUploadAvatarComponent, isStandalone: true, selector: "libs_ui-components-inputs-upload-avatar", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, showVideoDuration: { classPropertyName: "showVideoDuration", publicName: "showVideoDuration", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { item: "itemChange", outOpenPreview: "outOpenPreview" }, ngImport: i0, template: "<div class=\"flex mr-[12px] bg-[#ffffff] rounded-[4px]\"\n  [class.libs-ui-disable]=\"disable() || item().isUploading || item().error\">\n  @if (item() | LibsUiPipesInputsUploadCheckFileExtensionPipe:'image') {\n    <div [style.width.px]=\"size() || 32\"\n      [style.height.px]=\"size() || 32\"\n      class=\"relative\">\n      @if (item().url || item().origin_url; as url) {\n        <img [src]=\"url\"\n          [style.width.px]=\"size() || 32\"\n          [style.height.px]=\"size() || 32\"\n          class=\"rounded-[4px] cursor-pointer\"\n          alt\n          (error)=\"handlerImageError($event)\"\n          (click)=\"handlerImageClick($event)\" />\n      } @else {\n        <libs_ui-components-spinner [size]=\"'medium'\" />\n      }\n    </div>\n  }\n  @else if (item() | LibsUiPipesInputsUploadCheckFileExtensionPipe:'video') {\n    <div class=\"relative\"\n      [style.width.px]=\"size() || 32\"\n      [style.height.px]=\"size() || 32\">\n      @if (item().url || item().origin_url) {\n        <video #videoRef\n          [style.width.px]=\"size || 32\"\n          [style.height.px]=\"size || 32\"\n          class=\"rounded-[4px]\"\n          preload=\"metadata\"\n          [src]=\"(item().url || item().origin_url || '') | LibsUiPipesSecurityTrustPipe:'resourceUrl'\"></video>\n        <div class=\"absolute w-full h-full top-0 bg-[#001433] opacity-40 rounded-[4px]\">\n        </div>\n        <div class=\"absolute w-full h-full flex items-center justify-center top-0\">\n          <i class=\"text-[#ffffff] libs-ui-icon-play-solid before:!text-[10px]\"></i>\n        </div>\n        @if (showVideoDuration()) {\n          <div\n            class=\"flex text-[5px] absolute bottom-0 right-0 py-[2px] px-[4px] rounded-[4px] bg-[#000000] text-[#ffffff]\">\n            {{ videoRef.duration | LibsUiPipesInputsUploadCalcDurationVideoPipe }}\n          </div>\n        }\n      } @else {\n        <libs_ui-components-spinner [size]=\"'medium'\" />\n      }\n    </div>\n  }\n  @else if (item() | LibsUiPipesInputsUploadCheckFileExtensionPipe:'pdf') {\n    <ng-container *ngComponentOutlet=\"'pdf'|LibsUiIconsGetIconComponentPipe|async\" />\n  }\n  @else if (item() | LibsUiPipesInputsUploadCheckFileExtensionPipe:'word') {\n    <ng-container *ngComponentOutlet=\"'word'|LibsUiIconsGetIconComponentPipe|async\" />\n  }\n  @else if (item() | LibsUiPipesInputsUploadCheckFileExtensionPipe:'pptx') {\n    <ng-container *ngComponentOutlet=\"'pptx'|LibsUiIconsGetIconComponentPipe|async\" />\n  }\n  @else if (item() | LibsUiPipesInputsUploadCheckFileExtensionPipe:'xlsx') {\n    <ng-container *ngComponentOutlet=\"'xlsx'|LibsUiIconsGetIconComponentPipe|async\" />\n  }\n  @else {\n    <div [style.width.px]=\"size() || 32\"\n      [style.height.px]=\"size() || 32\"\n      class=\"flex items-center justify-center\">\n      <i class=\"libs-ui-icon-file before:!text-[19px]\"\n        [class.text-[#6a7383]]=\"!item().isUploading && !item().error\"\n        [class.text-[#071631]]=\"disable() || item().isUploading || item().error\"></i>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: LibsUiComponentsSpinnerComponent, selector: "libs_ui-components-spinner", inputs: ["type", "size"] }, { kind: "pipe", type: LibsUiPipesSecurityTrustPipe, name: "LibsUiPipesSecurityTrustPipe" }, { kind: "pipe", type: LibsUiPipesInputsUploadCalcDurationVideoPipe, name: "LibsUiPipesInputsUploadCalcDurationVideoPipe" }, { kind: "pipe", type: LibsUiPipesInputsUploadCheckFileExtensionPipe, name: "LibsUiPipesInputsUploadCheckFileExtensionPipe" }, { kind: "pipe", type: LibsUiIconsGetIconComponentPipe, name: "LibsUiIconsGetIconComponentPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsInputsUploadAvatarComponent, isStandalone: true, selector: "libs_ui-components-inputs-upload-avatar", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, showVideoDuration: { classPropertyName: "showVideoDuration", publicName: "showVideoDuration", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { item: "itemChange", outOpenPreview: "outOpenPreview" }, ngImport: i0, template: "<div\n  class=\"flex mr-[12px] bg-[#ffffff] rounded-[4px]\"\n  [class.libs-ui-disable]=\"disable() || item().isUploading || item().error\">\n  @if (item() | LibsUiPipesInputsUploadCheckFileExtensionPipe: 'image') {\n    <div\n      [style.width.px]=\"size() || 32\"\n      [style.height.px]=\"size() || 32\"\n      class=\"relative\">\n      @if (item().url || item().origin_url; as url) {\n        <img\n          [src]=\"url\"\n          [style.width.px]=\"size() || 32\"\n          [style.height.px]=\"size() || 32\"\n          class=\"rounded-[4px] cursor-pointer\"\n          alt\n          (error)=\"handlerImageError($event)\"\n          (click)=\"handlerImageClick($event)\" />\n      } @else {\n        <libs_ui-components-spinner [size]=\"'medium'\" />\n      }\n    </div>\n  } @else if (item() | LibsUiPipesInputsUploadCheckFileExtensionPipe: 'video') {\n    <div\n      class=\"relative\"\n      [style.width.px]=\"size() || 32\"\n      [style.height.px]=\"size() || 32\">\n      @if (item().url || item().origin_url) {\n        <video\n          #videoRef\n          [style.width.px]=\"size || 32\"\n          [style.height.px]=\"size || 32\"\n          class=\"rounded-[4px]\"\n          preload=\"metadata\"\n          [src]=\"item().url || item().origin_url || '' | LibsUiPipesSecurityTrustPipe: 'resourceUrl'\"></video>\n        <div class=\"absolute w-full h-full top-0 bg-[#001433] opacity-40 rounded-[4px]\"></div>\n        <div class=\"absolute w-full h-full flex items-center justify-center top-0\">\n          <i class=\"text-[#ffffff] libs-ui-icon-play-solid before:!text-[10px]\"></i>\n        </div>\n        @if (showVideoDuration()) {\n          <div class=\"flex text-[5px] absolute bottom-0 right-0 py-[2px] px-[4px] rounded-[4px] bg-[#000000] text-[#ffffff]\">\n            {{ videoRef.duration | LibsUiPipesInputsUploadCalcDurationVideoPipe }}\n          </div>\n        }\n      } @else {\n        <libs_ui-components-spinner [size]=\"'medium'\" />\n      }\n    </div>\n  } @else if (item() | LibsUiPipesInputsUploadCheckFileExtensionPipe: 'pdf') {\n    <ng-container *ngComponentOutlet=\"'pdf' | LibsUiIconsGetIconComponentPipe | async\" />\n  } @else if (item() | LibsUiPipesInputsUploadCheckFileExtensionPipe: 'word') {\n    <ng-container *ngComponentOutlet=\"'word' | LibsUiIconsGetIconComponentPipe | async\" />\n  } @else if (item() | LibsUiPipesInputsUploadCheckFileExtensionPipe: 'pptx') {\n    <ng-container *ngComponentOutlet=\"'pptx' | LibsUiIconsGetIconComponentPipe | async\" />\n  } @else if (item() | LibsUiPipesInputsUploadCheckFileExtensionPipe: 'xlsx') {\n    <ng-container *ngComponentOutlet=\"'xlsx' | LibsUiIconsGetIconComponentPipe | async\" />\n  } @else {\n    <div\n      [style.width.px]=\"size() || 32\"\n      [style.height.px]=\"size() || 32\"\n      class=\"flex items-center justify-center\">\n      <i\n        class=\"libs-ui-icon-file before:!text-[19px]\"\n        [class.text-[#6a7383]]=\"!item().isUploading && !item().error\"\n        [class.text-[#071631]]=\"disable() || item().isUploading || item().error\"></i>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: LibsUiComponentsSpinnerComponent, selector: "libs_ui-components-spinner", inputs: ["type", "size"] }, { kind: "pipe", type: LibsUiPipesSecurityTrustPipe, name: "LibsUiPipesSecurityTrustPipe" }, { kind: "pipe", type: LibsUiPipesInputsUploadCalcDurationVideoPipe, name: "LibsUiPipesInputsUploadCalcDurationVideoPipe" }, { kind: "pipe", type: LibsUiPipesInputsUploadCheckFileExtensionPipe, name: "LibsUiPipesInputsUploadCheckFileExtensionPipe" }, { kind: "pipe", type: LibsUiIconsGetIconComponentPipe, name: "LibsUiIconsGetIconComponentPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsInputsUploadAvatarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'libs_ui-components-inputs-upload-avatar', standalone: true, imports: [
-                        NgComponentOutlet, AsyncPipe, TranslateModule,
-                        LibsUiComponentsSpinnerComponent,
-                        LibsUiPipesSecurityTrustPipe,
-                        LibsUiPipesInputsUploadCalcDurationVideoPipe,
-                        LibsUiPipesInputsUploadCheckFileExtensionPipe,
-                        LibsUiIconsGetIconComponentPipe,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex mr-[12px] bg-[#ffffff] rounded-[4px]\"\n  [class.libs-ui-disable]=\"disable() || item().isUploading || item().error\">\n  @if (item() | LibsUiPipesInputsUploadCheckFileExtensionPipe:'image') {\n    <div [style.width.px]=\"size() || 32\"\n      [style.height.px]=\"size() || 32\"\n      class=\"relative\">\n      @if (item().url || item().origin_url; as url) {\n        <img [src]=\"url\"\n          [style.width.px]=\"size() || 32\"\n          [style.height.px]=\"size() || 32\"\n          class=\"rounded-[4px] cursor-pointer\"\n          alt\n          (error)=\"handlerImageError($event)\"\n          (click)=\"handlerImageClick($event)\" />\n      } @else {\n        <libs_ui-components-spinner [size]=\"'medium'\" />\n      }\n    </div>\n  }\n  @else if (item() | LibsUiPipesInputsUploadCheckFileExtensionPipe:'video') {\n    <div class=\"relative\"\n      [style.width.px]=\"size() || 32\"\n      [style.height.px]=\"size() || 32\">\n      @if (item().url || item().origin_url) {\n        <video #videoRef\n          [style.width.px]=\"size || 32\"\n          [style.height.px]=\"size || 32\"\n          class=\"rounded-[4px]\"\n          preload=\"metadata\"\n          [src]=\"(item().url || item().origin_url || '') | LibsUiPipesSecurityTrustPipe:'resourceUrl'\"></video>\n        <div class=\"absolute w-full h-full top-0 bg-[#001433] opacity-40 rounded-[4px]\">\n        </div>\n        <div class=\"absolute w-full h-full flex items-center justify-center top-0\">\n          <i class=\"text-[#ffffff] libs-ui-icon-play-solid before:!text-[10px]\"></i>\n        </div>\n        @if (showVideoDuration()) {\n          <div\n            class=\"flex text-[5px] absolute bottom-0 right-0 py-[2px] px-[4px] rounded-[4px] bg-[#000000] text-[#ffffff]\">\n            {{ videoRef.duration | LibsUiPipesInputsUploadCalcDurationVideoPipe }}\n          </div>\n        }\n      } @else {\n        <libs_ui-components-spinner [size]=\"'medium'\" />\n      }\n    </div>\n  }\n  @else if (item() | LibsUiPipesInputsUploadCheckFileExtensionPipe:'pdf') {\n    <ng-container *ngComponentOutlet=\"'pdf'|LibsUiIconsGetIconComponentPipe|async\" />\n  }\n  @else if (item() | LibsUiPipesInputsUploadCheckFileExtensionPipe:'word') {\n    <ng-container *ngComponentOutlet=\"'word'|LibsUiIconsGetIconComponentPipe|async\" />\n  }\n  @else if (item() | LibsUiPipesInputsUploadCheckFileExtensionPipe:'pptx') {\n    <ng-container *ngComponentOutlet=\"'pptx'|LibsUiIconsGetIconComponentPipe|async\" />\n  }\n  @else if (item() | LibsUiPipesInputsUploadCheckFileExtensionPipe:'xlsx') {\n    <ng-container *ngComponentOutlet=\"'xlsx'|LibsUiIconsGetIconComponentPipe|async\" />\n  }\n  @else {\n    <div [style.width.px]=\"size() || 32\"\n      [style.height.px]=\"size() || 32\"\n      class=\"flex items-center justify-center\">\n      <i class=\"libs-ui-icon-file before:!text-[19px]\"\n        [class.text-[#6a7383]]=\"!item().isUploading && !item().error\"\n        [class.text-[#071631]]=\"disable() || item().isUploading || item().error\"></i>\n    </div>\n  }\n</div>\n" }]
+            args: [{ selector: 'libs_ui-components-inputs-upload-avatar', standalone: true, imports: [NgComponentOutlet, AsyncPipe, TranslateModule, LibsUiComponentsSpinnerComponent, LibsUiPipesSecurityTrustPipe, LibsUiPipesInputsUploadCalcDurationVideoPipe, LibsUiPipesInputsUploadCheckFileExtensionPipe, LibsUiIconsGetIconComponentPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"flex mr-[12px] bg-[#ffffff] rounded-[4px]\"\n  [class.libs-ui-disable]=\"disable() || item().isUploading || item().error\">\n  @if (item() | LibsUiPipesInputsUploadCheckFileExtensionPipe: 'image') {\n    <div\n      [style.width.px]=\"size() || 32\"\n      [style.height.px]=\"size() || 32\"\n      class=\"relative\">\n      @if (item().url || item().origin_url; as url) {\n        <img\n          [src]=\"url\"\n          [style.width.px]=\"size() || 32\"\n          [style.height.px]=\"size() || 32\"\n          class=\"rounded-[4px] cursor-pointer\"\n          alt\n          (error)=\"handlerImageError($event)\"\n          (click)=\"handlerImageClick($event)\" />\n      } @else {\n        <libs_ui-components-spinner [size]=\"'medium'\" />\n      }\n    </div>\n  } @else if (item() | LibsUiPipesInputsUploadCheckFileExtensionPipe: 'video') {\n    <div\n      class=\"relative\"\n      [style.width.px]=\"size() || 32\"\n      [style.height.px]=\"size() || 32\">\n      @if (item().url || item().origin_url) {\n        <video\n          #videoRef\n          [style.width.px]=\"size || 32\"\n          [style.height.px]=\"size || 32\"\n          class=\"rounded-[4px]\"\n          preload=\"metadata\"\n          [src]=\"item().url || item().origin_url || '' | LibsUiPipesSecurityTrustPipe: 'resourceUrl'\"></video>\n        <div class=\"absolute w-full h-full top-0 bg-[#001433] opacity-40 rounded-[4px]\"></div>\n        <div class=\"absolute w-full h-full flex items-center justify-center top-0\">\n          <i class=\"text-[#ffffff] libs-ui-icon-play-solid before:!text-[10px]\"></i>\n        </div>\n        @if (showVideoDuration()) {\n          <div class=\"flex text-[5px] absolute bottom-0 right-0 py-[2px] px-[4px] rounded-[4px] bg-[#000000] text-[#ffffff]\">\n            {{ videoRef.duration | LibsUiPipesInputsUploadCalcDurationVideoPipe }}\n          </div>\n        }\n      } @else {\n        <libs_ui-components-spinner [size]=\"'medium'\" />\n      }\n    </div>\n  } @else if (item() | LibsUiPipesInputsUploadCheckFileExtensionPipe: 'pdf') {\n    <ng-container *ngComponentOutlet=\"'pdf' | LibsUiIconsGetIconComponentPipe | async\" />\n  } @else if (item() | LibsUiPipesInputsUploadCheckFileExtensionPipe: 'word') {\n    <ng-container *ngComponentOutlet=\"'word' | LibsUiIconsGetIconComponentPipe | async\" />\n  } @else if (item() | LibsUiPipesInputsUploadCheckFileExtensionPipe: 'pptx') {\n    <ng-container *ngComponentOutlet=\"'pptx' | LibsUiIconsGetIconComponentPipe | async\" />\n  } @else if (item() | LibsUiPipesInputsUploadCheckFileExtensionPipe: 'xlsx') {\n    <ng-container *ngComponentOutlet=\"'xlsx' | LibsUiIconsGetIconComponentPipe | async\" />\n  } @else {\n    <div\n      [style.width.px]=\"size() || 32\"\n      [style.height.px]=\"size() || 32\"\n      class=\"flex items-center justify-center\">\n      <i\n        class=\"libs-ui-icon-file before:!text-[19px]\"\n        [class.text-[#6a7383]]=\"!item().isUploading && !item().error\"\n        [class.text-[#071631]]=\"disable() || item().isUploading || item().error\"></i>\n    </div>\n  }\n</div>\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -125,19 +118,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 const getDescriptionFormatAndSizeFileDefault = (type, maxImageSize, maxVideoSize, maxDocumentSize, maxAudioSize) => {
     const image = {
         message: 'i18n_note_upload_image_volume',
-        interpolateParams: { value: getLabelBySizeFile(maxImageSize, 0) }
+        interpolateParams: { value: getLabelBySizeFile(maxImageSize, 0) },
     };
     const video = {
         message: 'i18n_note_upload_video_volume',
-        interpolateParams: { value: getLabelBySizeFile(maxVideoSize, 0) }
+        interpolateParams: { value: getLabelBySizeFile(maxVideoSize, 0) },
     };
     const document = {
         message: 'i18n_note_upload_file_volume',
-        interpolateParams: { value: getLabelBySizeFile(maxDocumentSize, 0) }
+        interpolateParams: { value: getLabelBySizeFile(maxDocumentSize, 0) },
     };
     const audio = {
         message: 'i18n_note_upload_audio_volume',
-        interpolateParams: { value: getLabelBySizeFile(maxAudioSize, 0) }
+        interpolateParams: { value: getLabelBySizeFile(maxAudioSize, 0) },
     };
     const typeSplit = type.split('_');
     const description = [];
@@ -169,12 +162,16 @@ class LibsUiComponentsInputsUploadDropFileDirective {
         this.elementRef = elementRef;
     }
     ngAfterViewInit() {
-        fromEvent(this.elementRef.nativeElement, 'dragover').pipe(takeUntil(this.onDestroy)).subscribe((e) => {
+        fromEvent(this.elementRef.nativeElement, 'dragover')
+            .pipe(takeUntil(this.onDestroy))
+            .subscribe((e) => {
             e.stopPropagation();
             e.preventDefault();
             this.outDragOver.emit(e);
         });
-        fromEvent(this.elementRef.nativeElement, 'dragleave').pipe(takeUntil(this.onDestroy)).subscribe((e) => {
+        fromEvent(this.elementRef.nativeElement, 'dragleave')
+            .pipe(takeUntil(this.onDestroy))
+            .subscribe((e) => {
             e.stopPropagation();
             e.preventDefault();
             if (checkMouseOverInContainer(e, this.elementRef.nativeElement)) {
@@ -182,7 +179,9 @@ class LibsUiComponentsInputsUploadDropFileDirective {
             }
             this.outDragLeave.emit(e);
         });
-        fromEvent(this.elementRef.nativeElement, 'drop').pipe(takeUntil(this.onDestroy)).subscribe((e) => {
+        fromEvent(this.elementRef.nativeElement, 'drop')
+            .pipe(takeUntil(this.onDestroy))
+            .subscribe((e) => {
             e.stopPropagation();
             e.preventDefault();
             this.outDrop.emit(e);
@@ -209,19 +208,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
                     selector: '[LibsUiComponentsInputsUploadDropFileDirective]',
-                    standalone: true
+                    standalone: true,
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }] });
 
 class LibsUiComponentsInputsUploadDirective {
     onDestroy = new Subject();
-    multiple = input(true, { transform: val => val ?? true });
-    accessFiles = input('image/x-png,image/jpg,image/jpeg,image/PNG,image/x-PNG,image/JPG,image/JPEG', { transform: val => val ?? 'image/x-png,image/jpg,image/jpeg,image/PNG,image/x-PNG,image/JPG,image/JPEG' });
+    multiple = input(true, { transform: (val) => val ?? true });
+    accessFiles = input('image/x-png,image/jpg,image/jpeg,image/PNG,image/x-PNG,image/JPG,image/JPEG', { transform: (val) => val ?? 'image/x-png,image/jpg,image/jpeg,image/PNG,image/x-PNG,image/JPG,image/JPEG' });
     outUploadFiles = output();
     outUploadFile = output();
     elementRef = inject(ElementRef);
     ngAfterViewInit() {
-        fromEvent(this.elementRef.nativeElement, 'click').pipe(takeUntil$1(this.onDestroy)).subscribe((e) => {
+        fromEvent(this.elementRef.nativeElement, 'click')
+            .pipe(takeUntil$1(this.onDestroy))
+            .subscribe((e) => {
             e.stopPropagation();
             e.preventDefault();
             const inputElementUpload = document.createElement('input');
@@ -230,7 +231,9 @@ class LibsUiComponentsInputsUploadDirective {
             inputElementUpload.multiple = this.multiple();
             inputElementUpload.style.display = 'none';
             inputElementUpload.click();
-            fromEvent(inputElementUpload, 'change').pipe(takeUntil$1(this.onDestroy)).subscribe((event) => {
+            fromEvent(inputElementUpload, 'change')
+                .pipe(takeUntil$1(this.onDestroy))
+                .subscribe((event) => {
                 const files = Array.from(event.dataTransfer?.files || event.target?.files || []);
                 inputElementUpload.remove();
                 if (!files?.length) {
@@ -256,7 +259,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
                     selector: '[LibsUiComponentsInputsUploadDirective]',
-                    standalone: true
+                    standalone: true,
                 }]
         }] });
 
@@ -278,46 +281,46 @@ class LibsUiComponentsInputsUploadComponent {
     onDestroy = new Subject();
     // #endregion
     // #region INPUTS
-    originFiles = input([], { transform: val => val ?? [] });
-    fileType = input('image_video_document', { transform: val => val ?? 'image_video_document' });
+    originFiles = input([], { transform: (val) => val ?? [] });
+    fileType = input('image_video_document', { transform: (val) => val ?? 'image_video_document' });
     multiple = input();
-    canUploadIfHasExistFile = input(false, { transform: val => val ?? false });
+    canUploadIfHasExistFile = input(false, { transform: (val) => val ?? false });
     canSetAvatar = input(false);
-    limitFile = input(10, { transform: val => val ?? 10 });
-    maxTotalSize = input(10 * 1024 * 1024, { transform: val => val ?? 10 * 1024 * 1024 });
-    maxImageSize = input(5 * 1024 * 1024, { transform: val => val ?? 5 * 1024 * 1024 });
-    maxVideoSize = input(10 * 1024 * 1024, { transform: val => val ?? 10 * 1024 * 1024 });
-    maxDocumentSize = input(10 * 1024 * 1024, { transform: val => val ?? 10 * 1024 * 1024 });
-    maxAudioSize = input(10 * 1024 * 1024, { transform: val => val ?? 10 * 1024 * 1024 });
-    imageExtList = input(ImageExtList, { transform: val => val ?? ImageExtList });
-    videoExtList = input(VideoExtList, { transform: val => val ?? VideoExtList });
-    documentExtList = input(DocumentExtList, { transform: val => val ?? DocumentExtList });
-    audioExtList = input(AudioExtList, { transform: val => val ?? AudioExtList });
+    limitFile = input(10, { transform: (val) => val ?? 10 });
+    maxTotalSize = input(10 * 1024 * 1024, { transform: (val) => val ?? 10 * 1024 * 1024 });
+    maxImageSize = input(5 * 1024 * 1024, { transform: (val) => val ?? 5 * 1024 * 1024 });
+    maxVideoSize = input(10 * 1024 * 1024, { transform: (val) => val ?? 10 * 1024 * 1024 });
+    maxDocumentSize = input(10 * 1024 * 1024, { transform: (val) => val ?? 10 * 1024 * 1024 });
+    maxAudioSize = input(10 * 1024 * 1024, { transform: (val) => val ?? 10 * 1024 * 1024 });
+    imageExtList = input(ImageExtList, { transform: (val) => val ?? ImageExtList });
+    videoExtList = input(VideoExtList, { transform: (val) => val ?? VideoExtList });
+    documentExtList = input(DocumentExtList, { transform: (val) => val ?? DocumentExtList });
+    audioExtList = input(AudioExtList, { transform: (val) => val ?? AudioExtList });
     classIncludeListItem = input();
     validRequired = input();
-    disable = input(false, { transform: val => val ?? false });
-    readonly = input(false, { transform: val => val ?? false });
+    disable = input(false, { transform: (val) => val ?? false });
+    readonly = input(false, { transform: (val) => val ?? false });
     aspectRatio = input();
-    zIndex = input(1200, { transform: val => val ?? 1200 });
-    ignoreShowSizeFile = input(false, { transform: val => val ?? false });
-    allowShowPushMessageMaxSizeError = input(false, { transform: val => val ?? false });
-    messageTypeFileError = input('i18n_the_file_support_format_is_not_correct', { transform: val => val || 'i18n_the_file_support_format_is_not_correct' });
-    messageMaxSizeError = input('i18n_file_size_exceeds_the_allowed_limit', { transform: val => val || 'i18n_file_size_exceeds_the_allowed_limit' });
-    messageFileUploadError = input('i18n_invalid_file_upload', { transform: val => val || 'i18n_invalid_file_upload' });
-    messageTotalFileExceedsError = input('i18n_file_number_exceeds_the_allowed_limit_please_delete_the_file', { transform: val => val || 'i18n_file_number_exceeds_the_allowed_limit_please_delete_the_file' });
+    zIndex = input(1200, { transform: (val) => val ?? 1200 });
+    ignoreShowSizeFile = input(false, { transform: (val) => val ?? false });
+    allowShowPushMessageMaxSizeError = input(false, { transform: (val) => val ?? false });
+    messageTypeFileError = input('i18n_the_file_support_format_is_not_correct', { transform: (val) => val || 'i18n_the_file_support_format_is_not_correct' });
+    messageMaxSizeError = input('i18n_file_size_exceeds_the_allowed_limit', { transform: (val) => val || 'i18n_file_size_exceeds_the_allowed_limit' });
+    messageFileUploadError = input('i18n_invalid_file_upload', { transform: (val) => val || 'i18n_invalid_file_upload' });
+    messageTotalFileExceedsError = input('i18n_file_number_exceeds_the_allowed_limit_please_delete_the_file', { transform: (val) => val || 'i18n_file_number_exceeds_the_allowed_limit_please_delete_the_file' });
     configDescriptionInputUpload = input({ message: 'i18n_drag_file_here_to_upload_or_select_file' }, {
-        transform: val => val ?? { message: 'i18n_drag_file_here_to_upload_or_select_file' }
+        transform: (val) => val ?? { message: 'i18n_drag_file_here_to_upload_or_select_file' },
     });
-    modeDisplayFile = input('full', { transform: val => val || 'full' });
+    modeDisplayFile = input('full', { transform: (val) => val || 'full' });
     descriptionFormatAndSizeFile = input();
-    showVideoDuration = input(false, { transform: val => val ?? false });
+    showVideoDuration = input(false, { transform: (val) => val ?? false });
     labelConfig = input();
-    showPopupUploadWhenHasFileAndModeSingle = input(false, { transform: val => val ?? false });
-    ignoreIconRemove = input(false, { transform: val => val ?? false });
-    ignoreIconEdit = input(false, { transform: val => val ?? false });
-    ignoreIconPreview = input(true, { transform: val => val ?? true });
+    showPopupUploadWhenHasFileAndModeSingle = input(false, { transform: (val) => val ?? false });
+    ignoreIconRemove = input(false, { transform: (val) => val ?? false });
+    ignoreIconEdit = input(false, { transform: (val) => val ?? false });
+    ignoreIconPreview = input(true, { transform: (val) => val ?? true });
     classIncludeFileContent = input();
-    showBorderErrorAllItemWhenError = input(false, { transform: val => val ?? false });
+    showBorderErrorAllItemWhenError = input(false, { transform: (val) => val ?? false });
     configDownloadSampleFile = input();
     // #endregion
     // #region OUTPUTS
@@ -346,26 +349,7 @@ class LibsUiComponentsInputsUploadComponent {
     }
     // #region LIFECYCLE HOOKS
     ngOnInit() {
-        this.outFunctionsControl.emit({
-            checkIsValid: this.validate.bind(this),
-            removeAll: this.removeAllFile.bind(this),
-            uploading: async (process, id) => {
-                const fileUploading = this.fileList().find(file => file().id === id);
-                if (fileUploading) {
-                    fileUploading.update(file => ({ ...file, percentUploading: process.percent, isUploading: process.percent !== 100 }));
-                }
-            },
-            setMessageError: async (message, id) => {
-                this.messageError.set(message);
-                if (id) {
-                    const fileError = this.fileList().find(file => file().id === id);
-                    if (fileError) {
-                        fileError.update(file => ({ ...file, error: message }));
-                    }
-                }
-            },
-            handlerUploadFile: this.showUploadPopup.bind(this)
-        });
+        this.outFunctionsControl.emit(this.FunctionsControl);
     }
     ngAfterViewInit() {
         setTimeout(() => {
@@ -389,7 +373,7 @@ class LibsUiComponentsInputsUploadComponent {
         if (typeSplit.includes('audio')) {
             accessExts.push(...this.audioExtList());
         }
-        this.accessFiles.set(accessExts.map(ext => `.${ext}`).join(','));
+        this.accessFiles.set(accessExts.map((ext) => `.${ext}`).join(','));
     }
     // #endregion
     // #region FILE OPERATIONS
@@ -429,7 +413,7 @@ class LibsUiComponentsInputsUploadComponent {
                 file: file,
                 size: getLabelBySizeFile(file.size),
                 type: isImage ? 'image' : isVideo ? 'video' : isAudio ? 'audio' : 'document',
-                id: uuid()
+                id: uuid(),
             };
             if (!(await this.checkValidFileExtension(file))) {
                 if (!errorExceedsMaxFile) {
@@ -453,11 +437,11 @@ class LibsUiComponentsInputsUploadComponent {
             }
             await this.pushFileInList(file, newFile);
         }
-        if (this.canSetAvatar() && this.fileList().length && !this.fileList().find(file => file().isAvatar)) {
-            this.fileList.update(fileList => {
-                const itemImage = fileList.find(file => file().type === 'image');
+        if (this.canSetAvatar() && this.fileList().length && !this.fileList().find((file) => file().isAvatar)) {
+            this.fileList.update((fileList) => {
+                const itemImage = fileList.find((file) => file().type === 'image');
                 if (itemImage) {
-                    itemImage.update(file => ({ ...file, isAvatar: true }));
+                    itemImage.update((file) => ({ ...file, isAvatar: true }));
                 }
                 return [...fileList];
             });
@@ -466,8 +450,8 @@ class LibsUiComponentsInputsUploadComponent {
         this.validate();
     }
     async pushFileInList(file, newFile) {
-        newFile.url = await convertFileToBase64_ObjectUrl(file);
-        this.fileList.update(fileList => {
+        newFile.url = (await convertFileToBase64_ObjectUrl(file));
+        this.fileList.update((fileList) => {
             fileList.splice(0, this.canUploadIfHasExistFile() ? 1 : 0, signal(newFile));
             return [...fileList];
         });
@@ -516,7 +500,7 @@ class LibsUiComponentsInputsUploadComponent {
     async handlerRemoveFile(event, item) {
         event.stopPropagation();
         this.removeFile(item);
-        if (this.originFiles().find(file => file().url === item().url)) {
+        if (this.originFiles().find((file) => file().url === item().url)) {
             this.outFileRemoved.emit(item);
         }
         this.validate();
@@ -527,10 +511,10 @@ class LibsUiComponentsInputsUploadComponent {
         }
     }
     async removeFile(fileItem) {
-        this.fileList.update(fileList => fileList.filter(item => item().id !== fileItem().id));
+        this.fileList.update((fileList) => fileList.filter((item) => item().id !== fileItem().id));
         if (this.canSetAvatar() && fileItem().isAvatar && this.fileList().length) {
-            this.fileList.update(fileList => {
-                fileList[0].update(file => ({ ...file, isAvatar: true }));
+            this.fileList.update((fileList) => {
+                fileList[0].update((file) => ({ ...file, isAvatar: true }));
                 return [...fileList];
             });
         }
@@ -553,7 +537,7 @@ class LibsUiComponentsInputsUploadComponent {
         this.imageEditorComponentRef.instance.outSaveFile.subscribe(async (result) => {
             const messageError = !(await this.checkValidFileSize(result.file)) ? this.messageMaxSizeError() : undefined;
             const nameFile = fileItem().file?.name || fileItem().name;
-            fileItem.update(data => ({ ...data, file: convertBlobToFile(result.file, nameFile), name: nameFile, origin_url: undefined, size: getLabelBySizeFile(result.file.size), error: messageError, url: result.url, isUpdate: true }));
+            fileItem.update((data) => ({ ...data, file: convertBlobToFile(result.file, nameFile), name: nameFile, origin_url: undefined, size: getLabelBySizeFile(result.file.size), error: messageError, url: result.url, isUpdate: true }));
             this.outFileChanged.emit(this.fileList());
             this.imageEditorComponentRef?.instance.outClose.emit({ isClickButtonClose: true });
         });
@@ -618,7 +602,7 @@ class LibsUiComponentsInputsUploadComponent {
             this.messageError.set(this.messageTotalFileExceedsError());
             return false;
         }
-        const fileError = this.fileList().find(item => item().error);
+        const fileError = this.fileList().find((item) => item().error);
         if (fileError) {
             this.messageError.set(this.multiple() ? this.messageFileUploadError() : fileError().error);
             return false;
@@ -628,12 +612,12 @@ class LibsUiComponentsInputsUploadComponent {
     }
     async handlerSetAvatar(event, file) {
         event.stopPropagation();
-        this.fileList().forEach(item => {
+        this.fileList().forEach((item) => {
             if (item().id === file().id) {
-                item.update(file => ({ ...file, isAvatar: true }));
+                item.update((file) => ({ ...file, isAvatar: true }));
                 return;
             }
-            item.update(file => ({ ...file, isAvatar: false }));
+            item.update((file) => ({ ...file, isAvatar: false }));
         });
         this.outFileChanged.emit(this.fileList());
     }
@@ -660,23 +644,48 @@ class LibsUiComponentsInputsUploadComponent {
         this.uploadInputRef()?.nativeElement.setAttribute('accept', this.accessFiles());
     }
     // #endregion
+    // #region FUNCTIONS
+    get FunctionsControl() {
+        return {
+            checkIsValid: this.validate.bind(this),
+            removeAll: this.removeAllFile.bind(this),
+            uploading: async (process, id) => {
+                const fileUploading = this.fileList().find((file) => file().id === id);
+                if (fileUploading) {
+                    fileUploading.update((file) => ({ ...file, percentUploading: process.percent, isUploading: process.percent !== 100 }));
+                }
+            },
+            setMessageError: async (message, id) => {
+                this.messageError.set(message);
+                if (id) {
+                    const fileError = this.fileList().find((file) => file().id === id);
+                    if (fileError) {
+                        fileError.update((file) => ({ ...file, error: message }));
+                    }
+                }
+            },
+            handlerUploadFile: this.showUploadPopup.bind(this),
+        };
+    }
+    // #endregion
     ngOnDestroy() {
         this.onDestroy.next();
         this.onDestroy.complete();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsInputsUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsInputsUploadComponent, isStandalone: true, selector: "libs_ui-components-inputs-upload", inputs: { originFiles: { classPropertyName: "originFiles", publicName: "originFiles", isSignal: true, isRequired: false, transformFunction: null }, fileType: { classPropertyName: "fileType", publicName: "fileType", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, canUploadIfHasExistFile: { classPropertyName: "canUploadIfHasExistFile", publicName: "canUploadIfHasExistFile", isSignal: true, isRequired: false, transformFunction: null }, canSetAvatar: { classPropertyName: "canSetAvatar", publicName: "canSetAvatar", isSignal: true, isRequired: false, transformFunction: null }, limitFile: { classPropertyName: "limitFile", publicName: "limitFile", isSignal: true, isRequired: false, transformFunction: null }, maxTotalSize: { classPropertyName: "maxTotalSize", publicName: "maxTotalSize", isSignal: true, isRequired: false, transformFunction: null }, maxImageSize: { classPropertyName: "maxImageSize", publicName: "maxImageSize", isSignal: true, isRequired: false, transformFunction: null }, maxVideoSize: { classPropertyName: "maxVideoSize", publicName: "maxVideoSize", isSignal: true, isRequired: false, transformFunction: null }, maxDocumentSize: { classPropertyName: "maxDocumentSize", publicName: "maxDocumentSize", isSignal: true, isRequired: false, transformFunction: null }, maxAudioSize: { classPropertyName: "maxAudioSize", publicName: "maxAudioSize", isSignal: true, isRequired: false, transformFunction: null }, imageExtList: { classPropertyName: "imageExtList", publicName: "imageExtList", isSignal: true, isRequired: false, transformFunction: null }, videoExtList: { classPropertyName: "videoExtList", publicName: "videoExtList", isSignal: true, isRequired: false, transformFunction: null }, documentExtList: { classPropertyName: "documentExtList", publicName: "documentExtList", isSignal: true, isRequired: false, transformFunction: null }, audioExtList: { classPropertyName: "audioExtList", publicName: "audioExtList", isSignal: true, isRequired: false, transformFunction: null }, classIncludeListItem: { classPropertyName: "classIncludeListItem", publicName: "classIncludeListItem", isSignal: true, isRequired: false, transformFunction: null }, validRequired: { classPropertyName: "validRequired", publicName: "validRequired", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, ignoreShowSizeFile: { classPropertyName: "ignoreShowSizeFile", publicName: "ignoreShowSizeFile", isSignal: true, isRequired: false, transformFunction: null }, allowShowPushMessageMaxSizeError: { classPropertyName: "allowShowPushMessageMaxSizeError", publicName: "allowShowPushMessageMaxSizeError", isSignal: true, isRequired: false, transformFunction: null }, messageTypeFileError: { classPropertyName: "messageTypeFileError", publicName: "messageTypeFileError", isSignal: true, isRequired: false, transformFunction: null }, messageMaxSizeError: { classPropertyName: "messageMaxSizeError", publicName: "messageMaxSizeError", isSignal: true, isRequired: false, transformFunction: null }, messageFileUploadError: { classPropertyName: "messageFileUploadError", publicName: "messageFileUploadError", isSignal: true, isRequired: false, transformFunction: null }, messageTotalFileExceedsError: { classPropertyName: "messageTotalFileExceedsError", publicName: "messageTotalFileExceedsError", isSignal: true, isRequired: false, transformFunction: null }, configDescriptionInputUpload: { classPropertyName: "configDescriptionInputUpload", publicName: "configDescriptionInputUpload", isSignal: true, isRequired: false, transformFunction: null }, modeDisplayFile: { classPropertyName: "modeDisplayFile", publicName: "modeDisplayFile", isSignal: true, isRequired: false, transformFunction: null }, descriptionFormatAndSizeFile: { classPropertyName: "descriptionFormatAndSizeFile", publicName: "descriptionFormatAndSizeFile", isSignal: true, isRequired: false, transformFunction: null }, showVideoDuration: { classPropertyName: "showVideoDuration", publicName: "showVideoDuration", isSignal: true, isRequired: false, transformFunction: null }, labelConfig: { classPropertyName: "labelConfig", publicName: "labelConfig", isSignal: true, isRequired: false, transformFunction: null }, showPopupUploadWhenHasFileAndModeSingle: { classPropertyName: "showPopupUploadWhenHasFileAndModeSingle", publicName: "showPopupUploadWhenHasFileAndModeSingle", isSignal: true, isRequired: false, transformFunction: null }, ignoreIconRemove: { classPropertyName: "ignoreIconRemove", publicName: "ignoreIconRemove", isSignal: true, isRequired: false, transformFunction: null }, ignoreIconEdit: { classPropertyName: "ignoreIconEdit", publicName: "ignoreIconEdit", isSignal: true, isRequired: false, transformFunction: null }, ignoreIconPreview: { classPropertyName: "ignoreIconPreview", publicName: "ignoreIconPreview", isSignal: true, isRequired: false, transformFunction: null }, classIncludeFileContent: { classPropertyName: "classIncludeFileContent", publicName: "classIncludeFileContent", isSignal: true, isRequired: false, transformFunction: null }, showBorderErrorAllItemWhenError: { classPropertyName: "showBorderErrorAllItemWhenError", publicName: "showBorderErrorAllItemWhenError", isSignal: true, isRequired: false, transformFunction: null }, configDownloadSampleFile: { classPropertyName: "configDownloadSampleFile", publicName: "configDownloadSampleFile", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outClose: "outClose", outFileChanged: "outFileChanged", outFileRemoved: "outFileRemoved", outFunctionsControl: "outFunctionsControl" }, viewQueries: [{ propertyName: "uploadRef", first: true, predicate: ["upload"], descendants: true, isSignal: true }, { propertyName: "uploadInputRef", first: true, predicate: ["uploadInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex flex-col w-full h-full\">\n  <div>\n    @if (labelConfig();as labelConfig) {\n      <libs_ui-components-label [classInclude]=\"labelConfig.classInclude\"\n        [labelLeft]=\"labelConfig.labelLeft\"\n        [labelLeftClass]=\"labelConfig.labelLeftClass\"\n        [required]=\"labelConfig.required \"\n        [description]=\"labelConfig.description\"\n        [labelRight]=\"labelConfig.labelRight\"\n        [labelRightClass]=\"labelConfig.labelRightClass\"\n        [onlyShowCount]=\"labelConfig.onlyShowCount\"\n        [buttonsLeft]=\"labelConfig.buttonsLeft\"\n        [buttonsRight]=\"labelConfig.buttonsRight\"\n        [disableButtonsLeft]=\"labelConfig.disableButtonsLeft || disable() || readonly() \"\n        [disableButtonsRight]=\"labelConfig.disableButtonsRight || disable() || readonly() \"\n        [hasToggle]=\"labelConfig.hasToggle\"\n        [toggleActive]=\"labelConfig.toggleActive\"\n        [toggleDisable]=\"labelConfig.toggleDisable || disable() || readonly() \"\n        [popover]=\"labelConfig.popover\"\n        [iconPopoverClass]=\"labelConfig.iconPopoverClass\"\n        [onlyShowCount]=\"labelConfig.onlyShowCount\"\n        [limitLength]=\"labelConfig.limitLength\"\n        [buttonsDescription]=\"labelConfig.buttonsDescription\"\n        [disableButtonsDescription]=\"labelConfig.disableButtonsDescription || disable() || readonly() \"\n        [buttonsDescriptionContainerClass]=\"labelConfig.buttonsDescriptionContainerClass\"\n        [count]=\"labelConfig.count\" />\n    }\n    @if ((!configDownloadSampleFile()?.position || configDownloadSampleFile()?.position === 'top') && configDownloadSampleFile();as configDownloadSampleFile) {\n      <libs_ui-components-buttons-button [type]=\"'button-link-primary'\"\n        [classLabel]=\"'libs-ui-font-h7m'\"\n        [classInclude]=\"'!mb-[8px] !p-0'\"\n        [classIconLeft]=\"'libs-ui-icon-attachment before:!text-[12px]'\"\n        [label]=\"configDownloadSampleFile?.title || ' '\"\n        (outClick)=\"handlerDownloadSampleFile($event)\" />\n    }\n    @if (multiple() || !showPopupUploadWhenHasFileAndModeSingle() || (!fileList().length && !multiple())) {\n      <div #upload\n        LibsUiComponentsInputsUploadDirective\n        LibsUiComponentsInputsUploadDropFileDirective\n        class=\"libs-ui-components-inputs-upload\"\n        [class.libs-ui-components-inputs-upload-disable]=\"disable() || readonly()  || (!multiple() && fileList().length && !canUploadIfHasExistFile())\"\n        [class.libs-ui-components-inputs-upload-readonly]=\"readonly()\"\n        [class.libs-ui-components-inputs-upload-error]=\"messageError()\"\n        [multiple]=\"multiple()\"\n        [accessFiles]=\"accessFiles()\"\n        (outUploadFiles)=\"handleUploadFiles($event)\"\n        (outUploadFile)=\"handleUploadFiles([$event])\"\n        (outDragOver)=\"handlerSetClassDrag(true)\"\n        (outDragLeave)=\"handlerSetClassDrag(false)\"\n        (outDrop)=\"handlerSetClassDrag(false)\"\n        (outDropFiles)=\"handleUploadFiles($event)\"\n        (outDropFile)=\"handleUploadFiles([$event])\">\n        <div class=\"flex items-center\">\n          <div class=\"mr-[16px]\">\n            <i class=\"libs-ui-components-inputs-upload-icon libs-ui-icon-file-upload before:!text-[32px]\"></i>\n          </div>\n          <div class=\"libs-ui-components-inputs-upload-description\">\n            <div class=\"mb-[4px] libs-ui-font-h6m\"\n              [innerHTML]=\"(configDescriptionInputUpload().message || '') | translate:configDescriptionInputUpload().interpolateParams\">\n            </div>\n            @for (item of descriptionFormatAndSizeFileComputed(); track item; let last = $last) {\n              <div class=\"libs-ui-font-h7r\"\n                [class.mb-[4px]]=\"!last\"\n                [innerHTML]=\"item.message | translate:item.interpolateParams\">\n              </div>\n            }\n          </div>\n        </div>\n        @if (multiple()) {\n          <input #uploadInput\n            class=\"upload-input hidden\"\n            type=\"file\"\n            name=\"files[]\"\n            multiple\n            [accept]=\"accessFiles()\" />\n        } @else {\n          <input #uploadInput\n            class=\"upload-input hidden\"\n            type=\"file\"\n            name=\"files[]\"\n            [accept]=\"accessFiles()\" />\n        }\n      </div>\n    }\n    @if (messageError() && (multiple() || !showPopupUploadWhenHasFileAndModeSingle() || (!fileList().length && !multiple()))) {\n      <div class=\"mt-[8px] text-[#ee2d41] libs-ui-font-h7r\">\n        {{ (messageError() || '') | translate:{ value: limitFile() } }}\n      </div>\n    }\n    @if (configDownloadSampleFile()?.position === 'bottom' &&  configDownloadSampleFile();as configDownloadSampleFile) {\n      <libs_ui-components-buttons-button [type]=\"'button-link-primary'\"\n        [classLabel]=\"'libs-ui-font-h7m'\"\n        [classInclude]=\"'!mt-[8px] !p-0'\"\n        [classIconLeft]=\"'libs-ui-icon-attachment before:!text-[12px]'\"\n        [label]=\"configDownloadSampleFile.title || ' '\"\n        (moClick)=\"handlerDownloadSampleFile($event)\" />\n    }\n  </div>\n  @if (fileList().length) {\n    <div LibsUiComponentsScrollOverlayDirective\n      class=\"relative w-full h-full px-[10px] libs-ui-components-inputs-upload-view-list {{ classIncludeFileContent() || '' }}\"\n      [class.mt-[12px]]=\"multiple() || !showPopupUploadWhenHasFileAndModeSingle()\">\n      <ng-content select=\"[label-file]\"></ng-content>\n      @for (item of fileList(); track item(); let first = $first) {\n        <div class=\"libs-ui-components-inputs-upload-view-list-item {{ classIncludeListItem() || '' }}\"\n          [class.libs-ui-components-inputs-upload-file-full]=\"modeDisplayFile() === 'full'\"\n          [class.libs-ui-components-inputs-upload-file-short]=\"modeDisplayFile() === 'short'\"\n          [class.libs-ui-border-error-general]=\"item().error || (messageError() && showBorderErrorAllItemWhenError())\"\n          [class.mt-0]=\"first && !multiple() && !showPopupUploadWhenHasFileAndModeSingle()\">\n\n          <div class=\"flex w-full\">\n            <div class=\"flex items-center\">\n              @if (canSetAvatar() && item().type === 'image') {\n                <libs_ui-components-buttons-button [type]=\"'button-link-third'\"\n                  [classIconLeft]=\"'!mr-0' + (item().isAvatar ? ' libs-ui-icon-check-circle-solid before:!text-[#00bc62]': ' libs-ui-icon-check-circle-outline') + ((disable() || readonly()  || item().isUploading || !!item().error) ? ' libs-ui-disable' : '')\"\n                  [popover]=\"{config:{ content: item().isAvatar ? 'i18n_avatar' : 'i18n_choose_as_your_avatar', zIndex: zIndex()}}\"\n                  [classInclude]=\"'!mr-[12px] !p-0'\"\n                  [disable]=\"disable() || readonly()  || item().isUploading || !!item().error\"\n                  (outClick)=\"handlerSetAvatar($event, item)\" />\n              }\n            </div>\n            <div class=\"flex\"\n              [class.w-[calc(100%-28px)]]=\"canSetAvatar()\"\n              [class.w-full]=\"!canSetAvatar()\">\n              @if (modeDisplayFile() === 'full') {\n                <libs_ui-components-inputs-upload-avatar [disable]=\"disable() || readonly() \"\n                  [(item)]=\"item\"\n                  [showVideoDuration]=\"showVideoDuration()\"\n                  (outOpenPreview)=\"handlerOpenPreviewFile($event)\" />\n              }\n              <div class=\"relative w-full\">\n                <div class=\"flex absolute w-full h-full flex-col\"\n                  [class.flex-col]=\"modeDisplayFile() === 'full'\"\n                  [class.justify-center]=\"modeDisplayFile() === 'full'\"\n                  [class.items-center]=\"modeDisplayFile() === 'short'\">\n                  <libs_ui-components-label class=\"flex w-full\"\n                    [labelLeft]=\"item().name\"\n                    [zIndexPopover]=\"zIndex() + 1\"\n                    [labelLeftClass]=\"'libs-ui-font-h6m ' + ((disable() || readonly()  || item().isUploading || item().error) ? 'text-[#6a7383]' : 'text-[#071631]')\"\n                    [classInclude]=\"modeDisplayFile() === 'short' ? '!mb-0' : ''\" />\n\n                  @if (!ignoreShowSizeFile()) {\n                    <div class=\"text-[#9ca2ad] libs-ui-font-h7r shrink-0\"\n                      [class.flex]=\"modeDisplayFile() === 'full'\"\n                      [class.items-center]=\"modeDisplayFile() === 'short'\"\n                      [class.ml-[12px]]=\"modeDisplayFile() === 'short'\">\n                      {{ item().size }}\n                    </div>\n                  }\n                </div>\n              </div>\n              @if (item().isUploading && item().percentUploading) {\n                <div class=\"flex items-center ml-[16px]\"\n                  [class.mr-[26px]]=\"modeDisplayFile() === 'full'\">\n                  <div class=\"w-[120px] h-[4px] rounded-[4px] bg-[#f8f9fa] relative\">\n                    <div class=\"absolute top-0 left-0 h-[4px] rounded-[4px] bg-[#00bc62]\"\n                      [style.width.px]=\"(item().percentUploading ?? 0)*1.2\"></div>\n                  </div>\n                </div>\n              }\n            </div>\n          </div>\n\n          <div class=\"flex ml-[16px]\">\n            @if (!ignoreIconPreview()) {\n              <libs_ui-components-buttons-button [type]=\"'button-link-third'\"\n                [classIconLeft]=\"'libs-ui-icon-eye-outline !mr-0'\"\n                [popover]=\"{config:{ content: 'i18n_preview', zIndex: zIndex()+1}}\"\n                [classInclude]=\"'!p-0' + (ignoreIconRemove() && !ignoreIconEdit() ? '' : ' !mr-[12px]')\"\n                [disable]=\"item().isUploading || disable() || readonly() \"\n                (outClick)=\"handlerOpenPreviewFile(item())\" />\n            }\n            @if (item().type === 'image' && !item().error && !ignoreIconEdit()) {\n              <libs_ui-components-buttons-button [type]=\"'button-link-third'\"\n                [classIconLeft]=\"'libs-ui-icon-edit-line !mr-0'\"\n                [popover]=\"{config:{ content: 'i18n_edit', zIndex: zIndex()+1}}\"\n                [classInclude]=\"'!p-0' + (ignoreIconRemove() ? '' : ' !mr-[12px]')\"\n                [disable]=\"item().isUploading || disable() || readonly() \"\n                (outClick)=\"handlerEditImage($event, item)\" />\n            }\n            @if (!ignoreIconRemove()) {\n              <libs_ui-components-buttons-button [type]=\"'button-link-third'\"\n                [classIconLeft]=\"'libs-ui-icon-close !mr-0'\"\n                [popover]=\"{config: {content: 'i18n_delete', zIndex: zIndex()+1}}\"\n                [classInclude]=\"'!p-0'\"\n                [disable]=\"item().isUploading || disable() || readonly() \"\n                (outClick)=\"handlerRemoveFile($event, item)\" />\n            }\n          </div>\n        </div>\n        @if (item().error && (multiple() || showPopupUploadWhenHasFileAndModeSingle())) {\n          <div class=\"mt-[8px] text-[#ee2d41] libs-ui-font-h7r\">{{ (item().error || ' ') | translate }}</div>\n        }\n      }\n    </div>\n  }\n</div>\n", styles: [":host ::ng-deep .libs-ui-components-inputs-upload{width:100%;padding:16px;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;background-color:#fff;border:1px dashed #e6e7ea}:host ::ng-deep .libs-ui-components-inputs-upload .libs-ui-components-inputs-upload-icon:before{color:#9ca2ad}:host ::ng-deep .libs-ui-components-inputs-upload .libs-ui-components-inputs-upload-description{color:#9ca2ad}:host ::ng-deep .libs-ui-components-inputs-upload .libs-ui-components-inputs-upload-description span{color:var(--libs-ui-color-default, #226ff5)}:host ::ng-deep .libs-ui-components-inputs-upload:hover,:host ::ng-deep .libs-ui-components-inputs-upload.libs-ui-components-inputs-upload-drag-over{background-color:var(--libs-ui-color-light-3, #f4f8ff);border:1px dashed var(--libs-ui-color-light-1, #226ff5)}:host ::ng-deep .libs-ui-components-inputs-upload:hover .libs-ui-components-inputs-upload-icon:before,:host ::ng-deep .libs-ui-components-inputs-upload.libs-ui-components-inputs-upload-drag-over .libs-ui-components-inputs-upload-icon:before{color:#cdd0d6}:host ::ng-deep .libs-ui-components-inputs-upload:hover .libs-ui-components-inputs-upload-description,:host ::ng-deep .libs-ui-components-inputs-upload.libs-ui-components-inputs-upload-drag-over .libs-ui-components-inputs-upload-description{color:#cdd0d6}:host ::ng-deep .libs-ui-components-inputs-upload:hover .libs-ui-components-inputs-upload-description span,:host ::ng-deep .libs-ui-components-inputs-upload.libs-ui-components-inputs-upload-drag-over .libs-ui-components-inputs-upload-description span{color:#cdd0d6}:host ::ng-deep .libs-ui-components-inputs-upload-disable{cursor:default!important;text-decoration:none;pointer-events:none;background-color:var(--libs-ui-background-disable, #f8f9fa)!important;border:1px dashed #e6e7ea!important}:host ::ng-deep .libs-ui-components-inputs-upload-disable .libs-ui-components-inputs-upload-icon:before{color:var(--libs-ui-text-disable, #9ca2ad)}:host ::ng-deep .libs-ui-components-inputs-upload-disable .libs-ui-components-inputs-upload-description{color:var(--libs-ui-text-disable, #9ca2ad)}:host ::ng-deep .libs-ui-components-inputs-upload-disable .libs-ui-components-inputs-upload-description span{color:var(--libs-ui-text-disable, #9ca2ad)}:host ::ng-deep .libs-ui-components-inputs-upload-readonly{cursor:default!important;text-decoration:none;pointer-events:none;background-color:var(--libs-ui-backgrond-realonly, #f8f9fa)!important;border:1px dashed #e6e7ea!important}:host ::ng-deep .libs-ui-components-inputs-upload-readonly .libs-ui-components-inputs-upload-icon:before{color:#cdd0d6}:host ::ng-deep .libs-ui-components-inputs-upload-readonly .libs-ui-components-inputs-upload-description{color:var(--libs-ui-text-realonly, #071631)}:host ::ng-deep .libs-ui-components-inputs-upload-readonly .libs-ui-components-inputs-upload-description span{color:var(--libs-ui-text-realonly, #071631)}:host ::ng-deep .libs-ui-components-inputs-upload-error{background-color:#fef5f6!important;border:1px dashed #ee2d41!important}:host ::ng-deep .libs-ui-components-inputs-upload-error .libs-ui-components-inputs-upload-icon:before{color:#cdd0d6}:host ::ng-deep .libs-ui-components-inputs-upload-error .libs-ui-components-inputs-upload-description{color:#cdd0d6}:host ::ng-deep .libs-ui-components-inputs-upload-error .libs-ui-components-inputs-upload-description span{color:#cdd0d6}:host ::ng-deep .libs-ui-components-inputs-upload-file-full{background-color:#fff;padding:8px 12px}:host ::ng-deep .libs-ui-components-inputs-upload-file-short{background-color:#f4f8ff;padding:6px 12px}.libs-ui-components-inputs-upload-view-list{overflow-y:auto;max-height:100%;padding:0 10px}.libs-ui-components-inputs-upload-view-list .libs-ui-components-inputs-upload-view-list-item{width:100%;display:flex;align-items:center;justify-content:center;border-radius:4px;margin-bottom:8px}.libs-ui-components-inputs-upload-view-list .libs-ui-components-inputs-upload-view-list-item:hover{background-color:#f8f9fa}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsLabelComponent, selector: "libs_ui-components-label", inputs: ["iconPopoverClass", "classInclude", "labelLeft", "labelLeftClass", "labelLeftBehindToggleButton", "popover", "required", "buttonsLeft", "disableButtonsLeft", "buttonsRight", "disableButtonsRight", "labelRight", "labelRightClass", "labelRightRequired", "hasToggle", "toggleSize", "toggleActive", "toggleDisable", "description", "descriptionClass", "buttonsDescription", "disableButtonsDescription", "buttonsDescriptionContainerClass", "onlyShowCount", "zIndexPopover", "timerDestroyPopover", "count", "limitLength"], outputs: ["outClickButton", "outSwitchEvent", "outLabelRightClick", "outLabelLeftClick"] }, { kind: "component", type: LibsUiComponentsInputsUploadAvatarComponent, selector: "libs_ui-components-inputs-upload-avatar", inputs: ["item", "showVideoDuration", "disable", "size"], outputs: ["itemChange", "outOpenPreview"] }, { kind: "directive", type: LibsUiComponentsScrollOverlayDirective, selector: "[LibsUiComponentsScrollOverlayDirective]", inputs: ["debugMode", "ignoreInit", "classContainer", "options", "elementCheckScrollX", "elementCheckScrollY", "elementScroll"], outputs: ["outScroll", "outScrollX", "outScrollY", "outScrollTop", "outScrollBottom"] }, { kind: "directive", type: LibsUiComponentsInputsUploadDirective, selector: "[LibsUiComponentsInputsUploadDirective]", inputs: ["multiple", "accessFiles"], outputs: ["outUploadFiles", "outUploadFile"] }, { kind: "directive", type: LibsUiComponentsInputsUploadDropFileDirective, selector: "[LibsUiComponentsInputsUploadDropFileDirective]", inputs: ["multiple"], outputs: ["outDragOver", "outDragLeave", "outDrop", "outDropFiles", "outDropFile"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsInputsUploadComponent, isStandalone: true, selector: "libs_ui-components-inputs-upload", inputs: { originFiles: { classPropertyName: "originFiles", publicName: "originFiles", isSignal: true, isRequired: false, transformFunction: null }, fileType: { classPropertyName: "fileType", publicName: "fileType", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, canUploadIfHasExistFile: { classPropertyName: "canUploadIfHasExistFile", publicName: "canUploadIfHasExistFile", isSignal: true, isRequired: false, transformFunction: null }, canSetAvatar: { classPropertyName: "canSetAvatar", publicName: "canSetAvatar", isSignal: true, isRequired: false, transformFunction: null }, limitFile: { classPropertyName: "limitFile", publicName: "limitFile", isSignal: true, isRequired: false, transformFunction: null }, maxTotalSize: { classPropertyName: "maxTotalSize", publicName: "maxTotalSize", isSignal: true, isRequired: false, transformFunction: null }, maxImageSize: { classPropertyName: "maxImageSize", publicName: "maxImageSize", isSignal: true, isRequired: false, transformFunction: null }, maxVideoSize: { classPropertyName: "maxVideoSize", publicName: "maxVideoSize", isSignal: true, isRequired: false, transformFunction: null }, maxDocumentSize: { classPropertyName: "maxDocumentSize", publicName: "maxDocumentSize", isSignal: true, isRequired: false, transformFunction: null }, maxAudioSize: { classPropertyName: "maxAudioSize", publicName: "maxAudioSize", isSignal: true, isRequired: false, transformFunction: null }, imageExtList: { classPropertyName: "imageExtList", publicName: "imageExtList", isSignal: true, isRequired: false, transformFunction: null }, videoExtList: { classPropertyName: "videoExtList", publicName: "videoExtList", isSignal: true, isRequired: false, transformFunction: null }, documentExtList: { classPropertyName: "documentExtList", publicName: "documentExtList", isSignal: true, isRequired: false, transformFunction: null }, audioExtList: { classPropertyName: "audioExtList", publicName: "audioExtList", isSignal: true, isRequired: false, transformFunction: null }, classIncludeListItem: { classPropertyName: "classIncludeListItem", publicName: "classIncludeListItem", isSignal: true, isRequired: false, transformFunction: null }, validRequired: { classPropertyName: "validRequired", publicName: "validRequired", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, ignoreShowSizeFile: { classPropertyName: "ignoreShowSizeFile", publicName: "ignoreShowSizeFile", isSignal: true, isRequired: false, transformFunction: null }, allowShowPushMessageMaxSizeError: { classPropertyName: "allowShowPushMessageMaxSizeError", publicName: "allowShowPushMessageMaxSizeError", isSignal: true, isRequired: false, transformFunction: null }, messageTypeFileError: { classPropertyName: "messageTypeFileError", publicName: "messageTypeFileError", isSignal: true, isRequired: false, transformFunction: null }, messageMaxSizeError: { classPropertyName: "messageMaxSizeError", publicName: "messageMaxSizeError", isSignal: true, isRequired: false, transformFunction: null }, messageFileUploadError: { classPropertyName: "messageFileUploadError", publicName: "messageFileUploadError", isSignal: true, isRequired: false, transformFunction: null }, messageTotalFileExceedsError: { classPropertyName: "messageTotalFileExceedsError", publicName: "messageTotalFileExceedsError", isSignal: true, isRequired: false, transformFunction: null }, configDescriptionInputUpload: { classPropertyName: "configDescriptionInputUpload", publicName: "configDescriptionInputUpload", isSignal: true, isRequired: false, transformFunction: null }, modeDisplayFile: { classPropertyName: "modeDisplayFile", publicName: "modeDisplayFile", isSignal: true, isRequired: false, transformFunction: null }, descriptionFormatAndSizeFile: { classPropertyName: "descriptionFormatAndSizeFile", publicName: "descriptionFormatAndSizeFile", isSignal: true, isRequired: false, transformFunction: null }, showVideoDuration: { classPropertyName: "showVideoDuration", publicName: "showVideoDuration", isSignal: true, isRequired: false, transformFunction: null }, labelConfig: { classPropertyName: "labelConfig", publicName: "labelConfig", isSignal: true, isRequired: false, transformFunction: null }, showPopupUploadWhenHasFileAndModeSingle: { classPropertyName: "showPopupUploadWhenHasFileAndModeSingle", publicName: "showPopupUploadWhenHasFileAndModeSingle", isSignal: true, isRequired: false, transformFunction: null }, ignoreIconRemove: { classPropertyName: "ignoreIconRemove", publicName: "ignoreIconRemove", isSignal: true, isRequired: false, transformFunction: null }, ignoreIconEdit: { classPropertyName: "ignoreIconEdit", publicName: "ignoreIconEdit", isSignal: true, isRequired: false, transformFunction: null }, ignoreIconPreview: { classPropertyName: "ignoreIconPreview", publicName: "ignoreIconPreview", isSignal: true, isRequired: false, transformFunction: null }, classIncludeFileContent: { classPropertyName: "classIncludeFileContent", publicName: "classIncludeFileContent", isSignal: true, isRequired: false, transformFunction: null }, showBorderErrorAllItemWhenError: { classPropertyName: "showBorderErrorAllItemWhenError", publicName: "showBorderErrorAllItemWhenError", isSignal: true, isRequired: false, transformFunction: null }, configDownloadSampleFile: { classPropertyName: "configDownloadSampleFile", publicName: "configDownloadSampleFile", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outClose: "outClose", outFileChanged: "outFileChanged", outFileRemoved: "outFileRemoved", outFunctionsControl: "outFunctionsControl" }, viewQueries: [{ propertyName: "uploadRef", first: true, predicate: ["upload"], descendants: true, isSignal: true }, { propertyName: "uploadInputRef", first: true, predicate: ["uploadInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex flex-col w-full h-full\">\n  <div>\n    @if (labelConfig(); as labelConfig) {\n      <libs_ui-components-label\n        [classInclude]=\"labelConfig.classInclude\"\n        [labelLeft]=\"labelConfig.labelLeft\"\n        [labelLeftClass]=\"labelConfig.labelLeftClass\"\n        [required]=\"labelConfig.required\"\n        [description]=\"labelConfig.description\"\n        [labelRight]=\"labelConfig.labelRight\"\n        [labelRightClass]=\"labelConfig.labelRightClass\"\n        [onlyShowCount]=\"labelConfig.onlyShowCount\"\n        [buttonsLeft]=\"labelConfig.buttonsLeft\"\n        [buttonsRight]=\"labelConfig.buttonsRight\"\n        [disableButtonsLeft]=\"labelConfig.disableButtonsLeft || disable() || readonly()\"\n        [disableButtonsRight]=\"labelConfig.disableButtonsRight || disable() || readonly()\"\n        [hasToggle]=\"labelConfig.hasToggle\"\n        [toggleActive]=\"labelConfig.toggleActive\"\n        [toggleDisable]=\"labelConfig.toggleDisable || disable() || readonly()\"\n        [popover]=\"labelConfig.popover\"\n        [iconPopoverClass]=\"labelConfig.iconPopoverClass\"\n        [onlyShowCount]=\"labelConfig.onlyShowCount\"\n        [limitLength]=\"labelConfig.limitLength\"\n        [buttonsDescription]=\"labelConfig.buttonsDescription\"\n        [disableButtonsDescription]=\"labelConfig.disableButtonsDescription || disable() || readonly()\"\n        [buttonsDescriptionContainerClass]=\"labelConfig.buttonsDescriptionContainerClass\"\n        [count]=\"labelConfig.count\" />\n    }\n    @if ((!configDownloadSampleFile()?.position || configDownloadSampleFile()?.position === 'top') && configDownloadSampleFile(); as configDownloadSampleFile) {\n      <libs_ui-components-buttons-button\n        [type]=\"'button-link-primary'\"\n        [classLabel]=\"'libs-ui-font-h7m'\"\n        [classInclude]=\"'!mb-[8px] !p-0'\"\n        [classIconLeft]=\"'libs-ui-icon-attachment before:!text-[12px]'\"\n        [label]=\"configDownloadSampleFile?.title || ' '\"\n        (outClick)=\"handlerDownloadSampleFile($event)\" />\n    }\n    @if (multiple() || !showPopupUploadWhenHasFileAndModeSingle() || (!fileList().length && !multiple())) {\n      <div\n        #upload\n        LibsUiComponentsInputsUploadDirective\n        LibsUiComponentsInputsUploadDropFileDirective\n        class=\"libs-ui-components-inputs-upload\"\n        [class.libs-ui-components-inputs-upload-disable]=\"disable() || readonly() || (!multiple() && fileList().length && !canUploadIfHasExistFile())\"\n        [class.libs-ui-components-inputs-upload-readonly]=\"readonly()\"\n        [class.libs-ui-components-inputs-upload-error]=\"messageError()\"\n        [multiple]=\"multiple()\"\n        [accessFiles]=\"accessFiles()\"\n        (outUploadFiles)=\"handleUploadFiles($event)\"\n        (outUploadFile)=\"handleUploadFiles([$event])\"\n        (outDragOver)=\"handlerSetClassDrag(true)\"\n        (outDragLeave)=\"handlerSetClassDrag(false)\"\n        (outDrop)=\"handlerSetClassDrag(false)\"\n        (outDropFiles)=\"handleUploadFiles($event)\"\n        (outDropFile)=\"handleUploadFiles([$event])\">\n        <div class=\"flex items-center\">\n          <div class=\"mr-[16px]\">\n            <i class=\"libs-ui-components-inputs-upload-icon libs-ui-icon-file-upload before:!text-[32px]\"></i>\n          </div>\n          <div class=\"libs-ui-components-inputs-upload-description\">\n            <div\n              class=\"mb-[4px] libs-ui-font-h6m\"\n              [innerHTML]=\"configDescriptionInputUpload().message || '' | translate: configDescriptionInputUpload().interpolateParams\"></div>\n            @for (item of descriptionFormatAndSizeFileComputed(); track item; let last = $last) {\n              <div\n                class=\"libs-ui-font-h7r\"\n                [class.mb-[4px]]=\"!last\"\n                [innerHTML]=\"item.message | translate: item.interpolateParams\"></div>\n            }\n          </div>\n        </div>\n        @if (multiple()) {\n          <input\n            #uploadInput\n            class=\"upload-input hidden\"\n            type=\"file\"\n            name=\"files[]\"\n            multiple\n            [accept]=\"accessFiles()\" />\n        } @else {\n          <input\n            #uploadInput\n            class=\"upload-input hidden\"\n            type=\"file\"\n            name=\"files[]\"\n            [accept]=\"accessFiles()\" />\n        }\n      </div>\n    }\n    @if (messageError() && (multiple() || !showPopupUploadWhenHasFileAndModeSingle() || (!fileList().length && !multiple()))) {\n      <div class=\"mt-[8px] text-[#ee2d41] libs-ui-font-h7r\">\n        {{ messageError() || '' | translate: { value: limitFile() } }}\n      </div>\n    }\n    @if (configDownloadSampleFile()?.position === 'bottom' && configDownloadSampleFile(); as configDownloadSampleFile) {\n      <libs_ui-components-buttons-button\n        [type]=\"'button-link-primary'\"\n        [classLabel]=\"'libs-ui-font-h7m'\"\n        [classInclude]=\"'!mt-[8px] !p-0'\"\n        [classIconLeft]=\"'libs-ui-icon-attachment before:!text-[12px]'\"\n        [label]=\"configDownloadSampleFile.title || ' '\"\n        (moClick)=\"handlerDownloadSampleFile($event)\" />\n    }\n  </div>\n  @if (fileList().length) {\n    <div\n      LibsUiComponentsScrollOverlayDirective\n      class=\"relative w-full h-full px-[10px] libs-ui-components-inputs-upload-view-list {{ classIncludeFileContent() || '' }}\"\n      [class.mt-[12px]]=\"multiple() || !showPopupUploadWhenHasFileAndModeSingle()\">\n      <ng-content select=\"[label-file]\"></ng-content>\n      @for (item of fileList(); track item(); let first = $first) {\n        <div\n          class=\"libs-ui-components-inputs-upload-view-list-item {{ classIncludeListItem() || '' }}\"\n          [class.libs-ui-components-inputs-upload-file-full]=\"modeDisplayFile() === 'full'\"\n          [class.libs-ui-components-inputs-upload-file-short]=\"modeDisplayFile() === 'short'\"\n          [class.libs-ui-border-error-general]=\"item().error || (messageError() && showBorderErrorAllItemWhenError())\"\n          [class.mt-0]=\"first && !multiple() && !showPopupUploadWhenHasFileAndModeSingle()\">\n          <div class=\"flex w-full\">\n            <div class=\"flex items-center\">\n              @if (canSetAvatar() && item().type === 'image') {\n                <libs_ui-components-buttons-button\n                  [type]=\"'button-link-third'\"\n                  [classIconLeft]=\"\n                    '!mr-0' + (item().isAvatar ? ' libs-ui-icon-check-circle-solid before:!text-[#00bc62]' : ' libs-ui-icon-check-circle-outline') + (disable() || readonly() || item().isUploading || !!item().error ? ' libs-ui-disable' : '')\n                  \"\n                  [popover]=\"{ config: { content: item().isAvatar ? 'i18n_avatar' : 'i18n_choose_as_your_avatar', zIndex: zIndex() } }\"\n                  [classInclude]=\"'!mr-[12px] !p-0'\"\n                  [disable]=\"disable() || readonly() || item().isUploading || !!item().error\"\n                  (outClick)=\"handlerSetAvatar($event, item)\" />\n              }\n            </div>\n            <div\n              class=\"flex\"\n              [class.w-[calc(100%-28px)]]=\"canSetAvatar()\"\n              [class.w-full]=\"!canSetAvatar()\">\n              @if (modeDisplayFile() === 'full') {\n                <libs_ui-components-inputs-upload-avatar\n                  [disable]=\"disable() || readonly()\"\n                  [(item)]=\"item\"\n                  [showVideoDuration]=\"showVideoDuration()\"\n                  (outOpenPreview)=\"handlerOpenPreviewFile($event)\" />\n              }\n              <div class=\"relative w-full\">\n                <div\n                  class=\"flex absolute w-full h-full flex-col\"\n                  [class.flex-col]=\"modeDisplayFile() === 'full'\"\n                  [class.justify-center]=\"modeDisplayFile() === 'full'\"\n                  [class.items-center]=\"modeDisplayFile() === 'short'\">\n                  <libs_ui-components-label\n                    class=\"flex w-full\"\n                    [labelLeft]=\"item().name\"\n                    [zIndexPopover]=\"zIndex() + 1\"\n                    [labelLeftClass]=\"'libs-ui-font-h6m ' + (disable() || readonly() || item().isUploading || item().error ? 'text-[#6a7383]' : 'text-[#071631]')\"\n                    [classInclude]=\"modeDisplayFile() === 'short' ? '!mb-0' : ''\" />\n\n                  @if (!ignoreShowSizeFile()) {\n                    <div\n                      class=\"text-[#9ca2ad] libs-ui-font-h7r shrink-0\"\n                      [class.flex]=\"modeDisplayFile() === 'full'\"\n                      [class.items-center]=\"modeDisplayFile() === 'short'\"\n                      [class.ml-[12px]]=\"modeDisplayFile() === 'short'\">\n                      {{ item().size }}\n                    </div>\n                  }\n                </div>\n              </div>\n              @if (item().isUploading && item().percentUploading) {\n                <div\n                  class=\"flex items-center ml-[16px]\"\n                  [class.mr-[26px]]=\"modeDisplayFile() === 'full'\">\n                  <div class=\"w-[120px] h-[4px] rounded-[4px] bg-[#f8f9fa] relative\">\n                    <div\n                      class=\"absolute top-0 left-0 h-[4px] rounded-[4px] bg-[#00bc62]\"\n                      [style.width.px]=\"(item().percentUploading ?? 0) * 1.2\"></div>\n                  </div>\n                </div>\n              }\n            </div>\n          </div>\n\n          <div class=\"flex ml-[16px]\">\n            @if (!ignoreIconPreview()) {\n              <libs_ui-components-buttons-button\n                [type]=\"'button-link-third'\"\n                [classIconLeft]=\"'libs-ui-icon-eye-outline !mr-0'\"\n                [popover]=\"{ config: { content: 'i18n_preview', zIndex: zIndex() + 1 } }\"\n                [classInclude]=\"'!p-0' + (ignoreIconRemove() && !ignoreIconEdit() ? '' : ' !mr-[12px]')\"\n                [disable]=\"item().isUploading || disable() || readonly()\"\n                (outClick)=\"handlerOpenPreviewFile(item())\" />\n            }\n            @if (item().type === 'image' && !item().error && !ignoreIconEdit()) {\n              <libs_ui-components-buttons-button\n                [type]=\"'button-link-third'\"\n                [classIconLeft]=\"'libs-ui-icon-edit-line !mr-0'\"\n                [popover]=\"{ config: { content: 'i18n_edit', zIndex: zIndex() + 1 } }\"\n                [classInclude]=\"'!p-0' + (ignoreIconRemove() ? '' : ' !mr-[12px]')\"\n                [disable]=\"item().isUploading || disable() || readonly()\"\n                (outClick)=\"handlerEditImage($event, item)\" />\n            }\n            @if (!ignoreIconRemove()) {\n              <libs_ui-components-buttons-button\n                [type]=\"'button-link-third'\"\n                [classIconLeft]=\"'libs-ui-icon-close !mr-0'\"\n                [popover]=\"{ config: { content: 'i18n_delete', zIndex: zIndex() + 1 } }\"\n                [classInclude]=\"'!p-0'\"\n                [disable]=\"item().isUploading || disable() || readonly()\"\n                (outClick)=\"handlerRemoveFile($event, item)\" />\n            }\n          </div>\n        </div>\n        @if (item().error && (multiple() || showPopupUploadWhenHasFileAndModeSingle())) {\n          <div class=\"mt-[8px] text-[#ee2d41] libs-ui-font-h7r\">{{ item().error || ' ' | translate }}</div>\n        }\n      }\n    </div>\n  }\n</div>\n", styles: [":host ::ng-deep .libs-ui-components-inputs-upload{width:100%;padding:16px;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;background-color:#fff;border:1px dashed #e6e7ea}:host ::ng-deep .libs-ui-components-inputs-upload .libs-ui-components-inputs-upload-icon:before{color:#9ca2ad}:host ::ng-deep .libs-ui-components-inputs-upload .libs-ui-components-inputs-upload-description{color:#9ca2ad}:host ::ng-deep .libs-ui-components-inputs-upload .libs-ui-components-inputs-upload-description span{color:var(--libs-ui-color-default, #226ff5)}:host ::ng-deep .libs-ui-components-inputs-upload:hover,:host ::ng-deep .libs-ui-components-inputs-upload.libs-ui-components-inputs-upload-drag-over{background-color:var(--libs-ui-color-light-3, #f4f8ff);border:1px dashed var(--libs-ui-color-light-1, #226ff5)}:host ::ng-deep .libs-ui-components-inputs-upload:hover .libs-ui-components-inputs-upload-icon:before,:host ::ng-deep .libs-ui-components-inputs-upload.libs-ui-components-inputs-upload-drag-over .libs-ui-components-inputs-upload-icon:before{color:#cdd0d6}:host ::ng-deep .libs-ui-components-inputs-upload:hover .libs-ui-components-inputs-upload-description,:host ::ng-deep .libs-ui-components-inputs-upload.libs-ui-components-inputs-upload-drag-over .libs-ui-components-inputs-upload-description{color:#cdd0d6}:host ::ng-deep .libs-ui-components-inputs-upload:hover .libs-ui-components-inputs-upload-description span,:host ::ng-deep .libs-ui-components-inputs-upload.libs-ui-components-inputs-upload-drag-over .libs-ui-components-inputs-upload-description span{color:#cdd0d6}:host ::ng-deep .libs-ui-components-inputs-upload-disable{cursor:default!important;text-decoration:none;pointer-events:none;background-color:var(--libs-ui-background-disable, #f8f9fa)!important;border:1px dashed #e6e7ea!important}:host ::ng-deep .libs-ui-components-inputs-upload-disable .libs-ui-components-inputs-upload-icon:before{color:var(--libs-ui-text-disable, #9ca2ad)}:host ::ng-deep .libs-ui-components-inputs-upload-disable .libs-ui-components-inputs-upload-description{color:var(--libs-ui-text-disable, #9ca2ad)}:host ::ng-deep .libs-ui-components-inputs-upload-disable .libs-ui-components-inputs-upload-description span{color:var(--libs-ui-text-disable, #9ca2ad)}:host ::ng-deep .libs-ui-components-inputs-upload-readonly{cursor:default!important;text-decoration:none;pointer-events:none;background-color:var(--libs-ui-backgrond-realonly, #f8f9fa)!important;border:1px dashed #e6e7ea!important}:host ::ng-deep .libs-ui-components-inputs-upload-readonly .libs-ui-components-inputs-upload-icon:before{color:#cdd0d6}:host ::ng-deep .libs-ui-components-inputs-upload-readonly .libs-ui-components-inputs-upload-description{color:var(--libs-ui-text-realonly, #071631)}:host ::ng-deep .libs-ui-components-inputs-upload-readonly .libs-ui-components-inputs-upload-description span{color:var(--libs-ui-text-realonly, #071631)}:host ::ng-deep .libs-ui-components-inputs-upload-error{background-color:#fef5f6!important;border:1px dashed #ee2d41!important}:host ::ng-deep .libs-ui-components-inputs-upload-error .libs-ui-components-inputs-upload-icon:before{color:#cdd0d6}:host ::ng-deep .libs-ui-components-inputs-upload-error .libs-ui-components-inputs-upload-description{color:#cdd0d6}:host ::ng-deep .libs-ui-components-inputs-upload-error .libs-ui-components-inputs-upload-description span{color:#cdd0d6}:host ::ng-deep .libs-ui-components-inputs-upload-file-full{background-color:#fff;padding:8px 12px}:host ::ng-deep .libs-ui-components-inputs-upload-file-short{background-color:#f4f8ff;padding:6px 12px}.libs-ui-components-inputs-upload-view-list{overflow-y:auto;max-height:100%;padding:0 10px}.libs-ui-components-inputs-upload-view-list .libs-ui-components-inputs-upload-view-list-item{width:100%;display:flex;align-items:center;justify-content:center;border-radius:4px;margin-bottom:8px}.libs-ui-components-inputs-upload-view-list .libs-ui-components-inputs-upload-view-list-item:hover{background-color:#f8f9fa}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsLabelComponent, selector: "libs_ui-components-label", inputs: ["iconPopoverClass", "classInclude", "labelLeft", "labelLeftClass", "labelLeftBehindToggleButton", "popover", "required", "buttonsLeft", "disableButtonsLeft", "buttonsRight", "disableButtonsRight", "labelRight", "labelRightClass", "labelRightRequired", "hasToggle", "toggleSize", "toggleActive", "toggleDisable", "description", "descriptionClass", "buttonsDescription", "disableButtonsDescription", "buttonsDescriptionContainerClass", "onlyShowCount", "zIndexPopover", "timerDestroyPopover", "count", "limitLength"], outputs: ["outClickButton", "outSwitchEvent", "outLabelRightClick", "outLabelLeftClick"] }, { kind: "component", type: LibsUiComponentsInputsUploadAvatarComponent, selector: "libs_ui-components-inputs-upload-avatar", inputs: ["item", "showVideoDuration", "disable", "size"], outputs: ["itemChange", "outOpenPreview"] }, { kind: "directive", type: LibsUiComponentsScrollOverlayDirective, selector: "[LibsUiComponentsScrollOverlayDirective]", inputs: ["debugMode", "ignoreInit", "classContainer", "options", "elementCheckScrollX", "elementCheckScrollY", "elementScroll"], outputs: ["outScroll", "outScrollX", "outScrollY", "outScrollTop", "outScrollBottom"] }, { kind: "directive", type: LibsUiComponentsInputsUploadDirective, selector: "[LibsUiComponentsInputsUploadDirective]", inputs: ["multiple", "accessFiles"], outputs: ["outUploadFiles", "outUploadFile"] }, { kind: "directive", type: LibsUiComponentsInputsUploadDropFileDirective, selector: "[LibsUiComponentsInputsUploadDropFileDirective]", inputs: ["multiple"], outputs: ["outDragOver", "outDragLeave", "outDrop", "outDropFiles", "outDropFile"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsInputsUploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'libs_ui-components-inputs-upload', standalone: true, imports: [TranslateModule,
+            args: [{ selector: 'libs_ui-components-inputs-upload', standalone: true, imports: [
+                        TranslateModule,
                         LibsUiComponentsButtonsButtonComponent,
                         LibsUiComponentsLabelComponent,
                         LibsUiComponentsInputsUploadAvatarComponent,
                         LibsUiComponentsScrollOverlayDirective,
                         LibsUiComponentsInputsUploadDirective,
-                        LibsUiComponentsInputsUploadDropFileDirective
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col w-full h-full\">\n  <div>\n    @if (labelConfig();as labelConfig) {\n      <libs_ui-components-label [classInclude]=\"labelConfig.classInclude\"\n        [labelLeft]=\"labelConfig.labelLeft\"\n        [labelLeftClass]=\"labelConfig.labelLeftClass\"\n        [required]=\"labelConfig.required \"\n        [description]=\"labelConfig.description\"\n        [labelRight]=\"labelConfig.labelRight\"\n        [labelRightClass]=\"labelConfig.labelRightClass\"\n        [onlyShowCount]=\"labelConfig.onlyShowCount\"\n        [buttonsLeft]=\"labelConfig.buttonsLeft\"\n        [buttonsRight]=\"labelConfig.buttonsRight\"\n        [disableButtonsLeft]=\"labelConfig.disableButtonsLeft || disable() || readonly() \"\n        [disableButtonsRight]=\"labelConfig.disableButtonsRight || disable() || readonly() \"\n        [hasToggle]=\"labelConfig.hasToggle\"\n        [toggleActive]=\"labelConfig.toggleActive\"\n        [toggleDisable]=\"labelConfig.toggleDisable || disable() || readonly() \"\n        [popover]=\"labelConfig.popover\"\n        [iconPopoverClass]=\"labelConfig.iconPopoverClass\"\n        [onlyShowCount]=\"labelConfig.onlyShowCount\"\n        [limitLength]=\"labelConfig.limitLength\"\n        [buttonsDescription]=\"labelConfig.buttonsDescription\"\n        [disableButtonsDescription]=\"labelConfig.disableButtonsDescription || disable() || readonly() \"\n        [buttonsDescriptionContainerClass]=\"labelConfig.buttonsDescriptionContainerClass\"\n        [count]=\"labelConfig.count\" />\n    }\n    @if ((!configDownloadSampleFile()?.position || configDownloadSampleFile()?.position === 'top') && configDownloadSampleFile();as configDownloadSampleFile) {\n      <libs_ui-components-buttons-button [type]=\"'button-link-primary'\"\n        [classLabel]=\"'libs-ui-font-h7m'\"\n        [classInclude]=\"'!mb-[8px] !p-0'\"\n        [classIconLeft]=\"'libs-ui-icon-attachment before:!text-[12px]'\"\n        [label]=\"configDownloadSampleFile?.title || ' '\"\n        (outClick)=\"handlerDownloadSampleFile($event)\" />\n    }\n    @if (multiple() || !showPopupUploadWhenHasFileAndModeSingle() || (!fileList().length && !multiple())) {\n      <div #upload\n        LibsUiComponentsInputsUploadDirective\n        LibsUiComponentsInputsUploadDropFileDirective\n        class=\"libs-ui-components-inputs-upload\"\n        [class.libs-ui-components-inputs-upload-disable]=\"disable() || readonly()  || (!multiple() && fileList().length && !canUploadIfHasExistFile())\"\n        [class.libs-ui-components-inputs-upload-readonly]=\"readonly()\"\n        [class.libs-ui-components-inputs-upload-error]=\"messageError()\"\n        [multiple]=\"multiple()\"\n        [accessFiles]=\"accessFiles()\"\n        (outUploadFiles)=\"handleUploadFiles($event)\"\n        (outUploadFile)=\"handleUploadFiles([$event])\"\n        (outDragOver)=\"handlerSetClassDrag(true)\"\n        (outDragLeave)=\"handlerSetClassDrag(false)\"\n        (outDrop)=\"handlerSetClassDrag(false)\"\n        (outDropFiles)=\"handleUploadFiles($event)\"\n        (outDropFile)=\"handleUploadFiles([$event])\">\n        <div class=\"flex items-center\">\n          <div class=\"mr-[16px]\">\n            <i class=\"libs-ui-components-inputs-upload-icon libs-ui-icon-file-upload before:!text-[32px]\"></i>\n          </div>\n          <div class=\"libs-ui-components-inputs-upload-description\">\n            <div class=\"mb-[4px] libs-ui-font-h6m\"\n              [innerHTML]=\"(configDescriptionInputUpload().message || '') | translate:configDescriptionInputUpload().interpolateParams\">\n            </div>\n            @for (item of descriptionFormatAndSizeFileComputed(); track item; let last = $last) {\n              <div class=\"libs-ui-font-h7r\"\n                [class.mb-[4px]]=\"!last\"\n                [innerHTML]=\"item.message | translate:item.interpolateParams\">\n              </div>\n            }\n          </div>\n        </div>\n        @if (multiple()) {\n          <input #uploadInput\n            class=\"upload-input hidden\"\n            type=\"file\"\n            name=\"files[]\"\n            multiple\n            [accept]=\"accessFiles()\" />\n        } @else {\n          <input #uploadInput\n            class=\"upload-input hidden\"\n            type=\"file\"\n            name=\"files[]\"\n            [accept]=\"accessFiles()\" />\n        }\n      </div>\n    }\n    @if (messageError() && (multiple() || !showPopupUploadWhenHasFileAndModeSingle() || (!fileList().length && !multiple()))) {\n      <div class=\"mt-[8px] text-[#ee2d41] libs-ui-font-h7r\">\n        {{ (messageError() || '') | translate:{ value: limitFile() } }}\n      </div>\n    }\n    @if (configDownloadSampleFile()?.position === 'bottom' &&  configDownloadSampleFile();as configDownloadSampleFile) {\n      <libs_ui-components-buttons-button [type]=\"'button-link-primary'\"\n        [classLabel]=\"'libs-ui-font-h7m'\"\n        [classInclude]=\"'!mt-[8px] !p-0'\"\n        [classIconLeft]=\"'libs-ui-icon-attachment before:!text-[12px]'\"\n        [label]=\"configDownloadSampleFile.title || ' '\"\n        (moClick)=\"handlerDownloadSampleFile($event)\" />\n    }\n  </div>\n  @if (fileList().length) {\n    <div LibsUiComponentsScrollOverlayDirective\n      class=\"relative w-full h-full px-[10px] libs-ui-components-inputs-upload-view-list {{ classIncludeFileContent() || '' }}\"\n      [class.mt-[12px]]=\"multiple() || !showPopupUploadWhenHasFileAndModeSingle()\">\n      <ng-content select=\"[label-file]\"></ng-content>\n      @for (item of fileList(); track item(); let first = $first) {\n        <div class=\"libs-ui-components-inputs-upload-view-list-item {{ classIncludeListItem() || '' }}\"\n          [class.libs-ui-components-inputs-upload-file-full]=\"modeDisplayFile() === 'full'\"\n          [class.libs-ui-components-inputs-upload-file-short]=\"modeDisplayFile() === 'short'\"\n          [class.libs-ui-border-error-general]=\"item().error || (messageError() && showBorderErrorAllItemWhenError())\"\n          [class.mt-0]=\"first && !multiple() && !showPopupUploadWhenHasFileAndModeSingle()\">\n\n          <div class=\"flex w-full\">\n            <div class=\"flex items-center\">\n              @if (canSetAvatar() && item().type === 'image') {\n                <libs_ui-components-buttons-button [type]=\"'button-link-third'\"\n                  [classIconLeft]=\"'!mr-0' + (item().isAvatar ? ' libs-ui-icon-check-circle-solid before:!text-[#00bc62]': ' libs-ui-icon-check-circle-outline') + ((disable() || readonly()  || item().isUploading || !!item().error) ? ' libs-ui-disable' : '')\"\n                  [popover]=\"{config:{ content: item().isAvatar ? 'i18n_avatar' : 'i18n_choose_as_your_avatar', zIndex: zIndex()}}\"\n                  [classInclude]=\"'!mr-[12px] !p-0'\"\n                  [disable]=\"disable() || readonly()  || item().isUploading || !!item().error\"\n                  (outClick)=\"handlerSetAvatar($event, item)\" />\n              }\n            </div>\n            <div class=\"flex\"\n              [class.w-[calc(100%-28px)]]=\"canSetAvatar()\"\n              [class.w-full]=\"!canSetAvatar()\">\n              @if (modeDisplayFile() === 'full') {\n                <libs_ui-components-inputs-upload-avatar [disable]=\"disable() || readonly() \"\n                  [(item)]=\"item\"\n                  [showVideoDuration]=\"showVideoDuration()\"\n                  (outOpenPreview)=\"handlerOpenPreviewFile($event)\" />\n              }\n              <div class=\"relative w-full\">\n                <div class=\"flex absolute w-full h-full flex-col\"\n                  [class.flex-col]=\"modeDisplayFile() === 'full'\"\n                  [class.justify-center]=\"modeDisplayFile() === 'full'\"\n                  [class.items-center]=\"modeDisplayFile() === 'short'\">\n                  <libs_ui-components-label class=\"flex w-full\"\n                    [labelLeft]=\"item().name\"\n                    [zIndexPopover]=\"zIndex() + 1\"\n                    [labelLeftClass]=\"'libs-ui-font-h6m ' + ((disable() || readonly()  || item().isUploading || item().error) ? 'text-[#6a7383]' : 'text-[#071631]')\"\n                    [classInclude]=\"modeDisplayFile() === 'short' ? '!mb-0' : ''\" />\n\n                  @if (!ignoreShowSizeFile()) {\n                    <div class=\"text-[#9ca2ad] libs-ui-font-h7r shrink-0\"\n                      [class.flex]=\"modeDisplayFile() === 'full'\"\n                      [class.items-center]=\"modeDisplayFile() === 'short'\"\n                      [class.ml-[12px]]=\"modeDisplayFile() === 'short'\">\n                      {{ item().size }}\n                    </div>\n                  }\n                </div>\n              </div>\n              @if (item().isUploading && item().percentUploading) {\n                <div class=\"flex items-center ml-[16px]\"\n                  [class.mr-[26px]]=\"modeDisplayFile() === 'full'\">\n                  <div class=\"w-[120px] h-[4px] rounded-[4px] bg-[#f8f9fa] relative\">\n                    <div class=\"absolute top-0 left-0 h-[4px] rounded-[4px] bg-[#00bc62]\"\n                      [style.width.px]=\"(item().percentUploading ?? 0)*1.2\"></div>\n                  </div>\n                </div>\n              }\n            </div>\n          </div>\n\n          <div class=\"flex ml-[16px]\">\n            @if (!ignoreIconPreview()) {\n              <libs_ui-components-buttons-button [type]=\"'button-link-third'\"\n                [classIconLeft]=\"'libs-ui-icon-eye-outline !mr-0'\"\n                [popover]=\"{config:{ content: 'i18n_preview', zIndex: zIndex()+1}}\"\n                [classInclude]=\"'!p-0' + (ignoreIconRemove() && !ignoreIconEdit() ? '' : ' !mr-[12px]')\"\n                [disable]=\"item().isUploading || disable() || readonly() \"\n                (outClick)=\"handlerOpenPreviewFile(item())\" />\n            }\n            @if (item().type === 'image' && !item().error && !ignoreIconEdit()) {\n              <libs_ui-components-buttons-button [type]=\"'button-link-third'\"\n                [classIconLeft]=\"'libs-ui-icon-edit-line !mr-0'\"\n                [popover]=\"{config:{ content: 'i18n_edit', zIndex: zIndex()+1}}\"\n                [classInclude]=\"'!p-0' + (ignoreIconRemove() ? '' : ' !mr-[12px]')\"\n                [disable]=\"item().isUploading || disable() || readonly() \"\n                (outClick)=\"handlerEditImage($event, item)\" />\n            }\n            @if (!ignoreIconRemove()) {\n              <libs_ui-components-buttons-button [type]=\"'button-link-third'\"\n                [classIconLeft]=\"'libs-ui-icon-close !mr-0'\"\n                [popover]=\"{config: {content: 'i18n_delete', zIndex: zIndex()+1}}\"\n                [classInclude]=\"'!p-0'\"\n                [disable]=\"item().isUploading || disable() || readonly() \"\n                (outClick)=\"handlerRemoveFile($event, item)\" />\n            }\n          </div>\n        </div>\n        @if (item().error && (multiple() || showPopupUploadWhenHasFileAndModeSingle())) {\n          <div class=\"mt-[8px] text-[#ee2d41] libs-ui-font-h7r\">{{ (item().error || ' ') | translate }}</div>\n        }\n      }\n    </div>\n  }\n</div>\n", styles: [":host ::ng-deep .libs-ui-components-inputs-upload{width:100%;padding:16px;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;background-color:#fff;border:1px dashed #e6e7ea}:host ::ng-deep .libs-ui-components-inputs-upload .libs-ui-components-inputs-upload-icon:before{color:#9ca2ad}:host ::ng-deep .libs-ui-components-inputs-upload .libs-ui-components-inputs-upload-description{color:#9ca2ad}:host ::ng-deep .libs-ui-components-inputs-upload .libs-ui-components-inputs-upload-description span{color:var(--libs-ui-color-default, #226ff5)}:host ::ng-deep .libs-ui-components-inputs-upload:hover,:host ::ng-deep .libs-ui-components-inputs-upload.libs-ui-components-inputs-upload-drag-over{background-color:var(--libs-ui-color-light-3, #f4f8ff);border:1px dashed var(--libs-ui-color-light-1, #226ff5)}:host ::ng-deep .libs-ui-components-inputs-upload:hover .libs-ui-components-inputs-upload-icon:before,:host ::ng-deep .libs-ui-components-inputs-upload.libs-ui-components-inputs-upload-drag-over .libs-ui-components-inputs-upload-icon:before{color:#cdd0d6}:host ::ng-deep .libs-ui-components-inputs-upload:hover .libs-ui-components-inputs-upload-description,:host ::ng-deep .libs-ui-components-inputs-upload.libs-ui-components-inputs-upload-drag-over .libs-ui-components-inputs-upload-description{color:#cdd0d6}:host ::ng-deep .libs-ui-components-inputs-upload:hover .libs-ui-components-inputs-upload-description span,:host ::ng-deep .libs-ui-components-inputs-upload.libs-ui-components-inputs-upload-drag-over .libs-ui-components-inputs-upload-description span{color:#cdd0d6}:host ::ng-deep .libs-ui-components-inputs-upload-disable{cursor:default!important;text-decoration:none;pointer-events:none;background-color:var(--libs-ui-background-disable, #f8f9fa)!important;border:1px dashed #e6e7ea!important}:host ::ng-deep .libs-ui-components-inputs-upload-disable .libs-ui-components-inputs-upload-icon:before{color:var(--libs-ui-text-disable, #9ca2ad)}:host ::ng-deep .libs-ui-components-inputs-upload-disable .libs-ui-components-inputs-upload-description{color:var(--libs-ui-text-disable, #9ca2ad)}:host ::ng-deep .libs-ui-components-inputs-upload-disable .libs-ui-components-inputs-upload-description span{color:var(--libs-ui-text-disable, #9ca2ad)}:host ::ng-deep .libs-ui-components-inputs-upload-readonly{cursor:default!important;text-decoration:none;pointer-events:none;background-color:var(--libs-ui-backgrond-realonly, #f8f9fa)!important;border:1px dashed #e6e7ea!important}:host ::ng-deep .libs-ui-components-inputs-upload-readonly .libs-ui-components-inputs-upload-icon:before{color:#cdd0d6}:host ::ng-deep .libs-ui-components-inputs-upload-readonly .libs-ui-components-inputs-upload-description{color:var(--libs-ui-text-realonly, #071631)}:host ::ng-deep .libs-ui-components-inputs-upload-readonly .libs-ui-components-inputs-upload-description span{color:var(--libs-ui-text-realonly, #071631)}:host ::ng-deep .libs-ui-components-inputs-upload-error{background-color:#fef5f6!important;border:1px dashed #ee2d41!important}:host ::ng-deep .libs-ui-components-inputs-upload-error .libs-ui-components-inputs-upload-icon:before{color:#cdd0d6}:host ::ng-deep .libs-ui-components-inputs-upload-error .libs-ui-components-inputs-upload-description{color:#cdd0d6}:host ::ng-deep .libs-ui-components-inputs-upload-error .libs-ui-components-inputs-upload-description span{color:#cdd0d6}:host ::ng-deep .libs-ui-components-inputs-upload-file-full{background-color:#fff;padding:8px 12px}:host ::ng-deep .libs-ui-components-inputs-upload-file-short{background-color:#f4f8ff;padding:6px 12px}.libs-ui-components-inputs-upload-view-list{overflow-y:auto;max-height:100%;padding:0 10px}.libs-ui-components-inputs-upload-view-list .libs-ui-components-inputs-upload-view-list-item{width:100%;display:flex;align-items:center;justify-content:center;border-radius:4px;margin-bottom:8px}.libs-ui-components-inputs-upload-view-list .libs-ui-components-inputs-upload-view-list-item:hover{background-color:#f8f9fa}\n"] }]
+                        LibsUiComponentsInputsUploadDropFileDirective,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col w-full h-full\">\n  <div>\n    @if (labelConfig(); as labelConfig) {\n      <libs_ui-components-label\n        [classInclude]=\"labelConfig.classInclude\"\n        [labelLeft]=\"labelConfig.labelLeft\"\n        [labelLeftClass]=\"labelConfig.labelLeftClass\"\n        [required]=\"labelConfig.required\"\n        [description]=\"labelConfig.description\"\n        [labelRight]=\"labelConfig.labelRight\"\n        [labelRightClass]=\"labelConfig.labelRightClass\"\n        [onlyShowCount]=\"labelConfig.onlyShowCount\"\n        [buttonsLeft]=\"labelConfig.buttonsLeft\"\n        [buttonsRight]=\"labelConfig.buttonsRight\"\n        [disableButtonsLeft]=\"labelConfig.disableButtonsLeft || disable() || readonly()\"\n        [disableButtonsRight]=\"labelConfig.disableButtonsRight || disable() || readonly()\"\n        [hasToggle]=\"labelConfig.hasToggle\"\n        [toggleActive]=\"labelConfig.toggleActive\"\n        [toggleDisable]=\"labelConfig.toggleDisable || disable() || readonly()\"\n        [popover]=\"labelConfig.popover\"\n        [iconPopoverClass]=\"labelConfig.iconPopoverClass\"\n        [onlyShowCount]=\"labelConfig.onlyShowCount\"\n        [limitLength]=\"labelConfig.limitLength\"\n        [buttonsDescription]=\"labelConfig.buttonsDescription\"\n        [disableButtonsDescription]=\"labelConfig.disableButtonsDescription || disable() || readonly()\"\n        [buttonsDescriptionContainerClass]=\"labelConfig.buttonsDescriptionContainerClass\"\n        [count]=\"labelConfig.count\" />\n    }\n    @if ((!configDownloadSampleFile()?.position || configDownloadSampleFile()?.position === 'top') && configDownloadSampleFile(); as configDownloadSampleFile) {\n      <libs_ui-components-buttons-button\n        [type]=\"'button-link-primary'\"\n        [classLabel]=\"'libs-ui-font-h7m'\"\n        [classInclude]=\"'!mb-[8px] !p-0'\"\n        [classIconLeft]=\"'libs-ui-icon-attachment before:!text-[12px]'\"\n        [label]=\"configDownloadSampleFile?.title || ' '\"\n        (outClick)=\"handlerDownloadSampleFile($event)\" />\n    }\n    @if (multiple() || !showPopupUploadWhenHasFileAndModeSingle() || (!fileList().length && !multiple())) {\n      <div\n        #upload\n        LibsUiComponentsInputsUploadDirective\n        LibsUiComponentsInputsUploadDropFileDirective\n        class=\"libs-ui-components-inputs-upload\"\n        [class.libs-ui-components-inputs-upload-disable]=\"disable() || readonly() || (!multiple() && fileList().length && !canUploadIfHasExistFile())\"\n        [class.libs-ui-components-inputs-upload-readonly]=\"readonly()\"\n        [class.libs-ui-components-inputs-upload-error]=\"messageError()\"\n        [multiple]=\"multiple()\"\n        [accessFiles]=\"accessFiles()\"\n        (outUploadFiles)=\"handleUploadFiles($event)\"\n        (outUploadFile)=\"handleUploadFiles([$event])\"\n        (outDragOver)=\"handlerSetClassDrag(true)\"\n        (outDragLeave)=\"handlerSetClassDrag(false)\"\n        (outDrop)=\"handlerSetClassDrag(false)\"\n        (outDropFiles)=\"handleUploadFiles($event)\"\n        (outDropFile)=\"handleUploadFiles([$event])\">\n        <div class=\"flex items-center\">\n          <div class=\"mr-[16px]\">\n            <i class=\"libs-ui-components-inputs-upload-icon libs-ui-icon-file-upload before:!text-[32px]\"></i>\n          </div>\n          <div class=\"libs-ui-components-inputs-upload-description\">\n            <div\n              class=\"mb-[4px] libs-ui-font-h6m\"\n              [innerHTML]=\"configDescriptionInputUpload().message || '' | translate: configDescriptionInputUpload().interpolateParams\"></div>\n            @for (item of descriptionFormatAndSizeFileComputed(); track item; let last = $last) {\n              <div\n                class=\"libs-ui-font-h7r\"\n                [class.mb-[4px]]=\"!last\"\n                [innerHTML]=\"item.message | translate: item.interpolateParams\"></div>\n            }\n          </div>\n        </div>\n        @if (multiple()) {\n          <input\n            #uploadInput\n            class=\"upload-input hidden\"\n            type=\"file\"\n            name=\"files[]\"\n            multiple\n            [accept]=\"accessFiles()\" />\n        } @else {\n          <input\n            #uploadInput\n            class=\"upload-input hidden\"\n            type=\"file\"\n            name=\"files[]\"\n            [accept]=\"accessFiles()\" />\n        }\n      </div>\n    }\n    @if (messageError() && (multiple() || !showPopupUploadWhenHasFileAndModeSingle() || (!fileList().length && !multiple()))) {\n      <div class=\"mt-[8px] text-[#ee2d41] libs-ui-font-h7r\">\n        {{ messageError() || '' | translate: { value: limitFile() } }}\n      </div>\n    }\n    @if (configDownloadSampleFile()?.position === 'bottom' && configDownloadSampleFile(); as configDownloadSampleFile) {\n      <libs_ui-components-buttons-button\n        [type]=\"'button-link-primary'\"\n        [classLabel]=\"'libs-ui-font-h7m'\"\n        [classInclude]=\"'!mt-[8px] !p-0'\"\n        [classIconLeft]=\"'libs-ui-icon-attachment before:!text-[12px]'\"\n        [label]=\"configDownloadSampleFile.title || ' '\"\n        (moClick)=\"handlerDownloadSampleFile($event)\" />\n    }\n  </div>\n  @if (fileList().length) {\n    <div\n      LibsUiComponentsScrollOverlayDirective\n      class=\"relative w-full h-full px-[10px] libs-ui-components-inputs-upload-view-list {{ classIncludeFileContent() || '' }}\"\n      [class.mt-[12px]]=\"multiple() || !showPopupUploadWhenHasFileAndModeSingle()\">\n      <ng-content select=\"[label-file]\"></ng-content>\n      @for (item of fileList(); track item(); let first = $first) {\n        <div\n          class=\"libs-ui-components-inputs-upload-view-list-item {{ classIncludeListItem() || '' }}\"\n          [class.libs-ui-components-inputs-upload-file-full]=\"modeDisplayFile() === 'full'\"\n          [class.libs-ui-components-inputs-upload-file-short]=\"modeDisplayFile() === 'short'\"\n          [class.libs-ui-border-error-general]=\"item().error || (messageError() && showBorderErrorAllItemWhenError())\"\n          [class.mt-0]=\"first && !multiple() && !showPopupUploadWhenHasFileAndModeSingle()\">\n          <div class=\"flex w-full\">\n            <div class=\"flex items-center\">\n              @if (canSetAvatar() && item().type === 'image') {\n                <libs_ui-components-buttons-button\n                  [type]=\"'button-link-third'\"\n                  [classIconLeft]=\"\n                    '!mr-0' + (item().isAvatar ? ' libs-ui-icon-check-circle-solid before:!text-[#00bc62]' : ' libs-ui-icon-check-circle-outline') + (disable() || readonly() || item().isUploading || !!item().error ? ' libs-ui-disable' : '')\n                  \"\n                  [popover]=\"{ config: { content: item().isAvatar ? 'i18n_avatar' : 'i18n_choose_as_your_avatar', zIndex: zIndex() } }\"\n                  [classInclude]=\"'!mr-[12px] !p-0'\"\n                  [disable]=\"disable() || readonly() || item().isUploading || !!item().error\"\n                  (outClick)=\"handlerSetAvatar($event, item)\" />\n              }\n            </div>\n            <div\n              class=\"flex\"\n              [class.w-[calc(100%-28px)]]=\"canSetAvatar()\"\n              [class.w-full]=\"!canSetAvatar()\">\n              @if (modeDisplayFile() === 'full') {\n                <libs_ui-components-inputs-upload-avatar\n                  [disable]=\"disable() || readonly()\"\n                  [(item)]=\"item\"\n                  [showVideoDuration]=\"showVideoDuration()\"\n                  (outOpenPreview)=\"handlerOpenPreviewFile($event)\" />\n              }\n              <div class=\"relative w-full\">\n                <div\n                  class=\"flex absolute w-full h-full flex-col\"\n                  [class.flex-col]=\"modeDisplayFile() === 'full'\"\n                  [class.justify-center]=\"modeDisplayFile() === 'full'\"\n                  [class.items-center]=\"modeDisplayFile() === 'short'\">\n                  <libs_ui-components-label\n                    class=\"flex w-full\"\n                    [labelLeft]=\"item().name\"\n                    [zIndexPopover]=\"zIndex() + 1\"\n                    [labelLeftClass]=\"'libs-ui-font-h6m ' + (disable() || readonly() || item().isUploading || item().error ? 'text-[#6a7383]' : 'text-[#071631]')\"\n                    [classInclude]=\"modeDisplayFile() === 'short' ? '!mb-0' : ''\" />\n\n                  @if (!ignoreShowSizeFile()) {\n                    <div\n                      class=\"text-[#9ca2ad] libs-ui-font-h7r shrink-0\"\n                      [class.flex]=\"modeDisplayFile() === 'full'\"\n                      [class.items-center]=\"modeDisplayFile() === 'short'\"\n                      [class.ml-[12px]]=\"modeDisplayFile() === 'short'\">\n                      {{ item().size }}\n                    </div>\n                  }\n                </div>\n              </div>\n              @if (item().isUploading && item().percentUploading) {\n                <div\n                  class=\"flex items-center ml-[16px]\"\n                  [class.mr-[26px]]=\"modeDisplayFile() === 'full'\">\n                  <div class=\"w-[120px] h-[4px] rounded-[4px] bg-[#f8f9fa] relative\">\n                    <div\n                      class=\"absolute top-0 left-0 h-[4px] rounded-[4px] bg-[#00bc62]\"\n                      [style.width.px]=\"(item().percentUploading ?? 0) * 1.2\"></div>\n                  </div>\n                </div>\n              }\n            </div>\n          </div>\n\n          <div class=\"flex ml-[16px]\">\n            @if (!ignoreIconPreview()) {\n              <libs_ui-components-buttons-button\n                [type]=\"'button-link-third'\"\n                [classIconLeft]=\"'libs-ui-icon-eye-outline !mr-0'\"\n                [popover]=\"{ config: { content: 'i18n_preview', zIndex: zIndex() + 1 } }\"\n                [classInclude]=\"'!p-0' + (ignoreIconRemove() && !ignoreIconEdit() ? '' : ' !mr-[12px]')\"\n                [disable]=\"item().isUploading || disable() || readonly()\"\n                (outClick)=\"handlerOpenPreviewFile(item())\" />\n            }\n            @if (item().type === 'image' && !item().error && !ignoreIconEdit()) {\n              <libs_ui-components-buttons-button\n                [type]=\"'button-link-third'\"\n                [classIconLeft]=\"'libs-ui-icon-edit-line !mr-0'\"\n                [popover]=\"{ config: { content: 'i18n_edit', zIndex: zIndex() + 1 } }\"\n                [classInclude]=\"'!p-0' + (ignoreIconRemove() ? '' : ' !mr-[12px]')\"\n                [disable]=\"item().isUploading || disable() || readonly()\"\n                (outClick)=\"handlerEditImage($event, item)\" />\n            }\n            @if (!ignoreIconRemove()) {\n              <libs_ui-components-buttons-button\n                [type]=\"'button-link-third'\"\n                [classIconLeft]=\"'libs-ui-icon-close !mr-0'\"\n                [popover]=\"{ config: { content: 'i18n_delete', zIndex: zIndex() + 1 } }\"\n                [classInclude]=\"'!p-0'\"\n                [disable]=\"item().isUploading || disable() || readonly()\"\n                (outClick)=\"handlerRemoveFile($event, item)\" />\n            }\n          </div>\n        </div>\n        @if (item().error && (multiple() || showPopupUploadWhenHasFileAndModeSingle())) {\n          <div class=\"mt-[8px] text-[#ee2d41] libs-ui-font-h7r\">{{ item().error || ' ' | translate }}</div>\n        }\n      }\n    </div>\n  }\n</div>\n", styles: [":host ::ng-deep .libs-ui-components-inputs-upload{width:100%;padding:16px;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;background-color:#fff;border:1px dashed #e6e7ea}:host ::ng-deep .libs-ui-components-inputs-upload .libs-ui-components-inputs-upload-icon:before{color:#9ca2ad}:host ::ng-deep .libs-ui-components-inputs-upload .libs-ui-components-inputs-upload-description{color:#9ca2ad}:host ::ng-deep .libs-ui-components-inputs-upload .libs-ui-components-inputs-upload-description span{color:var(--libs-ui-color-default, #226ff5)}:host ::ng-deep .libs-ui-components-inputs-upload:hover,:host ::ng-deep .libs-ui-components-inputs-upload.libs-ui-components-inputs-upload-drag-over{background-color:var(--libs-ui-color-light-3, #f4f8ff);border:1px dashed var(--libs-ui-color-light-1, #226ff5)}:host ::ng-deep .libs-ui-components-inputs-upload:hover .libs-ui-components-inputs-upload-icon:before,:host ::ng-deep .libs-ui-components-inputs-upload.libs-ui-components-inputs-upload-drag-over .libs-ui-components-inputs-upload-icon:before{color:#cdd0d6}:host ::ng-deep .libs-ui-components-inputs-upload:hover .libs-ui-components-inputs-upload-description,:host ::ng-deep .libs-ui-components-inputs-upload.libs-ui-components-inputs-upload-drag-over .libs-ui-components-inputs-upload-description{color:#cdd0d6}:host ::ng-deep .libs-ui-components-inputs-upload:hover .libs-ui-components-inputs-upload-description span,:host ::ng-deep .libs-ui-components-inputs-upload.libs-ui-components-inputs-upload-drag-over .libs-ui-components-inputs-upload-description span{color:#cdd0d6}:host ::ng-deep .libs-ui-components-inputs-upload-disable{cursor:default!important;text-decoration:none;pointer-events:none;background-color:var(--libs-ui-background-disable, #f8f9fa)!important;border:1px dashed #e6e7ea!important}:host ::ng-deep .libs-ui-components-inputs-upload-disable .libs-ui-components-inputs-upload-icon:before{color:var(--libs-ui-text-disable, #9ca2ad)}:host ::ng-deep .libs-ui-components-inputs-upload-disable .libs-ui-components-inputs-upload-description{color:var(--libs-ui-text-disable, #9ca2ad)}:host ::ng-deep .libs-ui-components-inputs-upload-disable .libs-ui-components-inputs-upload-description span{color:var(--libs-ui-text-disable, #9ca2ad)}:host ::ng-deep .libs-ui-components-inputs-upload-readonly{cursor:default!important;text-decoration:none;pointer-events:none;background-color:var(--libs-ui-backgrond-realonly, #f8f9fa)!important;border:1px dashed #e6e7ea!important}:host ::ng-deep .libs-ui-components-inputs-upload-readonly .libs-ui-components-inputs-upload-icon:before{color:#cdd0d6}:host ::ng-deep .libs-ui-components-inputs-upload-readonly .libs-ui-components-inputs-upload-description{color:var(--libs-ui-text-realonly, #071631)}:host ::ng-deep .libs-ui-components-inputs-upload-readonly .libs-ui-components-inputs-upload-description span{color:var(--libs-ui-text-realonly, #071631)}:host ::ng-deep .libs-ui-components-inputs-upload-error{background-color:#fef5f6!important;border:1px dashed #ee2d41!important}:host ::ng-deep .libs-ui-components-inputs-upload-error .libs-ui-components-inputs-upload-icon:before{color:#cdd0d6}:host ::ng-deep .libs-ui-components-inputs-upload-error .libs-ui-components-inputs-upload-description{color:#cdd0d6}:host ::ng-deep .libs-ui-components-inputs-upload-error .libs-ui-components-inputs-upload-description span{color:#cdd0d6}:host ::ng-deep .libs-ui-components-inputs-upload-file-full{background-color:#fff;padding:8px 12px}:host ::ng-deep .libs-ui-components-inputs-upload-file-short{background-color:#f4f8ff;padding:6px 12px}.libs-ui-components-inputs-upload-view-list{overflow-y:auto;max-height:100%;padding:0 10px}.libs-ui-components-inputs-upload-view-list .libs-ui-components-inputs-upload-view-list-item{width:100%;display:flex;align-items:center;justify-content:center;border-radius:4px;margin-bottom:8px}.libs-ui-components-inputs-upload-view-list .libs-ui-components-inputs-upload-view-list-item:hover{background-color:#f8f9fa}\n"] }]
         }], ctorParameters: () => [] });
 
 /**