@onemrvapublic/design-system 1.0.0-beta.4 → 1.0.0-develop.1

package/fesm2022/onemrvapublic-design-system-mat-file-upload.mjs

@@ -0,0 +1,810 @@
+import * as i0 from '@angular/core';
+import { HostBinding, Input, ChangeDetectionStrategy, Component, Injectable, InjectionToken, inject, EventEmitter, HostListener, Output, Directive, ViewChild, NgModule } from '@angular/core';
+import { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';
+import { of, BehaviorSubject, interval, take, map, catchError, tap, mergeMap, withLatestFrom, filter, throttle, takeWhile, switchMap, forkJoin, merge, Subject } from 'rxjs';
+import { MatIcon, MatIconModule } from '@angular/material/icon';
+import { AsyncPipe, NgClass, NgTemplateOutlet, CommonModule } from '@angular/common';
+import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
+import { TranslatePipe, TranslateService, TranslateModule } from '@ngx-translate/core';
+import { MatProgressBar } from '@angular/material/progress-bar';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { trigger, state, transition, style, animate, keyframes } from '@angular/animations';
+import { ComponentStore } from '@ngrx/component-store';
+import { HttpEventType, HttpResponse } from '@angular/common/http';
+import { OnemRvaCDNMimeService } from '@onemrvapublic/design-system/shared';
+import { MatError } from '@angular/material/form-field';
+import { MatButtonModule } from '@angular/material/button';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatInputModule } from '@angular/material/input';
+
+/**
+ * format bytes
+ * @param bytes (File size in bytes)
+ * @param decimals (Decimals point)
+ */
+function formatBytes(bytes, decimals = 2) {
+    if (bytes === 0) {
+        return '0 Bytes';
+    }
+    const k = 1024;
+    const dm = decimals <= 0 ? 0 : decimals || 2;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+}
+function formattedSize(size, decimals = 2) {
+    if (size === null)
+        return '';
+    return formatBytes(size, decimals);
+}
+function convertToProgressFile(id, name, message = '', progress = 100, color = OnemrvaMatColor.PRIMARY, url = null, enableProgressBar = false, data = null, size = 0, type = '', maxSize = null) {
+    return {
+        id: id,
+        name: name,
+        message: message,
+        progress: progress,
+        color: color,
+        url: url,
+        enableProgressBar: enableProgressBar,
+        data: data,
+        size: size,
+        type: type,
+        maxSize: maxSize,
+    };
+}
+function convertToReferencedProgressFile(id, name, message = '', progress = 100, color = OnemrvaMatColor.PRIMARY, url = null, enableProgressBar = false, data = null, size = 0, type = '', maxSize = null) {
+    return {
+        id: id,
+        ref: Symbol(name),
+        name: name,
+        message: message,
+        progress: progress,
+        color: color,
+        url: url,
+        enableProgressBar: enableProgressBar,
+        data: data,
+        size: size,
+        type: type,
+        maxSize: maxSize,
+    };
+}
+
+let NEXT_ID$1 = 0;
+class OnemrvaFilePanelComponent {
+    constructor() {
+        this.id = `onemrva-file-panel-${NEXT_ID$1++}`;
+        this.dataCy = 'onemrva-file-panel-' + NEXT_ID$1;
+        this.actions = [];
+        this.showProgress = true;
+        this.displayDate = '';
+        this.maxFileSize = 0;
+        this.formattedSize = formattedSize;
+    }
+    get progress$() {
+        return of(this.file.progress);
+    }
+    get size() {
+        return formattedSize(this.file.size);
+    }
+    get color() {
+        if (this.file.color !== undefined) {
+            return this.file.color;
+        }
+        return OnemrvaMatColor.NONE;
+    }
+    /** @hidden @internal */
+    get _colorAccent() {
+        return this.color === OnemrvaMatColor.ACCENT;
+    }
+    /** @hidden @internal */
+    get _isError() {
+        return this.color === OnemrvaMatColor.ERROR;
+    }
+    /** @hidden @internal */
+    get _isWarn() {
+        return this.color === OnemrvaMatColor.WARN;
+    }
+    /** @hidden @internal */
+    get _isSuccess() {
+        return this.color === OnemrvaMatColor.SUCCESS;
+    }
+    /** @hidden @internal */
+    get _isPrimary() {
+        return this.color === OnemrvaMatColor.PRIMARY;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaFilePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: OnemrvaFilePanelComponent, isStandalone: true, selector: "file-panel", inputs: { id: "id", dataCy: "dataCy", file: "file", actions: "actions", showProgress: "showProgress", displayDate: "displayDate", maxFileSize: "maxFileSize", color: "color" }, host: { properties: { "attr.id": "this.id", "attr.data-cy": "this.dataCy", "mat-accent": "this._colorAccent", "class.mat-error": "this._isError", "class.mat-warn": "this._isWarn", "class.mat-success": "this._isSuccess", "class.mat-primary": "this._isPrimary" } }, ngImport: i0, template: "<div class=\"file-panel-title show-icon\" [attr.data-cy]=\"dataCy\">\n  <div class=\"file-panel-title-left\">\n    <span class=\"file-name\">\n      {{ file.name }}\n    </span>\n  </div>\n  <div class=\"file-panel-title-action float-right\">\n    @if (actions.length > 0) {\n      @for (action of actions; track action.dataCy) {\n        @if (action.showAction(file)) {\n          <mat-icon\n            role=\"button\"\n            color=\"primary\"\n            [attr.data-cy]=\"action.dataCy\"\n            matTooltip=\"{{ action.tooltipCode | translate }}\"\n            [attr.aria-label]=\"action.ariaCode | translate\"\n            class=\"clickable\"\n            (click)=\"action.clickHandler(file)\"\n            >{{ action.iconName }}</mat-icon\n          >\n        }\n      }\n    }\n  </div>\n</div>\n<div class=\"file-panel-content\">\n  @if (file.message === '') {\n    <ng-container>\n      <div class=\"fileInfos\">\n        <span>{{ displayDate }}</span>\n\n        @if (file.size > 0) {\n          <span class=\"float-right\">{{ size }}</span>\n        }\n      </div>\n      @if (showProgress && file.enableProgressBar) {\n        <mat-progress-bar\n          data-cy=\"file-upload-progress\"\n          mode=\"determinate\"\n          [value]=\"progress$ | async\"\n        ></mat-progress-bar>\n      }\n    </ng-container>\n  }\n  @if (file.message !== '') {\n    <p class=\"message\">\n      {{ file.message | translate: { limit: formattedSize(file.maxSize) } }}\n    </p>\n  }\n</div>\n", styles: [":host{flex:1 1 100%;border-radius:var(--border-radius);background-color:var(--mat-sys-primary-container);padding:var(--double-spacer);display:block}:host .file-panel-content{padding:0}:host .file-panel-content p:last-child{margin:0}:host .fileInfos{display:inline-block;width:100%;height:1.5rem;font:var(--mat-sys-body-medium)}:host .fileInfos .float-right{margin-right:var(--spacer)}:host .file-panel-title{font:var(--mat-sys-title-medium);margin-bottom:0;color:var(--mat-sys-primary)}:host .file-panel-title .file-panel-title-left{display:inline-flex;align-items:center;gap:var(--spacer)}:host .file-panel-title:before{margin-right:var(--spacer);margin-top:var(--quarter-spacer)}:host .file-panel-title .mat-progress-bar-fill:after{background:var(--mat-sys-primary)}:host .file-panel-title .mat-progress-bar-buffer{background-color:var(--mat-sys-primary-container)}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaFilePanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'file-panel', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MatIcon, MatTooltip, TranslatePipe, AsyncPipe, MatProgressBar], template: "<div class=\"file-panel-title show-icon\" [attr.data-cy]=\"dataCy\">\n  <div class=\"file-panel-title-left\">\n    <span class=\"file-name\">\n      {{ file.name }}\n    </span>\n  </div>\n  <div class=\"file-panel-title-action float-right\">\n    @if (actions.length > 0) {\n      @for (action of actions; track action.dataCy) {\n        @if (action.showAction(file)) {\n          <mat-icon\n            role=\"button\"\n            color=\"primary\"\n            [attr.data-cy]=\"action.dataCy\"\n            matTooltip=\"{{ action.tooltipCode | translate }}\"\n            [attr.aria-label]=\"action.ariaCode | translate\"\n            class=\"clickable\"\n            (click)=\"action.clickHandler(file)\"\n            >{{ action.iconName }}</mat-icon\n          >\n        }\n      }\n    }\n  </div>\n</div>\n<div class=\"file-panel-content\">\n  @if (file.message === '') {\n    <ng-container>\n      <div class=\"fileInfos\">\n        <span>{{ displayDate }}</span>\n\n        @if (file.size > 0) {\n          <span class=\"float-right\">{{ size }}</span>\n        }\n      </div>\n      @if (showProgress && file.enableProgressBar) {\n        <mat-progress-bar\n          data-cy=\"file-upload-progress\"\n          mode=\"determinate\"\n          [value]=\"progress$ | async\"\n        ></mat-progress-bar>\n      }\n    </ng-container>\n  }\n  @if (file.message !== '') {\n    <p class=\"message\">\n      {{ file.message | translate: { limit: formattedSize(file.maxSize) } }}\n    </p>\n  }\n</div>\n", styles: [":host{flex:1 1 100%;border-radius:var(--border-radius);background-color:var(--mat-sys-primary-container);padding:var(--double-spacer);display:block}:host .file-panel-content{padding:0}:host .file-panel-content p:last-child{margin:0}:host .fileInfos{display:inline-block;width:100%;height:1.5rem;font:var(--mat-sys-body-medium)}:host .fileInfos .float-right{margin-right:var(--spacer)}:host .file-panel-title{font:var(--mat-sys-title-medium);margin-bottom:0;color:var(--mat-sys-primary)}:host .file-panel-title .file-panel-title-left{display:inline-flex;align-items:center;gap:var(--spacer)}:host .file-panel-title:before{margin-right:var(--spacer);margin-top:var(--quarter-spacer)}:host .file-panel-title .mat-progress-bar-fill:after{background:var(--mat-sys-primary)}:host .file-panel-title .mat-progress-bar-buffer{background-color:var(--mat-sys-primary-container)}\n"] }]
+        }], propDecorators: { id: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }, {
+                type: Input
+            }], dataCy: [{
+                type: HostBinding,
+                args: ['attr.data-cy']
+            }, {
+                type: Input
+            }], file: [{
+                type: Input
+            }], actions: [{
+                type: Input
+            }], showProgress: [{
+                type: Input
+            }], displayDate: [{
+                type: Input
+            }], maxFileSize: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], _colorAccent: [{
+                type: HostBinding,
+                args: ['mat-accent']
+            }], _isError: [{
+                type: HostBinding,
+                args: ['class.mat-error']
+            }], _isWarn: [{
+                type: HostBinding,
+                args: ['class.mat-warn']
+            }], _isSuccess: [{
+                type: HostBinding,
+                args: ['class.mat-success']
+            }], _isPrimary: [{
+                type: HostBinding,
+                args: ['class.mat-primary']
+            }] } });
+
+class OnemrvaMatFileUploadService {
+    constructor() {
+        this.isSending = new BehaviorSubject(false);
+        alert("Don't forget to add a provider in your component with your own implementation of OnemrvaMatFileUploadInterface. Check out the demo to have an example of how to do it");
+    }
+    listUploadedFiles(_inputs) {
+        return of([]);
+    }
+    upload(_file) {
+        return interval(50).pipe(take(101), map(i => {
+            if (i < 100) {
+                return {
+                    type: HttpEventType.UploadProgress,
+                    loaded: i,
+                    total: 100,
+                };
+            }
+            else {
+                if (i >= 100 && Math.random() > 0.5) {
+                    throw 'Fake error thrown';
+                }
+                return new HttpResponse();
+            }
+        }), catchError(() => of(new HttpResponse({ body: {}, status: 500 }))));
+    }
+    deleteFile(_id) {
+        return of('F = m.a');
+    }
+    retry(file) {
+        return of(file);
+    }
+    downloadFile(id) {
+        alert(`Missing download implementation for file ID ${id}`);
+        return of(true);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaMatFileUploadService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaMatFileUploadService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaMatFileUploadService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+const INIT_STATE = {
+    upload: [],
+    accept: [],
+    maxFileSize: 0,
+    fileUploadError: '',
+    event: {
+        type: 'INIT',
+    },
+};
+const CUSTOM_VALIDATION_FN = new InjectionToken('x1, x2 = (-b -+ sqrt(rho))/2a');
+class OnemrvaMatFileUploadStore extends ComponentStore {
+    constructor() {
+        super(INIT_STATE);
+        this.fn = (x) => {
+            return x[0];
+        };
+        this.fileUploadService = inject(OnemrvaMatFileUploadService);
+        this.translateService = inject(TranslateService);
+        this.customValidationFn = inject(CUSTOM_VALIDATION_FN, {
+            optional: true,
+        });
+        this.isSending = this.fileUploadService.isSending;
+        /*
+         * U P D A T E R S
+         */
+        this.setAccept = this.updater((state, accept) => ({
+            ...state,
+            accept,
+            event: {
+                type: 'setAccept',
+                payload: accept,
+            },
+        }));
+        this.setMaxFileSize = this.updater((state, maxFileSize) => ({
+            ...state,
+            maxFileSize,
+            event: {
+                type: 'setMaxFileSize',
+                payload: maxFileSize,
+            },
+        }));
+        this.emptyList = this.updater(state => {
+            return {
+                ...state,
+                upload: [],
+                event: {
+                    type: 'emptyList',
+                },
+            };
+        });
+        this.pushFile = this.updater((state, payload) => {
+            return {
+                ...state,
+                upload: [...state.upload, { ...payload }],
+                event: {
+                    type: 'pushFile',
+                    payload,
+                },
+            };
+        });
+        this.setData = this.updater((state, payload) => {
+            return {
+                ...state,
+                upload: state.upload.map((file) => file.ref === payload.ref ? { ...file, data: payload.data } : file),
+                event: {
+                    type: 'setData',
+                    payload,
+                },
+            };
+        });
+        this.setSuccess = this.updater((state, payload) => {
+            const newFile = {
+                ...state.upload.find(f => f.ref === payload.ref),
+                ...payload.body,
+                color: 'success',
+                progress: 100,
+            };
+            return {
+                ...state,
+                upload: state.upload.map(file => file.ref === payload.ref ? newFile : file),
+                event: {
+                    type: 'setData',
+                    payload: newFile,
+                },
+            };
+        });
+        this.setFail = this.updater((state, payload) => ({
+            ...state,
+            upload: state.upload.map(file => file.ref === payload.ref
+                ? { ...file, message: payload.message, color: payload.color }
+                : file),
+            event: {
+                type: 'setFail',
+                payload,
+            },
+        }));
+        this.setProgress = this.updater((state, payload) => ({
+            ...state,
+            upload: state.upload.map(file => file.ref === payload.ref
+                ? { ...file, progress: payload.progress }
+                : file),
+            event: {
+                type: 'setProgress',
+                payload,
+            },
+        }));
+        this.reset = this.updater((state, ref) => ({
+            ...state,
+            upload: state.upload.map(file => file.ref === ref
+                ? { ...file, progress: 0, message: '', color: '' }
+                : file),
+            event: {
+                type: 'reset',
+                payload: ref,
+            },
+        }));
+        this.remove = this.updater((state, payload) => ({
+            ...state,
+            upload: state.upload.filter(f => f.ref !== payload.ref),
+            event: {
+                type: 'remove',
+                payload,
+            },
+        }));
+        this.enableProgressBar = this.updater(state => ({
+            ...state,
+            upload: state.upload.map(file => ({ ...file, enableProgressBar: true })),
+            event: {
+                type: 'enableProgressBar',
+            },
+        }));
+        this.setFileUploadError = this.updater((state, fileUploadError) => ({
+            ...state,
+            fileUploadError,
+            event: {
+                type: 'setFileUploadError',
+                payload: fileUploadError,
+            },
+        }));
+        this.clearFileUploadError = this.updater(state => ({
+            ...state,
+            fileUploadError: '',
+            event: {
+                type: 'clearFileUploadError',
+            },
+        }));
+        /*
+         * S E L E C T O R S
+         */
+        this.files$ = this.select(state => state.upload);
+        this.accept$ = this.select(state => state.accept);
+        this.event$ = this.select(state => state.event);
+        this.maxFileSize$ = this.select(state => state.maxFileSize);
+        this.fileUploadError$ = this.select(state => state.fileUploadError);
+        /*
+         * A C T I O N S   /   E F F E C T S
+         */
+        this.listUploadedFiles = this.effect((inputs$) => {
+            return inputs$.pipe(tap(() => {
+                this.emptyList();
+            }), mergeMap((inputs) => {
+                return this.fileUploadService.listUploadedFiles(inputs).pipe(
+                //take(1),
+                withLatestFrom(this.files$), tap(() => {
+                    // added to avoid ide errors
+                }), tap(([newfiles, registeredFiles]) => {
+                    newfiles.forEach(file => {
+                        if (registeredFiles.findIndex(rfile => rfile.id === file.id) < 0) {
+                            this.pushFile({
+                                ...file,
+                                color: 'success',
+                                progress: 100,
+                                ref: Symbol('H.psi = E.psi'),
+                                name: file.name,
+                                lastModified: file.lastModified,
+                                size: file.size,
+                                type: file.type,
+                            });
+                        }
+                    });
+                }), catchError(() => of([])));
+            }));
+        });
+        this.deleteFile = this.effect((file$) => {
+            return file$.pipe(tap(() => {
+                this.clearFileUploadError();
+            }), withLatestFrom(this.files$), map(this.fn), mergeMap((file) => this.fileUploadService.deleteFile(file.id).pipe(
+            //take(1),
+            tap(() => {
+                this.remove(file);
+            }), catchError(() => {
+                this.setFail({
+                    ref: file.ref,
+                    color: OnemrvaMatColor.WARN,
+                    message: 'file.upload.delete.error',
+                });
+                return of(null);
+            }))));
+        });
+        this.removeFile = this.effect((file$) => {
+            return file$.pipe(tap(() => {
+                this.clearFileUploadError();
+            }), withLatestFrom(this.files$), map(this.fn), tap(file => {
+                this.remove(file);
+            }));
+        });
+        this.progressFileChecker = (file$) => {
+            return file$.pipe(withLatestFrom(this.accept$), map(([file, accept]) => {
+                // Step 1 - Add a new file in the view
+                let f = { ...file };
+                if (file.ref === undefined) {
+                    f = {
+                        ...f,
+                        ref: Symbol('v_sound = sqrt(gamma.P / rho)'),
+                        name: file.name,
+                        lastModified: file.lastModified,
+                        size: file.size,
+                        type: file.type,
+                    };
+                    this.pushFile(f);
+                }
+                // Step 2 - Check file extension
+                if (accept.length > 0 && !accept.includes(file.file.type)) {
+                    this.setFail({
+                        ref: f.ref,
+                        color: OnemrvaMatColor.ERROR,
+                        message: 'file.upload.type.not.supported',
+                    });
+                    // This trick coupled with the next filter is used to avoid catchError, which would break the effect
+                    return { ...f, message: 'ERROR' };
+                }
+                return f;
+            }), filter(x => x.message !== 'ERROR'), withLatestFrom(this.maxFileSize$), map(([refFile, maxFileSize]) => {
+                // Step 3 - Check file size
+                if (maxFileSize !== 0 && refFile.size > maxFileSize) {
+                    this.setFail({
+                        ref: refFile.ref,
+                        color: OnemrvaMatColor.ERROR,
+                        message: 'file.upload.too.big',
+                    });
+                    // Same trick for error management
+                    return { ...refFile, message: 'ERROR' };
+                }
+                return refFile;
+            }), filter(x => x.message !== 'ERROR'), withLatestFrom(this.files$), map(this.fn), // For custom validations
+            tap(x => {
+                if (!!x.message && x.message.startsWith('ERROR:'))
+                    this.setFileUploadError(x.message.replace('ERROR:', '').trim());
+                else
+                    this.clearFileUploadError();
+            }), filter(x => !x.message.startsWith('ERROR')));
+        };
+        this.loadStep = (file) => {
+            if (file.color === OnemrvaMatColor.WARN)
+                this.reset(file.ref);
+            this.enableProgressBar();
+            return this.fileUploadService.upload(file).pipe(throttle(() => interval(200), { leading: true, trailing: true }), tap((event) => {
+                if (event.type === HttpEventType.UploadProgress) {
+                    this.setProgress({
+                        ref: file.ref,
+                        progress: Math.round((100 * event.loaded) / event.total),
+                    });
+                }
+                if (event.type === HttpEventType.Response) {
+                    this.setSuccess({ ref: file.ref, body: event.body });
+                }
+            }), takeWhile((event) => event.type === HttpEventType.UploadProgress), catchError(() => {
+                this.setFail({
+                    ref: file.ref,
+                    color: OnemrvaMatColor.WARN,
+                    message: 'file.upload.error.occurred',
+                });
+                return of(null);
+            }));
+        };
+        /**
+         * For adding one file panel (creation of file panel reference skipped if already created) at a time.
+         * Upload to BE not triggered
+         */
+        this.addForPotentialUpload = this.effect((file$) => this.progressFileChecker(file$));
+        /**
+         * For adding an array of file panels (creation of file panels reference skipped if already created).
+         * Uploads to BE not triggered
+         */
+        this.addSeveralForPotentialUpload = this.effect((files$) => files$.pipe(switchMap(files => forkJoin(files.map(file => this.progressFileChecker(of(file)))))));
+        /**
+         * For adding a file panel (creation of file panels reference skipped if already created) then uploading it
+         */
+        this.uploadFile = this.effect((file$) => {
+            return this.progressFileChecker(file$).pipe(mergeMap(this.loadStep));
+        });
+        this.retryFile = this.effect((file$) => this.progressFileChecker(file$).pipe(mergeMap(this.loadStep)));
+        /**
+         * For adding several file panels (creation of file panels reference skipped if already created) then uploading them
+         */
+        this.uploadFiles = this.effect((files$) => files$.pipe(switchMap(files => merge(...files.map(file => this.progressFileChecker(of(file)).pipe(switchMap(this.loadStep)))))));
+        if (this.customValidationFn)
+            this.fn = this.customValidationFn;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaMatFileUploadStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaMatFileUploadStore }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaMatFileUploadStore, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+class DndDirective {
+    constructor() {
+        this.fileOver = false;
+        this.fileDropped = new EventEmitter();
+    }
+    // Dragover listener
+    onDragOver(evt) {
+        evt.preventDefault();
+        evt.stopPropagation();
+        this.fileOver = true;
+    }
+    // Dragleave listener
+    onDragLeave(evt) {
+        evt.preventDefault();
+        evt.stopPropagation();
+        this.fileOver = false;
+    }
+    // Drop listener
+    ondrop(evt) {
+        evt.preventDefault();
+        evt.stopPropagation();
+        this.fileOver = false;
+        const files = evt.dataTransfer.files;
+        if (files.length > 0) {
+            this.fileDropped.emit(files);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DndDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.7", type: DndDirective, isStandalone: true, selector: "[appDnd]", outputs: { fileDropped: "fileDropped" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "ondrop($event)" }, properties: { "class.fileover": "this.fileOver" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DndDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[appDnd]',
+                    standalone: true,
+                }]
+        }], propDecorators: { fileOver: [{
+                type: HostBinding,
+                args: ['class.fileover']
+            }], fileDropped: [{
+                type: Output
+            }], onDragOver: [{
+                type: HostListener,
+                args: ['dragover', ['$event']]
+            }], onDragLeave: [{
+                type: HostListener,
+                args: ['dragleave', ['$event']]
+            }], ondrop: [{
+                type: HostListener,
+                args: ['drop', ['$event']]
+            }] } });
+
+let NEXT_ID = 0;
+class OnemrvaMatFileUploadComponent {
+    constructor() {
+        this.accept = [];
+        this.maxFileSize = 0;
+        this.numberOfFiles = 0;
+        this.maxTotalFileSize = 0;
+        this.uploadOnDrop = true;
+        this.initialFiles = [];
+        this.errorMessage = '';
+        this.hideExtensions = [];
+        this.dropFilesHereTextTranslationKey = 'file.upload.drag.and.drop';
+        this.retryFile = new EventEmitter();
+        /**
+         * Sets the `data-cy` of the element. If not set, the first component instance will have `data-cy` = `"onemrva-mat-multi-select-0"`.
+         *
+         * @example
+         * ```html
+         * <onemrva-mat-multi-select id="my-first-multi-select"></onemrva-mat-multi-select>
+         * ```
+         */
+        this.dataCy = `onemrva-mat-multi-select-${NEXT_ID++}`;
+        this.inputId = `fileDropRef-${NEXT_ID}`;
+        this.maxFileSizeFormatted = '';
+        this.error$ = new Subject();
+        this.dialog = inject(MatDialog);
+        this.mimeCDN = inject(OnemRvaCDNMimeService);
+        this.fileUploadStore = inject(OnemrvaMatFileUploadStore);
+        this.formattedSize = formattedSize;
+        this.files$ = this.fileUploadStore.files$;
+        this.fileUploadErrorMessage$ = merge(this.fileUploadStore.fileUploadError$, this.error$);
+    }
+    ngOnInit() {
+        if (this.accept.length > 0) {
+            this.acceptString$ = this.mimeCDN.getExtensionsForMime(this.accept).pipe(map(items => items.filter(item => !this.hideExtensions.includes(item))), map(arr => arr.map(item => `.${item}`).join(', ')));
+            this.fileUploadStore.setAccept(this.accept);
+        }
+        this.maxFileSizeFormatted = formatBytes(this.maxFileSize);
+        this.fileUploadStore.setMaxFileSize(this.maxFileSize);
+    }
+    /**
+     * on file drop handler
+     */
+    onFileDropped($event) {
+        this.prepareFilesList($event);
+    }
+    /**
+     * handle file from browsing
+     */
+    fileBrowseHandler($event) {
+        const elm = $event.target, files = elm.files;
+        this.prepareFilesList(files);
+    }
+    /**
+     * Convert Files list to normal array list
+     * @param files (Files List)
+     */
+    prepareFilesList(files) {
+        this.fileUploadStore.files$.pipe(take(1)).subscribe(currentFiles => {
+            // if numberOffiles is set and the total length of files is smal
+            // ler than it
+            if (this.numberOfFiles > 0 &&
+                files.length + currentFiles.length > this.numberOfFiles) {
+                this.error$.next('file.upload.too.many.files');
+                return;
+            }
+            if (this.maxTotalFileSize > 0) {
+                const total = Object.values(files).reduce((sum, obj) => sum + obj.size, 0) +
+                    currentFiles.reduce((sum, obj) => sum + obj.size, 0);
+                if (total > this.maxTotalFileSize) {
+                    this.error$.next('file.upload.total.max.size.exceeded');
+                    return;
+                }
+            }
+            this.error$.next('');
+            const fs = [];
+            for (let i = 0; i < files.length; i++) {
+                const file = files.item(i);
+                if (file === null)
+                    continue;
+                const item = {
+                    file,
+                    progress: 0,
+                    message: '',
+                    color: 'primary',
+                    url: null,
+                    id: null,
+                    enableProgressBar: this.uploadOnDrop,
+                    name: file.name,
+                    lastModified: file.lastModified,
+                    size: file.size,
+                    type: file.type,
+                    maxSize: this.maxFileSize,
+                };
+                fs.push(item);
+            }
+            if (this.uploadOnDrop)
+                this.fileUploadStore.uploadFiles(fs);
+            else
+                this.fileUploadStore.addSeveralForPotentialUpload(fs);
+            this.fileDropRef.nativeElement.value = null;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaMatFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: OnemrvaMatFileUploadComponent, isStandalone: true, selector: "onemrva-mat-file-upload", inputs: { accept: "accept", maxFileSize: "maxFileSize", numberOfFiles: "numberOfFiles", maxTotalFileSize: "maxTotalFileSize", uploadOnDrop: "uploadOnDrop", initialFiles: "initialFiles", errorMessage: "errorMessage", hideExtensions: "hideExtensions", dropFilesHereTextTranslationKey: "dropFilesHereTextTranslationKey", filePanelTemplate: "filePanelTemplate", dataCy: "dataCy" }, host: { properties: { "attr.data-cy": "this.dataCy" } }, viewQueries: [{ propertyName: "fileDropRef", first: true, predicate: ["fileDropRef"], descendants: true }], ngImport: i0, template: "@if (files$ | async; as files) {\n  <div\n    class=\"onemrva-mat-file-upload-drop-area\"\n    appDnd\n    (fileDropped)=\"onFileDropped($event)\"\n    [ngClass]=\"{\n      filein: files.length > 0,\n    }\"\n  >\n    <input\n      type=\"file\"\n      #fileDropRef\n      [attr.id]=\"inputId\"\n      role=\"button\"\n      multiple\n      (change)=\"fileBrowseHandler($event)\"\n      accept=\"{{ acceptString$ | async }}\"\n    />\n    @if (numberOfFiles === 0 || numberOfFiles > files.length) {\n      <div class=\"download-outer\">\n        <div class=\"download-icon\">\n          <mat-icon class=\"onemrva-upload xxlarge\">download</mat-icon>\n        </div>\n\n        <div class=\"download-text\">\n          {{ dropFilesHereTextTranslationKey | translate }}\n          {{ 'file.upload.or' | translate }}\n          <label for=\"{{ inputId }}\" class=\"content\">\n            {{ 'file.upload.browse.for.file' | translate }} </label\n          ><br />\n          @if (maxFileSize > 0) {\n            <span class=\"restrictions\">\n              {{ 'file.upload.maximum' | translate }}\n              {{ maxFileSizeFormatted }}\n\n              @if (accept.length > 0) {\n                <span>{{ '| ' }}</span>\n              }\n\n              {{ acceptString$ | async }}\n            </span>\n          }\n        </div>\n      </div>\n    }\n    <ul class=\"files-list\">\n      @for (file of files; track file.id) {\n        <li>\n          <ng-container\n            *ngTemplateOutlet=\"\n              filePanelTemplate;\n              context: { file, $implicit: file }\n            \"\n          ></ng-container>\n        </li>\n      }\n    </ul>\n  </div>\n  @if (fileUploadErrorMessage$ | async; as fileUploadErrorMessage) {\n    <mat-error>\n      {{\n        fileUploadErrorMessage\n          | translate\n            : {\n                limit: numberOfFiles,\n                maxTotalFileSize: formattedSize(maxTotalFileSize),\n              }\n      }}\n      @if (errorMessage !== '') {\n        [ {{ errorMessage }} ]\n      }\n    </mat-error>\n  }\n}\n", styles: [":host .mat-mdc-form-field-error{margin-bottom:var(--spacer);padding:var(--spacer) 1em;background-color:var(--mat-sys-error-container);color:var(--mat-sys-on-error-container);border-bottom:1px solid var(--mat-sys-error);display:flex;line-height:1.125rem}:host .mat-mdc-form-field-error:before{font-family:var(--icon-font);content:\"\\e000\";float:left;font-size:1rem;font-variation-settings:\"FILL\" 1;margin-right:var(--spacer);vertical-align:baseline;flex:0 0 var(--double-spacer)}:host ul{list-style:none;margin-block-start:0;margin-block-end:0;margin-inline-start:0;margin-inline-end:0;padding-inline-start:0}:host ul li{width:100%}:host .onemrva-mat-file-upload-drop-area{padding:var(--triple-spacer);text-align:left;border:dashed 2px var(--mat-sys-outline);position:relative;border-radius:var(--border-radius);transition:background-color .3s ease-in-out,border .3s ease-in-out}:host .onemrva-mat-file-upload-drop-area mat-icon{color:var(--mat-sys-primary)}:host .onemrva-mat-file-upload-drop-area.fu-error{border:dashed 2px var(--mat-sys-error)}:host .onemrva-mat-file-upload-drop-area input[type=file]{display:none}:host .onemrva-mat-file-upload-drop-area .download-outer{display:flex;width:100%;margin:0}:host .onemrva-mat-file-upload-drop-area .download-outer .download-icon{padding-right:var(--double-spacer)}:host .onemrva-mat-file-upload-drop-area .download-outer .download-text label{display:block;color:var(--mat-sys-primary);text-decoration:underline;cursor:pointer;font-weight:700}:host .onemrva-mat-file-upload-drop-area .download-outer .download-text .restrictions{display:block;color:var(--mat-sys-outline);margin-bottom:0}:host .onemrva-mat-file-upload-drop-area.filein .download-outer{margin:0 0 var(--triple-spacer) 0}:host .onemrva-mat-file-upload-drop-area.fileover{background:var(--mat-sys-primary-container);border:2px dashed var(--mat-sys-primary)}:host .onemrva-mat-file-upload-drop-area .files-list{display:flex;flex-flow:row wrap;gap:var(--double-spacer)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: DndDirective, selector: "[appDnd]", outputs: ["fileDropped"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [
+            trigger('inOutAnimation', [
+                state('in', style({ opacity: 1 })),
+                transition(':enter', [
+                    animate(300, keyframes([
+                        style({ opacity: 0, offset: 0 }),
+                        style({ opacity: 0.25, offset: 0.25 }),
+                        style({ opacity: 0.5, offset: 0.5 }),
+                        style({ opacity: 0.75, offset: 0.75 }),
+                        style({ opacity: 1, offset: 1 }),
+                    ])),
+                ]),
+                transition(':leave', [
+                    animate(300, keyframes([
+                        style({ opacity: 1, offset: 0 }),
+                        style({ opacity: 0.75, offset: 0.25 }),
+                        style({ opacity: 0.5, offset: 0.5 }),
+                        style({ opacity: 0.25, offset: 0.75 }),
+                        style({ opacity: 0, offset: 1 }),
+                    ])),
+                ]),
+            ]),
+        ] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaMatFileUploadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'onemrva-mat-file-upload', standalone: true, animations: [
+                        trigger('inOutAnimation', [
+                            state('in', style({ opacity: 1 })),
+                            transition(':enter', [
+                                animate(300, keyframes([
+                                    style({ opacity: 0, offset: 0 }),
+                                    style({ opacity: 0.25, offset: 0.25 }),
+                                    style({ opacity: 0.5, offset: 0.5 }),
+                                    style({ opacity: 0.75, offset: 0.75 }),
+                                    style({ opacity: 1, offset: 1 }),
+                                ])),
+                            ]),
+                            transition(':leave', [
+                                animate(300, keyframes([
+                                    style({ opacity: 1, offset: 0 }),
+                                    style({ opacity: 0.75, offset: 0.25 }),
+                                    style({ opacity: 0.5, offset: 0.5 }),
+                                    style({ opacity: 0.25, offset: 0.75 }),
+                                    style({ opacity: 0, offset: 1 }),
+                                ])),
+                            ]),
+                        ]),
+                    ], imports: [
+                        NgClass,
+                        AsyncPipe,
+                        MatIcon,
+                        TranslatePipe,
+                        NgTemplateOutlet,
+                        MatError,
+                        DndDirective,
+                    ], template: "@if (files$ | async; as files) {\n  <div\n    class=\"onemrva-mat-file-upload-drop-area\"\n    appDnd\n    (fileDropped)=\"onFileDropped($event)\"\n    [ngClass]=\"{\n      filein: files.length > 0,\n    }\"\n  >\n    <input\n      type=\"file\"\n      #fileDropRef\n      [attr.id]=\"inputId\"\n      role=\"button\"\n      multiple\n      (change)=\"fileBrowseHandler($event)\"\n      accept=\"{{ acceptString$ | async }}\"\n    />\n    @if (numberOfFiles === 0 || numberOfFiles > files.length) {\n      <div class=\"download-outer\">\n        <div class=\"download-icon\">\n          <mat-icon class=\"onemrva-upload xxlarge\">download</mat-icon>\n        </div>\n\n        <div class=\"download-text\">\n          {{ dropFilesHereTextTranslationKey | translate }}\n          {{ 'file.upload.or' | translate }}\n          <label for=\"{{ inputId }}\" class=\"content\">\n            {{ 'file.upload.browse.for.file' | translate }} </label\n          ><br />\n          @if (maxFileSize > 0) {\n            <span class=\"restrictions\">\n              {{ 'file.upload.maximum' | translate }}\n              {{ maxFileSizeFormatted }}\n\n              @if (accept.length > 0) {\n                <span>{{ '| ' }}</span>\n              }\n\n              {{ acceptString$ | async }}\n            </span>\n          }\n        </div>\n      </div>\n    }\n    <ul class=\"files-list\">\n      @for (file of files; track file.id) {\n        <li>\n          <ng-container\n            *ngTemplateOutlet=\"\n              filePanelTemplate;\n              context: { file, $implicit: file }\n            \"\n          ></ng-container>\n        </li>\n      }\n    </ul>\n  </div>\n  @if (fileUploadErrorMessage$ | async; as fileUploadErrorMessage) {\n    <mat-error>\n      {{\n        fileUploadErrorMessage\n          | translate\n            : {\n                limit: numberOfFiles,\n                maxTotalFileSize: formattedSize(maxTotalFileSize),\n              }\n      }}\n      @if (errorMessage !== '') {\n        [ {{ errorMessage }} ]\n      }\n    </mat-error>\n  }\n}\n", styles: [":host .mat-mdc-form-field-error{margin-bottom:var(--spacer);padding:var(--spacer) 1em;background-color:var(--mat-sys-error-container);color:var(--mat-sys-on-error-container);border-bottom:1px solid var(--mat-sys-error);display:flex;line-height:1.125rem}:host .mat-mdc-form-field-error:before{font-family:var(--icon-font);content:\"\\e000\";float:left;font-size:1rem;font-variation-settings:\"FILL\" 1;margin-right:var(--spacer);vertical-align:baseline;flex:0 0 var(--double-spacer)}:host ul{list-style:none;margin-block-start:0;margin-block-end:0;margin-inline-start:0;margin-inline-end:0;padding-inline-start:0}:host ul li{width:100%}:host .onemrva-mat-file-upload-drop-area{padding:var(--triple-spacer);text-align:left;border:dashed 2px var(--mat-sys-outline);position:relative;border-radius:var(--border-radius);transition:background-color .3s ease-in-out,border .3s ease-in-out}:host .onemrva-mat-file-upload-drop-area mat-icon{color:var(--mat-sys-primary)}:host .onemrva-mat-file-upload-drop-area.fu-error{border:dashed 2px var(--mat-sys-error)}:host .onemrva-mat-file-upload-drop-area input[type=file]{display:none}:host .onemrva-mat-file-upload-drop-area .download-outer{display:flex;width:100%;margin:0}:host .onemrva-mat-file-upload-drop-area .download-outer .download-icon{padding-right:var(--double-spacer)}:host .onemrva-mat-file-upload-drop-area .download-outer .download-text label{display:block;color:var(--mat-sys-primary);text-decoration:underline;cursor:pointer;font-weight:700}:host .onemrva-mat-file-upload-drop-area .download-outer .download-text .restrictions{display:block;color:var(--mat-sys-outline);margin-bottom:0}:host .onemrva-mat-file-upload-drop-area.filein .download-outer{margin:0 0 var(--triple-spacer) 0}:host .onemrva-mat-file-upload-drop-area.fileover{background:var(--mat-sys-primary-container);border:2px dashed var(--mat-sys-primary)}:host .onemrva-mat-file-upload-drop-area .files-list{display:flex;flex-flow:row wrap;gap:var(--double-spacer)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { accept: [{
+                type: Input
+            }], maxFileSize: [{
+                type: Input
+            }], numberOfFiles: [{
+                type: Input
+            }], maxTotalFileSize: [{
+                type: Input
+            }], uploadOnDrop: [{
+                type: Input
+            }], initialFiles: [{
+                type: Input
+            }], errorMessage: [{
+                type: Input
+            }], hideExtensions: [{
+                type: Input
+            }], dropFilesHereTextTranslationKey: [{
+                type: Input
+            }], filePanelTemplate: [{
+                type: Input
+            }], dataCy: [{
+                type: HostBinding,
+                args: ['attr.data-cy']
+            }, {
+                type: Input
+            }], fileDropRef: [{
+                type: ViewChild,
+                args: [`fileDropRef`]
+            }] } });
+
+const components = [
+    OnemrvaFilePanelComponent,
+    OnemrvaMatFileUploadComponent,
+];
+
+class OnemrvaMatFileUploadModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaMatFileUploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaMatFileUploadModule, imports: [OnemrvaFilePanelComponent, OnemrvaMatFileUploadComponent, DndDirective,
+            CommonModule,
+            ReactiveFormsModule,
+            MatButtonModule,
+            MatTooltipModule,
+            MatDialogModule,
+            TranslateModule,
+            MatIconModule,
+            MatInputModule], exports: [OnemrvaFilePanelComponent, OnemrvaMatFileUploadComponent, DndDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaMatFileUploadModule, providers: [OnemrvaMatFileUploadStore, OnemrvaMatFileUploadService], imports: [components,
+            CommonModule,
+            ReactiveFormsModule,
+            MatButtonModule,
+            MatTooltipModule,
+            MatDialogModule,
+            TranslateModule,
+            MatIconModule,
+            MatInputModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaMatFileUploadModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [
+                        components,
+                        DndDirective,
+                        CommonModule,
+                        ReactiveFormsModule,
+                        MatButtonModule,
+                        MatTooltipModule,
+                        MatDialogModule,
+                        TranslateModule,
+                        MatIconModule,
+                        MatInputModule,
+                    ],
+                    exports: [components, DndDirective],
+                    providers: [OnemrvaMatFileUploadStore, OnemrvaMatFileUploadService],
+                }]
+        }] });
+
+/*
+ * Public API Surface of mat-file upload
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CUSTOM_VALIDATION_FN, DndDirective, OnemrvaFilePanelComponent, OnemrvaMatFileUploadComponent, OnemrvaMatFileUploadModule, OnemrvaMatFileUploadService, OnemrvaMatFileUploadStore, components, convertToProgressFile, convertToReferencedProgressFile, formatBytes, formattedSize };
+//# sourceMappingURL=onemrvapublic-design-system-mat-file-upload.mjs.map