@koobiq/components 19.8.1 → 20.0.0

package/fesm2022/koobiq-components-datepicker.mjs

@@ -1,24 +1,21 @@
-import { NgClass, TitleCasePipe, DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, Injectable, ViewChild, Optional, InjectionToken, inject, Inject, forwardRef, Directive, DestroyRef, ChangeDetectorRef, ContentChild, NgModule } from '@angular/core';
-import * as i2 from '@koobiq/components/button';
+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 { TitleCasePipe, DOCUMENT } from '@angular/common';
+import * as i1 from '@koobiq/components/button';
 import { KbqButtonModule } from '@koobiq/components/button';
-import * as i1 from '@koobiq/components/core';
-import { KbqOptionModule, defaultOffsetY, ruRULocaleData, validationTooltipShowDelay, validationTooltipHideDelay, KBQ_LOCALE_SERVICE, KBQ_VALIDATION, KbqErrorStateTracker, ErrorStateMatcher, KBQ_DATE_FORMATS } from '@koobiq/components/core';
-import * as i3 from '@koobiq/components/icon';
+import * as i4 from '@koobiq/components/core';
+import { DateAdapter, KbqOptionModule, defaultOffsetY, ruRULocaleData, validationTooltipShowDelay, validationTooltipHideDelay, KBQ_DATE_FORMATS, KBQ_LOCALE_SERVICE, KbqErrorStateTracker, ErrorStateMatcher, TAB, SPACE, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW, HOME, PAGE_UP, END, PAGE_DOWN, ESCAPE, isLetterKey, hasModifierKey, isVerticalMovement, isHorizontalMovement, DELETE, BACKSPACE } from '@koobiq/components/core';
+import * as i2 from '@koobiq/components/icon';
 import { KbqIconModule } from '@koobiq/components/icon';
-import * as i4 from '@koobiq/components/select';
+import * as i3 from '@koobiq/components/select';
 import { KbqSelectModule } from '@koobiq/components/select';
-import * as i5 from '@koobiq/components/form-field';
-import { KbqFormFieldControl, KbqFormField, KbqFormFieldModule } from '@koobiq/components/form-field';
-import { Subject, Subscription, merge, of } from 'rxjs';
+import { Subject, Subscription, merge } from 'rxjs';
 import { trigger, state, transition, style, animate } from '@angular/animations';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { takeUntilDestroyed, outputToObservable } from '@angular/core/rxjs-interop';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, Validators, FormGroupDirective, NgForm } from '@angular/forms';
-import { TAB, SPACE, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW, HOME, PAGE_UP, END, PAGE_DOWN, ESCAPE, isLetterKey, hasModifierKey, isVerticalMovement, isHorizontalMovement, DELETE, BACKSPACE } from '@koobiq/cdk/keycodes';
-import * as i3$1 from '@angular/cdk/bidi';
-import * as i1$1 from '@angular/cdk/overlay';
+import { KbqFormFieldControl, KbqFormField, KbqFormFieldModule } from '@koobiq/components/form-field';
+import { Directionality } from '@angular/cdk/bidi';
 import { Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
 import { _getFocusedElementPierceShadowDom } from '@angular/cdk/platform';
 import { ComponentPortal, PortalModule } from '@angular/cdk/portal';
@@ -43,17 +40,25 @@ class KbqCalendarCell {
  */
 class KbqCalendarBody {
     constructor() {
+        /** The cells to display in the table. */
+        this.rows = input(undefined, ...(ngDevMode ? [{ debugName: "rows" }] : []));
+        /** The value in the table that corresponds to today. */
+        this.todayValue = input(undefined, ...(ngDevMode ? [{ debugName: "todayValue" }] : []));
+        /** The value in the table that is currently selected. */
+        this.selectedValue = input(undefined, ...(ngDevMode ? [{ debugName: "selectedValue" }] : []));
+        /** The minimum number of free cells needed to fit the label in the first row. */
+        this.labelMinRequiredCells = input(undefined, ...(ngDevMode ? [{ debugName: "labelMinRequiredCells" }] : []));
         /** The number of columns in the table. */
-        this.numCols = 7;
+        this.numCols = input(7, ...(ngDevMode ? [{ debugName: "numCols" }] : []));
         /** The cell number of the active cell in the table. */
-        this.activeCell = 0;
+        this.activeCell = input(0, ...(ngDevMode ? [{ debugName: "activeCell" }] : []));
         /**
          * 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 = 1;
+        this.cellAspectRatio = input(1, ...(ngDevMode ? [{ debugName: "cellAspectRatio" }] : []));
         /** Emits when a new value is selected. */
-        this.selectedValueChange = new EventEmitter();
+        this.selectedValueChange = output();
     }
     cellClicked(cell) {
         if (cell.enabled) {
@@ -62,7 +67,9 @@ class KbqCalendarBody {
     }
     ngOnChanges(changes) {
         const columnChanges = changes.numCols;
-        const { rows, numCols } = this;
+        const { rows: rowsInput, numCols: numColsInput } = this;
+        const rows = rowsInput();
+        const numCols = numColsInput();
         if (changes.rows || columnChanges) {
             this.firstRowOffset = rows && rows.length && rows[0].length ? numCols - rows[0].length : 0;
         }
@@ -76,45 +83,29 @@ class KbqCalendarBody {
         }
     }
     isActiveCell(rowIndex, colIndex) {
-        let cellNumber = rowIndex * this.numCols + colIndex;
+        let cellNumber = rowIndex * this.numCols() + colIndex;
         // Account for the fact that the first row may not have as many cells.
         if (rowIndex) {
             cellNumber -= this.firstRowOffset;
         }
-        return cellNumber === this.activeCell;
+        return cellNumber === this.activeCell();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqCalendarBody, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: KbqCalendarBody, isStandalone: true, selector: "[kbq-calendar-body]", inputs: { rows: "rows", todayValue: "todayValue", selectedValue: "selectedValue", labelMinRequiredCells: "labelMinRequiredCells", numCols: "numCols", activeCell: "activeCell", cellAspectRatio: "cellAspectRatio" }, 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                [ngClass]=\"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"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqCalendarBody, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: KbqCalendarBody, isStandalone: true, selector: "[kbq-calendar-body]", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, todayValue: { classPropertyName: "todayValue", publicName: "todayValue", isSignal: true, isRequired: false, transformFunction: null }, selectedValue: { classPropertyName: "selectedValue", publicName: "selectedValue", isSignal: true, isRequired: false, transformFunction: null }, labelMinRequiredCells: { classPropertyName: "labelMinRequiredCells", publicName: "labelMinRequiredCells", isSignal: true, isRequired: false, transformFunction: null }, numCols: { classPropertyName: "numCols", publicName: "numCols", isSignal: true, isRequired: false, transformFunction: null }, activeCell: { classPropertyName: "activeCell", publicName: "activeCell", isSignal: true, isRequired: false, transformFunction: null }, cellAspectRatio: { classPropertyName: "cellAspectRatio", publicName: "cellAspectRatio", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedValueChange: "selectedValueChange" }, host: { classAttribute: "kbq-calendar__body" }, exportAs: ["kbqCalendarBody"], usesOnChanges: true, ngImport: i0, template: "<!-- Create the first row separately so we can include a special spacer cell. -->\n@for (row of rows(); track $index; let rowIndex = $index) {\n    <tr>\n        <!--  We mark this cell as aria-hidden so it doesn't get read out as one of the days in the week.\n        The aspect ratio of the table cells is maintained by setting the top and bottom padding as a\n        percentage of the width (a variant of the trick described here:\n        https://www.w3schools.com/howto/howto_css_aspect_ratio.asp). -->\n        @if (rowIndex === 0 && firstRowOffset) {\n            <td class=\"kbq-calendar__body-label\" [attr.colspan]=\"firstRowOffset\"></td>\n        }\n        @for (item of row; track item.displayValue; let colIndex = $index) {\n            <td\n                class=\"kbq-calendar__body-cell\"\n                [class.kbq-calendar__body_active]=\"isActiveCell(rowIndex, colIndex)\"\n                [class]=\"item.cssClasses!\"\n                [style.paddingBottom]=\"cellPadding\"\n                [style.paddingTop]=\"cellPadding\"\n                [style.width]=\"cellWidth\"\n                [tabindex]=\"-1\"\n                (click)=\"cellClicked(item)\"\n            >\n                <div\n                    class=\"kbq-calendar__body-cell-content\"\n                    [class.kbq-calendar__body-today]=\"todayValue() === item.value\"\n                    [class.kbq-disabled]=\"!item.enabled\"\n                    [class.kbq-selected]=\"selectedValue() === item.value\"\n                >\n                    {{ item.displayValue }}\n                </div>\n            </td>\n        }\n    </tr>\n}\n", styles: [".kbq-calendar__body-cell{position:relative;height:0;line-height:0;text-align:center;outline:none;cursor:pointer;padding:0}.kbq-disabled{cursor:default}.kbq-calendar__body-cell-content{display:flex;align-items:center;justify-content:center;box-sizing:border-box;height:32px;line-height:1;border-radius:var(--kbq-datepicker-size-grid-cell-border-radius);margin-bottom:var(--kbq-datepicker-size-grid-content-gap-vertical)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqCalendarBody, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqCalendarBody, decorators: [{
             type: Component,
-            args: [{ selector: '[kbq-calendar-body]', imports: [
-                        NgClass
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'kbqCalendarBody', host: {
+            args: [{ selector: '[kbq-calendar-body]', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-calendar__body'
-                    }, 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                [ngClass]=\"item.cssClasses!\"\n                [style.paddingBottom]=\"cellPadding\"\n                [style.paddingTop]=\"cellPadding\"\n                [style.width]=\"cellWidth\"\n                [tabindex]=\"-1\"\n                (click)=\"cellClicked(item)\"\n            >\n                <div\n                    class=\"kbq-calendar__body-cell-content\"\n                    [class.kbq-calendar__body-today]=\"todayValue === item.value\"\n                    [class.kbq-disabled]=\"!item.enabled\"\n                    [class.kbq-selected]=\"selectedValue === item.value\"\n                >\n                    {{ item.displayValue }}\n                </div>\n            </td>\n        }\n    </tr>\n}\n", styles: [".kbq-calendar__body-cell{position:relative;height:0;line-height:0;text-align:center;outline:none;cursor:pointer;padding:0}.kbq-disabled{cursor:default}.kbq-calendar__body-cell-content{display:flex;align-items:center;justify-content:center;box-sizing:border-box;height:32px;line-height:1;border-radius:var(--kbq-datepicker-size-grid-cell-border-radius);margin-bottom:var(--kbq-datepicker-size-grid-content-gap-vertical)}\n"] }]
-        }], propDecorators: { rows: [{
-                type: Input
-            }], todayValue: [{
-                type: Input
-            }], selectedValue: [{
-                type: Input
-            }], labelMinRequiredCells: [{
-                type: Input
-            }], numCols: [{
-                type: Input
-            }], activeCell: [{
-                type: Input
-            }], cellAspectRatio: [{
-                type: Input
-            }], selectedValueChange: [{
-                type: Output
-            }] } });
+                    }, exportAs: 'kbqCalendarBody', template: "<!-- Create the first row separately so we can include a special spacer cell. -->\n@for (row of rows(); track $index; let rowIndex = $index) {\n    <tr>\n        <!--  We mark this cell as aria-hidden so it doesn't get read out as one of the days in the week.\n        The aspect ratio of the table cells is maintained by setting the top and bottom padding as a\n        percentage of the width (a variant of the trick described here:\n        https://www.w3schools.com/howto/howto_css_aspect_ratio.asp). -->\n        @if (rowIndex === 0 && firstRowOffset) {\n            <td class=\"kbq-calendar__body-label\" [attr.colspan]=\"firstRowOffset\"></td>\n        }\n        @for (item of row; track item.displayValue; let colIndex = $index) {\n            <td\n                class=\"kbq-calendar__body-cell\"\n                [class.kbq-calendar__body_active]=\"isActiveCell(rowIndex, colIndex)\"\n                [class]=\"item.cssClasses!\"\n                [style.paddingBottom]=\"cellPadding\"\n                [style.paddingTop]=\"cellPadding\"\n                [style.width]=\"cellWidth\"\n                [tabindex]=\"-1\"\n                (click)=\"cellClicked(item)\"\n            >\n                <div\n                    class=\"kbq-calendar__body-cell-content\"\n                    [class.kbq-calendar__body-today]=\"todayValue() === item.value\"\n                    [class.kbq-disabled]=\"!item.enabled\"\n                    [class.kbq-selected]=\"selectedValue() === item.value\"\n                >\n                    {{ item.displayValue }}\n                </div>\n            </td>\n        }\n    </tr>\n}\n", styles: [".kbq-calendar__body-cell{position:relative;height:0;line-height:0;text-align:center;outline:none;cursor:pointer;padding:0}.kbq-disabled{cursor:default}.kbq-calendar__body-cell-content{display:flex;align-items:center;justify-content:center;box-sizing:border-box;height:32px;line-height:1;border-radius:var(--kbq-datepicker-size-grid-cell-border-radius);margin-bottom:var(--kbq-datepicker-size-grid-content-gap-vertical)}\n"] }]
+        }], propDecorators: { rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], todayValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "todayValue", required: false }] }], selectedValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValue", required: false }] }], labelMinRequiredCells: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelMinRequiredCells", required: false }] }], numCols: [{ type: i0.Input, args: [{ isSignal: true, alias: "numCols", required: false }] }], activeCell: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeCell", required: false }] }], cellAspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellAspectRatio", required: false }] }], selectedValueChange: [{ type: i0.Output, args: ["selectedValueChange"] }] } });
 
 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;
     }
