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

package/datetimepicker/DateTimePicker.d.ts

@@ -0,0 +1,380 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { FormComponentProps, FormComponentValidity } from '@progress/kendo-vue-common';
+import { DateTimePickerSettings } from './models/main';
+import { DateTimeSelectorChangeEvent } from './DateTimeSelector';
+import { DateInputChangeEvent } from '..';
+import { DateInputFormatPlaceholder } from '../dateinput/models/main';
+import { PropType } from 'vue';
+import { DateTimePickerFocusEvent, DateTimePickerBlurEvent } from './interfaces/DateTimePickerFocusBlurEvents';
+/**
+ * The arguments for the `onChange` event of the DateTimePicker.
+ */
+export interface DateTimePickerChangeEvent {
+    event: any;
+    value: Date | null;
+    show: boolean;
+    target: any;
+}
+/**
+ * The arguments for the `open` event of the DateTimePicker.
+ */
+export interface DateTimePickerOpenEvent {
+    component: any;
+}
+/**
+ * The arguments for the `close` event of the DateTimePicker.
+ */
+export interface DateTimePickerCloseEvent {
+    component: any;
+}
+/**
+ * Represents the props of the [Kendo UI for Vue DateTimePicker component]({% slug overview_datetimepicker %}).
+ */
+export interface DateTimePickerProps extends DateTimePickerSettings, FormComponentProps {
+    /**
+     * @hidden
+     */
+    modelValue?: Date;
+    /**
+     * Sets the default value of the DateTimePicker.
+     */
+    defaultValue?: Date;
+    /**
+     * Fires each time the user selects a new value
+     */
+    onChange?: (event: DateTimePickerChangeEvent) => void;
+    /**
+     * Specifies the value of the DateTimePicker
+     * ([see example]({% slug controlled_datetimepicker %}#toc-controlling-the-date-value)).
+     *
+     * > The `value` has to be a valid
+     * [JavaScript `Date`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date) instance.
+     */
+    value?: Date | null;
+}
+/**
+ * @hidden
+ */
+export interface DateTimePickerComputed {
+    [key: string]: any;
+    computedValue: Date | null;
+    computedShow: boolean;
+}
+/**
+ * @hidden
+ */
+declare const DateTimePicker: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    modelValue: {
+        type: PropType<Date>;
+        default: any;
+    };
+    defaultShow: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    defaultValue: {
+        type: PropType<Date>;
+        default: any;
+    };
+    disabled: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    dateInput: {
+        type: PropType<any>;
+        default: () => any;
+    };
+    popup: {
+        type: PropType<any>;
+        default: () => any;
+    };
+    calendar: {
+        type: PropType<any>;
+        default: () => any;
+    };
+    focusedDate: PropType<Date>;
+    format: {
+        type: PropType<string | import('@progress/kendo-vue-intl').DateFormatOptions>;
+        default: () => string | object;
+    };
+    formatPlaceholder: {
+        type: PropType<DateInputFormatPlaceholder>;
+        default: () => DateInputFormatPlaceholder;
+    };
+    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;
+    };
+    id: PropType<string>;
+    ariaLabelledBy: PropType<string>;
+    ariaDescribedBy: PropType<string>;
+    min: {
+        type: PropType<Date>;
+        default: () => Date;
+    };
+    max: {
+        type: PropType<Date>;
+        default: () => Date;
+    };
+    maxTime: {
+        type: PropType<Date>;
+        default: () => Date;
+    };
+    minTime: {
+        type: PropType<Date>;
+        default: () => Date;
+    };
+    name: PropType<string>;
+    label: PropType<string>;
+    placeholder: PropType<string>;
+    popupSettings: {
+        type: PropType<object>;
+        default: () => {};
+    };
+    show: {
+        type: PropType<boolean>;
+        default: any;
+    };
+    tabIndex: {
+        type: PropType<number>;
+        default: number;
+    };
+    title: {
+        type: PropType<string>;
+        default: () => "";
+    };
+    steps: {
+        type: PropType<import('../timepicker/models/IncrementalSteps').TimePickerIncrementalSteps>;
+        default: () => {};
+    };
+    value: PropType<Date>;
+    weekNumber: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    width: PropType<string | number>;
+    validationMessage: PropType<string>;
+    required: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    validityStyles: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    validate: PropType<boolean>;
+    valid: {
+        type: PropType<boolean>;
+        default: any;
+    };
+    cancelButton: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    inputAttributes: PropType<Object>;
+}>, {
+    kendoAnchorRef: import('vue').Ref<any, any>;
+    kendoLocalizationService: {};
+}, {
+    currentValue: any;
+    currentShow: boolean;
+    valueDuringOnChange: any;
+    showDuringOnChange: any;
+    shouldFocusDateInput: boolean;
+    isFocused: boolean;
+}, {
+    computedValue(): DateTimePickerComputed['computedValue'];
+    computedShow(): DateTimePickerComputed['computedShow'];
+}, {
+    validity(): FormComponentValidity;
+    getDateInputText(): any;
+    focus(): void;
+    setShow(show: boolean): void;
+    handleReject(): void;
+    handleValueChange(event: DateInputChangeEvent | DateTimeSelectorChangeEvent): void;
+    handleFocus(event: FocusEvent): void;
+    handleBlur(event: FocusEvent): void;
+    timeSelectorBlur(event: FocusEvent): void;
+    timeSelectorFocus(): void;
+    createBlurTimeout(): void;
+    handleDateIconClick(event: any): void;
+    handleIconMouseDown(event: any): void;
+    handleKeyDown(event: any): void;
+    dateInputElement(): any;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    changemodel: (value: Date | null) => true;
+    'update:modelValue': (value: Date | null) => true;
+    iconclick: (event: Event) => true;
+    change: (event: DateTimePickerChangeEvent) => true;
+    focus: (event: DateTimePickerFocusEvent) => true;
+    blur: (event: DateTimePickerBlurEvent) => true;
+    keydown: (event: KeyboardEvent) => true;
+    open: (event: DateTimePickerOpenEvent) => true;
+    close: (event: DateTimePickerCloseEvent) => true;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    modelValue: {
+        type: PropType<Date>;
+        default: any;
+    };
+    defaultShow: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    defaultValue: {
+        type: PropType<Date>;
+        default: any;
+    };
+    disabled: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    dateInput: {
+        type: PropType<any>;
+        default: () => any;
+    };
+    popup: {
+        type: PropType<any>;
+        default: () => any;
+    };
+    calendar: {
+        type: PropType<any>;
+        default: () => any;
+    };
+    focusedDate: PropType<Date>;
+    format: {
+        type: PropType<string | import('@progress/kendo-vue-intl').DateFormatOptions>;
+        default: () => string | object;
+    };
+    formatPlaceholder: {
+        type: PropType<DateInputFormatPlaceholder>;
+        default: () => DateInputFormatPlaceholder;
+    };
+    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;
+    };
+    id: PropType<string>;
+    ariaLabelledBy: PropType<string>;
+    ariaDescribedBy: PropType<string>;
+    min: {
+        type: PropType<Date>;
+        default: () => Date;
+    };
+    max: {
+        type: PropType<Date>;
+        default: () => Date;
+    };
+    maxTime: {
+        type: PropType<Date>;
+        default: () => Date;
+    };
+    minTime: {
+        type: PropType<Date>;
+        default: () => Date;
+    };
+    name: PropType<string>;
+    label: PropType<string>;
+    placeholder: PropType<string>;
+    popupSettings: {
+        type: PropType<object>;
+        default: () => {};
+    };
+    show: {
+        type: PropType<boolean>;
+        default: any;
+    };
+    tabIndex: {
+        type: PropType<number>;
+        default: number;
+    };
+    title: {
+        type: PropType<string>;
+        default: () => "";
+    };
+    steps: {
+        type: PropType<import('../timepicker/models/IncrementalSteps').TimePickerIncrementalSteps>;
+        default: () => {};
+    };
+    value: PropType<Date>;
+    weekNumber: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    width: PropType<string | number>;
+    validationMessage: PropType<string>;
+    required: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    validityStyles: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    validate: PropType<boolean>;
+    valid: {
+        type: PropType<boolean>;
+        default: any;
+    };
+    cancelButton: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    inputAttributes: PropType<Object>;
+}>> & Readonly<{
+    onBlur?: (event: DateTimePickerBlurEvent) => any;
+    onChange?: (event: DateTimePickerChangeEvent) => any;
+    onClose?: (event: DateTimePickerCloseEvent) => any;
+    onFocus?: (event: DateTimePickerFocusEvent) => any;
+    onKeydown?: (event: KeyboardEvent) => any;
+    onOpen?: (event: DateTimePickerOpenEvent) => any;
+    onChangemodel?: (value: Date) => any;
+    "onUpdate:modelValue"?: (value: Date) => any;
+    onIconclick?: (event: Event) => any;
+}>, {
+    required: boolean;
+    title: string;
+    tabIndex: number;
+    calendar: any;
+    popup: any;
+    disabled: boolean;
+    weekNumber: boolean;
+    format: string | object;
+    max: Date;
+    min: Date;
+    defaultValue: Date;
+    show: boolean;
+    popupSettings: object;
+    modelValue: Date;
+    steps: import('../timepicker/models/IncrementalSteps').TimePickerIncrementalSteps;
+    maxTime: Date;
+    minTime: Date;
+    validityStyles: boolean;
+    valid: boolean;
+    formatPlaceholder: DateInputFormatPlaceholder;
+    defaultShow: boolean;
+    dateInput: any;
+    cancelButton: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export { DateTimePicker };

package/datetimepicker/DateTimePicker.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 n=require("vue"),G=require("@progress/kendo-vue-labels"),J=require("@progress/kendo-vue-buttons"),Q=require("@progress/kendo-vue-popup"),r=require("@progress/kendo-date-math"),t=require("@progress/kendo-vue-common"),W=require("../dateinput/DateInput.js"),Y=require("../package-metadata.js"),u=require("../utils.js"),o=require("../messages/main.js"),T=require("@progress/kendo-vue-intl"),Z=require("./DateTimeSelector.js"),ee=require("../timepicker/utils.js"),b=require("../defaults.js"),te=require("../dateinput/utils.js"),ie=require("@progress/kendo-svg-icons");function m(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!n.isVNode(e)}const ne=n.defineComponent({name:"KendoDateTimePicker",emits:{changemodel:e=>!0,"update:modelValue":e=>!0,iconclick:e=>!0,change:e=>!0,focus:e=>!0,blur:e=>!0,keydown:e=>!0,open:e=>!0,close:e=>!0},props:{modelValue:{type:Date,default:void 0},defaultShow:{type:Boolean,default:!1},defaultValue:{type:Date,default:null},disabled:{type:Boolean,default:!1},dateInput:{type:[String,Object,Function],default:function(){}},popup:{type:[String,Object,Function],default:function(){}},calendar:{type:[String,Object,Function],default:function(){}},focusedDate:Date,format:{type:[String,Object],default:function(){return"g"}},formatPlaceholder:{type:[String,Object],default:function(){return te.defaultFormatPlaceholder}},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["none","small","medium","large"].includes(e)}},id:String,ariaLabelledBy:String,ariaDescribedBy:String,min:{type:Date,default:function(){return u.MIN_DATE}},max:{type:Date,default:function(){return u.MAX_DATE}},maxTime:{type:Date,default:function(){return r.cloneDate(u.MAX_TIME)}},minTime:{type:Date,default:function(){return r.cloneDate(b.MIN_TIME)}},name:String,label:String,placeholder:String,popupSettings:{type:Object,default:function(){return{}}},show:{type:Boolean,default:void 0},tabIndex:{type:Number,default:0},title:{type:String,default:function(){return""}},steps:{type:Object,default:function(){return{}}},value:Date,weekNumber:{type:Boolean,default:!1},width:String,validationMessage:String,required:{type:Boolean,default:!1},validityStyles:{type:Boolean,default:!0},validate:Boolean,valid:{type:Boolean,default:void 0},cancelButton:{type:Boolean,default:!0},inputAttributes:Object},model:{event:"changemodel"},created(){this._anchor=t.guid(),this._popupId="popup"+t.guid(),this._wrapper=null,this._dateInput=null,this._dateTimeSelector=null,t.validatePackage(Y.packageMetadata),this.currentValue=this.$props.defaultValue,this.currentShow=this.$props.defaultShow},inject:{kendoLocalizationService:{default:null}},data(){return{currentValue:null,currentShow:!1,valueDuringOnChange:void 0,showDuringOnChange:void 0,shouldFocusDateInput:!1,isFocused:!1}},computed:{computedValue(){const e=this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.$props.value!==void 0?this.$props.value:this.$props.modelValue!==void 0?this.$props.modelValue:this.$data.currentValue;return e!==null?r.cloneDate(e):null},computedShow(){return this.showDuringOnChange!==void 0?this.showDuringOnChange:this.$props.show!==void 0?this.$props.show:this.currentShow}},watch:{show:function(e,i){this._oldShow=i},currentShow:function(e,i){this._oldShow=i}},mounted(){this.computedShow&&this.$forceUpdate();const e=this.dateInputElement();this._dateTimeSelector=this.$refs.dateTimeSelector,this._wrapper=this.kendoAnchorRef,this._dateInput=this.dateInputRef,e&&e.setAttribute("aria-haspopup","true")},updated(){const e=this.dateInputElement();this._dateTimeSelector=this.$refs.dateTimeSelector,this._wrapper=this.kendoAnchorRef,this._dateTimeSelector&&this.computedShow&&!this._oldShow&&this._dateTimeSelector.focus({preventScroll:!0}),e&&!this.computedShow&&this.shouldFocusDateInput&&this._dateInput.focus({preventScroll:!0}),this.shouldFocusDateInput=!1},setup(){const e=n.ref(null),i=n.inject("kendoLocalizationService",{});return{kendoAnchorRef:e,kendoLocalizationService:i}},render(){const e=t.getDefaultSlots(this),{disabled:i,tabIndex:a,title:d,id:f,format:g,formatPlaceholder:$,min:k,max:V,weekNumber:_,focusedDate:M,width:S,name:B,steps:v,placeholder:C,validationMessage:q,required:F,validityStyles:O,cancelButton:R,minTime:D,maxTime:w,ariaLabelledBy:ae,ariaDescribedBy:oe,size:p,fillMode:I,rounded:c,inputAttributes:x}=this.$props,{popupClass:E,appendTo:A,animate:j}=this.$props.popupSettings,y=!this.$props.validityStyles||this.validity().valid,N=this.$props.dateInput?t.templateRendering.call(this,this.$props.dateInput,t.getListeners.call(this)):void 0,P=n.createVNode(W.DateInput,{ref:h=>{this.dateInputRef=h},placeholder:C,disabled:i,format:g,formatPlaceholder:$,id:f,max:V,min:k,minTime:D,maxTime:w,name:B,size:null,rounded:null,fillMode:null,onChange:this.handleValueChange,required:F,steps:v,tabIndex:this.computedShow?-1:a,title:d,valid:this.validity().valid,validationMessage:q,validityStyles:O,value:this.computedValue,ariaHasPopup:"dialog",ariaExpanded:this.computedShow,ariaRole:"combobox",ariaControls:this._popupId,inputAttributes:x},m(e)?e:{default:()=>[e]}),L=t.getTemplate.call(this,{h:n.h,template:N,defaultRendering:P}),K=this.$props.calendar?t.templateRendering.call(this,this.$props.calendar,t.getListeners.call(this)):void 0,s=n.createVNode(Z.DateTimeSelector,{ref:"dateTimeSelector",cancelButton:R,value:this.computedValue,onChange:this.handleValueChange,onReject:this.handleReject,disabled:i,weekNumber:_,min:this.$props.min,max:this.$props.max,minTime:D,maxTime:w,focusedDate:M,format:g,calendar:K,steps:v,onFocus:this.timeSelectorFocus,onBlur:this.timeSelectorBlur,onKeydown:this.handleKeyDown},null),z=t.classNames("k-datetime-container k-reset",E),U=this.$props.popup?t.templateRendering.call(this,this.$props.popup,t.getListeners.call(this)):void 0,X=n.createVNode(Q.Popup,{show:this.computedShow,anchor:this._anchor,popupClass:z,id:this._popupId,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"},appendTo:A,animate:j},m(s)?s:{default:()=>[s]}),H=t.getTemplate.call(this,{h:n.h,template:U,defaultRendering:X,defaultSlots:s}),l=n.createVNode("div",{class:t.classNames("k-input","k-datetimepicker",{[`k-input-${t.kendoThemeMaps.sizeMap[p]||p}`]:p,[`k-input-${I}`]:I,[`k-rounded-${t.kendoThemeMaps.roundedMap[c]||c}`]:c,"k-invalid":!y,"k-required":this.required,"k-disabled":this.$props.disabled}),ref:h=>{this.kendoAnchorRef=h},onKeydown:this.handleKeyDown,style:{width:S},onFocusin:this.handleFocus,onFocusout:this.handleBlur},[L,n.createVNode(J.Button,{type:"button",tabIndex:-1,icon:"calendar",svgIcon:ie.calendarIcon,onMousedown:this.handleIconMouseDown,onClick:this.handleDateIconClick,title:T.provideLocalizationService(this).toLanguageString(o.toggleDateTimeSelector,o.messages[o.toggleDateTimeSelector]),rounded:null,class:"k-input-button","aria-controls":this._popupId,"aria-label":T.provideLocalizationService(this).toLanguageString(o.toggleDateTimeSelector,o.messages[o.toggleDateTimeSelector])},null),H]);return this.$props.label?n.createVNode(G.FloatingLabel,{label:this.$props.label,editorId:f,editorValid:y,editorValue:this.getDateInputText(),editorPlaceholder:this.$props.placeholder,editorDisabled:this.$props.disabled,style:{width:S}},m(l)?l:{default:()=>[l]}):l},methods:{validity(){const e=u.isInDateRange(this.computedValue,this.$props.min,this.$props.max)&&ee.isInTimeRange(this.computedValue,this.$props.minTime||b.MIN_TIME,this.$props.maxTime||u.MAX_TIME),i=this.$props.validationMessage!==void 0,a=(!this.$props.required||this.computedValue!==null)&&e,d=this.$props.valid!==void 0?this.$props.valid:a;return{customError:i,rangeOverflow:this.computedValue&&this.$props.max.getTime()<this.computedValue.getTime()||!1,rangeUnderflow:this.computedValue&&this.computedValue.getTime()<this.$props.min.getTime()||!1,valid:d,valueMissing:this.computedValue===null}},getDateInputText(){return this.computedValue?!0:this._dateInput?this._dateInput._element.value:""},focus(){const e=this.dateInputElement();e&&e.focus()},setShow(e){this.computedShow!==e&&(this.currentShow=e,this.$emit(e?"open":"close",{component:this}))},handleReject(){this.setShow(!1)},handleValueChange(e){this.currentValue=r.cloneDate(e.value||void 0),this.valueDuringOnChange=e.value,this.showDuringOnChange=!1,this.shouldFocusDateInput=!0,this.$emit("changemodel",this.computedValue),this.$emit("update:modelValue",this.computedValue),this.$emit("change",{event:e.event,value:this.computedValue,show:this.computedShow,component:this,target:{name:this.$props.name,value:this.computedValue,valueAsDate:this.computedValue}}),this.valueDuringOnChange=void 0,this.showDuringOnChange=void 0,this.setShow(!1)},handleFocus(e){this.isFocused=!0,this.$emit("focus",{event:e})},handleBlur(e){this.createBlurTimeout(),this.$emit("blur",{event:e})},timeSelectorBlur(e){this.$emit("blur",{event:e}),clearTimeout(this._blurTimeout),this.createBlurTimeout()},timeSelectorFocus(){clearTimeout(this._blurTimeout)},createBlurTimeout(){this._blurTimeout=setTimeout(()=>{this.isFocused=!1;const e=document.activeElement&&document.activeElement.closest(`#${this._popupId}`);this._dateInput&&t.canUseDOM&&document.activeElement!==this._dateInput.element()&&!e&&this.setShow(!1)},200)},handleDateIconClick(e){this.$props.disabled||(this.shouldFocusDateInput=!0,this.setShow(!this.computedShow),this.$emit("iconclick",e))},handleIconMouseDown(e){e.preventDefault()},handleKeyDown(e){const{altKey:i,keyCode:a}=e;if(a===t.Keys.tab&&this._dateInput&&e.target!==this._dateInput._element){e.preventDefault(),this.$data.shouldFocusDateInput=!0,this.setShow(!1);return}if(a===t.Keys.esc){this.shouldFocusDateInput=!0,this.setShow(!1);return}i&&(a===t.Keys.up||a===t.Keys.down)&&(e.preventDefault(),e.stopPropagation(),this.shouldFocusDateInput=a===t.Keys.up,this.setShow(a===t.Keys.down)),this.$emit("keydown",e)},dateInputElement(){return this._dateInput&&this._dateInput.$el||this._wrapper&&this._wrapper.querySelector(".k-dateinput-wrap > input.k-input")}}});exports.DateTimePicker=ne;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue"),G=require("@progress/kendo-vue-labels"),J=require("@progress/kendo-vue-buttons"),Q=require("@progress/kendo-vue-popup"),r=require("@progress/kendo-date-math"),t=require("@progress/kendo-vue-common"),W=require("../dateinput/DateInput.js"),Y=require("../package-metadata.js"),u=require("../utils.js"),o=require("../messages/main.js"),b=require("@progress/kendo-vue-intl"),Z=require("./DateTimeSelector.js"),ee=require("../timepicker/utils.js"),T=require("../defaults.js"),te=require("../dateinput/utils.js"),ie=require("@progress/kendo-svg-icons");function m(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!n.isVNode(e)}const ne=n.defineComponent({name:"KendoDateTimePicker",emits:{changemodel:e=>!0,"update:modelValue":e=>!0,iconclick:e=>!0,change:e=>!0,focus:e=>!0,blur:e=>!0,keydown:e=>!0,open:e=>!0,close:e=>!0},props:{modelValue:{type:Date,default:void 0},defaultShow:{type:Boolean,default:!1},defaultValue:{type:Date,default:null},disabled:{type:Boolean,default:!1},dateInput:{type:[String,Object,Function],default:function(){}},popup:{type:[String,Object,Function],default:function(){}},calendar:{type:[String,Object,Function],default:function(){}},focusedDate:Date,format:{type:[String,Object],default:function(){return"g"}},formatPlaceholder:{type:[String,Object],default:function(){return te.defaultFormatPlaceholder}},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["none","small","medium","large"].includes(e)}},id:String,ariaLabelledBy:String,ariaDescribedBy:String,min:{type:Date,default:function(){return u.MIN_DATE}},max:{type:Date,default:function(){return u.MAX_DATE}},maxTime:{type:Date,default:function(){return r.cloneDate(u.MAX_TIME)}},minTime:{type:Date,default:function(){return r.cloneDate(T.MIN_TIME)}},name:String,label:String,placeholder:String,popupSettings:{type:Object,default:function(){return{}}},show:{type:Boolean,default:void 0},tabIndex:{type:Number,default:0},title:{type:String,default:function(){return""}},steps:{type:Object,default:function(){return{}}},value:Date,weekNumber:{type:Boolean,default:!1},width:String,validationMessage:String,required:{type:Boolean,default:!1},validityStyles:{type:Boolean,default:!0},validate:Boolean,valid:{type:Boolean,default:void 0},cancelButton:{type:Boolean,default:!0},inputAttributes:Object},model:{event:"changemodel"},created(){this._anchor=t.guid(),this._popupId="popup"+t.guid(),this._wrapper=null,this._dateInput=null,this._dateTimeSelector=null,t.validatePackage(Y.packageMetadata),this.currentValue=this.$props.defaultValue,this.currentShow=this.$props.defaultShow},inject:{kendoLocalizationService:{default:null}},data(){return{currentValue:null,currentShow:!1,valueDuringOnChange:void 0,showDuringOnChange:void 0,shouldFocusDateInput:!1,isFocused:!1}},computed:{computedValue(){const e=this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.$props.value!==void 0?this.$props.value:this.$props.modelValue!==void 0?this.$props.modelValue:this.$data.currentValue;return e!==null?r.cloneDate(e):null},computedShow(){return this.showDuringOnChange!==void 0?this.showDuringOnChange:this.$props.show!==void 0?this.$props.show:this.currentShow}},watch:{show:function(e,i){this._oldShow=i},currentShow:function(e,i){this._oldShow=i}},mounted(){this.computedShow&&this.$forceUpdate();const e=this.dateInputElement();this._dateTimeSelector=this.$refs.dateTimeSelector,this._wrapper=this.kendoAnchorRef,this._dateInput=this.dateInputRef,e&&e.setAttribute("aria-haspopup","true")},updated(){const e=this.dateInputElement();this._dateTimeSelector=this.$refs.dateTimeSelector,this._wrapper=this.kendoAnchorRef,this._dateTimeSelector&&this.computedShow&&!this._oldShow&&this._dateTimeSelector.focus({preventScroll:!0}),e&&!this.computedShow&&this.shouldFocusDateInput&&this._dateInput.focus({preventScroll:!0}),this.shouldFocusDateInput=!1},setup(){const e=n.ref(null),i=n.inject("kendoLocalizationService",{});return{kendoAnchorRef:e,kendoLocalizationService:i}},render(){const e=t.getDefaultSlots(this),{disabled:i,tabIndex:a,title:d,id:f,format:g,formatPlaceholder:$,min:k,max:V,weekNumber:_,focusedDate:M,width:S,name:B,steps:v,placeholder:C,validationMessage:q,required:F,validityStyles:O,cancelButton:R,minTime:D,maxTime:w,ariaLabelledBy:ae,ariaDescribedBy:oe,size:p,fillMode:I,rounded:c,inputAttributes:x}=this.$props,{popupClass:E,appendTo:A,animate:j}=this.$props.popupSettings,y=!this.$props.validityStyles||this.validity().valid,N=this.$props.dateInput?t.templateRendering.call(this,this.$props.dateInput,t.getListeners.call(this)):void 0,P=n.createVNode(W.DateInput,{ref:h=>{this.dateInputRef=h},placeholder:C,disabled:i,format:g,formatPlaceholder:$,id:f,max:V,min:k,minTime:D,maxTime:w,name:B,size:null,rounded:null,fillMode:null,onChange:this.handleValueChange,required:F,steps:v,tabIndex:this.computedShow?-1:a,title:d,valid:this.validity().valid,validationMessage:q,validityStyles:O,value:this.computedValue,ariaHasPopup:"dialog",ariaExpanded:this.computedShow,ariaRole:"combobox",ariaControls:this._popupId,inputAttributes:x},m(e)?e:{default:()=>[e]}),L=t.getTemplate.call(this,{h:n.h,template:N,defaultRendering:P}),K=this.$props.calendar?t.templateRendering.call(this,this.$props.calendar,t.getListeners.call(this)):void 0,s=n.createVNode(Z.DateTimeSelector,{ref:"dateTimeSelector",cancelButton:R,value:this.computedValue,onChange:this.handleValueChange,onReject:this.handleReject,disabled:i,weekNumber:_,min:this.$props.min,max:this.$props.max,minTime:D,maxTime:w,focusedDate:M,format:g,calendar:K,steps:v,onFocus:this.timeSelectorFocus,onBlur:this.timeSelectorBlur,onKeydown:this.handleKeyDown},null),z=t.classNames("k-datetime-container k-reset",E),U=this.$props.popup?t.templateRendering.call(this,this.$props.popup,t.getListeners.call(this)):void 0,X=n.createVNode(Q.Popup,{show:this.computedShow,anchor:this._anchor,popupClass:z,id:this._popupId,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"},appendTo:A,animate:j},m(s)?s:{default:()=>[s]}),H=t.getTemplate.call(this,{h:n.h,template:U,defaultRendering:X,defaultSlots:s}),l=n.createVNode("div",{class:t.classNames("k-input","k-datetimepicker",{[`k-input-${t.kendoThemeMaps.sizeMap[p]||p}`]:p,[`k-input-${I}`]:I,[`k-rounded-${t.kendoThemeMaps.roundedMap[c]||c}`]:c,"k-invalid":!y,"k-required":this.required,"k-disabled":this.$props.disabled}),ref:h=>{this.kendoAnchorRef=h},onKeydown:this.handleKeyDown,style:{width:S},onFocusin:this.handleFocus,onFocusout:this.handleBlur},[L,n.createVNode(J.Button,{type:"button",tabIndex:-1,icon:"calendar",svgIcon:ie.calendarIcon,onMousedown:this.handleIconMouseDown,onClick:this.handleDateIconClick,title:b.provideLocalizationService(this).toLanguageString(o.toggleDateTimeSelector,o.messages[o.toggleDateTimeSelector]),rounded:null,disabled:i,class:"k-input-button","aria-controls":this._popupId,"aria-label":b.provideLocalizationService(this).toLanguageString(o.toggleDateTimeSelector,o.messages[o.toggleDateTimeSelector])},null),H]);return this.$props.label?n.createVNode(G.FloatingLabel,{label:this.$props.label,editorId:f,editorValid:y,editorValue:this.getDateInputText(),editorPlaceholder:this.$props.placeholder,editorDisabled:this.$props.disabled,style:{width:S}},m(l)?l:{default:()=>[l]}):l},methods:{validity(){const e=u.isInDateRange(this.computedValue,this.$props.min,this.$props.max)&&ee.isInTimeRange(this.computedValue,this.$props.minTime||T.MIN_TIME,this.$props.maxTime||u.MAX_TIME),i=this.$props.validationMessage!==void 0,a=(!this.$props.required||this.computedValue!==null)&&e,d=this.$props.valid!==void 0?this.$props.valid:a;return{customError:i,rangeOverflow:this.computedValue&&this.$props.max.getTime()<this.computedValue.getTime()||!1,rangeUnderflow:this.computedValue&&this.computedValue.getTime()<this.$props.min.getTime()||!1,valid:d,valueMissing:this.computedValue===null}},getDateInputText(){return this.computedValue?!0:this._dateInput?this._dateInput._element.value:""},focus(){const e=this.dateInputElement();e&&e.focus()},setShow(e){this.computedShow!==e&&(this.currentShow=e,this.$emit(e?"open":"close",{component:this}))},handleReject(){this.setShow(!1)},handleValueChange(e){this.currentValue=r.cloneDate(e.value||void 0),this.valueDuringOnChange=e.value,this.showDuringOnChange=!1,this.shouldFocusDateInput=!0,this.$emit("changemodel",this.computedValue),this.$emit("update:modelValue",this.computedValue),this.$emit("change",{event:e.event,value:this.computedValue,show:this.computedShow,component:this,target:{name:this.$props.name,value:this.computedValue,valueAsDate:this.computedValue}}),this.valueDuringOnChange=void 0,this.showDuringOnChange=void 0,this.setShow(!1)},handleFocus(e){this.isFocused=!0,this.$emit("focus",{event:e})},handleBlur(e){this.createBlurTimeout(),this.$emit("blur",{event:e})},timeSelectorBlur(e){this.$emit("blur",{event:e}),clearTimeout(this._blurTimeout),this.createBlurTimeout()},timeSelectorFocus(){clearTimeout(this._blurTimeout)},createBlurTimeout(){this._blurTimeout=setTimeout(()=>{this.isFocused=!1;const e=document.activeElement&&document.activeElement.closest(`#${this._popupId}`);this._dateInput&&t.canUseDOM&&document.activeElement!==this._dateInput.element()&&!e&&this.setShow(!1)},200)},handleDateIconClick(e){this.$props.disabled||(this.shouldFocusDateInput=!0,this.setShow(!this.computedShow),this.$emit("iconclick",e))},handleIconMouseDown(e){e.preventDefault()},handleKeyDown(e){const{altKey:i,keyCode:a}=e;if(a===t.Keys.tab&&this._dateInput&&e.target!==this._dateInput._element){e.preventDefault(),this.$data.shouldFocusDateInput=!0,this.setShow(!1);return}if(a===t.Keys.esc){this.shouldFocusDateInput=!0,this.setShow(!1);return}i&&(a===t.Keys.up||a===t.Keys.down)&&(e.preventDefault(),e.stopPropagation(),this.shouldFocusDateInput=a===t.Keys.up,this.setShow(a===t.Keys.down)),this.$emit("keydown",e)},dateInputElement(){return this._dateInput&&this._dateInput.$el||this._wrapper&&this._wrapper.querySelector(".k-dateinput-wrap > input.k-input")}}});exports.DateTimePicker=ne;

package/datetimepicker/DateTimePicker.mjs

@@ -5,12 +5,12 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as ie, createVNode as n, h as b, ref as ne, inject as oe, isVNode as ae } from "vue";
+import { defineComponent as ie, createVNode as n, h as $, ref as ne, inject as ae, isVNode as oe } from "vue";
 import { FloatingLabel as ue } from "@progress/kendo-vue-labels";
 import { Button as se } from "@progress/kendo-vue-buttons";
 import { Popup as le } from "@progress/kendo-vue-popup";
 import { cloneDate as s } from "@progress/kendo-date-math";
-import { Keys as o, canUseDOM as re, getDefaultSlots as de, templateRendering as c, getListeners as m, getTemplate as T, classNames as _, kendoThemeMaps as k, guid as V, validatePackage as pe } from "@progress/kendo-vue-common";
+import { Keys as a, canUseDOM as re, getDefaultSlots as de, templateRendering as c, getListeners as m, getTemplate as T, classNames as _, kendoThemeMaps as k, guid as V, validatePackage as pe } from "@progress/kendo-vue-common";
 import { DateInput as he } from "../dateinput/DateInput.mjs";
 import { packageMetadata as ce } from "../package-metadata.mjs";
 import { isInDateRange as me, MAX_TIME as B, MAX_DATE as fe, MIN_DATE as ge } from "../utils.mjs";
@@ -22,7 +22,7 @@ import { MIN_TIME as M } from "../defaults.mjs";
 import { defaultFormatPlaceholder as we } from "../dateinput/utils.mjs";
 import { calendarIcon as Ie } from "@progress/kendo-svg-icons";
 function f(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !ae(e);
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !oe(e);
 }
 const Pe = /* @__PURE__ */ ie({
   name: "KendoDateTimePicker",
@@ -234,7 +234,7 @@ const Pe = /* @__PURE__ */ ie({
     }), this.shouldFocusDateInput = !1;
   },
   setup() {
-    const e = ne(null), t = oe("kendoLocalizationService", {});
+    const e = ne(null), t = ae("kendoLocalizationService", {});
     return {
       kendoAnchorRef: e,
       kendoLocalizationService: t
@@ -272,7 +272,7 @@ const Pe = /* @__PURE__ */ ie({
       popupClass: U,
       appendTo: X,
       animate: H
-    } = this.$props.popupSettings, $ = !this.$props.validityStyles || this.validity().valid, G = this.$props.dateInput ? c.call(this, this.$props.dateInput, m.call(this)) : void 0, J = n(he, {
+    } = this.$props.popupSettings, b = !this.$props.validityStyles || this.validity().valid, G = this.$props.dateInput ? c.call(this, this.$props.dateInput, m.call(this)) : void 0, J = n(he, {
       ref: (h) => {
         this.dateInputRef = h;
       },
@@ -306,10 +306,10 @@ const Pe = /* @__PURE__ */ ie({
     }, f(e) ? e : {
       default: () => [e]
     }), Q = T.call(this, {
-      h: b,
+      h: $,
       template: G,
       defaultRendering: J
-    }), W = this.$props.calendar ? c.call(this, this.$props.calendar, m.call(this)) : void 0, a = n(Se, {
+    }), W = this.$props.calendar ? c.call(this, this.$props.calendar, m.call(this)) : void 0, o = n(Se, {
       ref: "dateTimeSelector",
       cancelButton: K,
       value: this.computedValue,
@@ -343,19 +343,19 @@ const Pe = /* @__PURE__ */ ie({
       },
       appendTo: X,
       animate: H
-    }, f(a) ? a : {
-      default: () => [a]
+    }, f(o) ? o : {
+      default: () => [o]
     }), te = T.call(this, {
-      h: b,
+      h: $,
       template: Z,
       defaultRendering: ee,
-      defaultSlots: a
+      defaultSlots: o
     }), u = n("div", {
       class: _("k-input", "k-datetimepicker", {
         [`k-input-${k.sizeMap[d] || d}`]: d,
         [`k-input-${y}`]: y,
         [`k-rounded-${k.roundedMap[p] || p}`]: p,
-        "k-invalid": !$,
+        "k-invalid": !b,
         "k-required": this.required,
         "k-disabled": this.$props.disabled
       }),
@@ -377,6 +377,7 @@ const Pe = /* @__PURE__ */ ie({
       onClick: this.handleDateIconClick,
       title: F(this).toLanguageString(l, C[l]),
       rounded: null,
+      disabled: t,
       class: "k-input-button",
       "aria-controls": this._popupId,
       "aria-label": F(this).toLanguageString(l, C[l])
@@ -384,7 +385,7 @@ const Pe = /* @__PURE__ */ ie({
     return this.$props.label ? n(ue, {
       label: this.$props.label,
       editorId: g,
-      editorValid: $,
+      editorValid: b,
       editorValue: this.getDateInputText(),
       editorPlaceholder: this.$props.placeholder,
       editorDisabled: this.$props.disabled,
@@ -470,15 +471,15 @@ const Pe = /* @__PURE__ */ ie({
         altKey: t,
         keyCode: i
       } = e;
-      if (i === o.tab && this._dateInput && e.target !== this._dateInput._element) {
+      if (i === a.tab && this._dateInput && e.target !== this._dateInput._element) {
         e.preventDefault(), this.$data.shouldFocusDateInput = !0, this.setShow(!1);
         return;
       }
-      if (i === o.esc) {
+      if (i === a.esc) {
         this.shouldFocusDateInput = !0, this.setShow(!1);
         return;
       }
-      t && (i === o.up || i === o.down) && (e.preventDefault(), e.stopPropagation(), this.shouldFocusDateInput = i === o.up, this.setShow(i === o.down)), this.$emit("keydown", e);
+      t && (i === a.up || i === a.down) && (e.preventDefault(), e.stopPropagation(), this.shouldFocusDateInput = i === a.up, this.setShow(i === a.down)), this.$emit("keydown", e);
     },
     dateInputElement() {
       return this._dateInput && this._dateInput.$el || this._wrapper && this._wrapper.querySelector(".k-dateinput-wrap > input.k-input");