ng-hub-ui-forms 21.0.0 → 22.1.2

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

@@ -379,6 +379,7 @@ function defaultInvalidFeedback(key, value) {
  */
 const defaultHubFormsConfig = {
     invalidFeedbackTemplateFn: defaultInvalidFeedback,
+    showValid: false,
     datepicker: defaultHubDatepickerConfig
 };
 /**
@@ -458,6 +459,17 @@ class HubFieldControl extends HubFormControl {
     /** Per-field override for the invalid-feedback message builder. */
     invalidFeedbackTemplateFn = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "invalidFeedbackTemplateFn" }] : /* istanbul ignore next */ []));
+    /**
+     * Opt-in success state. When `true`, a touched + valid field renders the
+     * `--valid` styling (success border + ring). Defaults to the global
+     * {@link HubFormsConfig.showValid}; the success state is never automatic
+     * unless enabled. Has no effect while the field is invalid.
+     */
+    showValid = input(this.#config.showValid, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showValid" }] : /* istanbul ignore next */ []));
+    /** Optional success message shown below the control while {@link showsValid}. */
+    validFeedback = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "validFeedback" }] : /* istanbul ignore next */ []));
     onChange = () => { };
     onTouched = () => { };
     _nativeErrors = signal(null, /* @ts-ignore */
@@ -477,6 +489,17 @@ class HubFieldControl extends HubFormControl {
         }
         return this._nativeTouched() && !!this._nativeErrors();
     }
+    /** Whether the field is touched and valid (independent of the opt-in). */
+    get isValid() {
+        if (this._control) {
+            return !!this._control.touched && !!this._control.valid;
+        }
+        return this._nativeTouched() && !this._nativeErrors();
+    }
+    /** Whether the opt-in success state should be displayed (touched + valid + `showValid`). */
+    get showsValid() {
+        return this.showValid() && this.isValid;
+    }
     /** Current validation errors, from the reactive control or from native validity. */
     get errors() {
         if (this._control) {
@@ -570,11 +593,11 @@ class HubFieldControl extends HubFormControl {
         this._nativeErrors.set(isDefined$1(errors) && Object.keys(errors).length ? errors : null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubFieldControl, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.1", type: HubFieldControl, isStandalone: true, inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalidFeedbackTemplateFn: { classPropertyName: "invalidFeedbackTemplateFn", publicName: "invalidFeedbackTemplateFn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange" }, host: { listeners: { "focusout": "handleBlur($event)" } }, queries: [{ propertyName: "formTextTmp", first: true, predicate: HubFormTextDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "errorTpts", predicate: HubValidationErrorDirective, isSignal: true }], usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.1", type: HubFieldControl, isStandalone: true, inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalidFeedbackTemplateFn: { classPropertyName: "invalidFeedbackTemplateFn", publicName: "invalidFeedbackTemplateFn", isSignal: true, isRequired: false, transformFunction: null }, showValid: { classPropertyName: "showValid", publicName: "showValid", isSignal: true, isRequired: false, transformFunction: null }, validFeedback: { classPropertyName: "validFeedback", publicName: "validFeedback", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange" }, host: { listeners: { "focusout": "handleBlur($event)" } }, queries: [{ propertyName: "formTextTmp", first: true, predicate: HubFormTextDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "errorTpts", predicate: HubValidationErrorDirective, isSignal: true }], usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubFieldControl, decorators: [{
             type: Directive
-        }], ctorParameters: () => [], propDecorators: { formTextTmp: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubFormTextDirective), { ...{ read: TemplateRef }, isSignal: true }] }], errorTpts: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => HubValidationErrorDirective), { isSignal: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], invalidFeedbackTemplateFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidFeedbackTemplateFn", required: false }] }], handleBlur: [{
+        }], ctorParameters: () => [], propDecorators: { formTextTmp: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubFormTextDirective), { ...{ read: TemplateRef }, isSignal: true }] }], errorTpts: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => HubValidationErrorDirective), { isSignal: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], invalidFeedbackTemplateFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidFeedbackTemplateFn", required: false }] }], showValid: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValid", required: false }] }], validFeedback: [{ type: i0.Input, args: [{ isSignal: true, alias: "validFeedback", required: false }] }], handleBlur: [{
                 type: HostListener,
                 args: ['focusout', ['$event']]
             }] } });
