@progress/kendo-angular-dateinputs 14.0.0-develop.8 → 14.0.0-develop.9

package/esm2020/dateinput/dateinput.component.mjs

@@ -8,18 +8,19 @@ import { maxValidator } from '../validators/max.validator';
 import { incompleteDateValidator } from '../validators/incomplete-date.validator';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, NgControl } from '@angular/forms';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
-import { IntlService } from '@progress/kendo-angular-intl';
+import { IntlService, localeData } from '@progress/kendo-angular-intl';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
-import { addMonths, cloneDate, createDate, getDate, isEqual, lastDayOfMonth } from '@progress/kendo-date-math';
-import { isDocumentAvailable, hasObservers, KendoInput, Keys } from '@progress/kendo-angular-common';
+import { cloneDate, isEqual } from '@progress/kendo-date-math';
+import { hasObservers, KendoInput } from '@progress/kendo-angular-common';
 import { Arrow } from './arrow.enum';
-import { approximateStringMatching, noop, isInRange, dateInRange, isValidRange, setTime, cropTwoDigitYear, setYears, msPaddingFromFormat, millisecondDigitsInFormat, millisecondStepFor, getSizeClass, getRoundedClass, getFillModeClass, DEFAULT_FILL_MODE, DEFAULT_ROUNDED, DEFAULT_SIZE } from '../util';
+import { noop, isValidRange, getSizeClass, getRoundedClass, getFillModeClass, DEFAULT_FILL_MODE, DEFAULT_ROUNDED, DEFAULT_SIZE } from '../util';
 import { PickerService } from '../common/picker.service';
 import { closest } from '../common/dom-queries';
 import { requiresZoneOnBlur, isPresent, attributeNames } from '../common/utils';
 import { Subscription } from 'rxjs';
 import { caretAltDownIcon, caretAltUpIcon } from '@progress/kendo-svg-icons';
+import { DateInput } from '@progress/kendo-dateinputs-common';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-intl";
 import * as i2 from "@progress/kendo-angular-l10n";
@@ -32,424 +33,37 @@ let nextId = 0;
 const MIN_DOC_LINK = 'http://www.telerik.com/kendo-angular-ui/components/dateinputs/api/DateInputComponent/#toc-min';
 const MAX_DOC_LINK = 'http://www.telerik.com/kendo-angular-ui/components/dateinputs/api/DateInputComponent/#toc-max';
 const VALUE_DOC_LINK = 'http://www.telerik.com/kendo-angular-ui/components/dateinputs/dateinput/#toc-using-with-json';
-const DATE_PART_REGEXP = /year|month|<day>/;
-const TIME_PART_REGEXP = /hour|minute|second|millisecond/;
-const SHORT_PATTERN_LENGTH_REGEXP = /d|M|H|h|m|s/;
 const TWO_DIGIT_YEAR_MAX = 68;
-const PREVIOUS_CENTURY_BASE = 1900;
-const CURRENT_CENTURY_BASE = 2000;
 const DEFAULT_FORMAT = 'd';
