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 { distinctUntilChanged, filter, switchMap, map, catchError, finalize, tap } from 'rxjs/operators';
import { DomSanitizer } from '@angular/platform-browser';
import { Subscription, BehaviorSubject, of, finalize as finalize$1, catchError as catchError$1, throwError, take } from 'rxjs';
import { HttpClient } 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 {
    httpClient = inject(HttpClient);
    domSanitizer = inject(DomSanitizer);
    cdr = inject(ChangeDetectorRef);
    constructor() {
        this.setUpSubscription();
    }
    ngOnDestroy() {
        this.subscription.unsubscribe();
    }
    subscription = new Subscription();
    latestValue;
    transformValue = new BehaviorSubject('');
    loading = true;
    context;
    transform(imagePath, context) {
        this.context = context;
        this.transformValue.next(imagePath);
        return this.loading ? '' : this.latestValue;
    }
    setUpSubscription() {
        const transformSubscription = this.transformValue
            .asObservable()
            .pipe(distinctUntilChanged(), filter((v) => !!v && !v.includes('null')), switchMap((imagePath) => {
            this.latestValue = '';
            this.loading = true;
            return this.httpClient
                .get(imagePath, {
                observe: 'response',
                responseType: 'blob',
                context: this.context,
            })
                .pipe(map((response) => URL.createObjectURL(response.body)), map((unsafeBlobUrl) => this.domSanitizer.bypassSecurityTrustUrl(unsafeBlobUrl)), filter((blobUrl) => blobUrl !== this.latestValue), 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 (!disabled() && !!value() && !loading()) {\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      <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 (!disabled() && !!value() && !loading()) {\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      <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" }] : []));
    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" }] : []));
    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
    uploadProgress = signal(0, ...(ngDevMode ? [{ debugName: "uploadProgress" }] : []));
    httpClient = inject(HttpClient);
    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
    onTouched = () => { };
    onModelChange = () => { };
    ngControl = inject(NgControl, { self: true });
    imgPath = computed(() => {
        if (this.value()?.fileName) {
            return this.value()?.fileName
                ? this.endPoint() + '/' + this.value().fileName
                : '';
        }
        else {
            return undefined;
        }
    }, ...(ngDevMode ? [{ debugName: "imgPath" }] : []));
    constructor() {
        if (this.ngControl) {
            this.ngControl.valueAccessor = this;
        }
    }
    writeValue(value) {
        this.value.set(value);
    }
    registerOnChange(fn) {
        this.onModelChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    setDisabledState(disabled) {
        this.disabled.set(disabled);
    }
    onAdd(item) {
        console.log('onAdd', item);
        if (!this.disabled()) {
            this.value.set(item);
            this.onModelChange(this.value() ?? null);
            this.onChange.emit(this.value());
        }
    }
    onDelete() {
        if (!this.disabled()) {
            console.log('onDelete');
            this.value.set(null);
            this.onModelChange(this.value() ?? null);
            this.onChange.emit(this.value());
        }
    }
    onFileSelect(event) {
        console.log('event', event);
        if (event.target.files.length) {
            this.value.set(null);
            const files = event.target.files;
            this.prepareImage(files);
        }
    }
    prepareImage(files) {
        this.ngControl.control?.setErrors({ uploading: true });
        if (files.length) {
            if (this.shape() === 'circle' && !files[0]?.type.startsWith('image/')) {
                this.ngControl.control?.setErrors({ invalidFileType: true });
                return;
            }
            this.uploadFile(files[0]);
        }
    }
    uploadFile(file) {
        this.loading.set(true);
        this.uploadProgress.set(10);
        const formData = new FormData();
        formData.append('file', file);
        this.httpClient
            .post(this.endPoint(), formData, {
            // 1. Crucial options to report upload progress
            reportProgress: true,
            observe: 'events',
            context: this.context(),
        })
            .pipe(finalize$1(() => {
            setTimeout(() => {
                this.uploadProgress.set(0);
                this.loading.set(false);
            }, 700);
        }), catchError$1(() => {
            this.uploadProgress.set(0); // Reset on error
            return throwError(() => new Error('Upload failed'));
        }))
            .subscribe((event) => {
            console.log('event', event);
            if (!event?.body) {
                if (event.total) {
                    const percentDone = Math.round((100 * event.loaded) / event.total);
                    this.uploadProgress.set(percentDone);
                    console.log(`Upload Progress: ${percentDone}%`);
                }
            }
            else {
                this.uploadProgress.set(100);
                this.handleUploadDone({ ...event.body?.data, size: file.size });
                console.log('Upload Complete', event.body);
            }
        });
    }
    handleUploadDone(file) {
        if (file) {
            this.onAdd(file);
            if (this.fileSizeLimit() && file.size > this.fileSizeLimit()) {
                this.ngControl.control?.setErrors({ fileSizeLimited: true });
            }
            else {
                this.ngControl.control?.setErrors(null);
            }
            console.log('this.ngControl.control', this.ngControl.control);
        }
        console.log('handleUploadDone', this.value());
    }
    downloadFile(value) {
        const downloadFileName = value?.name;
        const mimeType = value?.contentType;
        const storedFileName = value?.fileName;
        if (!storedFileName || !mimeType || !downloadFileName) {
            console.error('File metadata is incomplete. Cannot download.');
            return;
        }
        this.httpClient
            .get(this.imgPath(), {
            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 = event.dataTransfer?.files;
        if (files && files.length > 0) {
            const fileEvent = {
                target: {
                    files: files,
                },
            };
            this.onFileSelect(fileEvent);
        }
    }
    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 }, 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  [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]=\"value()\"\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()\"\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 (!value()) {\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 (value()) {\r\n        <mt-upload-file-preview\r\n          style=\"width: 100%\"\r\n          [value]=\"value()\"\r\n          [imgPath]=\"imgPath()\"\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($event)\"\r\n          (onDeleteFile)=\"onDelete()\"\r\n        />\r\n      } @else {\r\n        @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              !this.loading() && !this.disabled() && !this.readonly()\r\n                ? uploadInput.click()\r\n                : ''\r\n            \"\r\n            [disabled]=\"disabled() || loading() || readonly()\"\r\n          />\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]=\"this.disabled() ? 'bg-gray-50' : ''\"\r\n      (click)=\"\r\n        !this.loading() && !this.disabled() && !this.readonly()\r\n          ? uploadInput.click()\r\n          : ''\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 (value()) {\r\n        <mt-upload-file-preview\r\n          style=\"width: 100%\"\r\n          [value]=\"value()\"\r\n          [imgPath]=\"imgPath()\"\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($event)\"\r\n          (onDeleteFile)=\"onDelete()\"\r\n        />\r\n      } @else {\r\n        @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      }\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  [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]=\"value()\"\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()\"\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 (!value()) {\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 (value()) {\r\n        <mt-upload-file-preview\r\n          style=\"width: 100%\"\r\n          [value]=\"value()\"\r\n          [imgPath]=\"imgPath()\"\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($event)\"\r\n          (onDeleteFile)=\"onDelete()\"\r\n        />\r\n      } @else {\r\n        @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              !this.loading() && !this.disabled() && !this.readonly()\r\n                ? uploadInput.click()\r\n                : ''\r\n            \"\r\n            [disabled]=\"disabled() || loading() || readonly()\"\r\n          />\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]=\"this.disabled() ? 'bg-gray-50' : ''\"\r\n      (click)=\"\r\n        !this.loading() && !this.disabled() && !this.readonly()\r\n          ? uploadInput.click()\r\n          : ''\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 (value()) {\r\n        <mt-upload-file-preview\r\n          style=\"width: 100%\"\r\n          [value]=\"value()\"\r\n          [imgPath]=\"imgPath()\"\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($event)\"\r\n          (onDeleteFile)=\"onDelete()\"\r\n        />\r\n      } @else {\r\n        @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      }\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 }] }], 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"] }] } });

/**
 * Generated bundle index. Do not edit.
 */

export { UploadField };
//# sourceMappingURL=masterteam-components-upload-field.mjs.map
