@koobiq/components 20.1.0 → 20.3.0

package/fesm2022/koobiq-components-datepicker.mjs

@@ -4,22 +4,22 @@ import { TitleCasePipe, DOCUMENT } from '@angular/common';
 import * as i1 from '@koobiq/components/button';
 import { KbqButtonModule } from '@koobiq/components/button';
 import * as i4 from '@koobiq/components/core';
-import { DateAdapter, KbqOptionModule, defaultOffsetY, ruRULocaleData, validationTooltipShowDelay, validationTooltipHideDelay, KBQ_DATE_FORMATS, KBQ_LOCALE_SERVICE, KbqErrorStateTracker, ErrorStateMatcher, TAB, SPACE, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW, HOME, PAGE_UP, END, PAGE_DOWN, ESCAPE, isLetterKey, hasModifierKey, isVerticalMovement, isHorizontalMovement, DELETE, BACKSPACE } from '@koobiq/components/core';
+import { DateAdapter, KbqOptionModule, KbqDateTimezoneService, KBQ_CONNECTED_OVERLAY_BELOW_CLASS, KBQ_CONNECTED_OVERLAY_ABOVE_CLASS, ruRULocaleData, validationTooltipShowDelay, validationTooltipHideDelay, KBQ_DATE_FORMATS, KBQ_LOCALE_SERVICE, KbqErrorStateTracker, ErrorStateMatcher, TAB, SPACE, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW, HOME, PAGE_UP, END, PAGE_DOWN, ESCAPE, isLetterKey, hasModifierKey, isVerticalMovement, isHorizontalMovement, DELETE, BACKSPACE, kbqRevealSelection, kbqSetSelectionRange, kbqSiblingPopupProvider } from '@koobiq/components/core';
 import * as i2 from '@koobiq/components/icon';
 import { KbqIconModule } from '@koobiq/components/icon';
 import * as i3 from '@koobiq/components/select';
 import { KbqSelectModule } from '@koobiq/components/select';
 import { Subject, Subscription, merge } from 'rxjs';