-const padZero = (length) => new Array(Math.max(length, 0)).fill('0').join('');
-const unpadZero = (value) => value.replace(/^0*/, '');
-class Mask {
-    constructor() {
-        this.symbols = "";
-    }
-}
-class KendoDate {
-    constructor(intl, formatPlaceholder, format, value, twoDigitYearMax = TWO_DIGIT_YEAR_MAX) {
-        this.intl = intl;
-        this.formatPlaceholder = formatPlaceholder;
-        this.format = format;
-        this.twoDigitYearMax = twoDigitYearMax;
-        this.year = true;
-        this.month = true;
-        this.date = true;
-        this.hours = true;
-        this.minutes = true;
-        this.seconds = true;
-        this.milliseconds = true;
-        this.leadingZero = null;
-        this.monthNames = null;
-        this.typedMonthPart = "";
-        this.value = getDate(new Date());
-        this.knownParts = "adHhmMsSEy";
-        this.symbols = {
-            "E": "E",
-            "H": "H",
-            "M": "M",
-            "a": "a",
-            "d": "d",
-            "h": "h",
-            "m": "m",
-            "s": "s",
-            "S": "S",
-            "y": "y"
-        };
-        validatePackage(packageMetadata);
-        this.monthNames = this.allFormatedMonths();
-        this.dayPeriods = this.allDayPeriods();
-        if (!value) {
-            this.value = getDate(new Date());
-            const sampleFormat = this.dateFormatString(this.value, this.format).symbols;
-            for (let i = 0; i < sampleFormat.length; i++) {
-                this.setExisting(sampleFormat[i], false);
-            }
-        }
-        else {
-            this.value = cloneDate(value);
-        }
-    }
-    hasValue() {
-        const pred = (a, p) => a || p.type !== 'literal' && p.type !== 'dayperiod' && this.getExisting(p.pattern[0]);
-        return this.intl.splitDateFormat(this.format).reduce(pred, false);
-    }
-    shouldNormalizeCentury() {
-        return this.intl.splitDateFormat(this.format).some(part => part.pattern === 'yy');
-    }
-    getDateObject() {
-        for (let i = 0; i < this.knownParts.length; i++) {
-            if (!this.getExisting(this.knownParts[i])) {
-                return null;
-            }
-        }
-        return cloneDate(this.value);
-    }
-    getTextAndFormat(format) {
-        return this.merge(this.intl.formatDate(this.value, format), this.dateFormatString(this.value, format));
-    }
-    getExisting(symbol) {
-        switch (symbol) {
-            case "y": return this.year;
-            case "M":
-            case "L": return this.month;
-            case "d": return this.date;
-            case "E": return this.date && this.month && this.year;
-            case "h":
-            case "H": return this.hours;
-            case "m": return this.minutes;
-            case "s": return this.seconds;
-            case "S": return this.milliseconds;
-            default: return true;
-        }
-    }
-    setExisting(symbol, value) {
-        switch (symbol) {
-            case "y":
-                this.year = value;
-                if (value === false) {
-                    this.value.setFullYear(2000);
-                }
-                break; //allow 2/29 dates
-            case "M":
-                this.month = value;
-                if (value === false) {
-                    this.value.setMonth(0);
-                }
-                break; //make sure you can type 31 at day part
-            case "d":
-                this.date = value;
-                break;
-            case "h":
-            case "H":
-                this.hours = value;
-                break;
-            case "m":
-                this.minutes = value;
-                break;
-            case "s":
-                this.seconds = value;
-                break;
-            case "S":
-                this.milliseconds = value;
-                break;
-            default: return;
-        }
-    }
-    modifyPart(symbol, offset) {
-        let newValue = cloneDate(this.value);
-        switch (symbol) {
-            case "y":
-                newValue.setFullYear(newValue.getFullYear() + offset);
-                break;
-            case "M":
-                newValue = addMonths(this.value, offset);
-                break;
-            case "d":
-            case "E":
-                newValue.setDate(newValue.getDate() + offset);
-                break;
-            case "h":
-            case "H":
-                newValue.setHours(newValue.getHours() + offset);
-                break;
-            case "m":
-                newValue.setMinutes(newValue.getMinutes() + offset);
-                break;
-            case "s":
-                newValue.setSeconds(newValue.getSeconds() + offset);
-                break;
-            case "S":
-                newValue.setMilliseconds(newValue.getMilliseconds() + offset);
-                break;
-            case "a":
-                newValue.setHours(newValue.getHours() + (12 * offset));
-                break;
-            default: break;
-        }
-        if (this.shouldNormalizeCentury()) {
-            newValue = this.normalizeCentury(newValue);
-        }
-        if (newValue.getFullYear() > 0) {
-            this.setExisting(symbol, true);
-            this.value = newValue;
-        }
-    }
-    parsePart(symbol, currentChar, resetSegmentValue) {
-        if (!currentChar) {
-            this.resetLeadingZero();
-            this.setExisting(symbol, false);
-            return { value: null, switchToNext: false };
-        }
-        const baseDate = this.intl.formatDate(this.value, this.format);
-        const dateParts = this.dateFormatString(this.value, this.format);
-        const baseFormat = dateParts.symbols;
-        let replaced = false;
-        let prefix = "";
-        let current = "";
-        let suffix = "";
-        for (let i = 0; i < baseDate.length; i++) {
-            if (baseFormat[i] === symbol) {
-                current += this.getExisting(symbol) ? baseDate[i] : "0";
-                replaced = true;
-            }
-            else if (!replaced) {
-                prefix += baseDate[i];
-            }
-            else {
-                suffix += baseDate[i];
-            }
-        }
-        const currentMaxLength = current.length - 3;
-        let parsedDate = null;
-        const month = this.matchMonth(currentChar);
-        const dayPeriod = this.matchDayPeriod(currentChar, symbol);
-        const isZeroCurrentChar = currentChar === '0';
-        const leadingZero = (this.leadingZero || {})[symbol] || 0;
-        if (isZeroCurrentChar) {
-            const valueNumber = parseInt(resetSegmentValue ? currentChar : current + currentChar, 10);
-            if (valueNumber === 0 && !this.isAbbrMonth(dateParts.partMap, symbol)) {
-                this.incrementLeadingZero(symbol);
-            }
-        }
-        else {
-            this.resetLeadingZero();
-        }
-        for (let i = Math.max(0, currentMaxLength); i <= current.length; i++) {
-            let middle = resetSegmentValue ? currentChar : (current.substring(i) + currentChar);
-            if (symbol === "S" && resetSegmentValue) {
-                // The "S" parser in intl parses "1" as 100ms in order to handle ISOString dates correctly, so to get 1ms, we need to pass "001"
-                const padding = msPaddingFromFormat(baseFormat);
-                middle = padding + middle;
-            }
-            const middleNumber = parseInt(middle, 10);
-            parsedDate = this.intl.parseDate(prefix + middle + suffix, this.format);
-            if (!parsedDate && !isNaN(middleNumber) && !isNaN(parseInt(currentChar, 10))) {
-                if (symbol === 'M' && !month) {
-                    const monthNumber = middleNumber - 1;
-                    if (monthNumber > -1 && monthNumber < 12) {
-                        parsedDate = cloneDate(this.value);
-                        parsedDate.setMonth(monthNumber);
-                        if (parsedDate.getMonth() !== monthNumber) {
-                            parsedDate = lastDayOfMonth(addMonths(parsedDate, -1));
-                        }
-                    }
-                }
-                if (symbol === 'y') {
-                    parsedDate = createDate(parseInt(middle, 10), this.month ? this.value.getMonth() : 0, this.date ? this.value.getDate() : 1, this.hours ? this.value.getHours() : 0, this.minutes ? this.value.getMinutes() : 0, this.seconds ? this.value.getSeconds() : 0, this.milliseconds ? this.value.getMilliseconds() : 0);
-                    if (this.date && parsedDate.getDate() !== this.value.getDate()) {
-                        parsedDate = lastDayOfMonth(addMonths(parsedDate, -1));
-                    }
-                }
-            }
-            if (parsedDate) {
-                //move to next segment if the part will overflow with next char
-                //when start from empty date (01, then 010), padded zeros should be trimmed
-                const patternValue = this.partPattern(dateParts.partMap, symbol).pattern;
-                const peekDate = this.intl.parseDate(`${prefix}${this.peek(middle, patternValue)}${suffix}`, this.format);
-                const patternLength = this.patternLength(patternValue) || patternValue.length;
-                const patternSatisfied = (leadingZero + (unpadZero(middle) || currentChar).length) >= patternLength;
-                const switchToNext = peekDate === null || patternSatisfied;
-                if (this.shouldNormalizeCentury()) {
-                    parsedDate = this.normalizeCentury(parsedDate);
-                }
-                this.value = parsedDate;
-                this.setExisting(symbol, true);
-                return { value: this.value, switchToNext: switchToNext };
-            }
-        }
-        if (month) {
-            parsedDate = this.intl.parseDate(prefix + month + suffix, this.format);
-            if (parsedDate) {
-                this.value = parsedDate;
-                this.setExisting(symbol, true);
-                return { value: this.value, switchToNext: false };
-            }
-        }
-        if (dayPeriod) {
-            parsedDate = this.intl.parseDate(prefix + dayPeriod + suffix, this.format);
-            if (parsedDate) {
-                this.value = parsedDate;
-                return { value: this.value, switchToNext: true };
-            }
-        }
-        if (isZeroCurrentChar) {
-            this.setExisting(symbol, false);
-        }
-        return { value: null, switchToNext: false };
-    }
-    resetLeadingZero() {
-        const hasLeadingZero = this.leadingZero !== null;
-        this.setLeadingZero(null);
-        return hasLeadingZero;
-    }
-    setLeadingZero(leadingZero) {
-        this.leadingZero = leadingZero;
-    }
-    normalizeCentury(date) {
-        if (!isPresent(date)) {
-            return date;
-        }
-        const twoDigitYear = cropTwoDigitYear(date);
-        const centuryBase = this.getNormalizedCenturyBase(twoDigitYear);
-        const normalizedDate = setYears(date, centuryBase + twoDigitYear);
-        return normalizedDate;
-    }
-    incrementLeadingZero(symbol) {
-        const leadingZero = this.leadingZero || {};
-        leadingZero[symbol] = (leadingZero[symbol] || 0) + 1;
-        this.leadingZero = leadingZero;
-    }
-    isAbbrMonth(parts, symbol) {
-        const pattern = this.partPattern(parts, symbol);
-        return pattern.type === 'month' && pattern.names;
-    }
-    partPattern(parts, symbol) {
-        return parts.filter((part) => part.pattern.indexOf(symbol) !== -1)[0];
-    }
-    peek(value, pattern) {
-        const peekValue = unpadZero(value) + '0';
-        return padZero(pattern.length - peekValue.length) + peekValue;
-    }
-    matchMonth(typedChar) {
-        this.typedMonthPart += typedChar.toLowerCase();
-        if (!this.monthNames) {
-            return "";
-        }
-        while (this.typedMonthPart.length > 0) {
-            for (let i = 0; i < this.monthNames.length; i++) {
-                if (this.monthNames[i].toLowerCase().indexOf(this.typedMonthPart) === 0) {
-                    return this.monthNames[i];
-                }
-            }
-            const monthAsNum = parseInt(this.typedMonthPart, 10);
-            if (monthAsNum >= 1 && monthAsNum <= 12 && monthAsNum.toString() === this.typedMonthPart /*ensure they exact match*/) {
-                return this.monthNames[monthAsNum - 1];
-            }
-            this.typedMonthPart = this.typedMonthPart.substring(1, this.typedMonthPart.length);
-        }
-        return "";
-    }
-    matchDayPeriod(typedChar, symbol) {
-        const lowerChart = String(typedChar).toLowerCase();
-        if (symbol === 'a' && this.dayPeriods) {
-            if (this.dayPeriods.am.toLowerCase().startsWith(lowerChart)) {
-                return this.dayPeriods.am;
-            }
-            else if (this.dayPeriods.pm.toLowerCase().startsWith(lowerChart)) {
-                return this.dayPeriods.pm;
-            }
-        }
-        return '';
-    }
-    allFormatedMonths() {
-        const dateFormatParts = this.intl.splitDateFormat(this.format);
-        for (let i = 0; i < dateFormatParts.length; i++) {
-            if (dateFormatParts[i].type === "month" && dateFormatParts[i].names) {
-                return this.intl.dateFormatNames(dateFormatParts[i].names);
-            }
-        }
-        return null;
-    }
-    allDayPeriods() {
-        const dateFormatParts = this.intl.splitDateFormat(this.format);
-        for (let i = 0; i < dateFormatParts.length; i++) {
-            if (dateFormatParts[i].type === "dayperiod" && dateFormatParts[i].names) {
-                return this.intl.dateFormatNames(dateFormatParts[i].names);
-            }
-        }
-        return null;
-    }
-    patternLength(pattern) {
-        if (pattern[0] === 'y') {
-            return 4;
-        }
-        if (SHORT_PATTERN_LENGTH_REGEXP.test(pattern)) {
-            return 2;
-        }
-        return 0;
-    }
-    //TODO: REMOVE!
-    dateFormatString(date, format) {
-        const dateFormatParts = this.intl.splitDateFormat(format);
-        const parts = [];
-        const partMap = [];
-        for (let i = 0; i < dateFormatParts.length; i++) {
-            let partLength = this.intl.formatDate(date, { pattern: dateFormatParts[i].pattern }).length;
-            while (partLength > 0) {
-                parts.push(this.symbols[dateFormatParts[i].pattern[0]] || "_");
-                partMap.push(dateFormatParts[i]);
-                partLength--;
-            }
-        }
-        const returnValue = new Mask();
-        returnValue.symbols = parts.join("");
-        returnValue.partMap = partMap;
-        return returnValue;
-    }
-    merge(text, mask) {
-        // Important: right to left.
-        let resultText = "";
-        let resultFormat = "";
-        const format = mask.symbols;
-        for (let r = format.length - 1; r >= 0; r--) {
-            if (this.knownParts.indexOf(format[r]) === -1 || this.getExisting(format[r])) {
-                resultText = text[r] + resultText;
-                resultFormat = format[r] + resultFormat;
-            }
-            else {
-                const currentSymbol = format[r];
-                while (r >= 0 && currentSymbol === format[r]) {
-                    r--;
-                }
-                r++;
-                if (this.leadingZero && this.leadingZero[currentSymbol]) {
-                    resultText = '0' + resultText;
-                }
-                else {
-                    resultText = this.dateFieldName(mask.partMap[r]) + resultText;
-                }
-                while (resultFormat.length < resultText.length) {
-                    resultFormat = format[r] + resultFormat;
-                }
-            }
-        }
-        return [resultText, resultFormat];
-    }
-    dateFieldName(part) {
-        const formatPlaceholder = this.formatPlaceholder || 'wide';
-        if (formatPlaceholder[part.type]) {
-            return formatPlaceholder[part.type];
-        }
-        if (formatPlaceholder === 'formatPattern') {
-            return part.pattern;
-        }
-        return this.intl.dateFieldName(Object.assign(part, { nameType: formatPlaceholder }));
-    }
-    getNormalizedCenturyBase(twoDigitYear) {
-        return twoDigitYear > this.twoDigitYearMax ?
-            PREVIOUS_CENTURY_BASE :
-            CURRENT_CENTURY_BASE;
+const DEFAULT_FORMAT_PLACEHOLDER = 'wide';
+const DATE_PART_REGEXP = /year|month|<day>/;
+const TIME_PART_REGEXP = /hour|minute|second|millisecond/;
+/**
+ * @hidden
+ * Need to overrite `dateFormatNames` parameters order and provide `cldr` object
+ * required by the kendo-dateinputs-common package
+ */
+export class DateInputIntl {
+    constructor(service) {
+        this.service = service;
+        this.cldr = {};
+        this.localeId = service['localeId'];
+        this.format = service.format;
+        this.toString = service.toString;
+        this.formatDate = service.formatDate;
+        this.parseDate = service.parseDate;
+        this.parseNumber = service.parseNumber;
+        this.formatNumber = service.formatNumber;
+        this.splitDateFormat = service.splitDateFormat;
+        this.numberSymbols = service.numberSymbols;
+        this.firstDay = service.firstDay;
+        this.weekendRange = service.weekendRange;
+        this.dateFieldName = service.dateFieldName;
+        this.dateFormatNames = (localeId, options) => this.service.dateFormatNames(options, localeId || this.localeId);
+        const _localeData = localeData(this.localeId);
+        // Setting the `cldr` object from here could be avoided if the logic in the common package is revisited to 
+        // directly relies on the `localeId` being set as part of the options => TBD and validated for all suites
+        this.cldr[_localeData.name] = _localeData;
     }
 }
 /**
@@ -545,16 +159,50 @@ export class DateInputComponent {
          * }
          * ```
          */
-        this.steps = {};
+        this.steps = {
+            // Default values are needed until fix in common package: https://github.com/telerik/kendo-dateinputs-common/issues/26
+            second: 1,
+            minute: 1,
+            hour: 1,
+            day: 1,
+            month: 1,
+            year: 1
+        };
         /**
          * Determines whether the built-in min or max validators are to be enforced when a form is being validated.
          */
         this.rangeValidation = true;
         /**
          * @hidden
-         * Based on the min and max values, specifies whether the value will be auto-corrected while typing.
+         *
+         * Determines whether to auto correct invalid segments automatically.
+         * TODO: To be fixed in common package before enabling: https://github.com/telerik/kendo-dateinputs-common/issues/24
+         *
+         * @default true
+         */
+        this.autoCorrectParts = true;
+        /**
+         * Determines whether to automatically move to the next segment after the user completes the current one.
+         *
+         * @default true
+         */
+        this.autoSwitchParts = true;
+        /**
+         * A string array representing custom keys, which will move the focus to the next date format segment.
+         */
+        this.autoSwitchKeys = [];
+        /**
+         * Determines if the users should see a blinking caret inside the Date Input when possible.
+         *
+         * @default false
+         */
+        this.allowCaretMode = false;
+        /**
+         * When enabled, the DateInput will autofill the rest of the date to the current date when the component loses focus.
+         *
+         * @default false
          */
-        this.autoCorrect = false;
+        this.autoFill = false;
         /**
          * Determines whether the built-in validation for incomplete dates is to be enforced when a form is being validated.
          */
@@ -567,6 +215,12 @@ export class DateInputComponent {
          * will be assumed to be 20xx, while 69 and larger will be assumed to be 19xx.
          */
         this.twoDigitYearMax = TWO_DIGIT_YEAR_MAX;
+        /**
+         * Indicates whether the mouse scroll can be used to increase/decrease the time segments values.
+         *
+         * @default true
+         */
+        this.enableMouseWheel = true;
         /**
          * Specifies whether the **Up** and **Down** spin buttons will be rendered.
          * For more information, refer to the article on
@@ -643,18 +297,16 @@ export class DateInputComponent {
          * @hidden
          */
         this.isDateIncomplete = false;
-        this.currentValue = "";
         this.currentFormat = "";
-        this.backspace = false;
-        this.resetSegmentValue = true;
         this.minValidator = noop;
         this.maxValidator = noop;
         this.incompleteValidator = noop;
         this._value = null;
         this._active = false;
         this._focusableId = `dateinput-${nextId++}`;
+        this._formatPlaceholder = DEFAULT_FORMAT_PLACEHOLDER;
         this.kendoDate = null;
-        this.paste = false;
+        this.kendoDateObject = null;
         this.domEvents = [];
         this.onControlChange = noop;
         this.onControlTouched = noop;
@@ -663,8 +315,7 @@ export class DateInputComponent {
         this._rounded = DEFAULT_ROUNDED;
         this._fillMode = DEFAULT_FILL_MODE;
         this.subs = new Subscription();
-        this.symbolsMap = this.dateSymbolMap();
-        this.updateFormatSections();
+        validatePackage(packageMetadata);
         if (this.pickerService) {
             this.pickerService.input = this;
         }
@@ -701,6 +352,58 @@ export class DateInputComponent {
     get tabIndex() {
         return this.tabindex;
     }
+    /**
+     * Defines the descriptions of the format sections in the input field.
+     * For more information, refer to the article on
+     * [placeholders]({% slug placeholders_dateinput %}).
+     *
+     * @example
+     * ```ts
+     * _@Component({
+     * selector: 'my-app',
+     * template: `
+     * <div class="row example-wrapper" [style.min-height.px]="450">
+     *  <div class="col-xs-12 col-md-6 example-col">
+     *    <p>Full-length format description:</p>
+     *    <kendo-dateinput formatPlaceholder="wide"></kendo-dateinput>
+     *  </div>
+     *
+     *  <div class="col-xs-12 col-md-6 example-col">
+     *    <p>Narrow-length format description:</p>
+     *    <kendo-dateinput formatPlaceholder="narrow"></kendo-dateinput>
+     *  </div>
+     *
+     *  <div class="col-xs-12 col-md-6 example-col">
+     *    <p>Short-length format description:</p>
+     *    <kendo-dateinput formatPlaceholder="short"></kendo-dateinput>
+     *  </div>
+     *
+     *  <div class="col-xs-12 col-md-6 example-col">
+     *    <p>Display defined format:</p>
+     *    <kendo-dateinput format="MM/dd/yyyy" formatPlaceholder="formatPattern"></kendo-dateinput>
+     *  </div>
+     *
+     *  <div class="col-xs-12 col-md-6 example-col">
+     *    <p>Custom defined format descriptions</p>
+     *    <kendo-dateinput format="G"
+     *      [formatPlaceholder]="{
+     *        year: 'y', month: 'M', day: 'd',
+     *        hour: 'h', minute: 'm', second: 's'
+     *      }"
+     *    ></kendo-dateinput>
+     *  </div>
+     * </div>
+     * `
+     * })
+     * export class AppComponent { }
+     * ```
+     */
+    set formatPlaceholder(format) {
+        this._formatPlaceholder = format ? format : DEFAULT_FORMAT_PLACEHOLDER;
+    }
+    get formatPlaceholder() {
+        return this._formatPlaceholder;
+    }
     /**
      * Specifies the value of the DateInput component.
      *
@@ -708,9 +411,6 @@ export class DateInputComponent {
      */
     set value(value) {
         this.verifyValue(value);
-        if (this.autoCorrect && !isInRange(value, this.min, this.max)) {
-            return;
-        }
         this._value = cloneDate(value);
         this.valueUpdate.emit(cloneDate(value));
     }
@@ -822,34 +522,39 @@ export class DateInputComponent {
         const ngControl = this.injector.get(NgControl, null);
         return ngControl?.control || null;
     }
-    get inputFormat() {
-        if (!this.format) {
-            return DEFAULT_FORMAT;
-        }
-        if (typeof this.format === 'string') {
-            return this.format;
-        }
-        else {
-            return this.format.inputFormat;
-        }
-    }
-    get displayFormat() {
-        if (!this.format) {
-            return DEFAULT_FORMAT;
-        }
-        if (typeof this.format === 'string') {
-            return this.format;
-        }
-        else {
-            return this.format.displayFormat;
-        }
+    get options() {
+        return {
+            format: this.format,
+            steps: this.steps,
+            readonly: this.readonly,
+            formatPlaceholder: this.formatPlaceholder,
+            placeholder: this.placeholder,
+            autoCorrectParts: this.autoCorrectParts,
+            autoSwitchParts: this.autoSwitchParts,
+            selectPreviousSegmentOnBackspace: true,
+            autoSwitchKeys: this.autoSwitchKeys,
+            twoDigitYearMax: this.twoDigitYearMax,
+            enableMouseWheel: this.enableMouseWheel,
+            selectNearestSegmentOnFocus: false,
+            allowCaretMode: this.allowCaretMode,
+            autoFill: this.autoFill,
+            value: this.value,
+            intlService: new DateInputIntl(this.intl)
+        };
     }
     /**
      * @hidden
      * Used by the TextBoxContainer to determine if the component is empty
      */
     isEmpty() {
-        return !this.currentValue || !String(this.currentValue).trim();
+        const currentValue = this.dateInput.nativeElement.value;
+        return !currentValue || !String(currentValue).trim();
+    }
+    /**
+     * @hidden
+     */
+    handleDragAndDrop(args) {
+        args.preventDefault();
     }
     /**
      * @hidden
@@ -861,15 +566,16 @@ export class DateInputComponent {
      * @hidden
      */
     ngOnInit() {
-        this.kendoDate = this.getKendoDate(this.value);
-        this.updateElementValue();
+        if (this.kendoDate) {
+            this.kendoDate.destroy();
+        }
+        this.kendoDate = this.initKendoDate();
+        this.kendoDateObject = this.kendoDate.dateObject;
+        this.updateFormatSections();
         this.subs.add(this.intl.changes.subscribe(this.intlChange.bind(this)));
         this.ngControl = this.injector.get(NgControl, null);
         if (this.wrapper) {
             this.renderer.removeAttribute(this.wrapper.nativeElement, 'tabindex');
-            this.ngZone.runOutsideAngular(() => {
-                this.bindEvents();
-            });
         }
     }
     /**
@@ -883,14 +589,37 @@ export class DateInputComponent {
             this.incompleteValidator = this.incompleteDateValidation ? incompleteDateValidator() : noop;
             this.onValidatorChange();
         }
-        if (changes['format']) {
-            this.symbolsMap = this.dateSymbolMap();
+        const isEqualToKendoDate = this.kendoDate && isEqual(this.value, this.kendoDate.value);
+        if (changes['format'] || !isEqualToKendoDate || changes['placeholder']) {
+            if (!this.kendoDate) {
+                return;
+            }
+            ;
+            this.kendoDate?.setOptions(this.options, true);
             this.updateFormatSections();
         }
-        const isEqualToKendoDate = this.kendoDate && isEqual(this.value, this.kendoDate.getDateObject());
-        if (changes['format'] || !isEqualToKendoDate || changes['placeholder']) {
-            this.kendoDate = this.getKendoDate(this.value);
-            this.updateElementValue(this.isActive);
+    }
+    updateFormatSections() {
+        this.formatSections = this.intl.splitDateFormat(this.kendoDate.inputFormat)
+            .reduce(({ date, time }, p) => {
+            return {
+                date: date || DATE_PART_REGEXP.test(p.type),
+                time: time || TIME_PART_REGEXP.test(p.type)
+            };
+        }, { date: false, time: false });
+    }
+    updateIncompleteValidationStatus() {
+        const previousValue = this.isDateIncomplete;
+        this.isDateIncomplete = this.kendoDateObject.hasValue() && this.value === null;
+        if (previousValue === this.isDateIncomplete || !this.incompleteDateValidation) {
+            return;
+        }
+        if (isPresent(this.ngControl) && !isPresent(this.pickerService)) {
+            this.cdr.markForCheck();
+            this.ngZone.run(() => this.onValidatorChange());
+        }
+        else if (isPresent(this.pickerService)) {
+            this.pickerService.dateCompletenessChange.emit();
         }
     }
     ngAfterViewInit() {
@@ -946,15 +675,16 @@ export class DateInputComponent {
      */
     writeValue(value) {
         this.verifyValue(value);
-        this.kendoDate = this.getKendoDate(value);
         this.value = cloneDate(value);
-        this.updateElementValue(this.isActive);
+        this.kendoDate?.setOptions(this.options, true);
+        this.kendoDateObject?.setValue(this.value);
+        this.kendoDate?.refreshElementValue();
     }
     /**
      * @hidden
      */
     triggerChange() {
-        const value = this.kendoDate.getDateObject();
+        const value = this.kendoDate.value;
         if (+value !== +this.value) {
             this.value = cloneDate(value);
             this.notify();
@@ -997,11 +727,7 @@ export class DateInputComponent {
      * ```
      */
     focus() {
-        const input = this.inputElement;
-        if (input) {
-            input.focus();
-            this.selectDateSegment(this.currentFormat[0]);
-        }
+        this.kendoDate && this.kendoDate.focus();
     }
     /**
      * Blurs the DateInput component.
@@ -1017,220 +743,53 @@ export class DateInputComponent {
      */
     handleButtonClick(offset) {
         this.arrowDirection = Arrow.None;
-        this.modifyDateSegmentValue(offset);
-    }
-    /**
-     * @hidden
-     */
-    modifyDateSegmentValue(offset) {
-        const caret = this.caret();
-        const symbol = this.currentFormat[caret[0]];
-        let step = (this.steps || {})[this.symbolsMap[symbol]] || 1;
-        if (symbol === "S" && !this.steps.millisecond) {
-            const msDigits = millisecondDigitsInFormat(this.inputFormat);
-            step = millisecondStepFor(msDigits);
-        }
-        this.kendoDate.modifyPart(symbol, offset * step);
-        this.putDateInRange();
-        this.updateElementValue(this.isActive);
-        this.triggerChange();
-        this.selectDateSegment(symbol);
-        this.updateIncompleteValidationStatus();
-    }
-    /**
-     * @hidden
-     */
-    switchDateSegment(offset) {
-        const caret = this.caret();
-        if (this.kendoDate.resetLeadingZero()) {
-            this.updateElementValue(this.isActive);
-        }
-        if (caret[0] < caret[1] && this.currentFormat[caret[0]] !== this.currentFormat[caret[1] - 1]) {
-            this.selectNearestSegment(offset > 0 ? caret[0] : caret[1] - 1);
-            this.resetSegmentValue = true;
-            return true;
-        }
-        const previousFormatSymbol = this.currentFormat[caret[0]];
-        let a = caret[0] + offset;
-        while (a > 0 && a < this.currentFormat.length) {
-            if (this.currentFormat[a] !== previousFormatSymbol &&
-                this.currentFormat[a] !== "_") {
-                break;
-            }
-            a += offset;
-        }
-        if (this.currentFormat[a] === "_") {
-            //there is not known symbol found
-            return false;
-        }
-        let b = a;
-        while (b >= 0 && b < this.currentFormat.length) {
-            if (this.currentFormat[b] !== this.currentFormat[a]) {
-                break;
-            }
-            b += offset;
-        }
-        if (a > b && (b + 1 !== caret[0] || a + 1 !== caret[1])) {
-            this.caret(b + 1, a + 1);
-            this.resetSegmentValue = true;
-            return true;
-        }
-        else if (a < b && (a !== caret[0] || b !== caret[1])) {
-            this.caret(a, b);
-            this.resetSegmentValue = true;
-            return true;
-        }
-        return false;
-    }
-    /**
-     * @hidden
-     */
-    selectDateSegment(symbol) {
-        let begin = -1;
-        let end = 0;
-        for (let i = 0; i < this.currentFormat.length; i++) {
-            if (this.currentFormat[i] === symbol) {
-                end = i + 1;
-                if (begin === -1) {
-                    begin = i;
-                }
+        this.kendoDate.focus();
+        this.kendoDate.modifyDateSegmentValue(offset);
+    }
+    initKendoDate() {
+        const kendoDate = new DateInput(this.dateInput.nativeElement, {
+            ...this.options,
+            events: {
+                valueChange: this.onWidgetValueChange.bind(this),
+                inputEnd: this.onWidgetInputEnd.bind(this),
+                focusEnd: this.onWidgetFocus.bind(this),
+                blurEnd: this.onWidgetBlur.bind(this),
+                keydown: this.onWidgetKeyDown.bind(this),
             }
-        }
-        if (begin < 0) {
-            begin = 0;
-        }
-        this.caret(0, 0);
-        this.caret(begin, end);
+        });
+        return kendoDate;
     }
-    /**
-     * @hidden
-     */
-    handleClick() {
-        this.hasMousedown = false;
-        if (this.isActive) {
-            const selectionPresent = this.inputElement.selectionStart !== this.inputElement.selectionEnd;
-            const placeholderToggled = isPresent(this.placeholder) && !this.kendoDate.hasValue() && !this.focusedPriorToMousedown;
-            // focus first segment if the user hasn't selected something during mousedown and if the placeholder was just toggled
-            const selectFirstSegment = !selectionPresent && placeholderToggled;
-            const index = selectFirstSegment ? 0 : this.caret()[0];
-            this.selectNearestSegment(index);
-        }
+    onWidgetValueChange() {
+        this.triggerChange();
     }
-    /**
-     * @hidden
-     */
-    handleDragAndDrop(args) {
-        args.preventDefault();
+    onWidgetKeyDown() {
+        this.kendoDateObject = this.kendoDate.dateObject;
     }
-    /**
-     * @hidden
-     */
-    handleMousedown() {
-        this.hasMousedown = true;
-        this.focusedPriorToMousedown = this.isActive;
+    onWidgetInputEnd() {
+        this.updateIncompleteValidationStatus();
     }
-    /**
-     * @hidden
-     */
-    handleFocus(args) {
-        this.renderer.removeAttribute(this.inputElement, attributeNames.ariaActiveDescendant);
+    onWidgetFocus({ event: FocuseEvent }) {
         this.isActive = true;
-        this.updateElementValue();
-        if (!this.hasMousedown) {
-            this.caret(0, this.inputValue.length);
-        }
-        this.hasMousedown = false;
         if (hasObservers(this.onFocus)) {
             this.ngZone.run(() => {
-                this.emitFocus(args);
+                this.emitFocus(event);
             });
         }
         else {
-            this.emitFocus(args);
+            this.emitFocus(event);
         }
     }
-    /**
-     * @hidden
-     */
-    handleBlur(args) {
+    onWidgetBlur({ event: FocuseEvent }) {
         this.isActive = false;
-        this.resetSegmentValue = true;
-        this.kendoDate.resetLeadingZero();
-        this.updateElementValue();
         if (hasObservers(this.onBlur) || requiresZoneOnBlur(this.ngControl)) {
             this.ngZone.run(() => {
                 this.onControlTouched();
-                this.emitBlur(args);
+                this.emitBlur(event);
                 this.cdr.markForCheck();
             });
         }
         else {
-            this.emitBlur(args);
-        }
-    }
-    getKendoDate(value) {
-        const { leadingZero } = (this.kendoDate || {}) || null;
-        const kendoDate = new KendoDate(this.intl, this.formatPlaceholder, this.inputFormat, value, this.twoDigitYearMax);
-        kendoDate.setLeadingZero(this.isActive ? leadingZero : null);
-        return kendoDate;
-    }
-    dateSymbolMap() {
-        const reducer = (map, part) => {
-            map[part.pattern[0]] = part.type;
-            return map;
-        };
-        return this.intl.splitDateFormat(this.inputFormat).reduce(reducer, {});
-    }
-    updateElementValue(isActive) {
-        const start = this.caret()[0]; //XXX: get caret position before input is updated
-        const format = this.isActive ? this.inputFormat : this.displayFormat;
-        const texts = this.kendoDate.getTextAndFormat(format);
-        const showPlaceholder = !this.isActive && isPresent(this.placeholder) && !this.kendoDate.hasValue();
-        const input = this.inputElement;
-        this.currentFormat = texts[1];
-        this.currentValue = !showPlaceholder ? texts[0] : '';
-        this.renderer.setProperty(input, "value", this.currentValue);
-        if (input.placeholder !== this.placeholder) {
-            this.renderer.setProperty(input, "placeholder", this.placeholder);
-        }
-        if (isActive) {
-            this.selectNearestSegment(start);
-        }
-    }
-    caret(start, end = start) {
-        const isPosition = start !== undefined;
-        let returnValue = [start, start];
-        const element = this.inputElement;
-        if (isPosition && (this.disabled || this.readonly)) {
-            return undefined;
-        }
-        try {
-            if (element.selectionStart !== undefined) {
-                if (isPosition) {
-                    if (isDocumentAvailable() && document.activeElement !== element) {
-                        element.focus();
-                    }
-                    element.setSelectionRange(start, end);
-                }
-                returnValue = [element.selectionStart, element.selectionEnd];
-            }
-        }
-        catch (e) {
-            returnValue = [];
-        }
-        return returnValue;
-    }
-    selectNearestSegment(index) {
-        // Finds the nearest (in both directions) known part.
-        for (let i = index, j = index - 1; i < this.currentFormat.length || j >= 0; i++, j--) {
-            if (i < this.currentFormat.length && this.currentFormat[i] !== "_") {
-                this.selectDateSegment(this.currentFormat[i]);
-                return;
-            }
-            if (j >= 0 && this.currentFormat[j] !== "_") {
-                this.selectDateSegment(this.currentFormat[j]);
-                return;
-            }
+            this.emitBlur(event);
         }
     }
     verifyRange() {
@@ -1249,135 +808,9 @@ export class DateInputComponent {
             throw new Error(`The 'value' should be a valid JavaScript Date instance. Check ${VALUE_DOC_LINK} for possible resolution.`);
         }
     }
-    putDateInRange() {
-        const currentDate = this.kendoDate.getDateObject();
-        const candidate = dateInRange(currentDate, this.min, this.max);
-        if (this.autoCorrect && !isEqual(currentDate, candidate)) {
-            this.kendoDate = this.getKendoDate(candidate);
-        }
-    }
-    updateFormatSections() {
-        this.formatSections = this.intl.splitDateFormat(this.inputFormat)
-            .reduce(({ date, time }, p) => {
-            return {
-                date: date || DATE_PART_REGEXP.test(p.type),
-                time: time || TIME_PART_REGEXP.test(p.type)
-            };
-        }, { date: false, time: false });
-    }
     intlChange() {
+        this.kendoDate.setOptions(this.options, true);
         this.updateFormatSections();
-        this.kendoDate = this.getKendoDate(this.value);
-        this.updateElementValue(this.isActive);
-    }
-    updateOnPaste() {
-        let value = this.intl.parseDate(this.inputValue, this.inputFormat) || this.value;
-        if (isPresent(value) && this.kendoDate.shouldNormalizeCentury()) {
-            value = this.kendoDate.normalizeCentury(value);
-        }
-        const notify = +value !== +this.value;
-        this.writeValue(value);
-        if (notify) {
-            this.notify();
-        }
-    }
-    bindEvents() {
-        const element = this.wrapper.nativeElement;
-        const mousewheelHandler = this.handleMouseWheel.bind(this);
-        this.domEvents.push(this.renderer.listen(element, 'DOMMouseScroll', mousewheelHandler), this.renderer.listen(element, 'mousewheel', mousewheelHandler), this.renderer.listen(element, 'keydown', this.handleKeydown.bind(this)), this.renderer.listen(element, 'paste', this.handlePaste.bind(this)), this.renderer.listen(element, 'input', this.handleInput.bind(this)));
-    }
-    handleMouseWheel(event) {
-        if (this.disabled || this.readonly || !this.isActive) {
-            return;
-        }
-        event = window.event || event;
-        if (event.shiftKey) {
-            this.switchDateSegment((event.wheelDelta || -event.detail) > 0 ? -1 : 1);
-        }
-        else {
-            this.modifyDateSegmentValue((event.wheelDelta || -event.detail) > 0 ? 1 : -1);
-        }
-        event.returnValue = false;
-        if (event.preventDefault) {
-            event.preventDefault();
-        }
-        if (event.stopPropagation) {
-            event.stopPropagation();
-        }
-    }
-    handlePaste() {
-        this.paste = true;
-    }
-    handleKeydown(event) {
-        if (this.disabled || this.readonly || event.altKey || event.ctrlKey || event.metaKey) {
-            return;
-        }
-        if (event.keyCode === Keys.Backspace) {
-            this.backspace = true;
-            return;
-        }
-        switch (event.keyCode) {
-            case Keys.ArrowDown:
-                this.modifyDateSegmentValue(-1);
-                break;
-            case Keys.ArrowUp:
-                this.modifyDateSegmentValue(1);
-                break;
-            case Keys.ArrowRight:
-                this.switchDateSegment(1);
-                break;
-            case Keys.ArrowLeft:
-                this.switchDateSegment(-1);
-                break;
-            case Keys.Home:
-                this.selectNearestSegment(0);
-                break;
-            case Keys.End:
-                this.selectNearestSegment(this.inputValue.length);
-                break;
-            default:
-                return; //skip the preventDefault if we didn't handled the keyCode
-        }
-        event.preventDefault();
-    }
-    handleInput() {
-        if (this.disabled || this.readonly) {
-            return;
-        }
-        if (this.paste) {
-            this.updateOnPaste();
-            this.paste = false;
-            return;
-        }
-        const diff = approximateStringMatching(this.currentValue, this.currentFormat, this.inputValue, this.caret()[0]);
-        const navigationOnly = (diff.length === 1 && diff[0][1] === "_");
-        let switchPart = false;
-        if (!navigationOnly) {
-            let parsedPart;
-            for (let i = 0; i < diff.length; i++) {
-                parsedPart = this.kendoDate.parsePart(diff[i][0], diff[i][1], this.resetSegmentValue);
-                switchPart = parsedPart.switchToNext;
-            }
-            const candidate = this.kendoDate.getDateObject();
-            if (this.value && candidate && !this.formatSections['date']) {
-                this.kendoDate = this.getKendoDate(setTime(this.value, candidate));
-            }
-        }
-        this.resetSegmentValue = false;
-        this.putDateInRange();
-        this.updateElementValue(this.isActive);
-        this.triggerChange();
-        this.updateIncompleteValidationStatus();
-        if (diff.length && diff[0][0] !== "_") {
-            this.selectDateSegment(diff[0][0]);
-        }
-        if (switchPart || navigationOnly) {
-            this.switchDateSegment(1);
-        }
-        if (this.backspace) {
-            this.switchDateSegment(-1);
-        }
-        this.backspace = false;
     }
     emitFocus(args) {
         this.onFocus.emit();
@@ -1391,20 +824,6 @@ export class DateInputComponent {
             this.pickerService.onBlur.emit(args);
         }
     }
-    updateIncompleteValidationStatus() {
-        const previousValue = this.isDateIncomplete;
-        this.isDateIncomplete = this.kendoDate.hasValue() && this.value === null;
-        if (previousValue === this.isDateIncomplete || !this.incompleteDateValidation) {
-            return;
-        }
-        if (isPresent(this.ngControl) && !isPresent(this.pickerService)) {
-            this.cdr.markForCheck();
-            this.ngZone.run(() => this.onValidatorChange());
-        }
-        else if (isPresent(this.pickerService)) {
-            this.pickerService.dateCompletenessChange.emit();
-        }
-    }
     setSpinnerFill(spinner, fill, oldFill) {
         if (oldFill !== 'none') {
             this.renderer.removeClass(spinner, `k-button-${oldFill}`);
@@ -1430,7 +849,7 @@ export class DateInputComponent {
     }
 }
 DateInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateInputComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.IntlService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: i2.LocalizationService }, { token: i3.PickerService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-DateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DateInputComponent, selector: "kendo-dateinput", inputs: { focusableId: "focusableId", pickerType: "pickerType", disabled: "disabled", readonly: "readonly", title: "title", tabindex: "tabindex", role: "role", ariaReadOnly: "ariaReadOnly", tabIndex: "tabIndex", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", steps: "steps", max: "max", min: "min", rangeValidation: "rangeValidation", autoCorrect: "autoCorrect", incompleteDateValidation: "incompleteDateValidation", twoDigitYearMax: "twoDigitYearMax", value: "value", spinners: "spinners", isPopupOpen: "isPopupOpen", hasPopup: "hasPopup", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", valueUpdate: "valueUpdate", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-input": "this.wrapperClass", "class.k-dateinput": "this.wrapperClass", "class.k-disabled": "this.disabledClass" } }, providers: [
+DateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DateInputComponent, selector: "kendo-dateinput", inputs: { focusableId: "focusableId", pickerType: "pickerType", disabled: "disabled", readonly: "readonly", title: "title", tabindex: "tabindex", role: "role", ariaReadOnly: "ariaReadOnly", tabIndex: "tabIndex", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", steps: "steps", max: "max", min: "min", rangeValidation: "rangeValidation", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", allowCaretMode: "allowCaretMode", autoFill: "autoFill", incompleteDateValidation: "incompleteDateValidation", twoDigitYearMax: "twoDigitYearMax", enableMouseWheel: "enableMouseWheel", value: "value", spinners: "spinners", isPopupOpen: "isPopupOpen", hasPopup: "hasPopup", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", valueUpdate: "valueUpdate", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-input": "this.wrapperClass", "class.k-dateinput": "this.wrapperClass", "class.k-disabled": "this.disabledClass" } }, providers: [
         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateInputComponent), multi: true },
         { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateInputComponent), multi: true },
         { provide: L10N_PREFIX, useValue: 'kendo.dateinput' },
@@ -1463,13 +882,8 @@ DateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
         [attr.aria-expanded]="isPopupOpen"
         [attr.aria-haspopup]="hasPopup"
         [kendoEventsOutsideAngular]="{
-            click: handleClick,
-            focus: handleFocus,
-            mousedown: handleMousedown,
-            touchstart: handleMousedown,
             dragstart: handleDragAndDrop,
-            drop: handleDragAndDrop,
-            blur: handleBlur
+            drop: handleDragAndDrop
         }"
         [scope]="this"
         />
@@ -1552,13 +966,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         [attr.aria-expanded]="isPopupOpen"
         [attr.aria-haspopup]="hasPopup"
         [kendoEventsOutsideAngular]="{
-            click: handleClick,
-            focus: handleFocus,
-            mousedown: handleMousedown,
-            touchstart: handleMousedown,
             dragstart: handleDragAndDrop,
-            drop: handleDragAndDrop,
-            blur: handleBlur
+            drop: handleDragAndDrop
         }"
         [scope]="this"
         />
@@ -1636,12 +1045,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], rangeValidation: [{
                 type: Input
-            }], autoCorrect: [{
+            }], autoCorrectParts: [{
+                type: Input
+            }], autoSwitchParts: [{
+                type: Input
+            }], autoSwitchKeys: [{
+                type: Input
+            }], allowCaretMode: [{
+                type: Input
+            }], autoFill: [{
                 type: Input
             }], incompleteDateValidation: [{
                 type: Input
             }], twoDigitYearMax: [{
                 type: Input
+            }], enableMouseWheel: [{
+                type: Input
             }], value: [{
                 type: Input
             }], spinners: [{