ng-hub-ui-forms 22.6.0 → 22.8.0

package/README.md

@@ -273,7 +273,13 @@ bootstrapApplication(App, { providers: [provideHttpClient(), provideHubFileUploa
 > The observable **must be cold**: one subscription is one request. `cancel()` unsubscribes, which is what aborts the underlying `XMLHttpRequest`. A shared or hot observable silently breaks cancellation.
 > Bind a submit button to `uploading()` if you need to wait for the uploads: the control stays valid while they run, by design.
 
-Customize it without forking the template: 66 `--hub-file-input-*` tokens (every icon is a swappable CSS mask), the `hub-file-input-theme(...)` mixin, and two projection slots.
+Whatever the uploader reports on `done` is kept on the item, so the ids the server minted are there when you submit the form:
+
+```ts
+const uploadedIds = fileInput.files().map((item) => (item.response as { id: string }).id);
+```
+
+Customize it without forking the template: the `--hub-file-input-*` tokens (every icon is a swappable CSS mask), the `hub-file-input-theme(...)` mixin, and three projection slots.
 
 ```html
 <hub-file-input formControlName="attachments" [multiple]="true">
@@ -283,6 +289,23 @@ Customize it without forking the template: 66 `--hub-file-input-*` tokens (every
 </hub-file-input>
 ```
 
+#### Reproducing your own dropzone
+
+The dropzone is built from a glyph, an invitation and a browse action, each themeable on its own — so a design system reproduces its own without forking the template.
+
+- **Icon medallion** — `--hub-file-input-icon-bg`, `-icon-chip-size` and `-icon-chip-radius` put the glyph on a tinted, rounded surface. Transparent and square by default.
+- **Browse as a button** — `--hub-file-input-browse-bg`, `-hover-bg`, `-padding-x`, `-padding-y`, `-radius` and an optional leading glyph (`-browse-icon`, `-browse-icon-display`, `-browse-icon-size`). A transparent underlined link by default.
+- **Two invitation lines** — `[dropText]` and `[dropSubtext]` (or the `dropHere` / `dropSubtext` labels), stacked with `--hub-file-input-prompt-direction: column`. The second line is empty by default.
+- **A leading notice** — `hubFileDropzoneNotice` projects markup inside the dropzone, between the glyph and the invitation, for something the invitation cannot say.
+
+```html
+<hub-file-input dropText="Drop your documents here" dropSubtext="or click to browse" buttonLabel="Select files">
+	<ng-template hubFileDropzoneNotice>
+		<strong class="missing">{{ missingCount }} documents still missing</strong>
+	</ng-template>
+</hub-file-input>
+```
+
 ### Automatic errors at every level
 
 ```html
@@ -384,7 +407,7 @@ hub-input {
 }
 ```
 
-**`hub-select` inside a modal** — the dropdown panel stacks through `--hub-select-dropdown-z-index` (default `calc(var(--hub-sys-zindex-modal, 1055) + 5)`), so a select opened inside a `HubModal` renders above the dialog instead of being clipped underneath it.
+**`hub-select` inside a modal** — the dropdown panel stacks through `--hub-select-dropdown-zindex` (default `calc(var(--hub-sys-zindex-modal, 1055) + 5)`; the previous `--hub-select-dropdown-z-index` spelling is deprecated but still honoured), so a select opened inside a `HubModal` renders above the dialog instead of being clipped underneath it.
 
 **`hub-segmented` variants & theming** — the `color` input tints the selected segment from the semantic families (`<hub-segmented color="primary">`); any of the `--hub-segmented-*` slots can be set directly, or in one call with the SCSS mixin:
 

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

@@ -373,6 +373,7 @@ function formatFileSize(bytes, locale) {
 const defaultHubFileInputLabels = {
     browse: 'Browse files',
     dropHere: 'Drag files here, or',
+    dropSubtext: '',
     remove: 'Remove file',
     clear: 'Remove all',
     retry: 'Retry upload',
@@ -5761,7 +5762,7 @@ class HubSelectComponent extends HubFieldControl {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: HubSelectComponent, isStandalone: true, selector: "hub-select", inputs: { format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", 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 }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, fixedPlaceholder: { classPropertyName: "fixedPlaceholder", publicName: "fixedPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, notFoundText: { classPropertyName: "notFoundText", publicName: "notFoundText", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", 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", onFocus: "onFocus", onBlur: "onBlur", onOpen: "onOpen", onClose: "onClose", onClear: "onClear", onSearch: "onSearch", onAdd: "onAdd", onRemove: "onRemove", scroll: "scroll", scrollToEnd: "scrollToEnd" }, host: { properties: { "class": "classlist()", "class.hub-select-host": "true" } }, queries: [{ propertyName: "_optionTpl", first: true, predicate: NgOptionTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_optgroupTpl", first: true, predicate: NgOptgroupTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_labelTpl", first: true, predicate: NgLabelTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_multiLabelTpl", first: true, predicate: NgMultiLabelTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_headerTpl", first: true, predicate: NgHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_footerTpl", first: true, predicate: NgFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_notFoundTpl", first: true, predicate: NgNotFoundTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n\tclass=\"hub-field hub-select\"\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>\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@switch (format()) {\n\t\t\t@case (_selectFormats.Dropdown) {\n\t\t\t\t<ng-select\n\t\t\t\t\tclass=\"hub-select__control\"\n\t\t\t\t\t[class.hub-select__control--invalid]=\"isInvalid\"\n\t\t\t\t\t[labelForId]=\"$any(id)\"\n\t\t\t\t\t[items]=\"items()\"\n\t\t\t\t\t[bindLabel]=\"$any(bindLabel())\"\n\t\t\t\t\t[bindValue]=\"$any(bindValue())\"\n\t\t\t\t\t[groupBy]=\"$any(groupBy())\"\n\t\t\t\t\t[multiple]=\"multiple()\"\n\t\t\t\t\t[searchable]=\"searchable()\"\n\t\t\t\t\t[clearable]=\"clearable()\"\n\t\t\t\t\t[closeOnSelect]=\"closeOnSelect()\"\n\t\t\t\t\t[fixedPlaceholder]=\"fixedPlaceholder()\"\n\t\t\t\t\t[loading]=\"loading()\"\n\t\t\t\t\t[readonly]=\"readonly()\"\n\t\t\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t\t\t[notFoundText]=\"notFoundText()\"\n\t\t\t\t\t\t[appendTo]=\"appendTo()\"\n\t\t\t\t\t[ngModel]=\"_value()\"\n\t\t\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t\t\t(focus)=\"onFocus.emit($event)\"\n\t\t\t\t\t(blur)=\"onBlur.emit($event)\"\n\t\t\t\t\t(open)=\"onOpen.emit()\"\n\t\t\t\t\t(close)=\"onClose.emit()\"\n\t\t\t\t\t(clear)=\"onClear.emit()\"\n\t\t\t\t\t(search)=\"onSearch.emit($event)\"\n\t\t\t\t\t(add)=\"onAdd.emit($event)\"\n\t\t\t\t\t(remove)=\"onRemove.emit($event)\"\n\t\t\t\t\t(scroll)=\"scroll.emit($event)\"\n\t\t\t\t\t(scrollToEnd)=\"scrollToEnd.emit($event)\"\n\t\t\t\t>\n\t\t\t\t\t@if (_optionTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\" let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ item, item$, index, searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_optgroupTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-optgroup-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\" let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ item, item$, index, searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_labelTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\" let-label=\"label\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ item, clear, label }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_multiLabelTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ items, clear }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_headerTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-header-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_footerTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-footer-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_notFoundTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-notfound-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t</ng-select>\n\t\t\t}\n\t\t\t@case (_selectFormats.Buttons) {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"hub-select__buttons\"\n\t\t\t\t\t[class.hub-select__buttons--vertical]=\"vertical()\"\n\t\t\t\t\trole=\"group\"\n\t\t\t\t\t[attr.aria-label]=\"label() || null\"\n\t\t\t\t>\n\t\t\t\t\t@for (item of items(); track $index) {\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"hub-select__button\"\n\t\t\t\t\t\t\t[class.hub-select__button--selected]=\"isSelected(item)\"\n\t\t\t\t\t\t\t[attr.aria-pressed]=\"isSelected(item)\"\n\t\t\t\t\t\t\t[disabled]=\"disabled() || readonly()\"\n\t\t\t\t\t\t\t(click)=\"toggleItem(item)\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{{ itemLabel(item) }}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@default {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"hub-select__options\"\n\t\t\t\t\t[class.hub-select__options--vertical]=\"vertical()\"\n\t\t\t\t\t[attr.role]=\"format() === _selectFormats.Radio ? 'radiogroup' : 'group'\"\n\t\t\t\t\t[attr.aria-label]=\"label() || null\"\n\t\t\t\t>\n\t\t\t\t\t@for (item of items(); track $index) {\n\t\t\t\t\t\t<label class=\"hub-select__option\">\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\tclass=\"hub-select__option-input\"\n\t\t\t\t\t\t\t\t[type]=\"format() === _selectFormats.Radio ? 'radio' : 'checkbox'\"\n\t\t\t\t\t\t\t\t[name]=\"id\"\n\t\t\t\t\t\t\t\t[checked]=\"isSelected(item)\"\n\t\t\t\t\t\t\t\t[disabled]=\"disabled() || readonly()\"\n\t\t\t\t\t\t\t\t(change)=\"toggleItem(item)\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<span class=\"hub-select__option-label\">{{ itemLabel(item) }}</span>\n\t\t\t\t\t\t</label>\n\t\t\t\t\t}\n\t\t\t\t</div>\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</div>\n", styles: ["hub-select{display:block}hub-select.hidden-control{display:none!important}.hub-select__control.ng-select{font-size:var(--hub-select-font-size);color:var(--hub-select-color)}.hub-select__control.ng-select .ng-select-container{min-height:var(--hub-select-min-height);align-items:center;color:var(--hub-select-color);background:var(--hub-select-bg);border:var(--hub-select-border-width) solid var(--hub-select-border-color);border-radius:var(--hub-select-border-radius);transition:var(--hub-form-transition)}.hub-select__control.ng-select .ng-value-container{align-items:center;padding-left:var(--hub-select-padding-x)}.hub-select__control.ng-select .ng-placeholder{color:var(--hub-select-placeholder-color)}.hub-select__control.ng-select.ng-has-value .ng-placeholder{display:none}.hub-select__control.ng-select.ng-select-single .ng-select-container{height:var(--hub-select-min-height)}.hub-select__control.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:50%;transform:translateY(-50%);padding-left:var(--hub-select-padding-x);padding-right:3rem}.hub-select__control.ng-select .ng-value{color:var(--hub-select-color)}.hub-select__control.ng-select.ng-select-focused:not(.ng-select-opened) .ng-select-container,.hub-select__control.ng-select.ng-select-opened .ng-select-container{border-color:var(--hub-select-focus-border-color);box-shadow:var(--hub-select-focus-box-shadow)}.hub-select__control.ng-select.ng-select-multiple .ng-value-container{padding-top:0;padding-left:var(--hub-select-padding-x);gap:.25rem}.hub-select__control.ng-select.ng-select-multiple .ng-placeholder{top:50%;transform:translateY(-50%);padding-bottom:0}.hub-select__control.ng-select.ng-select-multiple .ng-value{display:inline-flex;align-items:center;margin:0 0 .25rem;background:var(--hub-select-value-bg);color:var(--hub-select-value-color);border-radius:var(--hub-select-value-border-radius)}.hub-select__control.ng-select.ng-select-multiple .ng-value .ng-value-label{padding:.1rem .4rem}.hub-select__control.ng-select.ng-select-multiple .ng-value .ng-value-icon{padding:.1rem .4rem;cursor:pointer}.hub-select__control.ng-select.ng-select-multiple .ng-value .ng-value-icon:hover{opacity:.7}.hub-select__control.ng-select.ng-select-multiple .ng-input{padding:0 0 .2rem .25rem}.hub-select__control.ng-select .ng-arrow-wrapper .ng-arrow{border-color:var(--hub-select-arrow-color) transparent transparent}.hub-select__control.ng-select .ng-clear-wrapper{color:var(--hub-select-clear-color)}.hub-select__control.ng-select .ng-clear-wrapper:hover .ng-clear{color:var(--hub-select-clear-hover-color)}.hub-select__control.ng-select.ng-select-disabled .ng-select-container{opacity:var(--hub-form-disabled-opacity)}.hub-select__control.ng-select.hub-select__control--invalid .ng-select-container{border-color:var(--hub-form-invalid-border-color)}.hub-select__control.ng-select.hub-select__control--invalid.ng-select-focused .ng-select-container{box-shadow:0 0 0 var(--hub-form-focus-ring-width) var(--hub-form-invalid-focus-ring-color)}.ng-dropdown-panel{background:var(--hub-select-dropdown-bg);border:var(--hub-select-border-width) solid var(--hub-select-dropdown-border-color);border-radius:var(--hub-select-dropdown-border-radius);box-shadow:var(--hub-select-dropdown-box-shadow)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:var(--hub-select-option-padding-y) var(--hub-select-option-padding-x);color:var(--hub-select-option-color);background:transparent}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background:var(--hub-select-option-marked-bg)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{color:var(--hub-select-option-selected-color);background:var(--hub-select-option-selected-bg)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{opacity:var(--hub-form-disabled-opacity)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{padding:var(--hub-select-option-padding-y) var(--hub-select-option-padding-x);color:var(--hub-select-optgroup-color);font-weight:var(--hub-ref-font-weight-medium, 500)}.hub-select__control .ng-dropdown-panel,.ng-dropdown-panel.hub-select__control{z-index:var(--hub-select-dropdown-z-index)}.hub-select__buttons{display:inline-flex;flex-wrap:wrap}.hub-select__buttons--vertical{flex-direction:column;align-items:stretch}.hub-select__button{position:relative;padding:var(--hub-select-button-padding-y) var(--hub-select-button-padding-x);color:var(--hub-select-button-color);background:var(--hub-select-button-bg);border:var(--hub-select-border-width) solid var(--hub-select-button-border-color);border-radius:0;font-size:var(--hub-select-font-size);cursor:pointer;transition:var(--hub-form-transition)}.hub-select__button:not(:first-child){margin-left:calc(-1 * var(--hub-select-border-width))}.hub-select__button:first-child{border-top-left-radius:var(--hub-select-border-radius);border-bottom-left-radius:var(--hub-select-border-radius)}.hub-select__button:last-child{border-top-right-radius:var(--hub-select-border-radius);border-bottom-right-radius:var(--hub-select-border-radius)}.hub-select__button:hover,.hub-select__button:focus-visible,.hub-select__button--selected{z-index:1}.hub-select__button:focus-visible{outline:0;box-shadow:var(--hub-input-focus-box-shadow)}.hub-select__button--selected{color:var(--hub-select-button-selected-color);background:var(--hub-select-button-selected-bg);border-color:var(--hub-select-button-selected-border-color)}.hub-select__button:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-select__buttons--vertical .hub-select__button:not(:first-child){margin-left:0;margin-top:calc(-1 * var(--hub-select-border-width))}.hub-select__buttons--vertical .hub-select__button:first-child{border-radius:var(--hub-select-border-radius) var(--hub-select-border-radius) 0 0}.hub-select__buttons--vertical .hub-select__button:last-child{border-radius:0 0 var(--hub-select-border-radius) var(--hub-select-border-radius)}.hub-select__buttons--vertical .hub-select__button:not(:first-child):not(:last-child){border-radius:0}.hub-select__options{display:flex;flex-wrap:wrap;gap:var(--hub-select-button-gap) var(--hub-ref-space-4, 1.5rem)}.hub-select__options--vertical{flex-direction:column}.hub-select__option{display:inline-flex;align-items:center;gap:var(--hub-check-label-gap);cursor:pointer}.hub-select__option-input{flex:0 0 auto;width:var(--hub-check-input-width);height:var(--hub-check-input-height);margin:0;accent-color:var(--hub-check-input-checked-bg);cursor:pointer}.hub-select__option-input:focus-visible{outline:0;box-shadow:var(--hub-input-focus-box-shadow)}.hub-select__option-input:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-select__option-label{color:var(--hub-select-color);font-size:var(--hub-select-font-size)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "outsideClickEvent", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "clearKeepsDisabledOptions", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "popover", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }, { kind: "directive", type: NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: NgOptgroupTemplateDirective, selector: "[ng-optgroup-tmp]" }, { kind: "directive", type: NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "directive", type: NgFooterTemplateDirective, selector: "[ng-footer-tmp]" }, { kind: "directive", type: NgNotFoundTemplateDirective, selector: "[ng-notfound-tmp]" }, { 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: HubSelectComponent, isStandalone: true, selector: "hub-select", inputs: { format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", 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 }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, fixedPlaceholder: { classPropertyName: "fixedPlaceholder", publicName: "fixedPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, notFoundText: { classPropertyName: "notFoundText", publicName: "notFoundText", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", 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", onFocus: "onFocus", onBlur: "onBlur", onOpen: "onOpen", onClose: "onClose", onClear: "onClear", onSearch: "onSearch", onAdd: "onAdd", onRemove: "onRemove", scroll: "scroll", scrollToEnd: "scrollToEnd" }, host: { properties: { "class": "classlist()", "class.hub-select-host": "true" } }, queries: [{ propertyName: "_optionTpl", first: true, predicate: NgOptionTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_optgroupTpl", first: true, predicate: NgOptgroupTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_labelTpl", first: true, predicate: NgLabelTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_multiLabelTpl", first: true, predicate: NgMultiLabelTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_headerTpl", first: true, predicate: NgHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_footerTpl", first: true, predicate: NgFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_notFoundTpl", first: true, predicate: NgNotFoundTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n\tclass=\"hub-field hub-select\"\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>\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@switch (format()) {\n\t\t\t@case (_selectFormats.Dropdown) {\n\t\t\t\t<ng-select\n\t\t\t\t\tclass=\"hub-select__control\"\n\t\t\t\t\t[class.hub-select__control--invalid]=\"isInvalid\"\n\t\t\t\t\t[labelForId]=\"$any(id)\"\n\t\t\t\t\t[items]=\"items()\"\n\t\t\t\t\t[bindLabel]=\"$any(bindLabel())\"\n\t\t\t\t\t[bindValue]=\"$any(bindValue())\"\n\t\t\t\t\t[groupBy]=\"$any(groupBy())\"\n\t\t\t\t\t[multiple]=\"multiple()\"\n\t\t\t\t\t[searchable]=\"searchable()\"\n\t\t\t\t\t[clearable]=\"clearable()\"\n\t\t\t\t\t[closeOnSelect]=\"closeOnSelect()\"\n\t\t\t\t\t[fixedPlaceholder]=\"fixedPlaceholder()\"\n\t\t\t\t\t[loading]=\"loading()\"\n\t\t\t\t\t[readonly]=\"readonly()\"\n\t\t\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t\t\t[notFoundText]=\"notFoundText()\"\n\t\t\t\t\t\t[appendTo]=\"appendTo()\"\n\t\t\t\t\t[ngModel]=\"_value()\"\n\t\t\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t\t\t(focus)=\"onFocus.emit($event)\"\n\t\t\t\t\t(blur)=\"onBlur.emit($event)\"\n\t\t\t\t\t(open)=\"onOpen.emit()\"\n\t\t\t\t\t(close)=\"onClose.emit()\"\n\t\t\t\t\t(clear)=\"onClear.emit()\"\n\t\t\t\t\t(search)=\"onSearch.emit($event)\"\n\t\t\t\t\t(add)=\"onAdd.emit($event)\"\n\t\t\t\t\t(remove)=\"onRemove.emit($event)\"\n\t\t\t\t\t(scroll)=\"scroll.emit($event)\"\n\t\t\t\t\t(scrollToEnd)=\"scrollToEnd.emit($event)\"\n\t\t\t\t>\n\t\t\t\t\t@if (_optionTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\" let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ item, item$, index, searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_optgroupTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-optgroup-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\" let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ item, item$, index, searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_labelTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\" let-label=\"label\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ item, clear, label }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_multiLabelTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ items, clear }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_headerTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-header-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_footerTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-footer-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_notFoundTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-notfound-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t</ng-select>\n\t\t\t}\n\t\t\t@case (_selectFormats.Buttons) {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"hub-select__buttons\"\n\t\t\t\t\t[class.hub-select__buttons--vertical]=\"vertical()\"\n\t\t\t\t\trole=\"group\"\n\t\t\t\t\t[attr.aria-label]=\"label() || null\"\n\t\t\t\t>\n\t\t\t\t\t@for (item of items(); track $index) {\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"hub-select__button\"\n\t\t\t\t\t\t\t[class.hub-select__button--selected]=\"isSelected(item)\"\n\t\t\t\t\t\t\t[attr.aria-pressed]=\"isSelected(item)\"\n\t\t\t\t\t\t\t[disabled]=\"disabled() || readonly()\"\n\t\t\t\t\t\t\t(click)=\"toggleItem(item)\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{{ itemLabel(item) }}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@default {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"hub-select__options\"\n\t\t\t\t\t[class.hub-select__options--vertical]=\"vertical()\"\n\t\t\t\t\t[attr.role]=\"format() === _selectFormats.Radio ? 'radiogroup' : 'group'\"\n\t\t\t\t\t[attr.aria-label]=\"label() || null\"\n\t\t\t\t>\n\t\t\t\t\t@for (item of items(); track $index) {\n\t\t\t\t\t\t<label class=\"hub-select__option\">\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\tclass=\"hub-select__option-input\"\n\t\t\t\t\t\t\t\t[type]=\"format() === _selectFormats.Radio ? 'radio' : 'checkbox'\"\n\t\t\t\t\t\t\t\t[name]=\"id\"\n\t\t\t\t\t\t\t\t[checked]=\"isSelected(item)\"\n\t\t\t\t\t\t\t\t[disabled]=\"disabled() || readonly()\"\n\t\t\t\t\t\t\t\t(change)=\"toggleItem(item)\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<span class=\"hub-select__option-label\">{{ itemLabel(item) }}</span>\n\t\t\t\t\t\t</label>\n\t\t\t\t\t}\n\t\t\t\t</div>\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</div>\n", styles: ["hub-select{display:block}hub-select.hidden-control{display:none!important}.hub-select__control.ng-select{font-size:var(--hub-select-font-size);color:var(--hub-select-color)}.hub-select__control.ng-select .ng-select-container{min-height:var(--hub-select-min-height);align-items:center;color:var(--hub-select-color);background:var(--hub-select-bg);border:var(--hub-select-border-width) solid var(--hub-select-border-color);border-radius:var(--hub-select-border-radius);transition:var(--hub-form-transition)}.hub-select__control.ng-select .ng-value-container{align-items:center;padding-left:var(--hub-select-padding-x)}.hub-select__control.ng-select .ng-placeholder{color:var(--hub-select-placeholder-color)}.hub-select__control.ng-select.ng-has-value .ng-placeholder{display:none}.hub-select__control.ng-select.ng-select-single .ng-select-container{height:var(--hub-select-min-height)}.hub-select__control.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:50%;transform:translateY(-50%);padding-left:var(--hub-select-padding-x);padding-right:3rem}.hub-select__control.ng-select .ng-value{color:var(--hub-select-color)}.hub-select__control.ng-select.ng-select-focused:not(.ng-select-opened) .ng-select-container,.hub-select__control.ng-select.ng-select-opened .ng-select-container{border-color:var(--hub-select-focus-border-color);box-shadow:var(--hub-select-focus-box-shadow)}.hub-select__control.ng-select.ng-select-multiple .ng-value-container{padding-top:0;padding-left:var(--hub-select-padding-x);gap:.25rem}.hub-select__control.ng-select.ng-select-multiple .ng-placeholder{top:50%;transform:translateY(-50%);padding-bottom:0}.hub-select__control.ng-select.ng-select-multiple .ng-value{display:inline-flex;align-items:center;margin:0 0 .25rem;background:var(--hub-select-value-bg);color:var(--hub-select-value-color);border-radius:var(--hub-select-value-border-radius)}.hub-select__control.ng-select.ng-select-multiple .ng-value .ng-value-label{padding:.1rem .4rem}.hub-select__control.ng-select.ng-select-multiple .ng-value .ng-value-icon{padding:.1rem .4rem;cursor:pointer}.hub-select__control.ng-select.ng-select-multiple .ng-value .ng-value-icon:hover{opacity:.7}.hub-select__control.ng-select.ng-select-multiple .ng-input{padding:0 0 .2rem .25rem}.hub-select__control.ng-select .ng-arrow-wrapper .ng-arrow{border-color:var(--hub-select-arrow-color) transparent transparent}.hub-select__control.ng-select .ng-clear-wrapper{color:var(--hub-select-clear-color)}.hub-select__control.ng-select .ng-clear-wrapper:hover .ng-clear{color:var(--hub-select-clear-hover-color)}.hub-select__control.ng-select.ng-select-disabled .ng-select-container{opacity:var(--hub-form-disabled-opacity)}.hub-select__control.ng-select.hub-select__control--invalid .ng-select-container{border-color:var(--hub-form-invalid-border-color)}.hub-select__control.ng-select.hub-select__control--invalid.ng-select-focused .ng-select-container{box-shadow:0 0 0 var(--hub-form-focus-ring-width) var(--hub-form-invalid-focus-ring-color)}.ng-dropdown-panel{background:var(--hub-select-dropdown-bg);border:var(--hub-select-border-width) solid var(--hub-select-dropdown-border-color);border-radius:var(--hub-select-dropdown-border-radius);box-shadow:var(--hub-select-dropdown-box-shadow)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:var(--hub-select-option-padding-y) var(--hub-select-option-padding-x);color:var(--hub-select-option-color);background:transparent}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background:var(--hub-select-option-marked-bg)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{color:var(--hub-select-option-selected-color);background:var(--hub-select-option-selected-bg)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{opacity:var(--hub-form-disabled-opacity)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{padding:var(--hub-select-option-padding-y) var(--hub-select-option-padding-x);color:var(--hub-select-optgroup-color);font-weight:var(--hub-ref-font-weight-medium, 500)}.hub-select__control .ng-dropdown-panel,.ng-dropdown-panel.hub-select__control{z-index:var(--hub-select-dropdown-zindex, var(--hub-select-dropdown-z-index))}.hub-select__buttons{display:inline-flex;flex-wrap:wrap}.hub-select__buttons--vertical{flex-direction:column;align-items:stretch}.hub-select__button{position:relative;padding:var(--hub-select-button-padding-y) var(--hub-select-button-padding-x);color:var(--hub-select-button-color);background:var(--hub-select-button-bg);border:var(--hub-select-border-width) solid var(--hub-select-button-border-color);border-radius:0;font-size:var(--hub-select-font-size);cursor:pointer;transition:var(--hub-form-transition)}.hub-select__button:not(:first-child){margin-left:calc(-1 * var(--hub-select-border-width))}.hub-select__button:first-child{border-top-left-radius:var(--hub-select-border-radius);border-bottom-left-radius:var(--hub-select-border-radius)}.hub-select__button:last-child{border-top-right-radius:var(--hub-select-border-radius);border-bottom-right-radius:var(--hub-select-border-radius)}.hub-select__button:hover,.hub-select__button:focus-visible,.hub-select__button--selected{z-index:1}.hub-select__button:focus-visible{outline:0;box-shadow:var(--hub-input-focus-box-shadow)}.hub-select__button--selected{color:var(--hub-select-button-selected-color);background:var(--hub-select-button-selected-bg);border-color:var(--hub-select-button-selected-border-color)}.hub-select__button:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-select__buttons--vertical .hub-select__button:not(:first-child){margin-left:0;margin-top:calc(-1 * var(--hub-select-border-width))}.hub-select__buttons--vertical .hub-select__button:first-child{border-radius:var(--hub-select-border-radius) var(--hub-select-border-radius) 0 0}.hub-select__buttons--vertical .hub-select__button:last-child{border-radius:0 0 var(--hub-select-border-radius) var(--hub-select-border-radius)}.hub-select__buttons--vertical .hub-select__button:not(:first-child):not(:last-child){border-radius:0}.hub-select__options{display:flex;flex-wrap:wrap;gap:var(--hub-select-button-gap) var(--hub-ref-space-4, 1.5rem)}.hub-select__options--vertical{flex-direction:column}.hub-select__option{display:inline-flex;align-items:center;gap:var(--hub-check-label-gap);cursor:pointer}.hub-select__option-input{flex:0 0 auto;width:var(--hub-check-input-width);height:var(--hub-check-input-height);margin:0;accent-color:var(--hub-check-input-checked-bg);cursor:pointer}.hub-select__option-input:focus-visible{outline:0;box-shadow:var(--hub-input-focus-box-shadow)}.hub-select__option-input:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-select__option-label{color:var(--hub-select-color);font-size:var(--hub-select-font-size)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "outsideClickEvent", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "clearKeepsDisabledOptions", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "popover", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }, { kind: "directive", type: NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: NgOptgroupTemplateDirective, selector: "[ng-optgroup-tmp]" }, { kind: "directive", type: NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "directive", type: NgFooterTemplateDirective, selector: "[ng-footer-tmp]" }, { kind: "directive", type: NgNotFoundTemplateDirective, selector: "[ng-notfound-tmp]" }, { 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: HubSelectComponent, decorators: [{
             type: Component,
@@ -5781,7 +5782,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                     ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         '[class]': 'classlist()',
                         '[class.hub-select-host]': 'true'
-                    }, template: "<div\n\tclass=\"hub-field hub-select\"\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>\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@switch (format()) {\n\t\t\t@case (_selectFormats.Dropdown) {\n\t\t\t\t<ng-select\n\t\t\t\t\tclass=\"hub-select__control\"\n\t\t\t\t\t[class.hub-select__control--invalid]=\"isInvalid\"\n\t\t\t\t\t[labelForId]=\"$any(id)\"\n\t\t\t\t\t[items]=\"items()\"\n\t\t\t\t\t[bindLabel]=\"$any(bindLabel())\"\n\t\t\t\t\t[bindValue]=\"$any(bindValue())\"\n\t\t\t\t\t[groupBy]=\"$any(groupBy())\"\n\t\t\t\t\t[multiple]=\"multiple()\"\n\t\t\t\t\t[searchable]=\"searchable()\"\n\t\t\t\t\t[clearable]=\"clearable()\"\n\t\t\t\t\t[closeOnSelect]=\"closeOnSelect()\"\n\t\t\t\t\t[fixedPlaceholder]=\"fixedPlaceholder()\"\n\t\t\t\t\t[loading]=\"loading()\"\n\t\t\t\t\t[readonly]=\"readonly()\"\n\t\t\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t\t\t[notFoundText]=\"notFoundText()\"\n\t\t\t\t\t\t[appendTo]=\"appendTo()\"\n\t\t\t\t\t[ngModel]=\"_value()\"\n\t\t\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t\t\t(focus)=\"onFocus.emit($event)\"\n\t\t\t\t\t(blur)=\"onBlur.emit($event)\"\n\t\t\t\t\t(open)=\"onOpen.emit()\"\n\t\t\t\t\t(close)=\"onClose.emit()\"\n\t\t\t\t\t(clear)=\"onClear.emit()\"\n\t\t\t\t\t(search)=\"onSearch.emit($event)\"\n\t\t\t\t\t(add)=\"onAdd.emit($event)\"\n\t\t\t\t\t(remove)=\"onRemove.emit($event)\"\n\t\t\t\t\t(scroll)=\"scroll.emit($event)\"\n\t\t\t\t\t(scrollToEnd)=\"scrollToEnd.emit($event)\"\n\t\t\t\t>\n\t\t\t\t\t@if (_optionTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\" let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ item, item$, index, searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_optgroupTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-optgroup-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\" let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ item, item$, index, searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_labelTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\" let-label=\"label\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ item, clear, label }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_multiLabelTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ items, clear }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_headerTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-header-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_footerTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-footer-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_notFoundTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-notfound-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t</ng-select>\n\t\t\t}\n\t\t\t@case (_selectFormats.Buttons) {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"hub-select__buttons\"\n\t\t\t\t\t[class.hub-select__buttons--vertical]=\"vertical()\"\n\t\t\t\t\trole=\"group\"\n\t\t\t\t\t[attr.aria-label]=\"label() || null\"\n\t\t\t\t>\n\t\t\t\t\t@for (item of items(); track $index) {\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"hub-select__button\"\n\t\t\t\t\t\t\t[class.hub-select__button--selected]=\"isSelected(item)\"\n\t\t\t\t\t\t\t[attr.aria-pressed]=\"isSelected(item)\"\n\t\t\t\t\t\t\t[disabled]=\"disabled() || readonly()\"\n\t\t\t\t\t\t\t(click)=\"toggleItem(item)\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{{ itemLabel(item) }}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@default {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"hub-select__options\"\n\t\t\t\t\t[class.hub-select__options--vertical]=\"vertical()\"\n\t\t\t\t\t[attr.role]=\"format() === _selectFormats.Radio ? 'radiogroup' : 'group'\"\n\t\t\t\t\t[attr.aria-label]=\"label() || null\"\n\t\t\t\t>\n\t\t\t\t\t@for (item of items(); track $index) {\n\t\t\t\t\t\t<label class=\"hub-select__option\">\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\tclass=\"hub-select__option-input\"\n\t\t\t\t\t\t\t\t[type]=\"format() === _selectFormats.Radio ? 'radio' : 'checkbox'\"\n\t\t\t\t\t\t\t\t[name]=\"id\"\n\t\t\t\t\t\t\t\t[checked]=\"isSelected(item)\"\n\t\t\t\t\t\t\t\t[disabled]=\"disabled() || readonly()\"\n\t\t\t\t\t\t\t\t(change)=\"toggleItem(item)\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<span class=\"hub-select__option-label\">{{ itemLabel(item) }}</span>\n\t\t\t\t\t\t</label>\n\t\t\t\t\t}\n\t\t\t\t</div>\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</div>\n", styles: ["hub-select{display:block}hub-select.hidden-control{display:none!important}.hub-select__control.ng-select{font-size:var(--hub-select-font-size);color:var(--hub-select-color)}.hub-select__control.ng-select .ng-select-container{min-height:var(--hub-select-min-height);align-items:center;color:var(--hub-select-color);background:var(--hub-select-bg);border:var(--hub-select-border-width) solid var(--hub-select-border-color);border-radius:var(--hub-select-border-radius);transition:var(--hub-form-transition)}.hub-select__control.ng-select .ng-value-container{align-items:center;padding-left:var(--hub-select-padding-x)}.hub-select__control.ng-select .ng-placeholder{color:var(--hub-select-placeholder-color)}.hub-select__control.ng-select.ng-has-value .ng-placeholder{display:none}.hub-select__control.ng-select.ng-select-single .ng-select-container{height:var(--hub-select-min-height)}.hub-select__control.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:50%;transform:translateY(-50%);padding-left:var(--hub-select-padding-x);padding-right:3rem}.hub-select__control.ng-select .ng-value{color:var(--hub-select-color)}.hub-select__control.ng-select.ng-select-focused:not(.ng-select-opened) .ng-select-container,.hub-select__control.ng-select.ng-select-opened .ng-select-container{border-color:var(--hub-select-focus-border-color);box-shadow:var(--hub-select-focus-box-shadow)}.hub-select__control.ng-select.ng-select-multiple .ng-value-container{padding-top:0;padding-left:var(--hub-select-padding-x);gap:.25rem}.hub-select__control.ng-select.ng-select-multiple .ng-placeholder{top:50%;transform:translateY(-50%);padding-bottom:0}.hub-select__control.ng-select.ng-select-multiple .ng-value{display:inline-flex;align-items:center;margin:0 0 .25rem;background:var(--hub-select-value-bg);color:var(--hub-select-value-color);border-radius:var(--hub-select-value-border-radius)}.hub-select__control.ng-select.ng-select-multiple .ng-value .ng-value-label{padding:.1rem .4rem}.hub-select__control.ng-select.ng-select-multiple .ng-value .ng-value-icon{padding:.1rem .4rem;cursor:pointer}.hub-select__control.ng-select.ng-select-multiple .ng-value .ng-value-icon:hover{opacity:.7}.hub-select__control.ng-select.ng-select-multiple .ng-input{padding:0 0 .2rem .25rem}.hub-select__control.ng-select .ng-arrow-wrapper .ng-arrow{border-color:var(--hub-select-arrow-color) transparent transparent}.hub-select__control.ng-select .ng-clear-wrapper{color:var(--hub-select-clear-color)}.hub-select__control.ng-select .ng-clear-wrapper:hover .ng-clear{color:var(--hub-select-clear-hover-color)}.hub-select__control.ng-select.ng-select-disabled .ng-select-container{opacity:var(--hub-form-disabled-opacity)}.hub-select__control.ng-select.hub-select__control--invalid .ng-select-container{border-color:var(--hub-form-invalid-border-color)}.hub-select__control.ng-select.hub-select__control--invalid.ng-select-focused .ng-select-container{box-shadow:0 0 0 var(--hub-form-focus-ring-width) var(--hub-form-invalid-focus-ring-color)}.ng-dropdown-panel{background:var(--hub-select-dropdown-bg);border:var(--hub-select-border-width) solid var(--hub-select-dropdown-border-color);border-radius:var(--hub-select-dropdown-border-radius);box-shadow:var(--hub-select-dropdown-box-shadow)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:var(--hub-select-option-padding-y) var(--hub-select-option-padding-x);color:var(--hub-select-option-color);background:transparent}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background:var(--hub-select-option-marked-bg)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{color:var(--hub-select-option-selected-color);background:var(--hub-select-option-selected-bg)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{opacity:var(--hub-form-disabled-opacity)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{padding:var(--hub-select-option-padding-y) var(--hub-select-option-padding-x);color:var(--hub-select-optgroup-color);font-weight:var(--hub-ref-font-weight-medium, 500)}.hub-select__control .ng-dropdown-panel,.ng-dropdown-panel.hub-select__control{z-index:var(--hub-select-dropdown-z-index)}.hub-select__buttons{display:inline-flex;flex-wrap:wrap}.hub-select__buttons--vertical{flex-direction:column;align-items:stretch}.hub-select__button{position:relative;padding:var(--hub-select-button-padding-y) var(--hub-select-button-padding-x);color:var(--hub-select-button-color);background:var(--hub-select-button-bg);border:var(--hub-select-border-width) solid var(--hub-select-button-border-color);border-radius:0;font-size:var(--hub-select-font-size);cursor:pointer;transition:var(--hub-form-transition)}.hub-select__button:not(:first-child){margin-left:calc(-1 * var(--hub-select-border-width))}.hub-select__button:first-child{border-top-left-radius:var(--hub-select-border-radius);border-bottom-left-radius:var(--hub-select-border-radius)}.hub-select__button:last-child{border-top-right-radius:var(--hub-select-border-radius);border-bottom-right-radius:var(--hub-select-border-radius)}.hub-select__button:hover,.hub-select__button:focus-visible,.hub-select__button--selected{z-index:1}.hub-select__button:focus-visible{outline:0;box-shadow:var(--hub-input-focus-box-shadow)}.hub-select__button--selected{color:var(--hub-select-button-selected-color);background:var(--hub-select-button-selected-bg);border-color:var(--hub-select-button-selected-border-color)}.hub-select__button:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-select__buttons--vertical .hub-select__button:not(:first-child){margin-left:0;margin-top:calc(-1 * var(--hub-select-border-width))}.hub-select__buttons--vertical .hub-select__button:first-child{border-radius:var(--hub-select-border-radius) var(--hub-select-border-radius) 0 0}.hub-select__buttons--vertical .hub-select__button:last-child{border-radius:0 0 var(--hub-select-border-radius) var(--hub-select-border-radius)}.hub-select__buttons--vertical .hub-select__button:not(:first-child):not(:last-child){border-radius:0}.hub-select__options{display:flex;flex-wrap:wrap;gap:var(--hub-select-button-gap) var(--hub-ref-space-4, 1.5rem)}.hub-select__options--vertical{flex-direction:column}.hub-select__option{display:inline-flex;align-items:center;gap:var(--hub-check-label-gap);cursor:pointer}.hub-select__option-input{flex:0 0 auto;width:var(--hub-check-input-width);height:var(--hub-check-input-height);margin:0;accent-color:var(--hub-check-input-checked-bg);cursor:pointer}.hub-select__option-input:focus-visible{outline:0;box-shadow:var(--hub-input-focus-box-shadow)}.hub-select__option-input:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-select__option-label{color:var(--hub-select-color);font-size:var(--hub-select-font-size)}\n"] }]
+                    }, template: "<div\n\tclass=\"hub-field hub-select\"\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>\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@switch (format()) {\n\t\t\t@case (_selectFormats.Dropdown) {\n\t\t\t\t<ng-select\n\t\t\t\t\tclass=\"hub-select__control\"\n\t\t\t\t\t[class.hub-select__control--invalid]=\"isInvalid\"\n\t\t\t\t\t[labelForId]=\"$any(id)\"\n\t\t\t\t\t[items]=\"items()\"\n\t\t\t\t\t[bindLabel]=\"$any(bindLabel())\"\n\t\t\t\t\t[bindValue]=\"$any(bindValue())\"\n\t\t\t\t\t[groupBy]=\"$any(groupBy())\"\n\t\t\t\t\t[multiple]=\"multiple()\"\n\t\t\t\t\t[searchable]=\"searchable()\"\n\t\t\t\t\t[clearable]=\"clearable()\"\n\t\t\t\t\t[closeOnSelect]=\"closeOnSelect()\"\n\t\t\t\t\t[fixedPlaceholder]=\"fixedPlaceholder()\"\n\t\t\t\t\t[loading]=\"loading()\"\n\t\t\t\t\t[readonly]=\"readonly()\"\n\t\t\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t\t\t[notFoundText]=\"notFoundText()\"\n\t\t\t\t\t\t[appendTo]=\"appendTo()\"\n\t\t\t\t\t[ngModel]=\"_value()\"\n\t\t\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t\t\t(focus)=\"onFocus.emit($event)\"\n\t\t\t\t\t(blur)=\"onBlur.emit($event)\"\n\t\t\t\t\t(open)=\"onOpen.emit()\"\n\t\t\t\t\t(close)=\"onClose.emit()\"\n\t\t\t\t\t(clear)=\"onClear.emit()\"\n\t\t\t\t\t(search)=\"onSearch.emit($event)\"\n\t\t\t\t\t(add)=\"onAdd.emit($event)\"\n\t\t\t\t\t(remove)=\"onRemove.emit($event)\"\n\t\t\t\t\t(scroll)=\"scroll.emit($event)\"\n\t\t\t\t\t(scrollToEnd)=\"scrollToEnd.emit($event)\"\n\t\t\t\t>\n\t\t\t\t\t@if (_optionTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\" let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ item, item$, index, searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_optgroupTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-optgroup-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\" let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ item, item$, index, searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_labelTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\" let-label=\"label\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ item, clear, label }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_multiLabelTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ items, clear }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_headerTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-header-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_footerTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-footer-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_notFoundTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-notfound-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t</ng-select>\n\t\t\t}\n\t\t\t@case (_selectFormats.Buttons) {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"hub-select__buttons\"\n\t\t\t\t\t[class.hub-select__buttons--vertical]=\"vertical()\"\n\t\t\t\t\trole=\"group\"\n\t\t\t\t\t[attr.aria-label]=\"label() || null\"\n\t\t\t\t>\n\t\t\t\t\t@for (item of items(); track $index) {\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"hub-select__button\"\n\t\t\t\t\t\t\t[class.hub-select__button--selected]=\"isSelected(item)\"\n\t\t\t\t\t\t\t[attr.aria-pressed]=\"isSelected(item)\"\n\t\t\t\t\t\t\t[disabled]=\"disabled() || readonly()\"\n\t\t\t\t\t\t\t(click)=\"toggleItem(item)\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{{ itemLabel(item) }}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@default {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"hub-select__options\"\n\t\t\t\t\t[class.hub-select__options--vertical]=\"vertical()\"\n\t\t\t\t\t[attr.role]=\"format() === _selectFormats.Radio ? 'radiogroup' : 'group'\"\n\t\t\t\t\t[attr.aria-label]=\"label() || null\"\n\t\t\t\t>\n\t\t\t\t\t@for (item of items(); track $index) {\n\t\t\t\t\t\t<label class=\"hub-select__option\">\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\tclass=\"hub-select__option-input\"\n\t\t\t\t\t\t\t\t[type]=\"format() === _selectFormats.Radio ? 'radio' : 'checkbox'\"\n\t\t\t\t\t\t\t\t[name]=\"id\"\n\t\t\t\t\t\t\t\t[checked]=\"isSelected(item)\"\n\t\t\t\t\t\t\t\t[disabled]=\"disabled() || readonly()\"\n\t\t\t\t\t\t\t\t(change)=\"toggleItem(item)\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<span class=\"hub-select__option-label\">{{ itemLabel(item) }}</span>\n\t\t\t\t\t\t</label>\n\t\t\t\t\t}\n\t\t\t\t</div>\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</div>\n", styles: ["hub-select{display:block}hub-select.hidden-control{display:none!important}.hub-select__control.ng-select{font-size:var(--hub-select-font-size);color:var(--hub-select-color)}.hub-select__control.ng-select .ng-select-container{min-height:var(--hub-select-min-height);align-items:center;color:var(--hub-select-color);background:var(--hub-select-bg);border:var(--hub-select-border-width) solid var(--hub-select-border-color);border-radius:var(--hub-select-border-radius);transition:var(--hub-form-transition)}.hub-select__control.ng-select .ng-value-container{align-items:center;padding-left:var(--hub-select-padding-x)}.hub-select__control.ng-select .ng-placeholder{color:var(--hub-select-placeholder-color)}.hub-select__control.ng-select.ng-has-value .ng-placeholder{display:none}.hub-select__control.ng-select.ng-select-single .ng-select-container{height:var(--hub-select-min-height)}.hub-select__control.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:50%;transform:translateY(-50%);padding-left:var(--hub-select-padding-x);padding-right:3rem}.hub-select__control.ng-select .ng-value{color:var(--hub-select-color)}.hub-select__control.ng-select.ng-select-focused:not(.ng-select-opened) .ng-select-container,.hub-select__control.ng-select.ng-select-opened .ng-select-container{border-color:var(--hub-select-focus-border-color);box-shadow:var(--hub-select-focus-box-shadow)}.hub-select__control.ng-select.ng-select-multiple .ng-value-container{padding-top:0;padding-left:var(--hub-select-padding-x);gap:.25rem}.hub-select__control.ng-select.ng-select-multiple .ng-placeholder{top:50%;transform:translateY(-50%);padding-bottom:0}.hub-select__control.ng-select.ng-select-multiple .ng-value{display:inline-flex;align-items:center;margin:0 0 .25rem;background:var(--hub-select-value-bg);color:var(--hub-select-value-color);border-radius:var(--hub-select-value-border-radius)}.hub-select__control.ng-select.ng-select-multiple .ng-value .ng-value-label{padding:.1rem .4rem}.hub-select__control.ng-select.ng-select-multiple .ng-value .ng-value-icon{padding:.1rem .4rem;cursor:pointer}.hub-select__control.ng-select.ng-select-multiple .ng-value .ng-value-icon:hover{opacity:.7}.hub-select__control.ng-select.ng-select-multiple .ng-input{padding:0 0 .2rem .25rem}.hub-select__control.ng-select .ng-arrow-wrapper .ng-arrow{border-color:var(--hub-select-arrow-color) transparent transparent}.hub-select__control.ng-select .ng-clear-wrapper{color:var(--hub-select-clear-color)}.hub-select__control.ng-select .ng-clear-wrapper:hover .ng-clear{color:var(--hub-select-clear-hover-color)}.hub-select__control.ng-select.ng-select-disabled .ng-select-container{opacity:var(--hub-form-disabled-opacity)}.hub-select__control.ng-select.hub-select__control--invalid .ng-select-container{border-color:var(--hub-form-invalid-border-color)}.hub-select__control.ng-select.hub-select__control--invalid.ng-select-focused .ng-select-container{box-shadow:0 0 0 var(--hub-form-focus-ring-width) var(--hub-form-invalid-focus-ring-color)}.ng-dropdown-panel{background:var(--hub-select-dropdown-bg);border:var(--hub-select-border-width) solid var(--hub-select-dropdown-border-color);border-radius:var(--hub-select-dropdown-border-radius);box-shadow:var(--hub-select-dropdown-box-shadow)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:var(--hub-select-option-padding-y) var(--hub-select-option-padding-x);color:var(--hub-select-option-color);background:transparent}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background:var(--hub-select-option-marked-bg)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{color:var(--hub-select-option-selected-color);background:var(--hub-select-option-selected-bg)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{opacity:var(--hub-form-disabled-opacity)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{padding:var(--hub-select-option-padding-y) var(--hub-select-option-padding-x);color:var(--hub-select-optgroup-color);font-weight:var(--hub-ref-font-weight-medium, 500)}.hub-select__control .ng-dropdown-panel,.ng-dropdown-panel.hub-select__control{z-index:var(--hub-select-dropdown-zindex, var(--hub-select-dropdown-z-index))}.hub-select__buttons{display:inline-flex;flex-wrap:wrap}.hub-select__buttons--vertical{flex-direction:column;align-items:stretch}.hub-select__button{position:relative;padding:var(--hub-select-button-padding-y) var(--hub-select-button-padding-x);color:var(--hub-select-button-color);background:var(--hub-select-button-bg);border:var(--hub-select-border-width) solid var(--hub-select-button-border-color);border-radius:0;font-size:var(--hub-select-font-size);cursor:pointer;transition:var(--hub-form-transition)}.hub-select__button:not(:first-child){margin-left:calc(-1 * var(--hub-select-border-width))}.hub-select__button:first-child{border-top-left-radius:var(--hub-select-border-radius);border-bottom-left-radius:var(--hub-select-border-radius)}.hub-select__button:last-child{border-top-right-radius:var(--hub-select-border-radius);border-bottom-right-radius:var(--hub-select-border-radius)}.hub-select__button:hover,.hub-select__button:focus-visible,.hub-select__button--selected{z-index:1}.hub-select__button:focus-visible{outline:0;box-shadow:var(--hub-input-focus-box-shadow)}.hub-select__button--selected{color:var(--hub-select-button-selected-color);background:var(--hub-select-button-selected-bg);border-color:var(--hub-select-button-selected-border-color)}.hub-select__button:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-select__buttons--vertical .hub-select__button:not(:first-child){margin-left:0;margin-top:calc(-1 * var(--hub-select-border-width))}.hub-select__buttons--vertical .hub-select__button:first-child{border-radius:var(--hub-select-border-radius) var(--hub-select-border-radius) 0 0}.hub-select__buttons--vertical .hub-select__button:last-child{border-radius:0 0 var(--hub-select-border-radius) var(--hub-select-border-radius)}.hub-select__buttons--vertical .hub-select__button:not(:first-child):not(:last-child){border-radius:0}.hub-select__options{display:flex;flex-wrap:wrap;gap:var(--hub-select-button-gap) var(--hub-ref-space-4, 1.5rem)}.hub-select__options--vertical{flex-direction:column}.hub-select__option{display:inline-flex;align-items:center;gap:var(--hub-check-label-gap);cursor:pointer}.hub-select__option-input{flex:0 0 auto;width:var(--hub-check-input-width);height:var(--hub-check-input-height);margin:0;accent-color:var(--hub-check-input-checked-bg);cursor:pointer}.hub-select__option-input:focus-visible{outline:0;box-shadow:var(--hub-input-focus-box-shadow)}.hub-select__option-input:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-select__option-label{color:var(--hub-select-color);font-size:var(--hub-select-font-size)}\n"] }]
         }], propDecorators: { _optionTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgOptionTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _optgroupTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgOptgroupTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _labelTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgLabelTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _multiLabelTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgMultiLabelTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _headerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgHeaderTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _footerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgFooterTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _notFoundTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgNotFoundTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }], groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", 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 }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], fixedPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixedPlaceholder", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], notFoundText: [{ type: i0.Input, args: [{ isSignal: true, alias: "notFoundText", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", 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"] }], onFocus: [{ type: i0.Output, args: ["onFocus"] }], onBlur: [{ type: i0.Output, args: ["onBlur"] }], onOpen: [{ type: i0.Output, args: ["onOpen"] }], onClose: [{ type: i0.Output, args: ["onClose"] }], onClear: [{ type: i0.Output, args: ["onClear"] }], onSearch: [{ type: i0.Output, args: ["onSearch"] }], onAdd: [{ type: i0.Output, args: ["onAdd"] }], onRemove: [{ type: i0.Output, args: ["onRemove"] }], scroll: [{ type: i0.Output, args: ["scroll"] }], scrollToEnd: [{ type: i0.Output, args: ["scrollToEnd"] }] } });
 
 /**
@@ -6311,6 +6312,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                 }]
         }] });
 
+/**
+ * Projects arbitrary markup inside a `<hub-file-input>` dropzone, between the glyph and the
+ * invitation.
+ *
+ * The slot exists for a notice the consumer computes per instance — "2 documents still missing",
+ * a badge, a warning — which neither `dropText` (the invitation) nor `hint` (the constraints
+ * summary, rendered at the bottom) can express, and which is too instance-specific to live in the
+ * global labels.
+ *
+ * Renders nothing when the template is absent, so the dropzone is unchanged for every consumer
+ * that does not project one.
+ *
+ * @example
+ * ```html
+ * <hub-file-input [multiple]="true">
+ *   <ng-template hubFileDropzoneNotice>
+ *     <strong class="missing">2 documents still missing</strong>
+ *   </ng-template>
+ * </hub-file-input>
+ * ```
+ */
+class HubFileDropzoneNoticeDirective {
+    /** Template reference for the notice. */
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubFileDropzoneNoticeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.1", type: HubFileDropzoneNoticeDirective, isStandalone: true, selector: "[hubFileDropzoneNotice]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubFileDropzoneNoticeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hubFileDropzoneNotice]'
+                }]
+        }] });
+
 /**
  * Replaces the entire rendering of a selected file in `<hub-file-input>`.
  *
@@ -6533,6 +6568,12 @@ class HubFileInputComponent extends HubFieldControl {
     /** Overrides the "browse" button text coming from the global labels. */
     buttonLabel = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "buttonLabel" }] : /* istanbul ignore next */ []));