-import { trigger, state, transition, style, animate } from '@angular/animations';
+import { takeUntilDestroyed, toObservable, outputToObservable } from '@angular/core/rxjs-interop';
+import { trigger, state, style, transition, animate } from '@angular/animations';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { takeUntilDestroyed, outputToObservable } from '@angular/core/rxjs-interop';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, Validators, FormGroupDirective, NgForm } from '@angular/forms';
-import { KbqFormFieldControl, KbqFormField, KbqFormFieldModule } from '@koobiq/components/form-field';
+import { KbqFormFieldControl, KBQ_FORM_FIELD, KbqFormFieldModule } from '@koobiq/components/form-field';
 import { Directionality } from '@angular/cdk/bidi';
 import { Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
 import { _getFocusedElementPierceShadowDom } from '@angular/cdk/platform';
 import { ComponentPortal, PortalModule } from '@angular/cdk/portal';
-import { take } from 'rxjs/operators';
+import { take, filter, switchMap, map } from 'rxjs/operators';
 import { A11yModule } from '@angular/cdk/a11y';
 
 /**
@@ -90,16 +90,30 @@ class KbqCalendarBody {
         }
         return cellNumber === this.activeCell();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqCalendarBody, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: KbqCalendarBody, isStandalone: true, selector: "[kbq-calendar-body]", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, todayValue: { classPropertyName: "todayValue", publicName: "todayValue", isSignal: true, isRequired: false, transformFunction: null }, selectedValue: { classPropertyName: "selectedValue", publicName: "selectedValue", isSignal: true, isRequired: false, transformFunction: null }, labelMinRequiredCells: { classPropertyName: "labelMinRequiredCells", publicName: "labelMinRequiredCells", isSignal: true, isRequired: false, transformFunction: null }, numCols: { classPropertyName: "numCols", publicName: "numCols", isSignal: true, isRequired: false, transformFunction: null }, activeCell: { classPropertyName: "activeCell", publicName: "activeCell", isSignal: true, isRequired: false, transformFunction: null }, cellAspectRatio: { classPropertyName: "cellAspectRatio", publicName: "cellAspectRatio", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedValueChange: "selectedValueChange" }, host: { classAttribute: "kbq-calendar__body" }, exportAs: ["kbqCalendarBody"], usesOnChanges: true, ngImport: i0, template: "<!-- Create the first row separately so we can include a special spacer cell. -->\n@for (row of rows(); track $index; let rowIndex = $index) {\n    <tr>\n        <!--  We mark this cell as aria-hidden so it doesn't get read out as one of the days in the week.\n        The aspect ratio of the table cells is maintained by setting the top and bottom padding as a\n        percentage of the width (a variant of the trick described here:\n        https://www.w3schools.com/howto/howto_css_aspect_ratio.asp). -->\n        @if (rowIndex === 0 && firstRowOffset) {\n            <td class=\"kbq-calendar__body-label\" [attr.colspan]=\"firstRowOffset\"></td>\n        }\n        @for (item of row; track item.displayValue; let colIndex = $index) {\n            <td\n                class=\"kbq-calendar__body-cell\"\n                [class.kbq-calendar__body_active]=\"isActiveCell(rowIndex, colIndex)\"\n                [class]=\"item.cssClasses!\"\n                [style.paddingBottom]=\"cellPadding\"\n                [style.paddingTop]=\"cellPadding\"\n                [style.width]=\"cellWidth\"\n                [tabindex]=\"-1\"\n                (click)=\"cellClicked(item)\"\n            >\n                <div\n                    class=\"kbq-calendar__body-cell-content\"\n                    [class.kbq-calendar__body-today]=\"todayValue() === item.value\"\n                    [class.kbq-disabled]=\"!item.enabled\"\n                    [class.kbq-selected]=\"selectedValue() === item.value\"\n                >\n                    {{ item.displayValue }}\n                </div>\n            </td>\n        }\n    </tr>\n}\n", styles: [".kbq-calendar__body-cell{position:relative;height:0;line-height:0;text-align:center;outline:none;cursor:pointer;padding:0}.kbq-disabled{cursor:default}.kbq-calendar__body-cell-content{display:flex;align-items:center;justify-content:center;box-sizing:border-box;height:32px;line-height:1;border-radius:var(--kbq-datepicker-size-grid-cell-border-radius);margin-bottom:var(--kbq-datepicker-size-grid-content-gap-vertical)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqCalendarBody, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: KbqCalendarBody, isStandalone: true, selector: "[kbq-calendar-body]", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, todayValue: { classPropertyName: "todayValue", publicName: "todayValue", isSignal: true, isRequired: false, transformFunction: null }, selectedValue: { classPropertyName: "selectedValue", publicName: "selectedValue", isSignal: true, isRequired: false, transformFunction: null }, labelMinRequiredCells: { classPropertyName: "labelMinRequiredCells", publicName: "labelMinRequiredCells", isSignal: true, isRequired: false, transformFunction: null }, numCols: { classPropertyName: "numCols", publicName: "numCols", isSignal: true, isRequired: false, transformFunction: null }, activeCell: { classPropertyName: "activeCell", publicName: "activeCell", isSignal: true, isRequired: false, transformFunction: null }, cellAspectRatio: { classPropertyName: "cellAspectRatio", publicName: "cellAspectRatio", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedValueChange: "selectedValueChange" }, host: { classAttribute: "kbq-calendar__body" }, exportAs: ["kbqCalendarBody"], usesOnChanges: true, ngImport: i0, template: "<!-- Create the first row separately so we can include a special spacer cell. -->\n@for (row of rows(); track $index; let rowIndex = $index) {\n    <tr>\n        <!--  We mark this cell as aria-hidden so it doesn't get read out as one of the days in the week.\n        The aspect ratio of the table cells is maintained by setting the top and bottom padding as a\n        percentage of the width (a variant of the trick described here:\n        https://www.w3schools.com/howto/howto_css_aspect_ratio.asp). -->\n        @if (rowIndex === 0 && firstRowOffset) {\n            <td class=\"kbq-calendar__body-label\" [attr.colspan]=\"firstRowOffset\"></td>\n        }\n        @for (item of row; track item.displayValue; let colIndex = $index) {\n            <td\n                class=\"kbq-calendar__body-cell\"\n                [class.kbq-calendar__body_active]=\"isActiveCell(rowIndex, colIndex)\"\n                [class]=\"item.cssClasses!\"\n                [style.paddingBottom]=\"cellPadding\"\n                [style.paddingTop]=\"cellPadding\"\n                [style.width]=\"cellWidth\"\n                [tabindex]=\"-1\"\n                (click)=\"cellClicked(item)\"\n            >\n                <div\n                    class=\"kbq-calendar__body-cell-content\"\n                    [class.kbq-calendar__body-today]=\"todayValue() === item.value\"\n                    [class.kbq-disabled]=\"!item.enabled\"\n                    [class.kbq-selected]=\"selectedValue() === item.value\"\n                >\n                    {{ item.displayValue }}\n                </div>\n            </td>\n        }\n    </tr>\n}\n", styles: [".kbq-calendar__body-cell{position:relative;height:0;line-height:0;text-align:center;outline:none;cursor:pointer;padding:0}.kbq-disabled{cursor:default}.kbq-calendar__body-cell-content{display:flex;align-items:center;justify-content:center;box-sizing:border-box;height:32px;line-height:1;border-radius:var(--kbq-datepicker-size-grid-cell-border-radius);margin-bottom:var(--kbq-datepicker-size-grid-content-gap-vertical)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqCalendarBody, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqCalendarBody, decorators: [{
             type: Component,
             args: [{ selector: '[kbq-calendar-body]', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-calendar__body'
                     }, exportAs: 'kbqCalendarBody', template: "<!-- Create the first row separately so we can include a special spacer cell. -->\n@for (row of rows(); track $index; let rowIndex = $index) {\n    <tr>\n        <!--  We mark this cell as aria-hidden so it doesn't get read out as one of the days in the week.\n        The aspect ratio of the table cells is maintained by setting the top and bottom padding as a\n        percentage of the width (a variant of the trick described here:\n        https://www.w3schools.com/howto/howto_css_aspect_ratio.asp). -->\n        @if (rowIndex === 0 && firstRowOffset) {\n            <td class=\"kbq-calendar__body-label\" [attr.colspan]=\"firstRowOffset\"></td>\n        }\n        @for (item of row; track item.displayValue; let colIndex = $index) {\n            <td\n                class=\"kbq-calendar__body-cell\"\n                [class.kbq-calendar__body_active]=\"isActiveCell(rowIndex, colIndex)\"\n                [class]=\"item.cssClasses!\"\n                [style.paddingBottom]=\"cellPadding\"\n                [style.paddingTop]=\"cellPadding\"\n                [style.width]=\"cellWidth\"\n                [tabindex]=\"-1\"\n                (click)=\"cellClicked(item)\"\n            >\n                <div\n                    class=\"kbq-calendar__body-cell-content\"\n                    [class.kbq-calendar__body-today]=\"todayValue() === item.value\"\n                    [class.kbq-disabled]=\"!item.enabled\"\n                    [class.kbq-selected]=\"selectedValue() === item.value\"\n                >\n                    {{ item.displayValue }}\n                </div>\n            </td>\n        }\n    </tr>\n}\n", styles: [".kbq-calendar__body-cell{position:relative;height:0;line-height:0;text-align:center;outline:none;cursor:pointer;padding:0}.kbq-disabled{cursor:default}.kbq-calendar__body-cell-content{display:flex;align-items:center;justify-content:center;box-sizing:border-box;height:32px;line-height:1;border-radius:var(--kbq-datepicker-size-grid-cell-border-radius);margin-bottom:var(--kbq-datepicker-size-grid-content-gap-vertical)}\n"] }]
         }], propDecorators: { rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], todayValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "todayValue", required: false }] }], selectedValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValue", required: false }] }], labelMinRequiredCells: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelMinRequiredCells", required: false }] }], numCols: [{ type: i0.Input, args: [{ isSignal: true, alias: "numCols", required: false }] }], activeCell: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeCell", required: false }] }], cellAspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellAspectRatio", required: false }] }], selectedValueChange: [{ type: i0.Output, args: ["selectedValueChange"] }] } });
 
+/** @docs-private */
+function createMissingDateImplError(provider) {
+    return Error(`KbqDatepicker: No provider found for ${provider}. You must import one of the existing ` +
+        `modules at your application root or provide a custom implementation or use exists ones.`);
+}
+/** Injects `DateAdapter`, naming the missing provider instead of letting DI throw a bare `NullInjectorError`. */
+function injectRequiredDateAdapter() {
+    const adapter = inject(DateAdapter, { optional: true });
+    if (!adapter) {
+        throw createMissingDateImplError('DateAdapter');
+    }
+    return adapter;
+}
+
 const defaultMinYear = 1900;
 const defaultMaxYear = 2099;
 /** Default header for KbqCalendar */
@@ -149,7 +163,7 @@ class KbqCalendarHeader {
         return this.compareDate(this.activeDate, this.maxDate) >= 0;
     }
     constructor() {
-        this.adapter = inject(DateAdapter);
+        this.adapter = injectRequiredDateAdapter();
         this.years = [];
         this._maxDate = this.adapter.createDate(defaultMaxYear, 11);
         this._minDate = this.adapter.createDate(defaultMinYear, 1);
@@ -239,10 +253,10 @@ class KbqCalendarHeader {
             this.monthNames.forEach((month) => (month.disabled = false));
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqCalendarHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: KbqCalendarHeader, isStandalone: true, selector: "kbq-calendar-header", inputs: { activeDate: "activeDate", maxDate: "maxDate", minDate: "minDate" }, outputs: { activeDateChange: "activeDateChange", monthSelected: "monthSelected", yearSelected: "yearSelected" }, host: { classAttribute: "kbq-calendar-header" }, exportAs: ["kbqCalendarHeader"], ngImport: i0, template: "<div class=\"kbq-calendar-header__select-group\">\n    <kbq-select\n        #monthSelect=\"kbqSelect\"\n        class=\"kbq-calendar-header__select\"\n        [panelClass]=\"'kbq-calendar-select-panel'\"\n        [tabIndex]=\"-1\"\n        [value]=\"selectedMonth\"\n        (selectionChange)=\"onMonthSelected($event.value)\"\n    >\n        <button\n            kbq-button\n            kbq-select-matcher\n            class=\"layout-padding-right-xs\"\n            [class.kbq-active]=\"monthSelect.panelOpen\"\n            [color]=\"'contrast'\"\n            [kbqStyle]=\"'transparent'\"\n        >\n            {{ monthNames[selectedMonth].nameShort | titlecase }}\n\n            <i kbq-icon=\"kbq-chevron-down-s_16\" class=\"layout-padding-left-3xs\" [color]=\"'contrast'\"></i>\n        </button>\n\n        @for (month of monthNames; track month.nameShort) {\n            <kbq-option [disabled]=\"month.disabled\" [kbqTooltipDisabled]=\"true\" [value]=\"month.value\">\n                {{ month.name }}\n            </kbq-option>\n        }\n    </kbq-select>\n\n    <kbq-select\n        #yearSelect=\"kbqSelect\"\n        [panelClass]=\"'kbq-calendar-select-panel'\"\n        [tabIndex]=\"-1\"\n        [value]=\"selectedYear\"\n        (selectionChange)=\"onYearSelected($event.value)\"\n    >\n        <button\n            kbq-button\n            kbq-select-matcher\n            class=\"layout-padding-right-xs\"\n            [class.kbq-active]=\"yearSelect.panelOpen\"\n            [color]=\"'contrast'\"\n            [kbqStyle]=\"'transparent'\"\n        >\n            {{ selectedYear }}\n\n            <i kbq-icon=\"kbq-chevron-down-s_16\" class=\"layout-padding-left-3xs\"></i>\n        </button>\n\n        @for (year of years; track year) {\n            <kbq-option [kbqTooltipDisabled]=\"true\" [value]=\"year\">\n                {{ year }}\n            </kbq-option>\n        }\n    </kbq-select>\n</div>\n\n<div class=\"kbq-calendar-header__button-group\">\n    <button\n        kbq-button\n        class=\"kbq-calendar-header__previous-button\"\n        [color]=\"'contrast'\"\n        [disabled]=\"previousDisabled\"\n        [kbqStyle]=\"'transparent'\"\n        [tabindex]=\"-1\"\n        (click)=\"selectPreviousMonth()\"\n    >\n        <i kbq-icon=\"kbq-chevron-left_16\"></i>\n    </button>\n\n    <button\n        kbq-button\n        [color]=\"'contrast'\"\n        [disabled]=\"currentDisabled\"\n        [kbqStyle]=\"'transparent'\"\n        [tabindex]=\"-1\"\n        (click)=\"selectCurrentDate()\"\n    >\n        <i kbq-icon=\"kbq-circle-xs_16\"></i>\n    </button>\n\n    <button\n        kbq-button\n        class=\"kbq-calendar-header__next-button\"\n        [color]=\"'contrast'\"\n        [disabled]=\"nextDisabled\"\n        [kbqStyle]=\"'transparent'\"\n        [tabindex]=\"-1\"\n        (click)=\"selectNextMonth()\"\n    >\n        <i kbq-icon=\"kbq-chevron-right_16\"></i>\n    </button>\n</div>\n", styles: [".kbq-calendar-header{display:flex;flex-direction:row;justify-content:space-between;padding-right:var(--kbq-datepicker-size-header-padding-horizontal);padding-left:var(--kbq-datepicker-size-header-padding-horizontal);margin-bottom:var(--kbq-datepicker-size-header-margin-bottom)}.kbq-calendar-header__select{width:auto!important}.kbq-calendar-header__button-group,.kbq-calendar-header__select-group{display:flex;flex-direction:row}.kbq-calendar-select-panel{margin-top:2px;min-width:98%!important}.kbq-calendar-select-panel .kbq-select__content{max-height:384px;overflow-x:hidden;scrollbar-gutter:auto}.kbq-calendar-select-panel .kbq-select__content .kbq-option{min-width:65px}\n"], dependencies: [{ kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i1.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i1.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i2.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqSelectModule }, { kind: "component", type: i3.KbqSelect, selector: "kbq-select", inputs: ["hiddenItemsText", "showPreselectedValues", "triggerValuesLimit", "panelClass", "backdropClass", "errorStateMatcher", "sortComparator", "multiline", "searchMinOptionsThreshold", "scrolledToBottomOffset", "hasBackdrop", "placeholder", "required", "multiple", "compareWith", "virtualOptionFactory", "selectAllToggle", "selectAllHandler", "panelWidth", "panelMinWidth", "value", "id", "tabIndex", "disabled", "hiddenItemsTextFormatter"], outputs: ["openedChange", "beforeOpened", "opened", "closed", "selectionChange", "onSelectAll", "valueChange", "scrolledToBottom"], exportAs: ["kbqSelect"] }, { kind: "directive", type: i3.KbqOptionTooltip, selector: "kbq-option" }, { kind: "component", type: i4.KbqOption, selector: "kbq-option", inputs: ["value", "selectable", "userSelect", "showCheckbox", "viewValue", "disabled"], outputs: ["onSelectionChange"], exportAs: ["kbqOption"] }, { kind: "directive", type: i4.KbqSelectMatcher, selector: "kbq-select-matcher, [kbq-select-matcher]", inputs: ["useDefaultHandlers"] }, { kind: "ngmodule", type: KbqOptionModule }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqCalendarHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: KbqCalendarHeader, isStandalone: true, selector: "kbq-calendar-header", inputs: { activeDate: "activeDate", maxDate: "maxDate", minDate: "minDate" }, outputs: { activeDateChange: "activeDateChange", monthSelected: "monthSelected", yearSelected: "yearSelected" }, host: { classAttribute: "kbq-calendar-header" }, exportAs: ["kbqCalendarHeader"], ngImport: i0, template: "<div class=\"kbq-calendar-header__select-group\">\n    <kbq-select\n        #monthSelect=\"kbqSelect\"\n        class=\"kbq-calendar-header__select\"\n        [panelClass]=\"'kbq-calendar-select-panel'\"\n        [tabIndex]=\"-1\"\n        [value]=\"selectedMonth\"\n        (selectionChange)=\"onMonthSelected($event.value)\"\n    >\n        <button\n            kbq-button\n            kbq-select-matcher\n            class=\"layout-padding-right-xs\"\n            [class.kbq-active]=\"monthSelect.panelOpen\"\n            [color]=\"'contrast'\"\n            [kbqStyle]=\"'transparent'\"\n        >\n            {{ monthNames[selectedMonth].nameShort | titlecase }}\n\n            <i kbq-icon=\"kbq-chevron-down-s_16\" class=\"layout-padding-left-3xs\" [color]=\"'contrast'\"></i>\n        </button>\n\n        @for (month of monthNames; track month.nameShort) {\n            <kbq-option [disabled]=\"month.disabled\" [kbqTooltipDisabled]=\"true\" [value]=\"month.value\">\n                {{ month.name }}\n            </kbq-option>\n        }\n    </kbq-select>\n\n    <kbq-select\n        #yearSelect=\"kbqSelect\"\n        [panelClass]=\"'kbq-calendar-select-panel'\"\n        [tabIndex]=\"-1\"\n        [value]=\"selectedYear\"\n        (selectionChange)=\"onYearSelected($event.value)\"\n    >\n        <button\n            kbq-button\n            kbq-select-matcher\n            class=\"layout-padding-right-xs\"\n            [class.kbq-active]=\"yearSelect.panelOpen\"\n            [color]=\"'contrast'\"\n            [kbqStyle]=\"'transparent'\"\n        >\n            {{ selectedYear }}\n\n            <i kbq-icon=\"kbq-chevron-down-s_16\" class=\"layout-padding-left-3xs\"></i>\n        </button>\n\n        @for (year of years; track year) {\n            <kbq-option [kbqTooltipDisabled]=\"true\" [value]=\"year\">\n                {{ year }}\n            </kbq-option>\n        }\n    </kbq-select>\n</div>\n\n<div class=\"kbq-calendar-header__button-group\">\n    <button\n        kbq-button\n        class=\"kbq-calendar-header__previous-button\"\n        [color]=\"'contrast'\"\n        [disabled]=\"previousDisabled\"\n        [kbqStyle]=\"'transparent'\"\n        [tabindex]=\"-1\"\n        (click)=\"selectPreviousMonth()\"\n    >\n        <i kbq-icon=\"kbq-chevron-left_16\"></i>\n    </button>\n\n    <button\n        kbq-button\n        [color]=\"'contrast'\"\n        [disabled]=\"currentDisabled\"\n        [kbqStyle]=\"'transparent'\"\n        [tabindex]=\"-1\"\n        (click)=\"selectCurrentDate()\"\n    >\n        <i kbq-icon=\"kbq-circle-xs_16\"></i>\n    </button>\n\n    <button\n        kbq-button\n        class=\"kbq-calendar-header__next-button\"\n        [color]=\"'contrast'\"\n        [disabled]=\"nextDisabled\"\n        [kbqStyle]=\"'transparent'\"\n        [tabindex]=\"-1\"\n        (click)=\"selectNextMonth()\"\n    >\n        <i kbq-icon=\"kbq-chevron-right_16\"></i>\n    </button>\n</div>\n", styles: [".kbq-calendar-header{display:flex;flex-direction:row;justify-content:space-between;padding-right:var(--kbq-datepicker-size-header-padding-horizontal);padding-left:var(--kbq-datepicker-size-header-padding-horizontal);margin-bottom:var(--kbq-datepicker-size-header-margin-bottom)}.kbq-calendar-header__select{width:auto!important}.kbq-calendar-header__button-group,.kbq-calendar-header__select-group{display:flex;flex-direction:row}.kbq-calendar-select-panel{margin-top:2px;min-width:98%!important}.kbq-calendar-select-panel .kbq-select__content{max-height:384px;overflow-x:hidden;scrollbar-gutter:auto}.kbq-calendar-select-panel .kbq-select__content .kbq-option{min-width:65px}\n"], dependencies: [{ kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i1.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i1.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i2.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqSelectModule }, { kind: "component", type: i3.KbqSelect, selector: "kbq-select", inputs: ["hiddenItemsText", "showPreselectedValues", "triggerValuesLimit", "panelClass", "backdropClass", "errorStateMatcher", "sortComparator", "multiline", "searchMinOptionsThreshold", "scrolledToBottomOffset", "hasBackdrop", "placeholder", "required", "multiple", "compareWith", "virtualOptionFactory", "selectAllToggle", "selectAll", "selectAllHandler", "panelWidth", "panelMinWidth", "panelMaxWidth", "panelMaxHeight", "value", "id", "tabIndex", "disabled", "hiddenItemsTextFormatter"], outputs: ["openedChange", "beforeOpened", "opened", "closed", "selectionChange", "onSelectAll", "valueChange", "scrolledToBottom"], exportAs: ["kbqSelect"] }, { kind: "directive", type: i3.KbqOptionTooltip, selector: "kbq-option" }, { kind: "component", type: i4.KbqOption, selector: "kbq-option", inputs: ["value", "selectable", "userSelect", "showCheckbox", "viewValue", "disabled"], outputs: ["onSelectionChange"], exportAs: ["kbqOption"] }, { kind: "directive", type: i4.KbqSelectMatcher, selector: "kbq-select-matcher, [kbq-select-matcher]", inputs: ["useDefaultHandlers"] }, { kind: "ngmodule", type: KbqOptionModule }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqCalendarHeader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqCalendarHeader, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-calendar-header', imports: [
                         TitleCasePipe,
@@ -261,12 +275,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 type: Input
             }], activeDateChange: [{ type: i0.Output, args: ["activeDateChange"] }], monthSelected: [{ type: i0.Output, args: ["monthSelected"] }], yearSelected: [{ type: i0.Output, args: ["yearSelected"] }] } });
 
