ng-hub-ui-forms 22.27.0 → 22.28.0

package/README.md

@@ -559,6 +559,14 @@ hub-input {
 
 **`hub-select` inside a modal** — the dropdown panel stacks through `--hub-select-dropdown-zindex` (default `calc(var(--hub-sys-zindex-modal, 1055) + 5)`; the previous `--hub-select-dropdown-z-index` spelling is deprecated but still honoured), so a select opened inside a `HubModal` renders above the dialog instead of being clipped underneath it.
 
+**`hub-datepicker` inside a modal** — the same guarantee, through `--hub-datepicker-overlay-zindex` (default `calc(var(--hub-sys-zindex-modal, 1055) + 5)`): a calendar opened inside a `HubModal` is drawn over the dialog, and its backdrop one layer under the calendar but still over the dialog, so clicking outside closes it. One token moves both:
+
+```css
+:root {
+	--hub-datepicker-overlay-zindex: 2000;
+}
+```
+
 **`hub-segmented` variants & theming** — the `color` input tints the selected segment from the semantic families (`<hub-segmented color="primary">`); any of the `--hub-segmented-*` slots can be set directly, or in one call with the SCSS mixin:
 
 ```scss

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

@@ -8216,14 +8216,14 @@ class HubDatepickerComponent extends HubFieldControl {
         this.valueChange.emit(value);
     }
     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,.hub-datepicker__attached.hub-datepicker__attached>hub-timepicker{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,.hub-datepicker__attached.hub-datepicker__attached--prepend>hub-timepicker .hub-field__control{border-start-end-radius:0;border-end-end-radius:0}.hub-datepicker__attached.hub-datepicker__attached--prepend>hub-input:first-child .hub-field__control,.hub-datepicker__attached.hub-datepicker__attached--prepend>hub-textarea:first-child .hub-field__control,.hub-datepicker__attached.hub-datepicker__attached--prepend>hub-datepicker:first-child .hub-field__control,.hub-datepicker__attached.hub-datepicker__attached--prepend>hub-timepicker:first-child .hub-field__control{border-start-start-radius:var(--hub-input-border-radius);border-end-start-radius:var(--hub-input-border-radius)}.hub-datepicker__attached.hub-datepicker__attached--prepend>hub-select:first-child .ng-select-container{border-start-start-radius:var(--hub-select-border-radius);border-end-start-radius:var(--hub-select-border-radius)}.hub-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,.hub-datepicker__attached.hub-datepicker__attached--append>hub-timepicker .hub-field__control{border-start-start-radius:0;border-end-start-radius:0}.hub-datepicker__attached.hub-datepicker__attached--append>hub-input:last-child .hub-field__control,.hub-datepicker__attached.hub-datepicker__attached--append>hub-textarea:last-child .hub-field__control,.hub-datepicker__attached.hub-datepicker__attached--append>hub-datepicker:last-child .hub-field__control,.hub-datepicker__attached.hub-datepicker__attached--append>hub-timepicker:last-child .hub-field__control{border-start-end-radius:var(--hub-input-border-radius);border-end-end-radius:var(--hub-input-border-radius)}.hub-datepicker__attached.hub-datepicker__attached--append>hub-select:last-child .ng-select-container{border-start-end-radius:var(--hub-select-border-radius);border-end-end-radius:var(--hub-select-border-radius)}:where(.hub-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 });
+    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-overlay-container.hub-datepicker__overlay{--hub-overlay-zindex: var(--hub-datepicker-overlay-zindex, calc(var(--hub-sys-zindex-modal, 1055) + 5))}.hub-overlay-backdrop.hub-datepicker__backdrop{--hub-overlay-backdrop-zindex: calc(var(--hub-datepicker-overlay-zindex, calc(var(--hub-sys-zindex-modal, 1055) + 5)) - 1)}.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,.hub-datepicker__attached.hub-datepicker__attached>hub-timepicker{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,.hub-datepicker__attached.hub-datepicker__attached--prepend>hub-timepicker .hub-field__control{border-start-end-radius:0;border-end-end-radius:0}.hub-datepicker__attached.hub-datepicker__attached--prepend>hub-input:first-child .hub-field__control,.hub-datepicker__attached.hub-datepicker__attached--prepend>hub-textarea:first-child .hub-field__control,.hub-datepicker__attached.hub-datepicker__attached--prepend>hub-datepicker:first-child .hub-field__control,.hub-datepicker__attached.hub-datepicker__attached--prepend>hub-timepicker:first-child .hub-field__control{border-start-start-radius:var(--hub-input-border-radius);border-end-start-radius:var(--hub-input-border-radius)}.hub-datepicker__attached.hub-datepicker__attached--prepend>hub-select:first-child .ng-select-container{border-start-start-radius:var(--hub-select-border-radius);border-end-start-radius:var(--hub-select-border-radius)}.hub-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,.hub-datepicker__attached.hub-datepicker__attached--append>hub-timepicker .hub-field__control{border-start-start-radius:0;border-end-start-radius:0}.hub-datepicker__attached.hub-datepicker__attached--append>hub-input:last-child .hub-field__control,.hub-datepicker__attached.hub-datepicker__attached--append>hub-textarea:last-child .hub-field__control,.hub-datepicker__attached.hub-datepicker__attached--append>hub-datepicker:last-child .hub-field__control,.hub-datepicker__attached.hub-datepicker__attached--append>hub-timepicker:last-child .hub-field__control{border-start-end-radius:var(--hub-input-border-radius);border-end-end-radius:var(--hub-input-border-radius)}.hub-datepicker__attached.hub-datepicker__attached--append>hub-select:last-child .ng-select-container{border-start-end-radius:var(--hub-select-border-radius);border-end-end-radius:var(--hub-select-border-radius)}:where(.hub-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, 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\" #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,.hub-datepicker__attached.hub-datepicker__attached>hub-timepicker{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,.hub-datepicker__attached.hub-datepicker__attached--prepend>hub-timepicker .hub-field__control{border-start-end-radius:0;border-end-end-radius:0}.hub-datepicker__attached.hub-datepicker__attached--prepend>hub-input:first-child .hub-field__control,.hub-datepicker__attached.hub-datepicker__attached--prepend>hub-textarea:first-child .hub-field__control,.hub-datepicker__attached.hub-datepicker__attached--prepend>hub-datepicker:first-child .hub-field__control,.hub-datepicker__attached.hub-datepicker__attached--prepend>hub-timepicker:first-child .hub-field__control{border-start-start-radius:var(--hub-input-border-radius);border-end-start-radius:var(--hub-input-border-radius)}.hub-datepicker__attached.hub-datepicker__attached--prepend>hub-select:first-child .ng-select-container{border-start-start-radius:var(--hub-select-border-radius);border-end-start-radius:var(--hub-select-border-radius)}.hub-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,.hub-datepicker__attached.hub-datepicker__attached--append>hub-timepicker .hub-field__control{border-start-start-radius:0;border-end-start-radius:0}.hub-datepicker__attached.hub-datepicker__attached--append>hub-input:last-child .hub-field__control,.hub-datepicker__attached.hub-datepicker__attached--append>hub-textarea:last-child .hub-field__control,.hub-datepicker__attached.hub-datepicker__attached--append>hub-datepicker:last-child .hub-field__control,.hub-datepicker__attached.hub-datepicker__attached--append>hub-timepicker:last-child .hub-field__control{border-start-end-radius:var(--hub-input-border-radius);border-end-end-radius:var(--hub-input-border-radius)}.hub-datepicker__attached.hub-datepicker__attached--append>hub-select:last-child .ng-select-container{border-start-end-radius:var(--hub-select-border-radius);border-end-end-radius:var(--hub-select-border-radius)}:where(.hub-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"] }]
+                    }, 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-overlay-container.hub-datepicker__overlay{--hub-overlay-zindex: var(--hub-datepicker-overlay-zindex, calc(var(--hub-sys-zindex-modal, 1055) + 5))}.hub-overlay-backdrop.hub-datepicker__backdrop{--hub-overlay-backdrop-zindex: calc(var(--hub-datepicker-overlay-zindex, calc(var(--hub-sys-zindex-modal, 1055) + 5)) - 1)}.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,.hub-datepicker__attached.hub-datepicker__attached>hub-timepicker{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,.hub-datepicker__attached.hub-datepicker__attached--prepend>hub-timepicker .hub-field__control{border-start-end-radius:0;border-end-end-radius:0}.hub-datepicker__attached.hub-datepicker__attached--prepend>hub-input:first-child .hub-field__control,.hub-datepicker__attached.hub-datepicker__attached--prepend>hub-textarea:first-child .hub-field__control,.hub-datepicker__attached.hub-datepicker__attached--prepend>hub-datepicker:first-child .hub-field__control,.hub-datepicker__attached.hub-datepicker__attached--prepend>hub-timepicker:first-child .hub-field__control{border-start-start-radius:var(--hub-input-border-radius);border-end-start-radius:var(--hub-input-border-radius)}.hub-datepicker__attached.hub-datepicker__attached--prepend>hub-select:first-child .ng-select-container{border-start-start-radius:var(--hub-select-border-radius);border-end-start-radius:var(--hub-select-border-radius)}.hub-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,.hub-datepicker__attached.hub-datepicker__attached--append>hub-timepicker .hub-field__control{border-start-start-radius:0;border-end-start-radius:0}.hub-datepicker__attached.hub-datepicker__attached--append>hub-input:last-child .hub-field__control,.hub-datepicker__attached.hub-datepicker__attached--append>hub-textarea:last-child .hub-field__control,.hub-datepicker__attached.hub-datepicker__attached--append>hub-datepicker:last-child .hub-field__control,.hub-datepicker__attached.hub-datepicker__attached--append>hub-timepicker:last-child .hub-field__control{border-start-end-radius:var(--hub-input-border-radius);border-end-end-radius:var(--hub-input-border-radius)}.hub-datepicker__attached.hub-datepicker__attached--append>hub-select:last-child .ng-select-container{border-start-end-radius:var(--hub-select-border-radius);border-end-end-radius:var(--hub-select-border-radius)}:where(.hub-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"] }] } });
 
 /**