@libs-ui/components-inputs-upload 0.2.348-8 → 0.2.350-0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,22 +1,23 @@
1
+ import { NgComponentOutlet, AsyncPipe } from '@angular/common';
1
2
  import * as i0 from '@angular/core';
2
3
  import { Pipe, model, input, output, Optional, Inject, ChangeDetectionStrategy, Component, Directive, inject, ElementRef, signal, computed, viewChild, effect, untracked } from '@angular/core';
4
+ import { LibsUiComponentsSpinnerComponent } from '@libs-ui/components-spinner';
5
+ import { LibsUiIconsGetIconComponentPipe } from '@libs-ui/icons';
6
+ import { LibsUiPipesCheckFileExtensionPipe } from '@libs-ui/pipes-check-file-extension';
7
+ import { LibsUiPipesSecurityTrustPipe } from '@libs-ui/pipes-security-trust';
8
+ import { LINK_IMAGE_ERROR_TOKEN_INJECT, checkMouseOverInContainer, isTypeFile, getLabelBySizeFile, ImageExtList, VideoExtList, DocumentExtList, AudioExtList, isTypeImage, isTypeVideo, isTypeAudio, uuid, convertFileToBase64_ObjectUrl, convertBlobToFile, getFileExtension, isIncludeImageExtList, isIncludeVideoExtList, isIncludeAudioExtList, isIncludeDocumentExtList, ERROR_MESSAGE_EMPTY_VALID, downloadFileByUrl } from '@libs-ui/utils';
9
+ import * as i1 from '@ngx-translate/core';
10
+ import { TranslateModule, TranslateService } from '@ngx-translate/core';
11
+ import { Subject, fromEvent, takeUntil as takeUntil$1 } from 'rxjs';
12
+ import { takeUntil } from 'rxjs/operators';
3
13
  import { LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';
4
14
  import { LibsUiComponentsGalleryViewerComponent } from '@libs-ui/components-gallery';
5
15
  import { LibsUiComponentsImageEditorComponent } from '@libs-ui/components-image-editor';
6
16
  import { LibsUiComponentsLabelComponent } from '@libs-ui/components-label';
7
17
  import { LibsUiComponentsPreviewFileComponent } from '@libs-ui/components-preview-file';
8
18
  import { LibsUiComponentsScrollOverlayDirective } from '@libs-ui/components-scroll-overlay';
9
- import { LibsUiDynamicComponentService } from '@libs-ui/services-dynamic-component';
19
+ import { LibsUiDynamicComponentService, setInputs } from '@libs-ui/services-dynamic-component';
10
20
  import { LibsUiNotificationService } from '@libs-ui/services-notification';
11
- import { getFileExtension, ImageExtList, VideoExtList, DocumentExtList, LINK_IMAGE_ERROR_TOKEN_INJECT, getLabelBySizeFile, checkMouseOverInContainer, isTypeFile, AudioExtList, isTypeImage, isTypeVideo, isTypeAudio, uuid, convertFileToBase64_ObjectUrl, convertBlobToFile, isIncludeImageExtList, isIncludeVideoExtList, isIncludeAudioExtList, isIncludeDocumentExtList, ERROR_MESSAGE_EMPTY_VALID, downloadFileByUrl } from '@libs-ui/utils';
12
- import * as i1 from '@ngx-translate/core';
13
- import { TranslateModule, TranslateService } from '@ngx-translate/core';
14
- import { Subject, fromEvent, takeUntil as takeUntil$1 } from 'rxjs';
15
- import { NgComponentOutlet, AsyncPipe } from '@angular/common';
16
- import { LibsUiComponentsSpinnerComponent } from '@libs-ui/components-spinner';
17
- import { LibsUiIconsGetIconComponentPipe } from '@libs-ui/icons';
18
- import { LibsUiPipesSecurityTrustPipe } from '@libs-ui/pipes-security-trust';
19
- import { takeUntil } from 'rxjs/operators';
20
21
 
21
22
  class LibsUiPipesInputsUploadCalcDurationVideoPipe {
22
23
  transform(duration) {
@@ -48,40 +49,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
48
49
  }]
49
50
  }] });
50
51
 
