ng-hub-ui-forms 22.4.0 → 22.6.0

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, model, HostBinding, Directive, inject, TemplateRef, InjectionToken, makeEnvironmentProviders, ElementRef, ChangeDetectorRef, contentChild, contentChildren, signal, HostListener, computed, effect, numberAttribute, booleanAttribute, output, DestroyRef, viewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, viewChildren, PLATFORM_ID, afterRenderEffect, afterNextRender, Injectable, Renderer2, NgZone, afterEveryRender, HostAttributeToken, linkedSignal, forwardRef, Injector, 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';
@@ -258,14 +258,16 @@ class HubFormControl {
         control['toggle'] = this.toggle;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubFormControl, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: HubFormControl, isStandalone: true, inputs: { formControlName: { classPropertyName: "formControlName", publicName: "formControlName", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { required: "requiredChange" }, host: { properties: { "class.hidden-control": "this.hidden" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: HubFormControl, isStandalone: true, inputs: { formControlName: { classPropertyName: "formControlName", publicName: "formControlName", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { required: "requiredChange" }, host: { properties: { "class.hidden-control": "hidden" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubFormControl, decorators: [{
-            type: Directive
-        }], propDecorators: { formControlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "formControlName", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }, { type: i0.Output, args: ["requiredChange"] }], hidden: [{
-                type: HostBinding,
-                args: ['class.hidden-control']
-            }] } });
+            type: Directive,
+            args: [{
+                    host: {
+                        '[class.hidden-control]': 'hidden'
+                    }
+                }]
+        }], propDecorators: { formControlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "formControlName", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }, { type: i0.Output, args: ["requiredChange"] }] } });
 
 /**
  * Marks a template as form helper text projected into a form field.
@@ -338,6 +340,78 @@ 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',
+    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.
  *
@@ -351,6 +425,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':
@@ -380,7 +466,8 @@ function defaultInvalidFeedback(key, value) {
 const defaultHubFormsConfig = {
     invalidFeedbackTemplateFn: defaultInvalidFeedback,
     showValid: false,
-    datepicker: defaultHubDatepickerConfig
+    datepicker: defaultHubDatepickerConfig,
+    fileInput: defaultHubFileInputLabels
 };
 /**
  * Injection token holding the resolved {@link HubFormsConfig}.
@@ -415,10 +502,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 }
         }
     ]);
 }
@@ -596,11 +687,13 @@ class HubFieldControl extends HubFormControl {
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.1", type: HubFieldControl, isStandalone: true, inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalidFeedbackTemplateFn: { classPropertyName: "invalidFeedbackTemplateFn", publicName: "invalidFeedbackTemplateFn", isSignal: true, isRequired: false, transformFunction: null }, showValid: { classPropertyName: "showValid", publicName: "showValid", isSignal: true, isRequired: false, transformFunction: null }, validFeedback: { classPropertyName: "validFeedback", publicName: "validFeedback", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange" }, host: { listeners: { "focusout": "handleBlur($event)" } }, queries: [{ propertyName: "formTextTmp", first: true, predicate: HubFormTextDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "errorTpts", predicate: HubValidationErrorDirective, isSignal: true }], usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubFieldControl, decorators: [{
-            type: Directive
-        }], ctorParameters: () => [], propDecorators: { formTextTmp: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubFormTextDirective), { ...{ read: TemplateRef }, isSignal: true }] }], errorTpts: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => HubValidationErrorDirective), { isSignal: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], invalidFeedbackTemplateFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidFeedbackTemplateFn", required: false }] }], showValid: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValid", required: false }] }], validFeedback: [{ type: i0.Input, args: [{ isSignal: true, alias: "validFeedback", required: false }] }], handleBlur: [{
-                type: HostListener,
-                args: ['focusout', ['$event']]
-            }] } });
+            type: Directive,
+            args: [{
+                    host: {
+                        '(focusout)': 'handleBlur($event)'
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { formTextTmp: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubFormTextDirective), { ...{ read: TemplateRef }, isSignal: true }] }], errorTpts: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => HubValidationErrorDirective), { isSignal: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], invalidFeedbackTemplateFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidFeedbackTemplateFn", required: false }] }], showValid: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValid", required: false }] }], validFeedback: [{ type: i0.Input, args: [{ isSignal: true, alias: "validFeedback", required: false }] }] } });
 
 /**
  * Shared base for form *containers* (`hub-form`, `hub-fieldset`, `hub-legend`).
@@ -719,6 +812,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.
  */
