npm - ng-hub-ui-forms - Versions diffs - 22.24.0 → 22.25.0 - Mend

ng-hub-ui-forms 22.24.0 → 22.25.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/fesm2022/ng-hub-ui-forms.mjs +114 -59
package/fesm2022/ng-hub-ui-forms.mjs.map +1 -1
package/package.json +2 -3
package/styles/_group-addons.scss +2 -8
package/types/ng-hub-ui-forms.d.ts +5 -0

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

@@ -1,14 +1,12 @@
 import * as i0 from '@angular/core';
-import { input, model, Directive, inject, TemplateRef, InjectionToken, makeEnvironmentProviders, ElementRef, ChangeDetectorRef, contentChild, contentChildren, signal, computed, effect, booleanAttribute, numberAttribute, output, DestroyRef, viewChild, isDevMode, ViewEncapsulation, ChangeDetectionStrategy, Component, viewChildren, PLATFORM_ID, afterRenderEffect, afterNextRender, Injectable, Renderer2, NgZone, afterEveryRender, HostAttributeToken, linkedSignal, forwardRef, Injector, HostListener, LOCALE_ID, Pipe } from '@angular/core';
+import { input, model, Directive, inject, TemplateRef, InjectionToken, makeEnvironmentProviders, ElementRef, ChangeDetectorRef, contentChild, contentChildren, signal, computed, effect, booleanAttribute, numberAttribute, output, DestroyRef, viewChild, isDevMode, ViewEncapsulation, ChangeDetectionStrategy, Component, viewChildren, PLATFORM_ID, afterRenderEffect, afterNextRender, Injectable, Renderer2, NgZone, afterEveryRender, HostAttributeToken, linkedSignal, forwardRef, Injector, HostListener, LOCALE_ID, ViewContainerRef, Pipe } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormControl, FormControlName, FormControlDirective, Validators, NgControl, ControlContainer, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Observable, Subject, takeUntil, tap, animationFrameScheduler, asapScheduler, fromEvent } from 'rxjs';
 import { NgTemplateOutlet, KeyValuePipe, isPlatformBrowser, DOCUMENT, formatDate } from '@angular/common';
-import { resolveHubAccent } from 'ng-hub-ui-utils';
+import { resolveHubAccent, OverlayService, HUB_DROPDOWN_POSITIONS } from 'ng-hub-ui-utils';
 import { auditTime, tap as tap$1, debounceTime, filter, map } from 'rxjs/operators';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import * as i1$1 from '@angular/cdk/overlay';