51
- class LibsUiPipesInputsUploadCheckFileExtensionPipe {
52
- transform(file, type) {
53
- const fileExtension = getFileExtension(file);
54
- if (!fileExtension) {
55
- return false;
56
- }
57
- switch (type) {
58
- case 'image':
59
- return ImageExtList.includes(fileExtension);
60
- case 'video':
61
- return VideoExtList.includes(fileExtension);
62
- case 'word':
63
- return ['doc', 'docx', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'].includes(fileExtension);
64
- case 'xlsx':
65
- return ['xls', 'xlsx', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'gsheet'].includes(fileExtension);
66
- case 'pdf':
67
- return ['pdf', 'application/pdf'].includes(fileExtension);
68
- case 'pptx':
69
- return ['ppt', 'pptx', 'application/vnd.ms-powerpoint', 'application/vnd.openxmlformats-officedocument.presentationml.presentation'].includes(fileExtension);
70
- case 'other':
71
- return ![...ImageExtList, ...VideoExtList, ...DocumentExtList].includes(fileExtension);
72
- }
73
- }
74
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiPipesInputsUploadCheckFileExtensionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
75
- static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: LibsUiPipesInputsUploadCheckFileExtensionPipe, isStandalone: true, name: "LibsUiPipesInputsUploadCheckFileExtensionPipe" });
76
- }
77
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiPipesInputsUploadCheckFileExtensionPipe, decorators: [{
78
- type: Pipe,
79
- args: [{
80
- name: 'LibsUiPipesInputsUploadCheckFileExtensionPipe',
81
- standalone: true,
82
- }]
83
- }] });
84
-
85
52
  class LibsUiComponentsInputsUploadAvatarComponent {
86
53
  linkImageError;
87
54
  item = model.required();
@@ -104,11 +71,11 @@ class LibsUiComponentsInputsUploadAvatarComponent {
104
71
  this.outOpenPreview.emit(this.item());
105
72
  }
106
73
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsInputsUploadAvatarComponent, deps: [{ token: LINK_IMAGE_ERROR_TOKEN_INJECT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
107
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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 }, classInclude: { classPropertyName: "classInclude", publicName: "classInclude", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { item: "itemChange", outOpenPreview: "outOpenPreview" }, ngImport: i0, template: "<div\n class=\"flex mr-[12px] bg-[#ffffff] rounded-[4px] {{ classInclude() }}\"\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 @let constHtmlSrc = 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]=\"constHtmlSrc | LibsUiPipesSecurityTrustPipe: 'resourceUrl' | async\"></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; inputs: { size: size() || 32 }\" />\n } @else if (item() | LibsUiPipesInputsUploadCheckFileExtensionPipe: 'word') {\n <ng-container *ngComponentOutlet=\"'word' | LibsUiIconsGetIconComponentPipe | async; inputs: { size: size() || 32 }\" />\n } @else if (item() | LibsUiPipesInputsUploadCheckFileExtensionPipe: 'pptx') {\n <ng-container *ngComponentOutlet=\"'pptx' | LibsUiIconsGetIconComponentPipe | async; inputs: { size: size() || 32 }\" />\n } @else if (item() | LibsUiPipesInputsUploadCheckFileExtensionPipe: 'xlsx') {\n <ng-container *ngComponentOutlet=\"'xlsx' | LibsUiIconsGetIconComponentPipe | async; inputs: { size: size() || 32 }\" />\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 });
74
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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 }, classInclude: { classPropertyName: "classInclude", publicName: "classInclude", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { item: "itemChange", outOpenPreview: "outOpenPreview" }, ngImport: i0, template: "<div\n class=\"flex mr-[12px] bg-[#ffffff] rounded-[4px] {{ classInclude() }}\"\n [class.libs-ui-disable]=\"disable() || item().isUploading || item().error\">\n @if (item() | LibsUiPipesCheckFileExtensionPipe: '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() | LibsUiPipesCheckFileExtensionPipe: '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 @let constHtmlSrc = 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]=\"constHtmlSrc | LibsUiPipesSecurityTrustPipe: 'resourceUrl' | async\"></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() | LibsUiPipesCheckFileExtensionPipe: 'pdf') {\n <ng-container *ngComponentOutlet=\"'pdf' | LibsUiIconsGetIconComponentPipe | async; inputs: { size: size() || 32 }\" />\n } @else if (item() | LibsUiPipesCheckFileExtensionPipe: 'word') {\n <ng-container *ngComponentOutlet=\"'word' | LibsUiIconsGetIconComponentPipe | async; inputs: { size: size() || 32 }\" />\n } @else if (item() | LibsUiPipesCheckFileExtensionPipe: 'pptx') {\n <ng-container *ngComponentOutlet=\"'pptx' | LibsUiIconsGetIconComponentPipe | async; inputs: { size: size() || 32 }\" />\n } @else if (item() | LibsUiPipesCheckFileExtensionPipe: 'xlsx') {\n <ng-container *ngComponentOutlet=\"'xlsx' | LibsUiIconsGetIconComponentPipe | async; inputs: { size: size() || 32 }\" />\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: LibsUiPipesCheckFileExtensionPipe, name: "LibsUiPipesCheckFileExtensionPipe" }, { kind: "pipe", type: LibsUiIconsGetIconComponentPipe, name: "LibsUiIconsGetIconComponentPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
108
75
  }
109
76
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsInputsUploadAvatarComponent, decorators: [{
110
77
  type: Component,
111
- 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] {{ classInclude() }}\"\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 @let constHtmlSrc = 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]=\"constHtmlSrc | LibsUiPipesSecurityTrustPipe: 'resourceUrl' | async\"></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; inputs: { size: size() || 32 }\" />\n } @else if (item() | LibsUiPipesInputsUploadCheckFileExtensionPipe: 'word') {\n <ng-container *ngComponentOutlet=\"'word' | LibsUiIconsGetIconComponentPipe | async; inputs: { size: size() || 32 }\" />\n } @else if (item() | LibsUiPipesInputsUploadCheckFileExtensionPipe: 'pptx') {\n <ng-container *ngComponentOutlet=\"'pptx' | LibsUiIconsGetIconComponentPipe | async; inputs: { size: size() || 32 }\" />\n } @else if (item() | LibsUiPipesInputsUploadCheckFileExtensionPipe: 'xlsx') {\n <ng-container *ngComponentOutlet=\"'xlsx' | LibsUiIconsGetIconComponentPipe | async; inputs: { size: size() || 32 }\" />\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" }]
78
+ args: [{ selector: 'libs_ui-components-inputs-upload-avatar', standalone: true, imports: [NgComponentOutlet, AsyncPipe, TranslateModule, LibsUiComponentsSpinnerComponent, LibsUiPipesSecurityTrustPipe, LibsUiPipesInputsUploadCalcDurationVideoPipe, LibsUiPipesCheckFileExtensionPipe, LibsUiIconsGetIconComponentPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"flex mr-[12px] bg-[#ffffff] rounded-[4px] {{ classInclude() }}\"\n [class.libs-ui-disable]=\"disable() || item().isUploading || item().error\">\n @if (item() | LibsUiPipesCheckFileExtensionPipe: '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() | LibsUiPipesCheckFileExtensionPipe: '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 @let constHtmlSrc = 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]=\"constHtmlSrc | LibsUiPipesSecurityTrustPipe: 'resourceUrl' | async\"></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() | LibsUiPipesCheckFileExtensionPipe: 'pdf') {\n <ng-container *ngComponentOutlet=\"'pdf' | LibsUiIconsGetIconComponentPipe | async; inputs: { size: size() || 32 }\" />\n } @else if (item() | LibsUiPipesCheckFileExtensionPipe: 'word') {\n <ng-container *ngComponentOutlet=\"'word' | LibsUiIconsGetIconComponentPipe | async; inputs: { size: size() || 32 }\" />\n } @else if (item() | LibsUiPipesCheckFileExtensionPipe: 'pptx') {\n <ng-container *ngComponentOutlet=\"'pptx' | LibsUiIconsGetIconComponentPipe | async; inputs: { size: size() || 32 }\" />\n } @else if (item() | LibsUiPipesCheckFileExtensionPipe: 'xlsx') {\n <ng-container *ngComponentOutlet=\"'xlsx' | LibsUiIconsGetIconComponentPipe | async; inputs: { size: size() || 32 }\" />\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" }]
112
79
  }], ctorParameters: () => [{ type: undefined, decorators: [{
113
80
  type: Optional
114
81
  }, {
@@ -116,40 +83,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
116
83
  args: [LINK_IMAGE_ERROR_TOKEN_INJECT]
117
84
  }] }] });
