ng-hub-ui-forms 22.5.0 → 22.7.0

package/fesm2022/ng-hub-ui-forms.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, model, Directive, inject, TemplateRef, InjectionToken, makeEnvironmentProviders, ElementRef, ChangeDetectorRef, contentChild, contentChildren, signal, computed, effect, numberAttribute, booleanAttribute, output, DestroyRef, viewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, viewChildren, PLATFORM_ID, afterRenderEffect, afterNextRender, Injectable, Renderer2, NgZone, afterEveryRender, HostAttributeToken, linkedSignal, forwardRef, Injector, HostListener, LOCALE_ID, Pipe } from '@angular/core';
+import { input, model, Directive, inject, TemplateRef, InjectionToken, makeEnvironmentProviders, ElementRef, ChangeDetectorRef, contentChild, contentChildren, signal, computed, effect, numberAttribute, booleanAttribute, output, DestroyRef, viewChild, isDevMode, ViewEncapsulation, ChangeDetectionStrategy, Component, viewChildren, PLATFORM_ID, afterRenderEffect, afterNextRender, Injectable, Renderer2, NgZone, afterEveryRender, HostAttributeToken, linkedSignal, forwardRef, Injector, HostListener, LOCALE_ID, Pipe } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormControl, Validators, NgControl, ControlContainer, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Observable, Subject, takeUntil, tap, animationFrameScheduler, asapScheduler, fromEvent } from 'rxjs';
@@ -340,6 +340,79 @@ const defaultHubDatepickerConfig = {
     labels: defaultHubDatepickerLabels
 };
 
