@onemrvapublic/design-system 18.3.0-develop.1 → 18.3.0-develop.2

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

@@ -1,22 +1,19 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, HostBinding, Input, Injectable, InjectionToken, Optional, Inject, EventEmitter, Directive, Output, HostListener, ViewChild, NgModule } from '@angular/core';
+import { Component, ChangeDetectionStrategy, HostBinding, Input, EventEmitter, Directive, Output, HostListener, Injectable, InjectionToken, Optional, Inject, 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 } from 'rxjs';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i2 from '@angular/material/tooltip';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i3 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-import * as i3$1 from '@ngx-translate/core';
-import { TranslateModule } from '@ngx-translate/core';
+import { MatIcon, MatIconModule } from '@angular/material/icon';
+import { NgIf, NgForOf, AsyncPipe, NgStyle, 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 { trigger, state, style, transition, animate, keyframes } from '@angular/animations';
-import * as i1$1 from '@angular/material/dialog';
+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 * as i7 from '@angular/material/form-field';
 import { MatButtonModule } from '@angular/material/button';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatInputModule } from '@angular/material/input';
@@ -107,12 +104,21 @@ class OnemrvaFilePanelComponent {
     get _isPrimary() {
         return this.color === OnemrvaMatColor.PRIMARY;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OnemrvaFilePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: OnemrvaFilePanelComponent, selector: "file-panel", inputs: { id: "id", dataCy: "dataCy", file: "file", actions: "actions", showProgress: "showProgress", displayDate: "displayDate" }, 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\" [attr.data-cy]=\"dataCy\">\n  <div class=\"file-panel-title-left\">\n    <mat-icon *ngIf=\"file.color === 'error'\" class=\"filled mat-error\"\n      >error</mat-icon\n    >\n    <mat-icon *ngIf=\"file.color === 'success'\" class=\"filled mat-success\"\n      >check_circle</mat-icon\n    >\n    <mat-icon *ngIf=\"file.color === 'warn'\" class=\"filled mat-warn\"\n      >warning</mat-icon\n    >\n    <span class=\"file-name\">\n      {{ file.name }}\n    </span>\n  </div>\n  <div class=\"file-panel-title-action\">\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\n    <div\n      class=\"onemrva-progress-bar\"\n      *ngIf=\"showProgress && file.enableProgressBar\"\n    >\n      <div class=\"onemrva-progress-bar-outer mt-s\" #onemrvaProgressBar>\n        <div\n          class=\"onemrva-progress-bar-inner\"\n          [ngStyle]=\"{ width: (progress$ | async) + '%' }\"\n          [ngClass]=\"{\n            'progress-success': (progress$ | async)! >= 100,\n          }\"\n          data-cy=\"file-upload-progress\"\n          [attr.value]=\"progress$ | async\"\n        ></div>\n      </div>\n    </div>\n  </ng-container>\n  <p *ngIf=\"file.message !== ''\" class=\"message\">{{ file.message }}</p>\n</div>\n", styles: [":host{flex:1 1 100%}:host.clickable:hover{box-shadow:0 3px 3px #312f3a29}.fileInfos{display:inline-block;width:100%;height:24px;font-size:14px}.fileInfos .float-right{margin-right:8px}.file-panel-title-left{display:inline-flex;align-items:center;gap:8px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: OnemrvaFilePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: OnemrvaFilePanelComponent, isStandalone: true, selector: "file-panel", inputs: { id: "id", dataCy: "dataCy", file: "file", actions: "actions", showProgress: "showProgress", displayDate: "displayDate" }, 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\" [attr.data-cy]=\"dataCy\">\n  <div class=\"file-panel-title-left\">\n    <mat-icon *ngIf=\"file.color === 'error'\" class=\"filled mat-error\"\n      >error</mat-icon\n    >\n    <mat-icon *ngIf=\"file.color === 'success'\" class=\"filled mat-success\"\n      >check_circle</mat-icon\n    >\n    <mat-icon *ngIf=\"file.color === 'warn'\" class=\"filled mat-warn\"\n      >warning</mat-icon\n    >\n    <span class=\"file-name\">\n      {{ file.name }}\n    </span>\n  </div>\n  <div class=\"file-panel-title-action\">\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\n    <div\n      class=\"onemrva-progress-bar\"\n      *ngIf=\"showProgress && file.enableProgressBar\"\n    >\n      <div class=\"onemrva-progress-bar-outer mt-s\">\n        <div\n          class=\"onemrva-progress-bar-inner\"\n          [ngStyle]=\"{ width: (progress$ | async) + '%' }\"\n          [ngClass]=\"{\n            'progress-success': (progress$ | async)! >= 100,\n          }\"\n          data-cy=\"file-upload-progress\"\n          [attr.value]=\"progress$ | async\"\n        ></div>\n      </div>\n    </div>\n  </ng-container>\n  <p *ngIf=\"file.message !== ''\" class=\"message\">{{ file.message }}</p>\n</div>\n", styles: [":host{flex:1 1 100%}.fileInfos{display:inline-block;width:100%;height:24px;font-size:14px}.fileInfos .float-right{margin-right:8px}.file-panel-title-left{display:inline-flex;align-items:center;gap:8px}\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: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OnemrvaFilePanelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: OnemrvaFilePanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'file-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"file-panel-title\" [attr.data-cy]=\"dataCy\">\n  <div class=\"file-panel-title-left\">\n    <mat-icon *ngIf=\"file.color === 'error'\" class=\"filled mat-error\"\n      >error</mat-icon\n    >\n    <mat-icon *ngIf=\"file.color === 'success'\" class=\"filled mat-success\"\n      >check_circle</mat-icon\n    >\n    <mat-icon *ngIf=\"file.color === 'warn'\" class=\"filled mat-warn\"\n      >warning</mat-icon\n    >\n    <span class=\"file-name\">\n      {{ file.name }}\n    </span>\n  </div>\n  <div class=\"file-panel-title-action\">\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\n    <div\n      class=\"onemrva-progress-bar\"\n      *ngIf=\"showProgress && file.enableProgressBar\"\n    >\n      <div class=\"onemrva-progress-bar-outer mt-s\" #onemrvaProgressBar>\n        <div\n          class=\"onemrva-progress-bar-inner\"\n          [ngStyle]=\"{ width: (progress$ | async) + '%' }\"\n          [ngClass]=\"{\n            'progress-success': (progress$ | async)! >= 100,\n          }\"\n          data-cy=\"file-upload-progress\"\n          [attr.value]=\"progress$ | async\"\n        ></div>\n      </div>\n    </div>\n  </ng-container>\n  <p *ngIf=\"file.message !== ''\" class=\"message\">{{ file.message }}</p>\n</div>\n", styles: [":host{flex:1 1 100%}:host.clickable:hover{box-shadow:0 3px 3px #312f3a29}.fileInfos{display:inline-block;width:100%;height:24px;font-size:14px}.fileInfos .float-right{margin-right:8px}.file-panel-title-left{display:inline-flex;align-items:center;gap:8px}\n"] }]
+            args: [{ selector: 'file-panel', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        MatIcon,
+                        NgIf,
+                        MatTooltip,
+                        TranslatePipe,
+                        NgForOf,
+                        AsyncPipe,
+                        NgStyle,
+                        NgClass,
+                    ], template: "<div class=\"file-panel-title\" [attr.data-cy]=\"dataCy\">\n  <div class=\"file-panel-title-left\">\n    <mat-icon *ngIf=\"file.color === 'error'\" class=\"filled mat-error\"\n      >error</mat-icon\n    >\n    <mat-icon *ngIf=\"file.color === 'success'\" class=\"filled mat-success\"\n      >check_circle</mat-icon\n    >\n    <mat-icon *ngIf=\"file.color === 'warn'\" class=\"filled mat-warn\"\n      >warning</mat-icon\n    >\n    <span class=\"file-name\">\n      {{ file.name }}\n    </span>\n  </div>\n  <div class=\"file-panel-title-action\">\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\n    <div\n      class=\"onemrva-progress-bar\"\n      *ngIf=\"showProgress && file.enableProgressBar\"\n    >\n      <div class=\"onemrva-progress-bar-outer mt-s\">\n        <div\n          class=\"onemrva-progress-bar-inner\"\n          [ngStyle]=\"{ width: (progress$ | async) + '%' }\"\n          [ngClass]=\"{\n            'progress-success': (progress$ | async)! >= 100,\n          }\"\n          data-cy=\"file-upload-progress\"\n          [attr.value]=\"progress$ | async\"\n        ></div>\n      </div>\n    </div>\n  </ng-container>\n  <p *ngIf=\"file.message !== ''\" class=\"message\">{{ file.message }}</p>\n</div>\n", styles: [":host{flex:1 1 100%}.fileInfos{display:inline-block;width:100%;height:24px;font-size:14px}.fileInfos .float-right{margin-right:8px}.file-panel-title-left{display:inline-flex;align-items:center;gap:8px}\n"] }]
         }], propDecorators: { id: [{
                 type: HostBinding,
                 args: ['attr.id']
@@ -148,6 +154,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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.0.6", ngImport: i0, type: DndDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.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: "19.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']]
+            }] } });
+
 class OnemrvaMatFileUploadService {
     constructor() {
         this.isSending = new BehaviorSubject(false);
@@ -183,10 +241,10 @@ class OnemrvaMatFileUploadService {
         alert(`Missing download implementation for file ID ${id}`);
         return of(true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OnemrvaMatFileUploadService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OnemrvaMatFileUploadService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: OnemrvaMatFileUploadService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: OnemrvaMatFileUploadService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OnemrvaMatFileUploadService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: OnemrvaMatFileUploadService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -492,69 +550,18 @@ class OnemrvaMatFileUploadStore extends ComponentStore {
         if (customValidationFn)
             this.fn = customValidationFn;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OnemrvaMatFileUploadStore, deps: [{ token: OnemrvaMatFileUploadService }, { token: i3$1.TranslateService }, { token: CUSTOM_VALIDATION_FN, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OnemrvaMatFileUploadStore }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", 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.0.6", ngImport: i0, type: OnemrvaMatFileUploadStore }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OnemrvaMatFileUploadStore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: OnemrvaMatFileUploadStore, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: OnemrvaMatFileUploadService }, { type: i3$1.TranslateService }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: OnemrvaMatFileUploadService }, { type: i2.TranslateService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
                     args: [CUSTOM_VALIDATION_FN]
                 }] }] });
 