@@ -1083,14 +1106,14 @@ class HubInputComponent extends HubFieldControl {
         return value ? [value] : [];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: HubInputComponent, isStandalone: true, selector: "hub-input", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelType: { classPropertyName: "labelType", publicName: "labelType", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, formText: { classPropertyName: "formText", publicName: "formText", isSignal: true, isRequired: false, transformFunction: null }, formTextType: { classPropertyName: "formTextType", publicName: "formTextType", isSignal: true, isRequired: false, transformFunction: null }, prepend: { classPropertyName: "prepend", publicName: "prepend", isSignal: true, isRequired: false, transformFunction: null }, append: { classPropertyName: "append", publicName: "append", isSignal: true, isRequired: false, transformFunction: null }, classlist: { classPropertyName: "classlist", publicName: "classlist", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, unmaskValue: { classPropertyName: "unmaskValue", publicName: "unmaskValue", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { labelType: "labelTypeChange", placeholder: "placeholderChange", min: "minChange", max: "maxChange", valueChange: "valueChange", enter: "enter" }, host: { properties: { "class": "classlist()", "class.hub-input-host": "true" } }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n\tclass=\"hub-field hub-input\"\n\t[class.hub-field--horizontal]=\"!isCheckable() && (labelType() === _labelTypes.Horizontal || (!label() && required()))\"\n\t[class.hub-input--checkable]=\"isCheckable()\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n>\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[id]=\"id\"\n\t\t\t\t\t\t\t[ngModel]=\"_value()\"\n\t\t\t\t\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t\t\t\t\t[min]=\"min() ?? null\"\n\t\t\t\t\t\t\t[max]=\"max() ?? null\"\n\t\t\t\t\t\t\t[step]=\"step()\"\n\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t[readonly]=\"readonly()\"\n\t\t\t\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"hub-input__counter-btn\"\n\t\t\t\t\t\t\t[disabled]=\"disabled() || readonly() || (max() != null && $any(_value()) >= $any(max()))\"\n\t\t\t\t\t\t\taria-label=\"Increase\"\n\t\t\t\t\t\t\t(click)=\"add()\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t+\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@case (_inputFormats.Color) {\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype=\"color\"\n\t\t\t\t\t\tclass=\"hub-field__control hub-input__control--color\"\n\t\t\t\t\t\t[class.hub-field__control--invalid]=\"isInvalid\"\n\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t[ngModel]=\"_value()\"\n\t\t\t\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t\t\t(blur)=\"handleBlur($event)\"\n\t\t\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t\t@case (_inputFormats.File) {\n\t\t\t\t\t<div class=\"hub-input__file\" [class.hub-input__file--invalid]=\"isInvalid\">\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t#fileInput\n\t\t\t\t\t\t\ttype=\"file\"\n\t\t\t\t\t\t\tclass=\"hub-input__file-native\"\n\t\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t\t[accept]=\"accept()\"\n\t\t\t\t\t\t\t[multiple]=\"multiple()\"\n\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t\t\t\t(change)=\"setFileValue($event)\"\n\t\t\t\t\t\t\t(blur)=\"handleBlur($event)\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"hub-input__file-button\"\n\t\t\t\t\t\t\t[disabled]=\"disabled() || readonly()\"\n\t\t\t\t\t\t\t(click)=\"triggerFile()\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{{ buttonLabel() }}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t\t<span class=\"hub-input__file-name\">{{ fileLabel() || placeholder() }}</span>\n\t\t\t\t\t\t@if (fileLabel() && !disabled() && !readonly()) {\n\t\t\t\t\t\t\t<button type=\"button\" class=\"hub-input__file-clear\" aria-label=\"Clear\" (click)=\"clearFile()\">&times;</button>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@default {\n\t\t\t\t\t<div class=\"hub-input__group\" [class.hub-input__group--floating]=\"labelType() === _labelTypes.Floating\">\n\t\t\t\t\t\t@for (addon of _prepend(); track $index) {\n\t\t\t\t\t\t\t<span class=\"hub-input__addon hub-input__addon--prepend\">{{ addon }}</span>\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tclass=\"hub-field__control\"\n\t\t\t\t\t\t\t[class.hub-field__control--invalid]=\"isInvalid\"\n\t\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t\t[type]=\"resolvedType()\"\n\t\t\t\t\t\t\t[ngModel]=\"_value()\"\n\t\t\t\t\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t\t\t\t\t(keyup.enter)=\"enter.emit(_value())\"\n\t\t\t\t\t\t\t[placeholder]=\"labelType() === _labelTypes.Floating ? (placeholder() || ' ') : placeholder()\"\n\t\t\t\t\t\t\t[min]=\"min() ?? null\"\n\t\t\t\t\t\t\t[max]=\"max() ?? null\"\n\t\t\t\t\t\t\t[step]=\"step()\"\n\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t[readonly]=\"readonly()\"\n\t\t\t\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t@for (addon of _append(); track $index) {\n\t\t\t\t\t\t\t<span class=\"hub-input__addon hub-input__addon--append\">{{ addon }}</span>\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t@if (labelType() === _labelTypes.Floating && (label() || required())) {\n\t\t\t\t\t\t\t<label [for]=\"id\" class=\"hub-field__label hub-input__label--floating\">\n\t\t\t\t\t\t\t\t{{ label() }}\n\t\t\t\t\t\t\t\t@if (required()) {\n\t\t\t\t\t\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t@if (type() === _inputFormats.Password) {\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"hub-input__password-toggle\"\n\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t[attr.aria-label]=\"showPassword ? 'Hide password' : 'Show password'\"\n\t\t\t\t\t\t\t[attr.aria-pressed]=\"showPassword\"\n\t\t\t\t\t\t\t(click)=\"togglePassword()\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span class=\"hub-input__password-icon\" [class.hub-input__password-icon--visible]=\"showPassword\"></span>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (formText() || formTextTmp()) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span class=\"hub-field__feedback-text\" [innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n</div>\n", styles: ["hub-input{display:block;font-family:var(--hub-input-font-family)}hub-input.hidden-control{display:none!important}.hub-input__row{display:flex;align-items:stretch;gap:var(--hub-ref-space-2, .5rem)}.hub-input__group{display:flex;align-items:stretch;flex:1 1 auto;min-width:0;position:relative}.hub-input__addon{display:flex;align-items:center;padding:0 var(--hub-input-padding-x);color:var(--hub-input-group-addon-color);background:var(--hub-input-group-addon-bg);border:var(--hub-input-border-width) solid var(--hub-input-group-addon-border-color);white-space:nowrap}.hub-input__addon--prepend{border-right:0;border-radius:var(--hub-input-border-radius) 0 0 var(--hub-input-border-radius)}.hub-input__addon--append{border-left:0;border-radius:0 var(--hub-input-border-radius) var(--hub-input-border-radius) 0}.hub-input__addon--prepend+.hub-field__control{border-top-left-radius:0;border-bottom-left-radius:0}.hub-input__group .hub-field__control:has(+.hub-input__addon--append){border-top-right-radius:0;border-bottom-right-radius:0}.hub-input__group--floating .hub-field__control{padding-top:calc(var(--hub-input-padding-y) + .625rem);padding-bottom:calc(var(--hub-input-padding-y) - .125rem)}.hub-input__group--floating .hub-input__label--floating{position:absolute;top:0;left:0;height:100%;padding:var(--hub-input-padding-y) var(--hub-input-padding-x);margin:0;color:var(--hub-input-placeholder-color);font-weight:var(--hub-ref-font-weight-base, 400);pointer-events:none;transform-origin:0 0;transition:opacity .1s ease-in-out,transform .1s ease-in-out}.hub-input__group--floating .hub-field__control:focus~.hub-input__label--floating,.hub-input__group--floating .hub-field__control:not(:placeholder-shown)~.hub-input__label--floating{transform:scale(.85) translateY(-.5rem);opacity:.9}.hub-input__counter{display:flex;align-items:stretch}.hub-input__counter-btn{flex:0 0 var(--hub-input-counter-button-width);display:inline-flex;align-items:center;justify-content:center;font-size:1.15rem;line-height:1;color:var(--hub-input-counter-button-color);background:var(--hub-input-counter-button-bg);border:var(--hub-input-border-width) solid var(--hub-input-border-color);cursor:pointer}.hub-input__counter-btn:first-child{border-right:0;border-radius:var(--hub-input-border-radius) 0 0 var(--hub-input-border-radius)}.hub-input__counter-btn:last-child{border-left:0;border-radius:0 var(--hub-input-border-radius) var(--hub-input-border-radius) 0}.hub-input__counter-btn:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-input__control--counter{border-radius:0;text-align:center;appearance:textfield}.hub-input__control--counter::-webkit-outer-spin-button,.hub-input__control--counter::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.hub-input__control--color{width:var(--hub-input-color-size);height:var(--hub-input-color-size);padding:.15rem;cursor:pointer}.hub-input__file{display:flex;align-items:stretch;width:100%;background:var(--hub-input-bg);border:var(--hub-input-border-width) solid var(--hub-input-border-color);border-radius:var(--hub-input-border-radius);overflow:hidden}.hub-input__file--invalid{border-color:var(--hub-form-invalid-border-color)}.hub-input__file-native{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.hub-input__file-button{flex:0 0 auto;padding:var(--hub-input-padding-y) var(--hub-input-padding-x);color:var(--hub-input-group-addon-color);background:var(--hub-input-group-addon-bg);border:0;border-right:var(--hub-input-border-width) solid var(--hub-input-border-color);font-size:var(--hub-input-font-size);white-space:nowrap;cursor:pointer}.hub-input__file-button:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-input__file-name{flex:1 1 auto;min-width:0;padding:var(--hub-input-padding-y) var(--hub-input-padding-x);color:var(--hub-input-placeholder-color);font-size:var(--hub-input-font-size);line-height:var(--hub-input-line-height);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hub-input__file-clear{flex:0 0 auto;width:2rem;color:var(--hub-input-placeholder-color);font-size:1.1rem;line-height:1;background:transparent;border:0;cursor:pointer}.hub-input__file-clear:hover{color:var(--hub-form-invalid-color)}.hub-input__password-toggle{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:2.5rem;padding:0;color:var(--hub-input-color);background:transparent;border:var(--hub-input-border-width) solid var(--hub-input-border-color);border-radius:var(--hub-input-border-radius);cursor:pointer;transition:var(--hub-input-transition)}.hub-input__password-toggle:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-input__password-icon{display:block;width:1.1rem;height:1.1rem;background-color:currentColor;--hub-input-eye-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z'/%3E%3Cpath d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z'/%3E%3C/svg%3E\");-webkit-mask:var(--hub-input-eye-mask) center/contain no-repeat;mask:var(--hub-input-eye-mask) center/contain no-repeat}.hub-input__password-icon--visible{--hub-input-eye-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z'/%3E%3Cpath d='M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z'/%3E%3Cpath d='M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z'/%3E%3C/svg%3E\")}.hub-input--checkable .hub-input__check{display:inline-flex;align-items:center;gap:var(--hub-check-label-gap);cursor:pointer}.hub-input__check-input{flex:0 0 auto;width:var(--hub-check-input-width);height:var(--hub-check-input-height);margin:0;appearance:none;background:var(--hub-check-input-bg);border:var(--hub-check-input-border-width) solid var(--hub-check-input-border-color);border-radius:var(--hub-check-input-border-radius);cursor:pointer;transition:var(--hub-input-transition)}.hub-input__check-input:checked{background:var(--hub-check-input-checked-bg) var(--hub-check-input-checked-icon) center/.85rem no-repeat;border-color:var(--hub-check-input-checked-border-color)}.hub-input__check-input:focus-visible{outline:0;box-shadow:var(--hub-input-focus-box-shadow)}.hub-input__check-input--invalid{border-color:var(--hub-form-invalid-border-color)}.hub-input__check-input:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-input__check-input--switch{position:relative;width:var(--hub-switch-width);height:var(--hub-switch-height);border:0;border-radius:var(--hub-ref-radius-pill, 50rem);background:var(--hub-switch-track-off)}.hub-input__check-input--switch:after{content:\"\";position:absolute;top:50%;left:.125rem;width:calc(var(--hub-switch-height) - .25rem);height:calc(var(--hub-switch-height) - .25rem);border-radius:50%;background:var(--hub-switch-thumb);transform:translateY(-50%);transition:left .15s ease-in-out}.hub-input__check-input--switch:checked{background:var(--hub-switch-track-on)}.hub-input__check-input--switch:checked:after{left:calc(100% - var(--hub-switch-height) + .125rem)}.hub-input__check-label{display:inline-flex;align-items:baseline;gap:.15rem;color:var(--hub-input-color);font-size:var(--hub-input-font-size)}.hub-input--checkable.hub-field--disabled .hub-input__check-label{opacity:var(--hub-form-disabled-opacity)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: HubInputComponent, isStandalone: true, selector: "hub-input", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelType: { classPropertyName: "labelType", publicName: "labelType", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, formText: { classPropertyName: "formText", publicName: "formText", isSignal: true, isRequired: false, transformFunction: null }, formTextType: { classPropertyName: "formTextType", publicName: "formTextType", isSignal: true, isRequired: false, transformFunction: null }, prepend: { classPropertyName: "prepend", publicName: "prepend", isSignal: true, isRequired: false, transformFunction: null }, append: { classPropertyName: "append", publicName: "append", isSignal: true, isRequired: false, transformFunction: null }, classlist: { classPropertyName: "classlist", publicName: "classlist", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, unmaskValue: { classPropertyName: "unmaskValue", publicName: "unmaskValue", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { labelType: "labelTypeChange", placeholder: "placeholderChange", min: "minChange", max: "maxChange", valueChange: "valueChange", enter: "enter" }, host: { properties: { "class": "classlist()", "class.hub-input-host": "true" } }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n\tclass=\"hub-field hub-input\"\n\t[class.hub-field--horizontal]=\"!isCheckable() && (labelType() === _labelTypes.Horizontal || (!label() && required()))\"\n\t[class.hub-input--checkable]=\"isCheckable()\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n\t[class.hub-field--valid]=\"showsValid\"\n>\n\t@if (isCheckable()) {\n\t\t<label class=\"hub-input__check\" [class.hub-input__check--switch]=\"type() === _inputFormats.Switch\">\n\t\t\t<input\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tclass=\"hub-input__check-input\"\n\t\t\t\t[class.hub-input__check-input--switch]=\"type() === _inputFormats.Switch\"\n\t\t\t\t[class.hub-input__check-input--invalid]=\"isInvalid\"\n\t\t\t\t[attr.role]=\"type() === _inputFormats.Switch ? 'switch' : null\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\t[checked]=\"$any(_value())\"\n\t\t\t\t(change)=\"setValue($event)\"\n\t\t\t\t[disabled]=\"disabled() || readonly()\"\n\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t/>\n\t\t\t@if (label() || required()) {\n\t\t\t\t<span class=\"hub-input__check-label\">\n\t\t\t\t\t{{ label() }}\n\t\t\t\t\t@if (required()) {\n\t\t\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t\t\t}\n\t\t\t\t</span>\n\t\t\t}\n\t\t</label>\n\t} @else {\n\t\t@if ((label() || required()) && labelType() !== _labelTypes.Floating) {\n\t\t\t<label [for]=\"id\" class=\"hub-field__label\">\n\t\t\t\t{{ label() }}\n\t\t\t\t@if (required()) {\n\t\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t\t}\n\t\t\t</label>\n\t\t}\n\n\t\t<div class=\"hub-field__body hub-input__row\">\n\t\t\t@switch (type()) {\n\t\t\t\t@case (_inputFormats.Counter) {\n\t\t\t\t\t<div class=\"hub-input__group hub-input__counter\">\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"hub-input__counter-btn\"\n\t\t\t\t\t\t\t[disabled]=\"disabled() || readonly() || (min() != null && $any(_value()) <= $any(min()))\"\n\t\t\t\t\t\t\taria-label=\"Decrease\"\n\t\t\t\t\t\t\t(click)=\"subtract()\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t&minus;\n\t\t\t\t\t\t</button>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tclass=\"hub-field__control hub-input__control--counter\"\n\t\t\t\t\t\t\t[class.hub-field__control--invalid]=\"isInvalid\"\n\t\t\t\t\t\t\t[class.hub-field__control--valid]=\"showsValid\"\n\t\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t\t[ngModel]=\"_value()\"\n\t\t\t\t\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t\t\t\t\t[min]=\"min() ?? null\"\n\t\t\t\t\t\t\t[max]=\"max() ?? null\"\n\t\t\t\t\t\t\t[step]=\"step()\"\n\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t[readonly]=\"readonly()\"\n\t\t\t\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"hub-input__counter-btn\"\n\t\t\t\t\t\t\t[disabled]=\"disabled() || readonly() || (max() != null && $any(_value()) >= $any(max()))\"\n\t\t\t\t\t\t\taria-label=\"Increase\"\n\t\t\t\t\t\t\t(click)=\"add()\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t+\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@case (_inputFormats.Color) {\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype=\"color\"\n\t\t\t\t\t\tclass=\"hub-field__control hub-input__control--color\"\n\t\t\t\t\t\t[class.hub-field__control--invalid]=\"isInvalid\"\n\t\t\t\t\t\t[class.hub-field__control--valid]=\"showsValid\"\n\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t[ngModel]=\"_value()\"\n\t\t\t\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t\t\t(blur)=\"handleBlur($event)\"\n\t\t\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t\t@case (_inputFormats.File) {\n\t\t\t\t\t<div class=\"hub-input__file\" [class.hub-input__file--invalid]=\"isInvalid\">\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t#fileInput\n\t\t\t\t\t\t\ttype=\"file\"\n\t\t\t\t\t\t\tclass=\"hub-input__file-native\"\n\t\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t\t[accept]=\"accept()\"\n\t\t\t\t\t\t\t[multiple]=\"multiple()\"\n\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t\t\t\t(change)=\"setFileValue($event)\"\n\t\t\t\t\t\t\t(blur)=\"handleBlur($event)\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"hub-input__file-button\"\n\t\t\t\t\t\t\t[disabled]=\"disabled() || readonly()\"\n\t\t\t\t\t\t\t(click)=\"triggerFile()\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{{ buttonLabel() }}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t\t<span class=\"hub-input__file-name\">{{ fileLabel() || placeholder() }}</span>\n\t\t\t\t\t\t@if (fileLabel() && !disabled() && !readonly()) {\n\t\t\t\t\t\t\t<button type=\"button\" class=\"hub-input__file-clear\" aria-label=\"Clear\" (click)=\"clearFile()\">&times;</button>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@default {\n\t\t\t\t\t<div class=\"hub-input__group\" [class.hub-input__group--floating]=\"labelType() === _labelTypes.Floating\">\n\t\t\t\t\t\t@for (addon of _prepend(); track $index) {\n\t\t\t\t\t\t\t<span class=\"hub-input__addon hub-input__addon--prepend\">{{ addon }}</span>\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tclass=\"hub-field__control\"\n\t\t\t\t\t\t\t[class.hub-field__control--invalid]=\"isInvalid\"\n\t\t\t\t\t\t\t[class.hub-field__control--valid]=\"showsValid\"\n\t\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t\t[type]=\"resolvedType()\"\n\t\t\t\t\t\t\t[ngModel]=\"_value()\"\n\t\t\t\t\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t\t\t\t\t(keyup.enter)=\"enter.emit(_value())\"\n\t\t\t\t\t\t\t[placeholder]=\"labelType() === _labelTypes.Floating ? (placeholder() || ' ') : placeholder()\"\n\t\t\t\t\t\t\t[min]=\"min() ?? null\"\n\t\t\t\t\t\t\t[max]=\"max() ?? null\"\n\t\t\t\t\t\t\t[step]=\"step()\"\n\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t[readonly]=\"readonly()\"\n\t\t\t\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t@for (addon of _append(); track $index) {\n\t\t\t\t\t\t\t<span class=\"hub-input__addon hub-input__addon--append\">{{ addon }}</span>\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t@if (labelType() === _labelTypes.Floating && (label() || required())) {\n\t\t\t\t\t\t\t<label [for]=\"id\" class=\"hub-field__label hub-input__label--floating\">\n\t\t\t\t\t\t\t\t{{ label() }}\n\t\t\t\t\t\t\t\t@if (required()) {\n\t\t\t\t\t\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t@if (type() === _inputFormats.Password) {\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"hub-input__password-toggle\"\n\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t[attr.aria-label]=\"showPassword ? 'Hide password' : 'Show password'\"\n\t\t\t\t\t\t\t[attr.aria-pressed]=\"showPassword\"\n\t\t\t\t\t\t\t(click)=\"togglePassword()\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span class=\"hub-input__password-icon\" [class.hub-input__password-icon--visible]=\"showPassword\"></span>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (formText() || formTextTmp()) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span class=\"hub-field__feedback-text\" [innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n\n\t@if (showsValid && validFeedback()) {\n\t\t<div class=\"hub-field__feedback hub-field__feedback--valid\" role=\"status\">\n\t\t\t<span class=\"hub-field__feedback-text\">{{ validFeedback() }}</span>\n\t\t</div>\n\t}\n</div>\n", styles: ["hub-input{display:block;font-family:var(--hub-input-font-family)}hub-input.hidden-control{display:none!important}.hub-input__row{display:flex;align-items:stretch;gap:var(--hub-ref-space-2, .5rem)}.hub-input__group{display:flex;align-items:stretch;flex:1 1 auto;min-width:0;position:relative}.hub-input__addon{display:flex;align-items:center;padding:0 var(--hub-input-padding-x);color:var(--hub-input-group-addon-color);background:var(--hub-input-group-addon-bg);border:var(--hub-input-border-width) solid var(--hub-input-group-addon-border-color);white-space:nowrap}.hub-input__addon--prepend{border-right:0;border-radius:var(--hub-input-border-radius) 0 0 var(--hub-input-border-radius)}.hub-input__addon--append{border-left:0;border-radius:0 var(--hub-input-border-radius) var(--hub-input-border-radius) 0}.hub-input__addon--prepend+.hub-field__control{border-top-left-radius:0;border-bottom-left-radius:0}.hub-input__group .hub-field__control:has(+.hub-input__addon--append){border-top-right-radius:0;border-bottom-right-radius:0}.hub-input__group--floating .hub-field__control{padding-top:calc(var(--hub-input-padding-y) + .625rem);padding-bottom:calc(var(--hub-input-padding-y) - .125rem)}.hub-input__group--floating .hub-input__label--floating{position:absolute;top:0;left:0;height:100%;padding:var(--hub-input-padding-y) var(--hub-input-padding-x);margin:0;color:var(--hub-input-placeholder-color);font-weight:var(--hub-ref-font-weight-base, 400);pointer-events:none;transform-origin:0 0;transition:opacity .1s ease-in-out,transform .1s ease-in-out}.hub-input__group--floating .hub-field__control:focus~.hub-input__label--floating,.hub-input__group--floating .hub-field__control:not(:placeholder-shown)~.hub-input__label--floating{transform:scale(.85) translateY(-.5rem);opacity:.9}.hub-input__counter{display:flex;align-items:stretch}.hub-input__counter-btn{flex:0 0 var(--hub-input-counter-button-width);display:inline-flex;align-items:center;justify-content:center;font-size:1.15rem;line-height:1;color:var(--hub-input-counter-button-color);background:var(--hub-input-counter-button-bg);border:var(--hub-input-border-width) solid var(--hub-input-border-color);cursor:pointer}.hub-input__counter-btn:first-child{border-right:0;border-radius:var(--hub-input-border-radius) 0 0 var(--hub-input-border-radius)}.hub-input__counter-btn:last-child{border-left:0;border-radius:0 var(--hub-input-border-radius) var(--hub-input-border-radius) 0}.hub-input__counter-btn:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-input__control--counter{border-radius:0;text-align:center;appearance:textfield}.hub-input__control--counter::-webkit-outer-spin-button,.hub-input__control--counter::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.hub-input__control--color{width:var(--hub-input-color-size);height:var(--hub-input-color-size);padding:.15rem;cursor:pointer}.hub-input__file{display:flex;align-items:stretch;width:100%;background:var(--hub-input-bg);border:var(--hub-input-border-width) solid var(--hub-input-border-color);border-radius:var(--hub-input-border-radius);overflow:hidden}.hub-input__file--invalid{border-color:var(--hub-form-invalid-border-color)}.hub-input__file-native{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.hub-input__file-button{flex:0 0 auto;padding:var(--hub-input-padding-y) var(--hub-input-padding-x);color:var(--hub-input-group-addon-color);background:var(--hub-input-group-addon-bg);border:0;border-right:var(--hub-input-border-width) solid var(--hub-input-border-color);font-size:var(--hub-input-font-size);white-space:nowrap;cursor:pointer}.hub-input__file-button:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-input__file-name{flex:1 1 auto;min-width:0;padding:var(--hub-input-padding-y) var(--hub-input-padding-x);color:var(--hub-input-placeholder-color);font-size:var(--hub-input-font-size);line-height:var(--hub-input-line-height);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hub-input__file-clear{flex:0 0 auto;width:2rem;color:var(--hub-input-placeholder-color);font-size:1.1rem;line-height:1;background:transparent;border:0;cursor:pointer}.hub-input__file-clear:hover{color:var(--hub-form-invalid-color)}.hub-input__password-toggle{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:2.5rem;padding:0;color:var(--hub-input-color);background:transparent;border:var(--hub-input-border-width) solid var(--hub-input-border-color);border-radius:var(--hub-input-border-radius);cursor:pointer;transition:var(--hub-input-transition)}.hub-input__password-toggle:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-input__password-icon{display:block;width:1.1rem;height:1.1rem;background-color:currentColor;--hub-input-eye-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z'/%3E%3Cpath d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z'/%3E%3C/svg%3E\");-webkit-mask:var(--hub-input-eye-mask) center/contain no-repeat;mask:var(--hub-input-eye-mask) center/contain no-repeat}.hub-input__password-icon--visible{--hub-input-eye-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z'/%3E%3Cpath d='M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z'/%3E%3Cpath d='M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z'/%3E%3C/svg%3E\")}.hub-input--checkable .hub-input__check{display:inline-flex;align-items:center;gap:var(--hub-check-label-gap);cursor:pointer}.hub-input__check-input{flex:0 0 auto;width:var(--hub-check-input-width);height:var(--hub-check-input-height);margin:0;appearance:none;background:var(--hub-check-input-bg);border:var(--hub-check-input-border-width) solid var(--hub-check-input-border-color);border-radius:var(--hub-check-input-border-radius);cursor:pointer;transition:var(--hub-input-transition)}.hub-input__check-input:checked{background:var(--hub-check-input-checked-bg) var(--hub-check-input-checked-icon) center/.85rem no-repeat;border-color:var(--hub-check-input-checked-border-color)}.hub-input__check-input:focus-visible{outline:0;box-shadow:var(--hub-input-focus-box-shadow)}.hub-input__check-input--invalid{border-color:var(--hub-form-invalid-border-color)}.hub-input__check-input:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-input__check-input--switch{position:relative;width:var(--hub-switch-width);height:var(--hub-switch-height);border:0;border-radius:var(--hub-ref-radius-pill, 50rem);background:var(--hub-switch-track-off)}.hub-input__check-input--switch:after{content:\"\";position:absolute;top:50%;left:.125rem;width:calc(var(--hub-switch-height) - .25rem);height:calc(var(--hub-switch-height) - .25rem);border-radius:50%;background:var(--hub-switch-thumb);transform:translateY(-50%);transition:left .15s ease-in-out}.hub-input__check-input--switch:checked{background:var(--hub-switch-track-on)}.hub-input__check-input--switch:checked:after{left:calc(100% - var(--hub-switch-height) + .125rem)}.hub-input__check-label{display:inline-flex;align-items:baseline;gap:.15rem;color:var(--hub-input-color);font-size:var(--hub-input-font-size)}.hub-input--checkable.hub-field--disabled .hub-input__check-label{opacity:var(--hub-form-disabled-opacity)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'hub-input', imports: [NgTemplateOutlet, KeyValuePipe, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         '[class]': 'classlist()',
                         '[class.hub-input-host]': 'true'
-                    }, template: "<div\n\tclass=\"hub-field hub-input\"\n\t[class.hub-field--horizontal]=\"!isCheckable() && (labelType() === _labelTypes.Horizontal || (!label() && required()))\"\n\t[class.hub-input--checkable]=\"isCheckable()\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n>\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[id]=\"id\"\n\t\t\t\t\t\t\t[ngModel]=\"_value()\"\n\t\t\t\t\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t\t\t\t\t[min]=\"min() ?? null\"\n\t\t\t\t\t\t\t[max]=\"max() ?? null\"\n\t\t\t\t\t\t\t[step]=\"step()\"\n\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t[readonly]=\"readonly()\"\n\t\t\t\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"hub-input__counter-btn\"\n\t\t\t\t\t\t\t[disabled]=\"disabled() || readonly() || (max() != null && $any(_value()) >= $any(max()))\"\n\t\t\t\t\t\t\taria-label=\"Increase\"\n\t\t\t\t\t\t\t(click)=\"add()\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t+\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@case (_inputFormats.Color) {\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype=\"color\"\n\t\t\t\t\t\tclass=\"hub-field__control hub-input__control--color\"\n\t\t\t\t\t\t[class.hub-field__control--invalid]=\"isInvalid\"\n\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t[ngModel]=\"_value()\"\n\t\t\t\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t\t\t(blur)=\"handleBlur($event)\"\n\t\t\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t\t@case (_inputFormats.File) {\n\t\t\t\t\t<div class=\"hub-input__file\" [class.hub-input__file--invalid]=\"isInvalid\">\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t#fileInput\n\t\t\t\t\t\t\ttype=\"file\"\n\t\t\t\t\t\t\tclass=\"hub-input__file-native\"\n\t\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t\t[accept]=\"accept()\"\n\t\t\t\t\t\t\t[multiple]=\"multiple()\"\n\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t\t\t\t(change)=\"setFileValue($event)\"\n\t\t\t\t\t\t\t(blur)=\"handleBlur($event)\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"hub-input__file-button\"\n\t\t\t\t\t\t\t[disabled]=\"disabled() || readonly()\"\n\t\t\t\t\t\t\t(click)=\"triggerFile()\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{{ buttonLabel() }}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t\t<span class=\"hub-input__file-name\">{{ fileLabel() || placeholder() }}</span>\n\t\t\t\t\t\t@if (fileLabel() && !disabled() && !readonly()) {\n\t\t\t\t\t\t\t<button type=\"button\" class=\"hub-input__file-clear\" aria-label=\"Clear\" (click)=\"clearFile()\">&times;</button>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@default {\n\t\t\t\t\t<div class=\"hub-input__group\" [class.hub-input__group--floating]=\"labelType() === _labelTypes.Floating\">\n\t\t\t\t\t\t@for (addon of _prepend(); track $index) {\n\t\t\t\t\t\t\t<span class=\"hub-input__addon hub-input__addon--prepend\">{{ addon }}</span>\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tclass=\"hub-field__control\"\n\t\t\t\t\t\t\t[class.hub-field__control--invalid]=\"isInvalid\"\n\t\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t\t[type]=\"resolvedType()\"\n\t\t\t\t\t\t\t[ngModel]=\"_value()\"\n\t\t\t\t\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t\t\t\t\t(keyup.enter)=\"enter.emit(_value())\"\n\t\t\t\t\t\t\t[placeholder]=\"labelType() === _labelTypes.Floating ? (placeholder() || ' ') : placeholder()\"\n\t\t\t\t\t\t\t[min]=\"min() ?? null\"\n\t\t\t\t\t\t\t[max]=\"max() ?? null\"\n\t\t\t\t\t\t\t[step]=\"step()\"\n\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t[readonly]=\"readonly()\"\n\t\t\t\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t@for (addon of _append(); track $index) {\n\t\t\t\t\t\t\t<span class=\"hub-input__addon hub-input__addon--append\">{{ addon }}</span>\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t@if (labelType() === _labelTypes.Floating && (label() || required())) {\n\t\t\t\t\t\t\t<label [for]=\"id\" class=\"hub-field__label hub-input__label--floating\">\n\t\t\t\t\t\t\t\t{{ label() }}\n\t\t\t\t\t\t\t\t@if (required()) {\n\t\t\t\t\t\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t@if (type() === _inputFormats.Password) {\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"hub-input__password-toggle\"\n\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t[attr.aria-label]=\"showPassword ? 'Hide password' : 'Show password'\"\n\t\t\t\t\t\t\t[attr.aria-pressed]=\"showPassword\"\n\t\t\t\t\t\t\t(click)=\"togglePassword()\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span class=\"hub-input__password-icon\" [class.hub-input__password-icon--visible]=\"showPassword\"></span>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (formText() || formTextTmp()) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span class=\"hub-field__feedback-text\" [innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n</div>\n", styles: ["hub-input{display:block;font-family:var(--hub-input-font-family)}hub-input.hidden-control{display:none!important}.hub-input__row{display:flex;align-items:stretch;gap:var(--hub-ref-space-2, .5rem)}.hub-input__group{display:flex;align-items:stretch;flex:1 1 auto;min-width:0;position:relative}.hub-input__addon{display:flex;align-items:center;padding:0 var(--hub-input-padding-x);color:var(--hub-input-group-addon-color);background:var(--hub-input-group-addon-bg);border:var(--hub-input-border-width) solid var(--hub-input-group-addon-border-color);white-space:nowrap}.hub-input__addon--prepend{border-right:0;border-radius:var(--hub-input-border-radius) 0 0 var(--hub-input-border-radius)}.hub-input__addon--append{border-left:0;border-radius:0 var(--hub-input-border-radius) var(--hub-input-border-radius) 0}.hub-input__addon--prepend+.hub-field__control{border-top-left-radius:0;border-bottom-left-radius:0}.hub-input__group .hub-field__control:has(+.hub-input__addon--append){border-top-right-radius:0;border-bottom-right-radius:0}.hub-input__group--floating .hub-field__control{padding-top:calc(var(--hub-input-padding-y) + .625rem);padding-bottom:calc(var(--hub-input-padding-y) - .125rem)}.hub-input__group--floating .hub-input__label--floating{position:absolute;top:0;left:0;height:100%;padding:var(--hub-input-padding-y) var(--hub-input-padding-x);margin:0;color:var(--hub-input-placeholder-color);font-weight:var(--hub-ref-font-weight-base, 400);pointer-events:none;transform-origin:0 0;transition:opacity .1s ease-in-out,transform .1s ease-in-out}.hub-input__group--floating .hub-field__control:focus~.hub-input__label--floating,.hub-input__group--floating .hub-field__control:not(:placeholder-shown)~.hub-input__label--floating{transform:scale(.85) translateY(-.5rem);opacity:.9}.hub-input__counter{display:flex;align-items:stretch}.hub-input__counter-btn{flex:0 0 var(--hub-input-counter-button-width);display:inline-flex;align-items:center;justify-content:center;font-size:1.15rem;line-height:1;color:var(--hub-input-counter-button-color);background:var(--hub-input-counter-button-bg);border:var(--hub-input-border-width) solid var(--hub-input-border-color);cursor:pointer}.hub-input__counter-btn:first-child{border-right:0;border-radius:var(--hub-input-border-radius) 0 0 var(--hub-input-border-radius)}.hub-input__counter-btn:last-child{border-left:0;border-radius:0 var(--hub-input-border-radius) var(--hub-input-border-radius) 0}.hub-input__counter-btn:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-input__control--counter{border-radius:0;text-align:center;appearance:textfield}.hub-input__control--counter::-webkit-outer-spin-button,.hub-input__control--counter::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.hub-input__control--color{width:var(--hub-input-color-size);height:var(--hub-input-color-size);padding:.15rem;cursor:pointer}.hub-input__file{display:flex;align-items:stretch;width:100%;background:var(--hub-input-bg);border:var(--hub-input-border-width) solid var(--hub-input-border-color);border-radius:var(--hub-input-border-radius);overflow:hidden}.hub-input__file--invalid{border-color:var(--hub-form-invalid-border-color)}.hub-input__file-native{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.hub-input__file-button{flex:0 0 auto;padding:var(--hub-input-padding-y) var(--hub-input-padding-x);color:var(--hub-input-group-addon-color);background:var(--hub-input-group-addon-bg);border:0;border-right:var(--hub-input-border-width) solid var(--hub-input-border-color);font-size:var(--hub-input-font-size);white-space:nowrap;cursor:pointer}.hub-input__file-button:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-input__file-name{flex:1 1 auto;min-width:0;padding:var(--hub-input-padding-y) var(--hub-input-padding-x);color:var(--hub-input-placeholder-color);font-size:var(--hub-input-font-size);line-height:var(--hub-input-line-height);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hub-input__file-clear{flex:0 0 auto;width:2rem;color:var(--hub-input-placeholder-color);font-size:1.1rem;line-height:1;background:transparent;border:0;cursor:pointer}.hub-input__file-clear:hover{color:var(--hub-form-invalid-color)}.hub-input__password-toggle{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:2.5rem;padding:0;color:var(--hub-input-color);background:transparent;border:var(--hub-input-border-width) solid var(--hub-input-border-color);border-radius:var(--hub-input-border-radius);cursor:pointer;transition:var(--hub-input-transition)}.hub-input__password-toggle:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-input__password-icon{display:block;width:1.1rem;height:1.1rem;background-color:currentColor;--hub-input-eye-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z'/%3E%3Cpath d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z'/%3E%3C/svg%3E\");-webkit-mask:var(--hub-input-eye-mask) center/contain no-repeat;mask:var(--hub-input-eye-mask) center/contain no-repeat}.hub-input__password-icon--visible{--hub-input-eye-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z'/%3E%3Cpath d='M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z'/%3E%3Cpath d='M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z'/%3E%3C/svg%3E\")}.hub-input--checkable .hub-input__check{display:inline-flex;align-items:center;gap:var(--hub-check-label-gap);cursor:pointer}.hub-input__check-input{flex:0 0 auto;width:var(--hub-check-input-width);height:var(--hub-check-input-height);margin:0;appearance:none;background:var(--hub-check-input-bg);border:var(--hub-check-input-border-width) solid var(--hub-check-input-border-color);border-radius:var(--hub-check-input-border-radius);cursor:pointer;transition:var(--hub-input-transition)}.hub-input__check-input:checked{background:var(--hub-check-input-checked-bg) var(--hub-check-input-checked-icon) center/.85rem no-repeat;border-color:var(--hub-check-input-checked-border-color)}.hub-input__check-input:focus-visible{outline:0;box-shadow:var(--hub-input-focus-box-shadow)}.hub-input__check-input--invalid{border-color:var(--hub-form-invalid-border-color)}.hub-input__check-input:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-input__check-input--switch{position:relative;width:var(--hub-switch-width);height:var(--hub-switch-height);border:0;border-radius:var(--hub-ref-radius-pill, 50rem);background:var(--hub-switch-track-off)}.hub-input__check-input--switch:after{content:\"\";position:absolute;top:50%;left:.125rem;width:calc(var(--hub-switch-height) - .25rem);height:calc(var(--hub-switch-height) - .25rem);border-radius:50%;background:var(--hub-switch-thumb);transform:translateY(-50%);transition:left .15s ease-in-out}.hub-input__check-input--switch:checked{background:var(--hub-switch-track-on)}.hub-input__check-input--switch:checked:after{left:calc(100% - var(--hub-switch-height) + .125rem)}.hub-input__check-label{display:inline-flex;align-items:baseline;gap:.15rem;color:var(--hub-input-color);font-size:var(--hub-input-font-size)}.hub-input--checkable.hub-field--disabled .hub-input__check-label{opacity:var(--hub-form-disabled-opacity)}\n"] }]
+                    }, template: "<div\n\tclass=\"hub-field hub-input\"\n\t[class.hub-field--horizontal]=\"!isCheckable() && (labelType() === _labelTypes.Horizontal || (!label() && required()))\"\n\t[class.hub-input--checkable]=\"isCheckable()\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n\t[class.hub-field--valid]=\"showsValid\"\n>\n\t@if (isCheckable()) {\n\t\t<label class=\"hub-input__check\" [class.hub-input__check--switch]=\"type() === _inputFormats.Switch\">\n\t\t\t<input\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tclass=\"hub-input__check-input\"\n\t\t\t\t[class.hub-input__check-input--switch]=\"type() === _inputFormats.Switch\"\n\t\t\t\t[class.hub-input__check-input--invalid]=\"isInvalid\"\n\t\t\t\t[attr.role]=\"type() === _inputFormats.Switch ? 'switch' : null\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\t[checked]=\"$any(_value())\"\n\t\t\t\t(change)=\"setValue($event)\"\n\t\t\t\t[disabled]=\"disabled() || readonly()\"\n\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t/>\n\t\t\t@if (label() || required()) {\n\t\t\t\t<span class=\"hub-input__check-label\">\n\t\t\t\t\t{{ label() }}\n\t\t\t\t\t@if (required()) {\n\t\t\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t\t\t}\n\t\t\t\t</span>\n\t\t\t}\n\t\t</label>\n\t} @else {\n\t\t@if ((label() || required()) && labelType() !== _labelTypes.Floating) {\n\t\t\t<label [for]=\"id\" class=\"hub-field__label\">\n\t\t\t\t{{ label() }}\n\t\t\t\t@if (required()) {\n\t\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t\t}\n\t\t\t</label>\n\t\t}\n\n\t\t<div class=\"hub-field__body hub-input__row\">\n\t\t\t@switch (type()) {\n\t\t\t\t@case (_inputFormats.Counter) {\n\t\t\t\t\t<div class=\"hub-input__group hub-input__counter\">\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"hub-input__counter-btn\"\n\t\t\t\t\t\t\t[disabled]=\"disabled() || readonly() || (min() != null && $any(_value()) <= $any(min()))\"\n\t\t\t\t\t\t\taria-label=\"Decrease\"\n\t\t\t\t\t\t\t(click)=\"subtract()\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t&minus;\n\t\t\t\t\t\t</button>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tclass=\"hub-field__control hub-input__control--counter\"\n\t\t\t\t\t\t\t[class.hub-field__control--invalid]=\"isInvalid\"\n\t\t\t\t\t\t\t[class.hub-field__control--valid]=\"showsValid\"\n\t\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t\t[ngModel]=\"_value()\"\n\t\t\t\t\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t\t\t\t\t[min]=\"min() ?? null\"\n\t\t\t\t\t\t\t[max]=\"max() ?? null\"\n\t\t\t\t\t\t\t[step]=\"step()\"\n\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t[readonly]=\"readonly()\"\n\t\t\t\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"hub-input__counter-btn\"\n\t\t\t\t\t\t\t[disabled]=\"disabled() || readonly() || (max() != null && $any(_value()) >= $any(max()))\"\n\t\t\t\t\t\t\taria-label=\"Increase\"\n\t\t\t\t\t\t\t(click)=\"add()\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t+\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@case (_inputFormats.Color) {\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype=\"color\"\n\t\t\t\t\t\tclass=\"hub-field__control hub-input__control--color\"\n\t\t\t\t\t\t[class.hub-field__control--invalid]=\"isInvalid\"\n\t\t\t\t\t\t[class.hub-field__control--valid]=\"showsValid\"\n\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t[ngModel]=\"_value()\"\n\t\t\t\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t\t\t(blur)=\"handleBlur($event)\"\n\t\t\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t\t@case (_inputFormats.File) {\n\t\t\t\t\t<div class=\"hub-input__file\" [class.hub-input__file--invalid]=\"isInvalid\">\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t#fileInput\n\t\t\t\t\t\t\ttype=\"file\"\n\t\t\t\t\t\t\tclass=\"hub-input__file-native\"\n\t\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t\t[accept]=\"accept()\"\n\t\t\t\t\t\t\t[multiple]=\"multiple()\"\n\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t\t\t\t(change)=\"setFileValue($event)\"\n\t\t\t\t\t\t\t(blur)=\"handleBlur($event)\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"hub-input__file-button\"\n\t\t\t\t\t\t\t[disabled]=\"disabled() || readonly()\"\n\t\t\t\t\t\t\t(click)=\"triggerFile()\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{{ buttonLabel() }}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t\t<span class=\"hub-input__file-name\">{{ fileLabel() || placeholder() }}</span>\n\t\t\t\t\t\t@if (fileLabel() && !disabled() && !readonly()) {\n\t\t\t\t\t\t\t<button type=\"button\" class=\"hub-input__file-clear\" aria-label=\"Clear\" (click)=\"clearFile()\">&times;</button>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@default {\n\t\t\t\t\t<div class=\"hub-input__group\" [class.hub-input__group--floating]=\"labelType() === _labelTypes.Floating\">\n\t\t\t\t\t\t@for (addon of _prepend(); track $index) {\n\t\t\t\t\t\t\t<span class=\"hub-input__addon hub-input__addon--prepend\">{{ addon }}</span>\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tclass=\"hub-field__control\"\n\t\t\t\t\t\t\t[class.hub-field__control--invalid]=\"isInvalid\"\n\t\t\t\t\t\t\t[class.hub-field__control--valid]=\"showsValid\"\n\t\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t\t[type]=\"resolvedType()\"\n\t\t\t\t\t\t\t[ngModel]=\"_value()\"\n\t\t\t\t\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t\t\t\t\t(keyup.enter)=\"enter.emit(_value())\"\n\t\t\t\t\t\t\t[placeholder]=\"labelType() === _labelTypes.Floating ? (placeholder() || ' ') : placeholder()\"\n\t\t\t\t\t\t\t[min]=\"min() ?? null\"\n\t\t\t\t\t\t\t[max]=\"max() ?? null\"\n\t\t\t\t\t\t\t[step]=\"step()\"\n\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t[readonly]=\"readonly()\"\n\t\t\t\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t@for (addon of _append(); track $index) {\n\t\t\t\t\t\t\t<span class=\"hub-input__addon hub-input__addon--append\">{{ addon }}</span>\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t@if (labelType() === _labelTypes.Floating && (label() || required())) {\n\t\t\t\t\t\t\t<label [for]=\"id\" class=\"hub-field__label hub-input__label--floating\">\n\t\t\t\t\t\t\t\t{{ label() }}\n\t\t\t\t\t\t\t\t@if (required()) {\n\t\t\t\t\t\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t@if (type() === _inputFormats.Password) {\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"hub-input__password-toggle\"\n\t\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t\t[attr.aria-label]=\"showPassword ? 'Hide password' : 'Show password'\"\n\t\t\t\t\t\t\t[attr.aria-pressed]=\"showPassword\"\n\t\t\t\t\t\t\t(click)=\"togglePassword()\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span class=\"hub-input__password-icon\" [class.hub-input__password-icon--visible]=\"showPassword\"></span>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (formText() || formTextTmp()) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span class=\"hub-field__feedback-text\" [innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n\n\t@if (showsValid && validFeedback()) {\n\t\t<div class=\"hub-field__feedback hub-field__feedback--valid\" role=\"status\">\n\t\t\t<span class=\"hub-field__feedback-text\">{{ validFeedback() }}</span>\n\t\t</div>\n\t}\n</div>\n", styles: ["hub-input{display:block;font-family:var(--hub-input-font-family)}hub-input.hidden-control{display:none!important}.hub-input__row{display:flex;align-items:stretch;gap:var(--hub-ref-space-2, .5rem)}.hub-input__group{display:flex;align-items:stretch;flex:1 1 auto;min-width:0;position:relative}.hub-input__addon{display:flex;align-items:center;padding:0 var(--hub-input-padding-x);color:var(--hub-input-group-addon-color);background:var(--hub-input-group-addon-bg);border:var(--hub-input-border-width) solid var(--hub-input-group-addon-border-color);white-space:nowrap}.hub-input__addon--prepend{border-right:0;border-radius:var(--hub-input-border-radius) 0 0 var(--hub-input-border-radius)}.hub-input__addon--append{border-left:0;border-radius:0 var(--hub-input-border-radius) var(--hub-input-border-radius) 0}.hub-input__addon--prepend+.hub-field__control{border-top-left-radius:0;border-bottom-left-radius:0}.hub-input__group .hub-field__control:has(+.hub-input__addon--append){border-top-right-radius:0;border-bottom-right-radius:0}.hub-input__group--floating .hub-field__control{padding-top:calc(var(--hub-input-padding-y) + .625rem);padding-bottom:calc(var(--hub-input-padding-y) - .125rem)}.hub-input__group--floating .hub-input__label--floating{position:absolute;top:0;left:0;height:100%;padding:var(--hub-input-padding-y) var(--hub-input-padding-x);margin:0;color:var(--hub-input-placeholder-color);font-weight:var(--hub-ref-font-weight-base, 400);pointer-events:none;transform-origin:0 0;transition:opacity .1s ease-in-out,transform .1s ease-in-out}.hub-input__group--floating .hub-field__control:focus~.hub-input__label--floating,.hub-input__group--floating .hub-field__control:not(:placeholder-shown)~.hub-input__label--floating{transform:scale(.85) translateY(-.5rem);opacity:.9}.hub-input__counter{display:flex;align-items:stretch}.hub-input__counter-btn{flex:0 0 var(--hub-input-counter-button-width);display:inline-flex;align-items:center;justify-content:center;font-size:1.15rem;line-height:1;color:var(--hub-input-counter-button-color);background:var(--hub-input-counter-button-bg);border:var(--hub-input-border-width) solid var(--hub-input-border-color);cursor:pointer}.hub-input__counter-btn:first-child{border-right:0;border-radius:var(--hub-input-border-radius) 0 0 var(--hub-input-border-radius)}.hub-input__counter-btn:last-child{border-left:0;border-radius:0 var(--hub-input-border-radius) var(--hub-input-border-radius) 0}.hub-input__counter-btn:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-input__control--counter{border-radius:0;text-align:center;appearance:textfield}.hub-input__control--counter::-webkit-outer-spin-button,.hub-input__control--counter::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.hub-input__control--color{width:var(--hub-input-color-size);height:var(--hub-input-color-size);padding:.15rem;cursor:pointer}.hub-input__file{display:flex;align-items:stretch;width:100%;background:var(--hub-input-bg);border:var(--hub-input-border-width) solid var(--hub-input-border-color);border-radius:var(--hub-input-border-radius);overflow:hidden}.hub-input__file--invalid{border-color:var(--hub-form-invalid-border-color)}.hub-input__file-native{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.hub-input__file-button{flex:0 0 auto;padding:var(--hub-input-padding-y) var(--hub-input-padding-x);color:var(--hub-input-group-addon-color);background:var(--hub-input-group-addon-bg);border:0;border-right:var(--hub-input-border-width) solid var(--hub-input-border-color);font-size:var(--hub-input-font-size);white-space:nowrap;cursor:pointer}.hub-input__file-button:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-input__file-name{flex:1 1 auto;min-width:0;padding:var(--hub-input-padding-y) var(--hub-input-padding-x);color:var(--hub-input-placeholder-color);font-size:var(--hub-input-font-size);line-height:var(--hub-input-line-height);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hub-input__file-clear{flex:0 0 auto;width:2rem;color:var(--hub-input-placeholder-color);font-size:1.1rem;line-height:1;background:transparent;border:0;cursor:pointer}.hub-input__file-clear:hover{color:var(--hub-form-invalid-color)}.hub-input__password-toggle{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:2.5rem;padding:0;color:var(--hub-input-color);background:transparent;border:var(--hub-input-border-width) solid var(--hub-input-border-color);border-radius:var(--hub-input-border-radius);cursor:pointer;transition:var(--hub-input-transition)}.hub-input__password-toggle:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-input__password-icon{display:block;width:1.1rem;height:1.1rem;background-color:currentColor;--hub-input-eye-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z'/%3E%3Cpath d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z'/%3E%3C/svg%3E\");-webkit-mask:var(--hub-input-eye-mask) center/contain no-repeat;mask:var(--hub-input-eye-mask) center/contain no-repeat}.hub-input__password-icon--visible{--hub-input-eye-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z'/%3E%3Cpath d='M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z'/%3E%3Cpath d='M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z'/%3E%3C/svg%3E\")}.hub-input--checkable .hub-input__check{display:inline-flex;align-items:center;gap:var(--hub-check-label-gap);cursor:pointer}.hub-input__check-input{flex:0 0 auto;width:var(--hub-check-input-width);height:var(--hub-check-input-height);margin:0;appearance:none;background:var(--hub-check-input-bg);border:var(--hub-check-input-border-width) solid var(--hub-check-input-border-color);border-radius:var(--hub-check-input-border-radius);cursor:pointer;transition:var(--hub-input-transition)}.hub-input__check-input:checked{background:var(--hub-check-input-checked-bg) var(--hub-check-input-checked-icon) center/.85rem no-repeat;border-color:var(--hub-check-input-checked-border-color)}.hub-input__check-input:focus-visible{outline:0;box-shadow:var(--hub-input-focus-box-shadow)}.hub-input__check-input--invalid{border-color:var(--hub-form-invalid-border-color)}.hub-input__check-input:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-input__check-input--switch{position:relative;width:var(--hub-switch-width);height:var(--hub-switch-height);border:0;border-radius:var(--hub-ref-radius-pill, 50rem);background:var(--hub-switch-track-off)}.hub-input__check-input--switch:after{content:\"\";position:absolute;top:50%;left:.125rem;width:calc(var(--hub-switch-height) - .25rem);height:calc(var(--hub-switch-height) - .25rem);border-radius:50%;background:var(--hub-switch-thumb);transform:translateY(-50%);transition:left .15s ease-in-out}.hub-input__check-input--switch:checked{background:var(--hub-switch-track-on)}.hub-input__check-input--switch:checked:after{left:calc(100% - var(--hub-switch-height) + .125rem)}.hub-input__check-label{display:inline-flex;align-items:baseline;gap:.15rem;color:var(--hub-input-color);font-size:var(--hub-input-font-size)}.hub-input--checkable.hub-field--disabled .hub-input__check-label{opacity:var(--hub-form-disabled-opacity)}\n"] }]
         }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelType: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelType", required: false }] }, { type: i0.Output, args: ["labelTypeChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }, { type: i0.Output, args: ["placeholderChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }, { type: i0.Output, args: ["minChange"] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }, { type: i0.Output, args: ["maxChange"] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], formText: [{ type: i0.Input, args: [{ isSignal: true, alias: "formText", required: false }] }], formTextType: [{ type: i0.Input, args: [{ isSignal: true, alias: "formTextType", required: false }] }], prepend: [{ type: i0.Input, args: [{ isSignal: true, alias: "prepend", required: false }] }], append: [{ type: i0.Input, args: [{ isSignal: true, alias: "append", required: false }] }], classlist: [{ type: i0.Input, args: [{ isSignal: true, alias: "classlist", required: false }] }], mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], unmaskValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "unmaskValue", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], enter: [{ type: i0.Output, args: ["enter"] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], buttonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLabel", required: false }] }], fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }] } });
 
 /**
@@ -1272,6 +1295,7 @@ class HubOtpInputComponent extends HubFieldControl {
 			[class.hub-field--horizontal]="labelType() === _labelTypes.Horizontal"
 			[class.hub-field--disabled]="disabled()"
 			[class.hub-field--invalid]="isInvalid"
+			[class.hub-field--valid]="showsValid"
 		>
 			@if (label() || required()) {
 				<label class="hub-field__label">
@@ -1292,6 +1316,7 @@ class HubOtpInputComponent extends HubFieldControl {
 							#cell
 							class="hub-field__control hub-otp__cell"
 							[class.hub-field__control--invalid]="isInvalid"
+							[class.hub-field__control--valid]="showsValid"
 							[type]="secret() ? 'password' : 'text'"
 							[attr.inputmode]="mode() === 'numeric' ? 'numeric' : 'text'"
 							[attr.autocomplete]="index === 0 ? 'one-time-code' : 'off'"
@@ -1322,9 +1347,15 @@ class HubOtpInputComponent extends HubFieldControl {
 						</ul>
 					</div>
 				}
+
+				@if (showsValid && validFeedback()) {
+					<div class="hub-field__feedback hub-field__feedback--valid" role="status">
+						<span class="hub-field__feedback-text">{{ validFeedback() }}</span>
+					</div>
+				}
 			</div>
 		</div>
-	`, isInline: true, styles: [":root{--hub-otp-gap: var(--hub-ref-space-2, .5rem);--hub-otp-cell-size: 2.75rem;--hub-otp-cell-font-size: 1.25rem;--hub-otp-cell-radius: var(--hub-input-border-radius);--hub-otp-separator-color: var(--hub-sys-text-muted, #6c757d)}.hub-otp__cells{display:flex;align-items:center;gap:var(--hub-otp-gap);flex-wrap:wrap}.hub-otp__cell{width:var(--hub-otp-cell-size);min-width:var(--hub-otp-cell-size);height:var(--hub-otp-cell-size);padding:0;text-align:center;font-size:var(--hub-otp-cell-font-size);font-weight:600;font-variant-numeric:tabular-nums;border-radius:var(--hub-otp-cell-radius)}.hub-otp__separator{color:var(--hub-otp-separator-color);font-weight:600;-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+	`, isInline: true, styles: [":root{--hub-otp-gap: var(--hub-ref-space-2, .5rem);--hub-otp-cell-size: 2.75rem;--hub-otp-cell-font-size: 1.25rem;--hub-otp-cell-radius: var(--hub-input-border-radius);--hub-otp-separator-color: var(--hub-sys-text-muted, #6c757d)}.hub-otp__cells{display:flex;align-items:center;gap:var(--hub-otp-gap);flex-wrap:wrap}.hub-otp__cell{width:var(--hub-otp-cell-size);min-width:var(--hub-otp-cell-size);height:var(--hub-otp-cell-size);padding:0;text-align:center;font-size:var(--hub-otp-cell-font-size);font-weight:var(--hub-ref-font-weight-semibold, 600);font-variant-numeric:tabular-nums;border-radius:var(--hub-otp-cell-radius)}.hub-otp__separator{color:var(--hub-otp-separator-color);font-weight:var(--hub-ref-font-weight-semibold, 600);-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubOtpInputComponent, decorators: [{
             type: Component,
@@ -1337,6 +1368,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
 			[class.hub-field--horizontal]="labelType() === _labelTypes.Horizontal"
 			[class.hub-field--disabled]="disabled()"
 			[class.hub-field--invalid]="isInvalid"
+			[class.hub-field--valid]="showsValid"
 		>
 			@if (label() || required()) {
 				<label class="hub-field__label">
@@ -1357,6 +1389,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
 							#cell
 							class="hub-field__control hub-otp__cell"
 							[class.hub-field__control--invalid]="isInvalid"
+							[class.hub-field__control--valid]="showsValid"
 							[type]="secret() ? 'password' : 'text'"
 							[attr.inputmode]="mode() === 'numeric' ? 'numeric' : 'text'"
 							[attr.autocomplete]="index === 0 ? 'one-time-code' : 'off'"
@@ -1387,9 +1420,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
 						</ul>
 					</div>
 				}
+
+				@if (showsValid && validFeedback()) {
+					<div class="hub-field__feedback hub-field__feedback--valid" role="status">
+						<span class="hub-field__feedback-text">{{ validFeedback() }}</span>
+					</div>
+				}
 			</div>
 		</div>
-	`, styles: [":root{--hub-otp-gap: var(--hub-ref-space-2, .5rem);--hub-otp-cell-size: 2.75rem;--hub-otp-cell-font-size: 1.25rem;--hub-otp-cell-radius: var(--hub-input-border-radius);--hub-otp-separator-color: var(--hub-sys-text-muted, #6c757d)}.hub-otp__cells{display:flex;align-items:center;gap:var(--hub-otp-gap);flex-wrap:wrap}.hub-otp__cell{width:var(--hub-otp-cell-size);min-width:var(--hub-otp-cell-size);height:var(--hub-otp-cell-size);padding:0;text-align:center;font-size:var(--hub-otp-cell-font-size);font-weight:600;font-variant-numeric:tabular-nums;border-radius:var(--hub-otp-cell-radius)}.hub-otp__separator{color:var(--hub-otp-separator-color);font-weight:600;-webkit-user-select:none;user-select:none}\n"] }]
+	`, styles: [":root{--hub-otp-gap: var(--hub-ref-space-2, .5rem);--hub-otp-cell-size: 2.75rem;--hub-otp-cell-font-size: 1.25rem;--hub-otp-cell-radius: var(--hub-input-border-radius);--hub-otp-separator-color: var(--hub-sys-text-muted, #6c757d)}.hub-otp__cells{display:flex;align-items:center;gap:var(--hub-otp-gap);flex-wrap:wrap}.hub-otp__cell{width:var(--hub-otp-cell-size);min-width:var(--hub-otp-cell-size);height:var(--hub-otp-cell-size);padding:0;text-align:center;font-size:var(--hub-otp-cell-font-size);font-weight:var(--hub-ref-font-weight-semibold, 600);font-variant-numeric:tabular-nums;border-radius:var(--hub-otp-cell-radius)}.hub-otp__separator{color:var(--hub-otp-separator-color);font-weight:var(--hub-ref-font-weight-semibold, 600);-webkit-user-select:none;user-select:none}\n"] }]
         }], propDecorators: { length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelType: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelType", required: false }] }], formText: [{ type: i0.Input, args: [{ isSignal: true, alias: "formText", required: false }] }], formTextType: [{ type: i0.Input, args: [{ isSignal: true, alias: "formTextType", required: false }] }], secret: [{ type: i0.Input, args: [{ isSignal: true, alias: "secret", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], separatorEvery: [{ type: i0.Input, args: [{ isSignal: true, alias: "separatorEvery", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], classlist: [{ type: i0.Input, args: [{ isSignal: true, alias: "classlist", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], completed: [{ type: i0.Output, args: ["completed"] }], _cells: [{ type: i0.ViewChildren, args: ['cell', { isSignal: true }] }] } });
 
 /**
@@ -1510,14 +1549,14 @@ class HubTextareaComponent extends HubFieldControl {
         this.valueChange.emit(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: HubTextareaComponent, isStandalone: true, selector: "hub-textarea", inputs: { 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 }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, cols: { classPropertyName: "cols", publicName: "cols", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, autoresize: { classPropertyName: "autoresize", publicName: "autoresize", isSignal: true, isRequired: false, transformFunction: null }, counter: { classPropertyName: "counter", publicName: "counter", 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 }, classlist: { classPropertyName: "classlist", publicName: "classlist", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { properties: { "class": "classlist()", "class.hub-textarea-host": "true" } }, usesInheritance: true, ngImport: i0, template: "<div\n\tclass=\"hub-field hub-textarea\"\n\t[class.hub-field--horizontal]=\"labelType() === _labelTypes.Horizontal || (!label() && required())\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n>\n\t@if (label() || required()) {\n\t\t<label [for]=\"id\" class=\"hub-field__label\">\n\t\t\t{{ label() }}\n\t\t\t@if (required()) {\n\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t}\n\t\t</label>\n\t}\n\n\t<div class=\"hub-field__body\">\n\t\t<textarea\n\t\t\tclass=\"hub-field__control hub-textarea__control\"\n\t\t\t[class.hub-field__control--invalid]=\"isInvalid\"\n\t\t\t[id]=\"id\"\n\t\t\t[hubAutoresize]=\"autoresize()\"\n\t\t\t[ngModel]=\"_value()\"\n\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t[attr.rows]=\"rows()\"\n\t\t\t[attr.cols]=\"cols()\"\n\t\t\t[attr.maxlength]=\"maxlength()\"\n\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t[disabled]=\"disabled()\"\n\t\t\t[readonly]=\"readonly()\"\n\t\t\t[required]=\"!!required()\"\n\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t[style.width]=\"cols() ? 'auto' : '100%'\"\n\t\t></textarea>\n\t</div>\n\n\t@if (counter()) {\n\t\t<div class=\"hub-textarea__counter\" [class.hub-field__form-text--disabled]=\"disabled()\">{{ counterText() }}</div>\n\t}\n\n\t@if (formText() || formTextTmp()) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span class=\"hub-field__feedback-text\" [innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n</div>\n", styles: ["hub-textarea{display:block}hub-textarea.hidden-control{display:none!important}.hub-textarea__control{min-height:var(--hub-textarea-min-height);padding:var(--hub-textarea-padding-y) var(--hub-textarea-padding-x);border-radius:var(--hub-textarea-border-radius);resize:vertical}.hub-textarea__counter{margin-top:var(--hub-form-text-margin-top);color:var(--hub-form-text-color);font-size:var(--hub-form-text-font-size);text-align:right}\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.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: "directive", type: HubAutoresizeDirective, selector: "textarea[hubAutoresize]", inputs: ["hubAutoresize"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: HubTextareaComponent, isStandalone: true, selector: "hub-textarea", inputs: { 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 }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, cols: { classPropertyName: "cols", publicName: "cols", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, autoresize: { classPropertyName: "autoresize", publicName: "autoresize", isSignal: true, isRequired: false, transformFunction: null }, counter: { classPropertyName: "counter", publicName: "counter", 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 }, classlist: { classPropertyName: "classlist", publicName: "classlist", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { properties: { "class": "classlist()", "class.hub-textarea-host": "true" } }, usesInheritance: true, ngImport: i0, template: "<div\n\tclass=\"hub-field hub-textarea\"\n\t[class.hub-field--horizontal]=\"labelType() === _labelTypes.Horizontal || (!label() && required())\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n\t[class.hub-field--valid]=\"showsValid\"\n>\n\t@if (label() || required()) {\n\t\t<label [for]=\"id\" class=\"hub-field__label\">\n\t\t\t{{ label() }}\n\t\t\t@if (required()) {\n\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t}\n\t\t</label>\n\t}\n\n\t<div class=\"hub-field__body\">\n\t\t<textarea\n\t\t\tclass=\"hub-field__control hub-textarea__control\"\n\t\t\t[class.hub-field__control--invalid]=\"isInvalid\"\n\t\t\t[class.hub-field__control--valid]=\"showsValid\"\n\t\t\t[id]=\"id\"\n\t\t\t[hubAutoresize]=\"autoresize()\"\n\t\t\t[ngModel]=\"_value()\"\n\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t[attr.rows]=\"rows()\"\n\t\t\t[attr.cols]=\"cols()\"\n\t\t\t[attr.maxlength]=\"maxlength()\"\n\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t[disabled]=\"disabled()\"\n\t\t\t[readonly]=\"readonly()\"\n\t\t\t[required]=\"!!required()\"\n\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t[style.width]=\"cols() ? 'auto' : '100%'\"\n\t\t></textarea>\n\t</div>\n\n\t@if (counter()) {\n\t\t<div class=\"hub-textarea__counter\" [class.hub-field__form-text--disabled]=\"disabled()\">{{ counterText() }}</div>\n\t}\n\n\t@if (formText() || formTextTmp()) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span class=\"hub-field__feedback-text\" [innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n\n\t@if (showsValid && validFeedback()) {\n\t\t<div class=\"hub-field__feedback hub-field__feedback--valid\" role=\"status\">\n\t\t\t<span class=\"hub-field__feedback-text\">{{ validFeedback() }}</span>\n\t\t</div>\n\t}\n</div>\n", styles: ["hub-textarea{display:block}hub-textarea.hidden-control{display:none!important}.hub-textarea__control{min-height:var(--hub-textarea-min-height);padding:var(--hub-textarea-padding-y) var(--hub-textarea-padding-x);border-radius:var(--hub-textarea-border-radius);resize:vertical}.hub-textarea__counter{margin-top:var(--hub-form-text-margin-top);color:var(--hub-form-text-color);font-size:var(--hub-form-text-font-size);text-align:right}\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.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: "directive", type: HubAutoresizeDirective, selector: "textarea[hubAutoresize]", inputs: ["hubAutoresize"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubTextareaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'hub-textarea', imports: [NgTemplateOutlet, KeyValuePipe, FormsModule, HubAutoresizeDirective], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         '[class]': 'classlist()',
                         '[class.hub-textarea-host]': 'true'
-                    }, template: "<div\n\tclass=\"hub-field hub-textarea\"\n\t[class.hub-field--horizontal]=\"labelType() === _labelTypes.Horizontal || (!label() && required())\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n>\n\t@if (label() || required()) {\n\t\t<label [for]=\"id\" class=\"hub-field__label\">\n\t\t\t{{ label() }}\n\t\t\t@if (required()) {\n\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t}\n\t\t</label>\n\t}\n\n\t<div class=\"hub-field__body\">\n\t\t<textarea\n\t\t\tclass=\"hub-field__control hub-textarea__control\"\n\t\t\t[class.hub-field__control--invalid]=\"isInvalid\"\n\t\t\t[id]=\"id\"\n\t\t\t[hubAutoresize]=\"autoresize()\"\n\t\t\t[ngModel]=\"_value()\"\n\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t[attr.rows]=\"rows()\"\n\t\t\t[attr.cols]=\"cols()\"\n\t\t\t[attr.maxlength]=\"maxlength()\"\n\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t[disabled]=\"disabled()\"\n\t\t\t[readonly]=\"readonly()\"\n\t\t\t[required]=\"!!required()\"\n\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t[style.width]=\"cols() ? 'auto' : '100%'\"\n\t\t></textarea>\n\t</div>\n\n\t@if (counter()) {\n\t\t<div class=\"hub-textarea__counter\" [class.hub-field__form-text--disabled]=\"disabled()\">{{ counterText() }}</div>\n\t}\n\n\t@if (formText() || formTextTmp()) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span class=\"hub-field__feedback-text\" [innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n</div>\n", styles: ["hub-textarea{display:block}hub-textarea.hidden-control{display:none!important}.hub-textarea__control{min-height:var(--hub-textarea-min-height);padding:var(--hub-textarea-padding-y) var(--hub-textarea-padding-x);border-radius:var(--hub-textarea-border-radius);resize:vertical}.hub-textarea__counter{margin-top:var(--hub-form-text-margin-top);color:var(--hub-form-text-color);font-size:var(--hub-form-text-font-size);text-align:right}\n"] }]
+                    }, template: "<div\n\tclass=\"hub-field hub-textarea\"\n\t[class.hub-field--horizontal]=\"labelType() === _labelTypes.Horizontal || (!label() && required())\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n\t[class.hub-field--valid]=\"showsValid\"\n>\n\t@if (label() || required()) {\n\t\t<label [for]=\"id\" class=\"hub-field__label\">\n\t\t\t{{ label() }}\n\t\t\t@if (required()) {\n\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t}\n\t\t</label>\n\t}\n\n\t<div class=\"hub-field__body\">\n\t\t<textarea\n\t\t\tclass=\"hub-field__control hub-textarea__control\"\n\t\t\t[class.hub-field__control--invalid]=\"isInvalid\"\n\t\t\t[class.hub-field__control--valid]=\"showsValid\"\n\t\t\t[id]=\"id\"\n\t\t\t[hubAutoresize]=\"autoresize()\"\n\t\t\t[ngModel]=\"_value()\"\n\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t[attr.rows]=\"rows()\"\n\t\t\t[attr.cols]=\"cols()\"\n\t\t\t[attr.maxlength]=\"maxlength()\"\n\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t[disabled]=\"disabled()\"\n\t\t\t[readonly]=\"readonly()\"\n\t\t\t[required]=\"!!required()\"\n\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t[style.width]=\"cols() ? 'auto' : '100%'\"\n\t\t></textarea>\n\t</div>\n\n\t@if (counter()) {\n\t\t<div class=\"hub-textarea__counter\" [class.hub-field__form-text--disabled]=\"disabled()\">{{ counterText() }}</div>\n\t}\n\n\t@if (formText() || formTextTmp()) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span class=\"hub-field__feedback-text\" [innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n\n\t@if (showsValid && validFeedback()) {\n\t\t<div class=\"hub-field__feedback hub-field__feedback--valid\" role=\"status\">\n\t\t\t<span class=\"hub-field__feedback-text\">{{ validFeedback() }}</span>\n\t\t</div>\n\t}\n</div>\n", styles: ["hub-textarea{display:block}hub-textarea.hidden-control{display:none!important}.hub-textarea__control{min-height:var(--hub-textarea-min-height);padding:var(--hub-textarea-padding-y) var(--hub-textarea-padding-x);border-radius:var(--hub-textarea-border-radius);resize:vertical}.hub-textarea__counter{margin-top:var(--hub-form-text-margin-top);color:var(--hub-form-text-color);font-size:var(--hub-form-text-font-size);text-align:right}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelType: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelType", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], cols: [{ type: i0.Input, args: [{ isSignal: true, alias: "cols", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], autoresize: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoresize", required: false }] }], counter: [{ type: i0.Input, args: [{ isSignal: true, alias: "counter", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], formText: [{ type: i0.Input, args: [{ isSignal: true, alias: "formText", required: false }] }], formTextType: [{ type: i0.Input, args: [{ isSignal: true, alias: "formTextType", required: false }] }], classlist: [{ type: i0.Input, args: [{ isSignal: true, alias: "classlist", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
 
 /**
@@ -1639,14 +1678,14 @@ class HubSliderComponent extends HubFieldControl {
         return Math.min(100, Math.max(0, ratio));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubSliderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: HubSliderComponent, isStandalone: true, selector: "hub-slider", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelType: { classPropertyName: "labelType", publicName: "labelType", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, formText: { classPropertyName: "formText", publicName: "formText", isSignal: true, isRequired: false, transformFunction: null }, formTextType: { classPropertyName: "formTextType", publicName: "formTextType", isSignal: true, isRequired: false, transformFunction: null }, classlist: { classPropertyName: "classlist", publicName: "classlist", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { properties: { "class": "classlist()", "class.hub-slider-host": "true" } }, usesInheritance: true, ngImport: i0, template: "<div\n\tclass=\"hub-field hub-slider\"\n\t[class.hub-field--horizontal]=\"label() && labelType() === _labelTypes.Horizontal\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n\t[style.--hub-slider-percent]=\"percent()\"\n\t[style.--hub-slider-from]=\"lowerPercent()\"\n\t[style.--hub-slider-to]=\"upperPercent()\"\n>\n\t@if (label() || required()) {\n\t\t<label [for]=\"id\" class=\"hub-field__label\">\n\t\t\t{{ label() }}\n\t\t\t@if (required()) {\n\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t}\n\t\t</label>\n\t}\n\n\t<div class=\"hub-field__body hub-slider__range\" [class.hub-slider__range--dual]=\"range()\">\n\t\t@if (range()) {\n\t\t\t<div class=\"hub-slider__rail\" aria-hidden=\"true\"></div>\n\n\t\t\t<input\n\t\t\t\ttype=\"range\"\n\t\t\t\tclass=\"hub-slider__track hub-slider__track--lower\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\t[min]=\"min()\"\n\t\t\t\t[max]=\"max()\"\n\t\t\t\t[step]=\"step()\"\n\t\t\t\t[value]=\"lower()\"\n\t\t\t\t(input)=\"setLower($any($event.target).value)\"\n\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\taria-label=\"Range start\"\n\t\t\t\t[attr.aria-valuetext]=\"lower()\"\n\t\t\t/>\n\t\t\t<input\n\t\t\t\ttype=\"range\"\n\t\t\t\tclass=\"hub-slider__track hub-slider__track--upper\"\n\t\t\t\t[min]=\"min()\"\n\t\t\t\t[max]=\"max()\"\n\t\t\t\t[step]=\"step()\"\n\t\t\t\t[value]=\"upper()\"\n\t\t\t\t(input)=\"setUpper($any($event.target).value)\"\n\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\taria-label=\"Range end\"\n\t\t\t\t[attr.aria-valuetext]=\"upper()\"\n\t\t\t/>\n\n\t\t\t@if (showValue()) {\n\t\t\t\t<span class=\"hub-slider__bubble hub-slider__bubble--lower\" aria-hidden=\"true\">{{ lower() }}</span>\n\t\t\t\t<span class=\"hub-slider__bubble hub-slider__bubble--upper\" aria-hidden=\"true\">{{ upper() }}</span>\n\t\t\t}\n\t\t} @else {\n\t\t\t<input\n\t\t\t\ttype=\"range\"\n\t\t\t\tclass=\"hub-slider__track\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\t[min]=\"min()\"\n\t\t\t\t[max]=\"max()\"\n\t\t\t\t[step]=\"step()\"\n\t\t\t\t[value]=\"single()\"\n\t\t\t\t(input)=\"setValue($any($event.target).value)\"\n\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t[attr.aria-valuetext]=\"single()\"\n\t\t\t/>\n\n\t\t\t@if (showValue()) {\n\t\t\t\t<span class=\"hub-slider__bubble\" aria-hidden=\"true\">{{ single() }}</span>\n\t\t\t}\n\t\t}\n\t</div>\n\n\t@if (formText() || formTextTmp()) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span class=\"hub-field__feedback-text\" [innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n</div>\n", styles: ["hub-slider{display:block}hub-slider.hidden-control{display:none!important}.hub-slider__range{position:relative;padding-top:1.75rem}.hub-slider__track{width:var(--hub-slider-track-width);height:var(--hub-slider-track-height);margin:0;appearance:none;-webkit-appearance:none;background:linear-gradient(to right,var(--hub-slider-track-fill-bg) calc(var(--hub-slider-percent) * 1%),var(--hub-slider-track-bg) calc(var(--hub-slider-percent) * 1%));border-radius:var(--hub-slider-track-border-radius);cursor:pointer}.hub-slider__track:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-slider__track::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:var(--hub-slider-thumb-width);height:var(--hub-slider-thumb-height);border-radius:var(--hub-slider-thumb-border-radius);background:var(--hub-slider-thumb-bg);border:var(--hub-slider-thumb-border);box-shadow:var(--hub-slider-thumb-shadow);cursor:pointer}.hub-slider__track::-moz-range-thumb{width:var(--hub-slider-thumb-width);height:var(--hub-slider-thumb-height);border-radius:var(--hub-slider-thumb-border-radius);background:var(--hub-slider-thumb-bg);border:var(--hub-slider-thumb-border);box-shadow:var(--hub-slider-thumb-shadow);cursor:pointer}.hub-slider__track::-moz-range-track{height:var(--hub-slider-track-height);background:transparent;border-radius:var(--hub-slider-track-border-radius)}.hub-slider__track:focus-visible{outline:0}.hub-slider__track:focus-visible::-webkit-slider-thumb{box-shadow:var(--hub-slider-thumb-shadow),var(--hub-input-focus-box-shadow)}.hub-slider__track:focus-visible::-moz-range-thumb{box-shadow:var(--hub-slider-thumb-shadow),var(--hub-input-focus-box-shadow)}.hub-slider__bubble{position:absolute;top:0;left:calc(var(--hub-slider-percent) * 1%);transform:translate(-50%);padding:.1rem .4rem;color:var(--hub-slider-tooltip-color);background:var(--hub-slider-tooltip-bg);font-size:var(--hub-ref-font-size-sm, .875rem);line-height:1.4;border-radius:var(--hub-slider-tooltip-border-radius);white-space:nowrap;pointer-events:none}.hub-slider__bubble--lower{left:calc(var(--hub-slider-from) * 1%)}.hub-slider__bubble--upper{left:calc(var(--hub-slider-to) * 1%)}.hub-slider__range--dual{min-height:calc(1.75rem + var(--hub-slider-thumb-height))}.hub-slider__range--dual .hub-slider__rail,.hub-slider__range--dual .hub-slider__track--lower,.hub-slider__range--dual .hub-slider__track--upper{position:absolute;left:0;right:0;top:calc(1.75rem + var(--hub-slider-thumb-height) / 2)}.hub-slider__range--dual .hub-slider__rail{height:var(--hub-slider-track-height);transform:translateY(-50%);border-radius:var(--hub-slider-track-border-radius);background:linear-gradient(to right,var(--hub-slider-track-bg) calc(var(--hub-slider-from) * 1%),var(--hub-slider-track-fill-bg) calc(var(--hub-slider-from) * 1%),var(--hub-slider-track-fill-bg) calc(var(--hub-slider-to) * 1%),var(--hub-slider-track-bg) calc(var(--hub-slider-to) * 1%));pointer-events:none}.hub-slider__range--dual .hub-slider__track--lower,.hub-slider__range--dual .hub-slider__track--upper{width:100%;height:var(--hub-slider-thumb-height);margin:0;transform:translateY(-50%);background:transparent;pointer-events:none}.hub-slider__range--dual .hub-slider__track--lower::-webkit-slider-thumb,.hub-slider__range--dual .hub-slider__track--upper::-webkit-slider-thumb{pointer-events:auto;position:relative;z-index:2}.hub-slider__range--dual .hub-slider__track--lower::-moz-range-thumb,.hub-slider__range--dual .hub-slider__track--upper::-moz-range-thumb{pointer-events:auto}.hub-slider__range--dual .hub-slider__track--lower::-moz-range-track,.hub-slider__range--dual .hub-slider__track--upper::-moz-range-track{background:transparent}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: HubSliderComponent, isStandalone: true, selector: "hub-slider", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelType: { classPropertyName: "labelType", publicName: "labelType", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, formText: { classPropertyName: "formText", publicName: "formText", isSignal: true, isRequired: false, transformFunction: null }, formTextType: { classPropertyName: "formTextType", publicName: "formTextType", isSignal: true, isRequired: false, transformFunction: null }, classlist: { classPropertyName: "classlist", publicName: "classlist", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { properties: { "class": "classlist()", "class.hub-slider-host": "true" } }, usesInheritance: true, ngImport: i0, template: "<div\n\tclass=\"hub-field hub-slider\"\n\t[class.hub-field--horizontal]=\"label() && labelType() === _labelTypes.Horizontal\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n\t[class.hub-field--valid]=\"showsValid\"\n\t[style.--hub-slider-percent]=\"percent()\"\n\t[style.--hub-slider-from]=\"lowerPercent()\"\n\t[style.--hub-slider-to]=\"upperPercent()\"\n>\n\t@if (label() || required()) {\n\t\t<label [for]=\"id\" class=\"hub-field__label\">\n\t\t\t{{ label() }}\n\t\t\t@if (required()) {\n\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t}\n\t\t</label>\n\t}\n\n\t<div class=\"hub-field__body hub-slider__range\" [class.hub-slider__range--dual]=\"range()\">\n\t\t@if (range()) {\n\t\t\t<div class=\"hub-slider__rail\" aria-hidden=\"true\"></div>\n\n\t\t\t<input\n\t\t\t\ttype=\"range\"\n\t\t\t\tclass=\"hub-slider__track hub-slider__track--lower\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\t[min]=\"min()\"\n\t\t\t\t[max]=\"max()\"\n\t\t\t\t[step]=\"step()\"\n\t\t\t\t[value]=\"lower()\"\n\t\t\t\t(input)=\"setLower($any($event.target).value)\"\n\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\taria-label=\"Range start\"\n\t\t\t\t[attr.aria-valuetext]=\"lower()\"\n\t\t\t/>\n\t\t\t<input\n\t\t\t\ttype=\"range\"\n\t\t\t\tclass=\"hub-slider__track hub-slider__track--upper\"\n\t\t\t\t[min]=\"min()\"\n\t\t\t\t[max]=\"max()\"\n\t\t\t\t[step]=\"step()\"\n\t\t\t\t[value]=\"upper()\"\n\t\t\t\t(input)=\"setUpper($any($event.target).value)\"\n\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\taria-label=\"Range end\"\n\t\t\t\t[attr.aria-valuetext]=\"upper()\"\n\t\t\t/>\n\n\t\t\t@if (showValue()) {\n\t\t\t\t<span class=\"hub-slider__bubble hub-slider__bubble--lower\" aria-hidden=\"true\">{{ lower() }}</span>\n\t\t\t\t<span class=\"hub-slider__bubble hub-slider__bubble--upper\" aria-hidden=\"true\">{{ upper() }}</span>\n\t\t\t}\n\t\t} @else {\n\t\t\t<input\n\t\t\t\ttype=\"range\"\n\t\t\t\tclass=\"hub-slider__track\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\t[min]=\"min()\"\n\t\t\t\t[max]=\"max()\"\n\t\t\t\t[step]=\"step()\"\n\t\t\t\t[value]=\"single()\"\n\t\t\t\t(input)=\"setValue($any($event.target).value)\"\n\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t[attr.aria-valuetext]=\"single()\"\n\t\t\t/>\n\n\t\t\t@if (showValue()) {\n\t\t\t\t<span class=\"hub-slider__bubble\" aria-hidden=\"true\">{{ single() }}</span>\n\t\t\t}\n\t\t}\n\t</div>\n\n\t@if (formText() || formTextTmp()) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span class=\"hub-field__feedback-text\" [innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n\n\t@if (showsValid && validFeedback()) {\n\t\t<div class=\"hub-field__feedback hub-field__feedback--valid\" role=\"status\">\n\t\t\t<span class=\"hub-field__feedback-text\">{{ validFeedback() }}</span>\n\t\t</div>\n\t}\n</div>\n", styles: ["hub-slider{display:block}hub-slider.hidden-control{display:none!important}.hub-slider__range{position:relative;padding-top:1.75rem}.hub-slider__track{width:var(--hub-slider-track-width);height:var(--hub-slider-track-height);margin:0;appearance:none;-webkit-appearance:none;background:linear-gradient(to right,var(--hub-slider-track-fill-bg) calc(var(--hub-slider-percent) * 1%),var(--hub-slider-track-bg) calc(var(--hub-slider-percent) * 1%));border-radius:var(--hub-slider-track-border-radius);cursor:pointer}.hub-slider__track:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-slider__track::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:var(--hub-slider-thumb-width);height:var(--hub-slider-thumb-height);border-radius:var(--hub-slider-thumb-border-radius);background:var(--hub-slider-thumb-bg);border:var(--hub-slider-thumb-border);box-shadow:var(--hub-slider-thumb-shadow);cursor:pointer}.hub-slider__track::-moz-range-thumb{width:var(--hub-slider-thumb-width);height:var(--hub-slider-thumb-height);border-radius:var(--hub-slider-thumb-border-radius);background:var(--hub-slider-thumb-bg);border:var(--hub-slider-thumb-border);box-shadow:var(--hub-slider-thumb-shadow);cursor:pointer}.hub-slider__track::-moz-range-track{height:var(--hub-slider-track-height);background:transparent;border-radius:var(--hub-slider-track-border-radius)}.hub-slider__track:focus-visible{outline:0}.hub-slider__track:focus-visible::-webkit-slider-thumb{box-shadow:var(--hub-slider-thumb-shadow),var(--hub-input-focus-box-shadow)}.hub-slider__track:focus-visible::-moz-range-thumb{box-shadow:var(--hub-slider-thumb-shadow),var(--hub-input-focus-box-shadow)}.hub-slider__bubble{position:absolute;top:0;left:calc(var(--hub-slider-percent) * 1%);transform:translate(-50%);padding:.1rem .4rem;color:var(--hub-slider-tooltip-color);background:var(--hub-slider-tooltip-bg);font-size:var(--hub-ref-font-size-sm, .875rem);line-height:1.4;border-radius:var(--hub-slider-tooltip-border-radius);white-space:nowrap;pointer-events:none}.hub-slider__bubble--lower{left:calc(var(--hub-slider-from) * 1%)}.hub-slider__bubble--upper{left:calc(var(--hub-slider-to) * 1%)}.hub-slider__range--dual{min-height:calc(1.75rem + var(--hub-slider-thumb-height))}.hub-slider__range--dual .hub-slider__rail,.hub-slider__range--dual .hub-slider__track--lower,.hub-slider__range--dual .hub-slider__track--upper{position:absolute;left:0;right:0;top:calc(1.75rem + var(--hub-slider-thumb-height) / 2)}.hub-slider__range--dual .hub-slider__rail{height:var(--hub-slider-track-height);transform:translateY(-50%);border-radius:var(--hub-slider-track-border-radius);background:linear-gradient(to right,var(--hub-slider-track-bg) calc(var(--hub-slider-from) * 1%),var(--hub-slider-track-fill-bg) calc(var(--hub-slider-from) * 1%),var(--hub-slider-track-fill-bg) calc(var(--hub-slider-to) * 1%),var(--hub-slider-track-bg) calc(var(--hub-slider-to) * 1%));pointer-events:none}.hub-slider__range--dual .hub-slider__track--lower,.hub-slider__range--dual .hub-slider__track--upper{width:100%;height:var(--hub-slider-thumb-height);margin:0;transform:translateY(-50%);background:transparent;pointer-events:none}.hub-slider__range--dual .hub-slider__track--lower::-webkit-slider-thumb,.hub-slider__range--dual .hub-slider__track--upper::-webkit-slider-thumb{pointer-events:auto;position:relative;z-index:2}.hub-slider__range--dual .hub-slider__track--lower::-moz-range-thumb,.hub-slider__range--dual .hub-slider__track--upper::-moz-range-thumb{pointer-events:auto}.hub-slider__range--dual .hub-slider__track--lower::-moz-range-track,.hub-slider__range--dual .hub-slider__track--upper::-moz-range-track{background:transparent}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubSliderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'hub-slider', imports: [NgTemplateOutlet, KeyValuePipe, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         '[class]': 'classlist()',
                         '[class.hub-slider-host]': 'true'
-                    }, template: "<div\n\tclass=\"hub-field hub-slider\"\n\t[class.hub-field--horizontal]=\"label() && labelType() === _labelTypes.Horizontal\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n\t[style.--hub-slider-percent]=\"percent()\"\n\t[style.--hub-slider-from]=\"lowerPercent()\"\n\t[style.--hub-slider-to]=\"upperPercent()\"\n>\n\t@if (label() || required()) {\n\t\t<label [for]=\"id\" class=\"hub-field__label\">\n\t\t\t{{ label() }}\n\t\t\t@if (required()) {\n\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t}\n\t\t</label>\n\t}\n\n\t<div class=\"hub-field__body hub-slider__range\" [class.hub-slider__range--dual]=\"range()\">\n\t\t@if (range()) {\n\t\t\t<div class=\"hub-slider__rail\" aria-hidden=\"true\"></div>\n\n\t\t\t<input\n\t\t\t\ttype=\"range\"\n\t\t\t\tclass=\"hub-slider__track hub-slider__track--lower\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\t[min]=\"min()\"\n\t\t\t\t[max]=\"max()\"\n\t\t\t\t[step]=\"step()\"\n\t\t\t\t[value]=\"lower()\"\n\t\t\t\t(input)=\"setLower($any($event.target).value)\"\n\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\taria-label=\"Range start\"\n\t\t\t\t[attr.aria-valuetext]=\"lower()\"\n\t\t\t/>\n\t\t\t<input\n\t\t\t\ttype=\"range\"\n\t\t\t\tclass=\"hub-slider__track hub-slider__track--upper\"\n\t\t\t\t[min]=\"min()\"\n\t\t\t\t[max]=\"max()\"\n\t\t\t\t[step]=\"step()\"\n\t\t\t\t[value]=\"upper()\"\n\t\t\t\t(input)=\"setUpper($any($event.target).value)\"\n\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\taria-label=\"Range end\"\n\t\t\t\t[attr.aria-valuetext]=\"upper()\"\n\t\t\t/>\n\n\t\t\t@if (showValue()) {\n\t\t\t\t<span class=\"hub-slider__bubble hub-slider__bubble--lower\" aria-hidden=\"true\">{{ lower() }}</span>\n\t\t\t\t<span class=\"hub-slider__bubble hub-slider__bubble--upper\" aria-hidden=\"true\">{{ upper() }}</span>\n\t\t\t}\n\t\t} @else {\n\t\t\t<input\n\t\t\t\ttype=\"range\"\n\t\t\t\tclass=\"hub-slider__track\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\t[min]=\"min()\"\n\t\t\t\t[max]=\"max()\"\n\t\t\t\t[step]=\"step()\"\n\t\t\t\t[value]=\"single()\"\n\t\t\t\t(input)=\"setValue($any($event.target).value)\"\n\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t[attr.aria-valuetext]=\"single()\"\n\t\t\t/>\n\n\t\t\t@if (showValue()) {\n\t\t\t\t<span class=\"hub-slider__bubble\" aria-hidden=\"true\">{{ single() }}</span>\n\t\t\t}\n\t\t}\n\t</div>\n\n\t@if (formText() || formTextTmp()) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span class=\"hub-field__feedback-text\" [innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n</div>\n", styles: ["hub-slider{display:block}hub-slider.hidden-control{display:none!important}.hub-slider__range{position:relative;padding-top:1.75rem}.hub-slider__track{width:var(--hub-slider-track-width);height:var(--hub-slider-track-height);margin:0;appearance:none;-webkit-appearance:none;background:linear-gradient(to right,var(--hub-slider-track-fill-bg) calc(var(--hub-slider-percent) * 1%),var(--hub-slider-track-bg) calc(var(--hub-slider-percent) * 1%));border-radius:var(--hub-slider-track-border-radius);cursor:pointer}.hub-slider__track:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-slider__track::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:var(--hub-slider-thumb-width);height:var(--hub-slider-thumb-height);border-radius:var(--hub-slider-thumb-border-radius);background:var(--hub-slider-thumb-bg);border:var(--hub-slider-thumb-border);box-shadow:var(--hub-slider-thumb-shadow);cursor:pointer}.hub-slider__track::-moz-range-thumb{width:var(--hub-slider-thumb-width);height:var(--hub-slider-thumb-height);border-radius:var(--hub-slider-thumb-border-radius);background:var(--hub-slider-thumb-bg);border:var(--hub-slider-thumb-border);box-shadow:var(--hub-slider-thumb-shadow);cursor:pointer}.hub-slider__track::-moz-range-track{height:var(--hub-slider-track-height);background:transparent;border-radius:var(--hub-slider-track-border-radius)}.hub-slider__track:focus-visible{outline:0}.hub-slider__track:focus-visible::-webkit-slider-thumb{box-shadow:var(--hub-slider-thumb-shadow),var(--hub-input-focus-box-shadow)}.hub-slider__track:focus-visible::-moz-range-thumb{box-shadow:var(--hub-slider-thumb-shadow),var(--hub-input-focus-box-shadow)}.hub-slider__bubble{position:absolute;top:0;left:calc(var(--hub-slider-percent) * 1%);transform:translate(-50%);padding:.1rem .4rem;color:var(--hub-slider-tooltip-color);background:var(--hub-slider-tooltip-bg);font-size:var(--hub-ref-font-size-sm, .875rem);line-height:1.4;border-radius:var(--hub-slider-tooltip-border-radius);white-space:nowrap;pointer-events:none}.hub-slider__bubble--lower{left:calc(var(--hub-slider-from) * 1%)}.hub-slider__bubble--upper{left:calc(var(--hub-slider-to) * 1%)}.hub-slider__range--dual{min-height:calc(1.75rem + var(--hub-slider-thumb-height))}.hub-slider__range--dual .hub-slider__rail,.hub-slider__range--dual .hub-slider__track--lower,.hub-slider__range--dual .hub-slider__track--upper{position:absolute;left:0;right:0;top:calc(1.75rem + var(--hub-slider-thumb-height) / 2)}.hub-slider__range--dual .hub-slider__rail{height:var(--hub-slider-track-height);transform:translateY(-50%);border-radius:var(--hub-slider-track-border-radius);background:linear-gradient(to right,var(--hub-slider-track-bg) calc(var(--hub-slider-from) * 1%),var(--hub-slider-track-fill-bg) calc(var(--hub-slider-from) * 1%),var(--hub-slider-track-fill-bg) calc(var(--hub-slider-to) * 1%),var(--hub-slider-track-bg) calc(var(--hub-slider-to) * 1%));pointer-events:none}.hub-slider__range--dual .hub-slider__track--lower,.hub-slider__range--dual .hub-slider__track--upper{width:100%;height:var(--hub-slider-thumb-height);margin:0;transform:translateY(-50%);background:transparent;pointer-events:none}.hub-slider__range--dual .hub-slider__track--lower::-webkit-slider-thumb,.hub-slider__range--dual .hub-slider__track--upper::-webkit-slider-thumb{pointer-events:auto;position:relative;z-index:2}.hub-slider__range--dual .hub-slider__track--lower::-moz-range-thumb,.hub-slider__range--dual .hub-slider__track--upper::-moz-range-thumb{pointer-events:auto}.hub-slider__range--dual .hub-slider__track--lower::-moz-range-track,.hub-slider__range--dual .hub-slider__track--upper::-moz-range-track{background:transparent}\n"] }]
+                    }, template: "<div\n\tclass=\"hub-field hub-slider\"\n\t[class.hub-field--horizontal]=\"label() && labelType() === _labelTypes.Horizontal\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n\t[class.hub-field--valid]=\"showsValid\"\n\t[style.--hub-slider-percent]=\"percent()\"\n\t[style.--hub-slider-from]=\"lowerPercent()\"\n\t[style.--hub-slider-to]=\"upperPercent()\"\n>\n\t@if (label() || required()) {\n\t\t<label [for]=\"id\" class=\"hub-field__label\">\n\t\t\t{{ label() }}\n\t\t\t@if (required()) {\n\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t}\n\t\t</label>\n\t}\n\n\t<div class=\"hub-field__body hub-slider__range\" [class.hub-slider__range--dual]=\"range()\">\n\t\t@if (range()) {\n\t\t\t<div class=\"hub-slider__rail\" aria-hidden=\"true\"></div>\n\n\t\t\t<input\n\t\t\t\ttype=\"range\"\n\t\t\t\tclass=\"hub-slider__track hub-slider__track--lower\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\t[min]=\"min()\"\n\t\t\t\t[max]=\"max()\"\n\t\t\t\t[step]=\"step()\"\n\t\t\t\t[value]=\"lower()\"\n\t\t\t\t(input)=\"setLower($any($event.target).value)\"\n\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\taria-label=\"Range start\"\n\t\t\t\t[attr.aria-valuetext]=\"lower()\"\n\t\t\t/>\n\t\t\t<input\n\t\t\t\ttype=\"range\"\n\t\t\t\tclass=\"hub-slider__track hub-slider__track--upper\"\n\t\t\t\t[min]=\"min()\"\n\t\t\t\t[max]=\"max()\"\n\t\t\t\t[step]=\"step()\"\n\t\t\t\t[value]=\"upper()\"\n\t\t\t\t(input)=\"setUpper($any($event.target).value)\"\n\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\taria-label=\"Range end\"\n\t\t\t\t[attr.aria-valuetext]=\"upper()\"\n\t\t\t/>\n\n\t\t\t@if (showValue()) {\n\t\t\t\t<span class=\"hub-slider__bubble hub-slider__bubble--lower\" aria-hidden=\"true\">{{ lower() }}</span>\n\t\t\t\t<span class=\"hub-slider__bubble hub-slider__bubble--upper\" aria-hidden=\"true\">{{ upper() }}</span>\n\t\t\t}\n\t\t} @else {\n\t\t\t<input\n\t\t\t\ttype=\"range\"\n\t\t\t\tclass=\"hub-slider__track\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\t[min]=\"min()\"\n\t\t\t\t[max]=\"max()\"\n\t\t\t\t[step]=\"step()\"\n\t\t\t\t[value]=\"single()\"\n\t\t\t\t(input)=\"setValue($any($event.target).value)\"\n\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t[attr.aria-valuetext]=\"single()\"\n\t\t\t/>\n\n\t\t\t@if (showValue()) {\n\t\t\t\t<span class=\"hub-slider__bubble\" aria-hidden=\"true\">{{ single() }}</span>\n\t\t\t}\n\t\t}\n\t</div>\n\n\t@if (formText() || formTextTmp()) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span class=\"hub-field__feedback-text\" [innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n\n\t@if (showsValid && validFeedback()) {\n\t\t<div class=\"hub-field__feedback hub-field__feedback--valid\" role=\"status\">\n\t\t\t<span class=\"hub-field__feedback-text\">{{ validFeedback() }}</span>\n\t\t</div>\n\t}\n</div>\n", styles: ["hub-slider{display:block}hub-slider.hidden-control{display:none!important}.hub-slider__range{position:relative;padding-top:1.75rem}.hub-slider__track{width:var(--hub-slider-track-width);height:var(--hub-slider-track-height);margin:0;appearance:none;-webkit-appearance:none;background:linear-gradient(to right,var(--hub-slider-track-fill-bg) calc(var(--hub-slider-percent) * 1%),var(--hub-slider-track-bg) calc(var(--hub-slider-percent) * 1%));border-radius:var(--hub-slider-track-border-radius);cursor:pointer}.hub-slider__track:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-slider__track::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:var(--hub-slider-thumb-width);height:var(--hub-slider-thumb-height);border-radius:var(--hub-slider-thumb-border-radius);background:var(--hub-slider-thumb-bg);border:var(--hub-slider-thumb-border);box-shadow:var(--hub-slider-thumb-shadow);cursor:pointer}.hub-slider__track::-moz-range-thumb{width:var(--hub-slider-thumb-width);height:var(--hub-slider-thumb-height);border-radius:var(--hub-slider-thumb-border-radius);background:var(--hub-slider-thumb-bg);border:var(--hub-slider-thumb-border);box-shadow:var(--hub-slider-thumb-shadow);cursor:pointer}.hub-slider__track::-moz-range-track{height:var(--hub-slider-track-height);background:transparent;border-radius:var(--hub-slider-track-border-radius)}.hub-slider__track:focus-visible{outline:0}.hub-slider__track:focus-visible::-webkit-slider-thumb{box-shadow:var(--hub-slider-thumb-shadow),var(--hub-input-focus-box-shadow)}.hub-slider__track:focus-visible::-moz-range-thumb{box-shadow:var(--hub-slider-thumb-shadow),var(--hub-input-focus-box-shadow)}.hub-slider__bubble{position:absolute;top:0;left:calc(var(--hub-slider-percent) * 1%);transform:translate(-50%);padding:.1rem .4rem;color:var(--hub-slider-tooltip-color);background:var(--hub-slider-tooltip-bg);font-size:var(--hub-ref-font-size-sm, .875rem);line-height:1.4;border-radius:var(--hub-slider-tooltip-border-radius);white-space:nowrap;pointer-events:none}.hub-slider__bubble--lower{left:calc(var(--hub-slider-from) * 1%)}.hub-slider__bubble--upper{left:calc(var(--hub-slider-to) * 1%)}.hub-slider__range--dual{min-height:calc(1.75rem + var(--hub-slider-thumb-height))}.hub-slider__range--dual .hub-slider__rail,.hub-slider__range--dual .hub-slider__track--lower,.hub-slider__range--dual .hub-slider__track--upper{position:absolute;left:0;right:0;top:calc(1.75rem + var(--hub-slider-thumb-height) / 2)}.hub-slider__range--dual .hub-slider__rail{height:var(--hub-slider-track-height);transform:translateY(-50%);border-radius:var(--hub-slider-track-border-radius);background:linear-gradient(to right,var(--hub-slider-track-bg) calc(var(--hub-slider-from) * 1%),var(--hub-slider-track-fill-bg) calc(var(--hub-slider-from) * 1%),var(--hub-slider-track-fill-bg) calc(var(--hub-slider-to) * 1%),var(--hub-slider-track-bg) calc(var(--hub-slider-to) * 1%));pointer-events:none}.hub-slider__range--dual .hub-slider__track--lower,.hub-slider__range--dual .hub-slider__track--upper{width:100%;height:var(--hub-slider-thumb-height);margin:0;transform:translateY(-50%);background:transparent;pointer-events:none}.hub-slider__range--dual .hub-slider__track--lower::-webkit-slider-thumb,.hub-slider__range--dual .hub-slider__track--upper::-webkit-slider-thumb{pointer-events:auto;position:relative;z-index:2}.hub-slider__range--dual .hub-slider__track--lower::-moz-range-thumb,.hub-slider__range--dual .hub-slider__track--upper::-moz-range-thumb{pointer-events:auto}.hub-slider__range--dual .hub-slider__track--lower::-moz-range-track,.hub-slider__range--dual .hub-slider__track--upper::-moz-range-track{background:transparent}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelType: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelType", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], formText: [{ type: i0.Input, args: [{ isSignal: true, alias: "formText", required: false }] }], formTextType: [{ type: i0.Input, args: [{ isSignal: true, alias: "formTextType", required: false }] }], classlist: [{ type: i0.Input, args: [{ isSignal: true, alias: "classlist", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
 
 /**
@@ -5659,14 +5698,14 @@ class HubDatepickerComponent extends HubFieldControl {
         this.valueChange.emit(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubDatepickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: HubDatepickerComponent, isStandalone: true, selector: "hub-datepicker", inputs: { mode: { classPropertyName: "mode", publicName: "mode", 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 }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, weekdayFormat: { classPropertyName: "weekdayFormat", publicName: "weekdayFormat", isSignal: true, isRequired: false, transformFunction: null }, displayFormat: { classPropertyName: "displayFormat", publicName: "displayFormat", isSignal: true, isRequired: false, transformFunction: null }, rangeSeparator: { classPropertyName: "rangeSeparator", publicName: "rangeSeparator", 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 }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, showToday: { classPropertyName: "showToday", publicName: "showToday", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", 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 }, classlist: { classPropertyName: "classlist", publicName: "classlist", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", opened: "opened", closed: "closed", viewChange: "viewChange", cleared: "cleared" }, host: { properties: { "class": "classlist()", "class.hub-datepicker-host": "true" } }, usesInheritance: true, ngImport: i0, template: "<div\n\tclass=\"hub-field hub-datepicker\"\n\t[class.hub-field--horizontal]=\"labelType() === _labelTypes.Horizontal || (!label() && required())\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n>\n\t@if (label() || required()) {\n\t\t<label [for]=\"id\" class=\"hub-field__label\">\n\t\t\t{{ label() }}\n\t\t\t@if (required()) {\n\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t}\n\t\t</label>\n\t}\n\n\t<div class=\"hub-field__body hub-datepicker__trigger\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\n\t\t<input\n\t\t\tclass=\"hub-field__control hub-datepicker__input\"\n\t\t\t[class.hub-field__control--invalid]=\"isInvalid\"\n\t\t\t[class.hub-datepicker__input--clearable]=\"clearable() && displayValue()\"\n\t\t\t[id]=\"id\"\n\t\t\ttype=\"text\"\n\t\t\treadonly\n\t\t\t[value]=\"displayValue()\"\n\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t[disabled]=\"disabled()\"\n\t\t\t[required]=\"!!required()\"\n\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t[attr.aria-expanded]=\"_open()\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\t(click)=\"toggleCalendar()\"\n\t\t\t(blur)=\"handleBlur($event)\"\n\t\t/>\n\t\t@if (clearable() && displayValue() && !disabled() && !readonly()) {\n\t\t\t<button type=\"button\" class=\"hub-datepicker__clear\" [attr.aria-label]=\"_labels().clear\" (click)=\"clear()\">&times;</button>\n\t\t}\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tclass=\"hub-datepicker__icon\"\n\t\t\ttabindex=\"-1\"\n\t\t\t[attr.aria-label]=\"_labels().openCalendar\"\n\t\t\t[disabled]=\"disabled() || readonly()\"\n\t\t\t(click)=\"toggleCalendar()\"\n\t\t></button>\n\t</div>\n\n\t@if (formText() || formTextTmp()) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span class=\"hub-field__feedback-text\" [innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n</div>\n\n<ng-template\n\tcdkConnectedOverlay\n\t[cdkConnectedOverlayOrigin]=\"trigger\"\n\t[cdkConnectedOverlayOpen]=\"_open()\"\n\t[cdkConnectedOverlayHasBackdrop]=\"true\"\n\tcdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n\t[cdkConnectedOverlayOffsetY]=\"4\"\n\t(backdropClick)=\"close()\"\n\t(detach)=\"close()\"\n>\n\t<div class=\"hub-datepicker__panel\" role=\"dialog\" [attr.aria-label]=\"monthYearLabel()\">\n\t\t<header class=\"hub-datepicker__header\">\n\t\t\t<div class=\"hub-datepicker__nav-group\">\n\t\t\t\t<button type=\"button\" class=\"hub-datepicker__nav\" [attr.aria-label]=\"_labels().previousYear\" (click)=\"shiftMonth(-12)\">\u00AB</button>\n\t\t\t\t<button type=\"button\" class=\"hub-datepicker__nav\" [attr.aria-label]=\"_labels().previousMonth\" (click)=\"shiftMonth(-1)\">\u2039</button>\n\t\t\t</div>\n\t\t\t<span class=\"hub-datepicker__title\" aria-live=\"polite\">{{ monthYearLabel() }}</span>\n\t\t\t<div class=\"hub-datepicker__nav-group\">\n\t\t\t\t<button type=\"button\" class=\"hub-datepicker__nav\" [attr.aria-label]=\"_labels().nextMonth\" (click)=\"shiftMonth(1)\">\u203A</button>\n\t\t\t\t<button type=\"button\" class=\"hub-datepicker__nav\" [attr.aria-label]=\"_labels().nextYear\" (click)=\"shiftMonth(12)\">\u00BB</button>\n\t\t\t</div>\n\t\t</header>\n\n\t\t<div class=\"hub-datepicker__weekdays\" aria-hidden=\"true\">\n\t\t\t@for (wd of weekdays(); track $index) {\n\t\t\t\t<span class=\"hub-datepicker__weekday\">{{ wd }}</span>\n\t\t\t}\n\t\t</div>\n\n\t\t<div class=\"hub-datepicker__grid\" role=\"grid\" (keydown)=\"onGridKeydown($event)\">\n\t\t\t@for (cell of grid(); track cell.date.getTime()) {\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\trole=\"gridcell\"\n\t\t\t\t\tclass=\"hub-datepicker__cell\"\n\t\t\t\t\t[class.hub-datepicker__cell--outside]=\"!cell.currentMonth\"\n\t\t\t\t\t[class.hub-datepicker__cell--today]=\"cell.today\"\n\t\t\t\t\t[class.hub-datepicker__cell--selected]=\"cell.selected || cell.rangeStart || cell.rangeEnd\"\n\t\t\t\t\t[class.hub-datepicker__cell--range-start]=\"cell.rangeStart\"\n\t\t\t\t\t[class.hub-datepicker__cell--range-end]=\"cell.rangeEnd\"\n\t\t\t\t\t[class.hub-datepicker__cell--in-range]=\"cell.inRange\"\n\t\t\t\t\t[attr.data-time]=\"cell.date.getTime()\"\n\t\t\t\t\t[attr.tabindex]=\"cell.focused ? 0 : -1\"\n\t\t\t\t\t[attr.aria-selected]=\"cell.selected || cell.rangeStart || cell.rangeEnd\"\n\t\t\t\t\t[disabled]=\"cell.disabled\"\n\t\t\t\t\t(click)=\"selectDay(cell)\"\n\t\t\t\t>\n\t\t\t\t\t{{ cell.day }}\n\t\t\t\t</button>\n\t\t\t}\n\t\t</div>\n\n\t\t@if (showToday() || clearable()) {\n\t\t\t<footer class=\"hub-datepicker__footer\">\n\t\t\t\t@if (showToday()) {\n\t\t\t\t\t<button type=\"button\" class=\"hub-datepicker__action\" (click)=\"goToToday()\">{{ _labels().today }}</button>\n\t\t\t\t}\n\t\t\t\t@if (clearable()) {\n\t\t\t\t\t<button type=\"button\" class=\"hub-datepicker__action\" (click)=\"clear()\">{{ _labels().clear }}</button>\n\t\t\t\t}\n\t\t\t</footer>\n\t\t}\n\t</div>\n</ng-template>\n", styles: ["hub-datepicker{display:block}hub-datepicker.hidden-control{display:none!important}.hub-datepicker__trigger{position:relative}.hub-datepicker__input{padding-right:var(--hub-datepicker-icon-width);cursor:pointer}.hub-datepicker__input--clearable{padding-right:calc(var(--hub-datepicker-icon-width) + 1.5rem)}.hub-datepicker__clear{position:absolute;top:0;right:var(--hub-datepicker-icon-width);height:100%;width:1.5rem;padding:0;color:var(--hub-daterangepicker-nav-arrow-color);font-size:1.1rem;line-height:1;background:transparent;border:0;cursor:pointer}.hub-datepicker__clear:hover{color:var(--hub-form-invalid-color)}.hub-datepicker__icon{position:absolute;top:0;right:0;width:var(--hub-datepicker-icon-width);height:100%;padding:0;background:transparent;border:0;cursor:pointer}.hub-datepicker__icon:after{content:\"\";display:block;width:var(--hub-datepicker-icon-size);height:var(--hub-datepicker-icon-size);margin:0 auto;background:var(--hub-datepicker-icon) center/contain no-repeat}.hub-datepicker__icon:disabled{cursor:not-allowed;opacity:var(--hub-form-disabled-opacity)}.hub-datepicker__panel{width:max-content;padding:var(--hub-daterangepicker-padding);color:var(--hub-daterangepicker-color);background:var(--hub-daterangepicker-bg);border:var(--hub-input-border-width) solid var(--hub-daterangepicker-border-color);border-radius:var(--hub-daterangepicker-border-radius);box-shadow:var(--hub-daterangepicker-box-shadow);font-family:var(--hub-input-font-family)}.hub-datepicker__panel .hub-datepicker__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--hub-ref-space-2, .5rem)}.hub-datepicker__panel .hub-datepicker__nav-group{display:inline-flex;gap:.125rem}.hub-datepicker__panel .hub-datepicker__nav{display:inline-flex;align-items:center;justify-content:center;width:var(--hub-daterangepicker-cell-size);height:var(--hub-daterangepicker-cell-size);font-size:1.25rem;line-height:1;color:var(--hub-daterangepicker-nav-arrow-color);background:transparent;border:0;border-radius:var(--hub-daterangepicker-cell-border-radius);cursor:pointer}.hub-datepicker__panel .hub-datepicker__nav:hover{color:var(--hub-daterangepicker-nav-arrow-hover-color);background:var(--hub-daterangepicker-cell-hover-bg)}.hub-datepicker__panel .hub-datepicker__title{font-weight:var(--hub-ref-font-weight-medium, 500);text-transform:capitalize}.hub-datepicker__panel .hub-datepicker__weekdays,.hub-datepicker__panel .hub-datepicker__grid{display:grid;grid-template-columns:repeat(7,var(--hub-daterangepicker-cell-size));gap:.125rem}.hub-datepicker__panel .hub-datepicker__weekday{display:inline-flex;align-items:center;justify-content:center;height:1.5rem;font-size:var(--hub-ref-font-size-sm, .875rem);color:var(--hub-daterangepicker-off-color);text-transform:capitalize}.hub-datepicker__panel .hub-datepicker__cell{display:inline-flex;align-items:center;justify-content:center;width:var(--hub-daterangepicker-cell-size);height:var(--hub-daterangepicker-cell-size);color:var(--hub-daterangepicker-cell-color);background:transparent;border:0;border-radius:var(--hub-daterangepicker-cell-border-radius);font-size:var(--hub-input-font-size);cursor:pointer}.hub-datepicker__panel .hub-datepicker__cell:hover{background:var(--hub-daterangepicker-cell-hover-bg)}.hub-datepicker__panel .hub-datepicker__cell--outside{color:var(--hub-daterangepicker-off-color)}.hub-datepicker__panel .hub-datepicker__cell--today{font-weight:var(--hub-ref-font-weight-bold, 700);box-shadow:inset 0 0 0 1px var(--hub-daterangepicker-border-color)}.hub-datepicker__panel .hub-datepicker__cell--in-range{background:var(--hub-daterangepicker-in-range-bg);border-radius:0}.hub-datepicker__panel .hub-datepicker__cell--range-start{border-top-right-radius:0;border-bottom-right-radius:0}.hub-datepicker__panel .hub-datepicker__cell--range-end{border-top-left-radius:0;border-bottom-left-radius:0}.hub-datepicker__panel .hub-datepicker__cell--selected,.hub-datepicker__panel .hub-datepicker__cell--selected:hover{color:var(--hub-daterangepicker-active-color);background:var(--hub-daterangepicker-active-bg)}.hub-datepicker__panel .hub-datepicker__cell:disabled{color:var(--hub-daterangepicker-off-color);background:transparent;cursor:not-allowed;opacity:.6}.hub-datepicker__panel .hub-datepicker__cell:focus-visible{outline:0;box-shadow:var(--hub-input-focus-box-shadow)}.hub-datepicker__panel .hub-datepicker__footer{display:flex;justify-content:flex-end;gap:var(--hub-ref-space-2, .5rem);margin-top:var(--hub-ref-space-2, .5rem);padding-top:var(--hub-ref-space-2, .5rem);border-top:var(--hub-input-border-width) solid var(--hub-daterangepicker-border-color)}.hub-datepicker__panel .hub-datepicker__action{padding:.2rem .5rem;color:var(--hub-sys-color-primary, #0d6efd);font-size:var(--hub-ref-font-size-sm, .875rem);background:transparent;border:0;border-radius:var(--hub-daterangepicker-cell-border-radius);cursor:pointer}.hub-datepicker__panel .hub-datepicker__action:hover{background:var(--hub-daterangepicker-cell-hover-bg)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: HubDatepickerComponent, isStandalone: true, selector: "hub-datepicker", inputs: { mode: { classPropertyName: "mode", publicName: "mode", 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 }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, weekdayFormat: { classPropertyName: "weekdayFormat", publicName: "weekdayFormat", isSignal: true, isRequired: false, transformFunction: null }, displayFormat: { classPropertyName: "displayFormat", publicName: "displayFormat", isSignal: true, isRequired: false, transformFunction: null }, rangeSeparator: { classPropertyName: "rangeSeparator", publicName: "rangeSeparator", 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 }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, showToday: { classPropertyName: "showToday", publicName: "showToday", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", 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 }, classlist: { classPropertyName: "classlist", publicName: "classlist", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", opened: "opened", closed: "closed", viewChange: "viewChange", cleared: "cleared" }, host: { properties: { "class": "classlist()", "class.hub-datepicker-host": "true" } }, usesInheritance: true, ngImport: i0, template: "<div\n\tclass=\"hub-field hub-datepicker\"\n\t[class.hub-field--horizontal]=\"labelType() === _labelTypes.Horizontal || (!label() && required())\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n\t[class.hub-field--valid]=\"showsValid\"\n>\n\t@if (label() || required()) {\n\t\t<label [for]=\"id\" class=\"hub-field__label\">\n\t\t\t{{ label() }}\n\t\t\t@if (required()) {\n\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t}\n\t\t</label>\n\t}\n\n\t<div class=\"hub-field__body hub-datepicker__trigger\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\n\t\t<input\n\t\t\tclass=\"hub-field__control hub-datepicker__input\"\n\t\t\t[class.hub-field__control--invalid]=\"isInvalid\"\n\t\t\t[class.hub-field__control--valid]=\"showsValid\"\n\t\t\t[class.hub-datepicker__input--clearable]=\"clearable() && displayValue()\"\n\t\t\t[id]=\"id\"\n\t\t\ttype=\"text\"\n\t\t\treadonly\n\t\t\t[value]=\"displayValue()\"\n\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t[disabled]=\"disabled()\"\n\t\t\t[required]=\"!!required()\"\n\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t[attr.aria-expanded]=\"_open()\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\t(click)=\"toggleCalendar()\"\n\t\t\t(blur)=\"handleBlur($event)\"\n\t\t/>\n\t\t@if (clearable() && displayValue() && !disabled() && !readonly()) {\n\t\t\t<button type=\"button\" class=\"hub-datepicker__clear\" [attr.aria-label]=\"_labels().clear\" (click)=\"clear()\">&times;</button>\n\t\t}\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tclass=\"hub-datepicker__icon\"\n\t\t\ttabindex=\"-1\"\n\t\t\t[attr.aria-label]=\"_labels().openCalendar\"\n\t\t\t[disabled]=\"disabled() || readonly()\"\n\t\t\t(click)=\"toggleCalendar()\"\n\t\t></button>\n\t</div>\n\n\t@if (formText() || formTextTmp()) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span class=\"hub-field__feedback-text\" [innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n\n\t@if (showsValid && validFeedback()) {\n\t\t<div class=\"hub-field__feedback hub-field__feedback--valid\" role=\"status\">\n\t\t\t<span class=\"hub-field__feedback-text\">{{ validFeedback() }}</span>\n\t\t</div>\n\t}\n</div>\n\n<ng-template\n\tcdkConnectedOverlay\n\t[cdkConnectedOverlayOrigin]=\"trigger\"\n\t[cdkConnectedOverlayOpen]=\"_open()\"\n\t[cdkConnectedOverlayHasBackdrop]=\"true\"\n\tcdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n\t[cdkConnectedOverlayOffsetY]=\"4\"\n\t(backdropClick)=\"close()\"\n\t(detach)=\"close()\"\n>\n\t<div class=\"hub-datepicker__panel\" role=\"dialog\" [attr.aria-label]=\"monthYearLabel()\">\n\t\t<header class=\"hub-datepicker__header\">\n\t\t\t<div class=\"hub-datepicker__nav-group\">\n\t\t\t\t<button type=\"button\" class=\"hub-datepicker__nav\" [attr.aria-label]=\"_labels().previousYear\" (click)=\"shiftMonth(-12)\">\u00AB</button>\n\t\t\t\t<button type=\"button\" class=\"hub-datepicker__nav\" [attr.aria-label]=\"_labels().previousMonth\" (click)=\"shiftMonth(-1)\">\u2039</button>\n\t\t\t</div>\n\t\t\t<span class=\"hub-datepicker__title\" aria-live=\"polite\">{{ monthYearLabel() }}</span>\n\t\t\t<div class=\"hub-datepicker__nav-group\">\n\t\t\t\t<button type=\"button\" class=\"hub-datepicker__nav\" [attr.aria-label]=\"_labels().nextMonth\" (click)=\"shiftMonth(1)\">\u203A</button>\n\t\t\t\t<button type=\"button\" class=\"hub-datepicker__nav\" [attr.aria-label]=\"_labels().nextYear\" (click)=\"shiftMonth(12)\">\u00BB</button>\n\t\t\t</div>\n\t\t</header>\n\n\t\t<div class=\"hub-datepicker__weekdays\" aria-hidden=\"true\">\n\t\t\t@for (wd of weekdays(); track $index) {\n\t\t\t\t<span class=\"hub-datepicker__weekday\">{{ wd }}</span>\n\t\t\t}\n\t\t</div>\n\n\t\t<div class=\"hub-datepicker__grid\" role=\"grid\" (keydown)=\"onGridKeydown($event)\">\n\t\t\t@for (cell of grid(); track cell.date.getTime()) {\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\trole=\"gridcell\"\n\t\t\t\t\tclass=\"hub-datepicker__cell\"\n\t\t\t\t\t[class.hub-datepicker__cell--outside]=\"!cell.currentMonth\"\n\t\t\t\t\t[class.hub-datepicker__cell--today]=\"cell.today\"\n\t\t\t\t\t[class.hub-datepicker__cell--selected]=\"cell.selected || cell.rangeStart || cell.rangeEnd\"\n\t\t\t\t\t[class.hub-datepicker__cell--range-start]=\"cell.rangeStart\"\n\t\t\t\t\t[class.hub-datepicker__cell--range-end]=\"cell.rangeEnd\"\n\t\t\t\t\t[class.hub-datepicker__cell--in-range]=\"cell.inRange\"\n\t\t\t\t\t[attr.data-time]=\"cell.date.getTime()\"\n\t\t\t\t\t[attr.tabindex]=\"cell.focused ? 0 : -1\"\n\t\t\t\t\t[attr.aria-selected]=\"cell.selected || cell.rangeStart || cell.rangeEnd\"\n\t\t\t\t\t[disabled]=\"cell.disabled\"\n\t\t\t\t\t(click)=\"selectDay(cell)\"\n\t\t\t\t>\n\t\t\t\t\t{{ cell.day }}\n\t\t\t\t</button>\n\t\t\t}\n\t\t</div>\n\n\t\t@if (showToday() || clearable()) {\n\t\t\t<footer class=\"hub-datepicker__footer\">\n\t\t\t\t@if (showToday()) {\n\t\t\t\t\t<button type=\"button\" class=\"hub-datepicker__action\" (click)=\"goToToday()\">{{ _labels().today }}</button>\n\t\t\t\t}\n\t\t\t\t@if (clearable()) {\n\t\t\t\t\t<button type=\"button\" class=\"hub-datepicker__action\" (click)=\"clear()\">{{ _labels().clear }}</button>\n\t\t\t\t}\n\t\t\t</footer>\n\t\t}\n\t</div>\n</ng-template>\n", styles: ["hub-datepicker{display:block}hub-datepicker.hidden-control{display:none!important}.hub-datepicker__trigger{position:relative}.hub-datepicker__input{padding-right:var(--hub-datepicker-icon-width);cursor:pointer}.hub-datepicker__input--clearable{padding-right:calc(var(--hub-datepicker-icon-width) + 1.5rem)}.hub-datepicker__clear{position:absolute;top:0;right:var(--hub-datepicker-icon-width);height:100%;width:1.5rem;padding:0;color:var(--hub-daterangepicker-nav-arrow-color);font-size:1.1rem;line-height:1;background:transparent;border:0;cursor:pointer}.hub-datepicker__clear:hover{color:var(--hub-form-invalid-color)}.hub-datepicker__icon{position:absolute;top:0;right:0;width:var(--hub-datepicker-icon-width);height:100%;padding:0;background:transparent;border:0;cursor:pointer}.hub-datepicker__icon:after{content:\"\";display:block;width:var(--hub-datepicker-icon-size);height:var(--hub-datepicker-icon-size);margin:0 auto;background:var(--hub-datepicker-icon) center/contain no-repeat}.hub-datepicker__icon:disabled{cursor:not-allowed;opacity:var(--hub-form-disabled-opacity)}.hub-datepicker__panel{width:max-content;padding:var(--hub-daterangepicker-padding-y, var(--hub-ref-space-3, 1rem)) var(--hub-daterangepicker-padding-x, var(--hub-ref-space-3, 1rem));color:var(--hub-daterangepicker-color);background:var(--hub-daterangepicker-bg);border:var(--hub-input-border-width) solid var(--hub-daterangepicker-border-color);border-radius:var(--hub-daterangepicker-border-radius);box-shadow:var(--hub-daterangepicker-box-shadow);font-family:var(--hub-input-font-family)}.hub-datepicker__panel .hub-datepicker__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--hub-ref-space-2, .5rem)}.hub-datepicker__panel .hub-datepicker__nav-group{display:inline-flex;gap:.125rem}.hub-datepicker__panel .hub-datepicker__nav{display:inline-flex;align-items:center;justify-content:center;width:var(--hub-daterangepicker-cell-size);height:var(--hub-daterangepicker-cell-size);font-size:1.25rem;line-height:1;color:var(--hub-daterangepicker-nav-arrow-color);background:transparent;border:0;border-radius:var(--hub-daterangepicker-cell-border-radius);cursor:pointer}.hub-datepicker__panel .hub-datepicker__nav:hover{color:var(--hub-daterangepicker-nav-arrow-hover-color);background:var(--hub-daterangepicker-cell-hover-bg)}.hub-datepicker__panel .hub-datepicker__title{font-weight:var(--hub-ref-font-weight-medium, 500);text-transform:capitalize}.hub-datepicker__panel .hub-datepicker__weekdays,.hub-datepicker__panel .hub-datepicker__grid{display:grid;grid-template-columns:repeat(7,var(--hub-daterangepicker-cell-size));gap:.125rem}.hub-datepicker__panel .hub-datepicker__weekday{display:inline-flex;align-items:center;justify-content:center;height:1.5rem;font-size:var(--hub-ref-font-size-sm, .875rem);color:var(--hub-daterangepicker-off-color);text-transform:capitalize}.hub-datepicker__panel .hub-datepicker__cell{display:inline-flex;align-items:center;justify-content:center;width:var(--hub-daterangepicker-cell-size);height:var(--hub-daterangepicker-cell-size);color:var(--hub-daterangepicker-cell-color);background:transparent;border:0;border-radius:var(--hub-daterangepicker-cell-border-radius);font-size:var(--hub-input-font-size);cursor:pointer}.hub-datepicker__panel .hub-datepicker__cell:hover{background:var(--hub-daterangepicker-cell-hover-bg)}.hub-datepicker__panel .hub-datepicker__cell--outside{color:var(--hub-daterangepicker-off-color)}.hub-datepicker__panel .hub-datepicker__cell--today{font-weight:var(--hub-ref-font-weight-bold, 700);box-shadow:inset 0 0 0 1px var(--hub-daterangepicker-border-color)}.hub-datepicker__panel .hub-datepicker__cell--in-range{background:var(--hub-daterangepicker-in-range-bg);border-radius:0}.hub-datepicker__panel .hub-datepicker__cell--range-start{border-top-right-radius:0;border-bottom-right-radius:0}.hub-datepicker__panel .hub-datepicker__cell--range-end{border-top-left-radius:0;border-bottom-left-radius:0}.hub-datepicker__panel .hub-datepicker__cell--selected,.hub-datepicker__panel .hub-datepicker__cell--selected:hover{color:var(--hub-daterangepicker-active-color);background:var(--hub-daterangepicker-active-bg)}.hub-datepicker__panel .hub-datepicker__cell:disabled{color:var(--hub-daterangepicker-off-color);background:transparent;cursor:not-allowed;opacity:.6}.hub-datepicker__panel .hub-datepicker__cell:focus-visible{outline:0;box-shadow:var(--hub-input-focus-box-shadow)}.hub-datepicker__panel .hub-datepicker__footer{display:flex;justify-content:flex-end;gap:var(--hub-ref-space-2, .5rem);margin-top:var(--hub-ref-space-2, .5rem);padding-top:var(--hub-ref-space-2, .5rem);border-top:var(--hub-input-border-width) solid var(--hub-daterangepicker-border-color)}.hub-datepicker__panel .hub-datepicker__action{padding:.2rem .5rem;color:var(--hub-sys-color-primary, #0d6efd);font-size:var(--hub-ref-font-size-sm, .875rem);background:transparent;border:0;border-radius:var(--hub-daterangepicker-cell-border-radius);cursor:pointer}.hub-datepicker__panel .hub-datepicker__action:hover{background:var(--hub-daterangepicker-cell-hover-bg)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubDatepickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'hub-datepicker', imports: [NgTemplateOutlet, KeyValuePipe, OverlayModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         '[class]': 'classlist()',
                         '[class.hub-datepicker-host]': 'true'
-                    }, template: "<div\n\tclass=\"hub-field hub-datepicker\"\n\t[class.hub-field--horizontal]=\"labelType() === _labelTypes.Horizontal || (!label() && required())\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n>\n\t@if (label() || required()) {\n\t\t<label [for]=\"id\" class=\"hub-field__label\">\n\t\t\t{{ label() }}\n\t\t\t@if (required()) {\n\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t}\n\t\t</label>\n\t}\n\n\t<div class=\"hub-field__body hub-datepicker__trigger\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\n\t\t<input\n\t\t\tclass=\"hub-field__control hub-datepicker__input\"\n\t\t\t[class.hub-field__control--invalid]=\"isInvalid\"\n\t\t\t[class.hub-datepicker__input--clearable]=\"clearable() && displayValue()\"\n\t\t\t[id]=\"id\"\n\t\t\ttype=\"text\"\n\t\t\treadonly\n\t\t\t[value]=\"displayValue()\"\n\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t[disabled]=\"disabled()\"\n\t\t\t[required]=\"!!required()\"\n\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t[attr.aria-expanded]=\"_open()\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\t(click)=\"toggleCalendar()\"\n\t\t\t(blur)=\"handleBlur($event)\"\n\t\t/>\n\t\t@if (clearable() && displayValue() && !disabled() && !readonly()) {\n\t\t\t<button type=\"button\" class=\"hub-datepicker__clear\" [attr.aria-label]=\"_labels().clear\" (click)=\"clear()\">&times;</button>\n\t\t}\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tclass=\"hub-datepicker__icon\"\n\t\t\ttabindex=\"-1\"\n\t\t\t[attr.aria-label]=\"_labels().openCalendar\"\n\t\t\t[disabled]=\"disabled() || readonly()\"\n\t\t\t(click)=\"toggleCalendar()\"\n\t\t></button>\n\t</div>\n\n\t@if (formText() || formTextTmp()) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span class=\"hub-field__feedback-text\" [innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n</div>\n\n<ng-template\n\tcdkConnectedOverlay\n\t[cdkConnectedOverlayOrigin]=\"trigger\"\n\t[cdkConnectedOverlayOpen]=\"_open()\"\n\t[cdkConnectedOverlayHasBackdrop]=\"true\"\n\tcdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n\t[cdkConnectedOverlayOffsetY]=\"4\"\n\t(backdropClick)=\"close()\"\n\t(detach)=\"close()\"\n>\n\t<div class=\"hub-datepicker__panel\" role=\"dialog\" [attr.aria-label]=\"monthYearLabel()\">\n\t\t<header class=\"hub-datepicker__header\">\n\t\t\t<div class=\"hub-datepicker__nav-group\">\n\t\t\t\t<button type=\"button\" class=\"hub-datepicker__nav\" [attr.aria-label]=\"_labels().previousYear\" (click)=\"shiftMonth(-12)\">\u00AB</button>\n\t\t\t\t<button type=\"button\" class=\"hub-datepicker__nav\" [attr.aria-label]=\"_labels().previousMonth\" (click)=\"shiftMonth(-1)\">\u2039</button>\n\t\t\t</div>\n\t\t\t<span class=\"hub-datepicker__title\" aria-live=\"polite\">{{ monthYearLabel() }}</span>\n\t\t\t<div class=\"hub-datepicker__nav-group\">\n\t\t\t\t<button type=\"button\" class=\"hub-datepicker__nav\" [attr.aria-label]=\"_labels().nextMonth\" (click)=\"shiftMonth(1)\">\u203A</button>\n\t\t\t\t<button type=\"button\" class=\"hub-datepicker__nav\" [attr.aria-label]=\"_labels().nextYear\" (click)=\"shiftMonth(12)\">\u00BB</button>\n\t\t\t</div>\n\t\t</header>\n\n\t\t<div class=\"hub-datepicker__weekdays\" aria-hidden=\"true\">\n\t\t\t@for (wd of weekdays(); track $index) {\n\t\t\t\t<span class=\"hub-datepicker__weekday\">{{ wd }}</span>\n\t\t\t}\n\t\t</div>\n\n\t\t<div class=\"hub-datepicker__grid\" role=\"grid\" (keydown)=\"onGridKeydown($event)\">\n\t\t\t@for (cell of grid(); track cell.date.getTime()) {\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\trole=\"gridcell\"\n\t\t\t\t\tclass=\"hub-datepicker__cell\"\n\t\t\t\t\t[class.hub-datepicker__cell--outside]=\"!cell.currentMonth\"\n\t\t\t\t\t[class.hub-datepicker__cell--today]=\"cell.today\"\n\t\t\t\t\t[class.hub-datepicker__cell--selected]=\"cell.selected || cell.rangeStart || cell.rangeEnd\"\n\t\t\t\t\t[class.hub-datepicker__cell--range-start]=\"cell.rangeStart\"\n\t\t\t\t\t[class.hub-datepicker__cell--range-end]=\"cell.rangeEnd\"\n\t\t\t\t\t[class.hub-datepicker__cell--in-range]=\"cell.inRange\"\n\t\t\t\t\t[attr.data-time]=\"cell.date.getTime()\"\n\t\t\t\t\t[attr.tabindex]=\"cell.focused ? 0 : -1\"\n\t\t\t\t\t[attr.aria-selected]=\"cell.selected || cell.rangeStart || cell.rangeEnd\"\n\t\t\t\t\t[disabled]=\"cell.disabled\"\n\t\t\t\t\t(click)=\"selectDay(cell)\"\n\t\t\t\t>\n\t\t\t\t\t{{ cell.day }}\n\t\t\t\t</button>\n\t\t\t}\n\t\t</div>\n\n\t\t@if (showToday() || clearable()) {\n\t\t\t<footer class=\"hub-datepicker__footer\">\n\t\t\t\t@if (showToday()) {\n\t\t\t\t\t<button type=\"button\" class=\"hub-datepicker__action\" (click)=\"goToToday()\">{{ _labels().today }}</button>\n\t\t\t\t}\n\t\t\t\t@if (clearable()) {\n\t\t\t\t\t<button type=\"button\" class=\"hub-datepicker__action\" (click)=\"clear()\">{{ _labels().clear }}</button>\n\t\t\t\t}\n\t\t\t</footer>\n\t\t}\n\t</div>\n</ng-template>\n", styles: ["hub-datepicker{display:block}hub-datepicker.hidden-control{display:none!important}.hub-datepicker__trigger{position:relative}.hub-datepicker__input{padding-right:var(--hub-datepicker-icon-width);cursor:pointer}.hub-datepicker__input--clearable{padding-right:calc(var(--hub-datepicker-icon-width) + 1.5rem)}.hub-datepicker__clear{position:absolute;top:0;right:var(--hub-datepicker-icon-width);height:100%;width:1.5rem;padding:0;color:var(--hub-daterangepicker-nav-arrow-color);font-size:1.1rem;line-height:1;background:transparent;border:0;cursor:pointer}.hub-datepicker__clear:hover{color:var(--hub-form-invalid-color)}.hub-datepicker__icon{position:absolute;top:0;right:0;width:var(--hub-datepicker-icon-width);height:100%;padding:0;background:transparent;border:0;cursor:pointer}.hub-datepicker__icon:after{content:\"\";display:block;width:var(--hub-datepicker-icon-size);height:var(--hub-datepicker-icon-size);margin:0 auto;background:var(--hub-datepicker-icon) center/contain no-repeat}.hub-datepicker__icon:disabled{cursor:not-allowed;opacity:var(--hub-form-disabled-opacity)}.hub-datepicker__panel{width:max-content;padding:var(--hub-daterangepicker-padding);color:var(--hub-daterangepicker-color);background:var(--hub-daterangepicker-bg);border:var(--hub-input-border-width) solid var(--hub-daterangepicker-border-color);border-radius:var(--hub-daterangepicker-border-radius);box-shadow:var(--hub-daterangepicker-box-shadow);font-family:var(--hub-input-font-family)}.hub-datepicker__panel .hub-datepicker__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--hub-ref-space-2, .5rem)}.hub-datepicker__panel .hub-datepicker__nav-group{display:inline-flex;gap:.125rem}.hub-datepicker__panel .hub-datepicker__nav{display:inline-flex;align-items:center;justify-content:center;width:var(--hub-daterangepicker-cell-size);height:var(--hub-daterangepicker-cell-size);font-size:1.25rem;line-height:1;color:var(--hub-daterangepicker-nav-arrow-color);background:transparent;border:0;border-radius:var(--hub-daterangepicker-cell-border-radius);cursor:pointer}.hub-datepicker__panel .hub-datepicker__nav:hover{color:var(--hub-daterangepicker-nav-arrow-hover-color);background:var(--hub-daterangepicker-cell-hover-bg)}.hub-datepicker__panel .hub-datepicker__title{font-weight:var(--hub-ref-font-weight-medium, 500);text-transform:capitalize}.hub-datepicker__panel .hub-datepicker__weekdays,.hub-datepicker__panel .hub-datepicker__grid{display:grid;grid-template-columns:repeat(7,var(--hub-daterangepicker-cell-size));gap:.125rem}.hub-datepicker__panel .hub-datepicker__weekday{display:inline-flex;align-items:center;justify-content:center;height:1.5rem;font-size:var(--hub-ref-font-size-sm, .875rem);color:var(--hub-daterangepicker-off-color);text-transform:capitalize}.hub-datepicker__panel .hub-datepicker__cell{display:inline-flex;align-items:center;justify-content:center;width:var(--hub-daterangepicker-cell-size);height:var(--hub-daterangepicker-cell-size);color:var(--hub-daterangepicker-cell-color);background:transparent;border:0;border-radius:var(--hub-daterangepicker-cell-border-radius);font-size:var(--hub-input-font-size);cursor:pointer}.hub-datepicker__panel .hub-datepicker__cell:hover{background:var(--hub-daterangepicker-cell-hover-bg)}.hub-datepicker__panel .hub-datepicker__cell--outside{color:var(--hub-daterangepicker-off-color)}.hub-datepicker__panel .hub-datepicker__cell--today{font-weight:var(--hub-ref-font-weight-bold, 700);box-shadow:inset 0 0 0 1px var(--hub-daterangepicker-border-color)}.hub-datepicker__panel .hub-datepicker__cell--in-range{background:var(--hub-daterangepicker-in-range-bg);border-radius:0}.hub-datepicker__panel .hub-datepicker__cell--range-start{border-top-right-radius:0;border-bottom-right-radius:0}.hub-datepicker__panel .hub-datepicker__cell--range-end{border-top-left-radius:0;border-bottom-left-radius:0}.hub-datepicker__panel .hub-datepicker__cell--selected,.hub-datepicker__panel .hub-datepicker__cell--selected:hover{color:var(--hub-daterangepicker-active-color);background:var(--hub-daterangepicker-active-bg)}.hub-datepicker__panel .hub-datepicker__cell:disabled{color:var(--hub-daterangepicker-off-color);background:transparent;cursor:not-allowed;opacity:.6}.hub-datepicker__panel .hub-datepicker__cell:focus-visible{outline:0;box-shadow:var(--hub-input-focus-box-shadow)}.hub-datepicker__panel .hub-datepicker__footer{display:flex;justify-content:flex-end;gap:var(--hub-ref-space-2, .5rem);margin-top:var(--hub-ref-space-2, .5rem);padding-top:var(--hub-ref-space-2, .5rem);border-top:var(--hub-input-border-width) solid var(--hub-daterangepicker-border-color)}.hub-datepicker__panel .hub-datepicker__action{padding:.2rem .5rem;color:var(--hub-sys-color-primary, #0d6efd);font-size:var(--hub-ref-font-size-sm, .875rem);background:transparent;border:0;border-radius:var(--hub-daterangepicker-cell-border-radius);cursor:pointer}.hub-datepicker__panel .hub-datepicker__action:hover{background:var(--hub-daterangepicker-cell-hover-bg)}\n"] }]
+                    }, template: "<div\n\tclass=\"hub-field hub-datepicker\"\n\t[class.hub-field--horizontal]=\"labelType() === _labelTypes.Horizontal || (!label() && required())\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n\t[class.hub-field--valid]=\"showsValid\"\n>\n\t@if (label() || required()) {\n\t\t<label [for]=\"id\" class=\"hub-field__label\">\n\t\t\t{{ label() }}\n\t\t\t@if (required()) {\n\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t}\n\t\t</label>\n\t}\n\n\t<div class=\"hub-field__body hub-datepicker__trigger\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\n\t\t<input\n\t\t\tclass=\"hub-field__control hub-datepicker__input\"\n\t\t\t[class.hub-field__control--invalid]=\"isInvalid\"\n\t\t\t[class.hub-field__control--valid]=\"showsValid\"\n\t\t\t[class.hub-datepicker__input--clearable]=\"clearable() && displayValue()\"\n\t\t\t[id]=\"id\"\n\t\t\ttype=\"text\"\n\t\t\treadonly\n\t\t\t[value]=\"displayValue()\"\n\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t[disabled]=\"disabled()\"\n\t\t\t[required]=\"!!required()\"\n\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t[attr.aria-expanded]=\"_open()\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\t(click)=\"toggleCalendar()\"\n\t\t\t(blur)=\"handleBlur($event)\"\n\t\t/>\n\t\t@if (clearable() && displayValue() && !disabled() && !readonly()) {\n\t\t\t<button type=\"button\" class=\"hub-datepicker__clear\" [attr.aria-label]=\"_labels().clear\" (click)=\"clear()\">&times;</button>\n\t\t}\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tclass=\"hub-datepicker__icon\"\n\t\t\ttabindex=\"-1\"\n\t\t\t[attr.aria-label]=\"_labels().openCalendar\"\n\t\t\t[disabled]=\"disabled() || readonly()\"\n\t\t\t(click)=\"toggleCalendar()\"\n\t\t></button>\n\t</div>\n\n\t@if (formText() || formTextTmp()) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span class=\"hub-field__feedback-text\" [innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n\n\t@if (showsValid && validFeedback()) {\n\t\t<div class=\"hub-field__feedback hub-field__feedback--valid\" role=\"status\">\n\t\t\t<span class=\"hub-field__feedback-text\">{{ validFeedback() }}</span>\n\t\t</div>\n\t}\n</div>\n\n<ng-template\n\tcdkConnectedOverlay\n\t[cdkConnectedOverlayOrigin]=\"trigger\"\n\t[cdkConnectedOverlayOpen]=\"_open()\"\n\t[cdkConnectedOverlayHasBackdrop]=\"true\"\n\tcdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n\t[cdkConnectedOverlayOffsetY]=\"4\"\n\t(backdropClick)=\"close()\"\n\t(detach)=\"close()\"\n>\n\t<div class=\"hub-datepicker__panel\" role=\"dialog\" [attr.aria-label]=\"monthYearLabel()\">\n\t\t<header class=\"hub-datepicker__header\">\n\t\t\t<div class=\"hub-datepicker__nav-group\">\n\t\t\t\t<button type=\"button\" class=\"hub-datepicker__nav\" [attr.aria-label]=\"_labels().previousYear\" (click)=\"shiftMonth(-12)\">\u00AB</button>\n\t\t\t\t<button type=\"button\" class=\"hub-datepicker__nav\" [attr.aria-label]=\"_labels().previousMonth\" (click)=\"shiftMonth(-1)\">\u2039</button>\n\t\t\t</div>\n\t\t\t<span class=\"hub-datepicker__title\" aria-live=\"polite\">{{ monthYearLabel() }}</span>\n\t\t\t<div class=\"hub-datepicker__nav-group\">\n\t\t\t\t<button type=\"button\" class=\"hub-datepicker__nav\" [attr.aria-label]=\"_labels().nextMonth\" (click)=\"shiftMonth(1)\">\u203A</button>\n\t\t\t\t<button type=\"button\" class=\"hub-datepicker__nav\" [attr.aria-label]=\"_labels().nextYear\" (click)=\"shiftMonth(12)\">\u00BB</button>\n\t\t\t</div>\n\t\t</header>\n\n\t\t<div class=\"hub-datepicker__weekdays\" aria-hidden=\"true\">\n\t\t\t@for (wd of weekdays(); track $index) {\n\t\t\t\t<span class=\"hub-datepicker__weekday\">{{ wd }}</span>\n\t\t\t}\n\t\t</div>\n\n\t\t<div class=\"hub-datepicker__grid\" role=\"grid\" (keydown)=\"onGridKeydown($event)\">\n\t\t\t@for (cell of grid(); track cell.date.getTime()) {\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\trole=\"gridcell\"\n\t\t\t\t\tclass=\"hub-datepicker__cell\"\n\t\t\t\t\t[class.hub-datepicker__cell--outside]=\"!cell.currentMonth\"\n\t\t\t\t\t[class.hub-datepicker__cell--today]=\"cell.today\"\n\t\t\t\t\t[class.hub-datepicker__cell--selected]=\"cell.selected || cell.rangeStart || cell.rangeEnd\"\n\t\t\t\t\t[class.hub-datepicker__cell--range-start]=\"cell.rangeStart\"\n\t\t\t\t\t[class.hub-datepicker__cell--range-end]=\"cell.rangeEnd\"\n\t\t\t\t\t[class.hub-datepicker__cell--in-range]=\"cell.inRange\"\n\t\t\t\t\t[attr.data-time]=\"cell.date.getTime()\"\n\t\t\t\t\t[attr.tabindex]=\"cell.focused ? 0 : -1\"\n\t\t\t\t\t[attr.aria-selected]=\"cell.selected || cell.rangeStart || cell.rangeEnd\"\n\t\t\t\t\t[disabled]=\"cell.disabled\"\n\t\t\t\t\t(click)=\"selectDay(cell)\"\n\t\t\t\t>\n\t\t\t\t\t{{ cell.day }}\n\t\t\t\t</button>\n\t\t\t}\n\t\t</div>\n\n\t\t@if (showToday() || clearable()) {\n\t\t\t<footer class=\"hub-datepicker__footer\">\n\t\t\t\t@if (showToday()) {\n\t\t\t\t\t<button type=\"button\" class=\"hub-datepicker__action\" (click)=\"goToToday()\">{{ _labels().today }}</button>\n\t\t\t\t}\n\t\t\t\t@if (clearable()) {\n\t\t\t\t\t<button type=\"button\" class=\"hub-datepicker__action\" (click)=\"clear()\">{{ _labels().clear }}</button>\n\t\t\t\t}\n\t\t\t</footer>\n\t\t}\n\t</div>\n</ng-template>\n", styles: ["hub-datepicker{display:block}hub-datepicker.hidden-control{display:none!important}.hub-datepicker__trigger{position:relative}.hub-datepicker__input{padding-right:var(--hub-datepicker-icon-width);cursor:pointer}.hub-datepicker__input--clearable{padding-right:calc(var(--hub-datepicker-icon-width) + 1.5rem)}.hub-datepicker__clear{position:absolute;top:0;right:var(--hub-datepicker-icon-width);height:100%;width:1.5rem;padding:0;color:var(--hub-daterangepicker-nav-arrow-color);font-size:1.1rem;line-height:1;background:transparent;border:0;cursor:pointer}.hub-datepicker__clear:hover{color:var(--hub-form-invalid-color)}.hub-datepicker__icon{position:absolute;top:0;right:0;width:var(--hub-datepicker-icon-width);height:100%;padding:0;background:transparent;border:0;cursor:pointer}.hub-datepicker__icon:after{content:\"\";display:block;width:var(--hub-datepicker-icon-size);height:var(--hub-datepicker-icon-size);margin:0 auto;background:var(--hub-datepicker-icon) center/contain no-repeat}.hub-datepicker__icon:disabled{cursor:not-allowed;opacity:var(--hub-form-disabled-opacity)}.hub-datepicker__panel{width:max-content;padding:var(--hub-daterangepicker-padding-y, var(--hub-ref-space-3, 1rem)) var(--hub-daterangepicker-padding-x, var(--hub-ref-space-3, 1rem));color:var(--hub-daterangepicker-color);background:var(--hub-daterangepicker-bg);border:var(--hub-input-border-width) solid var(--hub-daterangepicker-border-color);border-radius:var(--hub-daterangepicker-border-radius);box-shadow:var(--hub-daterangepicker-box-shadow);font-family:var(--hub-input-font-family)}.hub-datepicker__panel .hub-datepicker__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--hub-ref-space-2, .5rem)}.hub-datepicker__panel .hub-datepicker__nav-group{display:inline-flex;gap:.125rem}.hub-datepicker__panel .hub-datepicker__nav{display:inline-flex;align-items:center;justify-content:center;width:var(--hub-daterangepicker-cell-size);height:var(--hub-daterangepicker-cell-size);font-size:1.25rem;line-height:1;color:var(--hub-daterangepicker-nav-arrow-color);background:transparent;border:0;border-radius:var(--hub-daterangepicker-cell-border-radius);cursor:pointer}.hub-datepicker__panel .hub-datepicker__nav:hover{color:var(--hub-daterangepicker-nav-arrow-hover-color);background:var(--hub-daterangepicker-cell-hover-bg)}.hub-datepicker__panel .hub-datepicker__title{font-weight:var(--hub-ref-font-weight-medium, 500);text-transform:capitalize}.hub-datepicker__panel .hub-datepicker__weekdays,.hub-datepicker__panel .hub-datepicker__grid{display:grid;grid-template-columns:repeat(7,var(--hub-daterangepicker-cell-size));gap:.125rem}.hub-datepicker__panel .hub-datepicker__weekday{display:inline-flex;align-items:center;justify-content:center;height:1.5rem;font-size:var(--hub-ref-font-size-sm, .875rem);color:var(--hub-daterangepicker-off-color);text-transform:capitalize}.hub-datepicker__panel .hub-datepicker__cell{display:inline-flex;align-items:center;justify-content:center;width:var(--hub-daterangepicker-cell-size);height:var(--hub-daterangepicker-cell-size);color:var(--hub-daterangepicker-cell-color);background:transparent;border:0;border-radius:var(--hub-daterangepicker-cell-border-radius);font-size:var(--hub-input-font-size);cursor:pointer}.hub-datepicker__panel .hub-datepicker__cell:hover{background:var(--hub-daterangepicker-cell-hover-bg)}.hub-datepicker__panel .hub-datepicker__cell--outside{color:var(--hub-daterangepicker-off-color)}.hub-datepicker__panel .hub-datepicker__cell--today{font-weight:var(--hub-ref-font-weight-bold, 700);box-shadow:inset 0 0 0 1px var(--hub-daterangepicker-border-color)}.hub-datepicker__panel .hub-datepicker__cell--in-range{background:var(--hub-daterangepicker-in-range-bg);border-radius:0}.hub-datepicker__panel .hub-datepicker__cell--range-start{border-top-right-radius:0;border-bottom-right-radius:0}.hub-datepicker__panel .hub-datepicker__cell--range-end{border-top-left-radius:0;border-bottom-left-radius:0}.hub-datepicker__panel .hub-datepicker__cell--selected,.hub-datepicker__panel .hub-datepicker__cell--selected:hover{color:var(--hub-daterangepicker-active-color);background:var(--hub-daterangepicker-active-bg)}.hub-datepicker__panel .hub-datepicker__cell:disabled{color:var(--hub-daterangepicker-off-color);background:transparent;cursor:not-allowed;opacity:.6}.hub-datepicker__panel .hub-datepicker__cell:focus-visible{outline:0;box-shadow:var(--hub-input-focus-box-shadow)}.hub-datepicker__panel .hub-datepicker__footer{display:flex;justify-content:flex-end;gap:var(--hub-ref-space-2, .5rem);margin-top:var(--hub-ref-space-2, .5rem);padding-top:var(--hub-ref-space-2, .5rem);border-top:var(--hub-input-border-width) solid var(--hub-daterangepicker-border-color)}.hub-datepicker__panel .hub-datepicker__action{padding:.2rem .5rem;color:var(--hub-sys-color-primary, #0d6efd);font-size:var(--hub-ref-font-size-sm, .875rem);background:transparent;border:0;border-radius:var(--hub-daterangepicker-cell-border-radius);cursor:pointer}.hub-datepicker__panel .hub-datepicker__action:hover{background:var(--hub-daterangepicker-cell-hover-bg)}\n"] }]
         }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelType: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelType", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], weekdayFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekdayFormat", required: false }] }], displayFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayFormat", required: false }] }], rangeSeparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeSeparator", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], showToday: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToday", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], formText: [{ type: i0.Input, args: [{ isSignal: true, alias: "formText", required: false }] }], formTextType: [{ type: i0.Input, args: [{ isSignal: true, alias: "formTextType", required: false }] }], classlist: [{ type: i0.Input, args: [{ isSignal: true, alias: "classlist", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], viewChange: [{ type: i0.Output, args: ["viewChange"] }], cleared: [{ type: i0.Output, args: ["cleared"] }] } });
 
 /**