@nexterajs/ui 0.0.2 → 0.1.0

package/fesm2022/nexterajs-ui-file-uploader.mjs

@@ -1,6 +1,10 @@
 import * as i0 from '@angular/core';
-import { input, output, viewChild, signal, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
-import { NXE_VALIDATION_TARGET } from '@nexterajs/ui/core';
+import { input, output, viewChild, inject, signal, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component, booleanAttribute, Injector, DestroyRef, computed, afterNextRender } from '@angular/core';
+import { NxeMessageService, NXE_VALIDATION_TARGET, NxeFormControlBase, nxeFormatFileSize } from '@nexterajs/ui/core';
+import { HttpClient, HttpEventType, HttpErrorResponse } from '@angular/common/http';
+import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
+import { Subscription, throwError } from 'rxjs';
 
 /**
  * `nxe-file-uploader` — drop-in replacement for DevExtreme `dx-file-uploader`.
@@ -20,9 +24,11 @@ class NxeFileUploaderComponent {
     ...(ngDevMode ? [{ debugName: "allowCanceling" }] : /* istanbul ignore next */ []));
     accept = input('*', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
-    labelText = input('or Drop here', /* @ts-ignore */
+    /** Text beside the button; the active language's "or Drop here" when unset. */
+    labelText = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "labelText" }] : /* istanbul ignore next */ []));
-    selectButtonText = input('Select File', /* @ts-ignore */
+    /** The button's text; the active language's "Select File" when unset. */
+    selectButtonText = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectButtonText" }] : /* istanbul ignore next */ []));
     /** Accepted for parity; only `useForm` is used (no server upload by the widget). It also
      *  gates the cancel button, which dx omits in `useForm` mode. */
@@ -38,6 +44,8 @@ class NxeFileUploaderComponent {
     change = output();
     fileInput = viewChild.required('fileInput', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "fileInput" }] : /* istanbul ignore next */ []));
