@onemrvapublic/design-system 19.4.0-alpha.9 → 20.0.0-develop.1

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

@@ -1,20 +1,18 @@
 import * as i0 from '@angular/core';
-import { HostBinding, Input, ChangeDetectionStrategy, Component, EventEmitter, HostListener, Output, Directive, Injectable, InjectionToken, Optional, Inject, ViewChild, NgModule } 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 { NgIf, NgForOf, AsyncPipe, NgClass, NgTemplateOutlet, CommonModule } from '@angular/common';
+import { AsyncPipe, NgClass, NgTemplateOutlet, CommonModule } from '@angular/common';
 import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
-import * as i2 from '@ngx-translate/core';
-import { TranslatePipe, TranslateModule } from '@ngx-translate/core';
+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 { MatError } from '@angular/material/form-field';
-import * as i1 from '@angular/material/dialog';
-import { MatDialogModule } from '@angular/material/dialog';
-import * as i2$1 from '@onemrvapublic/design-system/shared';
 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';
@@ -114,20 +112,12 @@ class OnemrvaFilePanelComponent {
     get _isPrimary() {
         return this.color === OnemrvaMatColor.PRIMARY;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: OnemrvaFilePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", 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    <ng-container *ngIf=\"actions.length > 0\">\n      <ng-container *ngFor=\"let action of actions\">\n        <mat-icon\n          *ngIf=\"action.showAction(file)\"\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      </ng-container>\n    </ng-container>\n  </div>\n</div>\n<div class=\"file-panel-content\">\n  <ng-container *ngIf=\"file.message === ''\">\n    <div class=\"fileInfos\">\n      <span>{{ displayDate }}</span>\n\n      <span class=\"float-right\" *ngIf=\"file.size > 0\">{{ size }}</span>\n    </div>\n    <mat-progress-bar\n      data-cy=\"file-upload-progress\"\n      *ngIf=\"showProgress && file.enableProgressBar\"\n      mode=\"determinate\"\n      [value]=\"progress$ | async\"\n    ></mat-progress-bar>\n  </ng-container>\n  <p *ngIf=\"file.message !== ''\" class=\"message\">\n    {{ file.message | translate: { limit: formattedSize(file.maxSize) } }}\n  </p>\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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: OnemrvaFilePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", 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: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: OnemrvaFilePanelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: OnemrvaFilePanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'file-panel', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        MatIcon,
-                        NgIf,
-                        MatTooltip,
-                        TranslatePipe,
-                        NgForOf,
-                        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    <ng-container *ngIf=\"actions.length > 0\">\n      <ng-container *ngFor=\"let action of actions\">\n        <mat-icon\n          *ngIf=\"action.showAction(file)\"\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      </ng-container>\n    </ng-container>\n  </div>\n</div>\n<div class=\"file-panel-content\">\n  <ng-container *ngIf=\"file.message === ''\">\n    <div class=\"fileInfos\">\n      <span>{{ displayDate }}</span>\n\n      <span class=\"float-right\" *ngIf=\"file.size > 0\">{{ size }}</span>\n    </div>\n    <mat-progress-bar\n      data-cy=\"file-upload-progress\"\n      *ngIf=\"showProgress && file.enableProgressBar\"\n      mode=\"determinate\"\n      [value]=\"progress$ | async\"\n    ></mat-progress-bar>\n  </ng-container>\n  <p *ngIf=\"file.message !== ''\" class=\"message\">\n    {{ file.message | translate: { limit: formattedSize(file.maxSize) } }}\n  </p>\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"] }]
+            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']
@@ -167,58 +157,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 args: ['class.mat-primary']
             }] } });
 
