@elementar-rt/components 0.6.57 → 0.7.0

package/fesm2022/elementar-rt-components-upload.mjs

@@ -6,16 +6,12 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 class UploadAreaComponent {
     _renderer = inject(Renderer2);
-    accept = input(...(ngDevMode ? [undefined, { debugName: "accept" }] : []));
-    allowHover = input(true, ...(ngDevMode ? [{ debugName: "allowHover", transform: booleanAttribute }] : [{
-            transform: booleanAttribute
-        }]));
-    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple", transform: booleanAttribute }] : [{
-            transform: booleanAttribute
-        }]));
+    accept = input(...(ngDevMode ? [undefined, { debugName: "accept" }] : /* istanbul ignore next */ []));
+    allowHover = input(true, { ...(ngDevMode ? { debugName: "allowHover" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     fileSelected = output();
-    isDropActive = signal(false, ...(ngDevMode ? [{ debugName: "isDropActive" }] : []));
-    isDropInvalid = signal(false, ...(ngDevMode ? [{ debugName: "isDropInvalid" }] : []));
+    isDropActive = signal(false, ...(ngDevMode ? [{ debugName: "isDropActive" }] : /* istanbul ignore next */ []));
+    isDropInvalid = signal(false, ...(ngDevMode ? [{ debugName: "isDropInvalid" }] : /* istanbul ignore next */ []));
     get api() {
         return {
             isDropActive: this.isDropActive()
@@ -59,7 +55,9 @@ class UploadAreaComponent {
         this.isDropActive.set(false);
         this.isDropInvalid.set(false);
         if (event.dataTransfer) {
-            const accept = this.accept().split(',');
+            // `accept` is optional; unlike handleDragEnter, this used to split it
+            // unconditionally, throwing on every drop when no accept was configured.
+            const accept = this.accept() ? this.accept().split(',') : ['*/*'];
             const files = Array.from(event.dataTransfer?.files).filter(file => this.isMimeTypeAllowed(file.type, accept));
             if (files.length === 0) {
                 return;
@@ -84,10 +82,10 @@ class UploadAreaComponent {
             return fileMimeType === allowedType;
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: UploadAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.25", type: UploadAreaComponent, isStandalone: true, selector: "emr-upload-area", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, allowHover: { classPropertyName: "allowHover", publicName: "allowHover", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileSelected: "fileSelected" }, host: { listeners: { "dragover": "handleDragOver($event)", "dragenter": "handleDragEnter($event)", "dragleave": "handleDragLeave($event)", "dragend": "handleDragEnd($event)", "drop": "handleDrop($event)" }, properties: { "class.is-drop-active": "isDropActive()", "class.is-drop-invalid": "isDropInvalid()", "class.is-allow-hover": "allowHover()" }, classAttribute: "emr-upload-area" }, exportAs: ["emrUploadArea"], ngImport: i0, template: "<div class=\"icon\">\n  <ng-content select=\"[emrUploadAreaIcon]\"/>\n</div>\n<div class=\"content\">\n  <ng-content/>\n  <div class=\"state\" [class.is-active]=\"!isDropActive() && !isDropInvalid()\">\n    <ng-content select=\"[emrUploadAreaMainState]\"/>\n  </div>\n  <div class=\"state\" [class.is-active]=\"isDropActive() && !isDropInvalid()\">\n    <ng-content select=\"[emrUploadAreaDropState]\"/>\n  </div>\n  <div class=\"state\" [class.is-active]=\"isDropInvalid()\">\n    <ng-content select=\"[emrUploadAreaInvalidState]\"/>\n  </div>\n</div>\n", styles: [":host{--emr-upload-area-bg: transparent;--emr-upload-area-padding: calc(var(--spacing, .25rem) * 10);--emr-upload-area-border: 1px solid var(--color-border);--emr-upload-area-border-radius: 1rem;--emr-upload-area-font-size: .875rem;--emr-upload-area-color: var(--color-neutral-600);--emr-upload-area-drop-active-border: 1px dashed var(--color-primary);--emr-upload-area-drop-active-color: var(--color-primary);--emr-upload-area-drop-active-bg: var(--color-primary-200);--emr-upload-area-drop-invalid-border: 1px dashed var(--color-red-500);--emr-upload-area-drop-invalid-color: var(--color-red-500);--emr-upload-area-drop-invalid-bg: var(--color-red-100);display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;color:var(--emr-upload-area-color);border-radius:var(--emr-upload-area-border-radius);border:var(--emr-upload-area-border);font-size:var(--emr-upload-area-font-size);background-color:var(--emr-upload-area-bg);padding:var(--emr-upload-area-padding)}:host.is-allow-hover:hover{cursor:pointer;border:var(--emr-upload-area-drop-active-border);color:var(--emr-upload-area-drop-active-color);background:var(--emr-upload-area-drop-active-bg)}:host.is-drop-active{border:var(--emr-upload-area-drop-active-border);color:var(--emr-upload-area-drop-active-color);background:var(--emr-upload-area-drop-active-bg)}:host.is-drop-invalid{border:var(--emr-upload-area-drop-invalid-border);color:var(--emr-upload-area-drop-invalid-color);background:var(--emr-upload-area-drop-invalid-bg)}:host .state{display:none}:host .state.is-active{display:block}:host .icon{margin-bottom:calc(var(--spacing, .25rem) * 2)}:host .icon:empty{display:none}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: UploadAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.22", type: UploadAreaComponent, isStandalone: true, selector: "emr-upload-area", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, allowHover: { classPropertyName: "allowHover", publicName: "allowHover", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileSelected: "fileSelected" }, host: { listeners: { "dragover": "handleDragOver($event)", "dragenter": "handleDragEnter($event)", "dragleave": "handleDragLeave($event)", "dragend": "handleDragEnd($event)", "drop": "handleDrop($event)" }, properties: { "class.is-drop-active": "isDropActive()", "class.is-drop-invalid": "isDropInvalid()", "class.is-allow-hover": "allowHover()" }, classAttribute: "emr-upload-area" }, exportAs: ["emrUploadArea"], ngImport: i0, template: "<div class=\"icon\">\n  <ng-content select=\"[emrUploadAreaIcon]\"/>\n</div>\n<div class=\"content\">\n  <ng-content/>\n  <div class=\"state\" [class.is-active]=\"!isDropActive() && !isDropInvalid()\">\n    <ng-content select=\"[emrUploadAreaMainState]\"/>\n  </div>\n  <div class=\"state\" [class.is-active]=\"isDropActive() && !isDropInvalid()\">\n    <ng-content select=\"[emrUploadAreaDropState]\"/>\n  </div>\n  <div class=\"state\" [class.is-active]=\"isDropInvalid()\">\n    <ng-content select=\"[emrUploadAreaInvalidState]\"/>\n  </div>\n</div>\n", styles: [":host{--emr-upload-area-bg: transparent;--emr-upload-area-padding: calc(var(--spacing, .25rem) * 10);--emr-upload-area-border: 1px solid var(--color-border);--emr-upload-area-border-radius: 1rem;--emr-upload-area-font-size: .875rem;--emr-upload-area-color: var(--color-neutral-600);--emr-upload-area-drop-active-border: 1px dashed var(--color-primary);--emr-upload-area-drop-active-color: var(--color-primary);--emr-upload-area-drop-active-bg: var(--color-primary-200);--emr-upload-area-drop-invalid-border: 1px dashed var(--color-red-500);--emr-upload-area-drop-invalid-color: var(--color-red-500);--emr-upload-area-drop-invalid-bg: var(--color-red-100);display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;color:var(--emr-upload-area-color);border-radius:var(--emr-upload-area-border-radius);border:var(--emr-upload-area-border);font-size:var(--emr-upload-area-font-size);background-color:var(--emr-upload-area-bg);padding:var(--emr-upload-area-padding)}:host.is-allow-hover:hover{cursor:pointer;border:var(--emr-upload-area-drop-active-border);color:var(--emr-upload-area-drop-active-color);background:var(--emr-upload-area-drop-active-bg)}:host.is-drop-active{border:var(--emr-upload-area-drop-active-border);color:var(--emr-upload-area-drop-active-color);background:var(--emr-upload-area-drop-active-bg)}:host.is-drop-invalid{border:var(--emr-upload-area-drop-invalid-border);color:var(--emr-upload-area-drop-invalid-color);background:var(--emr-upload-area-drop-invalid-bg)}:host .state{display:none}:host .state.is-active{display:block}:host .icon{margin-bottom:calc(var(--spacing, .25rem) * 2)}:host .icon:empty{display:none}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: UploadAreaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: UploadAreaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'emr-upload-area', exportAs: 'emrUploadArea', imports: [], host: {
                         'class': 'emr-upload-area',
@@ -99,77 +97,73 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         '(dragleave)': 'handleDragLeave($event)',
                         '(dragend)': 'handleDragEnd($event)',
                         '(drop)': 'handleDrop($event)',
-                    }, template: "<div class=\"icon\">\n  <ng-content select=\"[emrUploadAreaIcon]\"/>\n</div>\n<div class=\"content\">\n  <ng-content/>\n  <div class=\"state\" [class.is-active]=\"!isDropActive() && !isDropInvalid()\">\n    <ng-content select=\"[emrUploadAreaMainState]\"/>\n  </div>\n  <div class=\"state\" [class.is-active]=\"isDropActive() && !isDropInvalid()\">\n    <ng-content select=\"[emrUploadAreaDropState]\"/>\n  </div>\n  <div class=\"state\" [class.is-active]=\"isDropInvalid()\">\n    <ng-content select=\"[emrUploadAreaInvalidState]\"/>\n  </div>\n</div>\n", styles: [":host{--emr-upload-area-bg: transparent;--emr-upload-area-padding: calc(var(--spacing, .25rem) * 10);--emr-upload-area-border: 1px solid var(--color-border);--emr-upload-area-border-radius: 1rem;--emr-upload-area-font-size: .875rem;--emr-upload-area-color: var(--color-neutral-600);--emr-upload-area-drop-active-border: 1px dashed var(--color-primary);--emr-upload-area-drop-active-color: var(--color-primary);--emr-upload-area-drop-active-bg: var(--color-primary-200);--emr-upload-area-drop-invalid-border: 1px dashed var(--color-red-500);--emr-upload-area-drop-invalid-color: var(--color-red-500);--emr-upload-area-drop-invalid-bg: var(--color-red-100);display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;color:var(--emr-upload-area-color);border-radius:var(--emr-upload-area-border-radius);border:var(--emr-upload-area-border);font-size:var(--emr-upload-area-font-size);background-color:var(--emr-upload-area-bg);padding:var(--emr-upload-area-padding)}:host.is-allow-hover:hover{cursor:pointer;border:var(--emr-upload-area-drop-active-border);color:var(--emr-upload-area-drop-active-color);background:var(--emr-upload-area-drop-active-bg)}:host.is-drop-active{border:var(--emr-upload-area-drop-active-border);color:var(--emr-upload-area-drop-active-color);background:var(--emr-upload-area-drop-active-bg)}:host.is-drop-invalid{border:var(--emr-upload-area-drop-invalid-border);color:var(--emr-upload-area-drop-invalid-color);background:var(--emr-upload-area-drop-invalid-bg)}:host .state{display:none}:host .state.is-active{display:block}:host .icon{margin-bottom:calc(var(--spacing, .25rem) * 2)}:host .icon:empty{display:none}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
+                    }, template: "<div class=\"icon\">\n  <ng-content select=\"[emrUploadAreaIcon]\"/>\n</div>\n<div class=\"content\">\n  <ng-content/>\n  <div class=\"state\" [class.is-active]=\"!isDropActive() && !isDropInvalid()\">\n    <ng-content select=\"[emrUploadAreaMainState]\"/>\n  </div>\n  <div class=\"state\" [class.is-active]=\"isDropActive() && !isDropInvalid()\">\n    <ng-content select=\"[emrUploadAreaDropState]\"/>\n  </div>\n  <div class=\"state\" [class.is-active]=\"isDropInvalid()\">\n    <ng-content select=\"[emrUploadAreaInvalidState]\"/>\n  </div>\n</div>\n", styles: [":host{--emr-upload-area-bg: transparent;--emr-upload-area-padding: calc(var(--spacing, .25rem) * 10);--emr-upload-area-border: 1px solid var(--color-border);--emr-upload-area-border-radius: 1rem;--emr-upload-area-font-size: .875rem;--emr-upload-area-color: var(--color-neutral-600);--emr-upload-area-drop-active-border: 1px dashed var(--color-primary);--emr-upload-area-drop-active-color: var(--color-primary);--emr-upload-area-drop-active-bg: var(--color-primary-200);--emr-upload-area-drop-invalid-border: 1px dashed var(--color-red-500);--emr-upload-area-drop-invalid-color: var(--color-red-500);--emr-upload-area-drop-invalid-bg: var(--color-red-100);display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;color:var(--emr-upload-area-color);border-radius:var(--emr-upload-area-border-radius);border:var(--emr-upload-area-border);font-size:var(--emr-upload-area-font-size);background-color:var(--emr-upload-area-bg);padding:var(--emr-upload-area-padding)}:host.is-allow-hover:hover{cursor:pointer;border:var(--emr-upload-area-drop-active-border);color:var(--emr-upload-area-drop-active-color);background:var(--emr-upload-area-drop-active-bg)}:host.is-drop-active{border:var(--emr-upload-area-drop-active-border);color:var(--emr-upload-area-drop-active-color);background:var(--emr-upload-area-drop-active-bg)}:host.is-drop-invalid{border:var(--emr-upload-area-drop-invalid-border);color:var(--emr-upload-area-drop-invalid-color);background:var(--emr-upload-area-drop-invalid-bg)}:host .state{display:none}:host .state.is-active{display:block}:host .icon{margin-bottom:calc(var(--spacing, .25rem) * 2)}:host .icon:empty{display:none}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], allowHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowHover", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], fileSelected: [{ type: i0.Output, args: ["fileSelected"] }] } });
 
 class FileListComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FileListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: FileListComponent, isStandalone: true, selector: "emr-file-list", host: { classAttribute: "emr-file-list" }, exportAs: ["emrFileList"], ngImport: i0, template: "<ng-content/>\n", styles: [":host{--emr-file-list-gap: calc(var(--spacing, .25rem) * 3);display:flex;flex-direction:column;gap:var(--emr-file-list-gap)}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FileListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.22", type: FileListComponent, isStandalone: true, selector: "emr-file-list", host: { classAttribute: "emr-file-list" }, exportAs: ["emrFileList"], ngImport: i0, template: "<ng-content/>\n", styles: [":host{--emr-file-list-gap: calc(var(--spacing, .25rem) * 3);display:flex;flex-direction:column;gap:var(--emr-file-list-gap)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FileListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FileListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'emr-file-list', exportAs: 'emrFileList', host: {
                         'class': 'emr-file-list'
-                    }, template: "<ng-content/>\n", styles: [":host{--emr-file-list-gap: calc(var(--spacing, .25rem) * 3);display:flex;flex-direction:column;gap:var(--emr-file-list-gap)}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
+                    }, template: "<ng-content/>\n", styles: [":host{--emr-file-list-gap: calc(var(--spacing, .25rem) * 3);display:flex;flex-direction:column;gap:var(--emr-file-list-gap)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }] });
 
 class FileComponent {
-    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
-    size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
-    progress = input(0, ...(ngDevMode ? [{ debugName: "progress", transform: numberAttribute }] : [{
-            transform: numberAttribute
-        }]));
-    progressingMessage = input(...(ngDevMode ? [undefined, { debugName: "progressingMessage" }] : []));
-    errorMessage = input(...(ngDevMode ? [undefined, { debugName: "errorMessage" }] : []));
-    remainingTime = input(...(ngDevMode ? [undefined, { debugName: "remainingTime" }] : []));
-    state = input('uploading', ...(ngDevMode ? [{ debugName: "state" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: FileComponent, isStandalone: true, selector: "emr-file", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, progressingMessage: { classPropertyName: "progressingMessage", publicName: "progressingMessage", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, remainingTime: { classPropertyName: "remainingTime", publicName: "remainingTime", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.has-error": "state() === 'error'" }, classAttribute: "emr-file" }, exportAs: ["emrFile"], ngImport: i0, template: "<div class=\"content\">\n  <div class=\"flex items-center min-w-0\">\n    <div class=\"overflow-hidden overflow-ellipsis whitespace-nowrap grow name\">{{ name() }}</div>\n    <div class=\"controls\">\n      <ng-content select=\"emr-file-control,[emr-file-control]\"/>\n    </div>\n  </div>\n  @if (size() || (state() === 'uploading' && progress())) {\n    <div class=\"info\">\n      @if (size()) {\n        <span class=\"uppercase\">{{ size() }}</span>\n      }\n      @if (size() && progress()) {\n        ,\n      }\n      @if (progress()) {\n        {{ progress() }}%\n      }\n      @if (remainingTime()) {\n        {{ remainingTime() }}\n      }\n    </div>\n  }\n  @if (progress()) {\n    <div class=\"progress\">\n      <div class=\"progress-bar\" [style.width.%]=\"progress()\"></div>\n    </div>\n  }\n  @if (state() === 'error' && errorMessage()) {\n    <div class=\"error\">\n      {{ errorMessage() }}\n    </div>\n  }\n</div>\n", styles: [":host{--emr-file-padding: calc(var(--spacing, .25rem) * 4);--emr-file-border-radius: 1rem;--emr-file-bg: var(--color-surface-container);--emr-file-error-bg: var(--color-error-200);--emr-file-controls-gap: calc(var(--spacing, .25rem) * 1.5);--emr-file-progress-margin: calc(var(--spacing, .25rem) * 2) 0 0 0;--emr-file-progress-bg: var(--color-surface-container-highest);--emr-file-progress-height: var(--spacing, .25rem);--emr-file-progress-border-radius: .5rem;--emr-file-progress-bar-bg: var(--color-primary);--emr-file-control-color: var(--color-neutral-500);--emr-file-control-hover-color: var(--color-primary);--emr-file-control-font-size: 1.25rem;--emr-file-name-font-size: .875rem;--emr-file-info-font-size: .75rem;--emr-file-info-color: var(--color-neutral-600);--emr-file-error-font-size: .75rem;--emr-file-error-color: var(--color-error-500);display:flex;align-items:center;width:100%;overflow:hidden;text-overflow:ellipsis;padding:var(--emr-file-padding);border-radius:var(--emr-file-border-radius);background:var(--emr-file-bg)}:host .name{font-size:var(--emr-file-name-font-size)}:host .info{font-size:var(--emr-file-info-font-size);color:var(--emr-file-info-color)}:host .content{min-width:0;flex-grow:1}:host .controls{display:flex;align-items:center;gap:var(--emr-file-controls-gap)}:host .progress{background:var(--emr-file-progress-bg);height:var(--emr-file-progress-height);flex:none;border-radius:var(--emr-file-progress-border-radius);margin:var(--emr-file-progress-margin)}:host .progress-bar{background:var(--emr-file-progress-bar-bg);border-radius:var(--emr-file-progress-border-radius);height:100%}:host .error{font-size:var(--emr-file-error-font-size);color:var(--emr-file-error-color)}:host.has-error{background:var(--emr-file-error-bg)}:host-context(html.dark){--emr-file-error-color: oklch(80.8% .114 19.571);--emr-file-progress-bg: var(--color-neutral-500);--emr-file-control-hover-color: var(--color-neutral-300)}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
+    progress = input(0, { ...(ngDevMode ? { debugName: "progress" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    progressingMessage = input(...(ngDevMode ? [undefined, { debugName: "progressingMessage" }] : /* istanbul ignore next */ []));
+    errorMessage = input(...(ngDevMode ? [undefined, { debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+    remainingTime = input(...(ngDevMode ? [undefined, { debugName: "remainingTime" }] : /* istanbul ignore next */ []));
+    state = input('uploading', ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: FileComponent, isStandalone: true, selector: "emr-file", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, progressingMessage: { classPropertyName: "progressingMessage", publicName: "progressingMessage", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, remainingTime: { classPropertyName: "remainingTime", publicName: "remainingTime", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.has-error": "state() === 'error'" }, classAttribute: "emr-file" }, exportAs: ["emrFile"], ngImport: i0, template: "<div class=\"content\">\n  <div class=\"flex items-center min-w-0\">\n    <div class=\"overflow-hidden overflow-ellipsis whitespace-nowrap grow name\">{{ name() }}</div>\n    <div class=\"controls\">\n      <ng-content select=\"emr-file-control,[emr-file-control]\"/>\n    </div>\n  </div>\n  @if (size() || (state() === 'uploading' && progress())) {\n    <div class=\"info\">\n      @if (size()) {\n        <span class=\"uppercase\">{{ size() }}</span>\n      }\n      @if (size() && progress()) {\n        ,\n      }\n      @if (progress()) {\n        {{ progress() }}%\n      }\n      @if (remainingTime()) {\n        {{ remainingTime() }}\n      }\n    </div>\n  }\n  @if (progress()) {\n    <div class=\"progress\">\n      <div class=\"progress-bar\" [style.width.%]=\"progress()\"></div>\n    </div>\n  }\n  @if (state() === 'error' && errorMessage()) {\n    <div class=\"error\">\n      {{ errorMessage() }}\n    </div>\n  }\n</div>\n", styles: [":host{--emr-file-padding: calc(var(--spacing, .25rem) * 4);--emr-file-border-radius: 1rem;--emr-file-bg: var(--color-surface-container);--emr-file-error-bg: var(--color-error-200);--emr-file-controls-gap: calc(var(--spacing, .25rem) * 1.5);--emr-file-progress-margin: calc(var(--spacing, .25rem) * 2) 0 0 0;--emr-file-progress-bg: var(--color-surface-container-highest);--emr-file-progress-height: var(--spacing, .25rem);--emr-file-progress-border-radius: .5rem;--emr-file-progress-bar-bg: var(--color-primary);--emr-file-control-color: var(--color-neutral-500);--emr-file-control-hover-color: var(--color-primary);--emr-file-control-font-size: 1.25rem;--emr-file-name-font-size: .875rem;--emr-file-info-font-size: .75rem;--emr-file-info-color: var(--color-neutral-600);--emr-file-error-font-size: .75rem;--emr-file-error-color: var(--color-error-500);display:flex;align-items:center;width:100%;overflow:hidden;text-overflow:ellipsis;padding:var(--emr-file-padding);border-radius:var(--emr-file-border-radius);background:var(--emr-file-bg)}:host .name{font-size:var(--emr-file-name-font-size)}:host .info{font-size:var(--emr-file-info-font-size);color:var(--emr-file-info-color)}:host .content{min-width:0;flex-grow:1}:host .controls{display:flex;align-items:center;gap:var(--emr-file-controls-gap)}:host .progress{background:var(--emr-file-progress-bg);height:var(--emr-file-progress-height);flex:none;border-radius:var(--emr-file-progress-border-radius);margin:var(--emr-file-progress-margin)}:host .progress-bar{background:var(--emr-file-progress-bar-bg);border-radius:var(--emr-file-progress-border-radius);height:100%}:host .error{font-size:var(--emr-file-error-font-size);color:var(--emr-file-error-color)}:host.has-error{background:var(--emr-file-error-bg)}:host-context(html.dark){--emr-file-error-color: oklch(80.8% .114 19.571);--emr-file-progress-bg: var(--color-neutral-500);--emr-file-control-hover-color: var(--color-neutral-300)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FileComponent, decorators: [{
             type: Component,
             args: [{ selector: 'emr-file', exportAs: 'emrFile', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         'class': 'emr-file',
                         '[class.has-error]': "state() === 'error'"
-                    }, template: "<div class=\"content\">\n  <div class=\"flex items-center min-w-0\">\n    <div class=\"overflow-hidden overflow-ellipsis whitespace-nowrap grow name\">{{ name() }}</div>\n    <div class=\"controls\">\n      <ng-content select=\"emr-file-control,[emr-file-control]\"/>\n    </div>\n  </div>\n  @if (size() || (state() === 'uploading' && progress())) {\n    <div class=\"info\">\n      @if (size()) {\n        <span class=\"uppercase\">{{ size() }}</span>\n      }\n      @if (size() && progress()) {\n        ,\n      }\n      @if (progress()) {\n        {{ progress() }}%\n      }\n      @if (remainingTime()) {\n        {{ remainingTime() }}\n      }\n    </div>\n  }\n  @if (progress()) {\n    <div class=\"progress\">\n      <div class=\"progress-bar\" [style.width.%]=\"progress()\"></div>\n    </div>\n  }\n  @if (state() === 'error' && errorMessage()) {\n    <div class=\"error\">\n      {{ errorMessage() }}\n    </div>\n  }\n</div>\n", styles: [":host{--emr-file-padding: calc(var(--spacing, .25rem) * 4);--emr-file-border-radius: 1rem;--emr-file-bg: var(--color-surface-container);--emr-file-error-bg: var(--color-error-200);--emr-file-controls-gap: calc(var(--spacing, .25rem) * 1.5);--emr-file-progress-margin: calc(var(--spacing, .25rem) * 2) 0 0 0;--emr-file-progress-bg: var(--color-surface-container-highest);--emr-file-progress-height: var(--spacing, .25rem);--emr-file-progress-border-radius: .5rem;--emr-file-progress-bar-bg: var(--color-primary);--emr-file-control-color: var(--color-neutral-500);--emr-file-control-hover-color: var(--color-primary);--emr-file-control-font-size: 1.25rem;--emr-file-name-font-size: .875rem;--emr-file-info-font-size: .75rem;--emr-file-info-color: var(--color-neutral-600);--emr-file-error-font-size: .75rem;--emr-file-error-color: var(--color-error-500);display:flex;align-items:center;width:100%;overflow:hidden;text-overflow:ellipsis;padding:var(--emr-file-padding);border-radius:var(--emr-file-border-radius);background:var(--emr-file-bg)}:host .name{font-size:var(--emr-file-name-font-size)}:host .info{font-size:var(--emr-file-info-font-size);color:var(--emr-file-info-color)}:host .content{min-width:0;flex-grow:1}:host .controls{display:flex;align-items:center;gap:var(--emr-file-controls-gap)}:host .progress{background:var(--emr-file-progress-bg);height:var(--emr-file-progress-height);flex:none;border-radius:var(--emr-file-progress-border-radius);margin:var(--emr-file-progress-margin)}:host .progress-bar{background:var(--emr-file-progress-bar-bg);border-radius:var(--emr-file-progress-border-radius);height:100%}:host .error{font-size:var(--emr-file-error-font-size);color:var(--emr-file-error-color)}:host.has-error{background:var(--emr-file-error-bg)}:host-context(html.dark){--emr-file-error-color: oklch(80.8% .114 19.571);--emr-file-progress-bg: var(--color-neutral-500);--emr-file-control-hover-color: var(--color-neutral-300)}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
+                    }, template: "<div class=\"content\">\n  <div class=\"flex items-center min-w-0\">\n    <div class=\"overflow-hidden overflow-ellipsis whitespace-nowrap grow name\">{{ name() }}</div>\n    <div class=\"controls\">\n      <ng-content select=\"emr-file-control,[emr-file-control]\"/>\n    </div>\n  </div>\n  @if (size() || (state() === 'uploading' && progress())) {\n    <div class=\"info\">\n      @if (size()) {\n        <span class=\"uppercase\">{{ size() }}</span>\n      }\n      @if (size() && progress()) {\n        ,\n      }\n      @if (progress()) {\n        {{ progress() }}%\n      }\n      @if (remainingTime()) {\n        {{ remainingTime() }}\n      }\n    </div>\n  }\n  @if (progress()) {\n    <div class=\"progress\">\n      <div class=\"progress-bar\" [style.width.%]=\"progress()\"></div>\n    </div>\n  }\n  @if (state() === 'error' && errorMessage()) {\n    <div class=\"error\">\n      {{ errorMessage() }}\n    </div>\n  }\n</div>\n", styles: [":host{--emr-file-padding: calc(var(--spacing, .25rem) * 4);--emr-file-border-radius: 1rem;--emr-file-bg: var(--color-surface-container);--emr-file-error-bg: var(--color-error-200);--emr-file-controls-gap: calc(var(--spacing, .25rem) * 1.5);--emr-file-progress-margin: calc(var(--spacing, .25rem) * 2) 0 0 0;--emr-file-progress-bg: var(--color-surface-container-highest);--emr-file-progress-height: var(--spacing, .25rem);--emr-file-progress-border-radius: .5rem;--emr-file-progress-bar-bg: var(--color-primary);--emr-file-control-color: var(--color-neutral-500);--emr-file-control-hover-color: var(--color-primary);--emr-file-control-font-size: 1.25rem;--emr-file-name-font-size: .875rem;--emr-file-info-font-size: .75rem;--emr-file-info-color: var(--color-neutral-600);--emr-file-error-font-size: .75rem;--emr-file-error-color: var(--color-error-500);display:flex;align-items:center;width:100%;overflow:hidden;text-overflow:ellipsis;padding:var(--emr-file-padding);border-radius:var(--emr-file-border-radius);background:var(--emr-file-bg)}:host .name{font-size:var(--emr-file-name-font-size)}:host .info{font-size:var(--emr-file-info-font-size);color:var(--emr-file-info-color)}:host .content{min-width:0;flex-grow:1}:host .controls{display:flex;align-items:center;gap:var(--emr-file-controls-gap)}:host .progress{background:var(--emr-file-progress-bg);height:var(--emr-file-progress-height);flex:none;border-radius:var(--emr-file-progress-border-radius);margin:var(--emr-file-progress-margin)}:host .progress-bar{background:var(--emr-file-progress-bar-bg);border-radius:var(--emr-file-progress-border-radius);height:100%}:host .error{font-size:var(--emr-file-error-font-size);color:var(--emr-file-error-color)}:host.has-error{background:var(--emr-file-error-bg)}:host-context(html.dark){--emr-file-error-color: oklch(80.8% .114 19.571);--emr-file-progress-bg: var(--color-neutral-500);--emr-file-control-hover-color: var(--color-neutral-300)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }], progressingMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "progressingMessage", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], remainingTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "remainingTime", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }] } });
 
 class FileControlComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FileControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: FileControlComponent, isStandalone: true, selector: "emr-file-control,[emr-file-control]", host: { classAttribute: "emr-file-control" }, exportAs: ["emrFileControl"], ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{font-size:var(--emr-file-control-font-size);cursor:pointer;display:inline-flex;color:var(--emr-file-control-color)}:host:hover{color:var(--emr-file-control-hover-color)}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FileControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.22", type: FileControlComponent, isStandalone: true, selector: "emr-file-control,[emr-file-control]", host: { classAttribute: "emr-file-control" }, exportAs: ["emrFileControl"], ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{font-size:var(--emr-file-control-font-size);cursor:pointer;display:inline-flex;color:var(--emr-file-control-color)}:host:hover{color:var(--emr-file-control-hover-color)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FileControlComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FileControlComponent, decorators: [{
             type: Component,
             args: [{ selector: 'emr-file-control,[emr-file-control]', exportAs: 'emrFileControl', host: {
                         'class': 'emr-file-control'
-                    }, template: "<ng-content></ng-content>\n", styles: [":host{font-size:var(--emr-file-control-font-size);cursor:pointer;display:inline-flex;color:var(--emr-file-control-color)}:host:hover{color:var(--emr-file-control-hover-color)}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
+                    }, template: "<ng-content></ng-content>\n", styles: [":host{font-size:var(--emr-file-control-font-size);cursor:pointer;display:inline-flex;color:var(--emr-file-control-color)}:host:hover{color:var(--emr-file-control-hover-color)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }] });
 
 class FilesGridComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FilesGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: FilesGridComponent, isStandalone: true, selector: "emr-files-grid", host: { classAttribute: "emr-files-grid" }, exportAs: ["emrFilesGrid"], ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;flex-wrap:wrap;gap:calc(var(--spacing, .25rem) * 5)}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FilesGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.22", type: FilesGridComponent, isStandalone: true, selector: "emr-files-grid", host: { classAttribute: "emr-files-grid" }, exportAs: ["emrFilesGrid"], ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;flex-wrap:wrap;gap:calc(var(--spacing, .25rem) * 5)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FilesGridComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FilesGridComponent, decorators: [{
             type: Component,
             args: [{ selector: 'emr-files-grid', exportAs: 'emrFilesGrid', host: {
                         'class': 'emr-files-grid'
-                    }, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;flex-wrap:wrap;gap:calc(var(--spacing, .25rem) * 5)}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
+                    }, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;flex-wrap:wrap;gap:calc(var(--spacing, .25rem) * 5)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }] });
 
 class GridFileComponent {
-    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
-    size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
-    progress = input(0, ...(ngDevMode ? [{ debugName: "progress", transform: numberAttribute }] : [{
-            transform: numberAttribute
-        }]));
-    progressingMessage = input(...(ngDevMode ? [undefined, { debugName: "progressingMessage" }] : []));
-    errorMessage = input(...(ngDevMode ? [undefined, { debugName: "errorMessage" }] : []));
-    remainingTime = input(...(ngDevMode ? [undefined, { debugName: "remainingTime" }] : []));
-    state = input('uploading', ...(ngDevMode ? [{ debugName: "state" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: GridFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: GridFileComponent, isStandalone: true, selector: "emr-grid-file", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, progressingMessage: { classPropertyName: "progressingMessage", publicName: "progressingMessage", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, remainingTime: { classPropertyName: "remainingTime", publicName: "remainingTime", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.has-error": "state() === 'error'" }, classAttribute: "emr-grid-file" }, exportAs: ["emrGridFile"], ngImport: i0, template: "<div class=\"flex items-center gap-2.5\">\n  <div class=\"icon\">\n    <ng-content select=\"[emrFileIcon]\"/>\n  </div>\n  <div>\n    <div class=\"text-sm overflow-hidden text-ellipsis whitespace-nowrap max-w-[220px]\">{{ name() }}</div>\n    @if (size()) {\n      <div class=\"text-xs text-neutral-500 overflow-hidden text-ellipsis whitespace-nowrap max-w-[220px]\">{{ size() }}</div>\n    }\n  </div>\n</div>\n<div class=\"flex items-center gap-1\">\n  @if (state() === 'uploading') {\n    <emr-gauge class=\"size-10\" [value]=\"progress()\">\n      <emr-gauge-value class=\"text-2xs\">{{ progress() }}%</emr-gauge-value>\n    </emr-gauge>\n  }\n\n  <div class=\"controls\">\n    <ng-content select=\"[emrGridFileControl]\"/>\n  </div>\n</div>\n\n@if (state() === 'error' && errorMessage()) {\n  <div class=\"error\">\n    {{ errorMessage() }}\n  </div>\n}\n", styles: [":host{--emr-file-padding: calc(var(--spacing, .25rem) * 3) calc(var(--spacing, .25rem) * 2) calc(var(--spacing, .25rem) * 3) calc(var(--spacing, .25rem) * 3);--emr-file-gap: calc(var(--spacing, .25rem) * 4);--emr-file-border-radius: 1rem;--emr-file-bg: var(--color-surface-container);--emr-file-error-bg: var(--color-error-200);--emr-file-controls-gap: var(--spacing, .25rem);--emr-file-error-font-size: var(--text-2xs);--emr-file-error-color: var(--color-error-500);display:flex;min-width:240px;align-items:center;justify-content:space-between;position:relative;padding:var(--emr-file-padding);gap:var(--emr-file-gap);border-radius:var(--emr-file-border-radius);background:var(--emr-file-bg)}:host .icon{width:32px;max-height:40px}:host .icon:empty{display:none}:host .controls{display:flex;gap:var(--emr-file-controls-gap)}:host .controls:empty{display:none}:host .error{font-size:var(--emr-file-error-font-size);color:var(--emr-file-error-color);position:absolute;bottom:0;transform:translateY(100%);left:calc(var(--spacing, .25rem) * 2)}:host.has-error{background:var(--emr-file-error-bg)}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: GaugeValueComponent, selector: "emr-gauge-value", exportAs: ["emrGaugeValue"] }, { kind: "component", type: GaugeComponent, selector: "emr-gauge", inputs: ["value", "strokeWidth", "radius"], exportAs: ["emrGauge"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
+    progress = input(0, { ...(ngDevMode ? { debugName: "progress" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    progressingMessage = input(...(ngDevMode ? [undefined, { debugName: "progressingMessage" }] : /* istanbul ignore next */ []));
+    errorMessage = input(...(ngDevMode ? [undefined, { debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+    remainingTime = input(...(ngDevMode ? [undefined, { debugName: "remainingTime" }] : /* istanbul ignore next */ []));
+    state = input('uploading', ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: GridFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: GridFileComponent, isStandalone: true, selector: "emr-grid-file", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, progressingMessage: { classPropertyName: "progressingMessage", publicName: "progressingMessage", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, remainingTime: { classPropertyName: "remainingTime", publicName: "remainingTime", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.has-error": "state() === 'error'" }, classAttribute: "emr-grid-file" }, exportAs: ["emrGridFile"], ngImport: i0, template: "<div class=\"flex items-center gap-2.5\">\n  <div class=\"icon\">\n    <ng-content select=\"[emrFileIcon]\"/>\n  </div>\n  <div>\n    <div class=\"text-sm overflow-hidden text-ellipsis whitespace-nowrap max-w-[220px]\">{{ name() }}</div>\n    @if (size()) {\n      <div class=\"text-xs text-neutral-500 overflow-hidden text-ellipsis whitespace-nowrap max-w-[220px]\">{{ size() }}</div>\n    }\n  </div>\n</div>\n<div class=\"flex items-center gap-1\">\n  @if (state() === 'uploading') {\n    <emr-gauge class=\"size-10\" [value]=\"progress()\">\n      <emr-gauge-value class=\"text-2xs\">{{ progress() }}%</emr-gauge-value>\n    </emr-gauge>\n  }\n\n  <div class=\"controls\">\n    <ng-content select=\"[emrGridFileControl]\"/>\n  </div>\n</div>\n\n@if (state() === 'error' && errorMessage()) {\n  <div class=\"error\">\n    {{ errorMessage() }}\n  </div>\n}\n", styles: [":host{--emr-file-padding: calc(var(--spacing, .25rem) * 3) calc(var(--spacing, .25rem) * 2) calc(var(--spacing, .25rem) * 3) calc(var(--spacing, .25rem) * 3);--emr-file-gap: calc(var(--spacing, .25rem) * 4);--emr-file-border-radius: 1rem;--emr-file-bg: var(--color-surface-container);--emr-file-error-bg: var(--color-error-200);--emr-file-controls-gap: var(--spacing, .25rem);--emr-file-error-font-size: var(--text-2xs);--emr-file-error-color: var(--color-error-500);display:flex;min-width:240px;align-items:center;justify-content:space-between;position:relative;padding:var(--emr-file-padding);gap:var(--emr-file-gap);border-radius:var(--emr-file-border-radius);background:var(--emr-file-bg)}:host .icon:empty{display:none}:host .icon{width:32px;max-height:40px}:host .controls{display:flex;gap:var(--emr-file-controls-gap)}:host .controls:empty{display:none}:host .error{font-size:var(--emr-file-error-font-size);color:var(--emr-file-error-color);position:absolute;bottom:0;transform:translateY(100%);left:calc(var(--spacing, .25rem) * 2)}:host.has-error{background:var(--emr-file-error-bg)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: GaugeValueComponent, selector: "emr-gauge-value", exportAs: ["emrGaugeValue"] }, { kind: "component", type: GaugeComponent, selector: "emr-gauge", inputs: ["value", "strokeWidth", "radius"], exportAs: ["emrGauge"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: GridFileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: GridFileComponent, decorators: [{
             type: Component,
             args: [{ selector: 'emr-grid-file', exportAs: 'emrGridFile', imports: [
                         GaugeValueComponent,
@@ -177,44 +171,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         'class': 'emr-grid-file',
                         '[class.has-error]': "state() === 'error'"
-                    }, template: "<div class=\"flex items-center gap-2.5\">\n  <div class=\"icon\">\n    <ng-content select=\"[emrFileIcon]\"/>\n  </div>\n  <div>\n    <div class=\"text-sm overflow-hidden text-ellipsis whitespace-nowrap max-w-[220px]\">{{ name() }}</div>\n    @if (size()) {\n      <div class=\"text-xs text-neutral-500 overflow-hidden text-ellipsis whitespace-nowrap max-w-[220px]\">{{ size() }}</div>\n    }\n  </div>\n</div>\n<div class=\"flex items-center gap-1\">\n  @if (state() === 'uploading') {\n    <emr-gauge class=\"size-10\" [value]=\"progress()\">\n      <emr-gauge-value class=\"text-2xs\">{{ progress() }}%</emr-gauge-value>\n    </emr-gauge>\n  }\n\n  <div class=\"controls\">\n    <ng-content select=\"[emrGridFileControl]\"/>\n  </div>\n</div>\n\n@if (state() === 'error' && errorMessage()) {\n  <div class=\"error\">\n    {{ errorMessage() }}\n  </div>\n}\n", styles: [":host{--emr-file-padding: calc(var(--spacing, .25rem) * 3) calc(var(--spacing, .25rem) * 2) calc(var(--spacing, .25rem) * 3) calc(var(--spacing, .25rem) * 3);--emr-file-gap: calc(var(--spacing, .25rem) * 4);--emr-file-border-radius: 1rem;--emr-file-bg: var(--color-surface-container);--emr-file-error-bg: var(--color-error-200);--emr-file-controls-gap: var(--spacing, .25rem);--emr-file-error-font-size: var(--text-2xs);--emr-file-error-color: var(--color-error-500);display:flex;min-width:240px;align-items:center;justify-content:space-between;position:relative;padding:var(--emr-file-padding);gap:var(--emr-file-gap);border-radius:var(--emr-file-border-radius);background:var(--emr-file-bg)}:host .icon{width:32px;max-height:40px}:host .icon:empty{display:none}:host .controls{display:flex;gap:var(--emr-file-controls-gap)}:host .controls:empty{display:none}:host .error{font-size:var(--emr-file-error-font-size);color:var(--emr-file-error-color);position:absolute;bottom:0;transform:translateY(100%);left:calc(var(--spacing, .25rem) * 2)}:host.has-error{background:var(--emr-file-error-bg)}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
+                    }, template: "<div class=\"flex items-center gap-2.5\">\n  <div class=\"icon\">\n    <ng-content select=\"[emrFileIcon]\"/>\n  </div>\n  <div>\n    <div class=\"text-sm overflow-hidden text-ellipsis whitespace-nowrap max-w-[220px]\">{{ name() }}</div>\n    @if (size()) {\n      <div class=\"text-xs text-neutral-500 overflow-hidden text-ellipsis whitespace-nowrap max-w-[220px]\">{{ size() }}</div>\n    }\n  </div>\n</div>\n<div class=\"flex items-center gap-1\">\n  @if (state() === 'uploading') {\n    <emr-gauge class=\"size-10\" [value]=\"progress()\">\n      <emr-gauge-value class=\"text-2xs\">{{ progress() }}%</emr-gauge-value>\n    </emr-gauge>\n  }\n\n  <div class=\"controls\">\n    <ng-content select=\"[emrGridFileControl]\"/>\n  </div>\n</div>\n\n@if (state() === 'error' && errorMessage()) {\n  <div class=\"error\">\n    {{ errorMessage() }}\n  </div>\n}\n", styles: [":host{--emr-file-padding: calc(var(--spacing, .25rem) * 3) calc(var(--spacing, .25rem) * 2) calc(var(--spacing, .25rem) * 3) calc(var(--spacing, .25rem) * 3);--emr-file-gap: calc(var(--spacing, .25rem) * 4);--emr-file-border-radius: 1rem;--emr-file-bg: var(--color-surface-container);--emr-file-error-bg: var(--color-error-200);--emr-file-controls-gap: var(--spacing, .25rem);--emr-file-error-font-size: var(--text-2xs);--emr-file-error-color: var(--color-error-500);display:flex;min-width:240px;align-items:center;justify-content:space-between;position:relative;padding:var(--emr-file-padding);gap:var(--emr-file-gap);border-radius:var(--emr-file-border-radius);background:var(--emr-file-bg)}:host .icon:empty{display:none}:host .icon{width:32px;max-height:40px}:host .controls{display:flex;gap:var(--emr-file-controls-gap)}:host .controls:empty{display:none}:host .error{font-size:var(--emr-file-error-font-size);color:var(--emr-file-error-color);position:absolute;bottom:0;transform:translateY(100%);left:calc(var(--spacing, .25rem) * 2)}:host.has-error{background:var(--emr-file-error-bg)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }], progressingMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "progressingMessage", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], remainingTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "remainingTime", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }] } });
 
 class UploadContainerComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: UploadContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: UploadContainerComponent, isStandalone: true, selector: "emr-upload-container", ngImport: i0, template: "<ng-content select=\"emr-upload-area\"/>\n<div class=\"flex items-center justify-between mt-2 hints\">\n  <ng-content select=\"emr-upload-allowed-types\"/>\n  <ng-content select=\"emr-upload-max-file-size\"/>\n</div>\n", styles: [":host{display:block}:host .hints:empty{display:none}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: UploadContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.22", type: UploadContainerComponent, isStandalone: true, selector: "emr-upload-container", ngImport: i0, template: "<ng-content select=\"emr-upload-area\"/>\n<div class=\"flex items-center justify-between mt-2 hints\">\n  <ng-content select=\"emr-upload-allowed-types\"/>\n  <ng-content select=\"emr-upload-max-file-size\"/>\n</div>\n", styles: [":host{display:block}:host .hints:empty{display:none}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: UploadContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: UploadContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'emr-upload-container', imports: [], template: "<ng-content select=\"emr-upload-area\"/>\n<div class=\"flex items-center justify-between mt-2 hints\">\n  <ng-content select=\"emr-upload-allowed-types\"/>\n  <ng-content select=\"emr-upload-max-file-size\"/>\n</div>\n", styles: [":host{display:block}:host .hints:empty{display:none}\n"] }]
         }] });
 
 class UploadMaxFileSizeComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: UploadMaxFileSizeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: UploadMaxFileSizeComponent, isStandalone: true, selector: "emr-upload-max-file-size", ngImport: i0, template: "<ng-content/>\n", styles: [":host{display:block;font-size:.75rem}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: UploadMaxFileSizeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.22", type: UploadMaxFileSizeComponent, isStandalone: true, selector: "emr-upload-max-file-size", ngImport: i0, template: "<ng-content/>\n", styles: [":host{display:block;font-size:.75rem}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: UploadMaxFileSizeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: UploadMaxFileSizeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'emr-upload-max-file-size', imports: [], template: "<ng-content/>\n", styles: [":host{display:block;font-size:.75rem}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'emr-upload-max-file-size', imports: [], template: "<ng-content/>\n", styles: [":host{display:block;font-size:.75rem}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }] });
 
 class UploadAllowedTypesComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: UploadAllowedTypesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: UploadAllowedTypesComponent, isStandalone: true, selector: "emr-upload-allowed-types", ngImport: i0, template: "<ng-content/>\n", styles: [":host{display:block;font-size:.75rem}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: UploadAllowedTypesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.22", type: UploadAllowedTypesComponent, isStandalone: true, selector: "emr-upload-allowed-types", ngImport: i0, template: "<ng-content/>\n", styles: [":host{display:block;font-size:.75rem}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: UploadAllowedTypesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: UploadAllowedTypesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'emr-upload-allowed-types', imports: [], template: "<ng-content/>\n", styles: [":host{display:block;font-size:.75rem}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'emr-upload-allowed-types', imports: [], template: "<ng-content/>\n", styles: [":host{display:block;font-size:.75rem}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }] });
 
 class UploadTriggerDirective {
     _elementRef = inject(ElementRef);
     _renderer = inject(Renderer2);
     _destroyRef = inject(DestroyRef);
-    accept = input(...(ngDevMode ? [undefined, { debugName: "accept" }] : []));
-    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple", transform: booleanAttribute }] : [{
-            transform: booleanAttribute
-        }]));
+    accept = input(...(ngDevMode ? [undefined, { debugName: "accept" }] : /* istanbul ignore next */ []));
+    multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     fileSelected = output();
     _handleClick() {
         const element = this._renderer.createElement('input');
@@ -247,10 +239,10 @@ class UploadTriggerDirective {
         });
         element.click();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: UploadTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.25", type: UploadTriggerDirective, isStandalone: true, selector: "[emrUploadTrigger]", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileSelected: "fileSelected" }, host: { listeners: { "click": "_handleClick()" } }, exportAs: ["emrUploadTrigger"], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: UploadTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.22", type: UploadTriggerDirective, isStandalone: true, selector: "[emrUploadTrigger]", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileSelected: "fileSelected" }, host: { listeners: { "click": "_handleClick()" } }, exportAs: ["emrUploadTrigger"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: UploadTriggerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: UploadTriggerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[emrUploadTrigger]',
@@ -263,10 +255,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         }], propDecorators: { accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], fileSelected: [{ type: i0.Output, args: ["fileSelected"] }] } });
 
 class UploadAreaIconDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: UploadAreaIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: UploadAreaIconDirective, isStandalone: true, selector: "[emrUploadAreaIcon]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: UploadAreaIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: UploadAreaIconDirective, isStandalone: true, selector: "[emrUploadAreaIcon]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: UploadAreaIconDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: UploadAreaIconDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[emrUploadAreaIcon]'
@@ -275,10 +267,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 
 class UploadAreaMainStateDirective {
     templateRef = inject(TemplateRef, { optional: true });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: UploadAreaMainStateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: UploadAreaMainStateDirective, isStandalone: true, selector: "[emrUploadAreaMainState]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: UploadAreaMainStateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: UploadAreaMainStateDirective, isStandalone: true, selector: "[emrUploadAreaMainState]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: UploadAreaMainStateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: UploadAreaMainStateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[emrUploadAreaMainState]'
@@ -287,10 +279,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 
 class UploadAreaDropStateDirective {
     templateRef = inject(TemplateRef, { optional: true });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: UploadAreaDropStateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: UploadAreaDropStateDirective, isStandalone: true, selector: "[emrUploadAreaDropState]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: UploadAreaDropStateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: UploadAreaDropStateDirective, isStandalone: true, selector: "[emrUploadAreaDropState]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: UploadAreaDropStateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: UploadAreaDropStateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[emrUploadAreaDropState]'
@@ -299,10 +291,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 
 class UploadAreaInvalidStateDirective {
     templateRef = inject(TemplateRef, { optional: true });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: UploadAreaInvalidStateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: UploadAreaInvalidStateDirective, isStandalone: true, selector: "[emrUploadAreaInvalidState]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: UploadAreaInvalidStateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: UploadAreaInvalidStateDirective, isStandalone: true, selector: "[emrUploadAreaInvalidState]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: UploadAreaInvalidStateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: UploadAreaInvalidStateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[emrUploadAreaInvalidState]'
@@ -310,10 +302,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         }] });
 
 class FileIconDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FileIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: FileIconDirective, isStandalone: true, selector: "[emrFileIcon]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FileIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: FileIconDirective, isStandalone: true, selector: "[emrFileIcon]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FileIconDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FileIconDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[emrFileIcon]'
@@ -322,10 +314,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 
 class GridFileControlDirective {
     constructor() { }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: GridFileControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: GridFileControlDirective, isStandalone: true, selector: "[emrGridFileControl]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: GridFileControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: GridFileControlDirective, isStandalone: true, selector: "[emrGridFileControl]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: GridFileControlDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: GridFileControlDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[emrGridFileControl]'