+    /** The library's runtime-switchable messages. */
+    messages = inject(NxeMessageService);
     file = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "file" }] : /* istanbul ignore next */ []));
     dragOver = signal(false, /* @ts-ignore */
@@ -89,17 +97,17 @@ class NxeFileUploaderComponent {
     }
     formatSize(bytes) {
         if (bytes < 1024) {
-            return `${bytes} b`;
+            return this.messages.t('uploader.sizeB', bytes);
         }
         if (bytes < 1024 * 1024) {
-            return `${(bytes / 1024).toFixed(1)} Kb`;
+            return this.messages.t('uploader.sizeKb', (bytes / 1024).toFixed(1));
         }
-        return `${(bytes / 1024 / 1024).toFixed(1)} Mb`;
+        return this.messages.t('uploader.sizeMb', (bytes / 1024 / 1024).toFixed(1));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeFileUploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeFileUploaderComponent, isStandalone: true, selector: "nxe-file-uploader", inputs: { allowCanceling: { classPropertyName: "allowCanceling", publicName: "allowCanceling", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, labelText: { classPropertyName: "labelText", publicName: "labelText", isSignal: true, isRequired: false, transformFunction: null }, selectButtonText: { classPropertyName: "selectButtonText", publicName: "selectButtonText", isSignal: true, isRequired: false, transformFunction: null }, uploadMode: { classPropertyName: "uploadMode", publicName: "uploadMode", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, validationGroupInput: { classPropertyName: "validationGroupInput", publicName: "validationGroup", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave()", "drop": "onDrop($event)" }, properties: { "class.nxe-fileuploader-empty": "!file()", "class.nxe-fileuploader-dragover": "dragOver()", "class.nxe-fileuploader-invalid": "!!validationError()", "class.nxe-invalid": "!!validationError()", "class.nxe-focused": "focused()" }, classAttribute: "nxe-widget nxe-file-uploader" }, providers: [
             { provide: NXE_VALIDATION_TARGET, useExisting: forwardRef(() => NxeFileUploaderComponent) },
-        ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"nxe-fileuploader-wrapper\">\r\n    <div class=\"nxe-fileuploader-container\">\r\n        <div class=\"nxe-fileuploader-content\">\r\n            <div class=\"nxe-fileuploader-input-wrapper\">\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"nxe-fileuploader-button nxe-fileuploader-upload-button\"\r\n                    (focus)=\"focused.set(true)\"\r\n                    (blur)=\"focused.set(false)\"\r\n                    (click)=\"browse()\">\r\n                    {{ selectButtonText() }}\r\n                </button>\r\n                <div class=\"nxe-fileuploader-input-container\">\r\n                    <input\r\n                        #fileInput\r\n                        class=\"nxe-fileuploader-input\"\r\n                        type=\"file\"\r\n                        [accept]=\"accept()\"\r\n                        [multiple]=\"multiple()\"\r\n                        (focus)=\"focused.set(true)\"\r\n                        (blur)=\"focused.set(false)\"\r\n                        (change)=\"onNativeChange($event)\" />\r\n                    <span class=\"nxe-fileuploader-input-label\">{{ labelText() }}</span>\r\n                </div>\r\n            </div>\r\n\r\n            @if (file(); as f) {\r\n                <div class=\"nxe-fileuploader-files-container\">\r\n                    <div class=\"nxe-fileuploader-file-container\">\r\n                        <div class=\"nxe-fileuploader-file\">\r\n                            <div class=\"nxe-fileuploader-file-info\">\r\n                                <span class=\"nxe-fileuploader-file-name\">{{ f.name }}</span>\r\n                                <span class=\"nxe-fileuploader-file-size\">{{ formatSize(f.size) }}</span>\r\n                            </div>\r\n                        </div>\r\n                        <!-- dx renders no cancel button at all in useForm mode: _getCancelButton\r\n                             returns null before it reads allowCanceling\r\n                             (m_file_uploader.js:535-537). -->\r\n                        @if (allowCanceling() && uploadMode() !== 'useForm') {\r\n                            <button\r\n                                type=\"button\"\r\n                                class=\"nxe-fileuploader-cancel-button\"\r\n                                title=\"Cancel\"\r\n                                (click)=\"cancel()\">\r\n                                &times;\r\n                            </button>\r\n                        }\r\n                    </div>\r\n                </div>\r\n            }\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n@if (validationError(); as err) {\r\n    <div class=\"nxe-fileuploader-error\">{{ err }}</div>\r\n}\r\n\r\n<ng-content />\r\n", styles: ["nxe-file-uploader{display:block;position:relative}nxe-file-uploader .nxe-fileuploader-wrapper{padding-inline:0;padding-bottom:0}nxe-file-uploader.nxe-invalid .nxe-fileuploader-button,nxe-file-uploader.nxe-fileuploader-invalid .nxe-fileuploader-button{border-color:#d9534f}nxe-file-uploader .nxe-fileuploader-input-wrapper{display:flex;align-items:center;gap:8px;padding:4px 0;border:0}nxe-file-uploader .nxe-fileuploader-button{border:1px solid #ddd;border-radius:4px;background:#fff;color:#333;padding:6px 12px;font-size:var(--nxe-ui-font-size);line-height:1;cursor:pointer}nxe-file-uploader .nxe-fileuploader-button:hover{background:#f5f5f5}nxe-file-uploader .nxe-fileuploader-input{display:none}nxe-file-uploader .nxe-fileuploader-input-label{color:#999}nxe-file-uploader .nxe-fileuploader-files-container{margin-top:6px;padding-top:0}nxe-file-uploader .nxe-fileuploader-file{display:block}nxe-file-uploader .nxe-fileuploader-file-container{display:flex;align-items:center;gap:8px}nxe-file-uploader .nxe-fileuploader-file-name{font-weight:500;margin-right:6px}nxe-file-uploader .nxe-fileuploader-file-size{color:#999;font-size:10px}nxe-file-uploader .nxe-fileuploader-cancel-button{border:none;background:transparent;cursor:pointer;font-size:18px;line-height:1;color:#999}nxe-file-uploader .nxe-fileuploader-cancel-button:hover{color:#333}nxe-file-uploader.nxe-fileuploader-dragover .nxe-fileuploader-wrapper{outline:2px dashed #30374c;outline-offset:2px}nxe-file-uploader .nxe-fileuploader-error{color:#d9534f;font-size:12px;margin-top:4px;line-height:1.4}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"nxe-fileuploader-wrapper\">\r\n    <div class=\"nxe-fileuploader-container\">\r\n        <div class=\"nxe-fileuploader-content\">\r\n            <div class=\"nxe-fileuploader-input-wrapper\">\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"nxe-fileuploader-button nxe-fileuploader-upload-button\"\r\n                    (focus)=\"focused.set(true)\"\r\n                    (blur)=\"focused.set(false)\"\r\n                    (click)=\"browse()\">\r\n                    {{ selectButtonText() ?? messages.t('uploader.selectFile') }}\r\n                </button>\r\n                <div class=\"nxe-fileuploader-input-container\">\r\n                    <input\r\n                        #fileInput\r\n                        class=\"nxe-fileuploader-input\"\r\n                        type=\"file\"\r\n                        [accept]=\"accept()\"\r\n                        [multiple]=\"multiple()\"\r\n                        (focus)=\"focused.set(true)\"\r\n                        (blur)=\"focused.set(false)\"\r\n                        (change)=\"onNativeChange($event)\" />\r\n                    <span class=\"nxe-fileuploader-input-label\">{{ labelText() ?? messages.t('uploader.dropHere') }}</span>\r\n                </div>\r\n            </div>\r\n\r\n            @if (file(); as f) {\r\n                <div class=\"nxe-fileuploader-files-container\">\r\n                    <div class=\"nxe-fileuploader-file-container\">\r\n                        <div class=\"nxe-fileuploader-file\">\r\n                            <div class=\"nxe-fileuploader-file-info\">\r\n                                <span class=\"nxe-fileuploader-file-name\">{{ f.name }}</span>\r\n                                <span class=\"nxe-fileuploader-file-size\">{{ formatSize(f.size) }}</span>\r\n                            </div>\r\n                        </div>\r\n                        <!-- dx renders no cancel button at all in useForm mode: _getCancelButton\r\n                             returns null before it reads allowCanceling\r\n                             (m_file_uploader.js:535-537). -->\r\n                        @if (allowCanceling() && uploadMode() !== 'useForm') {\r\n                            <button\r\n                                type=\"button\"\r\n                                class=\"nxe-fileuploader-cancel-button\"\r\n                                [attr.title]=\"messages.t('uploader.cancel')\"\r\n                                (click)=\"cancel()\">\r\n                                &times;\r\n                            </button>\r\n                        }\r\n                    </div>\r\n                </div>\r\n            }\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n@if (validationError(); as err) {\r\n    <div class=\"nxe-fileuploader-error\">{{ err }}</div>\r\n}\r\n\r\n<ng-content />\r\n", styles: ["nxe-file-uploader{display:block;position:relative}nxe-file-uploader .nxe-fileuploader-wrapper{padding-inline:0;padding-bottom:0}nxe-file-uploader.nxe-invalid .nxe-fileuploader-button,nxe-file-uploader.nxe-fileuploader-invalid .nxe-fileuploader-button{border-color:var(--nxe-ui-invalid, #d9534f)}nxe-file-uploader .nxe-fileuploader-input-wrapper{display:flex;align-items:center;gap:8px;padding:4px 0;border:0}nxe-file-uploader .nxe-fileuploader-button{border:1px solid var(--nxe-ui-border, #ddd);border-radius:4px;background:var(--nxe-ui-surface, #fff);color:var(--nxe-ui-text, #333);padding:6px 12px;font-size:var(--nxe-ui-font-size);line-height:1;cursor:pointer}nxe-file-uploader .nxe-fileuploader-button:hover{background:var(--nxe-ui-surface-alt, #f5f5f5)}nxe-file-uploader .nxe-fileuploader-input{display:none}nxe-file-uploader .nxe-fileuploader-input-label{color:var(--nxe-ui-text-muted, #999)}nxe-file-uploader .nxe-fileuploader-files-container{margin-top:6px;padding-top:0}nxe-file-uploader .nxe-fileuploader-file{display:block}nxe-file-uploader .nxe-fileuploader-file-container{display:flex;align-items:center;gap:8px}nxe-file-uploader .nxe-fileuploader-file-name{font-weight:500;margin-right:6px}nxe-file-uploader .nxe-fileuploader-file-size{color:var(--nxe-ui-text-muted, #999);font-size:10px}nxe-file-uploader .nxe-fileuploader-cancel-button{border:none;background:transparent;cursor:pointer;font-size:18px;line-height:1;color:var(--nxe-ui-text-muted, #999)}nxe-file-uploader .nxe-fileuploader-cancel-button:hover{color:var(--nxe-ui-text, #333)}nxe-file-uploader.nxe-fileuploader-dragover .nxe-fileuploader-wrapper{outline:2px dashed var(--nxe-ui-ink-strong, #30374c);outline-offset:2px}nxe-file-uploader .nxe-fileuploader-error{color:var(--nxe-ui-invalid, #d9534f);font-size:12px;margin-top:4px;line-height:1.4}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeFileUploaderComponent, decorators: [{
             type: Component,
@@ -115,14 +123,568 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                         '(drop)': 'onDrop($event)',
                     }, providers: [
                         { provide: NXE_VALIDATION_TARGET, useExisting: forwardRef(() => NxeFileUploaderComponent) },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"nxe-fileuploader-wrapper\">\r\n    <div class=\"nxe-fileuploader-container\">\r\n        <div class=\"nxe-fileuploader-content\">\r\n            <div class=\"nxe-fileuploader-input-wrapper\">\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"nxe-fileuploader-button nxe-fileuploader-upload-button\"\r\n                    (focus)=\"focused.set(true)\"\r\n                    (blur)=\"focused.set(false)\"\r\n                    (click)=\"browse()\">\r\n                    {{ selectButtonText() }}\r\n                </button>\r\n                <div class=\"nxe-fileuploader-input-container\">\r\n                    <input\r\n                        #fileInput\r\n                        class=\"nxe-fileuploader-input\"\r\n                        type=\"file\"\r\n                        [accept]=\"accept()\"\r\n                        [multiple]=\"multiple()\"\r\n                        (focus)=\"focused.set(true)\"\r\n                        (blur)=\"focused.set(false)\"\r\n                        (change)=\"onNativeChange($event)\" />\r\n                    <span class=\"nxe-fileuploader-input-label\">{{ labelText() }}</span>\r\n                </div>\r\n            </div>\r\n\r\n            @if (file(); as f) {\r\n                <div class=\"nxe-fileuploader-files-container\">\r\n                    <div class=\"nxe-fileuploader-file-container\">\r\n                        <div class=\"nxe-fileuploader-file\">\r\n                            <div class=\"nxe-fileuploader-file-info\">\r\n                                <span class=\"nxe-fileuploader-file-name\">{{ f.name }}</span>\r\n                                <span class=\"nxe-fileuploader-file-size\">{{ formatSize(f.size) }}</span>\r\n                            </div>\r\n                        </div>\r\n                        <!-- dx renders no cancel button at all in useForm mode: _getCancelButton\r\n                             returns null before it reads allowCanceling\r\n                             (m_file_uploader.js:535-537). -->\r\n                        @if (allowCanceling() && uploadMode() !== 'useForm') {\r\n                            <button\r\n                                type=\"button\"\r\n                                class=\"nxe-fileuploader-cancel-button\"\r\n                                title=\"Cancel\"\r\n                                (click)=\"cancel()\">\r\n                                &times;\r\n                            </button>\r\n                        }\r\n                    </div>\r\n                </div>\r\n            }\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n@if (validationError(); as err) {\r\n    <div class=\"nxe-fileuploader-error\">{{ err }}</div>\r\n}\r\n\r\n<ng-content />\r\n", styles: ["nxe-file-uploader{display:block;position:relative}nxe-file-uploader .nxe-fileuploader-wrapper{padding-inline:0;padding-bottom:0}nxe-file-uploader.nxe-invalid .nxe-fileuploader-button,nxe-file-uploader.nxe-fileuploader-invalid .nxe-fileuploader-button{border-color:#d9534f}nxe-file-uploader .nxe-fileuploader-input-wrapper{display:flex;align-items:center;gap:8px;padding:4px 0;border:0}nxe-file-uploader .nxe-fileuploader-button{border:1px solid #ddd;border-radius:4px;background:#fff;color:#333;padding:6px 12px;font-size:var(--nxe-ui-font-size);line-height:1;cursor:pointer}nxe-file-uploader .nxe-fileuploader-button:hover{background:#f5f5f5}nxe-file-uploader .nxe-fileuploader-input{display:none}nxe-file-uploader .nxe-fileuploader-input-label{color:#999}nxe-file-uploader .nxe-fileuploader-files-container{margin-top:6px;padding-top:0}nxe-file-uploader .nxe-fileuploader-file{display:block}nxe-file-uploader .nxe-fileuploader-file-container{display:flex;align-items:center;gap:8px}nxe-file-uploader .nxe-fileuploader-file-name{font-weight:500;margin-right:6px}nxe-file-uploader .nxe-fileuploader-file-size{color:#999;font-size:10px}nxe-file-uploader .nxe-fileuploader-cancel-button{border:none;background:transparent;cursor:pointer;font-size:18px;line-height:1;color:#999}nxe-file-uploader .nxe-fileuploader-cancel-button:hover{color:#333}nxe-file-uploader.nxe-fileuploader-dragover .nxe-fileuploader-wrapper{outline:2px dashed #30374c;outline-offset:2px}nxe-file-uploader .nxe-fileuploader-error{color:#d9534f;font-size:12px;margin-top:4px;line-height:1.4}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"nxe-fileuploader-wrapper\">\r\n    <div class=\"nxe-fileuploader-container\">\r\n        <div class=\"nxe-fileuploader-content\">\r\n            <div class=\"nxe-fileuploader-input-wrapper\">\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"nxe-fileuploader-button nxe-fileuploader-upload-button\"\r\n                    (focus)=\"focused.set(true)\"\r\n                    (blur)=\"focused.set(false)\"\r\n                    (click)=\"browse()\">\r\n                    {{ selectButtonText() ?? messages.t('uploader.selectFile') }}\r\n                </button>\r\n                <div class=\"nxe-fileuploader-input-container\">\r\n                    <input\r\n                        #fileInput\r\n                        class=\"nxe-fileuploader-input\"\r\n                        type=\"file\"\r\n                        [accept]=\"accept()\"\r\n                        [multiple]=\"multiple()\"\r\n                        (focus)=\"focused.set(true)\"\r\n                        (blur)=\"focused.set(false)\"\r\n                        (change)=\"onNativeChange($event)\" />\r\n                    <span class=\"nxe-fileuploader-input-label\">{{ labelText() ?? messages.t('uploader.dropHere') }}</span>\r\n                </div>\r\n            </div>\r\n\r\n            @if (file(); as f) {\r\n                <div class=\"nxe-fileuploader-files-container\">\r\n                    <div class=\"nxe-fileuploader-file-container\">\r\n                        <div class=\"nxe-fileuploader-file\">\r\n                            <div class=\"nxe-fileuploader-file-info\">\r\n                                <span class=\"nxe-fileuploader-file-name\">{{ f.name }}</span>\r\n                                <span class=\"nxe-fileuploader-file-size\">{{ formatSize(f.size) }}</span>\r\n                            </div>\r\n                        </div>\r\n                        <!-- dx renders no cancel button at all in useForm mode: _getCancelButton\r\n                             returns null before it reads allowCanceling\r\n                             (m_file_uploader.js:535-537). -->\r\n                        @if (allowCanceling() && uploadMode() !== 'useForm') {\r\n                            <button\r\n                                type=\"button\"\r\n                                class=\"nxe-fileuploader-cancel-button\"\r\n                                [attr.title]=\"messages.t('uploader.cancel')\"\r\n                                (click)=\"cancel()\">\r\n                                &times;\r\n                            </button>\r\n                        }\r\n                    </div>\r\n                </div>\r\n            }\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n@if (validationError(); as err) {\r\n    <div class=\"nxe-fileuploader-error\">{{ err }}</div>\r\n}\r\n\r\n<ng-content />\r\n", styles: ["nxe-file-uploader{display:block;position:relative}nxe-file-uploader .nxe-fileuploader-wrapper{padding-inline:0;padding-bottom:0}nxe-file-uploader.nxe-invalid .nxe-fileuploader-button,nxe-file-uploader.nxe-fileuploader-invalid .nxe-fileuploader-button{border-color:var(--nxe-ui-invalid, #d9534f)}nxe-file-uploader .nxe-fileuploader-input-wrapper{display:flex;align-items:center;gap:8px;padding:4px 0;border:0}nxe-file-uploader .nxe-fileuploader-button{border:1px solid var(--nxe-ui-border, #ddd);border-radius:4px;background:var(--nxe-ui-surface, #fff);color:var(--nxe-ui-text, #333);padding:6px 12px;font-size:var(--nxe-ui-font-size);line-height:1;cursor:pointer}nxe-file-uploader .nxe-fileuploader-button:hover{background:var(--nxe-ui-surface-alt, #f5f5f5)}nxe-file-uploader .nxe-fileuploader-input{display:none}nxe-file-uploader .nxe-fileuploader-input-label{color:var(--nxe-ui-text-muted, #999)}nxe-file-uploader .nxe-fileuploader-files-container{margin-top:6px;padding-top:0}nxe-file-uploader .nxe-fileuploader-file{display:block}nxe-file-uploader .nxe-fileuploader-file-container{display:flex;align-items:center;gap:8px}nxe-file-uploader .nxe-fileuploader-file-name{font-weight:500;margin-right:6px}nxe-file-uploader .nxe-fileuploader-file-size{color:var(--nxe-ui-text-muted, #999);font-size:10px}nxe-file-uploader .nxe-fileuploader-cancel-button{border:none;background:transparent;cursor:pointer;font-size:18px;line-height:1;color:var(--nxe-ui-text-muted, #999)}nxe-file-uploader .nxe-fileuploader-cancel-button:hover{color:var(--nxe-ui-text, #333)}nxe-file-uploader.nxe-fileuploader-dragover .nxe-fileuploader-wrapper{outline:2px dashed var(--nxe-ui-ink-strong, #30374c);outline-offset:2px}nxe-file-uploader .nxe-fileuploader-error{color:var(--nxe-ui-invalid, #d9534f);font-size:12px;margin-top:4px;line-height:1.4}\n"] }]
         }], propDecorators: { allowCanceling: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowCanceling", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], labelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelText", required: false }] }], selectButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectButtonText", required: false }] }], uploadMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadMode", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], validationGroupInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationGroup", required: false }] }], change: [{ type: i0.Output, args: ["change"] }], fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }] } });
 
+/** Whether `file` matches an `accept` list: `.pdf`, `application/pdf`, `image/*`, comma separated. Empty or `*` accepts all. */
+function nxeFileAccepted(file, accept) {
+    const tokens = accept
+        .split(',')
+        .map((token) => token.trim().toLowerCase())
+        .filter((token) => token !== '');
+    if (tokens.length === 0 || tokens.includes('*') || tokens.includes('*/*')) {
+        return true;
+    }
+    const name = file.name.toLowerCase();
+    const type = file.type.toLowerCase();
+    return tokens.some((token) => {
+        if (token.startsWith('.')) {
+            return name.endsWith(token);
+        }
+        if (token.endsWith('/*')) {
+            return type.startsWith(token.slice(0, -1));
+        }
+        return type === token;
+    });
+}
+
+function numberOrUndefined(value) {
+    if (value === undefined || value === null || value === '') {
+        return undefined;
+    }
+    const n = Number(value);
+    return Number.isFinite(n) ? n : undefined;
+}
+/** The server's reply to an upload, read as `{ serverId | id, url }`. */
+function defaultResult(body) {
+    if (typeof body !== 'object' || body === null) {
+        return {};
+    }
+    const record = body;
+    const id = record['serverId'] ?? record['id'];
+    return {
+        serverId: id === undefined || id === null ? undefined : String(id),
+        url: typeof record['url'] === 'string' ? record['url'] : undefined,
+    };
+}
+let nextFileId = 0;
+/**
+ * `nxe-file-input` is a file field for forms: the value is the list of files, `NxeFileDescriptor[]`, and it
+ * works with `formControlName`, `[formControl]`, `ngModel` and `nxe-form-field`.
+ *
+ * ```html
+ * <nxe-form-field label="Invoice and supporting documents">
+ *     <nxe-file-input
+ *         formControlName="attachments"
+ *         accept=".pdf,image/*"
+ *         [maxSize]="5 * 1024 * 1024"
+ *         [maxFiles]="3"
+ *         uploadUrl="/api/files/upload" />
+ * </nxe-form-field>
+ * ```
+ *
+ * **Value.** A file the user picks or drops becomes `{ id, name, size, type, status, progress, file }`. With no
+ * upload configured it stays `pending` and the form reads the `File` from the value (to put in a `FormData`
+ * itself). With one, it is uploaded as soon as it is added (`autoUpload`, default) and moves through
+ * `uploading` to `uploaded` with the server's `serverId` and `url`, or to `error`. A descriptor that came from the
+ * server (`writeValue` with `status: 'uploaded'`) shows as an existing attachment, a link when it has a `url`.
+ * The form is told at each status change; the progress bar between them is live without churning the form.
+ *
+ * **Validation.** The control is invalid, with these error keys (which `nxe-form-field` words in the active
+ * language), until the problem is removed:
+ *
+ * | key | when | error value |
+ * |---|---|---|
+ * | `fileType` | a file does not match `accept` | `{ accept, files }` |
+ * | `fileSize` | a file is over `maxSize` bytes | `{ maxSize, files }` |
+ * | `maxFiles` | more files than `maxFiles` (1 when not `multiple`) | `{ maxFiles, actual }` |
+ * | `uploading` | an upload is running, or a file is waiting for one | `{ count }` |
+ * | `uploadFailed` | an upload failed or was cancelled | `{ files }` |
+ *
+ * A file that breaks a rule is kept in the list, marked, so the user sees which one and can remove it; it is never
+ * uploaded. `required` needs a file in the list.
+ *
+ * **Uploading.** `uploadUrl` posts a `FormData` (field `uploadField`) with `HttpClient` and `reportProgress`, so the
+ * app needs `provideHttpClient()` (and its interceptors apply). `uploadFn` is the same job in your hands:
+ * `(file, { signal }) => Observable` of `HttpEvent`s, `{ progress, serverId?, url? }` or percentages, completing
+ * on success. Cancel and remove unsubscribe, and abort `signal`. `uploadResult` maps the response body to
+ * `{ serverId, url }` (default: `serverId` or `id`, and `url`).
+ */
+class NxeFileInputComponent extends NxeFormControlBase {
+    /** Accepted files, as in `<input accept>`: `.pdf`, `application/pdf`, `image/*`, comma separated. Empty accepts all. */
+    accept = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
+    /** Largest file, in bytes. */
+    maxSize = input(undefined, { ...(ngDevMode ? { debugName: "maxSize" } : /* istanbul ignore next */ {}), transform: numberOrUndefined });
+    /** Most files the control may hold. */
+    maxFiles = input(undefined, { ...(ngDevMode ? { debugName: "maxFiles" } : /* istanbul ignore next */ {}), transform: numberOrUndefined });
+    /** More than one file. When off, choosing a file replaces the current one. */
+    multiple = input(true, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Uploads a file; see {@link NxeUploadFn}. Wins over `uploadUrl`. */
+    uploadFn = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "uploadFn" }] : /* istanbul ignore next */ []));
+    /** Where to POST each file, with `HttpClient`. */
+    uploadUrl = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "uploadUrl" }] : /* istanbul ignore next */ []));
+    /** Name of the form field the file is sent as. */
+    uploadField = input('file', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "uploadField" }] : /* istanbul ignore next */ []));
+    /** Headers for the `uploadUrl` request. */
+    uploadHeaders = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "uploadHeaders" }] : /* istanbul ignore next */ []));
+    /** Send cookies with the `uploadUrl` request. */
+    withCredentials = input(false, { ...(ngDevMode ? { debugName: "withCredentials" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Reads `{ serverId, url }` from the response body. */
+    uploadResult = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "uploadResult" }] : /* istanbul ignore next */ []));
+    /** Start uploading as soon as a file is added. Off, call {@link upload}. */
+    autoUpload = input(true, { ...(ngDevMode ? { debugName: "autoUpload" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** The button's text; the active language's "Select files" when unset. */
+    selectButtonText = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectButtonText" }] : /* istanbul ignore next */ []));
+    /** Text beside the button; the active language's "or drop files here" when unset. */
+    labelText = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelText" }] : /* istanbul ignore next */ []));
+    /** Show the accepted types, size and count under the button. */
+    showHints = input(true, { ...(ngDevMode ? { debugName: "showHints" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Files were added, with their descriptors. */
+    filesAdded = output();
+    /** A file was removed (or replaced). Delete it from the server here, if it was stored. */
+    fileRemoved = output();
+    /** An upload finished. */
+    fileUploaded = output();
+    /** An upload failed or was cancelled. */
+    fileFailed = output();
+    picker = viewChild.required('picker', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "picker" }] : /* istanbul ignore next */ []));
+    http = inject(HttpClient, { optional: true });
+    injector = inject(Injector);
+    destroyRef = inject(DestroyRef);
+    running = new Map();
+    results = new Map();
+    validatorChange = null;
+    announceToggle = false;
+    dragOver = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragOver" }] : /* istanbul ignore next */ []));
+    announcement = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []));
+    /** The files in the control. */
+    files = computed(() => this.value() ?? [], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "files" }] : /* istanbul ignore next */ []));
+    /** An upload is configured. */
+    uploads = computed(() => !!this.uploadFn() || !!this.uploadUrl(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "uploads" }] : /* istanbul ignore next */ []));
+    /** Most files the control accepts: `maxFiles`, or one when not `multiple`. */
+    limit = computed(() => (this.multiple() ? (this.maxFiles() ?? Infinity) : 1), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "limit" }] : /* istanbul ignore next */ []));
+    canAdd = computed(() => !this.disabled() && !this.readOnly(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canAdd" }] : /* istanbul ignore next */ []));
+    rows = computed(() => this.files().map((file, index) => {
+        const issue = this.issueOf(file, index);
+        const failed = !issue && file.status === 'error';
+        return {
+            file,
+            issue,
+            sizeText: nxeFormatFileSize(file.size, this.nxeMessages),
+            statusText: this.statusText(file, issue?.message ?? null),
+            failed,
+            canRetry: failed && !!file.file && this.uploads(),
+        };
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    hints = computed(() => {
+        const hints = [];
+        const accept = this.accept().trim();
+        if (accept && accept !== '*') {
+            hints.push(this.nxeMessages.t('uploader.acceptHint', accept.split(',').map((t) => t.trim()).join(', ')));
+        }
+        const size = this.maxSize();
+        if (size !== undefined) {
+            hints.push(this.nxeMessages.t('uploader.maxSizeHint', nxeFormatFileSize(size, this.nxeMessages)));
+        }
+        const limit = this.limit();
+        if (this.multiple() && Number.isFinite(limit)) {
+            hints.push(this.nxeMessages.t('uploader.maxFilesHint', limit));
+        }
+        return hints;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hints" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        // The rules are inputs, so a change to one re-runs the control's validators.
+        toObservable(computed(() => [this.accept(), this.maxSize(), this.limit(), this.uploads(), this.autoUpload()].join('|')))
+            .pipe(takeUntilDestroyed())
+            .subscribe(() => this.validatorChange?.());
+        this.destroyRef.onDestroy(() => this.running.forEach((run) => this.stop(run)));
+    }
+    // --- Validator -------------------------------------------------------------------------
+    validate(control) {
+        const files = control.value ?? [];
+        if (files.length === 0) {
+            return null;
+        }
+        const errors = {};
+        const wrongType = files.filter((f) => !nxeFileAccepted(f, this.accept())).map((f) => f.name);
+        if (wrongType.length) {
+            errors['fileType'] = { accept: this.accept(), files: wrongType };
+        }
+        const maxSize = this.maxSize();
+        const tooBig = maxSize === undefined ? [] : files.filter((f) => f.size > maxSize).map((f) => f.name);
+        if (maxSize !== undefined && tooBig.length) {
+            errors['fileSize'] = { maxSize, files: tooBig };
+        }
+        if (files.length > this.limit()) {
+            errors['maxFiles'] = { maxFiles: this.limit(), actual: files.length };
+        }
+        const unfinished = files.filter((f, i) => f.status === 'uploading' || (f.status === 'pending' && this.uploads() && !this.issueOf(f, i))).length;
+        if (unfinished) {
+            errors['uploading'] = { count: unfinished };
+        }
+        const failed = files.filter((f) => f.status === 'error').map((f) => f.name);
+        if (failed.length) {
+            errors['uploadFailed'] = { files: failed };
+        }
+        return Object.keys(errors).length ? errors : null;
+    }
+    registerOnValidatorChange(fn) {
+        this.validatorChange = fn;
+    }
+    // --- Public API ------------------------------------------------------------------------
+    /** Opens the browser's file picker. */
+    open() {
+        if (this.canAdd()) {
+            this.picker().nativeElement.click();
+        }
+    }
+    /** Adds files as if the user had chosen them. */
+    addFiles(list, event = null) {
+        if (!this.canAdd() || list.length === 0) {
+            return;
+        }
+        const added = (this.multiple() ? list : list.slice(0, 1)).map((file) => this.describe(file));
+        // Not multiple: the new file replaces the old one, and anything the old one was doing stops.
+        const replaced = this.multiple() ? [] : this.files();
+        replaced.forEach((f) => this.stopById(f.id));
+        this.commitValue([...(this.multiple() ? this.files() : []), ...added], event);
+        replaced.forEach((f) => this.fileRemoved.emit(f));
+        this.afterAdd(added);
+    }
+    /** Removes a file, cancelling its upload if it is running. */
+    remove(id) {
+        const index = this.files().findIndex((f) => f.id === id);
+        if (index < 0 || !this.canAdd()) {
+            return;
+        }
+        const removed = this.files()[index];
+        this.stopById(id);
+        this.results.delete(id);
+        this.commitValue(this.files().filter((f) => f.id !== id));
+        this.fileRemoved.emit(removed);
+        this.say(this.nxeMessages.t('uploader.announceRemoved', removed.name));
+        this.markAsTouched();
+        this.focusAfterRemove(index);
+        // A file that was over the limit may fit now.
+        this.startEligible();
+    }
+    /** Stops a running upload. The file stays, as an error, so it can be retried or removed. */
+    cancel(id) {
+        const file = this.files().find((f) => f.id === id);
+        if (!file || file.status !== 'uploading') {
+            return;
+        }
+        this.stopById(id);
+        this.fail(id, this.nxeMessages.t('uploader.cancelled'));
+    }
+    /** Uploads a failed or cancelled file again. */
+    retry(id) {
+        const index = this.files().findIndex((f) => f.id === id);
+        const file = this.files()[index];
+        if (!file || file.status !== 'error' || !file.file || !this.uploads() || this.issueOf(file, index)) {
+            return;
+        }
+        this.patch(new Map([[id, { status: 'pending', progress: 0, error: undefined }]]), true);
+        this.begin([id]);
+    }
+    /** Uploads every file that is waiting, for `autoUpload` off. */
+    upload() {
+        this.startEligible(true);
+    }
+    // --- Template handlers -----------------------------------------------------------------
+    onPicked(event) {
+        const input = event.target;
+        this.addFiles(Array.from(input.files ?? []), event);
+        // Choosing the same file again must fire `change` again.
+        input.value = '';
+    }
+    onDragOver(event) {
+        if (!this.canAdd() || !Array.from(event.dataTransfer?.types ?? []).includes('Files')) {
+            return;
+        }
+        event.preventDefault();
+        if (event.dataTransfer) {
+            event.dataTransfer.dropEffect = 'copy';
+        }
+        this.dragOver.set(true);
+    }
+    onDragLeave(event) {
+        const next = event.relatedTarget;
+        if (!next || !this.elementRef.nativeElement.contains(next)) {
+            this.dragOver.set(false);
+        }
+    }
+    onDrop(event) {
+        if (!this.canAdd()) {
+            return;
+        }
+        event.preventDefault();
+        this.dragOver.set(false);
+        this.addFiles(Array.from(event.dataTransfer?.files ?? []), event);
+    }
+    onZoneFocusOut(event) {
+        const next = event.relatedTarget;
+        if (!next || !this.elementRef.nativeElement.contains(next)) {
+            this.markAsTouched();
+        }
+    }
+    progressLabel(file) {
+        return this.nxeMessages.t('uploader.uploadingFile', file.name);
+    }
+    round(value) {
+        return Math.round(value);
+    }
+    t(key, ...args) {
+        return this.nxeMessages.t(key, ...args);
+    }
+    // --- Rules -----------------------------------------------------------------------------
+    /** Why `file` at `index` cannot be kept; checked in the order type, size, count. */
+    issueOf(file, index) {
+        const messages = this.nxeMessages;
+        if (!nxeFileAccepted(file, this.accept())) {
+            return { kind: 'fileType', message: messages.t('uploader.rejectType', file.name) };
+        }
+        const maxSize = this.maxSize();
+        if (maxSize !== undefined && file.size > maxSize) {
+            return { kind: 'fileSize', message: messages.t('uploader.rejectSize', file.name, nxeFormatFileSize(maxSize, messages)) };
+        }
+        if (index >= this.limit()) {
+            return { kind: 'maxFiles', message: messages.t('uploader.rejectCount', file.name, this.limit()) };
+        }
+        return null;
+    }
+    statusText(file, issue) {
+        if (issue) {
+            return issue;
+        }
+        switch (file.status) {
+            case 'uploading':
+                return this.nxeMessages.t('uploader.statusUploading', Math.round(file.progress));
+            case 'uploaded':
+                return this.nxeMessages.t('uploader.statusUploaded');
+            case 'error':
+                return file.error || this.nxeMessages.t('uploader.statusFailed');
+            default:
+                return this.uploads() ? this.nxeMessages.t('uploader.statusPending') : '';
+        }
+    }
+    // --- Adding and uploading --------------------------------------------------------------
+    describe(file) {
+        return {
+            id: `nxe-file-${++nextFileId}`,
+            name: file.name,
+            size: file.size,
+            type: file.type,
+            status: 'pending',
+            progress: 0,
+            file,
+        };
+    }
+    afterAdd(added) {
+        this.filesAdded.emit(added);
+        this.say(this.nxeMessages.t('uploader.announceAdded', added.map((f) => f.name).join(', ')));
+        this.markAsTouched();
+        this.startEligible();
+    }
+    /** Starts every pending file that breaks no rule, when uploads are on (`force` ignores `autoUpload`). */
+    startEligible(force = false) {
+        if ((!force && !this.autoUpload()) || !this.uploads()) {
+            return;
+        }
+        const ids = this.files()
+            .filter((f, i) => f.status === 'pending' && !!f.file && !this.issueOf(f, i))
+            .map((f) => f.id);
+        if (ids.length) {
+            this.begin(ids);
+        }
+    }
+    /** Marks `ids` as uploading in one change, then starts each request. */
+    begin(ids) {
+        this.patch(new Map(ids.map((id) => [id, { status: 'uploading', progress: 0, error: undefined }])), true);
+        for (const id of ids) {
+            const descriptor = this.files().find((f) => f.id === id);
+            if (!descriptor?.file) {
+                continue;
+            }
+            const abort = new AbortController();
+            const subscription = new Subscription();
+            this.running.set(id, { abort, subscription });
+            subscription.add(this.request(descriptor, abort.signal).subscribe({
+                next: (event) => this.onEvent(id, event),
+                error: (error) => {
+                    this.running.delete(id);
+                    this.fail(id, this.messageOf(error));
+                },
+                complete: () => {
+                    this.running.delete(id);
+                    this.succeed(id);
+                },
+            }));
+        }
+    }
+    request(descriptor, signal) {
+        const file = descriptor.file;
+        const fn = this.uploadFn();
+        if (fn) {
+            return fn(file, { signal, descriptor });
+        }
+        const url = this.uploadUrl();
+        if (!this.http) {
+            return throwError(() => new Error('nxe-file-input needs provideHttpClient() to upload to an uploadUrl.'));
+        }
+        const body = new FormData();
+        body.append(this.uploadField(), file, file.name);
+        return this.http.post(url, body, {
+            reportProgress: true,
+            observe: 'events',
+            headers: this.uploadHeaders(),
+            withCredentials: this.withCredentials(),
+        });
+    }
+    onEvent(id, event) {
+        let progress;
+        if (typeof event === 'number') {
+            progress = event;
+        }
+        else if ('type' in event) {
+            if (event.type === HttpEventType.UploadProgress && event.total) {
+                progress = (event.loaded / event.total) * 100;
+            }
+            else if (event.type === HttpEventType.Response) {
+                this.results.set(id, (this.uploadResult() ?? defaultResult)(event.body));
+                progress = 100;
+            }
+        }
+        else {
+            progress = event.progress;
+            if (event.serverId !== undefined || event.url !== undefined) {
+                this.results.set(id, { serverId: event.serverId, url: event.url });
+            }
+        }
+        if (progress !== undefined) {
+            // Live, but not worth a valueChanges per tick: the form hears about the status changes.
+            this.patch(new Map([[id, { progress: Math.min(100, Math.max(0, progress)) }]]), false);
+        }
+    }
+    succeed(id) {
+        const current = this.files().find((f) => f.id === id);
+        if (!current || current.status !== 'uploading') {
+            return;
+        }
+        const result = this.results.get(id);
+        this.results.delete(id);
+        this.patch(new Map([[id, { status: 'uploaded', progress: 100, error: undefined, serverId: result?.serverId, url: result?.url }]]), true);
+        this.fileUploaded.emit(this.files().find((f) => f.id === id));
+    }
+    fail(id, message) {
+        const current = this.files().find((f) => f.id === id);
+        if (!current || (current.status !== 'uploading' && current.status !== 'pending')) {
+            return;
+        }
+        this.results.delete(id);
+        this.patch(new Map([[id, { status: 'error', error: message }]]), true);
+        const failed = this.files().find((f) => f.id === id);
+        this.say(`${failed.name}: ${message}`);
+        this.fileFailed.emit(failed);
+    }
+    messageOf(error) {
+        if (error instanceof HttpErrorResponse) {
+            const own = error.error?.message;
+            return typeof own === 'string' && own ? own : this.nxeMessages.t('uploader.uploadFailed');
+        }
+        if (error instanceof Error && error.message) {
+            return error.message;
+        }
+        return typeof error === 'string' && error ? error : this.nxeMessages.t('uploader.uploadFailed');
+    }
+    stopById(id) {
+        const run = this.running.get(id);
+        if (run) {
+            this.stop(run);
+            this.running.delete(id);
+        }
+    }
+    stop(run) {
+        run.abort.abort();
+        run.subscription.unsubscribe();
+    }
+    /** Applies changes to descriptors; `notify` tells the form, otherwise only the component's own value moves. */
+    patch(changes, notify) {
+        const next = this.files().map((f) => (changes.has(f.id) ? { ...f, ...changes.get(f.id) } : f));
+        if (notify) {
+            this.commitValue(next);
+        }
+        else {
+            this.value.set(next);
+        }
+    }
+    // --- Announcements and focus -----------------------------------------------------------
+    say(text) {
+        this.announceToggle = !this.announceToggle;
+        // The trailing no-break space makes a repeat of the same message a different string.
+        this.announcement.set(text + (this.announceToggle ? ' ' : ''));
+    }
+    /** After a removal the focused button is gone: move to the neighbouring file, or to the picker button. */
+    focusAfterRemove(index) {
+        afterNextRender(() => {
+            const host = this.elementRef.nativeElement;
+            const rows = Array.from(host.querySelectorAll('.nxe-fileinput-file'));
+            const target = rows[Math.min(index, rows.length - 1)]?.querySelector('button') ??
+                host.querySelector('.nxe-fileinput-button');
+            target?.focus();
+        }, { injector: this.injector });
+    }
+    // --- NxeFormControlBase ----------------------------------------------------------------
+    writeValue(value) {
+        // A new value from the form replaces the list: nothing from the old one should keep running.
+        this.running.forEach((run) => this.stop(run));
+        this.running.clear();
+        this.value.set(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeFileInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeFileInputComponent, isStandalone: true, selector: "nxe-file-input", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, uploadFn: { classPropertyName: "uploadFn", publicName: "uploadFn", isSignal: true, isRequired: false, transformFunction: null }, uploadUrl: { classPropertyName: "uploadUrl", publicName: "uploadUrl", isSignal: true, isRequired: false, transformFunction: null }, uploadField: { classPropertyName: "uploadField", publicName: "uploadField", isSignal: true, isRequired: false, transformFunction: null }, uploadHeaders: { classPropertyName: "uploadHeaders", publicName: "uploadHeaders", isSignal: true, isRequired: false, transformFunction: null }, withCredentials: { classPropertyName: "withCredentials", publicName: "withCredentials", isSignal: true, isRequired: false, transformFunction: null }, uploadResult: { classPropertyName: "uploadResult", publicName: "uploadResult", isSignal: true, isRequired: false, transformFunction: null }, autoUpload: { classPropertyName: "autoUpload", publicName: "autoUpload", isSignal: true, isRequired: false, transformFunction: null }, selectButtonText: { classPropertyName: "selectButtonText", publicName: "selectButtonText", isSignal: true, isRequired: false, transformFunction: null }, labelText: { classPropertyName: "labelText", publicName: "labelText", isSignal: true, isRequired: false, transformFunction: null }, showHints: { classPropertyName: "showHints", publicName: "showHints", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesAdded: "filesAdded", fileRemoved: "fileRemoved", fileUploaded: "fileUploaded", fileFailed: "fileFailed" }, host: { properties: { "class.nxe-fileinput-dragover": "dragOver()", "class.nxe-fileinput-has-files": "rows().length > 0", "class.nxe-invalid": "invalidState()" }, classAttribute: "nxe-widget nxe-file-input" }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NxeFileInputComponent), multi: true },
+            { provide: NG_VALIDATORS, useExisting: forwardRef(() => NxeFileInputComponent), multi: true },
+            { provide: NXE_VALIDATION_TARGET, useExisting: forwardRef(() => NxeFileInputComponent) },
+        ], viewQueries: [{ propertyName: "picker", first: true, predicate: ["picker"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (canAdd() || disabled()) {\r\n    <div\r\n        class=\"nxe-fileinput-zone\"\r\n        (dragenter)=\"onDragOver($event)\"\r\n        (dragover)=\"onDragOver($event)\"\r\n        (dragleave)=\"onDragLeave($event)\"\r\n        (drop)=\"onDrop($event)\"\r\n        (focusout)=\"onZoneFocusOut($event)\">\r\n        <button\r\n            type=\"button\"\r\n            class=\"nxe-fileinput-button\"\r\n            [id]=\"controlId()\"\r\n            [disabled]=\"disabled()\"\r\n            (click)=\"open()\">\r\n            {{ selectButtonText() ?? t('uploader.selectFiles') }}\r\n        </button>\r\n        <span class=\"nxe-fileinput-drop\">{{ labelText() ?? t('uploader.dropFiles') }}</span>\r\n        <input\r\n            #picker\r\n            class=\"nxe-fileinput-picker\"\r\n            type=\"file\"\r\n            tabindex=\"-1\"\r\n            aria-hidden=\"true\"\r\n            [attr.accept]=\"accept() || null\"\r\n            [multiple]=\"multiple()\"\r\n            (change)=\"onPicked($event)\" />\r\n        @if (showHints() && hints().length) {\r\n            <span class=\"nxe-fileinput-hints\">{{ hints().join(' \u00B7 ') }}</span>\r\n        }\r\n    </div>\r\n} @else {\r\n    <input #picker class=\"nxe-fileinput-picker\" type=\"file\" tabindex=\"-1\" aria-hidden=\"true\" />\r\n}\r\n\r\n@if (rows().length) {\r\n    <ul class=\"nxe-fileinput-list\" [attr.aria-label]=\"t('uploader.listLabel')\">\r\n        @for (row of rows(); track row.file.id) {\r\n            <li\r\n                class=\"nxe-fileinput-file nxe-fileinput-file-{{ row.file.status }}\"\r\n                [class.nxe-fileinput-file-invalid]=\"!!row.issue || row.failed\">\r\n                <div class=\"nxe-fileinput-file-main\">\r\n                    @if (row.file.status === 'uploaded' && row.file.url) {\r\n                        <a class=\"nxe-fileinput-file-name\" [href]=\"row.file.url\" target=\"_blank\" rel=\"noopener\">{{ row.file.name }}</a>\r\n                    } @else {\r\n                        <span class=\"nxe-fileinput-file-name\">{{ row.file.name }}</span>\r\n                    }\r\n                    <span class=\"nxe-fileinput-file-size\">{{ row.sizeText }}</span>\r\n                    @if (row.statusText) {\r\n                        <span class=\"nxe-fileinput-file-status\">{{ row.statusText }}</span>\r\n                    }\r\n                </div>\r\n                @if (row.file.status === 'uploading') {\r\n                    <div\r\n                        class=\"nxe-fileinput-progress\"\r\n                        role=\"progressbar\"\r\n                        aria-valuemin=\"0\"\r\n                        aria-valuemax=\"100\"\r\n                        [attr.aria-valuenow]=\"round(row.file.progress)\"\r\n                        [attr.aria-label]=\"progressLabel(row.file)\">\r\n                        <span class=\"nxe-fileinput-progress-bar\" [style.width.%]=\"row.file.progress\"></span>\r\n                    </div>\r\n                }\r\n                <div class=\"nxe-fileinput-file-actions\">\r\n                    @if (row.file.status === 'uploading') {\r\n                        <button\r\n                            type=\"button\"\r\n                            class=\"nxe-fileinput-action\"\r\n                            [attr.aria-label]=\"t('uploader.cancelFile', row.file.name)\"\r\n                            (click)=\"cancel(row.file.id)\">\r\n                            {{ t('uploader.cancel') }}\r\n                        </button>\r\n                    } @else {\r\n                        @if (row.canRetry) {\r\n                            <button\r\n                                type=\"button\"\r\n                                class=\"nxe-fileinput-action\"\r\n                                [attr.aria-label]=\"t('uploader.retryFile', row.file.name)\"\r\n                                (click)=\"retry(row.file.id)\">\r\n                                {{ t('uploader.retry') }}\r\n                            </button>\r\n                        }\r\n                        @if (canAdd()) {\r\n                            <button\r\n                                type=\"button\"\r\n                                class=\"nxe-fileinput-action\"\r\n                                [attr.aria-label]=\"t('uploader.removeFile', row.file.name)\"\r\n                                (click)=\"remove(row.file.id)\">\r\n                                {{ t('uploader.remove') }}\r\n                            </button>\r\n                        }\r\n                    }\r\n                </div>\r\n            </li>\r\n        }\r\n    </ul>\r\n}\r\n<div class=\"nxe-fileinput-live\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">{{ announcement() }}</div>\r\n", styles: ["nxe-file-input.nxe-file-input{display:block;color:var(--nxe-ui-text);font-family:var(--nxe-ui-font-family);font-size:var(--nxe-ui-font-size)}nxe-file-input.nxe-file-input .nxe-fileinput-picker{display:none}nxe-file-input.nxe-file-input .nxe-fileinput-live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}nxe-file-input.nxe-file-input .nxe-fileinput-zone{display:flex;flex-wrap:wrap;align-items:center;gap:var(--nxe-ui-space-2) var(--nxe-ui-space-3);box-sizing:border-box;padding:var(--nxe-ui-space-3) var(--nxe-ui-space-4);border:1px dashed var(--nxe-ui-border);border-radius:var(--nxe-ui-radius-md);background:var(--nxe-ui-surface)}nxe-file-input.nxe-file-input.nxe-fileinput-dragover .nxe-fileinput-zone{border-color:var(--nxe-ui-accent);background:var(--nxe-ui-surface-alt)}nxe-file-input.nxe-file-input.nxe-invalid .nxe-fileinput-zone{border-color:var(--nxe-ui-invalid)}nxe-file-input.nxe-file-input.nxe-disabled .nxe-fileinput-zone{opacity:.5}nxe-file-input.nxe-file-input .nxe-fileinput-button{box-sizing:border-box;min-height:var(--nxe-ui-control-min-height);padding:0 var(--nxe-ui-space-3);border:1px solid var(--nxe-ui-border);border-radius:var(--nxe-ui-radius-sm);background:var(--nxe-ui-surface);color:var(--nxe-ui-text);font:inherit;cursor:pointer}nxe-file-input.nxe-file-input .nxe-fileinput-button:hover:not(:disabled){background:var(--nxe-ui-surface-alt)}nxe-file-input.nxe-file-input .nxe-fileinput-button:focus-visible{outline:2px solid var(--nxe-ui-focus-ring-color);outline-offset:1px}nxe-file-input.nxe-file-input .nxe-fileinput-button:disabled{cursor:not-allowed}nxe-file-input.nxe-file-input .nxe-fileinput-drop{color:var(--nxe-ui-text-muted)}nxe-file-input.nxe-file-input .nxe-fileinput-hints{flex-basis:100%;color:var(--nxe-ui-text-muted);font-size:var(--nxe-ui-font-size-xs)}nxe-file-input.nxe-file-input .nxe-fileinput-list{margin:var(--nxe-ui-space-2) 0 0;padding:0;list-style:none}nxe-file-input.nxe-file-input .nxe-fileinput-file{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--nxe-ui-space-1) var(--nxe-ui-space-3);padding:var(--nxe-ui-space-2) 0;border-bottom:1px solid var(--nxe-ui-border)}nxe-file-input.nxe-file-input .nxe-fileinput-file:last-child{border-bottom:0}nxe-file-input.nxe-file-input .nxe-fileinput-file-main{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--nxe-ui-space-2);min-width:0}nxe-file-input.nxe-file-input .nxe-fileinput-file-name{overflow-wrap:anywhere;font-weight:var(--nxe-ui-font-weight-medium)}nxe-file-input.nxe-file-input .nxe-fileinput-file-size,nxe-file-input.nxe-file-input .nxe-fileinput-file-status{color:var(--nxe-ui-text-muted);font-size:var(--nxe-ui-font-size-xs)}nxe-file-input.nxe-file-input .nxe-fileinput-file-uploaded .nxe-fileinput-file-status{color:var(--nxe-ui-status-success-fg)}nxe-file-input.nxe-file-input .nxe-fileinput-file-invalid .nxe-fileinput-file-status,nxe-file-input.nxe-file-input .nxe-fileinput-file-error .nxe-fileinput-file-status{color:var(--nxe-ui-status-danger-fg)}nxe-file-input.nxe-file-input .nxe-fileinput-file-actions{display:flex;gap:var(--nxe-ui-space-1)}nxe-file-input.nxe-file-input .nxe-fileinput-action{padding:var(--nxe-ui-space-1) var(--nxe-ui-space-2);border:0;border-radius:var(--nxe-ui-radius-sm);background:transparent;color:var(--nxe-ui-accent);font:inherit;font-size:var(--nxe-ui-font-size-sm);cursor:pointer}nxe-file-input.nxe-file-input .nxe-fileinput-action:hover{background:var(--nxe-ui-surface-alt)}nxe-file-input.nxe-file-input .nxe-fileinput-action:focus-visible{outline:2px solid var(--nxe-ui-focus-ring-color);outline-offset:1px}nxe-file-input.nxe-file-input .nxe-fileinput-progress{grid-column:1/-1;height:var(--nxe-ui-space-1);overflow:hidden;border-radius:var(--nxe-ui-radius-pill);background:var(--nxe-ui-neutral-110)}nxe-file-input.nxe-file-input .nxe-fileinput-progress-bar{display:block;height:100%;background:var(--nxe-ui-accent);transition:width .15s linear}@media(prefers-reduced-motion:reduce){nxe-file-input.nxe-file-input .nxe-fileinput-progress-bar{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeFileInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxe-file-input', host: {
+                        class: 'nxe-widget nxe-file-input',
+                        '[class.nxe-fileinput-dragover]': 'dragOver()',
+                        '[class.nxe-fileinput-has-files]': 'rows().length > 0',
+                        '[class.nxe-invalid]': 'invalidState()',
+                    }, providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NxeFileInputComponent), multi: true },
+                        { provide: NG_VALIDATORS, useExisting: forwardRef(() => NxeFileInputComponent), multi: true },
+                        { provide: NXE_VALIDATION_TARGET, useExisting: forwardRef(() => NxeFileInputComponent) },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@if (canAdd() || disabled()) {\r\n    <div\r\n        class=\"nxe-fileinput-zone\"\r\n        (dragenter)=\"onDragOver($event)\"\r\n        (dragover)=\"onDragOver($event)\"\r\n        (dragleave)=\"onDragLeave($event)\"\r\n        (drop)=\"onDrop($event)\"\r\n        (focusout)=\"onZoneFocusOut($event)\">\r\n        <button\r\n            type=\"button\"\r\n            class=\"nxe-fileinput-button\"\r\n            [id]=\"controlId()\"\r\n            [disabled]=\"disabled()\"\r\n            (click)=\"open()\">\r\n            {{ selectButtonText() ?? t('uploader.selectFiles') }}\r\n        </button>\r\n        <span class=\"nxe-fileinput-drop\">{{ labelText() ?? t('uploader.dropFiles') }}</span>\r\n        <input\r\n            #picker\r\n            class=\"nxe-fileinput-picker\"\r\n            type=\"file\"\r\n            tabindex=\"-1\"\r\n            aria-hidden=\"true\"\r\n            [attr.accept]=\"accept() || null\"\r\n            [multiple]=\"multiple()\"\r\n            (change)=\"onPicked($event)\" />\r\n        @if (showHints() && hints().length) {\r\n            <span class=\"nxe-fileinput-hints\">{{ hints().join(' \u00B7 ') }}</span>\r\n        }\r\n    </div>\r\n} @else {\r\n    <input #picker class=\"nxe-fileinput-picker\" type=\"file\" tabindex=\"-1\" aria-hidden=\"true\" />\r\n}\r\n\r\n@if (rows().length) {\r\n    <ul class=\"nxe-fileinput-list\" [attr.aria-label]=\"t('uploader.listLabel')\">\r\n        @for (row of rows(); track row.file.id) {\r\n            <li\r\n                class=\"nxe-fileinput-file nxe-fileinput-file-{{ row.file.status }}\"\r\n                [class.nxe-fileinput-file-invalid]=\"!!row.issue || row.failed\">\r\n                <div class=\"nxe-fileinput-file-main\">\r\n                    @if (row.file.status === 'uploaded' && row.file.url) {\r\n                        <a class=\"nxe-fileinput-file-name\" [href]=\"row.file.url\" target=\"_blank\" rel=\"noopener\">{{ row.file.name }}</a>\r\n                    } @else {\r\n                        <span class=\"nxe-fileinput-file-name\">{{ row.file.name }}</span>\r\n                    }\r\n                    <span class=\"nxe-fileinput-file-size\">{{ row.sizeText }}</span>\r\n                    @if (row.statusText) {\r\n                        <span class=\"nxe-fileinput-file-status\">{{ row.statusText }}</span>\r\n                    }\r\n                </div>\r\n                @if (row.file.status === 'uploading') {\r\n                    <div\r\n                        class=\"nxe-fileinput-progress\"\r\n                        role=\"progressbar\"\r\n                        aria-valuemin=\"0\"\r\n                        aria-valuemax=\"100\"\r\n                        [attr.aria-valuenow]=\"round(row.file.progress)\"\r\n                        [attr.aria-label]=\"progressLabel(row.file)\">\r\n                        <span class=\"nxe-fileinput-progress-bar\" [style.width.%]=\"row.file.progress\"></span>\r\n                    </div>\r\n                }\r\n                <div class=\"nxe-fileinput-file-actions\">\r\n                    @if (row.file.status === 'uploading') {\r\n                        <button\r\n                            type=\"button\"\r\n                            class=\"nxe-fileinput-action\"\r\n                            [attr.aria-label]=\"t('uploader.cancelFile', row.file.name)\"\r\n                            (click)=\"cancel(row.file.id)\">\r\n                            {{ t('uploader.cancel') }}\r\n                        </button>\r\n                    } @else {\r\n                        @if (row.canRetry) {\r\n                            <button\r\n                                type=\"button\"\r\n                                class=\"nxe-fileinput-action\"\r\n                                [attr.aria-label]=\"t('uploader.retryFile', row.file.name)\"\r\n                                (click)=\"retry(row.file.id)\">\r\n                                {{ t('uploader.retry') }}\r\n                            </button>\r\n                        }\r\n                        @if (canAdd()) {\r\n                            <button\r\n                                type=\"button\"\r\n                                class=\"nxe-fileinput-action\"\r\n                                [attr.aria-label]=\"t('uploader.removeFile', row.file.name)\"\r\n                                (click)=\"remove(row.file.id)\">\r\n                                {{ t('uploader.remove') }}\r\n                            </button>\r\n                        }\r\n                    }\r\n                </div>\r\n            </li>\r\n        }\r\n    </ul>\r\n}\r\n<div class=\"nxe-fileinput-live\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">{{ announcement() }}</div>\r\n", styles: ["nxe-file-input.nxe-file-input{display:block;color:var(--nxe-ui-text);font-family:var(--nxe-ui-font-family);font-size:var(--nxe-ui-font-size)}nxe-file-input.nxe-file-input .nxe-fileinput-picker{display:none}nxe-file-input.nxe-file-input .nxe-fileinput-live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}nxe-file-input.nxe-file-input .nxe-fileinput-zone{display:flex;flex-wrap:wrap;align-items:center;gap:var(--nxe-ui-space-2) var(--nxe-ui-space-3);box-sizing:border-box;padding:var(--nxe-ui-space-3) var(--nxe-ui-space-4);border:1px dashed var(--nxe-ui-border);border-radius:var(--nxe-ui-radius-md);background:var(--nxe-ui-surface)}nxe-file-input.nxe-file-input.nxe-fileinput-dragover .nxe-fileinput-zone{border-color:var(--nxe-ui-accent);background:var(--nxe-ui-surface-alt)}nxe-file-input.nxe-file-input.nxe-invalid .nxe-fileinput-zone{border-color:var(--nxe-ui-invalid)}nxe-file-input.nxe-file-input.nxe-disabled .nxe-fileinput-zone{opacity:.5}nxe-file-input.nxe-file-input .nxe-fileinput-button{box-sizing:border-box;min-height:var(--nxe-ui-control-min-height);padding:0 var(--nxe-ui-space-3);border:1px solid var(--nxe-ui-border);border-radius:var(--nxe-ui-radius-sm);background:var(--nxe-ui-surface);color:var(--nxe-ui-text);font:inherit;cursor:pointer}nxe-file-input.nxe-file-input .nxe-fileinput-button:hover:not(:disabled){background:var(--nxe-ui-surface-alt)}nxe-file-input.nxe-file-input .nxe-fileinput-button:focus-visible{outline:2px solid var(--nxe-ui-focus-ring-color);outline-offset:1px}nxe-file-input.nxe-file-input .nxe-fileinput-button:disabled{cursor:not-allowed}nxe-file-input.nxe-file-input .nxe-fileinput-drop{color:var(--nxe-ui-text-muted)}nxe-file-input.nxe-file-input .nxe-fileinput-hints{flex-basis:100%;color:var(--nxe-ui-text-muted);font-size:var(--nxe-ui-font-size-xs)}nxe-file-input.nxe-file-input .nxe-fileinput-list{margin:var(--nxe-ui-space-2) 0 0;padding:0;list-style:none}nxe-file-input.nxe-file-input .nxe-fileinput-file{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--nxe-ui-space-1) var(--nxe-ui-space-3);padding:var(--nxe-ui-space-2) 0;border-bottom:1px solid var(--nxe-ui-border)}nxe-file-input.nxe-file-input .nxe-fileinput-file:last-child{border-bottom:0}nxe-file-input.nxe-file-input .nxe-fileinput-file-main{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--nxe-ui-space-2);min-width:0}nxe-file-input.nxe-file-input .nxe-fileinput-file-name{overflow-wrap:anywhere;font-weight:var(--nxe-ui-font-weight-medium)}nxe-file-input.nxe-file-input .nxe-fileinput-file-size,nxe-file-input.nxe-file-input .nxe-fileinput-file-status{color:var(--nxe-ui-text-muted);font-size:var(--nxe-ui-font-size-xs)}nxe-file-input.nxe-file-input .nxe-fileinput-file-uploaded .nxe-fileinput-file-status{color:var(--nxe-ui-status-success-fg)}nxe-file-input.nxe-file-input .nxe-fileinput-file-invalid .nxe-fileinput-file-status,nxe-file-input.nxe-file-input .nxe-fileinput-file-error .nxe-fileinput-file-status{color:var(--nxe-ui-status-danger-fg)}nxe-file-input.nxe-file-input .nxe-fileinput-file-actions{display:flex;gap:var(--nxe-ui-space-1)}nxe-file-input.nxe-file-input .nxe-fileinput-action{padding:var(--nxe-ui-space-1) var(--nxe-ui-space-2);border:0;border-radius:var(--nxe-ui-radius-sm);background:transparent;color:var(--nxe-ui-accent);font:inherit;font-size:var(--nxe-ui-font-size-sm);cursor:pointer}nxe-file-input.nxe-file-input .nxe-fileinput-action:hover{background:var(--nxe-ui-surface-alt)}nxe-file-input.nxe-file-input .nxe-fileinput-action:focus-visible{outline:2px solid var(--nxe-ui-focus-ring-color);outline-offset:1px}nxe-file-input.nxe-file-input .nxe-fileinput-progress{grid-column:1/-1;height:var(--nxe-ui-space-1);overflow:hidden;border-radius:var(--nxe-ui-radius-pill);background:var(--nxe-ui-neutral-110)}nxe-file-input.nxe-file-input .nxe-fileinput-progress-bar{display:block;height:100%;background:var(--nxe-ui-accent);transition:width .15s linear}@media(prefers-reduced-motion:reduce){nxe-file-input.nxe-file-input .nxe-fileinput-progress-bar{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], uploadFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadFn", required: false }] }], uploadUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadUrl", required: false }] }], uploadField: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadField", required: false }] }], uploadHeaders: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadHeaders", required: false }] }], withCredentials: [{ type: i0.Input, args: [{ isSignal: true, alias: "withCredentials", required: false }] }], uploadResult: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadResult", required: false }] }], autoUpload: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoUpload", required: false }] }], selectButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectButtonText", required: false }] }], labelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelText", required: false }] }], showHints: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHints", required: false }] }], filesAdded: [{ type: i0.Output, args: ["filesAdded"] }], fileRemoved: [{ type: i0.Output, args: ["fileRemoved"] }], fileUploaded: [{ type: i0.Output, args: ["fileUploaded"] }], fileFailed: [{ type: i0.Output, args: ["fileFailed"] }], picker: [{ type: i0.ViewChild, args: ['picker', { isSignal: true }] }] } });
+
 // @nexterajs/ui/file-uploader — public API.
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { NxeFileUploaderComponent };
+export { NxeFileInputComponent, NxeFileUploaderComponent, nxeFileAccepted };
 //# sourceMappingURL=nexterajs-ui-file-uploader.mjs.map