-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: "19.2.10", ngImport: i0, type: DndDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.10", 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: "19.2.10", 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']]
-            }] } });
-
 class OnemrvaMatFileUploadService {
     constructor() {
         this.isSending = new BehaviorSubject(false);
@@ -254,10 +192,10 @@ class OnemrvaMatFileUploadService {
         alert(`Missing download implementation for file ID ${id}`);
         return of(true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: OnemrvaMatFileUploadService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: OnemrvaMatFileUploadService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: OnemrvaMatFileUploadService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: OnemrvaMatFileUploadService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: OnemrvaMatFileUploadService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: OnemrvaMatFileUploadService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -275,14 +213,16 @@ const INIT_STATE = {
 };
 const CUSTOM_VALIDATION_FN = new InjectionToken('x1, x2 = (-b -+ sqrt(rho))/2a');
 class OnemrvaMatFileUploadStore extends ComponentStore {
-    constructor(fileUploadService, translateService, customValidationFn) {
+    constructor() {
         super(INIT_STATE);
-        this.fileUploadService = fileUploadService;
-        this.translateService = translateService;
-        this.customValidationFn = customValidationFn;
         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
@@ -558,27 +498,71 @@ class OnemrvaMatFileUploadStore extends ComponentStore {
          * 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 (customValidationFn)
-            this.fn = customValidationFn;
+        if (this.customValidationFn)
+            this.fn = this.customValidationFn;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: OnemrvaMatFileUploadStore, deps: [{ token: OnemrvaMatFileUploadService }, { token: i2.TranslateService }, { token: CUSTOM_VALIDATION_FN, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: OnemrvaMatFileUploadStore }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: OnemrvaMatFileUploadStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: OnemrvaMatFileUploadStore }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: OnemrvaMatFileUploadStore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: OnemrvaMatFileUploadStore, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: OnemrvaMatFileUploadService }, { type: i2.TranslateService }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [CUSTOM_VALIDATION_FN]
-                }] }] });
+        }], 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.0.6", ngImport: i0, type: DndDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.6", 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.0.6", 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(dialog, mimeCDN, fileUploadStore) {
-        this.dialog = dialog;
-        this.mimeCDN = mimeCDN;
-        this.fileUploadStore = fileUploadStore;
+    constructor() {
         this.accept = [];
         this.maxFileSize = 0;
         this.numberOfFiles = 0;
@@ -601,8 +585,11 @@ class OnemrvaMatFileUploadComponent {
         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$ = fileUploadStore.files$;
+        this.files$ = this.fileUploadStore.files$;
         this.fileUploadErrorMessage$ = merge(this.fileUploadStore.fileUploadError$, this.error$);
     }
     ngOnInit() {
@@ -676,8 +663,8 @@ class OnemrvaMatFileUploadComponent {
             this.fileDropRef.nativeElement.value = null;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: OnemrvaMatFileUploadComponent, deps: [{ token: i1.MatDialog }, { token: i2$1.OnemRvaCDNMimeService }, { token: OnemrvaMatFileUploadStore }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", 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: "<ng-container *ngIf=\"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    <div\n      class=\"download-outer\"\n      *ngIf=\"numberOfFiles === 0 || numberOfFiles > files.length\"\n    >\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        <span class=\"restrictions\" *ngIf=\"maxFileSize > 0\">\n          {{ 'file.upload.maximum' | translate }}\n          {{ maxFileSizeFormatted }}\n\n          <span *ngIf=\"accept.length > 0\">{{ '| ' }}</span>\n\n          {{ acceptString$ | async }}\n        </span>\n      </div>\n    </div>\n    <ul class=\"files-list\">\n      <li *ngFor=\"let file of files\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            filePanelTemplate;\n            context: { file, $implicit: file }\n          \"\n        ></ng-container>\n      </li>\n    </ul>\n  </div>\n  <mat-error *ngIf=\"fileUploadErrorMessage$ | async as fileUploadErrorMessage\">\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</ng-container>\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: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: DndDirective, selector: "[appDnd]", outputs: ["fileDropped"] }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: OnemrvaMatFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", 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: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { 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"] }], animations: [
             trigger('inOutAnimation', [
                 state('in', style({ opacity: 1 })),
                 transition(':enter', [
@@ -701,7 +688,7 @@ class OnemrvaMatFileUploadComponent {
             ]),
         ] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: OnemrvaMatFileUploadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: OnemrvaMatFileUploadComponent, decorators: [{
             type: Component,
             args: [{ selector: 'onemrva-mat-file-upload', standalone: true, animations: [
                         trigger('inOutAnimation', [
@@ -730,13 +717,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                         AsyncPipe,
                         MatIcon,
                         TranslatePipe,
-                        NgForOf,
                         NgTemplateOutlet,
                         MatError,
-                        NgIf,
                         DndDirective,
-                    ], template: "<ng-container *ngIf=\"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    <div\n      class=\"download-outer\"\n      *ngIf=\"numberOfFiles === 0 || numberOfFiles > files.length\"\n    >\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        <span class=\"restrictions\" *ngIf=\"maxFileSize > 0\">\n          {{ 'file.upload.maximum' | translate }}\n          {{ maxFileSizeFormatted }}\n\n          <span *ngIf=\"accept.length > 0\">{{ '| ' }}</span>\n\n          {{ acceptString$ | async }}\n        </span>\n      </div>\n    </div>\n    <ul class=\"files-list\">\n      <li *ngFor=\"let file of files\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            filePanelTemplate;\n            context: { file, $implicit: file }\n          \"\n        ></ng-container>\n      </li>\n    </ul>\n  </div>\n  <mat-error *ngIf=\"fileUploadErrorMessage$ | async as fileUploadErrorMessage\">\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</ng-container>\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: () => [{ type: i1.MatDialog }, { type: i2$1.OnemRvaCDNMimeService }, { type: OnemrvaMatFileUploadStore }], propDecorators: { accept: [{
+                    ], 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
@@ -772,8 +757,8 @@ const components = [
 ];
 
 class OnemrvaMatFileUploadModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: OnemrvaMatFileUploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.10", ngImport: i0, type: OnemrvaMatFileUploadModule, imports: [OnemrvaFilePanelComponent, OnemrvaMatFileUploadComponent, DndDirective,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: OnemrvaMatFileUploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: OnemrvaMatFileUploadModule, imports: [OnemrvaFilePanelComponent, OnemrvaMatFileUploadComponent, DndDirective,
             CommonModule,
             ReactiveFormsModule,
             MatButtonModule,
@@ -782,7 +767,7 @@ class OnemrvaMatFileUploadModule {
             TranslateModule,
             MatIconModule,
             MatInputModule], exports: [OnemrvaFilePanelComponent, OnemrvaMatFileUploadComponent, DndDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: OnemrvaMatFileUploadModule, imports: [components,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: OnemrvaMatFileUploadModule, providers: [OnemrvaMatFileUploadStore, OnemrvaMatFileUploadService], imports: [components,
             CommonModule,
             ReactiveFormsModule,
             MatButtonModule,
@@ -792,7 +777,7 @@ class OnemrvaMatFileUploadModule {
             MatIconModule,
             MatInputModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: OnemrvaMatFileUploadModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: OnemrvaMatFileUploadModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],
@@ -809,6 +794,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                         MatInputModule,
                     ],
                     exports: [components, DndDirective],
+                    providers: [OnemrvaMatFileUploadStore, OnemrvaMatFileUploadService],
                 }]
         }] });