@masterteam/components 0.0.174 → 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 +300 -282
- package/assets/i18n/en.json +300 -282
- 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-drawer.mjs +8 -4
- package/fesm2022/masterteam-components-drawer.mjs.map +1 -1
- package/fesm2022/masterteam-components-dynamic-drawer.mjs +1 -4
- package/fesm2022/masterteam-components-dynamic-drawer.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-drawer.d.ts +2 -0
- package/types/masterteam-components-dynamic-drawer.d.ts +0 -1
- 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,
|