ng-hub-ui-forms 22.26.0 → 22.27.0

package/README.md

@@ -92,7 +92,7 @@ mode — no Bootstrap dependency.
 
 ## 🎯 Features
 
-- **Fields** — `hub-input` (text/number/email/password/color/switch/checkbox/counter, with input-group addons & masks, projected in-field affixes, a built-in `clearable` button and debounced typeahead `search`; the `file` format is **deprecated** → use `hub-file-input`), `hub-otp-input`, `hub-textarea` (+ `hubAutoresize`), `hub-slider` (single / dual thumb, gradient fill), `hub-segmented` (segmented control field — single & multiple selection, horizontal & vertical, with label + validation), `hub-select` (dropdown format, grouping, client-side search via `searchable` **and** server-side async typeahead via a `typeahead` Subject, tag creation with `addTag`, custom templates, `prepend` / `append` group addons and attached icons/buttons via `hubPrepend` / `hubAppend`; the `buttons` / `checkbox` / `radio` formats are **deprecated** → use `hub-segmented`), `hub-datepicker` (single & range at any granularity from a year to a second, time picking, min/max down to the minute, keyboard nav, i18n), `hub-file-input` (drag & drop, clipboard paste, type/size limits, previews, optional upload progress).
+- **Fields** — `hub-input` (text/number/email/password/color/switch/checkbox/counter, with input-group addons & masks, projected in-field affixes, a built-in `clearable` button, the mixed `indeterminate` state on checkboxes and debounced typeahead `search`; the `file` format is **deprecated** → use `hub-file-input`), `hub-otp-input`, `hub-textarea` (+ `hubAutoresize`), `hub-slider` (single / dual thumb, gradient fill), `hub-segmented` (segmented control field — single & multiple selection, horizontal & vertical, with label + validation), `hub-select` (dropdown format, grouping, client-side search via `searchable` **and** server-side async typeahead via a `typeahead` Subject, tag creation with `addTag`, custom templates, `prepend` / `append` group addons and attached icons/buttons via `hubPrepend` / `hubAppend`; the `buttons` / `checkbox` / `radio` formats are **deprecated** → use `hub-segmented`), `hub-datepicker` (single & range at any granularity from a year to a second, time picking, min/max down to the minute, keyboard nav, i18n), `hub-file-input` (drag & drop, clipboard paste, type/size limits, previews, optional upload progress).
 - **Automatic error display** — bind a field and its control errors render below it; `hub-fieldset`, `form[hubForm]` and `hub-legend` surface group- and form-level (cross-field) errors the same way, with zero wiring.
 - **Containers** — `hub-fieldset` / `form[hubForm]` group fields and show their group errors; `hub-legend` renders an accessible legend.
 - **Configurable** — `provideHubForms({ … })` sets the invalid-feedback templates, datepicker locale/labels, file-input labels and more, app-wide or per instance.