@@ -892,9 +1021,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
@@ -1001,12 +1134,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. */
@@ -1063,6 +1209,7 @@ class HubInputComponent extends HubFieldControl {
     ngAfterContentInit() {
         super.ngAfterContentInit();
         this.#attachNumericValidators();
+        this.#warnDeprecatedFileFormat();
     }
     writeValue(value) {
         if (this.isCheckable()) {
@@ -1197,6 +1344,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.
@@ -1593,18 +1751,14 @@ class HubAutoresizeDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubAutoresizeDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'textarea[hubAutoresize]'
+                    selector: 'textarea[hubAutoresize]',
+                    host: {
+                        '(:focusin)': 'onChange()',
+                        '(:focusout)': 'onChange()',
+                        '(:input)': 'onChange()'
+                    }
                 }]
-        }], propDecorators: { hubAutoresize: [{ type: i0.Input, args: [{ isSignal: true, alias: "hubAutoresize", required: false }] }], onChange: [{
-                type: HostListener,
-                args: [':focusin']
-            }, {
-                type: HostListener,
-                args: [':focusout']
-            }, {
-                type: HostListener,
-                args: [':input']
-            }] } });
+        }], propDecorators: { hubAutoresize: [{ type: i0.Input, args: [{ isSignal: true, alias: "hubAutoresize", required: false }] }] } });
 
 /**
  * Accessible multi-line text field with optional auto-resize, character counter and automatic
@@ -1816,6 +1970,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                     }, template: "<div\n\tclass=\"hub-field hub-slider\"\n\t[class.hub-field--horizontal]=\"label() && labelType() === _labelTypes.Horizontal\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n\t[class.hub-field--valid]=\"showsValid\"\n\t[style.--hub-slider-percent]=\"percent()\"\n\t[style.--hub-slider-from]=\"lowerPercent()\"\n\t[style.--hub-slider-to]=\"upperPercent()\"\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\n\t\tclass=\"hub-field__body hub-slider__range\"\n\t\t[class.hub-slider__range--dual]=\"range()\"\n\t\t[class.hub-slider__range--flush]=\"!showValue()\"\n\t>\n\t\t@if (range()) {\n\t\t\t<div class=\"hub-slider__rail\" aria-hidden=\"true\"></div>\n\n\t\t\t<input\n\t\t\t\ttype=\"range\"\n\t\t\t\tclass=\"hub-slider__track hub-slider__track--lower\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\t[min]=\"min()\"\n\t\t\t\t[max]=\"max()\"\n\t\t\t\t[step]=\"step()\"\n\t\t\t\t[value]=\"lower()\"\n\t\t\t\t(input)=\"setLower($any($event.target).value)\"\n\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\taria-label=\"Range start\"\n\t\t\t\t[attr.aria-valuetext]=\"lower()\"\n\t\t\t/>\n\t\t\t<input\n\t\t\t\ttype=\"range\"\n\t\t\t\tclass=\"hub-slider__track hub-slider__track--upper\"\n\t\t\t\t[min]=\"min()\"\n\t\t\t\t[max]=\"max()\"\n\t\t\t\t[step]=\"step()\"\n\t\t\t\t[value]=\"upper()\"\n\t\t\t\t(input)=\"setUpper($any($event.target).value)\"\n\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\taria-label=\"Range end\"\n\t\t\t\t[attr.aria-valuetext]=\"upper()\"\n\t\t\t/>\n\n\t\t\t@if (showValue()) {\n\t\t\t\t<span class=\"hub-slider__bubble hub-slider__bubble--lower\" aria-hidden=\"true\">{{ lower() }}</span>\n\t\t\t\t<span class=\"hub-slider__bubble hub-slider__bubble--upper\" aria-hidden=\"true\">{{ upper() }}</span>\n\t\t\t}\n\t\t} @else {\n\t\t\t<input\n\t\t\t\ttype=\"range\"\n\t\t\t\tclass=\"hub-slider__track\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\t[min]=\"min()\"\n\t\t\t\t[max]=\"max()\"\n\t\t\t\t[step]=\"step()\"\n\t\t\t\t[value]=\"single()\"\n\t\t\t\t(input)=\"setValue($any($event.target).value)\"\n\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t[attr.aria-valuetext]=\"single()\"\n\t\t\t/>\n\n\t\t\t@if (showValue()) {\n\t\t\t\t<span class=\"hub-slider__bubble\" aria-hidden=\"true\">{{ single() }}</span>\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</div>\n", styles: ["hub-slider{display:block}hub-slider.hidden-control{display:none!important}.hub-slider__range{position:relative;padding-top:var(--hub-slider-value-space)}.hub-slider__range--flush{--hub-slider-value-space: 0}.hub-slider__track{width:var(--hub-slider-track-width);height:var(--hub-slider-track-height);margin:0;appearance:none;-webkit-appearance:none;background:var(--hub-slider-track-fill) no-repeat,var(--hub-slider-track-bg);background-size:calc(var(--hub-slider-percent) * 1%) 100%,100% 100%;border-radius:var(--hub-slider-track-border-radius);cursor:pointer}.hub-slider__track:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-slider__track::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:var(--hub-slider-thumb-width);height:var(--hub-slider-thumb-height);border-radius:var(--hub-slider-thumb-border-radius);background:var(--hub-slider-thumb-bg);border:var(--hub-slider-thumb-border);box-shadow:var(--hub-slider-thumb-shadow);cursor:pointer}.hub-slider__track::-moz-range-thumb{width:var(--hub-slider-thumb-width);height:var(--hub-slider-thumb-height);border-radius:var(--hub-slider-thumb-border-radius);background:var(--hub-slider-thumb-bg);border:var(--hub-slider-thumb-border);box-shadow:var(--hub-slider-thumb-shadow);cursor:pointer}.hub-slider__track::-moz-range-track{height:var(--hub-slider-track-height);background:transparent;border-radius:var(--hub-slider-track-border-radius)}.hub-slider__track:focus-visible{outline:0}.hub-slider__track:focus-visible::-webkit-slider-thumb{box-shadow:var(--hub-slider-thumb-shadow),var(--hub-input-focus-box-shadow)}.hub-slider__track:focus-visible::-moz-range-thumb{box-shadow:var(--hub-slider-thumb-shadow),var(--hub-input-focus-box-shadow)}.hub-slider__bubble{position:absolute;top:0;left:calc(var(--hub-slider-percent) * 1%);transform:translate(-50%);padding:.1rem .4rem;color:var(--hub-slider-tooltip-color);background:var(--hub-slider-tooltip-bg);font-size:var(--hub-ref-font-size-sm, .875rem);line-height:1.4;border-radius:var(--hub-slider-tooltip-border-radius);white-space:nowrap;pointer-events:none}.hub-slider__bubble--lower{left:calc(var(--hub-slider-from) * 1%)}.hub-slider__bubble--upper{left:calc(var(--hub-slider-to) * 1%)}.hub-slider__range--dual{min-height:calc(var(--hub-slider-value-space) + var(--hub-slider-thumb-height))}.hub-slider__range--dual .hub-slider__rail,.hub-slider__range--dual .hub-slider__track--lower,.hub-slider__range--dual .hub-slider__track--upper{position:absolute;left:0;right:0;top:calc(var(--hub-slider-value-space) + var(--hub-slider-thumb-height) / 2)}.hub-slider__range--dual .hub-slider__rail{height:var(--hub-slider-track-height);transform:translateY(-50%);border-radius:var(--hub-slider-track-border-radius);background:var(--hub-slider-track-fill) no-repeat,var(--hub-slider-track-bg);background-size:calc((var(--hub-slider-to) - var(--hub-slider-from)) * 1%) 100%,100% 100%;background-position:calc(var(--hub-slider-from) / max(100 - var(--hub-slider-to) + var(--hub-slider-from),1) * 100%) center,0 0;pointer-events:none}.hub-slider__range--dual .hub-slider__track--lower,.hub-slider__range--dual .hub-slider__track--upper{width:100%;height:var(--hub-slider-thumb-height);margin:0;transform:translateY(-50%);background:transparent;pointer-events:none}.hub-slider__range--dual .hub-slider__track--lower::-webkit-slider-thumb,.hub-slider__range--dual .hub-slider__track--upper::-webkit-slider-thumb{pointer-events:auto;position:relative;z-index:2}.hub-slider__range--dual .hub-slider__track--lower::-moz-range-thumb,.hub-slider__range--dual .hub-slider__track--upper::-moz-range-thumb{pointer-events:auto}.hub-slider__range--dual .hub-slider__track--lower::-moz-range-track,.hub-slider__range--dual .hub-slider__track--upper::-moz-range-track{background:transparent}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelType: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelType", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", 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"] }] } });
 
+/**
+ * Resolves a user-supplied accent value to a paintable CSS colour for a `--hub-*-accent` slot.
+ *
+ * A bareword (a built-in semantic name such as `primary` / `success`, or any registered accent /
+ * named CSS colour) becomes a `--hub-sys-color-*` design-system token with the word itself as the
+ * raw fallback, so named CSS colours keep working when no token is registered. A literal colour
+ * (`#ff0000`, `rgb(...)`, `oklch(...)`, `var(...)`) is passed through unchanged. Empty / whitespace
+ * input resolves to `null` so the caller can keep its neutral default.
+ *
+ * @param value - The raw accent value (e.g. from a `color` input).
+ * @returns The resolved CSS colour, or `null` when no accent is provided.
+ */
+function resolveHubAccent(value) {
+    const color = value?.trim();
+    if (!color)
+        return null;
+    return /^[a-zA-Z][\w-]*$/.test(color) ? `var(--hub-sys-color-${color}, ${color})` : color;
+}
+
 /**
  * Segmented button bar (`hub-segmented`): a compact group of 2..n options rendered as an inline
  * (or vertical) segmented control. A full `ng-hub-ui-forms` field — it extends
@@ -1848,15 +2021,22 @@ class HubSegmentedComponent extends HubFieldControl {
     size = input('md', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     /**
-     * Semantic accent for the selected pill. Drives `data-variant` on the bar, which re-bases the
-     * `--hub-segmented-selected-*` tokens. Built-in values map to the design-system palette
-     * (`primary`, `secondary`, `success`, `danger`, `warning`, `info`, `neutral`), but the set is
-     * OPEN — any custom string works as long as the consumer supplies the matching
-     * `--hub-segmented-selected-bg` / `--hub-segmented-selected-color` (or `--hub-segmented-accent`)
-     * for that `data-variant`. Empty string (default) keeps the neutral white-pill look.
+     * Accent for the selected pill. Accepts ANY colour value:
+     * - a built-in semantic name (`primary`, `success`, …) or any registered accent → resolves to
+     *   the matching `--hub-sys-color-*` design-system token;
+     * - a literal colour (`#ff0000`, `rgb(...)`, `oklch(...)`, `rebeccapurple`) → used as-is.
+     * Both the sliding indicator and the multiple-mode pill follow it, and the selected label gets a
+     * derived contrast colour automatically. Empty string (default) keeps the neutral white-pill look.
      */
     color = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /**
+     * Resolves {@link color} to a paintable accent for the `--hub-segmented-accent` slot: a bareword
+     * becomes a `--hub-sys-color-*` token with the word as raw fallback (so named CSS colours work
+     * too), while a literal `#hex` / `rgb()` / `oklch()` / `var()` is passed through unchanged.
+     */
+    accentVar = computed(() => resolveHubAccent(this.color()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "accentVar" }] : /* istanbul ignore next */ []));
     /** Label text. */
     label = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
