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

package/timepicker/TimePicker.d.ts

@@ -0,0 +1,369 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { PopupProps } from '@progress/kendo-vue-popup';
+import { FormComponentProps, FormComponentValidity } from '@progress/kendo-vue-common';
+import { DateInputChangeEvent } from '../dateinput/interfaces/DateInputEventArguments';
+import { TimeSelectorChangeEvent } from './TimeSelector';
+import { TimePickerSettings } from './models/main';
+import { DateInputFormatPlaceholder } from '../dateinput/models/main';
+import { PropType } from 'vue';
+import { TimePickerFocusEvent, TimePickerBlurEvent } from './interfaces/TimePickerFocusBlurEvents';
+/**
+ * The arguments for the `onChange` event of the TimePicker.
+ */
+export interface TimePickerChangeEvent {
+    event?: any;
+    value: Date | null;
+    show: boolean;
+    target: any;
+}
+/**
+ * The arguments for the `open` event of the TimePicker.
+ */
+export interface TimePickerOpenEvent {
+    component: any;
+}
+/**
+ * The arguments for the `close` event of the TimePicker.
+ */
+export interface TimePickerCloseEvent {
+    component: any;
+}
+/**
+ * Represents the props of the [Kendo UI for Vue TimePicker component]({% slug overview_timepicker %}).
+ */
+export interface TimePickerProps extends TimePickerSettings, FormComponentProps {
+    /**
+     * @hidden
+     */
+    modelValue?: Date;
+    /**
+     * Sets the default value of the TimePicker ([see example]({% slug default_value_timepicker %}#toc-setting-the-default-value)).
+     */
+    defaultValue?: Date;
+    /**
+     * Fires each time the user selects a new value ([see example]({% slug controlled_timepicker %}#toc-controlling-the-date-value)).
+     */
+    onChange?: (event: TimePickerChangeEvent) => void;
+    /**
+     * Specifies the value of the TimePicker ([see example]({% slug controlled_timepicker %}#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 TimePickerComputed {
+    [key: string]: any;
+    timeSelector: any;
+    computedValue: Date | null;
+    computedShow: boolean;
+}
+/**
+ * @hidden
+ */
+declare const TimePicker: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    cancelButton: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    nowButton: {
+        type: PropType<boolean>;
+        default: any;
+    };
+    defaultShow: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    modelValue: {
+        type: PropType<Date>;
+        default: any;
+    };
+    defaultValue: {
+        type: PropType<Date>;
+        default: () => any;
+    };
+    dateInput: {
+        type: PropType<any>;
+        default: () => any;
+    };
+    popup: {
+        type: PropType<any>;
+        default: () => any;
+    };
+    disabled: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    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;
+    };
+    name: PropType<string>;
+    label: PropType<string>;
+    placeholder: PropType<string>;
+    popupSettings: {
+        type: PropType<PopupProps>;
+        default: () => {};
+    };
+    show: {
+        type: PropType<boolean>;
+        default: any;
+    };
+    tabIndex: {
+        type: PropType<number>;
+        default: number;
+    };
+    steps: {
+        type: PropType<import('./models/IncrementalSteps').TimePickerIncrementalSteps>;
+        default: () => {};
+    };
+    smoothScroll: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    title: {
+        type: PropType<string>;
+        default: () => "";
+    };
+    value: {
+        type: PropType<Date>;
+        default: () => any;
+    };
+    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;
+    };
+    inputAttributes: PropType<Object>;
+}>, {
+    kendoAnchorRef: import('vue').Ref<any, any>;
+    kendoLocalizationService: {};
+}, {
+    currentValue: any;
+    currentShow: boolean;
+    valueDuringOnChange: any;
+    showDuringOnChange: any;
+    isFocused: boolean;
+}, {
+    timeSelector(): any;
+    computedValue(): Date | null;
+    computedShow(): boolean;
+}, {
+    validity(): FormComponentValidity;
+    getDateInputText(): any;
+    focus(): void;
+    normalizeTime(date: Date): Date;
+    setShow(show: boolean): void;
+    mergeTime(value: Date | null): Date | null;
+    handleInputValueChange(event: DateInputChangeEvent): void;
+    handleValueChange(event: DateInputChangeEvent | TimeSelectorChangeEvent): void;
+    handleFocus(event: FocusEvent): void;
+    handleBlur(event: FocusEvent): void;
+    timeBlur(event: FocusEvent): void;
+    timeFocus(): void;
+    createBlurTimeout(): void;
+    handleValueReject(_: any): void;
+    handleIconClick(event: any): void;
+    handleIconMouseDown(event: any): void;
+    handleKeyDown(event: any): void;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    changemodel: (value: Date | null) => true;
+    'update:modelValue': (value: Date | null) => true;
+    iconclick: (event: Event) => true;
+    change: (event: TimePickerChangeEvent) => true;
+    focus: (event: TimePickerFocusEvent) => true;
+    blur: (event: TimePickerBlurEvent) => true;
+    keydown: (event: KeyboardEvent) => true;
+    open: (event: TimePickerOpenEvent) => true;
+    close: (event: TimePickerCloseEvent) => true;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    cancelButton: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    nowButton: {
+        type: PropType<boolean>;
+        default: any;
+    };
+    defaultShow: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    modelValue: {
+        type: PropType<Date>;
+        default: any;
+    };
+    defaultValue: {
+        type: PropType<Date>;
+        default: () => any;
+    };
+    dateInput: {
+        type: PropType<any>;
+        default: () => any;
+    };
+    popup: {
+        type: PropType<any>;
+        default: () => any;
+    };
+    disabled: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    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;
+    };
+    name: PropType<string>;
+    label: PropType<string>;
+    placeholder: PropType<string>;
+    popupSettings: {
+        type: PropType<PopupProps>;
+        default: () => {};
+    };
+    show: {
+        type: PropType<boolean>;
+        default: any;
+    };
+    tabIndex: {
+        type: PropType<number>;
+        default: number;
+    };
+    steps: {
+        type: PropType<import('./models/IncrementalSteps').TimePickerIncrementalSteps>;
+        default: () => {};
+    };
+    smoothScroll: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    title: {
+        type: PropType<string>;
+        default: () => "";
+    };
+    value: {
+        type: PropType<Date>;
+        default: () => any;
+    };
+    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;
+    };
+    inputAttributes: PropType<Object>;
+}>> & Readonly<{
+    onBlur?: (event: TimePickerBlurEvent) => any;
+    onChange?: (event: TimePickerChangeEvent) => any;
+    onClose?: (event: TimePickerCloseEvent) => any;
+    onFocus?: (event: TimePickerFocusEvent) => any;
+    onKeydown?: (event: KeyboardEvent) => any;
+    onOpen?: (event: TimePickerOpenEvent) => any;
+    onChangemodel?: (value: Date) => any;
+    "onUpdate:modelValue"?: (value: Date) => any;
+    onIconclick?: (event: Event) => any;
+}>, {
+    required: boolean;
+    value: Date;
+    title: string;
+    tabIndex: number;
+    popup: any;
+    disabled: boolean;
+    format: string | object;
+    max: Date;
+    min: Date;
+    defaultValue: Date;
+    show: boolean;
+    popupSettings: PopupProps;
+    modelValue: Date;
+    steps: import('./models/IncrementalSteps').TimePickerIncrementalSteps;
+    validityStyles: boolean;
+    valid: boolean;
+    formatPlaceholder: DateInputFormatPlaceholder;
+    defaultShow: boolean;
+    dateInput: any;
+    smoothScroll: boolean;
+    cancelButton: boolean;
+    nowButton: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export { TimePicker };

package/timepicker/TimePicker.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"),U=require("@progress/kendo-vue-labels"),H=require("@progress/kendo-vue-popup"),k=require("@progress/kendo-date-math"),t=require("@progress/kendo-vue-common"),G=require("@progress/kendo-vue-intl"),X=require("@progress/kendo-vue-buttons"),s=require("../messages/main.js"),J=require("../dateinput/DateInput.js"),Q=require("./TimeSelector.js"),u=require("../utils.js"),S=require("./utils.js"),W=require("../dateinput/utils.js"),Y=require("@progress/kendo-svg-icons");function v(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!n.isVNode(e)}const Z=n.defineComponent({name:"KendoTimePicker",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},model:{event:"changemodel"},props:{cancelButton:{type:Boolean,default:!0},nowButton:{type:Boolean,default:void 0},defaultShow:{type:Boolean,default:!1},modelValue:{type:Date,default:void 0},defaultValue:{type:Date,default:function(){return null}},dateInput:{type:[String,Object,Function],default:function(){}},popup:{type:[String,Object,Function],default:function(){}},disabled:{type:Boolean,default:!1},format:{type:[String,Object],default:function(){return"t"}},formatPlaceholder:{type:[String,Object],default:function(){return W.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_TIME}},max:{type:Date,default:function(){return u.MAX_TIME}},name:String,label:String,placeholder:String,popupSettings:{type:Object,default:function(){return{}}},show:{type:Boolean,default:void 0},tabIndex:{type:Number,default:0},steps:{type:Object,default:function(){return{}}},smoothScroll:{type:Boolean,default:!0},title:{type:String,default:function(){return""}},value:{type:Date,default:function(){}},width:[Number,String],validationMessage:String,required:{type:Boolean,default:!1},validityStyles:{type:Boolean,default:!0},validate:Boolean,valid:{type:Boolean,default:void 0},inputAttributes:Object},created(){this._anchor=t.guid(),this._popupId="popup"+t.guid(),this._element=null,this._wrapper=null,this._dateInput=null,this._timeSelector=null,this.shouldFocusDateInput=!1,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,isFocused:!1}},computed:{timeSelector(){return this._timeSelector},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?k.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(),this._dateInput=this.dateInputRef,this._timeSelector=this.$refs.timeSelector,this._wrapper=this.kendoAnchorRef,this._dateInput&&this._dateInput.element()&&this._dateInput.element().setAttribute("aria-haspopup","true")},updated(){this._dateInput=this.dateInputRef,this._timeSelector=this.$refs.timeSelector,this._wrapper=this.kendoAnchorRef,this._timeSelector&&this.computedShow&&!this._oldShow?this._timeSelector.focusActiveList():this._dateInput&&this._dateInput.element()&&!this.computedShow&&this.shouldFocusDateInput&&this._dateInput.element().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:o,title:h,id:a,placeholder:c,format:l,formatPlaceholder:V,smoothScroll:$,width:w,name:_,steps:I,cancelButton:D,nowButton:T,validationMessage:B,required:C,validityStyles:M,ariaLabelledBy:ee,ariaDescribedBy:te,size:p,rounded:m,fillMode:y,inputAttributes:F}=this.$props,{popupClass:O,appendTo:R,animate:q}=this.$props.popupSettings,f=!this.$props.validityStyles||this.validity().valid;t.classNames("k-picker-wrap",{"k-invalid":!f,"k-disabled":i,"k-focus":this.isFocused});const z=t.classNames("k-group k-reset",O),b=G.provideLocalizationService(this),j=b.toLanguageString(s.toggleClock,s.messages[s.toggleClock]),x=b.toLanguageString(s.toggleTimeSelector,s.messages[s.toggleTimeSelector]),A=this.$props.dateInput?t.templateRendering.call(this,this.$props.dateInput,t.getListeners.call(this)):void 0,N=n.createVNode(J.DateInput,{ref:g=>{this.dateInputRef=g},placeholder:c,disabled:i,format:l,formatPlaceholder:V,id:a,size:null,rounded:null,fillMode:null,max:this.normalizeTime(this.$props.max),min:this.normalizeTime(this.$props.min),name:_,onChange:this.handleInputValueChange,required:C,steps:I,tabIndex:this.computedShow?-1:o,title:h,valid:this.validity().valid,validationMessage:B,validityStyles:M,value:this.computedValue&&this.normalizeTime(this.computedValue),ariaHasPopup:"grid",ariaExpanded:this.computedShow,ariaRole:"combobox",ariaControls:this._popupId,inputAttributes:F},v(e)?e:{default:()=>[e]}),r=n.createVNode(Q.TimeSelector,{ref:"timeSelector",cancelButton:D,disabled:i,nowButton:T,format:l,min:this.$props.min,max:this.$props.max,steps:I,smoothScroll:$,value:this.computedValue,onChange:this.handleValueChange,onReject:this.handleValueReject,onFocus:this.timeFocus,onBlur:this.timeBlur,onKeydown:this.handleKeyDown},null),P=t.getTemplate.call(this,{h:n.h,template:A,defaultRendering:N,additionalListeners:{change:this.handleInputValueChange}}),L=this.$props.popup?t.templateRendering.call(this,this.$props.popup,t.getListeners.call(this)):void 0,K=n.createVNode(H.Popup,{show:this.computedShow,anchor:this._anchor,class:z,id:this._popupId,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"},appendTo:R,animate:q},v(r)?r:{default:()=>[r]}),E=t.getTemplate.call(this,{h:n.h,template:L,defaultRendering:K,defaultSlots:r}),d=n.createVNode("div",{class:t.classNames("k-input","k-timepicker",{[`k-input-${t.kendoThemeMaps.sizeMap[p]||p}`]:p,[`k-input-${y}`]:y,[`k-rounded-${t.kendoThemeMaps.roundedMap[m]||m}`]:m,"k-invalid":!f,"k-required":this.required,"k-disabled":this.$props.disabled,"k-focus":this.isFocused}),onKeydown:this.handleKeyDown,style:{width:w},onFocusin:this.handleFocus,onFocusout:this.handleBlur,ref:g=>{this.kendoAnchorRef=g}},[P,n.createVNode(X.Button,{type:"button",tabIndex:-1,icon:"clock",svgIcon:Y.clockIcon,onMousedown:this.handleIconMouseDown,onClick:this.handleIconClick,title:x,rounded:null,class:"k-input-button","aria-controls":this._popupId,"aria-label":j},null),E]);return this.$props.label?n.createVNode(U.FloatingLabel,{label:this.$props.label,editorId:a,editorValid:f,editorValue:this.getDateInputText(),editorPlaceholder:this.$props.placeholder,editorDisabled:this.$props.disabled,style:{width:w}},v(d)?d:{default:()=>[d]}):d},methods:{validity(){const e=this.computedValue&&this.normalizeTime(this.computedValue),i=this.normalizeTime(this.$props.min),o=this.normalizeTime(this.$props.max),h=S.isInRange(e,i,o),a=this.$props.validationMessage!==void 0,c=(!this.$props.required||this.computedValue!==null)&&h,l=this.$props.valid!==void 0?this.$props.valid:c;return{customError:a,rangeOverflow:S.isBiggerThanMax(e,o),rangeUnderflow:S.isSmallerThanMin(e,i),valid:l,valueMissing:this.computedValue===null}},getDateInputText(){return this.computedValue?!0:this._dateInput?this._dateInput._element.value:""},focus(){this._dateInput&&this._dateInput.focus()},normalizeTime(e){return u.setTime(u.MIDNIGHT_DATE,e)},setShow(e){this.computedShow!==e&&(this.currentShow=e,this.$emit(e?"open":"close",{component:this}))},mergeTime(e){return this.computedValue&&e?u.setTime(this.computedValue,e):e},handleInputValueChange(e){const i=this.mergeTime(e.value);this.handleValueChange({...e,value:i})},handleValueChange(e){this.currentValue=k.cloneDate(e.value),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._oldShow=this.computedShow,this.isFocused=!0,this.$emit("focus",{event:e})},handleBlur(e){this.createBlurTimeout(),this.$emit("blur",{event:e})},timeBlur(e){this.$emit("blur",{event:e}),clearTimeout(this._blurTimeout),this.createBlurTimeout()},timeFocus(){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)},handleValueReject(e){this.setShow(!1)},handleIconClick(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:o}=e;if(o===t.Keys.tab&&this._dateInput&&e.target!==this._dateInput._element){e.preventDefault(),this.shouldFocusDateInput=!0,this.setShow(!1);return}if(o===t.Keys.esc){this.shouldFocusDateInput=!0,this.setShow(!1);return}i&&(o===t.Keys.up||o===t.Keys.down)&&(e.preventDefault(),e.stopPropagation(),this.shouldFocusDateInput=o===t.Keys.up,this.setShow(o===t.Keys.down)),this.$emit("keydown",e)}}});exports.TimePicker=Z;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue"),U=require("@progress/kendo-vue-labels"),H=require("@progress/kendo-vue-popup"),k=require("@progress/kendo-date-math"),t=require("@progress/kendo-vue-common"),G=require("@progress/kendo-vue-intl"),X=require("@progress/kendo-vue-buttons"),s=require("../messages/main.js"),J=require("../dateinput/DateInput.js"),Q=require("./TimeSelector.js"),u=require("../utils.js"),S=require("./utils.js"),W=require("../dateinput/utils.js"),Y=require("@progress/kendo-svg-icons");function v(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!n.isVNode(e)}const Z=n.defineComponent({name:"KendoTimePicker",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},model:{event:"changemodel"},props:{cancelButton:{type:Boolean,default:!0},nowButton:{type:Boolean,default:void 0},defaultShow:{type:Boolean,default:!1},modelValue:{type:Date,default:void 0},defaultValue:{type:Date,default:function(){return null}},dateInput:{type:[String,Object,Function],default:function(){}},popup:{type:[String,Object,Function],default:function(){}},disabled:{type:Boolean,default:!1},format:{type:[String,Object],default:function(){return"t"}},formatPlaceholder:{type:[String,Object],default:function(){return W.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_TIME}},max:{type:Date,default:function(){return u.MAX_TIME}},name:String,label:String,placeholder:String,popupSettings:{type:Object,default:function(){return{}}},show:{type:Boolean,default:void 0},tabIndex:{type:Number,default:0},steps:{type:Object,default:function(){return{}}},smoothScroll:{type:Boolean,default:!0},title:{type:String,default:function(){return""}},value:{type:Date,default:function(){}},width:[Number,String],validationMessage:String,required:{type:Boolean,default:!1},validityStyles:{type:Boolean,default:!0},validate:Boolean,valid:{type:Boolean,default:void 0},inputAttributes:Object},created(){this._anchor=t.guid(),this._popupId="popup"+t.guid(),this._element=null,this._wrapper=null,this._dateInput=null,this._timeSelector=null,this.shouldFocusDateInput=!1,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,isFocused:!1}},computed:{timeSelector(){return this._timeSelector},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?k.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(),this._dateInput=this.dateInputRef,this._timeSelector=this.$refs.timeSelector,this._wrapper=this.kendoAnchorRef,this._dateInput&&this._dateInput.element()&&this._dateInput.element().setAttribute("aria-haspopup","true")},updated(){this._dateInput=this.dateInputRef,this._timeSelector=this.$refs.timeSelector,this._wrapper=this.kendoAnchorRef,this._timeSelector&&this.computedShow&&!this._oldShow?this._timeSelector.focusActiveList():this._dateInput&&this._dateInput.element()&&!this.computedShow&&this.shouldFocusDateInput&&this._dateInput.element().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:o,title:h,id:a,placeholder:c,format:l,formatPlaceholder:V,smoothScroll:$,width:w,name:_,steps:I,cancelButton:D,nowButton:T,validationMessage:B,required:C,validityStyles:M,ariaLabelledBy:ee,ariaDescribedBy:te,size:p,rounded:m,fillMode:y,inputAttributes:F}=this.$props,{popupClass:O,appendTo:R,animate:q}=this.$props.popupSettings,f=!this.$props.validityStyles||this.validity().valid;t.classNames("k-picker-wrap",{"k-invalid":!f,"k-disabled":i,"k-focus":this.isFocused});const z=t.classNames("k-group k-reset",O),b=G.provideLocalizationService(this),j=b.toLanguageString(s.toggleClock,s.messages[s.toggleClock]),x=b.toLanguageString(s.toggleTimeSelector,s.messages[s.toggleTimeSelector]),A=this.$props.dateInput?t.templateRendering.call(this,this.$props.dateInput,t.getListeners.call(this)):void 0,N=n.createVNode(J.DateInput,{ref:g=>{this.dateInputRef=g},placeholder:c,disabled:i,format:l,formatPlaceholder:V,id:a,size:null,rounded:null,fillMode:null,max:this.normalizeTime(this.$props.max),min:this.normalizeTime(this.$props.min),name:_,onChange:this.handleInputValueChange,required:C,steps:I,tabIndex:this.computedShow?-1:o,title:h,valid:this.validity().valid,validationMessage:B,validityStyles:M,value:this.computedValue&&this.normalizeTime(this.computedValue),ariaHasPopup:"grid",ariaExpanded:this.computedShow,ariaRole:"combobox",ariaControls:this._popupId,inputAttributes:F},v(e)?e:{default:()=>[e]}),r=n.createVNode(Q.TimeSelector,{ref:"timeSelector",cancelButton:D,disabled:i,nowButton:T,format:l,min:this.$props.min,max:this.$props.max,steps:I,smoothScroll:$,value:this.computedValue,onChange:this.handleValueChange,onReject:this.handleValueReject,onFocus:this.timeFocus,onBlur:this.timeBlur,onKeydown:this.handleKeyDown},null),P=t.getTemplate.call(this,{h:n.h,template:A,defaultRendering:N,additionalListeners:{change:this.handleInputValueChange}}),L=this.$props.popup?t.templateRendering.call(this,this.$props.popup,t.getListeners.call(this)):void 0,K=n.createVNode(H.Popup,{show:this.computedShow,anchor:this._anchor,class:z,id:this._popupId,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"},appendTo:R,animate:q},v(r)?r:{default:()=>[r]}),E=t.getTemplate.call(this,{h:n.h,template:L,defaultRendering:K,defaultSlots:r}),d=n.createVNode("div",{class:t.classNames("k-input","k-timepicker",{[`k-input-${t.kendoThemeMaps.sizeMap[p]||p}`]:p,[`k-input-${y}`]:y,[`k-rounded-${t.kendoThemeMaps.roundedMap[m]||m}`]:m,"k-invalid":!f,"k-required":this.required,"k-disabled":this.$props.disabled,"k-focus":this.isFocused}),onKeydown:this.handleKeyDown,style:{width:w},onFocusin:this.handleFocus,onFocusout:this.handleBlur,ref:g=>{this.kendoAnchorRef=g}},[P,n.createVNode(X.Button,{type:"button",tabIndex:-1,icon:"clock",svgIcon:Y.clockIcon,onMousedown:this.handleIconMouseDown,onClick:this.handleIconClick,title:x,rounded:null,disabled:i,class:"k-input-button","aria-controls":this._popupId,"aria-label":j},null),E]);return this.$props.label?n.createVNode(U.FloatingLabel,{label:this.$props.label,editorId:a,editorValid:f,editorValue:this.getDateInputText(),editorPlaceholder:this.$props.placeholder,editorDisabled:this.$props.disabled,style:{width:w}},v(d)?d:{default:()=>[d]}):d},methods:{validity(){const e=this.computedValue&&this.normalizeTime(this.computedValue),i=this.normalizeTime(this.$props.min),o=this.normalizeTime(this.$props.max),h=S.isInRange(e,i,o),a=this.$props.validationMessage!==void 0,c=(!this.$props.required||this.computedValue!==null)&&h,l=this.$props.valid!==void 0?this.$props.valid:c;return{customError:a,rangeOverflow:S.isBiggerThanMax(e,o),rangeUnderflow:S.isSmallerThanMin(e,i),valid:l,valueMissing:this.computedValue===null}},getDateInputText(){return this.computedValue?!0:this._dateInput?this._dateInput._element.value:""},focus(){this._dateInput&&this._dateInput.focus()},normalizeTime(e){return u.setTime(u.MIDNIGHT_DATE,e)},setShow(e){this.computedShow!==e&&(this.currentShow=e,this.$emit(e?"open":"close",{component:this}))},mergeTime(e){return this.computedValue&&e?u.setTime(this.computedValue,e):e},handleInputValueChange(e){const i=this.mergeTime(e.value);this.handleValueChange({...e,value:i})},handleValueChange(e){this.currentValue=k.cloneDate(e.value),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._oldShow=this.computedShow,this.isFocused=!0,this.$emit("focus",{event:e})},handleBlur(e){this.createBlurTimeout(),this.$emit("blur",{event:e})},timeBlur(e){this.$emit("blur",{event:e}),clearTimeout(this._blurTimeout),this.createBlurTimeout()},timeFocus(){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)},handleValueReject(e){this.setShow(!1)},handleIconClick(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:o}=e;if(o===t.Keys.tab&&this._dateInput&&e.target!==this._dateInput._element){e.preventDefault(),this.shouldFocusDateInput=!0,this.setShow(!1);return}if(o===t.Keys.esc){this.shouldFocusDateInput=!0,this.setShow(!1);return}i&&(o===t.Keys.up||o===t.Keys.down)&&(e.preventDefault(),e.stopPropagation(),this.shouldFocusDateInput=o===t.Keys.up,this.setShow(o===t.Keys.down)),this.$emit("keydown",e)}}});exports.TimePicker=Z;