@@ -123,6 +114,8 @@ 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;
     }
@@ -133,6 +126,8 @@ 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;
     }
@@ -153,15 +148,15 @@ class KbqCalendarHeader {
     get nextDisabled() {
         return this.compareDate(this.activeDate, this.maxDate) >= 0;
     }
-    constructor(adapter) {
-        this.adapter = adapter;
+    constructor() {
+        this.adapter = inject(DateAdapter);
         this.years = [];
         this._maxDate = this.adapter.createDate(defaultMaxYear, 11);
         this._minDate = this.adapter.createDate(defaultMinYear, 1);
         /** Emits when any date is activated. */
-        this.activeDateChange = new EventEmitter();
-        this.monthSelected = new EventEmitter();
-        this.yearSelected = new EventEmitter();
+        this.activeDateChange = output();
+        this.monthSelected = output();
+        this.yearSelected = output();
         this.monthNames = this.adapter.getMonthNames('long').map((name, i) => {
             return { name, nameShort: this.adapter.getMonthNames('short')[i], value: i, disabled: false };
         });
@@ -244,10 +239,10 @@ class KbqCalendarHeader {
             this.monthNames.forEach((month) => (month.disabled = false));
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqCalendarHeader, deps: [{ token: i1.DateAdapter }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", 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: "pipe", type: TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i2.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i2.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i3.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqSelectModule }, { kind: "component", type: i4.KbqSelect, selector: "kbq-select", inputs: ["hiddenItemsText", "showPreselectedValues", "triggerValuesLimit", "panelClass", "backdropClass", "errorStateMatcher", "sortComparator", "multiline", "searchMinOptionsThreshold", "scrolledToBottomOffset", "hasBackdrop", "placeholder", "required", "multiple", "compareWith", "virtualOptionFactory", "selectAllHandler", "panelWidth", "panelMinWidth", "value", "id", "tabIndex", "disabled", "hiddenItemsTextFormatter"], outputs: ["openedChange", "beforeOpened", "opened", "closed", "selectionChange", "valueChange", "scrolledToBottom"], exportAs: ["kbqSelect"] }, { kind: "directive", type: i4.KbqOptionTooltip, selector: "kbq-option" }, { kind: "component", type: i1.KbqOption, selector: "kbq-option", inputs: ["value", "selectable", "userSelect", "showCheckbox", "viewValue", "disabled"], outputs: ["onSelectionChange"], exportAs: ["kbqOption"] }, { kind: "directive", type: i1.KbqSelectMatcher, selector: "kbq-select-matcher, [kbq-select-matcher]", inputs: ["useDefaultHandlers"] }, { kind: "directive", type: i5.KbqValidateDirective, selector: "        input[kbqInput],        input[kbqNumberInput],        input[kbqInputPassword],        input[kbqTimepicker],        input[kbqDatepicker],        textarea[kbqTextarea],        kbq-select,        kbq-tree-select,        kbq-tag-list    ", exportAs: ["KbqValidate"] }, { kind: "ngmodule", type: KbqOptionModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqCalendarHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: KbqCalendarHeader, isStandalone: true, selector: "kbq-calendar-header", inputs: { activeDate: "activeDate", maxDate: "maxDate", minDate: "minDate" }, outputs: { activeDateChange: "activeDateChange", monthSelected: "monthSelected", yearSelected: "yearSelected" }, host: { classAttribute: "kbq-calendar-header" }, exportAs: ["kbqCalendarHeader"], ngImport: i0, template: "<div class=\"kbq-calendar-header__select-group\">\n    <kbq-select\n        #monthSelect=\"kbqSelect\"\n        class=\"kbq-calendar-header__select\"\n        [panelClass]=\"'kbq-calendar-select-panel'\"\n        [tabIndex]=\"-1\"\n        [value]=\"selectedMonth\"\n        (selectionChange)=\"onMonthSelected($event.value)\"\n    >\n        <button\n            kbq-button\n            kbq-select-matcher\n            class=\"layout-padding-right-xs\"\n            [class.kbq-active]=\"monthSelect.panelOpen\"\n            [color]=\"'contrast'\"\n            [kbqStyle]=\"'transparent'\"\n        >\n            {{ monthNames[selectedMonth].nameShort | titlecase }}\n\n            <i kbq-icon=\"kbq-chevron-down-s_16\" class=\"layout-padding-left-3xs\" [color]=\"'contrast'\"></i>\n        </button>\n\n        @for (month of monthNames; track month.nameShort) {\n            <kbq-option [disabled]=\"month.disabled\" [kbqTooltipDisabled]=\"true\" [value]=\"month.value\">\n                {{ month.name }}\n            </kbq-option>\n        }\n    </kbq-select>\n\n    <kbq-select\n        #yearSelect=\"kbqSelect\"\n        [panelClass]=\"'kbq-calendar-select-panel'\"\n        [tabIndex]=\"-1\"\n        [value]=\"selectedYear\"\n        (selectionChange)=\"onYearSelected($event.value)\"\n    >\n        <button\n            kbq-button\n            kbq-select-matcher\n            class=\"layout-padding-right-xs\"\n            [class.kbq-active]=\"yearSelect.panelOpen\"\n            [color]=\"'contrast'\"\n            [kbqStyle]=\"'transparent'\"\n        >\n            {{ selectedYear }}\n\n            <i kbq-icon=\"kbq-chevron-down-s_16\" class=\"layout-padding-left-3xs\"></i>\n        </button>\n\n        @for (year of years; track year) {\n            <kbq-option [kbqTooltipDisabled]=\"true\" [value]=\"year\">\n                {{ year }}\n            </kbq-option>\n        }\n    </kbq-select>\n</div>\n\n<div class=\"kbq-calendar-header__button-group\">\n    <button\n        kbq-button\n        class=\"kbq-calendar-header__previous-button\"\n        [color]=\"'contrast'\"\n        [disabled]=\"previousDisabled\"\n        [kbqStyle]=\"'transparent'\"\n        [tabindex]=\"-1\"\n        (click)=\"selectPreviousMonth()\"\n    >\n        <i kbq-icon=\"kbq-chevron-left_16\"></i>\n    </button>\n\n    <button\n        kbq-button\n        [color]=\"'contrast'\"\n        [disabled]=\"currentDisabled\"\n        [kbqStyle]=\"'transparent'\"\n        [tabindex]=\"-1\"\n        (click)=\"selectCurrentDate()\"\n    >\n        <i kbq-icon=\"kbq-circle-xs_16\"></i>\n    </button>\n\n    <button\n        kbq-button\n        class=\"kbq-calendar-header__next-button\"\n        [color]=\"'contrast'\"\n        [disabled]=\"nextDisabled\"\n        [kbqStyle]=\"'transparent'\"\n        [tabindex]=\"-1\"\n        (click)=\"selectNextMonth()\"\n    >\n        <i kbq-icon=\"kbq-chevron-right_16\"></i>\n    </button>\n</div>\n", styles: [".kbq-calendar-header{display:flex;flex-direction:row;justify-content:space-between;padding-right:var(--kbq-datepicker-size-header-padding-horizontal);padding-left:var(--kbq-datepicker-size-header-padding-horizontal);margin-bottom:var(--kbq-datepicker-size-header-margin-bottom)}.kbq-calendar-header__select{width:auto!important}.kbq-calendar-header__button-group,.kbq-calendar-header__select-group{display:flex;flex-direction:row}.kbq-calendar-select-panel{margin-top:2px;min-width:98%!important}.kbq-calendar-select-panel .kbq-select__content{max-height:384px;overflow-x:hidden;scrollbar-gutter:auto}.kbq-calendar-select-panel .kbq-select__content .kbq-option{min-width:65px}\n"], dependencies: [{ kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i1.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i1.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i2.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqSelectModule }, { kind: "component", type: i3.KbqSelect, selector: "kbq-select", inputs: ["hiddenItemsText", "showPreselectedValues", "triggerValuesLimit", "panelClass", "backdropClass", "errorStateMatcher", "sortComparator", "multiline", "searchMinOptionsThreshold", "scrolledToBottomOffset", "hasBackdrop", "placeholder", "required", "multiple", "compareWith", "virtualOptionFactory", "selectAllHandler", "panelWidth", "panelMinWidth", "value", "id", "tabIndex", "disabled", "hiddenItemsTextFormatter"], outputs: ["openedChange", "beforeOpened", "opened", "closed", "selectionChange", "valueChange", "scrolledToBottom"], exportAs: ["kbqSelect"] }, { kind: "directive", type: i3.KbqOptionTooltip, selector: "kbq-option" }, { kind: "component", type: i4.KbqOption, selector: "kbq-option", inputs: ["value", "selectable", "userSelect", "showCheckbox", "viewValue", "disabled"], outputs: ["onSelectionChange"], exportAs: ["kbqOption"] }, { kind: "directive", type: i4.KbqSelectMatcher, selector: "kbq-select-matcher, [kbq-select-matcher]", inputs: ["useDefaultHandlers"] }, { kind: "ngmodule", type: KbqOptionModule }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqCalendarHeader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqCalendarHeader, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-calendar-header', imports: [
                         TitleCasePipe,
@@ -255,22 +250,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         KbqIconModule,
                         KbqSelectModule,
                         KbqOptionModule
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'kbqCalendarHeader', host: {
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-calendar-header'
-                    }, 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: () => [{ type: i1.DateAdapter }], propDecorators: { activeDate: [{
+                    }, 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: Output
-            }], monthSelected: [{
-                type: Output
-            }], yearSelected: [{
-                type: Output
-            }] } });
+            }], activeDateChange: [{ type: i0.Output, args: ["activeDateChange"] }], monthSelected: [{ type: i0.Output, args: ["monthSelected"] }], yearSelected: [{ type: i0.Output, args: ["yearSelected"] }] } });
 
 /** @docs-private */
 function createMissingDateImplError(provider) {
@@ -307,10 +296,10 @@ class KbqDatepickerIntl {
         /** A label for the 'switch to year view' button (used by screen readers). */
         this.switchToMultiYearViewLabel = 'Choose month and year';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqDatepickerIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqDatepickerIntl, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDatepickerIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDatepickerIntl, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqDatepickerIntl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDatepickerIntl, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -324,6 +313,8 @@ 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;
     }
@@ -335,6 +326,8 @@ 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;
     }