-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: "18.2.13", ngImport: i0, type: DndDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: DndDirective, 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: "18.2.13", ngImport: i0, type: DndDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[appDnd]',
-                }]
-        }], 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, translate, fileUploadStore) {
@@ -659,8 +666,8 @@ class OnemrvaMatFileUploadComponent {
             this.fileDropRef.nativeElement.value = null;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OnemrvaMatFileUploadComponent, deps: [{ token: i1$1.MatDialog }, { token: i2$1.OnemRvaCDNMimeService }, { token: i3$1.TranslateService }, { token: OnemrvaMatFileUploadStore }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: OnemrvaMatFileUploadComponent, selector: "onemrva-mat-file-upload", inputs: { accept: "accept", maxFileSize: "maxFileSize", numberOfFiles: "numberOfFiles", maxTotalFileSize: "maxTotalFileSize", uploadOnDrop: "uploadOnDrop", initialFiles: "initialFiles", errorMessage: "errorMessage", 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      'fu-error': errorMessage !== '',\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\n  <mat-error *ngIf=\"errorMessage\">{{ errorMessage | translate }}</mat-error>\n\n  <mat-error *ngIf=\"fileUploadErrorMessage$ | async as fileUploadErrorMessage\">\n    {{ fileUploadErrorMessage | translate }}\n  </mat-error>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: DndDirective, selector: "[appDnd]", outputs: ["fileDropped"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: OnemrvaMatFileUploadComponent, deps: [{ token: i1.MatDialog }, { token: i2$1.OnemRvaCDNMimeService }, { token: i2.TranslateService }, { token: OnemrvaMatFileUploadStore }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.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", 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      'fu-error': errorMessage !== '',\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\n  <mat-error *ngIf=\"errorMessage\">{{ errorMessage | translate }}</mat-error>\n\n  <mat-error *ngIf=\"fileUploadErrorMessage$ | async as fileUploadErrorMessage\">\n    {{ fileUploadErrorMessage | translate }}\n  </mat-error>\n</ng-container>\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: [
             trigger('inOutAnimation', [
                 state('in', style({ opacity: 1 })),
                 transition(':enter', [
@@ -684,9 +691,9 @@ class OnemrvaMatFileUploadComponent {
             ]),
         ] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OnemrvaMatFileUploadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: OnemrvaMatFileUploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'onemrva-mat-file-upload', animations: [
+            args: [{ selector: 'onemrva-mat-file-upload', standalone: true, animations: [
                         trigger('inOutAnimation', [
                             state('in', style({ opacity: 1 })),
                             transition(':enter', [
@@ -708,8 +715,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                                 ])),
                             ]),
                         ]),
+                    ], imports: [
+                        NgClass,
+                        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      'fu-error': errorMessage !== '',\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\n  <mat-error *ngIf=\"errorMessage\">{{ errorMessage | translate }}</mat-error>\n\n  <mat-error *ngIf=\"fileUploadErrorMessage$ | async as fileUploadErrorMessage\">\n    {{ fileUploadErrorMessage | translate }}\n  </mat-error>\n</ng-container>\n" }]
-        }], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: i2$1.OnemRvaCDNMimeService }, { type: i3$1.TranslateService }, { type: OnemrvaMatFileUploadStore }], propDecorators: { accept: [{
+        }], ctorParameters: () => [{ type: i1.MatDialog }, { type: i2$1.OnemRvaCDNMimeService }, { type: i2.TranslateService }, { type: OnemrvaMatFileUploadStore }], propDecorators: { accept: [{
                 type: Input
             }], maxFileSize: [{
                 type: Input
@@ -743,16 +760,18 @@ const components = [
 ];
 
 class OnemrvaMatFileUploadModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OnemrvaMatFileUploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: OnemrvaMatFileUploadModule, declarations: [OnemrvaFilePanelComponent, OnemrvaMatFileUploadComponent, DndDirective], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: OnemrvaMatFileUploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: OnemrvaMatFileUploadModule, imports: [OnemrvaFilePanelComponent, OnemrvaMatFileUploadComponent, DndDirective,
+            CommonModule,
             ReactiveFormsModule,
             MatButtonModule,
             MatTooltipModule,
             MatDialogModule,
             TranslateModule,
             MatIconModule,
-            MatInputModule], exports: [OnemrvaFilePanelComponent, OnemrvaMatFileUploadComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OnemrvaMatFileUploadModule, imports: [CommonModule,
+            MatInputModule], exports: [OnemrvaFilePanelComponent, OnemrvaMatFileUploadComponent, DndDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: OnemrvaMatFileUploadModule, imports: [components,
+            CommonModule,
             ReactiveFormsModule,
             MatButtonModule,
             MatTooltipModule,
@@ -761,11 +780,13 @@ class OnemrvaMatFileUploadModule {
             MatIconModule,
             MatInputModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OnemrvaMatFileUploadModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: OnemrvaMatFileUploadModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [components, DndDirective],
+                    declarations: [],
                     imports: [
+                        components,
+                        DndDirective,
                         CommonModule,
                         ReactiveFormsModule,
                         MatButtonModule,
@@ -775,7 +796,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         MatIconModule,
                         MatInputModule,
                     ],
-                    exports: [components],
+                    exports: [components, DndDirective],
                 }]
         }] });
 
@@ -787,5 +808,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CUSTOM_VALIDATION_FN, OnemrvaFilePanelComponent, OnemrvaMatFileUploadComponent, OnemrvaMatFileUploadModule, OnemrvaMatFileUploadService, OnemrvaMatFileUploadStore, components, convertToProgressFile, convertToReferencedProgressFile, formatBytes, formattedSize };
+export { CUSTOM_VALIDATION_FN, DndDirective, OnemrvaFilePanelComponent, OnemrvaMatFileUploadComponent, OnemrvaMatFileUploadModule, OnemrvaMatFileUploadService, OnemrvaMatFileUploadStore, components, convertToProgressFile, convertToReferencedProgressFile, formatBytes, formattedSize };
 //# sourceMappingURL=onemrvapublic-design-system-mat-file-upload.mjs.map