ng-hub-ui-forms 22.2.0 → 22.4.0

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

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { input, model, HostBinding, Directive, inject, TemplateRef, InjectionToken, makeEnvironmentProviders, ElementRef, ChangeDetectorRef, contentChild, contentChildren, signal, HostListener, computed, effect, numberAttribute, booleanAttribute, output, viewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, viewChildren, Injectable, Renderer2, NgZone, DestroyRef, afterEveryRender, HostAttributeToken, linkedSignal, forwardRef, Injector, LOCALE_ID, Pipe } from '@angular/core';
+import { input, model, HostBinding, Directive, inject, TemplateRef, InjectionToken, makeEnvironmentProviders, ElementRef, ChangeDetectorRef, contentChild, contentChildren, signal, HostListener, computed, effect, numberAttribute, booleanAttribute, output, DestroyRef, viewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, viewChildren, PLATFORM_ID, afterRenderEffect, afterNextRender, Injectable, Renderer2, NgZone, afterEveryRender, HostAttributeToken, linkedSignal, forwardRef, Injector, LOCALE_ID, Pipe } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormControl, Validators, NgControl, ControlContainer, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Observable, Subject, takeUntil, tap, animationFrameScheduler, asapScheduler, fromEvent } from 'rxjs';
-import { NgTemplateOutlet, KeyValuePipe, DOCUMENT } from '@angular/common';
+import { NgTemplateOutlet, KeyValuePipe, isPlatformBrowser, DOCUMENT } from '@angular/common';
 import { auditTime, tap as tap$1, debounceTime, filter, map } from 'rxjs/operators';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1$1 from '@angular/cdk/overlay';
@@ -755,6 +755,58 @@ var HubInputFormats;
     HubInputFormats["File"] = "file";
 })(HubInputFormats || (HubInputFormats = {}));
 
+/**
+ * Projects content into the **inline-start** affix area of a `<hub-input>` (left in
+ * LTR, right in RTL). Use it for a leading icon — a `<hub-icon>`, currency symbol,
+ * inline `<svg>` or even a small button.
+ *
+ * The input automatically reserves inline padding so its text never overlaps the
+ * affix, and themes a projected `<hub-icon>` with its `--hub-input-icon-*` tokens.
+ *
+ * ```html
+ * <hub-input placeholder="Search…">
+ *   <hub-icon hubInputPrefix name="fa:solid:magnifying-glass" />
+ * </hub-input>
+ * ```
+ */
+class HubInputPrefixDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubInputPrefixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.1", type: HubInputPrefixDirective, isStandalone: true, selector: "[hubInputPrefix]", host: { classAttribute: "hub-input__affix-content" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubInputPrefixDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hubInputPrefix]',
+                    host: { class: 'hub-input__affix-content' }
+                }]
+        }] });
+
+/**
+ * Projects content into the **inline-end** affix area of a `<hub-input>` (right in
+ * LTR, left in RTL). Use it for a trailing icon or a unit label. For a clear
+ * button, prefer the built-in `[clearable]` input instead of projecting one.
+ *
+ * The input automatically reserves inline padding so its text never overlaps the
+ * affix, and themes a projected `<hub-icon>` with its `--hub-input-icon-*` tokens.
+ *
+ * ```html
+ * <hub-input>
+ *   <hub-icon hubInputSuffix name="fa:solid:circle-info" />
+ * </hub-input>
+ * ```
+ */
+class HubInputSuffixDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubInputSuffixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.1", type: HubInputSuffixDirective, isStandalone: true, selector: "[hubInputSuffix]", host: { classAttribute: "hub-input__affix-content" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubInputSuffixDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hubInputSuffix]',
+                    host: { class: 'hub-input__affix-content' }
+                }]
+        }] });
+
 /**
  * Pattern-mask utilities for `hub-input`.
  *
@@ -893,6 +945,28 @@ class HubInputComponent extends HubFieldControl {
     /** Text shown after the control as an input-group addon (text-like formats). */
     append = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "append" }] : /* istanbul ignore next */ []));