@@ -342,15 +335,25 @@ class KbqMonthView {
         this._selected = value;
         this.selectedDate = this.getDateInCurrentMonth(this._selected);
     }
-    constructor(changeDetectorRef, adapter) {
-        this.changeDetectorRef = changeDetectorRef;
-        this.adapter = adapter;
+    constructor() {
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+        this.adapter = inject(DateAdapter, { optional: true });
+        /** The minimum selectable date. */
+        this.minDate = input(undefined, ...(ngDevMode ? [{ debugName: "minDate" }] : []));
+        /** The maximum selectable date. */
+        this.maxDate = input(undefined, ...(ngDevMode ? [{ debugName: "maxDate" }] : []));
+        /** 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 a new date is selected. */
-        this.selectedChange = new EventEmitter();
+        this.selectedChange = output();
         /** Emits when any date is selected. */
-        this.userSelection = new EventEmitter();
+        this.userSelection = output();
         /** Emits when any date is activated. */
-        this.activeDateChange = new EventEmitter();
+        this.activeDateChange = output();
+        /** The body of calendar table */
+        this.kbqCalendarBody = viewChild.required(KbqCalendarBody);
         if (!this.adapter) {
             throw createMissingDateImplError('DateAdapter');
         }
@@ -375,6 +378,7 @@ 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. */
@@ -400,16 +404,20 @@ class KbqMonthView {
             }
             const date = this.adapter.createDate(this.adapter.getYear(this.activeDate), this.adapter.getMonth(this.activeDate), i + 1);
             const enabled = this.shouldEnableDate(date);
-            const cellClasses = this.dateClass ? this.dateClass(date) : undefined;
+            const dateClass = this.dateClass();
+            const cellClasses = dateClass ? dateClass(date) : undefined;
             this.weeks[this.weeks.length - 1].push(new KbqCalendarCell(i + 1, dateNames[i], enabled, cellClasses));
         }
     }
     /** Date filter for the month */
     shouldEnableDate(date) {
+        const dateFilter = this.dateFilter();
+        const minDate = this.minDate();
+        const maxDate = this.maxDate();
         return (!!date &&
-            (!this.dateFilter || this.dateFilter(date)) &&
-            (!this.minDate || this.adapter.compareDate(date, this.minDate) >= 0) &&
-            (!this.maxDate || this.adapter.compareDate(date, this.maxDate) <= 0));
+            (!dateFilter || dateFilter(date)) &&
+            (!minDate || this.adapter.compareDate(date, minDate) >= 0) &&
+            (!maxDate || this.adapter.compareDate(date, maxDate) <= 0));
     }
     /**
      * Gets the date in this month that the given Date falls on.
@@ -425,38 +433,19 @@ 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: "19.2.21", ngImport: i0, type: KbqMonthView, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DateAdapter, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: KbqMonthView, isStandalone: true, selector: "kbq-month-view", inputs: { activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate", dateFilter: "dateFilter", dateClass: "dateClass" }, outputs: { selectedChange: "selectedChange", userSelection: "userSelection", activeDateChange: "activeDateChange" }, viewQueries: [{ propertyName: "kbqCalendarBody", first: true, predicate: KbqCalendarBody, descendants: true }], exportAs: ["kbqMonthView"], ngImport: i0, template: "<table class=\"kbq-calendar__table\">\n    <thead class=\"kbq-calendar__table-header\">\n        <tr>\n            @for (day of weekdays; track day) {\n                <th [attr.aria-label]=\"day.long\">\n                    {{ day.narrow }}\n                </th>\n            }\n        </tr>\n        <tr>\n            <th colspan=\"7\" class=\"kbq-calendar__table-header-divider\"></th>\n        </tr>\n    </thead>\n    <tbody\n        kbq-calendar-body\n        [activeCell]=\"adapter.getDate(activeDate) - 1\"\n        [labelMinRequiredCells]=\"3\"\n        [rows]=\"weeks\"\n        [selectedValue]=\"selectedDate!\"\n        [todayValue]=\"todayDate!\"\n        (selectedValueChange)=\"dateSelected($event)\"\n    ></tbody>\n</table>\n", dependencies: [{ kind: "component", type: KbqCalendarBody, selector: "[kbq-calendar-body]", inputs: ["rows", "todayValue", "selectedValue", "labelMinRequiredCells", "numCols", "activeCell", "cellAspectRatio"], outputs: ["selectedValueChange"], exportAs: ["kbqCalendarBody"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqMonthView, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: KbqMonthView, isStandalone: true, selector: "kbq-month-view", inputs: { activeDate: { classPropertyName: "activeDate", publicName: "activeDate", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, dateClass: { classPropertyName: "dateClass", publicName: "dateClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange", userSelection: "userSelection", activeDateChange: "activeDateChange" }, viewQueries: [{ propertyName: "kbqCalendarBody", first: true, predicate: KbqCalendarBody, descendants: true, isSignal: true }], exportAs: ["kbqMonthView"], ngImport: i0, template: "<table class=\"kbq-calendar__table\">\n    <thead class=\"kbq-calendar__table-header\">\n        <tr>\n            @for (day of weekdays; track day) {\n                <th [attr.aria-label]=\"day.long\">\n                    {{ day.narrow }}\n                </th>\n            }\n        </tr>\n        <tr>\n            <th colspan=\"7\" class=\"kbq-calendar__table-header-divider\"></th>\n        </tr>\n    </thead>\n    <tbody\n        kbq-calendar-body\n        [activeCell]=\"adapter.getDate(activeDate) - 1\"\n        [labelMinRequiredCells]=\"3\"\n        [rows]=\"weeks\"\n        [selectedValue]=\"selectedDate!\"\n        [todayValue]=\"todayDate!\"\n        (selectedValueChange)=\"dateSelected($event)\"\n    ></tbody>\n</table>\n", dependencies: [{ kind: "component", type: KbqCalendarBody, selector: "[kbq-calendar-body]", inputs: ["rows", "todayValue", "selectedValue", "labelMinRequiredCells", "numCols", "activeCell", "cellAspectRatio"], outputs: ["selectedValueChange"], exportAs: ["kbqCalendarBody"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqMonthView, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqMonthView, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-month-view', imports: [
                         KbqCalendarBody
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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: () => [{ type: i0.ChangeDetectorRef }, { type: i1.DateAdapter, decorators: [{
-                    type: Optional
-                }] }], propDecorators: { activeDate: [{
+                    ], 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: Input
-            }], maxDate: [{
-                type: Input
-            }], dateFilter: [{
-                type: Input
-            }], dateClass: [{
-                type: Input
-            }], selectedChange: [{
-                type: Output
-            }], userSelection: [{
-                type: Output
-            }], activeDateChange: [{
-                type: Output
-            }], kbqCalendarBody: [{
-                type: ViewChild,
-                args: [KbqCalendarBody, { static: 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.
@@ -464,6 +453,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
  */
 class KbqCalendar {
     /** 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;
     }
@@ -473,6 +464,8 @@ 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;
     }
@@ -480,6 +473,8 @@ 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;
     }
@@ -488,6 +483,8 @@ 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;
     }
@@ -506,29 +503,37 @@ class KbqCalendar {
         this._activeDate = this.adapter.clampDate(value || this.getActiveDateDefault(), this.minDate, this.maxDate);
         this.stateChanges.next();
     }
-    constructor(intl, adapter, changeDetectorRef) {
-        this.adapter = adapter;
-        this.changeDetectorRef = changeDetectorRef;
+    constructor() {
+        this.adapter = inject(DateAdapter, { optional: true });
+        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 = new EventEmitter();
+        this.selectedChange = output();
         /**
          * Emits the year chosen in multiyear view.
          * This doesn't imply a change on the selected date.
          */
-        this.yearSelected = new EventEmitter();
+        this.yearSelected = output();
         /**
          * Emits the month chosen in year view.
          * This doesn't imply a change on the selected date.
          */
-        this.monthSelected = new EventEmitter();
+        this.monthSelected = output();
         /** Emits when any date is selected. */
-        this.userSelection = new EventEmitter();
+        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;
         if (!this.adapter) {
             throw createMissingDateImplError('DateAdapter');
         }
@@ -540,11 +545,12 @@ class KbqCalendar {
     ngOnChanges(changes) {
         const change = changes.minDate || changes.maxDate || changes.dateFilter;
         if (change && !change.firstChange) {
-            if (this.monthView) {
+            const monthView = this.monthView();
+            if (monthView) {
                 // We need to `detectChanges` manually here, because the `minDate`, `maxDate` etc. are
                 // passed down to the view via data bindings which won't be up-to-date when we call `init`.
                 this.changeDetectorRef.detectChanges();
-                this.monthView.init();
+                monthView.init();
             }
         }
         this.stateChanges.next();
@@ -568,14 +574,14 @@ class KbqCalendar {
         this.datepickerInput = input;
         this.inputSubscription = this.datepickerInput.valueChange.subscribe((value) => {
             this.selected = value;
-            this.monthView?.init();
+            this.monthView()?.init();
             this.activeDate = value;
         });
     }
     /** Updates today's date after an update of the active date */
     updateTodaysDate() {
         // eslint-disable-next-line @angular-eslint/no-lifecycle-call
-        this.monthView.ngAfterContentInit();
+        this.monthView().ngAfterContentInit();
     }
     /** Handles date selection in the month view. */
     dateSelected(date) {
@@ -584,6 +590,7 @@ class KbqCalendar {
         }
     }
     userSelected() {
+        // TODO: The 'emit' function requires a mandatory void argument
         this.userSelection.emit();
     }
     /**
@@ -597,20 +604,18 @@ class KbqCalendar {
     getActiveDateDefault() {
         return this.startAt || this.adapter.today();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqCalendar, deps: [{ token: KbqDatepickerIntl }, { token: i1.DateAdapter, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: KbqCalendar, isStandalone: true, selector: "kbq-calendar", inputs: { startAt: "startAt", selected: "selected", minDate: "minDate", maxDate: "maxDate", dateFilter: "dateFilter", dateClass: "dateClass" }, outputs: { selectedChange: "selectedChange", yearSelected: "yearSelected", monthSelected: "monthSelected", userSelection: "userSelection" }, host: { classAttribute: "kbq-calendar" }, viewQueries: [{ propertyName: "monthView", first: true, predicate: KbqMonthView, descendants: true }], exportAs: ["kbqCalendar"], usesOnChanges: true, ngImport: i0, template: "<kbq-calendar-header\n    [maxDate]=\"maxDate\"\n    [minDate]=\"minDate\"\n    [(activeDate)]=\"activeDate\"\n    (monthSelected)=\"monthSelected.emit(activeDate)\"\n    (yearSelected)=\"yearSelected.emit(activeDate)\"\n/>\n\n<div class=\"kbq-calendar__content\">\n    <kbq-month-view\n        [dateClass]=\"dateClass\"\n        [dateFilter]=\"dateFilter\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [selected]=\"selected\"\n        [(activeDate)]=\"activeDate\"\n        (selectedChange)=\"dateSelected($event!)\"\n        (userSelection)=\"userSelected()\"\n    />\n</div>\n", styles: [".kbq-calendar{display:block;box-sizing:initial}.kbq-calendar__content{padding-right:var(--kbq-datepicker-size-grid-padding-horizontal);padding-left:var(--kbq-datepicker-size-grid-padding-horizontal);outline:none}.kbq-calendar__table{border-spacing:0;border-collapse:collapse;width:100%}.kbq-calendar__table-header th{text-align:center;height:30px}.kbq-calendar__table-header th.kbq-calendar__table-header-divider{position:relative;box-sizing:border-box;height:var(--kbq-datepicker-size-grid-content-gap-vertical)}.kbq-calendar__table-header th.kbq-calendar__table-header-divider:after{content:\"\";position:absolute;top:0;left:calc(-1 * var(--kbq-datepicker-size-grid-padding-horizontal));right:calc(-1 * var(--kbq-datepicker-size-grid-padding-horizontal));height:var(--kbq-datepicker-size-grid-divider-height)}\n"], dependencies: [{ kind: "component", type: KbqCalendarHeader, selector: "kbq-calendar-header", inputs: ["activeDate", "maxDate", "minDate"], outputs: ["activeDateChange", "monthSelected", "yearSelected"], exportAs: ["kbqCalendarHeader"] }, { kind: "component", type: KbqMonthView, selector: "kbq-month-view", inputs: ["activeDate", "selected", "minDate", "maxDate", "dateFilter", "dateClass"], outputs: ["selectedChange", "userSelection", "activeDateChange"], exportAs: ["kbqMonthView"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.25", type: KbqCalendar, isStandalone: true, selector: "kbq-calendar", inputs: { startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: false, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: false, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, dateClass: { classPropertyName: "dateClass", publicName: "dateClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange", yearSelected: "yearSelected", monthSelected: "monthSelected", userSelection: "userSelection" }, host: { classAttribute: "kbq-calendar" }, viewQueries: [{ propertyName: "monthView", first: true, predicate: KbqMonthView, descendants: true, isSignal: true }], exportAs: ["kbqCalendar"], usesOnChanges: true, ngImport: i0, template: "<kbq-calendar-header\n    [maxDate]=\"maxDate\"\n    [minDate]=\"minDate\"\n    [(activeDate)]=\"activeDate\"\n    (monthSelected)=\"monthSelected.emit(activeDate)\"\n    (yearSelected)=\"yearSelected.emit(activeDate)\"\n/>\n\n<div class=\"kbq-calendar__content\">\n    <kbq-month-view\n        [dateClass]=\"dateClass()\"\n        [dateFilter]=\"dateFilter()\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [selected]=\"selected\"\n        [(activeDate)]=\"activeDate\"\n        (selectedChange)=\"dateSelected($event!)\"\n        (userSelection)=\"userSelected()\"\n    />\n</div>\n", styles: [".kbq-calendar{display:block;box-sizing:initial}.kbq-calendar__content{padding-right:var(--kbq-datepicker-size-grid-padding-horizontal);padding-left:var(--kbq-datepicker-size-grid-padding-horizontal);outline:none}.kbq-calendar__table{border-spacing:0;border-collapse:collapse;width:100%}.kbq-calendar__table-header th{text-align:center;height:30px}.kbq-calendar__table-header th.kbq-calendar__table-header-divider{position:relative;box-sizing:border-box;height:var(--kbq-datepicker-size-grid-content-gap-vertical)}.kbq-calendar__table-header th.kbq-calendar__table-header-divider:after{content:\"\";position:absolute;top:0;left:calc(-1 * var(--kbq-datepicker-size-grid-padding-horizontal));right:calc(-1 * var(--kbq-datepicker-size-grid-padding-horizontal));height:var(--kbq-datepicker-size-grid-divider-height)}\n"], dependencies: [{ kind: "component", type: KbqCalendarHeader, selector: "kbq-calendar-header", inputs: ["activeDate", "maxDate", "minDate"], outputs: ["activeDateChange", "monthSelected", "yearSelected"], exportAs: ["kbqCalendarHeader"] }, { kind: "component", type: KbqMonthView, selector: "kbq-month-view", inputs: ["activeDate", "selected", "minDate", "maxDate", "dateFilter", "dateClass"], outputs: ["selectedChange", "userSelection", "activeDateChange"], exportAs: ["kbqMonthView"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqCalendar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqCalendar, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-calendar', imports: [
                         KbqCalendarHeader,
                         KbqMonthView
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'kbqCalendar', host: {
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-calendar'
-                    }, 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: () => [{ type: KbqDatepickerIntl }, { type: i1.DateAdapter, decorators: [{
-                    type: Optional
-                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { startAt: [{
+                    }, 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
@@ -618,22 +623,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 type: Input
             }], maxDate: [{
                 type: Input
-            }], dateFilter: [{
-                type: Input
-            }], dateClass: [{
-                type: Input
-            }], selectedChange: [{
-                type: Output
-            }], yearSelected: [{
-                type: Output
-            }], monthSelected: [{
-                type: Output
-            }], userSelection: [{
-                type: Output
-            }], monthView: [{
-                type: ViewChild,
-                args: [KbqMonthView, { static: 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.
@@ -683,10 +673,12 @@ const KBQ_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER = {
  * @docs-private
  */
 class KbqDatepickerContent {
-    constructor(changeDetectorRef) {
-        this.changeDetectorRef = changeDetectorRef;
+    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() {
@@ -702,34 +694,32 @@ class KbqDatepickerContent {
         this.animationState = 'void';
         this.changeDetectorRef.markForCheck();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqDatepickerContent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", 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 }], 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    [ngClass]=\"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-states-foreground-disabled);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"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDatepickerContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.25", type: KbqDatepickerContent, isStandalone: true, selector: "kbq-datepicker__content", host: { listeners: { "@transformPanel.done": "animationDone.next()" }, properties: { "@transformPanel": "animationState" }, classAttribute: "kbq-datepicker__content" }, viewQueries: [{ propertyName: "calendar", first: true, predicate: KbqCalendar, descendants: true, isSignal: true }], exportAs: ["kbqDatepickerContent"], ngImport: i0, template: "<kbq-calendar\n    [dateClass]=\"datepicker.dateClass()\"\n    [dateFilter]=\"datepicker.dateFilter\"\n    [id]=\"datepicker.id\"\n    [maxDate]=\"datepicker.maxDate()\"\n    [minDate]=\"datepicker.minDate()\"\n    [class]=\"datepicker.panelClass()\"\n    [selected]=\"datepicker.selected\"\n    [startAt]=\"datepicker.startAt\"\n    [@fadeInCalendar]=\"'enter'\"\n    (monthSelected)=\"datepicker.selectMonth($event)\"\n    (selectedChange)=\"datepicker.select($event)\"\n    (userSelection)=\"datepicker.close()\"\n    (yearSelected)=\"datepicker.selectYear($event)\"\n/>\n", styles: [".kbq-datepicker__content{display:block;border-radius:var(--kbq-datepicker-size-container-border-radius)}.kbq-datepicker__content .kbq-calendar{width:calc(280px + var(--kbq-datepicker-size-grid-padding-horizontal) * 2);height:270px;padding-top:var(--kbq-datepicker-size-container-padding-vertical);padding-bottom:var(--kbq-datepicker-size-container-padding-vertical)}.kbq-datepicker__content{background:var(--kbq-datepicker-container-background);box-shadow:var(--kbq-datepicker-container-shadow)}.kbq-calendar__table-header{color:var(--kbq-datepicker-header-text)}.kbq-calendar__table-header-divider:after{background:var(--kbq-datepicker-header-divider)}.kbq-calendar__body-cell-content{background:var(--kbq-datepicker-grid-cell-default-background);color:var(--kbq-datepicker-grid-cell-default-text)}.kbq-calendar__body-cell-content.kbq-calendar__body-today{background:var(--kbq-datepicker-grid-cell-today-background);color:var(--kbq-datepicker-grid-cell-today-text)}.kbq-calendar__body-cell-content:hover:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-hover-background)}.kbq-calendar__body-cell-content:active:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-active-background)}.kbq-calendar__body-cell-content.kbq-selected:not(.kbq-disabled){background:var(--kbq-datepicker-grid-cell-states-selected-background);color:var(--kbq-datepicker-grid-cell-states-selected-text)}.kbq-calendar__body-cell-content.kbq-selected:not(.kbq-disabled):hover{background:var(--kbq-datepicker-grid-cell-states-selected-hover-background)}.kbq-calendar__body-cell-content.kbq-disabled{color:var(--kbq-states-foreground-disabled);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: "19.2.21", ngImport: i0, type: KbqDatepickerContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDatepickerContent, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-datepicker__content', imports: [
-                        KbqCalendar,
-                        NgClass
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'kbqDatepickerContent', host: {
+                        KbqCalendar
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-datepicker__content',
                         '[@transformPanel]': 'animationState',
                         '(@transformPanel.done)': 'animationDone.next()'
                     }, animations: [
                         kbqDatepickerAnimations.transformPanel,
                         kbqDatepickerAnimations.fadeInCalendar
-                    ], template: "<kbq-calendar\n    [dateClass]=\"datepicker.dateClass\"\n    [dateFilter]=\"datepicker.dateFilter\"\n    [id]=\"datepicker.id\"\n    [maxDate]=\"datepicker.maxDate\"\n    [minDate]=\"datepicker.minDate\"\n    [ngClass]=\"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-states-foreground-disabled);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"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { calendar: [{
-                type: ViewChild,
-                args: [KbqCalendar]
-            }] } });
+                    ], 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-states-foreground-disabled);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;
     }
@@ -737,6 +727,8 @@ class KbqDatepicker {
         this._hasBackdrop = coerceBooleanProperty(value);
     }
     /** 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.
@@ -746,10 +738,12 @@ class KbqDatepicker {
         const deserializedValue = this.dateAdapter.deserialize(value);
         this._startAt =
             deserializedValue !== null
-                ? this.dateAdapter.clampDate(deserializedValue, this.minDate, this.maxDate)
+                ? this.dateAdapter.clampDate(deserializedValue, this.minDate(), this.maxDate())
                 : null;
     }
     /** 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;
     }
@@ -761,11 +755,18 @@ class KbqDatepicker {
         }
     }
     /** 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) {
-        coerceBooleanProperty(value) ? this.open() : this.close();
+        if (coerceBooleanProperty(value)) {
+            this.open();
+        }
+        else {
+            this.close();
+        }
     }
     /** The currently selected date. */
     get selected() {
@@ -780,30 +781,38 @@ class KbqDatepicker {
     get value() {
         return this.selected;
     }
-    constructor(overlay, ngZone, viewContainerRef, scrollStrategy, dateAdapter, dir) {
-        this.overlay = overlay;
-        this.ngZone = ngZone;
-        this.viewContainerRef = viewContainerRef;
-        this.dateAdapter = dateAdapter;
-        this.dir = dir;
+    constructor() {
+        this.overlay = inject(Overlay);
+        this.ngZone = inject(NgZone);
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.dateAdapter = inject(DateAdapter, { optional: true });
+        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 = new EventEmitter();
+        this.yearSelected = output();
         /**
          * Emits selected month in year view.
          * This doesn't imply a change on the selected date.
          */
-        this.monthSelected = new EventEmitter();
-        this.backdropClass = 'cdk-overlay-transparent-backdrop';
+        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 = new EventEmitter();
+        this.openedStream = output({ alias: 'opened' });
         /** Emits when the datepicker has been closed. */
-        this.closedStream = new EventEmitter();
+        this.closedStream = output({ alias: 'closed' });
         this.stateChanges = new Subject();
         /** Emits when the datepicker is disabled. */
         this.disabledChange = new Subject();
@@ -817,6 +826,7 @@ class KbqDatepicker {
         /** Subscription to value changes in the associated input element. */
         this.inputSubscription = Subscription.EMPTY;
         this.closeSubscription = Subscription.EMPTY;
+        const scrollStrategy = inject(KBQ_DATEPICKER_SCROLL_STRATEGY);
         if (!this.dateAdapter) {
             throw createMissingDateImplError('DateAdapter');
         }
@@ -857,8 +867,9 @@ class KbqDatepicker {
         this.inputSubscription = this.datepickerInput.valueChange.subscribe((value) => {
             this.selected = value;
             if (this.popupComponentRef) {
-                this.popupComponentRef.instance.calendar.monthView?.init();
-                this.popupComponentRef.instance.calendar.activeDate = value;
+                const calendar = this.popupComponentRef.instance.calendar();
+                calendar.monthView()?.init();
+                calendar.activeDate = value;
             }
         });
     }
@@ -875,6 +886,7 @@ class KbqDatepicker {
         }
         this.openAsPopup();
         this._opened = true;
+        // TODO: The 'emit' function requires a mandatory void argument
         this.openedStream.emit();
     }
     /** Close the calendar. */
@@ -891,6 +903,7 @@ class KbqDatepicker {
             this.focusedElementBeforeOpen.focus();
         }
         this._opened = false;
+        // TODO: The 'emit' function requires a mandatory void argument
         this.closedStream.emit();
         this.focusedElementBeforeOpen = null;
     }
@@ -898,7 +911,12 @@ class KbqDatepicker {
         if (this.datepickerInput.isReadOnly) {
             return;
         }
-        this._opened ? this.close() : this.open();
+        if (this._opened) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
     }
     /** Destroys the current overlay. */
     destroyOverlay() {
@@ -930,7 +948,7 @@ class KbqDatepicker {
         const overlayConfig = new OverlayConfig({
             positionStrategy: this.createPopupPositionStrategy(),
             hasBackdrop: this.hasBackdrop,
-            backdropClass: this.backdropClass,
+            backdropClass: this.backdropClass(),
             direction: this.dir,
             scrollStrategy: this.scrollStrategy(),
             panelClass: 'kbq-datepicker__popup'
@@ -982,27 +1000,20 @@ class KbqDatepicker {
             }
         ]);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqDatepicker, deps: [{ token: i1$1.Overlay }, { token: i0.NgZone }, { token: i0.ViewContainerRef }, { token: KBQ_DATEPICKER_SCROLL_STRATEGY }, { token: i1.DateAdapter, optional: true }, { token: i3$1.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: KbqDatepicker, isStandalone: true, selector: "kbq-datepicker", inputs: { hasBackdrop: "hasBackdrop", startAt: "startAt", disabled: "disabled", opened: "opened", minDate: "minDate", maxDate: "maxDate", panelClass: "panelClass", dateClass: "dateClass", backdropClass: "backdropClass" }, outputs: { yearSelected: "yearSelected", monthSelected: "monthSelected", openedStream: "opened", closedStream: "closed" }, providers: [{ provide: KbqFormFieldControl, useExisting: KbqDatepicker }], exportAs: ["kbqDatepicker"], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDatepicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.25", type: KbqDatepicker, isStandalone: true, selector: "kbq-datepicker", inputs: { hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: false, isRequired: false, transformFunction: null }, startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, opened: { classPropertyName: "opened", publicName: "opened", isSignal: false, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, dateClass: { classPropertyName: "dateClass", publicName: "dateClass", isSignal: true, isRequired: false, transformFunction: null }, backdropClass: { classPropertyName: "backdropClass", publicName: "backdropClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { yearSelected: "yearSelected", monthSelected: "monthSelected", openedStream: "opened", closedStream: "closed" }, providers: [{ provide: KbqFormFieldControl, useExisting: KbqDatepicker }], exportAs: ["kbqDatepicker"], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqDatepicker, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDatepicker, decorators: [{
             type: Component,
             args: [{
                     selector: 'kbq-datepicker',
                     template: '',
-                    encapsulation: ViewEncapsulation.None,
+                    providers: [{ provide: KbqFormFieldControl, useExisting: KbqDatepicker }],
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    exportAs: 'kbqDatepicker',
-                    providers: [{ provide: KbqFormFieldControl, useExisting: KbqDatepicker }]
+                    encapsulation: ViewEncapsulation.None,
+                    exportAs: 'kbqDatepicker'
                 }]
-        }], ctorParameters: () => [{ type: i1$1.Overlay }, { type: i0.NgZone }, { type: i0.ViewContainerRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [KBQ_DATEPICKER_SCROLL_STRATEGY]
-                }] }, { type: i1.DateAdapter, decorators: [{
-                    type: Optional
-                }] }, { type: i3$1.Directionality, decorators: [{
-                    type: Optional
-                }] }], propDecorators: { hasBackdrop: [{
+        }], ctorParameters: () => [], propDecorators: { hasBackdrop: [{
                 type: Input
             }], startAt: [{
                 type: Input
@@ -1010,27 +1021,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 type: Input
             }], opened: [{
                 type: Input
-            }], minDate: [{
-                type: Input
-            }], maxDate: [{
-                type: Input
-            }], yearSelected: [{
-                type: Output
-            }], monthSelected: [{
-                type: Output
-            }], panelClass: [{
-                type: Input
-            }], dateClass: [{
-                type: Input
-            }], backdropClass: [{
-                type: Input
-            }], openedStream: [{
-                type: Output,
-                args: ['opened']
-            }], closedStream: [{
-                type: Output,
-                args: ['closed']
-            }] } });
+            }], 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) {
@@ -1150,18 +1141,24 @@ 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;
     }
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get placeholder() {
         return this._placeholder || this.configuration.placeholder;
     }
     set placeholder(value) {
         this._placeholder = value;
     }
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get required() {
         return this._required;
     }
@@ -1169,6 +1166,8 @@ class KbqDatepickerInput {
         this._required = coerceBooleanProperty(value);
     }
     /** 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;
@@ -1185,6 +1184,8 @@ class KbqDatepickerInput {
         });
     }
     /** 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) {
         if (!value) {
             return;
@@ -1193,11 +1194,15 @@ class KbqDatepickerInput {
         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();
     }
     /** 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;
     }
@@ -1213,6 +1218,8 @@ class KbqDatepickerInput {
         }
     }
     /** The minimum valid date. */
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get min() {
         return this._min;
     }
@@ -1221,6 +1228,8 @@ class KbqDatepickerInput {
         this.validatorOnChange();
     }
     /** The maximum valid date. */
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get max() {
         return this._max;
     }
@@ -1229,6 +1238,8 @@ class KbqDatepickerInput {
         this.validatorOnChange();
     }
     /** 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;
     }
@@ -1247,12 +1258,16 @@ class KbqDatepickerInput {
             element.blur();
         }
     }
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get id() {
         return this._id;
     }
     set id(value) {
         this._id = value || this.uid;
     }
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     set kbqValidationTooltip(tooltip) {
         if (!tooltip) {
             return;
@@ -1304,16 +1319,15 @@ class KbqDatepickerInput {
     set selectionEnd(value) {
         this.elementRef.nativeElement.selectionEnd = value;
     }
-    constructor(elementRef, renderer, adapter, dateFormats) {
-        this.elementRef = elementRef;
-        this.renderer = renderer;
-        this.adapter = adapter;
-        this.dateFormats = dateFormats;
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.renderer = inject(Renderer2);
+        this.adapter = inject(DateAdapter, { optional: true });
+        this.dateFormats = inject(KBQ_DATE_FORMATS, { optional: true });
         /** @docs-private */
         this.formField = inject(KbqFormField, { optional: true, host: true });
         /** @docs-private */
         this.localeService = inject(KBQ_LOCALE_SERVICE, { optional: true });
-        this.useLegacyValidation = inject(KBQ_VALIDATION, { optional: true })?.useValidation ?? false;
         /** @docs-private */
         this.externalConfiguration = inject(KBQ_DATEPICKER_CONFIGURATION, { optional: true });
         this.stateChanges = new Subject();
@@ -1324,11 +1338,11 @@ class KbqDatepickerInput {
         /** Emits when the disabled state has changed */
         this.disabledChange = new EventEmitter();
         this._disabled = false;
-        this.incorrectInput = new EventEmitter();
+        this.incorrectInput = output();
         /** Emits when a `change` event is fired on this `<input>`. */
-        this.dateChange = new EventEmitter();
+        this.dateChange = output();
         /** Emits when an `input` event is fired on this `<input>`. */
-        this.dateInput = new EventEmitter();
+        this.dateInput = output();
         this.uid = `kbq-datepicker-${uniqueComponentIdSuffix++}`;
         this.datepickerSubscription = Subscription.EMPTY;
         /** Whether the last value set on the input was valid. */
@@ -1511,6 +1525,7 @@ class KbqDatepickerInput {
         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)) {
@@ -1547,6 +1562,7 @@ class KbqDatepickerInput {
                 setTimeout(this.onInput);
             }
             else {
+                // TODO: The 'emit' function requires a mandatory void argument
                 this.incorrectInput.emit();
             }
         }
@@ -1565,10 +1581,6 @@ class KbqDatepickerInput {
         this.parseOnBlur();
         this.focusChanged(false);
         this.onInput();
-        if (this.useLegacyValidation && this.control) {
-            this.control.updateValueAndValidity({ emitEvent: false });
-            this.control.statusChanges.emit(this.control.status);
-        }
     }
     onPaste($event) {
         $event.preventDefault();
@@ -1578,6 +1590,7 @@ class KbqDatepickerInput {
         }
         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+)$/);
@@ -1771,38 +1784,44 @@ class KbqDatepickerInput {
         return this.adapter.getYear(date) === this.getMinYear();
     }
     getMaxDate(date) {
-        if (this.datepicker?.maxDate && this.isMaxYear(date) && this.isMaxMonth(date)) {
-            return this.adapter.getDate(this.datepicker.maxDate);
+        const maxDate = this.datepicker?.maxDate();
+        if (maxDate && this.isMaxYear(date) && this.isMaxMonth(date)) {
+            return this.adapter.getDate(maxDate);
         }
         return this.adapter.getNumDaysInMonth(date);
     }
     getMinDate(date) {
-        if (this.datepicker?.minDate && this.isMinYear(date) && this.isMinMonth(date)) {
-            return this.adapter.getDate(this.datepicker.minDate);
+        const minDate = this.datepicker?.minDate();
+        if (minDate && this.isMinYear(date) && this.isMinMonth(date)) {
+            return this.adapter.getDate(minDate);
         }
         return 1;
     }
     getMaxMonth(date) {
-        if (this.datepicker?.maxDate && this.isMaxYear(date)) {
-            return this.adapter.getMonth(this.datepicker.maxDate);
+        const maxDate = this.datepicker?.maxDate();
+        if (maxDate && this.isMaxYear(date)) {
+            return this.adapter.getMonth(maxDate);
         }
         return 11;
     }
     getMinMonth(date) {
-        if (this.datepicker?.minDate && this.isMinYear(date)) {
-            return this.adapter.getMonth(this.datepicker.minDate);
+        const minDate = this.datepicker?.minDate();
+        if (minDate && this.isMinYear(date)) {
+            return this.adapter.getMonth(minDate);
         }
         return 0;
     }
     getMaxYear() {
-        if (this.datepicker?.maxDate) {
-            return this.adapter.getYear(this.datepicker.maxDate);
+        const maxDate = this.datepicker?.maxDate();
+        if (maxDate) {
+            return this.adapter.getYear(maxDate);
         }
         return MAX_YEAR;
     }
     getMinYear() {
-        if (this.datepicker?.minDate) {
-            return this.adapter.getYear(this.datepicker.minDate);
+        const minDate = this.datepicker?.minDate();
+        if (minDate) {
+            return this.adapter.getYear(minDate);
         }
         return 1;
     }
@@ -2049,18 +2068,17 @@ class KbqDatepickerInput {
             this.selectionStart = this.selectionStart - 1;
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqDatepickerInput, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.DateAdapter, optional: true }, { token: KBQ_DATE_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqDatepickerInput, isStandalone: true, selector: "input[kbqDatepicker], input[kbqCalendar]", inputs: { errorStateMatcher: "errorStateMatcher", placeholder: "placeholder", required: "required", kbqDatepicker: "kbqDatepicker", kbqCalendar: "kbqCalendar", kbqDatepickerFilter: "kbqDatepickerFilter", value: "value", min: "min", max: "max", disabled: "disabled", id: "id", kbqValidationTooltip: "kbqValidationTooltip" }, outputs: { incorrectInput: "incorrectInput", dateChange: "dateChange", dateInput: "dateInput" }, host: { listeners: { "paste": "onPaste($event)", "change": "onChange()", "focus": "focusChanged(true)", "blur": "onBlur()", "keydown": "onKeyDown($event)" }, properties: { "attr.placeholder": "placeholder", "attr.required": "required", "attr.disabled": "disabled || null", "attr.min": "min ? toISO8601(min) : null", "attr.max": "max ? toISO8601(max) : null", "attr.autocomplete": "\"off\"" }, classAttribute: "kbq-input kbq-datepicker" }, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDatepickerInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqDatepickerInput, isStandalone: true, selector: "input[kbqDatepicker], input[kbqCalendar]", inputs: { errorStateMatcher: "errorStateMatcher", placeholder: "placeholder", required: "required", kbqDatepicker: "kbqDatepicker", kbqCalendar: "kbqCalendar", kbqDatepickerFilter: "kbqDatepickerFilter", value: "value", min: "min", max: "max", disabled: "disabled", id: "id", kbqValidationTooltip: "kbqValidationTooltip" }, outputs: { incorrectInput: "incorrectInput", dateChange: "dateChange", dateInput: "dateInput" }, host: { listeners: { "paste": "onPaste($event)", "change": "onChange()", "focus": "focusChanged(true)", "blur": "onBlur()", "keydown": "onKeyDown($event)" }, properties: { "attr.placeholder": "placeholder", "attr.required": "required", "attr.disabled": "disabled || null", "attr.min": "min ? toISO8601(min) : null", "attr.max": "max ? toISO8601(max) : null", "attr.autocomplete": "\"off\"" }, classAttribute: "kbq-input kbq-datepicker" }, providers: [
             KBQ_DATEPICKER_VALUE_ACCESSOR,
             KBQ_DATEPICKER_VALIDATORS,
             { provide: KbqFormFieldControl, useExisting: KbqDatepickerInput }
         ], exportAs: ["kbqDatepickerInput"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqDatepickerInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDatepickerInput, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[kbqDatepicker], input[kbqCalendar]',
-                    exportAs: 'kbqDatepickerInput',
                     providers: [
                         KBQ_DATEPICKER_VALUE_ACCESSOR,
                         KBQ_DATEPICKER_VALIDATORS,
@@ -2079,16 +2097,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         '(focus)': 'focusChanged(true)',
                         '(blur)': 'onBlur()',
                         '(keydown)': 'onKeyDown($event)'
-                    }
+                    },
+                    exportAs: 'kbqDatepickerInput'
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.DateAdapter, decorators: [{
-                    type: Optional
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [KBQ_DATE_FORMATS]
-                }] }], propDecorators: { errorStateMatcher: [{
+        }], ctorParameters: () => [], propDecorators: { errorStateMatcher: [{
                 type: Input
             }], placeholder: [{
                 type: Input
@@ -2112,20 +2124,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 type: Input
             }], kbqValidationTooltip: [{
                 type: Input
-            }], incorrectInput: [{
-                type: Output
-            }], dateChange: [{
-                type: Output
-            }], dateInput: [{
-                type: Output
-            }] } });
+            }], 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: "19.2.21", ngImport: i0, type: KbqDatepickerToggleIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqDatepickerToggleIcon, isStandalone: true, selector: "[kbqDatepickerToggleIcon]", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDatepickerToggleIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqDatepickerToggleIcon, isStandalone: true, selector: "[kbqDatepickerToggleIcon]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqDatepickerToggleIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDatepickerToggleIcon, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqDatepickerToggleIcon]'
@@ -2134,13 +2140,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
 class KbqDatepickerToggleIconComponent {
     constructor() {
         this._disabled = false;
+        /** Datepicker instance that the button will toggle. */
+        this.datepicker = input(undefined, ...(ngDevMode ? [{ debugName: "datepicker", alias: 'for' }] : [{ alias: 'for' }]));
         this.destroyRef = inject(DestroyRef);
         this.cdr = inject(ChangeDetectorRef);
         this.stateChangesSubscription = Subscription.EMPTY;
     }
     /** 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;
+        return this.datepicker().disabled || this._disabled;
     }
     set disabled(value) {
         this._disabled = coerceBooleanProperty(value);
@@ -2158,34 +2168,36 @@ class KbqDatepickerToggleIconComponent {
     }
     /** Open datepicker */
     open($event) {
-        if (this.datepicker && !this.disabled) {
-            this.datepicker.open();
+        const datepicker = this.datepicker();
+        if (datepicker && !this.disabled) {
+            datepicker.open();
             $event.stopPropagation();
         }
     }
     watchStateChanges() {
         this.stateChangesSubscription.unsubscribe();
-        if (!this.datepicker)
+        const datepicker = this.datepicker();
+        if (!datepicker)
             return;
-        this.stateChangesSubscription = merge(this.datepicker.disabledChange, this.datepicker.datepickerInput.disabledChange, this.datepicker.openedStream, this.datepicker.closedStream)
+        this.stateChangesSubscription = merge(datepicker.disabledChange, datepicker.datepickerInput.disabledChange, outputToObservable(datepicker.openedStream), outputToObservable(datepicker.closedStream))
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(() => this.cdr.markForCheck());
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqDatepickerToggleIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: KbqDatepickerToggleIconComponent, isStandalone: true, selector: "kbq-datepicker-toggle-icon", inputs: { disabled: "disabled", datepicker: ["for", "datepicker"] }, host: { listeners: { "click": "open($event)" }, properties: { "attr.aria-expanded": "datepicker.opened", "attr.aria-disabled": "disabled" }, classAttribute: "kbq-datepicker-toggle-icon" }, usesOnChanges: true, ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDatepickerToggleIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.25", type: KbqDatepickerToggleIconComponent, isStandalone: true, selector: "kbq-datepicker-toggle-icon", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, datepicker: { classPropertyName: "datepicker", publicName: "for", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "open($event)" }, properties: { "attr.aria-expanded": "datepicker().opened", "attr.aria-disabled": "disabled" }, classAttribute: "kbq-datepicker-toggle-icon" }, usesOnChanges: true, ngImport: i0, template: `
         <ng-content select="[kbqDatepickerToggleIcon]">
             <i
                 color="contrast-fade"
                 kbq-icon-button="kbq-calendar-o_16"
                 [tabindex]="-1"
-                [class.kbq-active]="datepicker && datepicker.opened"
+                [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);height:var(--kbq-datepicker-toggle-size-height);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: i3.KbqIconButton, selector: "[kbq-icon-button]", inputs: ["small", "kbq-icon-button", "tabindex", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    `, isInline: true, styles: [".kbq-datepicker-toggle-icon{display:inline-flex;justify-content:center;align-items:center}.kbq-datepicker-toggle:focus{outline:0}.kbq-datepicker-toggle__button.kbq-button-icon{width:var(--kbq-datepicker-toggle-size-width);height:var(--kbq-datepicker-toggle-size-height);margin-left:2px}.kbq-form-field-appearance-legacy .kbq-form-field-prefix .kbq-datepicker-toggle__default-icon,.kbq-form-field-appearance-legacy .kbq-form-field-suffix .kbq-datepicker-toggle__default-icon{width:1em}.kbq-form-field:not(.kbq-form-field-appearance-legacy) .kbq-form-field-prefix .kbq-datepicker-toggle__default-icon,.kbq-form-field:not(.kbq-form-field-appearance-legacy) .kbq-form-field-suffix .kbq-datepicker-toggle__default-icon{display:block;width:1.5em;height:1.5em}.kbq-form-field:not(.kbq-form-field-appearance-legacy) .kbq-form-field-prefix .kbq-button-icon .kbq-datepicker-toggle__default-icon,.kbq-form-field:not(.kbq-form-field-appearance-legacy) .kbq-form-field-suffix .kbq-button-icon .kbq-datepicker-toggle__default-icon{margin:auto}\n"], dependencies: [{ kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i2.KbqIconButton, selector: "[kbq-icon-button]", inputs: ["small", "kbq-icon-button", "tabindex", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqDatepickerToggleIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDatepickerToggleIconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-datepicker-toggle-icon', imports: [KbqIconModule], template: `
         <ng-content select="[kbqDatepickerToggleIcon]">
@@ -2193,108 +2205,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 color="contrast-fade"
                 kbq-icon-button="kbq-calendar-o_16"
                 [tabindex]="-1"
-                [class.kbq-active]="datepicker && datepicker.opened"
+                [class.kbq-active]="datepicker() && datepicker().opened"
                 [disabled]="disabled"
                 [autoColor]="true"
             ></i>
         </ng-content>
-    `, host: {
+    `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-datepicker-toggle-icon',
-                        '[attr.aria-expanded]': 'datepicker.opened',
+                        '[attr.aria-expanded]': 'datepicker().opened',
                         '[attr.aria-disabled]': 'disabled',
                         '(click)': 'open($event)'
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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);height:var(--kbq-datepicker-toggle-size-height);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"] }]
+                    }, 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);height:var(--kbq-datepicker-toggle-size-height);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: Input,
-                args: ['for']
-            }] } });
-/**
- * @deprecated Use `KbqDatepickerToggleIconComponent` instead
- */
-class KbqDatepickerToggle {
-    /** Whether the toggle button is disabled. */
-    get disabled() {
-        return this._disabled === undefined ? this.datepicker.disabled : this._disabled;
-    }
-    set disabled(value) {
-        this._disabled = coerceBooleanProperty(value);
-    }
-    constructor(intl, changeDetectorRef) {
-        this.intl = intl;
-        this.changeDetectorRef = changeDetectorRef;
-        this.stateChanges = Subscription.EMPTY;
-    }
-    ngOnChanges(changes) {
-        if (changes.datepicker) {
-            this.watchStateChanges();
-        }
-    }
-    ngAfterContentInit() {
-        this.watchStateChanges();
-    }
-    ngOnDestroy() {
-        this.stateChanges.unsubscribe();
-    }
-    open(event) {
-        if (this.datepicker && !this.disabled) {
-            this.datepicker.open();
-            event.stopPropagation();
-        }
-    }
-    watchStateChanges() {
-        const datepickerDisabled = this.datepicker ? this.datepicker.disabledChange : of();
-        const inputDisabled = this.datepicker && this.datepicker.datepickerInput
-            ? this.datepicker.datepickerInput.disabledChange
-            : of();
-        const datepickerToggled = this.datepicker
-            ? merge(this.datepicker.openedStream, this.datepicker.closedStream)
-            : of();
-        this.stateChanges.unsubscribe();
-        this.stateChanges = merge(this.intl.changes, datepickerDisabled, inputDisabled, datepickerToggled).subscribe(() => this.changeDetectorRef.markForCheck());
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqDatepickerToggle, deps: [{ token: KbqDatepickerIntl }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: KbqDatepickerToggle, isStandalone: true, selector: "kbq-datepicker-toggle", inputs: { disabled: "disabled", datepicker: ["for", "datepicker"], tabIndex: "tabIndex" }, host: { properties: { "class.kbq-active": "datepicker && datepicker.opened" }, classAttribute: "kbq-datepicker-toggle" }, queries: [{ propertyName: "customIcon", first: true, predicate: KbqDatepickerToggleIcon, descendants: true }], viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true }], exportAs: ["kbqDatepickerToggle"], usesOnChanges: true, ngImport: i0, template: "<!--todo need simplify this-->\n<button\n    #button\n    aria-haspopup=\"true\"\n    kbq-button\n    type=\"button\"\n    class=\"kbq-datepicker-toggle__button\"\n    [attr.aria-label]=\"intl.openCalendarLabel\"\n    [disabled]=\"disabled\"\n    [tabIndex]=\"tabIndex\"\n    (click)=\"open($event)\"\n>\n    @if (!customIcon) {\n        <i\n            color=\"contrast-fade\"\n            kbq-icon-button=\"kbq-calendar-o_16\"\n            class=\"kbq-datepicker-toggle__default-icon\"\n            [tabindex]=\"-1\"\n        ></i>\n    }\n\n    <ng-content select=\"[kbqDatepickerToggleIcon]\" />\n</button>\n", 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);height:var(--kbq-datepicker-toggle-size-height);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"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqDatepickerToggle, decorators: [{
-            type: Component,
-            args: [{ selector: 'kbq-datepicker-toggle', host: {
-                        class: 'kbq-datepicker-toggle',
-                        '[class.kbq-active]': 'datepicker && datepicker.opened'
-                    }, exportAs: 'kbqDatepickerToggle', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--todo need simplify this-->\n<button\n    #button\n    aria-haspopup=\"true\"\n    kbq-button\n    type=\"button\"\n    class=\"kbq-datepicker-toggle__button\"\n    [attr.aria-label]=\"intl.openCalendarLabel\"\n    [disabled]=\"disabled\"\n    [tabIndex]=\"tabIndex\"\n    (click)=\"open($event)\"\n>\n    @if (!customIcon) {\n        <i\n            color=\"contrast-fade\"\n            kbq-icon-button=\"kbq-calendar-o_16\"\n            class=\"kbq-datepicker-toggle__default-icon\"\n            [tabindex]=\"-1\"\n        ></i>\n    }\n\n    <ng-content select=\"[kbqDatepickerToggleIcon]\" />\n</button>\n", 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);height:var(--kbq-datepicker-toggle-size-height);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"] }]
-        }], ctorParameters: () => [{ type: KbqDatepickerIntl }, { type: i0.ChangeDetectorRef }], propDecorators: { disabled: [{
-                type: Input
-            }], datepicker: [{
-                type: Input,
-                args: ['for']
-            }], tabIndex: [{
-                type: Input
-            }], customIcon: [{
-                type: ContentChild,
-                args: [KbqDatepickerToggleIcon, { static: false }]
-            }], button: [{
-                type: ViewChild,
-                args: ['button', { static: false }]
-            }] } });
+            }], datepicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "for", required: false }] }] } });
 
 class KbqDatepickerModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: KbqDatepickerModule, imports: [KbqButtonModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqDatepickerModule, imports: [KbqButtonModule,
             OverlayModule,
             A11yModule,
             PortalModule,
             KbqSelectModule,
             KbqIconModule,
             KbqDatepickerToggleIconComponent,
-            NgClass,
             TitleCasePipe,
             KbqCalendar,
             KbqCalendarBody,
             KbqDatepicker,
             KbqDatepickerContent,
             KbqDatepickerInput,
-            KbqDatepickerToggle,
             KbqDatepickerToggleIcon,
             KbqMonthView,
             KbqCalendarHeader], exports: [KbqCalendar,
@@ -2302,13 +2242,12 @@ class KbqDatepickerModule {
             KbqDatepicker,
             KbqDatepickerContent,
             KbqDatepickerInput,
-            KbqDatepickerToggle,
             KbqDatepickerToggleIcon,
             KbqDatepickerToggleIconComponent,
             KbqMonthView,
             KbqCalendarHeader,
             KbqFormFieldModule] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqDatepickerModule, providers: [
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDatepickerModule, providers: [
             KbqDatepickerIntl,
             KBQ_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER
         ], imports: [KbqButtonModule,
@@ -2322,7 +2261,7 @@ class KbqDatepickerModule {
             KbqDatepickerContent,
             KbqCalendarHeader, KbqFormFieldModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqDatepickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDatepickerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -2333,34 +2272,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         KbqSelectModule,
                         KbqIconModule,
                         KbqDatepickerToggleIconComponent,
-                        NgClass,
                         TitleCasePipe,
                         KbqCalendar,
                         KbqCalendarBody,
                         KbqDatepicker,
                         KbqDatepickerContent,
                         KbqDatepickerInput,
-                        KbqDatepickerToggle,
                         KbqDatepickerToggleIcon,
                         KbqMonthView,
                         KbqCalendarHeader
                     ],
+                    providers: [
+                        KbqDatepickerIntl,
+                        KBQ_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER
+                    ],
                     exports: [
                         KbqCalendar,
                         KbqCalendarBody,
                         KbqDatepicker,
                         KbqDatepickerContent,
                         KbqDatepickerInput,
-                        KbqDatepickerToggle,
                         KbqDatepickerToggleIcon,
                         KbqDatepickerToggleIconComponent,
                         KbqMonthView,
                         KbqCalendarHeader,
                         KbqFormFieldModule
-                    ],
-                    providers: [
-                        KbqDatepickerIntl,
-                        KBQ_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER
                     ]
                 }]
         }] });
@@ -2369,5 +2305,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", 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, KbqDatepickerToggle, KbqDatepickerToggleIcon, KbqDatepickerToggleIconComponent, KbqMonthView, MAX_YEAR, kbqDatepickerAnimations };
+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 };
 //# sourceMappingURL=koobiq-components-datepicker.mjs.map