@onemrvapublic/design-system 20.11.3 → 21.0.0-develop.2

package/fesm2022/onemrvapublic-design-system-mat-empty-row.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"onemrvapublic-design-system-mat-empty-row.mjs","sources":["../../../../projects/onemrva/design-system/mat-empty-row/src/onemrva-mat-empty-row.component.ts","../../../../projects/onemrva/design-system/mat-empty-row/src/onemrva-mat-empty-row.component.html","../../../../projects/onemrva/design-system/mat-empty-row/onemrvapublic-design-system-mat-empty-row.ts"],"sourcesContent":["import {\n  Component,\n  EventEmitter,\n  Input,\n  Output,\n  ViewEncapsulation,\n  inject,\n} from '@angular/core';\nimport { OnemRvaCDNService } from '@onemrvapublic/design-system/shared';\nimport { TranslateService } from '@ngx-translate/core';\nimport { MatButton } from '@angular/material/button';\nimport { NgOptimizedImage } from '@angular/common';\n\n/**\n *\n */\n@Component({\n  selector: 'onemrva-mat-empty-row',\n  templateUrl: 'onemrva-mat-empty-row.component.html',\n  styleUrls: ['onemrva-mat-empty-row.component.scss'],\n  standalone: true,\n  imports: [NgOptimizedImage, MatButton],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class OnemrvaMatEmptyRowComponent {\n  private cdn = inject(OnemRvaCDNService);\n  private translate = inject(TranslateService);\n\n  noresultimg: string = this.cdn.getOri('wordless.svg');\n\n  @Input()\n  buttonText: string = this.translate.instant('Reset filters');\n\n  @Input()\n  text: string = this.translate.instant(\n    'Sorry, there is no results for this search.',\n  );\n\n  @Input()\n  imageAlt: string = this.translate.instant('Ori is wordless');\n\n  @Output()\n  clear = new EventEmitter<any>();\n}\n","<span class=\"img\">\n  <img [ngSrc]=\"noresultimg\" alt=\"{{ imageAlt }}\" fill priority />\n</span>\n<span class=\"text\">\n  {{ text }}\n  <ng-content></ng-content>\n</span>\n<button mat-stroked-button (click)=\"clear.emit()\">{{ buttonText }}</button>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;AAaA;;AAEG;MASU,2BAA2B,CAAA;AARxC,IAAA,WAAA,GAAA;AASU,QAAA,IAAA,CAAA,GAAG,GAAG,MAAM,CAAC,iBAAiB,CAAC;AAC/B,QAAA,IAAA,CAAA,SAAS,GAAG,MAAM,CAAC,gBAAgB,CAAC;QAE5C,IAAA,CAAA,WAAW,GAAW,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,cAAc,CAAC;QAGrD,IAAA,CAAA,UAAU,GAAW,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,eAAe,CAAC;QAG5D,IAAA,CAAA,IAAI,GAAW,IAAI,CAAC,SAAS,CAAC,OAAO,CACnC,6CAA6C,CAC9C;QAGD,IAAA,CAAA,QAAQ,GAAW,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,iBAAiB,CAAC;AAG5D,QAAA,IAAA,CAAA,KAAK,GAAG,IAAI,YAAY,EAAO;AAChC,IAAA;+GAnBY,2BAA2B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAA3B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,2BAA2B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,uBAAA,EAAA,MAAA,EAAA,EAAA,UAAA,EAAA,YAAA,EAAA,IAAA,EAAA,MAAA,EAAA,QAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECxBxC,mQAQA,EAAA,MAAA,EAAA,CAAA,+cAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDaY,gBAAgB,4PAAE,SAAS,EAAA,QAAA,EAAA,iOAAA,EAAA,MAAA,EAAA,CAAA,WAAA,CAAA,EAAA,QAAA,EAAA,CAAA,WAAA,EAAA,WAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;4FAG1B,2BAA2B,EAAA,UAAA,EAAA,CAAA;kBARvC,SAAS;+BACE,uBAAuB,EAAA,UAAA,EAGrB,IAAI,EAAA,OAAA,EACP,CAAC,gBAAgB,EAAE,SAAS,CAAC,EAAA,aAAA,EACvB,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,mQAAA,EAAA,MAAA,EAAA,CAAA,+cAAA,CAAA,EAAA;;sBAQpC;;sBAGA;;sBAKA;;sBAGA;;;AEzCH;;AAEG;;;;"}
+{"version":3,"file":"onemrvapublic-design-system-mat-empty-row.mjs","sources":["../../../../projects/onemrva/design-system/mat-empty-row/src/onemrva-mat-empty-row.component.ts","../../../../projects/onemrva/design-system/mat-empty-row/src/onemrva-mat-empty-row.component.html","../../../../projects/onemrva/design-system/mat-empty-row/onemrvapublic-design-system-mat-empty-row.ts"],"sourcesContent":["import {\n  Component,\n  ViewEncapsulation,\n  inject,\n  input,\n  output,\n} from '@angular/core';\nimport { OnemRvaCDNService } from '@onemrvapublic/design-system/shared';\nimport { TranslateService } from '@ngx-translate/core';\nimport { MatButton } from '@angular/material/button';\nimport { NgOptimizedImage } from '@angular/common';\n\n/**\n *\n */\n@Component({\n  selector: 'onemrva-mat-empty-row',\n  templateUrl: 'onemrva-mat-empty-row.component.html',\n  styleUrls: ['onemrva-mat-empty-row.component.scss'],\n  standalone: true,\n  imports: [NgOptimizedImage, MatButton],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class OnemrvaMatEmptyRowComponent {\n  private cdn = inject(OnemRvaCDNService);\n  private translate = inject(TranslateService);\n\n  noresultimg: string = this.cdn.getOri('wordless.svg');\n\n  readonly buttonText = input<string>(this.translate.instant('Reset filters'));\n\n  readonly text = input<string>(\n    this.translate.instant('Sorry, there is no results for this search.'),\n  );\n\n  readonly imageAlt = input<string>(this.translate.instant('Ori is wordless'));\n\n  readonly clear = output<any>();\n}\n","<span class=\"img\">\n  <img [ngSrc]=\"noresultimg\" alt=\"{{ imageAlt() }}\" fill priority />\n</span>\n<span class=\"text\">\n  {{ text() }}\n  <ng-content />\n</span>\n<button mat-stroked-button (click)=\"clear.emit(undefined)\">\n  {{ buttonText() }}\n</button>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;AAYA;;AAEG;MASU,2BAA2B,CAAA;AARxC,IAAA,WAAA,GAAA;AASU,QAAA,IAAA,CAAA,GAAG,GAAG,MAAM,CAAC,iBAAiB,CAAC;AAC/B,QAAA,IAAA,CAAA,SAAS,GAAG,MAAM,CAAC,gBAAgB,CAAC;QAE5C,IAAA,CAAA,WAAW,GAAW,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,cAAc,CAAC;AAE5C,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK,CAAS,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,eAAe,CAAC,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,YAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAC;AAEnE,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CACnB,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,6CAA6C,CAAC,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CACtE;AAEQ,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAS,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,iBAAiB,CAAC,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,UAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAC;QAEnE,IAAA,CAAA,KAAK,GAAG,MAAM,EAAO;AAC/B,IAAA;8GAfY,2BAA2B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAA3B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,2BAA2B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,uBAAA,EAAA,MAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECvBxC,6QAUA,EAAA,MAAA,EAAA,CAAA,+cAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDUY,gBAAgB,4PAAE,SAAS,EAAA,QAAA,EAAA,iOAAA,EAAA,MAAA,EAAA,CAAA,WAAA,CAAA,EAAA,QAAA,EAAA,CAAA,WAAA,EAAA,WAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAG1B,2BAA2B,EAAA,UAAA,EAAA,CAAA;kBARvC,SAAS;+BACE,uBAAuB,EAAA,UAAA,EAGrB,IAAI,EAAA,OAAA,EACP,CAAC,gBAAgB,EAAE,SAAS,CAAC,EAAA,aAAA,EACvB,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,6QAAA,EAAA,MAAA,EAAA,CAAA,+cAAA,CAAA,EAAA;;;AErBvC;;AAEG;;;;"}

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

@@ -1,17 +1,17 @@
 import * as i0 from '@angular/core';
-import { HostBinding, Input, ChangeDetectionStrategy, Component, Injectable, InjectionToken, inject, EventEmitter, HostListener, Output, Directive, ViewChild, NgModule } from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, Component, Injectable, InjectionToken, inject, signal, output, Directive, EventEmitter, 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 { BehaviorSubject, of, interval, take, map, catchError, tap, mergeMap, withLatestFrom, filter, throttle, takeWhile, switchMap, forkJoin, merge, Subject } from 'rxjs';
 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 { NgTemplateOutlet, AsyncPipe, CommonModule } from '@angular/common';
 import { MatError } from '@angular/material/form-field';
 import { MatButtonModule } from '@angular/material/button';
 import { ReactiveFormsModule } from '@angular/forms';
@@ -72,90 +72,38 @@ function convertToReferencedProgressFile(id, name, message = '', progress = 100,
 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.id = input(`onemrva-file-panel-${NEXT_ID$1++}`, ...(ngDevMode ? [{ debugName: "id" }] : []));
+        this.dataCy = input('onemrva-file-panel-' + NEXT_ID$1, ...(ngDevMode ? [{ debugName: "dataCy" }] : []));
+        this.file = input.required(...(ngDevMode ? [{ debugName: "file" }] : []));
+        this.actions = input([], ...(ngDevMode ? [{ debugName: "actions" }] : []));
+        this.showProgress = input(true, ...(ngDevMode ? [{ debugName: "showProgress" }] : []));
+        this.displayDate = input('', ...(ngDevMode ? [{ debugName: "displayDate" }] : []));
+        this.maxFileSize = input(0, ...(ngDevMode ? [{ debugName: "maxFileSize" }] : []));
+        this.progress = computed(() => this.file().progress, ...(ngDevMode ? [{ debugName: "progress" }] : []));
+        this.size = computed(() => formattedSize(this.file().size), ...(ngDevMode ? [{ debugName: "size" }] : []));
+        this.color = computed(() => this.file().color ?? OnemrvaMatColor.NONE, ...(ngDevMode ? [{ debugName: "color" }] : []));
+        this.colorAccent = computed(() => this.color() === OnemrvaMatColor.ACCENT ? '' : null, ...(ngDevMode ? [{ debugName: "colorAccent" }] : []));
+        this.isError = computed(() => this.color() === OnemrvaMatColor.ERROR, ...(ngDevMode ? [{ debugName: "isError" }] : []));
+        this.isWarn = computed(() => this.color() === OnemrvaMatColor.WARN, ...(ngDevMode ? [{ debugName: "isWarn" }] : []));
+        this.isSuccess = computed(() => this.color() === OnemrvaMatColor.SUCCESS, ...(ngDevMode ? [{ debugName: "isSuccess" }] : []));
+        this.isPrimary = computed(() => this.color() === OnemrvaMatColor.PRIMARY, ...(ngDevMode ? [{ debugName: "isPrimary" }] : []));
         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.3.15", ngImport: i0, type: OnemrvaFilePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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          aria-label=\"progress\"\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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaFilePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: OnemrvaFilePanelComponent, isStandalone: true, selector: "file-panel", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, dataCy: { classPropertyName: "dataCy", publicName: "dataCy", isSignal: true, isRequired: false, transformFunction: null }, file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: true, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, showProgress: { classPropertyName: "showProgress", publicName: "showProgress", isSignal: true, isRequired: false, transformFunction: null }, displayDate: { classPropertyName: "displayDate", publicName: "displayDate", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.id": "id()", "attr.data-cy": "dataCy()", "attr.mat-accent": "colorAccent()", "class.mat-error": "isError()", "class.mat-warn": "isWarn()", "class.mat-success": "isSuccess()", "class.mat-primary": "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          aria-label=\"progress\"\n          [value]=\"progress()\"\n        />\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 .file-panel-title-left{display:inline-flex;align-items:center;gap:var(--spacer)}:host .file-panel-title{font:var(--mat-sys-title-medium);margin-bottom:0;color:var(--mat-sys-on-primary-container)}: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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaFilePanelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", 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          aria-label=\"progress\"\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']
-            }] } });
+            args: [{ selector: 'file-panel', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MatIcon, MatTooltip, TranslatePipe, MatProgressBar], host: {
+                        '[attr.id]': 'id()',
+                        '[attr.data-cy]': 'dataCy()',
+                        '[attr.mat-accent]': 'colorAccent()',
+                        '[class.mat-error]': 'isError()',
+                        '[class.mat-warn]': 'isWarn()',
+                        '[class.mat-success]': 'isSuccess()',
+                        '[class.mat-primary]': 'isPrimary()',
+                    }, 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          aria-label=\"progress\"\n          [value]=\"progress()\"\n        />\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 .file-panel-title-left{display:inline-flex;align-items:center;gap:var(--spacer)}:host .file-panel-title{font:var(--mat-sys-title-medium);margin-bottom:0;color:var(--mat-sys-on-primary-container)}: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: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], dataCy: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataCy", required: false }] }], file: [{ type: i0.Input, args: [{ isSignal: true, alias: "file", required: true }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], showProgress: [{ type: i0.Input, args: [{ isSignal: true, alias: "showProgress", required: false }] }], displayDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayDate", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }] } });
 
 class OnemrvaMatFileUploadService {
     constructor() {
@@ -192,10 +140,10 @@ class OnemrvaMatFileUploadService {
         alert(`Missing download implementation for file ID ${id}`);
         return of(true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaMatFileUploadService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaMatFileUploadService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaMatFileUploadService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaMatFileUploadService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaMatFileUploadService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaMatFileUploadService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -501,77 +449,70 @@ class OnemrvaMatFileUploadStore extends ComponentStore {
         if (this.customValidationFn)
             this.fn = this.customValidationFn;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaMatFileUploadStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaMatFileUploadStore }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaMatFileUploadStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaMatFileUploadStore }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaMatFileUploadStore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaMatFileUploadStore, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
 class DndDirective {
     constructor() {
-        this.fileOver = false;
-        this.fileDropped = new EventEmitter();
+        this.fileOver = signal(false, ...(ngDevMode ? [{ debugName: "fileOver" }] : []));
+        this.fileDropped = output();
     }
     // Dragover listener
     onDragOver(evt) {
         evt.preventDefault();
         evt.stopPropagation();
-        this.fileOver = true;
+        this.fileOver.set(true);
     }
     // Dragleave listener
     onDragLeave(evt) {
         evt.preventDefault();
         evt.stopPropagation();
-        this.fileOver = false;
+        this.fileOver.set(false);
     }
     // Drop listener
     ondrop(evt) {
         evt.preventDefault();
         evt.stopPropagation();
-        this.fileOver = false;
+        this.fileOver.set(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.3.15", ngImport: i0, type: DndDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DndDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: DndDirective, isStandalone: true, selector: "[appDnd]", outputs: { fileDropped: "fileDropped" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "ondrop($event)" }, properties: { "class.fileover": "fileOver()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DndDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DndDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[appDnd]',
                     standalone: true,
+                    host: {
+                        '[class.fileover]': 'fileOver()',
+                        '(dragover)': 'onDragOver($event)',
+                        '(dragleave)': 'onDragLeave($event)',
+                        '(drop)': 'ondrop($event)',
+                    },
                 }]
-        }], 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']]
-            }] } });
+        }], propDecorators: { fileDropped: [{ type: i0.Output, args: ["fileDropped"] }] } });
 
 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.accept = input([], ...(ngDevMode ? [{ debugName: "accept" }] : []));