+/** Binary size units, ascending. */
+const FILE_SIZE_UNITS = ['B', 'KB', 'MB', 'GB', 'TB'];
+/**
+ * Formats a byte count as human-readable text using binary multiples (1 KB = 1024 B).
+ *
+ * Values below 10 in their unit keep one decimal (`1.4 MB`); larger ones are rounded (`24 MB`).
+ * The decimal separator follows the given locale, or the runtime's default when omitted.
+ *
+ * @param bytes - The size in bytes.
+ * @param locale - BCP 47 locale used to format the number. Defaults to the runtime locale.
+ * @returns The formatted size, or an empty string when `bytes` is not a finite, non-negative number.
+ */
+function formatFileSize(bytes, locale) {
+    if (!Number.isFinite(bytes) || bytes < 0) {
+        return '';
+    }
+    if (bytes < 1024) {
+        return `${bytes} ${FILE_SIZE_UNITS[0]}`;
+    }
+    let value = bytes;
+    let unit = 0;
+    while (value >= 1024 && unit < FILE_SIZE_UNITS.length - 1) {
+        value /= 1024;
+        unit++;
+    }
+    const formatted = new Intl.NumberFormat(locale, { maximumFractionDigits: value < 10 ? 1 : 0 }).format(value);
+    return `${formatted} ${FILE_SIZE_UNITS[unit]}`;
+}
+
+/** Built-in (English) file-input labels. */
+const defaultHubFileInputLabels = {
+    browse: 'Browse files',
+    dropHere: 'Drag files here, or',
+    dropSubtext: '',
+    remove: 'Remove file',
+    clear: 'Remove all',
+    retry: 'Retry upload',
+    cancel: 'Cancel upload',
+    filesSelected: (count) => (count === 1 ? '1 file selected' : `${count} files selected`),
+    formatSize: (bytes) => formatFileSize(bytes),
+    rejection: ({ file, reason, limit }) => {
+        switch (reason) {
+            case 'accept':
+                return `${file.name}: file type not allowed.`;
+            case 'maxSize':
+                return `${file.name}: exceeds the maximum size of ${formatFileSize(Number(limit))}.`;
+            case 'minSize':
+                return `${file.name}: below the minimum size of ${formatFileSize(Number(limit))}.`;
+            case 'maxFiles':
+                return `${file.name}: at most ${limit} files can be selected.`;
+            case 'maxTotalSize':
+                return `${file.name}: the total size would exceed ${formatFileSize(Number(limit))}.`;
+            case 'duplicate':
+                return `${file.name}: already selected.`;
+            default:
+                return `${file.name}: rejected.`;
+        }
+    },
+    constraints: ({ accept, maxSize, maxFiles }) => {
+        const parts = [];
+        if (accept) {
+            parts.push(accept);
+        }
+        if (maxSize != null) {
+            parts.push(`up to ${formatFileSize(maxSize)} each`);
+        }
+        if (maxFiles != null) {
+            parts.push(maxFiles === 1 ? '1 file max' : `${maxFiles} files max`);
+        }
+        return parts.join(' · ');
+    }
+};
+
 /**
  * Default, human-readable messages for the most common Angular validation errors.
  *
@@ -353,6 +426,18 @@ const defaultHubDatepickerConfig = {
  */
 function defaultInvalidFeedback(key, value) {
     switch (key) {
+        case 'fileAccept':
+            return `Only ${value?.accept ?? 'certain'} files are allowed.`;
+        case 'fileMaxSize':
+            return `Each file must be at most ${formatFileSize(value?.max)}.`;
+        case 'fileMinSize':
+            return `Each file must be at least ${formatFileSize(value?.min)}.`;
+        case 'fileMaxTotalSize':
+            return `The files must add up to at most ${formatFileSize(value?.max)}.`;
+        case 'fileMaxFiles':
+            return `Select at most ${value?.max ?? ''} files.`;
+        case 'fileMinFiles':
+            return `Select at least ${value?.min ?? ''} files.`;
         case 'required':
             return 'This field is required.';
         case 'email':
@@ -382,7 +467,8 @@ function defaultInvalidFeedback(key, value) {
 const defaultHubFormsConfig = {
     invalidFeedbackTemplateFn: defaultInvalidFeedback,
     showValid: false,
-    datepicker: defaultHubDatepickerConfig
+    datepicker: defaultHubDatepickerConfig,
+    fileInput: defaultHubFileInputLabels
 };
 /**
  * Injection token holding the resolved {@link HubFormsConfig}.
@@ -417,10 +503,14 @@ function provideHubForms(config) {
         ...config?.datepicker,
         labels: { ...defaultHubFormsConfig.datepicker.labels, ...config?.datepicker?.labels }
     };
+    const fileInput = {
+        ...defaultHubFormsConfig.fileInput,
+        ...config?.fileInput
+    };
     return makeEnvironmentProviders([
         {
             provide: HUB_FORMS_CONFIG,
-            useValue: { ...defaultHubFormsConfig, ...config, datepicker }
+            useValue: { ...defaultHubFormsConfig, ...config, datepicker, fileInput }
         }
     ]);
 }
@@ -723,6 +813,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
             type: Directive
         }], ctorParameters: () => [], propDecorators: { group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: false }] }], groupName: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupName", required: false }] }], errorTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorTrigger", required: false }] }], invalidFeedbackTemplateFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidFeedbackTemplateFn", required: false }] }], errorTpts: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => HubValidationErrorDirective), { isSignal: true }] }] } });
 
+/**
+ * Injection token holding the {@link HubFileUploader} that `<hub-file-input>` delegates uploads to.
+ *
+ * It has **no default**: when nothing is registered, the component resolves it as `null` and behaves
+ * as a pure picker — no automatic upload, no progress bar, no cancel or retry. Register one with
+ * {@link provideHubFileUploader}.
+ */
+const HUB_FILE_UPLOADER = new InjectionToken('HUB_FILE_UPLOADER');
+/**
+ * Registers the uploader that `<hub-file-input>` uses to send files.
+ *
+ * The library defines the contract, not the transport: an uploader that knows your endpoint, field
+ * name, headers and retry policy is application code. Implement {@link HubFileUploader} there and
+ * hand it over here.
+ *
+ * Passing a class provides it in the same injector and aliases the token to that single instance, so
+ * the uploader can inject `HttpClient` and hold its own state.
+ *
+ * @param uploader - The uploader class (dependency-injected) or a ready-made instance.
+ * @returns Environment providers to add to `bootstrapApplication` (or a route's `providers`).
+ *
+ * @example
+ * ```ts
+ * bootstrapApplication(App, {
+ *   providers: [provideHttpClient(), provideHubFileUploader(ApiFileUploader)]
+ * });
+ * ```
+ */
+function provideHubFileUploader(uploader) {
+    if (typeof uploader === 'function') {
+        const uploaderType = uploader;
+        return makeEnvironmentProviders([uploaderType, { provide: HUB_FILE_UPLOADER, useExisting: uploaderType }]);
+    }
+    return makeEnvironmentProviders([{ provide: HUB_FILE_UPLOADER, useValue: uploader }]);
+}
+
 /**
  * Enum for form helper text display types.
  */
@@ -896,9 +1022,13 @@ function applyMask(value, mask) {
  * `invalidFeedbackTemplateFn` input, or projected `hubValidationError` templates.
  *
  * Formats: `text`, `number`, `password`, `email`, `tel`, `url`, `color`, `checkbox`, `switch`,
- * `counter`. Label types: `stacked`, `floating`, `horizontal`. Text-like formats support prepend /
- * append addons (input groups). Numeric formats auto-attach `min`/`max` validators when bound to a
- * reactive control.
+ * `counter` and `file`. Label types: `stacked`, `floating`, `horizontal`. Text-like formats support
+ * prepend / append addons (input groups). Numeric formats auto-attach `min`/`max` validators when
+ * bound to a reactive control.
+ *
+ * The `file` format is **deprecated since 22.6.0** in favour of `<hub-file-input>`: it is a bare
+ * picker that cannot enforce `accept` on a drop, and has no size limits, no preview and no per-file
+ * removal. It keeps working until the next major.
  *
  * @example
  * ```html
@@ -1005,12 +1135,25 @@ class HubInputComponent extends HubFieldControl {
     #lastSearchTerm = null;
     /** Clears any pending debounce timer when the component is destroyed. */
     _searchCleanup = inject(DestroyRef).onDestroy(() => clearTimeout(this.#searchTimer));
-    /** Accepted file types (file format), e.g. `image/*,.pdf`. */
+    /**
+     * Accepted file types (file format), e.g. `image/*,.pdf`.
+     *
+     * @deprecated Since 22.6.0. Use `<hub-file-input>`, which enforces `accept` on drops and pastes
+     * too. Removed in the next major.
+     */
     accept = input('*', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
-    /** Whether multiple files can be selected (file format). */
+    /**
+     * Whether multiple files can be selected (file format).
+     *
+     * @deprecated Since 22.6.0. Use `<hub-file-input>`. Removed in the next major.
+     */
     multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /** Text of the file-picker button (file format). */
+    /**
+     * Text of the file-picker button (file format).
+     *
+     * @deprecated Since 22.6.0. Use `<hub-file-input>` and its `buttonLabel`. Removed in the next major.
+     */
     buttonLabel = input('Choose file', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "buttonLabel" }] : /* istanbul ignore next */ []));
     /** Reference to the hidden native file input. */
@@ -1067,6 +1210,7 @@ class HubInputComponent extends HubFieldControl {
     ngAfterContentInit() {
         super.ngAfterContentInit();
         this.#attachNumericValidators();
+        this.#warnDeprecatedFileFormat();
     }
     writeValue(value) {
         if (this.isCheckable()) {
@@ -1201,6 +1345,17 @@ class HubInputComponent extends HubFieldControl {
         this.onChange?.(null);
         this.valueChange.emit(null);
     }
+    /**
+     * Warns once, in development only, that the `file` format is deprecated.
+     *
+     * It still works, but it cannot enforce `accept` on a drop, has no size limits, no preview and
+     * no per-file removal. `<hub-file-input>` supersedes it.
+     */
+    #warnDeprecatedFileFormat() {
+        if (isDevMode() && this.type() === this._inputFormats.File) {
+            console.warn('[ng-hub-ui-forms] <hub-input type="file"> is deprecated since 22.6.0 and will be removed in the next major. Use <hub-file-input> instead.');
+        }
+    }
     /**
      * Auto-attaches `Validators.min` / `Validators.max` to the bound reactive control when `min` /
      * `max` are set and not already present, so the inline bounds become real validation.
@@ -6117,6 +6272,832 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                     }, template: "<div\n\tclass=\"hub-field hub-datepicker\"\n\t[class.hub-field--horizontal]=\"labelType() === _labelTypes.Horizontal || (!label() && required())\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n\t[class.hub-field--valid]=\"showsValid\"\n>\n\t@if (label() || required()) {\n\t\t<label [for]=\"id\" class=\"hub-field__label\">\n\t\t\t{{ label() }}\n\t\t\t@if (required()) {\n\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t}\n\t\t</label>\n\t}\n\n\t<div class=\"hub-field__body hub-datepicker__trigger\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\n\t\t<input\n\t\t\tclass=\"hub-field__control hub-datepicker__input\"\n\t\t\t[class.hub-field__control--invalid]=\"isInvalid\"\n\t\t\t[class.hub-field__control--valid]=\"showsValid\"\n\t\t\t[class.hub-datepicker__input--clearable]=\"clearable() && displayValue()\"\n\t\t\t[id]=\"id\"\n\t\t\ttype=\"text\"\n\t\t\treadonly\n\t\t\t[value]=\"displayValue()\"\n\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t[disabled]=\"disabled()\"\n\t\t\t[required]=\"!!required()\"\n\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t[attr.aria-expanded]=\"_open()\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\t(click)=\"toggleCalendar()\"\n\t\t\t(blur)=\"handleBlur($event)\"\n\t\t/>\n\t\t@if (clearable() && displayValue() && !disabled() && !readonly()) {\n\t\t\t<button type=\"button\" class=\"hub-datepicker__clear\" [attr.aria-label]=\"_labels().clear\" (click)=\"clear()\">&times;</button>\n\t\t}\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tclass=\"hub-datepicker__icon\"\n\t\t\ttabindex=\"-1\"\n\t\t\t[attr.aria-label]=\"_labels().openCalendar\"\n\t\t\t[disabled]=\"disabled() || readonly()\"\n\t\t\t(click)=\"toggleCalendar()\"\n\t\t></button>\n\t</div>\n\n\t@if (formText() || formTextTmp()) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span class=\"hub-field__feedback-text\" [innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n\n\t@if (showsValid && validFeedback()) {\n\t\t<div class=\"hub-field__feedback hub-field__feedback--valid\" role=\"status\">\n\t\t\t<span class=\"hub-field__feedback-text\">{{ validFeedback() }}</span>\n\t\t</div>\n\t}\n</div>\n\n<ng-template\n\tcdkConnectedOverlay\n\t[cdkConnectedOverlayOrigin]=\"trigger\"\n\t[cdkConnectedOverlayOpen]=\"_open()\"\n\t[cdkConnectedOverlayHasBackdrop]=\"true\"\n\tcdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n\t[cdkConnectedOverlayOffsetY]=\"4\"\n\t(backdropClick)=\"close()\"\n\t(detach)=\"close()\"\n>\n\t<div class=\"hub-datepicker__panel\" role=\"dialog\" [attr.aria-label]=\"monthYearLabel()\">\n\t\t<header class=\"hub-datepicker__header\">\n\t\t\t<div class=\"hub-datepicker__nav-group\">\n\t\t\t\t<button type=\"button\" class=\"hub-datepicker__nav\" [attr.aria-label]=\"_labels().previousYear\" (click)=\"shiftMonth(-12)\">\u00AB</button>\n\t\t\t\t<button type=\"button\" class=\"hub-datepicker__nav\" [attr.aria-label]=\"_labels().previousMonth\" (click)=\"shiftMonth(-1)\">\u2039</button>\n\t\t\t</div>\n\t\t\t<span class=\"hub-datepicker__title\" aria-live=\"polite\">{{ monthYearLabel() }}</span>\n\t\t\t<div class=\"hub-datepicker__nav-group\">\n\t\t\t\t<button type=\"button\" class=\"hub-datepicker__nav\" [attr.aria-label]=\"_labels().nextMonth\" (click)=\"shiftMonth(1)\">\u203A</button>\n\t\t\t\t<button type=\"button\" class=\"hub-datepicker__nav\" [attr.aria-label]=\"_labels().nextYear\" (click)=\"shiftMonth(12)\">\u00BB</button>\n\t\t\t</div>\n\t\t</header>\n\n\t\t<div class=\"hub-datepicker__weekdays\" aria-hidden=\"true\">\n\t\t\t@for (wd of weekdays(); track $index) {\n\t\t\t\t<span class=\"hub-datepicker__weekday\">{{ wd }}</span>\n\t\t\t}\n\t\t</div>\n\n\t\t<div class=\"hub-datepicker__grid\" role=\"grid\" (keydown)=\"onGridKeydown($event)\">\n\t\t\t@for (cell of grid(); track cell.date.getTime()) {\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\trole=\"gridcell\"\n\t\t\t\t\tclass=\"hub-datepicker__cell\"\n\t\t\t\t\t[class.hub-datepicker__cell--outside]=\"!cell.currentMonth\"\n\t\t\t\t\t[class.hub-datepicker__cell--today]=\"cell.today\"\n\t\t\t\t\t[class.hub-datepicker__cell--selected]=\"cell.selected || cell.rangeStart || cell.rangeEnd\"\n\t\t\t\t\t[class.hub-datepicker__cell--range-start]=\"cell.rangeStart\"\n\t\t\t\t\t[class.hub-datepicker__cell--range-end]=\"cell.rangeEnd\"\n\t\t\t\t\t[class.hub-datepicker__cell--in-range]=\"cell.inRange\"\n\t\t\t\t\t[attr.data-time]=\"cell.date.getTime()\"\n\t\t\t\t\t[attr.tabindex]=\"cell.focused ? 0 : -1\"\n\t\t\t\t\t[attr.aria-selected]=\"cell.selected || cell.rangeStart || cell.rangeEnd\"\n\t\t\t\t\t[disabled]=\"cell.disabled\"\n\t\t\t\t\t(click)=\"selectDay(cell)\"\n\t\t\t\t>\n\t\t\t\t\t{{ cell.day }}\n\t\t\t\t</button>\n\t\t\t}\n\t\t</div>\n\n\t\t@if (showToday() || clearable()) {\n\t\t\t<footer class=\"hub-datepicker__footer\">\n\t\t\t\t@if (showToday()) {\n\t\t\t\t\t<button type=\"button\" class=\"hub-datepicker__action\" (click)=\"goToToday()\">{{ _labels().today }}</button>\n\t\t\t\t}\n\t\t\t\t@if (clearable()) {\n\t\t\t\t\t<button type=\"button\" class=\"hub-datepicker__action\" (click)=\"clear()\">{{ _labels().clear }}</button>\n\t\t\t\t}\n\t\t\t</footer>\n\t\t}\n\t</div>\n</ng-template>\n", styles: ["hub-datepicker{display:block}hub-datepicker.hidden-control{display:none!important}.hub-datepicker__trigger{position:relative}.hub-datepicker__input{padding-right:var(--hub-datepicker-icon-width);cursor:pointer}.hub-datepicker__input--clearable{padding-right:calc(var(--hub-datepicker-icon-width) + 1.5rem)}.hub-datepicker__clear{position:absolute;top:0;right:var(--hub-datepicker-icon-width);height:100%;width:1.5rem;padding:0;color:var(--hub-daterangepicker-nav-arrow-color);font-size:1.1rem;line-height:1;background:transparent;border:0;cursor:pointer}.hub-datepicker__clear:hover{color:var(--hub-form-invalid-color)}.hub-datepicker__icon{position:absolute;top:0;right:0;width:var(--hub-datepicker-icon-width);height:100%;padding:0;background:transparent;border:0;cursor:pointer}.hub-datepicker__icon:after{content:\"\";display:block;width:var(--hub-datepicker-icon-size);height:var(--hub-datepicker-icon-size);margin:0 auto;background:var(--hub-datepicker-icon) center/contain no-repeat}.hub-datepicker__icon:disabled{cursor:not-allowed;opacity:var(--hub-form-disabled-opacity)}.hub-datepicker__panel{width:max-content;padding:var(--hub-daterangepicker-padding-y, var(--hub-ref-space-3, 1rem)) var(--hub-daterangepicker-padding-x, var(--hub-ref-space-3, 1rem));color:var(--hub-daterangepicker-color);background:var(--hub-daterangepicker-bg);border:var(--hub-input-border-width) solid var(--hub-daterangepicker-border-color);border-radius:var(--hub-daterangepicker-border-radius);box-shadow:var(--hub-daterangepicker-box-shadow);font-family:var(--hub-input-font-family)}.hub-datepicker__panel .hub-datepicker__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--hub-ref-space-2, .5rem)}.hub-datepicker__panel .hub-datepicker__nav-group{display:inline-flex;gap:.125rem}.hub-datepicker__panel .hub-datepicker__nav{display:inline-flex;align-items:center;justify-content:center;width:var(--hub-daterangepicker-cell-size);height:var(--hub-daterangepicker-cell-size);font-size:1.25rem;line-height:1;color:var(--hub-daterangepicker-nav-arrow-color);background:transparent;border:0;border-radius:var(--hub-daterangepicker-cell-border-radius);cursor:pointer}.hub-datepicker__panel .hub-datepicker__nav:hover{color:var(--hub-daterangepicker-nav-arrow-hover-color);background:var(--hub-daterangepicker-cell-hover-bg)}.hub-datepicker__panel .hub-datepicker__title{font-weight:var(--hub-ref-font-weight-medium, 500);text-transform:capitalize}.hub-datepicker__panel .hub-datepicker__weekdays,.hub-datepicker__panel .hub-datepicker__grid{display:grid;grid-template-columns:repeat(7,var(--hub-daterangepicker-cell-size));gap:.125rem}.hub-datepicker__panel .hub-datepicker__weekday{display:inline-flex;align-items:center;justify-content:center;height:1.5rem;font-size:var(--hub-ref-font-size-sm, .875rem);color:var(--hub-daterangepicker-off-color);text-transform:capitalize}.hub-datepicker__panel .hub-datepicker__cell{display:inline-flex;align-items:center;justify-content:center;width:var(--hub-daterangepicker-cell-size);height:var(--hub-daterangepicker-cell-size);color:var(--hub-daterangepicker-cell-color);background:transparent;border:0;border-radius:var(--hub-daterangepicker-cell-border-radius);font-size:var(--hub-input-font-size);cursor:pointer}.hub-datepicker__panel .hub-datepicker__cell:hover{background:var(--hub-daterangepicker-cell-hover-bg)}.hub-datepicker__panel .hub-datepicker__cell--outside{color:var(--hub-daterangepicker-off-color)}.hub-datepicker__panel .hub-datepicker__cell--today{font-weight:var(--hub-ref-font-weight-bold, 700);box-shadow:inset 0 0 0 1px var(--hub-daterangepicker-border-color)}.hub-datepicker__panel .hub-datepicker__cell--in-range{background:var(--hub-daterangepicker-in-range-bg);border-radius:0}.hub-datepicker__panel .hub-datepicker__cell--range-start{border-top-right-radius:0;border-bottom-right-radius:0}.hub-datepicker__panel .hub-datepicker__cell--range-end{border-top-left-radius:0;border-bottom-left-radius:0}.hub-datepicker__panel .hub-datepicker__cell--selected,.hub-datepicker__panel .hub-datepicker__cell--selected:hover{color:var(--hub-daterangepicker-active-color);background:var(--hub-daterangepicker-active-bg)}.hub-datepicker__panel .hub-datepicker__cell:disabled{color:var(--hub-daterangepicker-off-color);background:transparent;cursor:not-allowed;opacity:.6}.hub-datepicker__panel .hub-datepicker__cell:focus-visible{outline:0;box-shadow:var(--hub-input-focus-box-shadow)}.hub-datepicker__panel .hub-datepicker__footer{display:flex;justify-content:flex-end;gap:var(--hub-ref-space-2, .5rem);margin-top:var(--hub-ref-space-2, .5rem);padding-top:var(--hub-ref-space-2, .5rem);border-top:var(--hub-input-border-width) solid var(--hub-daterangepicker-border-color)}.hub-datepicker__panel .hub-datepicker__action{padding:.2rem .5rem;color:var(--hub-sys-color-primary, #0d6efd);font-size:var(--hub-ref-font-size-sm, .875rem);background:transparent;border:0;border-radius:var(--hub-daterangepicker-cell-border-radius);cursor:pointer}.hub-datepicker__panel .hub-datepicker__action:hover{background:var(--hub-daterangepicker-cell-hover-bg)}\n"] }]
         }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelType: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelType", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], weekdayFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekdayFormat", required: false }] }], displayFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayFormat", required: false }] }], rangeSeparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeSeparator", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], showToday: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToday", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], formText: [{ type: i0.Input, args: [{ isSignal: true, alias: "formText", required: false }] }], formTextType: [{ type: i0.Input, args: [{ isSignal: true, alias: "formTextType", required: false }] }], classlist: [{ type: i0.Input, args: [{ isSignal: true, alias: "classlist", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], viewChange: [{ type: i0.Output, args: ["viewChange"] }], cleared: [{ type: i0.Output, args: ["cleared"] }] } });
 
+/**
+ * Overrides the glyph `<hub-file-input>` renders next to a non-image file.
+ *
+ * The library never depends on `ng-hub-ui-icons`: it draws a neutral document glyph from the
+ * `--hub-file-input-file-icon` CSS token and lets you project anything richer — a `<hub-icon>` from
+ * any pack, an inline `<svg>`, an emoji — through this template. The item is the implicit context,
+ * so the glyph can vary with `file.type`.
+ *
+ * @example
+ * ```html
+ * <hub-file-input formControlName="attachments" [multiple]="true">
+ *   <ng-template hubFileIcon let-item>
+ *     <hub-icon [name]="item.file.type === 'application/pdf' ? 'fa:solid:file-pdf' : 'fa:solid:file'" />
+ *   </ng-template>
+ * </hub-file-input>
+ * ```
+ */
+class HubFileIconDirective {
+    /** Template reference for the icon. */
+    template = inject(TemplateRef);
+    /**
+     * Narrows the implicit context for the template type-checker.
+     *
+     * @param _directive - The directive instance.
+     * @param _context - The candidate context.
+     * @returns Always `true`; exists only to type `let-item`.
+     */
+    static ngTemplateContextGuard(_directive, _context) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubFileIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.1", type: HubFileIconDirective, isStandalone: true, selector: "[hubFileIcon]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubFileIconDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hubFileIcon]'
+                }]
+        }] });
+
+/**
+ * Projects arbitrary markup inside a `<hub-file-input>` dropzone, between the glyph and the
+ * invitation.
+ *
+ * The slot exists for a notice the consumer computes per instance — "2 documents still missing",
+ * a badge, a warning — which neither `dropText` (the invitation) nor `hint` (the constraints
+ * summary, rendered at the bottom) can express, and which is too instance-specific to live in the
+ * global labels.
+ *
+ * Renders nothing when the template is absent, so the dropzone is unchanged for every consumer
+ * that does not project one.
+ *
+ * @example
+ * ```html
+ * <hub-file-input [multiple]="true">
+ *   <ng-template hubFileDropzoneNotice>
+ *     <strong class="missing">2 documents still missing</strong>
+ *   </ng-template>
+ * </hub-file-input>
+ * ```
+ */
+class HubFileDropzoneNoticeDirective {
+    /** Template reference for the notice. */
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubFileDropzoneNoticeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.1", type: HubFileDropzoneNoticeDirective, isStandalone: true, selector: "[hubFileDropzoneNotice]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubFileDropzoneNoticeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hubFileDropzoneNotice]'
+                }]
+        }] });
+
+/**
+ * Replaces the entire rendering of a selected file in `<hub-file-input>`.
+ *
+ * Where `hubFileIcon` swaps a glyph, this takes over the whole row (or grid tile): thumbnail, name,
+ * size, progress bar and buttons. The template receives the item plus the actions it needs, so a
+ * custom preview keeps working removal, retry and cancel without reaching into the component.
+ *
+ * @example
+ * ```html
+ * <hub-file-input formControlName="attachments" [multiple]="true">
+ *   <ng-template hubFilePreview let-item let-remove="remove">
+ *     <article class="attachment">
+ *       <img *ngIf="item.previewUrl" [src]="item.previewUrl" alt="" />
+ *       <span>{{ item.file.name }}</span>
+ *       <button type="button" (click)="remove()">Remove</button>
+ *     </article>
+ *   </ng-template>
+ * </hub-file-input>
+ * ```
+ */
+class HubFilePreviewDirective {
+    /** Template reference for the item. */
+    template = inject(TemplateRef);
+    /**
+     * Narrows the context for the template type-checker.
+     *
+     * @param _directive - The directive instance.
+     * @param _context - The candidate context.
+     * @returns Always `true`; exists only to type `let-item` and the action bindings.
+     */
+    static ngTemplateContextGuard(_directive, _context) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubFilePreviewDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.1", type: HubFilePreviewDirective, isStandalone: true, selector: "[hubFilePreview]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubFilePreviewDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hubFilePreview]'
+                }]
+        }] });
+
+/**
+ * Tests a file against an `accept` specification.
+ *
+ * The native `accept` attribute only filters the operating-system file dialog: files arriving by
+ * drag-and-drop or paste bypass it entirely. This function applies the same rules by hand, so a
+ * dropped file is held to the constraint the consumer declared.
+ *
+ * Supported tokens, comma-separated, matched case-insensitively:
+ * - an extension — `.pdf`
+ * - a wildcard MIME type — `image/*`
+ * - an exact MIME type — `application/pdf`
+ * - the catch-alls `*` and `*​/*`
+ *
+ * Note that a MIME token can never match a file the browser could not type (`file.type === ''`,
+ * common for unusual extensions); use an extension token for those.
+ *
+ * @param file - The file to test.
+ * @param accept - The `accept` specification. Empty or `*` accepts everything.
+ * @returns `true` when the file satisfies at least one token.
+ */
+function matchesAccept(file, accept) {
+    const specification = (accept ?? '').trim();
+    if (!specification || specification === '*' || specification === '*/*') {
+        return true;
+    }
+    const name = file.name.toLowerCase();
+    const type = (file.type ?? '').toLowerCase();
+    return specification
+        .split(',')
+        .map((token) => token.trim().toLowerCase())
+        .filter((token) => token.length > 0)
+        .some((token) => {
+        if (token === '*' || token === '*/*') {
+            return true;
+        }
+        // An extension, e.g. `.pdf`
+        if (token.startsWith('.')) {
+            return name.endsWith(token);
+        }
+        // A wildcard MIME type, e.g. `image/*` — the file's type must start with `image/`
+        if (token.endsWith('/*')) {
+            return type.length > 0 && type.startsWith(token.slice(0, -1));
+        }
+        // An exact MIME type
+        return type === token;
+    });
+}
+
+/**
+ * Builds the identity key used to detect duplicate selections.
+ *
+ * Two `File` objects are never referentially equal across separate drops, so identity is derived
+ * from the tuple the browser exposes: name, byte size and last-modified timestamp. Collisions are
+ * possible in theory (same name, size and mtime) but describe the same file in every practical case.
+ *
+ * @param file - The file to key.
+ * @returns A stable string key for the file.
+ */
+function fileKey(file) {
+    return `${file.name}:${file.size}:${file.lastModified}`;
+}
+
+/**
+ * Normalizes any file-shaped control value to a plain array.
+ *
+ * Accepts the shapes a control can realistically hold: a single `File` (single mode), an array of
+ * files (multiple mode), a native `FileList` (a control fed straight from a DOM event or from the
+ * deprecated `<hub-input type="file">`), or `null`/`undefined`.
+ *
+ * @param value - The raw control value.
+ * @returns The files it contains, in order; an empty array when it holds none.
+ */
+function toFileArray(value) {
+    if (value == null) {
+        return [];
+    }
+    if (value instanceof File) {
+        return [value];
+    }
+    if (Array.isArray(value)) {
+        return value.filter((entry) => entry instanceof File);
+    }
+    if (typeof FileList !== 'undefined' && value instanceof FileList) {
+        return Array.from(value);
+    }
+    return [];
+}
+
+/**
+ * Accessible file field with drag-and-drop, clipboard paste, per-file constraints, previews and
+ * optional upload progress.
+ *
+ * A full `ng-hub-ui-forms` field: it extends {@link HubFieldControl}, so it binds with
+ * `formControlName` / `ngModel` and shares the label, helper text and validation chrome with every
+ * other control.
+ *
+ * The **form value stays native** — a `File` in single mode, a `File[]` in multiple mode, `null`
+ * when empty — so it can be handed straight to a `FormData`. The rich per-file state (preview URL,
+ * upload status, progress, error) lives in the {@link files} signal instead of contaminating the
+ * control.
+ *
+ * Constraints declared as inputs (`accept`, `maxSize`, `minSize`, `maxTotalSize`, `maxFiles`) act as
+ * a **filter**: an offending file never reaches the value and surfaces through {@link rejected}.
+ * They are enforced by hand rather than delegated to the native `accept` attribute, which only
+ * filters the operating-system dialog and is bypassed entirely by a drop or a paste. To make the
+ * *control itself* invalid — the right choice when a value can also be patched in programmatically —
+ * add the matching validators (`hubAcceptedFiles`, `hubMaxFileSize`, …).
+ *
+ * Uploading is opt-in and transport-agnostic: register a {@link HubFileUploader} with
+ * `provideHubFileUploader()` and the component drives progress, cancel and retry. With no uploader
+ * registered it is a pure picker.
+ *
+ * @example
+ * ```html
+ * <hub-file-input
+ *   formControlName="attachments"
+ *   label="Attachments"
+ *   [multiple]="true"
+ *   accept="image/*,.pdf"
+ *   [maxSize]="5 * 1024 * 1024"
+ *   [maxFiles]="3"
+ *   preview="grid"
+ *   (rejected)="notify($event)"
+ * />
+ * ```
+ */
+class HubFileInputComponent extends HubFieldControl {
+    #config = inject(HUB_FORMS_CONFIG);
+    #uploader = inject(HUB_FILE_UPLOADER, { optional: true });
+    #isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    #subscriptions = new Map();
+    _formTextTypes = FormTextTypes;
+    _items = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_items" }] : /* istanbul ignore next */ []));
+    /** Depth counter for `dragenter`/`dragleave`: children of the dropzone fire their own events. */
+    #dragDepth = 0;
+    /** Releases every object URL and aborts every in-flight upload when the field goes away. */
+    _cleanup = inject(DestroyRef).onDestroy(() => {
+        this.#subscriptions.forEach((subscription) => subscription.unsubscribe());
+        this.#subscriptions.clear();
+        this._items().forEach((item) => this.#revokePreview(item));
+    });
+    /** Label text. */
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Whether more than one file can be held. Switches the control value to `File[]`. */
+    multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Accepted file types, e.g. `image/*,.pdf`. Enforced on drop and paste, not just in the dialog. */
+    accept = input('*', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
+    /** Maximum size per file, in bytes. */
+    maxSize = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxSize" }] : /* istanbul ignore next */ []));
+    /** Minimum size per file, in bytes. Rejects the 0-byte files a failed export produces. */
+    minSize = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minSize" }] : /* istanbul ignore next */ []));
+    /** Maximum combined size of every held file, in bytes. */
+    maxTotalSize = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxTotalSize" }] : /* istanbul ignore next */ []));
+    /** Maximum number of files. Only meaningful with `multiple`. */
+    maxFiles = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxFiles" }] : /* istanbul ignore next */ []));
+    /** Whether files can be dropped onto the field. */
+    dragDrop = input(true, { ...(ngDevMode ? { debugName: "dragDrop" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Whether files can be pasted into the focused field (e.g. a screenshot). */
+    paste = input(true, { ...(ngDevMode ? { debugName: "paste" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** How the held files are rendered: not at all, as a list, or as a thumbnail grid. */
+    preview = input('list', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "preview" }] : /* istanbul ignore next */ []));
+    /** Whether the same file can be selected twice (keyed on name, size and last-modified date). */
+    allowDuplicates = input(false, { ...(ngDevMode ? { debugName: "allowDuplicates" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Opens the device camera instead of the file browser, on the platforms that support it. */
+    capture = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "capture" }] : /* istanbul ignore next */ []));
+    /** Whether a newly accepted file starts uploading immediately. Ignored with no uploader registered. */
+    autoUpload = input(true, { ...(ngDevMode ? { debugName: "autoUpload" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Overrides the "browse" button text coming from the global labels. */
+    buttonLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "buttonLabel" }] : /* istanbul ignore next */ []));
+    /** Overrides the dropzone invitation coming from the global labels. */
+    dropText = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dropText" }] : /* istanbul ignore next */ []));
+    /** Overrides the second invitation line coming from the global labels. Pass `''` to hide it. */
+    dropSubtext = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dropSubtext" }] : /* istanbul ignore next */ []));
+    /** Overrides the auto-generated hint that summarizes the active constraints. Pass `''` to hide it. */
+    hint = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    /** Helper text shown below the control. */
+    formText = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formText" }] : /* istanbul ignore next */ []));
+    /** Helper text placement. Only `bottom` is supported. */
+    formTextType = input(FormTextTypes.Bottom, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formTextType" }] : /* istanbul ignore next */ []));
+    /** Extra CSS classes applied to the host element. */
+    classlist = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classlist" }] : /* istanbul ignore next */ []));
+    /** Emits the native value whenever the selection changes. */
+    valueChange = output();
+    /** Emits the files refused by the declared constraints, with the reason for each. */
+    rejected = output();
+    /** Emits the file removed from the selection. */
+    fileRemoved = output();
+    /** Emits the full item list whenever an upload changes status or progress. */
+    uploadStateChange = output();
+    /** The hidden native file input, kept focusable so the dropzone label activates it. */
+    nativeInput = viewChild('nativeInput', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nativeInput" }] : /* istanbul ignore next */ []));
+    /** Projected per-file icon template. */
+    iconTpt = contentChild(HubFileIconDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconTpt" }] : /* istanbul ignore next */ []));
+    /** Projected per-file preview template, replacing the built-in item rendering. */
+    previewTpt = contentChild(HubFilePreviewDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "previewTpt" }] : /* istanbul ignore next */ []));
+    /** Projected notice rendered between the glyph and the invitation. */
+    noticeTpt = contentChild(HubFileDropzoneNoticeDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "noticeTpt" }] : /* istanbul ignore next */ []));
+    /** Whether a drag is currently hovering the dropzone. */
+    isDragging = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDragging" }] : /* istanbul ignore next */ []));
+    /** Latest message for the screen-reader live region. */
+    announcement = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []));
+    /** The rich, per-file state of the current selection. */
+    files = this._items.asReadonly();
+    /** Whether at least one file is currently uploading. Gate a submit button on this. */
+    uploading = computed(() => this._items().some((item) => item.status === 'uploading'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "uploading" }] : /* istanbul ignore next */ []));
+    /** Whether an uploader is registered, which is what enables progress, cancel and retry. */
+    hasUploader = !!this.#uploader;
+    /** The resolved, localizable labels. */
+    labels = computed(() => this.#config.fileInput, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
+    /** Text of the browse action. */
+    browseLabel = computed(() => this.buttonLabel() ?? this.labels().browse, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "browseLabel" }] : /* istanbul ignore next */ []));
+    /** The dropzone invitation. */
+    dropTextLabel = computed(() => this.dropText() ?? this.labels().dropHere, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dropTextLabel" }] : /* istanbul ignore next */ []));
+    /** The second invitation line. Empty renders nothing. */
+    dropSubtextLabel = computed(() => this.dropSubtext() ?? this.labels().dropSubtext, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dropSubtextLabel" }] : /* istanbul ignore next */ []));
+    /** The hint summarizing the active constraints. */
+    constraintsHint = computed(() => {
+        const override = this.hint();
+        if (override != null) {
+            return override;
+        }
+        const accept = this.accept();
+        return this.labels().constraints({
+            accept: !accept || accept === '*' || accept === '*/*' ? null : accept,
+            maxSize: this.maxSize(),
+            maxFiles: this.multiple() ? this.maxFiles() : null
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "constraintsHint" }] : /* istanbul ignore next */ []));
+    /** Whether the dropzone currently accepts a drop. */
+    dropEnabled = computed(() => this.dragDrop() && !this.disabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dropEnabled" }] : /* istanbul ignore next */ []));
+    /**
+     * Derives the native validation errors from the held files rather than from the DOM.
+     *
+     * The hidden native input is emptied after every `change` so the same file can be picked twice,
+     * and it never sees a dropped or pasted file at all. Its `validity` therefore reports
+     * `valueMissing` even when files are held — reading it would mark a satisfied field as required.
+     *
+     * @param _target - Ignored; the file state is the source of truth.
+     */
+    updateNativeErrors(_target) {
+        if (this._control) {
+            return;
+        }
+        this._nativeErrors.set(this.required() && this._items().length === 0 ? { required: true } : null);
+    }
+    /**
+     * Resolves a human-readable message for a failed upload.
+     *
+     * @param item - The item in the `error` state.
+     * @returns The error message.
+     */
+    errorText(item) {
+        const error = item.error;
+        return error?.message ?? String(error ?? '');
+    }
+    writeValue(value) {
+        this._items().forEach((item) => this.#revokePreview(item));
+        this.#subscriptions.forEach((subscription) => subscription.unsubscribe());
+        this.#subscriptions.clear();
+        this._items.set(toFileArray(value).map((file) => this.#createItem(file)));
+    }
+    /** Opens the native file dialog. */
+    open() {
+        if (!this.disabled()) {
+            this.nativeInput()?.nativeElement.click();
+        }
+    }
+    /**
+     * Removes a file from the selection, aborting its upload and releasing its preview.
+     *
+     * @param id - The id of the item to remove.
+     */
+    remove(id) {
+        const item = this._items().find((candidate) => candidate.id === id);
+        if (!item || this.disabled()) {
+            return;
+        }
+        this.#abort(id);
+        this.#revokePreview(item);
+        this._items.update((items) => items.filter((candidate) => candidate.id !== id));
+        this.#emitValue();
+        this.fileRemoved.emit(item.file);
+        this.#announce(this.labels().filesSelected(this._items().length));
+    }
+    /** Removes every file, aborting any upload in flight. */
+    clear() {
+        if (this.disabled()) {
+            return;
+        }
+        this.#subscriptions.forEach((subscription) => subscription.unsubscribe());
+        this.#subscriptions.clear();
+        this._items().forEach((item) => this.#revokePreview(item));
+        this._items.set([]);
+        this.#emitValue();
+        this.#announce(this.labels().filesSelected(0));
+    }
+    /** Uploads every file that has not been uploaded yet. No-op without a registered uploader. */
+    upload() {
+        this._items()
+            .filter((item) => item.status === 'ready' || item.status === 'error')
+            .forEach((item) => this.#startUpload(item.id));
+    }
+    /**
+     * Aborts an in-flight upload, returning the file to the `ready` state.
+     *
+     * @param id - The id of the uploading item.
+     */
+    cancel(id) {
+        if (!this.#subscriptions.has(id)) {
+            return;
+        }
+        this.#abort(id);
+        this.#patch(id, { status: 'ready', progress: null, error: null, response: null });
+    }
+    /**
+     * Re-runs the upload of a file, typically after a failure.
+     *
+     * @param id - The id of the item to upload again.
+     */
+    retry(id) {
+        this.#startUpload(id);
+    }
+    /**
+     * Reads the files chosen through the native dialog.
+     *
+     * @param event - The `change` event of the hidden native input.
+     */
+    handleNativeChange(event) {
+        const native = event.target;
+        this.#addFiles(Array.from(native.files ?? []));
+        // Without this, re-picking the very same file fires no second `change` event.
+        native.value = '';
+    }
+    /**
+     * Accepts files dropped onto the dropzone.
+     *
+     * @param event - The drop event.
+     */
+    handleDrop(event) {
+        if (!this.dropEnabled()) {
+            return;
+        }
+        event.preventDefault();
+        this.#dragDepth = 0;
+        this.isDragging.set(false);
+        this.#addFiles(this.#extractFiles(event.dataTransfer));
+        this.handleBlur();
+    }
+    /**
+     * Highlights the dropzone once a drag carrying files enters it.
+     *
+     * @param event - The dragenter event.
+     */
+    handleDragEnter(event) {
+        if (!this.dropEnabled() || !this.#carriesFiles(event)) {
+            return;
+        }
+        event.preventDefault();
+        this.#dragDepth++;
+        this.isDragging.set(true);
+    }
+    /**
+     * Keeps the drop target alive. A `dragover` that does not call `preventDefault` refuses the drop.
+     *
+     * @param event - The dragover event.
+     */
+    handleDragOver(event) {
+        if (!this.dropEnabled() || !this.#carriesFiles(event)) {
+            return;
+        }
+        event.preventDefault();
+        if (event.dataTransfer) {
+            event.dataTransfer.dropEffect = 'copy';
+        }
+    }
+    /**
+     * Un-highlights the dropzone, but only once the drag has left it *and* all of its children.
+     *
+     * @param event - The dragleave event.
+     */
+    handleDragLeave(event) {
+        if (!this.dropEnabled()) {
+            return;
+        }
+        event.preventDefault();
+        this.#dragDepth = Math.max(0, this.#dragDepth - 1);
+        if (this.#dragDepth === 0) {
+            this.isDragging.set(false);
+        }
+    }
+    /**
+     * Accepts files pasted into the focused field, e.g. a screenshot from the clipboard.
+     *
+     * @param event - The paste event.
+     */
+    handlePaste(event) {
+        if (!this.paste() || this.disabled()) {
+            return;
+        }
+        const files = this.#extractFiles(event.clipboardData);
+        if (files.length > 0) {
+            event.preventDefault();
+            this.#addFiles(files);
+        }
+    }
+    /**
+     * Builds the context handed to a projected `hubFilePreview` template.
+     *
+     * @param item - The item being rendered.
+     * @returns The template context, complete with the actions the item needs.
+     */
+    previewContext(item) {
+        return {
+            $implicit: item,
+            remove: () => this.remove(item.id),
+            retry: () => this.retry(item.id),
+            cancel: () => this.cancel(item.id)
+        };
+    }
+    /**
+     * Validates and appends the incoming files, emitting the new value and any rejections.
+     *
+     * In single mode the incoming file replaces the current one, so the constraint checks run against
+     * an empty baseline rather than against the file about to be discarded.
+     *
+     * @param incoming - The files to add.
+     */
+    #addFiles(incoming) {
+        if (this.disabled() || incoming.length === 0) {
+            return;
+        }
+        const multiple = this.multiple();
+        const current = this._items();
+        const baseline = multiple ? current : [];
+        const accepted = [];
+        const rejections = [];
+        const keys = new Set(baseline.map((item) => fileKey(item.file)));
+        let count = baseline.length;
+        let total = baseline.reduce((sum, item) => sum + item.file.size, 0);
+        for (const file of incoming) {
+            const rejection = this.#reject(file, count, total, keys);
+            if (rejection) {
+                rejections.push(rejection);
+                continue;
+            }
+            keys.add(fileKey(file));
+            count++;
+            total += file.size;
+            accepted.push(this.#createItem(file));
+        }
+        if (accepted.length > 0) {
+            if (!multiple) {
+                current.forEach((item) => this.#abort(item.id));
+                current.forEach((item) => this.#revokePreview(item));
+            }
+            this._items.set([...baseline, ...accepted]);
+            this.#emitValue();
+            if (this.#uploader && this.autoUpload()) {
+                accepted.forEach((item) => this.#startUpload(item.id));
+            }
+        }
+        if (rejections.length > 0) {
+            this.rejected.emit(rejections);
+        }
+        this.#announce(this.#summarize(accepted.length, rejections));
+    }
+    /**
+     * Applies the declared constraints to a single candidate file.
+     *
+     * @param file - The candidate.
+     * @param count - How many files are already accepted.
+     * @param total - The combined size of the already-accepted files.
+     * @param keys - Identity keys of the already-accepted files, for duplicate detection.
+     * @returns The rejection, or `null` when the file passes every constraint.
+     */
+    #reject(file, count, total, keys) {
+        const build = (reason, limit) => ({
+            file,
+            reason,
+            limit
+        });
+        if (!this.allowDuplicates() && keys.has(fileKey(file))) {
+            return build('duplicate', null);
+        }
+        if (!matchesAccept(file, this.accept())) {
+            return build('accept', this.accept());
+        }
+        const minSize = this.minSize();
+        if (minSize != null && file.size < minSize) {
+            return build('minSize', minSize);
+        }
+        const maxSize = this.maxSize();
+        if (maxSize != null && file.size > maxSize) {
+            return build('maxSize', maxSize);
+        }
+        const maxFiles = this.multiple() ? this.maxFiles() : 1;
+        if (maxFiles != null && count + 1 > maxFiles) {
+            return build('maxFiles', maxFiles);
+        }
+        const maxTotalSize = this.maxTotalSize();
+        if (maxTotalSize != null && total + file.size > maxTotalSize) {
+            return build('maxTotalSize', maxTotalSize);
+        }
+        return null;
+    }
+    /**
+     * Wraps a file in an item, minting its preview URL when it is a previewable image.
+     *
+     * @param file - The accepted file.
+     * @returns The new item, in the `ready` state.
+     */
+    #createItem(file) {
+        const previewable = this.#isBrowser && this.preview() !== 'none' && file.type.startsWith('image/');
+        return {
+            id: uuid(),
+            file,
+            previewUrl: previewable ? URL.createObjectURL(file) : null,
+            status: 'ready',
+            progress: null,
+            error: null,
+            response: null
+        };
+    }
+    /**
+     * Releases the object URL of an item. Skipping this leaks the whole file for the page's lifetime.
+     *
+     * @param item - The item whose preview should be released.
+     */
+    #revokePreview(item) {
+        if (item.previewUrl && this.#isBrowser) {
+            URL.revokeObjectURL(item.previewUrl);
+        }
+    }
+    /** Writes the native value to the form control and emits it. */
+    #emitValue() {
+        const files = this._items().map((item) => item.file);
+        const value = this.multiple() ? files : (files[0] ?? null);
+        this.onChange?.(value);
+        this.valueChange.emit(value);
+    }
+    /**
+     * Subscribes to the registered uploader for one item, mapping its events onto the item's status.
+     *
+     * @param id - The id of the item to upload.
+     */
+    #startUpload(id) {
+        const uploader = this.#uploader;
+        const item = this._items().find((candidate) => candidate.id === id);
+        if (!uploader || !item) {
+            return;
+        }
+        this.#abort(id);
+        this.#patch(id, { status: 'uploading', progress: null, error: null, response: null });
+        const subscription = uploader.upload(item.file, { id }).subscribe({
+            next: (event) => {
+                if (event.status === 'progress') {
+                    // A transport that cannot report a total leaves `progress` null, which the template
+                    // renders as an indeterminate bar rather than a bar frozen at 0%.
+                    const progress = event.total ? Math.round((event.loaded / event.total) * 100) : null;
+                    this.#patch(id, { status: 'uploading', progress });
+                    return;
+                }
+                if (event.status === 'done') {
+                    // The body is what identifies the stored file server-side; without keeping it the
+                    // application has no way to reference what it just uploaded.
+                    this.#patch(id, { status: 'done', progress: 100, error: null, response: event.response ?? null });
+                    return;
+                }
+                this.#patch(id, { status: 'error', error: event.error });
+            },
+            error: (error) => this.#patch(id, { status: 'error', error }),
+            complete: () => {
+                // An uploader that completes without emitting `done` still finished successfully.
+                const current = this._items().find((candidate) => candidate.id === id);
+                if (current?.status === 'uploading') {
+                    this.#patch(id, { status: 'done', progress: 100, error: null });
+                }
+            }
+        });
+        this.#subscriptions.set(id, subscription);
+    }
+    /**
+     * Unsubscribes from an item's upload, which aborts the underlying request.
+     *
+     * @param id - The id of the item.
+     */
+    #abort(id) {
+        this.#subscriptions.get(id)?.unsubscribe();
+        this.#subscriptions.delete(id);
+    }
+    /**
+     * Immutably updates one item and notifies listeners of the new upload state.
+     *
+     * @param id - The id of the item to update.
+     * @param patch - The fields to overwrite.
+     */
+    #patch(id, patch) {
+        let changed = false;
+        this._items.update((items) => items.map((item) => {
+            if (item.id !== id) {
+                return item;
+            }
+            changed = true;
+            return { ...item, ...patch };
+        }));
+        if (changed) {
+            this.uploadStateChange.emit(this._items());
+        }
+    }
+    /**
+     * Extracts the files carried by a drop or a paste.
+     *
+     * Reads `items` when present so non-file payloads (dragged text, HTML) are skipped, and falls
+     * back to `files` otherwise.
+     *
+     * @param transfer - The `DataTransfer` of the event.
+     * @returns The files it carries.
+     */
+    #extractFiles(transfer) {
+        if (!transfer) {
+            return [];
+        }
+        if (transfer.items?.length) {
+            return Array.from(transfer.items)
+                .filter((item) => item.kind === 'file')
+                .map((item) => item.getAsFile())
+                .filter((file) => file !== null);
+        }
+        return Array.from(transfer.files ?? []);
+    }
+    /**
+     * Whether a drag event carries files, as opposed to text or a page element.
+     *
+     * @param event - The drag event.
+     * @returns `true` when the payload includes files.
+     */
+    #carriesFiles(event) {
+        return Array.from(event.dataTransfer?.types ?? []).includes('Files');
+    }
+    /**
+     * Builds the live-region message describing the outcome of an add.
+     *
+     * @param acceptedCount - How many files were accepted.
+     * @param rejections - The files that were refused.
+     * @returns The message to announce.
+     */
+    #summarize(acceptedCount, rejections) {
+        const labels = this.labels();
+        const parts = [];
+        if (acceptedCount > 0) {
+            parts.push(labels.filesSelected(this._items().length));
+        }
+        rejections.forEach((rejection) => parts.push(labels.rejection(rejection)));
+        return parts.join(' ');
+    }
+    /**
+     * Publishes a message to the live region, forcing a re-announcement of identical text.
+     *
+     * @param message - The message to announce.
+     */
+    #announce(message) {
+        if (!message) {
+            return;
+        }
+        // A screen reader ignores a live region whose text did not change; the zero-width space makes
+        // two consecutive identical messages differ.
+        this.announcement.set(this.announcement() === message ? `${message}​` : message);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubFileInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: HubFileInputComponent, isStandalone: true, selector: "hub-file-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, minSize: { classPropertyName: "minSize", publicName: "minSize", isSignal: true, isRequired: false, transformFunction: null }, maxTotalSize: { classPropertyName: "maxTotalSize", publicName: "maxTotalSize", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, dragDrop: { classPropertyName: "dragDrop", publicName: "dragDrop", isSignal: true, isRequired: false, transformFunction: null }, paste: { classPropertyName: "paste", publicName: "paste", isSignal: true, isRequired: false, transformFunction: null }, preview: { classPropertyName: "preview", publicName: "preview", isSignal: true, isRequired: false, transformFunction: null }, allowDuplicates: { classPropertyName: "allowDuplicates", publicName: "allowDuplicates", isSignal: true, isRequired: false, transformFunction: null }, capture: { classPropertyName: "capture", publicName: "capture", isSignal: true, isRequired: false, transformFunction: null }, autoUpload: { classPropertyName: "autoUpload", publicName: "autoUpload", isSignal: true, isRequired: false, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, dropText: { classPropertyName: "dropText", publicName: "dropText", isSignal: true, isRequired: false, transformFunction: null }, dropSubtext: { classPropertyName: "dropSubtext", publicName: "dropSubtext", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, formText: { classPropertyName: "formText", publicName: "formText", isSignal: true, isRequired: false, transformFunction: null }, formTextType: { classPropertyName: "formTextType", publicName: "formTextType", isSignal: true, isRequired: false, transformFunction: null }, classlist: { classPropertyName: "classlist", publicName: "classlist", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", rejected: "rejected", fileRemoved: "fileRemoved", uploadStateChange: "uploadStateChange" }, host: { listeners: { "paste": "handlePaste($event)" }, properties: { "class": "classlist()", "class.hub-file-input-host": "true" } }, queries: [{ propertyName: "iconTpt", first: true, predicate: HubFileIconDirective, descendants: true, isSignal: true }, { propertyName: "previewTpt", first: true, predicate: HubFilePreviewDirective, descendants: true, isSignal: true }, { propertyName: "noticeTpt", first: true, predicate: HubFileDropzoneNoticeDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "nativeInput", first: true, predicate: ["nativeInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n\tclass=\"hub-field hub-file-input\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n\t[class.hub-field--valid]=\"showsValid\"\n>\n\t@if (label() || required()) {\n\t\t<label [for]=\"id\" class=\"hub-field__label\">\n\t\t\t{{ label() }}\n\t\t\t@if (required()) {\n\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t}\n\t\t</label>\n\t}\n\n\t<div class=\"hub-field__body\">\n\t\t<!--\n\t\t\tThe dropzone is a <label> bound to the hidden native input: clicking or activating it with\n\t\t\tthe keyboard opens the file dialog through the platform, so no role, tabindex or key\n\t\t\thandler is needed. The \"browse\" affordance is a <span>, not a <button>, because a button\n\t\t\tinside a label would open the dialog twice.\n\t\t-->\n\t\t<label\n\t\t\tclass=\"hub-file-input__dropzone\"\n\t\t\t[for]=\"id\"\n\t\t\t[class.hub-file-input__dropzone--dragover]=\"isDragging()\"\n\t\t\t[class.hub-file-input__dropzone--no-drop]=\"!dragDrop()\"\n\t\t\t[class.hub-file-input__dropzone--invalid]=\"isInvalid\"\n\t\t\t(dragenter)=\"handleDragEnter($event)\"\n\t\t\t(dragover)=\"handleDragOver($event)\"\n\t\t\t(dragleave)=\"handleDragLeave($event)\"\n\t\t\t(drop)=\"handleDrop($event)\"\n\t\t>\n\t\t\t<input\n\t\t\t\t#nativeInput\n\t\t\t\ttype=\"file\"\n\t\t\t\tclass=\"hub-file-input__native\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\t[accept]=\"accept()\"\n\t\t\t\t[multiple]=\"multiple()\"\n\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t[attr.capture]=\"capture()\"\n\t\t\t\t[attr.aria-required]=\"required() ? 'true' : null\"\n\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t[attr.aria-describedby]=\"constraintsHint() ? id + '-hint' : null\"\n\t\t\t\t(change)=\"handleNativeChange($event)\"\n\t\t\t\t(blur)=\"handleBlur($event)\"\n\t\t\t/>\n\n\t\t\t<span class=\"hub-file-input__icon\" aria-hidden=\"true\"></span>\n\n\t\t\t@if (noticeTpt(); as notice) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"notice.template\"></ng-container>\n\t\t\t}\n\n\t\t\t<span class=\"hub-file-input__prompt\">\n\t\t\t\t@if (dragDrop()) {\n\t\t\t\t\t<span class=\"hub-file-input__drop-text\">{{ dropTextLabel() }}</span>\n\t\t\t\t}\n\t\t\t\t@if (dropSubtextLabel()) {\n\t\t\t\t\t<span class=\"hub-file-input__drop-subtext\">{{ dropSubtextLabel() }}</span>\n\t\t\t\t}\n\t\t\t\t<span class=\"hub-file-input__browse\">{{ browseLabel() }}</span>\n\t\t\t</span>\n\n\t\t\t@if (constraintsHint()) {\n\t\t\t\t<span class=\"hub-file-input__hint\" [id]=\"id + '-hint'\">{{ constraintsHint() }}</span>\n\t\t\t}\n\t\t</label>\n\n\t\t@if (preview() !== 'none' && _items().length > 0) {\n\t\t\t<ul class=\"hub-file-input__list\" [class.hub-file-input__list--grid]=\"preview() === 'grid'\">\n\t\t\t\t@for (item of _items(); track item.id) {\n\t\t\t\t\t<li class=\"hub-file-input__item\" [attr.data-status]=\"item.status\">\n\t\t\t\t\t\t@if (previewTpt(); as tpt) {\n\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"tpt.template\"\n\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"previewContext(item)\"\n\t\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t<span class=\"hub-file-input__thumb\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t@if (item.previewUrl) {\n\t\t\t\t\t\t\t\t\t<img class=\"hub-file-input__image\" [src]=\"item.previewUrl\" alt=\"\" />\n\t\t\t\t\t\t\t\t} @else if (iconTpt(); as icon) {\n\t\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"icon.template\"\n\t\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: item }\"\n\t\t\t\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t<span class=\"hub-file-input__file-icon\"></span>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t\t<span class=\"hub-file-input__meta\">\n\t\t\t\t\t\t\t\t<span class=\"hub-file-input__name\" [title]=\"item.file.name\">{{ item.file.name }}</span>\n\t\t\t\t\t\t\t\t<span class=\"hub-file-input__size\">{{ labels().formatSize(item.file.size) }}</span>\n\n\t\t\t\t\t\t\t\t@if (item.status === 'uploading') {\n\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__progress\"\n\t\t\t\t\t\t\t\t\t\t[class.hub-file-input__progress--indeterminate]=\"item.progress === null\"\n\t\t\t\t\t\t\t\t\t\trole=\"progressbar\"\n\t\t\t\t\t\t\t\t\t\taria-valuemin=\"0\"\n\t\t\t\t\t\t\t\t\t\taria-valuemax=\"100\"\n\t\t\t\t\t\t\t\t\t\t[attr.aria-valuenow]=\"item.progress\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__progress-bar\"\n\t\t\t\t\t\t\t\t\t\t\t[style.--hub-file-input-progress-value]=\"item.progress ?? 0\"\n\t\t\t\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t@if (item.status === 'error') {\n\t\t\t\t\t\t\t\t\t<span class=\"hub-file-input__error\">{{ errorText(item) }}</span>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t\t<span class=\"hub-file-input__actions\">\n\t\t\t\t\t\t\t\t@if (item.status === 'uploading') {\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__action hub-file-input__action--cancel\"\n\t\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"labels().cancel\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"cancel(item.id)\"\n\t\t\t\t\t\t\t\t\t></button>\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t@if (item.status === 'error') {\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__action hub-file-input__action--retry\"\n\t\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"labels().retry\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"retry(item.id)\"\n\t\t\t\t\t\t\t\t\t></button>\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t@if (!disabled() && item.status !== 'uploading') {\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__action hub-file-input__action--remove\"\n\t\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"labels().remove\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"remove(item.id)\"\n\t\t\t\t\t\t\t\t\t></button>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t}\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\n\t\t\t@if (_items().length > 1 && !disabled()) {\n\t\t\t\t<button type=\"button\" class=\"hub-file-input__clear\" (click)=\"clear()\">{{ labels().clear }}</button>\n\t\t\t}\n\t\t}\n\t</div>\n\n\t@if (formText() || formTextTmp()) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span class=\"hub-field__feedback-text\" [innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n\n\t@if (showsValid && validFeedback()) {\n\t\t<div class=\"hub-field__feedback hub-field__feedback--valid\" role=\"status\">\n\t\t\t<span class=\"hub-field__feedback-text\">{{ validFeedback() }}</span>\n\t\t</div>\n\t}\n\n\t<span class=\"hub-file-input__live\" aria-live=\"polite\">{{ announcement() }}</span>\n</div>\n", styles: [".hub-file-input__dropzone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--hub-file-input-gap);min-height:var(--hub-file-input-min-height);padding:var(--hub-file-input-padding-y) var(--hub-file-input-padding-x);color:var(--hub-file-input-color);background-color:var(--hub-file-input-bg);border:var(--hub-file-input-border-width) var(--hub-file-input-border-style) var(--hub-file-input-border-color);border-radius:var(--hub-file-input-border-radius);text-align:center;cursor:pointer;transition:var(--hub-file-input-transition)}.hub-file-input__dropzone:hover{background-color:var(--hub-file-input-hover-bg);border-color:var(--hub-file-input-hover-border-color)}.hub-file-input__dropzone:has(.hub-file-input__native:focus-visible){border-color:var(--hub-file-input-focus-border-color);box-shadow:var(--hub-file-input-focus-box-shadow);outline:none}.hub-file-input__dropzone--dragover,.hub-file-input__dropzone--dragover:hover{background-color:var(--hub-file-input-dragover-bg);border-color:var(--hub-file-input-dragover-border-color)}.hub-file-input__dropzone--invalid{border-color:var(--hub-form-invalid-border-color)}.hub-file-input__dropzone:has(.hub-file-input__native:disabled){cursor:not-allowed}.hub-file-input__dropzone:has(.hub-file-input__native:disabled):hover{background-color:var(--hub-file-input-bg);border-color:var(--hub-file-input-border-color)}.hub-file-input__native{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.hub-file-input__icon{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;width:var(--hub-file-input-icon-chip-size);height:var(--hub-file-input-icon-chip-size);background-color:var(--hub-file-input-icon-bg);border-radius:var(--hub-file-input-icon-chip-radius)}.hub-file-input__icon:before{content:\"\";width:var(--hub-file-input-icon-size);height:var(--hub-file-input-icon-size);background-color:var(--hub-file-input-icon-color);-webkit-mask:var(--hub-file-input-icon) center/contain no-repeat;mask:var(--hub-file-input-icon) center/contain no-repeat}.hub-file-input__prompt{display:flex;flex-direction:var(--hub-file-input-prompt-direction);flex-wrap:wrap;align-items:var(--hub-file-input-prompt-align);justify-content:center;gap:var(--hub-file-input-prompt-gap);color:var(--hub-file-input-prompt-color);font-size:var(--hub-file-input-prompt-font-size)}.hub-file-input__drop-text{color:var(--hub-file-input-drop-text-color);font-size:var(--hub-file-input-drop-text-font-size);font-weight:var(--hub-file-input-drop-text-font-weight)}.hub-file-input__drop-subtext{color:var(--hub-file-input-drop-subtext-color);font-size:var(--hub-file-input-drop-subtext-font-size)}.hub-file-input__browse{display:inline-flex;align-items:center;gap:var(--hub-file-input-browse-gap);margin-top:var(--hub-file-input-browse-margin-top);padding:var(--hub-file-input-browse-padding-y) var(--hub-file-input-browse-padding-x);color:var(--hub-file-input-browse-color);font-size:var(--hub-file-input-browse-font-size);font-weight:var(--hub-file-input-browse-font-weight);text-decoration:var(--hub-file-input-browse-text-decoration);background-color:var(--hub-file-input-browse-bg);border-radius:var(--hub-file-input-browse-radius);transition:var(--hub-file-input-transition)}.hub-file-input__browse:before{content:\"\";display:var(--hub-file-input-browse-icon-display);flex:0 0 auto;width:var(--hub-file-input-browse-icon-size);height:var(--hub-file-input-browse-icon-size);background-color:currentcolor;-webkit-mask:var(--hub-file-input-browse-icon) center/contain no-repeat;mask:var(--hub-file-input-browse-icon) center/contain no-repeat}.hub-file-input__dropzone:hover .hub-file-input__browse{background-color:var(--hub-file-input-browse-hover-bg)}.hub-file-input__hint{color:var(--hub-file-input-hint-color);font-size:var(--hub-file-input-hint-font-size)}.hub-file-input__list{display:flex;flex-direction:column;gap:var(--hub-file-input-list-gap);margin:var(--hub-file-input-list-margin-top) 0 0;padding:0;list-style:none}.hub-file-input__list--grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--hub-file-input-grid-min-width),1fr));gap:var(--hub-file-input-grid-gap)}.hub-file-input__item{display:flex;align-items:center;gap:var(--hub-file-input-item-gap);padding:var(--hub-file-input-item-padding-y) var(--hub-file-input-item-padding-x);color:var(--hub-file-input-item-color);background-color:var(--hub-file-input-item-bg);border:var(--hub-file-input-border-width) solid var(--hub-file-input-item-border-color);border-radius:var(--hub-file-input-item-border-radius);min-width:0}.hub-file-input__item[data-status=error]{border-color:var(--hub-file-input-error-color)}.hub-file-input__item[data-status=done]{border-color:var(--hub-file-input-done-color)}.hub-file-input__thumb{display:flex;flex:none;align-items:center;justify-content:center;width:var(--hub-file-input-thumb-size);height:var(--hub-file-input-thumb-size);overflow:hidden;background-color:var(--hub-file-input-thumb-bg);border-radius:var(--hub-file-input-thumb-radius)}.hub-file-input__image{width:100%;height:100%;object-fit:cover}.hub-file-input__file-icon{display:block;width:var(--hub-file-input-file-icon-size);height:var(--hub-file-input-file-icon-size);background-color:var(--hub-file-input-file-icon-color);-webkit-mask:var(--hub-file-input-file-icon) center/contain no-repeat;mask:var(--hub-file-input-file-icon) center/contain no-repeat}.hub-file-input__meta{display:flex;flex:1 1 auto;flex-direction:column;gap:.125rem;min-width:0}.hub-file-input__name{overflow:hidden;font-size:var(--hub-file-input-name-font-size);text-overflow:ellipsis;white-space:nowrap}.hub-file-input__size{color:var(--hub-file-input-size-color);font-size:var(--hub-file-input-size-font-size)}.hub-file-input__error{color:var(--hub-file-input-error-color);font-size:var(--hub-file-input-error-font-size)}.hub-file-input__progress{display:block;width:100%;height:var(--hub-file-input-progress-height);overflow:hidden;background-color:var(--hub-file-input-progress-track-bg);border-radius:var(--hub-file-input-progress-radius)}.hub-file-input__progress-bar{display:block;width:calc(var(--hub-file-input-progress-value, 0) * 1%);height:100%;background-color:var(--hub-file-input-progress-bar-bg);border-radius:inherit;transition:width .15s linear}.hub-file-input__progress--indeterminate .hub-file-input__progress-bar{width:33%;animation:hub-file-input-indeterminate var(--hub-file-input-progress-indeterminate-duration) ease-in-out infinite}.hub-file-input__actions{display:flex;flex:none;align-items:center;gap:.25rem}.hub-file-input__action{display:block;width:var(--hub-file-input-action-size);height:var(--hub-file-input-action-size);padding:0;background-color:var(--hub-file-input-action-color);border:0;cursor:pointer;transition:var(--hub-file-input-transition)}.hub-file-input__action:hover{background-color:var(--hub-file-input-action-hover-color)}.hub-file-input__action--remove{-webkit-mask:var(--hub-file-input-remove-icon) center/contain no-repeat;mask:var(--hub-file-input-remove-icon) center/contain no-repeat}.hub-file-input__action--remove:hover{background-color:var(--hub-file-input-remove-hover-color)}.hub-file-input__action--cancel{-webkit-mask:var(--hub-file-input-cancel-icon) center/contain no-repeat;mask:var(--hub-file-input-cancel-icon) center/contain no-repeat}.hub-file-input__action--retry{-webkit-mask:var(--hub-file-input-retry-icon) center/contain no-repeat;mask:var(--hub-file-input-retry-icon) center/contain no-repeat}.hub-file-input__clear{align-self:flex-start;margin-top:var(--hub-file-input-list-margin-top);padding:0;color:var(--hub-file-input-clear-color);font-size:var(--hub-file-input-clear-font-size);background:none;border:0;text-decoration:underline;cursor:pointer}.hub-file-input__item[data-status=done] .hub-file-input__size:after{display:inline-block;width:.75em;height:.75em;margin-inline-start:.375em;background-color:var(--hub-file-input-done-color);-webkit-mask:var(--hub-file-input-done-icon) center/contain no-repeat;mask:var(--hub-file-input-done-icon) center/contain no-repeat;content:\"\"}.hub-file-input__live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.hub-file-input__list--grid .hub-file-input__item{flex-direction:column;align-items:stretch}.hub-file-input__list--grid .hub-file-input__thumb{width:100%;height:var(--hub-file-input-grid-thumb-height)}.hub-file-input__list--grid .hub-file-input__actions{justify-content:flex-end}@keyframes hub-file-input-indeterminate{0%{transform:translate(-100%)}to{transform:translate(300%)}}@media(prefers-reduced-motion:reduce){.hub-file-input__progress--indeterminate .hub-file-input__progress-bar{animation:none;width:100%;opacity:.5}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubFileInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hub-file-input', imports: [NgTemplateOutlet, KeyValuePipe], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        '[class]': 'classlist()',
+                        '[class.hub-file-input-host]': 'true',
+                        '(paste)': 'handlePaste($event)'
+                    }, template: "<div\n\tclass=\"hub-field hub-file-input\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n\t[class.hub-field--valid]=\"showsValid\"\n>\n\t@if (label() || required()) {\n\t\t<label [for]=\"id\" class=\"hub-field__label\">\n\t\t\t{{ label() }}\n\t\t\t@if (required()) {\n\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t}\n\t\t</label>\n\t}\n\n\t<div class=\"hub-field__body\">\n\t\t<!--\n\t\t\tThe dropzone is a <label> bound to the hidden native input: clicking or activating it with\n\t\t\tthe keyboard opens the file dialog through the platform, so no role, tabindex or key\n\t\t\thandler is needed. The \"browse\" affordance is a <span>, not a <button>, because a button\n\t\t\tinside a label would open the dialog twice.\n\t\t-->\n\t\t<label\n\t\t\tclass=\"hub-file-input__dropzone\"\n\t\t\t[for]=\"id\"\n\t\t\t[class.hub-file-input__dropzone--dragover]=\"isDragging()\"\n\t\t\t[class.hub-file-input__dropzone--no-drop]=\"!dragDrop()\"\n\t\t\t[class.hub-file-input__dropzone--invalid]=\"isInvalid\"\n\t\t\t(dragenter)=\"handleDragEnter($event)\"\n\t\t\t(dragover)=\"handleDragOver($event)\"\n\t\t\t(dragleave)=\"handleDragLeave($event)\"\n\t\t\t(drop)=\"handleDrop($event)\"\n\t\t>\n\t\t\t<input\n\t\t\t\t#nativeInput\n\t\t\t\ttype=\"file\"\n\t\t\t\tclass=\"hub-file-input__native\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\t[accept]=\"accept()\"\n\t\t\t\t[multiple]=\"multiple()\"\n\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t[attr.capture]=\"capture()\"\n\t\t\t\t[attr.aria-required]=\"required() ? 'true' : null\"\n\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t[attr.aria-describedby]=\"constraintsHint() ? id + '-hint' : null\"\n\t\t\t\t(change)=\"handleNativeChange($event)\"\n\t\t\t\t(blur)=\"handleBlur($event)\"\n\t\t\t/>\n\n\t\t\t<span class=\"hub-file-input__icon\" aria-hidden=\"true\"></span>\n\n\t\t\t@if (noticeTpt(); as notice) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"notice.template\"></ng-container>\n\t\t\t}\n\n\t\t\t<span class=\"hub-file-input__prompt\">\n\t\t\t\t@if (dragDrop()) {\n\t\t\t\t\t<span class=\"hub-file-input__drop-text\">{{ dropTextLabel() }}</span>\n\t\t\t\t}\n\t\t\t\t@if (dropSubtextLabel()) {\n\t\t\t\t\t<span class=\"hub-file-input__drop-subtext\">{{ dropSubtextLabel() }}</span>\n\t\t\t\t}\n\t\t\t\t<span class=\"hub-file-input__browse\">{{ browseLabel() }}</span>\n\t\t\t</span>\n\n\t\t\t@if (constraintsHint()) {\n\t\t\t\t<span class=\"hub-file-input__hint\" [id]=\"id + '-hint'\">{{ constraintsHint() }}</span>\n\t\t\t}\n\t\t</label>\n\n\t\t@if (preview() !== 'none' && _items().length > 0) {\n\t\t\t<ul class=\"hub-file-input__list\" [class.hub-file-input__list--grid]=\"preview() === 'grid'\">\n\t\t\t\t@for (item of _items(); track item.id) {\n\t\t\t\t\t<li class=\"hub-file-input__item\" [attr.data-status]=\"item.status\">\n\t\t\t\t\t\t@if (previewTpt(); as tpt) {\n\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"tpt.template\"\n\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"previewContext(item)\"\n\t\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t<span class=\"hub-file-input__thumb\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t@if (item.previewUrl) {\n\t\t\t\t\t\t\t\t\t<img class=\"hub-file-input__image\" [src]=\"item.previewUrl\" alt=\"\" />\n\t\t\t\t\t\t\t\t} @else if (iconTpt(); as icon) {\n\t\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"icon.template\"\n\t\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: item }\"\n\t\t\t\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t<span class=\"hub-file-input__file-icon\"></span>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t\t<span class=\"hub-file-input__meta\">\n\t\t\t\t\t\t\t\t<span class=\"hub-file-input__name\" [title]=\"item.file.name\">{{ item.file.name }}</span>\n\t\t\t\t\t\t\t\t<span class=\"hub-file-input__size\">{{ labels().formatSize(item.file.size) }}</span>\n\n\t\t\t\t\t\t\t\t@if (item.status === 'uploading') {\n\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__progress\"\n\t\t\t\t\t\t\t\t\t\t[class.hub-file-input__progress--indeterminate]=\"item.progress === null\"\n\t\t\t\t\t\t\t\t\t\trole=\"progressbar\"\n\t\t\t\t\t\t\t\t\t\taria-valuemin=\"0\"\n\t\t\t\t\t\t\t\t\t\taria-valuemax=\"100\"\n\t\t\t\t\t\t\t\t\t\t[attr.aria-valuenow]=\"item.progress\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__progress-bar\"\n\t\t\t\t\t\t\t\t\t\t\t[style.--hub-file-input-progress-value]=\"item.progress ?? 0\"\n\t\t\t\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t@if (item.status === 'error') {\n\t\t\t\t\t\t\t\t\t<span class=\"hub-file-input__error\">{{ errorText(item) }}</span>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t\t<span class=\"hub-file-input__actions\">\n\t\t\t\t\t\t\t\t@if (item.status === 'uploading') {\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__action hub-file-input__action--cancel\"\n\t\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"labels().cancel\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"cancel(item.id)\"\n\t\t\t\t\t\t\t\t\t></button>\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t@if (item.status === 'error') {\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__action hub-file-input__action--retry\"\n\t\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"labels().retry\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"retry(item.id)\"\n\t\t\t\t\t\t\t\t\t></button>\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t@if (!disabled() && item.status !== 'uploading') {\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__action hub-file-input__action--remove\"\n\t\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"labels().remove\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"remove(item.id)\"\n\t\t\t\t\t\t\t\t\t></button>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t}\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\n\t\t\t@if (_items().length > 1 && !disabled()) {\n\t\t\t\t<button type=\"button\" class=\"hub-file-input__clear\" (click)=\"clear()\">{{ labels().clear }}</button>\n\t\t\t}\n\t\t}\n\t</div>\n\n\t@if (formText() || formTextTmp()) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span class=\"hub-field__feedback-text\" [innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n\n\t@if (showsValid && validFeedback()) {\n\t\t<div class=\"hub-field__feedback hub-field__feedback--valid\" role=\"status\">\n\t\t\t<span class=\"hub-field__feedback-text\">{{ validFeedback() }}</span>\n\t\t</div>\n\t}\n\n\t<span class=\"hub-file-input__live\" aria-live=\"polite\">{{ announcement() }}</span>\n</div>\n", styles: [".hub-file-input__dropzone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--hub-file-input-gap);min-height:var(--hub-file-input-min-height);padding:var(--hub-file-input-padding-y) var(--hub-file-input-padding-x);color:var(--hub-file-input-color);background-color:var(--hub-file-input-bg);border:var(--hub-file-input-border-width) var(--hub-file-input-border-style) var(--hub-file-input-border-color);border-radius:var(--hub-file-input-border-radius);text-align:center;cursor:pointer;transition:var(--hub-file-input-transition)}.hub-file-input__dropzone:hover{background-color:var(--hub-file-input-hover-bg);border-color:var(--hub-file-input-hover-border-color)}.hub-file-input__dropzone:has(.hub-file-input__native:focus-visible){border-color:var(--hub-file-input-focus-border-color);box-shadow:var(--hub-file-input-focus-box-shadow);outline:none}.hub-file-input__dropzone--dragover,.hub-file-input__dropzone--dragover:hover{background-color:var(--hub-file-input-dragover-bg);border-color:var(--hub-file-input-dragover-border-color)}.hub-file-input__dropzone--invalid{border-color:var(--hub-form-invalid-border-color)}.hub-file-input__dropzone:has(.hub-file-input__native:disabled){cursor:not-allowed}.hub-file-input__dropzone:has(.hub-file-input__native:disabled):hover{background-color:var(--hub-file-input-bg);border-color:var(--hub-file-input-border-color)}.hub-file-input__native{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.hub-file-input__icon{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;width:var(--hub-file-input-icon-chip-size);height:var(--hub-file-input-icon-chip-size);background-color:var(--hub-file-input-icon-bg);border-radius:var(--hub-file-input-icon-chip-radius)}.hub-file-input__icon:before{content:\"\";width:var(--hub-file-input-icon-size);height:var(--hub-file-input-icon-size);background-color:var(--hub-file-input-icon-color);-webkit-mask:var(--hub-file-input-icon) center/contain no-repeat;mask:var(--hub-file-input-icon) center/contain no-repeat}.hub-file-input__prompt{display:flex;flex-direction:var(--hub-file-input-prompt-direction);flex-wrap:wrap;align-items:var(--hub-file-input-prompt-align);justify-content:center;gap:var(--hub-file-input-prompt-gap);color:var(--hub-file-input-prompt-color);font-size:var(--hub-file-input-prompt-font-size)}.hub-file-input__drop-text{color:var(--hub-file-input-drop-text-color);font-size:var(--hub-file-input-drop-text-font-size);font-weight:var(--hub-file-input-drop-text-font-weight)}.hub-file-input__drop-subtext{color:var(--hub-file-input-drop-subtext-color);font-size:var(--hub-file-input-drop-subtext-font-size)}.hub-file-input__browse{display:inline-flex;align-items:center;gap:var(--hub-file-input-browse-gap);margin-top:var(--hub-file-input-browse-margin-top);padding:var(--hub-file-input-browse-padding-y) var(--hub-file-input-browse-padding-x);color:var(--hub-file-input-browse-color);font-size:var(--hub-file-input-browse-font-size);font-weight:var(--hub-file-input-browse-font-weight);text-decoration:var(--hub-file-input-browse-text-decoration);background-color:var(--hub-file-input-browse-bg);border-radius:var(--hub-file-input-browse-radius);transition:var(--hub-file-input-transition)}.hub-file-input__browse:before{content:\"\";display:var(--hub-file-input-browse-icon-display);flex:0 0 auto;width:var(--hub-file-input-browse-icon-size);height:var(--hub-file-input-browse-icon-size);background-color:currentcolor;-webkit-mask:var(--hub-file-input-browse-icon) center/contain no-repeat;mask:var(--hub-file-input-browse-icon) center/contain no-repeat}.hub-file-input__dropzone:hover .hub-file-input__browse{background-color:var(--hub-file-input-browse-hover-bg)}.hub-file-input__hint{color:var(--hub-file-input-hint-color);font-size:var(--hub-file-input-hint-font-size)}.hub-file-input__list{display:flex;flex-direction:column;gap:var(--hub-file-input-list-gap);margin:var(--hub-file-input-list-margin-top) 0 0;padding:0;list-style:none}.hub-file-input__list--grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--hub-file-input-grid-min-width),1fr));gap:var(--hub-file-input-grid-gap)}.hub-file-input__item{display:flex;align-items:center;gap:var(--hub-file-input-item-gap);padding:var(--hub-file-input-item-padding-y) var(--hub-file-input-item-padding-x);color:var(--hub-file-input-item-color);background-color:var(--hub-file-input-item-bg);border:var(--hub-file-input-border-width) solid var(--hub-file-input-item-border-color);border-radius:var(--hub-file-input-item-border-radius);min-width:0}.hub-file-input__item[data-status=error]{border-color:var(--hub-file-input-error-color)}.hub-file-input__item[data-status=done]{border-color:var(--hub-file-input-done-color)}.hub-file-input__thumb{display:flex;flex:none;align-items:center;justify-content:center;width:var(--hub-file-input-thumb-size);height:var(--hub-file-input-thumb-size);overflow:hidden;background-color:var(--hub-file-input-thumb-bg);border-radius:var(--hub-file-input-thumb-radius)}.hub-file-input__image{width:100%;height:100%;object-fit:cover}.hub-file-input__file-icon{display:block;width:var(--hub-file-input-file-icon-size);height:var(--hub-file-input-file-icon-size);background-color:var(--hub-file-input-file-icon-color);-webkit-mask:var(--hub-file-input-file-icon) center/contain no-repeat;mask:var(--hub-file-input-file-icon) center/contain no-repeat}.hub-file-input__meta{display:flex;flex:1 1 auto;flex-direction:column;gap:.125rem;min-width:0}.hub-file-input__name{overflow:hidden;font-size:var(--hub-file-input-name-font-size);text-overflow:ellipsis;white-space:nowrap}.hub-file-input__size{color:var(--hub-file-input-size-color);font-size:var(--hub-file-input-size-font-size)}.hub-file-input__error{color:var(--hub-file-input-error-color);font-size:var(--hub-file-input-error-font-size)}.hub-file-input__progress{display:block;width:100%;height:var(--hub-file-input-progress-height);overflow:hidden;background-color:var(--hub-file-input-progress-track-bg);border-radius:var(--hub-file-input-progress-radius)}.hub-file-input__progress-bar{display:block;width:calc(var(--hub-file-input-progress-value, 0) * 1%);height:100%;background-color:var(--hub-file-input-progress-bar-bg);border-radius:inherit;transition:width .15s linear}.hub-file-input__progress--indeterminate .hub-file-input__progress-bar{width:33%;animation:hub-file-input-indeterminate var(--hub-file-input-progress-indeterminate-duration) ease-in-out infinite}.hub-file-input__actions{display:flex;flex:none;align-items:center;gap:.25rem}.hub-file-input__action{display:block;width:var(--hub-file-input-action-size);height:var(--hub-file-input-action-size);padding:0;background-color:var(--hub-file-input-action-color);border:0;cursor:pointer;transition:var(--hub-file-input-transition)}.hub-file-input__action:hover{background-color:var(--hub-file-input-action-hover-color)}.hub-file-input__action--remove{-webkit-mask:var(--hub-file-input-remove-icon) center/contain no-repeat;mask:var(--hub-file-input-remove-icon) center/contain no-repeat}.hub-file-input__action--remove:hover{background-color:var(--hub-file-input-remove-hover-color)}.hub-file-input__action--cancel{-webkit-mask:var(--hub-file-input-cancel-icon) center/contain no-repeat;mask:var(--hub-file-input-cancel-icon) center/contain no-repeat}.hub-file-input__action--retry{-webkit-mask:var(--hub-file-input-retry-icon) center/contain no-repeat;mask:var(--hub-file-input-retry-icon) center/contain no-repeat}.hub-file-input__clear{align-self:flex-start;margin-top:var(--hub-file-input-list-margin-top);padding:0;color:var(--hub-file-input-clear-color);font-size:var(--hub-file-input-clear-font-size);background:none;border:0;text-decoration:underline;cursor:pointer}.hub-file-input__item[data-status=done] .hub-file-input__size:after{display:inline-block;width:.75em;height:.75em;margin-inline-start:.375em;background-color:var(--hub-file-input-done-color);-webkit-mask:var(--hub-file-input-done-icon) center/contain no-repeat;mask:var(--hub-file-input-done-icon) center/contain no-repeat;content:\"\"}.hub-file-input__live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.hub-file-input__list--grid .hub-file-input__item{flex-direction:column;align-items:stretch}.hub-file-input__list--grid .hub-file-input__thumb{width:100%;height:var(--hub-file-input-grid-thumb-height)}.hub-file-input__list--grid .hub-file-input__actions{justify-content:flex-end}@keyframes hub-file-input-indeterminate{0%{transform:translate(-100%)}to{transform:translate(300%)}}@media(prefers-reduced-motion:reduce){.hub-file-input__progress--indeterminate .hub-file-input__progress-bar{animation:none;width:100%;opacity:.5}}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], minSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSize", required: false }] }], maxTotalSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxTotalSize", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], dragDrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragDrop", required: false }] }], paste: [{ type: i0.Input, args: [{ isSignal: true, alias: "paste", required: false }] }], preview: [{ type: i0.Input, args: [{ isSignal: true, alias: "preview", required: false }] }], allowDuplicates: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDuplicates", required: false }] }], capture: [{ type: i0.Input, args: [{ isSignal: true, alias: "capture", required: false }] }], autoUpload: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoUpload", required: false }] }], buttonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLabel", required: false }] }], dropText: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropText", required: false }] }], dropSubtext: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropSubtext", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], formText: [{ type: i0.Input, args: [{ isSignal: true, alias: "formText", required: false }] }], formTextType: [{ type: i0.Input, args: [{ isSignal: true, alias: "formTextType", required: false }] }], classlist: [{ type: i0.Input, args: [{ isSignal: true, alias: "classlist", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], rejected: [{ type: i0.Output, args: ["rejected"] }], fileRemoved: [{ type: i0.Output, args: ["fileRemoved"] }], uploadStateChange: [{ type: i0.Output, args: ["uploadStateChange"] }], nativeInput: [{ type: i0.ViewChild, args: ['nativeInput', { isSignal: true }] }], iconTpt: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubFileIconDirective), { isSignal: true }] }], previewTpt: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubFilePreviewDirective), { isSignal: true }] }], noticeTpt: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubFileDropzoneNoticeDirective), { isSignal: true }] }] } });
+
 /**
  * Inverts a HEX color, or returns the best contrasting black/white when `bw` is enabled.
  */