package/timepicker/TimePicker.mjs

@@ -365,6 +365,7 @@ const ze = /* @__PURE__ */ Z({
       onClick: this.handleIconClick,
       title: H,
       rounded: null,
+      disabled: t,
       class: "k-input-button",
       "aria-controls": this._popupId,
       "aria-label": U

package/timepicker/TimeSelector.d.ts

@@ -0,0 +1,185 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { IntlService, DateFormatOptions } from '@progress/kendo-vue-intl';
+import { TimePickerIncrementalSteps } from './models/IncrementalSteps';
+import { PropType } from 'vue';
+/**
+ * @hidden
+ */
+export declare enum Direction {
+    Left = 0,
+    Right = 1
+}
+/**
+ * @hidden
+ */
+export interface TimeSelectorChangeEvent {
+    event?: any;
+    value: Date;
+    target: any;
+}
+/**
+ * @hidden
+ */
+export interface TimeSelectorProps {
+    cancelButton?: boolean;
+    disabled?: boolean;
+    format?: string | DateFormatOptions;
+    max?: Date;
+    min?: Date;
+    nowButton?: boolean;
+    onChange?: any;
+    onReject?: any;
+    onKeydown?: any;
+    steps?: TimePickerIncrementalSteps;
+    smoothScroll?: boolean;
+    tabIndex?: number;
+    value?: Date | null;
+    boundRange?: boolean;
+}
+/**
+ * @hidden
+ */
+export interface TimeSelectorComputed {
+    [key: string]: any;
+    computedValue: Date | null;
+    intl: IntlService;
+    current: Date | null;
+}
+/**
+ * @hidden
+ */
+declare const TimeSelector: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    cancelButton: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    boundRange: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    disabled: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    format: {
+        type: PropType<string | DateFormatOptions>;
+        default: () => string;
+    };
+    max: {
+        type: PropType<Date>;
+        default: () => Date;
+    };
+    min: {
+        type: PropType<Date>;
+        default: () => Date;
+    };
+    nowButton: PropType<boolean>;
+    steps: {
+        type: PropType<TimePickerIncrementalSteps>;
+        default: () => {};
+    };
+    smoothScroll: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    tabIndex: PropType<number>;
+    value: {
+        type: PropType<Date>;
+        default: () => any;
+    };
+    onChange: PropType<any>;
+    onReject: PropType<any>;
+    onKeydown: PropType<any>;
+}>, {
+    kendoIntlService: {};
+    kendoLocalizationService: {};
+}, {
+    currentState: any;
+    currentValue: any;
+    valueDuringOnChange: any;
+}, {
+    computedValue(): Date | null;
+    intl(): IntlService;
+    current(): Date | null;
+}, {
+    handleBlur(event: any): void;
+    handleFocus(event: any): void;
+    focusActiveList(): void;
+    hasActiveButton(): boolean;
+    handleKeyDown(event: any): void;
+    handleAccept(event: any): void;
+    handleReject(event: any): void;
+    handleNowClick(event: any): void;
+    handleChange(candidate: Date): void;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    change: (event: any) => true;
+    focus: (event: FocusEvent) => true;
+    blur: (event: FocusEvent) => true;
+    keydown: (event: KeyboardEvent) => true;
+    reject: (event: Event) => true;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    cancelButton: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    boundRange: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    disabled: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    format: {
+        type: PropType<string | DateFormatOptions>;
+        default: () => string;
+    };
+    max: {
+        type: PropType<Date>;
+        default: () => Date;
+    };
+    min: {
+        type: PropType<Date>;
+        default: () => Date;
+    };
+    nowButton: PropType<boolean>;
+    steps: {
+        type: PropType<TimePickerIncrementalSteps>;
+        default: () => {};
+    };
+    smoothScroll: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    tabIndex: PropType<number>;
+    value: {
+        type: PropType<Date>;
+        default: () => any;
+    };
+    onChange: PropType<any>;
+    onReject: PropType<any>;
+    onKeydown: PropType<any>;
+}>> & Readonly<{
+    onBlur?: (event: FocusEvent) => any;
+    onChange?: (event: any) => any;
+    onFocus?: (event: FocusEvent) => any;
+    onKeydown?: (event: KeyboardEvent) => any;
+    onReject?: (event: Event) => any;
+}>, {
+    value: Date;
+    disabled: boolean;
+    format: string;
+    max: Date;
+    min: Date;
+    steps: TimePickerIncrementalSteps;
+    boundRange: boolean;
+    smoothScroll: boolean;
+    cancelButton: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export { TimeSelector };

package/timepicker/interfaces/TimePickerFocusBlurEvents.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * The arguments for the `onFocus` event of the TimePicker.
+ */
+export interface TimePickerFocusEvent {
+    /**
+     * The native browser focus event.
+     */
+    event: FocusEvent;
+}
+/**
+ * The arguments for the `onBlur` event of the TimePicker.
+ */
+export interface TimePickerBlurEvent {
+    /**
+     * The native browser blur event.
+     */
+    event: FocusEvent;
+}

package/timepicker/models/IncrementalSteps.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @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 TimePicker.
+ */
+export interface TimePickerIncrementalSteps {
+    hour?: number;
+    minute?: number;
+    second?: number;
+}

package/timepicker/models/ListItem.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 interface ListItem {
+    text: string;
+    value: Date;
+}

package/timepicker/models/ListService.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { ListItem } from './ListItem';
+import { ListServiceSettings } from './ListServiceSettings';
+/**
+ * @hidden
+ */
+export interface ListService {
+    apply(value: Date, candidate: Date): Date;
+    configure(settings: ListServiceSettings): void;
+    data(value?: Date): ListItem[];
+    isRangeChanged(min: Date, max: Date): boolean;
+    limitRange(min: Date, max: Date, value?: Date): Date[];
+    total(value?: Date): number;
+    selectedIndex(value: Date): number;
+    valueInList(value: Date): boolean;
+}