+        this.maxFileSize = input(0, ...(ngDevMode ? [{ debugName: "maxFileSize" }] : []));
+        this.numberOfFiles = input(0, ...(ngDevMode ? [{ debugName: "numberOfFiles" }] : []));
+        this.maxTotalFileSize = input(0, ...(ngDevMode ? [{ debugName: "maxTotalFileSize" }] : []));
+        this.uploadOnDrop = input(true, ...(ngDevMode ? [{ debugName: "uploadOnDrop" }] : []));
+        this.initialFiles = input([], ...(ngDevMode ? [{ debugName: "initialFiles" }] : []));
+        this.errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
+        this.hideExtensions = input([], ...(ngDevMode ? [{ debugName: "hideExtensions" }] : []));
+        this.dropFilesHereTextTranslationKey = input('file.upload.drag.and.drop', ...(ngDevMode ? [{ debugName: "dropFilesHereTextTranslationKey" }] : []));
+        this.filePanelTemplate = input.required(...(ngDevMode ? [{ debugName: "filePanelTemplate" }] : []));
         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"`.
@@ -581,7 +522,16 @@ class OnemrvaMatFileUploadComponent {
          * <onemrva-mat-multi-select id="my-first-multi-select"></onemrva-mat-multi-select>
          * ```
          */
-        this.dataCy = `onemrva-mat-multi-select-${NEXT_ID++}`;
+        /**
+         * 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 = input(`onemrva-mat-multi-select-${NEXT_ID++}`, ...(ngDevMode ? [{ debugName: "dataCy" }] : []));
+        this.fileDropRef = viewChild.required(`fileDropRef`);
         this.inputId = `fileDropRef-${NEXT_ID}`;
         this.maxFileSizeFormatted = '';
         this.error$ = new Subject();
@@ -593,12 +543,14 @@ class OnemrvaMatFileUploadComponent {
         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);
+        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);
+        this.maxFileSizeFormatted = formatBytes(this.maxFileSize());
+        this.fileUploadStore.setMaxFileSize(this.maxFileSize());
     }
     /**
      * on file drop handler
@@ -621,15 +573,15 @@ class OnemrvaMatFileUploadComponent {
         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) {
+            if (this.numberOfFiles() > 0 &&
+                files.length + currentFiles.length > this.numberOfFiles()) {
                 this.error$.next('file.upload.too.many.files');
                 return;
             }
-            if (this.maxTotalFileSize > 0) {
+            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) {
+                if (total > this.maxTotalFileSize()) {
                     this.error$.next('file.upload.total.max.size.exceeded');
                     return;
                 }
@@ -647,24 +599,24 @@ class OnemrvaMatFileUploadComponent {
                     color: 'primary',
                     url: null,
                     id: null,
-                    enableProgressBar: this.uploadOnDrop,
+                    enableProgressBar: this.uploadOnDrop(),
                     name: file.name,
                     lastModified: file.lastModified,
                     size: file.size,
                     type: file.type,
-                    maxSize: this.maxFileSize,
+                    maxSize: this.maxFileSize(),
                 };
                 fs.push(item);
             }
-            if (this.uploadOnDrop)
+            if (this.uploadOnDrop())
                 this.fileUploadStore.uploadFiles(fs);
             else
                 this.fileUploadStore.addSeveralForPotentialUpload(fs);
-            this.fileDropRef.nativeElement.value = null;
+            this.fileDropRef().nativeElement.value = null;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaMatFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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-on-surface-variant);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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaMatFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: OnemrvaMatFileUploadComponent, isStandalone: true, selector: "onemrva-mat-file-upload", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, numberOfFiles: { classPropertyName: "numberOfFiles", publicName: "numberOfFiles", isSignal: true, isRequired: false, transformFunction: null }, maxTotalFileSize: { classPropertyName: "maxTotalFileSize", publicName: "maxTotalFileSize", isSignal: true, isRequired: false, transformFunction: null }, uploadOnDrop: { classPropertyName: "uploadOnDrop", publicName: "uploadOnDrop", isSignal: true, isRequired: false, transformFunction: null }, initialFiles: { classPropertyName: "initialFiles", publicName: "initialFiles", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, hideExtensions: { classPropertyName: "hideExtensions", publicName: "hideExtensions", isSignal: true, isRequired: false, transformFunction: null }, dropFilesHereTextTranslationKey: { classPropertyName: "dropFilesHereTextTranslationKey", publicName: "dropFilesHereTextTranslationKey", isSignal: true, isRequired: false, transformFunction: null }, filePanelTemplate: { classPropertyName: "filePanelTemplate", publicName: "filePanelTemplate", isSignal: true, isRequired: true, transformFunction: null }, dataCy: { classPropertyName: "dataCy", publicName: "dataCy", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-cy": "dataCy()" } }, viewQueries: [{ propertyName: "fileDropRef", first: true, predicate: ["fileDropRef"], descendants: true, isSignal: 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    [class.filein]=\"files.length > 0\"\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          />\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-on-surface-variant);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: "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', [
@@ -688,7 +640,7 @@ class OnemrvaMatFileUploadComponent {
             ]),
         ] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaMatFileUploadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaMatFileUploadComponent, decorators: [{
             type: Component,
             args: [{ selector: 'onemrva-mat-file-upload', standalone: true, animations: [
                         trigger('inOutAnimation', [
@@ -713,43 +665,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                             ]),
                         ]),
                     ], 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-on-surface-variant);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`]
