@libs-ui/components-inputs-upload 0.2.321-0 → 0.2.323-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.
- package/esm2022/avatar/avatar.component.mjs +3 -3
- package/esm2022/pipes/calc-duration-video.pipe.mjs +3 -3
- package/esm2022/pipes/check-file-extension.pipe.mjs +3 -3
- package/esm2022/upload-drop-file.directive.mjs +3 -3
- package/esm2022/upload-file.directive.mjs +3 -3
- package/esm2022/upload.component.mjs +3 -3
- package/fesm2022/libs-ui-components-inputs-upload.mjs +18 -18
- package/package.json +14 -14
|
@@ -29,10 +29,10 @@ export class LibsUiComponentsInputsUploadAvatarComponent {
|
|
|
29
29
|
event.stopPropagation();
|
|
30
30
|
this.outOpenPreview.emit(this.item());
|
|
31
31
|
}
|
|
32
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
33
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.
|
|
32
|
+
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 });
|
|
33
|
+
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'\"></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 });
|
|
34
34
|
}
|
|
35
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
35
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsInputsUploadAvatarComponent, decorators: [{
|
|
36
36
|
type: Component,
|
|
37
37
|
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'\"></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" }]
|
|
38
38
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
@@ -19,10 +19,10 @@ export class LibsUiPipesInputsUploadCalcDurationVideoPipe {
|
|
|
19
19
|
}
|
|
20
20
|
return `0:${duration}`;
|
|
21
21
|
}
|
|
22
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
23
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.
|
|
22
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiPipesInputsUploadCalcDurationVideoPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
23
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: LibsUiPipesInputsUploadCalcDurationVideoPipe, isStandalone: true, name: "LibsUiPipesInputsUploadCalcDurationVideoPipe" });
|
|
24
24
|
}
|
|
25
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
25
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiPipesInputsUploadCalcDurationVideoPipe, decorators: [{
|
|
26
26
|
type: Pipe,
|
|
27
27
|
args: [{
|
|
28
28
|
name: 'LibsUiPipesInputsUploadCalcDurationVideoPipe',
|
|
@@ -24,10 +24,10 @@ export class LibsUiPipesInputsUploadCheckFileExtensionPipe {
|
|
|
24
24
|
return ![...ImageExtList, ...VideoExtList, ...DocumentExtList].includes(fileExtension);
|
|
25
25
|
}
|
|
26
26
|
}
|
|
27
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
28
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.
|
|
27
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiPipesInputsUploadCheckFileExtensionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
28
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: LibsUiPipesInputsUploadCheckFileExtensionPipe, isStandalone: true, name: "LibsUiPipesInputsUploadCheckFileExtensionPipe" });
|
|
29
29
|
}
|
|
30
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
30
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiPipesInputsUploadCheckFileExtensionPipe, decorators: [{
|
|
31
31
|
type: Pipe,
|
|
32
32
|
args: [{
|
|
33
33
|
name: 'LibsUiPipesInputsUploadCheckFileExtensionPipe',
|
|
@@ -54,10 +54,10 @@ export class LibsUiComponentsInputsUploadDropFileDirective {
|
|
|
54
54
|
this.onDestroy.next();
|
|
55
55
|
this.onDestroy.complete();
|
|
56
56
|
}
|
|
57
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
58
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.
|
|
57
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsInputsUploadDropFileDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
58
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.14", type: LibsUiComponentsInputsUploadDropFileDirective, isStandalone: true, selector: "[LibsUiComponentsInputsUploadDropFileDirective]", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outDragOver: "outDragOver", outDragLeave: "outDragLeave", outDrop: "outDrop", outDropFiles: "outDropFiles", outDropFile: "outDropFile" }, ngImport: i0 });
|
|
59
59
|
}
|
|
60
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
60
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsInputsUploadDropFileDirective, decorators: [{
|
|
61
61
|
type: Directive,
|
|
62
62
|
args: [{
|
|
63
63
|
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
@@ -40,10 +40,10 @@ export class LibsUiComponentsInputsUploadDirective {
|
|
|
40
40
|
this.onDestroy.next();
|
|
41
41
|
this.onDestroy.complete();
|
|
42
42
|
}
|
|
43
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
44
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.
|
|
43
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsInputsUploadDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
44
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.14", type: LibsUiComponentsInputsUploadDirective, isStandalone: true, selector: "[LibsUiComponentsInputsUploadDirective]", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, accessFiles: { classPropertyName: "accessFiles", publicName: "accessFiles", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outUploadFiles: "outUploadFiles", outUploadFile: "outUploadFile" }, ngImport: i0 });
|
|
45
45
|
}
|
|
46
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
46
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsInputsUploadDirective, decorators: [{
|
|
47
47
|
type: Directive,
|
|
48
48
|
args: [{
|
|
49
49
|
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
@@ -426,10 +426,10 @@ export class LibsUiComponentsInputsUploadComponent {
|
|
|
426
426
|
this.onDestroy.next();
|
|
427
427
|
this.onDestroy.complete();
|
|
428
428
|
}
|
|
429
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
430
|
-
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 }, classIncludeAvatar: { classPropertyName: "classIncludeAvatar", publicName: "classIncludeAvatar", 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 @let constHtmlMessage = configDescriptionInputUpload().message || ' ';\n <div\n class=\"mb-[4px] libs-ui-font-h6m\"\n [innerHTML]=\"constHtmlMessage | 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 @let constHtmlMessage = messageError() || ' ';\n {{ constHtmlMessage | 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 [classInclude]=\"classIncludeAvatar()\"\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\">\n @let constHtmlMessage = item().error || ' ';\n {{ constHtmlMessage | translate }}\n </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", "classInclude"], 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 });
|
|
429
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsInputsUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
430
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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 }, classIncludeAvatar: { classPropertyName: "classIncludeAvatar", publicName: "classIncludeAvatar", 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 @let constHtmlMessage = configDescriptionInputUpload().message || ' ';\n <div\n class=\"mb-[4px] libs-ui-font-h6m\"\n [innerHTML]=\"constHtmlMessage | 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 @let constHtmlMessage = messageError() || ' ';\n {{ constHtmlMessage | 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 [classInclude]=\"classIncludeAvatar()\"\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\">\n @let constHtmlMessage = item().error || ' ';\n {{ constHtmlMessage | translate }}\n </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", "classInclude"], 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 });
|
|
431
431
|
}
|
|
432
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
432
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsInputsUploadComponent, decorators: [{
|
|
433
433
|
type: Component,
|
|
434
434
|
args: [{ selector: 'libs_ui-components-inputs-upload', standalone: true, imports: [
|
|
435
435
|
TranslateModule,
|
|
@@ -37,10 +37,10 @@ class LibsUiPipesInputsUploadCalcDurationVideoPipe {
|
|
|
37
37
|
}
|
|
38
38
|
return `0:${duration}`;
|
|
39
39
|
}
|
|
40
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
41
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.
|
|
40
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiPipesInputsUploadCalcDurationVideoPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
41
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: LibsUiPipesInputsUploadCalcDurationVideoPipe, isStandalone: true, name: "LibsUiPipesInputsUploadCalcDurationVideoPipe" });
|
|
42
42
|
}
|
|
43
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
43
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiPipesInputsUploadCalcDurationVideoPipe, decorators: [{
|
|
44
44
|
type: Pipe,
|
|
45
45
|
args: [{
|
|
46
46
|
name: 'LibsUiPipesInputsUploadCalcDurationVideoPipe',
|
|
@@ -71,10 +71,10 @@ class LibsUiPipesInputsUploadCheckFileExtensionPipe {
|
|
|
71
71
|
return ![...ImageExtList, ...VideoExtList, ...DocumentExtList].includes(fileExtension);
|
|
72
72
|
}
|
|
73
73
|
}
|
|
74
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
75
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.
|
|
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
76
|
}
|
|
77
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
77
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiPipesInputsUploadCheckFileExtensionPipe, decorators: [{
|
|
78
78
|
type: Pipe,
|
|
79
79
|
args: [{
|
|
80
80
|
name: 'LibsUiPipesInputsUploadCheckFileExtensionPipe',
|
|
@@ -103,10 +103,10 @@ class LibsUiComponentsInputsUploadAvatarComponent {
|
|
|
103
103
|
event.stopPropagation();
|
|
104
104
|
this.outOpenPreview.emit(this.item());
|
|
105
105
|
}
|
|
106
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
107
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.
|
|
106
|
+
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'\"></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 });
|
|
108
108
|
}
|
|
109
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
109
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsInputsUploadAvatarComponent, decorators: [{
|
|
110
110
|
type: Component,
|
|
111
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'\"></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" }]
|
|
112
112
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
@@ -201,10 +201,10 @@ class LibsUiComponentsInputsUploadDropFileDirective {
|
|
|
201
201
|
this.onDestroy.next();
|
|
202
202
|
this.onDestroy.complete();
|
|
203
203
|
}
|
|
204
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
205
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.
|
|
204
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsInputsUploadDropFileDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
205
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.14", type: LibsUiComponentsInputsUploadDropFileDirective, isStandalone: true, selector: "[LibsUiComponentsInputsUploadDropFileDirective]", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outDragOver: "outDragOver", outDragLeave: "outDragLeave", outDrop: "outDrop", outDropFiles: "outDropFiles", outDropFile: "outDropFile" }, ngImport: i0 });
|
|
206
206
|
}
|
|
207
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
207
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsInputsUploadDropFileDirective, decorators: [{
|
|
208
208
|
type: Directive,
|
|
209
209
|
args: [{
|
|
210
210
|
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
@@ -252,10 +252,10 @@ class LibsUiComponentsInputsUploadDirective {
|
|
|
252
252
|
this.onDestroy.next();
|
|
253
253
|
this.onDestroy.complete();
|
|
254
254
|
}
|
|
255
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
256
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.
|
|
255
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsInputsUploadDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
256
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.14", type: LibsUiComponentsInputsUploadDirective, isStandalone: true, selector: "[LibsUiComponentsInputsUploadDirective]", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, accessFiles: { classPropertyName: "accessFiles", publicName: "accessFiles", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outUploadFiles: "outUploadFiles", outUploadFile: "outUploadFile" }, ngImport: i0 });
|
|
257
257
|
}
|
|
258
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
258
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsInputsUploadDirective, decorators: [{
|
|
259
259
|
type: Directive,
|
|
260
260
|
args: [{
|
|
261
261
|
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
@@ -674,10 +674,10 @@ class LibsUiComponentsInputsUploadComponent {
|
|
|
674
674
|
this.onDestroy.next();
|
|
675
675
|
this.onDestroy.complete();
|
|
676
676
|
}
|
|
677
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
678
|
-
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 }, classIncludeAvatar: { classPropertyName: "classIncludeAvatar", publicName: "classIncludeAvatar", 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 @let constHtmlMessage = configDescriptionInputUpload().message || ' ';\n <div\n class=\"mb-[4px] libs-ui-font-h6m\"\n [innerHTML]=\"constHtmlMessage | 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 @let constHtmlMessage = messageError() || ' ';\n {{ constHtmlMessage | 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 [classInclude]=\"classIncludeAvatar()\"\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\">\n @let constHtmlMessage = item().error || ' ';\n {{ constHtmlMessage | translate }}\n </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", "classInclude"], 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 });
|
|
677
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsInputsUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
678
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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 }, classIncludeAvatar: { classPropertyName: "classIncludeAvatar", publicName: "classIncludeAvatar", 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 @let constHtmlMessage = configDescriptionInputUpload().message || ' ';\n <div\n class=\"mb-[4px] libs-ui-font-h6m\"\n [innerHTML]=\"constHtmlMessage | 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 @let constHtmlMessage = messageError() || ' ';\n {{ constHtmlMessage | 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 [classInclude]=\"classIncludeAvatar()\"\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\">\n @let constHtmlMessage = item().error || ' ';\n {{ constHtmlMessage | translate }}\n </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", "classInclude"], 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 });
|
|
679
679
|
}
|
|
680
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
680
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsInputsUploadComponent, decorators: [{
|
|
681
681
|
type: Component,
|
|
682
682
|
args: [{ selector: 'libs_ui-components-inputs-upload', standalone: true, imports: [
|
|
683
683
|
TranslateModule,
|
package/package.json
CHANGED
|
@@ -1,23 +1,23 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@libs-ui/components-inputs-upload",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.323-0",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/common": ">=18.0.0",
|
|
6
6
|
"@angular/core": ">=18.0.0",
|
|
7
|
-
"@libs-ui/components-spinner": "0.2.
|
|
8
|
-
"@libs-ui/icons": "0.2.
|
|
9
|
-
"@libs-ui/interfaces-types": "0.2.
|
|
10
|
-
"@libs-ui/pipes-security-trust": "0.2.
|
|
11
|
-
"@libs-ui/utils": "0.2.
|
|
7
|
+
"@libs-ui/components-spinner": "0.2.323-0",
|
|
8
|
+
"@libs-ui/icons": "0.2.323-0",
|
|
9
|
+
"@libs-ui/interfaces-types": "0.2.323-0",
|
|
10
|
+
"@libs-ui/pipes-security-trust": "0.2.323-0",
|
|
11
|
+
"@libs-ui/utils": "0.2.323-0",
|
|
12
12
|
"@ngx-translate/core": "^15.0.0",
|
|
13
|
-
"@libs-ui/components-buttons-button": "0.2.
|
|
14
|
-
"@libs-ui/components-gallery": "0.2.
|
|
15
|
-
"@libs-ui/components-image-editor": "0.2.
|
|
16
|
-
"@libs-ui/components-label": "0.2.
|
|
17
|
-
"@libs-ui/components-preview-file": "0.2.
|
|
18
|
-
"@libs-ui/components-scroll-overlay": "0.2.
|
|
19
|
-
"@libs-ui/services-dynamic-component": "0.2.
|
|
20
|
-
"@libs-ui/services-notification": "0.2.
|
|
13
|
+
"@libs-ui/components-buttons-button": "0.2.323-0",
|
|
14
|
+
"@libs-ui/components-gallery": "0.2.323-0",
|
|
15
|
+
"@libs-ui/components-image-editor": "0.2.323-0",
|
|
16
|
+
"@libs-ui/components-label": "0.2.323-0",
|
|
17
|
+
"@libs-ui/components-preview-file": "0.2.323-0",
|
|
18
|
+
"@libs-ui/components-scroll-overlay": "0.2.323-0",
|
|
19
|
+
"@libs-ui/services-dynamic-component": "0.2.323-0",
|
|
20
|
+
"@libs-ui/services-notification": "0.2.323-0",
|
|
21
21
|
"rxjs": "~7.8.0"
|
|
22
22
|
},
|
|
23
23
|
"sideEffects": false,
|