@progress/kendo-vue-dateinputs 8.0.3-develop.2 → 8.0.3-develop.3

package/dateinput/models/incremental-steps.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * The interface which defines all possible incremental steps in the DateInput.
+ */
+export interface DateInputIncrementalSteps {
+    year?: number;
+    month?: number;
+    day?: number;
+    hour?: number;
+    minute?: number;
+    second?: number;
+}

package/dateinput/models/kendo-date.d.ts

@@ -0,0 +1,60 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { DateInputFormatPlaceholder } from './format-placeholder';
+import { IntlService, DateFormatOptions } from '@progress/kendo-vue-intl';
+/**
+ * @hidden
+ */
+export interface DatePart {
+    value: Date | null;
+}
+/**
+ * @hidden
+ */
+export declare class KendoDate {
+    year: boolean;
+    month: boolean;
+    date: boolean;
+    hours: boolean;
+    minutes: boolean;
+    seconds: boolean;
+    milliseconds: boolean;
+    formatPlaceholder: DateInputFormatPlaceholder;
+    format: string | DateFormatOptions;
+    private leadingZero;
+    private monthNames;
+    private typedMonthPart;
+    private knownParts;
+    private symbols;
+    private intlProvider;
+    get intl(): IntlService;
+    private _value;
+    get value(): Date;
+    constructor(intlProvider: any, formatPlaceholder: DateInputFormatPlaceholder, format: string | DateFormatOptions);
+    setValue(value: Date | null): void;
+    hasValue(): boolean;
+    getDateObject(): Date | null;
+    getTextAndFormat(): {
+        text: string;
+        format: string;
+    };
+    modifyExisting(value: boolean): void;
+    getExisting(symbol: string): boolean;
+    setExisting(symbol: string, value: boolean): void;
+    modifyPart(symbol: string, offset: number): void;
+    parsePart(symbol: string, currentChar: string): DatePart;
+    symbolMap(symbol: string): string;
+    resetLeadingZero(): boolean;
+    private isAbbrMonth;
+    private partPattern;
+    private matchMonth;
+    private allFormatedMonths;
+    private dateFormatString;
+    private merge;
+    private dateFieldName;
+}

package/dateinput/models/main.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { DateInputFormatPlaceholder, DateInputCustomFormatPlaceholder } from './format-placeholder';
+import { DateInputIncrementalSteps } from './incremental-steps';
+import { DateInputSettings } from './DateInputSettings';
+import { DatePart, KendoDate } from './kendo-date';
+import { Mask } from './mask';
+import { Selection } from './selection';
+export { type DateInputFormatPlaceholder, type DateInputCustomFormatPlaceholder, type DateInputIncrementalSteps, type DateInputSettings, type DatePart, KendoDate, Mask, type Selection };

package/dateinput/models/mask.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * @hidden
+ */
+export declare class Mask {
+    symbols: string;
+    partMap: any[];
+}

package/dateinput/models/selection.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * @hidden
+ */
+export type Selection = {
+    start: number;
+    end: number;
+};

package/dateinput/utils.d.ts

@@ -0,0 +1,37 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * @hidden
+ */
+export declare const defaultFormat = "d";
+/**
+ * @hidden
+ */
+export declare const defaultFormatPlaceholder = "wide";
+/**
+ * @hidden
+ */
+export declare const padZero: (length: any) => string;
+/**
+ * @hidden
+ */
+export declare const approximateStringMatching: (oldTextOrigin: string, oldFormat: string, newTextOrigin: string, selectionStart: number) => any[];
+/**
+ * @hidden
+ */
+export declare const dateSymbolMap: (map: any, part: any) => Function;
+/**
+ * @hidden
+ */
+export declare const isInRange: (candidate: Date | null, min: Date, max: Date) => boolean;
+/**
+ * @hidden
+ */
+export declare const invalidClasses: string[];
+/** @hidden */
+export declare const wrapperClasses: string[];

package/datepicker/DatePicker.d.ts