-            }] } });
+                    ], host: {
+                        '[attr.data-cy]': 'dataCy()',
+                    }, template: "@if (files$ | async; as files) {\n  <div\n    class=\"onemrva-mat-file-upload-drop-area\"\n    appDnd\n    (fileDropped)=\"onFileDropped($event)\"\n    [class.filein]=\"files.length > 0\"\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          />\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-on-surface-variant);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: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], numberOfFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberOfFiles", required: false }] }], maxTotalFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxTotalFileSize", required: false }] }], uploadOnDrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadOnDrop", required: false }] }], initialFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialFiles", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], hideExtensions: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideExtensions", required: false }] }], dropFilesHereTextTranslationKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropFilesHereTextTranslationKey", required: false }] }], filePanelTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "filePanelTemplate", required: true }] }], dataCy: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataCy", required: false }] }], fileDropRef: [{ type: i0.ViewChild, args: [`fileDropRef`, { isSignal: true }] }] } });
 
 const components = [
     OnemrvaFilePanelComponent,
@@ -757,8 +682,8 @@ const components = [
 ];
 
 class OnemrvaMatFileUploadModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaMatFileUploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaMatFileUploadModule, imports: [OnemrvaFilePanelComponent, OnemrvaMatFileUploadComponent, DndDirective,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaMatFileUploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaMatFileUploadModule, imports: [OnemrvaFilePanelComponent, OnemrvaMatFileUploadComponent, DndDirective,
             CommonModule,
             ReactiveFormsModule,
             MatButtonModule,
@@ -767,7 +692,7 @@ class OnemrvaMatFileUploadModule {
             TranslateModule,
             MatIconModule,
             MatInputModule], exports: [OnemrvaFilePanelComponent, OnemrvaMatFileUploadComponent, DndDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaMatFileUploadModule, providers: [OnemrvaMatFileUploadStore, OnemrvaMatFileUploadService], imports: [components,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaMatFileUploadModule, providers: [OnemrvaMatFileUploadStore, OnemrvaMatFileUploadService], imports: [components,
             CommonModule,
             ReactiveFormsModule,
             MatButtonModule,
@@ -777,7 +702,7 @@ class OnemrvaMatFileUploadModule {
             MatIconModule,
             MatInputModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaMatFileUploadModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaMatFileUploadModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],