@koobiq/components 21.0.1 → 21.1.0

package/fesm2022/koobiq-components-datepicker.mjs

@@ -275,7 +275,7 @@ class KbqCalendarHeader {
         }
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqCalendarHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: KbqCalendarHeader, isStandalone: true, selector: "kbq-calendar-header", inputs: { activeDateInput: { classPropertyName: "activeDateInput", publicName: "activeDate", isSignal: true, isRequired: false, transformFunction: null }, maxDateInput: { classPropertyName: "maxDateInput", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, minDateInput: { classPropertyName: "minDateInput", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeDateChange: "activeDateChange", monthSelected: "monthSelected", yearSelected: "yearSelected" }, host: { classAttribute: "kbq-calendar-header" }, exportAs: ["kbqCalendarHeader"], usesOnChanges: true, ngImport: i0, template: "<div class=\"kbq-calendar-header__select-group\">\n    <kbq-select\n        #monthSelect=\"kbqSelect\"\n        class=\"kbq-calendar-header__select\"\n        [panelClass]=\"'kbq-calendar-select-panel'\"\n        [tabIndex]=\"-1\"\n        [value]=\"selectedMonth\"\n        (selectionChange)=\"onMonthSelected($event.value)\"\n    >\n        <button\n            kbq-button\n            kbq-select-matcher\n            class=\"layout-padding-right-xs\"\n            [class.kbq-active]=\"monthSelect.panelOpen\"\n            [color]=\"'contrast'\"\n            [kbqStyle]=\"'transparent'\"\n        >\n            {{ monthNames[selectedMonth].nameShort | titlecase }}\n\n            <i kbq-icon=\"kbq-chevron-down-s_16\" class=\"layout-padding-left-3xs\" [color]=\"'contrast'\"></i>\n        </button>\n\n        @for (month of monthNames; track month.nameShort) {\n            <kbq-option [disabled]=\"month.disabled\" [kbqTooltipDisabled]=\"true\" [value]=\"month.value\">\n                {{ month.name }}\n            </kbq-option>\n        }\n    </kbq-select>\n\n    <kbq-select\n        #yearSelect=\"kbqSelect\"\n        [panelClass]=\"'kbq-calendar-select-panel'\"\n        [tabIndex]=\"-1\"\n        [value]=\"selectedYear\"\n        (selectionChange)=\"onYearSelected($event.value)\"\n    >\n        <button\n            kbq-button\n            kbq-select-matcher\n            class=\"layout-padding-right-xs\"\n            [class.kbq-active]=\"yearSelect.panelOpen\"\n            [color]=\"'contrast'\"\n            [kbqStyle]=\"'transparent'\"\n        >\n            {{ selectedYear }}\n\n            <i kbq-icon=\"kbq-chevron-down-s_16\" class=\"layout-padding-left-3xs\"></i>\n        </button>\n\n        @for (year of years; track year) {\n            <kbq-option [kbqTooltipDisabled]=\"true\" [value]=\"year\">\n                {{ year }}\n            </kbq-option>\n        }\n    </kbq-select>\n</div>\n\n<div class=\"kbq-calendar-header__button-group\">\n    <button\n        kbq-button\n        class=\"kbq-calendar-header__previous-button\"\n        [attr.aria-label]=\"a11yLocaleConfiguration().previousMonth\"\n        [color]=\"'contrast'\"\n        [disabled]=\"previousDisabled\"\n        [kbqStyle]=\"'transparent'\"\n        [tabindex]=\"-1\"\n        (click)=\"selectPreviousMonth()\"\n    >\n        <i kbq-icon=\"kbq-chevron-left_16\"></i>\n    </button>\n\n    <button\n        kbq-button\n        [attr.aria-label]=\"a11yLocaleConfiguration().currentDate\"\n        [color]=\"'contrast'\"\n        [disabled]=\"currentDisabled\"\n        [kbqStyle]=\"'transparent'\"\n        [tabindex]=\"-1\"\n        (click)=\"selectCurrentDate()\"\n    >\n        <i kbq-icon=\"kbq-circle-xs_16\"></i>\n    </button>\n\n    <button\n        kbq-button\n        class=\"kbq-calendar-header__next-button\"\n        [attr.aria-label]=\"a11yLocaleConfiguration().nextMonth\"\n        [color]=\"'contrast'\"\n        [disabled]=\"nextDisabled\"\n        [kbqStyle]=\"'transparent'\"\n        [tabindex]=\"-1\"\n        (click)=\"selectNextMonth()\"\n    >\n        <i kbq-icon=\"kbq-chevron-right_16\"></i>\n    </button>\n</div>\n", styles: [".kbq-calendar-header{display:flex;flex-direction:row;justify-content:space-between;padding-right:var(--kbq-datepicker-size-header-padding-horizontal);padding-left:var(--kbq-datepicker-size-header-padding-horizontal);margin-bottom:var(--kbq-datepicker-size-header-margin-bottom)}.kbq-calendar-header__select{width:auto!important}.kbq-calendar-header__button-group,.kbq-calendar-header__select-group{display:flex;flex-direction:row}.kbq-calendar-select-panel{margin-top:2px;min-width:98%!important}.kbq-calendar-select-panel .kbq-select__content{max-height:384px;overflow-x:hidden;scrollbar-gutter:auto}.kbq-calendar-select-panel .kbq-select__content .kbq-option{min-width:65px}\n"], dependencies: [{ kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i1.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i1.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i2.KbqIcon, selector: "[kbq-icon]", inputs: ["aria-hidden", "iconSize", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqSelectModule }, { kind: "component", type: i3.KbqSelect, selector: "kbq-select", inputs: ["hiddenItemsText", "hiddenItemsTextFormatter", "aria-label", "showPreselectedValues", "triggerValuesLimit", "panelClass", "backdropClass", "errorStateMatcher", "sortComparator", "multiline", "searchMinOptionsThreshold", "scrolledToBottomOffset", "hasBackdrop", "placeholder", "required", "multiple", "compareWith", "virtualOptionFactory", "clearPredicate", "selectAllToggle", "selectAll", "selectAllHandler", "panelWidth", "panelMinWidth", "panelMaxWidth", "panelMaxHeight", "value", "id", "tabIndex", "disabled"], outputs: ["openedChange", "beforeOpened", "opened", "closed", "selectionChange", "onSelectAll", "valueChange", "scrolledToBottom"], exportAs: ["kbqSelect"] }, { kind: "directive", type: i3.KbqOptionTooltip, selector: "kbq-option", inputs: ["ignoreTooltipPointerEvents"] }, { kind: "component", type: i4.KbqOption, selector: "kbq-option", inputs: ["value", "selectable", "userSelect", "showCheckbox", "viewValue", "disabled"], outputs: ["onSelectionChange"], exportAs: ["kbqOption"] }, { kind: "directive", type: i4.KbqSelectMatcher, selector: "kbq-select-matcher, [kbq-select-matcher]", inputs: ["useDefaultHandlers"] }, { kind: "ngmodule", type: KbqOptionModule }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: KbqCalendarHeader, isStandalone: true, selector: "kbq-calendar-header", inputs: { activeDateInput: { classPropertyName: "activeDateInput", publicName: "activeDate", isSignal: true, isRequired: false, transformFunction: null }, maxDateInput: { classPropertyName: "maxDateInput", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, minDateInput: { classPropertyName: "minDateInput", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeDateChange: "activeDateChange", monthSelected: "monthSelected", yearSelected: "yearSelected" }, host: { classAttribute: "kbq-calendar-header" }, exportAs: ["kbqCalendarHeader"], usesOnChanges: true, ngImport: i0, template: "<div class=\"kbq-calendar-header__select-group\">\n    <kbq-select\n        #monthSelect=\"kbqSelect\"\n        class=\"kbq-calendar-header__select\"\n        [panelClass]=\"'kbq-calendar-select-panel'\"\n        [tabIndex]=\"-1\"\n        [value]=\"selectedMonth\"\n        (selectionChange)=\"onMonthSelected($event.value)\"\n    >\n        <button\n            kbq-button\n            kbq-select-matcher\n            class=\"layout-padding-right-xs\"\n            [class.kbq-active]=\"monthSelect.panelOpen\"\n            [color]=\"'contrast'\"\n            [kbqStyle]=\"'transparent'\"\n        >\n            {{ monthNames[selectedMonth].nameShort | titlecase }}\n\n            <i kbq-icon=\"kbq-chevron-down-s_16\" class=\"layout-padding-left-3xs\" [color]=\"'contrast'\"></i>\n        </button>\n\n        @for (month of monthNames; track month.nameShort) {\n            <kbq-option [disabled]=\"month.disabled\" [kbqTooltipDisabled]=\"true\" [value]=\"month.value\">\n                {{ month.name }}\n            </kbq-option>\n        }\n    </kbq-select>\n\n    <kbq-select\n        #yearSelect=\"kbqSelect\"\n        [panelClass]=\"'kbq-calendar-select-panel'\"\n        [tabIndex]=\"-1\"\n        [value]=\"selectedYear\"\n        (selectionChange)=\"onYearSelected($event.value)\"\n    >\n        <button\n            kbq-button\n            kbq-select-matcher\n            class=\"layout-padding-right-xs\"\n            [class.kbq-active]=\"yearSelect.panelOpen\"\n            [color]=\"'contrast'\"\n            [kbqStyle]=\"'transparent'\"\n        >\n            {{ selectedYear }}\n\n            <i kbq-icon=\"kbq-chevron-down-s_16\" class=\"layout-padding-left-3xs\"></i>\n        </button>\n\n        @for (year of years; track year) {\n            <kbq-option [kbqTooltipDisabled]=\"true\" [value]=\"year\">\n                {{ year }}\n            </kbq-option>\n        }\n    </kbq-select>\n</div>\n\n<div class=\"kbq-calendar-header__button-group\">\n    <button\n        kbq-button\n        class=\"kbq-calendar-header__previous-button\"\n        [attr.aria-label]=\"a11yLocaleConfiguration().previousMonth\"\n        [color]=\"'contrast'\"\n        [disabled]=\"previousDisabled\"\n        [kbqStyle]=\"'transparent'\"\n        [tabindex]=\"-1\"\n        (click)=\"selectPreviousMonth()\"\n    >\n        <i kbq-icon=\"kbq-chevron-left_16\"></i>\n    </button>\n\n    <button\n        kbq-button\n        [attr.aria-label]=\"a11yLocaleConfiguration().currentDate\"\n        [color]=\"'contrast'\"\n        [disabled]=\"currentDisabled\"\n        [kbqStyle]=\"'transparent'\"\n        [tabindex]=\"-1\"\n        (click)=\"selectCurrentDate()\"\n    >\n        <i kbq-icon=\"kbq-circle-xs_16\"></i>\n    </button>\n\n    <button\n        kbq-button\n        class=\"kbq-calendar-header__next-button\"\n        [attr.aria-label]=\"a11yLocaleConfiguration().nextMonth\"\n        [color]=\"'contrast'\"\n        [disabled]=\"nextDisabled\"\n        [kbqStyle]=\"'transparent'\"\n        [tabindex]=\"-1\"\n        (click)=\"selectNextMonth()\"\n    >\n        <i kbq-icon=\"kbq-chevron-right_16\"></i>\n    </button>\n</div>\n", styles: [".kbq-calendar-header{display:flex;flex-direction:row;justify-content:space-between;padding-right:var(--kbq-datepicker-size-header-padding-horizontal);padding-left:var(--kbq-datepicker-size-header-padding-horizontal);margin-bottom:var(--kbq-datepicker-size-header-margin-bottom)}.kbq-calendar-header__select{width:auto!important}.kbq-calendar-header__button-group,.kbq-calendar-header__select-group{display:flex;flex-direction:row}.kbq-calendar-select-panel{margin-top:2px;min-width:98%!important}.kbq-calendar-select-panel .kbq-select__content{max-height:384px;overflow-x:hidden;scrollbar-gutter:auto}.kbq-calendar-select-panel .kbq-select__content .kbq-option{min-width:65px}\n"], dependencies: [{ kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i1.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i1.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i2.KbqIcon, selector: "[kbq-icon]", inputs: ["aria-hidden", "iconSize", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqSelectModule }, { kind: "component", type: i3.KbqSelect, selector: "kbq-select", inputs: ["hiddenItemsText", "hiddenItemsTextFormatter", "aria-label", "showPreselectedValues", "triggerValuesLimit", "panelClass", "backdropClass", "errorStateMatcher", "sortComparator", "multiline", "multilineOptions", "searchMinOptionsThreshold", "scrolledToBottomOffset", "hasBackdrop", "placeholder", "required", "multiple", "compareWith", "virtualOptionFactory", "clearPredicate", "selectAllToggle", "selectAll", "selectAllHandler", "panelWidth", "panelMinWidth", "panelMaxWidth", "panelMaxHeight", "value", "id", "tabIndex", "disabled"], outputs: ["openedChange", "beforeOpened", "opened", "closed", "selectionChange", "onSelectAll", "valueChange", "scrolledToBottom"], exportAs: ["kbqSelect"] }, { kind: "directive", type: i3.KbqOptionTooltip, selector: "kbq-option", inputs: ["ignoreTooltipPointerEvents"] }, { kind: "component", type: i4.KbqOption, selector: "kbq-option", inputs: ["value", "selectable", "userSelect", "showCheckbox", "viewValue", "disabled"], outputs: ["onSelectionChange"], exportAs: ["kbqOption"] }, { kind: "directive", type: i4.KbqSelectMatcher, selector: "kbq-select-matcher, [kbq-select-matcher]", inputs: ["useDefaultHandlers"] }, { kind: "ngmodule", type: KbqOptionModule }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqCalendarHeader, decorators: [{
             type: Component,
@@ -625,12 +625,22 @@ var DateParts;
 })(DateParts || (DateParts = {}));
 const MAX_YEAR = 9999;
 const YEAR_LENGTH = 4;
+/** Days in the longest month */
+const MAX_DAYS_IN_MONTH = 31;
+/** A one- or two-digit year below it falls in the current century, any other in the previous one */
+const SHORT_YEAR_PIVOT = 30;
+/** First year of the current century */
+const CURRENT_CENTURY_START = 2000;
+/** First year of the previous century */
+const PREVIOUS_CENTURY_START = 1900;
+/** Key of the error reported for text that is not a date */
+const parseErrorKey = 'kbqDatepickerParse';
 class DateDigit {
     constructor(value, start, length) {
         this.value = value;
         this.start = start;
         this.length = length;
-        this.maxDays = 31;
+        this.maxDays = MAX_DAYS_IN_MONTH;
         this.maxMonth = 12;
         if (value === DateParts.day) {
             this.parse = this.parseDay;
@@ -944,6 +954,12 @@ class KbqDatepickerInput {
         this.datepickerSubscription = Subscription.EMPTY;
         /** Whether the last value set on the input was valid. */
         this.lastValueValid = false;
+        /**
+         * Whether a drag started in this field, so that its drop here is the field's own text.
+         *
+         * @docs-private
+         */
+        this.draggingOwnText = false;
         this.firstDigit = null;
         this.secondDigit = null;
         this.thirdDigit = null;
@@ -956,23 +972,9 @@ class KbqDatepickerInput {
          */
         this.onTouched = () => { };
         this.onInput = () => {
-            const cursorPosition = this.correctedCursorPosition();
-            const formattedValue = this.replaceSymbols(this.viewValue);
-            const newTimeObj = this.getDateFromString(formattedValue);
-            this.lastValueValid = !!newTimeObj;
-            if (!newTimeObj) {
-                if (!this.viewValue) {
-                    this.lastValueValid = false;
-                    this.updateValue(newTimeObj);
-                }
-                else {
-                    this.control?.updateValueAndValidity();
-                }
-                return;
+            if (!this.readViewValue() && this.viewValue) {
+                this.control?.updateValueAndValidity();
             }
-            this.setViewValue(this.getTimeStringFromDate(newTimeObj, this.dateInputFormat), true);
-            this.selectNextDigitByCursor(cursorPosition);
-            this.updateValue(newTimeObj);
         };
         this.parseOnBlur = () => {
             if (!this.viewValue || !this.readyForParse) {
@@ -984,29 +986,30 @@ class KbqDatepickerInput {
                 .map((value) => value)
                 .filter((value) => value);
             const [firsViewDigit, secondViewDigit, thirdViewDigit] = viewDigits;
+            // A text that fails here is reported by `onBlur()` unless the next parse takes it.
             if (viewDigits.length !== 3) {
                 this.lastValueValid = false;
                 this.valueState.set(null);
-                return setTimeout(() => this.control?.updateValueAndValidity());
+                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);
             const [digitWithYear, viewDigitWithYear] = [this.firstDigit, this.secondDigit, this.thirdDigit].reduce((acc, digit, index) => (digit.value === DateParts.year ? [digit, viewDigits[index]] : acc), []);
             if (viewDigitWithYear.length < 3) {
-                date.year += date.year < 30 ? 2000 : 1900;
+                // From the text rather than `date.year`: the year part reads `00` as 1.
+                date.year = this.expandShortYear(parseInt(viewDigitWithYear));
             }
             else if (viewDigitWithYear.length < digitWithYear.length) {
                 this.lastValueValid = false;
                 this.valueState.set(null);
-                return setTimeout(() => this.control?.updateValueAndValidity());
+                return null;
             }
             const newTimeObj = this.createDateTime(date);
             if (!newTimeObj) {
                 this.lastValueValid = false;
                 this.valueState.set(null);
-                this.cvaOnChange(null);
-                return setTimeout(() => this.control?.updateValueAndValidity());
+                return null;
             }
             /* Check if the number of days entered does not match the entered month */
             if (!this.getValidDateOrNull(newTimeObj)) {
@@ -1022,7 +1025,7 @@ class KbqDatepickerInput {
         this.parseValidator = () => {
             return this.focused() || this.isEmpty() || this.lastValueValid
                 ? null
-                : { kbqDatepickerParse: { text: this.elementRef.nativeElement.value } };
+                : { [parseErrorKey]: { text: this.elementRef.nativeElement.value } };
         };
         /** The form control validator for the min date. */
         this.minValidator = (control) => {
@@ -1093,15 +1096,22 @@ class KbqDatepickerInput {
             }
             // The date adapter follows the same locale, so its input format may have changed with it: the
             // digit layout has to be re-derived and the rendered value re-formatted.
+            // Only a complete value is re-rendered: with none, the text is the user's, and `''` written over it
+            // would leave the form with an error about text that is gone.
             untracked(() => {
                 this.setFormat(this.dateInputFormat);
-                this.setValue(this.valueState());
+                const value = this.valueState();
+                if (value)
+                    this.setValue(value);
             });
         });
         this.timezoneService.changes.pipe(takeUntilDestroyed()).subscribe(() => {
             // The rendered text names a wall clock in the zone it was formatted in. Left as it is, the
-            // next keystroke re-parses it against the new zone and emits a different instant.
-            this.setValue(this.valueState());
+            // next keystroke re-parses it against the new zone and emits a different instant. Only a
+            // complete value, as above.
+            const value = this.valueState();
+            if (value)
+                this.setValue(value);
         });
     }
     ngOnChanges(changes) {
@@ -1251,34 +1261,46 @@ class KbqDatepickerInput {
     }
     /** 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;
+        const wasFocused = this.focused();
+        const reportedText = this.control?.getError(parseErrorKey)?.text ?? '';
+        // `focused` goes first, as the validators read it, and `onTouched` last: it is what commits the
+        // value of a control with `updateOn: 'blur'`, and whatever is emitted after it waits for the next blur.
+        this.focusedValue.set(false);
+        // A text the form already knows is not a date: parsing it again would only restart its async validators.
+        if (!reportedText || reportedText !== this.viewValue) {
+            this.parseOnBlur();
+            this.readViewValue();
+            // Text that is not a date reaches the element without a keydown: an undo, an IME, autofill.
+            if (!this.lastValueValid && this.viewValue) {
+                this.valueState.set(null);
+                this.cvaOnChange(null);
+            }
         }
-        this.setViewValue(this.getTimeStringFromDate(newTimeObj, this.dateInputFormat));
-        this.updateValue(newTimeObj);
+        if (wasFocused)
+            this.onTouched();
+    }
+    onPaste(event) {
+        event.preventDefault();
+        if (this.isReadOnly)
+            return;
+        this.replaceText(event.clipboardData?.getData('text') ?? '');
+    }
+    /**
+     * Takes dropped text the way a paste is taken. The browser would insert it at the pointer, with no event
+     * the parsing listens to.
+     *
+     * @docs-private
+     */
+    onDrop(event) {
+        event.preventDefault();
+        // A part dragged within the field would be read as the whole date. A disabled or read-only field is only
+        // reached when an ancestor accepts the drop.
+        if (this.draggingOwnText || this.disabled() || this.isReadOnly)
+            return;
+        this.focus();
+        // Not left to the focus: a window that is not active, where a drag from another one ends, fires none.
+        this.onTouched();
+        this.replaceText(event.dataTransfer?.getData('text') ?? '');
     }
     toISO8601(value) {
         return this.adapter.toIso8601(value);
@@ -1292,6 +1314,68 @@ class KbqDatepickerInput {
     getOrigin() {
         return this.formField ? this.formField.getConnectedOverlayOrigin() : this.elementRef;
     }
+    /** Parses the rendered text as typing does, taking the date it holds. Returns whether there was one. */
+    readViewValue() {
+        const cursorPosition = this.correctedCursorPosition();
+        const newTimeObj = this.getDateFromString(this.replaceSymbols(this.viewValue));
+        this.lastValueValid = !!newTimeObj;
+        if (!newTimeObj) {
+            if (!this.viewValue) {
+                this.updateValue(null);
+            }
+            return false;
+        }
+        this.setViewValue(this.getTimeStringFromDate(newTimeObj, this.dateInputFormat), true);
+        this.selectNextDigitByCursor(cursorPosition);
+        this.updateValue(newTimeObj);
+        return true;
+    }
+    /** Takes a pasted or dropped text as the whole value; one that is not a date is rejected as a letter key is. */
+    replaceText(text) {
+        // Punctuation around the date comes along when it is copied out of a sentence or brackets.
+        const newTimeObj = this.readPastedDate(text.replace(/^[^\p{L}\d]+|[^\p{L}\d]+$/gu, ''));
+        if (!newTimeObj) {
+            if (text.trim())
+                this.incorrectInput.emit();
+            return;
+        }
+        this.lastValueValid = true;
+        this.setViewValue(this.getTimeStringFromDate(newTimeObj, this.dateInputFormat));
+        this.updateValue(newTimeObj);
+    }
+    /**
+     * Reads the parts of the format, in its order, from two or three groups of digits split by anything but a
+     * letter. A short day or month is padded and a short year expanded as blur does; a group longer than its
+     * part, such as the year of an ISO date, makes the text not a date.
+     */
+    readPastedDate(text) {
+        if (!this.readyForParse || !/^\d+(?:[^\p{L}\d]+\d+){1,2}$/u.test(text))
+            return null;
+        const digits = [this.firstDigit, this.secondDigit, this.thirdDigit];
+        const parts = [];
+        for (const [index, part] of text.split(/[^\p{L}\d]+/u).entries()) {
+            const digit = digits[index];
+            if (part.length > digit.length)
+                return null;
+            if (!digit.isYear) {
+                parts.push(part.padStart(digit.length, '0'));
+            }
+            else if (part.length === digit.length) {
+                parts.push(part);
+            }
+            else if (part.length <= 2) {
+                parts.push(`${this.expandShortYear(parseInt(part))}`);
+            }
+            else {
+                return null;
+            }
+        }
+        return this.getDateFromString(parts.join(this.separator));
+    }
+    /** A year of one or two digits as a full one. */
+    expandShortYear(year) {
+        return year + (year < SHORT_YEAR_PIVOT ? CURRENT_CENTURY_START : PREVIOUS_CENTURY_START);
+    }
     saveTimePart(selected) {
         const value = this.value();
         if (!value) {
@@ -1427,9 +1511,12 @@ class KbqDatepickerInput {
             for (const [index, dateDigit] of dateDigits.entries()) {
                 digitViewValue[dateDigit.fullName] = parseInt(viewDigits[index]);
             }
-            if (this.value() && digitViewValue.month && digitViewValue.month <= this.firstDigit.maxMonth) {
-                dateDigits.forEach((digit) => (digit.maxDays = this.getLastDayFor(digitViewValue.year, digitViewValue.month - 1)));
-            }
+            const { month, year } = digitViewValue;
+            // Set on every parse: a limit left by an earlier date would cut the day of this one.
+            const maxDays = month && month <= this.firstDigit.maxMonth && !isNaN(year)
+                ? this.getLastDayFor(year, month - 1)
+                : MAX_DAYS_IN_MONTH;
+            dateDigits.forEach((digit) => (digit.maxDays = maxDays));
             date[this.firstDigit.fullName] = this.firstDigit.parse(firsViewDigit);
             date[this.secondDigit.fullName] = this.secondDigit.parse(secondViewDigit);
             date[this.thirdDigit.fullName] = this.thirdDigit.parse(thirdViewDigit);
@@ -1568,7 +1655,8 @@ class KbqDatepickerInput {
         return this.createDate(year, month, day);
     }
     getLastDayFor(year, month) {
-        return this.adapter.getNumDaysInMonth(this.createDate(year, month, 1));
+        // The adapter's own date: the input's one takes the time of the value, and there may be none.
+        return this.adapter.getNumDaysInMonth(this.adapter.createDate(year, month, 1));
     }
     decrementDate(date, whatToDecrement) {
         let year = this.adapter.getYear(date);
@@ -1783,7 +1871,7 @@ class KbqDatepickerInput {
         return this.separatorPositions.includes(position) ? position - 1 : position;
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqDatepickerInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.25", type: KbqDatepickerInput, isStandalone: true, selector: "input[kbqDatepicker], input[kbqCalendar]", inputs: { errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null }, placeholderInput: { classPropertyName: "placeholderInput", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, kbqDatepickerInput: { classPropertyName: "kbqDatepickerInput", publicName: "kbqDatepicker", isSignal: true, isRequired: false, transformFunction: null }, kbqCalendarInput: { classPropertyName: "kbqCalendarInput", publicName: "kbqCalendar", isSignal: true, isRequired: false, transformFunction: null }, kbqDatepickerFilterInput: { classPropertyName: "kbqDatepickerFilterInput", publicName: "kbqDatepickerFilter", isSignal: true, isRequired: false, transformFunction: null }, valueInput: { classPropertyName: "valueInput", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, minInput: { classPropertyName: "minInput", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, maxInput: { classPropertyName: "maxInput", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, idInput: { classPropertyName: "idInput", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, kbqValidationTooltipInput: { classPropertyName: "kbqValidationTooltipInput", publicName: "kbqValidationTooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { incorrectInput: "incorrectInput", dateChange: "dateChange", dateInput: "dateInput" }, host: { listeners: { "paste": "onPaste($event)", "change": "onChange()", "focus": "focusChanged(true)", "blur": "onBlur()", "keydown": "onKeyDown($event)" }, properties: { "attr.id": "id()", "attr.placeholder": "placeholder()", "attr.required": "required() || null", "attr.disabled": "disabled() || null", "attr.min": "min ? toISO8601(min) : null", "attr.max": "max ? toISO8601(max) : null", "attr.autocomplete": "\"off\"" }, classAttribute: "kbq-input kbq-datepicker" }, providers: [
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.25", type: KbqDatepickerInput, isStandalone: true, selector: "input[kbqDatepicker], input[kbqCalendar]", inputs: { errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null }, placeholderInput: { classPropertyName: "placeholderInput", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, kbqDatepickerInput: { classPropertyName: "kbqDatepickerInput", publicName: "kbqDatepicker", isSignal: true, isRequired: false, transformFunction: null }, kbqCalendarInput: { classPropertyName: "kbqCalendarInput", publicName: "kbqCalendar", isSignal: true, isRequired: false, transformFunction: null }, kbqDatepickerFilterInput: { classPropertyName: "kbqDatepickerFilterInput", publicName: "kbqDatepickerFilter", isSignal: true, isRequired: false, transformFunction: null }, valueInput: { classPropertyName: "valueInput", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, minInput: { classPropertyName: "minInput", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, maxInput: { classPropertyName: "maxInput", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, idInput: { classPropertyName: "idInput", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, kbqValidationTooltipInput: { classPropertyName: "kbqValidationTooltipInput", publicName: "kbqValidationTooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { incorrectInput: "incorrectInput", dateChange: "dateChange", dateInput: "dateInput" }, host: { listeners: { "paste": "onPaste($event)", "drop": "onDrop($event)", "dragstart": "draggingOwnText = true", "dragend": "draggingOwnText = false", "change": "onChange()", "focus": "focusChanged(true)", "blur": "onBlur()", "keydown": "onKeyDown($event)" }, properties: { "attr.id": "id()", "attr.placeholder": "placeholder()", "attr.required": "required() || null", "attr.disabled": "disabled() || null", "attr.min": "min ? toISO8601(min) : null", "attr.max": "max ? toISO8601(max) : null", "attr.autocomplete": "\"off\"" }, classAttribute: "kbq-input kbq-datepicker" }, providers: [
             KBQ_DATEPICKER_VALUE_ACCESSOR,
             KBQ_DATEPICKER_VALIDATORS,
             { provide: KbqFormFieldControl, useExisting: KbqDatepickerInput },
@@ -1810,6 +1898,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
                         '[attr.max]': 'max ? toISO8601(max) : null',
                         '[attr.autocomplete]': '"off"',
                         '(paste)': 'onPaste($event)',
+                        '(drop)': 'onDrop($event)',
+                        '(dragstart)': 'draggingOwnText = true',
+                        '(dragend)': 'draggingOwnText = false',
                         '(change)': 'onChange()',
                         '(focus)': 'focusChanged(true)',
                         '(blur)': 'onBlur()',
@@ -1899,7 +1990,7 @@ class KbqDatepickerToggleIconComponent {
         datepicker.datepickerInput.focus();
         datepicker.open();
     }
-    /** @internal */
+    /** @docs-private */
     onMousedown(event) {
         // A press on the icon, focusable by its `tabindex`, would take the focus from the input.
         event.preventDefault();