-/** @docs-private */
-function createMissingDateImplError(provider) {
-    return Error(`KbqDatepicker: No provider found for ${provider}. You must import one of the existing ` +
-        `modules at your application root or provide a custom implementation or use exists ones.`);
-}
-
 /** Datepicker data that requires internationalization. */
 class KbqDatepickerIntl {
     constructor() {
@@ -296,10 +304,10 @@ class KbqDatepickerIntl {
         /** A label for the 'switch to year view' button (used by screen readers). */
         this.switchToMultiYearViewLabel = 'Choose month and year';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDatepickerIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDatepickerIntl, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDatepickerIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDatepickerIntl, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDatepickerIntl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDatepickerIntl, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -337,7 +345,8 @@ class KbqMonthView {
     }
     constructor() {
         this.changeDetectorRef = inject(ChangeDetectorRef);
-        this.adapter = inject(DateAdapter, { optional: true });
+        this.timezoneService = inject(KbqDateTimezoneService);
+        this.adapter = injectRequiredDateAdapter();
         /** The minimum selectable date. */
         this.minDate = input(undefined, ...(ngDevMode ? [{ debugName: "minDate" }] : []));
         /** The maximum selectable date. */
@@ -354,9 +363,6 @@ class KbqMonthView {
         this.activeDateChange = output();
         /** The body of calendar table */
         this.kbqCalendarBody = viewChild.required(KbqCalendarBody);
-        if (!this.adapter) {
-            throw createMissingDateImplError('DateAdapter');
-        }
         const firstDayOfWeek = this.adapter.getFirstDayOfWeek();
         const narrowWeekdays = this.adapter.getDayOfWeekNames('short');
         const longWeekdays = this.adapter.getDayOfWeekNames('long');
@@ -366,6 +372,12 @@ class KbqMonthView {
         });
         this.weekdays = weekdays.slice(firstDayOfWeek).concat(weekdays.slice(0, firstDayOfWeek));
         this._activeDate = this.adapter.today();
+        this.timezoneService.changes.pipe(takeUntilDestroyed()).subscribe(() => {
+            // `todayDate` and the cell dates are resolved once, in `init()`, against the zone that was
+            // active then; a new one can move which cell is today.
+            this.init();
+            this.changeDetectorRef.markForCheck();
+        });
     }
     ngAfterContentInit() {
         this.init();
@@ -433,10 +445,10 @@ class KbqMonthView {
             this.adapter.getMonth(d1) === this.adapter.getMonth(d2) &&
             this.adapter.getYear(d1) === this.adapter.getYear(d2));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqMonthView, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: KbqMonthView, isStandalone: true, selector: "kbq-month-view", inputs: { activeDate: { classPropertyName: "activeDate", publicName: "activeDate", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, dateClass: { classPropertyName: "dateClass", publicName: "dateClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange", userSelection: "userSelection", activeDateChange: "activeDateChange" }, viewQueries: [{ propertyName: "kbqCalendarBody", first: true, predicate: KbqCalendarBody, descendants: true, isSignal: true }], exportAs: ["kbqMonthView"], ngImport: i0, template: "<table class=\"kbq-calendar__table\">\n    <thead class=\"kbq-calendar__table-header\">\n        <tr>\n            @for (day of weekdays; track day) {\n                <th [attr.aria-label]=\"day.long\">\n                    {{ day.narrow }}\n                </th>\n            }\n        </tr>\n        <tr>\n            <th colspan=\"7\" class=\"kbq-calendar__table-header-divider\"></th>\n        </tr>\n    </thead>\n    <tbody\n        kbq-calendar-body\n        [activeCell]=\"adapter.getDate(activeDate) - 1\"\n        [labelMinRequiredCells]=\"3\"\n        [rows]=\"weeks\"\n        [selectedValue]=\"selectedDate!\"\n        [todayValue]=\"todayDate!\"\n        (selectedValueChange)=\"dateSelected($event)\"\n    ></tbody>\n</table>\n", dependencies: [{ kind: "component", type: KbqCalendarBody, selector: "[kbq-calendar-body]", inputs: ["rows", "todayValue", "selectedValue", "labelMinRequiredCells", "numCols", "activeCell", "cellAspectRatio"], outputs: ["selectedValueChange"], exportAs: ["kbqCalendarBody"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqMonthView, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: KbqMonthView, isStandalone: true, selector: "kbq-month-view", inputs: { activeDate: { classPropertyName: "activeDate", publicName: "activeDate", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, dateClass: { classPropertyName: "dateClass", publicName: "dateClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange", userSelection: "userSelection", activeDateChange: "activeDateChange" }, viewQueries: [{ propertyName: "kbqCalendarBody", first: true, predicate: KbqCalendarBody, descendants: true, isSignal: true }], exportAs: ["kbqMonthView"], ngImport: i0, template: "<table class=\"kbq-calendar__table\">\n    <thead class=\"kbq-calendar__table-header\">\n        <tr>\n            @for (day of weekdays; track day) {\n                <th [attr.aria-label]=\"day.long\">\n                    {{ day.narrow }}\n                </th>\n            }\n        </tr>\n        <tr>\n            <th colspan=\"7\" class=\"kbq-calendar__table-header-divider\"></th>\n        </tr>\n    </thead>\n    <tbody\n        kbq-calendar-body\n        [activeCell]=\"adapter.getDate(activeDate) - 1\"\n        [labelMinRequiredCells]=\"3\"\n        [rows]=\"weeks\"\n        [selectedValue]=\"selectedDate!\"\n        [todayValue]=\"todayDate!\"\n        (selectedValueChange)=\"dateSelected($event)\"\n    ></tbody>\n</table>\n", dependencies: [{ kind: "component", type: KbqCalendarBody, selector: "[kbq-calendar-body]", inputs: ["rows", "todayValue", "selectedValue", "labelMinRequiredCells", "numCols", "activeCell", "cellAspectRatio"], outputs: ["selectedValueChange"], exportAs: ["kbqCalendarBody"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqMonthView, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqMonthView, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-month-view', imports: [
                         KbqCalendarBody
@@ -504,7 +516,7 @@ class KbqCalendar {
         this.stateChanges.next();
     }
     constructor() {
-        this.adapter = inject(DateAdapter, { optional: true });
+        this.adapter = injectRequiredDateAdapter();
         this.changeDetectorRef = inject(ChangeDetectorRef);
         /** Function used to filter which dates are selectable. */
         this.dateFilter = input(undefined, ...(ngDevMode ? [{ debugName: "dateFilter" }] : []));
@@ -534,9 +546,6 @@ class KbqCalendar {
         this.inputSubscription = Subscription.EMPTY;
         const intl = inject(KbqDatepickerIntl);
         const changeDetectorRef = this.changeDetectorRef;
-        if (!this.adapter) {
-            throw createMissingDateImplError('DateAdapter');
-        }
         this.intlChanges = intl.changes.subscribe(() => {
             changeDetectorRef.markForCheck();
             this.stateChanges.next();
@@ -604,10 +613,10 @@ class KbqCalendar {
     getActiveDateDefault() {
         return this.startAt || this.adapter.today();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.25", type: KbqCalendar, isStandalone: true, selector: "kbq-calendar", inputs: { startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: false, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: false, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, dateClass: { classPropertyName: "dateClass", publicName: "dateClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange", yearSelected: "yearSelected", monthSelected: "monthSelected", userSelection: "userSelection" }, host: { classAttribute: "kbq-calendar" }, viewQueries: [{ propertyName: "monthView", first: true, predicate: KbqMonthView, descendants: true, isSignal: true }], exportAs: ["kbqCalendar"], usesOnChanges: true, ngImport: i0, template: "<kbq-calendar-header\n    [maxDate]=\"maxDate\"\n    [minDate]=\"minDate\"\n    [(activeDate)]=\"activeDate\"\n    (monthSelected)=\"monthSelected.emit(activeDate)\"\n    (yearSelected)=\"yearSelected.emit(activeDate)\"\n/>\n\n<div class=\"kbq-calendar__content\">\n    <kbq-month-view\n        [dateClass]=\"dateClass()\"\n        [dateFilter]=\"dateFilter()\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [selected]=\"selected\"\n        [(activeDate)]=\"activeDate\"\n        (selectedChange)=\"dateSelected($event!)\"\n        (userSelection)=\"userSelected()\"\n    />\n</div>\n", styles: [".kbq-calendar{display:block;box-sizing:initial}.kbq-calendar__content{padding-right:var(--kbq-datepicker-size-grid-padding-horizontal);padding-left:var(--kbq-datepicker-size-grid-padding-horizontal);outline:none}.kbq-calendar__table{border-spacing:0;border-collapse:collapse;width:100%}.kbq-calendar__table-header th{text-align:center;height:30px}.kbq-calendar__table-header th.kbq-calendar__table-header-divider{position:relative;box-sizing:border-box;height:var(--kbq-datepicker-size-grid-content-gap-vertical)}.kbq-calendar__table-header th.kbq-calendar__table-header-divider:after{content:\"\";position:absolute;top:0;left:calc(-1 * var(--kbq-datepicker-size-grid-padding-horizontal));right:calc(-1 * var(--kbq-datepicker-size-grid-padding-horizontal));height:var(--kbq-datepicker-size-grid-divider-height)}\n"], dependencies: [{ kind: "component", type: KbqCalendarHeader, selector: "kbq-calendar-header", inputs: ["activeDate", "maxDate", "minDate"], outputs: ["activeDateChange", "monthSelected", "yearSelected"], exportAs: ["kbqCalendarHeader"] }, { kind: "component", type: KbqMonthView, selector: "kbq-month-view", inputs: ["activeDate", "selected", "minDate", "maxDate", "dateFilter", "dateClass"], outputs: ["selectedChange", "userSelection", "activeDateChange"], exportAs: ["kbqMonthView"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.30", type: KbqCalendar, isStandalone: true, selector: "kbq-calendar", inputs: { startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: false, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: false, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, dateClass: { classPropertyName: "dateClass", publicName: "dateClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange", yearSelected: "yearSelected", monthSelected: "monthSelected", userSelection: "userSelection" }, host: { classAttribute: "kbq-calendar" }, viewQueries: [{ propertyName: "monthView", first: true, predicate: KbqMonthView, descendants: true, isSignal: true }], exportAs: ["kbqCalendar"], usesOnChanges: true, ngImport: i0, template: "<kbq-calendar-header\n    [maxDate]=\"maxDate\"\n    [minDate]=\"minDate\"\n    [(activeDate)]=\"activeDate\"\n    (monthSelected)=\"monthSelected.emit(activeDate)\"\n    (yearSelected)=\"yearSelected.emit(activeDate)\"\n/>\n\n<div class=\"kbq-calendar__content\">\n    <kbq-month-view\n        [dateClass]=\"dateClass()\"\n        [dateFilter]=\"dateFilter()\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [selected]=\"selected\"\n        [(activeDate)]=\"activeDate\"\n        (selectedChange)=\"dateSelected($event!)\"\n        (userSelection)=\"userSelected()\"\n    />\n</div>\n", styles: [".kbq-calendar{display:block;box-sizing:initial}.kbq-calendar__content{padding-right:var(--kbq-datepicker-size-grid-padding-horizontal);padding-left:var(--kbq-datepicker-size-grid-padding-horizontal);outline:none}.kbq-calendar__table{border-spacing:0;border-collapse:collapse;width:100%}.kbq-calendar__table-header th{text-align:center;height:30px}.kbq-calendar__table-header th.kbq-calendar__table-header-divider{position:relative;box-sizing:border-box;height:var(--kbq-datepicker-size-grid-content-gap-vertical)}.kbq-calendar__table-header th.kbq-calendar__table-header-divider:after{content:\"\";position:absolute;top:0;left:calc(-1 * var(--kbq-datepicker-size-grid-padding-horizontal));right:calc(-1 * var(--kbq-datepicker-size-grid-padding-horizontal));height:var(--kbq-datepicker-size-grid-divider-height)}\n"], dependencies: [{ kind: "component", type: KbqCalendarHeader, selector: "kbq-calendar-header", inputs: ["activeDate", "maxDate", "minDate"], outputs: ["activeDateChange", "monthSelected", "yearSelected"], exportAs: ["kbqCalendarHeader"] }, { kind: "component", type: KbqMonthView, selector: "kbq-month-view", inputs: ["activeDate", "selected", "minDate", "maxDate", "dateFilter", "dateClass"], outputs: ["selectedChange", "userSelection", "activeDateChange"], exportAs: ["kbqMonthView"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqCalendar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqCalendar, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-calendar', imports: [
                         KbqCalendarHeader,
@@ -653,8 +662,14 @@ const kbqDatepickerAnimations = {
 
 /** Used to generate a unique ID for each datepicker instance. */
 let datepickerUid = 0;
-/** Injection token that determines the scroll handling while the calendar is open. */
-const KBQ_DATEPICKER_SCROLL_STRATEGY = new InjectionToken('kbq-datepicker-scroll-strategy');
+/**
+ * Injection token that determines the scroll handling while the calendar is open. The root default keeps the
+ * datepicker usable outside `KbqDatepickerModule`'s injector; providing the token anywhere still wins over it.
+ */
+const KBQ_DATEPICKER_SCROLL_STRATEGY = new InjectionToken('kbq-datepicker-scroll-strategy', {
+    providedIn: 'root',
+    factory: () => KBQ_DATEPICKER_SCROLL_STRATEGY_FACTORY(inject(Overlay))
+});
 /** @docs-private */
 function KBQ_DATEPICKER_SCROLL_STRATEGY_FACTORY(overlay) {
     return () => overlay.scrollStrategies.reposition();
@@ -694,13 +709,13 @@ class KbqDatepickerContent {
         this.animationState = 'void';
         this.changeDetectorRef.markForCheck();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDatepickerContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.25", type: KbqDatepickerContent, isStandalone: true, selector: "kbq-datepicker__content", host: { listeners: { "@transformPanel.done": "animationDone.next()" }, properties: { "@transformPanel": "animationState" }, classAttribute: "kbq-datepicker__content" }, viewQueries: [{ propertyName: "calendar", first: true, predicate: KbqCalendar, descendants: true, isSignal: true }], exportAs: ["kbqDatepickerContent"], ngImport: i0, template: "<kbq-calendar\n    [dateClass]=\"datepicker.dateClass()\"\n    [dateFilter]=\"datepicker.dateFilter\"\n    [id]=\"datepicker.id\"\n    [maxDate]=\"datepicker.maxDate()\"\n    [minDate]=\"datepicker.minDate()\"\n    [class]=\"datepicker.panelClass()\"\n    [selected]=\"datepicker.selected\"\n    [startAt]=\"datepicker.startAt\"\n    [@fadeInCalendar]=\"'enter'\"\n    (monthSelected)=\"datepicker.selectMonth($event)\"\n    (selectedChange)=\"datepicker.select($event)\"\n    (userSelection)=\"datepicker.close()\"\n    (yearSelected)=\"datepicker.selectYear($event)\"\n/>\n", styles: [".kbq-datepicker__content{display:block;border-radius:var(--kbq-datepicker-size-container-border-radius)}.kbq-datepicker__content .kbq-calendar{width:calc(280px + var(--kbq-datepicker-size-grid-padding-horizontal) * 2);height:270px;padding-top:var(--kbq-datepicker-size-container-padding-vertical);padding-bottom:var(--kbq-datepicker-size-container-padding-vertical)}.kbq-datepicker__content{background:var(--kbq-datepicker-container-background);box-shadow:var(--kbq-datepicker-container-shadow)}.kbq-calendar__table-header{color:var(--kbq-datepicker-header-text)}.kbq-calendar__table-header-divider:after{background:var(--kbq-datepicker-header-divider)}.kbq-calendar__body-cell-content{background:var(--kbq-datepicker-grid-cell-default-background);color:var(--kbq-datepicker-grid-cell-default-text)}.kbq-calendar__body-cell-content.kbq-calendar__body-today{background:var(--kbq-datepicker-grid-cell-today-background);color:var(--kbq-datepicker-grid-cell-today-text)}.kbq-calendar__body-cell-content:hover:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-hover-background)}.kbq-calendar__body-cell-content:active:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-active-background)}.kbq-calendar__body-cell-content.kbq-selected:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-selected-background);color:var(--kbq-datepicker-grid-cell-states-selected-text)}.kbq-calendar__body-cell-content.kbq-selected:not(.kbq-disabled):hover{background:var(--kbq-datepicker-grid-cell-states-selected-hover-background)}.kbq-calendar__body-cell-content.kbq-disabled{color:var(--kbq-datepicker-grid-cell-states-disabled-text);background:var(--kbq-datepicker-grid-cell-states-disabled-background)}.kbq-calendar,.kbq-calendar__table-header th{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n", ".kbq-datepicker__content{--kbq-datepicker-size-container-padding-vertical: var(--kbq-size-m);--kbq-datepicker-size-container-border-radius: var(--kbq-size-s);--kbq-datepicker-size-header-padding-horizontal: var(--kbq-size-xxs);--kbq-datepicker-size-header-margin-bottom: var(--kbq-size-3xs);--kbq-datepicker-size-grid-padding-horizontal: var(--kbq-size-m);--kbq-datepicker-size-grid-content-gap-vertical: var(--kbq-size-3xs);--kbq-datepicker-size-grid-divider-height: 1px;--kbq-datepicker-size-grid-cell-padding-horizontal: var(--kbq-size-s);--kbq-datepicker-size-grid-cell-padding-vertical: var(--kbq-size-s);--kbq-datepicker-size-grid-cell-border-radius: var(--kbq-size-s);--kbq-datepicker-container-background: var(--kbq-background-card);--kbq-datepicker-container-shadow: var(--kbq-shadow-popup);--kbq-datepicker-header-text: var(--kbq-foreground-contrast-tertiary);--kbq-datepicker-header-divider: var(--kbq-line-contrast-less);--kbq-datepicker-grid-cell-default-background: transparent;--kbq-datepicker-grid-cell-default-text: var(--kbq-foreground-contrast);--kbq-datepicker-grid-cell-today-background: transparent;--kbq-datepicker-grid-cell-today-text: var(--kbq-foreground-theme);--kbq-datepicker-grid-cell-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-datepicker-grid-cell-states-active-background: var(--kbq-states-background-transparent-active);--kbq-datepicker-grid-cell-states-selected-background: var(--kbq-background-contrast);--kbq-datepicker-grid-cell-states-selected-text: var(--kbq-foreground-on-contrast);--kbq-datepicker-grid-cell-states-selected-hover-background: var(--kbq-states-background-contrast-active);--kbq-datepicker-grid-cell-states-disabled-background: transparent;--kbq-datepicker-grid-cell-states-disabled-text: var(--kbq-states-foreground-disabled)}\n"], dependencies: [{ kind: "component", type: KbqCalendar, selector: "kbq-calendar", inputs: ["startAt", "selected", "minDate", "maxDate", "dateFilter", "dateClass"], outputs: ["selectedChange", "yearSelected", "monthSelected", "userSelection"], exportAs: ["kbqCalendar"] }], animations: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDatepickerContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.30", type: KbqDatepickerContent, isStandalone: true, selector: "kbq-datepicker__content", host: { listeners: { "@transformPanel.done": "animationDone.next()" }, properties: { "@transformPanel": "animationState" }, classAttribute: "kbq-datepicker__content" }, viewQueries: [{ propertyName: "calendar", first: true, predicate: KbqCalendar, descendants: true, isSignal: true }], exportAs: ["kbqDatepickerContent"], ngImport: i0, template: "<kbq-calendar\n    [dateClass]=\"datepicker.dateClass()\"\n    [dateFilter]=\"datepicker.dateFilter\"\n    [id]=\"datepicker.id\"\n    [maxDate]=\"datepicker.maxDate()\"\n    [minDate]=\"datepicker.minDate()\"\n    [class]=\"datepicker.panelClass()\"\n    [selected]=\"datepicker.selected\"\n    [startAt]=\"datepicker.startAt\"\n    [@fadeInCalendar]=\"'enter'\"\n    (monthSelected)=\"datepicker.selectMonth($event)\"\n    (selectedChange)=\"datepicker.select($event)\"\n    (userSelection)=\"datepicker.close()\"\n    (yearSelected)=\"datepicker.selectYear($event)\"\n/>\n", styles: [".kbq-datepicker__content{display:block;border-radius:var(--kbq-datepicker-size-container-border-radius)}.kbq-datepicker__content .kbq-calendar{width:calc(280px + var(--kbq-datepicker-size-grid-padding-horizontal) * 2);height:270px;padding-top:var(--kbq-datepicker-size-container-padding-vertical);padding-bottom:var(--kbq-datepicker-size-container-padding-vertical)}.kbq-datepicker__content{background:var(--kbq-datepicker-container-background);box-shadow:var(--kbq-datepicker-container-shadow)}.kbq-calendar__table-header{color:var(--kbq-datepicker-header-text)}.kbq-calendar__table-header-divider:after{background:var(--kbq-datepicker-header-divider)}.kbq-calendar__body-cell-content{background:var(--kbq-datepicker-grid-cell-default-background);color:var(--kbq-datepicker-grid-cell-default-text)}.kbq-calendar__body-cell-content.kbq-calendar__body-today{background:var(--kbq-datepicker-grid-cell-today-background);color:var(--kbq-datepicker-grid-cell-today-text)}.kbq-calendar__body-cell-content:hover:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-hover-background)}.kbq-calendar__body-cell-content:active:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-active-background)}.kbq-calendar__body-cell-content.kbq-selected:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-selected-background);color:var(--kbq-datepicker-grid-cell-states-selected-text)}.kbq-calendar__body-cell-content.kbq-selected:not(.kbq-disabled):hover{background:var(--kbq-datepicker-grid-cell-states-selected-hover-background)}.kbq-calendar__body-cell-content.kbq-disabled{color:var(--kbq-datepicker-grid-cell-states-disabled-text);background:var(--kbq-datepicker-grid-cell-states-disabled-background)}.kbq-calendar,.kbq-calendar__table-header th{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n", ".kbq-datepicker__content{--kbq-datepicker-size-container-padding-vertical: var(--kbq-size-m);--kbq-datepicker-size-container-border-radius: var(--kbq-size-s);--kbq-datepicker-size-header-padding-horizontal: var(--kbq-size-xxs);--kbq-datepicker-size-header-margin-bottom: var(--kbq-size-3xs);--kbq-datepicker-size-grid-padding-horizontal: var(--kbq-size-m);--kbq-datepicker-size-grid-content-gap-vertical: var(--kbq-size-3xs);--kbq-datepicker-size-grid-divider-height: 1px;--kbq-datepicker-size-grid-cell-padding-horizontal: var(--kbq-size-s);--kbq-datepicker-size-grid-cell-padding-vertical: var(--kbq-size-s);--kbq-datepicker-size-grid-cell-border-radius: var(--kbq-size-s);--kbq-datepicker-container-background: var(--kbq-background-card);--kbq-datepicker-container-shadow: var(--kbq-shadow-popup);--kbq-datepicker-header-text: var(--kbq-foreground-contrast-tertiary);--kbq-datepicker-header-divider: var(--kbq-line-contrast-less);--kbq-datepicker-grid-cell-default-background: transparent;--kbq-datepicker-grid-cell-default-text: var(--kbq-foreground-contrast);--kbq-datepicker-grid-cell-today-background: transparent;--kbq-datepicker-grid-cell-today-text: var(--kbq-foreground-theme);--kbq-datepicker-grid-cell-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-datepicker-grid-cell-states-active-background: var(--kbq-states-background-transparent-active);--kbq-datepicker-grid-cell-states-selected-background: var(--kbq-background-contrast);--kbq-datepicker-grid-cell-states-selected-text: var(--kbq-foreground-on-contrast);--kbq-datepicker-grid-cell-states-selected-hover-background: var(--kbq-states-background-contrast-active);--kbq-datepicker-grid-cell-states-disabled-background: transparent;--kbq-datepicker-grid-cell-states-disabled-text: var(--kbq-states-foreground-disabled)}\n"], dependencies: [{ kind: "component", type: KbqCalendar, selector: "kbq-calendar", inputs: ["startAt", "selected", "minDate", "maxDate", "dateFilter", "dateClass"], outputs: ["selectedChange", "yearSelected", "monthSelected", "userSelection"], exportAs: ["kbqCalendar"] }], animations: [
             kbqDatepickerAnimations.transformPanel,
             kbqDatepickerAnimations.fadeInCalendar
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDatepickerContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDatepickerContent, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-datepicker__content', imports: [
                         KbqCalendar
@@ -785,7 +800,7 @@ class KbqDatepicker {
         this.overlay = inject(Overlay);
         this.ngZone = inject(NgZone);
         this.viewContainerRef = inject(ViewContainerRef);
-        this.dateAdapter = inject(DateAdapter, { optional: true });
+        this.dateAdapter = injectRequiredDateAdapter();
         this.dir = inject(Directionality, { optional: true });
         this.document = inject(DOCUMENT);
         this._hasBackdrop = false;
@@ -826,11 +841,7 @@ class KbqDatepicker {
         /** Subscription to value changes in the associated input element. */
         this.inputSubscription = Subscription.EMPTY;
         this.closeSubscription = Subscription.EMPTY;
-        const scrollStrategy = inject(KBQ_DATEPICKER_SCROLL_STRATEGY);
-        if (!this.dateAdapter) {
-            throw createMissingDateImplError('DateAdapter');
-        }
-        this.scrollStrategy = scrollStrategy;
+        this.scrollStrategy = inject(KBQ_DATEPICKER_SCROLL_STRATEGY);
     }
     ngOnDestroy() {
         this.close();
@@ -964,11 +975,14 @@ class KbqDatepicker {
     }
     /** Create the popup PositionStrategy. */
     createPopupPositionStrategy() {
-        return this.overlay
+        return (this.overlay
             .position()
             .flexibleConnectedTo(this.datepickerInput.getOrigin())
             .withTransformOriginOn('.kbq-datepicker__content')
             .withFlexibleDimensions(false)
+            // Also large enough to absorb the trigger↔panel gap padding (kbq-connected-overlay-gap,
+            // defaultOffsetY = 4) that CDK's viewport-fit check can't see, since that padding is applied
+            // via panelClass after the fit decision is made.
             .withViewportMargin(8)
             .withLockedPosition()
             .withPositions([
@@ -977,14 +991,14 @@ class KbqDatepicker {
                 originY: 'bottom',
                 overlayX: 'start',
                 overlayY: 'top',
-                offsetY: defaultOffsetY
+                panelClass: KBQ_CONNECTED_OVERLAY_BELOW_CLASS
             },
             {
                 originX: 'start',
                 originY: 'top',
                 overlayX: 'start',
                 overlayY: 'bottom',
-                offsetY: -defaultOffsetY
+                panelClass: KBQ_CONNECTED_OVERLAY_ABOVE_CLASS
             },
             {
                 originX: 'end',
@@ -998,12 +1012,12 @@ class KbqDatepicker {
                 overlayX: 'end',
                 overlayY: 'bottom'
             }
-        ]);
+        ]));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDatepicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.25", type: KbqDatepicker, isStandalone: true, selector: "kbq-datepicker", inputs: { hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: false, isRequired: false, transformFunction: null }, startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, opened: { classPropertyName: "opened", publicName: "opened", isSignal: false, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, dateClass: { classPropertyName: "dateClass", publicName: "dateClass", isSignal: true, isRequired: false, transformFunction: null }, backdropClass: { classPropertyName: "backdropClass", publicName: "backdropClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { yearSelected: "yearSelected", monthSelected: "monthSelected", openedStream: "opened", closedStream: "closed" }, providers: [{ provide: KbqFormFieldControl, useExisting: KbqDatepicker }], exportAs: ["kbqDatepicker"], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDatepicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.30", type: KbqDatepicker, isStandalone: true, selector: "kbq-datepicker", inputs: { hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: false, isRequired: false, transformFunction: null }, startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, opened: { classPropertyName: "opened", publicName: "opened", isSignal: false, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, dateClass: { classPropertyName: "dateClass", publicName: "dateClass", isSignal: true, isRequired: false, transformFunction: null }, backdropClass: { classPropertyName: "backdropClass", publicName: "backdropClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { yearSelected: "yearSelected", monthSelected: "monthSelected", openedStream: "opened", closedStream: "closed" }, providers: [{ provide: KbqFormFieldControl, useExisting: KbqDatepicker }], exportAs: ["kbqDatepicker"], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDatepicker, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDatepicker, decorators: [{
             type: Component,
             args: [{
                     selector: 'kbq-datepicker',
@@ -1217,24 +1231,40 @@ class KbqDatepickerInput {
             this.valueChange.emit(newValue);
         }
     }
-    /** The minimum valid date. */
+    /**
+     * The minimum valid date. Drives validation only — including dates typed or pasted into the
+     * input — and reports `kbqDatepickerMin`. The calendar is restricted separately, by `minDate`
+     * on the associated `<kbq-datepicker>`.
+     *
+     * Compared down to the millisecond, not by calendar day: the input keeps the time part of the
+     * value it parses, and the comparison is made on wall-clock components rather than on absolute
+     * time.
+     */
     // TODO: Skipped for migration because:
     //  Accessor inputs cannot be migrated as they are too complex.
     get min() {
         return this._min;
     }
     set min(value) {
-        this._min = this.adapter.deserialize(value);
+        this._min = this.getValidDateOrNull(this.adapter.deserialize(value));
         this.validatorOnChange();
     }
-    /** The maximum valid date. */
+    /**
+     * The maximum valid date. Drives validation only — including dates typed or pasted into the
+     * input — and reports `kbqDatepickerMax`. The calendar is restricted separately, by `maxDate`
+     * on the associated `<kbq-datepicker>`.
+     *
+     * Compared down to the millisecond, not by calendar day: the input keeps the time part of the
+     * value it parses, so an upper bound meant to include its whole day has to be the end of that
+     * day.
+     */
     // TODO: Skipped for migration because:
     //  Accessor inputs cannot be migrated as they are too complex.
     get max() {
         return this._max;
     }
     set max(value) {
-        this._max = this.adapter.deserialize(value);
+        this._max = this.getValidDateOrNull(this.adapter.deserialize(value));
         this.validatorOnChange();
     }
     /** Whether the datepicker-input is disabled. */
@@ -1310,22 +1340,17 @@ class KbqDatepickerInput {
     get selectionStart() {
         return this.elementRef.nativeElement.selectionStart;
     }
-    set selectionStart(value) {
-        this.elementRef.nativeElement.selectionStart = value;
-    }
     get selectionEnd() {
         return this.elementRef.nativeElement.selectionEnd;
     }
-    set selectionEnd(value) {
-        this.elementRef.nativeElement.selectionEnd = value;
-    }
     constructor() {
         this.elementRef = inject(ElementRef);
         this.renderer = inject(Renderer2);
-        this.adapter = inject(DateAdapter, { optional: true });
+        this.adapter = injectRequiredDateAdapter();
+        this.timezoneService = inject(KbqDateTimezoneService);
         this.dateFormats = inject(KBQ_DATE_FORMATS, { optional: true });
         /** @docs-private */
-        this.formField = inject(KbqFormField, { optional: true, host: true });
+        this.formField = inject(KBQ_FORM_FIELD, { optional: true, host: true });
         /** @docs-private */
         this.localeService = inject(KBQ_LOCALE_SERVICE, { optional: true });
         /** @docs-private */
@@ -1352,7 +1377,7 @@ class KbqDatepickerInput {
         this.thirdDigit = null;
         this.onTouched = () => { };
         this.onInput = () => {
-            this.correctCursorPosition();
+            const cursorPosition = this.correctedCursorPosition();
             const formattedValue = this.replaceSymbols(this.viewValue);
             const newTimeObj = this.getDateFromString(formattedValue);
             this.lastValueValid = !!newTimeObj;
@@ -1362,12 +1387,12 @@ class KbqDatepickerInput {
                     this.updateValue(newTimeObj);
                 }
                 else {
-                    this.control.updateValueAndValidity();
+                    this.control?.updateValueAndValidity();
                 }
                 return;
             }
             this.setViewValue(this.getTimeStringFromDate(newTimeObj, this.dateInputFormat), true);
-            this.selectNextDigitByCursor(this.selectionStart);
+            this.selectNextDigitByCursor(cursorPosition);
             this.updateValue(newTimeObj);
         };
         this.parseOnBlur = () => {
@@ -1383,7 +1408,7 @@ class KbqDatepickerInput {
             if (viewDigits.length !== 3) {
                 this.lastValueValid = false;
                 this._value = null;
-                return setTimeout(() => this.control.updateValueAndValidity());
+                return setTimeout(() => this.control?.updateValueAndValidity());
             }
             date[this.firstDigit.fullName] = this.firstDigit.parse(firsViewDigit);
             date[this.secondDigit.fullName] = this.secondDigit.parse(secondViewDigit);
@@ -1395,14 +1420,14 @@ class KbqDatepickerInput {
             else if (viewDigitWithYear.length < digitWithYear.length) {
                 this.lastValueValid = false;
                 this._value = null;
-                return setTimeout(() => this.control.updateValueAndValidity());
+                return setTimeout(() => this.control?.updateValueAndValidity());
             }
             const newTimeObj = this.createDateTime(date);
             if (!newTimeObj) {
                 this.lastValueValid = false;
                 this._value = null;
                 this.cvaOnChange(null);
-                return setTimeout(() => this.control.updateValueAndValidity());
+                return setTimeout(() => this.control?.updateValueAndValidity());
             }
             /* Check if the number of days entered does not match the entered month */
             if (!this.getValidDateOrNull(newTimeObj)) {
@@ -1427,14 +1452,16 @@ class KbqDatepickerInput {
         };
         /** The form control validator for the min date. */
         this.minValidator = (control) => {
-            const controlValue = this.adapter.deserialize(control.value);
+            // An unparseable value compares as NaN against any bound, which fails both `<= 0` and
+            // `>= 0` and would report the value as simultaneously too early and too late.
+            const controlValue = this.getValidDateOrNull(this.adapter.deserialize(control.value));
             return !this.min || !controlValue || this.adapter.compareDateTime(this.min, controlValue) <= 0
                 ? null
                 : { kbqDatepickerMin: { min: this.min, actual: controlValue } };
         };
         /** The form control validator for the max date. */
         this.maxValidator = (control) => {
-            const controlValue = this.adapter.deserialize(control.value);
+            const controlValue = this.getValidDateOrNull(this.adapter.deserialize(control.value));
             return !this.max || !controlValue || this.adapter.compareDateTime(this.max, controlValue) >= 0
                 ? null
                 : { kbqDatepickerMax: { max: this.max, actual: controlValue } };
@@ -1452,9 +1479,6 @@ class KbqDatepickerInput {
             this.maxValidator,
             this.filterValidator
         ]);
-        if (!this.adapter) {
-            throw createMissingDateImplError('DateAdapter');
-        }
         this.errorStateTracker = new KbqErrorStateTracker(inject(ErrorStateMatcher), 
         // update ngControl later, so it will be initialized
         null, inject(FormGroupDirective, { optional: true }), inject(NgForm, { optional: true }), this.stateChanges);
@@ -1463,6 +1487,11 @@ class KbqDatepickerInput {
         if (!this.localeService) {
             this.initDefaultParams();
         }
+        this.timezoneService.changes.pipe(takeUntilDestroyed()).subscribe(() => {
+            // The rendered text names a wall clock in the zone it was formatted in. Left as it is, the
+            // next keystroke re-parses it against the new zone and emits a different instant.
+            this.value = this.value;
+        });
     }
     ngDoCheck() {
         if (this.ngControl) {
@@ -1635,9 +1664,11 @@ class KbqDatepickerInput {
         this.configuration = this.externalConfiguration || KBQ_DATEPICKER_DEFAULT_CONFIGURATION;
     }
     setFormat(format) {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        this.separator = format.match(/[aA-zZ]+(?<separator>\W|\D)[aA-zZ]+/).groups.separator;
+        // `[a-zA-Z]`, not `[aA-zZ]`: the latter reads as `a`, the range `A-z` and `Z`, and that range
+        // takes in the six characters ASCII puts between the two alphabets — opening bracket,
+        // backslash, closing bracket, caret, underscore and backtick. A format escaping a literal in
+        // brackets could therefore have had that bracket counted as part of a placeholder.
+        this.separator = format.match(/[a-zA-Z]+(?<separator>\W|\D)[a-zA-Z]+/).groups.separator;
         this.separatorPositions = format
             .split('')
             .reduce((acc, item, index) => (this.separator === item ? [...acc, index + 1] : acc), []);
@@ -1669,30 +1700,36 @@ class KbqDatepickerInput {
     }
     spaceKeyHandler(event) {
         event.preventDefault();
-        if (this.selectionStart === this.selectionEnd) {
-            const value = this.getNewValue(event.key, this.selectionStart);
-            this.setViewValue(value);
-            setTimeout(this.onInput);
-        }
-        else if (this.selectionStart !== this.selectionEnd) {
-            this.selectNextDigit(this.selectionStart, true);
+        const position = this.selectionStart;
+        // Right after a separator the digit group is empty, so a space cannot stand in for one:
+        // advance instead of inserting a character the value can never be parsed with.
+        if (this.selectionStart !== this.selectionEnd || this.separatorPositions.includes(position)) {
+            this.selectNextDigit(position, true);
+            return;
         }
+        this.setViewValue(this.getNewValue(event.key, position));
+        setTimeout(this.onInput);
     }
     getNewValue(key, position) {
         return [this.viewValue.slice(0, position), key, this.viewValue.slice(position)].join('');
     }
     setViewValue(value, savePosition = false) {
+        const element = this.elementRef.nativeElement;
+        const selectionStart = this.selectionStart ?? 0;
+        const selectionEnd = this.selectionEnd ?? 0;
+        this.renderer.setProperty(element, 'value', value);
         if (savePosition) {
-            const selectionStart = this.selectionStart;
-            const selectionEnd = this.selectionEnd;
-            this.renderer.setProperty(this.elementRef.nativeElement, 'value', value);
-            this.selectionStart = selectionStart;
-            this.selectionEnd = selectionEnd;
+            this.setSelection(selectionStart, selectionEnd);
         }
         else {
-            this.renderer.setProperty(this.elementRef.nativeElement, 'value', value);
+            // A paste, a model write or a calendar pick replaces the whole value, and the offset the
+            // previous one was left at has to go with it.
+            kbqRevealSelection(element);
         }
     }
+    setSelection(start, end) {
+        kbqSetSelectionRange(this.elementRef.nativeElement, start, end);
+    }
     replaceSymbols(value) {
         return value
             .split(this.separator)
@@ -1937,8 +1974,7 @@ class KbqDatepickerInput {
             changedTime = this.decrementDate(this.value, modifiedTimePart);
         }
         this.value = changedTime;
-        this.selectionStart = selectionStart;
-        this.selectionEnd = selectionEnd;
+        this.setSelection(selectionStart, selectionEnd);
         this.cvaOnChange(changedTime);
         this.onChange();
         this.stateChanges.next();
@@ -1980,16 +2016,14 @@ class KbqDatepickerInput {
     selectDigitByCursor(cursorPos) {
         setTimeout(() => {
             const [, selectionStart, selectionEnd] = this.getDateEditMetrics(cursorPos);
-            this.selectionStart = selectionStart;
-            this.selectionEnd = selectionEnd;
+            this.setSelection(selectionStart, selectionEnd);
         });
     }
     selectNextDigitByCursor(cursorPos) {
         setTimeout(() => {
             const [, , endPositionOfCurrentDigit] = this.getDateEditMetrics(cursorPos);
             const [, selectionStart, selectionEnd] = this.getDateEditMetrics(endPositionOfCurrentDigit + 1);
-            this.selectionStart = selectionStart;
-            this.selectionEnd = selectionEnd;
+            this.setSelection(selectionStart, selectionEnd);
         });
     }
     selectNextDigit(cursorPos, cycle = false) {
@@ -1998,8 +2032,7 @@ class KbqDatepickerInput {
             const nextSeparatorPos = this.viewValue.indexOf(this.separator, cursorPos);
             const newCursorPos = nextSeparatorPos > 0 ? nextSeparatorPos + 1 : lastValue;
             const [, selectionStart, selectionEnd] = this.getDateEditMetrics(newCursorPos);
-            this.selectionStart = selectionStart;
-            this.selectionEnd = selectionEnd;
+            this.setSelection(selectionStart, selectionEnd);
         });
     }
     /** Checks whether the input is invalid based on the native validation. */
@@ -2063,19 +2096,21 @@ class KbqDatepickerInput {
         }
         return this.adapter.createDateTime(value.year, value.month - 1, value.date, value.hours, value.minutes, value.seconds, value.milliseconds);
     }
-    correctCursorPosition() {
-        if (this.selectionStart && this.separatorPositions.includes(this.selectionStart)) {
-            this.selectionStart = this.selectionStart - 1;
-        }
+    // The position to advance from, with a caret that landed just past a separator pulled back onto
+    // the digit before it. Returned rather than applied to the field: on the paths where the value
+    // cannot be parsed, a moved caret would survive into the next keystroke and change what it does.
+    correctedCursorPosition() {
+        const position = this.selectionStart ?? 0;
+        return this.separatorPositions.includes(position) ? position - 1 : position;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDatepickerInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqDatepickerInput, isStandalone: true, selector: "input[kbqDatepicker], input[kbqCalendar]", inputs: { errorStateMatcher: "errorStateMatcher", placeholder: "placeholder", required: "required", kbqDatepicker: "kbqDatepicker", kbqCalendar: "kbqCalendar", kbqDatepickerFilter: "kbqDatepickerFilter", value: "value", min: "min", max: "max", disabled: "disabled", id: "id", kbqValidationTooltip: "kbqValidationTooltip" }, outputs: { incorrectInput: "incorrectInput", dateChange: "dateChange", dateInput: "dateInput" }, host: { listeners: { "paste": "onPaste($event)", "change": "onChange()", "focus": "focusChanged(true)", "blur": "onBlur()", "keydown": "onKeyDown($event)" }, properties: { "attr.placeholder": "placeholder", "attr.required": "required", "attr.disabled": "disabled || null", "attr.min": "min ? toISO8601(min) : null", "attr.max": "max ? toISO8601(max) : null", "attr.autocomplete": "\"off\"" }, classAttribute: "kbq-input kbq-datepicker" }, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDatepickerInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqDatepickerInput, isStandalone: true, selector: "input[kbqDatepicker], input[kbqCalendar]", inputs: { errorStateMatcher: "errorStateMatcher", placeholder: "placeholder", required: "required", kbqDatepicker: "kbqDatepicker", kbqCalendar: "kbqCalendar", kbqDatepickerFilter: "kbqDatepickerFilter", value: "value", min: "min", max: "max", disabled: "disabled", id: "id", kbqValidationTooltip: "kbqValidationTooltip" }, outputs: { incorrectInput: "incorrectInput", dateChange: "dateChange", dateInput: "dateInput" }, host: { listeners: { "paste": "onPaste($event)", "change": "onChange()", "focus": "focusChanged(true)", "blur": "onBlur()", "keydown": "onKeyDown($event)" }, properties: { "attr.placeholder": "placeholder", "attr.required": "required", "attr.disabled": "disabled || null", "attr.min": "min ? toISO8601(min) : null", "attr.max": "max ? toISO8601(max) : null", "attr.autocomplete": "\"off\"" }, classAttribute: "kbq-input kbq-datepicker" }, providers: [
             KBQ_DATEPICKER_VALUE_ACCESSOR,
             KBQ_DATEPICKER_VALIDATORS,
             { provide: KbqFormFieldControl, useExisting: KbqDatepickerInput }
         ], exportAs: ["kbqDatepickerInput"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDatepickerInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDatepickerInput, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[kbqDatepicker], input[kbqCalendar]',
@@ -2128,10 +2163,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 
 /** Can be used to override the icon of a `kbqDatepickerToggle`. */
 class KbqDatepickerToggleIcon {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDatepickerToggleIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqDatepickerToggleIcon, isStandalone: true, selector: "[kbqDatepickerToggleIcon]", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDatepickerToggleIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqDatepickerToggleIcon, isStandalone: true, selector: "[kbqDatepickerToggleIcon]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDatepickerToggleIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDatepickerToggleIcon, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqDatepickerToggleIcon]'
@@ -2142,6 +2177,15 @@ class KbqDatepickerToggleIconComponent {
         this._disabled = false;
         /** Datepicker instance that the button will toggle. */
         this.datepicker = input(undefined, ...(ngDevMode ? [{ debugName: "datepicker", alias: 'for' }] : [{ alias: 'for' }]));
+        /**
+         * Emits `true` when the calendar opens and `false` when it closes. Part of the `KbqSiblingPopup`
+         * contract.
+         *
+         * Built on top of the `datepicker` signal rather than read once, because the instance is bound after the
+         * consumers of this stream (a tooltip on the same element subscribes in its constructor) and may be
+         * swapped later — the same reason `watchStateChanges` is re-run from `ngOnChanges`.
+         */
+        this.openedChange = toObservable(this.datepicker).pipe(filter(Boolean), switchMap((datepicker) => merge(outputToObservable(datepicker.openedStream).pipe(map(() => true)), outputToObservable(datepicker.closedStream).pipe(map(() => false)))));
         this.destroyRef = inject(DestroyRef);
         this.cdr = inject(ChangeDetectorRef);
         this.stateChangesSubscription = Subscription.EMPTY;
@@ -2155,6 +2199,10 @@ class KbqDatepickerToggleIconComponent {
     set disabled(value) {
         this._disabled = coerceBooleanProperty(value);
     }
+    /** Whether the calendar is currently on screen. Part of the `KbqSiblingPopup` contract. */
+    get isAttached() {
+        return !!this.datepicker()?.opened;
+    }
     ngOnChanges(changes) {
         if (changes.datepicker && !changes.datepicker.firstChange) {
             this.watchStateChanges();
@@ -2183,8 +2231,8 @@ class KbqDatepickerToggleIconComponent {
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(() => this.cdr.markForCheck());
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDatepickerToggleIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.25", type: KbqDatepickerToggleIconComponent, isStandalone: true, selector: "kbq-datepicker-toggle-icon", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, datepicker: { classPropertyName: "datepicker", publicName: "for", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "open($event)" }, properties: { "attr.aria-expanded": "datepicker().opened", "attr.aria-disabled": "disabled" }, classAttribute: "kbq-datepicker-toggle-icon" }, usesOnChanges: true, ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDatepickerToggleIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.30", type: KbqDatepickerToggleIconComponent, isStandalone: true, selector: "kbq-datepicker-toggle-icon", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, datepicker: { classPropertyName: "datepicker", publicName: "for", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "open($event)" }, properties: { "attr.aria-expanded": "datepicker().opened", "attr.aria-disabled": "disabled" }, classAttribute: "kbq-datepicker-toggle-icon" }, providers: [kbqSiblingPopupProvider(KbqDatepickerToggleIconComponent)], usesOnChanges: true, ngImport: i0, template: `
         <ng-content select="[kbqDatepickerToggleIcon]">
             <i
                 color="contrast-fade"
@@ -2195,9 +2243,9 @@ class KbqDatepickerToggleIconComponent {
                 [autoColor]="true"
             ></i>
         </ng-content>
-    `, isInline: true, styles: [".kbq-datepicker-toggle-icon{display:inline-flex;justify-content:center;align-items:center}.kbq-datepicker-toggle:focus{outline:0}.kbq-datepicker-toggle__button.kbq-button-icon{width:var(--kbq-datepicker-toggle-size-width, var(--kbq-size-3xl));height:var(--kbq-datepicker-toggle-size-height, var(--kbq-size-3xl));margin-left:2px}.kbq-form-field-appearance-legacy .kbq-form-field-prefix .kbq-datepicker-toggle__default-icon,.kbq-form-field-appearance-legacy .kbq-form-field-suffix .kbq-datepicker-toggle__default-icon{width:1em}.kbq-form-field:not(.kbq-form-field-appearance-legacy) .kbq-form-field-prefix .kbq-datepicker-toggle__default-icon,.kbq-form-field:not(.kbq-form-field-appearance-legacy) .kbq-form-field-suffix .kbq-datepicker-toggle__default-icon{display:block;width:1.5em;height:1.5em}.kbq-form-field:not(.kbq-form-field-appearance-legacy) .kbq-form-field-prefix .kbq-button-icon .kbq-datepicker-toggle__default-icon,.kbq-form-field:not(.kbq-form-field-appearance-legacy) .kbq-form-field-suffix .kbq-button-icon .kbq-datepicker-toggle__default-icon{margin:auto}\n"], dependencies: [{ kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i2.KbqIconButton, selector: "[kbq-icon-button]", inputs: ["small", "kbq-icon-button", "tabindex", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    `, isInline: true, styles: [".kbq-datepicker-toggle-icon{display:inline-flex;justify-content:center;align-items:center}.kbq-datepicker-toggle:focus{outline:0}.kbq-datepicker-toggle__button.kbq-button-icon{width:var(--kbq-datepicker-toggle-size-width, var(--kbq-size-3xl));height:var(--kbq-datepicker-toggle-size-height, var(--kbq-size-3xl));margin-left:2px}.kbq-form-field-appearance-legacy .kbq-form-field-prefix .kbq-datepicker-toggle__default-icon,.kbq-form-field-appearance-legacy .kbq-form-field-suffix .kbq-datepicker-toggle__default-icon{width:1em}.kbq-form-field:not(.kbq-form-field-appearance-legacy) .kbq-form-field-prefix .kbq-datepicker-toggle__default-icon,.kbq-form-field:not(.kbq-form-field-appearance-legacy) .kbq-form-field-suffix .kbq-datepicker-toggle__default-icon{display:block;width:1.5em;height:1.5em}.kbq-form-field:not(.kbq-form-field-appearance-legacy) .kbq-form-field-prefix .kbq-button-icon .kbq-datepicker-toggle__default-icon,.kbq-form-field:not(.kbq-form-field-appearance-legacy) .kbq-form-field-suffix .kbq-button-icon .kbq-datepicker-toggle__default-icon{margin:auto}\n"], dependencies: [{ kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i2.KbqIconButton, selector: "[kbq-icon-button]", inputs: ["size", "small", "kbq-icon-button", "tabindex", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDatepickerToggleIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDatepickerToggleIconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-datepicker-toggle-icon', imports: [KbqIconModule], template: `
         <ng-content select="[kbqDatepickerToggleIcon]">
@@ -2210,7 +2258,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 [autoColor]="true"
             ></i>
         </ng-content>
-    `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+    `, providers: [kbqSiblingPopupProvider(KbqDatepickerToggleIconComponent)], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-datepicker-toggle-icon',
                         '[attr.aria-expanded]': 'datepicker().opened',
                         '[attr.aria-disabled]': 'disabled',
@@ -2221,8 +2269,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             }], datepicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "for", required: false }] }] } });
 
 class KbqDatepickerModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqDatepickerModule, imports: [KbqButtonModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqDatepickerModule, imports: [KbqButtonModule,
             OverlayModule,
             A11yModule,
             PortalModule,
@@ -2247,10 +2295,7 @@ class KbqDatepickerModule {
             KbqMonthView,
             KbqCalendarHeader,
             KbqFormFieldModule] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDatepickerModule, providers: [
-            KbqDatepickerIntl,
-            KBQ_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER
-        ], imports: [KbqButtonModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDatepickerModule, providers: [KbqDatepickerIntl], imports: [KbqButtonModule,
             OverlayModule,
             A11yModule,
             PortalModule,
@@ -2261,7 +2306,7 @@ class KbqDatepickerModule {
             KbqDatepickerContent,
             KbqCalendarHeader, KbqFormFieldModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDatepickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDatepickerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -2282,10 +2327,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         KbqMonthView,
                         KbqCalendarHeader
                     ],
-                    providers: [
-                        KbqDatepickerIntl,
-                        KBQ_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER
-                    ],
+                    providers: [KbqDatepickerIntl],
                     exports: [
                         KbqCalendar,
                         KbqCalendarBody,