-import { OverlayModule } from '@angular/cdk/overlay';
 import { DomSanitizer } from '@angular/platform-browser';
 /**
@@ -2109,14 +2107,14 @@ class HubTextareaComponent extends HubFieldControl {
         this.valueChange.emit(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: HubTextareaComponent, isStandalone: true, selector: "hub-textarea", inputs: { prepend: { classPropertyName: "prepend", publicName: "prepend", isSignal: true, isRequired: false, transformFunction: null }, append: { classPropertyName: "append", publicName: "append", 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 }, 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" } }, queries: [{ propertyName: "_prependTpl", first: true, predicate: HubPrependDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_appendTpl", first: true, predicate: HubAppendDirective, descendants: true, read: TemplateRef, isSignal: 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--readonly]=\"readonly()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n\t[class.hub-field--valid]=\"showsValid\"\n>\n\t@if (label() || required()) {\n\t\t<label [for]=\"id\" class=\"hub-field__label\">\n\t\t\t{{ label() }}\n\t\t\t@if (required()) {\n\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t}\n\t\t</label>\n\t}\n\n\t<div class=\"hub-field__body\">\n\t\t<div\n\t\t\tclass=\"hub-textarea__group\"\n\t\t\t[class.hub-textarea__group--has-prepend]=\"hasPrepend()\"\n\t\t\t[class.hub-textarea__group--has-append]=\"hasAppend()\"\n\t\t>\n\t\t\t@if (_prependTpl(); as tpl) {\n\t\t\t\t<span class=\"hub-textarea__attached hub-textarea__attached--prepend\">\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t</span>\n\t\t\t}\n\t\t\t@for (addon of _prepend(); track $index) {\n\t\t\t\t<span class=\"hub-textarea__addon hub-textarea__addon--prepend\">{{ addon }}</span>\n\t\t\t}\n\t\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\t></textarea>\n\t\t\t@for (addon of _append(); track $index) {\n\t\t\t\t<span class=\"hub-textarea__addon hub-textarea__addon--append\">{{ addon }}</span>\n\t\t\t}\n\t\t\t@if (_appendTpl(); as tpl) {\n\t\t\t\t<span class=\"hub-textarea__attached hub-textarea__attached--append\">\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t</span>\n\t\t\t}\n\t\t</div>\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\n\t\t\t\t\t\t\t\tclass=\"hub-field__feedback-text\"\n\t\t\t\t\t\t\t\t[innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"\n\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n\n\t@if (showsValid && validFeedback()) {\n\t\t<div class=\"hub-field__feedback hub-field__feedback--valid\" role=\"status\">\n\t\t\t<span class=\"hub-field__feedback-text\">{{ validFeedback() }}</span>\n\t\t</div>\n\t}\n</div>\n", styles: ["hub-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:end}.hub-textarea__group{display:flex;align-items:stretch;min-width:0}.hub-textarea__group>.hub-textarea__control,.hub-textarea__group>.hub-field__control{flex:1 1 auto;min-width:0}.hub-textarea__addon{display:flex;align-items:center;flex:0 0 auto;padding:0 var(--hub-textarea-padding-x, var(--hub-input-padding-x));color:var(--hub-textarea-group-addon-color, var(--hub-input-group-addon-color));background:var(--hub-textarea-group-addon-bg, var(--hub-input-group-addon-bg));border:var(--hub-textarea-border-width, var(--hub-input-border-width)) solid var(--hub-textarea-group-addon-border-color, var(--hub-input-group-addon-border-color));border-radius:var(--hub-textarea-border-radius, var(--hub-input-border-radius));font-size:var(--hub-textarea-font-size, var(--hub-input-font-size));white-space:nowrap}.hub-textarea__addon--prepend{border-inline-end:0;border-start-end-radius:0;border-end-end-radius:0}.hub-textarea__addon--append{border-inline-start:0;border-start-start-radius:0;border-end-start-radius:0}.hub-textarea__attached.hub-textarea__attached{display:flex;align-items:stretch;flex:0 0 auto;gap:var(--hub-textarea-group-attached-gap, var(--hub-input-group-attached-gap));position:relative}.hub-textarea__attached.hub-textarea__attached>*{padding-block:0;padding-inline:var(--hub-textarea-padding-x, var(--hub-input-padding-x));height:auto;align-self:stretch;display:flex;align-items:center;justify-content:center;min-height:var(--hub-textarea-min-height, auto);border:var(--hub-textarea-group-attached-border-width, var(--hub-input-group-attached-border-width)) solid var(--hub-textarea-group-attached-border-color, var(--hub-input-group-attached-border-color));border-radius:var(--hub-textarea-border-radius, var(--hub-input-border-radius));margin-inline:calc(-1 * var(--hub-textarea-group-attached-border-width, var(--hub-input-group-attached-border-width))) 0;position:relative}.hub-textarea__attached.hub-textarea__attached>*:hover,.hub-textarea__attached.hub-textarea__attached>*:focus-visible{z-index:1}.hub-textarea__attached.hub-textarea__attached--prepend>*{border-start-end-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius));margin-inline:0 calc(-1 * var(--hub-textarea-group-attached-border-width, var(--hub-input-group-attached-border-width)))}.hub-textarea__attached.hub-textarea__attached--append>*{border-start-start-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-textarea__attached.hub-textarea__attached--prepend>*:not(:first-child){border-start-start-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-textarea__attached.hub-textarea__attached--append>*:not(:last-child){border-start-end-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-textarea__attached.hub-textarea__attached>hub-input,.hub-textarea__attached.hub-textarea__attached>hub-select,.hub-textarea__attached.hub-textarea__attached>hub-textarea,.hub-textarea__attached.hub-textarea__attached>hub-datepicker{padding-inline:0;border:0;border-radius:0}.hub-textarea__attached.hub-textarea__attached--prepend>hub-input .hub-field__control,.hub-textarea__attached.hub-textarea__attached--prepend>hub-select .ng-select-container,.hub-textarea__attached.hub-textarea__attached--prepend>hub-textarea .hub-field__control,.hub-textarea__attached.hub-textarea__attached--prepend>hub-datepicker .hub-field__control{border-start-end-radius:0;border-end-end-radius:0}.hub-textarea__attached.hub-textarea__attached--append>hub-input .hub-field__control,.hub-textarea__attached.hub-textarea__attached--append>hub-select .ng-select-container,.hub-textarea__attached.hub-textarea__attached--append>hub-textarea .hub-field__control,.hub-textarea__attached.hub-textarea__attached--append>hub-datepicker .hub-field__control{border-start-start-radius:0;border-end-start-radius:0}:where(.hub-textarea__attached)>*:not(button):not(a):not(input):not(select):not(textarea):not([role=button]):not([role=link]):not([tabindex]){background:var(--hub-textarea-group-addon-bg, var(--hub-input-group-addon-bg));color:var(--hub-textarea-group-addon-color, var(--hub-input-group-addon-color))}:where(.hub-textarea__attached)>button,:where(.hub-textarea__attached)>a,:where(.hub-textarea__attached)>[role=button],:where(.hub-textarea__attached)>[role=link],:where(.hub-textarea__attached)>[tabindex]{background:var(--hub-textarea-group-action-bg, var(--hub-input-group-action-bg));color:var(--hub-textarea-group-action-color, var(--hub-input-group-action-color))}.hub-textarea__group--has-prepend .hub-textarea__control,.hub-textarea__group--has-prepend .hub-field__control,.hub-textarea__group--has-prepend .hub-textarea__control.ng-select .ng-select-container{border-start-start-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-textarea__group--has-append .hub-textarea__control,.hub-textarea__group--has-append .hub-field__control,.hub-textarea__group--has-append .hub-textarea__control.ng-select .ng-select-container{border-start-end-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-textarea__group>.hub-textarea__addon--prepend:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.hub-textarea__group>.hub-textarea__addon--append:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.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.8", type: HubTextareaComponent, isStandalone: true, selector: "hub-textarea", inputs: { prepend: { classPropertyName: "prepend", publicName: "prepend", isSignal: true, isRequired: false, transformFunction: null }, append: { classPropertyName: "append", publicName: "append", 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 }, 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" } }, queries: [{ propertyName: "_prependTpl", first: true, predicate: HubPrependDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_appendTpl", first: true, predicate: HubAppendDirective, descendants: true, read: TemplateRef, isSignal: 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--readonly]=\"readonly()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n\t[class.hub-field--valid]=\"showsValid\"\n>\n\t@if (label() || required()) {\n\t\t<label [for]=\"id\" class=\"hub-field__label\">\n\t\t\t{{ label() }}\n\t\t\t@if (required()) {\n\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t}\n\t\t</label>\n\t}\n\n\t<div class=\"hub-field__body\">\n\t\t<div\n\t\t\tclass=\"hub-textarea__group\"\n\t\t\t[class.hub-textarea__group--has-prepend]=\"hasPrepend()\"\n\t\t\t[class.hub-textarea__group--has-append]=\"hasAppend()\"\n\t\t>\n\t\t\t@if (_prependTpl(); as tpl) {\n\t\t\t\t<span class=\"hub-textarea__attached hub-textarea__attached--prepend\">\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t</span>\n\t\t\t}\n\t\t\t@for (addon of _prepend(); track $index) {\n\t\t\t\t<span class=\"hub-textarea__addon hub-textarea__addon--prepend\">{{ addon }}</span>\n\t\t\t}\n\t\t\t<textarea\n\t\t\t\tclass=\"hub-field__control hub-textarea__control\"\n\t\t\t\t[class.hub-field__control--invalid]=\"isInvalid\"\n\t\t\t\t[class.hub-field__control--valid]=\"showsValid\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\t[hubAutoresize]=\"autoresize()\"\n\t\t\t\t[ngModel]=\"_value()\"\n\t\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t\t[attr.rows]=\"rows()\"\n\t\t\t\t[attr.cols]=\"cols()\"\n\t\t\t\t[attr.maxlength]=\"maxlength()\"\n\t\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t[readonly]=\"readonly()\"\n\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t[style.width]=\"cols() ? 'auto' : '100%'\"\n\t\t\t></textarea>\n\t\t\t@for (addon of _append(); track $index) {\n\t\t\t\t<span class=\"hub-textarea__addon hub-textarea__addon--append\">{{ addon }}</span>\n\t\t\t}\n\t\t\t@if (_appendTpl(); as tpl) {\n\t\t\t\t<span class=\"hub-textarea__attached hub-textarea__attached--append\">\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t</span>\n\t\t\t}\n\t\t</div>\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\n\t\t\t\t\t\t\t\tclass=\"hub-field__feedback-text\"\n\t\t\t\t\t\t\t\t[innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"\n\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n\n\t@if (showsValid && validFeedback()) {\n\t\t<div class=\"hub-field__feedback hub-field__feedback--valid\" role=\"status\">\n\t\t\t<span class=\"hub-field__feedback-text\">{{ validFeedback() }}</span>\n\t\t</div>\n\t}\n</div>\n", styles: ["hub-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:end}.hub-textarea__group{display:flex;align-items:stretch;min-width:0}.hub-textarea__group>.hub-textarea__control,.hub-textarea__group>.hub-field__control{flex:1 1 auto;min-width:0}.hub-textarea__addon{display:flex;align-items:center;flex:0 0 auto;padding:0 var(--hub-textarea-padding-x, var(--hub-input-padding-x));color:var(--hub-textarea-group-addon-color, var(--hub-input-group-addon-color));background:var(--hub-textarea-group-addon-bg, var(--hub-input-group-addon-bg));border:var(--hub-textarea-border-width, var(--hub-input-border-width)) solid var(--hub-textarea-group-addon-border-color, var(--hub-input-group-addon-border-color));border-radius:var(--hub-textarea-border-radius, var(--hub-input-border-radius));font-size:var(--hub-textarea-font-size, var(--hub-input-font-size));white-space:nowrap}.hub-textarea__addon--prepend{border-inline-end:0;border-start-end-radius:0;border-end-end-radius:0}.hub-textarea__addon--append{border-inline-start:0;border-start-start-radius:0;border-end-start-radius:0}.hub-textarea__attached.hub-textarea__attached{display:flex;align-items:stretch;flex:0 0 auto;gap:var(--hub-textarea-group-attached-gap, var(--hub-input-group-attached-gap));position:relative}.hub-textarea__attached.hub-textarea__attached>*{padding-block:0;padding-inline:var(--hub-textarea-padding-x, var(--hub-input-padding-x));height:auto;align-self:stretch;display:flex;align-items:center;justify-content:center;min-height:var(--hub-textarea-min-height, auto);border:var(--hub-textarea-group-attached-border-width, var(--hub-input-group-attached-border-width)) solid var(--hub-textarea-group-attached-border-color, var(--hub-input-group-attached-border-color));border-radius:var(--hub-textarea-border-radius, var(--hub-input-border-radius));margin-inline:calc(-1 * var(--hub-textarea-group-attached-border-width, var(--hub-input-group-attached-border-width))) 0;position:relative}.hub-textarea__attached.hub-textarea__attached>*:hover,.hub-textarea__attached.hub-textarea__attached>*:focus-visible{z-index:1}.hub-textarea__attached.hub-textarea__attached--prepend>*{border-start-end-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius));margin-inline:0 calc(-1 * var(--hub-textarea-group-attached-border-width, var(--hub-input-group-attached-border-width)))}.hub-textarea__attached.hub-textarea__attached--append>*{border-start-start-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-textarea__attached.hub-textarea__attached--prepend>*:not(:first-child){border-start-start-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-textarea__attached.hub-textarea__attached--append>*:not(:last-child){border-start-end-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-textarea__attached.hub-textarea__attached>hub-input,.hub-textarea__attached.hub-textarea__attached>hub-select,.hub-textarea__attached.hub-textarea__attached>hub-textarea,.hub-textarea__attached.hub-textarea__attached>hub-datepicker{padding-inline:0;border:0;border-radius:0}.hub-textarea__attached.hub-textarea__attached--prepend>hub-input .hub-field__control,.hub-textarea__attached.hub-textarea__attached--prepend>hub-select .ng-select-container,.hub-textarea__attached.hub-textarea__attached--prepend>hub-textarea .hub-field__control,.hub-textarea__attached.hub-textarea__attached--prepend>hub-datepicker .hub-field__control{border-start-end-radius:0;border-end-end-radius:0}.hub-textarea__attached.hub-textarea__attached--append>hub-input .hub-field__control,.hub-textarea__attached.hub-textarea__attached--append>hub-select .ng-select-container,.hub-textarea__attached.hub-textarea__attached--append>hub-textarea .hub-field__control,.hub-textarea__attached.hub-textarea__attached--append>hub-datepicker .hub-field__control{border-start-start-radius:0;border-end-start-radius:0}:where(.hub-textarea__attached)>*:not(button):not(a):not(input):not(select):not(textarea):not([role=button]):not([role=link]):not([tabindex]){background:var(--hub-textarea-group-addon-bg, var(--hub-input-group-addon-bg));color:var(--hub-textarea-group-addon-color, var(--hub-input-group-addon-color))}:where(.hub-textarea__attached)>button,:where(.hub-textarea__attached)>a,:where(.hub-textarea__attached)>[role=button],:where(.hub-textarea__attached)>[role=link],:where(.hub-textarea__attached)>[tabindex]{background:var(--hub-textarea-group-action-bg, var(--hub-input-group-action-bg));color:var(--hub-textarea-group-action-color, var(--hub-input-group-action-color))}.hub-textarea__group--has-prepend .hub-textarea__control,.hub-textarea__group--has-prepend .hub-field__control,.hub-textarea__group--has-prepend .hub-textarea__control.ng-select .ng-select-container{border-start-start-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-textarea__group--has-append .hub-textarea__control,.hub-textarea__group--has-append .hub-field__control,.hub-textarea__group--has-append .hub-textarea__control.ng-select .ng-select-container{border-start-end-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-textarea__group>.hub-textarea__addon--prepend:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.hub-textarea__group>.hub-textarea__addon--append:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.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.8", 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--readonly]=\"readonly()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n\t[class.hub-field--valid]=\"showsValid\"\n>\n\t@if (label() || required()) {\n\t\t<label [for]=\"id\" class=\"hub-field__label\">\n\t\t\t{{ label() }}\n\t\t\t@if (required()) {\n\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t}\n\t\t</label>\n\t}\n\n\t<div class=\"hub-field__body\">\n\t\t<div\n\t\t\tclass=\"hub-textarea__group\"\n\t\t\t[class.hub-textarea__group--has-prepend]=\"hasPrepend()\"\n\t\t\t[class.hub-textarea__group--has-append]=\"hasAppend()\"\n\t\t>\n\t\t\t@if (_prependTpl(); as tpl) {\n\t\t\t\t<span class=\"hub-textarea__attached hub-textarea__attached--prepend\">\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t</span>\n\t\t\t}\n\t\t\t@for (addon of _prepend(); track $index) {\n\t\t\t\t<span class=\"hub-textarea__addon hub-textarea__addon--prepend\">{{ addon }}</span>\n\t\t\t}\n\t\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\t></textarea>\n\t\t\t@for (addon of _append(); track $index) {\n\t\t\t\t<span class=\"hub-textarea__addon hub-textarea__addon--append\">{{ addon }}</span>\n\t\t\t}\n\t\t\t@if (_appendTpl(); as tpl) {\n\t\t\t\t<span class=\"hub-textarea__attached hub-textarea__attached--append\">\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t</span>\n\t\t\t}\n\t\t</div>\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\n\t\t\t\t\t\t\t\tclass=\"hub-field__feedback-text\"\n\t\t\t\t\t\t\t\t[innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"\n\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n\n\t@if (showsValid && validFeedback()) {\n\t\t<div class=\"hub-field__feedback hub-field__feedback--valid\" role=\"status\">\n\t\t\t<span class=\"hub-field__feedback-text\">{{ validFeedback() }}</span>\n\t\t</div>\n\t}\n</div>\n", styles: ["hub-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:end}.hub-textarea__group{display:flex;align-items:stretch;min-width:0}.hub-textarea__group>.hub-textarea__control,.hub-textarea__group>.hub-field__control{flex:1 1 auto;min-width:0}.hub-textarea__addon{display:flex;align-items:center;flex:0 0 auto;padding:0 var(--hub-textarea-padding-x, var(--hub-input-padding-x));color:var(--hub-textarea-group-addon-color, var(--hub-input-group-addon-color));background:var(--hub-textarea-group-addon-bg, var(--hub-input-group-addon-bg));border:var(--hub-textarea-border-width, var(--hub-input-border-width)) solid var(--hub-textarea-group-addon-border-color, var(--hub-input-group-addon-border-color));border-radius:var(--hub-textarea-border-radius, var(--hub-input-border-radius));font-size:var(--hub-textarea-font-size, var(--hub-input-font-size));white-space:nowrap}.hub-textarea__addon--prepend{border-inline-end:0;border-start-end-radius:0;border-end-end-radius:0}.hub-textarea__addon--append{border-inline-start:0;border-start-start-radius:0;border-end-start-radius:0}.hub-textarea__attached.hub-textarea__attached{display:flex;align-items:stretch;flex:0 0 auto;gap:var(--hub-textarea-group-attached-gap, var(--hub-input-group-attached-gap));position:relative}.hub-textarea__attached.hub-textarea__attached>*{padding-block:0;padding-inline:var(--hub-textarea-padding-x, var(--hub-input-padding-x));height:auto;align-self:stretch;display:flex;align-items:center;justify-content:center;min-height:var(--hub-textarea-min-height, auto);border:var(--hub-textarea-group-attached-border-width, var(--hub-input-group-attached-border-width)) solid var(--hub-textarea-group-attached-border-color, var(--hub-input-group-attached-border-color));border-radius:var(--hub-textarea-border-radius, var(--hub-input-border-radius));margin-inline:calc(-1 * var(--hub-textarea-group-attached-border-width, var(--hub-input-group-attached-border-width))) 0;position:relative}.hub-textarea__attached.hub-textarea__attached>*:hover,.hub-textarea__attached.hub-textarea__attached>*:focus-visible{z-index:1}.hub-textarea__attached.hub-textarea__attached--prepend>*{border-start-end-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius));margin-inline:0 calc(-1 * var(--hub-textarea-group-attached-border-width, var(--hub-input-group-attached-border-width)))}.hub-textarea__attached.hub-textarea__attached--append>*{border-start-start-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-textarea__attached.hub-textarea__attached--prepend>*:not(:first-child){border-start-start-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-textarea__attached.hub-textarea__attached--append>*:not(:last-child){border-start-end-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-textarea__attached.hub-textarea__attached>hub-input,.hub-textarea__attached.hub-textarea__attached>hub-select,.hub-textarea__attached.hub-textarea__attached>hub-textarea,.hub-textarea__attached.hub-textarea__attached>hub-datepicker{padding-inline:0;border:0;border-radius:0}.hub-textarea__attached.hub-textarea__attached--prepend>hub-input .hub-field__control,.hub-textarea__attached.hub-textarea__attached--prepend>hub-select .ng-select-container,.hub-textarea__attached.hub-textarea__attached--prepend>hub-textarea .hub-field__control,.hub-textarea__attached.hub-textarea__attached--prepend>hub-datepicker .hub-field__control{border-start-end-radius:0;border-end-end-radius:0}.hub-textarea__attached.hub-textarea__attached--append>hub-input .hub-field__control,.hub-textarea__attached.hub-textarea__attached--append>hub-select .ng-select-container,.hub-textarea__attached.hub-textarea__attached--append>hub-textarea .hub-field__control,.hub-textarea__attached.hub-textarea__attached--append>hub-datepicker .hub-field__control{border-start-start-radius:0;border-end-start-radius:0}:where(.hub-textarea__attached)>*:not(button):not(a):not(input):not(select):not(textarea):not([role=button]):not([role=link]):not([tabindex]){background:var(--hub-textarea-group-addon-bg, var(--hub-input-group-addon-bg));color:var(--hub-textarea-group-addon-color, var(--hub-input-group-addon-color))}:where(.hub-textarea__attached)>button,:where(.hub-textarea__attached)>a,:where(.hub-textarea__attached)>[role=button],:where(.hub-textarea__attached)>[role=link],:where(.hub-textarea__attached)>[tabindex]{background:var(--hub-textarea-group-action-bg, var(--hub-input-group-action-bg));color:var(--hub-textarea-group-action-color, var(--hub-input-group-action-color))}.hub-textarea__group--has-prepend .hub-textarea__control,.hub-textarea__group--has-prepend .hub-field__control,.hub-textarea__group--has-prepend .hub-textarea__control.ng-select .ng-select-container{border-start-start-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-textarea__group--has-append .hub-textarea__control,.hub-textarea__group--has-append .hub-field__control,.hub-textarea__group--has-append .hub-textarea__control.ng-select .ng-select-container{border-start-end-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-textarea__group>.hub-textarea__addon--prepend:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.hub-textarea__group>.hub-textarea__addon--append:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}\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--readonly]=\"readonly()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n\t[class.hub-field--valid]=\"showsValid\"\n>\n\t@if (label() || required()) {\n\t\t<label [for]=\"id\" class=\"hub-field__label\">\n\t\t\t{{ label() }}\n\t\t\t@if (required()) {\n\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t}\n\t\t</label>\n\t}\n\n\t<div class=\"hub-field__body\">\n\t\t<div\n\t\t\tclass=\"hub-textarea__group\"\n\t\t\t[class.hub-textarea__group--has-prepend]=\"hasPrepend()\"\n\t\t\t[class.hub-textarea__group--has-append]=\"hasAppend()\"\n\t\t>\n\t\t\t@if (_prependTpl(); as tpl) {\n\t\t\t\t<span class=\"hub-textarea__attached hub-textarea__attached--prepend\">\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t</span>\n\t\t\t}\n\t\t\t@for (addon of _prepend(); track $index) {\n\t\t\t\t<span class=\"hub-textarea__addon hub-textarea__addon--prepend\">{{ addon }}</span>\n\t\t\t}\n\t\t\t<textarea\n\t\t\t\tclass=\"hub-field__control hub-textarea__control\"\n\t\t\t\t[class.hub-field__control--invalid]=\"isInvalid\"\n\t\t\t\t[class.hub-field__control--valid]=\"showsValid\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\t[hubAutoresize]=\"autoresize()\"\n\t\t\t\t[ngModel]=\"_value()\"\n\t\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t\t[attr.rows]=\"rows()\"\n\t\t\t\t[attr.cols]=\"cols()\"\n\t\t\t\t[attr.maxlength]=\"maxlength()\"\n\t\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t[readonly]=\"readonly()\"\n\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t[style.width]=\"cols() ? 'auto' : '100%'\"\n\t\t\t></textarea>\n\t\t\t@for (addon of _append(); track $index) {\n\t\t\t\t<span class=\"hub-textarea__addon hub-textarea__addon--append\">{{ addon }}</span>\n\t\t\t}\n\t\t\t@if (_appendTpl(); as tpl) {\n\t\t\t\t<span class=\"hub-textarea__attached hub-textarea__attached--append\">\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t</span>\n\t\t\t}\n\t\t</div>\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\n\t\t\t\t\t\t\t\tclass=\"hub-field__feedback-text\"\n\t\t\t\t\t\t\t\t[innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"\n\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n\n\t@if (showsValid && validFeedback()) {\n\t\t<div class=\"hub-field__feedback hub-field__feedback--valid\" role=\"status\">\n\t\t\t<span class=\"hub-field__feedback-text\">{{ validFeedback() }}</span>\n\t\t</div>\n\t}\n</div>\n", styles: ["hub-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:end}.hub-textarea__group{display:flex;align-items:stretch;min-width:0}.hub-textarea__group>.hub-textarea__control,.hub-textarea__group>.hub-field__control{flex:1 1 auto;min-width:0}.hub-textarea__addon{display:flex;align-items:center;flex:0 0 auto;padding:0 var(--hub-textarea-padding-x, var(--hub-input-padding-x));color:var(--hub-textarea-group-addon-color, var(--hub-input-group-addon-color));background:var(--hub-textarea-group-addon-bg, var(--hub-input-group-addon-bg));border:var(--hub-textarea-border-width, var(--hub-input-border-width)) solid var(--hub-textarea-group-addon-border-color, var(--hub-input-group-addon-border-color));border-radius:var(--hub-textarea-border-radius, var(--hub-input-border-radius));font-size:var(--hub-textarea-font-size, var(--hub-input-font-size));white-space:nowrap}.hub-textarea__addon--prepend{border-inline-end:0;border-start-end-radius:0;border-end-end-radius:0}.hub-textarea__addon--append{border-inline-start:0;border-start-start-radius:0;border-end-start-radius:0}.hub-textarea__attached.hub-textarea__attached{display:flex;align-items:stretch;flex:0 0 auto;gap:var(--hub-textarea-group-attached-gap, var(--hub-input-group-attached-gap));position:relative}.hub-textarea__attached.hub-textarea__attached>*{padding-block:0;padding-inline:var(--hub-textarea-padding-x, var(--hub-input-padding-x));height:auto;align-self:stretch;display:flex;align-items:center;justify-content:center;min-height:var(--hub-textarea-min-height, auto);border:var(--hub-textarea-group-attached-border-width, var(--hub-input-group-attached-border-width)) solid var(--hub-textarea-group-attached-border-color, var(--hub-input-group-attached-border-color));border-radius:var(--hub-textarea-border-radius, var(--hub-input-border-radius));margin-inline:calc(-1 * var(--hub-textarea-group-attached-border-width, var(--hub-input-group-attached-border-width))) 0;position:relative}.hub-textarea__attached.hub-textarea__attached>*:hover,.hub-textarea__attached.hub-textarea__attached>*:focus-visible{z-index:1}.hub-textarea__attached.hub-textarea__attached--prepend>*{border-start-end-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius));margin-inline:0 calc(-1 * var(--hub-textarea-group-attached-border-width, var(--hub-input-group-attached-border-width)))}.hub-textarea__attached.hub-textarea__attached--append>*{border-start-start-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-textarea__attached.hub-textarea__attached--prepend>*:not(:first-child){border-start-start-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-textarea__attached.hub-textarea__attached--append>*:not(:last-child){border-start-end-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-textarea__attached.hub-textarea__attached>hub-input,.hub-textarea__attached.hub-textarea__attached>hub-select,.hub-textarea__attached.hub-textarea__attached>hub-textarea,.hub-textarea__attached.hub-textarea__attached>hub-datepicker{padding-inline:0;border:0;border-radius:0}.hub-textarea__attached.hub-textarea__attached--prepend>hub-input .hub-field__control,.hub-textarea__attached.hub-textarea__attached--prepend>hub-select .ng-select-container,.hub-textarea__attached.hub-textarea__attached--prepend>hub-textarea .hub-field__control,.hub-textarea__attached.hub-textarea__attached--prepend>hub-datepicker .hub-field__control{border-start-end-radius:0;border-end-end-radius:0}.hub-textarea__attached.hub-textarea__attached--append>hub-input .hub-field__control,.hub-textarea__attached.hub-textarea__attached--append>hub-select .ng-select-container,.hub-textarea__attached.hub-textarea__attached--append>hub-textarea .hub-field__control,.hub-textarea__attached.hub-textarea__attached--append>hub-datepicker .hub-field__control{border-start-start-radius:0;border-end-start-radius:0}:where(.hub-textarea__attached)>*:not(button):not(a):not(input):not(select):not(textarea):not([role=button]):not([role=link]):not([tabindex]){background:var(--hub-textarea-group-addon-bg, var(--hub-input-group-addon-bg));color:var(--hub-textarea-group-addon-color, var(--hub-input-group-addon-color))}:where(.hub-textarea__attached)>button,:where(.hub-textarea__attached)>a,:where(.hub-textarea__attached)>[role=button],:where(.hub-textarea__attached)>[role=link],:where(.hub-textarea__attached)>[tabindex]{background:var(--hub-textarea-group-action-bg, var(--hub-input-group-action-bg));color:var(--hub-textarea-group-action-color, var(--hub-input-group-action-color))}.hub-textarea__group--has-prepend .hub-textarea__control,.hub-textarea__group--has-prepend .hub-field__control,.hub-textarea__group--has-prepend .hub-textarea__control.ng-select .ng-select-container{border-start-start-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-textarea__group--has-append .hub-textarea__control,.hub-textarea__group--has-append .hub-field__control,.hub-textarea__group--has-append .hub-textarea__control.ng-select .ng-select-container{border-start-end-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-textarea-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-textarea__group>.hub-textarea__addon--prepend:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.hub-textarea__group>.hub-textarea__addon--append:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}\n"] }]
         }], propDecorators: { prepend: [{ type: i0.Input, args: [{ isSignal: true, alias: "prepend", required: false }] }], append: [{ type: i0.Input, args: [{ isSignal: true, alias: "append", required: false }] }], _prependTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubPrependDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _appendTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubAppendDirective), { ...{ read: TemplateRef }, isSignal: true }] }], 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"] }] } });
 /**
@@ -2760,7 +2758,7 @@ const htmlEscapes = {
     '<': '&lt;',
     '>': '&gt;',
     '"': '&quot;',
-    "'": '&#39;',
+    "'": '&#39;'
 };
 function escapeHTML(value) {
     return value && hasUnescapedHTMLExp.test(value) ? value.replace(unescapedHTMLExp, (chr) => htmlEscapes[chr]) : value;
@@ -2787,9 +2785,7 @@ class NgItemLabelDirective {
     ...(ngDevMode ? [{ debugName: "escape" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(() => {
-            this.element.nativeElement.innerHTML = this.escape()
-                ? escapeHTML(this.ngItemLabel())
-                : this.ngItemLabel();
+            this.element.nativeElement.innerHTML = this.escape() ? escapeHTML(this.ngItemLabel()) : this.ngItemLabel();
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: NgItemLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -2799,7 +2795,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             type: Directive,
             args: [{
                     selector: '[ngItemLabel]',
-                    standalone: true,
+                    standalone: true
                 }]
         }], ctorParameters: () => [], propDecorators: { ngItemLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngItemLabel", required: false }] }], escape: [{ type: i0.Input, args: [{ isSignal: true, alias: "escape", required: false }] }] } });
 class NgOptionTemplateDirective {
@@ -2812,7 +2808,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
                     selector: '[ng-option-tmp]',
-                    standalone: true,
+                    standalone: true
                 }]
         }] });
 class NgOptgroupTemplateDirective {
@@ -2825,7 +2821,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
                     selector: '[ng-optgroup-tmp]',
-                    standalone: true,
+                    standalone: true
                 }]
         }] });
 class NgLabelTemplateDirective {
@@ -2838,7 +2834,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
                     selector: '[ng-label-tmp]',
-                    standalone: true,
+                    standalone: true
                 }]
         }] });
 class NgMultiLabelTemplateDirective {
@@ -2851,7 +2847,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
                     selector: '[ng-multi-label-tmp]',
-                    standalone: true,
+                    standalone: true
                 }]
         }] });
 class NgHeaderTemplateDirective {
@@ -2864,7 +2860,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
                     selector: '[ng-header-tmp]',
-                    standalone: true,
+                    standalone: true
                 }]
         }] });
 class NgFooterTemplateDirective {
@@ -2877,7 +2873,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
                     selector: '[ng-footer-tmp]',
-                    standalone: true,
+                    standalone: true
                 }]
         }] });
 class NgNotFoundTemplateDirective {
@@ -2890,7 +2886,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
                     selector: '[ng-notfound-tmp]',
-                    standalone: true,
+                    standalone: true
                 }]
         }] });
 class NgPlaceholderTemplateDirective {
@@ -2903,7 +2899,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
                     selector: '[ng-placeholder-tmp]',
-                    standalone: true,
+                    standalone: true
                 }]
         }] });
 class NgTypeToSearchTemplateDirective {
@@ -2916,7 +2912,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
                     selector: '[ng-typetosearch-tmp]',
-                    standalone: true,
+                    standalone: true
                 }]
         }] });
 class NgLoadingTextTemplateDirective {
@@ -2929,7 +2925,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
                     selector: '[ng-loadingtext-tmp]',
-                    standalone: true,
+                    standalone: true
                 }]
         }] });
 class NgTagTemplateDirective {
@@ -2942,7 +2938,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
                     selector: '[ng-tag-tmp]',
-                    standalone: true,
+                    standalone: true
                 }]
         }] });
 class NgLoadingSpinnerTemplateDirective {
@@ -2955,7 +2951,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
                     selector: '[ng-loadingspinner-tmp]',
-                    standalone: true,
+                    standalone: true
                 }]
         }] });
 // eslint-disable-next-line @angular-eslint/directive-selector
@@ -3864,7 +3860,7 @@ const diacritics = {
     '\u03CB': '\u03C5',
     '\u03B0': '\u03C5',
     '\u03C9': '\u03C9',
-    '\u03C2': '\u03C3',
+    '\u03C2': '\u03C3'
 };
 function stripSpecialChars(text) {
     const match = (a) => diacritics[a] || a;
@@ -3960,7 +3956,8 @@ class ItemsList {
             findBy = (item) => !item.children && this.resolveNested(item.value, this._ngSelect.bindValue()) === value;
         }
         else {
-            findBy = (item) => item.value === value || (!item.children && item.label && item.label === this.resolveNested(value, this._ngSelect.bindLabel()));
+            findBy = (item) => item.value === value ||
+                (!item.children && item.label && item.label === this.resolveNested(value, this._ngSelect.bindLabel()));
         }
         return this._items.find((item) => findBy(item));
     }
@@ -4081,7 +4078,7 @@ class ItemsList {
             label: isDefined(label) ? label.toString() : '',
             value,
             disabled: item && item.disabled ? item.disabled : false,
-            htmlId: `${this._ngSelect.dropdownId}-${index}`,
+            htmlId: `${this._ngSelect.dropdownId}-${index}`
         };
     }
     mapSelectedItems() {
@@ -4214,7 +4211,7 @@ class ItemsList {
                 parent: null,
                 index: i++,
                 disabled: !this._ngSelect.selectableGroup(),
-                htmlId: newId(),
+                htmlId: newId()
             };
             const groupKey = isGroupByFn ? this._ngSelect.bindLabel() : this._ngSelect.groupBy();
             const groupValue = this._ngSelect.groupValue() ||
@@ -4244,7 +4241,7 @@ class NgDropdownPanelService {
     _dimensions = {
         itemHeight: 0,
         panelHeight: 0,
-        itemsPerViewport: 0,
+        itemsPerViewport: 0
     };
     get dimensions() {
         return this._dimensions;
@@ -4270,7 +4267,7 @@ class NgDropdownPanelService {
             topPadding,
             scrollHeight,
             start,
-            end,
+            end
         };
     }
     setDimensions(itemHeight, panelHeight) {
@@ -4278,7 +4275,7 @@ class NgDropdownPanelService {
         this._dimensions = {
             itemHeight,
             panelHeight,
-            itemsPerViewport,
+            itemsPerViewport
         };
     }
     getScrollTo(itemTop, itemHeight, lastScroll) {
@@ -4743,7 +4740,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
 			</div>
 		}
 	`,
-                    imports: [NgTemplateOutlet],
+                    imports: [NgTemplateOutlet]
                 }]
         }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], showAddTag: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAddTag", required: false }] }], markedItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "markedItem", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], bufferAmount: [{ type: i0.Input, args: [{ isSignal: true, alias: "bufferAmount", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], headerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTemplate", required: false }] }], footerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerTemplate", required: false }] }], filterValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterValue", required: false }] }], ariaLabelDropdown: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelDropdown", required: false }] }], outsideClickEvent: [{ type: i0.Input, args: [{ isSignal: true, alias: "outsideClickEvent", required: false }] }], popover: [{ type: i0.Input, args: [{ isSignal: true, alias: "popover", required: false }] }], update: [{ type: i0.Output, args: ["update"] }], scroll: [{ type: i0.Output, args: ["scroll"] }], scrollToEnd: [{ type: i0.Output, args: ["scrollToEnd"] }], outsideClick: [{ type: i0.Output, args: ["outsideClick"] }], contentElementRef: [{ type: i0.ViewChild, args: ['content', { ...{ read: ElementRef }, isSignal: true }] }], scrollElementRef: [{ type: i0.ViewChild, args: ['scroll', { ...{ read: ElementRef }, isSignal: true }] }], paddingElementRef: [{ type: i0.ViewChild, args: ['padding', { ...{ read: ElementRef }, isSignal: true }] }] } });
@@ -4779,7 +4776,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                     selector: 'ng-option',
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `<ng-content />`,
+                    template: `<ng-content />`
                 }]
         }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
@@ -4856,7 +4853,7 @@ class DefaultSelectionModel {
     _removeChildren(parent) {
         this._selected = [
             ...this._selected.filter((x) => x.parent !== parent),
-            ...parent.children.filter((x) => x.parent === parent && x.disabled && x.selected),
+            ...parent.children.filter((x) => x.parent === parent && x.disabled && x.selected)
         ];
     }
     _removeParent(parent) {
@@ -5577,7 +5574,9 @@ class NgSelectComponent {
     _setItems(items) {
         const firstItem = items[0];
         this.bindLabel.set(this.bindLabel() || this._defaultLabel);
-        this._primitive = isDefined(firstItem) ? !isObject(firstItem) : this._primitive || this.bindLabel() === this._defaultLabel;
+        this._primitive = isDefined(firstItem)
+            ? !isObject(firstItem)
+            : this._primitive || this.bindLabel() === this._defaultLabel;
         this.itemsList.setItems(items);
         if (items.length > 0 && this.hasValue) {
             this.itemsList.mapSelectedItems();
@@ -5600,7 +5599,7 @@ class NgSelectComponent {
             const items = options.map((option) => ({
                 $ngOptionValue: option.value(),
                 $ngOptionLabel: option.elementRef.nativeElement.innerHTML,
-                disabled: option.disabled(),
+                disabled: option.disabled()
             })) ?? [];
             this.items.set(items);
             this.itemsList.setItems(items);
@@ -5612,7 +5611,7 @@ class NgSelectComponent {
                 // find item for each option
                 .map((option) => ({
                 option,
-                item: this.itemsList.findItem(option.value()),
+                item: this.itemsList.findItem(option.value())
             }))
                 // filter non found items
                 .filter(({ item }) => isDefined(item))
@@ -5663,7 +5662,7 @@ class NgSelectComponent {
                 else if (this.bindValue()) {
                     item = {
                         [this.bindLabel()]: null,
-                        [this.bindValue()]: val,
+                        [this.bindValue()]: val
                     };
                     this.itemsList.select(this.itemsList.mapItem(item, null));
                 }
@@ -5707,7 +5706,7 @@ class NgSelectComponent {
             autocapitalize: 'off',
             autocomplete: 'off',
             'aria-controls': this.dropdownId,
-            ...this.inputAttrs(),
+            ...this.inputAttrs()
         };
         for (const key of Object.keys(attributes)) {
             input.setAttribute(key, attributes[key]);
@@ -5858,7 +5857,10 @@ class NgSelectComponent {
     }
     _nextItemIsTag(nextStep) {
         const nextIndex = this.itemsList.markedIndex + nextStep;
-        return (this.addTag() && this.searchTerm && this.itemsList.markedItem && (nextIndex < 0 || nextIndex === this.itemsList.filteredItems.length));
+        return (this.addTag() &&
+            this.searchTerm &&
+            this.itemsList.markedItem &&
+            (nextIndex < 0 || nextIndex === this.itemsList.filteredItems.length));
     }
     _handleBackspace() {
         if (this.searchTerm || !this.clearable() || !this.clearOnBackspace() || !this.hasValue) {
@@ -5902,10 +5904,10 @@ class NgSelectComponent {
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => NgSelectComponent),
-                multi: true,
+                multi: true
             },
-            NgDropdownPanelService,
-        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: NgOptionTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "optgroupTemplate", first: true, predicate: NgOptgroupTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "labelTemplate", first: true, predicate: NgLabelTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "multiLabelTemplate", first: true, predicate: NgMultiLabelTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: NgHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: NgFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "notFoundTemplate", first: true, predicate: NgNotFoundTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: NgPlaceholderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "typeToSearchTemplate", first: true, predicate: NgTypeToSearchTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "loadingTextTemplate", first: true, predicate: NgLoadingTextTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "tagTemplate", first: true, predicate: NgTagTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "loadingSpinnerTemplate", first: true, predicate: NgLoadingSpinnerTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "clearButtonTemplate", first: true, predicate: NgClearButtonTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "ngOptions", predicate: NgOptionComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dropdownPanel", first: true, predicate: i0.forwardRef(() => NgDropdownPanelComponent), descendants: true, isSignal: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "clearButton", first: true, predicate: ["clearButton"], descendants: true, isSignal: true }], exportAs: ["ngSelect"], usesOnChanges: true, ngImport: i0, template: "<div\n\t(mousedown)=\"handleMousedown($event)\"\n\t[class.ng-appearance-outline]=\"appearance() === 'outline'\"\n\t[class.ng-appearance-fill]=\"appearance() === 'fill'\"\n\t[class.ng-has-value]=\"hasValue\"\n\tclass=\"ng-select-container\">\n\t<div class=\"ng-value-container\">\n\t\t@if ((selectedItems.length === 0 && !searchTerm) || (fixedPlaceholder() ?? config.fixedPlaceholder)) {\n\t\t\t<ng-template #defaultPlaceholderTemplate>\n\t\t\t\t<div class=\"ng-placeholder\">{{ placeholder() ?? config.placeholder }}</div>\n\t\t\t</ng-template>\n\t\t\t<ng-template [ngTemplateOutlet]=\"placeholderTemplate() || defaultPlaceholderTemplate\"> </ng-template>\n\t\t}\n\n\t\t@if ((!multiLabelTemplate() || !multiple()) && selectedItems.length > 0) {\n\t\t\t@for (item of selectedItems; track trackByOption($index, item)) {\n\t\t\t\t<div [class.ng-value-disabled]=\"item.disabled\" class=\"ng-value\">\n\t\t\t\t\t<ng-template #defaultLabelTemplate>\n\t\t\t\t\t\t<span class=\"ng-value-icon left\" (click)=\"unselect(item)\" aria-hidden=\"true\">\u00D7</span>\n\t\t\t\t\t\t<span class=\"ng-value-label\" [ngItemLabel]=\"item.label\" [escape]=\"escapeHTML\"></span>\n\t\t\t\t\t</ng-template>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t[ngTemplateOutlet]=\"labelTemplate() || defaultLabelTemplate\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ item: item.value, clear: clearItem, label: item.label }\">\n\t\t\t\t\t</ng-template>\n\t\t\t\t</div>\n\t\t\t}\n\t\t}\n\n\t\t@if (multiple() && multiLabelTemplate() && selectedValues.length > 0) {\n\t\t\t<ng-template [ngTemplateOutlet]=\"multiLabelTemplate()\" [ngTemplateOutletContext]=\"{ items: selectedValues, clear: clearItem }\">\n\t\t\t</ng-template>\n\t\t}\n\n\t\t<div class=\"ng-input\">\n\t\t\t<input\n\t\t\t\t#searchInput\n\t\t\t\t(blur)=\"onInputBlur($event)\"\n\t\t\t\t(change)=\"$event.stopPropagation()\"\n\t\t\t\t(compositionend)=\"onCompositionEnd(searchInput.value)\"\n\t\t\t\t(compositionstart)=\"onCompositionStart()\"\n\t\t\t\t(focus)=\"onInputFocus($event)\"\n\t\t\t\t(input)=\"filter(searchInput.value)\"\n\t\t\t\t[attr.aria-activedescendant]=\"isOpen() ? itemsList?.markedItem?.htmlId : null\"\n\t\t\t\t[attr.aria-controls]=\"isOpen() ? dropdownId : null\"\n\t\t\t\t[attr.aria-expanded]=\"isOpen()\"\n\t\t\t\t[attr.aria-label]=\"ariaLabel()\"\n\t\t\t\t[attr.id]=\"labelForId()\"\n\t\t\t\t[attr.tabindex]=\"tabIndex()\"\n\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t[readOnly]=\"!searchable() || itemsList.maxItemsSelected\"\n\t\t\t\t[value]=\"searchTerm ?? ''\"\n\t\t\t\taria-autocomplete=\"list\"\n\t\t\t\trole=\"combobox\" />\n\t\t</div>\n\t</div>\n\n\t@if (loading()) {\n\t\t<ng-template #defaultLoadingSpinnerTemplate>\n\t\t\t<div class=\"ng-spinner-loader\"></div>\n\t\t</ng-template>\n\t\t<ng-template [ngTemplateOutlet]=\"loadingSpinnerTemplate() || defaultLoadingSpinnerTemplate\"></ng-template>\n\t}\n\n\t@if (showClear()) {\n\t\t<span\n\t\t\tclass=\"ng-clear-wrapper\"\n\t\t\trole=\"button\"\n\t\t\ttabindex=\"0\"\n\t\t\t[attr.tabindex]=\"tabFocusOnClear() ? 0 : -1\"\n\t\t\ttitle=\"{{ clearAllText() || config.clearAllText }}\"\n\t\t\t#clearButton\n\t\t\t(click)=\"handleClearClick($event)\">\n\t\t\t@if (clearButtonTemplate()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"clearButtonTemplate()\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t<span class=\"ng-clear\" aria-hidden=\"true\">\u00D7</span>\n\t\t\t}\n\t\t</span>\n\t}\n\n\t<span class=\"ng-arrow-wrapper\">\n\t\t<span class=\"ng-arrow\"></span>\n\t</span>\n</div>\n\n@if (isOpen()) {\n\t@let appendToValue = appendTo() || config.appendTo;\n\t<ng-dropdown-panel\n\t\tclass=\"ng-dropdown-panel\"\n\t\t[virtualScroll]=\"dropdownVirtualScroll()\"\n\t\t[bufferAmount]=\"bufferAmount()\"\n\t\t[appendTo]=\"appendToValue\"\n\t\t[position]=\"dropdownPosition()\"\n\t\t[outsideClickEvent]=\"outsideClickEvent()\"\n\t\t[headerTemplate]=\"headerTemplate()\"\n\t\t[footerTemplate]=\"footerTemplate()\"\n\t\t[filterValue]=\"searchTerm\"\n\t\t[items]=\"itemsList.filteredItems\"\n\t\t[showAddTag]=\"showAddTag\"\n\t\t[markedItem]=\"itemsList.markedItem\"\n\t\t(update)=\"viewPortItems = $event\"\n\t\t(scroll)=\"scroll.emit($event)\"\n\t\t(scrollToEnd)=\"scrollToEnd.emit($event)\"\n\t\t(outsideClick)=\"close()\"\n\t\t[class.ng-select-multiple]=\"multiple()\"\n\t\t[class]=\"appendToValue ? (ngClass() ? ngClass() : classes) : null\"\n\t\t[id]=\"dropdownId\"\n\t\t[ariaLabelDropdown]=\"ariaLabelDropdown() ?? config.ariaLabelDropdown\"\n\t\t[popover]=\"popover()\">\n\t\t<ng-container>\n\t\t\t@for (item of viewPortItems; track trackByOption($index, item)) {\n\t\t\t\t<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus, @angular-eslint/template/mouse-events-have-key-events -->\n\t\t\t\t<div\n\t\t\t\t\tclass=\"ng-option\"\n\t\t\t\t\t[attr.role]=\"item.children ? 'group' : 'option'\"\n\t\t\t\t\t(click)=\"toggleItem(item)\"\n\t\t\t\t\t(mouseover)=\"onItemHover(item)\"\n\t\t\t\t\t[class.ng-option-disabled]=\"item.disabled\"\n\t\t\t\t\t[class.ng-option-selected]=\"item.selected\"\n\t\t\t\t\t[class.ng-optgroup]=\"item.children\"\n\t\t\t\t\t[class.ng-option]=\"!item.children\"\n\t\t\t\t\t[class.ng-option-child]=\"!!item.parent\"\n\t\t\t\t\t[class.ng-option-marked]=\"item === itemsList.markedItem\"\n\t\t\t\t\t[attr.aria-selected]=\"item.selected\"\n\t\t\t\t\t[attr.id]=\"item?.htmlId\"\n\t\t\t\t\t[attr.aria-setsize]=\"itemsList.filteredItems.length\"\n\t\t\t\t\t[attr.aria-posinset]=\"(item.index ?? 0) + 1\">\n\t\t\t\t\t<ng-template #defaultOptionTemplate>\n\t\t\t\t\t\t<span class=\"ng-option-label\" [ngItemLabel]=\"item.label\" [escape]=\"escapeHTML\"></span>\n\t\t\t\t\t</ng-template>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t[ngTemplateOutlet]=\"\n\t\t\t\t\t\t\titem.children ? optgroupTemplate() || defaultOptionTemplate : optionTemplate() || defaultOptionTemplate\n\t\t\t\t\t\t\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ item: item.value, item$: item, index: item.index, searchTerm: searchTerm }\">\n\t\t\t\t\t</ng-template>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@if (showAddTag) {\n\t\t\t\t<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus, @angular-eslint/template/mouse-events-have-key-events -->\n\t\t\t\t<div\n\t\t\t\t\tclass=\"ng-option\"\n\t\t\t\t\t[class.ng-option-marked]=\"!itemsList.markedItem\"\n\t\t\t\t\t(mouseover)=\"itemsList.unmarkItem()\"\n\t\t\t\t\trole=\"option\"\n\t\t\t\t\t[attr.aria-selected]=\"false\"\n\t\t\t\t\t(click)=\"selectTag()\">\n\t\t\t\t\t<ng-template #defaultTagTemplate>\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t><span class=\"ng-tag-label\">{{ addTagText() || config.addTagText }}</span\n\t\t\t\t\t\t\t>\"{{ searchTerm }}\"</span\n\t\t\t\t\t\t>\n\t\t\t\t\t</ng-template>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t[ngTemplateOutlet]=\"tagTemplate() || defaultTagTemplate\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\">\n\t\t\t\t\t</ng-template>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</ng-container>\n\t\t@if (showNoItemsFound()) {\n\t\t\t<ng-template #defaultNotFoundTemplate>\n\t\t\t\t<div class=\"ng-option ng-option-disabled\">{{ notFoundText() ?? config.notFoundText }}</div>\n\t\t\t</ng-template>\n\t\t\t<ng-template\n\t\t\t\t[ngTemplateOutlet]=\"notFoundTemplate() || defaultNotFoundTemplate\"\n\t\t\t\t[ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\">\n\t\t\t</ng-template>\n\t\t}\n\t\t@if (showTypeToSearch()) {\n\t\t\t<ng-template #defaultTypeToSearchTemplate>\n\t\t\t\t<div class=\"ng-option ng-option-disabled\">{{ typeToSearchText() || config.typeToSearchText }}</div>\n\t\t\t</ng-template>\n\t\t\t<ng-template [ngTemplateOutlet]=\"typeToSearchTemplate() || defaultTypeToSearchTemplate\"></ng-template>\n\t\t}\n\t\t@if (loading() && itemsList.filteredItems.length === 0) {\n\t\t\t<ng-template #defaultLoadingTextTemplate>\n\t\t\t\t<div class=\"ng-option ng-option-disabled\">{{ loadingText() || config.loadingText }}</div>\n\t\t\t</ng-template>\n\t\t\t<ng-template\n\t\t\t\t[ngTemplateOutlet]=\"loadingTextTemplate() || defaultLoadingTextTemplate\"\n\t\t\t\t[ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\">\n\t\t\t</ng-template>\n\t\t}\n\t</ng-dropdown-panel>\n}\n\n<!-- Always present aria-live region -->\n<div aria-atomic=\"true\" aria-live=\"polite\" class=\"ng-visually-hidden\" role=\"status\">\n\t@if (isOpen() && showNoItemsFound()) {\n\t\t{{ notFoundText() ?? config.notFoundText }}\n\t}\n</div>\n", styles: ["@charset \"UTF-8\";.ng-select{position:relative;display:block;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.ng-select div,.ng-select input,.ng-select span{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.ng-select [hidden]{display:none}.ng-select.ng-select-searchable .ng-select-container .ng-value-container .ng-input{opacity:1}.ng-select.ng-select-opened .ng-select-container{z-index:1001}.ng-select.ng-select-disabled .ng-select-container .ng-value-container .ng-placeholder,.ng-select.ng-select-disabled .ng-select-container .ng-value-container .ng-value{-webkit-user-select:none;user-select:none;cursor:default}.ng-select.ng-select-disabled .ng-arrow-wrapper{cursor:default}.ng-select.ng-select-filtered .ng-placeholder{display:none}.ng-select .ng-select-container{cursor:default;display:flex;outline:none;overflow:hidden;position:relative;width:100%}.ng-select .ng-select-container .ng-value-container{display:flex;flex:1}.ng-select .ng-select-container .ng-value-container .ng-input{opacity:0}.ng-select .ng-select-container .ng-value-container .ng-input>input{box-sizing:content-box;background:none transparent;border:0 none;box-shadow:none;outline:none;padding:0;cursor:default;width:100%}.ng-select .ng-select-container .ng-value-container .ng-input>input::-ms-clear{display:none}.ng-select .ng-select-container .ng-value-container .ng-input>input[readonly]{-webkit-user-select:unset;user-select:unset;width:0;padding:0}.ng-select.ng-select-single.ng-select-filtered .ng-select-container .ng-value-container .ng-value{visibility:hidden}.ng-select.ng-select-single .ng-select-container .ng-value-container,.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:none}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{position:absolute;left:0;width:100%}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-icon{display:none}.ng-select.ng-select-multiple .ng-select-container .ng-value-container{flex-wrap:wrap}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{position:absolute}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{white-space:nowrap}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-icon{display:none}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{cursor:pointer}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{flex:1;z-index:2}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{z-index:1}.ng-select .ng-clear-wrapper{cursor:pointer;position:relative;width:17px;-webkit-user-select:none;user-select:none}.ng-select .ng-clear-wrapper .ng-clear{display:inline-block;font-size:18px;line-height:1;pointer-events:none}.ng-select .ng-spinner-loader{border-radius:50%;width:17px;height:17px;margin-right:5px;font-size:10px;position:relative;text-indent:-9999em;border-top:2px solid rgba(66,66,66,.2);border-right:2px solid rgba(66,66,66,.2);border-bottom:2px solid rgba(66,66,66,.2);border-left:2px solid #424242;transform:translateZ(0);animation:load8 .8s infinite linear}.ng-select .ng-spinner-loader:after{border-radius:50%;width:17px;height:17px}@-webkit-keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.ng-select .ng-arrow-wrapper{cursor:pointer;position:relative;text-align:center;-webkit-user-select:none;user-select:none}.ng-select .ng-arrow-wrapper .ng-arrow{pointer-events:none;display:inline-block;height:0;width:0;position:relative}.ng-dropdown-panel{box-sizing:border-box;position:absolute;opacity:0;width:100%;z-index:1050;-webkit-overflow-scrolling:touch}.ng-dropdown-panel .ng-dropdown-panel-items{display:block;height:auto;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;max-height:240px;overflow-y:auto}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{box-sizing:border-box;cursor:pointer;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-option-label:empty:before{content:\"\\200b\"}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .highlighted{font-weight:700;text-decoration:underline}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.disabled{cursor:default}.ng-dropdown-panel .scroll-host{overflow:hidden;overflow-y:auto;position:relative;display:block;-webkit-overflow-scrolling:touch}.ng-dropdown-panel .scrollable-content{top:0;left:0;width:100%;height:100%;position:absolute}.ng-dropdown-panel .total-padding{width:1px;opacity:0}.ng-visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgItemLabelDirective, selector: "[ngItemLabel]", inputs: ["ngItemLabel", "escape"] }, { kind: "component", type: NgDropdownPanelComponent, selector: "ng-dropdown-panel", inputs: ["items", "showAddTag", "markedItem", "position", "appendTo", "bufferAmount", "virtualScroll", "headerTemplate", "footerTemplate", "filterValue", "ariaLabelDropdown", "outsideClickEvent", "popover"], outputs: ["update", "scroll", "scrollToEnd", "outsideClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+            NgDropdownPanelService
+        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: NgOptionTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "optgroupTemplate", first: true, predicate: NgOptgroupTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "labelTemplate", first: true, predicate: NgLabelTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "multiLabelTemplate", first: true, predicate: NgMultiLabelTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: NgHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: NgFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "notFoundTemplate", first: true, predicate: NgNotFoundTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "placeholderTemplate", first: true, predicate: NgPlaceholderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "typeToSearchTemplate", first: true, predicate: NgTypeToSearchTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "loadingTextTemplate", first: true, predicate: NgLoadingTextTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "tagTemplate", first: true, predicate: NgTagTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "loadingSpinnerTemplate", first: true, predicate: NgLoadingSpinnerTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "clearButtonTemplate", first: true, predicate: NgClearButtonTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "ngOptions", predicate: NgOptionComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dropdownPanel", first: true, predicate: i0.forwardRef(() => NgDropdownPanelComponent), descendants: true, isSignal: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "clearButton", first: true, predicate: ["clearButton"], descendants: true, isSignal: true }], exportAs: ["ngSelect"], usesOnChanges: true, ngImport: i0, template: "<div\n\t(mousedown)=\"handleMousedown($event)\"\n\t[class.ng-appearance-outline]=\"appearance() === 'outline'\"\n\t[class.ng-appearance-fill]=\"appearance() === 'fill'\"\n\t[class.ng-has-value]=\"hasValue\"\n\tclass=\"ng-select-container\"\n>\n\t<div class=\"ng-value-container\">\n\t\t@if ((selectedItems.length === 0 && !searchTerm) || (fixedPlaceholder() ?? config.fixedPlaceholder)) {\n\t\t\t<ng-template #defaultPlaceholderTemplate>\n\t\t\t\t<div class=\"ng-placeholder\">{{ placeholder() ?? config.placeholder }}</div>\n\t\t\t</ng-template>\n\t\t\t<ng-template [ngTemplateOutlet]=\"placeholderTemplate() || defaultPlaceholderTemplate\"> </ng-template>\n\t\t}\n\n\t\t@if ((!multiLabelTemplate() || !multiple()) && selectedItems.length > 0) {\n\t\t\t@for (item of selectedItems; track trackByOption($index, item)) {\n\t\t\t\t<div [class.ng-value-disabled]=\"item.disabled\" class=\"ng-value\">\n\t\t\t\t\t<ng-template #defaultLabelTemplate>\n\t\t\t\t\t\t<span class=\"ng-value-icon left\" (click)=\"unselect(item)\" aria-hidden=\"true\">\u00D7</span>\n\t\t\t\t\t\t<span class=\"ng-value-label\" [ngItemLabel]=\"item.label\" [escape]=\"escapeHTML\"></span>\n\t\t\t\t\t</ng-template>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t[ngTemplateOutlet]=\"labelTemplate() || defaultLabelTemplate\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ item: item.value, clear: clearItem, label: item.label }\"\n\t\t\t\t\t>\n\t\t\t\t\t</ng-template>\n\t\t\t\t</div>\n\t\t\t}\n\t\t}\n\n\t\t@if (multiple() && multiLabelTemplate() && selectedValues.length > 0) {\n\t\t\t<ng-template\n\t\t\t\t[ngTemplateOutlet]=\"multiLabelTemplate()\"\n\t\t\t\t[ngTemplateOutletContext]=\"{ items: selectedValues, clear: clearItem }\"\n\t\t\t>\n\t\t\t</ng-template>\n\t\t}\n\n\t\t<div class=\"ng-input\">\n\t\t\t<input\n\t\t\t\t#searchInput\n\t\t\t\t(blur)=\"onInputBlur($event)\"\n\t\t\t\t(change)=\"$event.stopPropagation()\"\n\t\t\t\t(compositionend)=\"onCompositionEnd(searchInput.value)\"\n\t\t\t\t(compositionstart)=\"onCompositionStart()\"\n\t\t\t\t(focus)=\"onInputFocus($event)\"\n\t\t\t\t(input)=\"filter(searchInput.value)\"\n\t\t\t\t[attr.aria-activedescendant]=\"isOpen() ? itemsList?.markedItem?.htmlId : null\"\n\t\t\t\t[attr.aria-controls]=\"isOpen() ? dropdownId : null\"\n\t\t\t\t[attr.aria-expanded]=\"isOpen()\"\n\t\t\t\t[attr.aria-label]=\"ariaLabel()\"\n\t\t\t\t[attr.id]=\"labelForId()\"\n\t\t\t\t[attr.tabindex]=\"tabIndex()\"\n\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t[readOnly]=\"!searchable() || itemsList.maxItemsSelected\"\n\t\t\t\t[value]=\"searchTerm ?? ''\"\n\t\t\t\taria-autocomplete=\"list\"\n\t\t\t\trole=\"combobox\"\n\t\t\t/>\n\t\t</div>\n\t</div>\n\n\t@if (loading()) {\n\t\t<ng-template #defaultLoadingSpinnerTemplate>\n\t\t\t<div class=\"ng-spinner-loader\"></div>\n\t\t</ng-template>\n\t\t<ng-template [ngTemplateOutlet]=\"loadingSpinnerTemplate() || defaultLoadingSpinnerTemplate\"></ng-template>\n\t}\n\n\t@if (showClear()) {\n\t\t<span\n\t\t\tclass=\"ng-clear-wrapper\"\n\t\t\trole=\"button\"\n\t\t\ttabindex=\"0\"\n\t\t\t[attr.tabindex]=\"tabFocusOnClear() ? 0 : -1\"\n\t\t\ttitle=\"{{ clearAllText() || config.clearAllText }}\"\n\t\t\t#clearButton\n\t\t\t(click)=\"handleClearClick($event)\"\n\t\t>\n\t\t\t@if (clearButtonTemplate()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"clearButtonTemplate()\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t<span class=\"ng-clear\" aria-hidden=\"true\">\u00D7</span>\n\t\t\t}\n\t\t</span>\n\t}\n\n\t<span class=\"ng-arrow-wrapper\">\n\t\t<span class=\"ng-arrow\"></span>\n\t</span>\n</div>\n\n@if (isOpen()) {\n\t@let appendToValue = appendTo() || config.appendTo;\n\t<ng-dropdown-panel\n\t\tclass=\"ng-dropdown-panel\"\n\t\t[virtualScroll]=\"dropdownVirtualScroll()\"\n\t\t[bufferAmount]=\"bufferAmount()\"\n\t\t[appendTo]=\"appendToValue\"\n\t\t[position]=\"dropdownPosition()\"\n\t\t[outsideClickEvent]=\"outsideClickEvent()\"\n\t\t[headerTemplate]=\"headerTemplate()\"\n\t\t[footerTemplate]=\"footerTemplate()\"\n\t\t[filterValue]=\"searchTerm\"\n\t\t[items]=\"itemsList.filteredItems\"\n\t\t[showAddTag]=\"showAddTag\"\n\t\t[markedItem]=\"itemsList.markedItem\"\n\t\t(update)=\"viewPortItems = $event\"\n\t\t(scroll)=\"scroll.emit($event)\"\n\t\t(scrollToEnd)=\"scrollToEnd.emit($event)\"\n\t\t(outsideClick)=\"close()\"\n\t\t[class.ng-select-multiple]=\"multiple()\"\n\t\t[class]=\"appendToValue ? (ngClass() ? ngClass() : classes) : null\"\n\t\t[id]=\"dropdownId\"\n\t\t[ariaLabelDropdown]=\"ariaLabelDropdown() ?? config.ariaLabelDropdown\"\n\t\t[popover]=\"popover()\"\n\t>\n\t\t<ng-container>\n\t\t\t@for (item of viewPortItems; track trackByOption($index, item)) {\n\t\t\t\t<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus, @angular-eslint/template/mouse-events-have-key-events -->\n\t\t\t\t<div\n\t\t\t\t\tclass=\"ng-option\"\n\t\t\t\t\t[attr.role]=\"item.children ? 'group' : 'option'\"\n\t\t\t\t\t(click)=\"toggleItem(item)\"\n\t\t\t\t\t(mouseover)=\"onItemHover(item)\"\n\t\t\t\t\t[class.ng-option-disabled]=\"item.disabled\"\n\t\t\t\t\t[class.ng-option-selected]=\"item.selected\"\n\t\t\t\t\t[class.ng-optgroup]=\"item.children\"\n\t\t\t\t\t[class.ng-option]=\"!item.children\"\n\t\t\t\t\t[class.ng-option-child]=\"!!item.parent\"\n\t\t\t\t\t[class.ng-option-marked]=\"item === itemsList.markedItem\"\n\t\t\t\t\t[attr.aria-selected]=\"item.selected\"\n\t\t\t\t\t[attr.id]=\"item?.htmlId\"\n\t\t\t\t\t[attr.aria-setsize]=\"itemsList.filteredItems.length\"\n\t\t\t\t\t[attr.aria-posinset]=\"(item.index ?? 0) + 1\"\n\t\t\t\t>\n\t\t\t\t\t<ng-template #defaultOptionTemplate>\n\t\t\t\t\t\t<span class=\"ng-option-label\" [ngItemLabel]=\"item.label\" [escape]=\"escapeHTML\"></span>\n\t\t\t\t\t</ng-template>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t[ngTemplateOutlet]=\"\n\t\t\t\t\t\t\titem.children\n\t\t\t\t\t\t\t\t? optgroupTemplate() || defaultOptionTemplate\n\t\t\t\t\t\t\t\t: optionTemplate() || defaultOptionTemplate\n\t\t\t\t\t\t\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ item: item.value, item$: item, index: item.index, searchTerm: searchTerm }\"\n\t\t\t\t\t>\n\t\t\t\t\t</ng-template>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@if (showAddTag) {\n\t\t\t\t<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus, @angular-eslint/template/mouse-events-have-key-events -->\n\t\t\t\t<div\n\t\t\t\t\tclass=\"ng-option\"\n\t\t\t\t\t[class.ng-option-marked]=\"!itemsList.markedItem\"\n\t\t\t\t\t(mouseover)=\"itemsList.unmarkItem()\"\n\t\t\t\t\trole=\"option\"\n\t\t\t\t\t[attr.aria-selected]=\"false\"\n\t\t\t\t\t(click)=\"selectTag()\"\n\t\t\t\t>\n\t\t\t\t\t<ng-template #defaultTagTemplate>\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t><span class=\"ng-tag-label\">{{ addTagText() || config.addTagText }}</span\n\t\t\t\t\t\t\t>\"{{ searchTerm }}\"</span\n\t\t\t\t\t\t>\n\t\t\t\t\t</ng-template>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t[ngTemplateOutlet]=\"tagTemplate() || defaultTagTemplate\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\"\n\t\t\t\t\t>\n\t\t\t\t\t</ng-template>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</ng-container>\n\t\t@if (showNoItemsFound()) {\n\t\t\t<ng-template #defaultNotFoundTemplate>\n\t\t\t\t<div class=\"ng-option ng-option-disabled\">{{ notFoundText() ?? config.notFoundText }}</div>\n\t\t\t</ng-template>\n\t\t\t<ng-template\n\t\t\t\t[ngTemplateOutlet]=\"notFoundTemplate() || defaultNotFoundTemplate\"\n\t\t\t\t[ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\"\n\t\t\t>\n\t\t\t</ng-template>\n\t\t}\n\t\t@if (showTypeToSearch()) {\n\t\t\t<ng-template #defaultTypeToSearchTemplate>\n\t\t\t\t<div class=\"ng-option ng-option-disabled\">{{ typeToSearchText() || config.typeToSearchText }}</div>\n\t\t\t</ng-template>\n\t\t\t<ng-template [ngTemplateOutlet]=\"typeToSearchTemplate() || defaultTypeToSearchTemplate\"></ng-template>\n\t\t}\n\t\t@if (loading() && itemsList.filteredItems.length === 0) {\n\t\t\t<ng-template #defaultLoadingTextTemplate>\n\t\t\t\t<div class=\"ng-option ng-option-disabled\">{{ loadingText() || config.loadingText }}</div>\n\t\t\t</ng-template>\n\t\t\t<ng-template\n\t\t\t\t[ngTemplateOutlet]=\"loadingTextTemplate() || defaultLoadingTextTemplate\"\n\t\t\t\t[ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\"\n\t\t\t>\n\t\t\t</ng-template>\n\t\t}\n\t</ng-dropdown-panel>\n}\n\n<!-- Always present aria-live region -->\n<div aria-atomic=\"true\" aria-live=\"polite\" class=\"ng-visually-hidden\" role=\"status\">\n\t@if (isOpen() && showNoItemsFound()) {\n\t\t{{ notFoundText() ?? config.notFoundText }}\n\t}\n</div>\n", styles: ["@charset \"UTF-8\";.ng-select{position:relative;display:block;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.ng-select div,.ng-select input,.ng-select span{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.ng-select [hidden]{display:none}.ng-select.ng-select-searchable .ng-select-container .ng-value-container .ng-input{opacity:1}.ng-select.ng-select-opened .ng-select-container{z-index:1001}.ng-select.ng-select-disabled .ng-select-container .ng-value-container .ng-placeholder,.ng-select.ng-select-disabled .ng-select-container .ng-value-container .ng-value{-webkit-user-select:none;user-select:none;cursor:default}.ng-select.ng-select-disabled .ng-arrow-wrapper{cursor:default}.ng-select.ng-select-filtered .ng-placeholder{display:none}.ng-select .ng-select-container{cursor:default;display:flex;outline:none;overflow:hidden;position:relative;width:100%}.ng-select .ng-select-container .ng-value-container{display:flex;flex:1}.ng-select .ng-select-container .ng-value-container .ng-input{opacity:0}.ng-select .ng-select-container .ng-value-container .ng-input>input{box-sizing:content-box;background:none transparent;border:0 none;box-shadow:none;outline:none;padding:0;cursor:default;width:100%}.ng-select .ng-select-container .ng-value-container .ng-input>input::-ms-clear{display:none}.ng-select .ng-select-container .ng-value-container .ng-input>input[readonly]{-webkit-user-select:unset;user-select:unset;width:0;padding:0}.ng-select.ng-select-single.ng-select-filtered .ng-select-container .ng-value-container .ng-value{visibility:hidden}.ng-select.ng-select-single .ng-select-container .ng-value-container,.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:none}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{position:absolute;left:0;width:100%}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-icon{display:none}.ng-select.ng-select-multiple .ng-select-container .ng-value-container{flex-wrap:wrap}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{position:absolute}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{white-space:nowrap}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-icon{display:none}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{cursor:pointer}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{flex:1;z-index:2}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{z-index:1}.ng-select .ng-clear-wrapper{cursor:pointer;position:relative;width:17px;-webkit-user-select:none;user-select:none}.ng-select .ng-clear-wrapper .ng-clear{display:inline-block;font-size:18px;line-height:1;pointer-events:none}.ng-select .ng-spinner-loader{border-radius:50%;width:17px;height:17px;margin-right:5px;font-size:10px;position:relative;text-indent:-9999em;border-top:2px solid rgba(66,66,66,.2);border-right:2px solid rgba(66,66,66,.2);border-bottom:2px solid rgba(66,66,66,.2);border-left:2px solid #424242;transform:translateZ(0);animation:load8 .8s infinite linear}.ng-select .ng-spinner-loader:after{border-radius:50%;width:17px;height:17px}@-webkit-keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.ng-select .ng-arrow-wrapper{cursor:pointer;position:relative;text-align:center;-webkit-user-select:none;user-select:none}.ng-select .ng-arrow-wrapper .ng-arrow{pointer-events:none;display:inline-block;height:0;width:0;position:relative}.ng-dropdown-panel{box-sizing:border-box;position:absolute;opacity:0;width:100%;z-index:1050;-webkit-overflow-scrolling:touch}.ng-dropdown-panel .ng-dropdown-panel-items{display:block;height:auto;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;max-height:240px;overflow-y:auto}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{box-sizing:border-box;cursor:pointer;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-option-label:empty:before{content:\"\\200b\"}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .highlighted{font-weight:700;text-decoration:underline}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.disabled{cursor:default}.ng-dropdown-panel .scroll-host{overflow:hidden;overflow-y:auto;position:relative;display:block;-webkit-overflow-scrolling:touch}.ng-dropdown-panel .scrollable-content{top:0;left:0;width:100%;height:100%;position:absolute}.ng-dropdown-panel .total-padding{width:1px;opacity:0}.ng-visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgItemLabelDirective, selector: "[ngItemLabel]", inputs: ["ngItemLabel", "escape"] }, { kind: "component", type: NgDropdownPanelComponent, selector: "ng-dropdown-panel", inputs: ["items", "showAddTag", "markedItem", "position", "appendTo", "bufferAmount", "virtualScroll", "headerTemplate", "footerTemplate", "filterValue", "ariaLabelDropdown", "outsideClickEvent", "popover"], outputs: ["update", "scroll", "scrollToEnd", "outsideClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: NgSelectComponent, decorators: [{
             type: Component,
@@ -5913,9 +5915,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => NgSelectComponent),
-                            multi: true,
+                            multi: true
                         },
-                        NgDropdownPanelService,
+                        NgDropdownPanelService
                     ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, NgItemLabelDirective, NgDropdownPanelComponent], host: {
                         '[class.ng-select]': 'true',
                         '[class.ng-select-single]': '!multiple()',
@@ -5925,8 +5927,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         '[class.ng-select-searchable]': 'searchable()',
                         '[class.ng-select-clearable]': 'clearable()',
                         '[class.ng-select-filtered]': 'filtered',
-                        '[class.ng-select-disabled]': 'disabled()',
-                    }, template: "<div\n\t(mousedown)=\"handleMousedown($event)\"\n\t[class.ng-appearance-outline]=\"appearance() === 'outline'\"\n\t[class.ng-appearance-fill]=\"appearance() === 'fill'\"\n\t[class.ng-has-value]=\"hasValue\"\n\tclass=\"ng-select-container\">\n\t<div class=\"ng-value-container\">\n\t\t@if ((selectedItems.length === 0 && !searchTerm) || (fixedPlaceholder() ?? config.fixedPlaceholder)) {\n\t\t\t<ng-template #defaultPlaceholderTemplate>\n\t\t\t\t<div class=\"ng-placeholder\">{{ placeholder() ?? config.placeholder }}</div>\n\t\t\t</ng-template>\n\t\t\t<ng-template [ngTemplateOutlet]=\"placeholderTemplate() || defaultPlaceholderTemplate\"> </ng-template>\n\t\t}\n\n\t\t@if ((!multiLabelTemplate() || !multiple()) && selectedItems.length > 0) {\n\t\t\t@for (item of selectedItems; track trackByOption($index, item)) {\n\t\t\t\t<div [class.ng-value-disabled]=\"item.disabled\" class=\"ng-value\">\n\t\t\t\t\t<ng-template #defaultLabelTemplate>\n\t\t\t\t\t\t<span class=\"ng-value-icon left\" (click)=\"unselect(item)\" aria-hidden=\"true\">\u00D7</span>\n\t\t\t\t\t\t<span class=\"ng-value-label\" [ngItemLabel]=\"item.label\" [escape]=\"escapeHTML\"></span>\n\t\t\t\t\t</ng-template>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t[ngTemplateOutlet]=\"labelTemplate() || defaultLabelTemplate\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ item: item.value, clear: clearItem, label: item.label }\">\n\t\t\t\t\t</ng-template>\n\t\t\t\t</div>\n\t\t\t}\n\t\t}\n\n\t\t@if (multiple() && multiLabelTemplate() && selectedValues.length > 0) {\n\t\t\t<ng-template [ngTemplateOutlet]=\"multiLabelTemplate()\" [ngTemplateOutletContext]=\"{ items: selectedValues, clear: clearItem }\">\n\t\t\t</ng-template>\n\t\t}\n\n\t\t<div class=\"ng-input\">\n\t\t\t<input\n\t\t\t\t#searchInput\n\t\t\t\t(blur)=\"onInputBlur($event)\"\n\t\t\t\t(change)=\"$event.stopPropagation()\"\n\t\t\t\t(compositionend)=\"onCompositionEnd(searchInput.value)\"\n\t\t\t\t(compositionstart)=\"onCompositionStart()\"\n\t\t\t\t(focus)=\"onInputFocus($event)\"\n\t\t\t\t(input)=\"filter(searchInput.value)\"\n\t\t\t\t[attr.aria-activedescendant]=\"isOpen() ? itemsList?.markedItem?.htmlId : null\"\n\t\t\t\t[attr.aria-controls]=\"isOpen() ? dropdownId : null\"\n\t\t\t\t[attr.aria-expanded]=\"isOpen()\"\n\t\t\t\t[attr.aria-label]=\"ariaLabel()\"\n\t\t\t\t[attr.id]=\"labelForId()\"\n\t\t\t\t[attr.tabindex]=\"tabIndex()\"\n\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t[readOnly]=\"!searchable() || itemsList.maxItemsSelected\"\n\t\t\t\t[value]=\"searchTerm ?? ''\"\n\t\t\t\taria-autocomplete=\"list\"\n\t\t\t\trole=\"combobox\" />\n\t\t</div>\n\t</div>\n\n\t@if (loading()) {\n\t\t<ng-template #defaultLoadingSpinnerTemplate>\n\t\t\t<div class=\"ng-spinner-loader\"></div>\n\t\t</ng-template>\n\t\t<ng-template [ngTemplateOutlet]=\"loadingSpinnerTemplate() || defaultLoadingSpinnerTemplate\"></ng-template>\n\t}\n\n\t@if (showClear()) {\n\t\t<span\n\t\t\tclass=\"ng-clear-wrapper\"\n\t\t\trole=\"button\"\n\t\t\ttabindex=\"0\"\n\t\t\t[attr.tabindex]=\"tabFocusOnClear() ? 0 : -1\"\n\t\t\ttitle=\"{{ clearAllText() || config.clearAllText }}\"\n\t\t\t#clearButton\n\t\t\t(click)=\"handleClearClick($event)\">\n\t\t\t@if (clearButtonTemplate()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"clearButtonTemplate()\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t<span class=\"ng-clear\" aria-hidden=\"true\">\u00D7</span>\n\t\t\t}\n\t\t</span>\n\t}\n\n\t<span class=\"ng-arrow-wrapper\">\n\t\t<span class=\"ng-arrow\"></span>\n\t</span>\n</div>\n\n@if (isOpen()) {\n\t@let appendToValue = appendTo() || config.appendTo;\n\t<ng-dropdown-panel\n\t\tclass=\"ng-dropdown-panel\"\n\t\t[virtualScroll]=\"dropdownVirtualScroll()\"\n\t\t[bufferAmount]=\"bufferAmount()\"\n\t\t[appendTo]=\"appendToValue\"\n\t\t[position]=\"dropdownPosition()\"\n\t\t[outsideClickEvent]=\"outsideClickEvent()\"\n\t\t[headerTemplate]=\"headerTemplate()\"\n\t\t[footerTemplate]=\"footerTemplate()\"\n\t\t[filterValue]=\"searchTerm\"\n\t\t[items]=\"itemsList.filteredItems\"\n\t\t[showAddTag]=\"showAddTag\"\n\t\t[markedItem]=\"itemsList.markedItem\"\n\t\t(update)=\"viewPortItems = $event\"\n\t\t(scroll)=\"scroll.emit($event)\"\n\t\t(scrollToEnd)=\"scrollToEnd.emit($event)\"\n\t\t(outsideClick)=\"close()\"\n\t\t[class.ng-select-multiple]=\"multiple()\"\n\t\t[class]=\"appendToValue ? (ngClass() ? ngClass() : classes) : null\"\n\t\t[id]=\"dropdownId\"\n\t\t[ariaLabelDropdown]=\"ariaLabelDropdown() ?? config.ariaLabelDropdown\"\n\t\t[popover]=\"popover()\">\n\t\t<ng-container>\n\t\t\t@for (item of viewPortItems; track trackByOption($index, item)) {\n\t\t\t\t<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus, @angular-eslint/template/mouse-events-have-key-events -->\n\t\t\t\t<div\n\t\t\t\t\tclass=\"ng-option\"\n\t\t\t\t\t[attr.role]=\"item.children ? 'group' : 'option'\"\n\t\t\t\t\t(click)=\"toggleItem(item)\"\n\t\t\t\t\t(mouseover)=\"onItemHover(item)\"\n\t\t\t\t\t[class.ng-option-disabled]=\"item.disabled\"\n\t\t\t\t\t[class.ng-option-selected]=\"item.selected\"\n\t\t\t\t\t[class.ng-optgroup]=\"item.children\"\n\t\t\t\t\t[class.ng-option]=\"!item.children\"\n\t\t\t\t\t[class.ng-option-child]=\"!!item.parent\"\n\t\t\t\t\t[class.ng-option-marked]=\"item === itemsList.markedItem\"\n\t\t\t\t\t[attr.aria-selected]=\"item.selected\"\n\t\t\t\t\t[attr.id]=\"item?.htmlId\"\n\t\t\t\t\t[attr.aria-setsize]=\"itemsList.filteredItems.length\"\n\t\t\t\t\t[attr.aria-posinset]=\"(item.index ?? 0) + 1\">\n\t\t\t\t\t<ng-template #defaultOptionTemplate>\n\t\t\t\t\t\t<span class=\"ng-option-label\" [ngItemLabel]=\"item.label\" [escape]=\"escapeHTML\"></span>\n\t\t\t\t\t</ng-template>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t[ngTemplateOutlet]=\"\n\t\t\t\t\t\t\titem.children ? optgroupTemplate() || defaultOptionTemplate : optionTemplate() || defaultOptionTemplate\n\t\t\t\t\t\t\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ item: item.value, item$: item, index: item.index, searchTerm: searchTerm }\">\n\t\t\t\t\t</ng-template>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@if (showAddTag) {\n\t\t\t\t<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus, @angular-eslint/template/mouse-events-have-key-events -->\n\t\t\t\t<div\n\t\t\t\t\tclass=\"ng-option\"\n\t\t\t\t\t[class.ng-option-marked]=\"!itemsList.markedItem\"\n\t\t\t\t\t(mouseover)=\"itemsList.unmarkItem()\"\n\t\t\t\t\trole=\"option\"\n\t\t\t\t\t[attr.aria-selected]=\"false\"\n\t\t\t\t\t(click)=\"selectTag()\">\n\t\t\t\t\t<ng-template #defaultTagTemplate>\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t><span class=\"ng-tag-label\">{{ addTagText() || config.addTagText }}</span\n\t\t\t\t\t\t\t>\"{{ searchTerm }}\"</span\n\t\t\t\t\t\t>\n\t\t\t\t\t</ng-template>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t[ngTemplateOutlet]=\"tagTemplate() || defaultTagTemplate\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\">\n\t\t\t\t\t</ng-template>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</ng-container>\n\t\t@if (showNoItemsFound()) {\n\t\t\t<ng-template #defaultNotFoundTemplate>\n\t\t\t\t<div class=\"ng-option ng-option-disabled\">{{ notFoundText() ?? config.notFoundText }}</div>\n\t\t\t</ng-template>\n\t\t\t<ng-template\n\t\t\t\t[ngTemplateOutlet]=\"notFoundTemplate() || defaultNotFoundTemplate\"\n\t\t\t\t[ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\">\n\t\t\t</ng-template>\n\t\t}\n\t\t@if (showTypeToSearch()) {\n\t\t\t<ng-template #defaultTypeToSearchTemplate>\n\t\t\t\t<div class=\"ng-option ng-option-disabled\">{{ typeToSearchText() || config.typeToSearchText }}</div>\n\t\t\t</ng-template>\n\t\t\t<ng-template [ngTemplateOutlet]=\"typeToSearchTemplate() || defaultTypeToSearchTemplate\"></ng-template>\n\t\t}\n\t\t@if (loading() && itemsList.filteredItems.length === 0) {\n\t\t\t<ng-template #defaultLoadingTextTemplate>\n\t\t\t\t<div class=\"ng-option ng-option-disabled\">{{ loadingText() || config.loadingText }}</div>\n\t\t\t</ng-template>\n\t\t\t<ng-template\n\t\t\t\t[ngTemplateOutlet]=\"loadingTextTemplate() || defaultLoadingTextTemplate\"\n\t\t\t\t[ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\">\n\t\t\t</ng-template>\n\t\t}\n\t</ng-dropdown-panel>\n}\n\n<!-- Always present aria-live region -->\n<div aria-atomic=\"true\" aria-live=\"polite\" class=\"ng-visually-hidden\" role=\"status\">\n\t@if (isOpen() && showNoItemsFound()) {\n\t\t{{ notFoundText() ?? config.notFoundText }}\n\t}\n</div>\n", styles: ["@charset \"UTF-8\";.ng-select{position:relative;display:block;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.ng-select div,.ng-select input,.ng-select span{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.ng-select [hidden]{display:none}.ng-select.ng-select-searchable .ng-select-container .ng-value-container .ng-input{opacity:1}.ng-select.ng-select-opened .ng-select-container{z-index:1001}.ng-select.ng-select-disabled .ng-select-container .ng-value-container .ng-placeholder,.ng-select.ng-select-disabled .ng-select-container .ng-value-container .ng-value{-webkit-user-select:none;user-select:none;cursor:default}.ng-select.ng-select-disabled .ng-arrow-wrapper{cursor:default}.ng-select.ng-select-filtered .ng-placeholder{display:none}.ng-select .ng-select-container{cursor:default;display:flex;outline:none;overflow:hidden;position:relative;width:100%}.ng-select .ng-select-container .ng-value-container{display:flex;flex:1}.ng-select .ng-select-container .ng-value-container .ng-input{opacity:0}.ng-select .ng-select-container .ng-value-container .ng-input>input{box-sizing:content-box;background:none transparent;border:0 none;box-shadow:none;outline:none;padding:0;cursor:default;width:100%}.ng-select .ng-select-container .ng-value-container .ng-input>input::-ms-clear{display:none}.ng-select .ng-select-container .ng-value-container .ng-input>input[readonly]{-webkit-user-select:unset;user-select:unset;width:0;padding:0}.ng-select.ng-select-single.ng-select-filtered .ng-select-container .ng-value-container .ng-value{visibility:hidden}.ng-select.ng-select-single .ng-select-container .ng-value-container,.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:none}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{position:absolute;left:0;width:100%}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-icon{display:none}.ng-select.ng-select-multiple .ng-select-container .ng-value-container{flex-wrap:wrap}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{position:absolute}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{white-space:nowrap}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-icon{display:none}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{cursor:pointer}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{flex:1;z-index:2}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{z-index:1}.ng-select .ng-clear-wrapper{cursor:pointer;position:relative;width:17px;-webkit-user-select:none;user-select:none}.ng-select .ng-clear-wrapper .ng-clear{display:inline-block;font-size:18px;line-height:1;pointer-events:none}.ng-select .ng-spinner-loader{border-radius:50%;width:17px;height:17px;margin-right:5px;font-size:10px;position:relative;text-indent:-9999em;border-top:2px solid rgba(66,66,66,.2);border-right:2px solid rgba(66,66,66,.2);border-bottom:2px solid rgba(66,66,66,.2);border-left:2px solid #424242;transform:translateZ(0);animation:load8 .8s infinite linear}.ng-select .ng-spinner-loader:after{border-radius:50%;width:17px;height:17px}@-webkit-keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.ng-select .ng-arrow-wrapper{cursor:pointer;position:relative;text-align:center;-webkit-user-select:none;user-select:none}.ng-select .ng-arrow-wrapper .ng-arrow{pointer-events:none;display:inline-block;height:0;width:0;position:relative}.ng-dropdown-panel{box-sizing:border-box;position:absolute;opacity:0;width:100%;z-index:1050;-webkit-overflow-scrolling:touch}.ng-dropdown-panel .ng-dropdown-panel-items{display:block;height:auto;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;max-height:240px;overflow-y:auto}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{box-sizing:border-box;cursor:pointer;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-option-label:empty:before{content:\"\\200b\"}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .highlighted{font-weight:700;text-decoration:underline}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.disabled{cursor:default}.ng-dropdown-panel .scroll-host{overflow:hidden;overflow-y:auto;position:relative;display:block;-webkit-overflow-scrolling:touch}.ng-dropdown-panel .scrollable-content{top:0;left:0;width:100%;height:100%;position:absolute}.ng-dropdown-panel .total-padding{width:1px;opacity:0}.ng-visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0;white-space:nowrap}\n"] }]
+                        '[class.ng-select-disabled]': 'disabled()'
+                    }, template: "<div\n\t(mousedown)=\"handleMousedown($event)\"\n\t[class.ng-appearance-outline]=\"appearance() === 'outline'\"\n\t[class.ng-appearance-fill]=\"appearance() === 'fill'\"\n\t[class.ng-has-value]=\"hasValue\"\n\tclass=\"ng-select-container\"\n>\n\t<div class=\"ng-value-container\">\n\t\t@if ((selectedItems.length === 0 && !searchTerm) || (fixedPlaceholder() ?? config.fixedPlaceholder)) {\n\t\t\t<ng-template #defaultPlaceholderTemplate>\n\t\t\t\t<div class=\"ng-placeholder\">{{ placeholder() ?? config.placeholder }}</div>\n\t\t\t</ng-template>\n\t\t\t<ng-template [ngTemplateOutlet]=\"placeholderTemplate() || defaultPlaceholderTemplate\"> </ng-template>\n\t\t}\n\n\t\t@if ((!multiLabelTemplate() || !multiple()) && selectedItems.length > 0) {\n\t\t\t@for (item of selectedItems; track trackByOption($index, item)) {\n\t\t\t\t<div [class.ng-value-disabled]=\"item.disabled\" class=\"ng-value\">\n\t\t\t\t\t<ng-template #defaultLabelTemplate>\n\t\t\t\t\t\t<span class=\"ng-value-icon left\" (click)=\"unselect(item)\" aria-hidden=\"true\">\u00D7</span>\n\t\t\t\t\t\t<span class=\"ng-value-label\" [ngItemLabel]=\"item.label\" [escape]=\"escapeHTML\"></span>\n\t\t\t\t\t</ng-template>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t[ngTemplateOutlet]=\"labelTemplate() || defaultLabelTemplate\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ item: item.value, clear: clearItem, label: item.label }\"\n\t\t\t\t\t>\n\t\t\t\t\t</ng-template>\n\t\t\t\t</div>\n\t\t\t}\n\t\t}\n\n\t\t@if (multiple() && multiLabelTemplate() && selectedValues.length > 0) {\n\t\t\t<ng-template\n\t\t\t\t[ngTemplateOutlet]=\"multiLabelTemplate()\"\n\t\t\t\t[ngTemplateOutletContext]=\"{ items: selectedValues, clear: clearItem }\"\n\t\t\t>\n\t\t\t</ng-template>\n\t\t}\n\n\t\t<div class=\"ng-input\">\n\t\t\t<input\n\t\t\t\t#searchInput\n\t\t\t\t(blur)=\"onInputBlur($event)\"\n\t\t\t\t(change)=\"$event.stopPropagation()\"\n\t\t\t\t(compositionend)=\"onCompositionEnd(searchInput.value)\"\n\t\t\t\t(compositionstart)=\"onCompositionStart()\"\n\t\t\t\t(focus)=\"onInputFocus($event)\"\n\t\t\t\t(input)=\"filter(searchInput.value)\"\n\t\t\t\t[attr.aria-activedescendant]=\"isOpen() ? itemsList?.markedItem?.htmlId : null\"\n\t\t\t\t[attr.aria-controls]=\"isOpen() ? dropdownId : null\"\n\t\t\t\t[attr.aria-expanded]=\"isOpen()\"\n\t\t\t\t[attr.aria-label]=\"ariaLabel()\"\n\t\t\t\t[attr.id]=\"labelForId()\"\n\t\t\t\t[attr.tabindex]=\"tabIndex()\"\n\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t[readOnly]=\"!searchable() || itemsList.maxItemsSelected\"\n\t\t\t\t[value]=\"searchTerm ?? ''\"\n\t\t\t\taria-autocomplete=\"list\"\n\t\t\t\trole=\"combobox\"\n\t\t\t/>\n\t\t</div>\n\t</div>\n\n\t@if (loading()) {\n\t\t<ng-template #defaultLoadingSpinnerTemplate>\n\t\t\t<div class=\"ng-spinner-loader\"></div>\n\t\t</ng-template>\n\t\t<ng-template [ngTemplateOutlet]=\"loadingSpinnerTemplate() || defaultLoadingSpinnerTemplate\"></ng-template>\n\t}\n\n\t@if (showClear()) {\n\t\t<span\n\t\t\tclass=\"ng-clear-wrapper\"\n\t\t\trole=\"button\"\n\t\t\ttabindex=\"0\"\n\t\t\t[attr.tabindex]=\"tabFocusOnClear() ? 0 : -1\"\n\t\t\ttitle=\"{{ clearAllText() || config.clearAllText }}\"\n\t\t\t#clearButton\n\t\t\t(click)=\"handleClearClick($event)\"\n\t\t>\n\t\t\t@if (clearButtonTemplate()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"clearButtonTemplate()\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t<span class=\"ng-clear\" aria-hidden=\"true\">\u00D7</span>\n\t\t\t}\n\t\t</span>\n\t}\n\n\t<span class=\"ng-arrow-wrapper\">\n\t\t<span class=\"ng-arrow\"></span>\n\t</span>\n</div>\n\n@if (isOpen()) {\n\t@let appendToValue = appendTo() || config.appendTo;\n\t<ng-dropdown-panel\n\t\tclass=\"ng-dropdown-panel\"\n\t\t[virtualScroll]=\"dropdownVirtualScroll()\"\n\t\t[bufferAmount]=\"bufferAmount()\"\n\t\t[appendTo]=\"appendToValue\"\n\t\t[position]=\"dropdownPosition()\"\n\t\t[outsideClickEvent]=\"outsideClickEvent()\"\n\t\t[headerTemplate]=\"headerTemplate()\"\n\t\t[footerTemplate]=\"footerTemplate()\"\n\t\t[filterValue]=\"searchTerm\"\n\t\t[items]=\"itemsList.filteredItems\"\n\t\t[showAddTag]=\"showAddTag\"\n\t\t[markedItem]=\"itemsList.markedItem\"\n\t\t(update)=\"viewPortItems = $event\"\n\t\t(scroll)=\"scroll.emit($event)\"\n\t\t(scrollToEnd)=\"scrollToEnd.emit($event)\"\n\t\t(outsideClick)=\"close()\"\n\t\t[class.ng-select-multiple]=\"multiple()\"\n\t\t[class]=\"appendToValue ? (ngClass() ? ngClass() : classes) : null\"\n\t\t[id]=\"dropdownId\"\n\t\t[ariaLabelDropdown]=\"ariaLabelDropdown() ?? config.ariaLabelDropdown\"\n\t\t[popover]=\"popover()\"\n\t>\n\t\t<ng-container>\n\t\t\t@for (item of viewPortItems; track trackByOption($index, item)) {\n\t\t\t\t<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus, @angular-eslint/template/mouse-events-have-key-events -->\n\t\t\t\t<div\n\t\t\t\t\tclass=\"ng-option\"\n\t\t\t\t\t[attr.role]=\"item.children ? 'group' : 'option'\"\n\t\t\t\t\t(click)=\"toggleItem(item)\"\n\t\t\t\t\t(mouseover)=\"onItemHover(item)\"\n\t\t\t\t\t[class.ng-option-disabled]=\"item.disabled\"\n\t\t\t\t\t[class.ng-option-selected]=\"item.selected\"\n\t\t\t\t\t[class.ng-optgroup]=\"item.children\"\n\t\t\t\t\t[class.ng-option]=\"!item.children\"\n\t\t\t\t\t[class.ng-option-child]=\"!!item.parent\"\n\t\t\t\t\t[class.ng-option-marked]=\"item === itemsList.markedItem\"\n\t\t\t\t\t[attr.aria-selected]=\"item.selected\"\n\t\t\t\t\t[attr.id]=\"item?.htmlId\"\n\t\t\t\t\t[attr.aria-setsize]=\"itemsList.filteredItems.length\"\n\t\t\t\t\t[attr.aria-posinset]=\"(item.index ?? 0) + 1\"\n\t\t\t\t>\n\t\t\t\t\t<ng-template #defaultOptionTemplate>\n\t\t\t\t\t\t<span class=\"ng-option-label\" [ngItemLabel]=\"item.label\" [escape]=\"escapeHTML\"></span>\n\t\t\t\t\t</ng-template>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t[ngTemplateOutlet]=\"\n\t\t\t\t\t\t\titem.children\n\t\t\t\t\t\t\t\t? optgroupTemplate() || defaultOptionTemplate\n\t\t\t\t\t\t\t\t: optionTemplate() || defaultOptionTemplate\n\t\t\t\t\t\t\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ item: item.value, item$: item, index: item.index, searchTerm: searchTerm }\"\n\t\t\t\t\t>\n\t\t\t\t\t</ng-template>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@if (showAddTag) {\n\t\t\t\t<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus, @angular-eslint/template/mouse-events-have-key-events -->\n\t\t\t\t<div\n\t\t\t\t\tclass=\"ng-option\"\n\t\t\t\t\t[class.ng-option-marked]=\"!itemsList.markedItem\"\n\t\t\t\t\t(mouseover)=\"itemsList.unmarkItem()\"\n\t\t\t\t\trole=\"option\"\n\t\t\t\t\t[attr.aria-selected]=\"false\"\n\t\t\t\t\t(click)=\"selectTag()\"\n\t\t\t\t>\n\t\t\t\t\t<ng-template #defaultTagTemplate>\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t><span class=\"ng-tag-label\">{{ addTagText() || config.addTagText }}</span\n\t\t\t\t\t\t\t>\"{{ searchTerm }}\"</span\n\t\t\t\t\t\t>\n\t\t\t\t\t</ng-template>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t[ngTemplateOutlet]=\"tagTemplate() || defaultTagTemplate\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\"\n\t\t\t\t\t>\n\t\t\t\t\t</ng-template>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</ng-container>\n\t\t@if (showNoItemsFound()) {\n\t\t\t<ng-template #defaultNotFoundTemplate>\n\t\t\t\t<div class=\"ng-option ng-option-disabled\">{{ notFoundText() ?? config.notFoundText }}</div>\n\t\t\t</ng-template>\n\t\t\t<ng-template\n\t\t\t\t[ngTemplateOutlet]=\"notFoundTemplate() || defaultNotFoundTemplate\"\n\t\t\t\t[ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\"\n\t\t\t>\n\t\t\t</ng-template>\n\t\t}\n\t\t@if (showTypeToSearch()) {\n\t\t\t<ng-template #defaultTypeToSearchTemplate>\n\t\t\t\t<div class=\"ng-option ng-option-disabled\">{{ typeToSearchText() || config.typeToSearchText }}</div>\n\t\t\t</ng-template>\n\t\t\t<ng-template [ngTemplateOutlet]=\"typeToSearchTemplate() || defaultTypeToSearchTemplate\"></ng-template>\n\t\t}\n\t\t@if (loading() && itemsList.filteredItems.length === 0) {\n\t\t\t<ng-template #defaultLoadingTextTemplate>\n\t\t\t\t<div class=\"ng-option ng-option-disabled\">{{ loadingText() || config.loadingText }}</div>\n\t\t\t</ng-template>\n\t\t\t<ng-template\n\t\t\t\t[ngTemplateOutlet]=\"loadingTextTemplate() || defaultLoadingTextTemplate\"\n\t\t\t\t[ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\"\n\t\t\t>\n\t\t\t</ng-template>\n\t\t}\n\t</ng-dropdown-panel>\n}\n\n<!-- Always present aria-live region -->\n<div aria-atomic=\"true\" aria-live=\"polite\" class=\"ng-visually-hidden\" role=\"status\">\n\t@if (isOpen() && showNoItemsFound()) {\n\t\t{{ notFoundText() ?? config.notFoundText }}\n\t}\n</div>\n", styles: ["@charset \"UTF-8\";.ng-select{position:relative;display:block;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.ng-select div,.ng-select input,.ng-select span{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.ng-select [hidden]{display:none}.ng-select.ng-select-searchable .ng-select-container .ng-value-container .ng-input{opacity:1}.ng-select.ng-select-opened .ng-select-container{z-index:1001}.ng-select.ng-select-disabled .ng-select-container .ng-value-container .ng-placeholder,.ng-select.ng-select-disabled .ng-select-container .ng-value-container .ng-value{-webkit-user-select:none;user-select:none;cursor:default}.ng-select.ng-select-disabled .ng-arrow-wrapper{cursor:default}.ng-select.ng-select-filtered .ng-placeholder{display:none}.ng-select .ng-select-container{cursor:default;display:flex;outline:none;overflow:hidden;position:relative;width:100%}.ng-select .ng-select-container .ng-value-container{display:flex;flex:1}.ng-select .ng-select-container .ng-value-container .ng-input{opacity:0}.ng-select .ng-select-container .ng-value-container .ng-input>input{box-sizing:content-box;background:none transparent;border:0 none;box-shadow:none;outline:none;padding:0;cursor:default;width:100%}.ng-select .ng-select-container .ng-value-container .ng-input>input::-ms-clear{display:none}.ng-select .ng-select-container .ng-value-container .ng-input>input[readonly]{-webkit-user-select:unset;user-select:unset;width:0;padding:0}.ng-select.ng-select-single.ng-select-filtered .ng-select-container .ng-value-container .ng-value{visibility:hidden}.ng-select.ng-select-single .ng-select-container .ng-value-container,.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:none}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{position:absolute;left:0;width:100%}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-icon{display:none}.ng-select.ng-select-multiple .ng-select-container .ng-value-container{flex-wrap:wrap}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{position:absolute}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{white-space:nowrap}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-icon{display:none}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{cursor:pointer}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{flex:1;z-index:2}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{z-index:1}.ng-select .ng-clear-wrapper{cursor:pointer;position:relative;width:17px;-webkit-user-select:none;user-select:none}.ng-select .ng-clear-wrapper .ng-clear{display:inline-block;font-size:18px;line-height:1;pointer-events:none}.ng-select .ng-spinner-loader{border-radius:50%;width:17px;height:17px;margin-right:5px;font-size:10px;position:relative;text-indent:-9999em;border-top:2px solid rgba(66,66,66,.2);border-right:2px solid rgba(66,66,66,.2);border-bottom:2px solid rgba(66,66,66,.2);border-left:2px solid #424242;transform:translateZ(0);animation:load8 .8s infinite linear}.ng-select .ng-spinner-loader:after{border-radius:50%;width:17px;height:17px}@-webkit-keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.ng-select .ng-arrow-wrapper{cursor:pointer;position:relative;text-align:center;-webkit-user-select:none;user-select:none}.ng-select .ng-arrow-wrapper .ng-arrow{pointer-events:none;display:inline-block;height:0;width:0;position:relative}.ng-dropdown-panel{box-sizing:border-box;position:absolute;opacity:0;width:100%;z-index:1050;-webkit-overflow-scrolling:touch}.ng-dropdown-panel .ng-dropdown-panel-items{display:block;height:auto;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;max-height:240px;overflow-y:auto}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{box-sizing:border-box;cursor:pointer;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-option-label:empty:before{content:\"\\200b\"}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .highlighted{font-weight:700;text-decoration:underline}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.disabled{cursor:default}.ng-dropdown-panel .scroll-host{overflow:hidden;overflow-y:auto;position:relative;display:block;-webkit-overflow-scrolling:touch}.ng-dropdown-panel .scrollable-content{top:0;left:0;width:100%;height:100%;position:absolute}.ng-dropdown-panel .total-padding{width:1px;opacity:0}.ng-visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0;white-space:nowrap}\n"] }]
         }], ctorParameters: () => [], propDecorators: { _ariaLabelDropdown: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelDropdown", required: false }] }], _ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], _markFirst: [{ type: i0.Input, args: [{ isSignal: true, alias: "markFirst", required: false }] }], _placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], _fixedPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixedPlaceholder", required: false }] }], _notFoundText: [{ type: i0.Input, args: [{ isSignal: true, alias: "notFoundText", required: false }] }], _typeToSearchText: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeToSearchText", required: false }] }], _preventToggleOnRightClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventToggleOnRightClick", required: false }] }], _addTagText: [{ type: i0.Input, args: [{ isSignal: true, alias: "addTagText", required: false }] }], _loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], _clearAllText: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAllText", required: false }] }], _dropdownPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownPosition", required: false }] }], _appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], _outsideClickEvent: [{ type: i0.Input, args: [{ isSignal: true, alias: "outsideClickEvent", required: false }] }], _loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], _closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], _hideSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideSelected", required: false }] }], _selectOnTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectOnTab", required: false }] }], _openOnEnter: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOnEnter", required: false }] }], _maxSelectedItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelectedItems", required: false }] }], _groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }], _groupValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupValue", required: false }] }], _bufferAmount: [{ type: i0.Input, args: [{ isSignal: true, alias: "bufferAmount", required: false }] }], _virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], _selectableGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectableGroup", required: false }] }], _tabFocusOnClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabFocusOnClearButton", required: false }] }], _selectableGroupAsModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectableGroupAsModel", required: false }] }], _searchFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchFn", required: false }] }], _trackByFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackByFn", required: false }] }], _clearOnBackspace: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearOnBackspace", required: false }] }], _labelForId: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelForId", required: false }] }], _inputAttrs: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputAttrs", required: false }] }], _tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], _readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], _searchWhileComposing: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchWhileComposing", required: false }] }], _minTermLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minTermLength", required: false }] }], _editableSearchTerm: [{ type: i0.Input, args: [{ isSignal: true, alias: "editableSearchTerm", required: false }] }], _ngClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngClass", required: false }] }], _typeahead: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeahead", required: false }] }], _multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], _addTag: [{ type: i0.Input, args: [{ isSignal: true, alias: "addTag", required: false }] }], _searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], _clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], _clearKeepsDisabledOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearKeepsDisabledOptions", required: false }] }], _deselectOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "deselectOnClick", required: false }] }], _clearSearchOnAdd: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearSearchOnAdd", required: false }] }], _compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], _keyDownFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyDownFn", required: false }] }], _popover: [{ type: i0.Input, args: [{ isSignal: true, alias: "popover", required: false }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }, { type: i0.Output, args: ["bindLabelChange"] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }, { type: i0.Output, args: ["bindValueChange"] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }, { type: i0.Output, args: ["appearanceChange"] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }, { type: i0.Output, args: ["itemsChange"] }], blurEvent: [{ type: i0.Output, args: ["blur"] }], focusEvent: [{ type: i0.Output, args: ["focus"] }], changeEvent: [{ type: i0.Output, args: ["change"] }], openEvent: [{ type: i0.Output, args: ["open"] }], closeEvent: [{ type: i0.Output, args: ["close"] }], searchEvent: [{ type: i0.Output, args: ["search"] }], clearEvent: [{ type: i0.Output, args: ["clear"] }], addEvent: [{ type: i0.Output, args: ["add"] }], removeEvent: [{ type: i0.Output, args: ["remove"] }], scroll: [{ type: i0.Output, args: ["scroll"] }], scrollToEnd: [{ type: i0.Output, args: ["scrollToEnd"] }], optionTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgOptionTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], optgroupTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgOptgroupTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], labelTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgLabelTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], multiLabelTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgMultiLabelTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], headerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgHeaderTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], footerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgFooterTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], notFoundTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgNotFoundTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], placeholderTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgPlaceholderTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], typeToSearchTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgTypeToSearchTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], loadingTextTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgLoadingTextTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], tagTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgTagTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], loadingSpinnerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgLoadingSpinnerTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], clearButtonTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgClearButtonTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], ngOptions: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NgOptionComponent), { ...{ descendants: true }, isSignal: true }] }], dropdownPanel: [{ type: i0.ViewChild, args: [forwardRef(() => NgDropdownPanelComponent), { isSignal: true }] }], searchInput: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }], clearButton: [{ type: i0.ViewChild, args: ['clearButton', { isSignal: true }] }], handleKeyDown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
@@ -7389,6 +7391,23 @@ function serializeValue(date, granularity, valueFormat) {
  */
 class HubDatepickerComponent extends HubFieldControl {
     #localeId = inject(LOCALE_ID);
+    #overlays = inject(OverlayService);
+    #viewContainerRef = inject(ViewContainerRef);
+    /** The field's own box: what the calendar hangs off. */
+    _trigger = viewChild.required('trigger', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_trigger" }] : /* istanbul ignore next */ []));
+    /** The calendar, rendered into the overlay rather than into the field. */
+    _panel = viewChild.required('panel', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_panel" }] : /* istanbul ignore next */ []));
+    /** Live overlay while the calendar is up; `null` when it is closed. */
+    #overlayRef = null;
+    constructor() {
+        super();
+        // The panel lives in `document.body`, outside this component's own tree, so nothing removes
+        // it when the field goes away: a datepicker destroyed while open would leave its calendar
+        // on screen, attached to a field that no longer exists.
+        inject(DestroyRef).onDestroy(() => this.#closeOverlay());
+    }
     #config = inject(HUB_FORMS_CONFIG).datepicker;
     _labelTypes = HubLabelTypes;
     _formTextTypes = FormTextTypes;
@@ -7775,8 +7794,49 @@ class HubDatepickerComponent extends HubFieldControl {
         }
         this.#anchor(this._start() ?? new Date());
         this._open.set(true);
+        this.#openOverlay();
         this.opened.emit();
     }
+    /**
+     * Puts the calendar on screen, hung off the field's own box.
+     *
+     * `start` and `end` in the position list are logical, and the strategy reads the direction from
+     * the origin — so a field inside an RTL container opens its calendar against the right edge
+     * without a second list of positions. The offset mirrors what this component asked the CDK for
+     * before the swap, so any visual difference means the swap is wrong rather than better.
+     */
+    #openOverlay() {
+        if (this.#overlayRef) {
+            return;
+        }
+        const position = this.#overlays
+            .position()
+            .flexibleConnectedTo(this._trigger().nativeElement)
+            .withPositions(HUB_DROPDOWN_POSITIONS.map((p) => ({ ...p, offsetY: 4 })));
+        const ref = this.#overlays.create({
+            positionStrategy: position,
+            hasBackdrop: true,
+            backdropClass: 'hub-datepicker__backdrop',
+            panelClass: 'hub-datepicker__overlay'
+        });
+        ref.onBackdropClick(() => this.close());
+        // The panel does not take focus — opened from a click, focus stays where it was — so the
+        // grid's own keydown never hears Escape. The overlay listens on the document and tells the
+        // topmost open one, which is how the CDK behaved before the swap.
+        ref.onKeydown((event) => {
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                this.close();
+            }
+        });
+        ref.attach(this._panel(), this.#viewContainerRef);
+        this.#overlayRef = ref;
+    }
+    /** Takes the calendar off screen and releases the overlay it lived in. */
+    #closeOverlay() {
+        this.#overlayRef?.dispose();
+        this.#overlayRef = null;
+    }
     /** Closes the calendar and marks the control as touched. */
     close() {
         if (!this._open()) {
@@ -7784,6 +7844,7 @@ class HubDatepickerComponent extends HubFieldControl {
         }
         this.#rollbackPendingRange();
         this._open.set(false);
+        this.#closeOverlay();
         this._previewTarget.set(null);
         this.onTouched?.();
         this.closed.emit();
@@ -8135,16 +8196,16 @@ class HubDatepickerComponent extends HubFieldControl {
         this.onChange?.(value);
         this.valueChange.emit(value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubDatepickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: HubDatepickerComponent, isStandalone: true, selector: "hub-datepicker", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, granularity: { classPropertyName: "granularity", publicName: "granularity", isSignal: true, isRequired: false, transformFunction: null }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", isSignal: true, isRequired: false, transformFunction: null }, parse: { classPropertyName: "parse", publicName: "parse", 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 }, timeDisplayFormat: { classPropertyName: "timeDisplayFormat", publicName: "timeDisplayFormat", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, secondStep: { classPropertyName: "secondStep", publicName: "secondStep", isSignal: true, isRequired: false, transformFunction: null }, hourFormat: { classPropertyName: "hourFormat", publicName: "hourFormat", 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 }, prepend: { classPropertyName: "prepend", publicName: "prepend", isSignal: true, isRequired: false, transformFunction: null }, append: { classPropertyName: "append", publicName: "append", 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" } }, queries: [{ propertyName: "_prependTpl", first: true, predicate: HubPrependDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_appendTpl", first: true, predicate: HubAppendDirective, descendants: true, read: TemplateRef, isSignal: 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--readonly]=\"readonly()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n\t[class.hub-field--valid]=\"showsValid\"\n>\n\t@if (!showsFloatingLabel() && (label() || required())) {\n\t\t<label [for]=\"id\" class=\"hub-field__label\">\n\t\t\t{{ label() }}\n\t\t\t@if (required()) {\n\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t}\n\t\t</label>\n\t}\n\n\t<div class=\"hub-field__body\">\n\t\t<div\n\t\t\tclass=\"hub-datepicker__group\"\n\t\t\t[class.hub-datepicker__group--floating]=\"showsFloatingLabel()\"\n\t\t\t[class.hub-datepicker__group--raised]=\"showsFloatingLabel() && isLabelRaised()\"\n\t\t\t[class.hub-datepicker__group--has-prepend]=\"hasPrepend()\"\n\t\t\t[class.hub-datepicker__group--has-append]=\"hasAppend()\"\n\t\t>\n\t\t\t@if (_prependTpl(); as tpl) {\n\t\t\t\t<span class=\"hub-datepicker__attached hub-datepicker__attached--prepend\">\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t</span>\n\t\t\t}\n\t\t\t@for (addon of _prependAddons(); track $index) {\n\t\t\t\t<span class=\"hub-datepicker__addon hub-datepicker__addon--prepend\">{{ addon }}</span>\n\t\t\t}\n\t\t\t<div class=\"hub-datepicker__trigger\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\n\t\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]=\"showsFloatingLabel() && !isLabelRaised() ? '' : 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(focus)=\"setFocused(true)\"\n\t\t\t(blur)=\"setFocused(false); 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()\">\n\t\t\t\t&times;\n\t\t\t</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\t@if (showsFloatingLabel()) {\n\t\t\t<label [for]=\"id\" class=\"hub-field__label hub-datepicker__label--floating\">\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\t\t\t</div>\n\t\t\t@for (addon of _appendAddons(); track $index) {\n\t\t\t\t<span class=\"hub-datepicker__addon hub-datepicker__addon--append\">{{ addon }}</span>\n\t\t\t}\n\t\t\t@if (_appendTpl(); as tpl) {\n\t\t\t\t<span class=\"hub-datepicker__attached hub-datepicker__attached--append\">\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t</span>\n\t\t\t}\n\t\t</div>\n\t</div>\n\n\t@if (formText() || formTextTmp()) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tclass=\"hub-field__feedback-text\"\n\t\t\t\t\t\t\t\t[innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"\n\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n\n\t@if (showsValid && validFeedback()) {\n\t\t<div class=\"hub-field__feedback hub-field__feedback--valid\" role=\"status\">\n\t\t\t<span class=\"hub-field__feedback-text\">{{ validFeedback() }}</span>\n\t\t</div>\n\t}\n</div>\n\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]=\"_isPeriod() ? periodLabel() : monthYearLabel()\">\n\t\t@if (_isPeriod()) {\n\t\t\t<header class=\"hub-datepicker__header\">\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"hub-datepicker__nav\"\n\t\t\t\t\t[attr.aria-label]=\"_labels().previousYear\"\n\t\t\t\t\t(click)=\"shiftPeriod(-1)\"\n\t\t\t\t>\n\t\t\t\t\t\u2039\n\t\t\t\t</button>\n\t\t\t\t<span class=\"hub-datepicker__title\" aria-live=\"polite\">{{ periodLabel() }}</span>\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"hub-datepicker__nav\"\n\t\t\t\t\t[attr.aria-label]=\"_labels().nextYear\"\n\t\t\t\t\t(click)=\"shiftPeriod(1)\"\n\t\t\t\t>\n\t\t\t\t\t\u203A\n\t\t\t\t</button>\n\t\t\t</header>\n\n\t\t\t<hub-datepicker-period\n\t\t\t\t[granularity]=\"$any(_granularity())\"\n\t\t\t\t[viewDate]=\"_viewDate()\"\n\t\t\t\t[focusedDate]=\"_focusedDate()\"\n\t\t\t\t[selectionStart]=\"rangeStart()\"\n\t\t\t\t[selectionEnd]=\"rangeEnd()\"\n\t\t\t\t[range]=\"_isRange()\"\n\t\t\t\t[locale]=\"locale()\"\n\t\t\t\t[min]=\"_minDate()\"\n\t\t\t\t[max]=\"_maxDate()\"\n\t\t\t\t[labels]=\"_labels()\"\n\t\t\t\t(pick)=\"selectPeriod($event)\"\n\t\t\t\t(focusMove)=\"onPeriodFocusMove($event)\"\n\t\t\t\t(dismiss)=\"close()\"\n\t\t\t/>\n\t\t} @else {\n\t\t\t<header class=\"hub-datepicker__header\">\n\t\t\t\t<div class=\"hub-datepicker__nav-group\">\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclass=\"hub-datepicker__nav\"\n\t\t\t\t\t\t[attr.aria-label]=\"_labels().previousYear\"\n\t\t\t\t\t\t(click)=\"shiftMonth(-12)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t\u00AB\n\t\t\t\t\t</button>\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclass=\"hub-datepicker__nav\"\n\t\t\t\t\t\t[attr.aria-label]=\"_labels().previousMonth\"\n\t\t\t\t\t\t(click)=\"shiftMonth(-1)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t\u2039\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t\t<span class=\"hub-datepicker__title\" aria-live=\"polite\">{{ monthYearLabel() }}</span>\n\t\t\t\t<div class=\"hub-datepicker__nav-group\">\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclass=\"hub-datepicker__nav\"\n\t\t\t\t\t\t[attr.aria-label]=\"_labels().nextMonth\"\n\t\t\t\t\t\t(click)=\"shiftMonth(1)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t\u203A\n\t\t\t\t\t</button>\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclass=\"hub-datepicker__nav\"\n\t\t\t\t\t\t[attr.aria-label]=\"_labels().nextYear\"\n\t\t\t\t\t\t(click)=\"shiftMonth(12)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t\u00BB\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t</header>\n\n\t\t\t<div class=\"hub-datepicker__weekdays\" aria-hidden=\"true\">\n\t\t\t\t@for (wd of weekdays(); track $index) {\n\t\t\t\t\t<span class=\"hub-datepicker__weekday\">{{ wd }}</span>\n\t\t\t\t}\n\t\t\t</div>\n\n\t\t\t<div class=\"hub-datepicker__grid\" role=\"grid\" (keydown)=\"onGridKeydown($event)\" (mouseleave)=\"clearPreview()\">\n\t\t\t\t@for (cell of grid(); track cell.date.getTime()) {\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\trole=\"gridcell\"\n\t\t\t\t\t\tclass=\"hub-datepicker__cell\"\n\t\t\t\t\t\t[class.hub-datepicker__cell--outside]=\"!cell.currentMonth\"\n\t\t\t\t\t\t[class.hub-datepicker__cell--today]=\"cell.today\"\n\t\t\t\t\t\t[class.hub-datepicker__cell--selected]=\"cell.selected || cell.rangeStart || cell.rangeEnd\"\n\t\t\t\t\t\t[class.hub-datepicker__cell--range-start]=\"cell.rangeStart\"\n\t\t\t\t\t\t[class.hub-datepicker__cell--range-end]=\"cell.rangeEnd\"\n\t\t\t\t\t\t[class.hub-datepicker__cell--in-range]=\"cell.inRange\"\n\t\t\t\t\t\t[class.hub-datepicker__cell--preview]=\"cell.preview\"\n\t\t\t\t\t\t[class.hub-datepicker__cell--preview-end]=\"cell.previewEnd\"\n\t\t\t\t\t\t[attr.data-time]=\"cell.date.getTime()\"\n\t\t\t\t\t\t[attr.tabindex]=\"cell.focused ? 0 : -1\"\n\t\t\t\t\t\t[attr.aria-selected]=\"cell.selected || cell.rangeStart || cell.rangeEnd\"\n\t\t\t\t\t\t[disabled]=\"cell.disabled\"\n\t\t\t\t\t\t(click)=\"selectDay(cell)\"\n\t\t\t\t\t\t(mouseenter)=\"previewDay(cell)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{{ cell.day }}\n\t\t\t\t\t</button>\n\t\t\t\t}\n\t\t\t</div>\n\t\t}\n\n\t\t@if (_hasTime()) {\n\t\t\t<div class=\"hub-datepicker__times\">\n\t\t\t\t<hub-datepicker-time\n\t\t\t\t\t[value]=\"startTimeValue()\"\n\t\t\t\t\t(valueChange)=\"onStartTimeChange($event)\"\n\t\t\t\t\t[label]=\"_emitsRange() ? _labels().startTime : _labels().time\"\n\t\t\t\t\t[granularity]=\"_granularity()\"\n\t\t\t\t\t[locale]=\"locale()\"\n\t\t\t\t\t[hour12]=\"_hour12()\"\n\t\t\t\t\t[minuteStep]=\"_minuteStep()\"\n\t\t\t\t\t[secondStep]=\"_secondStep()\"\n\t\t\t\t\t[min]=\"_minDate()\"\n\t\t\t\t\t[max]=\"_maxDate()\"\n\t\t\t\t\t[labels]=\"_labels()\"\n\t\t\t\t/>\n\n\t\t\t\t@if (_emitsRange()) {\n\t\t\t\t\t<hub-datepicker-time\n\t\t\t\t\t\t[value]=\"endTimeValue()\"\n\t\t\t\t\t\t(valueChange)=\"onEndTimeChange($event)\"\n\t\t\t\t\t\t[label]=\"_labels().endTime\"\n\t\t\t\t\t\t[granularity]=\"_granularity()\"\n\t\t\t\t\t\t[locale]=\"locale()\"\n\t\t\t\t\t\t[hour12]=\"_hour12()\"\n\t\t\t\t\t\t[minuteStep]=\"_minuteStep()\"\n\t\t\t\t\t\t[secondStep]=\"_secondStep()\"\n\t\t\t\t\t\t[min]=\"_minDate()\"\n\t\t\t\t\t\t[max]=\"_maxDate()\"\n\t\t\t\t\t\t[labels]=\"_labels()\"\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t</div>\n\t\t}\n\n\t\t@if (showToday() || clearable() || _hasTime()) {\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\t@if (_hasTime()) {\n\t\t\t\t\t<button type=\"button\" class=\"hub-datepicker__action hub-datepicker__action--primary\" (click)=\"close()\">\n\t\t\t\t\t\t{{ _labels().done }}\n\t\t\t\t\t</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__group--floating .hub-field__control{padding-top:calc(var(--hub-input-padding-y) + var(--hub-field-floating-inset));padding-bottom:var(--hub-input-padding-y)}.hub-datepicker__group--floating .hub-datepicker__label--floating{font-size:var(--hub-input-font-size);position:absolute;top:0;inset-inline-start:0;display:flex;align-items:center;height:100%;padding:0 var(--hub-input-padding-x);margin:0;color:var(--hub-input-placeholder-color);font-weight:var(--hub-ref-font-weight-base, 400);pointer-events:none;transform-origin:0 0}[dir=rtl] .hub-datepicker__group--floating .hub-datepicker__label--floating{transform-origin:100% 0}.hub-datepicker__group--floating .hub-datepicker__label--floating{transition:opacity .1s ease-in-out,transform .1s ease-in-out}.hub-datepicker__group--raised .hub-datepicker__label--floating{transform:scale(var(--hub-field-floating-scale)) translateY(calc(-1 * var(--hub-field-floating-travel)));opacity:.9}.hub-datepicker__input{padding-inline-end:var(--hub-datepicker-icon-width);cursor:pointer}.hub-datepicker__input--clearable{padding-inline-end:calc(var(--hub-datepicker-icon-width) + 1.5rem)}.hub-datepicker__clear{position:absolute;top:0;inset-inline-end: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;inset-inline-end: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:none}.hub-datepicker__panel .hub-datepicker__title:first-letter{text-transform:uppercase}.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--preview,.hub-datepicker__panel .hub-datepicker__cell--preview-end,.hub-datepicker__panel .hub-datepicker__cell--preview:hover,.hub-datepicker__panel .hub-datepicker__cell--preview-end:hover{background:var(--hub-daterangepicker-preview-bg)}.hub-datepicker__panel .hub-datepicker__cell--preview{border-radius:0}.hub-datepicker__panel .hub-datepicker__cell--range-start{border-start-end-radius:0;border-end-end-radius:0}.hub-datepicker__panel .hub-datepicker__cell--range-end{border-start-start-radius:0;border-end-start-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__period-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.125rem;min-width:calc(var(--hub-daterangepicker-cell-size) * 7)}.hub-datepicker__panel .hub-datepicker__period-cell{display:inline-flex;align-items:center;justify-content:center;height:var(--hub-daterangepicker-cell-size);padding:0 .5rem;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);text-transform:capitalize;cursor:pointer}.hub-datepicker__panel .hub-datepicker__period-cell:hover{background:var(--hub-daterangepicker-cell-hover-bg)}.hub-datepicker__panel .hub-datepicker__period-cell--outside{color:var(--hub-daterangepicker-off-color)}.hub-datepicker__panel .hub-datepicker__period-cell--current{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__period-cell--in-range{background:var(--hub-daterangepicker-in-range-bg);border-radius:0}.hub-datepicker__panel .hub-datepicker__period-cell--range-start{border-start-end-radius:0;border-end-end-radius:0}.hub-datepicker__panel .hub-datepicker__period-cell--range-end{border-start-start-radius:0;border-end-start-radius:0}.hub-datepicker__panel .hub-datepicker__period-cell--selected,.hub-datepicker__panel .hub-datepicker__period-cell--selected:hover{color:var(--hub-daterangepicker-active-color);background:var(--hub-daterangepicker-active-bg)}.hub-datepicker__panel .hub-datepicker__period-cell:disabled{color:var(--hub-daterangepicker-off-color);background:transparent;cursor:not-allowed;opacity:.6}.hub-datepicker__panel .hub-datepicker__period-cell:focus-visible{outline:0;box-shadow:var(--hub-input-focus-box-shadow)}.hub-datepicker__panel .hub-datepicker__times{display:grid;gap:.25rem;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__time{display:flex;align-items:center;justify-content:space-between;gap:var(--hub-ref-space-2, .5rem)}.hub-datepicker__panel .hub-datepicker__time-label{font-size:var(--hub-ref-font-size-sm, .875rem);color:var(--hub-daterangepicker-off-color)}.hub-datepicker__panel .hub-datepicker__time-fields{display:inline-flex;align-items:center;gap:.125rem}.hub-datepicker__panel .hub-datepicker__time-field{width:2.25rem;padding:.2rem 0;color:var(--hub-daterangepicker-cell-color);font-family:inherit;font-size:var(--hub-input-font-size);text-align:center;background:transparent;border:var(--hub-input-border-width) solid transparent;border-radius:var(--hub-daterangepicker-cell-border-radius)}.hub-datepicker__panel .hub-datepicker__time-field:hover{background:var(--hub-daterangepicker-cell-hover-bg)}.hub-datepicker__panel .hub-datepicker__time-field:focus-visible{outline:0;border-color:var(--hub-daterangepicker-border-color);box-shadow:var(--hub-input-focus-box-shadow)}.hub-datepicker__panel .hub-datepicker__time-separator{color:var(--hub-daterangepicker-off-color)}.hub-datepicker__panel .hub-datepicker__time-meridiem{margin-inline-start:.25rem;padding:.2rem .4rem;color:var(--hub-daterangepicker-cell-color);font-family:inherit;font-size:var(--hub-ref-font-size-sm, .875rem);background:transparent;border:var(--hub-input-border-width) solid var(--hub-daterangepicker-border-color);border-radius:var(--hub-daterangepicker-cell-border-radius);cursor:pointer}.hub-datepicker__panel .hub-datepicker__time-meridiem:hover{background:var(--hub-daterangepicker-cell-hover-bg)}.hub-datepicker__panel .hub-datepicker__time-meridiem: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)}.hub-datepicker__panel .hub-datepicker__action--primary{color:var(--hub-daterangepicker-active-color);background:var(--hub-daterangepicker-active-bg)}.hub-datepicker__panel .hub-datepicker__action--primary:hover{background:var(--hub-daterangepicker-active-bg);filter:brightness(1.1)}.hub-datepicker__group{display:flex;align-items:stretch;min-width:0}.hub-datepicker__group>.hub-datepicker__control,.hub-datepicker__group>.hub-field__control{flex:1 1 auto;min-width:0}.hub-datepicker__addon{display:flex;align-items:center;flex:0 0 auto;padding:0 var(--hub-datepicker-padding-x, var(--hub-input-padding-x));color:var(--hub-datepicker-group-addon-color, var(--hub-input-group-addon-color));background:var(--hub-datepicker-group-addon-bg, var(--hub-input-group-addon-bg));border:var(--hub-datepicker-border-width, var(--hub-input-border-width)) solid var(--hub-datepicker-group-addon-border-color, var(--hub-input-group-addon-border-color));border-radius:var(--hub-datepicker-border-radius, var(--hub-input-border-radius));font-size:var(--hub-datepicker-font-size, var(--hub-input-font-size));white-space:nowrap}.hub-datepicker__addon--prepend{border-inline-end:0;border-start-end-radius:0;border-end-end-radius:0}.hub-datepicker__addon--append{border-inline-start:0;border-start-start-radius:0;border-end-start-radius:0}.hub-datepicker__attached.hub-datepicker__attached{display:flex;align-items:stretch;flex:0 0 auto;gap:var(--hub-datepicker-group-attached-gap, var(--hub-input-group-attached-gap));position:relative}.hub-datepicker__attached.hub-datepicker__attached>*{padding-block:0;padding-inline:var(--hub-datepicker-padding-x, var(--hub-input-padding-x));height:auto;align-self:stretch;display:flex;align-items:center;justify-content:center;min-height:var(--hub-datepicker-min-height, auto);border:var(--hub-datepicker-group-attached-border-width, var(--hub-input-group-attached-border-width)) solid var(--hub-datepicker-group-attached-border-color, var(--hub-input-group-attached-border-color));border-radius:var(--hub-datepicker-border-radius, var(--hub-input-border-radius));margin-inline:calc(-1 * var(--hub-datepicker-group-attached-border-width, var(--hub-input-group-attached-border-width))) 0;position:relative}.hub-datepicker__attached.hub-datepicker__attached>*:hover,.hub-datepicker__attached.hub-datepicker__attached>*:focus-visible{z-index:1}.hub-datepicker__attached.hub-datepicker__attached--prepend>*{border-start-end-radius:var(--hub-datepicker-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-datepicker-group-attached-radius, var(--hub-input-group-attached-radius));margin-inline:0 calc(-1 * var(--hub-datepicker-group-attached-border-width, var(--hub-input-group-attached-border-width)))}.hub-datepicker__attached.hub-datepicker__attached--append>*{border-start-start-radius:var(--hub-datepicker-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-datepicker-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-datepicker__attached.hub-datepicker__attached--prepend>*:not(:first-child){border-start-start-radius:var(--hub-datepicker-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-datepicker-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-datepicker__attached.hub-datepicker__attached--append>*:not(:last-child){border-start-end-radius:var(--hub-datepicker-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-datepicker-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-datepicker__attached.hub-datepicker__attached>hub-input,.hub-datepicker__attached.hub-datepicker__attached>hub-select,.hub-datepicker__attached.hub-datepicker__attached>hub-textarea,.hub-datepicker__attached.hub-datepicker__attached>hub-datepicker{padding-inline:0;border:0;border-radius:0}.hub-datepicker__attached.hub-datepicker__attached--prepend>hub-input .hub-field__control,.hub-datepicker__attached.hub-datepicker__attached--prepend>hub-select .ng-select-container,.hub-datepicker__attached.hub-datepicker__attached--prepend>hub-textarea .hub-field__control,.hub-datepicker__attached.hub-datepicker__attached--prepend>hub-datepicker .hub-field__control{border-start-end-radius:0;border-end-end-radius:0}.hub-datepicker__attached.hub-datepicker__attached--append>hub-input .hub-field__control,.hub-datepicker__attached.hub-datepicker__attached--append>hub-select .ng-select-container,.hub-datepicker__attached.hub-datepicker__attached--append>hub-textarea .hub-field__control,.hub-datepicker__attached.hub-datepicker__attached--append>hub-datepicker .hub-field__control{border-start-start-radius:0;border-end-start-radius:0}:where(.hub-datepicker__attached)>*:not(button):not(a):not(input):not(select):not(textarea):not([role=button]):not([role=link]):not([tabindex]){background:var(--hub-datepicker-group-addon-bg, var(--hub-input-group-addon-bg));color:var(--hub-datepicker-group-addon-color, var(--hub-input-group-addon-color))}:where(.hub-datepicker__attached)>button,:where(.hub-datepicker__attached)>a,:where(.hub-datepicker__attached)>[role=button],:where(.hub-datepicker__attached)>[role=link],:where(.hub-datepicker__attached)>[tabindex]{background:var(--hub-datepicker-group-action-bg, var(--hub-input-group-action-bg));color:var(--hub-datepicker-group-action-color, var(--hub-input-group-action-color))}.hub-datepicker__group--has-prepend .hub-datepicker__control,.hub-datepicker__group--has-prepend .hub-field__control,.hub-datepicker__group--has-prepend .hub-datepicker__control.ng-select .ng-select-container{border-start-start-radius:var(--hub-datepicker-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-datepicker-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-datepicker__group--has-append .hub-datepicker__control,.hub-datepicker__group--has-append .hub-field__control,.hub-datepicker__group--has-append .hub-datepicker__control.ng-select .ng-select-container{border-start-end-radius:var(--hub-datepicker-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-datepicker-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-datepicker__group>.hub-datepicker__addon--prepend:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.hub-datepicker__group>.hub-datepicker__addon--append:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.hub-datepicker__group>.hub-datepicker__trigger{flex:1 1 auto;min-width:0}\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: "component", type: HubDatepickerTimeFieldComponent, selector: "hub-datepicker-time", inputs: ["value", "label", "granularity", "locale", "hour12", "minuteStep", "secondStep", "min", "max", "labels"], outputs: ["valueChange"] }, { kind: "component", type: HubDatepickerPeriodGridComponent, selector: "hub-datepicker-period", inputs: ["granularity", "viewDate", "focusedDate", "selectionStart", "selectionEnd", "range", "locale", "min", "max", "labels"], outputs: ["pick", "focusMove", "dismiss"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: HubDatepickerComponent, isStandalone: true, selector: "hub-datepicker", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, granularity: { classPropertyName: "granularity", publicName: "granularity", isSignal: true, isRequired: false, transformFunction: null }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", isSignal: true, isRequired: false, transformFunction: null }, parse: { classPropertyName: "parse", publicName: "parse", 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 }, timeDisplayFormat: { classPropertyName: "timeDisplayFormat", publicName: "timeDisplayFormat", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, secondStep: { classPropertyName: "secondStep", publicName: "secondStep", isSignal: true, isRequired: false, transformFunction: null }, hourFormat: { classPropertyName: "hourFormat", publicName: "hourFormat", 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 }, prepend: { classPropertyName: "prepend", publicName: "prepend", isSignal: true, isRequired: false, transformFunction: null }, append: { classPropertyName: "append", publicName: "append", 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" } }, queries: [{ propertyName: "_prependTpl", first: true, predicate: HubPrependDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_appendTpl", first: true, predicate: HubAppendDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "_trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "_panel", first: true, predicate: ["panel"], descendants: true, isSignal: 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--readonly]=\"readonly()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n\t[class.hub-field--valid]=\"showsValid\"\n>\n\t@if (!showsFloatingLabel() && (label() || required())) {\n\t\t<label [for]=\"id\" class=\"hub-field__label\">\n\t\t\t{{ label() }}\n\t\t\t@if (required()) {\n\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t}\n\t\t</label>\n\t}\n\n\t<div class=\"hub-field__body\">\n\t\t<div\n\t\t\tclass=\"hub-datepicker__group\"\n\t\t\t[class.hub-datepicker__group--floating]=\"showsFloatingLabel()\"\n\t\t\t[class.hub-datepicker__group--raised]=\"showsFloatingLabel() && isLabelRaised()\"\n\t\t\t[class.hub-datepicker__group--has-prepend]=\"hasPrepend()\"\n\t\t\t[class.hub-datepicker__group--has-append]=\"hasAppend()\"\n\t\t>\n\t\t\t@if (_prependTpl(); as tpl) {\n\t\t\t\t<span class=\"hub-datepicker__attached hub-datepicker__attached--prepend\">\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t</span>\n\t\t\t}\n\t\t\t@for (addon of _prependAddons(); track $index) {\n\t\t\t\t<span class=\"hub-datepicker__addon hub-datepicker__addon--prepend\">{{ addon }}</span>\n\t\t\t}\n\t\t\t<div class=\"hub-datepicker__trigger\" #trigger>\n\t\t\t\t<input\n\t\t\t\t\tclass=\"hub-field__control hub-datepicker__input\"\n\t\t\t\t\t[class.hub-field__control--invalid]=\"isInvalid\"\n\t\t\t\t\t[class.hub-field__control--valid]=\"showsValid\"\n\t\t\t\t\t[class.hub-datepicker__input--clearable]=\"clearable() && displayValue()\"\n\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\treadonly\n\t\t\t\t\t[value]=\"displayValue()\"\n\t\t\t\t\t[placeholder]=\"showsFloatingLabel() && !isLabelRaised() ? '' : placeholder()\"\n\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t\t[attr.aria-expanded]=\"_open()\"\n\t\t\t\t\taria-haspopup=\"dialog\"\n\t\t\t\t\t(click)=\"toggleCalendar()\"\n\t\t\t\t\t(focus)=\"setFocused(true)\"\n\t\t\t\t\t(blur)=\"setFocused(false); handleBlur($event)\"\n\t\t\t\t/>\n\t\t\t\t@if (clearable() && displayValue() && !disabled() && !readonly()) {\n\t\t\t\t\t<button type=\"button\" class=\"hub-datepicker__clear\" [attr.aria-label]=\"_labels().clear\" (click)=\"clear()\">\n\t\t\t\t\t\t&times;\n\t\t\t\t\t</button>\n\t\t\t\t}\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"hub-datepicker__icon\"\n\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t[attr.aria-label]=\"_labels().openCalendar\"\n\t\t\t\t\t[disabled]=\"disabled() || readonly()\"\n\t\t\t\t\t(click)=\"toggleCalendar()\"\n\t\t\t\t></button>\n\t\t\t\t@if (showsFloatingLabel()) {\n\t\t\t\t\t<label [for]=\"id\" class=\"hub-field__label hub-datepicker__label--floating\">\n\t\t\t\t\t\t{{ label() }}\n\t\t\t\t\t\t@if (required()) {\n\t\t\t\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t\t\t\t}\n\t\t\t\t\t</label>\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t@for (addon of _appendAddons(); track $index) {\n\t\t\t\t<span class=\"hub-datepicker__addon hub-datepicker__addon--append\">{{ addon }}</span>\n\t\t\t}\n\t\t\t@if (_appendTpl(); as tpl) {\n\t\t\t\t<span class=\"hub-datepicker__attached hub-datepicker__attached--append\">\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t</span>\n\t\t\t}\n\t\t</div>\n\t</div>\n\n\t@if (formText() || formTextTmp()) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tclass=\"hub-field__feedback-text\"\n\t\t\t\t\t\t\t\t[innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"\n\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n\n\t@if (showsValid && validFeedback()) {\n\t\t<div class=\"hub-field__feedback hub-field__feedback--valid\" role=\"status\">\n\t\t\t<span class=\"hub-field__feedback-text\">{{ validFeedback() }}</span>\n\t\t</div>\n\t}\n</div>\n\n<ng-template #panel>\n\t<div class=\"hub-datepicker__panel\" role=\"dialog\" [attr.aria-label]=\"_isPeriod() ? periodLabel() : monthYearLabel()\">\n\t\t@if (_isPeriod()) {\n\t\t\t<header class=\"hub-datepicker__header\">\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"hub-datepicker__nav\"\n\t\t\t\t\t[attr.aria-label]=\"_labels().previousYear\"\n\t\t\t\t\t(click)=\"shiftPeriod(-1)\"\n\t\t\t\t>\n\t\t\t\t\t\u2039\n\t\t\t\t</button>\n\t\t\t\t<span class=\"hub-datepicker__title\" aria-live=\"polite\">{{ periodLabel() }}</span>\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"hub-datepicker__nav\"\n\t\t\t\t\t[attr.aria-label]=\"_labels().nextYear\"\n\t\t\t\t\t(click)=\"shiftPeriod(1)\"\n\t\t\t\t>\n\t\t\t\t\t\u203A\n\t\t\t\t</button>\n\t\t\t</header>\n\n\t\t\t<hub-datepicker-period\n\t\t\t\t[granularity]=\"$any(_granularity())\"\n\t\t\t\t[viewDate]=\"_viewDate()\"\n\t\t\t\t[focusedDate]=\"_focusedDate()\"\n\t\t\t\t[selectionStart]=\"rangeStart()\"\n\t\t\t\t[selectionEnd]=\"rangeEnd()\"\n\t\t\t\t[range]=\"_isRange()\"\n\t\t\t\t[locale]=\"locale()\"\n\t\t\t\t[min]=\"_minDate()\"\n\t\t\t\t[max]=\"_maxDate()\"\n\t\t\t\t[labels]=\"_labels()\"\n\t\t\t\t(pick)=\"selectPeriod($event)\"\n\t\t\t\t(focusMove)=\"onPeriodFocusMove($event)\"\n\t\t\t\t(dismiss)=\"close()\"\n\t\t\t/>\n\t\t} @else {\n\t\t\t<header class=\"hub-datepicker__header\">\n\t\t\t\t<div class=\"hub-datepicker__nav-group\">\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclass=\"hub-datepicker__nav\"\n\t\t\t\t\t\t[attr.aria-label]=\"_labels().previousYear\"\n\t\t\t\t\t\t(click)=\"shiftMonth(-12)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t\u00AB\n\t\t\t\t\t</button>\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclass=\"hub-datepicker__nav\"\n\t\t\t\t\t\t[attr.aria-label]=\"_labels().previousMonth\"\n\t\t\t\t\t\t(click)=\"shiftMonth(-1)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t\u2039\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t\t<span class=\"hub-datepicker__title\" aria-live=\"polite\">{{ monthYearLabel() }}</span>\n\t\t\t\t<div class=\"hub-datepicker__nav-group\">\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclass=\"hub-datepicker__nav\"\n\t\t\t\t\t\t[attr.aria-label]=\"_labels().nextMonth\"\n\t\t\t\t\t\t(click)=\"shiftMonth(1)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t\u203A\n\t\t\t\t\t</button>\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclass=\"hub-datepicker__nav\"\n\t\t\t\t\t\t[attr.aria-label]=\"_labels().nextYear\"\n\t\t\t\t\t\t(click)=\"shiftMonth(12)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t\u00BB\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t</header>\n\n\t\t\t<div class=\"hub-datepicker__weekdays\" aria-hidden=\"true\">\n\t\t\t\t@for (wd of weekdays(); track $index) {\n\t\t\t\t\t<span class=\"hub-datepicker__weekday\">{{ wd }}</span>\n\t\t\t\t}\n\t\t\t</div>\n\n\t\t\t<div class=\"hub-datepicker__grid\" role=\"grid\" (keydown)=\"onGridKeydown($event)\" (mouseleave)=\"clearPreview()\">\n\t\t\t\t@for (cell of grid(); track cell.date.getTime()) {\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\trole=\"gridcell\"\n\t\t\t\t\t\tclass=\"hub-datepicker__cell\"\n\t\t\t\t\t\t[class.hub-datepicker__cell--outside]=\"!cell.currentMonth\"\n\t\t\t\t\t\t[class.hub-datepicker__cell--today]=\"cell.today\"\n\t\t\t\t\t\t[class.hub-datepicker__cell--selected]=\"cell.selected || cell.rangeStart || cell.rangeEnd\"\n\t\t\t\t\t\t[class.hub-datepicker__cell--range-start]=\"cell.rangeStart\"\n\t\t\t\t\t\t[class.hub-datepicker__cell--range-end]=\"cell.rangeEnd\"\n\t\t\t\t\t\t[class.hub-datepicker__cell--in-range]=\"cell.inRange\"\n\t\t\t\t\t\t[class.hub-datepicker__cell--preview]=\"cell.preview\"\n\t\t\t\t\t\t[class.hub-datepicker__cell--preview-end]=\"cell.previewEnd\"\n\t\t\t\t\t\t[attr.data-time]=\"cell.date.getTime()\"\n\t\t\t\t\t\t[attr.tabindex]=\"cell.focused ? 0 : -1\"\n\t\t\t\t\t\t[attr.aria-selected]=\"cell.selected || cell.rangeStart || cell.rangeEnd\"\n\t\t\t\t\t\t[disabled]=\"cell.disabled\"\n\t\t\t\t\t\t(click)=\"selectDay(cell)\"\n\t\t\t\t\t\t(mouseenter)=\"previewDay(cell)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{{ cell.day }}\n\t\t\t\t\t</button>\n\t\t\t\t}\n\t\t\t</div>\n\t\t}\n\n\t\t@if (_hasTime()) {\n\t\t\t<div class=\"hub-datepicker__times\">\n\t\t\t\t<hub-datepicker-time\n\t\t\t\t\t[value]=\"startTimeValue()\"\n\t\t\t\t\t(valueChange)=\"onStartTimeChange($event)\"\n\t\t\t\t\t[label]=\"_emitsRange() ? _labels().startTime : _labels().time\"\n\t\t\t\t\t[granularity]=\"_granularity()\"\n\t\t\t\t\t[locale]=\"locale()\"\n\t\t\t\t\t[hour12]=\"_hour12()\"\n\t\t\t\t\t[minuteStep]=\"_minuteStep()\"\n\t\t\t\t\t[secondStep]=\"_secondStep()\"\n\t\t\t\t\t[min]=\"_minDate()\"\n\t\t\t\t\t[max]=\"_maxDate()\"\n\t\t\t\t\t[labels]=\"_labels()\"\n\t\t\t\t/>\n\n\t\t\t\t@if (_emitsRange()) {\n\t\t\t\t\t<hub-datepicker-time\n\t\t\t\t\t\t[value]=\"endTimeValue()\"\n\t\t\t\t\t\t(valueChange)=\"onEndTimeChange($event)\"\n\t\t\t\t\t\t[label]=\"_labels().endTime\"\n\t\t\t\t\t\t[granularity]=\"_granularity()\"\n\t\t\t\t\t\t[locale]=\"locale()\"\n\t\t\t\t\t\t[hour12]=\"_hour12()\"\n\t\t\t\t\t\t[minuteStep]=\"_minuteStep()\"\n\t\t\t\t\t\t[secondStep]=\"_secondStep()\"\n\t\t\t\t\t\t[min]=\"_minDate()\"\n\t\t\t\t\t\t[max]=\"_maxDate()\"\n\t\t\t\t\t\t[labels]=\"_labels()\"\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t</div>\n\t\t}\n\n\t\t@if (showToday() || clearable() || _hasTime()) {\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\t@if (_hasTime()) {\n\t\t\t\t\t<button type=\"button\" class=\"hub-datepicker__action hub-datepicker__action--primary\" (click)=\"close()\">\n\t\t\t\t\t\t{{ _labels().done }}\n\t\t\t\t\t</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__group--floating .hub-field__control{padding-top:calc(var(--hub-input-padding-y) + var(--hub-field-floating-inset));padding-bottom:var(--hub-input-padding-y)}.hub-datepicker__group--floating .hub-datepicker__label--floating{font-size:var(--hub-input-font-size);position:absolute;top:0;inset-inline-start:0;display:flex;align-items:center;height:100%;padding:0 var(--hub-input-padding-x);margin:0;color:var(--hub-input-placeholder-color);font-weight:var(--hub-ref-font-weight-base, 400);pointer-events:none;transform-origin:0 0}[dir=rtl] .hub-datepicker__group--floating .hub-datepicker__label--floating{transform-origin:100% 0}.hub-datepicker__group--floating .hub-datepicker__label--floating{transition:opacity .1s ease-in-out,transform .1s ease-in-out}.hub-datepicker__group--raised .hub-datepicker__label--floating{transform:scale(var(--hub-field-floating-scale)) translateY(calc(-1 * var(--hub-field-floating-travel)));opacity:.9}.hub-datepicker__input{padding-inline-end:var(--hub-datepicker-icon-width);cursor:pointer}.hub-datepicker__input--clearable{padding-inline-end:calc(var(--hub-datepicker-icon-width) + 1.5rem)}.hub-datepicker__clear{position:absolute;top:0;inset-inline-end: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;inset-inline-end: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__overlay{background:none;border-radius:0;box-shadow:none}.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:none}.hub-datepicker__panel .hub-datepicker__title:first-letter{text-transform:uppercase}.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--preview,.hub-datepicker__panel .hub-datepicker__cell--preview-end,.hub-datepicker__panel .hub-datepicker__cell--preview:hover,.hub-datepicker__panel .hub-datepicker__cell--preview-end:hover{background:var(--hub-daterangepicker-preview-bg)}.hub-datepicker__panel .hub-datepicker__cell--preview{border-radius:0}.hub-datepicker__panel .hub-datepicker__cell--range-start{border-start-end-radius:0;border-end-end-radius:0}.hub-datepicker__panel .hub-datepicker__cell--range-end{border-start-start-radius:0;border-end-start-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__period-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.125rem;min-width:calc(var(--hub-daterangepicker-cell-size) * 7)}.hub-datepicker__panel .hub-datepicker__period-cell{display:inline-flex;align-items:center;justify-content:center;height:var(--hub-daterangepicker-cell-size);padding:0 .5rem;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);text-transform:capitalize;cursor:pointer}.hub-datepicker__panel .hub-datepicker__period-cell:hover{background:var(--hub-daterangepicker-cell-hover-bg)}.hub-datepicker__panel .hub-datepicker__period-cell--outside{color:var(--hub-daterangepicker-off-color)}.hub-datepicker__panel .hub-datepicker__period-cell--current{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__period-cell--in-range{background:var(--hub-daterangepicker-in-range-bg);border-radius:0}.hub-datepicker__panel .hub-datepicker__period-cell--range-start{border-start-end-radius:0;border-end-end-radius:0}.hub-datepicker__panel .hub-datepicker__period-cell--range-end{border-start-start-radius:0;border-end-start-radius:0}.hub-datepicker__panel .hub-datepicker__period-cell--selected,.hub-datepicker__panel .hub-datepicker__period-cell--selected:hover{color:var(--hub-daterangepicker-active-color);background:var(--hub-daterangepicker-active-bg)}.hub-datepicker__panel .hub-datepicker__period-cell:disabled{color:var(--hub-daterangepicker-off-color);background:transparent;cursor:not-allowed;opacity:.6}.hub-datepicker__panel .hub-datepicker__period-cell:focus-visible{outline:0;box-shadow:var(--hub-input-focus-box-shadow)}.hub-datepicker__panel .hub-datepicker__times{display:grid;gap:.25rem;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__time{display:flex;align-items:center;justify-content:space-between;gap:var(--hub-ref-space-2, .5rem)}.hub-datepicker__panel .hub-datepicker__time-label{font-size:var(--hub-ref-font-size-sm, .875rem);color:var(--hub-daterangepicker-off-color)}.hub-datepicker__panel .hub-datepicker__time-fields{display:inline-flex;align-items:center;gap:.125rem}.hub-datepicker__panel .hub-datepicker__time-field{width:2.25rem;padding:.2rem 0;color:var(--hub-daterangepicker-cell-color);font-family:inherit;font-size:var(--hub-input-font-size);text-align:center;background:transparent;border:var(--hub-input-border-width) solid transparent;border-radius:var(--hub-daterangepicker-cell-border-radius)}.hub-datepicker__panel .hub-datepicker__time-field:hover{background:var(--hub-daterangepicker-cell-hover-bg)}.hub-datepicker__panel .hub-datepicker__time-field:focus-visible{outline:0;border-color:var(--hub-daterangepicker-border-color);box-shadow:var(--hub-input-focus-box-shadow)}.hub-datepicker__panel .hub-datepicker__time-separator{color:var(--hub-daterangepicker-off-color)}.hub-datepicker__panel .hub-datepicker__time-meridiem{margin-inline-start:.25rem;padding:.2rem .4rem;color:var(--hub-daterangepicker-cell-color);font-family:inherit;font-size:var(--hub-ref-font-size-sm, .875rem);background:transparent;border:var(--hub-input-border-width) solid var(--hub-daterangepicker-border-color);border-radius:var(--hub-daterangepicker-cell-border-radius);cursor:pointer}.hub-datepicker__panel .hub-datepicker__time-meridiem:hover{background:var(--hub-daterangepicker-cell-hover-bg)}.hub-datepicker__panel .hub-datepicker__time-meridiem: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)}.hub-datepicker__panel .hub-datepicker__action--primary{color:var(--hub-daterangepicker-active-color);background:var(--hub-daterangepicker-active-bg)}.hub-datepicker__panel .hub-datepicker__action--primary:hover{background:var(--hub-daterangepicker-active-bg);filter:brightness(1.1)}.hub-datepicker__group{display:flex;align-items:stretch;min-width:0}.hub-datepicker__group>.hub-datepicker__control,.hub-datepicker__group>.hub-field__control{flex:1 1 auto;min-width:0}.hub-datepicker__addon{display:flex;align-items:center;flex:0 0 auto;padding:0 var(--hub-datepicker-padding-x, var(--hub-input-padding-x));color:var(--hub-datepicker-group-addon-color, var(--hub-input-group-addon-color));background:var(--hub-datepicker-group-addon-bg, var(--hub-input-group-addon-bg));border:var(--hub-datepicker-border-width, var(--hub-input-border-width)) solid var(--hub-datepicker-group-addon-border-color, var(--hub-input-group-addon-border-color));border-radius:var(--hub-datepicker-border-radius, var(--hub-input-border-radius));font-size:var(--hub-datepicker-font-size, var(--hub-input-font-size));white-space:nowrap}.hub-datepicker__addon--prepend{border-inline-end:0;border-start-end-radius:0;border-end-end-radius:0}.hub-datepicker__addon--append{border-inline-start:0;border-start-start-radius:0;border-end-start-radius:0}.hub-datepicker__attached.hub-datepicker__attached{display:flex;align-items:stretch;flex:0 0 auto;gap:var(--hub-datepicker-group-attached-gap, var(--hub-input-group-attached-gap));position:relative}.hub-datepicker__attached.hub-datepicker__attached>*{padding-block:0;padding-inline:var(--hub-datepicker-padding-x, var(--hub-input-padding-x));height:auto;align-self:stretch;display:flex;align-items:center;justify-content:center;min-height:var(--hub-datepicker-min-height, auto);border:var(--hub-datepicker-group-attached-border-width, var(--hub-input-group-attached-border-width)) solid var(--hub-datepicker-group-attached-border-color, var(--hub-input-group-attached-border-color));border-radius:var(--hub-datepicker-border-radius, var(--hub-input-border-radius));margin-inline:calc(-1 * var(--hub-datepicker-group-attached-border-width, var(--hub-input-group-attached-border-width))) 0;position:relative}.hub-datepicker__attached.hub-datepicker__attached>*:hover,.hub-datepicker__attached.hub-datepicker__attached>*:focus-visible{z-index:1}.hub-datepicker__attached.hub-datepicker__attached--prepend>*{border-start-end-radius:var(--hub-datepicker-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-datepicker-group-attached-radius, var(--hub-input-group-attached-radius));margin-inline:0 calc(-1 * var(--hub-datepicker-group-attached-border-width, var(--hub-input-group-attached-border-width)))}.hub-datepicker__attached.hub-datepicker__attached--append>*{border-start-start-radius:var(--hub-datepicker-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-datepicker-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-datepicker__attached.hub-datepicker__attached--prepend>*:not(:first-child){border-start-start-radius:var(--hub-datepicker-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-datepicker-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-datepicker__attached.hub-datepicker__attached--append>*:not(:last-child){border-start-end-radius:var(--hub-datepicker-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-datepicker-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-datepicker__attached.hub-datepicker__attached>hub-input,.hub-datepicker__attached.hub-datepicker__attached>hub-select,.hub-datepicker__attached.hub-datepicker__attached>hub-textarea,.hub-datepicker__attached.hub-datepicker__attached>hub-datepicker{padding-inline:0;border:0;border-radius:0}.hub-datepicker__attached.hub-datepicker__attached--prepend>hub-input .hub-field__control,.hub-datepicker__attached.hub-datepicker__attached--prepend>hub-select .ng-select-container,.hub-datepicker__attached.hub-datepicker__attached--prepend>hub-textarea .hub-field__control,.hub-datepicker__attached.hub-datepicker__attached--prepend>hub-datepicker .hub-field__control{border-start-end-radius:0;border-end-end-radius:0}.hub-datepicker__attached.hub-datepicker__attached--append>hub-input .hub-field__control,.hub-datepicker__attached.hub-datepicker__attached--append>hub-select .ng-select-container,.hub-datepicker__attached.hub-datepicker__attached--append>hub-textarea .hub-field__control,.hub-datepicker__attached.hub-datepicker__attached--append>hub-datepicker .hub-field__control{border-start-start-radius:0;border-end-start-radius:0}:where(.hub-datepicker__attached)>*:not(button):not(a):not(input):not(select):not(textarea):not([role=button]):not([role=link]):not([tabindex]){background:var(--hub-datepicker-group-addon-bg, var(--hub-input-group-addon-bg));color:var(--hub-datepicker-group-addon-color, var(--hub-input-group-addon-color))}:where(.hub-datepicker__attached)>button,:where(.hub-datepicker__attached)>a,:where(.hub-datepicker__attached)>[role=button],:where(.hub-datepicker__attached)>[role=link],:where(.hub-datepicker__attached)>[tabindex]{background:var(--hub-datepicker-group-action-bg, var(--hub-input-group-action-bg));color:var(--hub-datepicker-group-action-color, var(--hub-input-group-action-color))}.hub-datepicker__group--has-prepend .hub-datepicker__control,.hub-datepicker__group--has-prepend .hub-field__control,.hub-datepicker__group--has-prepend .hub-datepicker__control.ng-select .ng-select-container{border-start-start-radius:var(--hub-datepicker-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-datepicker-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-datepicker__group--has-append .hub-datepicker__control,.hub-datepicker__group--has-append .hub-field__control,.hub-datepicker__group--has-append .hub-datepicker__control.ng-select .ng-select-container{border-start-end-radius:var(--hub-datepicker-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-datepicker-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-datepicker__group>.hub-datepicker__addon--prepend:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.hub-datepicker__group>.hub-datepicker__addon--append:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.hub-datepicker__group>.hub-datepicker__trigger{flex:1 1 auto;min-width:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HubDatepickerTimeFieldComponent, selector: "hub-datepicker-time", inputs: ["value", "label", "granularity", "locale", "hour12", "minuteStep", "secondStep", "min", "max", "labels"], outputs: ["valueChange"] }, { kind: "component", type: HubDatepickerPeriodGridComponent, selector: "hub-datepicker-period", inputs: ["granularity", "viewDate", "focusedDate", "selectionStart", "selectionEnd", "range", "locale", "min", "max", "labels"], outputs: ["pick", "focusMove", "dismiss"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubDatepickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hub-datepicker', imports: [NgTemplateOutlet, KeyValuePipe, OverlayModule, HubDatepickerTimeFieldComponent, HubDatepickerPeriodGridComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+            args: [{ selector: 'hub-datepicker', imports: [NgTemplateOutlet, KeyValuePipe, HubDatepickerTimeFieldComponent, HubDatepickerPeriodGridComponent], 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--readonly]=\"readonly()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n\t[class.hub-field--valid]=\"showsValid\"\n>\n\t@if (!showsFloatingLabel() && (label() || required())) {\n\t\t<label [for]=\"id\" class=\"hub-field__label\">\n\t\t\t{{ label() }}\n\t\t\t@if (required()) {\n\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t}\n\t\t</label>\n\t}\n\n\t<div class=\"hub-field__body\">\n\t\t<div\n\t\t\tclass=\"hub-datepicker__group\"\n\t\t\t[class.hub-datepicker__group--floating]=\"showsFloatingLabel()\"\n\t\t\t[class.hub-datepicker__group--raised]=\"showsFloatingLabel() && isLabelRaised()\"\n\t\t\t[class.hub-datepicker__group--has-prepend]=\"hasPrepend()\"\n\t\t\t[class.hub-datepicker__group--has-append]=\"hasAppend()\"\n\t\t>\n\t\t\t@if (_prependTpl(); as tpl) {\n\t\t\t\t<span class=\"hub-datepicker__attached hub-datepicker__attached--prepend\">\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t</span>\n\t\t\t}\n\t\t\t@for (addon of _prependAddons(); track $index) {\n\t\t\t\t<span class=\"hub-datepicker__addon hub-datepicker__addon--prepend\">{{ addon }}</span>\n\t\t\t}\n\t\t\t<div class=\"hub-datepicker__trigger\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\n\t\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]=\"showsFloatingLabel() && !isLabelRaised() ? '' : 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(focus)=\"setFocused(true)\"\n\t\t\t(blur)=\"setFocused(false); 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()\">\n\t\t\t\t&times;\n\t\t\t</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\t@if (showsFloatingLabel()) {\n\t\t\t<label [for]=\"id\" class=\"hub-field__label hub-datepicker__label--floating\">\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\t\t\t</div>\n\t\t\t@for (addon of _appendAddons(); track $index) {\n\t\t\t\t<span class=\"hub-datepicker__addon hub-datepicker__addon--append\">{{ addon }}</span>\n\t\t\t}\n\t\t\t@if (_appendTpl(); as tpl) {\n\t\t\t\t<span class=\"hub-datepicker__attached hub-datepicker__attached--append\">\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t</span>\n\t\t\t}\n\t\t</div>\n\t</div>\n\n\t@if (formText() || formTextTmp()) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tclass=\"hub-field__feedback-text\"\n\t\t\t\t\t\t\t\t[innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"\n\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n\n\t@if (showsValid && validFeedback()) {\n\t\t<div class=\"hub-field__feedback hub-field__feedback--valid\" role=\"status\">\n\t\t\t<span class=\"hub-field__feedback-text\">{{ validFeedback() }}</span>\n\t\t</div>\n\t}\n</div>\n\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]=\"_isPeriod() ? periodLabel() : monthYearLabel()\">\n\t\t@if (_isPeriod()) {\n\t\t\t<header class=\"hub-datepicker__header\">\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"hub-datepicker__nav\"\n\t\t\t\t\t[attr.aria-label]=\"_labels().previousYear\"\n\t\t\t\t\t(click)=\"shiftPeriod(-1)\"\n\t\t\t\t>\n\t\t\t\t\t\u2039\n\t\t\t\t</button>\n\t\t\t\t<span class=\"hub-datepicker__title\" aria-live=\"polite\">{{ periodLabel() }}</span>\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"hub-datepicker__nav\"\n\t\t\t\t\t[attr.aria-label]=\"_labels().nextYear\"\n\t\t\t\t\t(click)=\"shiftPeriod(1)\"\n\t\t\t\t>\n\t\t\t\t\t\u203A\n\t\t\t\t</button>\n\t\t\t</header>\n\n\t\t\t<hub-datepicker-period\n\t\t\t\t[granularity]=\"$any(_granularity())\"\n\t\t\t\t[viewDate]=\"_viewDate()\"\n\t\t\t\t[focusedDate]=\"_focusedDate()\"\n\t\t\t\t[selectionStart]=\"rangeStart()\"\n\t\t\t\t[selectionEnd]=\"rangeEnd()\"\n\t\t\t\t[range]=\"_isRange()\"\n\t\t\t\t[locale]=\"locale()\"\n\t\t\t\t[min]=\"_minDate()\"\n\t\t\t\t[max]=\"_maxDate()\"\n\t\t\t\t[labels]=\"_labels()\"\n\t\t\t\t(pick)=\"selectPeriod($event)\"\n\t\t\t\t(focusMove)=\"onPeriodFocusMove($event)\"\n\t\t\t\t(dismiss)=\"close()\"\n\t\t\t/>\n\t\t} @else {\n\t\t\t<header class=\"hub-datepicker__header\">\n\t\t\t\t<div class=\"hub-datepicker__nav-group\">\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclass=\"hub-datepicker__nav\"\n\t\t\t\t\t\t[attr.aria-label]=\"_labels().previousYear\"\n\t\t\t\t\t\t(click)=\"shiftMonth(-12)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t\u00AB\n\t\t\t\t\t</button>\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclass=\"hub-datepicker__nav\"\n\t\t\t\t\t\t[attr.aria-label]=\"_labels().previousMonth\"\n\t\t\t\t\t\t(click)=\"shiftMonth(-1)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t\u2039\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t\t<span class=\"hub-datepicker__title\" aria-live=\"polite\">{{ monthYearLabel() }}</span>\n\t\t\t\t<div class=\"hub-datepicker__nav-group\">\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclass=\"hub-datepicker__nav\"\n\t\t\t\t\t\t[attr.aria-label]=\"_labels().nextMonth\"\n\t\t\t\t\t\t(click)=\"shiftMonth(1)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t\u203A\n\t\t\t\t\t</button>\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclass=\"hub-datepicker__nav\"\n\t\t\t\t\t\t[attr.aria-label]=\"_labels().nextYear\"\n\t\t\t\t\t\t(click)=\"shiftMonth(12)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t\u00BB\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t</header>\n\n\t\t\t<div class=\"hub-datepicker__weekdays\" aria-hidden=\"true\">\n\t\t\t\t@for (wd of weekdays(); track $index) {\n\t\t\t\t\t<span class=\"hub-datepicker__weekday\">{{ wd }}</span>\n\t\t\t\t}\n\t\t\t</div>\n\n\t\t\t<div class=\"hub-datepicker__grid\" role=\"grid\" (keydown)=\"onGridKeydown($event)\" (mouseleave)=\"clearPreview()\">\n\t\t\t\t@for (cell of grid(); track cell.date.getTime()) {\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\trole=\"gridcell\"\n\t\t\t\t\t\tclass=\"hub-datepicker__cell\"\n\t\t\t\t\t\t[class.hub-datepicker__cell--outside]=\"!cell.currentMonth\"\n\t\t\t\t\t\t[class.hub-datepicker__cell--today]=\"cell.today\"\n\t\t\t\t\t\t[class.hub-datepicker__cell--selected]=\"cell.selected || cell.rangeStart || cell.rangeEnd\"\n\t\t\t\t\t\t[class.hub-datepicker__cell--range-start]=\"cell.rangeStart\"\n\t\t\t\t\t\t[class.hub-datepicker__cell--range-end]=\"cell.rangeEnd\"\n\t\t\t\t\t\t[class.hub-datepicker__cell--in-range]=\"cell.inRange\"\n\t\t\t\t\t\t[class.hub-datepicker__cell--preview]=\"cell.preview\"\n\t\t\t\t\t\t[class.hub-datepicker__cell--preview-end]=\"cell.previewEnd\"\n\t\t\t\t\t\t[attr.data-time]=\"cell.date.getTime()\"\n\t\t\t\t\t\t[attr.tabindex]=\"cell.focused ? 0 : -1\"\n\t\t\t\t\t\t[attr.aria-selected]=\"cell.selected || cell.rangeStart || cell.rangeEnd\"\n\t\t\t\t\t\t[disabled]=\"cell.disabled\"\n\t\t\t\t\t\t(click)=\"selectDay(cell)\"\n\t\t\t\t\t\t(mouseenter)=\"previewDay(cell)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{{ cell.day }}\n\t\t\t\t\t</button>\n\t\t\t\t}\n\t\t\t</div>\n\t\t}\n\n\t\t@if (_hasTime()) {\n\t\t\t<div class=\"hub-datepicker__times\">\n\t\t\t\t<hub-datepicker-time\n\t\t\t\t\t[value]=\"startTimeValue()\"\n\t\t\t\t\t(valueChange)=\"onStartTimeChange($event)\"\n\t\t\t\t\t[label]=\"_emitsRange() ? _labels().startTime : _labels().time\"\n\t\t\t\t\t[granularity]=\"_granularity()\"\n\t\t\t\t\t[locale]=\"locale()\"\n\t\t\t\t\t[hour12]=\"_hour12()\"\n\t\t\t\t\t[minuteStep]=\"_minuteStep()\"\n\t\t\t\t\t[secondStep]=\"_secondStep()\"\n\t\t\t\t\t[min]=\"_minDate()\"\n\t\t\t\t\t[max]=\"_maxDate()\"\n\t\t\t\t\t[labels]=\"_labels()\"\n\t\t\t\t/>\n\n\t\t\t\t@if (_emitsRange()) {\n\t\t\t\t\t<hub-datepicker-time\n\t\t\t\t\t\t[value]=\"endTimeValue()\"\n\t\t\t\t\t\t(valueChange)=\"onEndTimeChange($event)\"\n\t\t\t\t\t\t[label]=\"_labels().endTime\"\n\t\t\t\t\t\t[granularity]=\"_granularity()\"\n\t\t\t\t\t\t[locale]=\"locale()\"\n\t\t\t\t\t\t[hour12]=\"_hour12()\"\n\t\t\t\t\t\t[minuteStep]=\"_minuteStep()\"\n\t\t\t\t\t\t[secondStep]=\"_secondStep()\"\n\t\t\t\t\t\t[min]=\"_minDate()\"\n\t\t\t\t\t\t[max]=\"_maxDate()\"\n\t\t\t\t\t\t[labels]=\"_labels()\"\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t</div>\n\t\t}\n\n\t\t@if (showToday() || clearable() || _hasTime()) {\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\t@if (_hasTime()) {\n\t\t\t\t\t<button type=\"button\" class=\"hub-datepicker__action hub-datepicker__action--primary\" (click)=\"close()\">\n\t\t\t\t\t\t{{ _labels().done }}\n\t\t\t\t\t</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__group--floating .hub-field__control{padding-top:calc(var(--hub-input-padding-y) + var(--hub-field-floating-inset));padding-bottom:var(--hub-input-padding-y)}.hub-datepicker__group--floating .hub-datepicker__label--floating{font-size:var(--hub-input-font-size);position:absolute;top:0;inset-inline-start:0;display:flex;align-items:center;height:100%;padding:0 var(--hub-input-padding-x);margin:0;color:var(--hub-input-placeholder-color);font-weight:var(--hub-ref-font-weight-base, 400);pointer-events:none;transform-origin:0 0}[dir=rtl] .hub-datepicker__group--floating .hub-datepicker__label--floating{transform-origin:100% 0}.hub-datepicker__group--floating .hub-datepicker__label--floating{transition:opacity .1s ease-in-out,transform .1s ease-in-out}.hub-datepicker__group--raised .hub-datepicker__label--floating{transform:scale(var(--hub-field-floating-scale)) translateY(calc(-1 * var(--hub-field-floating-travel)));opacity:.9}.hub-datepicker__input{padding-inline-end:var(--hub-datepicker-icon-width);cursor:pointer}.hub-datepicker__input--clearable{padding-inline-end:calc(var(--hub-datepicker-icon-width) + 1.5rem)}.hub-datepicker__clear{position:absolute;top:0;inset-inline-end: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;inset-inline-end: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:none}.hub-datepicker__panel .hub-datepicker__title:first-letter{text-transform:uppercase}.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--preview,.hub-datepicker__panel .hub-datepicker__cell--preview-end,.hub-datepicker__panel .hub-datepicker__cell--preview:hover,.hub-datepicker__panel .hub-datepicker__cell--preview-end:hover{background:var(--hub-daterangepicker-preview-bg)}.hub-datepicker__panel .hub-datepicker__cell--preview{border-radius:0}.hub-datepicker__panel .hub-datepicker__cell--range-start{border-start-end-radius:0;border-end-end-radius:0}.hub-datepicker__panel .hub-datepicker__cell--range-end{border-start-start-radius:0;border-end-start-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__period-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.125rem;min-width:calc(var(--hub-daterangepicker-cell-size) * 7)}.hub-datepicker__panel .hub-datepicker__period-cell{display:inline-flex;align-items:center;justify-content:center;height:var(--hub-daterangepicker-cell-size);padding:0 .5rem;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);text-transform:capitalize;cursor:pointer}.hub-datepicker__panel .hub-datepicker__period-cell:hover{background:var(--hub-daterangepicker-cell-hover-bg)}.hub-datepicker__panel .hub-datepicker__period-cell--outside{color:var(--hub-daterangepicker-off-color)}.hub-datepicker__panel .hub-datepicker__period-cell--current{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__period-cell--in-range{background:var(--hub-daterangepicker-in-range-bg);border-radius:0}.hub-datepicker__panel .hub-datepicker__period-cell--range-start{border-start-end-radius:0;border-end-end-radius:0}.hub-datepicker__panel .hub-datepicker__period-cell--range-end{border-start-start-radius:0;border-end-start-radius:0}.hub-datepicker__panel .hub-datepicker__period-cell--selected,.hub-datepicker__panel .hub-datepicker__period-cell--selected:hover{color:var(--hub-daterangepicker-active-color);background:var(--hub-daterangepicker-active-bg)}.hub-datepicker__panel .hub-datepicker__period-cell:disabled{color:var(--hub-daterangepicker-off-color);background:transparent;cursor:not-allowed;opacity:.6}.hub-datepicker__panel .hub-datepicker__period-cell:focus-visible{outline:0;box-shadow:var(--hub-input-focus-box-shadow)}.hub-datepicker__panel .hub-datepicker__times{display:grid;gap:.25rem;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__time{display:flex;align-items:center;justify-content:space-between;gap:var(--hub-ref-space-2, .5rem)}.hub-datepicker__panel .hub-datepicker__time-label{font-size:var(--hub-ref-font-size-sm, .875rem);color:var(--hub-daterangepicker-off-color)}.hub-datepicker__panel .hub-datepicker__time-fields{display:inline-flex;align-items:center;gap:.125rem}.hub-datepicker__panel .hub-datepicker__time-field{width:2.25rem;padding:.2rem 0;color:var(--hub-daterangepicker-cell-color);font-family:inherit;font-size:var(--hub-input-font-size);text-align:center;background:transparent;border:var(--hub-input-border-width) solid transparent;border-radius:var(--hub-daterangepicker-cell-border-radius)}.hub-datepicker__panel .hub-datepicker__time-field:hover{background:var(--hub-daterangepicker-cell-hover-bg)}.hub-datepicker__panel .hub-datepicker__time-field:focus-visible{outline:0;border-color:var(--hub-daterangepicker-border-color);box-shadow:var(--hub-input-focus-box-shadow)}.hub-datepicker__panel .hub-datepicker__time-separator{color:var(--hub-daterangepicker-off-color)}.hub-datepicker__panel .hub-datepicker__time-meridiem{margin-inline-start:.25rem;padding:.2rem .4rem;color:var(--hub-daterangepicker-cell-color);font-family:inherit;font-size:var(--hub-ref-font-size-sm, .875rem);background:transparent;border:var(--hub-input-border-width) solid var(--hub-daterangepicker-border-color);border-radius:var(--hub-daterangepicker-cell-border-radius);cursor:pointer}.hub-datepicker__panel .hub-datepicker__time-meridiem:hover{background:var(--hub-daterangepicker-cell-hover-bg)}.hub-datepicker__panel .hub-datepicker__time-meridiem: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)}.hub-datepicker__panel .hub-datepicker__action--primary{color:var(--hub-daterangepicker-active-color);background:var(--hub-daterangepicker-active-bg)}.hub-datepicker__panel .hub-datepicker__action--primary:hover{background:var(--hub-daterangepicker-active-bg);filter:brightness(1.1)}.hub-datepicker__group{display:flex;align-items:stretch;min-width:0}.hub-datepicker__group>.hub-datepicker__control,.hub-datepicker__group>.hub-field__control{flex:1 1 auto;min-width:0}.hub-datepicker__addon{display:flex;align-items:center;flex:0 0 auto;padding:0 var(--hub-datepicker-padding-x, var(--hub-input-padding-x));color:var(--hub-datepicker-group-addon-color, var(--hub-input-group-addon-color));background:var(--hub-datepicker-group-addon-bg, var(--hub-input-group-addon-bg));border:var(--hub-datepicker-border-width, var(--hub-input-border-width)) solid var(--hub-datepicker-group-addon-border-color, var(--hub-input-group-addon-border-color));border-radius:var(--hub-datepicker-border-radius, var(--hub-input-border-radius));font-size:var(--hub-datepicker-font-size, var(--hub-input-font-size));white-space:nowrap}.hub-datepicker__addon--prepend{border-inline-end:0;border-start-end-radius:0;border-end-end-radius:0}.hub-datepicker__addon--append{border-inline-start:0;border-start-start-radius:0;border-end-start-radius:0}.hub-datepicker__attached.hub-datepicker__attached{display:flex;align-items:stretch;flex:0 0 auto;gap:var(--hub-datepicker-group-attached-gap, var(--hub-input-group-attached-gap));position:relative}.hub-datepicker__attached.hub-datepicker__attached>*{padding-block:0;padding-inline:var(--hub-datepicker-padding-x, var(--hub-input-padding-x));height:auto;align-self:stretch;display:flex;align-items:center;justify-content:center;min-height:var(--hub-datepicker-min-height, auto);border:var(--hub-datepicker-group-attached-border-width, var(--hub-input-group-attached-border-width)) solid var(--hub-datepicker-group-attached-border-color, var(--hub-input-group-attached-border-color));border-radius:var(--hub-datepicker-border-radius, var(--hub-input-border-radius));margin-inline:calc(-1 * var(--hub-datepicker-group-attached-border-width, var(--hub-input-group-attached-border-width))) 0;position:relative}.hub-datepicker__attached.hub-datepicker__attached>*:hover,.hub-datepicker__attached.hub-datepicker__attached>*:focus-visible{z-index:1}.hub-datepicker__attached.hub-datepicker__attached--prepend>*{border-start-end-radius:var(--hub-datepicker-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-datepicker-group-attached-radius, var(--hub-input-group-attached-radius));margin-inline:0 calc(-1 * var(--hub-datepicker-group-attached-border-width, var(--hub-input-group-attached-border-width)))}.hub-datepicker__attached.hub-datepicker__attached--append>*{border-start-start-radius:var(--hub-datepicker-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-datepicker-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-datepicker__attached.hub-datepicker__attached--prepend>*:not(:first-child){border-start-start-radius:var(--hub-datepicker-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-datepicker-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-datepicker__attached.hub-datepicker__attached--append>*:not(:last-child){border-start-end-radius:var(--hub-datepicker-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-datepicker-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-datepicker__attached.hub-datepicker__attached>hub-input,.hub-datepicker__attached.hub-datepicker__attached>hub-select,.hub-datepicker__attached.hub-datepicker__attached>hub-textarea,.hub-datepicker__attached.hub-datepicker__attached>hub-datepicker{padding-inline:0;border:0;border-radius:0}.hub-datepicker__attached.hub-datepicker__attached--prepend>hub-input .hub-field__control,.hub-datepicker__attached.hub-datepicker__attached--prepend>hub-select .ng-select-container,.hub-datepicker__attached.hub-datepicker__attached--prepend>hub-textarea .hub-field__control,.hub-datepicker__attached.hub-datepicker__attached--prepend>hub-datepicker .hub-field__control{border-start-end-radius:0;border-end-end-radius:0}.hub-datepicker__attached.hub-datepicker__attached--append>hub-input .hub-field__control,.hub-datepicker__attached.hub-datepicker__attached--append>hub-select .ng-select-container,.hub-datepicker__attached.hub-datepicker__attached--append>hub-textarea .hub-field__control,.hub-datepicker__attached.hub-datepicker__attached--append>hub-datepicker .hub-field__control{border-start-start-radius:0;border-end-start-radius:0}:where(.hub-datepicker__attached)>*:not(button):not(a):not(input):not(select):not(textarea):not([role=button]):not([role=link]):not([tabindex]){background:var(--hub-datepicker-group-addon-bg, var(--hub-input-group-addon-bg));color:var(--hub-datepicker-group-addon-color, var(--hub-input-group-addon-color))}:where(.hub-datepicker__attached)>button,:where(.hub-datepicker__attached)>a,:where(.hub-datepicker__attached)>[role=button],:where(.hub-datepicker__attached)>[role=link],:where(.hub-datepicker__attached)>[tabindex]{background:var(--hub-datepicker-group-action-bg, var(--hub-input-group-action-bg));color:var(--hub-datepicker-group-action-color, var(--hub-input-group-action-color))}.hub-datepicker__group--has-prepend .hub-datepicker__control,.hub-datepicker__group--has-prepend .hub-field__control,.hub-datepicker__group--has-prepend .hub-datepicker__control.ng-select .ng-select-container{border-start-start-radius:var(--hub-datepicker-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-datepicker-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-datepicker__group--has-append .hub-datepicker__control,.hub-datepicker__group--has-append .hub-field__control,.hub-datepicker__group--has-append .hub-datepicker__control.ng-select .ng-select-container{border-start-end-radius:var(--hub-datepicker-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-datepicker-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-datepicker__group>.hub-datepicker__addon--prepend:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.hub-datepicker__group>.hub-datepicker__addon--append:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.hub-datepicker__group>.hub-datepicker__trigger{flex:1 1 auto;min-width:0}\n"] }]
-        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], granularity: [{ type: i0.Input, args: [{ isSignal: true, alias: "granularity", required: false }] }], valueFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormat", required: false }] }], parse: [{ type: i0.Input, args: [{ isSignal: true, alias: "parse", 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 }] }], timeDisplayFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeDisplayFormat", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], secondStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondStep", required: false }] }], hourFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourFormat", 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 }] }], prepend: [{ type: i0.Input, args: [{ isSignal: true, alias: "prepend", required: false }] }], append: [{ type: i0.Input, args: [{ isSignal: true, alias: "append", required: false }] }], _prependTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubPrependDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _appendTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubAppendDirective), { ...{ read: TemplateRef }, isSignal: true }] }], 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"] }] } });
+                    }, 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--readonly]=\"readonly()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n\t[class.hub-field--valid]=\"showsValid\"\n>\n\t@if (!showsFloatingLabel() && (label() || required())) {\n\t\t<label [for]=\"id\" class=\"hub-field__label\">\n\t\t\t{{ label() }}\n\t\t\t@if (required()) {\n\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t}\n\t\t</label>\n\t}\n\n\t<div class=\"hub-field__body\">\n\t\t<div\n\t\t\tclass=\"hub-datepicker__group\"\n\t\t\t[class.hub-datepicker__group--floating]=\"showsFloatingLabel()\"\n\t\t\t[class.hub-datepicker__group--raised]=\"showsFloatingLabel() && isLabelRaised()\"\n\t\t\t[class.hub-datepicker__group--has-prepend]=\"hasPrepend()\"\n\t\t\t[class.hub-datepicker__group--has-append]=\"hasAppend()\"\n\t\t>\n\t\t\t@if (_prependTpl(); as tpl) {\n\t\t\t\t<span class=\"hub-datepicker__attached hub-datepicker__attached--prepend\">\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t</span>\n\t\t\t}\n\t\t\t@for (addon of _prependAddons(); track $index) {\n\t\t\t\t<span class=\"hub-datepicker__addon hub-datepicker__addon--prepend\">{{ addon }}</span>\n\t\t\t}\n\t\t\t<div class=\"hub-datepicker__trigger\" #trigger>\n\t\t\t\t<input\n\t\t\t\t\tclass=\"hub-field__control hub-datepicker__input\"\n\t\t\t\t\t[class.hub-field__control--invalid]=\"isInvalid\"\n\t\t\t\t\t[class.hub-field__control--valid]=\"showsValid\"\n\t\t\t\t\t[class.hub-datepicker__input--clearable]=\"clearable() && displayValue()\"\n\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\treadonly\n\t\t\t\t\t[value]=\"displayValue()\"\n\t\t\t\t\t[placeholder]=\"showsFloatingLabel() && !isLabelRaised() ? '' : placeholder()\"\n\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t\t[attr.aria-invalid]=\"isInvalid\"\n\t\t\t\t\t[attr.aria-expanded]=\"_open()\"\n\t\t\t\t\taria-haspopup=\"dialog\"\n\t\t\t\t\t(click)=\"toggleCalendar()\"\n\t\t\t\t\t(focus)=\"setFocused(true)\"\n\t\t\t\t\t(blur)=\"setFocused(false); handleBlur($event)\"\n\t\t\t\t/>\n\t\t\t\t@if (clearable() && displayValue() && !disabled() && !readonly()) {\n\t\t\t\t\t<button type=\"button\" class=\"hub-datepicker__clear\" [attr.aria-label]=\"_labels().clear\" (click)=\"clear()\">\n\t\t\t\t\t\t&times;\n\t\t\t\t\t</button>\n\t\t\t\t}\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"hub-datepicker__icon\"\n\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t[attr.aria-label]=\"_labels().openCalendar\"\n\t\t\t\t\t[disabled]=\"disabled() || readonly()\"\n\t\t\t\t\t(click)=\"toggleCalendar()\"\n\t\t\t\t></button>\n\t\t\t\t@if (showsFloatingLabel()) {\n\t\t\t\t\t<label [for]=\"id\" class=\"hub-field__label hub-datepicker__label--floating\">\n\t\t\t\t\t\t{{ label() }}\n\t\t\t\t\t\t@if (required()) {\n\t\t\t\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t\t\t\t}\n\t\t\t\t\t</label>\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t@for (addon of _appendAddons(); track $index) {\n\t\t\t\t<span class=\"hub-datepicker__addon hub-datepicker__addon--append\">{{ addon }}</span>\n\t\t\t}\n\t\t\t@if (_appendTpl(); as tpl) {\n\t\t\t\t<span class=\"hub-datepicker__attached hub-datepicker__attached--append\">\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t</span>\n\t\t\t}\n\t\t</div>\n\t</div>\n\n\t@if (formText() || formTextTmp()) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tclass=\"hub-field__feedback-text\"\n\t\t\t\t\t\t\t\t[innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"\n\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n\n\t@if (showsValid && validFeedback()) {\n\t\t<div class=\"hub-field__feedback hub-field__feedback--valid\" role=\"status\">\n\t\t\t<span class=\"hub-field__feedback-text\">{{ validFeedback() }}</span>\n\t\t</div>\n\t}\n</div>\n\n<ng-template #panel>\n\t<div class=\"hub-datepicker__panel\" role=\"dialog\" [attr.aria-label]=\"_isPeriod() ? periodLabel() : monthYearLabel()\">\n\t\t@if (_isPeriod()) {\n\t\t\t<header class=\"hub-datepicker__header\">\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"hub-datepicker__nav\"\n\t\t\t\t\t[attr.aria-label]=\"_labels().previousYear\"\n\t\t\t\t\t(click)=\"shiftPeriod(-1)\"\n\t\t\t\t>\n\t\t\t\t\t\u2039\n\t\t\t\t</button>\n\t\t\t\t<span class=\"hub-datepicker__title\" aria-live=\"polite\">{{ periodLabel() }}</span>\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"hub-datepicker__nav\"\n\t\t\t\t\t[attr.aria-label]=\"_labels().nextYear\"\n\t\t\t\t\t(click)=\"shiftPeriod(1)\"\n\t\t\t\t>\n\t\t\t\t\t\u203A\n\t\t\t\t</button>\n\t\t\t</header>\n\n\t\t\t<hub-datepicker-period\n\t\t\t\t[granularity]=\"$any(_granularity())\"\n\t\t\t\t[viewDate]=\"_viewDate()\"\n\t\t\t\t[focusedDate]=\"_focusedDate()\"\n\t\t\t\t[selectionStart]=\"rangeStart()\"\n\t\t\t\t[selectionEnd]=\"rangeEnd()\"\n\t\t\t\t[range]=\"_isRange()\"\n\t\t\t\t[locale]=\"locale()\"\n\t\t\t\t[min]=\"_minDate()\"\n\t\t\t\t[max]=\"_maxDate()\"\n\t\t\t\t[labels]=\"_labels()\"\n\t\t\t\t(pick)=\"selectPeriod($event)\"\n\t\t\t\t(focusMove)=\"onPeriodFocusMove($event)\"\n\t\t\t\t(dismiss)=\"close()\"\n\t\t\t/>\n\t\t} @else {\n\t\t\t<header class=\"hub-datepicker__header\">\n\t\t\t\t<div class=\"hub-datepicker__nav-group\">\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclass=\"hub-datepicker__nav\"\n\t\t\t\t\t\t[attr.aria-label]=\"_labels().previousYear\"\n\t\t\t\t\t\t(click)=\"shiftMonth(-12)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t\u00AB\n\t\t\t\t\t</button>\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclass=\"hub-datepicker__nav\"\n\t\t\t\t\t\t[attr.aria-label]=\"_labels().previousMonth\"\n\t\t\t\t\t\t(click)=\"shiftMonth(-1)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t\u2039\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t\t<span class=\"hub-datepicker__title\" aria-live=\"polite\">{{ monthYearLabel() }}</span>\n\t\t\t\t<div class=\"hub-datepicker__nav-group\">\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclass=\"hub-datepicker__nav\"\n\t\t\t\t\t\t[attr.aria-label]=\"_labels().nextMonth\"\n\t\t\t\t\t\t(click)=\"shiftMonth(1)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t\u203A\n\t\t\t\t\t</button>\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclass=\"hub-datepicker__nav\"\n\t\t\t\t\t\t[attr.aria-label]=\"_labels().nextYear\"\n\t\t\t\t\t\t(click)=\"shiftMonth(12)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t\u00BB\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t</header>\n\n\t\t\t<div class=\"hub-datepicker__weekdays\" aria-hidden=\"true\">\n\t\t\t\t@for (wd of weekdays(); track $index) {\n\t\t\t\t\t<span class=\"hub-datepicker__weekday\">{{ wd }}</span>\n\t\t\t\t}\n\t\t\t</div>\n\n\t\t\t<div class=\"hub-datepicker__grid\" role=\"grid\" (keydown)=\"onGridKeydown($event)\" (mouseleave)=\"clearPreview()\">\n\t\t\t\t@for (cell of grid(); track cell.date.getTime()) {\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\trole=\"gridcell\"\n\t\t\t\t\t\tclass=\"hub-datepicker__cell\"\n\t\t\t\t\t\t[class.hub-datepicker__cell--outside]=\"!cell.currentMonth\"\n\t\t\t\t\t\t[class.hub-datepicker__cell--today]=\"cell.today\"\n\t\t\t\t\t\t[class.hub-datepicker__cell--selected]=\"cell.selected || cell.rangeStart || cell.rangeEnd\"\n\t\t\t\t\t\t[class.hub-datepicker__cell--range-start]=\"cell.rangeStart\"\n\t\t\t\t\t\t[class.hub-datepicker__cell--range-end]=\"cell.rangeEnd\"\n\t\t\t\t\t\t[class.hub-datepicker__cell--in-range]=\"cell.inRange\"\n\t\t\t\t\t\t[class.hub-datepicker__cell--preview]=\"cell.preview\"\n\t\t\t\t\t\t[class.hub-datepicker__cell--preview-end]=\"cell.previewEnd\"\n\t\t\t\t\t\t[attr.data-time]=\"cell.date.getTime()\"\n\t\t\t\t\t\t[attr.tabindex]=\"cell.focused ? 0 : -1\"\n\t\t\t\t\t\t[attr.aria-selected]=\"cell.selected || cell.rangeStart || cell.rangeEnd\"\n\t\t\t\t\t\t[disabled]=\"cell.disabled\"\n\t\t\t\t\t\t(click)=\"selectDay(cell)\"\n\t\t\t\t\t\t(mouseenter)=\"previewDay(cell)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{{ cell.day }}\n\t\t\t\t\t</button>\n\t\t\t\t}\n\t\t\t</div>\n\t\t}\n\n\t\t@if (_hasTime()) {\n\t\t\t<div class=\"hub-datepicker__times\">\n\t\t\t\t<hub-datepicker-time\n\t\t\t\t\t[value]=\"startTimeValue()\"\n\t\t\t\t\t(valueChange)=\"onStartTimeChange($event)\"\n\t\t\t\t\t[label]=\"_emitsRange() ? _labels().startTime : _labels().time\"\n\t\t\t\t\t[granularity]=\"_granularity()\"\n\t\t\t\t\t[locale]=\"locale()\"\n\t\t\t\t\t[hour12]=\"_hour12()\"\n\t\t\t\t\t[minuteStep]=\"_minuteStep()\"\n\t\t\t\t\t[secondStep]=\"_secondStep()\"\n\t\t\t\t\t[min]=\"_minDate()\"\n\t\t\t\t\t[max]=\"_maxDate()\"\n\t\t\t\t\t[labels]=\"_labels()\"\n\t\t\t\t/>\n\n\t\t\t\t@if (_emitsRange()) {\n\t\t\t\t\t<hub-datepicker-time\n\t\t\t\t\t\t[value]=\"endTimeValue()\"\n\t\t\t\t\t\t(valueChange)=\"onEndTimeChange($event)\"\n\t\t\t\t\t\t[label]=\"_labels().endTime\"\n\t\t\t\t\t\t[granularity]=\"_granularity()\"\n\t\t\t\t\t\t[locale]=\"locale()\"\n\t\t\t\t\t\t[hour12]=\"_hour12()\"\n\t\t\t\t\t\t[minuteStep]=\"_minuteStep()\"\n\t\t\t\t\t\t[secondStep]=\"_secondStep()\"\n\t\t\t\t\t\t[min]=\"_minDate()\"\n\t\t\t\t\t\t[max]=\"_maxDate()\"\n\t\t\t\t\t\t[labels]=\"_labels()\"\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t</div>\n\t\t}\n\n\t\t@if (showToday() || clearable() || _hasTime()) {\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\t@if (_hasTime()) {\n\t\t\t\t\t<button type=\"button\" class=\"hub-datepicker__action hub-datepicker__action--primary\" (click)=\"close()\">\n\t\t\t\t\t\t{{ _labels().done }}\n\t\t\t\t\t</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__group--floating .hub-field__control{padding-top:calc(var(--hub-input-padding-y) + var(--hub-field-floating-inset));padding-bottom:var(--hub-input-padding-y)}.hub-datepicker__group--floating .hub-datepicker__label--floating{font-size:var(--hub-input-font-size);position:absolute;top:0;inset-inline-start:0;display:flex;align-items:center;height:100%;padding:0 var(--hub-input-padding-x);margin:0;color:var(--hub-input-placeholder-color);font-weight:var(--hub-ref-font-weight-base, 400);pointer-events:none;transform-origin:0 0}[dir=rtl] .hub-datepicker__group--floating .hub-datepicker__label--floating{transform-origin:100% 0}.hub-datepicker__group--floating .hub-datepicker__label--floating{transition:opacity .1s ease-in-out,transform .1s ease-in-out}.hub-datepicker__group--raised .hub-datepicker__label--floating{transform:scale(var(--hub-field-floating-scale)) translateY(calc(-1 * var(--hub-field-floating-travel)));opacity:.9}.hub-datepicker__input{padding-inline-end:var(--hub-datepicker-icon-width);cursor:pointer}.hub-datepicker__input--clearable{padding-inline-end:calc(var(--hub-datepicker-icon-width) + 1.5rem)}.hub-datepicker__clear{position:absolute;top:0;inset-inline-end: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;inset-inline-end: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__overlay{background:none;border-radius:0;box-shadow:none}.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:none}.hub-datepicker__panel .hub-datepicker__title:first-letter{text-transform:uppercase}.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--preview,.hub-datepicker__panel .hub-datepicker__cell--preview-end,.hub-datepicker__panel .hub-datepicker__cell--preview:hover,.hub-datepicker__panel .hub-datepicker__cell--preview-end:hover{background:var(--hub-daterangepicker-preview-bg)}.hub-datepicker__panel .hub-datepicker__cell--preview{border-radius:0}.hub-datepicker__panel .hub-datepicker__cell--range-start{border-start-end-radius:0;border-end-end-radius:0}.hub-datepicker__panel .hub-datepicker__cell--range-end{border-start-start-radius:0;border-end-start-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__period-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.125rem;min-width:calc(var(--hub-daterangepicker-cell-size) * 7)}.hub-datepicker__panel .hub-datepicker__period-cell{display:inline-flex;align-items:center;justify-content:center;height:var(--hub-daterangepicker-cell-size);padding:0 .5rem;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);text-transform:capitalize;cursor:pointer}.hub-datepicker__panel .hub-datepicker__period-cell:hover{background:var(--hub-daterangepicker-cell-hover-bg)}.hub-datepicker__panel .hub-datepicker__period-cell--outside{color:var(--hub-daterangepicker-off-color)}.hub-datepicker__panel .hub-datepicker__period-cell--current{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__period-cell--in-range{background:var(--hub-daterangepicker-in-range-bg);border-radius:0}.hub-datepicker__panel .hub-datepicker__period-cell--range-start{border-start-end-radius:0;border-end-end-radius:0}.hub-datepicker__panel .hub-datepicker__period-cell--range-end{border-start-start-radius:0;border-end-start-radius:0}.hub-datepicker__panel .hub-datepicker__period-cell--selected,.hub-datepicker__panel .hub-datepicker__period-cell--selected:hover{color:var(--hub-daterangepicker-active-color);background:var(--hub-daterangepicker-active-bg)}.hub-datepicker__panel .hub-datepicker__period-cell:disabled{color:var(--hub-daterangepicker-off-color);background:transparent;cursor:not-allowed;opacity:.6}.hub-datepicker__panel .hub-datepicker__period-cell:focus-visible{outline:0;box-shadow:var(--hub-input-focus-box-shadow)}.hub-datepicker__panel .hub-datepicker__times{display:grid;gap:.25rem;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__time{display:flex;align-items:center;justify-content:space-between;gap:var(--hub-ref-space-2, .5rem)}.hub-datepicker__panel .hub-datepicker__time-label{font-size:var(--hub-ref-font-size-sm, .875rem);color:var(--hub-daterangepicker-off-color)}.hub-datepicker__panel .hub-datepicker__time-fields{display:inline-flex;align-items:center;gap:.125rem}.hub-datepicker__panel .hub-datepicker__time-field{width:2.25rem;padding:.2rem 0;color:var(--hub-daterangepicker-cell-color);font-family:inherit;font-size:var(--hub-input-font-size);text-align:center;background:transparent;border:var(--hub-input-border-width) solid transparent;border-radius:var(--hub-daterangepicker-cell-border-radius)}.hub-datepicker__panel .hub-datepicker__time-field:hover{background:var(--hub-daterangepicker-cell-hover-bg)}.hub-datepicker__panel .hub-datepicker__time-field:focus-visible{outline:0;border-color:var(--hub-daterangepicker-border-color);box-shadow:var(--hub-input-focus-box-shadow)}.hub-datepicker__panel .hub-datepicker__time-separator{color:var(--hub-daterangepicker-off-color)}.hub-datepicker__panel .hub-datepicker__time-meridiem{margin-inline-start:.25rem;padding:.2rem .4rem;color:var(--hub-daterangepicker-cell-color);font-family:inherit;font-size:var(--hub-ref-font-size-sm, .875rem);background:transparent;border:var(--hub-input-border-width) solid var(--hub-daterangepicker-border-color);border-radius:var(--hub-daterangepicker-cell-border-radius);cursor:pointer}.hub-datepicker__panel .hub-datepicker__time-meridiem:hover{background:var(--hub-daterangepicker-cell-hover-bg)}.hub-datepicker__panel .hub-datepicker__time-meridiem: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)}.hub-datepicker__panel .hub-datepicker__action--primary{color:var(--hub-daterangepicker-active-color);background:var(--hub-daterangepicker-active-bg)}.hub-datepicker__panel .hub-datepicker__action--primary:hover{background:var(--hub-daterangepicker-active-bg);filter:brightness(1.1)}.hub-datepicker__group{display:flex;align-items:stretch;min-width:0}.hub-datepicker__group>.hub-datepicker__control,.hub-datepicker__group>.hub-field__control{flex:1 1 auto;min-width:0}.hub-datepicker__addon{display:flex;align-items:center;flex:0 0 auto;padding:0 var(--hub-datepicker-padding-x, var(--hub-input-padding-x));color:var(--hub-datepicker-group-addon-color, var(--hub-input-group-addon-color));background:var(--hub-datepicker-group-addon-bg, var(--hub-input-group-addon-bg));border:var(--hub-datepicker-border-width, var(--hub-input-border-width)) solid var(--hub-datepicker-group-addon-border-color, var(--hub-input-group-addon-border-color));border-radius:var(--hub-datepicker-border-radius, var(--hub-input-border-radius));font-size:var(--hub-datepicker-font-size, var(--hub-input-font-size));white-space:nowrap}.hub-datepicker__addon--prepend{border-inline-end:0;border-start-end-radius:0;border-end-end-radius:0}.hub-datepicker__addon--append{border-inline-start:0;border-start-start-radius:0;border-end-start-radius:0}.hub-datepicker__attached.hub-datepicker__attached{display:flex;align-items:stretch;flex:0 0 auto;gap:var(--hub-datepicker-group-attached-gap, var(--hub-input-group-attached-gap));position:relative}.hub-datepicker__attached.hub-datepicker__attached>*{padding-block:0;padding-inline:var(--hub-datepicker-padding-x, var(--hub-input-padding-x));height:auto;align-self:stretch;display:flex;align-items:center;justify-content:center;min-height:var(--hub-datepicker-min-height, auto);border:var(--hub-datepicker-group-attached-border-width, var(--hub-input-group-attached-border-width)) solid var(--hub-datepicker-group-attached-border-color, var(--hub-input-group-attached-border-color));border-radius:var(--hub-datepicker-border-radius, var(--hub-input-border-radius));margin-inline:calc(-1 * var(--hub-datepicker-group-attached-border-width, var(--hub-input-group-attached-border-width))) 0;position:relative}.hub-datepicker__attached.hub-datepicker__attached>*:hover,.hub-datepicker__attached.hub-datepicker__attached>*:focus-visible{z-index:1}.hub-datepicker__attached.hub-datepicker__attached--prepend>*{border-start-end-radius:var(--hub-datepicker-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-datepicker-group-attached-radius, var(--hub-input-group-attached-radius));margin-inline:0 calc(-1 * var(--hub-datepicker-group-attached-border-width, var(--hub-input-group-attached-border-width)))}.hub-datepicker__attached.hub-datepicker__attached--append>*{border-start-start-radius:var(--hub-datepicker-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-datepicker-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-datepicker__attached.hub-datepicker__attached--prepend>*:not(:first-child){border-start-start-radius:var(--hub-datepicker-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-datepicker-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-datepicker__attached.hub-datepicker__attached--append>*:not(:last-child){border-start-end-radius:var(--hub-datepicker-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-datepicker-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-datepicker__attached.hub-datepicker__attached>hub-input,.hub-datepicker__attached.hub-datepicker__attached>hub-select,.hub-datepicker__attached.hub-datepicker__attached>hub-textarea,.hub-datepicker__attached.hub-datepicker__attached>hub-datepicker{padding-inline:0;border:0;border-radius:0}.hub-datepicker__attached.hub-datepicker__attached--prepend>hub-input .hub-field__control,.hub-datepicker__attached.hub-datepicker__attached--prepend>hub-select .ng-select-container,.hub-datepicker__attached.hub-datepicker__attached--prepend>hub-textarea .hub-field__control,.hub-datepicker__attached.hub-datepicker__attached--prepend>hub-datepicker .hub-field__control{border-start-end-radius:0;border-end-end-radius:0}.hub-datepicker__attached.hub-datepicker__attached--append>hub-input .hub-field__control,.hub-datepicker__attached.hub-datepicker__attached--append>hub-select .ng-select-container,.hub-datepicker__attached.hub-datepicker__attached--append>hub-textarea .hub-field__control,.hub-datepicker__attached.hub-datepicker__attached--append>hub-datepicker .hub-field__control{border-start-start-radius:0;border-end-start-radius:0}:where(.hub-datepicker__attached)>*:not(button):not(a):not(input):not(select):not(textarea):not([role=button]):not([role=link]):not([tabindex]){background:var(--hub-datepicker-group-addon-bg, var(--hub-input-group-addon-bg));color:var(--hub-datepicker-group-addon-color, var(--hub-input-group-addon-color))}:where(.hub-datepicker__attached)>button,:where(.hub-datepicker__attached)>a,:where(.hub-datepicker__attached)>[role=button],:where(.hub-datepicker__attached)>[role=link],:where(.hub-datepicker__attached)>[tabindex]{background:var(--hub-datepicker-group-action-bg, var(--hub-input-group-action-bg));color:var(--hub-datepicker-group-action-color, var(--hub-input-group-action-color))}.hub-datepicker__group--has-prepend .hub-datepicker__control,.hub-datepicker__group--has-prepend .hub-field__control,.hub-datepicker__group--has-prepend .hub-datepicker__control.ng-select .ng-select-container{border-start-start-radius:var(--hub-datepicker-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-datepicker-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-datepicker__group--has-append .hub-datepicker__control,.hub-datepicker__group--has-append .hub-field__control,.hub-datepicker__group--has-append .hub-datepicker__control.ng-select .ng-select-container{border-start-end-radius:var(--hub-datepicker-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-datepicker-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-datepicker__group>.hub-datepicker__addon--prepend:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.hub-datepicker__group>.hub-datepicker__addon--append:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.hub-datepicker__group>.hub-datepicker__trigger{flex:1 1 auto;min-width:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { _trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], _panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], granularity: [{ type: i0.Input, args: [{ isSignal: true, alias: "granularity", required: false }] }], valueFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormat", required: false }] }], parse: [{ type: i0.Input, args: [{ isSignal: true, alias: "parse", 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 }] }], timeDisplayFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeDisplayFormat", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], secondStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondStep", required: false }] }], hourFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourFormat", 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 }] }], prepend: [{ type: i0.Input, args: [{ isSignal: true, alias: "prepend", required: false }] }], append: [{ type: i0.Input, args: [{ isSignal: true, alias: "append", required: false }] }], _prependTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubPrependDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _appendTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubAppendDirective), { ...{ read: TemplateRef }, isSignal: true }] }], 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"] }] } });
 /**
  * Time field (`hub-timepicker`): a time of day, as `HH:MM`.
@@ -8262,10 +8323,7 @@ class HubTimepickerComponent extends HubFieldControl {
 				/>
 				@if (formText()) {
-					<div
-						class="hub-field__form-text"
-						[class.hub-field__form-text--disabled]="disabled()"
-					>
+					<div class="hub-field__form-text" [class.hub-field__form-text--disabled]="disabled()">
 						{{ formText() }}
 					</div>
 				}
@@ -8335,10 +8393,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
 				/>
 				@if (formText()) {
-					<div
-						class="hub-field__form-text"
-						[class.hub-field__form-text--disabled]="disabled()"
-					>
+					<div class="hub-field__form-text" [class.hub-field__form-text--disabled]="disabled()">
 						{{ formText() }}
 					</div>
 				}