@koobiq/components 20.4.2 → 21.0.0

package/fesm2022/koobiq-components-datepicker.mjs

@@ -1,29 +1,29 @@
 import * as i0 from '@angular/core';
-import { input, output, ViewEncapsulation, ChangeDetectionStrategy, Component, inject, Input, Injectable, ChangeDetectorRef, viewChild, InjectionToken, NgZone, ViewContainerRef, forwardRef, ElementRef, Renderer2, EventEmitter, Directive, DestroyRef, NgModule } from '@angular/core';
+import { input, output, ViewEncapsulation, ChangeDetectionStrategy, Component, inject, ChangeDetectorRef, viewChild, forwardRef, InjectionToken, ElementRef, Renderer2, signal, EventEmitter, computed, booleanAttribute, linkedSignal, effect, untracked, Directive, Injector, ViewContainerRef, afterNextRender, NgModule } from '@angular/core';
 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, 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 { DateAdapter, kbqInjectA11yLocaleConfiguration, KbqOptionModule, KbqDateTimezoneService, ruRULocaleData, KBQ_DEFAULT_LOCALE_DATA_FACTORY, KBQ_DATE_LOCALE, KBQ_DATE_FORMATS, kbqLocaleConfigurationOverrideProvider, validationTooltipShowDelay, validationTooltipHideDelay, KbqLocaleOverridesDirective, 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, kbqAnimationsDisabled, kbqAfterAnimations, KBQ_OVERLAY_LAYERS, KBQ_CONNECTED_OVERLAY_BELOW_CLASS, KBQ_CONNECTED_OVERLAY_ABOVE_CLASS } 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 { takeUntilDestroyed, toObservable, outputToObservable } from '@angular/core/rxjs-interop';
-import { trigger, state, style, transition, animate } from '@angular/animations';
+import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormGroupDirective, NgForm, Validators } from '@angular/forms';
+import { KBQ_FORM_FIELD, KbqFormFieldControl, KbqFormFieldModule } from '@koobiq/components/form-field';
+import { A11yModule } from '@angular/cdk/a11y';
+import { Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
+import { ComponentPortal, PortalModule } from '@angular/cdk/portal';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { NG_VALUE_ACCESSOR, NG_VALIDATORS, Validators, FormGroupDirective, NgForm } from '@angular/forms';
-import { KbqFormFieldControl, KBQ_FORM_FIELD, KbqFormFieldModule } from '@koobiq/components/form-field';
+import { filter, switchMap, map, take } from 'rxjs/operators';
 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, filter, switchMap, map } from 'rxjs/operators';