118
85
 
119
- const getDescriptionFormatAndSizeFileDefault = (type, maxImageSize, maxVideoSize, maxDocumentSize, maxAudioSize) => {
120
- const image = {
121
- message: 'i18n_note_upload_image_volume',
122
- interpolateParams: { value: getLabelBySizeFile(maxImageSize, 0) },
123
- };
124
- const video = {
125
- message: 'i18n_note_upload_video_volume',
126
- interpolateParams: { value: getLabelBySizeFile(maxVideoSize, 0) },
127
- };
128
- const document = {
129
- message: 'i18n_note_upload_file_volume',
130
- interpolateParams: { value: getLabelBySizeFile(maxDocumentSize, 0) },
131
- };
132
- const audio = {
133
- message: 'i18n_note_upload_audio_volume',
134
- interpolateParams: { value: getLabelBySizeFile(maxAudioSize, 0) },
135
- };
136
- const typeSplit = type.split('_');
137
- const description = [];
138
- if (typeSplit.includes('image')) {
139
- description.push(image);
140
- }
141
- if (typeSplit.includes('audio')) {
142
- description.push(audio);
143
- }
144
- if (typeSplit.includes('video')) {
145
- description.push(video);
146
- }
147
- if (typeSplit.includes('document')) {
148
- description.push(document);
149
- }
150
- return description;
151
- };
152
-
153
86
  class LibsUiComponentsInputsUploadDropFileDirective {
154
87
  elementRef;
155
88
  onDestroy = new Subject();
@@ -264,6 +197,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
264
197
  }]