+    /** Overrides the dropzone invitation coming from the global labels. */
+    dropText = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dropText" }] : /* istanbul ignore next */ []));
+    /** Overrides the second invitation line coming from the global labels. Pass `''` to hide it. */
+    dropSubtext = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dropSubtext" }] : /* istanbul ignore next */ []));
     /** Overrides the auto-generated hint that summarizes the active constraints. Pass `''` to hide it. */
     hint = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
@@ -6562,6 +6603,9 @@ class HubFileInputComponent extends HubFieldControl {
     /** Projected per-file preview template, replacing the built-in item rendering. */
     previewTpt = contentChild(HubFilePreviewDirective, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "previewTpt" }] : /* istanbul ignore next */ []));
+    /** Projected notice rendered between the glyph and the invitation. */
+    noticeTpt = contentChild(HubFileDropzoneNoticeDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "noticeTpt" }] : /* istanbul ignore next */ []));
     /** Whether a drag is currently hovering the dropzone. */
     isDragging = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isDragging" }] : /* istanbul ignore next */ []));
@@ -6581,6 +6625,12 @@ class HubFileInputComponent extends HubFieldControl {
     /** Text of the browse action. */
     browseLabel = computed(() => this.buttonLabel() ?? this.labels().browse, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "browseLabel" }] : /* istanbul ignore next */ []));