-import { A11yModule } from '@angular/cdk/a11y';
 
 /**
  * An internal class that represents the data corresponding to a single calendar cell.
+ *
  * @docs-private
  */
 class KbqCalendarCell {
@@ -36,27 +36,28 @@ class KbqCalendarCell {
 }
 /**
  * An internal component used to display calendar data in a table.
+ *
  * @docs-private
  */
 class KbqCalendarBody {
     constructor() {
         /** The cells to display in the table. */
-        this.rows = input(undefined, ...(ngDevMode ? [{ debugName: "rows" }] : []));
+        this.rows = input(undefined, ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
         /** The value in the table that corresponds to today. */
-        this.todayValue = input(undefined, ...(ngDevMode ? [{ debugName: "todayValue" }] : []));
+        this.todayValue = input(undefined, ...(ngDevMode ? [{ debugName: "todayValue" }] : /* istanbul ignore next */ []));
         /** The value in the table that is currently selected. */
-        this.selectedValue = input(undefined, ...(ngDevMode ? [{ debugName: "selectedValue" }] : []));
+        this.selectedValue = input(undefined, ...(ngDevMode ? [{ debugName: "selectedValue" }] : /* istanbul ignore next */ []));
         /** The minimum number of free cells needed to fit the label in the first row. */
-        this.labelMinRequiredCells = input(undefined, ...(ngDevMode ? [{ debugName: "labelMinRequiredCells" }] : []));
+        this.labelMinRequiredCells = input(undefined, ...(ngDevMode ? [{ debugName: "labelMinRequiredCells" }] : /* istanbul ignore next */ []));
         /** The number of columns in the table. */
-        this.numCols = input(7, ...(ngDevMode ? [{ debugName: "numCols" }] : []));
+        this.numCols = input(7, ...(ngDevMode ? [{ debugName: "numCols" }] : /* istanbul ignore next */ []));
         /** The cell number of the active cell in the table. */
-        this.activeCell = input(0, ...(ngDevMode ? [{ debugName: "activeCell" }] : []));
+        this.activeCell = input(0, ...(ngDevMode ? [{ debugName: "activeCell" }] : /* istanbul ignore next */ []));
         /**
          * The aspect ratio (width / height) to use for the cells in the table. This aspect ratio will be
          * maintained even as the table resizes.
          */
-        this.cellAspectRatio = input(1, ...(ngDevMode ? [{ debugName: "cellAspectRatio" }] : []));
+        this.cellAspectRatio = input(1, ...(ngDevMode ? [{ debugName: "cellAspectRatio" }] : /* istanbul ignore next */ []));
         /** Emits when a new value is selected. */
         this.selectedValueChange = output();
     }
@@ -90,14 +91,14 @@ class KbqCalendarBody {
         }
         return cellNumber === this.activeCell();
     }
-    /** @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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqCalendarBody, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.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)}@supports (corner-shape: squircle){.kbq-calendar__body-cell-content{corner-shape:squircle;border-radius:clamp(var(--kbq-datepicker-size-grid-cell-border-radius) * 1.85,var(--kbq-datepicker-size-grid-cell-border-radius) * 2.3 - 3.6px,var(--kbq-datepicker-size-grid-cell-border-radius) * 2)}}.kbq-calendar__body-cell-content{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.30", ngImport: i0, type: KbqCalendarBody, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", 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"] }]
+                    }, 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)}@supports (corner-shape: squircle){.kbq-calendar__body-cell-content{corner-shape:squircle;border-radius:clamp(var(--kbq-datepicker-size-grid-cell-border-radius) * 1.85,var(--kbq-datepicker-size-grid-cell-border-radius) * 2.3 - 3.6px,var(--kbq-datepicker-size-grid-cell-border-radius) * 2)}}.kbq-calendar__body-cell-content{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 */
@@ -118,8 +119,6 @@ const defaultMinYear = 1900;
 const defaultMaxYear = 2099;
 /** Default header for KbqCalendar */
 class KbqCalendarHeader {
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
     get activeDate() {
         return this._activeDate;
     }
@@ -128,8 +127,6 @@ class KbqCalendarHeader {
         this.updateSelectedValues();
         this.updateSelectionOptions();
     }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
     get maxDate() {
         return this._maxDate;
     }
@@ -140,8 +137,6 @@ class KbqCalendarHeader {
         this._maxDate = value;
         this.updateSelectionOptions();
     }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
     get minDate() {
         return this._minDate;
     }
@@ -164,9 +159,17 @@ class KbqCalendarHeader {
     }
     constructor() {
         this.adapter = injectRequiredDateAdapter();
+        /** Accessible names for the icon-only month navigation buttons. */
+        this.a11yLocaleConfiguration = kbqInjectA11yLocaleConfiguration();
         this.years = [];
         this._maxDate = this.adapter.createDate(defaultMaxYear, 11);
         this._minDate = this.adapter.createDate(defaultMinYear, 1);
+        /** @docs-private */
+        this.activeDateInput = input(undefined, { ...(ngDevMode ? { debugName: "activeDateInput" } : /* istanbul ignore next */ {}), alias: 'activeDate' });
+        /** @docs-private */
+        this.maxDateInput = input(undefined, { ...(ngDevMode ? { debugName: "maxDateInput" } : /* istanbul ignore next */ {}), alias: 'maxDate' });
+        /** @docs-private */
+        this.minDateInput = input(undefined, { ...(ngDevMode ? { debugName: "minDateInput" } : /* istanbul ignore next */ {}), alias: 'minDate' });
         /** Emits when any date is activated. */
         this.activeDateChange = output();
         this.monthSelected = output();
@@ -175,6 +178,24 @@ class KbqCalendarHeader {
             return { name, nameShort: this.adapter.getMonthNames('short')[i], value: i, disabled: false };
         });
     }
+    ngOnChanges(changes) {
+        // A bound input is handed to its member; unbound, it leaves what code wrote.
+        if (changes['maxDateInput']) {
+            const maxDate = this.maxDateInput();
+            if (maxDate !== undefined)
+                this.maxDate = maxDate;
+        }
+        if (changes['minDateInput']) {
+            const minDate = this.minDateInput();
+            if (minDate !== undefined)
+                this.minDate = minDate;
+        }
+        if (changes['activeDateInput']) {
+            const activeDate = this.activeDateInput();
+            if (activeDate !== undefined)
+                this.activeDate = activeDate;
+        }
+    }
     ngAfterContentInit() {
         this.updateYearsOptions();
         this.updateMonthOptions();
@@ -253,10 +274,10 @@ class KbqCalendarHeader {
             this.monthNames.forEach((month) => (month.disabled = false));
         }
     }
-    /** @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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqCalendarHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: KbqCalendarHeader, isStandalone: true, selector: "kbq-calendar-header", inputs: { activeDateInput: { classPropertyName: "activeDateInput", publicName: "activeDate", isSignal: true, isRequired: false, transformFunction: null }, maxDateInput: { classPropertyName: "maxDateInput", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, minDateInput: { classPropertyName: "minDateInput", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeDateChange: "activeDateChange", monthSelected: "monthSelected", yearSelected: "yearSelected" }, host: { classAttribute: "kbq-calendar-header" }, exportAs: ["kbqCalendarHeader"], usesOnChanges: true, 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        [attr.aria-label]=\"a11yLocaleConfiguration().previousMonth\"\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        [attr.aria-label]=\"a11yLocaleConfiguration().currentDate\"\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        [attr.aria-label]=\"a11yLocaleConfiguration().nextMonth\"\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: ["aria-hidden", "iconSize", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqSelectModule }, { kind: "component", type: i3.KbqSelect, selector: "kbq-select", inputs: ["hiddenItemsText", "hiddenItemsTextFormatter", "aria-label", "showPreselectedValues", "triggerValuesLimit", "panelClass", "backdropClass", "errorStateMatcher", "sortComparator", "multiline", "searchMinOptionsThreshold", "scrolledToBottomOffset", "hasBackdrop", "placeholder", "required", "multiple", "compareWith", "virtualOptionFactory", "clearPredicate", "selectAllToggle", "selectAll", "selectAllHandler", "panelWidth", "panelMinWidth", "panelMaxWidth", "panelMaxHeight", "value", "id", "tabIndex", "disabled"], outputs: ["openedChange", "beforeOpened", "opened", "closed", "selectionChange", "onSelectAll", "valueChange", "scrolledToBottom"], exportAs: ["kbqSelect"] }, { kind: "directive", type: i3.KbqOptionTooltip, selector: "kbq-option", inputs: ["ignoreTooltipPointerEvents"] }, { 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.30", ngImport: i0, type: KbqCalendarHeader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqCalendarHeader, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-calendar-header', imports: [
                         TitleCasePipe,
@@ -266,63 +287,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         KbqOptionModule
                     ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-calendar-header'
-                    }, exportAs: 'kbqCalendarHeader', 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"] }]
-        }], ctorParameters: () => [], propDecorators: { activeDate: [{
-                type: Input
-            }], maxDate: [{
-                type: Input
-            }], minDate: [{
-                type: Input
-            }], activeDateChange: [{ type: i0.Output, args: ["activeDateChange"] }], monthSelected: [{ type: i0.Output, args: ["monthSelected"] }], yearSelected: [{ type: i0.Output, args: ["yearSelected"] }] } });
-
-/** Datepicker data that requires internationalization. */
-class KbqDatepickerIntl {
-    constructor() {
-        /**
-         * Stream that emits whenever the labels here are changed. Use this to notify
-         * components if the labels have changed after initialization.
-         */
-        this.changes = new Subject();
-        /** A label for the calendar popup (used by screen readers). */
-        this.calendarLabel = 'Calendar';
-        /** A label for the button used to open the calendar popup (used by screen readers). */
-        this.openCalendarLabel = 'Open calendar';
-        /** A label for the previous month button (used by screen readers). */
-        this.prevMonthLabel = 'Previous month';
-        /** A label for the next month button (used by screen readers). */
-        this.nextMonthLabel = 'Next month';
-        /** A label for the previous year button (used by screen readers). */
-        this.prevYearLabel = 'Previous year';
-        /** A label for the next year button (used by screen readers). */
-        this.nextYearLabel = 'Next year';
-        /** A label for the previous multi-year button (used by screen readers). */
-        this.prevMultiYearLabel = 'Previous 20 years';
-        /** A label for the next multi-year button (used by screen readers). */
-        this.nextMultiYearLabel = 'Next 20 years';
-        /** A label for the 'switch to month view' button (used by screen readers). */
-        this.switchToMonthViewLabel = 'Choose date';
-        /** 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.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.30", ngImport: i0, type: KbqDatepickerIntl, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
+                    }, exportAs: 'kbqCalendarHeader', 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        [attr.aria-label]=\"a11yLocaleConfiguration().previousMonth\"\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        [attr.aria-label]=\"a11yLocaleConfiguration().currentDate\"\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        [attr.aria-label]=\"a11yLocaleConfiguration().nextMonth\"\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"] }]
+        }], ctorParameters: () => [], propDecorators: { activeDateInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeDate", required: false }] }], maxDateInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], minDateInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], activeDateChange: [{ type: i0.Output, args: ["activeDateChange"] }], monthSelected: [{ type: i0.Output, args: ["monthSelected"] }], yearSelected: [{ type: i0.Output, args: ["yearSelected"] }] } });
 
 const DAYS_PER_WEEK = 7;
 /**
  * An internal component used to display a single month in the datepicker.
+ *
  * @docs-private
  */
 class KbqMonthView {
     /**
      * The date to display in this month view (everything other than the month and year is ignored).
      */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
     get activeDate() {
         return this._activeDate;
     }
@@ -334,8 +311,6 @@ class KbqMonthView {
         }
     }
     /** The currently selected date. */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
     get selected() {
         return this._selected;
     }
@@ -347,14 +322,18 @@ class KbqMonthView {
         this.changeDetectorRef = inject(ChangeDetectorRef);
         this.timezoneService = inject(KbqDateTimezoneService);
         this.adapter = injectRequiredDateAdapter();
+        /** @docs-private */
+        this.activeDateInput = input(undefined, { ...(ngDevMode ? { debugName: "activeDateInput" } : /* istanbul ignore next */ {}), alias: 'activeDate' });
+        /** @docs-private */
+        this.selectedInput = input(undefined, { ...(ngDevMode ? { debugName: "selectedInput" } : /* istanbul ignore next */ {}), alias: 'selected' });
         /** The minimum selectable date. */
-        this.minDate = input(undefined, ...(ngDevMode ? [{ debugName: "minDate" }] : []));
+        this.minDate = input(undefined, ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
         /** The maximum selectable date. */
-        this.maxDate = input(undefined, ...(ngDevMode ? [{ debugName: "maxDate" }] : []));
+        this.maxDate = input(undefined, ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
         /** Function used to filter which dates are selectable. */
-        this.dateFilter = input(undefined, ...(ngDevMode ? [{ debugName: "dateFilter" }] : []));
+        this.dateFilter = input(undefined, ...(ngDevMode ? [{ debugName: "dateFilter" }] : /* istanbul ignore next */ []));
         /** Function that can be used to add custom CSS classes to dates. */
-        this.dateClass = input(undefined, ...(ngDevMode ? [{ debugName: "dateClass" }] : []));
+        this.dateClass = input(undefined, ...(ngDevMode ? [{ debugName: "dateClass" }] : /* istanbul ignore next */ []));
         /** Emits when a new date is selected. */
         this.selectedChange = output();
         /** Emits when any date is selected. */
@@ -376,9 +355,21 @@ class KbqMonthView {
             // `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();
         });
     }
+    ngOnChanges(changes) {
+        // A bound input is handed to its member; unbound, it leaves what code wrote.
+        if (changes['selectedInput']) {
+            const selected = this.selectedInput();
+            if (selected !== undefined)
+                this.selected = selected;
+        }
+        if (changes['activeDateInput']) {
+            const activeDate = this.activeDateInput();
+            if (activeDate !== undefined)
+                this.activeDate = activeDate;
+        }
+    }
     ngAfterContentInit() {
         this.init();
     }
@@ -390,7 +381,6 @@ class KbqMonthView {
             const selectedDate = this.adapter.createDate(selectedYear, selectedMonth, date);
             this.selectedChange.emit(selectedDate);
         }
-        // TODO: The 'emit' function requires a mandatory void argument
         this.userSelection.emit();
     }
     /** Initializes this month view. */
@@ -445,28 +435,61 @@ 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.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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqMonthView, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: KbqMonthView, isStandalone: true, selector: "kbq-month-view", inputs: { activeDateInput: { classPropertyName: "activeDateInput", publicName: "activeDate", isSignal: true, isRequired: false, transformFunction: null }, selectedInput: { classPropertyName: "selectedInput", publicName: "selected", isSignal: true, 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"], usesOnChanges: true, 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.30", ngImport: i0, type: KbqMonthView, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqMonthView, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-month-view', imports: [
                         KbqCalendarBody
                     ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'kbqMonthView', 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" }]
-        }], ctorParameters: () => [], propDecorators: { activeDate: [{
-                type: Input
-            }], selected: [{
-                type: Input
-            }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], dateClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateClass", required: false }] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }], userSelection: [{ type: i0.Output, args: ["userSelection"] }], activeDateChange: [{ type: i0.Output, args: ["activeDateChange"] }], kbqCalendarBody: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqCalendarBody), { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { activeDateInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeDate", required: false }] }], selectedInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], dateClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateClass", required: false }] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }], userSelection: [{ type: i0.Output, args: ["userSelection"] }], activeDateChange: [{ type: i0.Output, args: ["activeDateChange"] }], kbqCalendarBody: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqCalendarBody), { isSignal: true }] }] } });
 
 /**
  * A calendar that is used as part of the datepicker.
+ *
  * @docs-private
  */
 class KbqCalendar {
+    constructor() {
+        this.adapter = injectRequiredDateAdapter();
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+        /** @docs-private */
+        this.startAtInput = input(undefined, { ...(ngDevMode ? { debugName: "startAtInput" } : /* istanbul ignore next */ {}), alias: 'startAt' });
+        /** @docs-private */
+        this.selectedInput = input(undefined, { ...(ngDevMode ? { debugName: "selectedInput" } : /* istanbul ignore next */ {}), alias: 'selected' });
+        /** @docs-private */
+        this.minDateInput = input(undefined, { ...(ngDevMode ? { debugName: "minDateInput" } : /* istanbul ignore next */ {}), alias: 'minDate' });
+        /** @docs-private */
+        this.maxDateInput = input(undefined, { ...(ngDevMode ? { debugName: "maxDateInput" } : /* istanbul ignore next */ {}), alias: 'maxDate' });
+        /** Function used to filter which dates are selectable. */
+        this.dateFilter = input(undefined, ...(ngDevMode ? [{ debugName: "dateFilter" }] : /* istanbul ignore next */ []));
+        /** Function that can be used to add custom CSS classes to dates. */
+        this.dateClass = input(undefined, ...(ngDevMode ? [{ debugName: "dateClass" }] : /* istanbul ignore next */ []));
+        /** Emits when the currently selected date changes. */
+        this.selectedChange = output();
+        /**
+         * Emits the year chosen in multiyear view.
+         * This doesn't imply a change on the selected date.
+         */
+        this.yearSelected = output();
+        /**
+         * Emits the month chosen in year view.
+         * This doesn't imply a change on the selected date.
+         */
+        this.monthSelected = output();
+        /** Emits when any date is selected. */
+        this.userSelection = output();
+        /** Reference to the current month view component. */
+        this.monthView = viewChild.required(KbqMonthView);
+        /**
+         * Emits whenever there is a state change that the header may need to respond to.
+         */
+        this.stateChanges = new Subject();
+        /** Subscription to value changes in the associated input element. */
+        this.inputSubscription = Subscription.EMPTY;
+    }
     /** A date representing the period (month or year) to start the calendar in. */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
     get startAt() {
         return this._startAt;
     }
@@ -476,8 +499,6 @@ class KbqCalendar {
             deserializedValue !== null ? this.adapter.clampDate(deserializedValue, this.minDate, this.maxDate) : null;
     }
     /** The currently selected date. */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
     get selected() {
         return this._selected;
     }
@@ -485,8 +506,6 @@ class KbqCalendar {
         this._selected = this.adapter.deserialize(value);
     }
     /** The minimum selectable date. */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
     get minDate() {
         return this._minDate;
     }
@@ -495,8 +514,6 @@ class KbqCalendar {
         this.startAt = this._startAt;
     }
     /** The maximum selectable date. */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
     get maxDate() {
         return this._maxDate;
     }
@@ -515,44 +532,19 @@ class KbqCalendar {
         this._activeDate = this.adapter.clampDate(value || this.getActiveDateDefault(), this.minDate, this.maxDate);
         this.stateChanges.next();
     }
-    constructor() {
-        this.adapter = injectRequiredDateAdapter();
-        this.changeDetectorRef = inject(ChangeDetectorRef);
-        /** Function used to filter which dates are selectable. */
-        this.dateFilter = input(undefined, ...(ngDevMode ? [{ debugName: "dateFilter" }] : []));
-        /** Function that can be used to add custom CSS classes to dates. */
-        this.dateClass = input(undefined, ...(ngDevMode ? [{ debugName: "dateClass" }] : []));
-        /** Emits when the currently selected date changes. */
-        this.selectedChange = output();
-        /**
-         * Emits the year chosen in multiyear view.
-         * This doesn't imply a change on the selected date.
-         */
-        this.yearSelected = output();
-        /**
-         * Emits the month chosen in year view.
-         * This doesn't imply a change on the selected date.
-         */
-        this.monthSelected = output();
-        /** Emits when any date is selected. */
-        this.userSelection = output();
-        /** Reference to the current month view component. */
-        this.monthView = viewChild.required(KbqMonthView);
-        /**
-         * Emits whenever there is a state change that the header may need to respond to.
-         */
-        this.stateChanges = new Subject();
-        /** Subscription to value changes in the associated input element. */
-        this.inputSubscription = Subscription.EMPTY;
-        const intl = inject(KbqDatepickerIntl);
-        const changeDetectorRef = this.changeDetectorRef;
-        this.intlChanges = intl.changes.subscribe(() => {
-            changeDetectorRef.markForCheck();
-            this.stateChanges.next();
-        });
-    }
     ngOnChanges(changes) {
-        const change = changes.minDate || changes.maxDate || changes.dateFilter;
+        // A bound input is handed to its member; unbound, it leaves what code wrote. A
+        // bound `undefined` is handed over too, as an unset date: a bound that becomes unset lifts its restriction.
+        if (changes['minDateInput'])
+            this.minDate = this.minDateInput() ?? null;
+        if (changes['maxDateInput'])
+            this.maxDate = this.maxDateInput() ?? null;
+        if (changes['selectedInput'])
+            this.selected = this.selectedInput() ?? null;
+        // After the bounds, which `startAt` is clamped to.
+        if (changes['startAtInput'])
+            this.startAt = this.startAtInput() ?? null;
+        const change = changes['minDateInput'] || changes['maxDateInput'] || changes['dateFilter'];
         if (change && !change.firstChange) {
             const monthView = this.monthView();
             if (monthView) {
@@ -568,12 +560,12 @@ class KbqCalendar {
         this.activeDate = this.getActiveDateDefault();
     }
     ngOnDestroy() {
-        this.intlChanges.unsubscribe();
         this.inputSubscription.unsubscribe();
         this.stateChanges.complete();
     }
     /**
      * Register an input with this calendar.
+     *
      * @param input The calendar input to register with this calendar.
      */
     registerInput(input) {
@@ -599,7 +591,6 @@ class KbqCalendar {
         }
     }
     userSelected() {
-        // TODO: The 'emit' function requires a mandatory void argument
         this.userSelection.emit();
     }
     /**
@@ -613,10 +604,10 @@ class KbqCalendar {
     getActiveDateDefault() {
         return this.startAt || this.adapter.today();
     }
-    /** @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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.25", type: KbqCalendar, isStandalone: true, selector: "kbq-calendar", inputs: { startAtInput: { classPropertyName: "startAtInput", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, selectedInput: { classPropertyName: "selectedInput", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, minDateInput: { classPropertyName: "minDateInput", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDateInput: { classPropertyName: "maxDateInput", 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", 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.30", ngImport: i0, type: KbqCalendar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqCalendar, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-calendar', imports: [
                         KbqCalendarHeader,
@@ -624,1653 +615,1770 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                     ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-calendar'
                     }, exportAs: 'kbqCalendar', 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"] }]
-        }], ctorParameters: () => [], propDecorators: { startAt: [{
-                type: Input
-            }], selected: [{
-                type: Input
-            }], minDate: [{
-                type: Input
-            }], maxDate: [{
-                type: Input
-            }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], dateClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateClass", required: false }] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }], yearSelected: [{ type: i0.Output, args: ["yearSelected"] }], monthSelected: [{ type: i0.Output, args: ["monthSelected"] }], userSelection: [{ type: i0.Output, args: ["userSelection"] }], monthView: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqMonthView), { isSignal: true }] }] } });
+        }], propDecorators: { startAtInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAt", required: false }] }], selectedInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], minDateInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDateInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], dateClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateClass", required: false }] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }], yearSelected: [{ type: i0.Output, args: ["yearSelected"] }], monthSelected: [{ type: i0.Output, args: ["monthSelected"] }], userSelection: [{ type: i0.Output, args: ["userSelection"] }], monthView: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqMonthView), { isSignal: true }] }] } });
 
-/**
- * Animations used by the Koobiq datepicker.
- * @docs-private
- */
-const kbqDatepickerAnimations = {
-    /** Transforms the height of the datepicker's calendar. */
-    transformPanel: trigger('transformPanel', [
-        state('void', style({
-            opacity: 0,
-            transform: 'scale(1, 0.8)'
-        })),
-        transition('void => enter', animate('120ms cubic-bezier(0, 0, 0.2, 1)', style({
-            opacity: 1,
-            transform: 'scale(1, 1)'
-        }))),
-        transition('* => void', animate('100ms linear', style({ opacity: 0 })))
-    ]),
-    /** Fades in the content of the calendar. */
-    fadeInCalendar: trigger('fadeInCalendar', [
-        state('void', style({ opacity: 0 })),
-        state('enter', style({ opacity: 1 })),
-        // need to keep it until #12440 gets in, otherwise the exit animation will look glitchy.
-        transition('void => *', animate('120ms 100ms cubic-bezier(0.55, 0, 0.55, 0.2)'))
-    ])
-};
-
-/** 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. 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();
-}
-/** @docs-private */
-const KBQ_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER = {
-    provide: KBQ_DATEPICKER_SCROLL_STRATEGY,
-    deps: [Overlay],
-    useFactory: KBQ_DATEPICKER_SCROLL_STRATEGY_FACTORY
-};
-/**
- * Component used as the content for the datepicker dialog and popup. We use this instead of using
- * KbqCalendar directly as the content so we can control the initial focus. This also gives us a
- * place to put additional features of the popup that are not part of the calendar itself in the
- * future. (e.g. confirmation buttons).
- * @docs-private
- */
-class KbqDatepickerContent {
-    constructor() {
-        this.changeDetectorRef = inject(ChangeDetectorRef);
-        /** Emits when an animation has finished. */
-        this.animationDone = new Subject();
-        /** Reference to the internal calendar component. */
-        this.calendar = viewChild.required(KbqCalendar);
-        this.subscriptions = new Subscription();
-    }
-    ngAfterViewInit() {
-        this.subscriptions.add(this.datepicker.stateChanges.subscribe(() => {
-            this.changeDetectorRef.markForCheck();
-        }));
-    }
-    ngOnDestroy() {
-        this.subscriptions.unsubscribe();
-        this.animationDone.complete();
-    }
-    startExitAnimation() {
-        this.animationState = 'void';
-        this.changeDetectorRef.markForCheck();
-    }
-    /** @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.30", ngImport: i0, type: KbqDatepickerContent, decorators: [{
-            type: Component,
-            args: [{ selector: 'kbq-datepicker__content', imports: [
-                        KbqCalendar
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
-                        class: 'kbq-datepicker__content',
-                        '[@transformPanel]': 'animationState',
-                        '(@transformPanel.done)': 'animationDone.next()'
-                    }, animations: [
-                        kbqDatepickerAnimations.transformPanel,
-                        kbqDatepickerAnimations.fadeInCalendar
-                    ], exportAs: 'kbqDatepickerContent', 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"] }]
-        }], propDecorators: { calendar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqCalendar), { isSignal: true }] }] } });
-// TODO: We use a component instead of a directive here so the user can use implicit
-// template reference variables (e.g. #d vs #d="kbqDatepicker"). We can change this to a directive
-// if angular adds support for `exportAs: '$implicit'` on directives.
-/** Component responsible for managing the datepicker popup/dialog. */
-class KbqDatepicker {
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get hasBackdrop() {
-        return this._hasBackdrop;
+var DateParts;
+(function (DateParts) {
+    DateParts["year"] = "y";
+    DateParts["month"] = "m";
+    DateParts["day"] = "d";
+})(DateParts || (DateParts = {}));
+const MAX_YEAR = 9999;
+const YEAR_LENGTH = 4;
+class DateDigit {
+    constructor(value, start, length) {
+        this.value = value;
+        this.start = start;
+        this.length = length;
+        this.maxDays = 31;
+        this.maxMonth = 12;
+        if (value === DateParts.day) {
+            this.parse = this.parseDay;
+        }
+        else if (value === DateParts.month) {
+            this.parse = this.parseMonth;
+        }
+        else if (value === DateParts.year) {
+            this.parse = this.parseYear;
+        }
     }
-    set hasBackdrop(value) {
-        this._hasBackdrop = coerceBooleanProperty(value);
+    get end() {
+        return this.start + this.length;
     }
-    /** The date to open the calendar to initially. */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get startAt() {
-        // If an explicit startAt is set we start there, otherwise we start at whatever the currently
-        // selected value is.
-        return this._startAt || this.datepickerInput?.value;
+    get isDay() {
+        return this.value === DateParts.day;
     }
-    set startAt(value) {
-        const deserializedValue = this.dateAdapter.deserialize(value);
-        this._startAt =
-            deserializedValue !== null
-                ? this.dateAdapter.clampDate(deserializedValue, this.minDate(), this.maxDate())
-                : null;
+    get isMonth() {
+        return this.value === DateParts.month;
     }
-    /** Whether the datepicker pop-up should be disabled. */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get disabled() {
-        return this._disabled === undefined && this.datepickerInput ? this.datepickerInput.disabled : this._disabled;
+    get isYear() {
+        return this.value === DateParts.year;
     }
-    set disabled(value) {
-        const newValue = coerceBooleanProperty(value);
-        if (newValue !== this._disabled) {
-            this._disabled = newValue;
-            this.disabledChange.next(newValue);
+    get fullName() {
+        if (this.isDay) {
+            return 'date';
         }
-    }
-    /** Whether the calendar is open. */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get opened() {
-        return this._opened;
-    }
-    set opened(value) {
-        if (coerceBooleanProperty(value)) {
-            this.open();
+        if (this.isMonth) {
+            return 'month';
         }
-        else {
-            this.close();
+        if (this.isYear) {
+            return 'year';
         }
+        return '';
     }
-    /** The currently selected date. */
-    get selected() {
-        return this.validSelected;
-    }
-    set selected(value) {
-        this.validSelected = value;
+    parseDay(value) {
+        const parsedValue = parseInt(value);
+        if (parsedValue === 0) {
+            return 1;
+        }
+        if (parsedValue > this.maxDays) {
+            return this.maxDays;
+        }
+        return parsedValue;
     }
-    get dateFilter() {
-        return this.datepickerInput && this.datepickerInput.dateFilter;
+    parseMonth(value) {
+        const parsedValue = parseInt(value);
+        if (parsedValue === 0) {
+            return 1;
+        }
+        if (parsedValue > this.maxMonth) {
+            return this.maxMonth;
+        }
+        return parsedValue;
     }
-    get value() {
-        return this.selected;
+    parseYear(value) {
+        const parsedValue = parseInt(value);
+        if (parsedValue === 0) {
+            return 1;
+        }
+        if (parsedValue > MAX_YEAR) {
+            return parseInt(value.substring(0, YEAR_LENGTH));
+        }
+        return parsedValue;
     }
-    constructor() {
-        this.overlay = inject(Overlay);
-        this.ngZone = inject(NgZone);
-        this.viewContainerRef = inject(ViewContainerRef);
-        this.dateAdapter = injectRequiredDateAdapter();
-        this.dir = inject(Directionality, { optional: true });
-        this.document = inject(DOCUMENT);
-        this._hasBackdrop = false;
-        this._opened = false;
-        /** The minimum selectable date. */
-        this.minDate = input(undefined, ...(ngDevMode ? [{ debugName: "minDate" }] : []));
-        /** The maximum selectable date. */
-        this.maxDate = input(undefined, ...(ngDevMode ? [{ debugName: "maxDate" }] : []));
-        /**
-         * Emits selected year in multiyear view.
-         * This doesn't imply a change on the selected date.
-         */
-        this.yearSelected = output();
-        /**
-         * Emits selected month in year view.
-         * This doesn't imply a change on the selected date.
-         */
-        this.monthSelected = output();
-        /** Classes to be passed to the date picker panel. Supports the same syntax as the `[class]` binding. */
-        this.panelClass = input(undefined, ...(ngDevMode ? [{ debugName: "panelClass" }] : []));
-        /** Function that can be used to add custom CSS classes to dates. */
-        this.dateClass = input(undefined, ...(ngDevMode ? [{ debugName: "dateClass" }] : []));
-        this.backdropClass = input('cdk-overlay-transparent-backdrop', ...(ngDevMode ? [{ debugName: "backdropClass" }] : []));
-        /** Emits when the datepicker has been opened. */
-        this.openedStream = output({ alias: 'opened' });
-        /** Emits when the datepicker has been closed. */
-        this.closedStream = output({ alias: 'closed' });
-        this.stateChanges = new Subject();
-        /** Emits when the datepicker is disabled. */
-        this.disabledChange = new Subject();
-        /** Emits new selected date when selected date changes. */
-        this.selectedChanged = new Subject();
-        /** The id for the datepicker calendar. */
-        this.id = `kbq-datepicker-${datepickerUid++}`;
-        this.validSelected = null;
-        /** The element that was focused before the datepicker was opened. */
-        this.focusedElementBeforeOpen = null;
-        /** Subscription to value changes in the associated input element. */
-        this.inputSubscription = Subscription.EMPTY;
-        this.closeSubscription = Subscription.EMPTY;
-        this.scrollStrategy = inject(KBQ_DATEPICKER_SCROLL_STRATEGY);
+}
+/** @docs-private */
+const KBQ_DATEPICKER_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => KbqDatepickerInput),
+    multi: true
+};
+/** @docs-private */
+const KBQ_DATEPICKER_VALIDATORS = {
+    provide: NG_VALIDATORS,
+    useExisting: forwardRef(() => KbqDatepickerInput),
+    multi: true
+};
+/** default configuration of datepicker */
+/** @docs-private */
+const KBQ_DATEPICKER_DEFAULT_LOCALE_CONFIGURATION = ruRULocaleData.datepicker;
+/** The `datepicker` section of the shipped locale `localeId`, if the library ships one. */
+const shippedDatepickerLocaleConfiguration = (localeId) => {
+    const shipped = KBQ_DEFAULT_LOCALE_DATA_FACTORY();
+    const locale = shipped[localeId];
+    // A shipped locale is complete, its sections included.
+    return locale && !Array.isArray(locale) ? locale.datepicker : undefined;
+};
+/** The values of the token's own factory, told apart from strings an application provides for the token. */
+const factoryDefaults = new WeakSet();
+/** Injection Token for providing configuration of datepicker */
+/** @docs-private */
+const KBQ_DATEPICKER_LOCALE_CONFIGURATION = new InjectionToken('KbqDatepickerLocaleConfiguration', {
+    factory: () => {
+        // A copy: the shipped section itself may also be provided on purpose.
+        const configuration = {
+            ...(shippedDatepickerLocaleConfiguration(inject(KBQ_DATE_LOCALE)) ??
+                KBQ_DATEPICKER_DEFAULT_LOCALE_CONFIGURATION)
+        };
+        factoryDefaults.add(configuration);
+        return configuration;
     }
-    ngOnDestroy() {
-        this.close();
-        this.inputSubscription.unsubscribe();
-        this.closeSubscription.unsubscribe();
-        this.disabledChange.complete();
-        this.destroyOverlay();
+});
+/** The default strings of one input. */
+const KBQ_DATEPICKER_INPUT_LOCALE_CONFIGURATION = new InjectionToken('KbqDatepickerInputLocaleConfiguration');
+/**
+ * Unless strings are provided for the token, those of the format the input parses: the token's own default resolves
+ * in the root injector, which knows only the date locale of the application, not the date adapter of the input.
+ */
+const datepickerInputLocaleConfiguration = () => {
+    const configuration = inject(KBQ_DATEPICKER_LOCALE_CONFIGURATION);
+    const adapter = inject(DateAdapter, { optional: true });
+    if (!factoryDefaults.has(configuration) || !adapter?.config)
+        return configuration;
+    const format = inject(KBQ_DATE_FORMATS, { optional: true })?.dateInput || adapter.config.dateInput;
+    // The shipped placeholders name the locale's own format, lower-cased and translated.
+    const shipped = format === adapter.config.dateInput && shippedDatepickerLocaleConfiguration(adapter.config.name);
+    return shipped || { placeholder: format.toLowerCase() };
+};
+/**
+ * Utility provider for `KBQ_DATEPICKER_LOCALE_CONFIGURATION`. Only the strings you pass are overridden; the rest
+ * keep following the active locale.
+ */
+const kbqDatepickerLocaleConfigurationProvider = (configuration) => kbqLocaleConfigurationOverrideProvider('datepicker', configuration);
+/** @deprecated Use {@link KBQ_DATEPICKER_DEFAULT_LOCALE_CONFIGURATION}. Will be removed in 22.0.0. */
+const KBQ_DATEPICKER_DEFAULT_CONFIGURATION = KBQ_DATEPICKER_DEFAULT_LOCALE_CONFIGURATION;
+/** @deprecated Use {@link KBQ_DATEPICKER_LOCALE_CONFIGURATION}. Will be removed in 22.0.0. */
+const KBQ_DATEPICKER_CONFIGURATION = KBQ_DATEPICKER_LOCALE_CONFIGURATION;
+/**
+ * An event used for datepicker input and change events. We don't always have access to a native
+ * input or change event because the event may have been triggered by the user clicking on the
+ * calendar popup. For consistency, we always use KbqDatepickerInputEvent instead.
+ */
+class KbqDatepickerInputEvent {
+    constructor(
+    /** Reference to the datepicker input component that emitted the event. */
+    target, 
+    /** Reference to the native input element associated with the datepicker input. */
+    targetElement) {
+        this.target = target;
+        this.targetElement = targetElement;
+        this.value = this.target.value();
     }
-    /** Selects the given date */
-    select(date) {
-        const oldValue = this.selected;
-        this.selected = date;
-        if (!this.dateAdapter.sameDate(oldValue, this.selected)) {
-            this.selectedChanged.next(date);
+}
+let uniqueComponentIdSuffix = 0;
+/** Directive used to connect an input to a KbqDatepicker. */
+class KbqDatepickerInput {
+    /** The datepicker that this input is associated with. */
+    set kbqDatepicker(value) {
+        if (!value) {
+            return;
         }
+        this.datepicker = value;
+        this.datepicker.registerInput(this);
+        this.datepickerSubscription.unsubscribe();
+        this.datepickerSubscription = this.datepicker.selectedChanged.subscribe((selected) => {
+            const newValue = this.saveTimePart(selected);
+            this.setValue(newValue);
+            this.cvaOnChange(newValue);
+            this.onTouched();
+            this.dateChange.emit(new KbqDatepickerInputEvent(this, this.elementRef.nativeElement));
+        });
     }
-    /** Emits the selected year in multiyear view */
-    selectYear(normalizedYear) {
-        this.yearSelected.emit(normalizedYear);
+    /** The calendar that this input is associated with. */
+    set kbqCalendar(value) {
+        if (!value) {
+            return;
+        }
+        this.calendar = value;
+        this.calendar.registerInput(this);
     }
-    /** Emits selected month in year view */
-    selectMonth(normalizedMonth) {
-        this.monthSelected.emit(normalizedMonth);
+    /** Function that can be used to filter out dates within the datepicker. `undefined` removes the filter. */
+    set kbqDatepickerFilter(value) {
+        // `dateFilter` is unset until a filter is given; `undefined` returns it there.
+        this.dateFilter = value;
+        this.validatorOnChange();
     }
     /**
-     * Register an input with this datepicker.
-     * @param input The datepicker input to register with this datepicker.
+     * 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.
      */
-    registerInput(input) {
-        if (this.datepickerInput) {
-            throw Error('A KbqDatepicker can only be associated with a single input.');
-        }
-        this.datepickerInput = input;
-        this.inputSubscription = this.datepickerInput.valueChange.subscribe((value) => {
-            this.selected = value;
-            if (this.popupComponentRef) {
-                const calendar = this.popupComponentRef.instance.calendar();
-                calendar.monthView()?.init();
-                calendar.activeDate = value;
-            }
-        });
+    get min() {
+        return this._min;
     }
-    /** Open the calendar. */
-    open() {
-        if (this._opened || this.disabled) {
-            return;
-        }
-        if (!this.datepickerInput) {
-            throw Error('Attempted to open an KbqDatepicker with no associated input.');
-        }
-        if (this.document) {
-            this.focusedElementBeforeOpen = _getFocusedElementPierceShadowDom();
-        }
-        this.openAsPopup();
-        this._opened = true;
-        // TODO: The 'emit' function requires a mandatory void argument
-        this.openedStream.emit();
+    set min(value) {
+        this._min = this.getValidDateOrNull(this.adapter.deserialize(value));
+        this.validatorOnChange();
     }
-    /** Close the calendar. */
-    close(restoreFocus = true) {
-        if (!this._opened) {
-            return;
-        }
-        if (this.popupComponentRef) {
-            const instance = this.popupComponentRef.instance;
-            instance.startExitAnimation();
-            instance.animationDone.pipe(take(1)).subscribe(() => this.destroyOverlay());
-        }
-        if (restoreFocus) {
-            this.focusedElementBeforeOpen.focus();
-        }
-        this._opened = false;
-        // TODO: The 'emit' function requires a mandatory void argument
-        this.closedStream.emit();
-        this.focusedElementBeforeOpen = null;
+    /**
+     * 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.
+     */
+    get max() {
+        return this._max;
     }
-    toggle() {
-        if (this.datepickerInput.isReadOnly) {
+    set max(value) {
+        this._max = this.getValidDateOrNull(this.adapter.deserialize(value));
+        this.validatorOnChange();
+    }
+    set kbqValidationTooltip(tooltip) {
+        if (!tooltip) {
             return;
         }
-        if (this._opened) {
-            this.close();
-        }
-        else {
-            this.open();
-        }
+        tooltip.enterDelay = validationTooltipShowDelay;
+        tooltip.trigger = 'manual';
+        tooltip.initListeners();
+        this.incorrectInput.subscribe(() => {
+            if (tooltip.isOpen) {
+                return;
+            }
+            tooltip.show();
+            setTimeout(() => tooltip.hide(), validationTooltipHideDelay);
+        });
     }
-    /** Destroys the current overlay. */
-    destroyOverlay() {
-        if (this.popupRef) {
-            this.popupRef.dispose();
-            this.popupRef = this.popupComponentRef = null;
-        }
+    get viewValue() {
+        return this.elementRef.nativeElement.value;
     }
-    /** Open the calendar as a popup. */
-    openAsPopup() {
-        if (!this.calendarPortal) {
-            this.calendarPortal = new ComponentPortal(KbqDatepickerContent, this.viewContainerRef);
-        }
-        if (!this.popupRef) {
-            this.createPopup();
-        }
-        if (!this.popupRef.hasAttached()) {
-            this.popupComponentRef = this.popupRef.attach(this.calendarPortal);
-            this.popupComponentRef.instance.datepicker = this;
-            // Update the position once the calendar has rendered.
-            this.ngZone.onStable
-                .asObservable()
-                .pipe(take(1))
-                .subscribe(() => this.popupRef?.updatePosition());
-        }
+    get ngControl() {
+        return this.control;
     }
-    /** Create the popup. */
-    createPopup() {
-        const overlayConfig = new OverlayConfig({
-            positionStrategy: this.createPopupPositionStrategy(),
-            hasBackdrop: this.hasBackdrop,
-            backdropClass: this.backdropClass(),
-            direction: this.dir,
-            scrollStrategy: this.scrollStrategy(),
-            panelClass: 'kbq-datepicker__popup'
-        });
-        this.popupRef = this.overlay.create(overlayConfig);
-        this.closeSubscription = this.closingActions().subscribe(() => this.close(this.restoreFocus()));
+    get isReadOnly() {
+        return this.elementRef.nativeElement.readOnly;
     }
-    restoreFocus() {
-        return this.document.activeElement === this.document.body;
+    get dateInputFormat() {
+        return this.dateFormats?.dateInput || this.adapter.config.dateInput;
     }
-    closingActions() {
-        return merge(this.popupRef.backdropClick(), this.popupRef.outsidePointerEvents(), this.popupRef.detachments());
+    get readyForParse() {
+        return !!(this.firstDigit && this.secondDigit && this.thirdDigit);
     }
-    /** Create the popup PositionStrategy. */
-    createPopupPositionStrategy() {
-        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([
-            {
-                originX: 'start',
-                originY: 'bottom',
-                overlayX: 'start',
-                overlayY: 'top',
-                panelClass: KBQ_CONNECTED_OVERLAY_BELOW_CLASS
-            },
-            {
-                originX: 'start',
-                originY: 'top',
-                overlayX: 'start',
-                overlayY: 'bottom',
-                panelClass: KBQ_CONNECTED_OVERLAY_ABOVE_CLASS
-            },
-            {
-                originX: 'end',
-                originY: 'bottom',
-                overlayX: 'end',
-                overlayY: 'top'
-            },
-            {
-                originX: 'end',
-                originY: 'top',
-                overlayX: 'end',
-                overlayY: 'bottom'
+    get selectionStart() {
+        return this.elementRef.nativeElement.selectionStart;
+    }
+    get selectionEnd() {
+        return this.elementRef.nativeElement.selectionEnd;
+    }
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.renderer = inject(Renderer2);
+        this.adapter = injectRequiredDateAdapter();
+        this.timezoneService = inject(KbqDateTimezoneService);
+        this.dateFormats = inject(KBQ_DATE_FORMATS, { optional: true });
+        /** @docs-private */
+        this.formField = inject(KBQ_FORM_FIELD, { optional: true, host: true });
+        this.localeConfiguration = inject(KbqLocaleOverridesDirective, { self: true }).read('datepicker', KBQ_DATEPICKER_INPUT_LOCALE_CONFIGURATION);
+        this.errorStateTracker = new KbqErrorStateTracker(inject(ErrorStateMatcher), 
+        // update ngControl later, so it will be initialized
+        null, inject(FormGroupDirective, { optional: true }), inject(NgForm, { optional: true }));
+        /** Whether the input is in an error state. */
+        this.errorState = this.errorStateTracker.errorState;
+        this.controlType = 'datepicker';
+        this.focusedValue = signal(false, ...(ngDevMode ? [{ debugName: "focusedValue" }] : /* istanbul ignore next */ []));
+        /** Whether the input has focus. */
+        this.focused = this.focusedValue.asReadonly();
+        /** Emits when the value changes (either due to user input or programmatic change). */
+        this.valueChange = new EventEmitter();
+        /** Emits when the disabled state has changed */
+        this.disabledChange = new EventEmitter();
+        /** Object used to control when error messages are shown. */
+        this.errorStateMatcher = input(...(ngDevMode ? [undefined, { debugName: "errorStateMatcher" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        this.placeholderInput = input(undefined, { ...(ngDevMode ? { debugName: "placeholderInput" } : /* istanbul ignore next */ {}), alias: 'placeholder' });
+        /** Placeholder of the input. Defaults to the localized date pattern. */
+        this.placeholder = computed(() => this.placeholderInput() || this.localeConfiguration().placeholder, ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        /** Whether the input is required. */
+        this.required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** @docs-private */
+        this.kbqDatepickerInput = input(undefined, { ...(ngDevMode ? { debugName: "kbqDatepickerInput" } : /* istanbul ignore next */ {}), alias: 'kbqDatepicker' });
+        /** @docs-private */
+        this.kbqCalendarInput = input(undefined, { ...(ngDevMode ? { debugName: "kbqCalendarInput" } : /* istanbul ignore next */ {}), alias: 'kbqCalendar' });
+        /** @docs-private */
+        this.kbqDatepickerFilterInput = input(undefined, { ...(ngDevMode ? { debugName: "kbqDatepickerFilterInput" } : /* istanbul ignore next */ {}), alias: 'kbqDatepickerFilter' });
+        /** @docs-private */
+        this.valueInput = input(undefined, { ...(ngDevMode ? { debugName: "valueInput" } : /* istanbul ignore next */ {}), alias: 'value' });
+        this.valueState = signal(null, ...(ngDevMode ? [{ debugName: "valueState" }] : /* istanbul ignore next */ []));
+        /** The date the input holds: set with `[value]`, by the form control, by typing and by the calendar. */
+        this.value = this.valueState.asReadonly();
+        /** @docs-private */
+        this.minInput = input(undefined, { ...(ngDevMode ? { debugName: "minInput" } : /* istanbul ignore next */ {}), alias: 'min' });
+        /** @docs-private */
+        this.maxInput = input(undefined, { ...(ngDevMode ? { debugName: "maxInput" } : /* istanbul ignore next */ {}), alias: 'max' });
+        /** @docs-private */
+        this.disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled',
+            transform: booleanAttribute });
+        /** Whether the datepicker-input is disabled. Also set by the bound form control. */
+        this.disabled = linkedSignal(() => this.disabledInput(), ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        this.idInput = input(undefined, { ...(ngDevMode ? { debugName: "idInput" } : /* istanbul ignore next */ {}), alias: 'id' });
+        /** Unique id of the element, generated when not provided. */
+        this.id = computed(() => this.idInput() || this.uid, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        this.kbqValidationTooltipInput = input(undefined, { ...(ngDevMode ? { debugName: "kbqValidationTooltipInput" } : /* istanbul ignore next */ {}), alias: 'kbqValidationTooltip' });
+        this.incorrectInput = output();
+        /** Emits when a `change` event is fired on this `<input>`. */
+        this.dateChange = output();
+        /** Emits when an `input` event is fired on this `<input>`. */
+        this.dateInput = output();
+        this.emptyValue = signal(true, ...(ngDevMode ? [{ debugName: "emptyValue" }] : /* istanbul ignore next */ []));
+        /** Whether the input renders no text. */
+        this.empty = this.emptyValue.asReadonly();
+        this.uid = `kbq-datepicker-input-${uniqueComponentIdSuffix++}`;
+        this.datepickerSubscription = Subscription.EMPTY;
+        /** Whether the last value set on the input was valid. */
+        this.lastValueValid = false;
+        this.firstDigit = null;
+        this.secondDigit = null;
+        this.thirdDigit = null;
+        /** Work the keys left to timers, in the order the timers run. */
+        this.deferred = new Map();
+        /**
+         * Called when the control is blurred. Needed to properly implement `ControlValueAccessor`.
+         *
+         * @docs-private
+         */
+        this.onTouched = () => { };
+        this.onInput = () => {
+            const cursorPosition = this.correctedCursorPosition();
+            const formattedValue = this.replaceSymbols(this.viewValue);
+            const newTimeObj = this.getDateFromString(formattedValue);
+            this.lastValueValid = !!newTimeObj;
+            if (!newTimeObj) {
+                if (!this.viewValue) {
+                    this.lastValueValid = false;
+                    this.updateValue(newTimeObj);
+                }
+                else {
+                    this.control?.updateValueAndValidity();
+                }
+                return;
             }
-        ]));
+            this.setViewValue(this.getTimeStringFromDate(newTimeObj, this.dateInputFormat), true);
+            this.selectNextDigitByCursor(cursorPosition);
+            this.updateValue(newTimeObj);
+        };
+        this.parseOnBlur = () => {
+            if (!this.viewValue || !this.readyForParse) {
+                return null;
+            }
+            const date = this.getDefaultValue();
+            const viewDigits = this.viewValue
+                .split(this.separator)
+                .map((value) => value)
+                .filter((value) => value);
+            const [firsViewDigit, secondViewDigit, thirdViewDigit] = viewDigits;
+            if (viewDigits.length !== 3) {
+                this.lastValueValid = false;
+                this.valueState.set(null);
+                return setTimeout(() => this.control?.updateValueAndValidity());
+            }
+            date[this.firstDigit.fullName] = this.firstDigit.parse(firsViewDigit);
+            date[this.secondDigit.fullName] = this.secondDigit.parse(secondViewDigit);
+            date[this.thirdDigit.fullName] = this.thirdDigit.parse(thirdViewDigit);
+            const [digitWithYear, viewDigitWithYear] = [this.firstDigit, this.secondDigit, this.thirdDigit].reduce((acc, digit, index) => (digit.value === DateParts.year ? [digit, viewDigits[index]] : acc), []);
+            if (viewDigitWithYear.length < 3) {
+                date.year += date.year < 30 ? 2000 : 1900;
+            }
+            else if (viewDigitWithYear.length < digitWithYear.length) {
+                this.lastValueValid = false;
+                this.valueState.set(null);
+                return setTimeout(() => this.control?.updateValueAndValidity());
+            }
+            const newTimeObj = this.createDateTime(date);
+            if (!newTimeObj) {
+                this.lastValueValid = false;
+                this.valueState.set(null);
+                this.cvaOnChange(null);
+                return setTimeout(() => this.control?.updateValueAndValidity());
+            }
+            /* Check if the number of days entered does not match the entered month */
+            if (!this.getValidDateOrNull(newTimeObj)) {
+                return null;
+            }
+            this.lastValueValid = !!newTimeObj;
+            this.setViewValue(this.getTimeStringFromDate(newTimeObj, this.dateInputFormat), true);
+            this.updateValue(newTimeObj);
+        };
+        this.cvaOnChange = () => { };
+        this.validatorOnChange = () => { };
+        /** The form control validator for whether the input parses. */
+        this.parseValidator = () => {
+            return this.focused() || this.isEmpty() || this.lastValueValid
+                ? null
+                : { kbqDatepickerParse: { text: this.elementRef.nativeElement.value } };
+        };
+        /** The form control validator for the min date. */
+        this.minValidator = (control) => {
+            // 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.getValidDateOrNull(this.adapter.deserialize(control.value));
+            return !this.max || !controlValue || this.adapter.compareDateTime(this.max, controlValue) >= 0
+                ? null
+                : { kbqDatepickerMax: { max: this.max, actual: controlValue } };
+        };
+        /** The form control validator for the date filter. */
+        this.filterValidator = (control) => {
+            const controlValue = this.adapter.deserialize(control.value);
+            return !this.dateFilter || !controlValue || this.dateFilter(controlValue)
+                ? null
+                : { kbqDatepickerFilter: true };
+        };
+        this.validator = Validators.compose([
+            this.parseValidator,
+            this.minValidator,
+            this.maxValidator,
+            this.filterValidator
+        ]);
+        this.setFormat(this.dateInputFormat);
+        // A bound value is applied whenever the binding changes; an unbound one leaves the value to the form.
+        let bound = false;
+        effect(() => {
+            const value = this.valueInput();
+            if (!bound && value === undefined)
+                return;
+            bound = true;
+            untracked(() => this.setValue(value ?? null));
+        });
+        let wasDisabled = false;
+        effect(() => {
+            const disabled = this.disabled();
+            untracked(() => {
+                if (disabled !== wasDisabled) {
+                    wasDisabled = disabled;
+                    this.disabledChange.emit(disabled);
+                }
+                const element = this.elementRef.nativeElement;
+                // We need to null check the `blur` method, because it's undefined during SSR.
+                if (disabled && element.blur) {
+                    // Normally, native input elements automatically blur if they turn disabled. This behavior
+                    // is problematic, because it would mean that it triggers another change detection cycle,
+                    // which then causes a changed after checked error if the input element was focused before.
+                    element.blur();
+                }
+            });
+        });
+        let isFirstRun = true;
+        effect(() => {
+            this.localeConfiguration();
+            // Nothing to re-format on the first run: `setFormat` above already ran against the active
+            // locale, while re-assigning `value` here would emit `valueChange` at a point where the
+            // datepicker and the calendar are already subscribed to it.
+            if (isFirstRun) {
+                isFirstRun = false;
+                return;
+            }
+            // The date adapter follows the same locale, so its input format may have changed with it: the
+            // digit layout has to be re-derived and the rendered value re-formatted.
+            untracked(() => {
+                this.setFormat(this.dateInputFormat);
+                this.setValue(this.valueState());
+            });
+        });
+        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.setValue(this.valueState());
+        });
     }
-    /** @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.30", ngImport: i0, type: KbqDatepicker, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'kbq-datepicker',
-                    template: '',
-                    providers: [{ provide: KbqFormFieldControl, useExisting: KbqDatepicker }],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    exportAs: 'kbqDatepicker'
-                }]
-        }], ctorParameters: () => [], propDecorators: { hasBackdrop: [{
-                type: Input
-            }], startAt: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], opened: [{
-                type: Input
-            }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], yearSelected: [{ type: i0.Output, args: ["yearSelected"] }], monthSelected: [{ type: i0.Output, args: ["monthSelected"] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], dateClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateClass", required: false }] }], backdropClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdropClass", required: false }] }], openedStream: [{ type: i0.Output, args: ["opened"] }], closedStream: [{ type: i0.Output, args: ["closed"] }] } });
-
-var DateParts;
-(function (DateParts) {
-    DateParts["year"] = "y";
-    DateParts["month"] = "m";
-    DateParts["day"] = "d";
-})(DateParts || (DateParts = {}));
-const MAX_YEAR = 9999;
-const YEAR_LENGTH = 4;
-class DateDigit {
-    constructor(value, start, length) {
-        this.value = value;
-        this.start = start;
-        this.length = length;
-        this.maxDays = 31;
-        this.maxMonth = 12;
-        if (value === DateParts.day) {
-            this.parse = this.parseDay;
+    ngOnChanges(changes) {
+        // A bound input is handed to its member; unbound, it leaves what code wrote.
+        // Not in an effect, which runs too late: `min`, `max` and the filter revalidate the form control before the
+        // template reads its errors.
+        if (changes['kbqDatepickerInput']) {
+            const datepicker = this.kbqDatepickerInput();
+            if (datepicker !== undefined)
+                this.kbqDatepicker = datepicker;
+        }
+        if (changes['kbqCalendarInput']) {
+            const calendar = this.kbqCalendarInput();
+            if (calendar !== undefined)
+                this.kbqCalendar = calendar;
+        }
+        // A bound `undefined` is handed over too: it removes the filter.
+        if (changes['kbqDatepickerFilterInput'])
+            this.kbqDatepickerFilter = this.kbqDatepickerFilterInput();
+        if (changes['minInput'])
+            this.min = this.minInput() ?? null;
+        if (changes['maxInput'])
+            this.max = this.maxInput() ?? null;
+        if (changes['kbqValidationTooltipInput']) {
+            const tooltip = this.kbqValidationTooltipInput();
+            if (tooltip !== undefined)
+                this.kbqValidationTooltip = tooltip;
         }
-        else if (value === DateParts.month) {
-            this.parse = this.parseMonth;
+    }
+    ngDoCheck() {
+        if (this.ngControl) {
+            // We need to re-evaluate this on every change detection cycle, because there are some
+            // error triggers that we can't subscribe to (e.g. parent form submissions). This means
+            // that whatever logic is in here has to be super lean or we risk destroying the performance.
+            this.updateErrorState();
         }
-        else if (value === DateParts.year) {
-            this.parse = this.parseYear;
+        // The browser changes the rendered text without notice as the user types; `setViewValue()` covers the rest.
+        this.emptyValue.set(this.isEmpty());
+    }
+    onContainerClick() {
+        this.focus();
+    }
+    focus() {
+        this.elementRef.nativeElement.focus();
+    }
+    focusChanged(isFocused) {
+        if (isFocused !== this.focused()) {
+            this.focusedValue.set(isFocused);
+            this.onTouched();
         }
     }
-    get end() {
-        return this.start + this.length;
+    ngAfterContentInit() {
+        this.updateErrorState();
     }
-    get isDay() {
-        return this.value === DateParts.day;
+    ngOnDestroy() {
+        this.datepickerSubscription.unsubscribe();
+        this.valueChange.complete();
+        this.disabledChange.complete();
     }
-    get isMonth() {
-        return this.value === DateParts.month;
+    /** @docs-private */
+    registerOnValidatorChange(fn) {
+        this.validatorOnChange = fn;
     }
-    get isYear() {
-        return this.value === DateParts.year;
+    /** @docs-private */
+    validate(control) {
+        this.setControl(control);
+        // Untracked, as `writeValue()`: a form control set from a consumer's `effect()` writes and validates on the
+        // spot, and the state read on the way — `focused`, the value — would make the effect run again.
+        return this.validator ? untracked(() => this.validator(control)) : null;
     }
-    get fullName() {
-        if (this.isDay) {
-            return 'date';
+    // Implemented as part of ControlValueAccessor.
+    writeValue(value) {
+        untracked(() => this.setValue(value));
+    }
+    // Implemented as part of ControlValueAccessor.
+    registerOnChange(fn) {
+        this.cvaOnChange = fn;
+    }
+    // Implemented as part of ControlValueAccessor.
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    // Implemented as part of ControlValueAccessor.
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+    }
+    onKeyDown(event) {
+        if (this.isReadOnly) {
+            return;
         }
-        if (this.isMonth) {
-            return 'month';
+        // Keys from a scanner, an autotype or a busy page arrive before the timers the previous ones set. Run that
+        // work first, so that each key acts on the value and selection a slower typist's would.
+        this.runDeferred();
+        const keyCode = event.keyCode;
+        if (this.isLetterKey(event)) {
+            event.preventDefault();
+            this.incorrectInput.emit();
         }
-        if (this.isYear) {
-            return 'year';
+        else if (this.isKeyForOpen(event)) {
+            event.preventDefault();
+            this.datepicker?.open();
         }
-        return '';
-    }
-    parseDay(value) {
-        const parsedValue = parseInt(value);
-        if (parsedValue === 0) {
-            return 1;
+        else if (this.isKeyForClose(event)) {
+            // Consumed only when there is a calendar to close, so a dialog around the input still takes the key.
+            if (!this.datepicker?.opened)
+                return;
+            event.preventDefault();
+            this.datepicker.close();
         }
-        if (parsedValue > this.maxDays) {
-            return this.maxDays;
+        else if (keyCode === TAB) {
+            this.datepicker?.close(false);
         }
-        return parsedValue;
-    }
-    parseMonth(value) {
-        const parsedValue = parseInt(value);
-        if (parsedValue === 0) {
-            return 1;
+        else if (this.isKeyForByPass(event)) {
+            return;
         }
-        if (parsedValue > this.maxMonth) {
-            return this.maxMonth;
+        else if (keyCode === SPACE) {
+            this.spaceKeyHandler(event);
         }
-        return parsedValue;
-    }
-    parseYear(value) {
-        const parsedValue = parseInt(value);
-        if (parsedValue === 0) {
-            return 1;
+        else if ([UP_ARROW, DOWN_ARROW].includes(keyCode)) {
+            event.preventDefault();
+            this.verticalArrowKeyHandler(keyCode);
         }
-        if (parsedValue > MAX_YEAR) {
-            return parseInt(value.substring(0, YEAR_LENGTH));
+        else if ([LEFT_ARROW, RIGHT_ARROW, HOME, PAGE_UP, END, PAGE_DOWN].includes(keyCode)) {
+            event.preventDefault();
+            this.changeCaretPosition(keyCode);
+        }
+        else if (/^\D$/.test(event.key)) {
+            event.preventDefault();
+            const newValue = this.getNewValue(event.key, this.selectionStart);
+            const formattedValue = this.replaceSymbols(newValue);
+            if (newValue !== formattedValue) {
+                this.setViewValue(formattedValue, true);
+                this.defer(this.onInput);
+            }
+            else {
+                this.incorrectInput.emit();
+            }
+        }
+        else {
+            this.defer(this.onInput);
         }
-        return parsedValue;
-    }
-}
-/** @docs-private */
-const KBQ_DATEPICKER_VALUE_ACCESSOR = {
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => KbqDatepickerInput),
-    multi: true
-};
-/** @docs-private */
-const KBQ_DATEPICKER_VALIDATORS = {
-    provide: NG_VALIDATORS,
-    useExisting: forwardRef(() => KbqDatepickerInput),
-    multi: true
-};
-/** default configuration of datepicker */
-/** @docs-private */
-const KBQ_DATEPICKER_DEFAULT_CONFIGURATION = ruRULocaleData.datepicker;
-/** Injection Token for providing configuration of datepicker */
-/** @docs-private */
-const KBQ_DATEPICKER_CONFIGURATION = new InjectionToken('KbqDatepickerConfiguration');
-/**
- * An event used for datepicker input and change events. We don't always have access to a native
- * input or change event because the event may have been triggered by the user clicking on the
- * calendar popup. For consistency, we always use KbqDatepickerInputEvent instead.
- */
-class KbqDatepickerInputEvent {
-    constructor(
-    /** Reference to the datepicker input component that emitted the event. */
-    target, 
-    /** Reference to the native input element associated with the datepicker input. */
-    targetElement) {
-        this.target = target;
-        this.targetElement = targetElement;
-        this.value = this.target.value;
-    }
-}
-let uniqueComponentIdSuffix = 0;
-/** Directive used to connect an input to a KbqDatepicker. */
-class KbqDatepickerInput {
-    /** Object used to control when error messages are shown. */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get errorStateMatcher() {
-        return this.errorStateTracker.errorStateMatcher;
     }
-    set errorStateMatcher(value) {
-        this.errorStateTracker.errorStateMatcher = value;
+    onChange() {
+        setTimeout(() => {
+            this.dateChange.emit(new KbqDatepickerInputEvent(this, this.elementRef.nativeElement));
+        });
     }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get placeholder() {
-        return this._placeholder || this.configuration.placeholder;
+    /** Handles blur events on the input. */
+    onBlur() {
+        // Reformat the input only if we have a valid value.
+        this.parseOnBlur();
+        this.focusChanged(false);
+        this.onInput();
     }
-    set placeholder(value) {
-        this._placeholder = value;
+    onPaste($event) {
+        $event.preventDefault();
+        let rawValue = $event.clipboardData.getData('text');
+        if (rawValue.match(/^\d\D/)) {
+            rawValue = `0${rawValue}`;
+        }
+        rawValue.replace(/[^A-Za-z0-9]+/g, this.separator);
+        if (/[a-z]/gi.test(rawValue)) {
+            this.incorrectInput.emit();
+        }
+        const match = rawValue.match(/^(?<first>\d+)\W(?<second>\d+)\W(?<third>\d+)$/);
+        if (!match?.groups?.first || !match?.groups?.second || !match?.groups?.third) {
+            this.setViewValue(rawValue);
+            return rawValue;
+        }
+        const value = [match.groups.first, match.groups.second, match.groups.third].join(this.separator);
+        const newTimeObj = this.getDateFromString(value);
+        if (!newTimeObj) {
+            this.setViewValue(value);
+            return value;
+        }
+        this.setViewValue(this.getTimeStringFromDate(newTimeObj, this.dateInputFormat));
+        this.updateValue(newTimeObj);
     }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get required() {
-        return this._required;
+    toISO8601(value) {
+        return this.adapter.toIso8601(value);
     }
-    set required(value) {
-        this._required = coerceBooleanProperty(value);
+    /** Refreshes the error state of the input. */
+    updateErrorState() {
+        this.errorStateTracker.errorStateMatcher = this.errorStateMatcher();
+        this.errorStateTracker.updateErrorState();
     }
-    /** The datepicker that this input is associated with. */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    set kbqDatepicker(value) {
-        if (!value) {
-            return;
-        }
-        this.datepicker = value;
-        this.datepicker.registerInput(this);
-        this.datepickerSubscription.unsubscribe();
-        this.datepickerSubscription = this.datepicker.selectedChanged.subscribe((selected) => {
-            const newValue = this.saveTimePart(selected);
-            this.value = newValue;
-            this.cvaOnChange(newValue);
-            this.onTouched();
-            this.dateChange.emit(new KbqDatepickerInputEvent(this, this.elementRef.nativeElement));
-        });
+    /** Returns the ElementRef of the formField if it exists; otherwise, returns the ElementRef of the input. */
+    getOrigin() {
+        return this.formField ? this.formField.getConnectedOverlayOrigin() : this.elementRef;
     }
-    /** The calendar that this input is associated with. */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    set kbqCalendar(value) {
+    saveTimePart(selected) {
+        const value = this.value();
         if (!value) {
-            return;
+            return selected;
         }
-        this.calendar = value;
-        this.calendar.registerInput(this);
-    }
-    /** Function that can be used to filter out dates within the datepicker. */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    set kbqDatepickerFilter(value) {
-        this.dateFilter = value;
-        this.validatorOnChange();
+        const years = this.adapter.getYear(selected);
+        const month = this.adapter.getMonth(selected);
+        const day = this.adapter.getDate(selected);
+        const hours = this.adapter.getHours(value);
+        const minutes = this.adapter.getMinutes(value);
+        const seconds = this.adapter.getSeconds(value);
+        const milliseconds = this.adapter.getMilliseconds(value);
+        return this.adapter.createDateTime(years, month, day, hours, minutes, seconds, milliseconds);
     }
-    /** The value of the input. */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get value() {
-        return this._value;
+    setFormat(format) {
+        // `[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), []);
+        this.getDigitPositions(format);
     }
-    set value(value) {
+    /** Takes a value from any source, re-rendering the element with it. */
+    setValue(value) {
         let newValue = this.adapter.deserialize(value);
         this.lastValueValid = !newValue || this.adapter.isValid(newValue);
         newValue = this.getValidDateOrNull(newValue);
-        const oldDate = this.value;
-        this._value = newValue;
+        const oldDate = this.valueState();
+        this.valueState.set(newValue);
         this.formatValue(newValue);
         if (!this.adapter.sameDate(oldDate, newValue)) {
             this.valueChange.emit(newValue);
         }
     }
-    /**
-     * 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;
+    updateValue(newValue) {
+        if (!this.adapter.sameDate(newValue, this.value())) {
+            this.valueState.set(newValue);
+            this.cvaOnChange(newValue);
+            this.valueChange.emit(newValue);
+            this.dateInput.emit(new KbqDatepickerInputEvent(this, this.elementRef.nativeElement));
+        }
+        this.control?.updateValueAndValidity({ emitEvent: false });
     }
-    set min(value) {
-        this._min = this.getValidDateOrNull(this.adapter.deserialize(value));
-        this.validatorOnChange();
+    isKeyForClose(event) {
+        return (event.altKey && event.keyCode === UP_ARROW) || event.keyCode === ESCAPE;
     }
-    /**
-     * 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;
+    isKeyForOpen(event) {
+        return event.altKey && event.keyCode === DOWN_ARROW;
     }
-    set max(value) {
-        this._max = this.getValidDateOrNull(this.adapter.deserialize(value));
-        this.validatorOnChange();
+    isLetterKey(event) {
+        return isLetterKey(event) && !event.ctrlKey && !event.metaKey;
     }
-    /** Whether the datepicker-input is disabled. */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get disabled() {
-        return this._disabled;
+    isKeyForByPass(event) {
+        return ((hasModifierKey(event) && (isVerticalMovement(event) || isHorizontalMovement(event))) ||
+            event.ctrlKey ||
+            event.metaKey ||
+            [DELETE, BACKSPACE, TAB].includes(event.keyCode));
     }
-    set disabled(value) {
-        const newValue = coerceBooleanProperty(value);
+    spaceKeyHandler(event) {
+        event.preventDefault();
+        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));
+        this.defer(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;
-        if (this._disabled !== newValue) {
-            this._disabled = newValue;
-            this.disabledChange.emit(newValue);
+        const selectionStart = this.selectionStart ?? 0;
+        const selectionEnd = this.selectionEnd ?? 0;
+        this.renderer.setProperty(element, 'value', value);
+        // Right away: a form or a `[value]` binding writes after `ngDoCheck()` has run.
+        this.emptyValue.set(this.isEmpty());
+        if (savePosition) {
+            this.setSelection(selectionStart, selectionEnd);
         }
-        // We need to null check the `blur` method, because it's undefined during SSR.
-        if (newValue && element.blur) {
-            // Normally, native input elements automatically blur if they turn disabled. This behavior
-            // is problematic, because it would mean that it triggers another change detection cycle,
-            // which then causes a changed after checked error if the input element was focused before.
-            element.blur();
+        else {
+            // 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);
         }
     }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get id() {
-        return this._id;
+    setSelection(start, end) {
+        kbqSetSelectionRange(this.elementRef.nativeElement, start, end);
     }
-    set id(value) {
-        this._id = value || this.uid;
+    replaceSymbols(value) {
+        return value
+            .split(this.separator)
+            .map((part) => part.replace(/^([0-9]+)\W$/, '0$1'))
+            .join(this.separator);
     }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    set kbqValidationTooltip(tooltip) {
-        if (!tooltip) {
-            return;
+    getDateFromString(timeString) {
+        if (!timeString || timeString.length < this.firstDigit.length) {
+            return null;
         }
-        tooltip.enterDelay = validationTooltipShowDelay;
-        tooltip.trigger = 'manual';
-        tooltip.initListeners();
-        this.incorrectInput.subscribe(() => {
-            if (tooltip.isOpen) {
-                return;
+        const date = this.getDefaultValue();
+        const viewDigits = timeString.split(this.separator).map((value) => value);
+        const [firsViewDigit, secondViewDigit, thirdViewDigit] = viewDigits;
+        if (viewDigits.length === 1) {
+            if (/\D/.test(firsViewDigit) || firsViewDigit.length < this.firstDigit.length) {
+                return null;
             }
-            tooltip.show();
-            setTimeout(() => tooltip.hide(), validationTooltipHideDelay);
-        });
-    }
-    get empty() {
-        return !this.viewValue && !this.isBadInput();
-    }
-    get viewValue() {
-        return this.elementRef.nativeElement.value;
-    }
-    get ngControl() {
-        return this.control;
-    }
-    get isReadOnly() {
-        return this.elementRef.nativeElement.readOnly;
-    }
-    get dateInputFormat() {
-        return this.dateFormats?.dateInput || this.adapter.config.dateInput;
-    }
-    get errorState() {
-        return this.errorStateTracker.errorState;
-    }
-    set errorState(value) {
-        this.errorStateTracker.errorState = value;
-    }
-    get readyForParse() {
-        return !!(this.firstDigit && this.secondDigit && this.thirdDigit);
-    }
-    get selectionStart() {
-        return this.elementRef.nativeElement.selectionStart;
-    }
-    get selectionEnd() {
-        return this.elementRef.nativeElement.selectionEnd;
-    }
-    constructor() {
-        this.elementRef = inject(ElementRef);
-        this.renderer = inject(Renderer2);
-        this.adapter = injectRequiredDateAdapter();
-        this.timezoneService = inject(KbqDateTimezoneService);
-        this.dateFormats = inject(KBQ_DATE_FORMATS, { optional: true });
-        /** @docs-private */
-        this.formField = inject(KBQ_FORM_FIELD, { optional: true, host: true });
-        /** @docs-private */
-        this.localeService = inject(KBQ_LOCALE_SERVICE, { optional: true });
-        /** @docs-private */
-        this.externalConfiguration = inject(KBQ_DATEPICKER_CONFIGURATION, { optional: true });
-        this.stateChanges = new Subject();
-        this.controlType = 'datepicker';
-        this.focused = false;
-        /** Emits when the value changes (either due to user input or programmatic change). */
-        this.valueChange = new EventEmitter();
-        /** Emits when the disabled state has changed */
-        this.disabledChange = new EventEmitter();
-        this._disabled = false;
-        this.incorrectInput = output();
-        /** Emits when a `change` event is fired on this `<input>`. */
-        this.dateChange = output();
-        /** Emits when an `input` event is fired on this `<input>`. */
-        this.dateInput = output();
-        this.uid = `kbq-datepicker-${uniqueComponentIdSuffix++}`;
-        this.datepickerSubscription = Subscription.EMPTY;
-        /** Whether the last value set on the input was valid. */
-        this.lastValueValid = false;
-        this.firstDigit = null;
-        this.secondDigit = null;
-        this.thirdDigit = null;
-        this.onTouched = () => { };
-        this.onInput = () => {
-            const cursorPosition = this.correctedCursorPosition();
-            const formattedValue = this.replaceSymbols(this.viewValue);
-            const newTimeObj = this.getDateFromString(formattedValue);
-            this.lastValueValid = !!newTimeObj;
-            if (!newTimeObj) {
-                if (!this.viewValue) {
-                    this.lastValueValid = false;
-                    this.updateValue(newTimeObj);
-                }
-                else {
-                    this.control?.updateValueAndValidity();
-                }
-                return;
+            date[this.firstDigit.fullName] = this.firstDigit.parse(firsViewDigit);
+            if (this.firstDigit.isDay) {
+                date.month = 1;
             }
-            this.setViewValue(this.getTimeStringFromDate(newTimeObj, this.dateInputFormat), true);
-            this.selectNextDigitByCursor(cursorPosition);
-            this.updateValue(newTimeObj);
-        };
-        this.parseOnBlur = () => {
-            if (!this.viewValue || !this.readyForParse) {
+        }
+        else if (viewDigits.length === 2) {
+            if (firsViewDigit.length < this.firstDigit.length || secondViewDigit.length < this.secondDigit.length) {
                 return null;
             }
-            const date = this.getDefaultValue();
-            const viewDigits = this.viewValue
-                .split(this.separator)
-                .map((value) => value)
-                .filter((value) => value);
-            const [firsViewDigit, secondViewDigit, thirdViewDigit] = viewDigits;
-            if (viewDigits.length !== 3) {
-                this.lastValueValid = false;
-                this._value = null;
-                return setTimeout(() => this.control?.updateValueAndValidity());
-            }
             date[this.firstDigit.fullName] = this.firstDigit.parse(firsViewDigit);
             date[this.secondDigit.fullName] = this.secondDigit.parse(secondViewDigit);
-            date[this.thirdDigit.fullName] = this.thirdDigit.parse(thirdViewDigit);
-            const [digitWithYear, viewDigitWithYear] = [this.firstDigit, this.secondDigit, this.thirdDigit].reduce((acc, digit, index) => (digit.value === DateParts.year ? [digit, viewDigits[index]] : acc), []);
-            if (viewDigitWithYear.length < 3) {
-                date.year += date.year < 30 ? 2000 : 1900;
-            }
-            else if (viewDigitWithYear.length < digitWithYear.length) {
-                this.lastValueValid = false;
-                this._value = null;
-                return setTimeout(() => this.control?.updateValueAndValidity());
+        }
+        else if (viewDigits.length === 3) {
+            if (firsViewDigit.length < this.firstDigit.length ||
+                secondViewDigit.length < this.secondDigit.length ||
+                thirdViewDigit.length < this.thirdDigit.length) {
+                return null;
             }
-            const newTimeObj = this.createDateTime(date);
-            if (!newTimeObj) {
-                this.lastValueValid = false;
-                this._value = null;
-                this.cvaOnChange(null);
-                return setTimeout(() => this.control?.updateValueAndValidity());
+            const digitViewValue = {};
+            const dateDigits = [this.firstDigit, this.secondDigit, this.thirdDigit];
+            for (const [index, dateDigit] of dateDigits.entries()) {
+                digitViewValue[dateDigit.fullName] = parseInt(viewDigits[index]);
             }
-            /* Check if the number of days entered does not match the entered month */
-            if (!this.getValidDateOrNull(newTimeObj)) {
-                return null;
+            if (this.value() && digitViewValue.month && digitViewValue.month <= this.firstDigit.maxMonth) {
+                dateDigits.forEach((digit) => (digit.maxDays = this.getLastDayFor(digitViewValue.year, digitViewValue.month - 1)));
             }
-            this.lastValueValid = !!newTimeObj;
-            this.setViewValue(this.getTimeStringFromDate(newTimeObj, this.dateInputFormat), true);
-            this.updateValue(newTimeObj);
-        };
-        this.updateLocaleParams = () => {
-            this.setFormat(this.dateInputFormat);
-            this.configuration = this.externalConfiguration || this.localeService?.getParams('datepicker');
-            this.value = this.value;
-        };
-        this.cvaOnChange = () => { };
-        this.validatorOnChange = () => { };
-        /** The form control validator for whether the input parses. */
-        this.parseValidator = () => {
-            return this.focused || this.empty || this.lastValueValid
-                ? null
-                : { kbqDatepickerParse: { text: this.elementRef.nativeElement.value } };
-        };
-        /** The form control validator for the min date. */
-        this.minValidator = (control) => {
-            // 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.getValidDateOrNull(this.adapter.deserialize(control.value));
-            return !this.max || !controlValue || this.adapter.compareDateTime(this.max, controlValue) >= 0
-                ? null
-                : { kbqDatepickerMax: { max: this.max, actual: controlValue } };
-        };
-        /** The form control validator for the date filter. */
-        this.filterValidator = (control) => {
-            const controlValue = this.adapter.deserialize(control.value);
-            return !this.dateFilter || !controlValue || this.dateFilter(controlValue)
-                ? null
-                : { kbqDatepickerFilter: true };
+            date[this.firstDigit.fullName] = this.firstDigit.parse(firsViewDigit);
+            date[this.secondDigit.fullName] = this.secondDigit.parse(secondViewDigit);
+            date[this.thirdDigit.fullName] = this.thirdDigit.parse(thirdViewDigit);
+        }
+        else {
+            return null;
+        }
+        return this.getValidDateOrNull(this.createDateTime(date));
+    }
+    getDefaultValue() {
+        const defaultValue = this.value() || this.adapter.today();
+        return {
+            year: this.adapter.getYear(defaultValue),
+            month: this.adapter.getMonth(defaultValue),
+            date: this.adapter.getDate(defaultValue),
+            hours: this.adapter.getHours(defaultValue),
+            minutes: this.adapter.getMinutes(defaultValue),
+            seconds: this.adapter.getSeconds(defaultValue),
+            milliseconds: this.adapter.getMilliseconds(defaultValue)
         };
-        this.validator = Validators.compose([
-            this.parseValidator,
-            this.minValidator,
-            this.maxValidator,
-            this.filterValidator
-        ]);
-        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);
-        this.setFormat(this.dateInputFormat);
-        this.localeService?.changes.pipe(takeUntilDestroyed()).subscribe(this.updateLocaleParams);
-        if (!this.localeService) {
-            this.initDefaultParams();
+    }
+    getTimeStringFromDate(value, timeFormat) {
+        if (!value || !this.adapter.isValid(value)) {
+            return '';
         }
-        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;
-        });
+        return this.adapter.format(value, timeFormat);
     }
-    ngDoCheck() {
-        if (this.ngControl) {
-            // We need to re-evaluate this on every change detection cycle, because there are some
-            // error triggers that we can't subscribe to (e.g. parent form submissions). This means
-            // that whatever logic is in here has to be super lean or we risk destroying the performance.
-            this.updateErrorState();
+    getDateEditMetrics(cursorPosition) {
+        for (const digit of [this.firstDigit, this.secondDigit, this.thirdDigit]) {
+            if (cursorPosition >= digit.start && cursorPosition <= digit.end) {
+                return [digit.value, digit.start, digit.end];
+            }
         }
+        return [this.thirdDigit.value, this.thirdDigit.start, this.thirdDigit.end];
     }
-    onContainerClick() {
-        this.focus();
+    isMaxMonth(date) {
+        return this.adapter.getMonth(date) === this.getMaxMonth(date);
     }
-    focus() {
-        this.elementRef.nativeElement.focus();
+    isMinMonth(date) {
+        return this.adapter.getMonth(date) === this.getMinMonth(date);
     }
-    focusChanged(isFocused) {
-        if (isFocused !== this.focused) {
-            this.focused = isFocused;
-            this.onTouched();
-            this.stateChanges.next();
+    isMaxYear(date) {
+        return this.adapter.getYear(date) === this.getMaxYear();
+    }
+    isMinYear(date) {
+        return this.adapter.getYear(date) === this.getMinYear();
+    }
+    getMaxDate(date) {
+        const maxDate = this.datepicker?.maxDate();
+        if (maxDate && this.isMaxYear(date) && this.isMaxMonth(date)) {
+            return this.adapter.getDate(maxDate);
         }
+        return this.adapter.getNumDaysInMonth(date);
     }
-    ngAfterContentInit() {
-        this.updateErrorState();
+    getMinDate(date) {
+        const minDate = this.datepicker?.minDate();
+        if (minDate && this.isMinYear(date) && this.isMinMonth(date)) {
+            return this.adapter.getDate(minDate);
+        }
+        return 1;
     }
-    ngOnDestroy() {
-        this.datepickerSubscription.unsubscribe();
-        this.valueChange.complete();
-        this.disabledChange.complete();
+    getMaxMonth(date) {
+        const maxDate = this.datepicker?.maxDate();
+        if (maxDate && this.isMaxYear(date)) {
+            return this.adapter.getMonth(maxDate);
+        }
+        return 11;
     }
-    /** @docs-private */
-    registerOnValidatorChange(fn) {
-        this.validatorOnChange = fn;
+    getMinMonth(date) {
+        const minDate = this.datepicker?.minDate();
+        if (minDate && this.isMinYear(date)) {
+            return this.adapter.getMonth(minDate);
+        }
+        return 0;
     }
-    /** @docs-private */
-    validate(control) {
-        this.setControl(control);
-        return this.validator ? this.validator(control) : null;
+    getMaxYear() {
+        const maxDate = this.datepicker?.maxDate();
+        if (maxDate) {
+            return this.adapter.getYear(maxDate);
+        }
+        return MAX_YEAR;
     }
-    // Implemented as part of ControlValueAccessor.
-    writeValue(value) {
-        this.value = value;
+    getMinYear() {
+        const minDate = this.datepicker?.minDate();
+        if (minDate) {
+            return this.adapter.getYear(minDate);
+        }
+        return 1;
     }
-    // Implemented as part of ControlValueAccessor.
-    registerOnChange(fn) {
-        this.cvaOnChange = fn;
+    incrementDate(date, whatToIncrement) {
+        let year = this.adapter.getYear(date);
+        let month = this.adapter.getMonth(date);
+        let day = this.adapter.getDate(date);
+        switch (whatToIncrement) {
+            case DateParts.day:
+                day++;
+                if (day > this.getMaxDate(date)) {
+                    if (this.isMaxYear(date) && this.isMaxMonth(date)) {
+                        day = this.getMaxDate(date);
+                    }
+                    else if (this.isMinYear(date) && this.isMinMonth(date)) {
+                        day = this.getMinDate(date);
+                    }
+                    else {
+                        day = 1;
+                    }
+                }
+                break;
+            case DateParts.month: {
+                month++;
+                if (month > this.getMaxMonth(date)) {
+                    if (this.isMaxYear(date)) {
+                        month = this.getMaxMonth(date);
+                    }
+                    else if (this.isMinYear(date)) {
+                        month = this.getMinMonth(date);
+                    }
+                    else {
+                        month = 0;
+                    }
+                }
+                const lastDay = this.getLastDayFor(year, month);
+                if (day > lastDay) {
+                    day = lastDay;
+                }
+                break;
+            }
+            case DateParts.year:
+                year++;
+                if (year > this.getMaxYear()) {
+                    year = this.getMaxYear();
+                }
+                break;
+            default:
+        }
+        return this.createDate(year, month, day);
     }
-    // Implemented as part of ControlValueAccessor.
-    registerOnTouched(fn) {
-        this.onTouched = fn;
+    getLastDayFor(year, month) {
+        return this.adapter.getNumDaysInMonth(this.createDate(year, month, 1));
     }
-    // Implemented as part of ControlValueAccessor.
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
+    decrementDate(date, whatToDecrement) {
+        let year = this.adapter.getYear(date);
+        let month = this.adapter.getMonth(date);
+        let day = this.adapter.getDate(date);
+        switch (whatToDecrement) {
+            case DateParts.day:
+                day--;
+                if (day < this.getMinDate(date)) {
+                    if (this.isMinYear(date) && this.isMinMonth(date)) {
+                        day = this.getMinDate(date);
+                    }
+                    else if (this.isMaxYear(date) && this.isMaxMonth(date)) {
+                        day = this.getMaxDate(date);
+                    }
+                    else {
+                        day = this.adapter.getNumDaysInMonth(date);
+                    }
+                }
+                break;
+            case DateParts.month: {
+                month--;
+                if (month < this.getMinMonth(date)) {
+                    if (year === this.getMinYear()) {
+                        month = this.getMinMonth(date);
+                    }
+                    else if (this.isMaxYear(date)) {
+                        month = this.getMaxMonth(date);
+                    }
+                    else {
+                        month = 11;
+                    }
+                }
+                const lastDay = this.getLastDayFor(year, month);
+                if (day > lastDay) {
+                    day = lastDay;
+                }
+                break;
+            }
+            case DateParts.year:
+                year--;
+                if (year < this.getMinYear()) {
+                    year = this.getMinYear();
+                }
+                break;
+            default:
+        }
+        return this.createDate(year, month, day);
     }
-    onKeyDown(event) {
-        if (this.isReadOnly) {
+    verticalArrowKeyHandler(keyCode) {
+        const value = this.value();
+        if (!value) {
             return;
         }
-        const keyCode = event.keyCode;
-        if (this.isLetterKey(event)) {
-            event.preventDefault();
-            // TODO: The 'emit' function requires a mandatory void argument
-            this.incorrectInput.emit();
-        }
-        else if (this.isKeyForOpen(event)) {
-            event.preventDefault();
-            this.datepicker?.open();
-        }
-        else if (this.isKeyForClose(event)) {
-            event.preventDefault();
-            this.datepicker?.close();
+        let changedTime;
+        const [modifiedTimePart, selectionStart, selectionEnd] = this.getDateEditMetrics(this.selectionStart);
+        if (keyCode === UP_ARROW) {
+            changedTime = this.incrementDate(value, modifiedTimePart);
         }
-        else if (keyCode === TAB) {
-            this.datepicker?.close(false);
+        if (keyCode === DOWN_ARROW) {
+            changedTime = this.decrementDate(value, modifiedTimePart);
         }
-        else if (this.isKeyForByPass(event)) {
+        this.setValue(changedTime);
+        this.setSelection(selectionStart, selectionEnd);
+        this.cvaOnChange(changedTime);
+        this.onChange();
+    }
+    changeCaretPosition(keyCode) {
+        if (!this.value()) {
             return;
         }
-        else if (keyCode === SPACE) {
-            this.spaceKeyHandler(event);
-        }
-        else if ([UP_ARROW, DOWN_ARROW].includes(keyCode)) {
-            event.preventDefault();
-            this.verticalArrowKeyHandler(keyCode);
+        let cursorPos = this.selectionStart;
+        if ([HOME, PAGE_UP].includes(keyCode)) {
+            cursorPos = 0;
         }
-        else if ([LEFT_ARROW, RIGHT_ARROW, HOME, PAGE_UP, END, PAGE_DOWN].includes(keyCode)) {
-            event.preventDefault();
-            this.changeCaretPosition(keyCode);
+        else if ([END, PAGE_DOWN].includes(keyCode)) {
+            cursorPos = this.viewValue.length;
         }
-        else if (/^\D$/.test(event.key)) {
-            event.preventDefault();
-            const newValue = this.getNewValue(event.key, this.selectionStart);
-            const formattedValue = this.replaceSymbols(newValue);
-            if (newValue !== formattedValue) {
-                this.setViewValue(formattedValue, true);
-                setTimeout(this.onInput);
-            }
-            else {
-                // TODO: The 'emit' function requires a mandatory void argument
-                this.incorrectInput.emit();
-            }
+        else if (keyCode === LEFT_ARROW) {
+            this.fixEmptyDigit();
+            cursorPos = cursorPos === 0 ? this.viewValue.length : cursorPos - 1;
         }
-        else {
-            setTimeout(this.onInput);
+        else if (keyCode === RIGHT_ARROW) {
+            this.fixEmptyDigit();
+            const nextSeparatorPos = this.viewValue.indexOf(this.separator, cursorPos);
+            cursorPos = nextSeparatorPos ? nextSeparatorPos + 1 : 0;
         }
+        this.selectDigitByCursor(cursorPos);
     }
-    onChange() {
-        setTimeout(() => {
-            this.dateChange.emit(new KbqDatepickerInputEvent(this, this.elementRef.nativeElement));
-        });
-    }
-    /** Handles blur events on the input. */
-    onBlur() {
-        // Reformat the input only if we have a valid value.
-        this.parseOnBlur();
-        this.focusChanged(false);
-        this.onInput();
-    }
-    onPaste($event) {
-        $event.preventDefault();
-        let rawValue = $event.clipboardData.getData('text');
-        if (rawValue.match(/^\d\D/)) {
-            rawValue = `0${rawValue}`;
-        }
-        rawValue.replace(/[^A-Za-z0-9]+/g, this.separator);
-        if (/[a-z]/gi.test(rawValue)) {
-            // TODO: The 'emit' function requires a mandatory void argument
-            this.incorrectInput.emit();
-        }
-        const match = rawValue.match(/^(?<first>\d+)\W(?<second>\d+)\W(?<third>\d+)$/);
-        if (!match?.groups?.first || !match?.groups?.second || !match?.groups?.third) {
-            this.setViewValue(rawValue);
-            return rawValue;
-        }
-        const value = [match.groups.first, match.groups.second, match.groups.third].join(this.separator);
-        const newTimeObj = this.getDateFromString(value);
-        if (!newTimeObj) {
-            this.setViewValue(value);
-            return value;
+    fixEmptyDigit() {
+        const hasEmptyDigit = this.viewValue
+            .split(this.separator)
+            .map((part) => part.length)
+            .some((item) => !item);
+        const value = this.value();
+        if (hasEmptyDigit && value) {
+            const year = this.adapter.getYear(value);
+            const month = this.adapter.getMonth(value);
+            const day = this.adapter.getDate(value);
+            this.setValue(this.createDate(year, month, day));
         }
-        this.setViewValue(this.getTimeStringFromDate(newTimeObj, this.dateInputFormat));
-        this.updateValue(newTimeObj);
-    }
-    toISO8601(value) {
-        return this.adapter.toIso8601(value);
     }
-    /** Refreshes the error state of the input. */
-    updateErrorState() {
-        this.errorStateTracker.updateErrorState();
-    }
-    /** Returns the ElementRef of the formField if it exists; otherwise, returns the ElementRef of the input. */
-    getOrigin() {
-        return this.formField ? this.formField.getConnectedOverlayOrigin() : this.elementRef;
+    selectDigitByCursor(cursorPos) {
+        this.defer(() => {
+            const [, selectionStart, selectionEnd] = this.getDateEditMetrics(cursorPos);
+            this.setSelection(selectionStart, selectionEnd);
+        });
     }
-    saveTimePart(selected) {
-        if (!this.value) {
-            return selected;
-        }
-        const years = this.adapter.getYear(selected);
-        const month = this.adapter.getMonth(selected);
-        const day = this.adapter.getDate(selected);
-        const hours = this.adapter.getHours(this.value);
-        const minutes = this.adapter.getMinutes(this.value);
-        const seconds = this.adapter.getSeconds(this.value);
-        const milliseconds = this.adapter.getMilliseconds(this.value);
-        return this.adapter.createDateTime(years, month, day, hours, minutes, seconds, milliseconds);
+    selectNextDigitByCursor(cursorPos) {
+        this.defer(() => {
+            const [, , endPositionOfCurrentDigit] = this.getDateEditMetrics(cursorPos);
+            const [, selectionStart, selectionEnd] = this.getDateEditMetrics(endPositionOfCurrentDigit + 1);
+            this.setSelection(selectionStart, selectionEnd);
+        });
     }
-    initDefaultParams() {
-        this.configuration = this.externalConfiguration || KBQ_DATEPICKER_DEFAULT_CONFIGURATION;
+    selectNextDigit(cursorPos, cycle = false) {
+        this.defer(() => {
+            const lastValue = cycle ? 0 : cursorPos;
+            const nextSeparatorPos = this.viewValue.indexOf(this.separator, cursorPos);
+            const newCursorPos = nextSeparatorPos > 0 ? nextSeparatorPos + 1 : lastValue;
+            const [, selectionStart, selectionEnd] = this.getDateEditMetrics(newCursorPos);
+            this.setSelection(selectionStart, selectionEnd);
+        });
     }
-    setFormat(format) {
-        // `[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), []);
-        this.getDigitPositions(format);
+    /** Runs `work` on a timer, or earlier if the next key comes first. */
+    defer(work) {
+        const timer = setTimeout(() => {
+            this.deferred.delete(timer);
+            work();
+        });
+        this.deferred.set(timer, work);
     }
-    updateValue(newValue) {
-        if (!this.adapter.sameDate(newValue, this.value)) {
-            this._value = newValue;
-            this.cvaOnChange(newValue);
-            this.valueChange.emit(newValue);
-            this.dateInput.emit(new KbqDatepickerInputEvent(this, this.elementRef.nativeElement));
+    /** Runs the work still waiting for its timer, including what that work defers in turn. */
+    runDeferred() {
+        // A Map iteration also visits the entries added during it.
+        for (const [timer, work] of this.deferred) {
+            clearTimeout(timer);
+            this.deferred.delete(timer);
+            work();
         }
-        this.control?.updateValueAndValidity({ emitEvent: false });
-    }
-    isKeyForClose(event) {
-        return (event.altKey && event.keyCode === UP_ARROW) || event.keyCode === ESCAPE;
     }
-    isKeyForOpen(event) {
-        return event.altKey && event.keyCode === DOWN_ARROW;
+    /** Checks whether the input is invalid based on the native validation. */
+    isBadInput() {
+        const validity = this.elementRef.nativeElement.validity;
+        return validity && validity.badInput;
     }
-    isLetterKey(event) {
-        return isLetterKey(event) && !event.ctrlKey && !event.metaKey;
+    /** Whether the input renders no text, read from the element rather than from the last change detection. */
+    isEmpty() {
+        return !this.viewValue && !this.isBadInput();
     }
-    isKeyForByPass(event) {
-        return ((hasModifierKey(event) && (isVerticalMovement(event) || isHorizontalMovement(event))) ||
-            event.ctrlKey ||
-            event.metaKey ||
-            [DELETE, BACKSPACE, TAB].includes(event.keyCode));
+    /** Formats a value and sets it on the input element. */
+    formatValue(value) {
+        const formattedValue = value ? this.adapter.format(value, this.dateInputFormat) : '';
+        this.setViewValue(formattedValue);
     }
-    spaceKeyHandler(event) {
-        event.preventDefault();
-        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);
+    setControl(control) {
+        if (this.control) {
             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) {
-            this.setSelection(selectionStart, selectionEnd);
-        }
-        else {
-            // 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);
+        this.control = control;
+        this.control.valueChanges.subscribe((value) => this.valueState.set(value));
+        // @TODO resolve types
+        this.errorStateTracker.ngControl = { control };
     }
-    replaceSymbols(value) {
-        return value
-            .split(this.separator)
-            .map((part) => part.replace(/^([0-9]+)\W$/, '0$1'))
-            .join(this.separator);
+    /**
+     * @param obj The object to check.
+     * @returns The given object if it is both a date instance and valid, otherwise null.
+     */
+    getValidDateOrNull(obj) {
+        return this.adapter.isDateInstance(obj) && this.adapter.isValid(obj) ? obj : null;
     }
-    getDateFromString(timeString) {
-        if (!timeString || timeString.length < this.firstDigit.length) {
-            return null;
-        }
-        const date = this.getDefaultValue();
-        const viewDigits = timeString.split(this.separator).map((value) => value);
-        const [firsViewDigit, secondViewDigit, thirdViewDigit] = viewDigits;
-        if (viewDigits.length === 1) {
-            if (/\D/.test(firsViewDigit) || firsViewDigit.length < this.firstDigit.length) {
-                return null;
-            }
-            date[this.firstDigit.fullName] = this.firstDigit.parse(firsViewDigit);
-            if (this.firstDigit.isDay) {
-                date.month = 1;
-            }
-        }
-        else if (viewDigits.length === 2) {
-            if (firsViewDigit.length < this.firstDigit.length || secondViewDigit.length < this.secondDigit.length) {
-                return null;
-            }
-            date[this.firstDigit.fullName] = this.firstDigit.parse(firsViewDigit);
-            date[this.secondDigit.fullName] = this.secondDigit.parse(secondViewDigit);
-        }
-        else if (viewDigits.length === 3) {
-            if (firsViewDigit.length < this.firstDigit.length ||
-                secondViewDigit.length < this.secondDigit.length ||
-                thirdViewDigit.length < this.thirdDigit.length) {
-                return null;
-            }
-            const digitViewValue = {};
-            const dateDigits = [this.firstDigit, this.secondDigit, this.thirdDigit];
-            for (const [index, dateDigit] of dateDigits.entries()) {
-                digitViewValue[dateDigit.fullName] = parseInt(viewDigits[index]);
+    getDigitPositions(format) {
+        this.firstDigit = this.secondDigit = this.thirdDigit = null;
+        const formatInLowerCase = format.toLowerCase();
+        formatInLowerCase.split('').reduce(({ prev, length, start }, value, index, arr) => {
+            if (value === this.separator || arr.length - 1 === index) {
+                if (!this.firstDigit) {
+                    this.firstDigit = new DateDigit(prev, start, length);
+                }
+                else if (!this.secondDigit) {
+                    this.secondDigit = new DateDigit(prev, start, length);
+                }
+                else if (!this.thirdDigit) {
+                    this.thirdDigit = new DateDigit(prev, start, arr.length - start);
+                }
+                length = 0;
+                start = index + 1;
             }
-            if (this.value && digitViewValue.month && digitViewValue.month <= this.firstDigit.maxMonth) {
-                dateDigits.forEach((digit) => (digit.maxDays = this.getLastDayFor(digitViewValue.year, digitViewValue.month - 1)));
+            else {
+                length++;
             }
-            date[this.firstDigit.fullName] = this.firstDigit.parse(firsViewDigit);
-            date[this.secondDigit.fullName] = this.secondDigit.parse(secondViewDigit);
-            date[this.thirdDigit.fullName] = this.thirdDigit.parse(thirdViewDigit);
-        }
-        else {
-            return null;
+            return { prev: value, length, start };
+        }, { length: 0, start: 0 });
+        if (!this.firstDigit || !this.secondDigit || !this.thirdDigit) {
+            Error(`Can' t use this format: ${format}`);
         }
-        return this.getValidDateOrNull(this.createDateTime(date));
-    }
-    getDefaultValue() {
-        const defaultValue = this.value || this.adapter.today();
-        return {
-            year: this.adapter.getYear(defaultValue),
-            month: this.adapter.getMonth(defaultValue),
-            date: this.adapter.getDate(defaultValue),
-            hours: this.adapter.getHours(defaultValue),
-            minutes: this.adapter.getMinutes(defaultValue),
-            seconds: this.adapter.getSeconds(defaultValue),
-            milliseconds: this.adapter.getMilliseconds(defaultValue)
-        };
     }
-    getTimeStringFromDate(value, timeFormat) {
-        if (!value || !this.adapter.isValid(value)) {
-            return '';
-        }
-        return this.adapter.format(value, timeFormat);
+    createDate(year, month, day) {
+        return this.adapter.createDateTime(year, month, day, this.adapter.getHours(this.value()), this.adapter.getMinutes(this.value()), this.adapter.getSeconds(this.value()), this.adapter.getMilliseconds(this.value()));
     }
-    getDateEditMetrics(cursorPosition) {
-        for (const digit of [this.firstDigit, this.secondDigit, this.thirdDigit]) {
-            if (cursorPosition >= digit.start && cursorPosition <= digit.end) {
-                return [digit.value, digit.start, digit.end];
-            }
+    createDateTime(value) {
+        if (Object.values(value).some(isNaN)) {
+            return null;
         }
-        return [this.thirdDigit.value, this.thirdDigit.start, this.thirdDigit.end];
-    }
-    isMaxMonth(date) {
-        return this.adapter.getMonth(date) === this.getMaxMonth(date);
+        return this.adapter.createDateTime(value.year, value.month - 1, value.date, value.hours, value.minutes, value.seconds, value.milliseconds);
     }
-    isMinMonth(date) {
-        return this.adapter.getMonth(date) === this.getMinMonth(date);
+    // 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;
     }
-    isMaxYear(date) {
-        return this.adapter.getYear(date) === this.getMaxYear();
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqDatepickerInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.25", type: KbqDatepickerInput, isStandalone: true, selector: "input[kbqDatepicker], input[kbqCalendar]", inputs: { errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null }, placeholderInput: { classPropertyName: "placeholderInput", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, kbqDatepickerInput: { classPropertyName: "kbqDatepickerInput", publicName: "kbqDatepicker", isSignal: true, isRequired: false, transformFunction: null }, kbqCalendarInput: { classPropertyName: "kbqCalendarInput", publicName: "kbqCalendar", isSignal: true, isRequired: false, transformFunction: null }, kbqDatepickerFilterInput: { classPropertyName: "kbqDatepickerFilterInput", publicName: "kbqDatepickerFilter", isSignal: true, isRequired: false, transformFunction: null }, valueInput: { classPropertyName: "valueInput", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, minInput: { classPropertyName: "minInput", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, maxInput: { classPropertyName: "maxInput", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, idInput: { classPropertyName: "idInput", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, kbqValidationTooltipInput: { classPropertyName: "kbqValidationTooltipInput", publicName: "kbqValidationTooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { incorrectInput: "incorrectInput", dateChange: "dateChange", dateInput: "dateInput" }, host: { listeners: { "paste": "onPaste($event)", "change": "onChange()", "focus": "focusChanged(true)", "blur": "onBlur()", "keydown": "onKeyDown($event)" }, properties: { "attr.id": "id()", "attr.placeholder": "placeholder()", "attr.required": "required() || null", "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 },
+            { provide: KBQ_DATEPICKER_INPUT_LOCALE_CONFIGURATION, useFactory: datepickerInputLocaleConfiguration }
+        ], exportAs: ["kbqDatepickerInput"], usesOnChanges: true, hostDirectives: [{ directive: i4.KbqLocaleOverridesDirective, inputs: ["kbqLocaleOverrides", "localeOverrides"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqDatepickerInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[kbqDatepicker], input[kbqCalendar]',
+                    providers: [
+                        KBQ_DATEPICKER_VALUE_ACCESSOR,
+                        KBQ_DATEPICKER_VALIDATORS,
+                        { provide: KbqFormFieldControl, useExisting: KbqDatepickerInput },
+                        { provide: KBQ_DATEPICKER_INPUT_LOCALE_CONFIGURATION, useFactory: datepickerInputLocaleConfiguration }
+                    ],
+                    host: {
+                        class: 'kbq-input kbq-datepicker',
+                        '[attr.id]': 'id()',
+                        '[attr.placeholder]': 'placeholder()',
+                        '[attr.required]': 'required() || null',
+                        '[attr.disabled]': 'disabled() || null',
+                        '[attr.min]': 'min ? toISO8601(min) : null',
+                        '[attr.max]': 'max ? toISO8601(max) : null',
+                        '[attr.autocomplete]': '"off"',
+                        '(paste)': 'onPaste($event)',
+                        '(change)': 'onChange()',
+                        '(focus)': 'focusChanged(true)',
+                        '(blur)': 'onBlur()',
+                        '(keydown)': 'onKeyDown($event)'
+                    },
+                    // Covers the strings this input renders itself. The calendar is created through `<kbq-datepicker>`, a
+                    // sibling of this element rather than a descendant, so it carries its own — bind `[localeOverrides]`
+                    // there for the pop-up, or put a carrier on an element enclosing both.
+                    hostDirectives: [
+                        { directive: KbqLocaleOverridesDirective, inputs: ['kbqLocaleOverrides: localeOverrides'] }
+                    ],
+                    exportAs: 'kbqDatepickerInput'
+                }]
+        }], ctorParameters: () => [], propDecorators: { errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], placeholderInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], kbqDatepickerInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqDatepicker", required: false }] }], kbqCalendarInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqCalendar", required: false }] }], kbqDatepickerFilterInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqDatepickerFilter", required: false }] }], valueInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], minInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], maxInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], idInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], kbqValidationTooltipInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqValidationTooltip", required: false }] }], incorrectInput: [{ type: i0.Output, args: ["incorrectInput"] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }], dateInput: [{ type: i0.Output, args: ["dateInput"] }] } });
+
+/** Can be used to override the icon of a `kbqDatepickerToggle`. */
+class KbqDatepickerToggleIcon {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqDatepickerToggleIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqDatepickerToggleIcon, isStandalone: true, selector: "[kbqDatepickerToggleIcon]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqDatepickerToggleIcon, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kbqDatepickerToggleIcon]'
+                }]
+        }] });
+class KbqDatepickerToggleIconComponent {
+    constructor() {
+        this.disabledState = signal(false, ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        this.disabledInput = input(undefined, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled',
+            transform: booleanAttribute });
+        /** Datepicker instance that the button will toggle. */
+        this.datepicker = input(undefined, { ...(ngDevMode ? { debugName: "datepicker" } : /* istanbul ignore next */ {}), 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.
+         */
+        this.openedChange = toObservable(this.datepicker).pipe(filter(Boolean), switchMap((datepicker) => merge(outputToObservable(datepicker.openedStream).pipe(map(() => true)), outputToObservable(datepicker.closedStream).pipe(map(() => false)))));
+        /** Whether the calendar was open when the toggle was pressed. */
+        this.openedOnPress = false;
     }
-    isMinYear(date) {
-        return this.adapter.getYear(date) === this.getMinYear();
+    /** Whether the toggle button is disabled. */
+    get disabled() {
+        return this.datepicker().disabled || this.disabledState();
     }
-    getMaxDate(date) {
-        const maxDate = this.datepicker?.maxDate();
-        if (maxDate && this.isMaxYear(date) && this.isMaxMonth(date)) {
-            return this.adapter.getDate(maxDate);
-        }
-        return this.adapter.getNumDaysInMonth(date);
+    set disabled(value) {
+        this.disabledState.set(coerceBooleanProperty(value));
     }
-    getMinDate(date) {
-        const minDate = this.datepicker?.minDate();
-        if (minDate && this.isMinYear(date) && this.isMinMonth(date)) {
-            return this.adapter.getDate(minDate);
-        }
-        return 1;
+    /** Whether the calendar is currently on screen. Part of the `KbqSiblingPopup` contract. */
+    get isAttached() {
+        return !!this.datepicker()?.opened;
     }
-    getMaxMonth(date) {
-        const maxDate = this.datepicker?.maxDate();
-        if (maxDate && this.isMaxYear(date)) {
-            return this.adapter.getMonth(maxDate);
+    ngOnChanges(changes) {
+        // A bound input is handed to its member; unbound, it leaves what code wrote.
+        if (changes['disabledInput']) {
+            const disabled = this.disabledInput();
+            if (disabled !== undefined)
+                this.disabled = disabled;
         }
-        return 11;
     }
-    getMinMonth(date) {
-        const minDate = this.datepicker?.minDate();
-        if (minDate && this.isMinYear(date)) {
-            return this.adapter.getMonth(minDate);
-        }
-        return 0;
+    /** Opens the calendar, moving the focus to its input; closes it instead when it was open at the press. */
+    open($event) {
+        // Untracked: called from a consumer's `effect()`, the state read on the way — the inputs, `disabled` — would
+        // make the effect run again whenever it changes.
+        untracked(() => this.toggleCalendar($event));
     }
-    getMaxYear() {
-        const maxDate = this.datepicker?.maxDate();
-        if (maxDate) {
-            return this.adapter.getYear(maxDate);
+    /** Body of `open()`. */
+    toggleCalendar($event) {
+        const datepicker = this.datepicker();
+        const openedOnPress = this.openedOnPress;
+        this.openedOnPress = false;
+        if (!datepicker || this.disabled)
+            return;
+        $event.stopPropagation();
+        // A click on the toggle of an open calendar closes it. The overlay has usually done so before the click gets
+        // here, taking it for a click outside the calendar.
+        if (openedOnPress) {
+            datepicker.close();
+            return;
         }
-        return MAX_YEAR;
+        // The input, not the icon, handles the keys of the datepicker and gets the focus back once it closes.
+        datepicker.datepickerInput.focus();
+        datepicker.open();
     }
-    getMinYear() {
-        const minDate = this.datepicker?.minDate();
-        if (minDate) {
-            return this.adapter.getYear(minDate);
-        }
-        return 1;
+    /** @internal */
+    onMousedown(event) {
+        // A press on the icon, focusable by its `tabindex`, would take the focus from the input.
+        event.preventDefault();
+        this.openedOnPress = !!this.datepicker()?.opened;
     }
-    incrementDate(date, whatToIncrement) {
-        let year = this.adapter.getYear(date);
-        let month = this.adapter.getMonth(date);
-        let day = this.adapter.getDate(date);
-        switch (whatToIncrement) {
-            case DateParts.day:
-                day++;
-                if (day > this.getMaxDate(date)) {
-                    if (this.isMaxYear(date) && this.isMaxMonth(date)) {
-                        day = this.getMaxDate(date);
-                    }
-                    else if (this.isMinYear(date) && this.isMinMonth(date)) {
-                        day = this.getMinDate(date);
-                    }
-                    else {
-                        day = 1;
-                    }
-                }
-                break;
-            case DateParts.month: {
-                month++;
-                if (month > this.getMaxMonth(date)) {
-                    if (this.isMaxYear(date)) {
-                        month = this.getMaxMonth(date);
-                    }
-                    else if (this.isMinYear(date)) {
-                        month = this.getMinMonth(date);
-                    }
-                    else {
-                        month = 0;
-                    }
-                }
-                const lastDay = this.getLastDayFor(year, month);
-                if (day > lastDay) {
-                    day = lastDay;
-                }
-                break;
-            }
-            case DateParts.year:
-                year++;
-                if (year > this.getMaxYear()) {
-                    year = this.getMaxYear();
-                }
-                break;
-            default:
-        }
-        return this.createDate(year, month, day);
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqDatepickerToggleIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: KbqDatepickerToggleIconComponent, isStandalone: true, selector: "kbq-datepicker-toggle-icon", inputs: { disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, datepicker: { classPropertyName: "datepicker", publicName: "for", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mousedown": "onMousedown($event)", "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"
+                aria-hidden="true"
+                kbq-icon-button="kbq-calendar-o_16"
+                [tabindex]="-1"
+                [class.kbq-active]="datepicker() && datepicker().opened"
+                [disabled]="disabled"
+                [autoColor]="true"
+            ></i>
+        </ng-content>
+    `, isInline: true, styles: [".kbq-datepicker-toggle-icon{display:inline-flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i2.KbqIconButton, selector: "[kbq-icon-button]", inputs: ["size", "kbq-icon-button", "tabindex", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqDatepickerToggleIconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kbq-datepicker-toggle-icon', imports: [KbqIconModule], template: `
+        <ng-content select="[kbqDatepickerToggleIcon]">
+            <i
+                color="contrast-fade"
+                aria-hidden="true"
+                kbq-icon-button="kbq-calendar-o_16"
+                [tabindex]="-1"
+                [class.kbq-active]="datepicker() && datepicker().opened"
+                [disabled]="disabled"
+                [autoColor]="true"
+            ></i>
+        </ng-content>
+    `, providers: [kbqSiblingPopupProvider(KbqDatepickerToggleIconComponent)], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'kbq-datepicker-toggle-icon',
+                        '[attr.aria-expanded]': 'datepicker().opened',
+                        '[attr.aria-disabled]': 'disabled',
+                        '(mousedown)': 'onMousedown($event)',
+                        '(click)': 'open($event)'
+                    }, styles: [".kbq-datepicker-toggle-icon{display:inline-flex;justify-content:center;align-items:center}\n"] }]
+        }], propDecorators: { disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], datepicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "for", required: false }] }] } });
+
+/** 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. 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();
+}
+/**
+ * Redundant to the root factory of the token; kept so an app can restore the default under its own override (#DS-2196).
+ *
+ * @docs-private
+ */
+const KBQ_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER = {
+    provide: KBQ_DATEPICKER_SCROLL_STRATEGY,
+    deps: [Overlay],
+    useFactory: KBQ_DATEPICKER_SCROLL_STRATEGY_FACTORY
+};
+/**
+ * Component used as the content for the datepicker dialog and popup. We use this instead of using
+ * KbqCalendar directly as the content so we can control the initial focus. This also gives us a
+ * place to put additional features of the popup that are not part of the calendar itself in the
+ * future. (e.g. confirmation buttons).
+ *
+ * @docs-private
+ */
+class KbqDatepickerContent {
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.injector = inject(Injector);
+        /** Whether the panel opens and closes without motion. */
+        this.animationsDisabled = kbqAnimationsDisabled();
+        /** Emits when the exit animation has finished. */
+        this.animationDone = new Subject();
+        this.currentAnimationState = signal('enter', ...(ngDevMode ? [{ debugName: "currentAnimationState" }] : /* istanbul ignore next */ []));
+        /** Reference to the internal calendar component. */
+        this.calendar = viewChild.required(KbqCalendar);
     }
-    getLastDayFor(year, month) {
-        return this.adapter.getNumDaysInMonth(this.createDate(year, month, 1));
+    /** Current state of the animation. */
+    get animationState() {
+        return this.currentAnimationState();
     }
-    decrementDate(date, whatToDecrement) {
-        let year = this.adapter.getYear(date);
-        let month = this.adapter.getMonth(date);
-        let day = this.adapter.getDate(date);
-        switch (whatToDecrement) {
-            case DateParts.day:
-                day--;
-                if (day < this.getMinDate(date)) {
-                    if (this.isMinYear(date) && this.isMinMonth(date)) {
-                        day = this.getMinDate(date);
-                    }
-                    else if (this.isMaxYear(date) && this.isMaxMonth(date)) {
-                        day = this.getMaxDate(date);
-                    }
-                    else {
-                        day = this.adapter.getNumDaysInMonth(date);
-                    }
-                }
-                break;
-            case DateParts.month: {
-                month--;
-                if (month < this.getMinMonth(date)) {
-                    if (year === this.getMinYear()) {
-                        month = this.getMinMonth(date);
-                    }
-                    else if (this.isMaxYear(date)) {
-                        month = this.getMaxMonth(date);
-                    }
-                    else {
-                        month = 11;
-                    }
-                }
-                const lastDay = this.getLastDayFor(year, month);
-                if (day > lastDay) {
-                    day = lastDay;
-                }
-                break;
-            }
-            case DateParts.year:
-                year--;
-                if (year < this.getMinYear()) {
-                    year = this.getMinYear();
-                }
-                break;
-            default:
-        }
-        return this.createDate(year, month, day);
+    set animationState(value) {
+        this.currentAnimationState.set(value);
     }
-    verticalArrowKeyHandler(keyCode) {
-        if (!this.value) {
-            return;
-        }
-        let changedTime;
-        const [modifiedTimePart, selectionStart, selectionEnd] = this.getDateEditMetrics(this.selectionStart);
-        if (keyCode === UP_ARROW) {
-            changedTime = this.incrementDate(this.value, modifiedTimePart);
-        }
-        if (keyCode === DOWN_ARROW) {
-            changedTime = this.decrementDate(this.value, modifiedTimePart);
-        }
-        this.value = changedTime;
-        this.setSelection(selectionStart, selectionEnd);
-        this.cvaOnChange(changedTime);
-        this.onChange();
-        this.stateChanges.next();
+    ngOnDestroy() {
+        this.animationDone.complete();
     }
-    changeCaretPosition(keyCode) {
-        if (!this.value) {
-            return;
-        }
-        let cursorPos = this.selectionStart;
-        if ([HOME, PAGE_UP].includes(keyCode)) {
-            cursorPos = 0;
-        }
-        else if ([END, PAGE_DOWN].includes(keyCode)) {
-            cursorPos = this.viewValue.length;
-        }
-        else if (keyCode === LEFT_ARROW) {
-            this.fixEmptyDigit();
-            cursorPos = cursorPos === 0 ? this.viewValue.length : cursorPos - 1;
-        }
-        else if (keyCode === RIGHT_ARROW) {
-            this.fixEmptyDigit();
-            const nextSeparatorPos = this.viewValue.indexOf(this.separator, cursorPos);
-            cursorPos = nextSeparatorPos ? nextSeparatorPos + 1 : 0;
-        }
-        this.selectDigitByCursor(cursorPos);
+    startExitAnimation() {
+        this.animationState = 'void';
+        kbqAfterAnimations(() => this.elementRef.nativeElement, () => this.animationDone.next(), this.injector);
     }
-    fixEmptyDigit() {
-        const hasEmptyDigit = this.viewValue
-            .split(this.separator)
-            .map((part) => part.length)
-            .some((item) => !item);
-        if (hasEmptyDigit && this.value) {
-            const year = this.adapter.getYear(this.value);
-            const month = this.adapter.getMonth(this.value);
-            const day = this.adapter.getDate(this.value);
-            this.value = this.createDate(year, month, day);
-        }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqDatepickerContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.25", type: KbqDatepickerContent, isStandalone: true, selector: "kbq-datepicker__content", host: { properties: { "class.kbq-datepicker__content_leave": "animationState === 'void'", "class.kbq-animations-disabled": "animationsDisabled" }, 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    (monthSelected)=\"datepicker.selectMonth($event)\"\n    (selectedChange)=\"datepicker.select($event)\"\n    (userSelection)=\"datepicker.close()\"\n    (yearSelected)=\"datepicker.selectYear($event)\"\n/>\n", styles: ["@charset \"UTF-8\";.kbq-datepicker__content{display:block;border-radius:var(--kbq-datepicker-size-container-border-radius)}@supports (corner-shape: squircle){.kbq-datepicker__content{corner-shape:squircle;border-radius:clamp(var(--kbq-datepicker-size-container-border-radius) * 1.85,var(--kbq-datepicker-size-container-border-radius) * 2.3 - 3.6px,var(--kbq-datepicker-size-container-border-radius) * 2)}}.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);animation:kbq-datepicker-calendar-enter .12s .1s cubic-bezier(.55,0,.55,.2) backwards}.kbq-datepicker__content.kbq-datepicker__content_leave{animation:kbq-datepicker-content-leave .1s linear forwards}.kbq-datepicker__content.kbq-datepicker__content_leave.kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-datepicker__content.kbq-datepicker__content_leave{animation:none;transition:none}}.kbq-datepicker__content.kbq-animations-disabled .kbq-calendar{animation:none}@media(prefers-reduced-motion:reduce){.kbq-datepicker__content .kbq-calendar{animation:none}}@keyframes kbq-datepicker-calendar-enter{0%{opacity:0}}@keyframes kbq-datepicker-content-leave{to{opacity:0}}.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqDatepickerContent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kbq-datepicker__content', imports: [
+                        KbqCalendar
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'kbq-datepicker__content',
+                        '[class.kbq-datepicker__content_leave]': "animationState === 'void'",
+                        '[class.kbq-animations-disabled]': 'animationsDisabled'
+                    }, exportAs: 'kbqDatepickerContent', 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    (monthSelected)=\"datepicker.selectMonth($event)\"\n    (selectedChange)=\"datepicker.select($event)\"\n    (userSelection)=\"datepicker.close()\"\n    (yearSelected)=\"datepicker.selectYear($event)\"\n/>\n", styles: ["@charset \"UTF-8\";.kbq-datepicker__content{display:block;border-radius:var(--kbq-datepicker-size-container-border-radius)}@supports (corner-shape: squircle){.kbq-datepicker__content{corner-shape:squircle;border-radius:clamp(var(--kbq-datepicker-size-container-border-radius) * 1.85,var(--kbq-datepicker-size-container-border-radius) * 2.3 - 3.6px,var(--kbq-datepicker-size-container-border-radius) * 2)}}.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);animation:kbq-datepicker-calendar-enter .12s .1s cubic-bezier(.55,0,.55,.2) backwards}.kbq-datepicker__content.kbq-datepicker__content_leave{animation:kbq-datepicker-content-leave .1s linear forwards}.kbq-datepicker__content.kbq-datepicker__content_leave.kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-datepicker__content.kbq-datepicker__content_leave{animation:none;transition:none}}.kbq-datepicker__content.kbq-animations-disabled .kbq-calendar{animation:none}@media(prefers-reduced-motion:reduce){.kbq-datepicker__content .kbq-calendar{animation:none}}@keyframes kbq-datepicker-calendar-enter{0%{opacity:0}}@keyframes kbq-datepicker-content-leave{to{opacity:0}}.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"] }]
+        }], propDecorators: { calendar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqCalendar), { isSignal: true }] }] } });
+/** Component responsible for managing the datepicker popup/dialog. */
+// TODO: We use a component instead of a directive here so the user can use implicit
+// template reference variables (e.g. #d vs #d="kbqDatepicker"). We can change this to a directive
+// if angular adds support for `exportAs: '$implicit'` on directives.
+class KbqDatepicker {
+    get hasBackdrop() {
+        return this._hasBackdrop;
     }
-    selectDigitByCursor(cursorPos) {
-        setTimeout(() => {
-            const [, selectionStart, selectionEnd] = this.getDateEditMetrics(cursorPos);
-            this.setSelection(selectionStart, selectionEnd);
-        });
+    set hasBackdrop(value) {
+        this._hasBackdrop = coerceBooleanProperty(value);
     }
-    selectNextDigitByCursor(cursorPos) {
-        setTimeout(() => {
-            const [, , endPositionOfCurrentDigit] = this.getDateEditMetrics(cursorPos);
-            const [, selectionStart, selectionEnd] = this.getDateEditMetrics(endPositionOfCurrentDigit + 1);
-            this.setSelection(selectionStart, selectionEnd);
-        });
+    /** The date to open the calendar to initially. */
+    get startAt() {
+        // If an explicit startAt is set we start there, otherwise we start at whatever the currently
+        // selected value is.
+        return this._startAt || this.datepickerInput?.value();
     }
-    selectNextDigit(cursorPos, cycle = false) {
-        setTimeout(() => {
-            const lastValue = cycle ? 0 : cursorPos;
-            const nextSeparatorPos = this.viewValue.indexOf(this.separator, cursorPos);
-            const newCursorPos = nextSeparatorPos > 0 ? nextSeparatorPos + 1 : lastValue;
-            const [, selectionStart, selectionEnd] = this.getDateEditMetrics(newCursorPos);
-            this.setSelection(selectionStart, selectionEnd);
-        });
+    set startAt(value) {
+        const deserializedValue = this.dateAdapter.deserialize(value);
+        // Untracked, as in the `disabled` setter: an `effect()` that assigns it must not come to depend on the state
+        // read on the way.
+        this._startAt =
+            deserializedValue !== null
+                ? this.dateAdapter.clampDate(deserializedValue, untracked(this.minDate), untracked(this.maxDate))
+                : null;
     }
-    /** Checks whether the input is invalid based on the native validation. */
-    isBadInput() {
-        const validity = this.elementRef.nativeElement.validity;
-        return validity && validity.badInput;
+    /** Whether the datepicker pop-up should be disabled. */
+    get disabled() {
+        const disabled = this.disabledState();
+        return disabled === undefined && this.datepickerInput ? this.datepickerInput.disabled() : !!disabled;
     }
-    /** Formats a value and sets it on the input element. */
-    formatValue(value) {
-        const formattedValue = value ? this.adapter.format(value, this.dateInputFormat) : '';
-        this.setViewValue(formattedValue);
+    set disabled(value) {
+        const newValue = coerceBooleanProperty(value);
+        if (newValue !== untracked(this.disabledState)) {
+            this.disabledState.set(newValue);
+            this.disabledChange.next(newValue);
+        }
     }
-    setControl(control) {
-        if (this.control) {
-            return;
+    /** Whether the calendar is open. */
+    get opened() {
+        return this.openedState();
+    }
+    set opened(value) {
+        if (coerceBooleanProperty(value)) {
+            this.open();
+        }
+        else {
+            this.close();
         }
-        this.control = control;
-        this.control.valueChanges.subscribe((value) => (this._value = value));
-        // @TODO resolve types
-        this.errorStateTracker.ngControl = { control };
     }
-    /**
-     * @param obj The object to check.
-     * @returns The given object if it is both a date instance and valid, otherwise null.
-     */
-    getValidDateOrNull(obj) {
-        return this.adapter.isDateInstance(obj) && this.adapter.isValid(obj) ? obj : null;
+    /** The currently selected date. */
+    get selected() {
+        return this.validSelected;
     }
-    getDigitPositions(format) {
-        this.firstDigit = this.secondDigit = this.thirdDigit = null;
-        const formatInLowerCase = format.toLowerCase();
-        formatInLowerCase.split('').reduce(({ prev, length, start }, value, index, arr) => {
-            if (value === this.separator || arr.length - 1 === index) {
-                if (!this.firstDigit) {
-                    this.firstDigit = new DateDigit(prev, start, length);
-                }
-                else if (!this.secondDigit) {
-                    this.secondDigit = new DateDigit(prev, start, length);
-                }
-                else if (!this.thirdDigit) {
-                    this.thirdDigit = new DateDigit(prev, start, arr.length - start);
-                }
-                length = 0;
-                start = index + 1;
-            }
-            else {
-                length++;
-            }
-            return { prev: value, length, start };
-        }, { length: 0, start: 0 });
-        if (!this.firstDigit || !this.secondDigit || !this.thirdDigit) {
-            Error(`Can' t use this format: ${format}`);
+    set selected(value) {
+        this.validSelected = value;
+    }
+    get dateFilter() {
+        return this.datepickerInput && this.datepickerInput.dateFilter;
+    }
+    get value() {
+        return this.selected;
+    }
+    constructor() {
+        this.overlay = inject(Overlay);
+        this.overlayLayers = inject(KBQ_OVERLAY_LAYERS);
+        this.injector = inject(Injector);
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.dateAdapter = injectRequiredDateAdapter();
+        this.dir = inject(Directionality, { optional: true });
+        this.document = inject(DOCUMENT);
+        this._hasBackdrop = false;
+        this.disabledState = signal(undefined, ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
+        this.openedState = signal(false, ...(ngDevMode ? [{ debugName: "openedState" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        this.hasBackdropInput = input(undefined, { ...(ngDevMode ? { debugName: "hasBackdropInput" } : /* istanbul ignore next */ {}), alias: 'hasBackdrop',
+            transform: booleanAttribute });
+        /** @docs-private */
+        this.startAtInput = input(undefined, { ...(ngDevMode ? { debugName: "startAtInput" } : /* istanbul ignore next */ {}), alias: 'startAt' });
+        /** @docs-private */
+        this.disabledInput = input(undefined, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled',
+            transform: booleanAttribute });
+        /** @docs-private */
+        this.openedInput = input(undefined, { ...(ngDevMode ? { debugName: "openedInput" } : /* istanbul ignore next */ {}), alias: 'opened',
+            transform: booleanAttribute });
+        /** The minimum selectable date. */
+        this.minDate = input(undefined, ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
+        /** The maximum selectable date. */
+        this.maxDate = input(undefined, ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
+        /**
+         * Emits selected year in multiyear view.
+         * This doesn't imply a change on the selected date.
+         */
+        this.yearSelected = output();
+        /**
+         * Emits selected month in year view.
+         * This doesn't imply a change on the selected date.
+         */
+        this.monthSelected = output();
+        /** Classes to be passed to the date picker panel. Supports the same syntax as the `[class]` binding. */
+        this.panelClass = input(undefined, ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
+        /** Function that can be used to add custom CSS classes to dates. */
+        this.dateClass = input(undefined, ...(ngDevMode ? [{ debugName: "dateClass" }] : /* istanbul ignore next */ []));
+        this.backdropClass = input('cdk-overlay-transparent-backdrop', ...(ngDevMode ? [{ debugName: "backdropClass" }] : /* istanbul ignore next */ []));
+        /** Emits when the datepicker has been opened. */
+        this.openedStream = output({ alias: 'opened' });
+        /** Emits when the datepicker has been closed. */
+        this.closedStream = output({ alias: 'closed' });
+        /** Emits when the datepicker is disabled. */
+        this.disabledChange = new Subject();
+        /** Emits new selected date when selected date changes. */
+        this.selectedChanged = new Subject();
+        /** The id for the datepicker calendar. */
+        this.id = `kbq-datepicker-${datepickerUid++}`;
+        this.validSelected = null;
+        /** The element that was focused before the datepicker was opened. */
+        this.focusedElementBeforeOpen = null;
+        /** Subscription to value changes in the associated input element. */
+        this.inputSubscription = Subscription.EMPTY;
+        this.closeSubscription = Subscription.EMPTY;
+        this.scrollStrategy = inject(KBQ_DATEPICKER_SCROLL_STRATEGY);
+    }
+    ngOnChanges(changes) {
+        // A bound input is handed to its member; unbound, it leaves what code wrote.
+        if (changes['hasBackdropInput']) {
+            const hasBackdrop = this.hasBackdropInput();
+            if (hasBackdrop !== undefined)
+                this.hasBackdrop = hasBackdrop;
+        }
+        // A bound `undefined` is handed over too, as an unset date.
+        if (changes['startAtInput'])
+            this.startAt = this.startAtInput() ?? null;
+        if (changes['disabledInput']) {
+            const disabled = this.disabledInput();
+            if (disabled !== undefined)
+                this.disabled = disabled;
+        }
+        if (changes['openedInput']) {
+            const opened = this.openedInput();
+            if (opened !== undefined)
+                this.opened = opened;
         }
     }
-    createDate(year, month, day) {
-        return this.adapter.createDateTime(year, month, day, this.adapter.getHours(this.value), this.adapter.getMinutes(this.value), this.adapter.getSeconds(this.value), this.adapter.getMilliseconds(this.value));
+    ngOnDestroy() {
+        // Before `close()`: a datepicker going away takes its popup along without playing the exit animation.
+        this.destroyOverlay();
+        this.close();
+        this.inputSubscription.unsubscribe();
+        this.closeSubscription.unsubscribe();
+        this.disabledChange.complete();
     }
-    createDateTime(value) {
-        if (Object.values(value).some(isNaN)) {
-            return null;
+    /** Selects the given date */
+    select(date) {
+        const oldValue = this.selected;
+        this.selected = date;
+        if (!this.dateAdapter.sameDate(oldValue, this.selected)) {
+            untracked(() => this.selectedChanged.next(date));
         }
-        return this.adapter.createDateTime(value.year, value.month - 1, value.date, value.hours, value.minutes, value.seconds, value.milliseconds);
     }
-    // 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;
+    /** Emits the selected year in multiyear view */
+    selectYear(normalizedYear) {
+        this.yearSelected.emit(normalizedYear);
     }
-    /** @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.30", ngImport: i0, type: KbqDatepickerInput, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'input[kbqDatepicker], input[kbqCalendar]',
-                    providers: [
-                        KBQ_DATEPICKER_VALUE_ACCESSOR,
-                        KBQ_DATEPICKER_VALIDATORS,
-                        { provide: KbqFormFieldControl, useExisting: KbqDatepickerInput }
-                    ],
-                    host: {
-                        class: 'kbq-input kbq-datepicker',
-                        '[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"',
-                        '(paste)': 'onPaste($event)',
-                        '(change)': 'onChange()',
-                        '(focus)': 'focusChanged(true)',
-                        '(blur)': 'onBlur()',
-                        '(keydown)': 'onKeyDown($event)'
-                    },
-                    exportAs: 'kbqDatepickerInput'
-                }]
-        }], ctorParameters: () => [], propDecorators: { errorStateMatcher: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], kbqDatepicker: [{
-                type: Input
-            }], kbqCalendar: [{
-                type: Input
-            }], kbqDatepickerFilter: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], min: [{
-                type: Input
-            }], max: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], id: [{
-                type: Input
-            }], kbqValidationTooltip: [{
-                type: Input
-            }], incorrectInput: [{ type: i0.Output, args: ["incorrectInput"] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }], dateInput: [{ type: i0.Output, args: ["dateInput"] }] } });
-
-/** 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.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.30", ngImport: i0, type: KbqDatepickerToggleIcon, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kbqDatepickerToggleIcon]'
-                }]
-        }] });
-class KbqDatepickerToggleIconComponent {
-    constructor() {
-        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;
+    /** Emits selected month in year view */
+    selectMonth(normalizedMonth) {
+        this.monthSelected.emit(normalizedMonth);
     }
-    /** Whether the toggle button is disabled. */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
-    get disabled() {
-        return this.datepicker().disabled || this._disabled;
+    /**
+     * Register an input with this datepicker.
+     *
+     * @param input The datepicker input to register with this datepicker.
+     */
+    registerInput(input) {
+        if (this.datepickerInput) {
+            throw Error('A KbqDatepicker can only be associated with a single input.');
+        }
+        this.datepickerInput = input;
+        this.inputSubscription = this.datepickerInput.valueChange.subscribe((value) => {
+            this.selected = value;
+            if (this.popupComponentRef) {
+                const calendar = this.popupComponentRef.instance.calendar();
+                calendar.monthView()?.init();
+                calendar.activeDate = value;
+            }
+        });
     }
-    set disabled(value) {
-        this._disabled = coerceBooleanProperty(value);
+    /** Open the calendar. */
+    open() {
+        // Untracked, as `close()`, `toggle()` and `select()`: called from a consumer's `effect()`, the state read on
+        // the way — `opened`, `disabled`, the inputs, the value of the input — would make the effect run again on
+        // every open and close.
+        untracked(() => this.openCalendar());
     }
-    /** Whether the calendar is currently on screen. Part of the `KbqSiblingPopup` contract. */
-    get isAttached() {
-        return !!this.datepicker()?.opened;
+    /** Close the calendar. */
+    close(restoreFocus = true) {
+        untracked(() => this.closeCalendar(restoreFocus));
     }
-    ngOnChanges(changes) {
-        if (changes.datepicker && !changes.datepicker.firstChange) {
-            this.watchStateChanges();
+    toggle() {
+        if (this.datepickerInput.isReadOnly) {
+            return;
+        }
+        if (untracked(this.openedState)) {
+            this.close();
+        }
+        else {
+            this.open();
         }
     }
-    ngAfterContentInit() {
-        this.watchStateChanges();
+    /** Body of `open()`. */
+    openCalendar() {
+        if (this.openedState() || this.disabled) {
+            return;
+        }
+        if (!this.datepickerInput) {
+            throw Error('Attempted to open an KbqDatepicker with no associated input.');
+        }
+        if (this.document) {
+            this.focusedElementBeforeOpen = _getFocusedElementPierceShadowDom();
+        }
+        this.openAsPopup();
+        this.openedState.set(true);
+        this.openedStream.emit();
     }
-    ngOnDestroy() {
-        this.stateChangesSubscription.unsubscribe();
+    /** Body of `close()`. */
+    closeCalendar(restoreFocus) {
+        if (!this.openedState()) {
+            return;
+        }
+        // A popup the overlay has already taken down, e.g. on scroll, has nothing left to animate.
+        if (this.popupComponentRef?.hostView.destroyed) {
+            this.destroyOverlay();
+        }
+        else if (this.popupComponentRef) {
+            const instance = this.popupComponentRef.instance;
+            instance.startExitAnimation();
+            instance.animationDone.pipe(take(1)).subscribe(() => this.destroyOverlay());
+        }
+        if (restoreFocus) {
+            this.focusedElementBeforeOpen.focus();
+        }
+        this.openedState.set(false);
+        this.closedStream.emit();
+        this.focusedElementBeforeOpen = null;
     }
-    /** Open datepicker */
-    open($event) {
-        const datepicker = this.datepicker();
-        if (datepicker && !this.disabled) {
-            datepicker.open();
-            $event.stopPropagation();
+    /** Destroys the current overlay. */
+    destroyOverlay() {
+        if (this.popupRef) {
+            this.popupRef.dispose();
+            this.popupRef = this.popupComponentRef = null;
         }
     }
-    watchStateChanges() {
-        this.stateChangesSubscription.unsubscribe();
-        const datepicker = this.datepicker();
-        if (!datepicker)
-            return;
-        this.stateChangesSubscription = merge(datepicker.disabledChange, datepicker.datepickerInput.disabledChange, outputToObservable(datepicker.openedStream), outputToObservable(datepicker.closedStream))
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => this.cdr.markForCheck());
+    /** Open the calendar as a popup. */
+    openAsPopup() {
+        if (!this.calendarPortal) {
+            this.calendarPortal = new ComponentPortal(KbqDatepickerContent, this.viewContainerRef);
+        }
+        // The popup of the last opening may still be playing its exit: disposed once that ends, it would close this one.
+        if (this.popupComponentRef?.instance.animationState === 'void') {
+            this.destroyOverlay();
+        }
+        if (!this.popupRef) {
+            this.createPopup();
+        }
+        if (!this.popupRef.hasAttached()) {
+            this.popupComponentRef = this.popupRef.attach(this.calendarPortal);
+            this.popupComponentRef.instance.datepicker = this;
+            // Update the position once the calendar has rendered.
+            afterNextRender(() => this.popupRef?.updatePosition(), { injector: this.injector });
+        }
     }
-    /** @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"
-                kbq-icon-button="kbq-calendar-o_16"
-                [tabindex]="-1"
-                [class.kbq-active]="datepicker() && datepicker().opened"
-                [disabled]="disabled"
-                [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: ["size", "small", "kbq-icon-button", "tabindex", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** Create the popup. */
+    createPopup() {
+        const overlayConfig = new OverlayConfig({
+            positionStrategy: this.createPopupPositionStrategy(),
+            hasBackdrop: this.hasBackdrop,
+            backdropClass: this.backdropClass(),
+            direction: this.dir,
+            scrollStrategy: this.scrollStrategy(),
+            panelClass: 'kbq-datepicker__popup'
+        });
+        this.popupRef = this.overlay.create(overlayConfig);
+        this.overlayLayers.adopt(this.popupRef, this.datepickerInput.getOrigin().nativeElement);
+        this.closeSubscription = this.closingActions().subscribe(() => this.close(this.restoreFocus()));
+        // The input handles the keys while it has the focus; this covers a focus inside the calendar. CDK hands a key
+        // only to the topmost overlay listening for keys, so a modal underneath no longer closes on the same Escape.
+        this.closeSubscription.add(this.popupRef
+            .keydownEvents()
+            .pipe(filter((event) => event.keyCode === ESCAPE))
+            .subscribe((event) => {
+            event.preventDefault();
+            this.close();
+        }));
+    }
+    /** Whether a close from outside the calendar has to return the focus: unless the press moved it somewhere else. */
+    restoreFocus() {
+        const focused = this.document.activeElement;
+        // A press that keeps the focus where it was, as on the toggle, leaves it in the calendar about to go away.
+        return focused === this.document.body || !!this.popupComponentRef?.location.nativeElement.contains(focused);
+    }
+    closingActions() {
+        return merge(this.popupRef.backdropClick(), this.popupRef.outsidePointerEvents(), this.popupRef.detachments());
+    }
+    /** Create the popup PositionStrategy. */
+    createPopupPositionStrategy() {
+        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([
+            {
+                originX: 'start',
+                originY: 'bottom',
+                overlayX: 'start',
+                overlayY: 'top',
+                panelClass: KBQ_CONNECTED_OVERLAY_BELOW_CLASS
+            },
+            {
+                originX: 'start',
+                originY: 'top',
+                overlayX: 'start',
+                overlayY: 'bottom',
+                panelClass: KBQ_CONNECTED_OVERLAY_ABOVE_CLASS
+            },
+            {
+                originX: 'end',
+                originY: 'bottom',
+                overlayX: 'end',
+                overlayY: 'top'
+            },
+            {
+                originX: 'end',
+                originY: 'top',
+                overlayX: 'end',
+                overlayY: 'bottom'
+            }
+        ]));
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqDatepicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: KbqDatepicker, isStandalone: true, selector: "kbq-datepicker", inputs: { hasBackdropInput: { classPropertyName: "hasBackdropInput", publicName: "hasBackdrop", isSignal: true, isRequired: false, transformFunction: null }, startAtInput: { classPropertyName: "startAtInput", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, openedInput: { classPropertyName: "openedInput", publicName: "opened", isSignal: true, 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" }, exportAs: ["kbqDatepicker"], usesOnChanges: true, hostDirectives: [{ directive: i4.KbqLocaleOverridesDirective, inputs: ["kbqLocaleOverrides", "localeOverrides"] }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDatepickerToggleIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqDatepicker, decorators: [{
             type: Component,
-            args: [{ selector: 'kbq-datepicker-toggle-icon', imports: [KbqIconModule], template: `
-        <ng-content select="[kbqDatepickerToggleIcon]">
-            <i
-                color="contrast-fade"
-                kbq-icon-button="kbq-calendar-o_16"
-                [tabindex]="-1"
-                [class.kbq-active]="datepicker() && datepicker().opened"
-                [disabled]="disabled"
-                [autoColor]="true"
-            ></i>
-        </ng-content>
-    `, providers: [kbqSiblingPopupProvider(KbqDatepickerToggleIconComponent)], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
-                        class: 'kbq-datepicker-toggle-icon',
-                        '[attr.aria-expanded]': 'datepicker().opened',
-                        '[attr.aria-disabled]': 'disabled',
-                        '(click)': 'open($event)'
-                    }, 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"] }]
-        }], propDecorators: { disabled: [{
-                type: Input
-            }], datepicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "for", required: false }] }] } });
+            args: [{
+                    selector: 'kbq-datepicker',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    // The calendar is created through this component's `ViewContainerRef`, so this is the element whose
+                    // carrier it resolves — the one on the input is a sibling of it and never reaches the pop-up.
+                    hostDirectives: [
+                        { directive: KbqLocaleOverridesDirective, inputs: ['kbqLocaleOverrides: localeOverrides'] }
+                    ],
+                    exportAs: 'kbqDatepicker'
+                }]
+        }], ctorParameters: () => [], propDecorators: { hasBackdropInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBackdrop", required: false }] }], startAtInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAt", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], openedInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "opened", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], yearSelected: [{ type: i0.Output, args: ["yearSelected"] }], monthSelected: [{ type: i0.Output, args: ["monthSelected"] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], dateClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateClass", required: false }] }], backdropClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdropClass", required: false }] }], openedStream: [{ type: i0.Output, args: ["opened"] }], closedStream: [{ type: i0.Output, args: ["closed"] }] } });
 
 class KbqDatepickerModule {
-    /** @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,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: KbqDatepickerModule, imports: [KbqButtonModule,
             OverlayModule,
             A11yModule,
             PortalModule,
@@ -2295,7 +2403,7 @@ class KbqDatepickerModule {
             KbqMonthView,
             KbqCalendarHeader,
             KbqFormFieldModule] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDatepickerModule, providers: [KbqDatepickerIntl], imports: [KbqButtonModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqDatepickerModule, imports: [KbqButtonModule,
             OverlayModule,
             A11yModule,
             PortalModule,
@@ -2306,7 +2414,7 @@ class KbqDatepickerModule {
             KbqDatepickerContent,
             KbqCalendarHeader, KbqFormFieldModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqDatepickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqDatepickerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -2327,7 +2435,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         KbqMonthView,
                         KbqCalendarHeader
                     ],
-                    providers: [KbqDatepickerIntl],
                     exports: [
                         KbqCalendar,
                         KbqCalendarBody,
@@ -2347,5 +2454,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { KBQ_DATEPICKER_CONFIGURATION, KBQ_DATEPICKER_DEFAULT_CONFIGURATION, KBQ_DATEPICKER_SCROLL_STRATEGY, KBQ_DATEPICKER_SCROLL_STRATEGY_FACTORY, KBQ_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER, KBQ_DATEPICKER_VALIDATORS, KBQ_DATEPICKER_VALUE_ACCESSOR, KbqCalendar, KbqCalendarBody, KbqCalendarCell, KbqCalendarHeader, KbqDatepicker, KbqDatepickerContent, KbqDatepickerInput, KbqDatepickerInputEvent, KbqDatepickerIntl, KbqDatepickerModule, KbqDatepickerToggleIcon, KbqDatepickerToggleIconComponent, KbqMonthView, MAX_YEAR, kbqDatepickerAnimations };
+export { KBQ_DATEPICKER_CONFIGURATION, KBQ_DATEPICKER_DEFAULT_CONFIGURATION, KBQ_DATEPICKER_DEFAULT_LOCALE_CONFIGURATION, KBQ_DATEPICKER_LOCALE_CONFIGURATION, KBQ_DATEPICKER_SCROLL_STRATEGY, KBQ_DATEPICKER_SCROLL_STRATEGY_FACTORY, KBQ_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER, KBQ_DATEPICKER_VALIDATORS, KBQ_DATEPICKER_VALUE_ACCESSOR, KbqCalendar, KbqCalendarBody, KbqCalendarCell, KbqCalendarHeader, KbqDatepicker, KbqDatepickerContent, KbqDatepickerInput, KbqDatepickerInputEvent, KbqDatepickerModule, KbqDatepickerToggleIcon, KbqDatepickerToggleIconComponent, KbqMonthView, MAX_YEAR, kbqDatepickerLocaleConfigurationProvider };
 //# sourceMappingURL=koobiq-components-datepicker.mjs.map