@@ -6317,6 +7298,166 @@ function hubAreEqual(primaryControlName, secondaryControlName) {
     };
 }
 
+/**
+ * Validates that every file held by the control matches an `accept` specification.
+ *
+ * Complements the `accept` input of `<hub-file-input>`, which *filters* offending files before they
+ * reach the value. This validator instead makes the control **invalid**, which is what you want when
+ * files can also arrive from outside the component (patched value, restored draft, another control).
+ *
+ * Sets the `fileAccept` error with `{ accept, files }`, where `files` lists the offending names.
+ * An empty control is valid — pair it with `Validators.required` to demand a file.
+ *
+ * @param accept - The accept specification, e.g. `'image/*,.pdf'`.
+ * @returns A validator function for a file-valued control.
+ *
+ * @example
+ * ```ts
+ * new FormControl<File[]>([], [hubAcceptedFiles('image/*,.pdf')]);
+ * ```
+ */
+function hubAcceptedFiles(accept) {
+    return (control) => {
+        const offending = toFileArray(control.value).filter((file) => !matchesAccept(file, accept));
+        if (offending.length === 0) {
+            return null;
+        }
+        return { fileAccept: { accept, files: offending.map((file) => file.name) } };
+    };
+}
+
+/**
+ * Validates that no file held by the control exceeds a maximum size.
+ *
+ * Sets the `fileMaxSize` error with `{ max, actual, files }`, where `actual` is the size of the
+ * largest offending file and `files` lists the offending names. An empty control is valid.
+ *
+ * @param maxBytes - The maximum size per file, in bytes.
+ * @returns A validator function for a file-valued control.
+ *
+ * @example
+ * ```ts
+ * new FormControl<File | null>(null, [hubMaxFileSize(5 * 1024 * 1024)]);
+ * ```
+ */
+function hubMaxFileSize(maxBytes) {
+    return (control) => {
+        const offending = toFileArray(control.value).filter((file) => file.size > maxBytes);
+        if (offending.length === 0) {
+            return null;
+        }
+        return {
+            fileMaxSize: {
+                max: maxBytes,
+                actual: Math.max(...offending.map((file) => file.size)),
+                files: offending.map((file) => file.name)
+            }
+        };
+    };
+}
+
+/**
+ * Validates that no file held by the control falls below a minimum size.
+ *
+ * Useful to reject empty or truncated uploads (a 0-byte file is a common symptom of a failed export).
+ * Sets the `fileMinSize` error with `{ min, actual, files }`, where `actual` is the size of the
+ * smallest offending file. An empty control is valid.
+ *
+ * @param minBytes - The minimum size per file, in bytes.
+ * @returns A validator function for a file-valued control.
+ *
+ * @example
+ * ```ts
+ * new FormControl<File | null>(null, [hubMinFileSize(1)]);
+ * ```
+ */
+function hubMinFileSize(minBytes) {
+    return (control) => {
+        const offending = toFileArray(control.value).filter((file) => file.size < minBytes);
+        if (offending.length === 0) {
+            return null;
+        }
+        return {
+            fileMinSize: {
+                min: minBytes,
+                actual: Math.min(...offending.map((file) => file.size)),
+                files: offending.map((file) => file.name)
+            }
+        };
+    };
+}
+
+/**
+ * Validates that the combined size of every file held by the control stays within a budget.
+ *
+ * This is the constraint a request-body limit actually enforces, and it is not implied by a
+ * per-file maximum: ten files of 2 MB pass `hubMaxFileSize(5 MB)` and still blow a 10 MB request.
+ *
+ * Sets the `fileMaxTotalSize` error with `{ max, actual }`. An empty control is valid.
+ *
+ * @param maxBytes - The maximum combined size, in bytes.
+ * @returns A validator function for a file-valued control.
+ *
+ * @example
+ * ```ts
+ * new FormControl<File[]>([], [hubMaxTotalSize(20 * 1024 * 1024)]);
+ * ```
+ */
+function hubMaxTotalSize(maxBytes) {
+    return (control) => {
+        const files = toFileArray(control.value);
+        if (files.length === 0) {
+            return null;
+        }
+        const total = files.reduce((sum, file) => sum + file.size, 0);
+        return total > maxBytes ? { fileMaxTotalSize: { max: maxBytes, actual: total } } : null;
+    };
+}
+
+/**
+ * Validates that the control holds at most `max` files.
+ *
+ * Sets the `fileMaxFiles` error with `{ max, actual }`. An empty control is valid.
+ *
+ * @param max - The maximum number of files.
+ * @returns A validator function for a file-valued control.
+ *
+ * @example
+ * ```ts
+ * new FormControl<File[]>([], [hubMaxFiles(3)]);
+ * ```
+ */
+function hubMaxFiles(max) {
+    return (control) => {
+        const count = toFileArray(control.value).length;
+        return count > max ? { fileMaxFiles: { max, actual: count } } : null;
+    };
+}
+
+/**
+ * Validates that the control holds at least `min` files.
+ *
+ * Unlike the other file validators, this one **does** reject an empty control: holding zero files
+ * is precisely what a minimum forbids. It therefore subsumes `Validators.required`, and adding both
+ * only produces two errors for the same cause.
+ *
+ * Sets the `fileMinFiles` error with `{ min, actual }`.
+ *
+ * @param min - The minimum number of files.
+ * @returns A validator function for a file-valued control.
+ *
+ * @example
+ * ```ts
+ * new FormControl<File[]>([], [hubMinFiles(2)]);
+ * ```
+ */
+function hubMinFiles(min) {
+    return (control) => {
+        const count = toFileArray(control.value).length;
+        return count < min ? { fileMinFiles: { min, actual: count } } : null;
+    };
+}
+
 /**
  * Ready-made {@link HubFormControlAdapter} backed by `HubInputComponent` /
  * `HubSelectComponent`.
@@ -6385,5 +7526,5 @@ const hubFormControlAdapter = {
  * Generated bundle index. Do not edit.
  */
 