@@ -179,6 +179,7 @@ Project a leading / trailing icon **inside** the field, emit a debounced term on
 ```
 
 - Project a `<hub-icon>` (or any element) into `hubInputPrefix` / `hubInputSuffix`; the field themes it with its `--hub-input-icon-*` tokens.
+- `[(indeterminate)]` puts a `checkbox` in the mixed state — the honest answer for a "select all" over a partially selected list. It reflects the native DOM property, so it is announced as mixed, and it is two-way: clicking a mixed checkbox picks a side, so the component clears it and tells you. The `switch` format ignores it.
 - `[clearable]` renders an internal ✕ button once the field holds a value — it resets the control and emits an empty `search` term (no manual suffix wiring). The glyph is the swappable `--hub-input-clear-icon` token.
 - The control reserves inline padding automatically so its text never sits under the affix.
 - Affixes use logical CSS properties, so `start`/`end` follow the writing direction and **flip automatically under `dir="rtl"`**.

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

@@ -1304,6 +1304,19 @@ class HubInputComponent extends HubFieldControl {
      * the template.
      */
     clearable = input(false, { ...(ngDevMode ? { debugName: "clearable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Mixed state of a `checkbox`: neither on nor off, the answer a "select all"
+     * gives while only some of its children are selected.
+     *
+     * It is two-way because the reader resolves it: clicking a mixed checkbox picks
+     * a side, so the model clears itself and the caller hears about it. The `switch`
+     * format ignores it — a switch is on or off, and ARIA gives it no third state.
+     */
+    indeterminate = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
+    /** Mixed state as the native checkbox should actually receive it. */
+    isIndeterminate = computed(() => this.indeterminate() && this.type() === this._inputFormats.Checkbox, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isIndeterminate" }] : /* istanbul ignore next */ []));
     /** 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 */ []));
@@ -1452,6 +1465,12 @@ class HubInputComponent extends HubFieldControl {
         let newValue;
         if (this.isCheckable()) {
             newValue = hasTarget ? !!event.target.checked : !!event;
+            // A click on a mixed checkbox is the reader picking a side, and the
+            // browser has already dropped the native mixed state. Keeping the input
+            // true here would fight it back on the next render.
+            if (this.indeterminate()) {
+                this.indeterminate.set(false);
+            }
         }
         else if (this.type() === this._inputFormats.Number || this.type() === this._inputFormats.Counter) {
             newValue = hasTarget
@@ -1638,15 +1657,15 @@ class HubInputComponent extends HubFieldControl {
         return value ? [value] : [];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: HubInputComponent, isStandalone: true, selector: "hub-input", inputs: { passwordRevealed: { classPropertyName: "passwordRevealed", publicName: "passwordRevealed", isSignal: true, isRequired: false, transformFunction: null }, passwordToggle: { classPropertyName: "passwordToggle", publicName: "passwordToggle", isSignal: true, isRequired: false, transformFunction: null }, hideOnBlur: { classPropertyName: "hideOnBlur", publicName: "hideOnBlur", isSignal: true, isRequired: false, transformFunction: null }, capsLockWarning: { classPropertyName: "capsLockWarning", publicName: "capsLockWarning", isSignal: true, isRequired: false, transformFunction: null }, passwordStrength: { classPropertyName: "passwordStrength", publicName: "passwordStrength", isSignal: true, isRequired: false, transformFunction: null }, 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 }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", 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: { passwordRevealed: "passwordRevealedChange", 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 }, { propertyName: "_prependTpl", first: true, predicate: HubPrependDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_appendTpl", first: true, predicate: HubAppendDirective, descendants: true, read: TemplateRef, 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--readonly]=\"readonly()\"\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[attr.min]=\"min() ?? null\"\n\t\t\t\t\t\t\t[attr.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()\">\n\t\t\t\t\t\t\t\t&times;\n\t\t\t\t\t\t\t</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\t[class.hub-input__group--has-prepend]=\"hasPrepend() || hasPrependTpl()\"\n\t\t\t\t\t\t[class.hub-input__group--has-append]=\"hasAppend() || hasAppendTpl()\"\n\t\t\t\t\t\t[class.hub-input__group--has-toggle]=\"showsPasswordToggle()\"\n\t\t\t\t\t\t(focusout)=\"handleGroupFocusOut($event)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t@if (_prependTpl(); as tpl) {\n\t\t\t\t\t\t\t<span class=\"hub-input__attached hub-input__attached--prepend\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t\t</span>\n\t\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(keydown)=\"updateCapsLock($event)\"\n\t\t\t\t\t\t\t(keyup)=\"updateCapsLock($event)\"\n\t\t\t\t\t\t\t[placeholder]=\"labelType() === _labelTypes.Floating ? placeholder() || ' ' : placeholder()\"\n\t\t\t\t\t\t\t[attr.min]=\"min() ?? null\"\n\t\t\t\t\t\t\t[attr.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\t[attr.autocomplete]=\"autocomplete() || null\"\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\t\t\t\t\t\t<!-- Attached content goes last: addons label the field, an action acts on it. -->\n\t\t\t\t\t\t@if (_appendTpl(); as tpl) {\n\t\t\t\t\t\t\t<span class=\"hub-input__attached hub-input__attached--append\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t@if (showsPasswordToggle()) {\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tclass=\"hub-input__password-toggle\"\n\t\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t\t[attr.aria-label]=\"\n\t\t\t\t\t\t\t\t\tpasswordRevealed() ? _passwordLabels.hidePasswordLabel : _passwordLabels.showPasswordLabel\n\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t[attr.aria-pressed]=\"passwordRevealed()\"\n\t\t\t\t\t\t\t\t(click)=\"togglePassword()\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tclass=\"hub-input__password-icon\"\n\t\t\t\t\t\t\t\t\t[class.hub-input__password-icon--visible]=\"passwordRevealed()\"\n\t\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t\t</button>\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\t\t\t\t}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (showsCapsLock()) {\n\t\t<div class=\"hub-field__form-text hub-input__capslock\" role=\"status\">{{ _passwordLabels.capsLockWarning }}</div>\n\t}\n\n\t@if (showsStrength()) {\n\t\t<div class=\"hub-input__strength\" [attr.data-level]=\"strengthScore()\">\n\t\t\t<div class=\"hub-input__strength-bar\" role=\"presentation\">\n\t\t\t\t@for (segment of _strengthSegments; track segment) {\n\t\t\t\t\t<span\n\t\t\t\t\t\tclass=\"hub-input__strength-segment\"\n\t\t\t\t\t\t[class.hub-input__strength-segment--active]=\"strengthScore() >= segment\"\n\t\t\t\t\t></span>\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t<span class=\"hub-input__strength-label\" aria-live=\"polite\">{{ strengthLabel() }}</span>\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\n\t\t\t\t\t\t\t\tclass=\"hub-field__feedback-text\"\n\t\t\t\t\t\t\t\t[innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"\n\t\t\t\t\t\t\t></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{flex:1 1 auto;position:relative}.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) + var(--hub-field-floating-inset));padding-bottom:var(--hub-input-padding-y)}.hub-input__group--floating .hub-input__label--floating{font-size:var(--hub-input-font-size);position:absolute;top:0;inset-inline-start:0;display:flex;align-items:center;height:100%;padding:0 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}[dir=rtl] .hub-input__group--floating .hub-input__label--floating{transform-origin:100% 0}.hub-input__group--floating .hub-input__label--floating{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(var(--hub-field-floating-scale)) translateY(calc(-1 * var(--hub-field-floating-travel)));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-inline-end:0;border-radius:var(--hub-input-border-radius) 0 0 var(--hub-input-border-radius)}.hub-input__counter-btn:last-child{border-inline-start: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-inline-end: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:var(--hub-input-password-toggle-width);padding:0;color:var(--hub-input-icon-color);background:var(--hub-input-group-addon-bg);border:var(--hub-input-border-width) solid var(--hub-input-group-addon-border-color);border-inline-start:0;border-start-end-radius:var(--hub-input-border-radius);border-end-end-radius:var(--hub-input-border-radius);border-start-start-radius:0;border-end-start-radius:0;cursor:pointer;transition:var(--hub-input-transition)}.hub-input__password-toggle:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-field--invalid.hub-input .hub-input__password-toggle{border-color:var(--hub-form-invalid-border-color)}.hub-field--valid.hub-input .hub-input__password-toggle{border-color:var(--hub-form-valid-border-color)}.hub-input__group--has-toggle>.hub-field__control{border-start-end-radius:0;border-end-end-radius:0}.hub-input__group--has-toggle>.hub-input__addon--append{border-start-end-radius:0;border-end-end-radius:0}.hub-input__group--has-toggle>.hub-input__clear,.hub-input__group--has-toggle>.hub-input__affix--suffix{inset-inline-end:calc(var(--hub-input-affix-inset) + var(--hub-input-password-toggle-width))}.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__capslock{color:var(--hub-input-capslock-color)}.hub-input__strength{display:flex;align-items:center;gap:var(--hub-ref-space-2, .5rem);margin-top:var(--hub-ref-space-1, .25rem)}.hub-input__strength[data-level=\"1\"]{--hub-input-strength-color: var(--hub-input-strength-1)}.hub-input__strength[data-level=\"2\"]{--hub-input-strength-color: var(--hub-input-strength-2)}.hub-input__strength[data-level=\"3\"]{--hub-input-strength-color: var(--hub-input-strength-3)}.hub-input__strength[data-level=\"4\"]{--hub-input-strength-color: var(--hub-input-strength-4)}.hub-input__strength-bar{display:flex;flex:1 1 auto;gap:var(--hub-input-strength-gap)}.hub-input__strength-segment{flex:1 1 0;height:var(--hub-input-strength-height);border-radius:calc(var(--hub-input-strength-height) / 2);background:var(--hub-input-strength-track)}.hub-input__strength-segment--active{background:var(--hub-input-strength-color, var(--hub-input-strength-1))}.hub-input__strength-label{font-size:var(--hub-ref-font-size-sm, .875rem);color:var(--hub-sys-text-muted, #6c757d)}.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%;inset-inline-start:.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:inset-inline-start .15s ease-in-out}.hub-input__check-input--switch:checked{background:var(--hub-switch-track-on)}.hub-input__check-input--switch:checked:after{inset-inline-start: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)}.hub-input__group{display:flex;align-items:stretch;min-width:0}.hub-input__group>.hub-input__control,.hub-input__group>.hub-field__control{flex:1 1 auto;min-width:0}.hub-input__addon{display:flex;align-items:center;flex:0 0 auto;padding:0 var(--hub-input-padding-x, var(--hub-input-padding-x));color:var(--hub-input-group-addon-color, var(--hub-input-group-addon-color));background:var(--hub-input-group-addon-bg, var(--hub-input-group-addon-bg));border:var(--hub-input-border-width, var(--hub-input-border-width)) solid var(--hub-input-group-addon-border-color, var(--hub-input-group-addon-border-color));border-radius:var(--hub-input-border-radius, var(--hub-input-border-radius));font-size:var(--hub-input-font-size, var(--hub-input-font-size));white-space:nowrap}.hub-input__addon--prepend{border-inline-end:0;border-start-end-radius:0;border-end-end-radius:0}.hub-input__addon--append{border-inline-start:0;border-start-start-radius:0;border-end-start-radius:0}.hub-input__attached.hub-input__attached{display:flex;align-items:stretch;flex:0 0 auto;gap:var(--hub-input-group-attached-gap, var(--hub-input-group-attached-gap));position:relative}.hub-input__attached.hub-input__attached>*{padding-block:0;padding-inline:var(--hub-input-padding-x, var(--hub-input-padding-x));height:auto;align-self:stretch;display:flex;align-items:center;justify-content:center;min-height:var(--hub-input-min-height, auto);border:var(--hub-input-group-attached-border-width, var(--hub-input-group-attached-border-width)) solid var(--hub-input-group-attached-border-color, var(--hub-input-group-attached-border-color));border-radius:var(--hub-input-border-radius, var(--hub-input-border-radius));margin-inline:calc(-1 * var(--hub-input-group-attached-border-width, var(--hub-input-group-attached-border-width))) 0;position:relative}.hub-input__attached.hub-input__attached>*:hover,.hub-input__attached.hub-input__attached>*:focus-visible{z-index:1}.hub-input__attached.hub-input__attached--prepend>*{border-start-end-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius));margin-inline:0 calc(-1 * var(--hub-input-group-attached-border-width, var(--hub-input-group-attached-border-width)))}.hub-input__attached.hub-input__attached--append>*{border-start-start-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-input__attached.hub-input__attached--prepend>*:not(:first-child){border-start-start-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-input__attached.hub-input__attached--append>*:not(:last-child){border-start-end-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-input__attached.hub-input__attached>hub-input,.hub-input__attached.hub-input__attached>hub-select,.hub-input__attached.hub-input__attached>hub-textarea,.hub-input__attached.hub-input__attached>hub-datepicker,.hub-input__attached.hub-input__attached>hub-timepicker{padding-inline:0;border:0;border-radius:0}.hub-input__attached.hub-input__attached--prepend>hub-input .hub-field__control,.hub-input__attached.hub-input__attached--prepend>hub-select .ng-select-container,.hub-input__attached.hub-input__attached--prepend>hub-textarea .hub-field__control,.hub-input__attached.hub-input__attached--prepend>hub-datepicker .hub-field__control,.hub-input__attached.hub-input__attached--prepend>hub-timepicker .hub-field__control{border-start-end-radius:0;border-end-end-radius:0}.hub-input__attached.hub-input__attached--prepend>hub-input:first-child .hub-field__control,.hub-input__attached.hub-input__attached--prepend>hub-textarea:first-child .hub-field__control,.hub-input__attached.hub-input__attached--prepend>hub-datepicker:first-child .hub-field__control,.hub-input__attached.hub-input__attached--prepend>hub-timepicker:first-child .hub-field__control{border-start-start-radius:var(--hub-input-border-radius);border-end-start-radius:var(--hub-input-border-radius)}.hub-input__attached.hub-input__attached--prepend>hub-select:first-child .ng-select-container{border-start-start-radius:var(--hub-select-border-radius);border-end-start-radius:var(--hub-select-border-radius)}.hub-input__attached.hub-input__attached--append>hub-input .hub-field__control,.hub-input__attached.hub-input__attached--append>hub-select .ng-select-container,.hub-input__attached.hub-input__attached--append>hub-textarea .hub-field__control,.hub-input__attached.hub-input__attached--append>hub-datepicker .hub-field__control,.hub-input__attached.hub-input__attached--append>hub-timepicker .hub-field__control{border-start-start-radius:0;border-end-start-radius:0}.hub-input__attached.hub-input__attached--append>hub-input:last-child .hub-field__control,.hub-input__attached.hub-input__attached--append>hub-textarea:last-child .hub-field__control,.hub-input__attached.hub-input__attached--append>hub-datepicker:last-child .hub-field__control,.hub-input__attached.hub-input__attached--append>hub-timepicker:last-child .hub-field__control{border-start-end-radius:var(--hub-input-border-radius);border-end-end-radius:var(--hub-input-border-radius)}.hub-input__attached.hub-input__attached--append>hub-select:last-child .ng-select-container{border-start-end-radius:var(--hub-select-border-radius);border-end-end-radius:var(--hub-select-border-radius)}:where(.hub-input__attached)>*:not(button):not(a):not(input):not(select):not(textarea):not([role=button]):not([role=link]):not([tabindex]){background:var(--hub-input-group-addon-bg, var(--hub-input-group-addon-bg));color:var(--hub-input-group-addon-color, var(--hub-input-group-addon-color))}:where(.hub-input__attached)>button,:where(.hub-input__attached)>a,:where(.hub-input__attached)>[role=button],:where(.hub-input__attached)>[role=link],:where(.hub-input__attached)>[tabindex]{background:var(--hub-input-group-action-bg, var(--hub-input-group-action-bg));color:var(--hub-input-group-action-color, var(--hub-input-group-action-color))}.hub-input__group--has-prepend .hub-input__control,.hub-input__group--has-prepend .hub-field__control,.hub-input__group--has-prepend .hub-input__control.ng-select .ng-select-container{border-start-start-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-input__group--has-append .hub-input__control,.hub-input__group--has-append .hub-field__control,.hub-input__group--has-append .hub-input__control.ng-select .ng-select-container{border-start-end-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-input__group>.hub-input__addon--prepend:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.hub-input__group>.hub-input__addon--append:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}\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.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.8", type: HubInputComponent, isStandalone: true, selector: "hub-input", inputs: { passwordRevealed: { classPropertyName: "passwordRevealed", publicName: "passwordRevealed", isSignal: true, isRequired: false, transformFunction: null }, passwordToggle: { classPropertyName: "passwordToggle", publicName: "passwordToggle", isSignal: true, isRequired: false, transformFunction: null }, hideOnBlur: { classPropertyName: "hideOnBlur", publicName: "hideOnBlur", isSignal: true, isRequired: false, transformFunction: null }, capsLockWarning: { classPropertyName: "capsLockWarning", publicName: "capsLockWarning", isSignal: true, isRequired: false, transformFunction: null }, passwordStrength: { classPropertyName: "passwordStrength", publicName: "passwordStrength", isSignal: true, isRequired: false, transformFunction: null }, 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 }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", 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 }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", 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: { passwordRevealed: "passwordRevealedChange", labelType: "labelTypeChange", placeholder: "placeholderChange", min: "minChange", max: "maxChange", indeterminate: "indeterminateChange", 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 }, { propertyName: "_prependTpl", first: true, predicate: HubPrependDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_appendTpl", first: true, predicate: HubAppendDirective, descendants: true, read: TemplateRef, 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--readonly]=\"readonly()\"\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[indeterminate]=\"isIndeterminate()\"\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[attr.min]=\"min() ?? null\"\n\t\t\t\t\t\t\t[attr.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()\">\n\t\t\t\t\t\t\t\t&times;\n\t\t\t\t\t\t\t</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\t[class.hub-input__group--has-prepend]=\"hasPrepend() || hasPrependTpl()\"\n\t\t\t\t\t\t[class.hub-input__group--has-append]=\"hasAppend() || hasAppendTpl()\"\n\t\t\t\t\t\t[class.hub-input__group--has-toggle]=\"showsPasswordToggle()\"\n\t\t\t\t\t\t(focusout)=\"handleGroupFocusOut($event)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t@if (_prependTpl(); as tpl) {\n\t\t\t\t\t\t\t<span class=\"hub-input__attached hub-input__attached--prepend\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t\t</span>\n\t\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(keydown)=\"updateCapsLock($event)\"\n\t\t\t\t\t\t\t(keyup)=\"updateCapsLock($event)\"\n\t\t\t\t\t\t\t[placeholder]=\"labelType() === _labelTypes.Floating ? placeholder() || ' ' : placeholder()\"\n\t\t\t\t\t\t\t[attr.min]=\"min() ?? null\"\n\t\t\t\t\t\t\t[attr.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\t[attr.autocomplete]=\"autocomplete() || null\"\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\t\t\t\t\t\t<!-- Attached content goes last: addons label the field, an action acts on it. -->\n\t\t\t\t\t\t@if (_appendTpl(); as tpl) {\n\t\t\t\t\t\t\t<span class=\"hub-input__attached hub-input__attached--append\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t@if (showsPasswordToggle()) {\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tclass=\"hub-input__password-toggle\"\n\t\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t\t[attr.aria-label]=\"\n\t\t\t\t\t\t\t\t\tpasswordRevealed() ? _passwordLabels.hidePasswordLabel : _passwordLabels.showPasswordLabel\n\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t[attr.aria-pressed]=\"passwordRevealed()\"\n\t\t\t\t\t\t\t\t(click)=\"togglePassword()\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tclass=\"hub-input__password-icon\"\n\t\t\t\t\t\t\t\t\t[class.hub-input__password-icon--visible]=\"passwordRevealed()\"\n\t\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t\t</button>\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\t\t\t\t}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (showsCapsLock()) {\n\t\t<div class=\"hub-field__form-text hub-input__capslock\" role=\"status\">{{ _passwordLabels.capsLockWarning }}</div>\n\t}\n\n\t@if (showsStrength()) {\n\t\t<div class=\"hub-input__strength\" [attr.data-level]=\"strengthScore()\">\n\t\t\t<div class=\"hub-input__strength-bar\" role=\"presentation\">\n\t\t\t\t@for (segment of _strengthSegments; track segment) {\n\t\t\t\t\t<span\n\t\t\t\t\t\tclass=\"hub-input__strength-segment\"\n\t\t\t\t\t\t[class.hub-input__strength-segment--active]=\"strengthScore() >= segment\"\n\t\t\t\t\t></span>\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t<span class=\"hub-input__strength-label\" aria-live=\"polite\">{{ strengthLabel() }}</span>\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\n\t\t\t\t\t\t\t\tclass=\"hub-field__feedback-text\"\n\t\t\t\t\t\t\t\t[innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"\n\t\t\t\t\t\t\t></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{flex:1 1 auto;position:relative}.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) + var(--hub-field-floating-inset));padding-bottom:var(--hub-input-padding-y)}.hub-input__group--floating .hub-input__label--floating{font-size:var(--hub-input-font-size);position:absolute;top:0;inset-inline-start:0;display:flex;align-items:center;height:100%;padding:0 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}[dir=rtl] .hub-input__group--floating .hub-input__label--floating{transform-origin:100% 0}.hub-input__group--floating .hub-input__label--floating{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(var(--hub-field-floating-scale)) translateY(calc(-1 * var(--hub-field-floating-travel)));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-inline-end:0;border-radius:var(--hub-input-border-radius) 0 0 var(--hub-input-border-radius)}.hub-input__counter-btn:last-child{border-inline-start: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-inline-end: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:var(--hub-input-password-toggle-width);padding:0;color:var(--hub-input-icon-color);background:var(--hub-input-group-addon-bg);border:var(--hub-input-border-width) solid var(--hub-input-group-addon-border-color);border-inline-start:0;border-start-end-radius:var(--hub-input-border-radius);border-end-end-radius:var(--hub-input-border-radius);border-start-start-radius:0;border-end-start-radius:0;cursor:pointer;transition:var(--hub-input-transition)}.hub-input__password-toggle:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-field--invalid.hub-input .hub-input__password-toggle{border-color:var(--hub-form-invalid-border-color)}.hub-field--valid.hub-input .hub-input__password-toggle{border-color:var(--hub-form-valid-border-color)}.hub-input__group--has-toggle>.hub-field__control{border-start-end-radius:0;border-end-end-radius:0}.hub-input__group--has-toggle>.hub-input__addon--append{border-start-end-radius:0;border-end-end-radius:0}.hub-input__group--has-toggle>.hub-input__clear,.hub-input__group--has-toggle>.hub-input__affix--suffix{inset-inline-end:calc(var(--hub-input-affix-inset) + var(--hub-input-password-toggle-width))}.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__capslock{color:var(--hub-input-capslock-color)}.hub-input__strength{display:flex;align-items:center;gap:var(--hub-ref-space-2, .5rem);margin-top:var(--hub-ref-space-1, .25rem)}.hub-input__strength[data-level=\"1\"]{--hub-input-strength-color: var(--hub-input-strength-1)}.hub-input__strength[data-level=\"2\"]{--hub-input-strength-color: var(--hub-input-strength-2)}.hub-input__strength[data-level=\"3\"]{--hub-input-strength-color: var(--hub-input-strength-3)}.hub-input__strength[data-level=\"4\"]{--hub-input-strength-color: var(--hub-input-strength-4)}.hub-input__strength-bar{display:flex;flex:1 1 auto;gap:var(--hub-input-strength-gap)}.hub-input__strength-segment{flex:1 1 0;height:var(--hub-input-strength-height);border-radius:calc(var(--hub-input-strength-height) / 2);background:var(--hub-input-strength-track)}.hub-input__strength-segment--active{background:var(--hub-input-strength-color, var(--hub-input-strength-1))}.hub-input__strength-label{font-size:var(--hub-ref-font-size-sm, .875rem);color:var(--hub-sys-text-muted, #6c757d)}.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:indeterminate{background:var(--hub-check-input-indeterminate-bg) var(--hub-check-input-indeterminate-icon) center/.85rem no-repeat;border-color:var(--hub-check-input-indeterminate-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%;inset-inline-start:.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:inset-inline-start .15s ease-in-out}.hub-input__check-input--switch:checked{background:var(--hub-switch-track-on)}.hub-input__check-input--switch:checked:after{inset-inline-start: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)}.hub-input__group{display:flex;align-items:stretch;min-width:0}.hub-input__group>.hub-input__control,.hub-input__group>.hub-field__control{flex:1 1 auto;min-width:0}.hub-input__addon{display:flex;align-items:center;flex:0 0 auto;padding:0 var(--hub-input-padding-x, var(--hub-input-padding-x));color:var(--hub-input-group-addon-color, var(--hub-input-group-addon-color));background:var(--hub-input-group-addon-bg, var(--hub-input-group-addon-bg));border:var(--hub-input-border-width, var(--hub-input-border-width)) solid var(--hub-input-group-addon-border-color, var(--hub-input-group-addon-border-color));border-radius:var(--hub-input-border-radius, var(--hub-input-border-radius));font-size:var(--hub-input-font-size, var(--hub-input-font-size));white-space:nowrap}.hub-input__addon--prepend{border-inline-end:0;border-start-end-radius:0;border-end-end-radius:0}.hub-input__addon--append{border-inline-start:0;border-start-start-radius:0;border-end-start-radius:0}.hub-input__attached.hub-input__attached{display:flex;align-items:stretch;flex:0 0 auto;gap:var(--hub-input-group-attached-gap, var(--hub-input-group-attached-gap));position:relative}.hub-input__attached.hub-input__attached>*{padding-block:0;padding-inline:var(--hub-input-padding-x, var(--hub-input-padding-x));height:auto;align-self:stretch;display:flex;align-items:center;justify-content:center;min-height:var(--hub-input-min-height, auto);border:var(--hub-input-group-attached-border-width, var(--hub-input-group-attached-border-width)) solid var(--hub-input-group-attached-border-color, var(--hub-input-group-attached-border-color));border-radius:var(--hub-input-border-radius, var(--hub-input-border-radius));margin-inline:calc(-1 * var(--hub-input-group-attached-border-width, var(--hub-input-group-attached-border-width))) 0;position:relative}.hub-input__attached.hub-input__attached>*:hover,.hub-input__attached.hub-input__attached>*:focus-visible{z-index:1}.hub-input__attached.hub-input__attached--prepend>*{border-start-end-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius));margin-inline:0 calc(-1 * var(--hub-input-group-attached-border-width, var(--hub-input-group-attached-border-width)))}.hub-input__attached.hub-input__attached--append>*{border-start-start-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-input__attached.hub-input__attached--prepend>*:not(:first-child){border-start-start-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-input__attached.hub-input__attached--append>*:not(:last-child){border-start-end-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-input__attached.hub-input__attached>hub-input,.hub-input__attached.hub-input__attached>hub-select,.hub-input__attached.hub-input__attached>hub-textarea,.hub-input__attached.hub-input__attached>hub-datepicker,.hub-input__attached.hub-input__attached>hub-timepicker{padding-inline:0;border:0;border-radius:0}.hub-input__attached.hub-input__attached--prepend>hub-input .hub-field__control,.hub-input__attached.hub-input__attached--prepend>hub-select .ng-select-container,.hub-input__attached.hub-input__attached--prepend>hub-textarea .hub-field__control,.hub-input__attached.hub-input__attached--prepend>hub-datepicker .hub-field__control,.hub-input__attached.hub-input__attached--prepend>hub-timepicker .hub-field__control{border-start-end-radius:0;border-end-end-radius:0}.hub-input__attached.hub-input__attached--prepend>hub-input:first-child .hub-field__control,.hub-input__attached.hub-input__attached--prepend>hub-textarea:first-child .hub-field__control,.hub-input__attached.hub-input__attached--prepend>hub-datepicker:first-child .hub-field__control,.hub-input__attached.hub-input__attached--prepend>hub-timepicker:first-child .hub-field__control{border-start-start-radius:var(--hub-input-border-radius);border-end-start-radius:var(--hub-input-border-radius)}.hub-input__attached.hub-input__attached--prepend>hub-select:first-child .ng-select-container{border-start-start-radius:var(--hub-select-border-radius);border-end-start-radius:var(--hub-select-border-radius)}.hub-input__attached.hub-input__attached--append>hub-input .hub-field__control,.hub-input__attached.hub-input__attached--append>hub-select .ng-select-container,.hub-input__attached.hub-input__attached--append>hub-textarea .hub-field__control,.hub-input__attached.hub-input__attached--append>hub-datepicker .hub-field__control,.hub-input__attached.hub-input__attached--append>hub-timepicker .hub-field__control{border-start-start-radius:0;border-end-start-radius:0}.hub-input__attached.hub-input__attached--append>hub-input:last-child .hub-field__control,.hub-input__attached.hub-input__attached--append>hub-textarea:last-child .hub-field__control,.hub-input__attached.hub-input__attached--append>hub-datepicker:last-child .hub-field__control,.hub-input__attached.hub-input__attached--append>hub-timepicker:last-child .hub-field__control{border-start-end-radius:var(--hub-input-border-radius);border-end-end-radius:var(--hub-input-border-radius)}.hub-input__attached.hub-input__attached--append>hub-select:last-child .ng-select-container{border-start-end-radius:var(--hub-select-border-radius);border-end-end-radius:var(--hub-select-border-radius)}:where(.hub-input__attached)>*:not(button):not(a):not(input):not(select):not(textarea):not([role=button]):not([role=link]):not([tabindex]){background:var(--hub-input-group-addon-bg, var(--hub-input-group-addon-bg));color:var(--hub-input-group-addon-color, var(--hub-input-group-addon-color))}:where(.hub-input__attached)>button,:where(.hub-input__attached)>a,:where(.hub-input__attached)>[role=button],:where(.hub-input__attached)>[role=link],:where(.hub-input__attached)>[tabindex]{background:var(--hub-input-group-action-bg, var(--hub-input-group-action-bg));color:var(--hub-input-group-action-color, var(--hub-input-group-action-color))}.hub-input__group--has-prepend .hub-input__control,.hub-input__group--has-prepend .hub-field__control,.hub-input__group--has-prepend .hub-input__control.ng-select .ng-select-container{border-start-start-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-input__group--has-append .hub-input__control,.hub-input__group--has-append .hub-field__control,.hub-input__group--has-append .hub-input__control.ng-select .ng-select-container{border-start-end-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-input__group>.hub-input__addon--prepend:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.hub-input__group>.hub-input__addon--append:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}\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.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.8", 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--readonly]=\"readonly()\"\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[attr.min]=\"min() ?? null\"\n\t\t\t\t\t\t\t[attr.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()\">\n\t\t\t\t\t\t\t\t&times;\n\t\t\t\t\t\t\t</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\t[class.hub-input__group--has-prepend]=\"hasPrepend() || hasPrependTpl()\"\n\t\t\t\t\t\t[class.hub-input__group--has-append]=\"hasAppend() || hasAppendTpl()\"\n\t\t\t\t\t\t[class.hub-input__group--has-toggle]=\"showsPasswordToggle()\"\n\t\t\t\t\t\t(focusout)=\"handleGroupFocusOut($event)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t@if (_prependTpl(); as tpl) {\n\t\t\t\t\t\t\t<span class=\"hub-input__attached hub-input__attached--prepend\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t\t</span>\n\t\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(keydown)=\"updateCapsLock($event)\"\n\t\t\t\t\t\t\t(keyup)=\"updateCapsLock($event)\"\n\t\t\t\t\t\t\t[placeholder]=\"labelType() === _labelTypes.Floating ? placeholder() || ' ' : placeholder()\"\n\t\t\t\t\t\t\t[attr.min]=\"min() ?? null\"\n\t\t\t\t\t\t\t[attr.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\t[attr.autocomplete]=\"autocomplete() || null\"\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\t\t\t\t\t\t<!-- Attached content goes last: addons label the field, an action acts on it. -->\n\t\t\t\t\t\t@if (_appendTpl(); as tpl) {\n\t\t\t\t\t\t\t<span class=\"hub-input__attached hub-input__attached--append\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t@if (showsPasswordToggle()) {\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tclass=\"hub-input__password-toggle\"\n\t\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t\t[attr.aria-label]=\"\n\t\t\t\t\t\t\t\t\tpasswordRevealed() ? _passwordLabels.hidePasswordLabel : _passwordLabels.showPasswordLabel\n\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t[attr.aria-pressed]=\"passwordRevealed()\"\n\t\t\t\t\t\t\t\t(click)=\"togglePassword()\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tclass=\"hub-input__password-icon\"\n\t\t\t\t\t\t\t\t\t[class.hub-input__password-icon--visible]=\"passwordRevealed()\"\n\t\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t\t</button>\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\t\t\t\t}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (showsCapsLock()) {\n\t\t<div class=\"hub-field__form-text hub-input__capslock\" role=\"status\">{{ _passwordLabels.capsLockWarning }}</div>\n\t}\n\n\t@if (showsStrength()) {\n\t\t<div class=\"hub-input__strength\" [attr.data-level]=\"strengthScore()\">\n\t\t\t<div class=\"hub-input__strength-bar\" role=\"presentation\">\n\t\t\t\t@for (segment of _strengthSegments; track segment) {\n\t\t\t\t\t<span\n\t\t\t\t\t\tclass=\"hub-input__strength-segment\"\n\t\t\t\t\t\t[class.hub-input__strength-segment--active]=\"strengthScore() >= segment\"\n\t\t\t\t\t></span>\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t<span class=\"hub-input__strength-label\" aria-live=\"polite\">{{ strengthLabel() }}</span>\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\n\t\t\t\t\t\t\t\tclass=\"hub-field__feedback-text\"\n\t\t\t\t\t\t\t\t[innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"\n\t\t\t\t\t\t\t></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{flex:1 1 auto;position:relative}.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) + var(--hub-field-floating-inset));padding-bottom:var(--hub-input-padding-y)}.hub-input__group--floating .hub-input__label--floating{font-size:var(--hub-input-font-size);position:absolute;top:0;inset-inline-start:0;display:flex;align-items:center;height:100%;padding:0 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}[dir=rtl] .hub-input__group--floating .hub-input__label--floating{transform-origin:100% 0}.hub-input__group--floating .hub-input__label--floating{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(var(--hub-field-floating-scale)) translateY(calc(-1 * var(--hub-field-floating-travel)));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-inline-end:0;border-radius:var(--hub-input-border-radius) 0 0 var(--hub-input-border-radius)}.hub-input__counter-btn:last-child{border-inline-start: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-inline-end: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:var(--hub-input-password-toggle-width);padding:0;color:var(--hub-input-icon-color);background:var(--hub-input-group-addon-bg);border:var(--hub-input-border-width) solid var(--hub-input-group-addon-border-color);border-inline-start:0;border-start-end-radius:var(--hub-input-border-radius);border-end-end-radius:var(--hub-input-border-radius);border-start-start-radius:0;border-end-start-radius:0;cursor:pointer;transition:var(--hub-input-transition)}.hub-input__password-toggle:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-field--invalid.hub-input .hub-input__password-toggle{border-color:var(--hub-form-invalid-border-color)}.hub-field--valid.hub-input .hub-input__password-toggle{border-color:var(--hub-form-valid-border-color)}.hub-input__group--has-toggle>.hub-field__control{border-start-end-radius:0;border-end-end-radius:0}.hub-input__group--has-toggle>.hub-input__addon--append{border-start-end-radius:0;border-end-end-radius:0}.hub-input__group--has-toggle>.hub-input__clear,.hub-input__group--has-toggle>.hub-input__affix--suffix{inset-inline-end:calc(var(--hub-input-affix-inset) + var(--hub-input-password-toggle-width))}.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__capslock{color:var(--hub-input-capslock-color)}.hub-input__strength{display:flex;align-items:center;gap:var(--hub-ref-space-2, .5rem);margin-top:var(--hub-ref-space-1, .25rem)}.hub-input__strength[data-level=\"1\"]{--hub-input-strength-color: var(--hub-input-strength-1)}.hub-input__strength[data-level=\"2\"]{--hub-input-strength-color: var(--hub-input-strength-2)}.hub-input__strength[data-level=\"3\"]{--hub-input-strength-color: var(--hub-input-strength-3)}.hub-input__strength[data-level=\"4\"]{--hub-input-strength-color: var(--hub-input-strength-4)}.hub-input__strength-bar{display:flex;flex:1 1 auto;gap:var(--hub-input-strength-gap)}.hub-input__strength-segment{flex:1 1 0;height:var(--hub-input-strength-height);border-radius:calc(var(--hub-input-strength-height) / 2);background:var(--hub-input-strength-track)}.hub-input__strength-segment--active{background:var(--hub-input-strength-color, var(--hub-input-strength-1))}.hub-input__strength-label{font-size:var(--hub-ref-font-size-sm, .875rem);color:var(--hub-sys-text-muted, #6c757d)}.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%;inset-inline-start:.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:inset-inline-start .15s ease-in-out}.hub-input__check-input--switch:checked{background:var(--hub-switch-track-on)}.hub-input__check-input--switch:checked:after{inset-inline-start: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)}.hub-input__group{display:flex;align-items:stretch;min-width:0}.hub-input__group>.hub-input__control,.hub-input__group>.hub-field__control{flex:1 1 auto;min-width:0}.hub-input__addon{display:flex;align-items:center;flex:0 0 auto;padding:0 var(--hub-input-padding-x, var(--hub-input-padding-x));color:var(--hub-input-group-addon-color, var(--hub-input-group-addon-color));background:var(--hub-input-group-addon-bg, var(--hub-input-group-addon-bg));border:var(--hub-input-border-width, var(--hub-input-border-width)) solid var(--hub-input-group-addon-border-color, var(--hub-input-group-addon-border-color));border-radius:var(--hub-input-border-radius, var(--hub-input-border-radius));font-size:var(--hub-input-font-size, var(--hub-input-font-size));white-space:nowrap}.hub-input__addon--prepend{border-inline-end:0;border-start-end-radius:0;border-end-end-radius:0}.hub-input__addon--append{border-inline-start:0;border-start-start-radius:0;border-end-start-radius:0}.hub-input__attached.hub-input__attached{display:flex;align-items:stretch;flex:0 0 auto;gap:var(--hub-input-group-attached-gap, var(--hub-input-group-attached-gap));position:relative}.hub-input__attached.hub-input__attached>*{padding-block:0;padding-inline:var(--hub-input-padding-x, var(--hub-input-padding-x));height:auto;align-self:stretch;display:flex;align-items:center;justify-content:center;min-height:var(--hub-input-min-height, auto);border:var(--hub-input-group-attached-border-width, var(--hub-input-group-attached-border-width)) solid var(--hub-input-group-attached-border-color, var(--hub-input-group-attached-border-color));border-radius:var(--hub-input-border-radius, var(--hub-input-border-radius));margin-inline:calc(-1 * var(--hub-input-group-attached-border-width, var(--hub-input-group-attached-border-width))) 0;position:relative}.hub-input__attached.hub-input__attached>*:hover,.hub-input__attached.hub-input__attached>*:focus-visible{z-index:1}.hub-input__attached.hub-input__attached--prepend>*{border-start-end-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius));margin-inline:0 calc(-1 * var(--hub-input-group-attached-border-width, var(--hub-input-group-attached-border-width)))}.hub-input__attached.hub-input__attached--append>*{border-start-start-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-input__attached.hub-input__attached--prepend>*:not(:first-child){border-start-start-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-input__attached.hub-input__attached--append>*:not(:last-child){border-start-end-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-input__attached.hub-input__attached>hub-input,.hub-input__attached.hub-input__attached>hub-select,.hub-input__attached.hub-input__attached>hub-textarea,.hub-input__attached.hub-input__attached>hub-datepicker,.hub-input__attached.hub-input__attached>hub-timepicker{padding-inline:0;border:0;border-radius:0}.hub-input__attached.hub-input__attached--prepend>hub-input .hub-field__control,.hub-input__attached.hub-input__attached--prepend>hub-select .ng-select-container,.hub-input__attached.hub-input__attached--prepend>hub-textarea .hub-field__control,.hub-input__attached.hub-input__attached--prepend>hub-datepicker .hub-field__control,.hub-input__attached.hub-input__attached--prepend>hub-timepicker .hub-field__control{border-start-end-radius:0;border-end-end-radius:0}.hub-input__attached.hub-input__attached--prepend>hub-input:first-child .hub-field__control,.hub-input__attached.hub-input__attached--prepend>hub-textarea:first-child .hub-field__control,.hub-input__attached.hub-input__attached--prepend>hub-datepicker:first-child .hub-field__control,.hub-input__attached.hub-input__attached--prepend>hub-timepicker:first-child .hub-field__control{border-start-start-radius:var(--hub-input-border-radius);border-end-start-radius:var(--hub-input-border-radius)}.hub-input__attached.hub-input__attached--prepend>hub-select:first-child .ng-select-container{border-start-start-radius:var(--hub-select-border-radius);border-end-start-radius:var(--hub-select-border-radius)}.hub-input__attached.hub-input__attached--append>hub-input .hub-field__control,.hub-input__attached.hub-input__attached--append>hub-select .ng-select-container,.hub-input__attached.hub-input__attached--append>hub-textarea .hub-field__control,.hub-input__attached.hub-input__attached--append>hub-datepicker .hub-field__control,.hub-input__attached.hub-input__attached--append>hub-timepicker .hub-field__control{border-start-start-radius:0;border-end-start-radius:0}.hub-input__attached.hub-input__attached--append>hub-input:last-child .hub-field__control,.hub-input__attached.hub-input__attached--append>hub-textarea:last-child .hub-field__control,.hub-input__attached.hub-input__attached--append>hub-datepicker:last-child .hub-field__control,.hub-input__attached.hub-input__attached--append>hub-timepicker:last-child .hub-field__control{border-start-end-radius:var(--hub-input-border-radius);border-end-end-radius:var(--hub-input-border-radius)}.hub-input__attached.hub-input__attached--append>hub-select:last-child .ng-select-container{border-start-end-radius:var(--hub-select-border-radius);border-end-end-radius:var(--hub-select-border-radius)}:where(.hub-input__attached)>*:not(button):not(a):not(input):not(select):not(textarea):not([role=button]):not([role=link]):not([tabindex]){background:var(--hub-input-group-addon-bg, var(--hub-input-group-addon-bg));color:var(--hub-input-group-addon-color, var(--hub-input-group-addon-color))}:where(.hub-input__attached)>button,:where(.hub-input__attached)>a,:where(.hub-input__attached)>[role=button],:where(.hub-input__attached)>[role=link],:where(.hub-input__attached)>[tabindex]{background:var(--hub-input-group-action-bg, var(--hub-input-group-action-bg));color:var(--hub-input-group-action-color, var(--hub-input-group-action-color))}.hub-input__group--has-prepend .hub-input__control,.hub-input__group--has-prepend .hub-field__control,.hub-input__group--has-prepend .hub-input__control.ng-select .ng-select-container{border-start-start-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-input__group--has-append .hub-input__control,.hub-input__group--has-append .hub-field__control,.hub-input__group--has-append .hub-input__control.ng-select .ng-select-container{border-start-end-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-input__group>.hub-input__addon--prepend:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.hub-input__group>.hub-input__addon--append:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}\n"] }]
-        }], propDecorators: { passwordRevealed: [{ type: i0.Input, args: [{ isSignal: true, alias: "passwordRevealed", required: false }] }, { type: i0.Output, args: ["passwordRevealedChange"] }], passwordToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "passwordToggle", required: false }] }], hideOnBlur: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideOnBlur", required: false }] }], capsLockWarning: [{ type: i0.Input, args: [{ isSignal: true, alias: "capsLockWarning", required: false }] }], passwordStrength: [{ type: i0.Input, args: [{ isSignal: true, alias: "passwordStrength", required: false }] }], 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"] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], 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 }] }], _prependTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubPrependDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _appendTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubAppendDirective), { ...{ read: TemplateRef }, 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 }] }] } });
+                    }, 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--readonly]=\"readonly()\"\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[indeterminate]=\"isIndeterminate()\"\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[attr.min]=\"min() ?? null\"\n\t\t\t\t\t\t\t[attr.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()\">\n\t\t\t\t\t\t\t\t&times;\n\t\t\t\t\t\t\t</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\t[class.hub-input__group--has-prepend]=\"hasPrepend() || hasPrependTpl()\"\n\t\t\t\t\t\t[class.hub-input__group--has-append]=\"hasAppend() || hasAppendTpl()\"\n\t\t\t\t\t\t[class.hub-input__group--has-toggle]=\"showsPasswordToggle()\"\n\t\t\t\t\t\t(focusout)=\"handleGroupFocusOut($event)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t@if (_prependTpl(); as tpl) {\n\t\t\t\t\t\t\t<span class=\"hub-input__attached hub-input__attached--prepend\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t\t</span>\n\t\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(keydown)=\"updateCapsLock($event)\"\n\t\t\t\t\t\t\t(keyup)=\"updateCapsLock($event)\"\n\t\t\t\t\t\t\t[placeholder]=\"labelType() === _labelTypes.Floating ? placeholder() || ' ' : placeholder()\"\n\t\t\t\t\t\t\t[attr.min]=\"min() ?? null\"\n\t\t\t\t\t\t\t[attr.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\t[attr.autocomplete]=\"autocomplete() || null\"\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\t\t\t\t\t\t<!-- Attached content goes last: addons label the field, an action acts on it. -->\n\t\t\t\t\t\t@if (_appendTpl(); as tpl) {\n\t\t\t\t\t\t\t<span class=\"hub-input__attached hub-input__attached--append\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t@if (showsPasswordToggle()) {\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tclass=\"hub-input__password-toggle\"\n\t\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t\t[attr.aria-label]=\"\n\t\t\t\t\t\t\t\t\tpasswordRevealed() ? _passwordLabels.hidePasswordLabel : _passwordLabels.showPasswordLabel\n\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t[attr.aria-pressed]=\"passwordRevealed()\"\n\t\t\t\t\t\t\t\t(click)=\"togglePassword()\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tclass=\"hub-input__password-icon\"\n\t\t\t\t\t\t\t\t\t[class.hub-input__password-icon--visible]=\"passwordRevealed()\"\n\t\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t\t</button>\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\t\t\t\t}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (showsCapsLock()) {\n\t\t<div class=\"hub-field__form-text hub-input__capslock\" role=\"status\">{{ _passwordLabels.capsLockWarning }}</div>\n\t}\n\n\t@if (showsStrength()) {\n\t\t<div class=\"hub-input__strength\" [attr.data-level]=\"strengthScore()\">\n\t\t\t<div class=\"hub-input__strength-bar\" role=\"presentation\">\n\t\t\t\t@for (segment of _strengthSegments; track segment) {\n\t\t\t\t\t<span\n\t\t\t\t\t\tclass=\"hub-input__strength-segment\"\n\t\t\t\t\t\t[class.hub-input__strength-segment--active]=\"strengthScore() >= segment\"\n\t\t\t\t\t></span>\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t<span class=\"hub-input__strength-label\" aria-live=\"polite\">{{ strengthLabel() }}</span>\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\n\t\t\t\t\t\t\t\tclass=\"hub-field__feedback-text\"\n\t\t\t\t\t\t\t\t[innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"\n\t\t\t\t\t\t\t></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{flex:1 1 auto;position:relative}.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) + var(--hub-field-floating-inset));padding-bottom:var(--hub-input-padding-y)}.hub-input__group--floating .hub-input__label--floating{font-size:var(--hub-input-font-size);position:absolute;top:0;inset-inline-start:0;display:flex;align-items:center;height:100%;padding:0 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}[dir=rtl] .hub-input__group--floating .hub-input__label--floating{transform-origin:100% 0}.hub-input__group--floating .hub-input__label--floating{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(var(--hub-field-floating-scale)) translateY(calc(-1 * var(--hub-field-floating-travel)));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-inline-end:0;border-radius:var(--hub-input-border-radius) 0 0 var(--hub-input-border-radius)}.hub-input__counter-btn:last-child{border-inline-start: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-inline-end: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:var(--hub-input-password-toggle-width);padding:0;color:var(--hub-input-icon-color);background:var(--hub-input-group-addon-bg);border:var(--hub-input-border-width) solid var(--hub-input-group-addon-border-color);border-inline-start:0;border-start-end-radius:var(--hub-input-border-radius);border-end-end-radius:var(--hub-input-border-radius);border-start-start-radius:0;border-end-start-radius:0;cursor:pointer;transition:var(--hub-input-transition)}.hub-input__password-toggle:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-field--invalid.hub-input .hub-input__password-toggle{border-color:var(--hub-form-invalid-border-color)}.hub-field--valid.hub-input .hub-input__password-toggle{border-color:var(--hub-form-valid-border-color)}.hub-input__group--has-toggle>.hub-field__control{border-start-end-radius:0;border-end-end-radius:0}.hub-input__group--has-toggle>.hub-input__addon--append{border-start-end-radius:0;border-end-end-radius:0}.hub-input__group--has-toggle>.hub-input__clear,.hub-input__group--has-toggle>.hub-input__affix--suffix{inset-inline-end:calc(var(--hub-input-affix-inset) + var(--hub-input-password-toggle-width))}.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__capslock{color:var(--hub-input-capslock-color)}.hub-input__strength{display:flex;align-items:center;gap:var(--hub-ref-space-2, .5rem);margin-top:var(--hub-ref-space-1, .25rem)}.hub-input__strength[data-level=\"1\"]{--hub-input-strength-color: var(--hub-input-strength-1)}.hub-input__strength[data-level=\"2\"]{--hub-input-strength-color: var(--hub-input-strength-2)}.hub-input__strength[data-level=\"3\"]{--hub-input-strength-color: var(--hub-input-strength-3)}.hub-input__strength[data-level=\"4\"]{--hub-input-strength-color: var(--hub-input-strength-4)}.hub-input__strength-bar{display:flex;flex:1 1 auto;gap:var(--hub-input-strength-gap)}.hub-input__strength-segment{flex:1 1 0;height:var(--hub-input-strength-height);border-radius:calc(var(--hub-input-strength-height) / 2);background:var(--hub-input-strength-track)}.hub-input__strength-segment--active{background:var(--hub-input-strength-color, var(--hub-input-strength-1))}.hub-input__strength-label{font-size:var(--hub-ref-font-size-sm, .875rem);color:var(--hub-sys-text-muted, #6c757d)}.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:indeterminate{background:var(--hub-check-input-indeterminate-bg) var(--hub-check-input-indeterminate-icon) center/.85rem no-repeat;border-color:var(--hub-check-input-indeterminate-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%;inset-inline-start:.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:inset-inline-start .15s ease-in-out}.hub-input__check-input--switch:checked{background:var(--hub-switch-track-on)}.hub-input__check-input--switch:checked:after{inset-inline-start: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)}.hub-input__group{display:flex;align-items:stretch;min-width:0}.hub-input__group>.hub-input__control,.hub-input__group>.hub-field__control{flex:1 1 auto;min-width:0}.hub-input__addon{display:flex;align-items:center;flex:0 0 auto;padding:0 var(--hub-input-padding-x, var(--hub-input-padding-x));color:var(--hub-input-group-addon-color, var(--hub-input-group-addon-color));background:var(--hub-input-group-addon-bg, var(--hub-input-group-addon-bg));border:var(--hub-input-border-width, var(--hub-input-border-width)) solid var(--hub-input-group-addon-border-color, var(--hub-input-group-addon-border-color));border-radius:var(--hub-input-border-radius, var(--hub-input-border-radius));font-size:var(--hub-input-font-size, var(--hub-input-font-size));white-space:nowrap}.hub-input__addon--prepend{border-inline-end:0;border-start-end-radius:0;border-end-end-radius:0}.hub-input__addon--append{border-inline-start:0;border-start-start-radius:0;border-end-start-radius:0}.hub-input__attached.hub-input__attached{display:flex;align-items:stretch;flex:0 0 auto;gap:var(--hub-input-group-attached-gap, var(--hub-input-group-attached-gap));position:relative}.hub-input__attached.hub-input__attached>*{padding-block:0;padding-inline:var(--hub-input-padding-x, var(--hub-input-padding-x));height:auto;align-self:stretch;display:flex;align-items:center;justify-content:center;min-height:var(--hub-input-min-height, auto);border:var(--hub-input-group-attached-border-width, var(--hub-input-group-attached-border-width)) solid var(--hub-input-group-attached-border-color, var(--hub-input-group-attached-border-color));border-radius:var(--hub-input-border-radius, var(--hub-input-border-radius));margin-inline:calc(-1 * var(--hub-input-group-attached-border-width, var(--hub-input-group-attached-border-width))) 0;position:relative}.hub-input__attached.hub-input__attached>*:hover,.hub-input__attached.hub-input__attached>*:focus-visible{z-index:1}.hub-input__attached.hub-input__attached--prepend>*{border-start-end-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius));margin-inline:0 calc(-1 * var(--hub-input-group-attached-border-width, var(--hub-input-group-attached-border-width)))}.hub-input__attached.hub-input__attached--append>*{border-start-start-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-input__attached.hub-input__attached--prepend>*:not(:first-child){border-start-start-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-input__attached.hub-input__attached--append>*:not(:last-child){border-start-end-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-input__attached.hub-input__attached>hub-input,.hub-input__attached.hub-input__attached>hub-select,.hub-input__attached.hub-input__attached>hub-textarea,.hub-input__attached.hub-input__attached>hub-datepicker,.hub-input__attached.hub-input__attached>hub-timepicker{padding-inline:0;border:0;border-radius:0}.hub-input__attached.hub-input__attached--prepend>hub-input .hub-field__control,.hub-input__attached.hub-input__attached--prepend>hub-select .ng-select-container,.hub-input__attached.hub-input__attached--prepend>hub-textarea .hub-field__control,.hub-input__attached.hub-input__attached--prepend>hub-datepicker .hub-field__control,.hub-input__attached.hub-input__attached--prepend>hub-timepicker .hub-field__control{border-start-end-radius:0;border-end-end-radius:0}.hub-input__attached.hub-input__attached--prepend>hub-input:first-child .hub-field__control,.hub-input__attached.hub-input__attached--prepend>hub-textarea:first-child .hub-field__control,.hub-input__attached.hub-input__attached--prepend>hub-datepicker:first-child .hub-field__control,.hub-input__attached.hub-input__attached--prepend>hub-timepicker:first-child .hub-field__control{border-start-start-radius:var(--hub-input-border-radius);border-end-start-radius:var(--hub-input-border-radius)}.hub-input__attached.hub-input__attached--prepend>hub-select:first-child .ng-select-container{border-start-start-radius:var(--hub-select-border-radius);border-end-start-radius:var(--hub-select-border-radius)}.hub-input__attached.hub-input__attached--append>hub-input .hub-field__control,.hub-input__attached.hub-input__attached--append>hub-select .ng-select-container,.hub-input__attached.hub-input__attached--append>hub-textarea .hub-field__control,.hub-input__attached.hub-input__attached--append>hub-datepicker .hub-field__control,.hub-input__attached.hub-input__attached--append>hub-timepicker .hub-field__control{border-start-start-radius:0;border-end-start-radius:0}.hub-input__attached.hub-input__attached--append>hub-input:last-child .hub-field__control,.hub-input__attached.hub-input__attached--append>hub-textarea:last-child .hub-field__control,.hub-input__attached.hub-input__attached--append>hub-datepicker:last-child .hub-field__control,.hub-input__attached.hub-input__attached--append>hub-timepicker:last-child .hub-field__control{border-start-end-radius:var(--hub-input-border-radius);border-end-end-radius:var(--hub-input-border-radius)}.hub-input__attached.hub-input__attached--append>hub-select:last-child .ng-select-container{border-start-end-radius:var(--hub-select-border-radius);border-end-end-radius:var(--hub-select-border-radius)}:where(.hub-input__attached)>*:not(button):not(a):not(input):not(select):not(textarea):not([role=button]):not([role=link]):not([tabindex]){background:var(--hub-input-group-addon-bg, var(--hub-input-group-addon-bg));color:var(--hub-input-group-addon-color, var(--hub-input-group-addon-color))}:where(.hub-input__attached)>button,:where(.hub-input__attached)>a,:where(.hub-input__attached)>[role=button],:where(.hub-input__attached)>[role=link],:where(.hub-input__attached)>[tabindex]{background:var(--hub-input-group-action-bg, var(--hub-input-group-action-bg));color:var(--hub-input-group-action-color, var(--hub-input-group-action-color))}.hub-input__group--has-prepend .hub-input__control,.hub-input__group--has-prepend .hub-field__control,.hub-input__group--has-prepend .hub-input__control.ng-select .ng-select-container{border-start-start-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-input__group--has-append .hub-input__control,.hub-input__group--has-append .hub-field__control,.hub-input__group--has-append .hub-input__control.ng-select .ng-select-container{border-start-end-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-input-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-input__group>.hub-input__addon--prepend:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.hub-input__group>.hub-input__addon--append:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}\n"] }]
+        }], propDecorators: { passwordRevealed: [{ type: i0.Input, args: [{ isSignal: true, alias: "passwordRevealed", required: false }] }, { type: i0.Output, args: ["passwordRevealedChange"] }], passwordToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "passwordToggle", required: false }] }], hideOnBlur: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideOnBlur", required: false }] }], capsLockWarning: [{ type: i0.Input, args: [{ isSignal: true, alias: "capsLockWarning", required: false }] }], passwordStrength: [{ type: i0.Input, args: [{ isSignal: true, alias: "passwordStrength", required: false }] }], 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"] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], 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 }] }], _prependTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubPrependDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _appendTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubAppendDirective), { ...{ read: TemplateRef }, isSignal: true }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }, { type: i0.Output, args: ["indeterminateChange"] }], 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