@progress/kendo-vue-dateinputs 3.0.2 → 3.0.4-dev.202202011210

package/dist/es/calendar/components/CalendarHeaderTitle.js

@@ -44,13 +44,15 @@ var CalendarHeaderTitle = {
     var defaultSlot = getDefaultSlots(this);
     return (// @ts-ignore  function children
       h(KButton, {
-        value: this.$props.value,
+        type: "button",
         attrs: this.v3 ? undefined : {
+          type: "button",
           value: this.$props.value,
           id: this.$props.id,
           fillMode: 'flat',
           tabIndex: 0
         },
+        value: this.$props.value,
         id: this.$props.id,
         fillMode: 'flat',
         onClick: this.handleClick,

package/dist/es/calendar/components/Header.js

@@ -213,8 +213,9 @@ var Header = {
       "class": 'k-calendar-nav k-hstack'
     }, [// @ts-ignore
     h(KButton, {
-      icon: 'arrow-60-left',
+      type: "button",
       attrs: this.v3 ? undefined : {
+        type: "button",
         icon: 'arrow-60-left',
         size: this.$props.size,
         fillMode: 'flat',
@@ -222,6 +223,7 @@ var Header = {
         "aria-label": prevViewTitle,
         title: prevViewTitle
       },
+      icon: 'arrow-60-left',
       size: this.$props.size,
       fillMode: 'flat',
       "class": "k-prev-view",
@@ -246,8 +248,9 @@ var Header = {
       onClick: this.handleTodayClick
     }, [todayMessage]), // @ts-ignore
     h(KButton, {
-      icon: 'arrow-60-right',
+      type: "button",
       attrs: this.v3 ? undefined : {
+        type: "button",
         icon: 'arrow-60-right',
         size: this.$props.size,
         fillMode: 'flat',
@@ -255,6 +258,7 @@ var Header = {
         "aria-label": nextViewTittle,
         title: nextViewTittle
       },
+      icon: 'arrow-60-right',
       size: this.$props.size,
       fillMode: 'flat',
       "class": "k-next-view",

package/dist/es/calendar/components/interfaces/CalendarProps.d.ts

@@ -26,15 +26,15 @@ export interface CalendarProps extends CalendarSettings {
     /**
      * An event that is called after the value of the Calendar has changed.
      */
-    change?: (event: CalendarChangeEvent) => void;
+    onChange?: (event: CalendarChangeEvent) => void;
     /**
      * An event called when the week number cell is clicked.
      */
-    weekcellclick?: (event: CalendarWeekCellClickEvent) => void;
+    onWeekcellclick?: (event: CalendarWeekCellClickEvent) => void;
     /**
      * An event called when the week name cell is clicked.
      */
-    weeknameclick?: (event: CalendarWeekNameClickEvent) => void;
+    onWeeknameclick?: (event: CalendarWeekNameClickEvent) => void;
     /**
      * Sets the value of the Calendar.
      */

package/dist/es/dateinput/DateInput.js

@@ -631,8 +631,9 @@ var DateInput = {
       }
     }, [// @ts-ignore
     h(KButton, {
-      tabIndex: -1,
+      type: "button",
       attrs: this.v3 ? undefined : {
+        type: "button",
         tabIndex: -1,
         icon: 'arrow-n',
         size: this.$props.size,
@@ -640,6 +641,7 @@ var DateInput = {
         "aria-label": localizationService.toLanguageString(increaseValue, messages[increaseValue]),
         title: localizationService.toLanguageString(increaseValue, messages[increaseValue])
       },
+      tabIndex: -1,
       icon: 'arrow-n',
       size: this.$props.size,
       fillMode: this.$props.fillMode,
@@ -652,8 +654,9 @@ var DateInput = {
       }
     }), // @ts-ignore
     h(KButton, {
-      tabIndex: -1,
+      type: "button",
       attrs: this.v3 ? undefined : {
+        type: "button",
         tabIndex: -1,
         icon: 'arrow-s',
         size: this.$props.size,
@@ -661,6 +664,7 @@ var DateInput = {
         "aria-label": localizationService.toLanguageString(decreaseValue, messages[decreaseValue]),
         title: localizationService.toLanguageString(decreaseValue, messages[decreaseValue])
       },
+      tabIndex: -1,
       "class": "k-spinner-decrease",
       icon: 'arrow-s',
       size: this.$props.size,

package/dist/es/dateinput/interfaces/DateInputProps.d.ts

@@ -27,5 +27,5 @@ export interface DateInputProps extends FormComponentProps, DateInputSettings {
     /**
      * Determines the event handler that will be fired when the user edits the value ([see example]({% slug dateranges_dateinput_native %}).
      */
-    change?: (event: any) => void;
+    onChange?: (event: any) => void;
 }

package/dist/es/datepicker/interfaces/DatePickerProps.d.ts

@@ -16,11 +16,11 @@ export interface DatePickerProps extends DatePickerSettings, FormComponentProps
     /**
      * Fires each time the user selects a new value ([see example]({% slug controlled_datepicker_native %}#toc-controlling-the-date-value)).
      */
-    change?: (event: DatePickerChangeEvent) => void;
+    onChange?: (event: DatePickerChangeEvent) => void;
     /**
      * Fires when the icon element is clicked.
      */
-    iconclick?: (event: any) => void;
+    onIconclick?: (event: any) => void;
     /**
      * Renders a floating label for the DatePicker.
      */

package/dist/es/datepicker/models/DatePickerSettings.d.ts

@@ -108,11 +108,11 @@ export interface DatePickerSettings {
     /**
      * Fires each time any of the DatePicker elements gets blurred.
      */
-    blur?: (event: any) => void;
+    onBlur?: (event: any) => void;
     /**
      * Fires each time the user focuses any of the DatePicker elements.
      */
-    focus?: (event: any) => void;
+    onFocus?: (event: any) => void;
     /**
      * Configures the popup options of the DatePicker.
      *

package/dist/es/daterangepicker/models/DateRangePickerSettings.d.ts

@@ -120,11 +120,11 @@ export interface DateRangePickerSettings {
     /**
      * Fires each time any of the DateRangePicker elements gets blurred.
      */
-    blur?: (event: any) => void;
+    onBlur?: (event: any) => void;
     /**
      * Fires each time the user focuses any of the DateRangePicker elements.
      */
-    focus?: (event: any) => void;
+    onFocus?: (event: any) => void;
     /**
      * Represents the additional props that will be passed to the [Popup]({% slug overview_popup %}) inside the DateRangePicker ([see example]({% slug child_settings_daterangepicker %}#toc-configuring-the-popup)).
      */

package/dist/es/datetimepicker/DateTimePicker.js

@@ -483,14 +483,16 @@ var DateTimePicker = {
       onFocusout: this.handleBlur
     }, [dateInputRendering, // @ts-ignore
     h(Button, {
-      tabIndex: -1,
+      type: "button",
       attrs: this.v3 ? undefined : {
+        type: "button",
         tabIndex: -1,
         icon: 'calendar',
         title: provideLocalizationService(this).toLanguageString(toggleDateTimeSelector, messages[toggleDateTimeSelector]),
         "aria-controls": this._popupId,
         "aria-label": provideLocalizationService(this).toLanguageString(toggleDateTimeSelector, messages[toggleDateTimeSelector])
       },
+      tabIndex: -1,
       icon: 'calendar',
       onMousedown: this.handleIconMouseDown,
       on: this.v3 ? undefined : {

package/dist/es/datetimepicker/DateTimeSelector.js

@@ -196,11 +196,13 @@ var DateTimeSelector = {
     }, this.v3 ? function () {
       return [// @ts-ignore  function children
       h(Button, {
-        selected: _this2.currentTab === 'date',
+        type: "button",
         attrs: _this2.v3 ? undefined : {
+          type: "button",
           selected: _this2.currentTab === 'date',
           togglable: true
         },
+        selected: _this2.currentTab === 'date',
         togglable: true,
         onClick: _this2.handleDateClick,
         on: _this2.v3 ? undefined : {
@@ -210,11 +212,13 @@ var DateTimeSelector = {
         return [dateMessage];
       } : [dateMessage]), // @ts-ignore  function children
       h(Button, {
-        selected: _this2.currentTab === 'time',
+        type: "button",
         attrs: _this2.v3 ? undefined : {
+          type: "button",
           selected: _this2.currentTab === 'time',
           togglable: true
         },
+        selected: _this2.currentTab === 'time',
         togglable: true,
         onClick: _this2.handleTimeClick,
         on: _this2.v3 ? undefined : {
@@ -224,11 +228,13 @@ var DateTimeSelector = {
         return [timeMessage];
       } : [timeMessage])];
     } : [h(Button, {
-      selected: _this2.currentTab === 'date',
+      type: "button",
       attrs: _this2.v3 ? undefined : {
+        type: "button",
         selected: _this2.currentTab === 'date',
         togglable: true
       },
+      selected: _this2.currentTab === 'date',
       togglable: true,
       onClick: _this2.handleDateClick,
       on: _this2.v3 ? undefined : {
@@ -237,11 +243,13 @@ var DateTimeSelector = {
     }, _this2.v3 ? function () {
       return [dateMessage];
     } : [dateMessage]), h(Button, {
-      selected: _this2.currentTab === 'time',
+      type: "button",
       attrs: _this2.v3 ? undefined : {
+        type: "button",
         selected: _this2.currentTab === 'time',
         togglable: true
       },
+      selected: _this2.currentTab === 'time',
       togglable: true,
       onClick: _this2.handleTimeClick,
       on: _this2.v3 ? undefined : {
@@ -290,6 +298,12 @@ var DateTimeSelector = {
       "class": "k-datetime-footer k-actions k-actions-stretched"
     }, [cancelButton && // @ts-ignore  function children
     h(Button, {
+      type: "button",
+      attrs: this.v3 ? undefined : {
+        type: "button",
+        title: cancelMessage,
+        "aria-label": cancelMessage
+      },
       ref: 'cancelButton',
       "class": "k-time-cancel",
       onClick: this.handleReject,
@@ -297,23 +311,21 @@ var DateTimeSelector = {
         "click": this.handleReject
       },
       title: cancelMessage,
-      attrs: this.v3 ? undefined : {
-        title: cancelMessage,
-        "aria-label": cancelMessage
-      },
       "aria-label": cancelMessage
     }, this.v3 ? function () {
       return [cancelMessage];
     } : [cancelMessage]), // @ts-ignore  function children
     h(Button, {
-      ref: 'acceptButton',
-      disabled: !this.hasDateValue,
+      type: "button",
       attrs: this.v3 ? undefined : {
+        type: "button",
         disabled: !this.hasDateValue,
         themeColor: 'primary',
         title: setMessage,
         "aria-label": setMessage
       },
+      ref: 'acceptButton',
+      disabled: !this.hasDateValue,
       themeColor: 'primary',
       "class": 'k-time-accept',
       onClick: this.handleAccept,

package/dist/es/datetimepicker/models/DateTimePickerSettings.d.ts

@@ -134,15 +134,15 @@ export interface DateTimePickerSettings {
     /**
      * Fires each time any of the DateTimePicker elements gets blurred.
      */
-    blur?: (event: any) => void;
+    onBlur?: (event: any) => void;
     /**
      * Fires each time the user focuses any of the DateTimePicker elements.
      */
-    focus?: (event: any) => void;
+    onFocus?: (event: any) => void;
     /**
      * Fires when the icon element is clicked.
      */
-    iconclick?: (event: any) => void;
+    onIconclick?: (event: any) => void;
     /**
      * Specifies if the popup will be displayed
      * ([see example]({% slug controlled_datetimepicker %}#toc-controlling-the-popup-state)).

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-dateinputs',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1643195007,
+    publishDate: 1643717057,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
 };

package/dist/es/timepicker/TimePart.js

@@ -161,14 +161,16 @@ var TimePart = {
       "class": "k-title"
     }, [this.intl.formatDate(this.computedValue, this.dateFormatParts.reduce(this.timeFormatReducer, ''))]), this.showNowButton() && // @ts-ignore  function children
     h(Button, {
-      ref: 'nowButton',
-      fillMode: 'flat',
+      type: "button",
       attrs: this.v3 ? undefined : {
+        type: "button",
         fillMode: 'flat',
         title: selectNowMessage,
         "aria-label": selectNowMessage,
         tabIndex: disabled ? -1 : 0
       },
+      ref: 'nowButton',
+      fillMode: 'flat',
       "class": "k-time-now",
       title: selectNowMessage,
       "aria-label": selectNowMessage,

package/dist/es/timepicker/TimePicker.js

@@ -480,14 +480,16 @@ var TimePicker = {
       } : this._anchor
     }, [dateInputRendering, // @ts-ignore
     h(KButton, {
-      tabIndex: -1,
+      type: "button",
       attrs: this.v3 ? undefined : {
+        type: "button",
         tabIndex: -1,
         icon: 'clock',
         title: toggleTimeMessage,
         "aria-controls": this._popupId,
         "aria-label": toggleClockMessage
       },
+      tabIndex: -1,
       icon: 'clock',
       onMousedown: this.handleIconMouseDown,
       on: this.v3 ? undefined : {

package/dist/es/timepicker/TimeSelector.js

@@ -196,6 +196,12 @@ var TimeSelector = {
       "class": "k-time-footer k-actions k-actions-stretched"
     }, [cancelButton && // @ts-ignore  function children
     h(Button, {
+      type: "button",
+      attrs: this.v3 ? undefined : {
+        type: "button",
+        title: cancelMessage,
+        "aria-label": cancelMessage
+      },
       ref: 'cancelButton',
       "class": "k-time-cancel",
       onClick: this.handleReject,
@@ -203,22 +209,20 @@ var TimeSelector = {
         "click": this.handleReject
       },
       title: cancelMessage,
-      attrs: this.v3 ? undefined : {
-        title: cancelMessage,
-        "aria-label": cancelMessage
-      },
       "aria-label": cancelMessage
     }, this.v3 ? function () {
       return [cancelMessage];
     } : [cancelMessage]), // @ts-ignore  function children
     h(Button, {
-      ref: 'acceptButton',
-      themeColor: 'primary',
+      type: "button",
       attrs: this.v3 ? undefined : {
+        type: "button",
         themeColor: 'primary',
         title: setMessage,
         "aria-label": setMessage
       },
+      ref: 'acceptButton',
+      themeColor: 'primary',
       "class": "k-time-accept",
       onClick: this.handleAccept,
       on: this.v3 ? undefined : {

package/dist/es/timepicker/models/TimePickerSettings.d.ts

@@ -107,15 +107,15 @@ export interface TimePickerSettings {
     /**
      * Fires each time any of the TimePicker elements gets blurred.
      */
-    blur?: (event: any) => void;
+    onBlur?: (event: any) => void;
     /**
      * Fires each time the user focuses any of the TimePicker elements.
      */
-    focus?: (event: any) => void;
+    onFocus?: (event: any) => void;
     /**
      * Fires when the icon element is clicked.
      */
-    iconclick?: (event: any) => void;
+    onIconclick?: (event: any) => void;
     /**
      * Configures the popup options of the TimePicker.
      *

package/dist/npm/calendar/components/CalendarHeaderTitle.js

@@ -54,13 +54,15 @@ var CalendarHeaderTitle = {
     var defaultSlot = kendo_vue_common_1.getDefaultSlots(this);
     return (// @ts-ignore  function children
       h(kendo_vue_buttons_1.Button, {
-        value: this.$props.value,
+        type: "button",
         attrs: this.v3 ? undefined : {
+          type: "button",
           value: this.$props.value,
           id: this.$props.id,
           fillMode: 'flat',
           tabIndex: 0
         },
+        value: this.$props.value,
         id: this.$props.id,
         fillMode: 'flat',
         onClick: this.handleClick,

package/dist/npm/calendar/components/Header.js

@@ -230,8 +230,9 @@ var Header = {
       "class": 'k-calendar-nav k-hstack'
     }, [// @ts-ignore
     h(kendo_vue_buttons_1.Button, {
-      icon: 'arrow-60-left',
+      type: "button",
       attrs: this.v3 ? undefined : {
+        type: "button",
         icon: 'arrow-60-left',
         size: this.$props.size,
         fillMode: 'flat',
@@ -239,6 +240,7 @@ var Header = {
         "aria-label": prevViewTitle,
         title: prevViewTitle
       },
+      icon: 'arrow-60-left',
       size: this.$props.size,
       fillMode: 'flat',
       "class": "k-prev-view",
@@ -263,8 +265,9 @@ var Header = {
       onClick: this.handleTodayClick
     }, [todayMessage]), // @ts-ignore
     h(kendo_vue_buttons_1.Button, {
-      icon: 'arrow-60-right',
+      type: "button",
       attrs: this.v3 ? undefined : {
+        type: "button",
         icon: 'arrow-60-right',
         size: this.$props.size,
         fillMode: 'flat',
@@ -272,6 +275,7 @@ var Header = {
         "aria-label": nextViewTittle,
         title: nextViewTittle
       },
+      icon: 'arrow-60-right',
       size: this.$props.size,
       fillMode: 'flat',
       "class": "k-next-view",

package/dist/npm/calendar/components/interfaces/CalendarProps.d.ts

@@ -26,15 +26,15 @@ export interface CalendarProps extends CalendarSettings {
     /**
      * An event that is called after the value of the Calendar has changed.
      */
-    change?: (event: CalendarChangeEvent) => void;
+    onChange?: (event: CalendarChangeEvent) => void;
     /**
      * An event called when the week number cell is clicked.
      */
-    weekcellclick?: (event: CalendarWeekCellClickEvent) => void;
+    onWeekcellclick?: (event: CalendarWeekCellClickEvent) => void;
     /**
      * An event called when the week name cell is clicked.
      */
-    weeknameclick?: (event: CalendarWeekNameClickEvent) => void;
+    onWeeknameclick?: (event: CalendarWeekNameClickEvent) => void;
     /**
      * Sets the value of the Calendar.
      */

package/dist/npm/dateinput/DateInput.js

@@ -651,8 +651,9 @@ var DateInput = {
       }
     }, [// @ts-ignore
     h(kendo_vue_buttons_1.Button, {
-      tabIndex: -1,
+      type: "button",
       attrs: this.v3 ? undefined : {
+        type: "button",
         tabIndex: -1,
         icon: 'arrow-n',
         size: this.$props.size,
@@ -660,6 +661,7 @@ var DateInput = {
         "aria-label": localizationService.toLanguageString(messages_1.increaseValue, messages_1.messages[messages_1.increaseValue]),
         title: localizationService.toLanguageString(messages_1.increaseValue, messages_1.messages[messages_1.increaseValue])
       },
+      tabIndex: -1,
       icon: 'arrow-n',
       size: this.$props.size,
       fillMode: this.$props.fillMode,
@@ -672,8 +674,9 @@ var DateInput = {
       }
     }), // @ts-ignore
     h(kendo_vue_buttons_1.Button, {
-      tabIndex: -1,
+      type: "button",
       attrs: this.v3 ? undefined : {
+        type: "button",
         tabIndex: -1,
         icon: 'arrow-s',
         size: this.$props.size,
@@ -681,6 +684,7 @@ var DateInput = {
         "aria-label": localizationService.toLanguageString(messages_1.decreaseValue, messages_1.messages[messages_1.decreaseValue]),
         title: localizationService.toLanguageString(messages_1.decreaseValue, messages_1.messages[messages_1.decreaseValue])
       },
+      tabIndex: -1,
       "class": "k-spinner-decrease",
       icon: 'arrow-s',
       size: this.$props.size,

package/dist/npm/dateinput/interfaces/DateInputProps.d.ts

@@ -27,5 +27,5 @@ export interface DateInputProps extends FormComponentProps, DateInputSettings {
     /**
      * Determines the event handler that will be fired when the user edits the value ([see example]({% slug dateranges_dateinput_native %}).
      */
-    change?: (event: any) => void;
+    onChange?: (event: any) => void;
 }

package/dist/npm/datepicker/interfaces/DatePickerProps.d.ts

@@ -16,11 +16,11 @@ export interface DatePickerProps extends DatePickerSettings, FormComponentProps
     /**
      * Fires each time the user selects a new value ([see example]({% slug controlled_datepicker_native %}#toc-controlling-the-date-value)).
      */
-    change?: (event: DatePickerChangeEvent) => void;
+    onChange?: (event: DatePickerChangeEvent) => void;
     /**
      * Fires when the icon element is clicked.
      */
-    iconclick?: (event: any) => void;
+    onIconclick?: (event: any) => void;
     /**
      * Renders a floating label for the DatePicker.
      */

package/dist/npm/datepicker/models/DatePickerSettings.d.ts

@@ -108,11 +108,11 @@ export interface DatePickerSettings {
     /**
      * Fires each time any of the DatePicker elements gets blurred.
      */
-    blur?: (event: any) => void;
+    onBlur?: (event: any) => void;
     /**
      * Fires each time the user focuses any of the DatePicker elements.
      */
-    focus?: (event: any) => void;
+    onFocus?: (event: any) => void;
     /**
      * Configures the popup options of the DatePicker.
      *

package/dist/npm/daterangepicker/models/DateRangePickerSettings.d.ts

@@ -120,11 +120,11 @@ export interface DateRangePickerSettings {
     /**
      * Fires each time any of the DateRangePicker elements gets blurred.
      */
-    blur?: (event: any) => void;
+    onBlur?: (event: any) => void;
     /**
      * Fires each time the user focuses any of the DateRangePicker elements.
      */
-    focus?: (event: any) => void;
+    onFocus?: (event: any) => void;
     /**
      * Represents the additional props that will be passed to the [Popup]({% slug overview_popup %}) inside the DateRangePicker ([see example]({% slug child_settings_daterangepicker %}#toc-configuring-the-popup)).
      */

package/dist/npm/datetimepicker/DateTimePicker.js

@@ -505,14 +505,16 @@ var DateTimePicker = {
       onFocusout: this.handleBlur
     }, [dateInputRendering, // @ts-ignore
     h(kendo_vue_buttons_1.Button, {
-      tabIndex: -1,
+      type: "button",
       attrs: this.v3 ? undefined : {
+        type: "button",
         tabIndex: -1,
         icon: 'calendar',
         title: kendo_vue_intl_1.provideLocalizationService(this).toLanguageString(messages_1.toggleDateTimeSelector, messages_1.messages[messages_1.toggleDateTimeSelector]),
         "aria-controls": this._popupId,
         "aria-label": kendo_vue_intl_1.provideLocalizationService(this).toLanguageString(messages_1.toggleDateTimeSelector, messages_1.messages[messages_1.toggleDateTimeSelector])
       },
+      tabIndex: -1,
       icon: 'calendar',
       onMousedown: this.handleIconMouseDown,
       on: this.v3 ? undefined : {