@@ -0,0 +1,280 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { FormComponentValidity } from '@progress/kendo-vue-common';
+import { DateInputChangeEvent } from '../dateinput/interfaces/DateInputEventArguments';
+import { CalendarChangeEvent } from '../calendar/components/interfaces/CalendarEventArguments';
+import { DatePickerProps } from './interfaces/DatePickerProps';
+import { DatePickerChangeEvent, DatePickerOpenEvent, DatePickerCloseEvent } from './interfaces/DatePickerEventArguments';
+import { DatePickerFocusEvent, DatePickerBlurEvent } from './interfaces/DatePickerFocusBlurEvents';
+import { PropType } from 'vue';
+/**
+ * @hidden
+ */
+declare const DatePicker: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    defaultShow: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    modelValue: {
+        type: PropType<Date>;
+        default: any;
+    };
+    defaultValue: {
+        type: PropType<Date>;
+        default: any;
+    };
+    disabled: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    dateInput: {
+        type: PropType<any>;
+        default: () => any;
+    };
+    calendar: {
+        type: PropType<any>;
+        default: () => any;
+    };
+    toggleButton: {
+        type: PropType<any>;
+        default: () => any;
+    };
+    label: PropType<string>;
+    placeholder: PropType<string>;
+    popup: {
+        type: PropType<any>;
+        default: () => any;
+    };
+    rounded: {
+        type: PropType<string>;
+        validator: (value: string) => boolean;
+    };
+    fillMode: {
+        type: PropType<string>;
+        validator: (value: string) => boolean;
+    };
+    size: {
+        type: PropType<"small" | "medium" | "large">;
+        validator: (value: string) => boolean;
+    };
+    focusedDate: PropType<Date>;
+    format: {
+        type: PropType<string | import('@progress/kendo-vue-intl').DateFormatOptions>;
+        default: () => string | object;
+    };
+    formatPlaceholder: PropType<import('..').DateInputFormatPlaceholder>;
+    id: PropType<string>;
+    max: {
+        type: PropType<Date>;
+        default: () => Date;
+    };
+    min: {
+        type: PropType<Date>;
+        default: () => Date;
+    };
+    name: PropType<string>;
+    popupSettings: {
+        type: PropType<import('../PopupSettings').DateInputsPopupSettings>;
+        default: () => {};
+    };
+    show: {
+        type: PropType<boolean>;
+        default: any;
+    };
+    tabIndex: {
+        type: PropType<number>;
+        default: number;
+    };
+    title: {
+        type: PropType<string>;
+        default: () => "";
+    };
+    value: PropType<Date>;
+    weekNumber: PropType<boolean>;
+    width: PropType<string | number>;
+    validityStyles: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    validationMessage: PropType<string>;
+    required: PropType<boolean>;
+    validate: PropType<boolean>;
+    valid: {
+        type: PropType<boolean>;
+        default: any;
+    };
+    ariaLabel: PropType<string>;
+    inputAttributes: PropType<Object>;
+}>, {
+    listRef: import('vue').Ref<any, any>;
+    kendoAnchorRef: import('vue').Ref<any, any>;
+    kendoLocalizationService: {};
+}, {
+    isFocused: boolean;
+    currentValue: any;
+    currentShow: any;
+    valueDuringOnChange: any;
+    showDuringOnChange: any;
+    shouldFocusDateInput: boolean;
+}, {
+    computedValue(): Date | null;
+    computedShow(): boolean;
+}, {
+    focus(): void;
+    handleFocus(event: FocusEvent): void;
+    handleBlur(event: FocusEvent): void;
+    calendarBlur(event: FocusEvent): void;
+    calendarFocus(event: FocusEvent): void;
+    createBlurTimeout(): void;
+    validity(): FormComponentValidity;
+    nextValue(nextProps: DatePickerProps, nextState: any): any;
+    nextShow(nextProps: DatePickerProps, nextState: any): any;
+    setShow(show: boolean): void;
+    mergeTime(value: Date | null): Date | null;
+    handleInputValueChange(event: DateInputChangeEvent): void;
+    handleCalendarValueChange(event: CalendarChangeEvent): void;
+    getDateInputText(): any;
+    handleValueChange(value: Date | null, event: DateInputChangeEvent | CalendarChangeEvent): void;
+    handleIconClick(event: any): void;
+    handleIconMouseDown(event: any): void;
+    handleKeyDown(event: any): void;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    change: (event: DatePickerChangeEvent) => true;
+    changemodel: (value: Date | null) => true;
+    'update:modelValue': (value: Date | null) => true;
+    iconclick: (event: Event) => true;
+    focus: (event: DatePickerFocusEvent) => true;
+    blur: (event: DatePickerBlurEvent) => true;
+    keydown: (event: KeyboardEvent) => true;
+    open: (event: DatePickerOpenEvent) => true;
+    close: (event: DatePickerCloseEvent) => true;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    defaultShow: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    modelValue: {
+        type: PropType<Date>;
+        default: any;
+    };
+    defaultValue: {
+        type: PropType<Date>;
+        default: any;
+    };
+    disabled: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    dateInput: {
+        type: PropType<any>;
+        default: () => any;
+    };
+    calendar: {
+        type: PropType<any>;
+        default: () => any;
+    };
+    toggleButton: {
+        type: PropType<any>;
+        default: () => any;
+    };
+    label: PropType<string>;
+    placeholder: PropType<string>;
+    popup: {
+        type: PropType<any>;
+        default: () => any;
+    };
+    rounded: {
+        type: PropType<string>;
+        validator: (value: string) => boolean;
+    };
+    fillMode: {
+        type: PropType<string>;
+        validator: (value: string) => boolean;
+    };
+    size: {
+        type: PropType<"small" | "medium" | "large">;
+        validator: (value: string) => boolean;
+    };
+    focusedDate: PropType<Date>;
+    format: {
+        type: PropType<string | import('@progress/kendo-vue-intl').DateFormatOptions>;
+        default: () => string | object;
+    };
+    formatPlaceholder: PropType<import('..').DateInputFormatPlaceholder>;
+    id: PropType<string>;
+    max: {
+        type: PropType<Date>;
+        default: () => Date;
+    };
+    min: {
+        type: PropType<Date>;
+        default: () => Date;
+    };
+    name: PropType<string>;
+    popupSettings: {
+        type: PropType<import('../PopupSettings').DateInputsPopupSettings>;
+        default: () => {};
+    };
+    show: {
+        type: PropType<boolean>;
+        default: any;
+    };
+    tabIndex: {
+        type: PropType<number>;
+        default: number;
+    };
+    title: {
+        type: PropType<string>;
+        default: () => "";
+    };
+    value: PropType<Date>;
+    weekNumber: PropType<boolean>;
+    width: PropType<string | number>;
+    validityStyles: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    validationMessage: PropType<string>;
+    required: PropType<boolean>;
+    validate: PropType<boolean>;
+    valid: {
+        type: PropType<boolean>;
+        default: any;
+    };
+    ariaLabel: PropType<string>;
+    inputAttributes: PropType<Object>;
+}>> & Readonly<{
+    onBlur?: (event: DatePickerBlurEvent) => any;
+    onChange?: (event: DatePickerChangeEvent) => any;
+    onClose?: (event: DatePickerCloseEvent) => any;
+    onFocus?: (event: DatePickerFocusEvent) => any;
+    onKeydown?: (event: KeyboardEvent) => any;
+    onOpen?: (event: DatePickerOpenEvent) => any;
+    onChangemodel?: (value: Date) => any;
+    "onUpdate:modelValue"?: (value: Date) => any;
+    onIconclick?: (event: Event) => any;
+}>, {
+    title: string;
+    tabIndex: number;
+    calendar: any;
+    popup: any;
+    disabled: boolean;
+    format: string | object;
+    max: Date;
+    min: Date;
+    defaultValue: Date;
+    show: boolean;
+    popupSettings: import('../PopupSettings').DateInputsPopupSettings;
+    modelValue: Date;
+    validityStyles: boolean;
+    valid: boolean;
+    defaultShow: boolean;
+    dateInput: any;
+    toggleButton: any;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export { DatePicker };

package/datepicker/DatePicker.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("vue"),w=require("@progress/kendo-svg-icons"),J=require("@progress/kendo-vue-popup"),l=require("@progress/kendo-date-math"),t=require("@progress/kendo-vue-common"),Q=require("../package-metadata.js"),W=require("../dateinput/DateInput.js"),Y=require("../calendar/components/Calendar.js"),r=require("../utils.js"),o=require("../messages/main.js"),D=require("@progress/kendo-vue-intl"),Z=require("./ToggleButton.js"),ee=require("@progress/kendo-vue-labels");function b(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!a.isVNode(e)}const te=a.defineComponent({name:"DatePicker",inject:{kendoLocalizationService:{default:null}},model:{event:"changemodel"},emits:{change:e=>!0,changemodel:e=>!0,"update:modelValue":e=>!0,iconclick:e=>!0,focus:e=>!0,blur:e=>!0,keydown:e=>!0,open:e=>!0,close:e=>!0},props:{defaultShow:{type:Boolean,default:!1},modelValue:{type:Date,default:void 0},defaultValue:{type:Date,default:void 0},disabled:{type:Boolean,default:!1},dateInput:{type:[String,Object,Function],default:function(){}},calendar:{type:[String,Object,Function],default:function(){}},toggleButton:{type:[String,Object,Function],default:function(){}},label:String,placeholder:String,popup:{type:[String,Object,Function],default:function(){}},rounded:{type:String,validator:function(e){return["none","small","medium","large","full"].includes(e)}},fillMode:{type:String,validator:function(e){return["solid","flat","outline"].includes(e)}},size:{type:String,validator:function(e){return["small","medium","large"].includes(e)}},focusedDate:Date,format:{type:[Object,String],default:function(){return"d"}},formatPlaceholder:[Object,String],id:String,max:{type:Date,default:function(){return l.cloneDate(r.MAX_DATE)}},min:{type:Date,default:function(){return l.cloneDate(r.MIN_DATE)}},name:String,popupSettings:{type:Object,default:function(){return{}}},show:{type:Boolean,default:void 0},tabIndex:{type:Number,default:0},title:{type:String,default:function(){return""}},value:Date,weekNumber:Boolean,width:[Number,String],validityStyles:{type:Boolean,default:!0},validationMessage:String,required:Boolean,validate:Boolean,valid:{type:Boolean,default:void 0},ariaLabel:String,inputAttributes:Object},data:function(){return{isFocused:!1,currentValue:void 0,currentShow:void 0,valueDuringOnChange:void 0,showDuringOnChange:void 0,shouldFocusDateInput:!1}},created(){t.validatePackage(Q.packageMetadata),this._popupId=t.guid(),this._anchor=t.guid(),this._dateInput=null,this._calendar=null,this.$data.currentValue=this.$props.defaultValue,this.$data.currentShow=this.$props.defaultShow},mounted(){this._dateInput=t.getRef(this,"dateInput"),(this.$refs.calendar||this.calendarRef)&&(this._calendar=t.getRef(this,"calendar")),this.computedShow&&this.$forceUpdate()},updated(){(this.$refs.calendar||this.calendarRef)&&(this._calendar=t.getRef(this,"calendar")),this.computedShow?this._calendar&&this._calendar.$el&&!this._oldShow&&this._calendar.focus({preventScroll:!0}):this._dateInput&&this._dateInput.$el&&this.$data.shouldFocusDateInput&&this._dateInput.focus({preventScroll:!0}),this.$data.shouldFocusDateInput=!1},watch:{show:function(e,n){this._oldShow=n},currentShow:function(e,n){this._oldShow=n}},computed:{computedValue(){const e=this.$data.valueDuringOnChange!==void 0?this.$data.valueDuringOnChange:this.$props.value!==void 0?this.$props.value:this.$props.modelValue!==void 0?this.$props.modelValue:this.$data.currentValue;return e!==null?l.cloneDate(e):null},computedShow(){return this.$data.showDuringOnChange!==void 0?this.$data.showDuringOnChange:this.$props.show!==void 0?this.$props.show:this.$data.currentShow}},methods:{focus(){this._dateInput&&this._dateInput.focus()},handleFocus(e){this._oldShow=this.computedShow,this.$data.isFocused=!0,this.$emit("focus",{event:e})},handleBlur(e){this.$data.isFocused=!1,this.createBlurTimeout(),this.$emit("blur",{event:e})},calendarBlur(e){this.$emit("blur",{event:e}),clearTimeout(this._blurTimeout),this.createBlurTimeout()},calendarFocus(e){this.$emit("focus",{event:e}),clearTimeout(this._blurTimeout)},createBlurTimeout(){this._blurTimeout=setTimeout(()=>{this._dateInput&&t.canUseDOM&&document.activeElement!==this._dateInput._element&&this.setShow(!1)},200)},validity(){const e=this.computedValue,n=r.isInDateRange(e,this.$props.min,this.$props.max),i=this.$props.validationMessage!==void 0,s=(!this.$props.required||e!==null)&&n,h=this.$props.valid!==void 0?this.$props.valid:s;return{customError:i,rangeOverflow:e&&this.$props.max.getTime()<e.getTime()||!1,rangeUnderflow:e&&e.getTime()<this.$props.min.getTime()||!1,valid:h,valueMissing:e===null}},nextValue(e,n){return e.value!==void 0?e.value:n.value},nextShow(e,n){return e.show!==void 0?e.show:n.show},setShow(e){this.computedShow!==e&&(this.$data.currentShow=e,this.$emit(e?"open":"close",{component:this}))},mergeTime(e){return this.computedValue&&e?r.setTime(e,this.computedValue):e},handleInputValueChange(e){this.handleValueChange(e.value,e)},handleCalendarValueChange(e){const n=this.mergeTime(e.value);this.handleValueChange(n,e)},getDateInputText(){return this.computedValue?!0:this._dateInput?this._dateInput._element.value:""},handleValueChange(e,n){this.$data.currentValue=l.cloneDate(e||void 0),this.$data.valueDuringOnChange=e,this.$data.showDuringOnChange=!1,this.$data.shouldFocusDateInput=!0,this.$emit("changemodel",this.computedValue),this.$emit("update:modelValue",this.computedValue),this.$emit("change",{event:n.event,value:this.computedValue,show:this.computedShow,component:this,target:{name:this.$props.name,value:this.computedValue,valueAsDate:this.computedValue},validity:this.validity()}),this.$data.valueDuringOnChange=void 0,this.$data.showDuringOnChange=void 0,this.setShow(!1)},handleIconClick(e){e.stopPropagation(),e.preventDefault(),!this.$props.disabled&&(this.$data.shouldFocusDateInput=!0,this.$emit("iconclick",e),this.setShow(!this.computedShow))},handleIconMouseDown(e){e.stopPropagation(),e.preventDefault()},handleKeyDown(e){const{altKey:n,keyCode:i}=e;if(i===t.Keys.tab&&this._dateInput&&e.target!==this._dateInput._element){e.preventDefault(),this.$data.shouldFocusDateInput=!0,this.setShow(!1);return}if(i===t.Keys.esc){this.$data.shouldFocusDateInput=!0,this.setShow(!1);return}n&&(i===t.Keys.up||i===t.Keys.down)&&(e.preventDefault(),e.stopPropagation(),this.$data.shouldFocusDateInput=i===t.Keys.up,this.setShow(i===t.Keys.down)),this.$emit("keydown",e)}},setup(){const e=a.ref(null),n=a.ref(null),i=a.inject("kendoLocalizationService",{});return{listRef:e,kendoAnchorRef:n,kendoLocalizationService:i}},render(){t.getDefaultSlots(this);const{disabled:e,tabIndex:n,title:i,id:s,format:h,formatPlaceholder:I,min:m,max:$,weekNumber:y,focusedDate:k,width:V,name:_,validationMessage:C,required:T,validityStyles:R,size:c,fillMode:v,rounded:p,ariaLabel:B,inputAttributes:F}=this.$props,{popupClass:O,animate:M,appendTo:q}=this.$props.popupSettings,f=this.computedShow,g=this.computedValue,L=g&&l.getDate(g),S=!this.$props.validityStyles||this.validity().valid,N=t.classNames("k-calendar-container k-group k-reset",O),j=this.$props.toggleButton?t.templateRendering.call(this,this.$props.toggleButton,t.getListeners.call(this)):void 0,x=a.createVNode(Z.ToggleButton,{type:"button",tabIndex:-1,icon:"calendar",svgIcon:w.calendarIcon,onMousedown:this.handleIconMouseDown,onClick:this.handleIconClick,title:D.provideLocalizationService(this).toLanguageString(o.toggleCalendar,o.messages[o.toggleCalendar]),"aria-label":D.provideLocalizationService(this).toLanguageString(o.toggleCalendar,o.messages[o.toggleCalendar]),rounded:null,class:"k-input-button"},null),P=t.getTemplate.call(this,{h:a.h,template:j,defaultRendering:x,defaultSlots:a.createVNode(t.Icon,{name:"calendar",icon:w.calendarIcon},null),additionalListeners:{click:this.handleIconClick}}),z=this.$props.dateInput?t.templateRendering.call(this,this.$props.dateInput,t.getListeners.call(this)):void 0,K=a.createVNode(W.DateInput,{ref:t.setRef(this,"dateInput"),placeholder:this.$props.placeholder,disabled:e,format:h,formatPlaceholder:I,id:s,max:$,min:m,name:_,size:null,rounded:null,fillMode:null,onChange:this.handleInputValueChange,required:T,tabIndex:f?-1:n,title:i,valid:this.validity().valid,validationMessage:C,validityStyles:R,value:g,ariaHasPopup:"grid",ariaExpanded:f,ariaRole:"combobox",ariaControls:this._popupId,ariaLabel:B,inputAttributes:F},null),A=t.getTemplate.call(this,{h:a.h,template:z,defaultRendering:K}),E=this.$props.calendar?t.templateRendering.call(this,this.$props.calendar,t.getListeners.call(this)):void 0,U=a.createVNode(Y.Calendar,{ref:t.setRef(this,"calendar"),onKeydown:this.handleKeyDown,onFocus:this.calendarFocus,onBlur:this.calendarBlur,disabled:e,value:L,min:m,max:$,weekNumber:y,focusedDate:k,onChange:this.handleCalendarValueChange},null),u=t.getTemplate.call(this,{h:a.h,template:E,defaultRendering:U}),H=this.$props.popup?t.templateRendering.call(this,this.$props.popup,t.getListeners.call(this)):void 0,X=a.createVNode(J.Popup,{show:f,anchor:this._anchor,class:N,id:this._popupId,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"},animate:M,appendTo:q},b(u)?u:{default:()=>[u]}),G=t.getTemplate.call(this,{h:a.h,template:H,defaultRendering:X,defaultSlots:u}),d=a.createVNode("span",{ref:t.setRef(this,"kendoAnchor"),role:"group",class:t.classNames("k-input","k-datepicker",{[`k-input-${t.kendoThemeMaps.sizeMap[c]||c}`]:c,[`k-input-${v}`]:v,[`k-rounded-${t.kendoThemeMaps.roundedMap[p]||p}`]:p,"k-invalid":!S,"k-required":this.required,"k-disabled":this.$props.disabled,"k-focus":this.$data.isFocused}),onKeydown:this.handleKeyDown,onFocusin:this.handleFocus,onFocusout:this.handleBlur},[A,P,G]);return this.$props.label?a.createVNode(ee.FloatingLabel,{label:this.$props.label,editorId:s,editorValid:S,editorValue:this.getDateInputText(),editorPlaceholder:this.$props.placeholder,editorDisabled:this.$props.disabled,style:{width:V}},b(d)?d:{default:()=>[d]}):d}});exports.DatePicker=te;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("vue"),w=require("@progress/kendo-svg-icons"),J=require("@progress/kendo-vue-popup"),l=require("@progress/kendo-date-math"),t=require("@progress/kendo-vue-common"),Q=require("../package-metadata.js"),W=require("../dateinput/DateInput.js"),Y=require("../calendar/components/Calendar.js"),r=require("../utils.js"),o=require("../messages/main.js"),D=require("@progress/kendo-vue-intl"),Z=require("./ToggleButton.js"),ee=require("@progress/kendo-vue-labels");function b(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!a.isVNode(e)}const te=a.defineComponent({name:"DatePicker",inject:{kendoLocalizationService:{default:null}},model:{event:"changemodel"},emits:{change:e=>!0,changemodel:e=>!0,"update:modelValue":e=>!0,iconclick:e=>!0,focus:e=>!0,blur:e=>!0,keydown:e=>!0,open:e=>!0,close:e=>!0},props:{defaultShow:{type:Boolean,default:!1},modelValue:{type:Date,default:void 0},defaultValue:{type:Date,default:void 0},disabled:{type:Boolean,default:!1},dateInput:{type:[String,Object,Function],default:function(){}},calendar:{type:[String,Object,Function],default:function(){}},toggleButton:{type:[String,Object,Function],default:function(){}},label:String,placeholder:String,popup:{type:[String,Object,Function],default:function(){}},rounded:{type:String,validator:function(e){return["none","small","medium","large","full"].includes(e)}},fillMode:{type:String,validator:function(e){return["solid","flat","outline"].includes(e)}},size:{type:String,validator:function(e){return["small","medium","large"].includes(e)}},focusedDate:Date,format:{type:[Object,String],default:function(){return"d"}},formatPlaceholder:[Object,String],id:String,max:{type:Date,default:function(){return l.cloneDate(r.MAX_DATE)}},min:{type:Date,default:function(){return l.cloneDate(r.MIN_DATE)}},name:String,popupSettings:{type:Object,default:function(){return{}}},show:{type:Boolean,default:void 0},tabIndex:{type:Number,default:0},title:{type:String,default:function(){return""}},value:Date,weekNumber:Boolean,width:[Number,String],validityStyles:{type:Boolean,default:!0},validationMessage:String,required:Boolean,validate:Boolean,valid:{type:Boolean,default:void 0},ariaLabel:String,inputAttributes:Object},data:function(){return{isFocused:!1,currentValue:void 0,currentShow:void 0,valueDuringOnChange:void 0,showDuringOnChange:void 0,shouldFocusDateInput:!1}},created(){t.validatePackage(Q.packageMetadata),this._popupId=t.guid(),this._anchor=t.guid(),this._dateInput=null,this._calendar=null,this.$data.currentValue=this.$props.defaultValue,this.$data.currentShow=this.$props.defaultShow},mounted(){this._dateInput=t.getRef(this,"dateInput"),(this.$refs.calendar||this.calendarRef)&&(this._calendar=t.getRef(this,"calendar")),this.computedShow&&this.$forceUpdate()},updated(){(this.$refs.calendar||this.calendarRef)&&(this._calendar=t.getRef(this,"calendar")),this.computedShow?this._calendar&&this._calendar.$el&&!this._oldShow&&this._calendar.focus({preventScroll:!0}):this._dateInput&&this._dateInput.$el&&this.$data.shouldFocusDateInput&&this._dateInput.focus({preventScroll:!0}),this.$data.shouldFocusDateInput=!1},watch:{show:function(e,n){this._oldShow=n},currentShow:function(e,n){this._oldShow=n}},computed:{computedValue(){const e=this.$data.valueDuringOnChange!==void 0?this.$data.valueDuringOnChange:this.$props.value!==void 0?this.$props.value:this.$props.modelValue!==void 0?this.$props.modelValue:this.$data.currentValue;return e!==null?l.cloneDate(e):null},computedShow(){return this.$data.showDuringOnChange!==void 0?this.$data.showDuringOnChange:this.$props.show!==void 0?this.$props.show:this.$data.currentShow}},methods:{focus(){this._dateInput&&this._dateInput.focus()},handleFocus(e){this._oldShow=this.computedShow,this.$data.isFocused=!0,this.$emit("focus",{event:e})},handleBlur(e){this.$data.isFocused=!1,this.createBlurTimeout(),this.$emit("blur",{event:e})},calendarBlur(e){this.$emit("blur",{event:e}),clearTimeout(this._blurTimeout),this.createBlurTimeout()},calendarFocus(e){this.$emit("focus",{event:e}),clearTimeout(this._blurTimeout)},createBlurTimeout(){this._blurTimeout=setTimeout(()=>{this._dateInput&&t.canUseDOM&&document.activeElement!==this._dateInput._element&&this.setShow(!1)},200)},validity(){const e=this.computedValue,n=r.isInDateRange(e,this.$props.min,this.$props.max),i=this.$props.validationMessage!==void 0,s=(!this.$props.required||e!==null)&&n,h=this.$props.valid!==void 0?this.$props.valid:s;return{customError:i,rangeOverflow:e&&this.$props.max.getTime()<e.getTime()||!1,rangeUnderflow:e&&e.getTime()<this.$props.min.getTime()||!1,valid:h,valueMissing:e===null}},nextValue(e,n){return e.value!==void 0?e.value:n.value},nextShow(e,n){return e.show!==void 0?e.show:n.show},setShow(e){this.computedShow!==e&&(this.$data.currentShow=e,this.$emit(e?"open":"close",{component:this}))},mergeTime(e){return this.computedValue&&e?r.setTime(e,this.computedValue):e},handleInputValueChange(e){this.handleValueChange(e.value,e)},handleCalendarValueChange(e){const n=this.mergeTime(e.value);this.handleValueChange(n,e)},getDateInputText(){return this.computedValue?!0:this._dateInput?this._dateInput._element.value:""},handleValueChange(e,n){this.$data.currentValue=l.cloneDate(e||void 0),this.$data.valueDuringOnChange=e,this.$data.showDuringOnChange=!1,this.$data.shouldFocusDateInput=!0,this.$emit("changemodel",this.computedValue),this.$emit("update:modelValue",this.computedValue),this.$emit("change",{event:n.event,value:this.computedValue,show:this.computedShow,component:this,target:{name:this.$props.name,value:this.computedValue,valueAsDate:this.computedValue},validity:this.validity()}),this.$data.valueDuringOnChange=void 0,this.$data.showDuringOnChange=void 0,this.setShow(!1)},handleIconClick(e){e.stopPropagation(),e.preventDefault(),!this.$props.disabled&&(this.$data.shouldFocusDateInput=!0,this.$emit("iconclick",e),this.setShow(!this.computedShow))},handleIconMouseDown(e){e.stopPropagation(),e.preventDefault()},handleKeyDown(e){const{altKey:n,keyCode:i}=e;if(i===t.Keys.tab&&this._dateInput&&e.target!==this._dateInput._element){e.preventDefault(),this.$data.shouldFocusDateInput=!0,this.setShow(!1);return}if(i===t.Keys.esc){this.$data.shouldFocusDateInput=!0,this.setShow(!1);return}n&&(i===t.Keys.up||i===t.Keys.down)&&(e.preventDefault(),e.stopPropagation(),this.$data.shouldFocusDateInput=i===t.Keys.up,this.setShow(i===t.Keys.down)),this.$emit("keydown",e)}},setup(){const e=a.ref(null),n=a.ref(null),i=a.inject("kendoLocalizationService",{});return{listRef:e,kendoAnchorRef:n,kendoLocalizationService:i}},render(){t.getDefaultSlots(this);const{disabled:e,tabIndex:n,title:i,id:s,format:h,formatPlaceholder:I,min:m,max:$,weekNumber:y,focusedDate:k,width:V,name:_,validationMessage:C,required:T,validityStyles:R,size:c,fillMode:v,rounded:p,ariaLabel:B,inputAttributes:F}=this.$props,{popupClass:O,animate:M,appendTo:q}=this.$props.popupSettings,f=this.computedShow,g=this.computedValue,L=g&&l.getDate(g),S=!this.$props.validityStyles||this.validity().valid,N=t.classNames("k-calendar-container k-group k-reset",O),j=this.$props.toggleButton?t.templateRendering.call(this,this.$props.toggleButton,t.getListeners.call(this)):void 0,x=a.createVNode(Z.ToggleButton,{type:"button",tabIndex:-1,icon:"calendar",svgIcon:w.calendarIcon,onMousedown:this.handleIconMouseDown,onClick:this.handleIconClick,title:D.provideLocalizationService(this).toLanguageString(o.toggleCalendar,o.messages[o.toggleCalendar]),"aria-label":D.provideLocalizationService(this).toLanguageString(o.toggleCalendar,o.messages[o.toggleCalendar]),rounded:null,disabled:e,class:"k-input-button"},null),P=t.getTemplate.call(this,{h:a.h,template:j,defaultRendering:x,defaultSlots:a.createVNode(t.Icon,{name:"calendar",icon:w.calendarIcon},null),additionalListeners:{click:this.handleIconClick}}),z=this.$props.dateInput?t.templateRendering.call(this,this.$props.dateInput,t.getListeners.call(this)):void 0,K=a.createVNode(W.DateInput,{ref:t.setRef(this,"dateInput"),placeholder:this.$props.placeholder,disabled:e,format:h,formatPlaceholder:I,id:s,max:$,min:m,name:_,size:null,rounded:null,fillMode:null,onChange:this.handleInputValueChange,required:T,tabIndex:f?-1:n,title:i,valid:this.validity().valid,validationMessage:C,validityStyles:R,value:g,ariaHasPopup:"grid",ariaExpanded:f,ariaRole:"combobox",ariaControls:this._popupId,ariaLabel:B,inputAttributes:F},null),A=t.getTemplate.call(this,{h:a.h,template:z,defaultRendering:K}),E=this.$props.calendar?t.templateRendering.call(this,this.$props.calendar,t.getListeners.call(this)):void 0,U=a.createVNode(Y.Calendar,{ref:t.setRef(this,"calendar"),onKeydown:this.handleKeyDown,onFocus:this.calendarFocus,onBlur:this.calendarBlur,disabled:e,value:L,min:m,max:$,weekNumber:y,focusedDate:k,onChange:this.handleCalendarValueChange},null),u=t.getTemplate.call(this,{h:a.h,template:E,defaultRendering:U}),H=this.$props.popup?t.templateRendering.call(this,this.$props.popup,t.getListeners.call(this)):void 0,X=a.createVNode(J.Popup,{show:f,anchor:this._anchor,class:N,id:this._popupId,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"},animate:M,appendTo:q},b(u)?u:{default:()=>[u]}),G=t.getTemplate.call(this,{h:a.h,template:H,defaultRendering:X,defaultSlots:u}),d=a.createVNode("span",{ref:t.setRef(this,"kendoAnchor"),role:"group",class:t.classNames("k-input","k-datepicker",{[`k-input-${t.kendoThemeMaps.sizeMap[c]||c}`]:c,[`k-input-${v}`]:v,[`k-rounded-${t.kendoThemeMaps.roundedMap[p]||p}`]:p,"k-invalid":!S,"k-required":this.required,"k-disabled":this.$props.disabled,"k-focus":this.$data.isFocused}),onKeydown:this.handleKeyDown,onFocusin:this.handleFocus,onFocusout:this.handleBlur},[A,P,G]);return this.$props.label?a.createVNode(ee.FloatingLabel,{label:this.$props.label,editorId:s,editorValid:S,editorValue:this.getDateInputText(),editorPlaceholder:this.$props.placeholder,editorDisabled:this.$props.disabled,style:{width:V}},b(d)?d:{default:()=>[d]}):d}});exports.DatePicker=te;

