@masterteam/components 0.0.131 → 0.0.132

package/fesm2022/masterteam-components-upload-field.mjs

@@ -0,0 +1,554 @@
+import * as i0 from '@angular/core';
+import { inject, ChangeDetectorRef, Pipe, input, output, model, computed, Component, signal } from '@angular/core';
+import { Button } from '@masterteam/components/button';
+import { map, tap, finalize, shareReplay, distinctUntilChanged, switchMap, filter, catchError } from 'rxjs/operators';
+import { DomSanitizer } from '@angular/platform-browser';
+import { Subscription, BehaviorSubject, of, finalize as finalize$1, catchError as catchError$1, throwError, take, forkJoin, map as map$1 } from 'rxjs';
+import { HttpClient, HttpContext } from '@angular/common/http';
+import { Avatar } from '@masterteam/components/avatar';
+import * as i1 from '@jsverse/transloco';
+import { TranslocoModule } from '@jsverse/transloco';
+import { Tooltip } from '@masterteam/components/tooltip';
+import { Icon } from '@masterteam/icons';
+import { Validators, NgControl } from '@angular/forms';
+import { FieldValidation } from '@masterteam/components/field-validation';
+import { Card } from '@masterteam/components/card';
+
+class SecureImagePipe {
+    static cachedBlobUrls = new Map();
+    static pendingRequests = new Map();
+    httpClient = inject(HttpClient);
+    domSanitizer = inject(DomSanitizer);
+    cdr = inject(ChangeDetectorRef);
+    constructor() {
+        this.setUpSubscription();
+    }
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
+    }
+    subscription = new Subscription();
+    latestValue = '';
+    transformValue = new BehaviorSubject(null);
+    loading = false;
+    transform(imagePath, wrapUrlOrContext, contextOrEndpoint, endPoint = 'uploader/') {
+        const hasExtraArgs = arguments.length > 1;
+        const isWrapFlag = typeof wrapUrlOrContext === 'boolean';
+        let context;
+        let wrapUrl = true;
+        let useEndpoint = false;
+        let endpoint = '';
+        let sanitize = true;
+        if (!hasExtraArgs || isWrapFlag) {
+            // Backward compatible mode: (imagePath, wrapUrl?, context?, endPoint?)
+            wrapUrl = isWrapFlag ? wrapUrlOrContext : false;
+            useEndpoint = true;
+            endpoint = endPoint;
+            if (contextOrEndpoint instanceof HttpContext) {
+                context = contextOrEndpoint;
+            }
+            else if (typeof contextOrEndpoint === 'string') {
+                endpoint = contextOrEndpoint;
+            }
+            sanitize = false;
+        }
+        else {
+            // Components mode: (imagePath, context)
+            context = wrapUrlOrContext;
+            wrapUrl = true;
+            useEndpoint = false;
+            endpoint = '';
+            sanitize = true;
+        }
+        const fullPath = useEndpoint
+            ? imagePath
+                ? endpoint + imagePath
+                : ''
+            : imagePath;
+        if (!fullPath || fullPath.includes('null')) {
+            this.latestValue = '';
+            this.loading = false;
+            this.transformValue.next(null);
+            return '';
+        }
+        this.transformValue.next({
+            fullPath,
+            cacheKey: SecureImagePipe.createCacheKey(fullPath, context),
+            context,
+            wrapUrl,
+            useEndpoint,
+            sanitize,
+        });
+        if (this.loading || !this.latestValue) {
+            return '';
+        }
+        if (!useEndpoint || wrapUrl) {
+            return this.latestValue;
+        }
+        return `url('${this.latestValue}')`;
+    }
+    static createCacheKey(fullPath, context) {
+        if (!context) {
+            return `default:${fullPath}`;
+        }
+        const contextSnapshot = Array.from(context.keys())
+            .map((token) => SecureImagePipe.serializeContextValue(context.get(token)))
+            .sort()
+            .join('|');
+        return `${contextSnapshot}:${fullPath}`;
+    }
+    static serializeContextValue(value) {
+        if (value === null) {
+            return 'null';
+        }
+        if (value === undefined) {
+            return 'undefined';
+        }
+        if (typeof value !== 'object') {
+            return String(value);
+        }
+        if (Array.isArray(value)) {
+            return `[${value
+                .map((item) => SecureImagePipe.serializeContextValue(item))
+                .join(',')}]`;
+        }
+        const normalizedEntries = Object.entries(value)
+            .sort(([leftKey], [rightKey]) => leftKey.localeCompare(rightKey))
+            .map(([key, entryValue]) => `${key}:${SecureImagePipe.serializeContextValue(entryValue)}`);
+        return `{${normalizedEntries.join(',')}}`;
+    }
+    getOrLoadBlobUrl(request) {
+        const cachedBlobUrl = SecureImagePipe.cachedBlobUrls.get(request.cacheKey);
+        if (cachedBlobUrl) {
+            return of(cachedBlobUrl);
+        }
+        const pendingRequest = SecureImagePipe.pendingRequests.get(request.cacheKey);
+        if (pendingRequest) {
+            return pendingRequest;
+        }
+        const request$ = this.httpClient
+            .get(request.fullPath, {
+            observe: 'response',
+            responseType: 'blob',
+            context: request.context,
+        })
+            .pipe(map((response) => response.body ? URL.createObjectURL(response.body) : ''), tap((blobUrl) => {
+            if (blobUrl) {
+                SecureImagePipe.cachedBlobUrls.set(request.cacheKey, blobUrl);
+            }
+        }), finalize(() => {
+            SecureImagePipe.pendingRequests.delete(request.cacheKey);
+        }), shareReplay(1));
+        SecureImagePipe.pendingRequests.set(request.cacheKey, request$);
+        return request$;
+    }
+    setUpSubscription() {
+        const transformSubscription = this.transformValue
+            .asObservable()
+            .pipe(distinctUntilChanged((previous, current) => {
+            if (previous === current) {
+                return true;
+            }
+            if (!previous || !current) {
+                return previous === current;
+            }
+            return (previous.cacheKey === current.cacheKey &&
+                previous.wrapUrl === current.wrapUrl &&
+                previous.useEndpoint === current.useEndpoint &&
+                previous.sanitize === current.sanitize);
+        }), switchMap((request) => {
+            if (!request) {
+                this.loading = false;
+                return of('');
+            }
+            this.latestValue = '';
+            this.loading = true;
+            return this.getOrLoadBlobUrl(request).pipe(filter((blobUrl) => !!blobUrl), map((unsafeBlobUrl) => request.sanitize
+                ? this.domSanitizer.bypassSecurityTrustUrl(unsafeBlobUrl)
+                : unsafeBlobUrl), catchError(() => of('')), finalize(() => (this.loading = false)));
+        }), tap((imagePath) => {
+            this.latestValue = imagePath;
+            this.cdr.markForCheck();
+        }))
+            .subscribe();
+        this.subscription.add(transformSubscription);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SecureImagePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.3", ngImport: i0, type: SecureImagePipe, isStandalone: true, name: "secureImage", pure: false });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SecureImagePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'secureImage',
+                    pure: false,
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [] });
+
+class UploadFilePreview {
+    value = input(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    imgPath = input(...(ngDevMode ? [undefined, { debugName: "imgPath" }] : []));
+    context = input(undefined, ...(ngDevMode ? [{ debugName: "context" }] : []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    uploadProgress = input(0, ...(ngDevMode ? [{ debugName: "uploadProgress" }] : []));
+    onUploadInputClicked = output();
+    ondDownloadFile = output();
+    onDeleteFile = output();
+    disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
+    size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
+    isImag = computed(() => {
+        return this.value()?.contentType?.startsWith('image/');
+    }, ...(ngDevMode ? [{ debugName: "isImag" }] : []));
+    ngOnInit() {
+        if (this.readonly()) {
+            this.disabled.set(true);
+        }
+    }
+    defaultIcon = computed(() => {
+        switch (this.value()?.extension) {
+            case '.pdf':
+                return 'file.file-06';
+            case '.docx':
+            case '.doc':
+                return 'file.file-06';
+            case '.xlsx':
+            case '.xls':
+                return 'file.file-06';
+            default:
+                return 'image.image-03';
+        }
+    }, ...(ngDevMode ? [{ debugName: "defaultIcon" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: UploadFilePreview, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", 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(true)\"\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" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: UploadFilePreview, decorators: [{
+            type: Component,
+            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(true)\"\r\n        (click)=\"$event.stopPropagation()\"\r\n      >\r\n      </mt-button>\r\n    }\r\n  </div>\r\n</div>\r\n" }]
+        }], 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 }] }] } });
+
+class UploadUserPreview {
+    value = input(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    imgPath = input(...(ngDevMode ? [undefined, { debugName: "imgPath" }] : []));
+    context = input(undefined, ...(ngDevMode ? [{ debugName: "context" }] : []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    uploadProgress = input(0, ...(ngDevMode ? [{ debugName: "uploadProgress" }] : []));
+    isDragging = input(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
+    defaultIcon = signal('image.image-03', ...(ngDevMode ? [{ debugName: "defaultIcon" }] : []));
+    onUploadInputClicked = output();
+    ondDownloadFile = output();
+    onDeleteFile = output();
+    onDragOver = output();
+    onDragLeave = output();
+    onDrop = output();
+    disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
+    size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
+    userImgClass = input('', ...(ngDevMode ? [{ debugName: "userImgClass" }] : []));
+    OnUploadInputClicked() {
+        if (!this.imgPath() && !this.loading() && !this.disabled()) {
+            this.onUploadInputClicked.emit(true);
+        }
+    }
+    ngOnInit() {
+        if (this.readonly()) {
+            this.disabled.set(true);
+        }
+    }
+    OnDragOver(event) {
+        this.onDragOver.emit(event);
+    }
+    OnDragLeave(event) {
+        this.onDragLeave.emit(event);
+    }
+    OnDrop(event) {
+        this.onDrop.emit(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: UploadUserPreview, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", 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(true)\"\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" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: UploadUserPreview, decorators: [{
+            type: Component,
+            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(true)\"\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" }]
+        }], 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 }] }] } });
+
+class UploadField {
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
+    title = input('Upload File', ...(ngDevMode ? [{ debugName: "title" }] : []));
+    description = input('Click or drop a file to upload', ...(ngDevMode ? [{ debugName: "description" }] : []));
+    endPoint = input('uploader', ...(ngDevMode ? [{ debugName: "endPoint" }] : []));
+    size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
+    userImgClass = input('w-25! h-25! text-4xl! text-gray-400!', ...(ngDevMode ? [{ debugName: "userImgClass" }] : []));
+    shape = input('field', ...(ngDevMode ? [{ debugName: "shape" }] : []));
+    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
+    accept = input('.pdf,.doc,.docx,.xlsx,image/*', ...(ngDevMode ? [{ debugName: "accept" }] : []));
+    isDragging = model(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
+    fileSizeLimit = input(...(ngDevMode ? [undefined, { debugName: "fileSizeLimit" }] : []));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
+    context = input(undefined, ...(ngDevMode ? [{ debugName: "context" }] : []));
+    onChange = output();
+    requiredValidator = Validators.required;
+    value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    files = computed(() => {
+        const value = this.value();
+        if (Array.isArray(value)) {
+            return value.filter((item) => item != null);
+        }
+        return value ? [value] : [];
+    }, ...(ngDevMode ? [{ debugName: "files" }] : []));
+    primaryFile = computed(() => this.files()[0] ?? null, ...(ngDevMode ? [{ debugName: "primaryFile" }] : []));
+    imgPath = computed(() => this.resolveImgPath(this.primaryFile()), ...(ngDevMode ? [{ debugName: "imgPath" }] : []));
+    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    uploadProgress = signal(0, ...(ngDevMode ? [{ debugName: "uploadProgress" }] : []));
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    httpClient = inject(HttpClient);
+    pendingUploads = signal(0, ...(ngDevMode ? [{ debugName: "pendingUploads" }] : []));
+    onTouched = () => { };
+    onModelChange = () => { };
+    ngControl = inject(NgControl, { self: true });
+    constructor() {
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    writeValue(value) {
+        if (Array.isArray(value)) {
+            const normalized = value.filter((item) => item != null);
+            const fileIds = normalized.filter((item) => typeof item === 'string' && item.trim().length > 0);
+            const files = normalized.filter((item) => !!item && typeof item === 'object');
+            if (fileIds.length) {
+                this.fetchMetadata(fileIds, files, true);
+                return;
+            }
+            this.value.set(normalized);
+            return;
+        }
+        if (typeof value === 'string' && value.trim().length > 0) {
+            this.fetchMetadata([value], [], false);
+            return;
+        }
+        this.value.set(value ?? null);
+    }
+    registerOnChange(fn) {
+        this.onModelChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(disabled) {
+        this.disabled.set(disabled);
+    }
+    onAdd(item) {
+        if (this.disabled()) {
+            return;
+        }
+        const nextValue = this.multiple() ? [...this.files(), item] : item;
+        this.value.set(nextValue);
+        this.onModelChange(nextValue);
+        this.onChange.emit(nextValue);
+    }
+    onDelete(item) {
+        if (this.disabled()) {
+            return;
+        }
+        if (!this.multiple()) {
+            this.value.set(null);
+            this.onModelChange(null);
+            this.onChange.emit(null);
+            return;
+        }
+        const nextValue = this.files().filter((file) => !isSameFile(file, item));
+        const resolvedValue = nextValue.length ? nextValue : null;
+        this.value.set(resolvedValue);
+        this.onModelChange(resolvedValue);
+        this.onChange.emit(resolvedValue);
+    }
+    onFileSelect(event) {
+        const input = event.target;
+        const selectedFiles = Array.from(input?.files ?? []);
+        if (!selectedFiles.length) {
+            return;
+        }
+        if (!this.multiple()) {
+            this.value.set(null);
+        }
+        this.prepareFiles(selectedFiles);
+        if (input) {
+            input.value = '';
+        }
+    }
+    prepareFiles(files) {
+        this.ngControl.control?.setErrors({ uploading: true });
+        if (this.shape() === 'circle' &&
+            files.some((file) => !file?.type.startsWith('image/'))) {
+            this.ngControl.control?.setErrors({ invalidFileType: true });
+            return;
+        }
+        const filesToUpload = this.multiple() ? files : [files[0]];
+        filesToUpload.forEach((file) => this.uploadFile(file));
+    }
+    uploadFile(file) {
+        this.pendingUploads.update((count) => count + 1);
+        this.loading.set(true);
+        this.uploadProgress.set(10);
+        const formData = new FormData();
+        formData.append('file', file);
+        this.httpClient
+            .post(this.endPoint(), formData, {
+            reportProgress: true,
+            observe: 'events',
+            context: this.context(),
+        })
+            .pipe(finalize$1(() => {
+            const pending = Math.max(this.pendingUploads() - 1, 0);
+            this.pendingUploads.set(pending);
+            if (!pending) {
+                setTimeout(() => {
+                    this.uploadProgress.set(0);
+                    this.loading.set(false);
+                }, 700);
+            }
+        }), catchError$1(() => {
+            this.uploadProgress.set(0);
+            return throwError(() => new Error('Upload failed'));
+        }))
+            .subscribe((event) => {
+            if (!event?.body) {
+                if (event.total) {
+                    this.uploadProgress.set(Math.round((100 * event.loaded) / event.total));
+                }
+                return;
+            }
+            this.uploadProgress.set(100);
+            this.handleUploadDone({ ...event.body?.data, size: file.size });
+        });
+    }
+    handleUploadDone(file) {
+        if (!file) {
+            return;
+        }
+        this.onAdd(file);
+        if (this.fileSizeLimit() && file.size > this.fileSizeLimit()) {
+            this.ngControl.control?.setErrors({ fileSizeLimited: true });
+            return;
+        }
+        if (this.pendingUploads() <= 1) {
+            this.ngControl.control?.setErrors(null);
+        }
+    }
+    downloadFile(value) {
+        const downloadUrl = this.resolveImgPath(value);
+        const downloadFileName = value?.name;
+        const mimeType = value?.contentType;
+        if (!downloadUrl || !mimeType || !downloadFileName) {
+            console.error('File metadata is incomplete. Cannot download.');
+            return;
+        }
+        this.httpClient
+            .get(downloadUrl, {
+            responseType: 'blob',
+            context: this.context(),
+        })
+            .pipe(take(1))
+            .subscribe((res) => {
+            const blob = new Blob([res], { type: mimeType });
+            const data = window.URL.createObjectURL(blob);
+            const link = document.createElement('a');
+            link.href = data;
+            link.download = downloadFileName;
+            link.click();
+            window.URL.revokeObjectURL(data);
+        });
+    }
+    onDragOver(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (!this.disabled()) {
+            this.isDragging.set(true);
+        }
+    }
+    onDragLeave(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDragging.set(false);
+    }
+    onDrop(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDragging.set(false);
+        if (this.disabled()) {
+            return;
+        }
+        const files = Array.from(event.dataTransfer?.files ?? []);
+        if (!files.length) {
+            return;
+        }
+        if (!this.multiple()) {
+            this.value.set(null);
+        }
+        this.prepareFiles(files);
+    }
+    resolveImgPath(value) {
+        return value?.fileName ? `${this.endPoint()}/${value.fileName}` : undefined;
+    }
+    fetchMetadata(fileIds, existingFiles = [], forceArray = false) {
+        const normalizedIds = fileIds
+            .map((fileId) => fileId.trim())
+            .filter((fileId) => fileId.length > 0);
+        if (!normalizedIds.length) {
+            this.value.set(forceArray ? existingFiles : (existingFiles[0] ?? null));
+            return;
+        }
+        this.loading.set(true);
+        forkJoin(normalizedIds.map((fileId) => this.httpClient
+            .get(`${this.endPoint()}/${fileId}/metaData`, {
+            context: this.context(),
+        })
+            .pipe(take(1), map$1((response) => response.data), catchError$1((error) => {
+            console.error('Failed to fetch file metadata:', error);
+            return of({
+                id: fileId,
+                name: fileId,
+                fileName: fileId,
+                contentType: '',
+                extension: '',
+            });
+        }))))
+            .pipe(finalize$1(() => this.loading.set(false)))
+            .subscribe((files) => {
+            const resolvedFiles = [...existingFiles, ...files];
+            const resolvedValue = forceArray || this.multiple() || resolvedFiles.length > 1
+                ? resolvedFiles
+                : (resolvedFiles[0] ?? null);
+            this.value.set(resolvedValue);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: UploadField, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", 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]=\"multiple()\"\r\n  [accept]=\"shape() === 'circle' ? 'image/*' : accept()\"\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())\"\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      </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        </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)\"\r\n            />\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 class=\"flex w-full flex-col gap-2 p-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)\"\r\n            />\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 gap-3 items-center justify-center p-3\">\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      }\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" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: UploadField, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-upload-field', standalone: true, imports: [
+                        Icon,
+                        UploadUserPreview,
+                        UploadFilePreview,
+                        FieldValidation,
+                        Card,
+                        Button,
+                        TranslocoModule,
+                    ], 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]=\"multiple()\"\r\n  [accept]=\"shape() === 'circle' ? 'image/*' : accept()\"\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())\"\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      </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        </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)\"\r\n            />\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 class=\"flex w-full flex-col gap-2 p-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)\"\r\n            />\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 gap-3 items-center justify-center p-3\">\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      }\r\n    </div>\r\n  </div>\r\n}\r\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\r\n" }]
+        }], 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"] }] } });
+function isSameFile(source, target) {
+    if (!source || !target) {
+        return source === target;
+    }
+    return (source === target ||
+        (source.id && target.id && source.id === target.id) ||
+        (source.fileName && target.fileName && source.fileName === target.fileName));
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SecureImagePipe, UploadField };
+//# sourceMappingURL=masterteam-components-upload-field.mjs.map