@@ -2051,13 +2231,13 @@ class HubSegmentedComponent extends HubFieldControl {
         return Object.is(a, b);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubSegmentedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: HubSegmentedComponent, isStandalone: true, selector: "hub-segmented", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelType: { classPropertyName: "labelType", publicName: "labelType", isSignal: true, isRequired: false, transformFunction: null }, formText: { classPropertyName: "formText", publicName: "formText", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.hub-segmented-host": "true" } }, viewQueries: [{ propertyName: "_buttons", predicate: ["optionButton"], descendants: true, isSignal: true }, { propertyName: "_bar", first: true, predicate: ["segmentedBar"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n\tclass=\"hub-field hub-segmented-field\"\n\t[class.hub-field--horizontal]=\"label() && labelType() === _labelTypes.Horizontal\"\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<div\n\t\t\t#segmentedBar\n\t\t\t[id]=\"id\"\n\t\t\tclass=\"hub-segmented\"\n\t\t\t[class.hub-segmented--sm]=\"size() === 'sm'\"\n\t\t\t[class.hub-segmented--lg]=\"size() === 'lg'\"\n\t\t\t[class.hub-segmented--vertical]=\"vertical()\"\n\t\t\t[class.hub-segmented--multiple]=\"multiple()\"\n\t\t\t[class.hub-segmented--disabled]=\"disabled()\"\n\t\t\t[attr.data-variant]=\"color() || null\"\n\t\t\t[attr.role]=\"multiple() ? 'group' : 'radiogroup'\"\n\t\t\t[attr.aria-disabled]=\"disabled() ? 'true' : null\"\n\t\t\t(keydown)=\"onKeydown($event)\"\n\t\t>\n\t\t\t@if (!multiple()) {\n\t\t\t\t<span class=\"hub-segmented__indicator\" aria-hidden=\"true\"></span>\n\t\t\t}\n\n\t\t\t@for (option of options(); track option.value; let index = $index) {\n\t\t\t\t<button\n\t\t\t\t\t#optionButton\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"hub-segmented__option\"\n\t\t\t\t\t[class.hub-segmented__option--selected]=\"isSelected(option)\"\n\t\t\t\t\t[attr.role]=\"multiple() ? null : 'radio'\"\n\t\t\t\t\t[attr.aria-checked]=\"multiple() ? null : isSelected(option)\"\n\t\t\t\t\t[attr.aria-pressed]=\"multiple() ? isSelected(option) : null\"\n\t\t\t\t\t[disabled]=\"disabled() || !!option.disabled\"\n\t\t\t\t\t[tabindex]=\"rovingIndex() === index ? 0 : -1\"\n\t\t\t\t\t(click)=\"select(option)\"\n\t\t\t\t>\n\t\t\t\t\t{{ option.label }}\n\t\t\t\t</button>\n\t\t\t}\n\t\t</div>\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", styles: ["hub-segmented{display:block}hub-segmented.hidden-control{display:none!important}.hub-segmented{position:relative;display:inline-flex;gap:var(--hub-segmented-gap);padding:var(--hub-segmented-gap);background:var(--hub-segmented-bg);border-radius:var(--hub-segmented-radius)}.hub-segmented__indicator{position:absolute;z-index:0;left:var(--hub-segmented-indicator-x, 0);top:var(--hub-segmented-indicator-y, 0);width:var(--hub-segmented-indicator-width, 0);height:var(--hub-segmented-indicator-height, 0);background:var(--hub-segmented-selected-bg);border-radius:calc(var(--hub-segmented-radius) - var(--hub-segmented-gap));box-shadow:var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075));pointer-events:none;transition:left var(--hub-segmented-indicator-transition),top var(--hub-segmented-indicator-transition),width var(--hub-segmented-indicator-transition),height var(--hub-segmented-indicator-transition)}@media(prefers-reduced-motion:reduce){.hub-segmented .hub-segmented__indicator{transition:none}}.hub-segmented--disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-segmented--vertical{flex-direction:column}.hub-segmented--vertical .hub-segmented__option{width:100%}.hub-segmented--multiple .hub-segmented__option--selected{background:var(--hub-segmented-selected-bg);box-shadow:var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075))}.hub-segmented__option{appearance:none;border:0;margin:0;position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;padding:var(--hub-segmented-padding-y) var(--hub-segmented-padding-x);color:var(--hub-sys-text-muted, #6c757d);background:transparent;font:inherit;line-height:1.2;white-space:nowrap;border-radius:calc(var(--hub-segmented-radius) - var(--hub-segmented-gap));cursor:pointer;transition:var(--hub-form-transition),color .15s ease-in-out,background-color .15s ease-in-out}.hub-segmented__option:focus-visible{outline:0;box-shadow:0 0 0 var(--hub-form-focus-ring-width) var(--hub-form-focus-ring-color)}.hub-segmented__option--selected{color:var(--hub-segmented-selected-color)}.hub-segmented__option:disabled{cursor:not-allowed;opacity:var(--hub-form-disabled-opacity)}.hub-segmented--sm .hub-segmented__option{padding:calc(var(--hub-segmented-padding-y) * .5) calc(var(--hub-segmented-padding-x) * .65);font-size:var(--hub-ref-font-size-sm, .875rem)}.hub-segmented--lg .hub-segmented__option{padding:calc(var(--hub-segmented-padding-y) * 1.35) calc(var(--hub-segmented-padding-x) * 1.35);font-size:var(--hub-ref-font-size-lg, 1.125rem)}:where(.hub-segmented[data-variant=primary]){--hub-segmented-selected-bg: var(--hub-sys-color-primary);--hub-segmented-selected-color: var(--hub-sys-color-primary-on, #fff)}:where(.hub-segmented[data-variant=secondary]){--hub-segmented-selected-bg: var(--hub-sys-color-secondary);--hub-segmented-selected-color: var(--hub-sys-color-secondary-on, #fff)}:where(.hub-segmented[data-variant=success]){--hub-segmented-selected-bg: var(--hub-sys-color-success);--hub-segmented-selected-color: var(--hub-sys-color-success-on, #fff)}:where(.hub-segmented[data-variant=danger]){--hub-segmented-selected-bg: var(--hub-sys-color-danger);--hub-segmented-selected-color: var(--hub-sys-color-danger-on, #fff)}:where(.hub-segmented[data-variant=warning]){--hub-segmented-selected-bg: var(--hub-sys-color-warning);--hub-segmented-selected-color: var(--hub-sys-color-warning-on, #fff)}:where(.hub-segmented[data-variant=info]){--hub-segmented-selected-bg: var(--hub-sys-color-info);--hub-segmented-selected-color: var(--hub-sys-color-info-on, #fff)}:where(.hub-segmented[data-variant=neutral]){--hub-segmented-selected-bg: var(--hub-sys-color-neutral);--hub-segmented-selected-color: var(--hub-sys-color-neutral-on, #fff)}\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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: HubSegmentedComponent, isStandalone: true, selector: "hub-segmented", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelType: { classPropertyName: "labelType", publicName: "labelType", isSignal: true, isRequired: false, transformFunction: null }, formText: { classPropertyName: "formText", publicName: "formText", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.hub-segmented-host": "true" } }, viewQueries: [{ propertyName: "_buttons", predicate: ["optionButton"], descendants: true, isSignal: true }, { propertyName: "_bar", first: true, predicate: ["segmentedBar"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n\tclass=\"hub-field hub-segmented-field\"\n\t[class.hub-field--horizontal]=\"label() && labelType() === _labelTypes.Horizontal\"\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<div\n\t\t\t#segmentedBar\n\t\t\t[id]=\"id\"\n\t\t\tclass=\"hub-segmented\"\n\t\t\t[class.hub-segmented--sm]=\"size() === 'sm'\"\n\t\t\t[class.hub-segmented--lg]=\"size() === 'lg'\"\n\t\t\t[class.hub-segmented--vertical]=\"vertical()\"\n\t\t\t[class.hub-segmented--multiple]=\"multiple()\"\n\t\t\t[class.hub-segmented--disabled]=\"disabled()\"\n\t\t\t[attr.data-variant]=\"color() || null\"\n\t\t\t[style.--hub-segmented-accent]=\"accentVar()\"\n\t\t\t[attr.role]=\"multiple() ? 'group' : 'radiogroup'\"\n\t\t\t[attr.aria-disabled]=\"disabled() ? 'true' : null\"\n\t\t\t(keydown)=\"onKeydown($event)\"\n\t\t>\n\t\t\t@if (!multiple()) {\n\t\t\t\t<span class=\"hub-segmented__indicator\" aria-hidden=\"true\"></span>\n\t\t\t}\n\n\t\t\t@for (option of options(); track option.value; let index = $index) {\n\t\t\t\t<button\n\t\t\t\t\t#optionButton\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"hub-segmented__option\"\n\t\t\t\t\t[class.hub-segmented__option--selected]=\"isSelected(option)\"\n\t\t\t\t\t[attr.role]=\"multiple() ? null : 'radio'\"\n\t\t\t\t\t[attr.aria-checked]=\"multiple() ? null : isSelected(option)\"\n\t\t\t\t\t[attr.aria-pressed]=\"multiple() ? isSelected(option) : null\"\n\t\t\t\t\t[disabled]=\"disabled() || !!option.disabled\"\n\t\t\t\t\t[tabindex]=\"rovingIndex() === index ? 0 : -1\"\n\t\t\t\t\t(click)=\"select(option)\"\n\t\t\t\t>\n\t\t\t\t\t{{ option.label }}\n\t\t\t\t</button>\n\t\t\t}\n\t\t</div>\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", styles: ["hub-segmented{display:block}hub-segmented.hidden-control{display:none!important}.hub-segmented{position:relative;display:inline-flex;gap:var(--hub-segmented-gap);padding:var(--hub-segmented-gap);background:var(--hub-segmented-bg);border-radius:var(--hub-segmented-radius)}.hub-segmented__indicator{position:absolute;z-index:0;left:var(--hub-segmented-indicator-x, 0);top:var(--hub-segmented-indicator-y, 0);width:var(--hub-segmented-indicator-width, 0);height:var(--hub-segmented-indicator-height, 0);background:var(--hub-segmented-selected-bg);border-radius:calc(var(--hub-segmented-radius) - var(--hub-segmented-gap));box-shadow:var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075));pointer-events:none;transition:left var(--hub-segmented-indicator-transition),top var(--hub-segmented-indicator-transition),width var(--hub-segmented-indicator-transition),height var(--hub-segmented-indicator-transition)}@media(prefers-reduced-motion:reduce){.hub-segmented .hub-segmented__indicator{transition:none}}.hub-segmented--disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-segmented--vertical{flex-direction:column}.hub-segmented--vertical .hub-segmented__option{width:100%}.hub-segmented--multiple .hub-segmented__option--selected{background:var(--hub-segmented-selected-bg);box-shadow:var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075))}.hub-segmented__option{appearance:none;border:0;margin:0;position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;padding:var(--hub-segmented-padding-y) var(--hub-segmented-padding-x);color:var(--hub-sys-text-muted, #6c757d);background:transparent;font:inherit;line-height:1.2;white-space:nowrap;border-radius:calc(var(--hub-segmented-radius) - var(--hub-segmented-gap));cursor:pointer;transition:var(--hub-form-transition),color .15s ease-in-out,background-color .15s ease-in-out}.hub-segmented__option:focus-visible{outline:0;box-shadow:0 0 0 var(--hub-form-focus-ring-width) var(--hub-form-focus-ring-color)}.hub-segmented__option--selected{color:var(--hub-segmented-selected-color)}.hub-segmented__option:disabled{cursor:not-allowed;opacity:var(--hub-form-disabled-opacity)}.hub-segmented--sm .hub-segmented__option{padding:calc(var(--hub-segmented-padding-y) * .5) calc(var(--hub-segmented-padding-x) * .65);font-size:var(--hub-ref-font-size-sm, .875rem)}.hub-segmented--lg .hub-segmented__option{padding:calc(var(--hub-segmented-padding-y) * 1.35) calc(var(--hub-segmented-padding-x) * 1.35);font-size:var(--hub-ref-font-size-lg, 1.125rem)}:where(.hub-segmented[data-variant]){--hub-segmented-selected-bg: var(--hub-segmented-accent);--hub-segmented-selected-color: oklch(from var(--hub-segmented-accent) clamp(0, (.62 - l) * 1000, 1) 0 h)}\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: HubSegmentedComponent, decorators: [{
             type: Component,
             args: [{ selector: 'hub-segmented', standalone: true, imports: [NgTemplateOutlet, KeyValuePipe], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         '[class.hub-segmented-host]': 'true'
-                    }, template: "<div\n\tclass=\"hub-field hub-segmented-field\"\n\t[class.hub-field--horizontal]=\"label() && labelType() === _labelTypes.Horizontal\"\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<div\n\t\t\t#segmentedBar\n\t\t\t[id]=\"id\"\n\t\t\tclass=\"hub-segmented\"\n\t\t\t[class.hub-segmented--sm]=\"size() === 'sm'\"\n\t\t\t[class.hub-segmented--lg]=\"size() === 'lg'\"\n\t\t\t[class.hub-segmented--vertical]=\"vertical()\"\n\t\t\t[class.hub-segmented--multiple]=\"multiple()\"\n\t\t\t[class.hub-segmented--disabled]=\"disabled()\"\n\t\t\t[attr.data-variant]=\"color() || null\"\n\t\t\t[attr.role]=\"multiple() ? 'group' : 'radiogroup'\"\n\t\t\t[attr.aria-disabled]=\"disabled() ? 'true' : null\"\n\t\t\t(keydown)=\"onKeydown($event)\"\n\t\t>\n\t\t\t@if (!multiple()) {\n\t\t\t\t<span class=\"hub-segmented__indicator\" aria-hidden=\"true\"></span>\n\t\t\t}\n\n\t\t\t@for (option of options(); track option.value; let index = $index) {\n\t\t\t\t<button\n\t\t\t\t\t#optionButton\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"hub-segmented__option\"\n\t\t\t\t\t[class.hub-segmented__option--selected]=\"isSelected(option)\"\n\t\t\t\t\t[attr.role]=\"multiple() ? null : 'radio'\"\n\t\t\t\t\t[attr.aria-checked]=\"multiple() ? null : isSelected(option)\"\n\t\t\t\t\t[attr.aria-pressed]=\"multiple() ? isSelected(option) : null\"\n\t\t\t\t\t[disabled]=\"disabled() || !!option.disabled\"\n\t\t\t\t\t[tabindex]=\"rovingIndex() === index ? 0 : -1\"\n\t\t\t\t\t(click)=\"select(option)\"\n\t\t\t\t>\n\t\t\t\t\t{{ option.label }}\n\t\t\t\t</button>\n\t\t\t}\n\t\t</div>\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", styles: ["hub-segmented{display:block}hub-segmented.hidden-control{display:none!important}.hub-segmented{position:relative;display:inline-flex;gap:var(--hub-segmented-gap);padding:var(--hub-segmented-gap);background:var(--hub-segmented-bg);border-radius:var(--hub-segmented-radius)}.hub-segmented__indicator{position:absolute;z-index:0;left:var(--hub-segmented-indicator-x, 0);top:var(--hub-segmented-indicator-y, 0);width:var(--hub-segmented-indicator-width, 0);height:var(--hub-segmented-indicator-height, 0);background:var(--hub-segmented-selected-bg);border-radius:calc(var(--hub-segmented-radius) - var(--hub-segmented-gap));box-shadow:var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075));pointer-events:none;transition:left var(--hub-segmented-indicator-transition),top var(--hub-segmented-indicator-transition),width var(--hub-segmented-indicator-transition),height var(--hub-segmented-indicator-transition)}@media(prefers-reduced-motion:reduce){.hub-segmented .hub-segmented__indicator{transition:none}}.hub-segmented--disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-segmented--vertical{flex-direction:column}.hub-segmented--vertical .hub-segmented__option{width:100%}.hub-segmented--multiple .hub-segmented__option--selected{background:var(--hub-segmented-selected-bg);box-shadow:var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075))}.hub-segmented__option{appearance:none;border:0;margin:0;position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;padding:var(--hub-segmented-padding-y) var(--hub-segmented-padding-x);color:var(--hub-sys-text-muted, #6c757d);background:transparent;font:inherit;line-height:1.2;white-space:nowrap;border-radius:calc(var(--hub-segmented-radius) - var(--hub-segmented-gap));cursor:pointer;transition:var(--hub-form-transition),color .15s ease-in-out,background-color .15s ease-in-out}.hub-segmented__option:focus-visible{outline:0;box-shadow:0 0 0 var(--hub-form-focus-ring-width) var(--hub-form-focus-ring-color)}.hub-segmented__option--selected{color:var(--hub-segmented-selected-color)}.hub-segmented__option:disabled{cursor:not-allowed;opacity:var(--hub-form-disabled-opacity)}.hub-segmented--sm .hub-segmented__option{padding:calc(var(--hub-segmented-padding-y) * .5) calc(var(--hub-segmented-padding-x) * .65);font-size:var(--hub-ref-font-size-sm, .875rem)}.hub-segmented--lg .hub-segmented__option{padding:calc(var(--hub-segmented-padding-y) * 1.35) calc(var(--hub-segmented-padding-x) * 1.35);font-size:var(--hub-ref-font-size-lg, 1.125rem)}:where(.hub-segmented[data-variant=primary]){--hub-segmented-selected-bg: var(--hub-sys-color-primary);--hub-segmented-selected-color: var(--hub-sys-color-primary-on, #fff)}:where(.hub-segmented[data-variant=secondary]){--hub-segmented-selected-bg: var(--hub-sys-color-secondary);--hub-segmented-selected-color: var(--hub-sys-color-secondary-on, #fff)}:where(.hub-segmented[data-variant=success]){--hub-segmented-selected-bg: var(--hub-sys-color-success);--hub-segmented-selected-color: var(--hub-sys-color-success-on, #fff)}:where(.hub-segmented[data-variant=danger]){--hub-segmented-selected-bg: var(--hub-sys-color-danger);--hub-segmented-selected-color: var(--hub-sys-color-danger-on, #fff)}:where(.hub-segmented[data-variant=warning]){--hub-segmented-selected-bg: var(--hub-sys-color-warning);--hub-segmented-selected-color: var(--hub-sys-color-warning-on, #fff)}:where(.hub-segmented[data-variant=info]){--hub-segmented-selected-bg: var(--hub-sys-color-info);--hub-segmented-selected-color: var(--hub-sys-color-info-on, #fff)}:where(.hub-segmented[data-variant=neutral]){--hub-segmented-selected-bg: var(--hub-sys-color-neutral);--hub-segmented-selected-color: var(--hub-sys-color-neutral-on, #fff)}\n"] }]
+                    }, template: "<div\n\tclass=\"hub-field hub-segmented-field\"\n\t[class.hub-field--horizontal]=\"label() && labelType() === _labelTypes.Horizontal\"\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<div\n\t\t\t#segmentedBar\n\t\t\t[id]=\"id\"\n\t\t\tclass=\"hub-segmented\"\n\t\t\t[class.hub-segmented--sm]=\"size() === 'sm'\"\n\t\t\t[class.hub-segmented--lg]=\"size() === 'lg'\"\n\t\t\t[class.hub-segmented--vertical]=\"vertical()\"\n\t\t\t[class.hub-segmented--multiple]=\"multiple()\"\n\t\t\t[class.hub-segmented--disabled]=\"disabled()\"\n\t\t\t[attr.data-variant]=\"color() || null\"\n\t\t\t[style.--hub-segmented-accent]=\"accentVar()\"\n\t\t\t[attr.role]=\"multiple() ? 'group' : 'radiogroup'\"\n\t\t\t[attr.aria-disabled]=\"disabled() ? 'true' : null\"\n\t\t\t(keydown)=\"onKeydown($event)\"\n\t\t>\n\t\t\t@if (!multiple()) {\n\t\t\t\t<span class=\"hub-segmented__indicator\" aria-hidden=\"true\"></span>\n\t\t\t}\n\n\t\t\t@for (option of options(); track option.value; let index = $index) {\n\t\t\t\t<button\n\t\t\t\t\t#optionButton\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"hub-segmented__option\"\n\t\t\t\t\t[class.hub-segmented__option--selected]=\"isSelected(option)\"\n\t\t\t\t\t[attr.role]=\"multiple() ? null : 'radio'\"\n\t\t\t\t\t[attr.aria-checked]=\"multiple() ? null : isSelected(option)\"\n\t\t\t\t\t[attr.aria-pressed]=\"multiple() ? isSelected(option) : null\"\n\t\t\t\t\t[disabled]=\"disabled() || !!option.disabled\"\n\t\t\t\t\t[tabindex]=\"rovingIndex() === index ? 0 : -1\"\n\t\t\t\t\t(click)=\"select(option)\"\n\t\t\t\t>\n\t\t\t\t\t{{ option.label }}\n\t\t\t\t</button>\n\t\t\t}\n\t\t</div>\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", styles: ["hub-segmented{display:block}hub-segmented.hidden-control{display:none!important}.hub-segmented{position:relative;display:inline-flex;gap:var(--hub-segmented-gap);padding:var(--hub-segmented-gap);background:var(--hub-segmented-bg);border-radius:var(--hub-segmented-radius)}.hub-segmented__indicator{position:absolute;z-index:0;left:var(--hub-segmented-indicator-x, 0);top:var(--hub-segmented-indicator-y, 0);width:var(--hub-segmented-indicator-width, 0);height:var(--hub-segmented-indicator-height, 0);background:var(--hub-segmented-selected-bg);border-radius:calc(var(--hub-segmented-radius) - var(--hub-segmented-gap));box-shadow:var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075));pointer-events:none;transition:left var(--hub-segmented-indicator-transition),top var(--hub-segmented-indicator-transition),width var(--hub-segmented-indicator-transition),height var(--hub-segmented-indicator-transition)}@media(prefers-reduced-motion:reduce){.hub-segmented .hub-segmented__indicator{transition:none}}.hub-segmented--disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-segmented--vertical{flex-direction:column}.hub-segmented--vertical .hub-segmented__option{width:100%}.hub-segmented--multiple .hub-segmented__option--selected{background:var(--hub-segmented-selected-bg);box-shadow:var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075))}.hub-segmented__option{appearance:none;border:0;margin:0;position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;padding:var(--hub-segmented-padding-y) var(--hub-segmented-padding-x);color:var(--hub-sys-text-muted, #6c757d);background:transparent;font:inherit;line-height:1.2;white-space:nowrap;border-radius:calc(var(--hub-segmented-radius) - var(--hub-segmented-gap));cursor:pointer;transition:var(--hub-form-transition),color .15s ease-in-out,background-color .15s ease-in-out}.hub-segmented__option:focus-visible{outline:0;box-shadow:0 0 0 var(--hub-form-focus-ring-width) var(--hub-form-focus-ring-color)}.hub-segmented__option--selected{color:var(--hub-segmented-selected-color)}.hub-segmented__option:disabled{cursor:not-allowed;opacity:var(--hub-form-disabled-opacity)}.hub-segmented--sm .hub-segmented__option{padding:calc(var(--hub-segmented-padding-y) * .5) calc(var(--hub-segmented-padding-x) * .65);font-size:var(--hub-ref-font-size-sm, .875rem)}.hub-segmented--lg .hub-segmented__option{padding:calc(var(--hub-segmented-padding-y) * 1.35) calc(var(--hub-segmented-padding-x) * 1.35);font-size:var(--hub-ref-font-size-lg, 1.125rem)}:where(.hub-segmented[data-variant]){--hub-segmented-selected-bg: var(--hub-segmented-accent);--hub-segmented-selected-color: oklch(from var(--hub-segmented-accent) clamp(0, (.62 - l) * 1000, 1) 0 h)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelType: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelType", required: false }] }], formText: [{ type: i0.Input, args: [{ isSignal: true, alias: "formText", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], _buttons: [{ type: i0.ViewChildren, args: ['optionButton', { isSignal: true }] }], _bar: [{ type: i0.ViewChild, args: ['segmentedBar', { isSignal: true }] }] } });
 
 /**
@@ -2158,12 +2338,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
             type: Component,
             args: [{ selector: 'form[hubForm]', imports: [NgTemplateOutlet, KeyValuePipe], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         '[class.hub-form-host]': 'true',
-                        '[class.hub-form--invalid]': 'isInvalid'
+                        '[class.hub-form--invalid]': 'isInvalid',
+                        '(submit)': 'handleSubmit($event)'
                     }, template: "<ng-content></ng-content>\n\n@if (isInvalid) {\n\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t<ul>\n\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t<li>\n\t\t\t\t\t<ng-container\n\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t></ng-container>\n\t\t\t\t\t<ng-template #defaultErrorTpt>\n\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</ng-template>\n\t\t\t\t</li>\n\t\t\t}\n\t\t</ul>\n\t</div>\n}\n" }]
-        }], propDecorators: { handleSubmit: [{
-                type: HostListener,
-                args: ['submit', ['$event']]
-            }] } });
+        }] });
 
 /**
  * Presentational legend for a `<hub-fieldset>` (or any grouped section), with optional
@@ -6093,6 +6271,780 @@ 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]'
+                }]
+        }] });
+
+/**
+ * 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 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 */ []));
+    /** 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 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 });
+    }
+    /**
+     * 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
+        };
+    }
+    /**
+     * 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 });
+        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') {
+                    this.#patch(id, { status: 'done', progress: 100, error: 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 }, 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 }], 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<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\">{{ labels().dropHere }}</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:block;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-wrap:wrap;align-items:baseline;justify-content:center;gap:.25em;color:var(--hub-file-input-prompt-color);font-size:var(--hub-file-input-prompt-font-size)}.hub-file-input__browse{color:var(--hub-file-input-browse-color);font-weight:var(--hub-file-input-browse-font-weight);text-decoration:underline}.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<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\">{{ labels().dropHere }}</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:block;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-wrap:wrap;align-items:baseline;justify-content:center;gap:.25em;color:var(--hub-file-input-prompt-color);font-size:var(--hub-file-input-prompt-font-size)}.hub-file-input__browse{color:var(--hub-file-input-browse-color);font-weight:var(--hub-file-input-browse-font-weight);text-decoration:underline}.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 }] }], 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 }] }] } });
+
 /**
  * Inverts a HEX color, or returns the best contrasting black/white when `bw` is enabled.
  */
@@ -6293,6 +7245,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`.
@@ -6361,5 +7473,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, 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