@koobiq/components 16.0.0-beta.1

package/fesm2022/koobiq-components-datepicker.mjs

@@ -0,0 +1,2101 @@
+import { A11yModule } from '@angular/cdk/a11y';
+import * as i3$1 from '@angular/cdk/overlay';
+import { Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
+import { ComponentPortal, PortalModule } from '@angular/cdk/portal';
+import * as i1 from '@angular/common';
+import { DOCUMENT, CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, Injectable, Optional, Inject, ViewChild, InjectionToken, forwardRef, Directive, ContentChild, NgModule } from '@angular/core';
+import * as i3 from '@koobiq/components/button';
+import { KbqButtonModule } from '@koobiq/components/button';
+import * as i6 from '@koobiq/components/icon';
+import { KbqIconModule } from '@koobiq/components/icon';
+import * as i5 from '@koobiq/components/select';
+import { KbqSelectModule } from '@koobiq/components/select';
+import * as i1$1 from '@koobiq/components/core';
+import { KBQ_DATE_FORMATS, validationTooltipShowDelay, validationTooltipHideDelay, KBQ_LOCALE_SERVICE } from '@koobiq/components/core';
+import * as i4 from '@koobiq/components/form-field';
+import { KbqFormFieldControl } from '@koobiq/components/form-field';
+import { Subject, Subscription, merge, of } from 'rxjs';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { NG_VALUE_ACCESSOR, NG_VALIDATORS, Validators } 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 '@koobiq/components/tooltip';
+import * as i5$1 from '@angular/cdk/bidi';
+import { take } from 'rxjs/operators';
+import { trigger, state, style, transition, animate } from '@angular/animations';
+
+// tslint:disable:no-magic-numbers
+/**
+ * An internal class that represents the data corresponding to a single calendar cell.
+ * @docs-private
+ */
+class KbqCalendarCell {
+    constructor(value, displayValue, enabled, cssClasses) {
+        this.value = value;
+        this.displayValue = displayValue;
+        this.enabled = enabled;
+        this.cssClasses = cssClasses;
+    }
+}
+/**
+ * An internal component used to display calendar data in a table.
+ * @docs-private
+ */
+class KbqCalendarBody {
+    constructor() {
+        /** The number of columns in the table. */
+        this.numCols = 7;
+        /** The cell number of the active cell in the table. */
+        this.activeCell = 0;
+        /**
+         * 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;
+        /** Emits when a new value is selected. */
+        this.selectedValueChange = new EventEmitter();
+    }
+    cellClicked(cell) {
+        if (cell.enabled) {
+            this.selectedValueChange.emit(cell.value);
+        }
+    }
+    ngOnChanges(changes) {
+        const columnChanges = changes.numCols;
+        // tslint:disable-next-line:no-this-assignment
+        const { rows, numCols } = this;
+        if (changes.rows || columnChanges) {
+            this.firstRowOffset = rows && rows.length && rows[0].length ? numCols - rows[0].length : 0;
+        }
+        if (changes.cellAspectRatio || columnChanges || !this.cellPadding) {
+            this.cellPadding = `${this.cellAspectRatio * 50 / numCols}%`;
+        }
+        if (columnChanges || !this.cellWidth) {
+            this.cellWidth = `${100 / numCols}%`;
+        }
+    }
+    isActiveCell(rowIndex, 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;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqCalendarBody, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqCalendarBody, 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: ["mcCalendarBody"], usesOnChanges: true, ngImport: i0, template: "<!-- Create the first row separately so we can include a special spacer cell. -->\n<tr *ngFor=\"let row of rows; let rowIndex = index\">\n    <!--\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    -->\n    <td *ngIf=\"rowIndex === 0 && firstRowOffset\"\n        class=\"kbq-calendar__body-label\"\n        [attr.colspan]=\"firstRowOffset\">\n    </td>\n\n    <td *ngFor=\"let item of row; let colIndex = index\"\n        class=\"kbq-calendar__body-cell\"\n        [ngClass]=\"item.cssClasses!\"\n        [tabindex]=\"isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n        [class.kbq-calendar__body_disabled]=\"!item.enabled\"\n        [class.kbq-calendar__body_active]=\"isActiveCell(rowIndex, colIndex)\"\n        (click)=\"cellClicked(item)\"\n        [style.width]=\"cellWidth\"\n        [style.paddingTop]=\"cellPadding\"\n        [style.paddingBottom]=\"cellPadding\">\n        <div class=\"kbq-calendar__body-cell-content\"\n             [class.kbq-selected]=\"selectedValue === item.value\"\n             [class.kbq-calendar__body-today]=\"todayValue === item.value\">\n            {{ item.displayValue }}\n        </div>\n    </td>\n</tr>\n", styles: [".kbq-calendar__body{min-width:calc(7 * var(--kbq-datepicker-body-size-cell-min-size, 32px))}.kbq-calendar__body-cell{position:relative;height:0;line-height:0;text-align:center;outline:none;cursor:pointer}.kbq-calendar__body_disabled{cursor:default}.kbq-calendar__body-cell-content{position:absolute;top:var(--kbq-datepicker-body-size-cell-margin, 5%);left:var(--kbq-datepicker-body-size-cell-margin, 5%);padding:var(--kbq-datepicker-body-size-cell-padding, 8px);display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:90%;height:90%;line-height:1;border-width:var(--kbq-datepicker-body-size-cell-border-width, 1px);border-radius:var(--kbq-datepicker-body-size-cell-border-radius, 0);border-style:solid}kbq-month-view .kbq-calendar__body-cell-content{justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqCalendarBody, decorators: [{
+            type: Component,
+            args: [{ selector: '[kbq-calendar-body]', exportAs: 'mcCalendarBody', host: {
+                        class: 'kbq-calendar__body'
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Create the first row separately so we can include a special spacer cell. -->\n<tr *ngFor=\"let row of rows; let rowIndex = index\">\n    <!--\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    -->\n    <td *ngIf=\"rowIndex === 0 && firstRowOffset\"\n        class=\"kbq-calendar__body-label\"\n        [attr.colspan]=\"firstRowOffset\">\n    </td>\n\n    <td *ngFor=\"let item of row; let colIndex = index\"\n        class=\"kbq-calendar__body-cell\"\n        [ngClass]=\"item.cssClasses!\"\n        [tabindex]=\"isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n        [class.kbq-calendar__body_disabled]=\"!item.enabled\"\n        [class.kbq-calendar__body_active]=\"isActiveCell(rowIndex, colIndex)\"\n        (click)=\"cellClicked(item)\"\n        [style.width]=\"cellWidth\"\n        [style.paddingTop]=\"cellPadding\"\n        [style.paddingBottom]=\"cellPadding\">\n        <div class=\"kbq-calendar__body-cell-content\"\n             [class.kbq-selected]=\"selectedValue === item.value\"\n             [class.kbq-calendar__body-today]=\"todayValue === item.value\">\n            {{ item.displayValue }}\n        </div>\n    </td>\n</tr>\n", styles: [".kbq-calendar__body{min-width:calc(7 * var(--kbq-datepicker-body-size-cell-min-size, 32px))}.kbq-calendar__body-cell{position:relative;height:0;line-height:0;text-align:center;outline:none;cursor:pointer}.kbq-calendar__body_disabled{cursor:default}.kbq-calendar__body-cell-content{position:absolute;top:var(--kbq-datepicker-body-size-cell-margin, 5%);left:var(--kbq-datepicker-body-size-cell-margin, 5%);padding:var(--kbq-datepicker-body-size-cell-padding, 8px);display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:90%;height:90%;line-height:1;border-width:var(--kbq-datepicker-body-size-cell-border-width, 1px);border-radius:var(--kbq-datepicker-body-size-cell-border-radius, 0);border-style:solid}kbq-month-view .kbq-calendar__body-cell-content{justify-content:flex-end}\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
+            }] } });
+
+const defaultMinYear = 1900;
+const defaultMaxYear = 2099;
+/** Default header for KbqCalendar */
+class KbqCalendarHeader {
+    get activeDate() {
+        return this._activeDate;
+    }
+    set activeDate(value) {
+        this._activeDate = value;
+        this.updateSelectedValues();
+    }
+    get maxDate() {
+        return this._maxDate;
+    }
+    set maxDate(value) {
+        if (!value) {
+            return;
+        }
+        this._maxDate = value;
+        this.updateYearsArray();
+    }
+    get minDate() {
+        return this._minDate;
+    }
+    set minDate(value) {
+        if (!value) {
+            return;
+        }
+        this._minDate = value;
+        this.updateYearsArray();
+    }
+    get previousDisabled() {
+        return this.compareDate(this.activeDate, this.minDate) < 0;
+    }
+    get nextDisabled() {
+        return this.compareDate(this.activeDate, this.maxDate) >= 0;
+    }
+    constructor(adapter) {
+        this.adapter = adapter;
+        this.years = [];
+        // tslint:disable-next-line:no-magic-numbers
+        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.monthNames = this.adapter.getMonthNames('long')
+            .map((name, i) => ({ name, value: i }));
+    }
+    ngAfterContentInit() {
+        this.updateYearsArray();
+        this.updateSelectedValues();
+    }
+    /** Handles when a new month is selected. */
+    onMonthSelected(month) {
+        const year = this.adapter.getYear(this.activeDate);
+        const normalizedDate = this.adapter.createDate(year, month);
+        const daysInMonth = this.adapter.getNumDaysInMonth(normalizedDate);
+        this.activeDate = this.adapter.createDate(year, month, Math.min(this.adapter.getDate(this.activeDate), daysInMonth));
+        this.monthSelected.emit(this.activeDate);
+        this.activeDateChange.emit(this.activeDate);
+    }
+    /** Handles when a new year is selected. */
+    onYearSelected(year) {
+        const month = this.adapter.getMonth(this.activeDate);
+        const daysInMonth = this.adapter.getNumDaysInMonth(this.adapter.createDate(year, month));
+        this.activeDate = this.adapter.createDate(year, month, Math.min(this.adapter.getDate(this.activeDate), daysInMonth));
+        this.yearSelected.emit(this.activeDate);
+        this.activeDateChange.emit(this.activeDate);
+    }
+    selectCurrentDate() {
+        this.activeDate = this.adapter.today();
+        this.activeDateChange.emit(this.activeDate);
+    }
+    /** Handles user clicks on the previous button. */
+    selectPreviousMonth() {
+        this.activeDate = this.adapter.addCalendarMonths(this.activeDate, -1);
+        this.activeDateChange.emit(this.activeDate);
+    }
+    /** Handles user clicks on the next button. */
+    selectNextMonth() {
+        this.activeDate = this.adapter.addCalendarMonths(this.activeDate, 1);
+        this.activeDateChange.emit(this.activeDate);
+    }
+    compareDate(first, second) {
+        const normalizedFirst = this.adapter.createDate(this.adapter.getYear(first), this.adapter.getMonth(first));
+        const normalizedSecond = this.adapter.createDate(this.adapter.getYear(second), this.adapter.getMonth(second));
+        return this.adapter.compareDate(normalizedFirst, normalizedSecond);
+    }
+    updateSelectedValues() {
+        this.selectedMonth = this.monthNames[this.adapter.getMonth(this.activeDate)].value;
+        const selectedYear = this.adapter.getYear(this.activeDate);
+        this.selectedYear = this.years.includes(selectedYear) ? selectedYear : this.years[0];
+    }
+    updateYearsArray() {
+        const minYear = this.adapter.getYear(this.minDate);
+        const maxYear = this.adapter.getYear(this.maxDate);
+        this.years = [];
+        for (let i = minYear; i <= maxYear; i++) {
+            this.years.push(i);
+        }
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqCalendarHeader, deps: [{ token: i1$1.DateAdapter }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqCalendarHeader, selector: "kbq-calendar-header", inputs: { activeDate: "activeDate", maxDate: "maxDate", minDate: "minDate" }, outputs: { activeDateChange: "activeDateChange", monthSelected: "monthSelected", yearSelected: "yearSelected" }, host: { classAttribute: "kbq-calendar-header" }, exportAs: ["mcCalendarHeader"], ngImport: i0, template: "<div class=\"kbq-calendar-header__select-group\">\n    <kbq-select\n        class=\"kbq-calendar-header__select\"\n        #monthSelect=\"mcSelect\"\n        [value]=\"selectedMonth\"\n        [panelClass]=\"'kbq-calendar-select-panel'\"\n        (selectionChange)=\"onMonthSelected($event.value)\">\n\n        <button class=\"kbq-button_transparent layout-padding-right-xs\"\n                kbq-button\n                kbq-select-matcher\n                [class.kbq-active]=\"monthSelect.panelOpen\"\n                [tabindex]=\"-1\">\n            {{ monthSelect.triggerValue }}\n\n            <i class=\"layout-padding-left-3xs\" kbq-icon=\"mc-angle-down-S_16\"></i>\n        </button>\n\n        <kbq-option *ngFor=\"let month of monthNames\"\n                   [mcTooltipDisabled]=\"true\"\n                   [value]=\"month.value\">\n            {{ month.name }}\n        </kbq-option>\n    </kbq-select>\n\n    <kbq-select\n        #yearSelect=\"mcSelect\"\n        [value]=\"selectedYear\"\n        [panelClass]=\"'kbq-calendar-select-panel'\"\n        (selectionChange)=\"onYearSelected($event.value)\">\n        <button class=\"kbq-button_transparent layout-padding-right-xs\"\n                kbq-button\n                kbq-select-matcher\n                [class.kbq-active]=\"yearSelect.panelOpen\"\n                [tabindex]=\"-1\">\n            {{ yearSelect.triggerValue }}\n\n            <i class=\"layout-padding-left-3xs\" kbq-icon=\"mc-angle-down-S_16\"></i>\n        </button>\n\n        <kbq-option *ngFor=\"let year of years\"\n                   [mcTooltipDisabled]=\"true\"\n                   [value]=\"year\">\n            {{ year }}\n        </kbq-option>\n    </kbq-select>\n</div>\n\n<div class=\"kbq-calendar-header__button-group\">\n    <button kbq-button\n            class=\"kbq-button_transparent kbq-calendar-header__previous-button\"\n            [tabindex]=\"-1\"\n            [disabled]=\"previousDisabled\"\n            (click)=\"selectPreviousMonth()\">\n\n        <i kbq-icon=\"mc-angle-left-L_16\"></i>\n    </button>\n\n    <button kbq-button\n            class=\"kbq-button_transparent\"\n            [tabindex]=\"-1\"\n            (click)=\"selectCurrentDate()\">\n\n        <i kbq-icon=\"mc-circle-8_16\"></i>\n    </button>\n\n    <button kbq-button\n            class=\"kbq-button_transparent kbq-calendar-header__next-button\"\n            [tabindex]=\"-1\"\n            [disabled]=\"nextDisabled\"\n            (click)=\"selectNextMonth()\">\n\n        <i kbq-icon=\"mc-angle-right-L_16\"></i>\n    </button>\n</div>\n", styles: [".kbq-calendar-header{display:flex;flex-direction:row;justify-content:space-between;padding:var(--kbq-datepicker-calendar-size-padding-top, 16px) var(--kbq-datepicker-calendar-size-padding-horizontal, 8px) var(--kbq-datepicker-calendar-size-padding-blocks, 12px) var(--kbq-datepicker-calendar-size-padding-horizontal, 8px)}.kbq-calendar-header__previous-button:after{border-left-width:var(--kbq-datepicker-calendar-size-icon-border-width, 2px);transform:var(--kbq-datepicker-calendar-size-icon-prev-icon-transform, translateX(2px) rotate(-45deg))}.kbq-calendar-header__next-button:after{border-right-width:var(--kbq-datepicker-calendar-size-icon-border-width, 2px);transform:var(--kbq-datepicker-calendar-size-icon-nex-icon-transform, translateX(-2px) rotate(45deg))}.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:stable}.kbq-calendar-select-panel .kbq-select__content .kbq-option{min-width:65px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3.KbqButton, selector: "[kbq-button]", inputs: ["color", "tabIndex", "kbqStyle", "disabled"] }, { kind: "directive", type: i3.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "directive", type: i4.KbqValidateDirective, selector: "        input[mcInput],        input[mcInputPassword],        input[mcTimepicker],        input[mcDatepicker],        textarea[mcTextarea],        kbq-select,        kbq-tree-select,        kbq-tag-list    ", exportAs: ["KbqValidate"] }, { kind: "component", type: i5.KbqSelect, selector: "kbq-select", inputs: ["disabled", "tabIndex", "hiddenItemsText", "panelClass", "backdropClass", "errorStateMatcher", "sortComparator", "hasBackdrop", "placeholder", "required", "multiple", "compareWith", "value", "id", "hiddenItemsTextFormatter"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["mcSelect"] }, { kind: "directive", type: i5.KbqSelectMatcher, selector: "kbq-select-matcher, [kbq-select-matcher]" }, { kind: "directive", type: i5.KbqOptionTooltip, selector: "kbq-option" }, { kind: "component", type: i1$1.KbqOption, selector: "kbq-option", inputs: ["value", "showCheckbox", "disabled"], outputs: ["onSelectionChange"], exportAs: ["mcOption"] }, { kind: "component", type: i6.KbqIcon, selector: "[kbq-icon]", inputs: ["color", "small", "autoColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqCalendarHeader, decorators: [{
+            type: Component,
+            args: [{ selector: 'kbq-calendar-header', exportAs: 'mcCalendarHeader', host: {
+                        class: 'kbq-calendar-header'
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kbq-calendar-header__select-group\">\n    <kbq-select\n        class=\"kbq-calendar-header__select\"\n        #monthSelect=\"mcSelect\"\n        [value]=\"selectedMonth\"\n        [panelClass]=\"'kbq-calendar-select-panel'\"\n        (selectionChange)=\"onMonthSelected($event.value)\">\n\n        <button class=\"kbq-button_transparent layout-padding-right-xs\"\n                kbq-button\n                kbq-select-matcher\n                [class.kbq-active]=\"monthSelect.panelOpen\"\n                [tabindex]=\"-1\">\n            {{ monthSelect.triggerValue }}\n\n            <i class=\"layout-padding-left-3xs\" kbq-icon=\"mc-angle-down-S_16\"></i>\n        </button>\n\n        <kbq-option *ngFor=\"let month of monthNames\"\n                   [mcTooltipDisabled]=\"true\"\n                   [value]=\"month.value\">\n            {{ month.name }}\n        </kbq-option>\n    </kbq-select>\n\n    <kbq-select\n        #yearSelect=\"mcSelect\"\n        [value]=\"selectedYear\"\n        [panelClass]=\"'kbq-calendar-select-panel'\"\n        (selectionChange)=\"onYearSelected($event.value)\">\n        <button class=\"kbq-button_transparent layout-padding-right-xs\"\n                kbq-button\n                kbq-select-matcher\n                [class.kbq-active]=\"yearSelect.panelOpen\"\n                [tabindex]=\"-1\">\n            {{ yearSelect.triggerValue }}\n\n            <i class=\"layout-padding-left-3xs\" kbq-icon=\"mc-angle-down-S_16\"></i>\n        </button>\n\n        <kbq-option *ngFor=\"let year of years\"\n                   [mcTooltipDisabled]=\"true\"\n                   [value]=\"year\">\n            {{ year }}\n        </kbq-option>\n    </kbq-select>\n</div>\n\n<div class=\"kbq-calendar-header__button-group\">\n    <button kbq-button\n            class=\"kbq-button_transparent kbq-calendar-header__previous-button\"\n            [tabindex]=\"-1\"\n            [disabled]=\"previousDisabled\"\n            (click)=\"selectPreviousMonth()\">\n\n        <i kbq-icon=\"mc-angle-left-L_16\"></i>\n    </button>\n\n    <button kbq-button\n            class=\"kbq-button_transparent\"\n            [tabindex]=\"-1\"\n            (click)=\"selectCurrentDate()\">\n\n        <i kbq-icon=\"mc-circle-8_16\"></i>\n    </button>\n\n    <button kbq-button\n            class=\"kbq-button_transparent kbq-calendar-header__next-button\"\n            [tabindex]=\"-1\"\n            [disabled]=\"nextDisabled\"\n            (click)=\"selectNextMonth()\">\n\n        <i kbq-icon=\"mc-angle-right-L_16\"></i>\n    </button>\n</div>\n", styles: [".kbq-calendar-header{display:flex;flex-direction:row;justify-content:space-between;padding:var(--kbq-datepicker-calendar-size-padding-top, 16px) var(--kbq-datepicker-calendar-size-padding-horizontal, 8px) var(--kbq-datepicker-calendar-size-padding-blocks, 12px) var(--kbq-datepicker-calendar-size-padding-horizontal, 8px)}.kbq-calendar-header__previous-button:after{border-left-width:var(--kbq-datepicker-calendar-size-icon-border-width, 2px);transform:var(--kbq-datepicker-calendar-size-icon-prev-icon-transform, translateX(2px) rotate(-45deg))}.kbq-calendar-header__next-button:after{border-right-width:var(--kbq-datepicker-calendar-size-icon-border-width, 2px);transform:var(--kbq-datepicker-calendar-size-icon-nex-icon-transform, translateX(-2px) rotate(45deg))}.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:stable}.kbq-calendar-select-panel .kbq-select__content .kbq-option{min-width:65px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.DateAdapter }]; }, propDecorators: { activeDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], activeDateChange: [{
+                type: Output
+            }], monthSelected: [{
+                type: Output
+            }], yearSelected: [{
+                type: Output
+            }] } });
+
+/** @docs-private */
+function createMissingDateImplError(provider) {
+    return Error(`KbqDatepicker: No provider found for ${provider}. You must import one of the existing ` +
+        `modules at your application root or provide a custom implementation or use exists ones.`);
+}
+
+/** Datepicker data that requires internationalization. */
+class KbqDatepickerIntl {
+    constructor() {
+        /**
+         * Stream that emits whenever the labels here are changed. Use this to notify
+         * components if the labels have changed after initialization.
+         */
+        this.changes = new Subject();
+        /** A label for the calendar popup (used by screen readers). */
+        this.calendarLabel = 'Calendar';
+        /** A label for the button used to open the calendar popup (used by screen readers). */
+        this.openCalendarLabel = 'Open calendar';
+        /** A label for the previous month button (used by screen readers). */
+        this.prevMonthLabel = 'Previous month';
+        /** A label for the next month button (used by screen readers). */
+        this.nextMonthLabel = 'Next month';
+        /** A label for the previous year button (used by screen readers). */
+        this.prevYearLabel = 'Previous year';
+        /** A label for the next year button (used by screen readers). */
+        this.nextYearLabel = 'Next year';
+        /** A label for the previous multi-year button (used by screen readers). */
+        this.prevMultiYearLabel = 'Previous 20 years';
+        /** A label for the next multi-year button (used by screen readers). */
+        this.nextMultiYearLabel = 'Next 20 years';
+        /** A label for the 'switch to month view' button (used by screen readers). */
+        this.switchToMonthViewLabel = 'Choose date';
+        /** A label for the 'switch to year view' button (used by screen readers). */
+        this.switchToMultiYearViewLabel = 'Choose month and year';
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqDatepickerIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqDatepickerIntl, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqDatepickerIntl, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+// tslint:disable:no-magic-numbers
+const DAYS_PER_WEEK = 7;
+/**
+ * An internal component used to display a single month in the datepicker.
+ * @docs-private
+ */
+class KbqMonthView {
+    /**
+     * The date to display in this month view (everything other than the month and year is ignored).
+     */
+    get activeDate() {
+        return this._activeDate;
+    }
+    set activeDate(value) {
+        const oldValue = this._activeDate;
+        this._activeDate = value;
+        if (!this.hasSameMonthAndYear(oldValue, value)) {
+            this.init();
+        }
+    }
+    /** The currently selected date. */
+    get selected() {
+        return this._selected;
+    }
+    set selected(value) {
+        this._selected = value;
+        this.selectedDate = this.getDateInCurrentMonth(this._selected);
+    }
+    constructor(changeDetectorRef, dateFormats, adapter) {
+        this.changeDetectorRef = changeDetectorRef;
+        this.dateFormats = dateFormats;
+        this.adapter = adapter;
+        /** Emits when a new date is selected. */
+        this.selectedChange = new EventEmitter();
+        /** Emits when any date is selected. */
+        this.userSelection = new EventEmitter();
+        /** Emits when any date is activated. */
+        this.activeDateChange = new EventEmitter();
+        if (!this.adapter) {
+            throw createMissingDateImplError('DateAdapter');
+        }
+        if (!this.dateFormats) {
+            throw createMissingDateImplError('KBQ_DATE_FORMATS');
+        }
+        const firstDayOfWeek = this.adapter.getFirstDayOfWeek();
+        const narrowWeekdays = this.adapter.getDayOfWeekNames('short');
+        const longWeekdays = this.adapter.getDayOfWeekNames('long');
+        // Rotate the labels for days of the week based on the configured first day of the week.
+        const weekdays = longWeekdays.map((long, i) => {
+            return { long, narrow: narrowWeekdays[i] };
+        });
+        this.weekdays = weekdays
+            .slice(firstDayOfWeek)
+            .concat(weekdays.slice(0, firstDayOfWeek));
+        this._activeDate = this.adapter.today();
+    }
+    ngAfterContentInit() {
+        this.init();
+    }
+    /** Handles when a new date is selected. */
+    dateSelected(date) {
+        if (this.selectedDate !== date) {
+            const selectedYear = this.adapter.getYear(this.activeDate);
+            const selectedMonth = this.adapter.getMonth(this.activeDate);
+            const selectedDate = this.adapter.createDate(selectedYear, selectedMonth, date);
+            this.selectedChange.emit(selectedDate);
+        }
+        this.userSelection.emit();
+    }
+    /** Initializes this month view. */
+    init() {
+        this.selectedDate = this.getDateInCurrentMonth(this.selected);
+        this.todayDate = this.getDateInCurrentMonth(this.adapter.today());
+        const firstOfMonth = this.adapter.createDate(this.adapter.getYear(this.activeDate), this.adapter.getMonth(this.activeDate));
+        this.firstWeekOffset = (DAYS_PER_WEEK + this.adapter.getDayOfWeek(firstOfMonth) - this.adapter.getFirstDayOfWeek()) % DAYS_PER_WEEK;
+        this.createWeekCells();
+        this.changeDetectorRef.markForCheck();
+    }
+    /** Creates KbqCalendarCells for the dates in this month. */
+    createWeekCells() {
+        const daysInMonth = this.adapter.getNumDaysInMonth(this.activeDate);
+        const dateNames = this.adapter.getDateNames();
+        this.weeks = [[]];
+        for (let i = 0, cell = this.firstWeekOffset; i < daysInMonth; i++, cell++) {
+            if (cell === DAYS_PER_WEEK) {
+                this.weeks.push([]);
+                cell = 0;
+            }
+            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;
+            this.weeks[this.weeks.length - 1]
+                .push(new KbqCalendarCell(i + 1, dateNames[i], enabled, cellClasses));
+        }
+    }
+    /** Date filter for the month */
+    shouldEnableDate(date) {
+        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);
+    }
+    /**
+     * Gets the date in this month that the given Date falls on.
+     * Returns null if the given Date is in another month.
+     */
+    getDateInCurrentMonth(date) {
+        return date && this.hasSameMonthAndYear(date, this.activeDate) ? this.adapter.getDate(date) : null;
+    }
+    /** Checks whether the 2 dates are non-null and fall within the same month of the same year. */
+    hasSameMonthAndYear(d1, d2) {
+        return !!(d1 && d2 && 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: "16.1.5", ngImport: i0, type: KbqMonthView, deps: [{ token: i0.ChangeDetectorRef }, { token: KBQ_DATE_FORMATS, optional: true }, { token: i1$1.DateAdapter, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqMonthView, 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: "mcCalendarBody", first: true, predicate: KbqCalendarBody, descendants: true }], exportAs: ["mcMonthView"], ngImport: i0, template: "<table class=\"kbq-calendar__table\">\n    <thead class=\"kbq-calendar__table-header\">\n        <tr>\n            <th *ngFor=\"let day of weekdays\" [attr.aria-label]=\"day.long\">{{day.narrow}}</th>\n        </tr>\n        <tr>\n            <th class=\"kbq-calendar__table-header-divider\" colspan=\"7\"></th>\n        </tr>\n    </thead>\n    <tbody kbq-calendar-body\n           [rows]=\"weeks\"\n           [todayValue]=\"todayDate!\"\n           [selectedValue]=\"selectedDate!\"\n           [labelMinRequiredCells]=\"3\"\n           [activeCell]=\"adapter.getDate(activeDate) - 1\"\n           (selectedValueChange)=\"dateSelected($event)\">\n    </tbody>\n</table>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: KbqCalendarBody, selector: "[kbq-calendar-body]", inputs: ["rows", "todayValue", "selectedValue", "labelMinRequiredCells", "numCols", "activeCell", "cellAspectRatio"], outputs: ["selectedValueChange"], exportAs: ["mcCalendarBody"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqMonthView, decorators: [{
+            type: Component,
+            args: [{ selector: 'kbq-month-view', exportAs: 'mcMonthView', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<table class=\"kbq-calendar__table\">\n    <thead class=\"kbq-calendar__table-header\">\n        <tr>\n            <th *ngFor=\"let day of weekdays\" [attr.aria-label]=\"day.long\">{{day.narrow}}</th>\n        </tr>\n        <tr>\n            <th class=\"kbq-calendar__table-header-divider\" colspan=\"7\"></th>\n        </tr>\n    </thead>\n    <tbody kbq-calendar-body\n           [rows]=\"weeks\"\n           [todayValue]=\"todayDate!\"\n           [selectedValue]=\"selectedDate!\"\n           [labelMinRequiredCells]=\"3\"\n           [activeCell]=\"adapter.getDate(activeDate) - 1\"\n           (selectedValueChange)=\"dateSelected($event)\">\n    </tbody>\n</table>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [KBQ_DATE_FORMATS]
+                }] }, { type: i1$1.DateAdapter, decorators: [{
+                    type: Optional
+                }] }]; }, 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
+            }], mcCalendarBody: [{
+                type: ViewChild,
+                args: [KbqCalendarBody, { static: false }]
+            }] } });
+
+/**
+ * A calendar that is used as part of the datepicker.
+ * @docs-private
+ */
+class KbqCalendar {
+    /** A date representing the period (month or year) to start the calendar in. */
+    get startAt() {
+        return this._startAt;
+    }
+    set startAt(value) {
+        const deserializedValue = this.getValidDateOrNull(this.adapter.deserialize(value));
+        this._startAt = deserializedValue !== null ?
+            this.adapter.clampDate(deserializedValue, this.minDate, this.maxDate) : null;
+    }
+    /** The currently selected date. */
+    get selected() {
+        return this._selected;
+    }
+    set selected(value) {
+        this._selected = this.adapter.deserialize(value);
+    }
+    /** The minimum selectable date. */
+    get minDate() {
+        return this._minDate;
+    }
+    set minDate(value) {
+        this._minDate = this.adapter.deserialize(value);
+        this.startAt = this._startAt;
+    }
+    /** The maximum selectable date. */
+    get maxDate() {
+        return this._maxDate;
+    }
+    set maxDate(value) {
+        this._maxDate = this.adapter.deserialize(value);
+        this.startAt = this._startAt;
+    }
+    /**
+     * The current active date. This determines which time period is shown and which date is
+     * highlighted and used as the anchor on  when using keyboard navigation.
+     */
+    get activeDate() {
+        return this._activeDate;
+    }
+    set activeDate(value) {
+        this._activeDate = this.adapter.clampDate(value || this.getActiveDateDefault(), this.minDate, this.maxDate);
+        this.stateChanges.next();
+    }
+    constructor(intl, adapter, dateFormats, changeDetectorRef) {
+        this.adapter = adapter;
+        this.dateFormats = dateFormats;
+        this.changeDetectorRef = changeDetectorRef;
+        /** Emits when the currently selected date changes. */
+        this.selectedChange = new EventEmitter();
+        /**
+         * Emits the year chosen in multiyear view.
+         * This doesn't imply a change on the selected date.
+         */
+        this.yearSelected = new EventEmitter();
+        /**
+         * Emits the month chosen in year view.
+         * This doesn't imply a change on the selected date.
+         */
+        this.monthSelected = new EventEmitter();
+        /** Emits when any date is selected. */
+        this.userSelection = new EventEmitter();
+        /**
+         * Emits whenever there is a state change that the header may need to respond to.
+         */
+        this.stateChanges = new Subject();
+        if (!this.adapter) {
+            throw createMissingDateImplError('DateAdapter');
+        }
+        if (!this.dateFormats) {
+            throw createMissingDateImplError('KBQ_DATE_FORMATS');
+        }
+        this.intlChanges = intl.changes.subscribe(() => {
+            changeDetectorRef.markForCheck();
+            this.stateChanges.next();
+        });
+    }
+    ngAfterContentInit() {
+        this.activeDate = this.getActiveDateDefault();
+    }
+    ngOnDestroy() {
+        this.intlChanges.unsubscribe();
+        this.stateChanges.complete();
+    }
+    ngOnChanges(changes) {
+        const change = changes.minDate || changes.maxDate || changes.dateFilter;
+        if (change && !change.firstChange) {
+            if (this.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();
+            }
+        }
+        this.stateChanges.next();
+    }
+    /** Updates today's date after an update of the active date */
+    updateTodaysDate() {
+        this.monthView.ngAfterContentInit();
+    }
+    /** Handles date selection in the month view. */
+    dateSelected(date) {
+        if (!this.adapter.sameDate(date, this.selected)) {
+            this.selectedChange.emit(date);
+        }
+    }
+    userSelected() {
+        this.userSelection.emit();
+    }
+    /**
+     * @param obj The object to check.
+     * @returns The given object if it is both a date instance and valid, otherwise null.
+     */
+    // todo выглядит как костыль от которого нужно избавиться
+    getValidDateOrNull(obj) {
+        return (this.adapter.isDateInstance(obj) && this.adapter.isValid(obj)) ? obj : null;
+    }
+    getActiveDateDefault() {
+        return this.startAt || this.adapter.today();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqCalendar, deps: [{ token: KbqDatepickerIntl }, { token: i1$1.DateAdapter, optional: true }, { token: KBQ_DATE_FORMATS, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqCalendar, 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: ["mcCalendar"], usesOnChanges: true, ngImport: i0, template: "<kbq-calendar-header\n    [(activeDate)]=\"activeDate\"\n    [maxDate]=\"maxDate\"\n    [minDate]=\"minDate\"\n    (monthSelected)=\"monthSelected.emit(activeDate)\"\n    (yearSelected)=\"yearSelected.emit(activeDate)\">\n</kbq-calendar-header>\n\n<div class=\"kbq-calendar__content\">\n    <kbq-month-view\n        [(activeDate)]=\"activeDate\"\n        [selected]=\"selected\"\n        [dateFilter]=\"dateFilter\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [dateClass]=\"dateClass\"\n        (selectedChange)=\"dateSelected($event!)\"\n        (userSelection)=\"userSelected()\">\n    </kbq-month-view>\n</div>\n", styles: [".kbq-calendar{display:block}.kbq-calendar__content{padding:0 var(--kbq-datepicker-calendar-size-padding-horizontal, 8px) var(--kbq-datepicker-calendar-size-padding-horizontal, 8px) var(--kbq-datepicker-calendar-size-padding-horizontal, 8px);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;height:calc(var(--kbq-datepicker-calendar-size-padding-blocks, 12px) - 2px)}.kbq-calendar__table-header th.kbq-calendar__table-header-divider:after{content:\"\";position:absolute;top:0;left:calc(-1 * var(--kbq-datepicker-calendar-size-padding-horizontal, 8px));right:calc(-1 * var(--kbq-datepicker-calendar-size-padding-horizontal, 8px));height:var(--kbq-datepicker-calendar-size-divider-width, 1px)}\n"], dependencies: [{ kind: "component", type: KbqMonthView, selector: "kbq-month-view", inputs: ["activeDate", "selected", "minDate", "maxDate", "dateFilter", "dateClass"], outputs: ["selectedChange", "userSelection", "activeDateChange"], exportAs: ["mcMonthView"] }, { kind: "component", type: KbqCalendarHeader, selector: "kbq-calendar-header", inputs: ["activeDate", "maxDate", "minDate"], outputs: ["activeDateChange", "monthSelected", "yearSelected"], exportAs: ["mcCalendarHeader"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqCalendar, decorators: [{
+            type: Component,
+            args: [{ selector: 'kbq-calendar', exportAs: 'mcCalendar', host: {
+                        class: 'kbq-calendar'
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<kbq-calendar-header\n    [(activeDate)]=\"activeDate\"\n    [maxDate]=\"maxDate\"\n    [minDate]=\"minDate\"\n    (monthSelected)=\"monthSelected.emit(activeDate)\"\n    (yearSelected)=\"yearSelected.emit(activeDate)\">\n</kbq-calendar-header>\n\n<div class=\"kbq-calendar__content\">\n    <kbq-month-view\n        [(activeDate)]=\"activeDate\"\n        [selected]=\"selected\"\n        [dateFilter]=\"dateFilter\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [dateClass]=\"dateClass\"\n        (selectedChange)=\"dateSelected($event!)\"\n        (userSelection)=\"userSelected()\">\n    </kbq-month-view>\n</div>\n", styles: [".kbq-calendar{display:block}.kbq-calendar__content{padding:0 var(--kbq-datepicker-calendar-size-padding-horizontal, 8px) var(--kbq-datepicker-calendar-size-padding-horizontal, 8px) var(--kbq-datepicker-calendar-size-padding-horizontal, 8px);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;height:calc(var(--kbq-datepicker-calendar-size-padding-blocks, 12px) - 2px)}.kbq-calendar__table-header th.kbq-calendar__table-header-divider:after{content:\"\";position:absolute;top:0;left:calc(-1 * var(--kbq-datepicker-calendar-size-padding-horizontal, 8px));right:calc(-1 * var(--kbq-datepicker-calendar-size-padding-horizontal, 8px));height:var(--kbq-datepicker-calendar-size-divider-width, 1px)}\n"] }]
+        }], ctorParameters: function () { return [{ type: KbqDatepickerIntl }, { type: i1$1.DateAdapter, decorators: [{
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [KBQ_DATE_FORMATS]
+                }] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { startAt: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], minDate: [{
+                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 }]
+            }] } });
+
+/**
+ * Animations used by the mosaic datepicker.
+ * @docs-private
+ */
+const mcDatepickerAnimations = {
+    /** Transforms the height of the datepicker's calendar. */
+    transformPanel: trigger('transformPanel', [
+        state('void', style({
+            opacity: 0,
+            transform: 'scale(1, 0.8)'
+        })),
+        transition('void => enter', animate('120ms cubic-bezier(0, 0, 0.2, 1)', style({
+            opacity: 1,
+            transform: 'scale(1, 1)'
+        }))),
+        transition('* => void', animate('100ms linear', style({ opacity: 0 })))
+    ]),
+    /** Fades in the content of the calendar. */
+    fadeInCalendar: trigger('fadeInCalendar', [
+        state('void', style({ opacity: 0 })),
+        state('enter', style({ opacity: 1 })),
+        // need to keep it until #12440 gets in, otherwise the exit animation will look glitchy.
+        transition('void => *', animate('120ms 100ms cubic-bezier(0.55, 0, 0.55, 0.2)'))
+    ])
+};
+// todo should be put into polyfils
+// https://github.com/angular/angular/issues/24769
+if (!Element.prototype.matches) {
+    Element.prototype.matches = Element.prototype.msMatchesSelector;
+}
+
+// tslint:disable:no-unbound-method
+// tslint:disable:no-magic-numbers
+/** Used to generate a unique ID for each datepicker instance. */
+let datepickerUid = 0;
+/** Injection token that determines the scroll handling while the calendar is open. */
+const KBQ_DATEPICKER_SCROLL_STRATEGY = new InjectionToken('kbq-datepicker-scroll-strategy');
+/** @docs-private */
+// tslint:disable-next-line:naming-convention
+function KBQ_DATEPICKER_SCROLL_STRATEGY_FACTORY(overlay) {
+    return () => overlay.scrollStrategies.reposition();
+}
+/** @docs-private */
+const KBQ_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER = {
+    provide: KBQ_DATEPICKER_SCROLL_STRATEGY,
+    deps: [Overlay],
+    useFactory: KBQ_DATEPICKER_SCROLL_STRATEGY_FACTORY
+};
+/**
+ * Component used as the content for the datepicker dialog and popup. We use this instead of using
+ * KbqCalendar directly as the content so we can control the initial focus. This also gives us a
+ * place to put additional features of the popup that are not part of the calendar itself in the
+ * future. (e.g. confirmation buttons).
+ * @docs-private
+ */
+class KbqDatepickerContent {
+    constructor(changeDetectorRef) {
+        this.changeDetectorRef = changeDetectorRef;
+        /** Emits when an animation has finished. */
+        this.animationDone = new Subject();
+        this.subscriptions = new Subscription();
+    }
+    ngAfterViewInit() {
+        this.subscriptions.add(this.datepicker.stateChanges.subscribe(() => {
+            this.changeDetectorRef.markForCheck();
+        }));
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+        this.animationDone.complete();
+    }
+    startExitAnimation() {
+        this.animationState = 'void';
+        this.changeDetectorRef.markForCheck();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqDatepickerContent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqDatepickerContent, 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: ["mcDatepickerContent"], ngImport: i0, template: "<kbq-calendar [id]=\"datepicker.id\"\n             [@fadeInCalendar]=\"'enter'\"\n             [ngClass]=\"datepicker.panelClass\"\n             [dateClass]=\"datepicker.dateClass\"\n\n             [startAt]=\"datepicker.startAt\"\n             [minDate]=\"datepicker.minDate\"\n             [maxDate]=\"datepicker.maxDate\"\n             [dateFilter]=\"datepicker.dateFilter\"\n\n             [selected]=\"datepicker.selected\"\n\n             (selectedChange)=\"datepicker.select($event)\"\n             (yearSelected)=\"datepicker.selectYear($event)\"\n             (monthSelected)=\"datepicker.selectMonth($event)\"\n             (userSelection)=\"datepicker.close()\">\n</kbq-calendar>\n", styles: [".kbq-datepicker__content{display:block;border-width:1px;border-style:solid;border-radius:var(--kbq-datepicker-calendar-size-border-radius, 0)}.kbq-datepicker__content .kbq-calendar{width:296px;height:348px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: KbqCalendar, selector: "kbq-calendar", inputs: ["startAt", "selected", "minDate", "maxDate", "dateFilter", "dateClass"], outputs: ["selectedChange", "yearSelected", "monthSelected", "userSelection"], exportAs: ["mcCalendar"] }], animations: [
+            mcDatepickerAnimations.transformPanel,
+            mcDatepickerAnimations.fadeInCalendar
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqDatepickerContent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kbq-datepicker__content', exportAs: 'mcDatepickerContent', host: {
+                        class: 'kbq-datepicker__content',
+                        '[@transformPanel]': 'animationState',
+                        '(@transformPanel.done)': 'animationDone.next()'
+                    }, animations: [
+                        mcDatepickerAnimations.transformPanel,
+                        mcDatepickerAnimations.fadeInCalendar
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<kbq-calendar [id]=\"datepicker.id\"\n             [@fadeInCalendar]=\"'enter'\"\n             [ngClass]=\"datepicker.panelClass\"\n             [dateClass]=\"datepicker.dateClass\"\n\n             [startAt]=\"datepicker.startAt\"\n             [minDate]=\"datepicker.minDate\"\n             [maxDate]=\"datepicker.maxDate\"\n             [dateFilter]=\"datepicker.dateFilter\"\n\n             [selected]=\"datepicker.selected\"\n\n             (selectedChange)=\"datepicker.select($event)\"\n             (yearSelected)=\"datepicker.selectYear($event)\"\n             (monthSelected)=\"datepicker.selectMonth($event)\"\n             (userSelection)=\"datepicker.close()\">\n</kbq-calendar>\n", styles: [".kbq-datepicker__content{display:block;border-width:1px;border-style:solid;border-radius:var(--kbq-datepicker-calendar-size-border-radius, 0)}.kbq-datepicker__content .kbq-calendar{width:296px;height:348px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { calendar: [{
+                type: ViewChild,
+                args: [KbqCalendar]
+            }] } });
+// TODO: We use a component instead of a directive here so the user can use implicit
+// template reference variables (e.g. #d vs #d="mcDatepicker"). 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 {
+    get hasBackdrop() {
+        return this._hasBackdrop;
+    }
+    set hasBackdrop(value) {
+        this._hasBackdrop = coerceBooleanProperty(value);
+    }
+    /** The date to open the calendar to initially. */
+    get startAt() {
+        // If an explicit startAt is set we start there, otherwise we start at whatever the currently
+        // selected value is.
+        return this._startAt || this.datepickerInput?.value;
+    }
+    set startAt(value) {
+        const deserializedValue = this.dateAdapter.deserialize(value);
+        this._startAt = deserializedValue !== null ?
+            this.dateAdapter.clampDate(deserializedValue, this.minDate, this.maxDate) : null;
+    }
+    /** Whether the datepicker pop-up should be disabled. */
+    get disabled() {
+        return this._disabled === undefined && this.datepickerInput ? this.datepickerInput.disabled : this._disabled;
+    }
+    set disabled(value) {
+        const newValue = coerceBooleanProperty(value);
+        if (newValue !== this._disabled) {
+            this._disabled = newValue;
+            this.disabledChange.next(newValue);
+        }
+    }
+    /** Whether the calendar is open. */
+    get opened() {
+        return this._opened;
+    }
+    set opened(value) {
+        coerceBooleanProperty(value) ? this.open() : this.close();
+    }
+    /** The currently selected date. */
+    get selected() {
+        return this.validSelected;
+    }
+    set selected(value) {
+        this.validSelected = value;
+    }
+    get dateFilter() {
+        return this.datepickerInput && this.datepickerInput.dateFilter;
+    }
+    get value() {
+        return this.selected;
+    }
+    constructor(overlay, ngZone, viewContainerRef, scrollStrategy, dateAdapter, dir, document) {
+        this.overlay = overlay;
+        this.ngZone = ngZone;
+        this.viewContainerRef = viewContainerRef;
+        this.dateAdapter = dateAdapter;
+        this.dir = dir;
+        this.document = document;
+        this._hasBackdrop = false;
+        this._opened = false;
+        /**
+         * Emits selected year in multiyear view.
+         * This doesn't imply a change on the selected date.
+         */
+        this.yearSelected = new EventEmitter();
+        /**
+         * 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';
+        /** Emits when the datepicker has been opened. */
+        this.openedStream = new EventEmitter();
+        /** Emits when the datepicker has been closed. */
+        this.closedStream = new EventEmitter();
+        this.stateChanges = new Subject();
+        /** Emits when the datepicker is disabled. */
+        this.disabledChange = new Subject();
+        /** Emits new selected date when selected date changes. */
+        this.selectedChanged = new Subject();
+        /** The id for the datepicker calendar. */
+        this.id = `kbq-datepicker-${datepickerUid++}`;
+        this.validSelected = null;
+        /** The element that was focused before the datepicker was opened. */
+        this.focusedElementBeforeOpen = null;
+        /** Subscription to value changes in the associated input element. */
+        this.inputSubscription = Subscription.EMPTY;
+        this.closeSubscription = Subscription.EMPTY;
+        if (!this.dateAdapter) {
+            throw createMissingDateImplError('DateAdapter');
+        }
+        this.scrollStrategy = scrollStrategy;
+    }
+    ngOnDestroy() {
+        this.close();
+        this.inputSubscription.unsubscribe();
+        this.closeSubscription.unsubscribe();
+        this.disabledChange.complete();
+        this.destroyOverlay();
+    }
+    /** Selects the given date */
+    select(date) {
+        const oldValue = this.selected;
+        this.selected = date;
+        if (!this.dateAdapter.sameDate(oldValue, this.selected)) {
+            this.selectedChanged.next(date);
+        }
+    }
+    /** Emits the selected year in multiyear view */
+    selectYear(normalizedYear) {
+        this.yearSelected.emit(normalizedYear);
+    }
+    /** Emits selected month in year view */
+    selectMonth(normalizedMonth) {
+        this.monthSelected.emit(normalizedMonth);
+    }
+    /**
+     * Register an input with this datepicker.
+     * @param input The datepicker input to register with this datepicker.
+     */
+    registerInput(input) {
+        if (this.datepickerInput) {
+            throw Error('A KbqDatepicker can only be associated with a single input.');
+        }
+        this.datepickerInput = input;
+        this.inputSubscription = this.datepickerInput.valueChange
+            .subscribe((value) => {
+            this.selected = value;
+            if (this.popupComponentRef) {
+                this.popupComponentRef.instance.calendar.monthView?.init();
+                this.popupComponentRef.instance.calendar.activeDate = value;
+            }
+        });
+    }
+    /** Open the calendar. */
+    open() {
+        if (this._opened || this.disabled) {
+            return;
+        }
+        if (!this.datepickerInput) {
+            throw Error('Attempted to open an KbqDatepicker with no associated input.');
+        }
+        if (this.document) {
+            this.focusedElementBeforeOpen = this.document.activeElement;
+        }
+        this.openAsPopup();
+        this._opened = true;
+        this.openedStream.emit();
+    }
+    /** Close the calendar. */
+    close(restoreFocus = true) {
+        if (!this._opened) {
+            return;
+        }
+        if (this.popupComponentRef) {
+            const instance = this.popupComponentRef.instance;
+            instance.startExitAnimation();
+            instance.animationDone
+                .pipe(take(1))
+                .subscribe(() => this.destroyOverlay());
+        }
+        if (restoreFocus) {
+            this.focusedElementBeforeOpen.focus();
+        }
+        this._opened = false;
+        this.closedStream.emit();
+        this.focusedElementBeforeOpen = null;
+    }
+    toggle() {
+        if (this.datepickerInput.isReadOnly) {
+            return;
+        }
+        this._opened ? this.close() : this.open();
+    }
+    /** Destroys the current overlay. */
+    destroyOverlay() {
+        if (this.popupRef) {
+            this.popupRef.dispose();
+            this.popupRef = this.popupComponentRef = null;
+        }
+    }
+    /** Open the calendar as a popup. */
+    openAsPopup() {
+        if (!this.calendarPortal) {
+            this.calendarPortal = new ComponentPortal(KbqDatepickerContent, this.viewContainerRef);
+        }
+        if (!this.popupRef) {
+            this.createPopup();
+        }
+        if (!this.popupRef.hasAttached()) {
+            this.popupComponentRef = this.popupRef.attach(this.calendarPortal);
+            this.popupComponentRef.instance.datepicker = this;
+            // Update the position once the calendar has rendered.
+            this.ngZone.onStable.asObservable()
+                .pipe(take(1))
+                .subscribe(() => this.popupRef?.updatePosition());
+        }
+    }
+    /** Create the popup. */
+    createPopup() {
+        const overlayConfig = new OverlayConfig({
+            positionStrategy: this.createPopupPositionStrategy(),
+            hasBackdrop: this.hasBackdrop,
+            backdropClass: this.backdropClass,
+            direction: this.dir,
+            scrollStrategy: this.scrollStrategy(),
+            panelClass: 'kbq-datepicker__popup'
+        });
+        this.popupRef = this.overlay.create(overlayConfig);
+        this.closeSubscription = this.closingActions()
+            .subscribe(() => this.close(this.restoreFocus()));
+    }
+    restoreFocus() {
+        return this.document.activeElement === this.document.body;
+    }
+    closingActions() {
+        return merge(this.popupRef.backdropClick(), this.popupRef.outsidePointerEvents(), this.popupRef.detachments());
+    }
+    /** Create the popup PositionStrategy. */
+    createPopupPositionStrategy() {
+        return this.overlay.position()
+            .flexibleConnectedTo(this.datepickerInput.elementRef)
+            .withTransformOriginOn('.kbq-datepicker__content')
+            .withFlexibleDimensions(false)
+            .withViewportMargin(8)
+            .withLockedPosition()
+            .withPositions([
+            {
+                originX: 'start',
+                originY: 'bottom',
+                overlayX: 'start',
+                overlayY: 'top'
+            },
+            {
+                originX: 'start',
+                originY: 'top',
+                overlayX: 'start',
+                overlayY: 'bottom'
+            },
+            {
+                originX: 'end',
+                originY: 'bottom',
+                overlayX: 'end',
+                overlayY: 'top'
+            },
+            {
+                originX: 'end',
+                originY: 'top',
+                overlayX: 'end',
+                overlayY: 'bottom'
+            }
+        ]);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqDatepicker, deps: [{ token: i3$1.Overlay }, { token: i0.NgZone }, { token: i0.ViewContainerRef }, { token: KBQ_DATEPICKER_SCROLL_STRATEGY }, { token: i1$1.DateAdapter, optional: true }, { token: i5$1.Directionality, optional: true }, { token: DOCUMENT, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqDatepicker, 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: ["mcDatepicker"], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqDatepicker, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kbq-datepicker',
+                    template: '',
+                    exportAs: 'mcDatepicker',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    providers: [{ provide: KbqFormFieldControl, useExisting: KbqDatepicker }]
+                }]
+        }], ctorParameters: function () { return [{ type: i3$1.Overlay }, { type: i0.NgZone }, { type: i0.ViewContainerRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [KBQ_DATEPICKER_SCROLL_STRATEGY]
+                }] }, { type: i1$1.DateAdapter, decorators: [{
+                    type: Optional
+                }] }, { type: i5$1.Directionality, decorators: [{
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }]; }, propDecorators: { hasBackdrop: [{
+                type: Input
+            }], startAt: [{
+                type: Input
+            }], disabled: [{
+                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']
+            }] } });
+
+// tslint:disable:no-empty, deprecation
+// tslint:disable:naming-convention
+var DateParts;
+(function (DateParts) {
+    DateParts["year"] = "y";
+    DateParts["month"] = "m";
+    DateParts["day"] = "d";
+})(DateParts || (DateParts = {}));
+const MAX_YEAR = 9999;
+const YEAR_LENGTH = 4;
+class DateDigit {
+    constructor(value, start, length) {
+        this.value = value;
+        this.start = start;
+        this.length = length;
+        this.maxDays = 31;
+        this.maxMonth = 12;
+        if (value === DateParts.day) {
+            this.parse = this.parseDay;
+        }
+        else if (value === DateParts.month) {
+            this.parse = this.parseMonth;
+        }
+        else if (value === DateParts.year) {
+            this.parse = this.parseYear;
+        }
+    }
+    get end() {
+        return this.start + this.length;
+    }
+    get isDay() {
+        return this.value === DateParts.day;
+    }
+    get isMonth() {
+        return this.value === DateParts.month;
+    }
+    get isYear() {
+        return this.value === DateParts.year;
+    }
+    get fullName() {
+        if (this.isDay) {
+            return 'date';
+        }
+        if (this.isMonth) {
+            return 'month';
+        }
+        if (this.isYear) {
+            return 'year';
+        }
+        return '';
+    }
+    parseDay(value) {
+        const parsedValue = parseInt(value);
+        if (parsedValue === 0) {
+            return 1;
+        }
+        if (parsedValue > this.maxDays) {
+            return this.maxDays;
+        }
+        return parsedValue;
+    }
+    parseMonth(value) {
+        const parsedValue = parseInt(value);
+        if (parsedValue === 0) {
+            return 1;
+        }
+        if (parsedValue > this.maxMonth) {
+            return this.maxMonth;
+        }
+        return parsedValue;
+    }
+    parseYear(value) {
+        const parsedValue = parseInt(value);
+        if (parsedValue === 0) {
+            return 1;
+        }
+        if (parsedValue > MAX_YEAR) {
+            return parseInt(value.substring(0, YEAR_LENGTH));
+        }
+        return parsedValue;
+    }
+}
+/** @docs-private */
+const KBQ_DATEPICKER_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => KbqDatepickerInput),
+    multi: true
+};
+/** @docs-private */
+const KBQ_DATEPICKER_VALIDATORS = {
+    provide: NG_VALIDATORS,
+    useExisting: forwardRef(() => KbqDatepickerInput),
+    multi: true
+};
+/**
+ * An event used for datepicker input and change events. We don't always have access to a native
+ * input or change event because the event may have been triggered by the user clicking on the
+ * calendar popup. For consistency, we always use KbqDatepickerInputEvent instead.
+ */
+class KbqDatepickerInputEvent {
+    constructor(
+    /** Reference to the datepicker input component that emitted the event. */
+    target, 
+    /** Reference to the native input element associated with the datepicker input. */
+    targetElement) {
+        this.target = target;
+        this.targetElement = targetElement;
+        this.value = this.target.value;
+    }
+}
+let uniqueComponentIdSuffix = 0;
+/** Directive used to connect an input to a KbqDatepicker. */
+class KbqDatepickerInput {
+    get placeholder() {
+        return this._placeholder;
+    }
+    set placeholder(value) {
+        this._placeholder = value;
+        this.usePlaceholderFromInput = true;
+    }
+    get required() {
+        return this._required;
+    }
+    set required(value) {
+        this._required = coerceBooleanProperty(value);
+    }
+    /** The datepicker that this input is associated with. */
+    set mcDatepicker(value) {
+        if (!value) {
+            return;
+        }
+        this.datepicker = value;
+        this.datepicker.registerInput(this);
+        this.datepickerSubscription.unsubscribe();
+        this.datepickerSubscription = this.datepicker.selectedChanged
+            .subscribe((selected) => {
+            const newValue = this.saveTimePart(selected);
+            this.value = newValue;
+            this.cvaOnChange(newValue);
+            this.onTouched();
+            this.dateChange.emit(new KbqDatepickerInputEvent(this, this.elementRef.nativeElement));
+        });
+    }
+    /** Function that can be used to filter out dates within the datepicker. */
+    set mcDatepickerFilter(value) {
+        this.dateFilter = value;
+        this.validatorOnChange();
+    }
+    /** The value of the input. */
+    get value() {
+        return this._value;
+    }
+    set value(value) {
+        let newValue = this.adapter.deserialize(value);
+        this.lastValueValid = !newValue || this.adapter.isValid(newValue);
+        newValue = this.getValidDateOrNull(newValue);
+        const oldDate = this.value;
+        this._value = newValue;
+        this.formatValue(newValue);
+        if (!this.adapter.sameDate(oldDate, newValue)) {
+            this.valueChange.emit(newValue);
+        }
+    }
+    /** The minimum valid date. */
+    get min() {
+        return this._min;
+    }
+    set min(value) {
+        this._min = this.adapter.deserialize(value);
+        this.validatorOnChange();
+    }
+    /** The maximum valid date. */
+    get max() {
+        return this._max;
+    }
+    set max(value) {
+        this._max = this.adapter.deserialize(value);
+        this.validatorOnChange();
+    }
+    /** Whether the datepicker-input is disabled. */
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        const newValue = coerceBooleanProperty(value);
+        const element = this.elementRef.nativeElement;
+        if (this._disabled !== newValue) {
+            this._disabled = newValue;
+            this.disabledChange.emit(newValue);
+        }
+        // We need to null check the `blur` method, because it's undefined during SSR.
+        if (newValue && element.blur) {
+            // Normally, native input elements automatically blur if they turn disabled. This behavior
+            // is problematic, because it would mean that it triggers another change detection cycle,
+            // which then causes a changed after checked error if the input element was focused before.
+            element.blur();
+        }
+    }
+    get id() {
+        return this._id;
+    }
+    set id(value) {
+        this._id = value || this.uid;
+    }
+    set mcValidationTooltip(tooltip) {
+        if (!tooltip) {
+            return;
+        }
+        tooltip.enterDelay = validationTooltipShowDelay;
+        tooltip.trigger = 'manual';
+        tooltip.initListeners();
+        this.incorrectInput.subscribe(() => {
+            if (tooltip.isOpen) {
+                return;
+            }
+            tooltip.show();
+            setTimeout(() => tooltip.hide(), validationTooltipHideDelay);
+        });
+    }
+    get empty() {
+        return !this.viewValue && !this.isBadInput();
+    }
+    get viewValue() {
+        return this.elementRef.nativeElement.value;
+    }
+    get ngControl() {
+        return this.control;
+    }
+    get isReadOnly() {
+        return this.elementRef.nativeElement.readOnly;
+    }
+    get dateInputFormat() {
+        return this.localeService?.getParams('datepicker').dateInput || this.dateFormats.dateInput;
+    }
+    get readyForParse() {
+        return !!(this.firstDigit && this.secondDigit && this.thirdDigit);
+    }
+    get selectionStart() {
+        return this.elementRef.nativeElement.selectionStart;
+    }
+    set selectionStart(value) {
+        this.elementRef.nativeElement.selectionStart = value;
+    }
+    get selectionEnd() {
+        return this.elementRef.nativeElement.selectionEnd;
+    }
+    set selectionEnd(value) {
+        this.elementRef.nativeElement.selectionEnd = value;
+    }
+    constructor(elementRef, renderer, adapter, dateFormats, localeService) {
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+        this.adapter = adapter;
+        this.dateFormats = dateFormats;
+        this.localeService = localeService;
+        this.stateChanges = new Subject();
+        this.controlType = 'datepicker';
+        this.focused = false;
+        /** Emits when the value changes (either due to user input or programmatic change). */
+        this.valueChange = new EventEmitter();
+        /** Emits when the disabled state has changed */
+        this.disabledChange = new EventEmitter();
+        this._placeholder = '';
+        this._disabled = false;
+        this.incorrectInput = new EventEmitter();
+        /** Emits when a `change` event is fired on this `<input>`. */
+        this.dateChange = new EventEmitter();
+        /** Emits when an `input` event is fired on this `<input>`. */
+        this.dateInput = new EventEmitter();
+        this.uid = `kbq-datepicker-${uniqueComponentIdSuffix++}`;
+        this.datepickerSubscription = Subscription.EMPTY;
+        this.localeSubscription = Subscription.EMPTY;
+        /** Whether the last value set on the input was valid. */
+        this.lastValueValid = false;
+        this.firstDigit = null;
+        this.secondDigit = null;
+        this.thirdDigit = null;
+        this.usePlaceholderFromInput = false;
+        // tslint:disable-next-line:no-empty
+        this.onTouched = () => { };
+        this.onInput = () => {
+            this.correctCursorPosition();
+            const formattedValue = this.replaceSymbols(this.viewValue);
+            const newTimeObj = this.getDateFromString(formattedValue);
+            this.lastValueValid = !!newTimeObj;
+            if (!newTimeObj) {
+                if (!this.viewValue) {
+                    this.lastValueValid = false;
+                    this.updateValue(newTimeObj);
+                }
+                else {
+                    this.control.updateValueAndValidity();
+                }
+                return;
+            }
+            this.setViewValue(this.getTimeStringFromDate(newTimeObj, this.dateInputFormat), true);
+            this.selectNextDigitByCursor(this.selectionStart);
+            this.updateValue(newTimeObj);
+        };
+        this.parseOnBlur = () => {
+            if (!this.viewValue || !this.readyForParse) {
+                return null;
+            }
+            const date = this.getDefaultValue();
+            const viewDigits = this.viewValue
+                .split(this.separator)
+                .map((value) => value)
+                .filter((value) => value);
+            const [firsViewDigit, secondViewDigit, thirdViewDigit] = viewDigits;
+            // tslint:disable-next-line:no-magic-numbers
+            if (viewDigits.length !== 3) {
+                this.lastValueValid = false;
+                this._value = null;
+                return setTimeout(() => this.control.updateValueAndValidity());
+            }
+            date[this.firstDigit.fullName] = this.firstDigit.parse(firsViewDigit);
+            date[this.secondDigit.fullName] = this.secondDigit.parse(secondViewDigit);
+            date[this.thirdDigit.fullName] = this.thirdDigit.parse(thirdViewDigit);
+            const [digitWithYear, viewDigitWithYear] = [this.firstDigit, this.secondDigit, this.thirdDigit]
+                .reduce((acc, digit, index) => digit.value === DateParts.year ? [digit, viewDigits[index]] : acc, []);
+            // tslint:disable-next-line:no-magic-numbers
+            if (viewDigitWithYear.length < 3) {
+                // tslint:disable-next-line:no-magic-numbers
+                date.year += date.year < 30 ? 2000 : 1900;
+            }
+            else if (viewDigitWithYear.length < digitWithYear.length) {
+                this.lastValueValid = false;
+                this._value = null;
+                return setTimeout(() => this.control.updateValueAndValidity());
+            }
+            const newTimeObj = this.createDateTime(date);
+            if (!newTimeObj) {
+                this.lastValueValid = false;
+                this._value = null;
+                this.cvaOnChange(null);
+                return setTimeout(() => this.control.updateValueAndValidity());
+            }
+            this.lastValueValid = !!newTimeObj;
+            this.setViewValue(this.getTimeStringFromDate(newTimeObj, this.dateInputFormat), true);
+            this.updateValue(newTimeObj);
+        };
+        this.updateLocaleParams = () => {
+            this.setFormat(this.dateInputFormat);
+            if (!this.usePlaceholderFromInput) {
+                this._placeholder = this.localeService.getParams('datepicker').placeholder;
+            }
+            this.value = this.value;
+        };
+        // tslint:disable-next-line:no-empty
+        this.cvaOnChange = () => { };
+        // tslint:disable-next-line:no-empty
+        this.validatorOnChange = () => { };
+        /** The form control validator for whether the input parses. */
+        this.parseValidator = () => {
+            return this.focused ||
+                this.empty ||
+                this.lastValueValid ? null : { mcDatepickerParse: { text: this.elementRef.nativeElement.value } };
+        };
+        /** The form control validator for the min date. */
+        this.minValidator = (control) => {
+            const controlValue = this.adapter.deserialize(control.value);
+            return !this.min || !controlValue || this.adapter.compareDateTime(this.min, controlValue) <= 0 ?
+                null :
+                { mcDatepickerMin: { min: this.min, actual: controlValue } };
+        };
+        /** The form control validator for the max date. */
+        this.maxValidator = (control) => {
+            const controlValue = this.adapter.deserialize(control.value);
+            return !this.max || !controlValue || this.adapter.compareDateTime(this.max, controlValue) >= 0 ?
+                null :
+                { mcDatepickerMax: { max: this.max, actual: controlValue } };
+        };
+        /** The form control validator for the date filter. */
+        this.filterValidator = (control) => {
+            const controlValue = this.adapter.deserialize(control.value);
+            return !this.dateFilter || !controlValue || this.dateFilter(controlValue) ?
+                null : { mcDatepickerFilter: true };
+        };
+        this.validator = Validators.compose([
+            this.parseValidator,
+            this.minValidator,
+            this.maxValidator,
+            this.filterValidator
+        ]);
+        if (!this.adapter) {
+            throw createMissingDateImplError('DateAdapter');
+        }
+        if (!this.dateFormats) {
+            throw createMissingDateImplError('KBQ_DATE_FORMATS');
+        }
+        this.setFormat(this.dateInputFormat);
+        this.localeSubscription = adapter.localeChanges
+            .subscribe(this.updateLocaleParams);
+    }
+    onContainerClick() {
+        this.focus();
+    }
+    focus() {
+        this.elementRef.nativeElement.focus();
+    }
+    focusChanged(isFocused) {
+        if (isFocused !== this.focused) {
+            this.focused = isFocused;
+            this.onTouched();
+            this.stateChanges.next();
+        }
+    }
+    ngOnDestroy() {
+        this.datepickerSubscription.unsubscribe();
+        this.localeSubscription.unsubscribe();
+        this.valueChange.complete();
+        this.disabledChange.complete();
+    }
+    /** @docs-private */
+    registerOnValidatorChange(fn) {
+        this.validatorOnChange = fn;
+    }
+    /** @docs-private */
+    validate(control) {
+        this.setControl(control);
+        return this.validator ? this.validator(control) : null;
+    }
+    // Implemented as part of ControlValueAccessor.
+    writeValue(value) {
+        this.value = value;
+    }
+    // Implemented as part of ControlValueAccessor.
+    registerOnChange(fn) {
+        this.cvaOnChange = fn;
+    }
+    // Implemented as part of ControlValueAccessor.
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    // Implemented as part of ControlValueAccessor.
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    onKeyDown(event) {
+        if (this.isReadOnly) {
+            return;
+        }
+        const keyCode = event.keyCode;
+        if (this.isLetterKey(event)) {
+            event.preventDefault();
+            this.incorrectInput.emit();
+        }
+        else if (this.isKeyForOpen(event)) {
+            event.preventDefault();
+            this.datepicker?.open();
+        }
+        else if (this.isKeyForClose(event)) {
+            event.preventDefault();
+            this.datepicker.close();
+        }
+        else if (keyCode === TAB) {
+            this.datepicker.close(false);
+        }
+        else if (this.isKeyForByPass(event)) {
+            return;
+        }
+        else if (keyCode === SPACE) {
+            this.spaceKeyHandler(event);
+        }
+        else if ([UP_ARROW, DOWN_ARROW].includes(keyCode)) {
+            event.preventDefault();
+            this.verticalArrowKeyHandler(keyCode);
+        }
+        else if ([LEFT_ARROW, RIGHT_ARROW, HOME, PAGE_UP, END, PAGE_DOWN].includes(keyCode)) {
+            event.preventDefault();
+            this.changeCaretPosition(keyCode);
+        }
+        else if (/^\D$/.test(event.key)) {
+            event.preventDefault();
+            const newValue = this.getNewValue(event.key, this.selectionStart);
+            const formattedValue = this.replaceSymbols(newValue);
+            if (newValue !== formattedValue) {
+                this.setViewValue(formattedValue, true);
+                setTimeout(this.onInput);
+            }
+            else {
+                this.incorrectInput.emit();
+            }
+        }
+        else {
+            setTimeout(this.onInput);
+        }
+    }
+    onChange() {
+        setTimeout(() => {
+            this.dateChange.emit(new KbqDatepickerInputEvent(this, this.elementRef.nativeElement));
+        });
+    }
+    /** Handles blur events on the input. */
+    onBlur() {
+        // Reformat the input only if we have a valid value.
+        this.parseOnBlur();
+        this.focusChanged(false);
+        this.onInput();
+    }
+    onPaste($event) {
+        $event.preventDefault();
+        let rawValue = $event.clipboardData.getData('text');
+        if (rawValue.match(/^\d\D/)) {
+            rawValue = `0${rawValue}`;
+        }
+        rawValue.replace(/[^A-Za-z0-9]+/g, this.separator);
+        if (/[a-z]/gi.test(rawValue)) {
+            this.incorrectInput.emit();
+        }
+        const match = rawValue.match(/^(?<first>\d+)\W(?<second>\d+)\W(?<third>\d+)$/);
+        if (!match?.groups?.first || !match?.groups?.second || !match?.groups?.third) {
+            this.setViewValue(rawValue);
+            return rawValue;
+        }
+        const value = [match.groups.first, match.groups.second, match.groups.third].join(this.separator);
+        const newTimeObj = this.getDateFromString(value);
+        if (!newTimeObj) {
+            this.setViewValue(value);
+            return value;
+        }
+        this.setViewValue(this.getTimeStringFromDate(newTimeObj, this.dateInputFormat));
+        this.updateValue(newTimeObj);
+    }
+    toISO8601(value) {
+        return this.adapter.toIso8601(value);
+    }
+    saveTimePart(selected) {
+        if (!this.value) {
+            return selected;
+        }
+        const years = this.adapter.getYear(selected);
+        const month = this.adapter.getMonth(selected);
+        const day = this.adapter.getDate(selected);
+        const hours = this.adapter.getHours(this.value);
+        const minutes = this.adapter.getMinutes(this.value);
+        const seconds = this.adapter.getSeconds(this.value);
+        const milliseconds = this.adapter.getMilliseconds(this.value);
+        return this.adapter.createDateTime(years, month, day, hours, minutes, seconds, milliseconds);
+    }
+    setFormat(format) {
+        // @ts-ignore
+        this.separator = format.match(/[aA-zZ]+(?<separator>\W|\D)[aA-zZ]+/).groups.separator;
+        this.separatorPositions = format
+            .split('')
+            .reduce((acc, item, index) => this.separator === item ? [...acc, index + 1] : acc, []);
+        this.getDigitPositions(format);
+    }
+    updateValue(newValue) {
+        if (!this.adapter.sameDate(newValue, this.value)) {
+            this._value = newValue;
+            this.cvaOnChange(newValue);
+            this.valueChange.emit(newValue);
+            this.dateInput.emit(new KbqDatepickerInputEvent(this, this.elementRef.nativeElement));
+        }
+        this.control?.updateValueAndValidity({ emitEvent: false });
+    }
+    isKeyForClose(event) {
+        return (event.altKey && event.keyCode === UP_ARROW) || event.keyCode === ESCAPE;
+    }
+    isKeyForOpen(event) {
+        return event.altKey && event.keyCode === DOWN_ARROW;
+    }
+    isLetterKey(event) {
+        return isLetterKey(event) && !event.ctrlKey && !event.metaKey;
+    }
+    isKeyForByPass(event) {
+        return (hasModifierKey(event) && (isVerticalMovement(event) || isHorizontalMovement(event))) ||
+            event.ctrlKey || event.metaKey ||
+            [DELETE, BACKSPACE, TAB].includes(event.keyCode);
+    }
+    spaceKeyHandler(event) {
+        event.preventDefault();
+        if (this.selectionStart === this.selectionEnd) {
+            const value = this.getNewValue(event.key, this.selectionStart);
+            this.setViewValue(value);
+            setTimeout(this.onInput);
+        }
+        else if (this.selectionStart !== this.selectionEnd) {
+            this.selectNextDigit(this.selectionStart, true);
+        }
+    }
+    getNewValue(key, position) {
+        return [this.viewValue.slice(0, position), key, this.viewValue.slice(position)].join('');
+    }
+    setViewValue(value, savePosition = false) {
+        if (savePosition) {
+            const selectionStart = this.selectionStart;
+            const selectionEnd = this.selectionEnd;
+            this.renderer.setProperty(this.elementRef.nativeElement, 'value', value);
+            this.selectionStart = selectionStart;
+            this.selectionEnd = selectionEnd;
+        }
+        else {
+            this.renderer.setProperty(this.elementRef.nativeElement, 'value', value);
+        }
+    }
+    replaceSymbols(value) {
+        return value
+            .split(this.separator)
+            .map((part) => part.replace(/^([0-9]+)\W$/, '0$1'))
+            .join(this.separator);
+    }
+    getDateFromString(timeString) {
+        if (!timeString || timeString.length < this.firstDigit.length) {
+            return null;
+        }
+        const date = this.getDefaultValue();
+        const viewDigits = timeString
+            .split(this.separator)
+            .map((value) => value);
+        const [firsViewDigit, secondViewDigit, thirdViewDigit] = viewDigits;
+        if (viewDigits.length === 1) {
+            if (/\D/.test(firsViewDigit) || firsViewDigit.length < this.firstDigit.length) {
+                return null;
+            }
+            date[this.firstDigit.fullName] = this.firstDigit.parse(firsViewDigit);
+            if (this.firstDigit.isDay) {
+                date.month = 1;
+            }
+            // tslint:disable-next-line:no-magic-numbers
+        }
+        else if (viewDigits.length === 2) {
+            if (firsViewDigit.length < this.firstDigit.length || secondViewDigit.length < this.secondDigit.length) {
+                return null;
+            }
+            date[this.firstDigit.fullName] = this.firstDigit.parse(firsViewDigit);
+            date[this.secondDigit.fullName] = this.secondDigit.parse(secondViewDigit);
+            // tslint:disable-next-line:no-magic-numbers
+        }
+        else if (viewDigits.length === 3) {
+            if (firsViewDigit.length < this.firstDigit.length ||
+                secondViewDigit.length < this.secondDigit.length ||
+                thirdViewDigit.length < this.thirdDigit.length) {
+                return null;
+            }
+            date[this.firstDigit.fullName] = this.firstDigit.parse(firsViewDigit);
+            date[this.secondDigit.fullName] = this.secondDigit.parse(secondViewDigit);
+            date[this.thirdDigit.fullName] = this.thirdDigit.parse(thirdViewDigit);
+        }
+        else {
+            return null;
+        }
+        return this.createDateTime(date);
+    }
+    getDefaultValue() {
+        const defaultValue = this.value || this.adapter.today();
+        return {
+            year: this.adapter.getYear(defaultValue),
+            month: this.adapter.getMonth(defaultValue),
+            date: this.adapter.getDate(defaultValue),
+            hours: this.adapter.getHours(defaultValue),
+            minutes: this.adapter.getMinutes(defaultValue),
+            seconds: this.adapter.getSeconds(defaultValue),
+            milliseconds: this.adapter.getMilliseconds(defaultValue)
+        };
+    }
+    getTimeStringFromDate(value, timeFormat) {
+        if (!value || !this.adapter.isValid(value)) {
+            return '';
+        }
+        return this.adapter.format(value, timeFormat);
+    }
+    getDateEditMetrics(cursorPosition) {
+        for (const digit of [this.firstDigit, this.secondDigit, this.thirdDigit]) {
+            if (cursorPosition >= digit.start && cursorPosition <= digit.end) {
+                return [digit.value, digit.start, digit.end];
+            }
+        }
+        return [this.thirdDigit.value, this.thirdDigit.start, this.thirdDigit.end];
+    }
+    incrementDate(dateVal, whatToIncrement) {
+        let year = this.adapter.getYear(dateVal);
+        let month = this.adapter.getMonth(dateVal);
+        let day = this.adapter.getDate(dateVal);
+        switch (whatToIncrement) {
+            case DateParts.day:
+                day++;
+                if (day > this.adapter.getNumDaysInMonth(dateVal)) {
+                    day = 1;
+                }
+                break;
+            case DateParts.month:
+                month++;
+                // tslint:disable-next-line:no-magic-numbers
+                if (month > 11) {
+                    month = 0;
+                }
+                const lastDay = this.getLastDayFor(year, month);
+                if (day > lastDay) {
+                    day = lastDay;
+                }
+                break;
+            case DateParts.year:
+                year++;
+                if (year > MAX_YEAR) {
+                    year = 1;
+                }
+                break;
+            default:
+        }
+        return this.createDate(year, month, day);
+    }
+    getLastDayFor(year, month) {
+        return this.adapter.getNumDaysInMonth(this.createDate(year, month, 1));
+    }
+    decrementDate(dateVal, whatToDecrement) {
+        let year = this.adapter.getYear(dateVal);
+        let month = this.adapter.getMonth(dateVal);
+        let day = this.adapter.getDate(dateVal);
+        switch (whatToDecrement) {
+            case DateParts.day:
+                day--;
+                if (day < 1) {
+                    day = this.adapter.getNumDaysInMonth(dateVal);
+                }
+                break;
+            case DateParts.month:
+                month--;
+                if (month < 0) {
+                    // tslint:disable-next-line:no-magic-numbers
+                    month = 11;
+                }
+                const lastDay = this.getLastDayFor(year, month);
+                if (day > lastDay) {
+                    day = lastDay;
+                }
+                break;
+            case DateParts.year:
+                year--;
+                if (year < 1) {
+                    year = MAX_YEAR;
+                }
+                break;
+            default:
+        }
+        return this.createDate(year, month, day);
+    }
+    verticalArrowKeyHandler(keyCode) {
+        if (!this.value) {
+            return;
+        }
+        let changedTime;
+        const [modifiedTimePart, selectionStart, selectionEnd] = this.getDateEditMetrics(this.selectionStart);
+        if (keyCode === UP_ARROW) {
+            changedTime = this.incrementDate(this.value, modifiedTimePart);
+        }
+        if (keyCode === DOWN_ARROW) {
+            changedTime = this.decrementDate(this.value, modifiedTimePart);
+        }
+        this.value = changedTime;
+        this.selectionStart = selectionStart;
+        this.selectionEnd = selectionEnd;
+        this.cvaOnChange(changedTime);
+        this.onChange();
+        this.stateChanges.next();
+    }
+    changeCaretPosition(keyCode) {
+        if (!this.value) {
+            return;
+        }
+        let cursorPos = this.selectionStart;
+        if ([HOME, PAGE_UP].includes(keyCode)) {
+            cursorPos = 0;
+        }
+        else if ([END, PAGE_DOWN].includes(keyCode)) {
+            cursorPos = this.viewValue.length;
+        }
+        else if (keyCode === LEFT_ARROW) {
+            cursorPos = cursorPos === 0 ? this.viewValue.length : cursorPos - 1;
+        }
+        else if (keyCode === RIGHT_ARROW) {
+            const nextSeparatorPos = this.viewValue.indexOf(this.separator, cursorPos);
+            cursorPos = nextSeparatorPos ? nextSeparatorPos + 1 : 0;
+        }
+        this.selectDigitByCursor(cursorPos);
+    }
+    selectDigitByCursor(cursorPos) {
+        setTimeout(() => {
+            const [, selectionStart, selectionEnd] = this.getDateEditMetrics(cursorPos);
+            this.selectionStart = selectionStart;
+            this.selectionEnd = selectionEnd;
+        });
+    }
+    selectNextDigitByCursor(cursorPos) {
+        setTimeout(() => {
+            const [, , endPositionOfCurrentDigit] = this.getDateEditMetrics(cursorPos);
+            const [, selectionStart, selectionEnd] = this.getDateEditMetrics(endPositionOfCurrentDigit + 1);
+            this.selectionStart = selectionStart;
+            this.selectionEnd = selectionEnd;
+        });
+    }
+    selectNextDigit(cursorPos, cycle = false) {
+        setTimeout(() => {
+            const lastValue = cycle ? 0 : cursorPos;
+            const nextSeparatorPos = this.viewValue.indexOf(this.separator, cursorPos);
+            const newCursorPos = nextSeparatorPos > 0 ? nextSeparatorPos + 1 : lastValue;
+            const [, selectionStart, selectionEnd] = this.getDateEditMetrics(newCursorPos);
+            this.selectionStart = selectionStart;
+            this.selectionEnd = selectionEnd;
+        });
+    }
+    /** Checks whether the input is invalid based on the native validation. */
+    isBadInput() {
+        const validity = this.elementRef.nativeElement.validity;
+        return validity && validity.badInput;
+    }
+    /** Formats a value and sets it on the input element. */
+    formatValue(value) {
+        const formattedValue = value ? this.adapter.format(value, this.dateInputFormat) : '';
+        this.setViewValue(formattedValue);
+    }
+    setControl(control) {
+        if (this.control) {
+            return;
+        }
+        this.control = control;
+        this.control.valueChanges
+            .subscribe((value) => this._value = value);
+    }
+    /**
+     * @param obj The object to check.
+     * @returns The given object if it is both a date instance and valid, otherwise null.
+     */
+    getValidDateOrNull(obj) {
+        return (this.adapter.isDateInstance(obj) && this.adapter.isValid(obj)) ? obj : null;
+    }
+    getDigitPositions(format) {
+        this.firstDigit = this.secondDigit = this.thirdDigit = null;
+        const formatInLowerCase = format.toLowerCase();
+        formatInLowerCase
+            .split('')
+            .reduce(({ prev, length, start }, value, index, arr) => {
+            if (value === this.separator || (arr.length - 1) === index) {
+                if (!this.firstDigit) {
+                    this.firstDigit = new DateDigit(prev, start, length);
+                }
+                else if (!this.secondDigit) {
+                    this.secondDigit = new DateDigit(prev, start, length);
+                }
+                else if (!this.thirdDigit) {
+                    this.thirdDigit = new DateDigit(prev, start, arr.length - start);
+                }
+                // tslint:disable:no-parameter-reassignment
+                length = 0;
+                start = index + 1;
+            }
+            else {
+                length++;
+            }
+            return { prev: value, length, start };
+        }, { length: 0, start: 0 });
+        if (!this.firstDigit || !this.secondDigit || !this.thirdDigit) {
+            Error(`Can' t use this format: ${format}`);
+        }
+    }
+    createDate(year, month, day) {
+        return this.adapter.createDateTime(year, month, day, this.adapter.getHours(this.value), this.adapter.getMinutes(this.value), this.adapter.getSeconds(this.value), this.adapter.getMilliseconds(this.value));
+    }
+    createDateTime(value) {
+        if (Object.values(value).some(isNaN)) {
+            return null;
+        }
+        return this.adapter.createDateTime(value.year, value.month - 1, value.date, value.hours, value.minutes, value.seconds, value.milliseconds);
+    }
+    correctCursorPosition() {
+        if (this.selectionStart && this.separatorPositions.includes(this.selectionStart)) {
+            this.selectionStart = this.selectionStart - 1;
+        }
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqDatepickerInput, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$1.DateAdapter, optional: true }, { token: KBQ_DATE_FORMATS, optional: true }, { token: KBQ_LOCALE_SERVICE, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqDatepickerInput, selector: "input[mcDatepicker]", inputs: { placeholder: "placeholder", required: "required", mcDatepicker: "mcDatepicker", mcDatepickerFilter: "mcDatepickerFilter", value: "value", min: "min", max: "max", disabled: "disabled", id: "id", mcValidationTooltip: "mcValidationTooltip" }, 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: ["mcDatepickerInput"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqDatepickerInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[mcDatepicker]',
+                    exportAs: 'mcDatepickerInput',
+                    providers: [
+                        KBQ_DATEPICKER_VALUE_ACCESSOR,
+                        KBQ_DATEPICKER_VALIDATORS,
+                        { provide: KbqFormFieldControl, useExisting: KbqDatepickerInput }
+                    ],
+                    host: {
+                        class: 'kbq-input kbq-datepicker',
+                        '[attr.placeholder]': 'placeholder',
+                        '[attr.required]': 'required',
+                        '[attr.disabled]': 'disabled || null',
+                        '[attr.min]': 'min ? toISO8601(min) : null',
+                        '[attr.max]': 'max ? toISO8601(max) : null',
+                        '[attr.autocomplete]': '"off"',
+                        '(paste)': 'onPaste($event)',
+                        '(change)': 'onChange()',
+                        '(focus)': 'focusChanged(true)',
+                        '(blur)': 'onBlur()',
+                        '(keydown)': 'onKeyDown($event)'
+                    }
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$1.DateAdapter, decorators: [{
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [KBQ_DATE_FORMATS]
+                }] }, { type: i1$1.KbqLocaleService, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [KBQ_LOCALE_SERVICE]
+                }] }]; }, propDecorators: { placeholder: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], mcDatepicker: [{
+                type: Input
+            }], mcDatepickerFilter: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], mcValidationTooltip: [{
+                type: Input
+            }], incorrectInput: [{
+                type: Output
+            }], dateChange: [{
+                type: Output
+            }], dateInput: [{
+                type: Output
+            }] } });
+
+/** Can be used to override the icon of a `mcDatepickerToggle`. */
+class KbqDatepickerToggleIcon {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqDatepickerToggleIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqDatepickerToggleIcon, selector: "[mcDatepickerToggleIcon]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqDatepickerToggleIcon, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mcDatepickerToggleIcon]'
+                }]
+        }] });
+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();
+        }
+    }
+    ngOnDestroy() {
+        this.stateChanges.unsubscribe();
+    }
+    ngAfterContentInit() {
+        this.watchStateChanges();
+    }
+    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: "16.1.5", ngImport: i0, type: KbqDatepickerToggle, deps: [{ token: KbqDatepickerIntl }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqDatepickerToggle, 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: ["mcDatepickerToggle"], usesOnChanges: true, ngImport: i0, template: "<!--todo need simplify this-->\n<button\n    #button\n    kbq-button\n    type=\"button\"\n    class=\"kbq-datepicker-toggle__button\"\n    aria-haspopup=\"true\"\n    [attr.aria-label]=\"intl.openCalendarLabel\"\n    [tabIndex]=\"tabIndex\"\n    [disabled]=\"disabled\"\n    (click)=\"open($event)\">\n\n    <i *ngIf=\"!customIcon\" kbq-icon=\"mc-calendar_16\" class=\"kbq-datepicker-toggle__default-icon\"></i>\n\n    <ng-content select=\"[mcDatepickerToggleIcon]\"></ng-content>\n</button>\n", styles: [".kbq-datepicker-toggle:focus{outline:0}.kbq-datepicker-toggle__button.kbq-button-icon{width:var(--kbq-datepicker-toggle-size-width, 30px);height:var(--kbq-datepicker-toggle-size-height, 30px);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: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.KbqButton, selector: "[kbq-button]", inputs: ["color", "tabIndex", "kbqStyle", "disabled"] }, { kind: "directive", type: i3.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "component", type: i6.KbqIcon, selector: "[kbq-icon]", inputs: ["color", "small", "autoColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqDatepickerToggle, decorators: [{
+            type: Component,
+            args: [{ selector: 'kbq-datepicker-toggle', host: {
+                        class: 'kbq-datepicker-toggle',
+                        '[class.kbq-active]': 'datepicker && datepicker.opened'
+                    }, exportAs: 'mcDatepickerToggle', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--todo need simplify this-->\n<button\n    #button\n    kbq-button\n    type=\"button\"\n    class=\"kbq-datepicker-toggle__button\"\n    aria-haspopup=\"true\"\n    [attr.aria-label]=\"intl.openCalendarLabel\"\n    [tabIndex]=\"tabIndex\"\n    [disabled]=\"disabled\"\n    (click)=\"open($event)\">\n\n    <i *ngIf=\"!customIcon\" kbq-icon=\"mc-calendar_16\" class=\"kbq-datepicker-toggle__default-icon\"></i>\n\n    <ng-content select=\"[mcDatepickerToggleIcon]\"></ng-content>\n</button>\n", styles: [".kbq-datepicker-toggle:focus{outline:0}.kbq-datepicker-toggle__button.kbq-button-icon{width:var(--kbq-datepicker-toggle-size-width, 30px);height:var(--kbq-datepicker-toggle-size-height, 30px);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: function () { return [{ 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 }]
+            }] } });
+
+class KbqDatepickerModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.5", ngImport: i0, type: KbqDatepickerModule, declarations: [KbqCalendar,
+            KbqCalendarBody,
+            KbqDatepicker,
+            KbqDatepickerContent,
+            KbqDatepickerInput,
+            KbqDatepickerToggle,
+            KbqDatepickerToggleIcon,
+            KbqMonthView,
+            KbqCalendarHeader], imports: [CommonModule,
+            KbqButtonModule,
+            OverlayModule,
+            A11yModule,
+            PortalModule,
+            KbqButtonModule,
+            KbqSelectModule,
+            KbqIconModule], exports: [KbqCalendar,
+            KbqCalendarBody,
+            KbqDatepicker,
+            KbqDatepickerContent,
+            KbqDatepickerInput,
+            KbqDatepickerToggle,
+            KbqDatepickerToggleIcon,
+            KbqMonthView,
+            KbqCalendarHeader] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqDatepickerModule, providers: [
+            KbqDatepickerIntl,
+            KBQ_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER
+        ], imports: [CommonModule,
+            KbqButtonModule,
+            OverlayModule,
+            A11yModule,
+            PortalModule,
+            KbqButtonModule,
+            KbqSelectModule,
+            KbqIconModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqDatepickerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        KbqButtonModule,
+                        OverlayModule,
+                        A11yModule,
+                        PortalModule,
+                        KbqButtonModule,
+                        KbqSelectModule,
+                        KbqIconModule
+                    ],
+                    exports: [
+                        KbqCalendar,
+                        KbqCalendarBody,
+                        KbqDatepicker,
+                        KbqDatepickerContent,
+                        KbqDatepickerInput,
+                        KbqDatepickerToggle,
+                        KbqDatepickerToggleIcon,
+                        KbqMonthView,
+                        KbqCalendarHeader
+                    ],
+                    declarations: [
+                        KbqCalendar,
+                        KbqCalendarBody,
+                        KbqDatepicker,
+                        KbqDatepickerContent,
+                        KbqDatepickerInput,
+                        KbqDatepickerToggle,
+                        KbqDatepickerToggleIcon,
+                        KbqMonthView,
+                        KbqCalendarHeader
+                    ],
+                    providers: [
+                        KbqDatepickerIntl,
+                        KBQ_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { 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, KbqMonthView, MAX_YEAR, mcDatepickerAnimations };
+//# sourceMappingURL=koobiq-components-datepicker.mjs.map