-export { FormTextTypes, HUB_FORMS_CONFIG, HubAutoresizeDirective, HubDatepickerComponent, HubFieldControl, HubFieldsetComponent, HubFormComponent, HubFormControl, HubFormTextDirective, HubGroupControl, HubInputComponent, HubInputFormats, HubInputPrefixDirective, HubInputSuffixDirective, HubInvertColorPipe, HubJoinButLastPipe, HubLabelTypes, HubLegendComponent, HubLegendDirective, HubMapPipe, HubOtpInputComponent, HubSafeUrlPipe, HubSegmentedComponent, HubSelectComponent, HubSelectFormats, HubSliderComponent, HubSnakeUpperPipe, HubTextareaComponent, HubUcfirstPipe, HubValidationErrorDirective, NgClearButtonTemplateDirective, NgFooterTemplateDirective, NgHeaderTemplateDirective, NgLabelTemplateDirective, NgLoadingSpinnerTemplateDirective, NgLoadingTextTemplateDirective, NgMultiLabelTemplateDirective, NgNotFoundTemplateDirective, NgOptgroupTemplateDirective, NgOptionComponent, NgOptionTemplateDirective, NgSelectConfig, NgTagTemplateDirective, NgTypeToSearchTemplateDirective, applyMask, areEqual, camelToSnakeUpper, controlHasMinOrMaxValidator, defaultHubDatepickerConfig, defaultHubDatepickerLabels, defaultHubFormsConfig, defaultInvalidFeedback, get, getActiveElement, getMinOrMaxValueFromValidator, hubAreEqual, hubFormControlAdapter, isDefined$1 as isDefined, isMaskActive, isString, joinButLast, provideHubForms, runInZone, uuid };
+export { FormTextTypes, HUB_FILE_UPLOADER, HUB_FORMS_CONFIG, HubAutoresizeDirective, HubDatepickerComponent, HubFieldControl, HubFieldsetComponent, HubFileDropzoneNoticeDirective, HubFileIconDirective, HubFileInputComponent, HubFilePreviewDirective, HubFormComponent, HubFormControl, HubFormTextDirective, HubGroupControl, HubInputComponent, HubInputFormats, HubInputPrefixDirective, HubInputSuffixDirective, HubInvertColorPipe, HubJoinButLastPipe, HubLabelTypes, HubLegendComponent, HubLegendDirective, HubMapPipe, HubOtpInputComponent, HubSafeUrlPipe, HubSegmentedComponent, HubSelectComponent, HubSelectFormats, HubSliderComponent, HubSnakeUpperPipe, HubTextareaComponent, HubUcfirstPipe, HubValidationErrorDirective, NgClearButtonTemplateDirective, NgFooterTemplateDirective, NgHeaderTemplateDirective, NgLabelTemplateDirective, NgLoadingSpinnerTemplateDirective, NgLoadingTextTemplateDirective, NgMultiLabelTemplateDirective, NgNotFoundTemplateDirective, NgOptgroupTemplateDirective, NgOptionComponent, NgOptionTemplateDirective, NgSelectConfig, NgTagTemplateDirective, NgTypeToSearchTemplateDirective, applyMask, areEqual, camelToSnakeUpper, controlHasMinOrMaxValidator, defaultHubDatepickerConfig, defaultHubDatepickerLabels, defaultHubFileInputLabels, defaultHubFormsConfig, defaultInvalidFeedback, fileKey, formatFileSize, get, getActiveElement, getMinOrMaxValueFromValidator, hubAcceptedFiles, hubAreEqual, hubFormControlAdapter, hubMaxFileSize, hubMaxFiles, hubMaxTotalSize, hubMinFileSize, hubMinFiles, isDefined$1 as isDefined, isMaskActive, isString, joinButLast, matchesAccept, provideHubFileUploader, provideHubForms, runInZone, toFileArray, uuid };
 //# sourceMappingURL=ng-hub-ui-forms.mjs.map