@masterteam/components 0.0.175 → 0.0.176
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/assets/common.css +1 -1
- package/assets/i18n/ar.json +19 -1
- package/assets/i18n/en.json +19 -1
- package/fesm2022/masterteam-components-business-fields.mjs +50 -34
- package/fesm2022/masterteam-components-business-fields.mjs.map +1 -1
- package/fesm2022/masterteam-components-color-picker-field.mjs +2 -2
- package/fesm2022/masterteam-components-color-picker-field.mjs.map +1 -1
- package/fesm2022/masterteam-components-field-validation.mjs +21 -1
- package/fesm2022/masterteam-components-field-validation.mjs.map +1 -1
- package/fesm2022/masterteam-components-formula.mjs +20 -3
- package/fesm2022/masterteam-components-formula.mjs.map +1 -1
- package/fesm2022/masterteam-components-location-field.mjs +1 -1
- package/fesm2022/masterteam-components-location-field.mjs.map +1 -1
- package/fesm2022/masterteam-components-property-filter-builder.mjs +1 -1
- package/fesm2022/masterteam-components-property-filter-builder.mjs.map +1 -1
- package/fesm2022/masterteam-components-table.mjs +112 -24
- package/fesm2022/masterteam-components-table.mjs.map +1 -1
- package/fesm2022/masterteam-components-text-field.mjs +26 -7
- package/fesm2022/masterteam-components-text-field.mjs.map +1 -1
- package/fesm2022/masterteam-components-textarea-field.mjs +27 -8
- package/fesm2022/masterteam-components-textarea-field.mjs.map +1 -1
- package/fesm2022/masterteam-components-treeselect-field.mjs +265 -0
- package/fesm2022/masterteam-components-treeselect-field.mjs.map +1 -0
- package/fesm2022/masterteam-components-upload-field.mjs +16 -7
- package/fesm2022/masterteam-components-upload-field.mjs.map +1 -1
- package/fesm2022/masterteam-components.mjs +2 -2
- package/fesm2022/masterteam-components.mjs.map +1 -1
- package/package.json +5 -1
- package/types/masterteam-components-business-fields.d.ts +8 -5
- package/types/masterteam-components-field-validation.d.ts +4 -2
- package/types/masterteam-components-formula.d.ts +4 -0
- package/types/masterteam-components-table.d.ts +13 -3
- package/types/masterteam-components-text-field.d.ts +3 -1
- package/types/masterteam-components-textarea-field.d.ts +4 -2
- package/types/masterteam-components-treeselect-field.d.ts +79 -0
- package/types/masterteam-components-upload-field.d.ts +3 -1
- package/types/masterteam-components.d.ts +5 -5
|
@@ -13,6 +13,7 @@ import { Icon } from '@masterteam/icons';
|
|
|
13
13
|
import { Validators, NgControl } from '@angular/forms';
|
|
14
14
|
import { FieldValidation } from '@masterteam/components/field-validation';
|
|
15
15
|
import { Card } from '@masterteam/components/card';
|
|
16
|
+
import { ConfirmationService } from '@masterteam/components/confirmation';
|
|
16
17
|
|
|
17
18
|
class SecureImagePipe {
|
|
18
19
|
static cachedBlobUrls = new Map();
|
|
@@ -219,11 +220,11 @@ class UploadFilePreview {
|
|
|
219
220
|
}
|
|
220
221
|
}, ...(ngDevMode ? [{ debugName: "defaultIcon" }] : /* istanbul ignore next */ []));
|
|
221
222
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: UploadFilePreview, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
222
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: UploadFilePreview, isStandalone: true, selector: "mt-upload-file-preview", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, imgPath: { classPropertyName: "imgPath", publicName: "imgPath", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, uploadProgress: { classPropertyName: "uploadProgress", publicName: "uploadProgress", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onUploadInputClicked: "onUploadInputClicked", ondDownloadFile: "ondDownloadFile", onDeleteFile: "onDeleteFile", disabled: "disabledChange" }, ngImport: i0, template: "<div class=\"flex items-center justify-between gap-2 w-full p-2 overflow-hidden\">\r\n <div class=\"flex gap-2 items-center flex-1 min-w-0 overflow-hidden\">\r\n <mt-avatar\r\n [size]=\"size()\"\r\n [shape]=\"'square'\"\r\n [image]=\"\r\n isImag() && imgPath() ? (imgPath() | secureImage: context()) : ''\r\n \"\r\n [icon]=\"defaultIcon()\"\r\n styleClass=\"text-2xl!\"\r\n >\r\n </mt-avatar>\r\n\r\n <span class=\"truncate\" [mtTooltip]=\"value().name\" tooltipPosition=\"top\">\r\n {{ value().name }}\r\n </span>\r\n </div>\r\n <div class=\"flex items-center justify-center shrink-0\">\r\n @if (!!value() && !loading() && (!disabled() || readonly())) {\r\n <mt-button\r\n variant=\"text\"\r\n icon=\"general.download-01\"\r\n [tooltip]=\"'components.upload.download' | transloco\"\r\n (onClick)=\"ondDownloadFile.emit(value())\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n </mt-button>\r\n }\r\n @if (!disabled() && !readonly() && !!value() && !loading()) {\r\n <mt-button\r\n variant=\"text\"\r\n icon=\"general.trash-01\"\r\n [tooltip]=\"'components.upload.delete' | transloco\"\r\n severity=\"danger\"\r\n (onClick)=\"onDeleteFile.emit(
|
|
223
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: UploadFilePreview, isStandalone: true, selector: "mt-upload-file-preview", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, imgPath: { classPropertyName: "imgPath", publicName: "imgPath", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, uploadProgress: { classPropertyName: "uploadProgress", publicName: "uploadProgress", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onUploadInputClicked: "onUploadInputClicked", ondDownloadFile: "ondDownloadFile", onDeleteFile: "onDeleteFile", disabled: "disabledChange" }, ngImport: i0, template: "<div class=\"flex items-center justify-between gap-2 w-full p-2 overflow-hidden\">\r\n <div class=\"flex gap-2 items-center flex-1 min-w-0 overflow-hidden\">\r\n <mt-avatar\r\n [size]=\"size()\"\r\n [shape]=\"'square'\"\r\n [image]=\"\r\n isImag() && imgPath() ? (imgPath() | secureImage: context()) : ''\r\n \"\r\n [icon]=\"defaultIcon()\"\r\n styleClass=\"text-2xl!\"\r\n >\r\n </mt-avatar>\r\n\r\n <span class=\"truncate\" [mtTooltip]=\"value().name\" tooltipPosition=\"top\">\r\n {{ value().name }}\r\n </span>\r\n </div>\r\n <div class=\"flex items-center justify-center shrink-0\">\r\n @if (!!value() && !loading() && (!disabled() || readonly())) {\r\n <mt-button\r\n variant=\"text\"\r\n icon=\"general.download-01\"\r\n [tooltip]=\"'components.upload.download' | transloco\"\r\n (onClick)=\"ondDownloadFile.emit(value())\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n </mt-button>\r\n }\r\n @if (!disabled() && !readonly() && !!value() && !loading()) {\r\n <mt-button\r\n variant=\"text\"\r\n icon=\"general.trash-01\"\r\n [tooltip]=\"'components.upload.delete' | transloco\"\r\n severity=\"danger\"\r\n (onClick)=\"onDeleteFile.emit($event)\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n </mt-button>\r\n }\r\n </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "directive", type: Tooltip, selector: "[mtTooltip]" }, { kind: "pipe", type: SecureImagePipe, name: "secureImage" }, { kind: "pipe", type: i1.TranslocoPipe, name: "transloco" }] });
|
|
223
224
|
}
|
|
224
225
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: UploadFilePreview, decorators: [{
|
|
225
226
|
type: Component,
|
|
226
|
-
args: [{ selector: 'mt-upload-file-preview', standalone: true, imports: [SecureImagePipe, Button, Avatar, TranslocoModule, Tooltip], template: "<div class=\"flex items-center justify-between gap-2 w-full p-2 overflow-hidden\">\r\n <div class=\"flex gap-2 items-center flex-1 min-w-0 overflow-hidden\">\r\n <mt-avatar\r\n [size]=\"size()\"\r\n [shape]=\"'square'\"\r\n [image]=\"\r\n isImag() && imgPath() ? (imgPath() | secureImage: context()) : ''\r\n \"\r\n [icon]=\"defaultIcon()\"\r\n styleClass=\"text-2xl!\"\r\n >\r\n </mt-avatar>\r\n\r\n <span class=\"truncate\" [mtTooltip]=\"value().name\" tooltipPosition=\"top\">\r\n {{ value().name }}\r\n </span>\r\n </div>\r\n <div class=\"flex items-center justify-center shrink-0\">\r\n @if (!!value() && !loading() && (!disabled() || readonly())) {\r\n <mt-button\r\n variant=\"text\"\r\n icon=\"general.download-01\"\r\n [tooltip]=\"'components.upload.download' | transloco\"\r\n (onClick)=\"ondDownloadFile.emit(value())\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n </mt-button>\r\n }\r\n @if (!disabled() && !readonly() && !!value() && !loading()) {\r\n <mt-button\r\n variant=\"text\"\r\n icon=\"general.trash-01\"\r\n [tooltip]=\"'components.upload.delete' | transloco\"\r\n severity=\"danger\"\r\n (onClick)=\"onDeleteFile.emit(
|
|
227
|
+
args: [{ selector: 'mt-upload-file-preview', standalone: true, imports: [SecureImagePipe, Button, Avatar, TranslocoModule, Tooltip], template: "<div class=\"flex items-center justify-between gap-2 w-full p-2 overflow-hidden\">\r\n <div class=\"flex gap-2 items-center flex-1 min-w-0 overflow-hidden\">\r\n <mt-avatar\r\n [size]=\"size()\"\r\n [shape]=\"'square'\"\r\n [image]=\"\r\n isImag() && imgPath() ? (imgPath() | secureImage: context()) : ''\r\n \"\r\n [icon]=\"defaultIcon()\"\r\n styleClass=\"text-2xl!\"\r\n >\r\n </mt-avatar>\r\n\r\n <span class=\"truncate\" [mtTooltip]=\"value().name\" tooltipPosition=\"top\">\r\n {{ value().name }}\r\n </span>\r\n </div>\r\n <div class=\"flex items-center justify-center shrink-0\">\r\n @if (!!value() && !loading() && (!disabled() || readonly())) {\r\n <mt-button\r\n variant=\"text\"\r\n icon=\"general.download-01\"\r\n [tooltip]=\"'components.upload.download' | transloco\"\r\n (onClick)=\"ondDownloadFile.emit(value())\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n </mt-button>\r\n }\r\n @if (!disabled() && !readonly() && !!value() && !loading()) {\r\n <mt-button\r\n variant=\"text\"\r\n icon=\"general.trash-01\"\r\n [tooltip]=\"'components.upload.delete' | transloco\"\r\n severity=\"danger\"\r\n (onClick)=\"onDeleteFile.emit($event)\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n </mt-button>\r\n }\r\n </div>\r\n</div>\r\n" }]
|
|
227
228
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], imgPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "imgPath", required: false }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], uploadProgress: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadProgress", required: false }] }], onUploadInputClicked: [{ type: i0.Output, args: ["onUploadInputClicked"] }], ondDownloadFile: [{ type: i0.Output, args: ["ondDownloadFile"] }], onDeleteFile: [{ type: i0.Output, args: ["onDeleteFile"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
|
|
228
229
|
|
|
229
230
|
class UploadUserPreview {
|
|
@@ -264,11 +265,11 @@ class UploadUserPreview {
|
|
|
264
265
|
this.onDrop.emit(event);
|
|
265
266
|
}
|
|
266
267
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: UploadUserPreview, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
267
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: UploadUserPreview, isStandalone: true, selector: "mt-upload-user-preview", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, imgPath: { classPropertyName: "imgPath", publicName: "imgPath", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, uploadProgress: { classPropertyName: "uploadProgress", publicName: "uploadProgress", isSignal: true, isRequired: false, transformFunction: null }, isDragging: { classPropertyName: "isDragging", publicName: "isDragging", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userImgClass: { classPropertyName: "userImgClass", publicName: "userImgClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onUploadInputClicked: "onUploadInputClicked", ondDownloadFile: "ondDownloadFile", onDeleteFile: "onDeleteFile", onDragOver: "onDragOver", onDragLeave: "onDragLeave", onDrop: "onDrop", disabled: "disabledChange" }, ngImport: i0, template: "<div\r\n class=\"rounded-full p-1 w-fit\"\r\n [style.background]=\"\r\n 'conic-gradient(var(--p-primary-300) ' +\r\n uploadProgress() +\r\n '%, transparent ' +\r\n uploadProgress() +\r\n '%)'\r\n \"\r\n>\r\n <div\r\n class=\"relative rounded-full w-fit border-2 border-dashed border-gray-300 bg-white\"\r\n [class.opacity-50]=\"isDragging()\"\r\n >\r\n <mt-avatar\r\n [size]=\"size()\"\r\n [image]=\"imgPath() ? (imgPath() | secureImage: context()) : ''\"\r\n [icon]=\"defaultIcon()\"\r\n [styleClass]=\"userImgClass()\"\r\n >\r\n </mt-avatar>\r\n\r\n @if (!loading()) {\r\n <div\r\n class=\"absolute inset-0 flex items-center justify-center rounded-full bg-surface-400/50 opacity-0 hover:opacity-100 transition-opacity\"\r\n [class]=\"!imgPath() && !disabled() ? 'cursor-pointer' : ''\"\r\n (click)=\"OnUploadInputClicked()\"\r\n (dragover)=\"OnDragOver($event)\"\r\n (dragleave)=\"OnDragLeave($event)\"\r\n (drop)=\"OnDrop($event)\"\r\n >\r\n @if (!disabled() && !!imgPath()) {\r\n <mt-button\r\n variant=\"text\"\r\n icon=\"general.download-01\"\r\n [tooltip]=\"'components.upload.download' | transloco\"\r\n (onClick)=\"ondDownloadFile.emit(value())\"\r\n >\r\n </mt-button>\r\n <mt-button\r\n variant=\"text\"\r\n icon=\"general.trash-01\"\r\n [tooltip]=\"'components.upload.delete' | transloco\"\r\n severity=\"danger\"\r\n (onClick)=\"onDeleteFile.emit(
|
|
268
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: UploadUserPreview, isStandalone: true, selector: "mt-upload-user-preview", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, imgPath: { classPropertyName: "imgPath", publicName: "imgPath", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, uploadProgress: { classPropertyName: "uploadProgress", publicName: "uploadProgress", isSignal: true, isRequired: false, transformFunction: null }, isDragging: { classPropertyName: "isDragging", publicName: "isDragging", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userImgClass: { classPropertyName: "userImgClass", publicName: "userImgClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onUploadInputClicked: "onUploadInputClicked", ondDownloadFile: "ondDownloadFile", onDeleteFile: "onDeleteFile", onDragOver: "onDragOver", onDragLeave: "onDragLeave", onDrop: "onDrop", disabled: "disabledChange" }, ngImport: i0, template: "<div\r\n class=\"rounded-full p-1 w-fit\"\r\n [style.background]=\"\r\n 'conic-gradient(var(--p-primary-300) ' +\r\n uploadProgress() +\r\n '%, transparent ' +\r\n uploadProgress() +\r\n '%)'\r\n \"\r\n>\r\n <div\r\n class=\"relative rounded-full w-fit border-2 border-dashed border-gray-300 bg-white\"\r\n [class.opacity-50]=\"isDragging()\"\r\n >\r\n <mt-avatar\r\n [size]=\"size()\"\r\n [image]=\"imgPath() ? (imgPath() | secureImage: context()) : ''\"\r\n [icon]=\"defaultIcon()\"\r\n [styleClass]=\"userImgClass()\"\r\n >\r\n </mt-avatar>\r\n\r\n @if (!loading()) {\r\n <div\r\n class=\"absolute inset-0 flex items-center justify-center rounded-full bg-surface-400/50 opacity-0 hover:opacity-100 transition-opacity\"\r\n [class]=\"!imgPath() && !disabled() ? 'cursor-pointer' : ''\"\r\n (click)=\"OnUploadInputClicked()\"\r\n (dragover)=\"OnDragOver($event)\"\r\n (dragleave)=\"OnDragLeave($event)\"\r\n (drop)=\"OnDrop($event)\"\r\n >\r\n @if (!disabled() && !!imgPath()) {\r\n <mt-button\r\n variant=\"text\"\r\n icon=\"general.download-01\"\r\n [tooltip]=\"'components.upload.download' | transloco\"\r\n (onClick)=\"ondDownloadFile.emit(value())\"\r\n >\r\n </mt-button>\r\n <mt-button\r\n variant=\"text\"\r\n icon=\"general.trash-01\"\r\n [tooltip]=\"'components.upload.delete' | transloco\"\r\n severity=\"danger\"\r\n (onClick)=\"onDeleteFile.emit($event)\"\r\n >\r\n </mt-button>\r\n }\r\n @if (!imgPath() && !disabled()) {\r\n <mt-icon\r\n icon=\"general.upload-01\"\r\n class=\"text-primary-400 text-xl\"\r\n ></mt-icon>\r\n }\r\n </div>\r\n } @else if (loading()) {\r\n <div\r\n class=\"absolute inset-0 flex items-center justify-center rounded-full bg-surface-400/50\"\r\n >\r\n @if (uploadProgress() === 100) {\r\n <mt-icon\r\n icon=\"general.check\"\r\n class=\"text-primary-400 text-2xl\"\r\n ></mt-icon>\r\n } @else {\r\n <small class=\"text-primary-300 font-bold text-lg\">{{\r\n uploadProgress() + \"%\"\r\n }}</small>\r\n }\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: SecureImagePipe, name: "secureImage" }, { kind: "pipe", type: i1.TranslocoPipe, name: "transloco" }] });
|
|
268
269
|
}
|
|
269
270
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: UploadUserPreview, decorators: [{
|
|
270
271
|
type: Component,
|
|
271
|
-
args: [{ selector: 'mt-upload-user-preview', standalone: true, imports: [Icon, SecureImagePipe, Button, Icon, Avatar, TranslocoModule], template: "<div\r\n class=\"rounded-full p-1 w-fit\"\r\n [style.background]=\"\r\n 'conic-gradient(var(--p-primary-300) ' +\r\n uploadProgress() +\r\n '%, transparent ' +\r\n uploadProgress() +\r\n '%)'\r\n \"\r\n>\r\n <div\r\n class=\"relative rounded-full w-fit border-2 border-dashed border-gray-300 bg-white\"\r\n [class.opacity-50]=\"isDragging()\"\r\n >\r\n <mt-avatar\r\n [size]=\"size()\"\r\n [image]=\"imgPath() ? (imgPath() | secureImage: context()) : ''\"\r\n [icon]=\"defaultIcon()\"\r\n [styleClass]=\"userImgClass()\"\r\n >\r\n </mt-avatar>\r\n\r\n @if (!loading()) {\r\n <div\r\n class=\"absolute inset-0 flex items-center justify-center rounded-full bg-surface-400/50 opacity-0 hover:opacity-100 transition-opacity\"\r\n [class]=\"!imgPath() && !disabled() ? 'cursor-pointer' : ''\"\r\n (click)=\"OnUploadInputClicked()\"\r\n (dragover)=\"OnDragOver($event)\"\r\n (dragleave)=\"OnDragLeave($event)\"\r\n (drop)=\"OnDrop($event)\"\r\n >\r\n @if (!disabled() && !!imgPath()) {\r\n <mt-button\r\n variant=\"text\"\r\n icon=\"general.download-01\"\r\n [tooltip]=\"'components.upload.download' | transloco\"\r\n (onClick)=\"ondDownloadFile.emit(value())\"\r\n >\r\n </mt-button>\r\n <mt-button\r\n variant=\"text\"\r\n icon=\"general.trash-01\"\r\n [tooltip]=\"'components.upload.delete' | transloco\"\r\n severity=\"danger\"\r\n (onClick)=\"onDeleteFile.emit(
|
|
272
|
+
args: [{ selector: 'mt-upload-user-preview', standalone: true, imports: [Icon, SecureImagePipe, Button, Icon, Avatar, TranslocoModule], template: "<div\r\n class=\"rounded-full p-1 w-fit\"\r\n [style.background]=\"\r\n 'conic-gradient(var(--p-primary-300) ' +\r\n uploadProgress() +\r\n '%, transparent ' +\r\n uploadProgress() +\r\n '%)'\r\n \"\r\n>\r\n <div\r\n class=\"relative rounded-full w-fit border-2 border-dashed border-gray-300 bg-white\"\r\n [class.opacity-50]=\"isDragging()\"\r\n >\r\n <mt-avatar\r\n [size]=\"size()\"\r\n [image]=\"imgPath() ? (imgPath() | secureImage: context()) : ''\"\r\n [icon]=\"defaultIcon()\"\r\n [styleClass]=\"userImgClass()\"\r\n >\r\n </mt-avatar>\r\n\r\n @if (!loading()) {\r\n <div\r\n class=\"absolute inset-0 flex items-center justify-center rounded-full bg-surface-400/50 opacity-0 hover:opacity-100 transition-opacity\"\r\n [class]=\"!imgPath() && !disabled() ? 'cursor-pointer' : ''\"\r\n (click)=\"OnUploadInputClicked()\"\r\n (dragover)=\"OnDragOver($event)\"\r\n (dragleave)=\"OnDragLeave($event)\"\r\n (drop)=\"OnDrop($event)\"\r\n >\r\n @if (!disabled() && !!imgPath()) {\r\n <mt-button\r\n variant=\"text\"\r\n icon=\"general.download-01\"\r\n [tooltip]=\"'components.upload.download' | transloco\"\r\n (onClick)=\"ondDownloadFile.emit(value())\"\r\n >\r\n </mt-button>\r\n <mt-button\r\n variant=\"text\"\r\n icon=\"general.trash-01\"\r\n [tooltip]=\"'components.upload.delete' | transloco\"\r\n severity=\"danger\"\r\n (onClick)=\"onDeleteFile.emit($event)\"\r\n >\r\n </mt-button>\r\n }\r\n @if (!imgPath() && !disabled()) {\r\n <mt-icon\r\n icon=\"general.upload-01\"\r\n class=\"text-primary-400 text-xl\"\r\n ></mt-icon>\r\n }\r\n </div>\r\n } @else if (loading()) {\r\n <div\r\n class=\"absolute inset-0 flex items-center justify-center rounded-full bg-surface-400/50\"\r\n >\r\n @if (uploadProgress() === 100) {\r\n <mt-icon\r\n icon=\"general.check\"\r\n class=\"text-primary-400 text-2xl\"\r\n ></mt-icon>\r\n } @else {\r\n <small class=\"text-primary-300 font-bold text-lg\">{{\r\n uploadProgress() + \"%\"\r\n }}</small>\r\n }\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n" }]
|
|
272
273
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], imgPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "imgPath", required: false }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], uploadProgress: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadProgress", required: false }] }], isDragging: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDragging", required: false }] }], onUploadInputClicked: [{ type: i0.Output, args: ["onUploadInputClicked"] }], ondDownloadFile: [{ type: i0.Output, args: ["ondDownloadFile"] }], onDeleteFile: [{ type: i0.Output, args: ["onDeleteFile"] }], onDragOver: [{ type: i0.Output, args: ["onDragOver"] }], onDragLeave: [{ type: i0.Output, args: ["onDragLeave"] }], onDrop: [{ type: i0.Output, args: ["onDrop"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], userImgClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "userImgClass", required: false }] }] } });
|
|
273
274
|
|
|
274
275
|
const ACCEPT_TYPE_LABELS = {
|
|
@@ -301,6 +302,7 @@ const ACCEPT_TYPE_LABELS = {
|
|
|
301
302
|
};
|
|
302
303
|
class UploadField {
|
|
303
304
|
transloco = inject(TranslocoService);
|
|
305
|
+
confirmationService = inject(ConfirmationService);
|
|
304
306
|
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
305
307
|
title = input(this.transloco.translate('components.uploadField.uploadFile'), ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
306
308
|
description = input(this.transloco.translate('components.uploadField.clickOrDrop'), ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
|
|
@@ -423,10 +425,17 @@ class UploadField {
|
|
|
423
425
|
this.onModelChange(nextValue);
|
|
424
426
|
this.onChange.emit(nextValue);
|
|
425
427
|
}
|
|
426
|
-
onDelete(item) {
|
|
428
|
+
onDelete(item, event) {
|
|
427
429
|
if (this.disabled()) {
|
|
428
430
|
return;
|
|
429
431
|
}
|
|
432
|
+
this.confirmationService.confirmDelete({
|
|
433
|
+
type: 'popup',
|
|
434
|
+
event,
|
|
435
|
+
accept: () => this.performDelete(item),
|
|
436
|
+
});
|
|
437
|
+
}
|
|
438
|
+
performDelete(item) {
|
|
430
439
|
if (!this.isMultipleEnabled()) {
|
|
431
440
|
this.value.set(null);
|
|
432
441
|
this.onModelChange(null);
|
|
@@ -605,7 +614,7 @@ class UploadField {
|
|
|
605
614
|
});
|
|
606
615
|
}
|
|
607
616
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: UploadField, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
608
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: UploadField, isStandalone: true, selector: "mt-upload-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, endPoint: { classPropertyName: "endPoint", publicName: "endPoint", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userImgClass: { classPropertyName: "userImgClass", publicName: "userImgClass", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, isDragging: { classPropertyName: "isDragging", publicName: "isDragging", isSignal: true, isRequired: false, transformFunction: null }, fileSizeLimit: { classPropertyName: "fileSizeLimit", publicName: "fileSizeLimit", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isDragging: "isDraggingChange", onChange: "onChange" }, ngImport: i0, template: "<input\n #uploadInput\n type=\"file\"\n name=\"file[]\"\n (change)=\"onFileSelect($event)\"\n style=\"display: none\"\n [multiple]=\"isMultipleEnabled()\"\n [accept]=\"effectiveAccept()\"\n/>\n\n@if (shape() === \"circle\") {\n <div class=\"flex flex-col items-center gap-2 w-full\">\n <div class=\"flex\">\n <div class=\"flex flex-col items-center\">\n <mt-upload-user-preview\n [value]=\"primaryFile()\"\n [imgPath]=\"imgPath()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [loading]=\"loading()\"\n [size]=\"size()\"\n [context]=\"context()\"\n [userImgClass]=\"userImgClass()\"\n [isDragging]=\"isDragging()\"\n [uploadProgress]=\"uploadProgress()\"\n (onUploadInputClicked)=\"uploadInput.click()\"\n (ondDownloadFile)=\"downloadFile($event)\"\n (onDeleteFile)=\"onDelete(primaryFile())\"\n (onDragOver)=\"onDragOver($event)\"\n (onDragLeave)=\"onDragLeave($event)\"\n (onDrop)=\"onDrop($event)\"\n ></mt-upload-user-preview>\n @if (label()) {\n <label\n [class.required]=\"\n ngControl?.control?.hasValidator(requiredValidator)\n \"\n [for]=\"ngControl?.name || label()\"\n >{{ label() }}</label\n >\n }\n @if (acceptedTypesLabel()) {\n <span class=\"mt-1 text-xs text-surface-400\">\n {{\n \"components.upload.allowedTypes\"\n | transloco: { types: acceptedTypesLabel() }\n }}\n </span>\n }\n </div>\n </div>\n </div>\n} @else if (shape() === \"card\") {\n <mt-card\n headless\n class=\"border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50\"\n >\n <div class=\"content flex flex-col gap-5 items-center text-center\">\n @if (!files().length && !loading()) {\n <div class=\"flex flex-col gap-1\">\n @if (title()) {\n <div class=\"title text-lg font-semibold\">\n {{ title() }}\n </div>\n }\n @if (description()) {\n <div\n class=\"description text-sm text-muted-foreground secondary text-surface-500\"\n >\n {{ description() }}\n </div>\n }\n @if (acceptedTypesLabel()) {\n <div class=\"mt-1 flex items-center justify-center gap-1.5\">\n <mt-icon\n icon=\"general.info-circle\"\n class=\"text-xs text-surface-400\"\n />\n <span class=\"text-xs text-surface-400\">\n {{\n \"components.upload.allowedTypes\"\n | transloco: { types: acceptedTypesLabel() }\n }}\n </span>\n </div>\n }\n </div>\n }\n\n @if (files().length) {\n <div class=\"flex w-full flex-col gap-2\">\n @for (file of files(); track $index) {\n <mt-upload-file-preview\n style=\"width: 100%\"\n [value]=\"file\"\n [imgPath]=\"resolveImgPath(file)\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [loading]=\"loading()\"\n [context]=\"context()\"\n [uploadProgress]=\"uploadProgress()\"\n (onUploadInputClicked)=\"uploadInput.click()\"\n (ondDownloadFile)=\"downloadFile(file)\"\n (onDeleteFile)=\"onDelete(file)\"\n />\n }\n @if (\n isMultipleEnabled() && !disabled() && !readonly() && !loading()\n ) {\n <div class=\"flex flex-col items-center gap-1\">\n <mt-button\n [size]=\"'small'\"\n [label]=\"'components.upload.addMore' | transloco\"\n [icon]=\"'general.upload-01'\"\n (onClick)=\"uploadInput.click()\"\n />\n @if (acceptedTypesLabel()) {\n <span class=\"text-xs text-surface-400\">\n {{\n \"components.upload.allowedTypes\"\n | transloco: { types: acceptedTypesLabel() }\n }}\n </span>\n }\n </div>\n } @else if (acceptedTypesLabel()) {\n <span class=\"text-xs text-surface-400\">\n {{\n \"components.upload.allowedTypes\"\n | transloco: { types: acceptedTypesLabel() }\n }}\n </span>\n }\n </div>\n } @else if (loading()) {\n <div class=\"w-full flex gap-3 items-center justify-center p-3\">\n <p class=\"text-lg text-gray-500\">\n {{\n (\"components.upload.uploading\" | transloco) +\n uploadProgress() +\n \"%\"\n }}\n </p>\n </div>\n } @else {\n <mt-button\n [size]=\"'small'\"\n [label]=\"'components.upload.upload' | transloco\"\n [icon]=\"'general.upload-01'\"\n (onClick)=\"\n !loading() && !disabled() && !readonly() ? uploadInput.click() : ''\n \"\n [disabled]=\"disabled() || loading() || readonly()\"\n />\n }\n </div>\n </mt-card>\n} @else {\n <div class=\"flex flex-col items-start gap-2 w-full\">\n @if (label()) {\n <label\n [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\n [for]=\"ngControl?.name || label()\"\n >{{ label() }}</label\n >\n }\n\n <div\n class=\"w-full flex gap-3 items-center justify-center border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50\"\n [class]=\"disabled() ? 'bg-gray-50' : ''\"\n (click)=\"\n !loading() && !disabled() && !readonly() ? uploadInput.click() : ''\n \"\n [class.border-blue-500]=\"isDragging()\"\n [class.bg-blue-50]=\"isDragging()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n >\n @if (files().length) {\n <div\n class=\"flex w-full flex-col gap-2 p-2\"\n (click)=\"$event.stopPropagation()\"\n >\n @for (file of files(); track $index) {\n <mt-upload-file-preview\n style=\"width: 100%\"\n [value]=\"file\"\n [imgPath]=\"resolveImgPath(file)\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [loading]=\"loading()\"\n [context]=\"context()\"\n [uploadProgress]=\"uploadProgress()\"\n (onUploadInputClicked)=\"uploadInput.click()\"\n (ondDownloadFile)=\"downloadFile(file)\"\n (onDeleteFile)=\"onDelete(file)\"\n />\n }\n @if (\n isMultipleEnabled() && !disabled() && !readonly() && !loading()\n ) {\n <div\n class=\"flex w-full flex-col border-t border-dashed border-gray-300\"\n >\n <div\n class=\"w-full flex gap-2 items-center justify-center p-2 cursor-pointer hover:bg-gray-100 rounded-b-lg transition-colors\"\n (click)=\"uploadInput.click()\"\n >\n <mt-icon icon=\"general.upload-01\" />\n <span class=\"text-sm text-gray-500\">\n {{ \"components.upload.addMore\" | transloco }}\n </span>\n </div>\n @if (acceptedTypesLabel()) {\n <span class=\"px-2 pb-2 text-center text-xs text-surface-400\">\n {{\n \"components.upload.allowedTypes\"\n | transloco: { types: acceptedTypesLabel() }\n }}\n </span>\n }\n </div>\n } @else if (acceptedTypesLabel()) {\n <span class=\"px-2 pb-2 text-center text-xs text-surface-400\">\n {{\n \"components.upload.allowedTypes\"\n | transloco: { types: acceptedTypesLabel() }\n }}\n </span>\n }\n </div>\n } @else if (loading()) {\n <div class=\"w-full flex gap-3 items-center justify-center p-3\">\n <p class=\"text-lg text-gray-500\">\n {{\n (\"components.upload.uploading\" | transloco) +\n uploadProgress() +\n \"%\"\n }}\n </p>\n </div>\n } @else {\n <div class=\"w-full flex flex-col gap-1 items-center justify-center p-3\">\n <div class=\"flex gap-3 items-center\">\n <mt-icon icon=\"general.upload-01\" />\n <p class=\"text-lg text-gray-500\">\n {{ \"components.upload.clickOrDrop\" | transloco }}\n </p>\n </div>\n @if (acceptedTypesLabel()) {\n <span class=\"text-xs text-surface-400\">\n {{\n \"components.upload.allowedTypes\"\n | transloco: { types: acceptedTypesLabel() }\n }}\n </span>\n }\n </div>\n }\n </div>\n </div>\n}\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\n", dependencies: [{ kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: UploadUserPreview, selector: "mt-upload-user-preview", inputs: ["value", "imgPath", "context", "loading", "uploadProgress", "isDragging", "disabled", "readonly", "size", "userImgClass"], outputs: ["onUploadInputClicked", "ondDownloadFile", "onDeleteFile", "onDragOver", "onDragLeave", "onDrop", "disabledChange"] }, { kind: "component", type: UploadFilePreview, selector: "mt-upload-file-preview", inputs: ["value", "imgPath", "context", "loading", "uploadProgress", "disabled", "readonly", "size"], outputs: ["onUploadInputClicked", "ondDownloadFile", "onDeleteFile", "disabledChange"] }, { kind: "component", type: FieldValidation, selector: "mt-field-validation", inputs: ["control", "touched"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i1.TranslocoPipe, name: "transloco" }] });
|
|
617
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: UploadField, isStandalone: true, selector: "mt-upload-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, endPoint: { classPropertyName: "endPoint", publicName: "endPoint", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userImgClass: { classPropertyName: "userImgClass", publicName: "userImgClass", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, isDragging: { classPropertyName: "isDragging", publicName: "isDragging", isSignal: true, isRequired: false, transformFunction: null }, fileSizeLimit: { classPropertyName: "fileSizeLimit", publicName: "fileSizeLimit", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isDragging: "isDraggingChange", onChange: "onChange" }, ngImport: i0, template: "<input\r\n #uploadInput\r\n type=\"file\"\r\n name=\"file[]\"\r\n (change)=\"onFileSelect($event)\"\r\n style=\"display: none\"\r\n [multiple]=\"isMultipleEnabled()\"\r\n [accept]=\"effectiveAccept()\"\r\n/>\r\n\r\n@if (shape() === \"circle\") {\r\n <div class=\"flex flex-col items-center gap-2 w-full\">\r\n <div class=\"flex\">\r\n <div class=\"flex flex-col items-center\">\r\n <mt-upload-user-preview\r\n [value]=\"primaryFile()\"\r\n [imgPath]=\"imgPath()\"\r\n [disabled]=\"disabled()\"\r\n [readonly]=\"readonly()\"\r\n [loading]=\"loading()\"\r\n [size]=\"size()\"\r\n [context]=\"context()\"\r\n [userImgClass]=\"userImgClass()\"\r\n [isDragging]=\"isDragging()\"\r\n [uploadProgress]=\"uploadProgress()\"\r\n (onUploadInputClicked)=\"uploadInput.click()\"\r\n (ondDownloadFile)=\"downloadFile($event)\"\r\n (onDeleteFile)=\"onDelete(primaryFile(), $event)\"\r\n (onDragOver)=\"onDragOver($event)\"\r\n (onDragLeave)=\"onDragLeave($event)\"\r\n (onDrop)=\"onDrop($event)\"\r\n ></mt-upload-user-preview>\r\n @if (label()) {\r\n <label\r\n [class.required]=\"\r\n ngControl?.control?.hasValidator(requiredValidator)\r\n \"\r\n [for]=\"ngControl?.name || label()\"\r\n >{{ label() }}</label\r\n >\r\n }\r\n @if (acceptedTypesLabel()) {\r\n <span class=\"mt-1 text-xs text-surface-400\">\r\n {{\r\n \"components.upload.allowedTypes\"\r\n | transloco: { types: acceptedTypesLabel() }\r\n }}\r\n </span>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n} @else if (shape() === \"card\") {\r\n <mt-card\r\n headless\r\n class=\"border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50\"\r\n >\r\n <div class=\"content flex flex-col gap-5 items-center text-center\">\r\n @if (!files().length && !loading()) {\r\n <div class=\"flex flex-col gap-1\">\r\n @if (title()) {\r\n <div class=\"title text-lg font-semibold\">\r\n {{ title() }}\r\n </div>\r\n }\r\n @if (description()) {\r\n <div\r\n class=\"description text-sm text-muted-foreground secondary text-surface-500\"\r\n >\r\n {{ description() }}\r\n </div>\r\n }\r\n @if (acceptedTypesLabel()) {\r\n <div class=\"mt-1 flex items-center justify-center gap-1.5\">\r\n <mt-icon\r\n icon=\"general.info-circle\"\r\n class=\"text-xs text-surface-400\"\r\n />\r\n <span class=\"text-xs text-surface-400\">\r\n {{\r\n \"components.upload.allowedTypes\"\r\n | transloco: { types: acceptedTypesLabel() }\r\n }}\r\n </span>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n @if (files().length) {\r\n <div class=\"flex w-full flex-col gap-2\">\r\n @for (file of files(); track $index) {\r\n <mt-upload-file-preview\r\n style=\"width: 100%\"\r\n [value]=\"file\"\r\n [imgPath]=\"resolveImgPath(file)\"\r\n [disabled]=\"disabled()\"\r\n [readonly]=\"readonly()\"\r\n [loading]=\"loading()\"\r\n [context]=\"context()\"\r\n [uploadProgress]=\"uploadProgress()\"\r\n (onUploadInputClicked)=\"uploadInput.click()\"\r\n (ondDownloadFile)=\"downloadFile(file)\"\r\n (onDeleteFile)=\"onDelete(file, $event)\"\r\n />\r\n }\r\n @if (\r\n isMultipleEnabled() && !disabled() && !readonly() && !loading()\r\n ) {\r\n <div class=\"flex flex-col items-center gap-1\">\r\n <mt-button\r\n [size]=\"'small'\"\r\n [label]=\"'components.upload.addMore' | transloco\"\r\n [icon]=\"'general.upload-01'\"\r\n (onClick)=\"uploadInput.click()\"\r\n />\r\n @if (acceptedTypesLabel()) {\r\n <span class=\"text-xs text-surface-400\">\r\n {{\r\n \"components.upload.allowedTypes\"\r\n | transloco: { types: acceptedTypesLabel() }\r\n }}\r\n </span>\r\n }\r\n </div>\r\n } @else if (acceptedTypesLabel()) {\r\n <span class=\"text-xs text-surface-400\">\r\n {{\r\n \"components.upload.allowedTypes\"\r\n | transloco: { types: acceptedTypesLabel() }\r\n }}\r\n </span>\r\n }\r\n </div>\r\n } @else if (loading()) {\r\n <div class=\"w-full flex gap-3 items-center justify-center p-3\">\r\n <p class=\"text-lg text-gray-500\">\r\n {{\r\n (\"components.upload.uploading\" | transloco) +\r\n uploadProgress() +\r\n \"%\"\r\n }}\r\n </p>\r\n </div>\r\n } @else {\r\n <mt-button\r\n [size]=\"'small'\"\r\n [label]=\"'components.upload.upload' | transloco\"\r\n [icon]=\"'general.upload-01'\"\r\n (onClick)=\"\r\n !loading() && !disabled() && !readonly() ? uploadInput.click() : ''\r\n \"\r\n [disabled]=\"disabled() || loading() || readonly()\"\r\n />\r\n }\r\n </div>\r\n </mt-card>\r\n} @else {\r\n <div class=\"flex flex-col items-start gap-2 w-full\">\r\n @if (label()) {\r\n <label\r\n [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\r\n [for]=\"ngControl?.name || label()\"\r\n >{{ label() }}</label\r\n >\r\n }\r\n\r\n <div\r\n class=\"w-full flex gap-3 items-center justify-center border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50\"\r\n [class]=\"disabled() ? 'bg-gray-50' : ''\"\r\n (click)=\"\r\n !loading() && !disabled() && !readonly() ? uploadInput.click() : ''\r\n \"\r\n [class.border-blue-500]=\"isDragging()\"\r\n [class.bg-blue-50]=\"isDragging()\"\r\n (dragover)=\"onDragOver($event)\"\r\n (dragleave)=\"onDragLeave($event)\"\r\n (drop)=\"onDrop($event)\"\r\n >\r\n @if (files().length) {\r\n <div\r\n class=\"flex w-full flex-col gap-2 p-2\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n @for (file of files(); track $index) {\r\n <mt-upload-file-preview\r\n style=\"width: 100%\"\r\n [value]=\"file\"\r\n [imgPath]=\"resolveImgPath(file)\"\r\n [disabled]=\"disabled()\"\r\n [readonly]=\"readonly()\"\r\n [loading]=\"loading()\"\r\n [context]=\"context()\"\r\n [uploadProgress]=\"uploadProgress()\"\r\n (onUploadInputClicked)=\"uploadInput.click()\"\r\n (ondDownloadFile)=\"downloadFile(file)\"\r\n (onDeleteFile)=\"onDelete(file, $event)\"\r\n />\r\n }\r\n @if (\r\n isMultipleEnabled() && !disabled() && !readonly() && !loading()\r\n ) {\r\n <div\r\n class=\"flex w-full flex-col border-t border-dashed border-gray-300\"\r\n >\r\n <div\r\n class=\"w-full flex gap-2 items-center justify-center p-2 cursor-pointer hover:bg-gray-100 rounded-b-lg transition-colors\"\r\n (click)=\"uploadInput.click()\"\r\n >\r\n <mt-icon icon=\"general.upload-01\" />\r\n <span class=\"text-sm text-gray-500\">\r\n {{ \"components.upload.addMore\" | transloco }}\r\n </span>\r\n </div>\r\n @if (acceptedTypesLabel()) {\r\n <span class=\"px-2 pb-2 text-center text-xs text-surface-400\">\r\n {{\r\n \"components.upload.allowedTypes\"\r\n | transloco: { types: acceptedTypesLabel() }\r\n }}\r\n </span>\r\n }\r\n </div>\r\n } @else if (acceptedTypesLabel()) {\r\n <span class=\"px-2 pb-2 text-center text-xs text-surface-400\">\r\n {{\r\n \"components.upload.allowedTypes\"\r\n | transloco: { types: acceptedTypesLabel() }\r\n }}\r\n </span>\r\n }\r\n </div>\r\n } @else if (loading()) {\r\n <div class=\"w-full flex gap-3 items-center justify-center p-3\">\r\n <p class=\"text-lg text-gray-500\">\r\n {{\r\n (\"components.upload.uploading\" | transloco) +\r\n uploadProgress() +\r\n \"%\"\r\n }}\r\n </p>\r\n </div>\r\n } @else {\r\n <div class=\"w-full flex flex-col gap-1 items-center justify-center p-3\">\r\n <div class=\"flex gap-3 items-center\">\r\n <mt-icon icon=\"general.upload-01\" />\r\n <p class=\"text-lg text-gray-500\">\r\n {{ \"components.upload.clickOrDrop\" | transloco }}\r\n </p>\r\n </div>\r\n @if (acceptedTypesLabel()) {\r\n <span class=\"text-xs text-surface-400\">\r\n {{\r\n \"components.upload.allowedTypes\"\r\n | transloco: { types: acceptedTypesLabel() }\r\n }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n}\r\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\r\n", dependencies: [{ kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: UploadUserPreview, selector: "mt-upload-user-preview", inputs: ["value", "imgPath", "context", "loading", "uploadProgress", "isDragging", "disabled", "readonly", "size", "userImgClass"], outputs: ["onUploadInputClicked", "ondDownloadFile", "onDeleteFile", "onDragOver", "onDragLeave", "onDrop", "disabledChange"] }, { kind: "component", type: UploadFilePreview, selector: "mt-upload-file-preview", inputs: ["value", "imgPath", "context", "loading", "uploadProgress", "disabled", "readonly", "size"], outputs: ["onUploadInputClicked", "ondDownloadFile", "onDeleteFile", "disabledChange"] }, { kind: "component", type: FieldValidation, selector: "mt-field-validation", inputs: ["control", "touched"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i1.TranslocoPipe, name: "transloco" }] });
|
|
609
618
|
}
|
|
610
619
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: UploadField, decorators: [{
|
|
611
620
|
type: Component,
|
|
@@ -617,7 +626,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
|
|
|
617
626
|
Card,
|
|
618
627
|
Button,
|
|
619
628
|
TranslocoModule,
|
|
620
|
-
], template: "<input\n #uploadInput\n type=\"file\"\n name=\"file[]\"\n (change)=\"onFileSelect($event)\"\n style=\"display: none\"\n [multiple]=\"isMultipleEnabled()\"\n [accept]=\"effectiveAccept()\"\n/>\n\n@if (shape() === \"circle\") {\n <div class=\"flex flex-col items-center gap-2 w-full\">\n <div class=\"flex\">\n <div class=\"flex flex-col items-center\">\n <mt-upload-user-preview\n [value]=\"primaryFile()\"\n [imgPath]=\"imgPath()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [loading]=\"loading()\"\n [size]=\"size()\"\n [context]=\"context()\"\n [userImgClass]=\"userImgClass()\"\n [isDragging]=\"isDragging()\"\n [uploadProgress]=\"uploadProgress()\"\n (onUploadInputClicked)=\"uploadInput.click()\"\n (ondDownloadFile)=\"downloadFile($event)\"\n (onDeleteFile)=\"onDelete(primaryFile())\"\n (onDragOver)=\"onDragOver($event)\"\n (onDragLeave)=\"onDragLeave($event)\"\n (onDrop)=\"onDrop($event)\"\n ></mt-upload-user-preview>\n @if (label()) {\n <label\n [class.required]=\"\n ngControl?.control?.hasValidator(requiredValidator)\n \"\n [for]=\"ngControl?.name || label()\"\n >{{ label() }}</label\n >\n }\n @if (acceptedTypesLabel()) {\n <span class=\"mt-1 text-xs text-surface-400\">\n {{\n \"components.upload.allowedTypes\"\n | transloco: { types: acceptedTypesLabel() }\n }}\n </span>\n }\n </div>\n </div>\n </div>\n} @else if (shape() === \"card\") {\n <mt-card\n headless\n class=\"border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50\"\n >\n <div class=\"content flex flex-col gap-5 items-center text-center\">\n @if (!files().length && !loading()) {\n <div class=\"flex flex-col gap-1\">\n @if (title()) {\n <div class=\"title text-lg font-semibold\">\n {{ title() }}\n </div>\n }\n @if (description()) {\n <div\n class=\"description text-sm text-muted-foreground secondary text-surface-500\"\n >\n {{ description() }}\n </div>\n }\n @if (acceptedTypesLabel()) {\n <div class=\"mt-1 flex items-center justify-center gap-1.5\">\n <mt-icon\n icon=\"general.info-circle\"\n class=\"text-xs text-surface-400\"\n />\n <span class=\"text-xs text-surface-400\">\n {{\n \"components.upload.allowedTypes\"\n | transloco: { types: acceptedTypesLabel() }\n }}\n </span>\n </div>\n }\n </div>\n }\n\n @if (files().length) {\n <div class=\"flex w-full flex-col gap-2\">\n @for (file of files(); track $index) {\n <mt-upload-file-preview\n style=\"width: 100%\"\n [value]=\"file\"\n [imgPath]=\"resolveImgPath(file)\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [loading]=\"loading()\"\n [context]=\"context()\"\n [uploadProgress]=\"uploadProgress()\"\n (onUploadInputClicked)=\"uploadInput.click()\"\n (ondDownloadFile)=\"downloadFile(file)\"\n (onDeleteFile)=\"onDelete(file)\"\n />\n }\n @if (\n isMultipleEnabled() && !disabled() && !readonly() && !loading()\n ) {\n <div class=\"flex flex-col items-center gap-1\">\n <mt-button\n [size]=\"'small'\"\n [label]=\"'components.upload.addMore' | transloco\"\n [icon]=\"'general.upload-01'\"\n (onClick)=\"uploadInput.click()\"\n />\n @if (acceptedTypesLabel()) {\n <span class=\"text-xs text-surface-400\">\n {{\n \"components.upload.allowedTypes\"\n | transloco: { types: acceptedTypesLabel() }\n }}\n </span>\n }\n </div>\n } @else if (acceptedTypesLabel()) {\n <span class=\"text-xs text-surface-400\">\n {{\n \"components.upload.allowedTypes\"\n | transloco: { types: acceptedTypesLabel() }\n }}\n </span>\n }\n </div>\n } @else if (loading()) {\n <div class=\"w-full flex gap-3 items-center justify-center p-3\">\n <p class=\"text-lg text-gray-500\">\n {{\n (\"components.upload.uploading\" | transloco) +\n uploadProgress() +\n \"%\"\n }}\n </p>\n </div>\n } @else {\n <mt-button\n [size]=\"'small'\"\n [label]=\"'components.upload.upload' | transloco\"\n [icon]=\"'general.upload-01'\"\n (onClick)=\"\n !loading() && !disabled() && !readonly() ? uploadInput.click() : ''\n \"\n [disabled]=\"disabled() || loading() || readonly()\"\n />\n }\n </div>\n </mt-card>\n} @else {\n <div class=\"flex flex-col items-start gap-2 w-full\">\n @if (label()) {\n <label\n [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\n [for]=\"ngControl?.name || label()\"\n >{{ label() }}</label\n >\n }\n\n <div\n class=\"w-full flex gap-3 items-center justify-center border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50\"\n [class]=\"disabled() ? 'bg-gray-50' : ''\"\n (click)=\"\n !loading() && !disabled() && !readonly() ? uploadInput.click() : ''\n \"\n [class.border-blue-500]=\"isDragging()\"\n [class.bg-blue-50]=\"isDragging()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n >\n @if (files().length) {\n <div\n class=\"flex w-full flex-col gap-2 p-2\"\n (click)=\"$event.stopPropagation()\"\n >\n @for (file of files(); track $index) {\n <mt-upload-file-preview\n style=\"width: 100%\"\n [value]=\"file\"\n [imgPath]=\"resolveImgPath(file)\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [loading]=\"loading()\"\n [context]=\"context()\"\n [uploadProgress]=\"uploadProgress()\"\n (onUploadInputClicked)=\"uploadInput.click()\"\n (ondDownloadFile)=\"downloadFile(file)\"\n (onDeleteFile)=\"onDelete(file)\"\n />\n }\n @if (\n isMultipleEnabled() && !disabled() && !readonly() && !loading()\n ) {\n <div\n class=\"flex w-full flex-col border-t border-dashed border-gray-300\"\n >\n <div\n class=\"w-full flex gap-2 items-center justify-center p-2 cursor-pointer hover:bg-gray-100 rounded-b-lg transition-colors\"\n (click)=\"uploadInput.click()\"\n >\n <mt-icon icon=\"general.upload-01\" />\n <span class=\"text-sm text-gray-500\">\n {{ \"components.upload.addMore\" | transloco }}\n </span>\n </div>\n @if (acceptedTypesLabel()) {\n <span class=\"px-2 pb-2 text-center text-xs text-surface-400\">\n {{\n \"components.upload.allowedTypes\"\n | transloco: { types: acceptedTypesLabel() }\n }}\n </span>\n }\n </div>\n } @else if (acceptedTypesLabel()) {\n <span class=\"px-2 pb-2 text-center text-xs text-surface-400\">\n {{\n \"components.upload.allowedTypes\"\n | transloco: { types: acceptedTypesLabel() }\n }}\n </span>\n }\n </div>\n } @else if (loading()) {\n <div class=\"w-full flex gap-3 items-center justify-center p-3\">\n <p class=\"text-lg text-gray-500\">\n {{\n (\"components.upload.uploading\" | transloco) +\n uploadProgress() +\n \"%\"\n }}\n </p>\n </div>\n } @else {\n <div class=\"w-full flex flex-col gap-1 items-center justify-center p-3\">\n <div class=\"flex gap-3 items-center\">\n <mt-icon icon=\"general.upload-01\" />\n <p class=\"text-lg text-gray-500\">\n {{ \"components.upload.clickOrDrop\" | transloco }}\n </p>\n </div>\n @if (acceptedTypesLabel()) {\n <span class=\"text-xs text-surface-400\">\n {{\n \"components.upload.allowedTypes\"\n | transloco: { types: acceptedTypesLabel() }\n }}\n </span>\n }\n </div>\n }\n </div>\n </div>\n}\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\n" }]
|
|
629
|
+
], template: "<input\r\n #uploadInput\r\n type=\"file\"\r\n name=\"file[]\"\r\n (change)=\"onFileSelect($event)\"\r\n style=\"display: none\"\r\n [multiple]=\"isMultipleEnabled()\"\r\n [accept]=\"effectiveAccept()\"\r\n/>\r\n\r\n@if (shape() === \"circle\") {\r\n <div class=\"flex flex-col items-center gap-2 w-full\">\r\n <div class=\"flex\">\r\n <div class=\"flex flex-col items-center\">\r\n <mt-upload-user-preview\r\n [value]=\"primaryFile()\"\r\n [imgPath]=\"imgPath()\"\r\n [disabled]=\"disabled()\"\r\n [readonly]=\"readonly()\"\r\n [loading]=\"loading()\"\r\n [size]=\"size()\"\r\n [context]=\"context()\"\r\n [userImgClass]=\"userImgClass()\"\r\n [isDragging]=\"isDragging()\"\r\n [uploadProgress]=\"uploadProgress()\"\r\n (onUploadInputClicked)=\"uploadInput.click()\"\r\n (ondDownloadFile)=\"downloadFile($event)\"\r\n (onDeleteFile)=\"onDelete(primaryFile(), $event)\"\r\n (onDragOver)=\"onDragOver($event)\"\r\n (onDragLeave)=\"onDragLeave($event)\"\r\n (onDrop)=\"onDrop($event)\"\r\n ></mt-upload-user-preview>\r\n @if (label()) {\r\n <label\r\n [class.required]=\"\r\n ngControl?.control?.hasValidator(requiredValidator)\r\n \"\r\n [for]=\"ngControl?.name || label()\"\r\n >{{ label() }}</label\r\n >\r\n }\r\n @if (acceptedTypesLabel()) {\r\n <span class=\"mt-1 text-xs text-surface-400\">\r\n {{\r\n \"components.upload.allowedTypes\"\r\n | transloco: { types: acceptedTypesLabel() }\r\n }}\r\n </span>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n} @else if (shape() === \"card\") {\r\n <mt-card\r\n headless\r\n class=\"border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50\"\r\n >\r\n <div class=\"content flex flex-col gap-5 items-center text-center\">\r\n @if (!files().length && !loading()) {\r\n <div class=\"flex flex-col gap-1\">\r\n @if (title()) {\r\n <div class=\"title text-lg font-semibold\">\r\n {{ title() }}\r\n </div>\r\n }\r\n @if (description()) {\r\n <div\r\n class=\"description text-sm text-muted-foreground secondary text-surface-500\"\r\n >\r\n {{ description() }}\r\n </div>\r\n }\r\n @if (acceptedTypesLabel()) {\r\n <div class=\"mt-1 flex items-center justify-center gap-1.5\">\r\n <mt-icon\r\n icon=\"general.info-circle\"\r\n class=\"text-xs text-surface-400\"\r\n />\r\n <span class=\"text-xs text-surface-400\">\r\n {{\r\n \"components.upload.allowedTypes\"\r\n | transloco: { types: acceptedTypesLabel() }\r\n }}\r\n </span>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n @if (files().length) {\r\n <div class=\"flex w-full flex-col gap-2\">\r\n @for (file of files(); track $index) {\r\n <mt-upload-file-preview\r\n style=\"width: 100%\"\r\n [value]=\"file\"\r\n [imgPath]=\"resolveImgPath(file)\"\r\n [disabled]=\"disabled()\"\r\n [readonly]=\"readonly()\"\r\n [loading]=\"loading()\"\r\n [context]=\"context()\"\r\n [uploadProgress]=\"uploadProgress()\"\r\n (onUploadInputClicked)=\"uploadInput.click()\"\r\n (ondDownloadFile)=\"downloadFile(file)\"\r\n (onDeleteFile)=\"onDelete(file, $event)\"\r\n />\r\n }\r\n @if (\r\n isMultipleEnabled() && !disabled() && !readonly() && !loading()\r\n ) {\r\n <div class=\"flex flex-col items-center gap-1\">\r\n <mt-button\r\n [size]=\"'small'\"\r\n [label]=\"'components.upload.addMore' | transloco\"\r\n [icon]=\"'general.upload-01'\"\r\n (onClick)=\"uploadInput.click()\"\r\n />\r\n @if (acceptedTypesLabel()) {\r\n <span class=\"text-xs text-surface-400\">\r\n {{\r\n \"components.upload.allowedTypes\"\r\n | transloco: { types: acceptedTypesLabel() }\r\n }}\r\n </span>\r\n }\r\n </div>\r\n } @else if (acceptedTypesLabel()) {\r\n <span class=\"text-xs text-surface-400\">\r\n {{\r\n \"components.upload.allowedTypes\"\r\n | transloco: { types: acceptedTypesLabel() }\r\n }}\r\n </span>\r\n }\r\n </div>\r\n } @else if (loading()) {\r\n <div class=\"w-full flex gap-3 items-center justify-center p-3\">\r\n <p class=\"text-lg text-gray-500\">\r\n {{\r\n (\"components.upload.uploading\" | transloco) +\r\n uploadProgress() +\r\n \"%\"\r\n }}\r\n </p>\r\n </div>\r\n } @else {\r\n <mt-button\r\n [size]=\"'small'\"\r\n [label]=\"'components.upload.upload' | transloco\"\r\n [icon]=\"'general.upload-01'\"\r\n (onClick)=\"\r\n !loading() && !disabled() && !readonly() ? uploadInput.click() : ''\r\n \"\r\n [disabled]=\"disabled() || loading() || readonly()\"\r\n />\r\n }\r\n </div>\r\n </mt-card>\r\n} @else {\r\n <div class=\"flex flex-col items-start gap-2 w-full\">\r\n @if (label()) {\r\n <label\r\n [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\r\n [for]=\"ngControl?.name || label()\"\r\n >{{ label() }}</label\r\n >\r\n }\r\n\r\n <div\r\n class=\"w-full flex gap-3 items-center justify-center border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50\"\r\n [class]=\"disabled() ? 'bg-gray-50' : ''\"\r\n (click)=\"\r\n !loading() && !disabled() && !readonly() ? uploadInput.click() : ''\r\n \"\r\n [class.border-blue-500]=\"isDragging()\"\r\n [class.bg-blue-50]=\"isDragging()\"\r\n (dragover)=\"onDragOver($event)\"\r\n (dragleave)=\"onDragLeave($event)\"\r\n (drop)=\"onDrop($event)\"\r\n >\r\n @if (files().length) {\r\n <div\r\n class=\"flex w-full flex-col gap-2 p-2\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n @for (file of files(); track $index) {\r\n <mt-upload-file-preview\r\n style=\"width: 100%\"\r\n [value]=\"file\"\r\n [imgPath]=\"resolveImgPath(file)\"\r\n [disabled]=\"disabled()\"\r\n [readonly]=\"readonly()\"\r\n [loading]=\"loading()\"\r\n [context]=\"context()\"\r\n [uploadProgress]=\"uploadProgress()\"\r\n (onUploadInputClicked)=\"uploadInput.click()\"\r\n (ondDownloadFile)=\"downloadFile(file)\"\r\n (onDeleteFile)=\"onDelete(file, $event)\"\r\n />\r\n }\r\n @if (\r\n isMultipleEnabled() && !disabled() && !readonly() && !loading()\r\n ) {\r\n <div\r\n class=\"flex w-full flex-col border-t border-dashed border-gray-300\"\r\n >\r\n <div\r\n class=\"w-full flex gap-2 items-center justify-center p-2 cursor-pointer hover:bg-gray-100 rounded-b-lg transition-colors\"\r\n (click)=\"uploadInput.click()\"\r\n >\r\n <mt-icon icon=\"general.upload-01\" />\r\n <span class=\"text-sm text-gray-500\">\r\n {{ \"components.upload.addMore\" | transloco }}\r\n </span>\r\n </div>\r\n @if (acceptedTypesLabel()) {\r\n <span class=\"px-2 pb-2 text-center text-xs text-surface-400\">\r\n {{\r\n \"components.upload.allowedTypes\"\r\n | transloco: { types: acceptedTypesLabel() }\r\n }}\r\n </span>\r\n }\r\n </div>\r\n } @else if (acceptedTypesLabel()) {\r\n <span class=\"px-2 pb-2 text-center text-xs text-surface-400\">\r\n {{\r\n \"components.upload.allowedTypes\"\r\n | transloco: { types: acceptedTypesLabel() }\r\n }}\r\n </span>\r\n }\r\n </div>\r\n } @else if (loading()) {\r\n <div class=\"w-full flex gap-3 items-center justify-center p-3\">\r\n <p class=\"text-lg text-gray-500\">\r\n {{\r\n (\"components.upload.uploading\" | transloco) +\r\n uploadProgress() +\r\n \"%\"\r\n }}\r\n </p>\r\n </div>\r\n } @else {\r\n <div class=\"w-full flex flex-col gap-1 items-center justify-center p-3\">\r\n <div class=\"flex gap-3 items-center\">\r\n <mt-icon icon=\"general.upload-01\" />\r\n <p class=\"text-lg text-gray-500\">\r\n {{ \"components.upload.clickOrDrop\" | transloco }}\r\n </p>\r\n </div>\r\n @if (acceptedTypesLabel()) {\r\n <span class=\"text-xs text-surface-400\">\r\n {{\r\n \"components.upload.allowedTypes\"\r\n | transloco: { types: acceptedTypesLabel() }\r\n }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n}\r\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\r\n" }]
|
|
621
630
|
}], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], endPoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "endPoint", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], userImgClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "userImgClass", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], isDragging: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDragging", required: false }] }, { type: i0.Output, args: ["isDraggingChange"] }], fileSizeLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileSizeLimit", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: false }] }], onChange: [{ type: i0.Output, args: ["onChange"] }] } });
|
|
622
631
|
/**
|
|
623
632
|
* Re-validates a picked/dropped file against the `accept` spec on the client,
|