package/datepicker/DatePicker.mjs

@@ -16,8 +16,8 @@ import { Calendar as ge } from "../calendar/components/Calendar.mjs";
 import { setTime as $e, isInDateRange as ve, MIN_DATE as Se, MAX_DATE as we } from "../utils.mjs";
 import { toggleCalendar as c, messages as F } from "../messages/main.mjs";
 import { provideLocalizationService as B } from "@progress/kendo-vue-intl";
-import { ToggleButton as De } from "./ToggleButton.mjs";
-import { FloatingLabel as be } from "@progress/kendo-vue-labels";
+import { ToggleButton as be } from "./ToggleButton.mjs";
+import { FloatingLabel as De } from "@progress/kendo-vue-labels";
 function O(e) {
   return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !ue(e);
 }
@@ -314,8 +314,8 @@ const je = /* @__PURE__ */ oe({
       id: o,
       format: f,
       formatPlaceholder: R,
-      min: D,
-      max: b,
+      min: b,
+      max: D,
       weekNumber: M,
       focusedDate: x,
       width: j,
@@ -332,7 +332,7 @@ const je = /* @__PURE__ */ oe({
       popupClass: q,
       animate: E,
       appendTo: U
-    } = this.$props.popupSettings, $ = this.computedShow, v = this.computedValue, H = v && de(v), y = !this.$props.validityStyles || this.validity().valid, X = V("k-calendar-container k-group k-reset", q), G = this.$props.toggleButton ? r.call(this, this.$props.toggleButton, h.call(this)) : void 0, J = n(De, {
+    } = this.$props.popupSettings, $ = this.computedShow, v = this.computedValue, H = v && de(v), y = !this.$props.validityStyles || this.validity().valid, X = V("k-calendar-container k-group k-reset", q), G = this.$props.toggleButton ? r.call(this, this.$props.toggleButton, h.call(this)) : void 0, J = n(be, {
       type: "button",
       tabIndex: -1,
       icon: "calendar",
@@ -342,6 +342,7 @@ const je = /* @__PURE__ */ oe({
       title: B(this).toLanguageString(c, F[c]),
       "aria-label": B(this).toLanguageString(c, F[c]),
       rounded: null,
+      disabled: e,
       class: "k-input-button"
     }, null), Q = p.call(this, {
       h: s,
@@ -361,8 +362,8 @@ const je = /* @__PURE__ */ oe({
       format: f,
       formatPlaceholder: R,
       id: o,
-      max: b,
-      min: D,
+      max: D,
+      min: b,
       name: L,
       size: null,
       rounded: null,
@@ -392,8 +393,8 @@ const je = /* @__PURE__ */ oe({
       onBlur: this.calendarBlur,
       disabled: e,
       value: H,
-      min: D,
-      max: b,
+      min: b,
+      max: D,
       weekNumber: M,
       focusedDate: x,
       onChange: this.handleCalendarValueChange
@@ -439,7 +440,7 @@ const je = /* @__PURE__ */ oe({
       onFocusin: this.handleFocus,
       onFocusout: this.handleBlur
     }, [Z, Q, ie]);
-    return this.$props.label ? n(be, {
+    return this.$props.label ? n(De, {
       label: this.$props.label,
       editorId: o,
       editorValid: y,