265
198
  }] });
266
199
 
200
+ const getDescriptionFormatAndSizeFileDefault = (type, maxImageSize, maxVideoSize, maxDocumentSize, maxAudioSize) => {
201
+ const image = {
202
+ message: 'i18n_note_upload_image_volume',
203
+ interpolateParams: { value: getLabelBySizeFile(maxImageSize, 0) },
204
+ };
205
+ const video = {
206
+ message: 'i18n_note_upload_video_volume',
207
+ interpolateParams: { value: getLabelBySizeFile(maxVideoSize, 0) },
208
+ };
209
+ const document = {
210
+ message: 'i18n_note_upload_file_volume',
211
+ interpolateParams: { value: getLabelBySizeFile(maxDocumentSize, 0) },
212
+ };
213
+ const audio = {
214
+ message: 'i18n_note_upload_audio_volume',
215
+ interpolateParams: { value: getLabelBySizeFile(maxAudioSize, 0) },
216
+ };
217
+ const typeSplit = type.split('_');
218
+ const description = [];
219
+ if (typeSplit.includes('image')) {
220
+ description.push(image);
221
+ }
222
+ if (typeSplit.includes('audio')) {
223
+ description.push(audio);
224
+ }
225
+ if (typeSplit.includes('video')) {
226
+ description.push(video);
227
+ }
228
+ if (typeSplit.includes('document')) {
229
+ description.push(document);
230
+ }
231
+ return description;
232
+ };
233
+
267
234
  class LibsUiComponentsInputsUploadComponent {
268
235
  // #region PROPERTIES
269
236
  imageEditorComponentRef;
@@ -470,8 +437,7 @@ class LibsUiComponentsInputsUploadComponent {
470
437
  return;
471
438
  }
472
439
  this.previewFileComponentRef = this.dynamicComponentService.resolveComponentFactory(LibsUiComponentsPreviewFileComponent);
473
- this.previewFileComponentRef.setInput('data', item);
474
- this.previewFileComponentRef.setInput('zIndex', this.zIndex() + 1);
440
+ setInputs(this.previewFileComponentRef, { index: 0, data: [item], zIndex: this.zIndex() + 1 });
475
441
  this.previewFileComponentRef.instance.outClose.subscribe(() => {
476
442
  this.dynamicComponentService.remove(this.previewFileComponentRef);
477
443
  this.previewFileComponentRef = undefined;