+    /** The dropzone invitation. */
+    dropTextLabel = computed(() => this.dropText() ?? this.labels().dropHere, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dropTextLabel" }] : /* istanbul ignore next */ []));
+    /** The second invitation line. Empty renders nothing. */
+    dropSubtextLabel = computed(() => this.dropSubtext() ?? this.labels().dropSubtext, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dropSubtextLabel" }] : /* istanbul ignore next */ []));
     /** The hint summarizing the active constraints. */
     constraintsHint = computed(() => {
         const override = this.hint();
@@ -6680,7 +6730,7 @@ class HubFileInputComponent extends HubFieldControl {
             return;
         }
         this.#abort(id);
-        this.#patch(id, { status: 'ready', progress: null, error: null });
+        this.#patch(id, { status: 'ready', progress: null, error: null, response: null });
     }
     /**
      * Re-runs the upload of a file, typically after a failure.
@@ -6887,7 +6937,8 @@ class HubFileInputComponent extends HubFieldControl {
             previewUrl: previewable ? URL.createObjectURL(file) : null,
             status: 'ready',
             progress: null,
-            error: null
+            error: null,
+            response: null
         };
     }
     /**
@@ -6919,7 +6970,7 @@ class HubFileInputComponent extends HubFieldControl {
             return;
         }
         this.#abort(id);
-        this.#patch(id, { status: 'uploading', progress: null, error: null });
+        this.#patch(id, { status: 'uploading', progress: null, error: null, response: null });
         const subscription = uploader.upload(item.file, { id }).subscribe({
             next: (event) => {
                 if (event.status === 'progress') {
@@ -6930,7 +6981,9 @@ class HubFileInputComponent extends HubFieldControl {
                     return;
                 }
                 if (event.status === 'done') {
-                    this.#patch(id, { status: 'done', progress: 100, error: null });
+                    // The body is what identifies the stored file server-side; without keeping it the
+                    // application has no way to reference what it just uploaded.
+                    this.#patch(id, { status: 'done', progress: 100, error: null, response: event.response ?? null });
                     return;
                 }
                 this.#patch(id, { status: 'error', error: event.error });
@@ -7034,7 +7087,7 @@ class HubFileInputComponent extends HubFieldControl {
         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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: HubFileInputComponent, isStandalone: true, selector: "hub-file-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, minSize: { classPropertyName: "minSize", publicName: "minSize", isSignal: true, isRequired: false, transformFunction: null }, maxTotalSize: { classPropertyName: "maxTotalSize", publicName: "maxTotalSize", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, dragDrop: { classPropertyName: "dragDrop", publicName: "dragDrop", isSignal: true, isRequired: false, transformFunction: null }, paste: { classPropertyName: "paste", publicName: "paste", isSignal: true, isRequired: false, transformFunction: null }, preview: { classPropertyName: "preview", publicName: "preview", isSignal: true, isRequired: false, transformFunction: null }, allowDuplicates: { classPropertyName: "allowDuplicates", publicName: "allowDuplicates", isSignal: true, isRequired: false, transformFunction: null }, capture: { classPropertyName: "capture", publicName: "capture", isSignal: true, isRequired: false, transformFunction: null }, autoUpload: { classPropertyName: "autoUpload", publicName: "autoUpload", isSignal: true, isRequired: false, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, dropText: { classPropertyName: "dropText", publicName: "dropText", isSignal: true, isRequired: false, transformFunction: null }, dropSubtext: { classPropertyName: "dropSubtext", publicName: "dropSubtext", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, formText: { classPropertyName: "formText", publicName: "formText", isSignal: true, isRequired: false, transformFunction: null }, formTextType: { classPropertyName: "formTextType", publicName: "formTextType", isSignal: true, isRequired: false, transformFunction: null }, classlist: { classPropertyName: "classlist", publicName: "classlist", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", rejected: "rejected", fileRemoved: "fileRemoved", uploadStateChange: "uploadStateChange" }, host: { listeners: { "paste": "handlePaste($event)" }, properties: { "class": "classlist()", "class.hub-file-input-host": "true" } }, queries: [{ propertyName: "iconTpt", first: true, predicate: HubFileIconDirective, descendants: true, isSignal: true }, { propertyName: "previewTpt", first: true, predicate: HubFilePreviewDirective, descendants: true, isSignal: true }, { propertyName: "noticeTpt", first: true, predicate: HubFileDropzoneNoticeDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "nativeInput", first: true, predicate: ["nativeInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n\tclass=\"hub-field hub-file-input\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n\t[class.hub-field--valid]=\"showsValid\"\n>\n\t@if (label() || required()) {\n\t\t<label [for]=\"id\" class=\"hub-field__label\">\n\t\t\t{{ label() }}\n\t\t\t@if (required()) {\n\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t}\n\t\t</label>\n\t}\n\n\t<div class=\"hub-field__body\">\n\t\t<!--\n\t\t\tThe dropzone is a <label> bound to the hidden native input: clicking or activating it with\n\t\t\tthe keyboard opens the file dialog through the platform, so no role, tabindex or key\n\t\t\thandler is needed. The \"browse\" affordance is a <span>, not a <button>, because a button\n\t\t\tinside a label would open the dialog twice.\n\t\t-->\n\t\t<label\n\t\t\tclass=\"hub-file-input__dropzone\"\n\t\t\t[for]=\"id\"\n\t\t\t[class.hub-file-input__dropzone--dragover]=\"isDragging()\"\n\t\t\t[class.hub-file-input__dropzone--no-drop]=\"!dragDrop()\"\n\t\t\t[class.hub-file-input__dropzone--invalid]=\"isInvalid\"\n\t\t\t(dragenter)=\"handleDragEnter($event)\"\n\t\t\t(dragover)=\"handleDragOver($event)\"\n\t\t\t(dragleave)=\"handleDragLeave($event)\"\n\t\t\t(drop)=\"handleDrop($event)\"\n\t\t>\n\t\t\t<input\n\t\t\t\t#nativeInput\n\t\t\t\ttype=\"file\"\n\t\t\t\tclass=\"hub-file-input__native\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\t[accept]=\"accept()\"\n\t\t\t\t[multiple]=\"multiple()\"\n\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t[attr.capture]=\"capture()\"\n\t\t\t\t[attr.aria-required]=\"required() ? 'true' : null\"\n\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t[attr.aria-describedby]=\"constraintsHint() ? id + '-hint' : null\"\n\t\t\t\t(change)=\"handleNativeChange($event)\"\n\t\t\t\t(blur)=\"handleBlur($event)\"\n\t\t\t/>\n\n\t\t\t<span class=\"hub-file-input__icon\" aria-hidden=\"true\"></span>\n\n\t\t\t@if (noticeTpt(); as notice) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"notice.template\"></ng-container>\n\t\t\t}\n\n\t\t\t<span class=\"hub-file-input__prompt\">\n\t\t\t\t@if (dragDrop()) {\n\t\t\t\t\t<span class=\"hub-file-input__drop-text\">{{ dropTextLabel() }}</span>\n\t\t\t\t}\n\t\t\t\t@if (dropSubtextLabel()) {\n\t\t\t\t\t<span class=\"hub-file-input__drop-subtext\">{{ dropSubtextLabel() }}</span>\n\t\t\t\t}\n\t\t\t\t<span class=\"hub-file-input__browse\">{{ browseLabel() }}</span>\n\t\t\t</span>\n\n\t\t\t@if (constraintsHint()) {\n\t\t\t\t<span class=\"hub-file-input__hint\" [id]=\"id + '-hint'\">{{ constraintsHint() }}</span>\n\t\t\t}\n\t\t</label>\n\n\t\t@if (preview() !== 'none' && _items().length > 0) {\n\t\t\t<ul class=\"hub-file-input__list\" [class.hub-file-input__list--grid]=\"preview() === 'grid'\">\n\t\t\t\t@for (item of _items(); track item.id) {\n\t\t\t\t\t<li class=\"hub-file-input__item\" [attr.data-status]=\"item.status\">\n\t\t\t\t\t\t@if (previewTpt(); as tpt) {\n\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"tpt.template\"\n\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"previewContext(item)\"\n\t\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t<span class=\"hub-file-input__thumb\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t@if (item.previewUrl) {\n\t\t\t\t\t\t\t\t\t<img class=\"hub-file-input__image\" [src]=\"item.previewUrl\" alt=\"\" />\n\t\t\t\t\t\t\t\t} @else if (iconTpt(); as icon) {\n\t\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"icon.template\"\n\t\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: item }\"\n\t\t\t\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t<span class=\"hub-file-input__file-icon\"></span>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t\t<span class=\"hub-file-input__meta\">\n\t\t\t\t\t\t\t\t<span class=\"hub-file-input__name\" [title]=\"item.file.name\">{{ item.file.name }}</span>\n\t\t\t\t\t\t\t\t<span class=\"hub-file-input__size\">{{ labels().formatSize(item.file.size) }}</span>\n\n\t\t\t\t\t\t\t\t@if (item.status === 'uploading') {\n\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__progress\"\n\t\t\t\t\t\t\t\t\t\t[class.hub-file-input__progress--indeterminate]=\"item.progress === null\"\n\t\t\t\t\t\t\t\t\t\trole=\"progressbar\"\n\t\t\t\t\t\t\t\t\t\taria-valuemin=\"0\"\n\t\t\t\t\t\t\t\t\t\taria-valuemax=\"100\"\n\t\t\t\t\t\t\t\t\t\t[attr.aria-valuenow]=\"item.progress\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__progress-bar\"\n\t\t\t\t\t\t\t\t\t\t\t[style.--hub-file-input-progress-value]=\"item.progress ?? 0\"\n\t\t\t\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t@if (item.status === 'error') {\n\t\t\t\t\t\t\t\t\t<span class=\"hub-file-input__error\">{{ errorText(item) }}</span>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t\t<span class=\"hub-file-input__actions\">\n\t\t\t\t\t\t\t\t@if (item.status === 'uploading') {\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__action hub-file-input__action--cancel\"\n\t\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"labels().cancel\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"cancel(item.id)\"\n\t\t\t\t\t\t\t\t\t></button>\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t@if (item.status === 'error') {\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__action hub-file-input__action--retry\"\n\t\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"labels().retry\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"retry(item.id)\"\n\t\t\t\t\t\t\t\t\t></button>\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t@if (!disabled() && item.status !== 'uploading') {\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__action hub-file-input__action--remove\"\n\t\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"labels().remove\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"remove(item.id)\"\n\t\t\t\t\t\t\t\t\t></button>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t}\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\n\t\t\t@if (_items().length > 1 && !disabled()) {\n\t\t\t\t<button type=\"button\" class=\"hub-file-input__clear\" (click)=\"clear()\">{{ labels().clear }}</button>\n\t\t\t}\n\t\t}\n\t</div>\n\n\t@if (formText() || formTextTmp()) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span class=\"hub-field__feedback-text\" [innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n\n\t@if (showsValid && validFeedback()) {\n\t\t<div class=\"hub-field__feedback hub-field__feedback--valid\" role=\"status\">\n\t\t\t<span class=\"hub-field__feedback-text\">{{ validFeedback() }}</span>\n\t\t</div>\n\t}\n\n\t<span class=\"hub-file-input__live\" aria-live=\"polite\">{{ announcement() }}</span>\n</div>\n", styles: [".hub-file-input__dropzone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--hub-file-input-gap);min-height:var(--hub-file-input-min-height);padding:var(--hub-file-input-padding-y) var(--hub-file-input-padding-x);color:var(--hub-file-input-color);background-color:var(--hub-file-input-bg);border:var(--hub-file-input-border-width) var(--hub-file-input-border-style) var(--hub-file-input-border-color);border-radius:var(--hub-file-input-border-radius);text-align:center;cursor:pointer;transition:var(--hub-file-input-transition)}.hub-file-input__dropzone:hover{background-color:var(--hub-file-input-hover-bg);border-color:var(--hub-file-input-hover-border-color)}.hub-file-input__dropzone:has(.hub-file-input__native:focus-visible){border-color:var(--hub-file-input-focus-border-color);box-shadow:var(--hub-file-input-focus-box-shadow);outline:none}.hub-file-input__dropzone--dragover,.hub-file-input__dropzone--dragover:hover{background-color:var(--hub-file-input-dragover-bg);border-color:var(--hub-file-input-dragover-border-color)}.hub-file-input__dropzone--invalid{border-color:var(--hub-form-invalid-border-color)}.hub-file-input__dropzone:has(.hub-file-input__native:disabled){cursor:not-allowed}.hub-file-input__dropzone:has(.hub-file-input__native:disabled):hover{background-color:var(--hub-file-input-bg);border-color:var(--hub-file-input-border-color)}.hub-file-input__native{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.hub-file-input__icon{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;width:var(--hub-file-input-icon-chip-size);height:var(--hub-file-input-icon-chip-size);background-color:var(--hub-file-input-icon-bg);border-radius:var(--hub-file-input-icon-chip-radius)}.hub-file-input__icon:before{content:\"\";width:var(--hub-file-input-icon-size);height:var(--hub-file-input-icon-size);background-color:var(--hub-file-input-icon-color);-webkit-mask:var(--hub-file-input-icon) center/contain no-repeat;mask:var(--hub-file-input-icon) center/contain no-repeat}.hub-file-input__prompt{display:flex;flex-direction:var(--hub-file-input-prompt-direction);flex-wrap:wrap;align-items:var(--hub-file-input-prompt-align);justify-content:center;gap:var(--hub-file-input-prompt-gap);color:var(--hub-file-input-prompt-color);font-size:var(--hub-file-input-prompt-font-size)}.hub-file-input__drop-text{color:var(--hub-file-input-drop-text-color);font-size:var(--hub-file-input-drop-text-font-size);font-weight:var(--hub-file-input-drop-text-font-weight)}.hub-file-input__drop-subtext{color:var(--hub-file-input-drop-subtext-color);font-size:var(--hub-file-input-drop-subtext-font-size)}.hub-file-input__browse{display:inline-flex;align-items:center;gap:var(--hub-file-input-browse-gap);margin-top:var(--hub-file-input-browse-margin-top);padding:var(--hub-file-input-browse-padding-y) var(--hub-file-input-browse-padding-x);color:var(--hub-file-input-browse-color);font-size:var(--hub-file-input-browse-font-size);font-weight:var(--hub-file-input-browse-font-weight);text-decoration:var(--hub-file-input-browse-text-decoration);background-color:var(--hub-file-input-browse-bg);border-radius:var(--hub-file-input-browse-radius);transition:var(--hub-file-input-transition)}.hub-file-input__browse:before{content:\"\";display:var(--hub-file-input-browse-icon-display);flex:0 0 auto;width:var(--hub-file-input-browse-icon-size);height:var(--hub-file-input-browse-icon-size);background-color:currentcolor;-webkit-mask:var(--hub-file-input-browse-icon) center/contain no-repeat;mask:var(--hub-file-input-browse-icon) center/contain no-repeat}.hub-file-input__dropzone:hover .hub-file-input__browse{background-color:var(--hub-file-input-browse-hover-bg)}.hub-file-input__hint{color:var(--hub-file-input-hint-color);font-size:var(--hub-file-input-hint-font-size)}.hub-file-input__list{display:flex;flex-direction:column;gap:var(--hub-file-input-list-gap);margin:var(--hub-file-input-list-margin-top) 0 0;padding:0;list-style:none}.hub-file-input__list--grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--hub-file-input-grid-min-width),1fr));gap:var(--hub-file-input-grid-gap)}.hub-file-input__item{display:flex;align-items:center;gap:var(--hub-file-input-item-gap);padding:var(--hub-file-input-item-padding-y) var(--hub-file-input-item-padding-x);color:var(--hub-file-input-item-color);background-color:var(--hub-file-input-item-bg);border:var(--hub-file-input-border-width) solid var(--hub-file-input-item-border-color);border-radius:var(--hub-file-input-item-border-radius);min-width:0}.hub-file-input__item[data-status=error]{border-color:var(--hub-file-input-error-color)}.hub-file-input__item[data-status=done]{border-color:var(--hub-file-input-done-color)}.hub-file-input__thumb{display:flex;flex:none;align-items:center;justify-content:center;width:var(--hub-file-input-thumb-size);height:var(--hub-file-input-thumb-size);overflow:hidden;background-color:var(--hub-file-input-thumb-bg);border-radius:var(--hub-file-input-thumb-radius)}.hub-file-input__image{width:100%;height:100%;object-fit:cover}.hub-file-input__file-icon{display:block;width:var(--hub-file-input-file-icon-size);height:var(--hub-file-input-file-icon-size);background-color:var(--hub-file-input-file-icon-color);-webkit-mask:var(--hub-file-input-file-icon) center/contain no-repeat;mask:var(--hub-file-input-file-icon) center/contain no-repeat}.hub-file-input__meta{display:flex;flex:1 1 auto;flex-direction:column;gap:.125rem;min-width:0}.hub-file-input__name{overflow:hidden;font-size:var(--hub-file-input-name-font-size);text-overflow:ellipsis;white-space:nowrap}.hub-file-input__size{color:var(--hub-file-input-size-color);font-size:var(--hub-file-input-size-font-size)}.hub-file-input__error{color:var(--hub-file-input-error-color);font-size:var(--hub-file-input-error-font-size)}.hub-file-input__progress{display:block;width:100%;height:var(--hub-file-input-progress-height);overflow:hidden;background-color:var(--hub-file-input-progress-track-bg);border-radius:var(--hub-file-input-progress-radius)}.hub-file-input__progress-bar{display:block;width:calc(var(--hub-file-input-progress-value, 0) * 1%);height:100%;background-color:var(--hub-file-input-progress-bar-bg);border-radius:inherit;transition:width .15s linear}.hub-file-input__progress--indeterminate .hub-file-input__progress-bar{width:33%;animation:hub-file-input-indeterminate var(--hub-file-input-progress-indeterminate-duration) ease-in-out infinite}.hub-file-input__actions{display:flex;flex:none;align-items:center;gap:.25rem}.hub-file-input__action{display:block;width:var(--hub-file-input-action-size);height:var(--hub-file-input-action-size);padding:0;background-color:var(--hub-file-input-action-color);border:0;cursor:pointer;transition:var(--hub-file-input-transition)}.hub-file-input__action:hover{background-color:var(--hub-file-input-action-hover-color)}.hub-file-input__action--remove{-webkit-mask:var(--hub-file-input-remove-icon) center/contain no-repeat;mask:var(--hub-file-input-remove-icon) center/contain no-repeat}.hub-file-input__action--remove:hover{background-color:var(--hub-file-input-remove-hover-color)}.hub-file-input__action--cancel{-webkit-mask:var(--hub-file-input-cancel-icon) center/contain no-repeat;mask:var(--hub-file-input-cancel-icon) center/contain no-repeat}.hub-file-input__action--retry{-webkit-mask:var(--hub-file-input-retry-icon) center/contain no-repeat;mask:var(--hub-file-input-retry-icon) center/contain no-repeat}.hub-file-input__clear{align-self:flex-start;margin-top:var(--hub-file-input-list-margin-top);padding:0;color:var(--hub-file-input-clear-color);font-size:var(--hub-file-input-clear-font-size);background:none;border:0;text-decoration:underline;cursor:pointer}.hub-file-input__item[data-status=done] .hub-file-input__size:after{display:inline-block;width:.75em;height:.75em;margin-inline-start:.375em;background-color:var(--hub-file-input-done-color);-webkit-mask:var(--hub-file-input-done-icon) center/contain no-repeat;mask:var(--hub-file-input-done-icon) center/contain no-repeat;content:\"\"}.hub-file-input__live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.hub-file-input__list--grid .hub-file-input__item{flex-direction:column;align-items:stretch}.hub-file-input__list--grid .hub-file-input__thumb{width:100%;height:var(--hub-file-input-grid-thumb-height)}.hub-file-input__list--grid .hub-file-input__actions{justify-content:flex-end}@keyframes hub-file-input-indeterminate{0%{transform:translate(-100%)}to{transform:translate(300%)}}@media(prefers-reduced-motion:reduce){.hub-file-input__progress--indeterminate .hub-file-input__progress-bar{animation:none;width:100%;opacity:.5}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubFileInputComponent, decorators: [{
             type: Component,
@@ -7042,8 +7095,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                         '[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 }] }] } });
+                    }, template: "<div\n\tclass=\"hub-field hub-file-input\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n\t[class.hub-field--valid]=\"showsValid\"\n>\n\t@if (label() || required()) {\n\t\t<label [for]=\"id\" class=\"hub-field__label\">\n\t\t\t{{ label() }}\n\t\t\t@if (required()) {\n\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t}\n\t\t</label>\n\t}\n\n\t<div class=\"hub-field__body\">\n\t\t<!--\n\t\t\tThe dropzone is a <label> bound to the hidden native input: clicking or activating it with\n\t\t\tthe keyboard opens the file dialog through the platform, so no role, tabindex or key\n\t\t\thandler is needed. The \"browse\" affordance is a <span>, not a <button>, because a button\n\t\t\tinside a label would open the dialog twice.\n\t\t-->\n\t\t<label\n\t\t\tclass=\"hub-file-input__dropzone\"\n\t\t\t[for]=\"id\"\n\t\t\t[class.hub-file-input__dropzone--dragover]=\"isDragging()\"\n\t\t\t[class.hub-file-input__dropzone--no-drop]=\"!dragDrop()\"\n\t\t\t[class.hub-file-input__dropzone--invalid]=\"isInvalid\"\n\t\t\t(dragenter)=\"handleDragEnter($event)\"\n\t\t\t(dragover)=\"handleDragOver($event)\"\n\t\t\t(dragleave)=\"handleDragLeave($event)\"\n\t\t\t(drop)=\"handleDrop($event)\"\n\t\t>\n\t\t\t<input\n\t\t\t\t#nativeInput\n\t\t\t\ttype=\"file\"\n\t\t\t\tclass=\"hub-file-input__native\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\t[accept]=\"accept()\"\n\t\t\t\t[multiple]=\"multiple()\"\n\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t[attr.capture]=\"capture()\"\n\t\t\t\t[attr.aria-required]=\"required() ? 'true' : null\"\n\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t[attr.aria-describedby]=\"constraintsHint() ? id + '-hint' : null\"\n\t\t\t\t(change)=\"handleNativeChange($event)\"\n\t\t\t\t(blur)=\"handleBlur($event)\"\n\t\t\t/>\n\n\t\t\t<span class=\"hub-file-input__icon\" aria-hidden=\"true\"></span>\n\n\t\t\t@if (noticeTpt(); as notice) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"notice.template\"></ng-container>\n\t\t\t}\n\n\t\t\t<span class=\"hub-file-input__prompt\">\n\t\t\t\t@if (dragDrop()) {\n\t\t\t\t\t<span class=\"hub-file-input__drop-text\">{{ dropTextLabel() }}</span>\n\t\t\t\t}\n\t\t\t\t@if (dropSubtextLabel()) {\n\t\t\t\t\t<span class=\"hub-file-input__drop-subtext\">{{ dropSubtextLabel() }}</span>\n\t\t\t\t}\n\t\t\t\t<span class=\"hub-file-input__browse\">{{ browseLabel() }}</span>\n\t\t\t</span>\n\n\t\t\t@if (constraintsHint()) {\n\t\t\t\t<span class=\"hub-file-input__hint\" [id]=\"id + '-hint'\">{{ constraintsHint() }}</span>\n\t\t\t}\n\t\t</label>\n\n\t\t@if (preview() !== 'none' && _items().length > 0) {\n\t\t\t<ul class=\"hub-file-input__list\" [class.hub-file-input__list--grid]=\"preview() === 'grid'\">\n\t\t\t\t@for (item of _items(); track item.id) {\n\t\t\t\t\t<li class=\"hub-file-input__item\" [attr.data-status]=\"item.status\">\n\t\t\t\t\t\t@if (previewTpt(); as tpt) {\n\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"tpt.template\"\n\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"previewContext(item)\"\n\t\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t<span class=\"hub-file-input__thumb\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t@if (item.previewUrl) {\n\t\t\t\t\t\t\t\t\t<img class=\"hub-file-input__image\" [src]=\"item.previewUrl\" alt=\"\" />\n\t\t\t\t\t\t\t\t} @else if (iconTpt(); as icon) {\n\t\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"icon.template\"\n\t\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: item }\"\n\t\t\t\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t<span class=\"hub-file-input__file-icon\"></span>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t\t<span class=\"hub-file-input__meta\">\n\t\t\t\t\t\t\t\t<span class=\"hub-file-input__name\" [title]=\"item.file.name\">{{ item.file.name }}</span>\n\t\t\t\t\t\t\t\t<span class=\"hub-file-input__size\">{{ labels().formatSize(item.file.size) }}</span>\n\n\t\t\t\t\t\t\t\t@if (item.status === 'uploading') {\n\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__progress\"\n\t\t\t\t\t\t\t\t\t\t[class.hub-file-input__progress--indeterminate]=\"item.progress === null\"\n\t\t\t\t\t\t\t\t\t\trole=\"progressbar\"\n\t\t\t\t\t\t\t\t\t\taria-valuemin=\"0\"\n\t\t\t\t\t\t\t\t\t\taria-valuemax=\"100\"\n\t\t\t\t\t\t\t\t\t\t[attr.aria-valuenow]=\"item.progress\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__progress-bar\"\n\t\t\t\t\t\t\t\t\t\t\t[style.--hub-file-input-progress-value]=\"item.progress ?? 0\"\n\t\t\t\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t@if (item.status === 'error') {\n\t\t\t\t\t\t\t\t\t<span class=\"hub-file-input__error\">{{ errorText(item) }}</span>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t\t<span class=\"hub-file-input__actions\">\n\t\t\t\t\t\t\t\t@if (item.status === 'uploading') {\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__action hub-file-input__action--cancel\"\n\t\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"labels().cancel\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"cancel(item.id)\"\n\t\t\t\t\t\t\t\t\t></button>\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t@if (item.status === 'error') {\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__action hub-file-input__action--retry\"\n\t\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"labels().retry\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"retry(item.id)\"\n\t\t\t\t\t\t\t\t\t></button>\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t@if (!disabled() && item.status !== 'uploading') {\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tclass=\"hub-file-input__action hub-file-input__action--remove\"\n\t\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"labels().remove\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"remove(item.id)\"\n\t\t\t\t\t\t\t\t\t></button>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t}\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\n\t\t\t@if (_items().length > 1 && !disabled()) {\n\t\t\t\t<button type=\"button\" class=\"hub-file-input__clear\" (click)=\"clear()\">{{ labels().clear }}</button>\n\t\t\t}\n\t\t}\n\t</div>\n\n\t@if (formText() || formTextTmp()) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span class=\"hub-field__feedback-text\" [innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n\n\t@if (showsValid && validFeedback()) {\n\t\t<div class=\"hub-field__feedback hub-field__feedback--valid\" role=\"status\">\n\t\t\t<span class=\"hub-field__feedback-text\">{{ validFeedback() }}</span>\n\t\t</div>\n\t}\n\n\t<span class=\"hub-file-input__live\" aria-live=\"polite\">{{ announcement() }}</span>\n</div>\n", styles: [".hub-file-input__dropzone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--hub-file-input-gap);min-height:var(--hub-file-input-min-height);padding:var(--hub-file-input-padding-y) var(--hub-file-input-padding-x);color:var(--hub-file-input-color);background-color:var(--hub-file-input-bg);border:var(--hub-file-input-border-width) var(--hub-file-input-border-style) var(--hub-file-input-border-color);border-radius:var(--hub-file-input-border-radius);text-align:center;cursor:pointer;transition:var(--hub-file-input-transition)}.hub-file-input__dropzone:hover{background-color:var(--hub-file-input-hover-bg);border-color:var(--hub-file-input-hover-border-color)}.hub-file-input__dropzone:has(.hub-file-input__native:focus-visible){border-color:var(--hub-file-input-focus-border-color);box-shadow:var(--hub-file-input-focus-box-shadow);outline:none}.hub-file-input__dropzone--dragover,.hub-file-input__dropzone--dragover:hover{background-color:var(--hub-file-input-dragover-bg);border-color:var(--hub-file-input-dragover-border-color)}.hub-file-input__dropzone--invalid{border-color:var(--hub-form-invalid-border-color)}.hub-file-input__dropzone:has(.hub-file-input__native:disabled){cursor:not-allowed}.hub-file-input__dropzone:has(.hub-file-input__native:disabled):hover{background-color:var(--hub-file-input-bg);border-color:var(--hub-file-input-border-color)}.hub-file-input__native{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.hub-file-input__icon{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;width:var(--hub-file-input-icon-chip-size);height:var(--hub-file-input-icon-chip-size);background-color:var(--hub-file-input-icon-bg);border-radius:var(--hub-file-input-icon-chip-radius)}.hub-file-input__icon:before{content:\"\";width:var(--hub-file-input-icon-size);height:var(--hub-file-input-icon-size);background-color:var(--hub-file-input-icon-color);-webkit-mask:var(--hub-file-input-icon) center/contain no-repeat;mask:var(--hub-file-input-icon) center/contain no-repeat}.hub-file-input__prompt{display:flex;flex-direction:var(--hub-file-input-prompt-direction);flex-wrap:wrap;align-items:var(--hub-file-input-prompt-align);justify-content:center;gap:var(--hub-file-input-prompt-gap);color:var(--hub-file-input-prompt-color);font-size:var(--hub-file-input-prompt-font-size)}.hub-file-input__drop-text{color:var(--hub-file-input-drop-text-color);font-size:var(--hub-file-input-drop-text-font-size);font-weight:var(--hub-file-input-drop-text-font-weight)}.hub-file-input__drop-subtext{color:var(--hub-file-input-drop-subtext-color);font-size:var(--hub-file-input-drop-subtext-font-size)}.hub-file-input__browse{display:inline-flex;align-items:center;gap:var(--hub-file-input-browse-gap);margin-top:var(--hub-file-input-browse-margin-top);padding:var(--hub-file-input-browse-padding-y) var(--hub-file-input-browse-padding-x);color:var(--hub-file-input-browse-color);font-size:var(--hub-file-input-browse-font-size);font-weight:var(--hub-file-input-browse-font-weight);text-decoration:var(--hub-file-input-browse-text-decoration);background-color:var(--hub-file-input-browse-bg);border-radius:var(--hub-file-input-browse-radius);transition:var(--hub-file-input-transition)}.hub-file-input__browse:before{content:\"\";display:var(--hub-file-input-browse-icon-display);flex:0 0 auto;width:var(--hub-file-input-browse-icon-size);height:var(--hub-file-input-browse-icon-size);background-color:currentcolor;-webkit-mask:var(--hub-file-input-browse-icon) center/contain no-repeat;mask:var(--hub-file-input-browse-icon) center/contain no-repeat}.hub-file-input__dropzone:hover .hub-file-input__browse{background-color:var(--hub-file-input-browse-hover-bg)}.hub-file-input__hint{color:var(--hub-file-input-hint-color);font-size:var(--hub-file-input-hint-font-size)}.hub-file-input__list{display:flex;flex-direction:column;gap:var(--hub-file-input-list-gap);margin:var(--hub-file-input-list-margin-top) 0 0;padding:0;list-style:none}.hub-file-input__list--grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--hub-file-input-grid-min-width),1fr));gap:var(--hub-file-input-grid-gap)}.hub-file-input__item{display:flex;align-items:center;gap:var(--hub-file-input-item-gap);padding:var(--hub-file-input-item-padding-y) var(--hub-file-input-item-padding-x);color:var(--hub-file-input-item-color);background-color:var(--hub-file-input-item-bg);border:var(--hub-file-input-border-width) solid var(--hub-file-input-item-border-color);border-radius:var(--hub-file-input-item-border-radius);min-width:0}.hub-file-input__item[data-status=error]{border-color:var(--hub-file-input-error-color)}.hub-file-input__item[data-status=done]{border-color:var(--hub-file-input-done-color)}.hub-file-input__thumb{display:flex;flex:none;align-items:center;justify-content:center;width:var(--hub-file-input-thumb-size);height:var(--hub-file-input-thumb-size);overflow:hidden;background-color:var(--hub-file-input-thumb-bg);border-radius:var(--hub-file-input-thumb-radius)}.hub-file-input__image{width:100%;height:100%;object-fit:cover}.hub-file-input__file-icon{display:block;width:var(--hub-file-input-file-icon-size);height:var(--hub-file-input-file-icon-size);background-color:var(--hub-file-input-file-icon-color);-webkit-mask:var(--hub-file-input-file-icon) center/contain no-repeat;mask:var(--hub-file-input-file-icon) center/contain no-repeat}.hub-file-input__meta{display:flex;flex:1 1 auto;flex-direction:column;gap:.125rem;min-width:0}.hub-file-input__name{overflow:hidden;font-size:var(--hub-file-input-name-font-size);text-overflow:ellipsis;white-space:nowrap}.hub-file-input__size{color:var(--hub-file-input-size-color);font-size:var(--hub-file-input-size-font-size)}.hub-file-input__error{color:var(--hub-file-input-error-color);font-size:var(--hub-file-input-error-font-size)}.hub-file-input__progress{display:block;width:100%;height:var(--hub-file-input-progress-height);overflow:hidden;background-color:var(--hub-file-input-progress-track-bg);border-radius:var(--hub-file-input-progress-radius)}.hub-file-input__progress-bar{display:block;width:calc(var(--hub-file-input-progress-value, 0) * 1%);height:100%;background-color:var(--hub-file-input-progress-bar-bg);border-radius:inherit;transition:width .15s linear}.hub-file-input__progress--indeterminate .hub-file-input__progress-bar{width:33%;animation:hub-file-input-indeterminate var(--hub-file-input-progress-indeterminate-duration) ease-in-out infinite}.hub-file-input__actions{display:flex;flex:none;align-items:center;gap:.25rem}.hub-file-input__action{display:block;width:var(--hub-file-input-action-size);height:var(--hub-file-input-action-size);padding:0;background-color:var(--hub-file-input-action-color);border:0;cursor:pointer;transition:var(--hub-file-input-transition)}.hub-file-input__action:hover{background-color:var(--hub-file-input-action-hover-color)}.hub-file-input__action--remove{-webkit-mask:var(--hub-file-input-remove-icon) center/contain no-repeat;mask:var(--hub-file-input-remove-icon) center/contain no-repeat}.hub-file-input__action--remove:hover{background-color:var(--hub-file-input-remove-hover-color)}.hub-file-input__action--cancel{-webkit-mask:var(--hub-file-input-cancel-icon) center/contain no-repeat;mask:var(--hub-file-input-cancel-icon) center/contain no-repeat}.hub-file-input__action--retry{-webkit-mask:var(--hub-file-input-retry-icon) center/contain no-repeat;mask:var(--hub-file-input-retry-icon) center/contain no-repeat}.hub-file-input__clear{align-self:flex-start;margin-top:var(--hub-file-input-list-margin-top);padding:0;color:var(--hub-file-input-clear-color);font-size:var(--hub-file-input-clear-font-size);background:none;border:0;text-decoration:underline;cursor:pointer}.hub-file-input__item[data-status=done] .hub-file-input__size:after{display:inline-block;width:.75em;height:.75em;margin-inline-start:.375em;background-color:var(--hub-file-input-done-color);-webkit-mask:var(--hub-file-input-done-icon) center/contain no-repeat;mask:var(--hub-file-input-done-icon) center/contain no-repeat;content:\"\"}.hub-file-input__live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.hub-file-input__list--grid .hub-file-input__item{flex-direction:column;align-items:stretch}.hub-file-input__list--grid .hub-file-input__thumb{width:100%;height:var(--hub-file-input-grid-thumb-height)}.hub-file-input__list--grid .hub-file-input__actions{justify-content:flex-end}@keyframes hub-file-input-indeterminate{0%{transform:translate(-100%)}to{transform:translate(300%)}}@media(prefers-reduced-motion:reduce){.hub-file-input__progress--indeterminate .hub-file-input__progress-bar{animation:none;width:100%;opacity:.5}}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], minSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSize", required: false }] }], maxTotalSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxTotalSize", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], dragDrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragDrop", required: false }] }], paste: [{ type: i0.Input, args: [{ isSignal: true, alias: "paste", required: false }] }], preview: [{ type: i0.Input, args: [{ isSignal: true, alias: "preview", required: false }] }], allowDuplicates: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDuplicates", required: false }] }], capture: [{ type: i0.Input, args: [{ isSignal: true, alias: "capture", required: false }] }], autoUpload: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoUpload", required: false }] }], buttonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLabel", required: false }] }], dropText: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropText", required: false }] }], dropSubtext: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropSubtext", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], formText: [{ type: i0.Input, args: [{ isSignal: true, alias: "formText", required: false }] }], formTextType: [{ type: i0.Input, args: [{ isSignal: true, alias: "formTextType", required: false }] }], classlist: [{ type: i0.Input, args: [{ isSignal: true, alias: "classlist", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], rejected: [{ type: i0.Output, args: ["rejected"] }], fileRemoved: [{ type: i0.Output, args: ["fileRemoved"] }], uploadStateChange: [{ type: i0.Output, args: ["uploadStateChange"] }], nativeInput: [{ type: i0.ViewChild, args: ['nativeInput', { isSignal: true }] }], iconTpt: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubFileIconDirective), { isSignal: true }] }], previewTpt: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubFilePreviewDirective), { isSignal: true }] }], noticeTpt: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubFileDropzoneNoticeDirective), { isSignal: true }] }] } });
 
 /**
  * Inverts a HEX color, or returns the best contrasting black/white when `bw` is enabled.
@@ -7473,5 +7526,5 @@ const hubFormControlAdapter = {
  * Generated bundle index. Do not edit.
  */
 
-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 };
+export { FormTextTypes, HUB_FILE_UPLOADER, HUB_FORMS_CONFIG, HubAutoresizeDirective, HubDatepickerComponent, HubFieldControl, HubFieldsetComponent, HubFileDropzoneNoticeDirective, HubFileIconDirective, HubFileInputComponent, HubFilePreviewDirective, HubFormComponent, HubFormControl, HubFormTextDirective, HubGroupControl, HubInputComponent, HubInputFormats, HubInputPrefixDirective, HubInputSuffixDirective, HubInvertColorPipe, HubJoinButLastPipe, HubLabelTypes, HubLegendComponent, HubLegendDirective, HubMapPipe, HubOtpInputComponent, HubSafeUrlPipe, HubSegmentedComponent, HubSelectComponent, HubSelectFormats, HubSliderComponent, HubSnakeUpperPipe, HubTextareaComponent, HubUcfirstPipe, HubValidationErrorDirective, NgClearButtonTemplateDirective, NgFooterTemplateDirective, NgHeaderTemplateDirective, NgLabelTemplateDirective, NgLoadingSpinnerTemplateDirective, NgLoadingTextTemplateDirective, NgMultiLabelTemplateDirective, NgNotFoundTemplateDirective, NgOptgroupTemplateDirective, NgOptionComponent, NgOptionTemplateDirective, NgSelectConfig, NgTagTemplateDirective, NgTypeToSearchTemplateDirective, applyMask, areEqual, camelToSnakeUpper, controlHasMinOrMaxValidator, defaultHubDatepickerConfig, defaultHubDatepickerLabels, defaultHubFileInputLabels, defaultHubFormsConfig, defaultInvalidFeedback, fileKey, formatFileSize, get, getActiveElement, getMinOrMaxValueFromValidator, hubAcceptedFiles, hubAreEqual, hubFormControlAdapter, hubMaxFileSize, hubMaxFiles, hubMaxTotalSize, hubMinFileSize, hubMinFiles, isDefined$1 as isDefined, isMaskActive, isString, joinButLast, matchesAccept, provideHubFileUploader, provideHubForms, runInZone, toFileArray, uuid };
 //# sourceMappingURL=ng-hub-ui-forms.mjs.map