+    /** Projected inline-start affix (`[hubInputPrefix]`) — e.g. a `<hub-icon>`, when present. */
+    prefixDir = contentChild(HubInputPrefixDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "prefixDir" }] : /* istanbul ignore next */ []));
+    /** Projected inline-end affix (`[hubInputSuffix]`) — e.g. a `<hub-icon>`, when present. */
+    suffixDir = contentChild(HubInputSuffixDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "suffixDir" }] : /* istanbul ignore next */ []));
+    /**
+     * When true, a clear (✕) button is rendered inside the field once it holds a
+     * value; activating it resets the control. The glyph comes from the
+     * `--hub-input-clear-icon` CSS token, so it can be restyled without touching
+     * the template.
+     */
+    clearable = input(false, { ...(ngDevMode ? { debugName: "clearable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Whether the internal clear button should be shown right now. */
+    showClear = computed(() => this.clearable() && !this.disabled() && !this.readonly() && this._value() != null && this._value() !== '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showClear" }] : /* istanbul ignore next */ []));
+    /** Whether an inline-start affix (projected prefix) is present. */
+    hasPrefix = computed(() => !!this.prefixDir(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasPrefix" }] : /* istanbul ignore next */ []));
+    /** Whether an inline-end affix (projected suffix or the clear button) is present. */
+    hasSuffix = computed(() => !!this.suffixDir() || this.showClear(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasSuffix" }] : /* istanbul ignore next */ []));
     /** Extra CSS classes applied to the host element. */
     classlist = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classlist" }] : /* istanbul ignore next */ []));
@@ -913,6 +987,20 @@ class HubInputComponent extends HubFieldControl {
     valueChange = output();
     /** Emits the current value when Enter is pressed. */
     enter = output();
+    /** Debounce in milliseconds before {@link search} fires. `0` emits on every keystroke. */
+    debounceTime = input(0, { ...(ngDevMode ? { debugName: "debounceTime" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * Debounced typeahead event: emits the current term (stringified) `debounceTime`
+     * ms after the user stops typing. Wire it to drive search / autocomplete without
+     * rolling your own debounce. Text-like formats only; `valueChange` stays synchronous.
+     */
+    search = output();
+    /** Pending typeahead-debounce timer. */
+    #searchTimer;
+    /** Last term emitted via {@link search}, used to skip duplicate emits. */
+    #lastSearchTerm = null;
+    /** Clears any pending debounce timer when the component is destroyed. */
+    _searchCleanup = inject(DestroyRef).onDestroy(() => clearTimeout(this.#searchTimer));
     /** Accepted file types (file format), e.g. `image/*,.pdf`. */
     accept = input('*', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
@@ -927,6 +1015,16 @@ class HubInputComponent extends HubFieldControl {
     /** Whether the current format renders a checkable control (checkbox / switch). */
     isCheckable = computed(() => this.type() === this._inputFormats.Checkbox || this.type() === this._inputFormats.Switch, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isCheckable" }] : /* istanbul ignore next */ []));
+    /** Whether the current format renders a typeable text-like control (drives the `search` event). */
+    isTextLike = computed(() => {
+        const t = this.type();
+        return (t !== this._inputFormats.Checkbox &&
+            t !== this._inputFormats.Switch &&
+            t !== this._inputFormats.Counter &&
+            t !== this._inputFormats.Color &&
+            t !== this._inputFormats.File);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isTextLike" }] : /* istanbul ignore next */ []));
     /** Display label for the selected file(s). */
     fileLabel = computed(() => {
         const v = this._value();
@@ -1014,12 +1112,34 @@ class HubInputComponent extends HubFieldControl {
             this.updateNativeErrors(event?.target ?? null);
             this.onChange?.(formValue);
             this.valueChange.emit(formValue);
+            this.#scheduleSearch(masked);
             return;
         }
         this._value.set(newValue);
         this.updateNativeErrors(event?.target ?? null);
         this.onChange?.(newValue);
         this.valueChange.emit(newValue);
+        this.#scheduleSearch(newValue);
+    }
+    /**
+     * Schedules a debounced {@link search} emit for text-like formats. Coalesces rapid
+     * keystrokes into a single emit after {@link debounceTime} ms and skips no-op repeats.
+     *
+     * @param value - The latest control value.
+     */
+    #scheduleSearch(value) {
+        if (!this.isTextLike()) {
+            return;
+        }
+        const term = value == null ? '' : String(value);
+        clearTimeout(this.#searchTimer);
+        this.#searchTimer = setTimeout(() => {
+            if (term === this.#lastSearchTerm) {
+                return;
+            }
+            this.#lastSearchTerm = term;
+            this.search.emit(term);
+        }, this.debounceTime());
     }
     /** Increments the counter value, clamped to `max`. */
     add() {
@@ -1059,6 +1179,14 @@ class HubInputComponent extends HubFieldControl {
         this.onChange?.(value);
         this.valueChange.emit(value);
     }
+    /** Resets a text-like control to empty via the internal clear button. */
+    clear() {
+        clearTimeout(this.#searchTimer);
+        this._value.set('');
+        this.onChange?.('');
+        this.valueChange.emit('');
+        this.search.emit('');
+    }
     /** Clears the selected file(s). */
     clearFile() {
         const native = this.fileInput()?.nativeElement;
@@ -1106,15 +1234,15 @@ class HubInputComponent extends HubFieldControl {
         return value ? [value] : [];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: HubInputComponent, isStandalone: true, selector: "hub-input", inputs: { type: { classPropertyName: "type", publicName: "type", 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 }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", 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 }, prepend: { classPropertyName: "prepend", publicName: "prepend", isSignal: true, isRequired: false, transformFunction: null }, append: { classPropertyName: "append", publicName: "append", isSignal: true, isRequired: false, transformFunction: null }, classlist: { classPropertyName: "classlist", publicName: "classlist", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, unmaskValue: { classPropertyName: "unmaskValue", publicName: "unmaskValue", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { labelType: "labelTypeChange", placeholder: "placeholderChange", min: "minChange", max: "maxChange", valueChange: "valueChange", enter: "enter" }, host: { properties: { "class": "classlist()", "class.hub-input-host": "true" } }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n\tclass=\"hub-field hub-input\"\n\t[class.hub-field--horizontal]=\"!isCheckable() && (labelType() === _labelTypes.Horizontal || (!label() && required()))\"\n\t[class.hub-input--checkable]=\"isCheckable()\"\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 (isCheckable()) {\n\t\t<label class=\"hub-input__check\" [class.hub-input__check--switch]=\"type() === _inputFormats.Switch\">\n\t\t\t<input\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tclass=\"hub-input__check-input\"\n\t\t\t\t[class.hub-input__check-input--switch]=\"type() === _inputFormats.Switch\"\n\t\t\t\t[class.hub-input__check-input--invalid]=\"isInvalid\"\n\t\t\t\t[attr.role]=\"type() === _inputFormats.Switch ? 'switch' : null\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\t[checked]=\"$any(_value())\"\n\t\t\t\t(change)=\"setValue($event)\"\n\t\t\t\t[disabled]=\"disabled() || readonly()\"\n\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t/>\n\t\t\t@if (label() || required()) {\n\t\t\t\t<span class=\"hub-input__check-label\">\n\t\t\t\t\t{{ label() }}\n\t\t\t\t\t@if (required()) {\n\t\t\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t\t\t}\n\t\t\t\t</span>\n\t\t\t}\n\t\t</label>\n\t} @else {\n\t\t@if ((label() || required()) && labelType() !== _labelTypes.Floating) {\n\t\t\t<label [for]=\"id\" class=\"hub-field__label\">\n\t\t\t\t{{ label() }}\n\t\t\t\t@if (required()) {\n\t\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t\t}\n\t\t\t</label>\n\t\t}\n\n\t\t<div class=\"hub-field__body hub-input__row\">\n\t\t\t@switch (type()) {\n\t\t\t\t@case (_inputFormats.Counter) {\n\t\t\t\t\t<div class=\"hub-input__group hub-input__counter\">\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-input__counter-btn\"\n\t\t\t\t\t\t\t[disabled]=\"disabled() || readonly() || (min() != null && $any(_value()) <= $any(min()))\"\n\t\t\t\t\t\t\taria-label=\"Decrease\"\n\t\t\t\t\t\t\t(click)=\"subtract()\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t&minus;\n\t\t\t\t\t\t</button>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tclass=\"hub-field__control hub-input__control--counter\"\n\t\t\t\t\t\t\t[class.hub-field__control--invalid]=\"isInvalid\"\n\t\t\t\t\t\t\t[class.hub-field__control--valid]=\"showsValid\"\n\t\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t\t[ngModel]=\"_value()\"\n\t\t\t\t\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t\t\t\t\t[min]=\"min() ?? null\"\n\t\t\t\t\t\t\t[max]=\"max() ?? null\"\n\t\t\t\t\t\t\t[step]=\"step()\"\n\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t[readonly]=\"readonly()\"\n\t\t\t\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t\t\t/>\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-input__counter-btn\"\n\t\t\t\t\t\t\t[disabled]=\"disabled() || readonly() || (max() != null && $any(_value()) >= $any(max()))\"\n\t\t\t\t\t\t\taria-label=\"Increase\"\n\t\t\t\t\t\t\t(click)=\"add()\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t+\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@case (_inputFormats.Color) {\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype=\"color\"\n\t\t\t\t\t\tclass=\"hub-field__control hub-input__control--color\"\n\t\t\t\t\t\t[class.hub-field__control--invalid]=\"isInvalid\"\n\t\t\t\t\t\t[class.hub-field__control--valid]=\"showsValid\"\n\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t[ngModel]=\"_value()\"\n\t\t\t\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t\t\t(blur)=\"handleBlur($event)\"\n\t\t\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t\t@case (_inputFormats.File) {\n\t\t\t\t\t<div class=\"hub-input__file\" [class.hub-input__file--invalid]=\"isInvalid\">\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t#fileInput\n\t\t\t\t\t\t\ttype=\"file\"\n\t\t\t\t\t\t\tclass=\"hub-input__file-native\"\n\t\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t\t[accept]=\"accept()\"\n\t\t\t\t\t\t\t[multiple]=\"multiple()\"\n\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t\t\t\t(change)=\"setFileValue($event)\"\n\t\t\t\t\t\t\t(blur)=\"handleBlur($event)\"\n\t\t\t\t\t\t/>\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-input__file-button\"\n\t\t\t\t\t\t\t[disabled]=\"disabled() || readonly()\"\n\t\t\t\t\t\t\t(click)=\"triggerFile()\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{{ buttonLabel() }}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t\t<span class=\"hub-input__file-name\">{{ fileLabel() || placeholder() }}</span>\n\t\t\t\t\t\t@if (fileLabel() && !disabled() && !readonly()) {\n\t\t\t\t\t\t\t<button type=\"button\" class=\"hub-input__file-clear\" aria-label=\"Clear\" (click)=\"clearFile()\">&times;</button>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@default {\n\t\t\t\t\t<div class=\"hub-input__group\" [class.hub-input__group--floating]=\"labelType() === _labelTypes.Floating\">\n\t\t\t\t\t\t@for (addon of _prepend(); track $index) {\n\t\t\t\t\t\t\t<span class=\"hub-input__addon hub-input__addon--prepend\">{{ addon }}</span>\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tclass=\"hub-field__control\"\n\t\t\t\t\t\t\t[class.hub-field__control--invalid]=\"isInvalid\"\n\t\t\t\t\t\t\t[class.hub-field__control--valid]=\"showsValid\"\n\t\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t\t[type]=\"resolvedType()\"\n\t\t\t\t\t\t\t[ngModel]=\"_value()\"\n\t\t\t\t\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t\t\t\t\t(keyup.enter)=\"enter.emit(_value())\"\n\t\t\t\t\t\t\t[placeholder]=\"labelType() === _labelTypes.Floating ? (placeholder() || ' ') : placeholder()\"\n\t\t\t\t\t\t\t[min]=\"min() ?? null\"\n\t\t\t\t\t\t\t[max]=\"max() ?? null\"\n\t\t\t\t\t\t\t[step]=\"step()\"\n\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t[readonly]=\"readonly()\"\n\t\t\t\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t@for (addon of _append(); track $index) {\n\t\t\t\t\t\t\t<span class=\"hub-input__addon hub-input__addon--append\">{{ addon }}</span>\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t@if (labelType() === _labelTypes.Floating && (label() || required())) {\n\t\t\t\t\t\t\t<label [for]=\"id\" class=\"hub-field__label hub-input__label--floating\">\n\t\t\t\t\t\t\t\t{{ label() }}\n\t\t\t\t\t\t\t\t@if (required()) {\n\t\t\t\t\t\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t@if (type() === _inputFormats.Password) {\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-input__password-toggle\"\n\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t[attr.aria-label]=\"showPassword ? 'Hide password' : 'Show password'\"\n\t\t\t\t\t\t\t[attr.aria-pressed]=\"showPassword\"\n\t\t\t\t\t\t\t(click)=\"togglePassword()\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span class=\"hub-input__password-icon\" [class.hub-input__password-icon--visible]=\"showPassword\"></span>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (formText() || formTextTmp()) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span class=\"hub-field__feedback-text\" [innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n\n\t@if (showsValid && validFeedback()) {\n\t\t<div class=\"hub-field__feedback hub-field__feedback--valid\" role=\"status\">\n\t\t\t<span class=\"hub-field__feedback-text\">{{ validFeedback() }}</span>\n\t\t</div>\n\t}\n</div>\n", styles: ["hub-input{display:block;font-family:var(--hub-input-font-family)}hub-input.hidden-control{display:none!important}.hub-input__row{display:flex;align-items:stretch;gap:var(--hub-ref-space-2, .5rem)}.hub-input__group{display:flex;align-items:stretch;flex:1 1 auto;min-width:0;position:relative}.hub-input__addon{display:flex;align-items:center;padding:0 var(--hub-input-padding-x);color:var(--hub-input-group-addon-color);background:var(--hub-input-group-addon-bg);border:var(--hub-input-border-width) solid var(--hub-input-group-addon-border-color);white-space:nowrap}.hub-input__addon--prepend{border-right:0;border-radius:var(--hub-input-border-radius) 0 0 var(--hub-input-border-radius)}.hub-input__addon--append{border-left:0;border-radius:0 var(--hub-input-border-radius) var(--hub-input-border-radius) 0}.hub-input__addon--prepend+.hub-field__control{border-top-left-radius:0;border-bottom-left-radius:0}.hub-input__group .hub-field__control:has(+.hub-input__addon--append){border-top-right-radius:0;border-bottom-right-radius:0}.hub-input__group--floating .hub-field__control{padding-top:calc(var(--hub-input-padding-y) + .625rem);padding-bottom:calc(var(--hub-input-padding-y) - .125rem)}.hub-input__group--floating .hub-input__label--floating{position:absolute;top:0;left:0;height:100%;padding:var(--hub-input-padding-y) var(--hub-input-padding-x);margin:0;color:var(--hub-input-placeholder-color);font-weight:var(--hub-ref-font-weight-base, 400);pointer-events:none;transform-origin:0 0;transition:opacity .1s ease-in-out,transform .1s ease-in-out}.hub-input__group--floating .hub-field__control:focus~.hub-input__label--floating,.hub-input__group--floating .hub-field__control:not(:placeholder-shown)~.hub-input__label--floating{transform:scale(.85) translateY(-.5rem);opacity:.9}.hub-input__counter{display:flex;align-items:stretch}.hub-input__counter-btn{flex:0 0 var(--hub-input-counter-button-width);display:inline-flex;align-items:center;justify-content:center;font-size:1.15rem;line-height:1;color:var(--hub-input-counter-button-color);background:var(--hub-input-counter-button-bg);border:var(--hub-input-border-width) solid var(--hub-input-border-color);cursor:pointer}.hub-input__counter-btn:first-child{border-right:0;border-radius:var(--hub-input-border-radius) 0 0 var(--hub-input-border-radius)}.hub-input__counter-btn:last-child{border-left:0;border-radius:0 var(--hub-input-border-radius) var(--hub-input-border-radius) 0}.hub-input__counter-btn:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-input__control--counter{border-radius:0;text-align:center;appearance:textfield}.hub-input__control--counter::-webkit-outer-spin-button,.hub-input__control--counter::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.hub-input__control--color{width:var(--hub-input-color-size);height:var(--hub-input-color-size);padding:.15rem;cursor:pointer}.hub-input__file{display:flex;align-items:stretch;width:100%;background:var(--hub-input-bg);border:var(--hub-input-border-width) solid var(--hub-input-border-color);border-radius:var(--hub-input-border-radius);overflow:hidden}.hub-input__file--invalid{border-color:var(--hub-form-invalid-border-color)}.hub-input__file-native{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.hub-input__file-button{flex:0 0 auto;padding:var(--hub-input-padding-y) var(--hub-input-padding-x);color:var(--hub-input-group-addon-color);background:var(--hub-input-group-addon-bg);border:0;border-right:var(--hub-input-border-width) solid var(--hub-input-border-color);font-size:var(--hub-input-font-size);white-space:nowrap;cursor:pointer}.hub-input__file-button:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-input__file-name{flex:1 1 auto;min-width:0;padding:var(--hub-input-padding-y) var(--hub-input-padding-x);color:var(--hub-input-placeholder-color);font-size:var(--hub-input-font-size);line-height:var(--hub-input-line-height);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hub-input__file-clear{flex:0 0 auto;width:2rem;color:var(--hub-input-placeholder-color);font-size:1.1rem;line-height:1;background:transparent;border:0;cursor:pointer}.hub-input__file-clear:hover{color:var(--hub-form-invalid-color)}.hub-input__password-toggle{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:2.5rem;padding:0;color:var(--hub-input-color);background:transparent;border:var(--hub-input-border-width) solid var(--hub-input-border-color);border-radius:var(--hub-input-border-radius);cursor:pointer;transition:var(--hub-input-transition)}.hub-input__password-toggle:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-input__password-icon{display:block;width:1.1rem;height:1.1rem;background-color:currentColor;--hub-input-eye-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z'/%3E%3Cpath d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z'/%3E%3C/svg%3E\");-webkit-mask:var(--hub-input-eye-mask) center/contain no-repeat;mask:var(--hub-input-eye-mask) center/contain no-repeat}.hub-input__password-icon--visible{--hub-input-eye-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z'/%3E%3Cpath d='M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z'/%3E%3Cpath d='M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z'/%3E%3C/svg%3E\")}.hub-input--checkable .hub-input__check{display:inline-flex;align-items:center;gap:var(--hub-check-label-gap);cursor:pointer}.hub-input__check-input{flex:0 0 auto;width:var(--hub-check-input-width);height:var(--hub-check-input-height);margin:0;appearance:none;background:var(--hub-check-input-bg);border:var(--hub-check-input-border-width) solid var(--hub-check-input-border-color);border-radius:var(--hub-check-input-border-radius);cursor:pointer;transition:var(--hub-input-transition)}.hub-input__check-input:checked{background:var(--hub-check-input-checked-bg) var(--hub-check-input-checked-icon) center/.85rem no-repeat;border-color:var(--hub-check-input-checked-border-color)}.hub-input__check-input:focus-visible{outline:0;box-shadow:var(--hub-input-focus-box-shadow)}.hub-input__check-input--invalid{border-color:var(--hub-form-invalid-border-color)}.hub-input__check-input:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-input__check-input--switch{position:relative;width:var(--hub-switch-width);height:var(--hub-switch-height);border:0;border-radius:var(--hub-ref-radius-pill, 50rem);background:var(--hub-switch-track-off)}.hub-input__check-input--switch:after{content:\"\";position:absolute;top:50%;left:.125rem;width:calc(var(--hub-switch-height) - .25rem);height:calc(var(--hub-switch-height) - .25rem);border-radius:50%;background:var(--hub-switch-thumb);transform:translateY(-50%);transition:left .15s ease-in-out}.hub-input__check-input--switch:checked{background:var(--hub-switch-track-on)}.hub-input__check-input--switch:checked:after{left:calc(100% - var(--hub-switch-height) + .125rem)}.hub-input__check-label{display:inline-flex;align-items:baseline;gap:.15rem;color:var(--hub-input-color);font-size:var(--hub-input-font-size)}.hub-input--checkable.hub-field--disabled .hub-input__check-label{opacity:var(--hub-form-disabled-opacity)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: HubInputComponent, isStandalone: true, selector: "hub-input", inputs: { type: { classPropertyName: "type", publicName: "type", 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 }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", 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 }, prepend: { classPropertyName: "prepend", publicName: "prepend", isSignal: true, isRequired: false, transformFunction: null }, append: { classPropertyName: "append", publicName: "append", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, classlist: { classPropertyName: "classlist", publicName: "classlist", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, unmaskValue: { classPropertyName: "unmaskValue", publicName: "unmaskValue", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { labelType: "labelTypeChange", placeholder: "placeholderChange", min: "minChange", max: "maxChange", valueChange: "valueChange", enter: "enter", search: "search" }, host: { properties: { "class": "classlist()", "class.hub-input-host": "true" } }, queries: [{ propertyName: "prefixDir", first: true, predicate: HubInputPrefixDirective, descendants: true, isSignal: true }, { propertyName: "suffixDir", first: true, predicate: HubInputSuffixDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n\tclass=\"hub-field hub-input\"\n\t[class.hub-field--horizontal]=\"!isCheckable() && (labelType() === _labelTypes.Horizontal || (!label() && required()))\"\n\t[class.hub-input--checkable]=\"isCheckable()\"\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 (isCheckable()) {\n\t\t<label class=\"hub-input__check\" [class.hub-input__check--switch]=\"type() === _inputFormats.Switch\">\n\t\t\t<input\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tclass=\"hub-input__check-input\"\n\t\t\t\t[class.hub-input__check-input--switch]=\"type() === _inputFormats.Switch\"\n\t\t\t\t[class.hub-input__check-input--invalid]=\"isInvalid\"\n\t\t\t\t[attr.role]=\"type() === _inputFormats.Switch ? 'switch' : null\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\t[checked]=\"$any(_value())\"\n\t\t\t\t(change)=\"setValue($event)\"\n\t\t\t\t[disabled]=\"disabled() || readonly()\"\n\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t/>\n\t\t\t@if (label() || required()) {\n\t\t\t\t<span class=\"hub-input__check-label\">\n\t\t\t\t\t{{ label() }}\n\t\t\t\t\t@if (required()) {\n\t\t\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t\t\t}\n\t\t\t\t</span>\n\t\t\t}\n\t\t</label>\n\t} @else {\n\t\t@if ((label() || required()) && labelType() !== _labelTypes.Floating) {\n\t\t\t<label [for]=\"id\" class=\"hub-field__label\">\n\t\t\t\t{{ label() }}\n\t\t\t\t@if (required()) {\n\t\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t\t}\n\t\t\t</label>\n\t\t}\n\n\t\t<div class=\"hub-field__body hub-input__row\">\n\t\t\t@switch (type()) {\n\t\t\t\t@case (_inputFormats.Counter) {\n\t\t\t\t\t<div class=\"hub-input__group hub-input__counter\">\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-input__counter-btn\"\n\t\t\t\t\t\t\t[disabled]=\"disabled() || readonly() || (min() != null && $any(_value()) <= $any(min()))\"\n\t\t\t\t\t\t\taria-label=\"Decrease\"\n\t\t\t\t\t\t\t(click)=\"subtract()\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t&minus;\n\t\t\t\t\t\t</button>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tclass=\"hub-field__control hub-input__control--counter\"\n\t\t\t\t\t\t\t[class.hub-field__control--invalid]=\"isInvalid\"\n\t\t\t\t\t\t\t[class.hub-field__control--valid]=\"showsValid\"\n\t\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t\t[ngModel]=\"_value()\"\n\t\t\t\t\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t\t\t\t\t[min]=\"min() ?? null\"\n\t\t\t\t\t\t\t[max]=\"max() ?? null\"\n\t\t\t\t\t\t\t[step]=\"step()\"\n\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t[readonly]=\"readonly()\"\n\t\t\t\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t\t\t/>\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-input__counter-btn\"\n\t\t\t\t\t\t\t[disabled]=\"disabled() || readonly() || (max() != null && $any(_value()) >= $any(max()))\"\n\t\t\t\t\t\t\taria-label=\"Increase\"\n\t\t\t\t\t\t\t(click)=\"add()\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t+\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@case (_inputFormats.Color) {\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype=\"color\"\n\t\t\t\t\t\tclass=\"hub-field__control hub-input__control--color\"\n\t\t\t\t\t\t[class.hub-field__control--invalid]=\"isInvalid\"\n\t\t\t\t\t\t[class.hub-field__control--valid]=\"showsValid\"\n\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t[ngModel]=\"_value()\"\n\t\t\t\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t\t\t(blur)=\"handleBlur($event)\"\n\t\t\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t\t@case (_inputFormats.File) {\n\t\t\t\t\t<div class=\"hub-input__file\" [class.hub-input__file--invalid]=\"isInvalid\">\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t#fileInput\n\t\t\t\t\t\t\ttype=\"file\"\n\t\t\t\t\t\t\tclass=\"hub-input__file-native\"\n\t\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t\t[accept]=\"accept()\"\n\t\t\t\t\t\t\t[multiple]=\"multiple()\"\n\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t\t\t\t(change)=\"setFileValue($event)\"\n\t\t\t\t\t\t\t(blur)=\"handleBlur($event)\"\n\t\t\t\t\t\t/>\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-input__file-button\"\n\t\t\t\t\t\t\t[disabled]=\"disabled() || readonly()\"\n\t\t\t\t\t\t\t(click)=\"triggerFile()\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{{ buttonLabel() }}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t\t<span class=\"hub-input__file-name\">{{ fileLabel() || placeholder() }}</span>\n\t\t\t\t\t\t@if (fileLabel() && !disabled() && !readonly()) {\n\t\t\t\t\t\t\t<button type=\"button\" class=\"hub-input__file-clear\" aria-label=\"Clear\" (click)=\"clearFile()\">&times;</button>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@default {\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"hub-input__group\"\n\t\t\t\t\t\t[class.hub-input__group--floating]=\"labelType() === _labelTypes.Floating\"\n\t\t\t\t\t\t[class.hub-input__group--has-prefix]=\"hasPrefix()\"\n\t\t\t\t\t\t[class.hub-input__group--has-suffix]=\"hasSuffix()\"\n\t\t\t\t\t>\n\t\t\t\t\t\t@for (addon of _prepend(); track $index) {\n\t\t\t\t\t\t\t<span class=\"hub-input__addon hub-input__addon--prepend\">{{ addon }}</span>\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t<span class=\"hub-input__affix hub-input__affix--prefix\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t<ng-content select=\"[hubInputPrefix]\"></ng-content>\n\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tclass=\"hub-field__control\"\n\t\t\t\t\t\t\t[class.hub-field__control--invalid]=\"isInvalid\"\n\t\t\t\t\t\t\t[class.hub-field__control--valid]=\"showsValid\"\n\t\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t\t[type]=\"resolvedType()\"\n\t\t\t\t\t\t\t[ngModel]=\"_value()\"\n\t\t\t\t\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t\t\t\t\t(keyup.enter)=\"enter.emit(_value())\"\n\t\t\t\t\t\t\t[placeholder]=\"labelType() === _labelTypes.Floating ? (placeholder() || ' ') : placeholder()\"\n\t\t\t\t\t\t\t[min]=\"min() ?? null\"\n\t\t\t\t\t\t\t[max]=\"max() ?? null\"\n\t\t\t\t\t\t\t[step]=\"step()\"\n\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t[readonly]=\"readonly()\"\n\t\t\t\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t@if (showClear()) {\n\t\t\t\t\t\t\t<button type=\"button\" class=\"hub-input__clear\" aria-label=\"Clear\" (click)=\"clear()\"></button>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t<span class=\"hub-input__affix hub-input__affix--suffix\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t<ng-content select=\"[hubInputSuffix]\"></ng-content>\n\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t@for (addon of _append(); track $index) {\n\t\t\t\t\t\t\t<span class=\"hub-input__addon hub-input__addon--append\">{{ addon }}</span>\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t@if (labelType() === _labelTypes.Floating && (label() || required())) {\n\t\t\t\t\t\t\t<label [for]=\"id\" class=\"hub-field__label hub-input__label--floating\">\n\t\t\t\t\t\t\t\t{{ label() }}\n\t\t\t\t\t\t\t\t@if (required()) {\n\t\t\t\t\t\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t@if (type() === _inputFormats.Password) {\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-input__password-toggle\"\n\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t[attr.aria-label]=\"showPassword ? 'Hide password' : 'Show password'\"\n\t\t\t\t\t\t\t[attr.aria-pressed]=\"showPassword\"\n\t\t\t\t\t\t\t(click)=\"togglePassword()\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span class=\"hub-input__password-icon\" [class.hub-input__password-icon--visible]=\"showPassword\"></span>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (formText() || formTextTmp()) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span class=\"hub-field__feedback-text\" [innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n\n\t@if (showsValid && validFeedback()) {\n\t\t<div class=\"hub-field__feedback hub-field__feedback--valid\" role=\"status\">\n\t\t\t<span class=\"hub-field__feedback-text\">{{ validFeedback() }}</span>\n\t\t</div>\n\t}\n</div>\n", styles: ["hub-input{display:block;font-family:var(--hub-input-font-family)}hub-input.hidden-control{display:none!important}.hub-input__row{display:flex;align-items:stretch;gap:var(--hub-ref-space-2, .5rem)}.hub-input__group{display:flex;align-items:stretch;flex:1 1 auto;min-width:0;position:relative}.hub-input__addon{display:flex;align-items:center;padding:0 var(--hub-input-padding-x);color:var(--hub-input-group-addon-color);background:var(--hub-input-group-addon-bg);border:var(--hub-input-border-width) solid var(--hub-input-group-addon-border-color);white-space:nowrap}.hub-input__addon--prepend{border-right:0;border-radius:var(--hub-input-border-radius) 0 0 var(--hub-input-border-radius)}.hub-input__addon--append{border-left:0;border-radius:0 var(--hub-input-border-radius) var(--hub-input-border-radius) 0}.hub-input__addon--prepend+.hub-field__control{border-top-left-radius:0;border-bottom-left-radius:0}.hub-input__group .hub-field__control:has(+.hub-input__addon--append){border-top-right-radius:0;border-bottom-right-radius:0}.hub-input__affix{position:absolute;inset-block:0;display:flex;align-items:center;color:var(--hub-input-icon-color);--hub-icon-color: var(--hub-input-icon-color);--hub-icon-size: var(--hub-input-icon-size);pointer-events:none;z-index:2}.hub-input__affix--prefix{inset-inline-start:var(--hub-input-affix-inset)}.hub-input__affix--suffix{inset-inline-end:var(--hub-input-affix-inset)}.hub-input__affix-content{pointer-events:auto}.hub-input__clear{position:absolute;inset-block:0;inset-inline-end:var(--hub-input-affix-inset);margin-block:auto;display:inline-flex;inline-size:var(--hub-input-clear-size);block-size:var(--hub-input-clear-size);padding:0;border:0;background-color:var(--hub-input-clear-color);-webkit-mask:var(--hub-input-clear-icon) center/contain no-repeat;mask:var(--hub-input-clear-icon) center/contain no-repeat;cursor:pointer;z-index:3;transition:background-color .15s ease}.hub-input__clear:hover,.hub-input__clear:focus-visible{background-color:var(--hub-input-clear-hover-color)}.hub-input__group--has-prefix>.hub-field__control{padding-inline-start:calc(var(--hub-input-affix-inset) + var(--hub-input-icon-size) + var(--hub-input-affix-gap))}.hub-input__group--has-suffix>.hub-field__control{padding-inline-end:calc(var(--hub-input-affix-inset) + var(--hub-input-icon-size) + var(--hub-input-affix-gap))}.hub-input__group--floating .hub-field__control{padding-top:calc(var(--hub-input-padding-y) + .625rem);padding-bottom:calc(var(--hub-input-padding-y) - .125rem)}.hub-input__group--floating .hub-input__label--floating{position:absolute;top:0;left:0;height:100%;padding:var(--hub-input-padding-y) var(--hub-input-padding-x);margin:0;color:var(--hub-input-placeholder-color);font-weight:var(--hub-ref-font-weight-base, 400);pointer-events:none;transform-origin:0 0;transition:opacity .1s ease-in-out,transform .1s ease-in-out}.hub-input__group--floating .hub-field__control:focus~.hub-input__label--floating,.hub-input__group--floating .hub-field__control:not(:placeholder-shown)~.hub-input__label--floating{transform:scale(.85) translateY(-.5rem);opacity:.9}.hub-input__counter{display:flex;align-items:stretch}.hub-input__counter-btn{flex:0 0 var(--hub-input-counter-button-width);display:inline-flex;align-items:center;justify-content:center;font-size:1.15rem;line-height:1;color:var(--hub-input-counter-button-color);background:var(--hub-input-counter-button-bg);border:var(--hub-input-border-width) solid var(--hub-input-border-color);cursor:pointer}.hub-input__counter-btn:first-child{border-right:0;border-radius:var(--hub-input-border-radius) 0 0 var(--hub-input-border-radius)}.hub-input__counter-btn:last-child{border-left:0;border-radius:0 var(--hub-input-border-radius) var(--hub-input-border-radius) 0}.hub-input__counter-btn:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-input__control--counter{border-radius:0;text-align:center;appearance:textfield}.hub-input__control--counter::-webkit-outer-spin-button,.hub-input__control--counter::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.hub-input__control--color{width:var(--hub-input-color-size);height:var(--hub-input-color-size);padding:.15rem;cursor:pointer}.hub-input__file{position:relative;display:flex;align-items:stretch;width:100%;background:var(--hub-input-bg);border:var(--hub-input-border-width) solid var(--hub-input-border-color);border-radius:var(--hub-input-border-radius);overflow:hidden}.hub-input__file--invalid{border-color:var(--hub-form-invalid-border-color)}.hub-input__file-native{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.hub-input__file-button{flex:0 0 auto;padding:var(--hub-input-padding-y) var(--hub-input-padding-x);color:var(--hub-input-group-addon-color);background:var(--hub-input-group-addon-bg);border:0;border-right:var(--hub-input-border-width) solid var(--hub-input-border-color);font-size:var(--hub-input-font-size);white-space:nowrap;cursor:pointer}.hub-input__file-button:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-input__file-name{flex:1 1 auto;min-width:0;padding:var(--hub-input-padding-y) var(--hub-input-padding-x);color:var(--hub-input-placeholder-color);font-size:var(--hub-input-font-size);line-height:var(--hub-input-line-height);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hub-input__file-clear{flex:0 0 auto;width:2rem;color:var(--hub-input-placeholder-color);font-size:1.1rem;line-height:1;background:transparent;border:0;cursor:pointer}.hub-input__file-clear:hover{color:var(--hub-form-invalid-color)}.hub-input__password-toggle{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:2.5rem;padding:0;color:var(--hub-input-color);background:transparent;border:var(--hub-input-border-width) solid var(--hub-input-border-color);border-radius:var(--hub-input-border-radius);cursor:pointer;transition:var(--hub-input-transition)}.hub-input__password-toggle:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-input__password-icon{display:block;width:1.1rem;height:1.1rem;background-color:currentColor;--hub-input-eye-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z'/%3E%3Cpath d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z'/%3E%3C/svg%3E\");-webkit-mask:var(--hub-input-eye-mask) center/contain no-repeat;mask:var(--hub-input-eye-mask) center/contain no-repeat}.hub-input__password-icon--visible{--hub-input-eye-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z'/%3E%3Cpath d='M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z'/%3E%3Cpath d='M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z'/%3E%3C/svg%3E\")}.hub-input--checkable .hub-input__check{display:inline-flex;align-items:center;gap:var(--hub-check-label-gap);cursor:pointer}.hub-input__check-input{flex:0 0 auto;width:var(--hub-check-input-width);height:var(--hub-check-input-height);margin:0;appearance:none;background:var(--hub-check-input-bg);border:var(--hub-check-input-border-width) solid var(--hub-check-input-border-color);border-radius:var(--hub-check-input-border-radius);cursor:pointer;transition:var(--hub-input-transition)}.hub-input__check-input:checked{background:var(--hub-check-input-checked-bg) var(--hub-check-input-checked-icon) center/.85rem no-repeat;border-color:var(--hub-check-input-checked-border-color)}.hub-input__check-input:focus-visible{outline:0;box-shadow:var(--hub-input-focus-box-shadow)}.hub-input__check-input--invalid{border-color:var(--hub-form-invalid-border-color)}.hub-input__check-input:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-input__check-input--switch{position:relative;width:var(--hub-switch-width);height:var(--hub-switch-height);border:0;border-radius:var(--hub-ref-radius-pill, 50rem);background:var(--hub-switch-track-off)}.hub-input__check-input--switch:after{content:\"\";position:absolute;top:50%;left:.125rem;width:calc(var(--hub-switch-height) - .25rem);height:calc(var(--hub-switch-height) - .25rem);border-radius:50%;background:var(--hub-switch-thumb);transform:translateY(-50%);transition:left .15s ease-in-out}.hub-input__check-input--switch:checked{background:var(--hub-switch-track-on)}.hub-input__check-input--switch:checked:after{left:calc(100% - var(--hub-switch-height) + .125rem)}.hub-input__check-label{display:inline-flex;align-items:baseline;gap:.15rem;color:var(--hub-input-color);font-size:var(--hub-input-font-size)}.hub-input--checkable.hub-field--disabled .hub-input__check-label{opacity:var(--hub-form-disabled-opacity)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: HubInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'hub-input', imports: [NgTemplateOutlet, KeyValuePipe, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         '[class]': 'classlist()',
                         '[class.hub-input-host]': 'true'
-                    }, template: "<div\n\tclass=\"hub-field hub-input\"\n\t[class.hub-field--horizontal]=\"!isCheckable() && (labelType() === _labelTypes.Horizontal || (!label() && required()))\"\n\t[class.hub-input--checkable]=\"isCheckable()\"\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 (isCheckable()) {\n\t\t<label class=\"hub-input__check\" [class.hub-input__check--switch]=\"type() === _inputFormats.Switch\">\n\t\t\t<input\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tclass=\"hub-input__check-input\"\n\t\t\t\t[class.hub-input__check-input--switch]=\"type() === _inputFormats.Switch\"\n\t\t\t\t[class.hub-input__check-input--invalid]=\"isInvalid\"\n\t\t\t\t[attr.role]=\"type() === _inputFormats.Switch ? 'switch' : null\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\t[checked]=\"$any(_value())\"\n\t\t\t\t(change)=\"setValue($event)\"\n\t\t\t\t[disabled]=\"disabled() || readonly()\"\n\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t/>\n\t\t\t@if (label() || required()) {\n\t\t\t\t<span class=\"hub-input__check-label\">\n\t\t\t\t\t{{ label() }}\n\t\t\t\t\t@if (required()) {\n\t\t\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t\t\t}\n\t\t\t\t</span>\n\t\t\t}\n\t\t</label>\n\t} @else {\n\t\t@if ((label() || required()) && labelType() !== _labelTypes.Floating) {\n\t\t\t<label [for]=\"id\" class=\"hub-field__label\">\n\t\t\t\t{{ label() }}\n\t\t\t\t@if (required()) {\n\t\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t\t}\n\t\t\t</label>\n\t\t}\n\n\t\t<div class=\"hub-field__body hub-input__row\">\n\t\t\t@switch (type()) {\n\t\t\t\t@case (_inputFormats.Counter) {\n\t\t\t\t\t<div class=\"hub-input__group hub-input__counter\">\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-input__counter-btn\"\n\t\t\t\t\t\t\t[disabled]=\"disabled() || readonly() || (min() != null && $any(_value()) <= $any(min()))\"\n\t\t\t\t\t\t\taria-label=\"Decrease\"\n\t\t\t\t\t\t\t(click)=\"subtract()\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t&minus;\n\t\t\t\t\t\t</button>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tclass=\"hub-field__control hub-input__control--counter\"\n\t\t\t\t\t\t\t[class.hub-field__control--invalid]=\"isInvalid\"\n\t\t\t\t\t\t\t[class.hub-field__control--valid]=\"showsValid\"\n\t\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t\t[ngModel]=\"_value()\"\n\t\t\t\t\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t\t\t\t\t[min]=\"min() ?? null\"\n\t\t\t\t\t\t\t[max]=\"max() ?? null\"\n\t\t\t\t\t\t\t[step]=\"step()\"\n\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t[readonly]=\"readonly()\"\n\t\t\t\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t\t\t/>\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-input__counter-btn\"\n\t\t\t\t\t\t\t[disabled]=\"disabled() || readonly() || (max() != null && $any(_value()) >= $any(max()))\"\n\t\t\t\t\t\t\taria-label=\"Increase\"\n\t\t\t\t\t\t\t(click)=\"add()\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t+\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@case (_inputFormats.Color) {\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype=\"color\"\n\t\t\t\t\t\tclass=\"hub-field__control hub-input__control--color\"\n\t\t\t\t\t\t[class.hub-field__control--invalid]=\"isInvalid\"\n\t\t\t\t\t\t[class.hub-field__control--valid]=\"showsValid\"\n\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t[ngModel]=\"_value()\"\n\t\t\t\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t\t\t(blur)=\"handleBlur($event)\"\n\t\t\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t\t@case (_inputFormats.File) {\n\t\t\t\t\t<div class=\"hub-input__file\" [class.hub-input__file--invalid]=\"isInvalid\">\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t#fileInput\n\t\t\t\t\t\t\ttype=\"file\"\n\t\t\t\t\t\t\tclass=\"hub-input__file-native\"\n\t\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t\t[accept]=\"accept()\"\n\t\t\t\t\t\t\t[multiple]=\"multiple()\"\n\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t\t\t\t(change)=\"setFileValue($event)\"\n\t\t\t\t\t\t\t(blur)=\"handleBlur($event)\"\n\t\t\t\t\t\t/>\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-input__file-button\"\n\t\t\t\t\t\t\t[disabled]=\"disabled() || readonly()\"\n\t\t\t\t\t\t\t(click)=\"triggerFile()\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{{ buttonLabel() }}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t\t<span class=\"hub-input__file-name\">{{ fileLabel() || placeholder() }}</span>\n\t\t\t\t\t\t@if (fileLabel() && !disabled() && !readonly()) {\n\t\t\t\t\t\t\t<button type=\"button\" class=\"hub-input__file-clear\" aria-label=\"Clear\" (click)=\"clearFile()\">&times;</button>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@default {\n\t\t\t\t\t<div class=\"hub-input__group\" [class.hub-input__group--floating]=\"labelType() === _labelTypes.Floating\">\n\t\t\t\t\t\t@for (addon of _prepend(); track $index) {\n\t\t\t\t\t\t\t<span class=\"hub-input__addon hub-input__addon--prepend\">{{ addon }}</span>\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tclass=\"hub-field__control\"\n\t\t\t\t\t\t\t[class.hub-field__control--invalid]=\"isInvalid\"\n\t\t\t\t\t\t\t[class.hub-field__control--valid]=\"showsValid\"\n\t\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t\t[type]=\"resolvedType()\"\n\t\t\t\t\t\t\t[ngModel]=\"_value()\"\n\t\t\t\t\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t\t\t\t\t(keyup.enter)=\"enter.emit(_value())\"\n\t\t\t\t\t\t\t[placeholder]=\"labelType() === _labelTypes.Floating ? (placeholder() || ' ') : placeholder()\"\n\t\t\t\t\t\t\t[min]=\"min() ?? null\"\n\t\t\t\t\t\t\t[max]=\"max() ?? null\"\n\t\t\t\t\t\t\t[step]=\"step()\"\n\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t[readonly]=\"readonly()\"\n\t\t\t\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t@for (addon of _append(); track $index) {\n\t\t\t\t\t\t\t<span class=\"hub-input__addon hub-input__addon--append\">{{ addon }}</span>\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t@if (labelType() === _labelTypes.Floating && (label() || required())) {\n\t\t\t\t\t\t\t<label [for]=\"id\" class=\"hub-field__label hub-input__label--floating\">\n\t\t\t\t\t\t\t\t{{ label() }}\n\t\t\t\t\t\t\t\t@if (required()) {\n\t\t\t\t\t\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t@if (type() === _inputFormats.Password) {\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-input__password-toggle\"\n\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t[attr.aria-label]=\"showPassword ? 'Hide password' : 'Show password'\"\n\t\t\t\t\t\t\t[attr.aria-pressed]=\"showPassword\"\n\t\t\t\t\t\t\t(click)=\"togglePassword()\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span class=\"hub-input__password-icon\" [class.hub-input__password-icon--visible]=\"showPassword\"></span>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (formText() || formTextTmp()) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span class=\"hub-field__feedback-text\" [innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n\n\t@if (showsValid && validFeedback()) {\n\t\t<div class=\"hub-field__feedback hub-field__feedback--valid\" role=\"status\">\n\t\t\t<span class=\"hub-field__feedback-text\">{{ validFeedback() }}</span>\n\t\t</div>\n\t}\n</div>\n", styles: ["hub-input{display:block;font-family:var(--hub-input-font-family)}hub-input.hidden-control{display:none!important}.hub-input__row{display:flex;align-items:stretch;gap:var(--hub-ref-space-2, .5rem)}.hub-input__group{display:flex;align-items:stretch;flex:1 1 auto;min-width:0;position:relative}.hub-input__addon{display:flex;align-items:center;padding:0 var(--hub-input-padding-x);color:var(--hub-input-group-addon-color);background:var(--hub-input-group-addon-bg);border:var(--hub-input-border-width) solid var(--hub-input-group-addon-border-color);white-space:nowrap}.hub-input__addon--prepend{border-right:0;border-radius:var(--hub-input-border-radius) 0 0 var(--hub-input-border-radius)}.hub-input__addon--append{border-left:0;border-radius:0 var(--hub-input-border-radius) var(--hub-input-border-radius) 0}.hub-input__addon--prepend+.hub-field__control{border-top-left-radius:0;border-bottom-left-radius:0}.hub-input__group .hub-field__control:has(+.hub-input__addon--append){border-top-right-radius:0;border-bottom-right-radius:0}.hub-input__group--floating .hub-field__control{padding-top:calc(var(--hub-input-padding-y) + .625rem);padding-bottom:calc(var(--hub-input-padding-y) - .125rem)}.hub-input__group--floating .hub-input__label--floating{position:absolute;top:0;left:0;height:100%;padding:var(--hub-input-padding-y) var(--hub-input-padding-x);margin:0;color:var(--hub-input-placeholder-color);font-weight:var(--hub-ref-font-weight-base, 400);pointer-events:none;transform-origin:0 0;transition:opacity .1s ease-in-out,transform .1s ease-in-out}.hub-input__group--floating .hub-field__control:focus~.hub-input__label--floating,.hub-input__group--floating .hub-field__control:not(:placeholder-shown)~.hub-input__label--floating{transform:scale(.85) translateY(-.5rem);opacity:.9}.hub-input__counter{display:flex;align-items:stretch}.hub-input__counter-btn{flex:0 0 var(--hub-input-counter-button-width);display:inline-flex;align-items:center;justify-content:center;font-size:1.15rem;line-height:1;color:var(--hub-input-counter-button-color);background:var(--hub-input-counter-button-bg);border:var(--hub-input-border-width) solid var(--hub-input-border-color);cursor:pointer}.hub-input__counter-btn:first-child{border-right:0;border-radius:var(--hub-input-border-radius) 0 0 var(--hub-input-border-radius)}.hub-input__counter-btn:last-child{border-left:0;border-radius:0 var(--hub-input-border-radius) var(--hub-input-border-radius) 0}.hub-input__counter-btn:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-input__control--counter{border-radius:0;text-align:center;appearance:textfield}.hub-input__control--counter::-webkit-outer-spin-button,.hub-input__control--counter::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.hub-input__control--color{width:var(--hub-input-color-size);height:var(--hub-input-color-size);padding:.15rem;cursor:pointer}.hub-input__file{display:flex;align-items:stretch;width:100%;background:var(--hub-input-bg);border:var(--hub-input-border-width) solid var(--hub-input-border-color);border-radius:var(--hub-input-border-radius);overflow:hidden}.hub-input__file--invalid{border-color:var(--hub-form-invalid-border-color)}.hub-input__file-native{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.hub-input__file-button{flex:0 0 auto;padding:var(--hub-input-padding-y) var(--hub-input-padding-x);color:var(--hub-input-group-addon-color);background:var(--hub-input-group-addon-bg);border:0;border-right:var(--hub-input-border-width) solid var(--hub-input-border-color);font-size:var(--hub-input-font-size);white-space:nowrap;cursor:pointer}.hub-input__file-button:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-input__file-name{flex:1 1 auto;min-width:0;padding:var(--hub-input-padding-y) var(--hub-input-padding-x);color:var(--hub-input-placeholder-color);font-size:var(--hub-input-font-size);line-height:var(--hub-input-line-height);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hub-input__file-clear{flex:0 0 auto;width:2rem;color:var(--hub-input-placeholder-color);font-size:1.1rem;line-height:1;background:transparent;border:0;cursor:pointer}.hub-input__file-clear:hover{color:var(--hub-form-invalid-color)}.hub-input__password-toggle{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:2.5rem;padding:0;color:var(--hub-input-color);background:transparent;border:var(--hub-input-border-width) solid var(--hub-input-border-color);border-radius:var(--hub-input-border-radius);cursor:pointer;transition:var(--hub-input-transition)}.hub-input__password-toggle:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-input__password-icon{display:block;width:1.1rem;height:1.1rem;background-color:currentColor;--hub-input-eye-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z'/%3E%3Cpath d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z'/%3E%3C/svg%3E\");-webkit-mask:var(--hub-input-eye-mask) center/contain no-repeat;mask:var(--hub-input-eye-mask) center/contain no-repeat}.hub-input__password-icon--visible{--hub-input-eye-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z'/%3E%3Cpath d='M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z'/%3E%3Cpath d='M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z'/%3E%3C/svg%3E\")}.hub-input--checkable .hub-input__check{display:inline-flex;align-items:center;gap:var(--hub-check-label-gap);cursor:pointer}.hub-input__check-input{flex:0 0 auto;width:var(--hub-check-input-width);height:var(--hub-check-input-height);margin:0;appearance:none;background:var(--hub-check-input-bg);border:var(--hub-check-input-border-width) solid var(--hub-check-input-border-color);border-radius:var(--hub-check-input-border-radius);cursor:pointer;transition:var(--hub-input-transition)}.hub-input__check-input:checked{background:var(--hub-check-input-checked-bg) var(--hub-check-input-checked-icon) center/.85rem no-repeat;border-color:var(--hub-check-input-checked-border-color)}.hub-input__check-input:focus-visible{outline:0;box-shadow:var(--hub-input-focus-box-shadow)}.hub-input__check-input--invalid{border-color:var(--hub-form-invalid-border-color)}.hub-input__check-input:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-input__check-input--switch{position:relative;width:var(--hub-switch-width);height:var(--hub-switch-height);border:0;border-radius:var(--hub-ref-radius-pill, 50rem);background:var(--hub-switch-track-off)}.hub-input__check-input--switch:after{content:\"\";position:absolute;top:50%;left:.125rem;width:calc(var(--hub-switch-height) - .25rem);height:calc(var(--hub-switch-height) - .25rem);border-radius:50%;background:var(--hub-switch-thumb);transform:translateY(-50%);transition:left .15s ease-in-out}.hub-input__check-input--switch:checked{background:var(--hub-switch-track-on)}.hub-input__check-input--switch:checked:after{left:calc(100% - var(--hub-switch-height) + .125rem)}.hub-input__check-label{display:inline-flex;align-items:baseline;gap:.15rem;color:var(--hub-input-color);font-size:var(--hub-input-font-size)}.hub-input--checkable.hub-field--disabled .hub-input__check-label{opacity:var(--hub-form-disabled-opacity)}\n"] }]
-        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelType: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelType", required: false }] }, { type: i0.Output, args: ["labelTypeChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }, { type: i0.Output, args: ["placeholderChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }, { type: i0.Output, args: ["minChange"] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }, { type: i0.Output, args: ["maxChange"] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], formText: [{ type: i0.Input, args: [{ isSignal: true, alias: "formText", required: false }] }], formTextType: [{ type: i0.Input, args: [{ isSignal: true, alias: "formTextType", required: false }] }], prepend: [{ type: i0.Input, args: [{ isSignal: true, alias: "prepend", required: false }] }], append: [{ type: i0.Input, args: [{ isSignal: true, alias: "append", required: false }] }], classlist: [{ type: i0.Input, args: [{ isSignal: true, alias: "classlist", required: false }] }], mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], unmaskValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "unmaskValue", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], enter: [{ type: i0.Output, args: ["enter"] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], buttonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLabel", required: false }] }], fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }] } });
+                    }, template: "<div\n\tclass=\"hub-field hub-input\"\n\t[class.hub-field--horizontal]=\"!isCheckable() && (labelType() === _labelTypes.Horizontal || (!label() && required()))\"\n\t[class.hub-input--checkable]=\"isCheckable()\"\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 (isCheckable()) {\n\t\t<label class=\"hub-input__check\" [class.hub-input__check--switch]=\"type() === _inputFormats.Switch\">\n\t\t\t<input\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tclass=\"hub-input__check-input\"\n\t\t\t\t[class.hub-input__check-input--switch]=\"type() === _inputFormats.Switch\"\n\t\t\t\t[class.hub-input__check-input--invalid]=\"isInvalid\"\n\t\t\t\t[attr.role]=\"type() === _inputFormats.Switch ? 'switch' : null\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\t[checked]=\"$any(_value())\"\n\t\t\t\t(change)=\"setValue($event)\"\n\t\t\t\t[disabled]=\"disabled() || readonly()\"\n\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t/>\n\t\t\t@if (label() || required()) {\n\t\t\t\t<span class=\"hub-input__check-label\">\n\t\t\t\t\t{{ label() }}\n\t\t\t\t\t@if (required()) {\n\t\t\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t\t\t}\n\t\t\t\t</span>\n\t\t\t}\n\t\t</label>\n\t} @else {\n\t\t@if ((label() || required()) && labelType() !== _labelTypes.Floating) {\n\t\t\t<label [for]=\"id\" class=\"hub-field__label\">\n\t\t\t\t{{ label() }}\n\t\t\t\t@if (required()) {\n\t\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t\t}\n\t\t\t</label>\n\t\t}\n\n\t\t<div class=\"hub-field__body hub-input__row\">\n\t\t\t@switch (type()) {\n\t\t\t\t@case (_inputFormats.Counter) {\n\t\t\t\t\t<div class=\"hub-input__group hub-input__counter\">\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-input__counter-btn\"\n\t\t\t\t\t\t\t[disabled]=\"disabled() || readonly() || (min() != null && $any(_value()) <= $any(min()))\"\n\t\t\t\t\t\t\taria-label=\"Decrease\"\n\t\t\t\t\t\t\t(click)=\"subtract()\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t&minus;\n\t\t\t\t\t\t</button>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tclass=\"hub-field__control hub-input__control--counter\"\n\t\t\t\t\t\t\t[class.hub-field__control--invalid]=\"isInvalid\"\n\t\t\t\t\t\t\t[class.hub-field__control--valid]=\"showsValid\"\n\t\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t\t[ngModel]=\"_value()\"\n\t\t\t\t\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t\t\t\t\t[min]=\"min() ?? null\"\n\t\t\t\t\t\t\t[max]=\"max() ?? null\"\n\t\t\t\t\t\t\t[step]=\"step()\"\n\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t[readonly]=\"readonly()\"\n\t\t\t\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t\t\t/>\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-input__counter-btn\"\n\t\t\t\t\t\t\t[disabled]=\"disabled() || readonly() || (max() != null && $any(_value()) >= $any(max()))\"\n\t\t\t\t\t\t\taria-label=\"Increase\"\n\t\t\t\t\t\t\t(click)=\"add()\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t+\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@case (_inputFormats.Color) {\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype=\"color\"\n\t\t\t\t\t\tclass=\"hub-field__control hub-input__control--color\"\n\t\t\t\t\t\t[class.hub-field__control--invalid]=\"isInvalid\"\n\t\t\t\t\t\t[class.hub-field__control--valid]=\"showsValid\"\n\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t[ngModel]=\"_value()\"\n\t\t\t\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t\t\t(blur)=\"handleBlur($event)\"\n\t\t\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t\t@case (_inputFormats.File) {\n\t\t\t\t\t<div class=\"hub-input__file\" [class.hub-input__file--invalid]=\"isInvalid\">\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t#fileInput\n\t\t\t\t\t\t\ttype=\"file\"\n\t\t\t\t\t\t\tclass=\"hub-input__file-native\"\n\t\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t\t[accept]=\"accept()\"\n\t\t\t\t\t\t\t[multiple]=\"multiple()\"\n\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t\t\t\t(change)=\"setFileValue($event)\"\n\t\t\t\t\t\t\t(blur)=\"handleBlur($event)\"\n\t\t\t\t\t\t/>\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-input__file-button\"\n\t\t\t\t\t\t\t[disabled]=\"disabled() || readonly()\"\n\t\t\t\t\t\t\t(click)=\"triggerFile()\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{{ buttonLabel() }}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t\t<span class=\"hub-input__file-name\">{{ fileLabel() || placeholder() }}</span>\n\t\t\t\t\t\t@if (fileLabel() && !disabled() && !readonly()) {\n\t\t\t\t\t\t\t<button type=\"button\" class=\"hub-input__file-clear\" aria-label=\"Clear\" (click)=\"clearFile()\">&times;</button>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@default {\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"hub-input__group\"\n\t\t\t\t\t\t[class.hub-input__group--floating]=\"labelType() === _labelTypes.Floating\"\n\t\t\t\t\t\t[class.hub-input__group--has-prefix]=\"hasPrefix()\"\n\t\t\t\t\t\t[class.hub-input__group--has-suffix]=\"hasSuffix()\"\n\t\t\t\t\t>\n\t\t\t\t\t\t@for (addon of _prepend(); track $index) {\n\t\t\t\t\t\t\t<span class=\"hub-input__addon hub-input__addon--prepend\">{{ addon }}</span>\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t<span class=\"hub-input__affix hub-input__affix--prefix\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t<ng-content select=\"[hubInputPrefix]\"></ng-content>\n\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tclass=\"hub-field__control\"\n\t\t\t\t\t\t\t[class.hub-field__control--invalid]=\"isInvalid\"\n\t\t\t\t\t\t\t[class.hub-field__control--valid]=\"showsValid\"\n\t\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t\t[type]=\"resolvedType()\"\n\t\t\t\t\t\t\t[ngModel]=\"_value()\"\n\t\t\t\t\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t\t\t\t\t(keyup.enter)=\"enter.emit(_value())\"\n\t\t\t\t\t\t\t[placeholder]=\"labelType() === _labelTypes.Floating ? (placeholder() || ' ') : placeholder()\"\n\t\t\t\t\t\t\t[min]=\"min() ?? null\"\n\t\t\t\t\t\t\t[max]=\"max() ?? null\"\n\t\t\t\t\t\t\t[step]=\"step()\"\n\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t[readonly]=\"readonly()\"\n\t\t\t\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t@if (showClear()) {\n\t\t\t\t\t\t\t<button type=\"button\" class=\"hub-input__clear\" aria-label=\"Clear\" (click)=\"clear()\"></button>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t<span class=\"hub-input__affix hub-input__affix--suffix\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t<ng-content select=\"[hubInputSuffix]\"></ng-content>\n\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t@for (addon of _append(); track $index) {\n\t\t\t\t\t\t\t<span class=\"hub-input__addon hub-input__addon--append\">{{ addon }}</span>\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t@if (labelType() === _labelTypes.Floating && (label() || required())) {\n\t\t\t\t\t\t\t<label [for]=\"id\" class=\"hub-field__label hub-input__label--floating\">\n\t\t\t\t\t\t\t\t{{ label() }}\n\t\t\t\t\t\t\t\t@if (required()) {\n\t\t\t\t\t\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t@if (type() === _inputFormats.Password) {\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-input__password-toggle\"\n\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t[attr.aria-label]=\"showPassword ? 'Hide password' : 'Show password'\"\n\t\t\t\t\t\t\t[attr.aria-pressed]=\"showPassword\"\n\t\t\t\t\t\t\t(click)=\"togglePassword()\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span class=\"hub-input__password-icon\" [class.hub-input__password-icon--visible]=\"showPassword\"></span>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (formText() || formTextTmp()) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span class=\"hub-field__feedback-text\" [innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n\n\t@if (showsValid && validFeedback()) {\n\t\t<div class=\"hub-field__feedback hub-field__feedback--valid\" role=\"status\">\n\t\t\t<span class=\"hub-field__feedback-text\">{{ validFeedback() }}</span>\n\t\t</div>\n\t}\n</div>\n", styles: ["hub-input{display:block;font-family:var(--hub-input-font-family)}hub-input.hidden-control{display:none!important}.hub-input__row{display:flex;align-items:stretch;gap:var(--hub-ref-space-2, .5rem)}.hub-input__group{display:flex;align-items:stretch;flex:1 1 auto;min-width:0;position:relative}.hub-input__addon{display:flex;align-items:center;padding:0 var(--hub-input-padding-x);color:var(--hub-input-group-addon-color);background:var(--hub-input-group-addon-bg);border:var(--hub-input-border-width) solid var(--hub-input-group-addon-border-color);white-space:nowrap}.hub-input__addon--prepend{border-right:0;border-radius:var(--hub-input-border-radius) 0 0 var(--hub-input-border-radius)}.hub-input__addon--append{border-left:0;border-radius:0 var(--hub-input-border-radius) var(--hub-input-border-radius) 0}.hub-input__addon--prepend+.hub-field__control{border-top-left-radius:0;border-bottom-left-radius:0}.hub-input__group .hub-field__control:has(+.hub-input__addon--append){border-top-right-radius:0;border-bottom-right-radius:0}.hub-input__affix{position:absolute;inset-block:0;display:flex;align-items:center;color:var(--hub-input-icon-color);--hub-icon-color: var(--hub-input-icon-color);--hub-icon-size: var(--hub-input-icon-size);pointer-events:none;z-index:2}.hub-input__affix--prefix{inset-inline-start:var(--hub-input-affix-inset)}.hub-input__affix--suffix{inset-inline-end:var(--hub-input-affix-inset)}.hub-input__affix-content{pointer-events:auto}.hub-input__clear{position:absolute;inset-block:0;inset-inline-end:var(--hub-input-affix-inset);margin-block:auto;display:inline-flex;inline-size:var(--hub-input-clear-size);block-size:var(--hub-input-clear-size);padding:0;border:0;background-color:var(--hub-input-clear-color);-webkit-mask:var(--hub-input-clear-icon) center/contain no-repeat;mask:var(--hub-input-clear-icon) center/contain no-repeat;cursor:pointer;z-index:3;transition:background-color .15s ease}.hub-input__clear:hover,.hub-input__clear:focus-visible{background-color:var(--hub-input-clear-hover-color)}.hub-input__group--has-prefix>.hub-field__control{padding-inline-start:calc(var(--hub-input-affix-inset) + var(--hub-input-icon-size) + var(--hub-input-affix-gap))}.hub-input__group--has-suffix>.hub-field__control{padding-inline-end:calc(var(--hub-input-affix-inset) + var(--hub-input-icon-size) + var(--hub-input-affix-gap))}.hub-input__group--floating .hub-field__control{padding-top:calc(var(--hub-input-padding-y) + .625rem);padding-bottom:calc(var(--hub-input-padding-y) - .125rem)}.hub-input__group--floating .hub-input__label--floating{position:absolute;top:0;left:0;height:100%;padding:var(--hub-input-padding-y) var(--hub-input-padding-x);margin:0;color:var(--hub-input-placeholder-color);font-weight:var(--hub-ref-font-weight-base, 400);pointer-events:none;transform-origin:0 0;transition:opacity .1s ease-in-out,transform .1s ease-in-out}.hub-input__group--floating .hub-field__control:focus~.hub-input__label--floating,.hub-input__group--floating .hub-field__control:not(:placeholder-shown)~.hub-input__label--floating{transform:scale(.85) translateY(-.5rem);opacity:.9}.hub-input__counter{display:flex;align-items:stretch}.hub-input__counter-btn{flex:0 0 var(--hub-input-counter-button-width);display:inline-flex;align-items:center;justify-content:center;font-size:1.15rem;line-height:1;color:var(--hub-input-counter-button-color);background:var(--hub-input-counter-button-bg);border:var(--hub-input-border-width) solid var(--hub-input-border-color);cursor:pointer}.hub-input__counter-btn:first-child{border-right:0;border-radius:var(--hub-input-border-radius) 0 0 var(--hub-input-border-radius)}.hub-input__counter-btn:last-child{border-left:0;border-radius:0 var(--hub-input-border-radius) var(--hub-input-border-radius) 0}.hub-input__counter-btn:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-input__control--counter{border-radius:0;text-align:center;appearance:textfield}.hub-input__control--counter::-webkit-outer-spin-button,.hub-input__control--counter::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.hub-input__control--color{width:var(--hub-input-color-size);height:var(--hub-input-color-size);padding:.15rem;cursor:pointer}.hub-input__file{position:relative;display:flex;align-items:stretch;width:100%;background:var(--hub-input-bg);border:var(--hub-input-border-width) solid var(--hub-input-border-color);border-radius:var(--hub-input-border-radius);overflow:hidden}.hub-input__file--invalid{border-color:var(--hub-form-invalid-border-color)}.hub-input__file-native{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.hub-input__file-button{flex:0 0 auto;padding:var(--hub-input-padding-y) var(--hub-input-padding-x);color:var(--hub-input-group-addon-color);background:var(--hub-input-group-addon-bg);border:0;border-right:var(--hub-input-border-width) solid var(--hub-input-border-color);font-size:var(--hub-input-font-size);white-space:nowrap;cursor:pointer}.hub-input__file-button:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-input__file-name{flex:1 1 auto;min-width:0;padding:var(--hub-input-padding-y) var(--hub-input-padding-x);color:var(--hub-input-placeholder-color);font-size:var(--hub-input-font-size);line-height:var(--hub-input-line-height);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hub-input__file-clear{flex:0 0 auto;width:2rem;color:var(--hub-input-placeholder-color);font-size:1.1rem;line-height:1;background:transparent;border:0;cursor:pointer}.hub-input__file-clear:hover{color:var(--hub-form-invalid-color)}.hub-input__password-toggle{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:2.5rem;padding:0;color:var(--hub-input-color);background:transparent;border:var(--hub-input-border-width) solid var(--hub-input-border-color);border-radius:var(--hub-input-border-radius);cursor:pointer;transition:var(--hub-input-transition)}.hub-input__password-toggle:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-input__password-icon{display:block;width:1.1rem;height:1.1rem;background-color:currentColor;--hub-input-eye-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z'/%3E%3Cpath d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z'/%3E%3C/svg%3E\");-webkit-mask:var(--hub-input-eye-mask) center/contain no-repeat;mask:var(--hub-input-eye-mask) center/contain no-repeat}.hub-input__password-icon--visible{--hub-input-eye-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z'/%3E%3Cpath d='M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z'/%3E%3Cpath d='M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z'/%3E%3C/svg%3E\")}.hub-input--checkable .hub-input__check{display:inline-flex;align-items:center;gap:var(--hub-check-label-gap);cursor:pointer}.hub-input__check-input{flex:0 0 auto;width:var(--hub-check-input-width);height:var(--hub-check-input-height);margin:0;appearance:none;background:var(--hub-check-input-bg);border:var(--hub-check-input-border-width) solid var(--hub-check-input-border-color);border-radius:var(--hub-check-input-border-radius);cursor:pointer;transition:var(--hub-input-transition)}.hub-input__check-input:checked{background:var(--hub-check-input-checked-bg) var(--hub-check-input-checked-icon) center/.85rem no-repeat;border-color:var(--hub-check-input-checked-border-color)}.hub-input__check-input:focus-visible{outline:0;box-shadow:var(--hub-input-focus-box-shadow)}.hub-input__check-input--invalid{border-color:var(--hub-form-invalid-border-color)}.hub-input__check-input:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-input__check-input--switch{position:relative;width:var(--hub-switch-width);height:var(--hub-switch-height);border:0;border-radius:var(--hub-ref-radius-pill, 50rem);background:var(--hub-switch-track-off)}.hub-input__check-input--switch:after{content:\"\";position:absolute;top:50%;left:.125rem;width:calc(var(--hub-switch-height) - .25rem);height:calc(var(--hub-switch-height) - .25rem);border-radius:50%;background:var(--hub-switch-thumb);transform:translateY(-50%);transition:left .15s ease-in-out}.hub-input__check-input--switch:checked{background:var(--hub-switch-track-on)}.hub-input__check-input--switch:checked:after{left:calc(100% - var(--hub-switch-height) + .125rem)}.hub-input__check-label{display:inline-flex;align-items:baseline;gap:.15rem;color:var(--hub-input-color);font-size:var(--hub-input-font-size)}.hub-input--checkable.hub-field--disabled .hub-input__check-label{opacity:var(--hub-form-disabled-opacity)}\n"] }]
+        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelType: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelType", required: false }] }, { type: i0.Output, args: ["labelTypeChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }, { type: i0.Output, args: ["placeholderChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }, { type: i0.Output, args: ["minChange"] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }, { type: i0.Output, args: ["maxChange"] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], formText: [{ type: i0.Input, args: [{ isSignal: true, alias: "formText", required: false }] }], formTextType: [{ type: i0.Input, args: [{ isSignal: true, alias: "formTextType", required: false }] }], prepend: [{ type: i0.Input, args: [{ isSignal: true, alias: "prepend", required: false }] }], append: [{ type: i0.Input, args: [{ isSignal: true, alias: "append", required: false }] }], prefixDir: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubInputPrefixDirective), { isSignal: true }] }], suffixDir: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubInputSuffixDirective), { isSignal: true }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], classlist: [{ type: i0.Input, args: [{ isSignal: true, alias: "classlist", required: false }] }], mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], unmaskValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "unmaskValue", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], enter: [{ type: i0.Output, args: ["enter"] }], debounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceTime", required: false }] }], search: [{ type: i0.Output, args: ["search"] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], buttonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLabel", required: false }] }], fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }] } });
 
 /**
  * Segmented one-time-code input (`hub-otp-input`): a row of single-character cells for
@@ -1678,16 +1806,260 @@ class HubSliderComponent extends HubFieldControl {
         return Math.min(100, Math.max(0, ratio));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubSliderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: HubSliderComponent, isStandalone: true, selector: "hub-slider", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelType: { classPropertyName: "labelType", publicName: "labelType", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", 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" }, host: { properties: { "class": "classlist()", "class.hub-slider-host": "true" } }, usesInheritance: true, ngImport: i0, template: "<div\n\tclass=\"hub-field hub-slider\"\n\t[class.hub-field--horizontal]=\"label() && labelType() === _labelTypes.Horizontal\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n\t[class.hub-field--valid]=\"showsValid\"\n\t[style.--hub-slider-percent]=\"percent()\"\n\t[style.--hub-slider-from]=\"lowerPercent()\"\n\t[style.--hub-slider-to]=\"upperPercent()\"\n>\n\t@if (label() || required()) {\n\t\t<label [for]=\"id\" class=\"hub-field__label\">\n\t\t\t{{ label() }}\n\t\t\t@if (required()) {\n\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t}\n\t\t</label>\n\t}\n\n\t<div class=\"hub-field__body hub-slider__range\" [class.hub-slider__range--dual]=\"range()\">\n\t\t@if (range()) {\n\t\t\t<div class=\"hub-slider__rail\" aria-hidden=\"true\"></div>\n\n\t\t\t<input\n\t\t\t\ttype=\"range\"\n\t\t\t\tclass=\"hub-slider__track hub-slider__track--lower\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\t[min]=\"min()\"\n\t\t\t\t[max]=\"max()\"\n\t\t\t\t[step]=\"step()\"\n\t\t\t\t[value]=\"lower()\"\n\t\t\t\t(input)=\"setLower($any($event.target).value)\"\n\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\taria-label=\"Range start\"\n\t\t\t\t[attr.aria-valuetext]=\"lower()\"\n\t\t\t/>\n\t\t\t<input\n\t\t\t\ttype=\"range\"\n\t\t\t\tclass=\"hub-slider__track hub-slider__track--upper\"\n\t\t\t\t[min]=\"min()\"\n\t\t\t\t[max]=\"max()\"\n\t\t\t\t[step]=\"step()\"\n\t\t\t\t[value]=\"upper()\"\n\t\t\t\t(input)=\"setUpper($any($event.target).value)\"\n\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\taria-label=\"Range end\"\n\t\t\t\t[attr.aria-valuetext]=\"upper()\"\n\t\t\t/>\n\n\t\t\t@if (showValue()) {\n\t\t\t\t<span class=\"hub-slider__bubble hub-slider__bubble--lower\" aria-hidden=\"true\">{{ lower() }}</span>\n\t\t\t\t<span class=\"hub-slider__bubble hub-slider__bubble--upper\" aria-hidden=\"true\">{{ upper() }}</span>\n\t\t\t}\n\t\t} @else {\n\t\t\t<input\n\t\t\t\ttype=\"range\"\n\t\t\t\tclass=\"hub-slider__track\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\t[min]=\"min()\"\n\t\t\t\t[max]=\"max()\"\n\t\t\t\t[step]=\"step()\"\n\t\t\t\t[value]=\"single()\"\n\t\t\t\t(input)=\"setValue($any($event.target).value)\"\n\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t[attr.aria-valuetext]=\"single()\"\n\t\t\t/>\n\n\t\t\t@if (showValue()) {\n\t\t\t\t<span class=\"hub-slider__bubble\" aria-hidden=\"true\">{{ single() }}</span>\n\t\t\t}\n\t\t}\n\t</div>\n\n\t@if (formText() || formTextTmp()) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span class=\"hub-field__feedback-text\" [innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n\n\t@if (showsValid && validFeedback()) {\n\t\t<div class=\"hub-field__feedback hub-field__feedback--valid\" role=\"status\">\n\t\t\t<span class=\"hub-field__feedback-text\">{{ validFeedback() }}</span>\n\t\t</div>\n\t}\n</div>\n", styles: ["hub-slider{display:block}hub-slider.hidden-control{display:none!important}.hub-slider__range{position:relative;padding-top:1.75rem}.hub-slider__track{width:var(--hub-slider-track-width);height:var(--hub-slider-track-height);margin:0;appearance:none;-webkit-appearance:none;background:linear-gradient(to right,var(--hub-slider-track-fill-bg) calc(var(--hub-slider-percent) * 1%),var(--hub-slider-track-bg) calc(var(--hub-slider-percent) * 1%));border-radius:var(--hub-slider-track-border-radius);cursor:pointer}.hub-slider__track:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-slider__track::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:var(--hub-slider-thumb-width);height:var(--hub-slider-thumb-height);border-radius:var(--hub-slider-thumb-border-radius);background:var(--hub-slider-thumb-bg);border:var(--hub-slider-thumb-border);box-shadow:var(--hub-slider-thumb-shadow);cursor:pointer}.hub-slider__track::-moz-range-thumb{width:var(--hub-slider-thumb-width);height:var(--hub-slider-thumb-height);border-radius:var(--hub-slider-thumb-border-radius);background:var(--hub-slider-thumb-bg);border:var(--hub-slider-thumb-border);box-shadow:var(--hub-slider-thumb-shadow);cursor:pointer}.hub-slider__track::-moz-range-track{height:var(--hub-slider-track-height);background:transparent;border-radius:var(--hub-slider-track-border-radius)}.hub-slider__track:focus-visible{outline:0}.hub-slider__track:focus-visible::-webkit-slider-thumb{box-shadow:var(--hub-slider-thumb-shadow),var(--hub-input-focus-box-shadow)}.hub-slider__track:focus-visible::-moz-range-thumb{box-shadow:var(--hub-slider-thumb-shadow),var(--hub-input-focus-box-shadow)}.hub-slider__bubble{position:absolute;top:0;left:calc(var(--hub-slider-percent) * 1%);transform:translate(-50%);padding:.1rem .4rem;color:var(--hub-slider-tooltip-color);background:var(--hub-slider-tooltip-bg);font-size:var(--hub-ref-font-size-sm, .875rem);line-height:1.4;border-radius:var(--hub-slider-tooltip-border-radius);white-space:nowrap;pointer-events:none}.hub-slider__bubble--lower{left:calc(var(--hub-slider-from) * 1%)}.hub-slider__bubble--upper{left:calc(var(--hub-slider-to) * 1%)}.hub-slider__range--dual{min-height:calc(1.75rem + var(--hub-slider-thumb-height))}.hub-slider__range--dual .hub-slider__rail,.hub-slider__range--dual .hub-slider__track--lower,.hub-slider__range--dual .hub-slider__track--upper{position:absolute;left:0;right:0;top:calc(1.75rem + var(--hub-slider-thumb-height) / 2)}.hub-slider__range--dual .hub-slider__rail{height:var(--hub-slider-track-height);transform:translateY(-50%);border-radius:var(--hub-slider-track-border-radius);background:linear-gradient(to right,var(--hub-slider-track-bg) calc(var(--hub-slider-from) * 1%),var(--hub-slider-track-fill-bg) calc(var(--hub-slider-from) * 1%),var(--hub-slider-track-fill-bg) calc(var(--hub-slider-to) * 1%),var(--hub-slider-track-bg) calc(var(--hub-slider-to) * 1%));pointer-events:none}.hub-slider__range--dual .hub-slider__track--lower,.hub-slider__range--dual .hub-slider__track--upper{width:100%;height:var(--hub-slider-thumb-height);margin:0;transform:translateY(-50%);background:transparent;pointer-events:none}.hub-slider__range--dual .hub-slider__track--lower::-webkit-slider-thumb,.hub-slider__range--dual .hub-slider__track--upper::-webkit-slider-thumb{pointer-events:auto;position:relative;z-index:2}.hub-slider__range--dual .hub-slider__track--lower::-moz-range-thumb,.hub-slider__range--dual .hub-slider__track--upper::-moz-range-thumb{pointer-events:auto}.hub-slider__range--dual .hub-slider__track--lower::-moz-range-track,.hub-slider__range--dual .hub-slider__track--upper::-moz-range-track{background:transparent}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { 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: HubSliderComponent, isStandalone: true, selector: "hub-slider", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelType: { classPropertyName: "labelType", publicName: "labelType", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", 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" }, host: { properties: { "class": "classlist()", "class.hub-slider-host": "true" } }, usesInheritance: true, ngImport: i0, template: "<div\n\tclass=\"hub-field hub-slider\"\n\t[class.hub-field--horizontal]=\"label() && labelType() === _labelTypes.Horizontal\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n\t[class.hub-field--valid]=\"showsValid\"\n\t[style.--hub-slider-percent]=\"percent()\"\n\t[style.--hub-slider-from]=\"lowerPercent()\"\n\t[style.--hub-slider-to]=\"upperPercent()\"\n>\n\t@if (label() || required()) {\n\t\t<label [for]=\"id\" class=\"hub-field__label\">\n\t\t\t{{ label() }}\n\t\t\t@if (required()) {\n\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t}\n\t\t</label>\n\t}\n\n\t<div\n\t\tclass=\"hub-field__body hub-slider__range\"\n\t\t[class.hub-slider__range--dual]=\"range()\"\n\t\t[class.hub-slider__range--flush]=\"!showValue()\"\n\t>\n\t\t@if (range()) {\n\t\t\t<div class=\"hub-slider__rail\" aria-hidden=\"true\"></div>\n\n\t\t\t<input\n\t\t\t\ttype=\"range\"\n\t\t\t\tclass=\"hub-slider__track hub-slider__track--lower\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\t[min]=\"min()\"\n\t\t\t\t[max]=\"max()\"\n\t\t\t\t[step]=\"step()\"\n\t\t\t\t[value]=\"lower()\"\n\t\t\t\t(input)=\"setLower($any($event.target).value)\"\n\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\taria-label=\"Range start\"\n\t\t\t\t[attr.aria-valuetext]=\"lower()\"\n\t\t\t/>\n\t\t\t<input\n\t\t\t\ttype=\"range\"\n\t\t\t\tclass=\"hub-slider__track hub-slider__track--upper\"\n\t\t\t\t[min]=\"min()\"\n\t\t\t\t[max]=\"max()\"\n\t\t\t\t[step]=\"step()\"\n\t\t\t\t[value]=\"upper()\"\n\t\t\t\t(input)=\"setUpper($any($event.target).value)\"\n\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\taria-label=\"Range end\"\n\t\t\t\t[attr.aria-valuetext]=\"upper()\"\n\t\t\t/>\n\n\t\t\t@if (showValue()) {\n\t\t\t\t<span class=\"hub-slider__bubble hub-slider__bubble--lower\" aria-hidden=\"true\">{{ lower() }}</span>\n\t\t\t\t<span class=\"hub-slider__bubble hub-slider__bubble--upper\" aria-hidden=\"true\">{{ upper() }}</span>\n\t\t\t}\n\t\t} @else {\n\t\t\t<input\n\t\t\t\ttype=\"range\"\n\t\t\t\tclass=\"hub-slider__track\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\t[min]=\"min()\"\n\t\t\t\t[max]=\"max()\"\n\t\t\t\t[step]=\"step()\"\n\t\t\t\t[value]=\"single()\"\n\t\t\t\t(input)=\"setValue($any($event.target).value)\"\n\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t[attr.aria-valuetext]=\"single()\"\n\t\t\t/>\n\n\t\t\t@if (showValue()) {\n\t\t\t\t<span class=\"hub-slider__bubble\" aria-hidden=\"true\">{{ single() }}</span>\n\t\t\t}\n\t\t}\n\t</div>\n\n\t@if (formText() || formTextTmp()) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span class=\"hub-field__feedback-text\" [innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n\n\t@if (showsValid && validFeedback()) {\n\t\t<div class=\"hub-field__feedback hub-field__feedback--valid\" role=\"status\">\n\t\t\t<span class=\"hub-field__feedback-text\">{{ validFeedback() }}</span>\n\t\t</div>\n\t}\n</div>\n", styles: ["hub-slider{display:block}hub-slider.hidden-control{display:none!important}.hub-slider__range{position:relative;padding-top:var(--hub-slider-value-space)}.hub-slider__range--flush{--hub-slider-value-space: 0}.hub-slider__track{width:var(--hub-slider-track-width);height:var(--hub-slider-track-height);margin:0;appearance:none;-webkit-appearance:none;background:var(--hub-slider-track-fill) no-repeat,var(--hub-slider-track-bg);background-size:calc(var(--hub-slider-percent) * 1%) 100%,100% 100%;border-radius:var(--hub-slider-track-border-radius);cursor:pointer}.hub-slider__track:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-slider__track::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:var(--hub-slider-thumb-width);height:var(--hub-slider-thumb-height);border-radius:var(--hub-slider-thumb-border-radius);background:var(--hub-slider-thumb-bg);border:var(--hub-slider-thumb-border);box-shadow:var(--hub-slider-thumb-shadow);cursor:pointer}.hub-slider__track::-moz-range-thumb{width:var(--hub-slider-thumb-width);height:var(--hub-slider-thumb-height);border-radius:var(--hub-slider-thumb-border-radius);background:var(--hub-slider-thumb-bg);border:var(--hub-slider-thumb-border);box-shadow:var(--hub-slider-thumb-shadow);cursor:pointer}.hub-slider__track::-moz-range-track{height:var(--hub-slider-track-height);background:transparent;border-radius:var(--hub-slider-track-border-radius)}.hub-slider__track:focus-visible{outline:0}.hub-slider__track:focus-visible::-webkit-slider-thumb{box-shadow:var(--hub-slider-thumb-shadow),var(--hub-input-focus-box-shadow)}.hub-slider__track:focus-visible::-moz-range-thumb{box-shadow:var(--hub-slider-thumb-shadow),var(--hub-input-focus-box-shadow)}.hub-slider__bubble{position:absolute;top:0;left:calc(var(--hub-slider-percent) * 1%);transform:translate(-50%);padding:.1rem .4rem;color:var(--hub-slider-tooltip-color);background:var(--hub-slider-tooltip-bg);font-size:var(--hub-ref-font-size-sm, .875rem);line-height:1.4;border-radius:var(--hub-slider-tooltip-border-radius);white-space:nowrap;pointer-events:none}.hub-slider__bubble--lower{left:calc(var(--hub-slider-from) * 1%)}.hub-slider__bubble--upper{left:calc(var(--hub-slider-to) * 1%)}.hub-slider__range--dual{min-height:calc(var(--hub-slider-value-space) + var(--hub-slider-thumb-height))}.hub-slider__range--dual .hub-slider__rail,.hub-slider__range--dual .hub-slider__track--lower,.hub-slider__range--dual .hub-slider__track--upper{position:absolute;left:0;right:0;top:calc(var(--hub-slider-value-space) + var(--hub-slider-thumb-height) / 2)}.hub-slider__range--dual .hub-slider__rail{height:var(--hub-slider-track-height);transform:translateY(-50%);border-radius:var(--hub-slider-track-border-radius);background:var(--hub-slider-track-fill) no-repeat,var(--hub-slider-track-bg);background-size:calc((var(--hub-slider-to) - var(--hub-slider-from)) * 1%) 100%,100% 100%;background-position:calc(var(--hub-slider-from) / max(100 - var(--hub-slider-to) + var(--hub-slider-from),1) * 100%) center,0 0;pointer-events:none}.hub-slider__range--dual .hub-slider__track--lower,.hub-slider__range--dual .hub-slider__track--upper{width:100%;height:var(--hub-slider-thumb-height);margin:0;transform:translateY(-50%);background:transparent;pointer-events:none}.hub-slider__range--dual .hub-slider__track--lower::-webkit-slider-thumb,.hub-slider__range--dual .hub-slider__track--upper::-webkit-slider-thumb{pointer-events:auto;position:relative;z-index:2}.hub-slider__range--dual .hub-slider__track--lower::-moz-range-thumb,.hub-slider__range--dual .hub-slider__track--upper::-moz-range-thumb{pointer-events:auto}.hub-slider__range--dual .hub-slider__track--lower::-moz-range-track,.hub-slider__range--dual .hub-slider__track--upper::-moz-range-track{background:transparent}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { 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: HubSliderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'hub-slider', imports: [NgTemplateOutlet, KeyValuePipe, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         '[class]': 'classlist()',
                         '[class.hub-slider-host]': 'true'
-                    }, template: "<div\n\tclass=\"hub-field hub-slider\"\n\t[class.hub-field--horizontal]=\"label() && labelType() === _labelTypes.Horizontal\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n\t[class.hub-field--valid]=\"showsValid\"\n\t[style.--hub-slider-percent]=\"percent()\"\n\t[style.--hub-slider-from]=\"lowerPercent()\"\n\t[style.--hub-slider-to]=\"upperPercent()\"\n>\n\t@if (label() || required()) {\n\t\t<label [for]=\"id\" class=\"hub-field__label\">\n\t\t\t{{ label() }}\n\t\t\t@if (required()) {\n\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t}\n\t\t</label>\n\t}\n\n\t<div class=\"hub-field__body hub-slider__range\" [class.hub-slider__range--dual]=\"range()\">\n\t\t@if (range()) {\n\t\t\t<div class=\"hub-slider__rail\" aria-hidden=\"true\"></div>\n\n\t\t\t<input\n\t\t\t\ttype=\"range\"\n\t\t\t\tclass=\"hub-slider__track hub-slider__track--lower\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\t[min]=\"min()\"\n\t\t\t\t[max]=\"max()\"\n\t\t\t\t[step]=\"step()\"\n\t\t\t\t[value]=\"lower()\"\n\t\t\t\t(input)=\"setLower($any($event.target).value)\"\n\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\taria-label=\"Range start\"\n\t\t\t\t[attr.aria-valuetext]=\"lower()\"\n\t\t\t/>\n\t\t\t<input\n\t\t\t\ttype=\"range\"\n\t\t\t\tclass=\"hub-slider__track hub-slider__track--upper\"\n\t\t\t\t[min]=\"min()\"\n\t\t\t\t[max]=\"max()\"\n\t\t\t\t[step]=\"step()\"\n\t\t\t\t[value]=\"upper()\"\n\t\t\t\t(input)=\"setUpper($any($event.target).value)\"\n\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\taria-label=\"Range end\"\n\t\t\t\t[attr.aria-valuetext]=\"upper()\"\n\t\t\t/>\n\n\t\t\t@if (showValue()) {\n\t\t\t\t<span class=\"hub-slider__bubble hub-slider__bubble--lower\" aria-hidden=\"true\">{{ lower() }}</span>\n\t\t\t\t<span class=\"hub-slider__bubble hub-slider__bubble--upper\" aria-hidden=\"true\">{{ upper() }}</span>\n\t\t\t}\n\t\t} @else {\n\t\t\t<input\n\t\t\t\ttype=\"range\"\n\t\t\t\tclass=\"hub-slider__track\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\t[min]=\"min()\"\n\t\t\t\t[max]=\"max()\"\n\t\t\t\t[step]=\"step()\"\n\t\t\t\t[value]=\"single()\"\n\t\t\t\t(input)=\"setValue($any($event.target).value)\"\n\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t[attr.aria-valuetext]=\"single()\"\n\t\t\t/>\n\n\t\t\t@if (showValue()) {\n\t\t\t\t<span class=\"hub-slider__bubble\" aria-hidden=\"true\">{{ single() }}</span>\n\t\t\t}\n\t\t}\n\t</div>\n\n\t@if (formText() || formTextTmp()) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span class=\"hub-field__feedback-text\" [innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n\n\t@if (showsValid && validFeedback()) {\n\t\t<div class=\"hub-field__feedback hub-field__feedback--valid\" role=\"status\">\n\t\t\t<span class=\"hub-field__feedback-text\">{{ validFeedback() }}</span>\n\t\t</div>\n\t}\n</div>\n", styles: ["hub-slider{display:block}hub-slider.hidden-control{display:none!important}.hub-slider__range{position:relative;padding-top:1.75rem}.hub-slider__track{width:var(--hub-slider-track-width);height:var(--hub-slider-track-height);margin:0;appearance:none;-webkit-appearance:none;background:linear-gradient(to right,var(--hub-slider-track-fill-bg) calc(var(--hub-slider-percent) * 1%),var(--hub-slider-track-bg) calc(var(--hub-slider-percent) * 1%));border-radius:var(--hub-slider-track-border-radius);cursor:pointer}.hub-slider__track:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-slider__track::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:var(--hub-slider-thumb-width);height:var(--hub-slider-thumb-height);border-radius:var(--hub-slider-thumb-border-radius);background:var(--hub-slider-thumb-bg);border:var(--hub-slider-thumb-border);box-shadow:var(--hub-slider-thumb-shadow);cursor:pointer}.hub-slider__track::-moz-range-thumb{width:var(--hub-slider-thumb-width);height:var(--hub-slider-thumb-height);border-radius:var(--hub-slider-thumb-border-radius);background:var(--hub-slider-thumb-bg);border:var(--hub-slider-thumb-border);box-shadow:var(--hub-slider-thumb-shadow);cursor:pointer}.hub-slider__track::-moz-range-track{height:var(--hub-slider-track-height);background:transparent;border-radius:var(--hub-slider-track-border-radius)}.hub-slider__track:focus-visible{outline:0}.hub-slider__track:focus-visible::-webkit-slider-thumb{box-shadow:var(--hub-slider-thumb-shadow),var(--hub-input-focus-box-shadow)}.hub-slider__track:focus-visible::-moz-range-thumb{box-shadow:var(--hub-slider-thumb-shadow),var(--hub-input-focus-box-shadow)}.hub-slider__bubble{position:absolute;top:0;left:calc(var(--hub-slider-percent) * 1%);transform:translate(-50%);padding:.1rem .4rem;color:var(--hub-slider-tooltip-color);background:var(--hub-slider-tooltip-bg);font-size:var(--hub-ref-font-size-sm, .875rem);line-height:1.4;border-radius:var(--hub-slider-tooltip-border-radius);white-space:nowrap;pointer-events:none}.hub-slider__bubble--lower{left:calc(var(--hub-slider-from) * 1%)}.hub-slider__bubble--upper{left:calc(var(--hub-slider-to) * 1%)}.hub-slider__range--dual{min-height:calc(1.75rem + var(--hub-slider-thumb-height))}.hub-slider__range--dual .hub-slider__rail,.hub-slider__range--dual .hub-slider__track--lower,.hub-slider__range--dual .hub-slider__track--upper{position:absolute;left:0;right:0;top:calc(1.75rem + var(--hub-slider-thumb-height) / 2)}.hub-slider__range--dual .hub-slider__rail{height:var(--hub-slider-track-height);transform:translateY(-50%);border-radius:var(--hub-slider-track-border-radius);background:linear-gradient(to right,var(--hub-slider-track-bg) calc(var(--hub-slider-from) * 1%),var(--hub-slider-track-fill-bg) calc(var(--hub-slider-from) * 1%),var(--hub-slider-track-fill-bg) calc(var(--hub-slider-to) * 1%),var(--hub-slider-track-bg) calc(var(--hub-slider-to) * 1%));pointer-events:none}.hub-slider__range--dual .hub-slider__track--lower,.hub-slider__range--dual .hub-slider__track--upper{width:100%;height:var(--hub-slider-thumb-height);margin:0;transform:translateY(-50%);background:transparent;pointer-events:none}.hub-slider__range--dual .hub-slider__track--lower::-webkit-slider-thumb,.hub-slider__range--dual .hub-slider__track--upper::-webkit-slider-thumb{pointer-events:auto;position:relative;z-index:2}.hub-slider__range--dual .hub-slider__track--lower::-moz-range-thumb,.hub-slider__range--dual .hub-slider__track--upper::-moz-range-thumb{pointer-events:auto}.hub-slider__range--dual .hub-slider__track--lower::-moz-range-track,.hub-slider__range--dual .hub-slider__track--upper::-moz-range-track{background:transparent}\n"] }]
+                    }, template: "<div\n\tclass=\"hub-field hub-slider\"\n\t[class.hub-field--horizontal]=\"label() && labelType() === _labelTypes.Horizontal\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n\t[class.hub-field--valid]=\"showsValid\"\n\t[style.--hub-slider-percent]=\"percent()\"\n\t[style.--hub-slider-from]=\"lowerPercent()\"\n\t[style.--hub-slider-to]=\"upperPercent()\"\n>\n\t@if (label() || required()) {\n\t\t<label [for]=\"id\" class=\"hub-field__label\">\n\t\t\t{{ label() }}\n\t\t\t@if (required()) {\n\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t}\n\t\t</label>\n\t}\n\n\t<div\n\t\tclass=\"hub-field__body hub-slider__range\"\n\t\t[class.hub-slider__range--dual]=\"range()\"\n\t\t[class.hub-slider__range--flush]=\"!showValue()\"\n\t>\n\t\t@if (range()) {\n\t\t\t<div class=\"hub-slider__rail\" aria-hidden=\"true\"></div>\n\n\t\t\t<input\n\t\t\t\ttype=\"range\"\n\t\t\t\tclass=\"hub-slider__track hub-slider__track--lower\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\t[min]=\"min()\"\n\t\t\t\t[max]=\"max()\"\n\t\t\t\t[step]=\"step()\"\n\t\t\t\t[value]=\"lower()\"\n\t\t\t\t(input)=\"setLower($any($event.target).value)\"\n\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\taria-label=\"Range start\"\n\t\t\t\t[attr.aria-valuetext]=\"lower()\"\n\t\t\t/>\n\t\t\t<input\n\t\t\t\ttype=\"range\"\n\t\t\t\tclass=\"hub-slider__track hub-slider__track--upper\"\n\t\t\t\t[min]=\"min()\"\n\t\t\t\t[max]=\"max()\"\n\t\t\t\t[step]=\"step()\"\n\t\t\t\t[value]=\"upper()\"\n\t\t\t\t(input)=\"setUpper($any($event.target).value)\"\n\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\taria-label=\"Range end\"\n\t\t\t\t[attr.aria-valuetext]=\"upper()\"\n\t\t\t/>\n\n\t\t\t@if (showValue()) {\n\t\t\t\t<span class=\"hub-slider__bubble hub-slider__bubble--lower\" aria-hidden=\"true\">{{ lower() }}</span>\n\t\t\t\t<span class=\"hub-slider__bubble hub-slider__bubble--upper\" aria-hidden=\"true\">{{ upper() }}</span>\n\t\t\t}\n\t\t} @else {\n\t\t\t<input\n\t\t\t\ttype=\"range\"\n\t\t\t\tclass=\"hub-slider__track\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\t[min]=\"min()\"\n\t\t\t\t[max]=\"max()\"\n\t\t\t\t[step]=\"step()\"\n\t\t\t\t[value]=\"single()\"\n\t\t\t\t(input)=\"setValue($any($event.target).value)\"\n\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t[attr.aria-valuetext]=\"single()\"\n\t\t\t/>\n\n\t\t\t@if (showValue()) {\n\t\t\t\t<span class=\"hub-slider__bubble\" aria-hidden=\"true\">{{ single() }}</span>\n\t\t\t}\n\t\t}\n\t</div>\n\n\t@if (formText() || formTextTmp()) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span class=\"hub-field__feedback-text\" [innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n\n\t@if (showsValid && validFeedback()) {\n\t\t<div class=\"hub-field__feedback hub-field__feedback--valid\" role=\"status\">\n\t\t\t<span class=\"hub-field__feedback-text\">{{ validFeedback() }}</span>\n\t\t</div>\n\t}\n</div>\n", styles: ["hub-slider{display:block}hub-slider.hidden-control{display:none!important}.hub-slider__range{position:relative;padding-top:var(--hub-slider-value-space)}.hub-slider__range--flush{--hub-slider-value-space: 0}.hub-slider__track{width:var(--hub-slider-track-width);height:var(--hub-slider-track-height);margin:0;appearance:none;-webkit-appearance:none;background:var(--hub-slider-track-fill) no-repeat,var(--hub-slider-track-bg);background-size:calc(var(--hub-slider-percent) * 1%) 100%,100% 100%;border-radius:var(--hub-slider-track-border-radius);cursor:pointer}.hub-slider__track:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-slider__track::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:var(--hub-slider-thumb-width);height:var(--hub-slider-thumb-height);border-radius:var(--hub-slider-thumb-border-radius);background:var(--hub-slider-thumb-bg);border:var(--hub-slider-thumb-border);box-shadow:var(--hub-slider-thumb-shadow);cursor:pointer}.hub-slider__track::-moz-range-thumb{width:var(--hub-slider-thumb-width);height:var(--hub-slider-thumb-height);border-radius:var(--hub-slider-thumb-border-radius);background:var(--hub-slider-thumb-bg);border:var(--hub-slider-thumb-border);box-shadow:var(--hub-slider-thumb-shadow);cursor:pointer}.hub-slider__track::-moz-range-track{height:var(--hub-slider-track-height);background:transparent;border-radius:var(--hub-slider-track-border-radius)}.hub-slider__track:focus-visible{outline:0}.hub-slider__track:focus-visible::-webkit-slider-thumb{box-shadow:var(--hub-slider-thumb-shadow),var(--hub-input-focus-box-shadow)}.hub-slider__track:focus-visible::-moz-range-thumb{box-shadow:var(--hub-slider-thumb-shadow),var(--hub-input-focus-box-shadow)}.hub-slider__bubble{position:absolute;top:0;left:calc(var(--hub-slider-percent) * 1%);transform:translate(-50%);padding:.1rem .4rem;color:var(--hub-slider-tooltip-color);background:var(--hub-slider-tooltip-bg);font-size:var(--hub-ref-font-size-sm, .875rem);line-height:1.4;border-radius:var(--hub-slider-tooltip-border-radius);white-space:nowrap;pointer-events:none}.hub-slider__bubble--lower{left:calc(var(--hub-slider-from) * 1%)}.hub-slider__bubble--upper{left:calc(var(--hub-slider-to) * 1%)}.hub-slider__range--dual{min-height:calc(var(--hub-slider-value-space) + var(--hub-slider-thumb-height))}.hub-slider__range--dual .hub-slider__rail,.hub-slider__range--dual .hub-slider__track--lower,.hub-slider__range--dual .hub-slider__track--upper{position:absolute;left:0;right:0;top:calc(var(--hub-slider-value-space) + var(--hub-slider-thumb-height) / 2)}.hub-slider__range--dual .hub-slider__rail{height:var(--hub-slider-track-height);transform:translateY(-50%);border-radius:var(--hub-slider-track-border-radius);background:var(--hub-slider-track-fill) no-repeat,var(--hub-slider-track-bg);background-size:calc((var(--hub-slider-to) - var(--hub-slider-from)) * 1%) 100%,100% 100%;background-position:calc(var(--hub-slider-from) / max(100 - var(--hub-slider-to) + var(--hub-slider-from),1) * 100%) center,0 0;pointer-events:none}.hub-slider__range--dual .hub-slider__track--lower,.hub-slider__range--dual .hub-slider__track--upper{width:100%;height:var(--hub-slider-thumb-height);margin:0;transform:translateY(-50%);background:transparent;pointer-events:none}.hub-slider__range--dual .hub-slider__track--lower::-webkit-slider-thumb,.hub-slider__range--dual .hub-slider__track--upper::-webkit-slider-thumb{pointer-events:auto;position:relative;z-index:2}.hub-slider__range--dual .hub-slider__track--lower::-moz-range-thumb,.hub-slider__range--dual .hub-slider__track--upper::-moz-range-thumb{pointer-events:auto}.hub-slider__range--dual .hub-slider__track--lower::-moz-range-track,.hub-slider__range--dual .hub-slider__track--upper::-moz-range-track{background:transparent}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelType: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelType", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], formText: [{ type: i0.Input, args: [{ isSignal: true, alias: "formText", required: false }] }], formTextType: [{ type: i0.Input, args: [{ isSignal: true, alias: "formTextType", required: false }] }], classlist: [{ type: i0.Input, args: [{ isSignal: true, alias: "classlist", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
 
+/**
+ * Segmented button bar (`hub-segmented`): a compact group of 2..n options rendered as an inline
+ * (or vertical) segmented control. A full `ng-hub-ui-forms` field — it extends
+ * {@link HubFieldControl}, so it binds with `formControlName` / `ngModel` and shares the label,
+ * helper text and validation chrome with every other field.
+ *
+ * Two selection modes:
+ * - **single** (default): exclusive choice following the WAI-ARIA radiogroup pattern
+ *   (`role="radiogroup"` wrapping `role="radio"` buttons). Arrow keys move focus **and** select.
+ *   The value is the scalar of the chosen option.
+ * - **multiple** (`[multiple]="true"`): a toggle group (`role="group"` wrapping
+ *   `aria-pressed` buttons). Clicking toggles membership; arrow keys only move focus.
+ *   The value is an array of the selected option values.
+ *
+ * ```html
+ * <hub-segmented
+ *   formControlName="view"
+ *   [options]="[{ value: 'list', label: 'List' }, { value: 'grid', label: 'Grid' }]"
+ * />
+ *
+ * <hub-segmented formControlName="tags" [multiple]="true" [vertical]="true" [options]="tags" />
+ * ```
+ */
+class HubSegmentedComponent extends HubFieldControl {
+    _labelTypes = HubLabelTypes;
+    /** The selectable options, in render order. */
+    options = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /** Visual density. */
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /**
+     * Semantic accent for the selected pill. Drives `data-variant` on the bar, which re-bases the
+     * `--hub-segmented-selected-*` tokens. Built-in values map to the design-system palette
+     * (`primary`, `secondary`, `success`, `danger`, `warning`, `info`, `neutral`), but the set is
+     * OPEN — any custom string works as long as the consumer supplies the matching
+     * `--hub-segmented-selected-bg` / `--hub-segmented-selected-color` (or `--hub-segmented-accent`)
+     * for that `data-variant`. Empty string (default) keeps the neutral white-pill look.
+     */
+    color = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /** Label text. */
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Label display type (`stacked`, `horizontal`). */
+    labelType = input(this._labelTypes.Stacked, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelType" }] : /* istanbul ignore next */ []));
+    /** Helper text shown below the control. */
+    formText = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formText" }] : /* istanbul ignore next */ []));
+    /** When `true`, options toggle independently and the value is an array. */
+    multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** When `true`, the segments stack vertically instead of sitting in a row. */
+    vertical = input(false, { ...(ngDevMode ? { debugName: "vertical" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Currently selected value — a scalar in single mode, an array in multiple mode. */
+    value = model(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
+    /** The rendered option buttons, used to move focus during keyboard navigation. */
+    _buttons = viewChildren('optionButton', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_buttons" }] : /* istanbul ignore next */ []));
+    /** The segmented bar element — the positioning context for the sliding indicator. */
+    _bar = viewChild('segmentedBar', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_bar" }] : /* istanbul ignore next */ []));
+    _destroyRef = inject(DestroyRef);
+    _isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    constructor() {
+        super();
+        // The sliding indicator is a browser-only affordance (it measures rendered geometry) and
+        // applies to single mode only. Guard SSR so no DOM reads happen off the browser.
+        if (this._isBrowser) {
+            // Re-measure whenever anything that moves or resizes the selected pill changes.
+            afterRenderEffect(() => {
+                // Track the geometry-affecting state so the effect re-runs on any of them.
+                this.value();
+                this.options();
+                this.size();
+                this.vertical();
+                this.multiple();
+                this._buttons();
+                this.updateIndicator();
+            });
+            // Initial placement plus a ResizeObserver so the pill follows layout/reflow changes
+            // (container resize, font swaps, wrapping) that no signal reports.
+            afterNextRender(() => {
+                const bar = this._bar()?.nativeElement;
+                if (!bar)
+                    return;
+                if (typeof ResizeObserver !== 'undefined') {
+                    const observer = new ResizeObserver(() => this.updateIndicator());
+                    observer.observe(bar);
+                    this._destroyRef.onDestroy(() => observer.disconnect());
+                }
+                this.updateIndicator();
+            });
+        }
+    }
+    /**
+     * Index of the option that owns the group's tab stop (roving tabindex): the first selected
+     * option, or the first enabled option when nothing is selected yet.
+     */
+    rovingIndex = computed(() => {
+        const options = this.options();
+        const selected = options.findIndex((option) => this.isSelected(option));
+        if (selected >= 0)
+            return selected;
+        return options.findIndex((option) => !option.disabled);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rovingIndex" }] : /* istanbul ignore next */ []));
+    /** Whether the given option is currently selected (mode-aware). */
+    isSelected(option) {
+        if (this.multiple()) {
+            const current = this.value();
+            return Array.isArray(current) && current.some((entry) => this.#isSameValue(entry, option.value));
+        }
+        return this.#isSameValue(option.value, this.value());
+    }
+    /**
+     * Selects (single) or toggles (multiple) an option and notifies the form. No-op when the
+     * control or the option is disabled.
+     */
+    select(option) {
+        if (this.disabled() || option.disabled)
+            return;
+        if (this.multiple()) {
+            const current = Array.isArray(this.value()) ? this.value() : [];
+            const exists = current.some((entry) => this.#isSameValue(entry, option.value));
+            const next = exists
+                ? current.filter((entry) => !this.#isSameValue(entry, option.value))
+                : [...current, option.value];
+            this.value.set(next);
+            this.onChange(next);
+            return;
+        }
+        if (this.#isSameValue(option.value, this.value()))
+            return;
+        this.value.set(option.value);
+        this.onChange(option.value);
+    }
+    /**
+     * Keyboard navigation. In single mode the arrow keys move to (and select) the next / previous
+     * enabled option (radiogroup pattern); in multiple mode they only move focus and selection is
+     * left to the native button click (`Space` / `Enter`). `Home` / `End` jump to the first / last
+     * enabled option.
+     */
+    onKeydown(event) {
+        if (this.disabled())
+            return;
+        const options = this.options();
+        if (options.length === 0)
+            return;
+        const current = this.rovingIndex();
+        let target = null;
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowDown':
+                target = this.#nextEnabled(current, 1);
+                break;
+            case 'ArrowLeft':
+            case 'ArrowUp':
+                target = this.#nextEnabled(current, -1);
+                break;
+            case 'Home':
+                target = this.#nextEnabled(-1, 1);
+                break;
+            case 'End':
+                target = this.#nextEnabled(options.length, -1);
+                break;
+            default:
+                return;
+        }
+        if (target === null)
+            return;
+        event.preventDefault();
+        if (!this.multiple()) {
+            this.select(options[target]);
+        }
+        this._buttons()[target]?.nativeElement.focus();
+    }
+    /** Writes an incoming value from the form model (coerces to an array in multiple mode). */
+    writeValue(value) {
+        if (this.multiple()) {
+            this.value.set(Array.isArray(value) ? value : []);
+            return;
+        }
+        this.value.set(value);
+    }
+    /**
+     * Measures the selected option (single mode) and writes its position and size onto the bar as
+     * `--hub-segmented-indicator-{x,y,width,height}` px custom properties, which the sliding
+     * indicator reads. Collapses the indicator (width/height 0) in multiple mode or when nothing is
+     * selected. Browser-only — invoked from `afterRenderEffect` / `afterNextRender` / the
+     * `ResizeObserver`, so the DOM is always up to date when it runs.
+     */
+    updateIndicator() {
+        const bar = this._bar()?.nativeElement;
+        if (!bar)
+            return;
+        const collapse = () => {
+            bar.style.setProperty('--hub-segmented-indicator-width', '0px');
+            bar.style.setProperty('--hub-segmented-indicator-height', '0px');
+        };
+        if (this.multiple()) {
+            collapse();
+            return;
+        }
+        const index = this.options().findIndex((option) => this.isSelected(option));
+        const button = index >= 0 ? this._buttons()[index]?.nativeElement : undefined;
+        if (!button) {
+            collapse();
+            return;
+        }
+        bar.style.setProperty('--hub-segmented-indicator-x', `${button.offsetLeft}px`);
+        bar.style.setProperty('--hub-segmented-indicator-y', `${button.offsetTop}px`);
+        bar.style.setProperty('--hub-segmented-indicator-width', `${button.offsetWidth}px`);
+        bar.style.setProperty('--hub-segmented-indicator-height', `${button.offsetHeight}px`);
+    }
+    /**
+     * Finds the next enabled option starting from `from`, moving in `step` direction.
+     * Wraps around the ends and returns `null` when no enabled option exists.
+     */
+    #nextEnabled(from, step) {
+        const options = this.options();
+        const count = options.length;
+        for (let offset = 1; offset <= count; offset++) {
+            const index = (((from + step * offset) % count) + count) % count;
+            if (!options[index].disabled)
+                return index;
+        }
+        return null;
+    }
+    /** Value equality used across selection — reference / `Object.is` semantics. */
+    #isSameValue(a, b) {
+        return Object.is(a, b);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubSegmentedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: HubSegmentedComponent, isStandalone: true, selector: "hub-segmented", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelType: { classPropertyName: "labelType", publicName: "labelType", isSignal: true, isRequired: false, transformFunction: null }, formText: { classPropertyName: "formText", publicName: "formText", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.hub-segmented-host": "true" } }, viewQueries: [{ propertyName: "_buttons", predicate: ["optionButton"], descendants: true, isSignal: true }, { propertyName: "_bar", first: true, predicate: ["segmentedBar"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n\tclass=\"hub-field hub-segmented-field\"\n\t[class.hub-field--horizontal]=\"label() && labelType() === _labelTypes.Horizontal\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n\t[class.hub-field--valid]=\"showsValid\"\n>\n\t@if (label() || required()) {\n\t\t<label [for]=\"id\" class=\"hub-field__label\">\n\t\t\t{{ label() }}\n\t\t\t@if (required()) {\n\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t}\n\t\t</label>\n\t}\n\n\t<div class=\"hub-field__body\">\n\t\t<div\n\t\t\t#segmentedBar\n\t\t\t[id]=\"id\"\n\t\t\tclass=\"hub-segmented\"\n\t\t\t[class.hub-segmented--sm]=\"size() === 'sm'\"\n\t\t\t[class.hub-segmented--lg]=\"size() === 'lg'\"\n\t\t\t[class.hub-segmented--vertical]=\"vertical()\"\n\t\t\t[class.hub-segmented--multiple]=\"multiple()\"\n\t\t\t[class.hub-segmented--disabled]=\"disabled()\"\n\t\t\t[attr.data-variant]=\"color() || null\"\n\t\t\t[attr.role]=\"multiple() ? 'group' : 'radiogroup'\"\n\t\t\t[attr.aria-disabled]=\"disabled() ? 'true' : null\"\n\t\t\t(keydown)=\"onKeydown($event)\"\n\t\t>\n\t\t\t@if (!multiple()) {\n\t\t\t\t<span class=\"hub-segmented__indicator\" aria-hidden=\"true\"></span>\n\t\t\t}\n\n\t\t\t@for (option of options(); track option.value; let index = $index) {\n\t\t\t\t<button\n\t\t\t\t\t#optionButton\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"hub-segmented__option\"\n\t\t\t\t\t[class.hub-segmented__option--selected]=\"isSelected(option)\"\n\t\t\t\t\t[attr.role]=\"multiple() ? null : 'radio'\"\n\t\t\t\t\t[attr.aria-checked]=\"multiple() ? null : isSelected(option)\"\n\t\t\t\t\t[attr.aria-pressed]=\"multiple() ? isSelected(option) : null\"\n\t\t\t\t\t[disabled]=\"disabled() || !!option.disabled\"\n\t\t\t\t\t[tabindex]=\"rovingIndex() === index ? 0 : -1\"\n\t\t\t\t\t(click)=\"select(option)\"\n\t\t\t\t>\n\t\t\t\t\t{{ option.label }}\n\t\t\t\t</button>\n\t\t\t}\n\t\t</div>\n\t</div>\n\n\t@if (formText() || formTextTmp()) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span class=\"hub-field__feedback-text\" [innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n\n\t@if (showsValid && validFeedback()) {\n\t\t<div class=\"hub-field__feedback hub-field__feedback--valid\" role=\"status\">\n\t\t\t<span class=\"hub-field__feedback-text\">{{ validFeedback() }}</span>\n\t\t</div>\n\t}\n</div>\n", styles: ["hub-segmented{display:block}hub-segmented.hidden-control{display:none!important}.hub-segmented{position:relative;display:inline-flex;gap:var(--hub-segmented-gap);padding:var(--hub-segmented-gap);background:var(--hub-segmented-bg);border-radius:var(--hub-segmented-radius)}.hub-segmented__indicator{position:absolute;z-index:0;left:var(--hub-segmented-indicator-x, 0);top:var(--hub-segmented-indicator-y, 0);width:var(--hub-segmented-indicator-width, 0);height:var(--hub-segmented-indicator-height, 0);background:var(--hub-segmented-selected-bg);border-radius:calc(var(--hub-segmented-radius) - var(--hub-segmented-gap));box-shadow:var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075));pointer-events:none;transition:left var(--hub-segmented-indicator-transition),top var(--hub-segmented-indicator-transition),width var(--hub-segmented-indicator-transition),height var(--hub-segmented-indicator-transition)}@media(prefers-reduced-motion:reduce){.hub-segmented .hub-segmented__indicator{transition:none}}.hub-segmented--disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-segmented--vertical{flex-direction:column}.hub-segmented--vertical .hub-segmented__option{width:100%}.hub-segmented--multiple .hub-segmented__option--selected{background:var(--hub-segmented-selected-bg);box-shadow:var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075))}.hub-segmented__option{appearance:none;border:0;margin:0;position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;padding:var(--hub-segmented-padding-y) var(--hub-segmented-padding-x);color:var(--hub-sys-text-muted, #6c757d);background:transparent;font:inherit;line-height:1.2;white-space:nowrap;border-radius:calc(var(--hub-segmented-radius) - var(--hub-segmented-gap));cursor:pointer;transition:var(--hub-form-transition),color .15s ease-in-out,background-color .15s ease-in-out}.hub-segmented__option:focus-visible{outline:0;box-shadow:0 0 0 var(--hub-form-focus-ring-width) var(--hub-form-focus-ring-color)}.hub-segmented__option--selected{color:var(--hub-segmented-selected-color)}.hub-segmented__option:disabled{cursor:not-allowed;opacity:var(--hub-form-disabled-opacity)}.hub-segmented--sm .hub-segmented__option{padding:calc(var(--hub-segmented-padding-y) * .5) calc(var(--hub-segmented-padding-x) * .65);font-size:var(--hub-ref-font-size-sm, .875rem)}.hub-segmented--lg .hub-segmented__option{padding:calc(var(--hub-segmented-padding-y) * 1.35) calc(var(--hub-segmented-padding-x) * 1.35);font-size:var(--hub-ref-font-size-lg, 1.125rem)}:where(.hub-segmented[data-variant=primary]){--hub-segmented-selected-bg: var(--hub-sys-color-primary);--hub-segmented-selected-color: var(--hub-sys-color-primary-on, #fff)}:where(.hub-segmented[data-variant=secondary]){--hub-segmented-selected-bg: var(--hub-sys-color-secondary);--hub-segmented-selected-color: var(--hub-sys-color-secondary-on, #fff)}:where(.hub-segmented[data-variant=success]){--hub-segmented-selected-bg: var(--hub-sys-color-success);--hub-segmented-selected-color: var(--hub-sys-color-success-on, #fff)}:where(.hub-segmented[data-variant=danger]){--hub-segmented-selected-bg: var(--hub-sys-color-danger);--hub-segmented-selected-color: var(--hub-sys-color-danger-on, #fff)}:where(.hub-segmented[data-variant=warning]){--hub-segmented-selected-bg: var(--hub-sys-color-warning);--hub-segmented-selected-color: var(--hub-sys-color-warning-on, #fff)}:where(.hub-segmented[data-variant=info]){--hub-segmented-selected-bg: var(--hub-sys-color-info);--hub-segmented-selected-color: var(--hub-sys-color-info-on, #fff)}:where(.hub-segmented[data-variant=neutral]){--hub-segmented-selected-bg: var(--hub-sys-color-neutral);--hub-segmented-selected-color: var(--hub-sys-color-neutral-on, #fff)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubSegmentedComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hub-segmented', standalone: true, imports: [NgTemplateOutlet, KeyValuePipe], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        '[class.hub-segmented-host]': 'true'
+                    }, template: "<div\n\tclass=\"hub-field hub-segmented-field\"\n\t[class.hub-field--horizontal]=\"label() && labelType() === _labelTypes.Horizontal\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n\t[class.hub-field--valid]=\"showsValid\"\n>\n\t@if (label() || required()) {\n\t\t<label [for]=\"id\" class=\"hub-field__label\">\n\t\t\t{{ label() }}\n\t\t\t@if (required()) {\n\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t}\n\t\t</label>\n\t}\n\n\t<div class=\"hub-field__body\">\n\t\t<div\n\t\t\t#segmentedBar\n\t\t\t[id]=\"id\"\n\t\t\tclass=\"hub-segmented\"\n\t\t\t[class.hub-segmented--sm]=\"size() === 'sm'\"\n\t\t\t[class.hub-segmented--lg]=\"size() === 'lg'\"\n\t\t\t[class.hub-segmented--vertical]=\"vertical()\"\n\t\t\t[class.hub-segmented--multiple]=\"multiple()\"\n\t\t\t[class.hub-segmented--disabled]=\"disabled()\"\n\t\t\t[attr.data-variant]=\"color() || null\"\n\t\t\t[attr.role]=\"multiple() ? 'group' : 'radiogroup'\"\n\t\t\t[attr.aria-disabled]=\"disabled() ? 'true' : null\"\n\t\t\t(keydown)=\"onKeydown($event)\"\n\t\t>\n\t\t\t@if (!multiple()) {\n\t\t\t\t<span class=\"hub-segmented__indicator\" aria-hidden=\"true\"></span>\n\t\t\t}\n\n\t\t\t@for (option of options(); track option.value; let index = $index) {\n\t\t\t\t<button\n\t\t\t\t\t#optionButton\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"hub-segmented__option\"\n\t\t\t\t\t[class.hub-segmented__option--selected]=\"isSelected(option)\"\n\t\t\t\t\t[attr.role]=\"multiple() ? null : 'radio'\"\n\t\t\t\t\t[attr.aria-checked]=\"multiple() ? null : isSelected(option)\"\n\t\t\t\t\t[attr.aria-pressed]=\"multiple() ? isSelected(option) : null\"\n\t\t\t\t\t[disabled]=\"disabled() || !!option.disabled\"\n\t\t\t\t\t[tabindex]=\"rovingIndex() === index ? 0 : -1\"\n\t\t\t\t\t(click)=\"select(option)\"\n\t\t\t\t>\n\t\t\t\t\t{{ option.label }}\n\t\t\t\t</button>\n\t\t\t}\n\t\t</div>\n\t</div>\n\n\t@if (formText() || formTextTmp()) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span class=\"hub-field__feedback-text\" [innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n\n\t@if (showsValid && validFeedback()) {\n\t\t<div class=\"hub-field__feedback hub-field__feedback--valid\" role=\"status\">\n\t\t\t<span class=\"hub-field__feedback-text\">{{ validFeedback() }}</span>\n\t\t</div>\n\t}\n</div>\n", styles: ["hub-segmented{display:block}hub-segmented.hidden-control{display:none!important}.hub-segmented{position:relative;display:inline-flex;gap:var(--hub-segmented-gap);padding:var(--hub-segmented-gap);background:var(--hub-segmented-bg);border-radius:var(--hub-segmented-radius)}.hub-segmented__indicator{position:absolute;z-index:0;left:var(--hub-segmented-indicator-x, 0);top:var(--hub-segmented-indicator-y, 0);width:var(--hub-segmented-indicator-width, 0);height:var(--hub-segmented-indicator-height, 0);background:var(--hub-segmented-selected-bg);border-radius:calc(var(--hub-segmented-radius) - var(--hub-segmented-gap));box-shadow:var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075));pointer-events:none;transition:left var(--hub-segmented-indicator-transition),top var(--hub-segmented-indicator-transition),width var(--hub-segmented-indicator-transition),height var(--hub-segmented-indicator-transition)}@media(prefers-reduced-motion:reduce){.hub-segmented .hub-segmented__indicator{transition:none}}.hub-segmented--disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-segmented--vertical{flex-direction:column}.hub-segmented--vertical .hub-segmented__option{width:100%}.hub-segmented--multiple .hub-segmented__option--selected{background:var(--hub-segmented-selected-bg);box-shadow:var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075))}.hub-segmented__option{appearance:none;border:0;margin:0;position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;padding:var(--hub-segmented-padding-y) var(--hub-segmented-padding-x);color:var(--hub-sys-text-muted, #6c757d);background:transparent;font:inherit;line-height:1.2;white-space:nowrap;border-radius:calc(var(--hub-segmented-radius) - var(--hub-segmented-gap));cursor:pointer;transition:var(--hub-form-transition),color .15s ease-in-out,background-color .15s ease-in-out}.hub-segmented__option:focus-visible{outline:0;box-shadow:0 0 0 var(--hub-form-focus-ring-width) var(--hub-form-focus-ring-color)}.hub-segmented__option--selected{color:var(--hub-segmented-selected-color)}.hub-segmented__option:disabled{cursor:not-allowed;opacity:var(--hub-form-disabled-opacity)}.hub-segmented--sm .hub-segmented__option{padding:calc(var(--hub-segmented-padding-y) * .5) calc(var(--hub-segmented-padding-x) * .65);font-size:var(--hub-ref-font-size-sm, .875rem)}.hub-segmented--lg .hub-segmented__option{padding:calc(var(--hub-segmented-padding-y) * 1.35) calc(var(--hub-segmented-padding-x) * 1.35);font-size:var(--hub-ref-font-size-lg, 1.125rem)}:where(.hub-segmented[data-variant=primary]){--hub-segmented-selected-bg: var(--hub-sys-color-primary);--hub-segmented-selected-color: var(--hub-sys-color-primary-on, #fff)}:where(.hub-segmented[data-variant=secondary]){--hub-segmented-selected-bg: var(--hub-sys-color-secondary);--hub-segmented-selected-color: var(--hub-sys-color-secondary-on, #fff)}:where(.hub-segmented[data-variant=success]){--hub-segmented-selected-bg: var(--hub-sys-color-success);--hub-segmented-selected-color: var(--hub-sys-color-success-on, #fff)}:where(.hub-segmented[data-variant=danger]){--hub-segmented-selected-bg: var(--hub-sys-color-danger);--hub-segmented-selected-color: var(--hub-sys-color-danger-on, #fff)}:where(.hub-segmented[data-variant=warning]){--hub-segmented-selected-bg: var(--hub-sys-color-warning);--hub-segmented-selected-color: var(--hub-sys-color-warning-on, #fff)}:where(.hub-segmented[data-variant=info]){--hub-segmented-selected-bg: var(--hub-sys-color-info);--hub-segmented-selected-color: var(--hub-sys-color-info-on, #fff)}:where(.hub-segmented[data-variant=neutral]){--hub-segmented-selected-bg: var(--hub-sys-color-neutral);--hub-segmented-selected-color: var(--hub-sys-color-neutral-on, #fff)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelType: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelType", required: false }] }], formText: [{ type: i0.Input, args: [{ isSignal: true, alias: "formText", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], _buttons: [{ type: i0.ViewChildren, args: ['optionButton', { isSignal: true }] }], _bar: [{ type: i0.ViewChild, args: ['segmentedBar', { isSignal: true }] }] } });
+
 /**
  * Marks a template as the legend content of a `<hub-fieldset>`.
  *
@@ -5023,10 +5395,23 @@ class HubSelectComponent extends HubFieldControl {
     _headerTpl = contentChild(NgHeaderTemplateDirective, { ...(ngDevMode ? { debugName: "_headerTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
     _footerTpl = contentChild(NgFooterTemplateDirective, { ...(ngDevMode ? { debugName: "_footerTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
     _notFoundTpl = contentChild(NgNotFoundTemplateDirective, { ...(ngDevMode ? { debugName: "_notFoundTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
-    /** Rendering format (`dropdown`, `buttons`, `checkbox`, `radio`). */
+    /**
+     * Rendering format (`dropdown`, `buttons`, `checkbox`, `radio`).
+     *
+     * @deprecated The non-dropdown values (`buttons` / `checkbox` / `radio`) are deprecated and
+     * will be removed in the next major — use `<hub-segmented>` instead, which is the dedicated,
+     * lightweight control for inline options as segments/buttons (single **and** multiple selection,
+     * horizontal **and** vertical, with label / helper text). Migration: `format="buttons"` →
+     * `<hub-segmented>`; `format="checkbox"` → `<hub-segmented [multiple]="true">`; `format="radio"`
+     * → `<hub-segmented [vertical]="true">`. Only `dropdown` (the default) will remain on `hub-select`.
+     */
     format = input(this._selectFormats.Dropdown, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
-    /** Lay out the `buttons`/`checkbox`/`radio` options vertically. */
+    /**
+     * Lay out the `buttons`/`checkbox`/`radio` options vertically.
+     *
+     * @deprecated Tied to the deprecated non-dropdown `format` values — use `<hub-segmented [vertical]="true">` instead.
+     */
     vertical = input(false, { ...(ngDevMode ? { debugName: "vertical" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Items to choose from. */
     items = input([], /* @ts-ignore */
@@ -5198,7 +5583,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__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-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,
@@ -5218,7 +5603,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__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-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"] }] } });
 
 /**
@@ -5976,5 +6361,5 @@ const hubFormControlAdapter = {
  * Generated bundle index. Do not edit.
  */
 
-export { FormTextTypes, HUB_FORMS_CONFIG, HubAutoresizeDirective, HubDatepickerComponent, HubFieldControl, HubFieldsetComponent, HubFormComponent, HubFormControl, HubFormTextDirective, HubGroupControl, HubInputComponent, HubInputFormats, HubInvertColorPipe, HubJoinButLastPipe, HubLabelTypes, HubLegendComponent, HubLegendDirective, HubMapPipe, HubOtpInputComponent, HubSafeUrlPipe, HubSelectComponent, HubSelectFormats, HubSliderComponent, HubSnakeUpperPipe, HubTextareaComponent, HubUcfirstPipe, HubValidationErrorDirective, NgClearButtonTemplateDirective, NgFooterTemplateDirective, NgHeaderTemplateDirective, NgLabelTemplateDirective, NgLoadingSpinnerTemplateDirective, NgLoadingTextTemplateDirective, NgMultiLabelTemplateDirective, NgNotFoundTemplateDirective, NgOptgroupTemplateDirective, NgOptionComponent, NgOptionTemplateDirective, NgSelectConfig, NgTagTemplateDirective, NgTypeToSearchTemplateDirective, applyMask, areEqual, camelToSnakeUpper, controlHasMinOrMaxValidator, defaultHubDatepickerConfig, defaultHubDatepickerLabels, defaultHubFormsConfig, defaultInvalidFeedback, get, getActiveElement, getMinOrMaxValueFromValidator, hubAreEqual, hubFormControlAdapter, isDefined$1 as isDefined, isMaskActive, isString, joinButLast, provideHubForms, runInZone, uuid };
+export { FormTextTypes, HUB_FORMS_CONFIG, HubAutoresizeDirective, HubDatepickerComponent, HubFieldControl, HubFieldsetComponent, HubFormComponent, HubFormControl, HubFormTextDirective, HubGroupControl, HubInputComponent, HubInputFormats, HubInputPrefixDirective, HubInputSuffixDirective, HubInvertColorPipe, HubJoinButLastPipe, HubLabelTypes, HubLegendComponent, HubLegendDirective, HubMapPipe, HubOtpInputComponent, HubSafeUrlPipe, HubSegmentedComponent, HubSelectComponent, HubSelectFormats, HubSliderComponent, HubSnakeUpperPipe, HubTextareaComponent, HubUcfirstPipe, HubValidationErrorDirective, NgClearButtonTemplateDirective, NgFooterTemplateDirective, NgHeaderTemplateDirective, NgLabelTemplateDirective, NgLoadingSpinnerTemplateDirective, NgLoadingTextTemplateDirective, NgMultiLabelTemplateDirective, NgNotFoundTemplateDirective, NgOptgroupTemplateDirective, NgOptionComponent, NgOptionTemplateDirective, NgSelectConfig, NgTagTemplateDirective, NgTypeToSearchTemplateDirective, applyMask, areEqual, camelToSnakeUpper, controlHasMinOrMaxValidator, defaultHubDatepickerConfig, defaultHubDatepickerLabels, defaultHubFormsConfig, defaultInvalidFeedback, get, getActiveElement, getMinOrMaxValueFromValidator, hubAreEqual, hubFormControlAdapter, isDefined$1 as isDefined, isMaskActive, isString, joinButLast, provideHubForms, runInZone, uuid };
 //# sourceMappingURL=ng-hub-ui-forms.mjs.map