@progress/kendo-vue-dateinputs 2.5.1-dev.202110051346 → 2.5.2-dev.202110150637

package/dist/es/datepicker/DatePicker.js

@@ -33,6 +33,7 @@ var DatePicker = {
     'change': null,
     'changemodel': null,
     'update:modelValue': null,
+    'iconclick': null,
     'focus': null,
     'blur': null
   },
@@ -233,7 +234,6 @@ var DatePicker = {
       get: function get() {
         var disabled = this.$props.disabled;
         return {
-          'k-state-default': !disabled,
           'k-state-disabled': disabled,
           'k-state-focused': this.$data.isFocused
         };
@@ -354,6 +354,7 @@ var DatePicker = {
 
       this.$data.shouldFocusDateInput = true;
       this.setShow(!this.computedShow);
+      this.$emit('iconclick', event);
     },
     handleIconMouseDown: function handleIconMouseDown(event) {
       event.stopPropagation();

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

@@ -17,6 +17,10 @@ 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;
+    /**
+     * Fires when the icon element is clicked.
+     */
+    iconclick?: (event: any) => void;
     /**
      * Renders a floating label for the DatePicker.
      */

package/dist/es/datetimepicker/DateTimePicker.js

@@ -20,6 +20,15 @@ import { defaultFormatPlaceholder } from '../dateinput/utils'; // tslint:enable:
 
 var DateTimePicker = {
   name: 'KendoDateTimePicker',
+  // @ts-ignore
+  emits: {
+    'changemodel': null,
+    'update:modelValue': null,
+    'iconclick': null,
+    'change': null,
+    'focus': null,
+    'blur': null
+  },
   props: {
     modelValue: {
       type: Date,
@@ -202,7 +211,7 @@ var DateTimePicker = {
 
     var dateInputElement = this.dateInputElement();
     this._dateTimeSelector = this.$refs.dateTimeSelector;
-    this._wrapper = this.$refs[this._anchor];
+    this._wrapper = this.v3 ? this.kendoAnchorRef : this.$refs[this._anchor];
     this._dateInput = this.v3 ? this.dateInputRef : this.$refs.dateInput;
 
     if (dateInputElement) {
@@ -213,7 +222,7 @@ var DateTimePicker = {
   updated: function updated() {
     var dateInputElement = this.dateInputElement();
     this._dateTimeSelector = this.$refs.dateTimeSelector;
-    this._wrapper = this.$refs[this._anchor];
+    this._wrapper = this.v3 ? this.kendoAnchorRef : this.$refs[this._anchor];
 
     if (dateInputElement) {
       dateInputElement.setAttribute('aria-expanded', "" + this.computedShow);
@@ -281,7 +290,6 @@ var DateTimePicker = {
       'k-state-invalid': !isValid
     });
     var wrapperClassNames = classNames('k-picker-wrap', {
-      'k-state-default': !disabled,
       'k-state-disabled': disabled,
       'k-state-focused': this.isFocused
     });
@@ -573,13 +581,14 @@ var DateTimePicker = {
         }
       }, 200);
     },
-    handleDateIconClick: function handleDateIconClick() {
+    handleDateIconClick: function handleDateIconClick(event) {
       if (this.$props.disabled) {
         return;
       }
 
       this.shouldFocusDateInput = true;
       this.setShow(!this.computedShow);
+      this.$emit('iconclick', event);
     },
     handleIconMouseDown: function handleIconMouseDown(event) {
       event.preventDefault();

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

@@ -100,6 +100,10 @@ export interface DateTimePickerSettings {
      * Fires each time the user focuses any of the DateTimePicker elements.
      */
     focus?: (event: any) => void;
+    /**
+     * Fires when the icon element is clicked.
+     */
+    iconclick?: (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: 1633441296,
+    publishDate: 1634279548,
     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/TimePicker.js

@@ -37,6 +37,7 @@ var TimePicker = {
   emits: {
     'changemodel': null,
     'update:modelValue': null,
+    'iconclick': null,
     'change': null,
     'focus': null,
     'blur': null
@@ -218,7 +219,7 @@ var TimePicker = {
 
     this._dateInput = this.v3 ? this.dateInputRef : this.$refs.dateInput;
     this._timeSelector = this.$refs.timeSelector;
-    this._wrapper = this.$refs[this._anchor];
+    this._wrapper = this.v3 ? this.kendoAnchorRef : this.$refs[this._anchor];
 
     if (this._dateInput && this._dateInput.element()) {
       this._dateInput.element().setAttribute('aria-haspopup', 'true');
@@ -229,7 +230,7 @@ var TimePicker = {
   updated: function updated() {
     this._dateInput = this.v3 ? this.dateInputRef : this.$refs.dateInput;
     this._timeSelector = this.$refs.timeSelector;
-    this._wrapper = this.$refs[this._anchor];
+    this._wrapper = this.v3 ? this.kendoAnchorRef : this.$refs[this._anchor];
 
     if (this._dateInput && this._dateInput.element()) {
       this._dateInput.element().setAttribute('aria-expanded', "" + this.computedShow);
@@ -287,7 +288,6 @@ var TimePicker = {
     var isValid = !this.$props.validityStyles || this.validity().valid;
     var rootClassName = classNames('k-widget k-timepicker');
     var wrapperClassNames = classNames('k-picker-wrap', {
-      'k-state-default': !disabled && isValid,
       'k-state-invalid': !isValid,
       'k-state-disabled': disabled,
       'k-state-focused': this.isFocused
@@ -586,13 +586,14 @@ var TimePicker = {
     handleValueReject: function handleValueReject(_) {
       this.setShow(false);
     },
-    handleIconClick: function handleIconClick(_) {
+    handleIconClick: function handleIconClick(event) {
       if (this.$props.disabled) {
         return;
       }
 
       this.shouldFocusDateInput = true;
       this.setShow(!this.computedShow);
+      this.$emit('iconclick', event);
     },
     handleIconMouseDown: function handleIconMouseDown(event) {
       event.preventDefault();

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

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

package/dist/npm/datepicker/DatePicker.js

@@ -54,6 +54,7 @@ var DatePicker = {
     'change': null,
     'changemodel': null,
     'update:modelValue': null,
+    'iconclick': null,
     'focus': null,
     'blur': null
   },
@@ -254,7 +255,6 @@ var DatePicker = {
       get: function get() {
         var disabled = this.$props.disabled;
         return {
-          'k-state-default': !disabled,
           'k-state-disabled': disabled,
           'k-state-focused': this.$data.isFocused
         };
@@ -375,6 +375,7 @@ var DatePicker = {
 
       this.$data.shouldFocusDateInput = true;
       this.setShow(!this.computedShow);
+      this.$emit('iconclick', event);
     },
     handleIconMouseDown: function handleIconMouseDown(event) {
       event.stopPropagation();

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

@@ -17,6 +17,10 @@ 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;
+    /**
+     * Fires when the icon element is clicked.
+     */
+    iconclick?: (event: any) => void;
     /**
      * Renders a floating label for the DatePicker.
      */

package/dist/npm/datetimepicker/DateTimePicker.js

@@ -41,6 +41,15 @@ var utils_3 = require("../dateinput/utils"); // tslint:enable:max-line-length
 
 var DateTimePicker = {
   name: 'KendoDateTimePicker',
+  // @ts-ignore
+  emits: {
+    'changemodel': null,
+    'update:modelValue': null,
+    'iconclick': null,
+    'change': null,
+    'focus': null,
+    'blur': null
+  },
   props: {
     modelValue: {
       type: Date,
@@ -223,7 +232,7 @@ var DateTimePicker = {
 
     var dateInputElement = this.dateInputElement();
     this._dateTimeSelector = this.$refs.dateTimeSelector;
-    this._wrapper = this.$refs[this._anchor];
+    this._wrapper = this.v3 ? this.kendoAnchorRef : this.$refs[this._anchor];
     this._dateInput = this.v3 ? this.dateInputRef : this.$refs.dateInput;
 
     if (dateInputElement) {
@@ -234,7 +243,7 @@ var DateTimePicker = {
   updated: function updated() {
     var dateInputElement = this.dateInputElement();
     this._dateTimeSelector = this.$refs.dateTimeSelector;
-    this._wrapper = this.$refs[this._anchor];
+    this._wrapper = this.v3 ? this.kendoAnchorRef : this.$refs[this._anchor];
 
     if (dateInputElement) {
       dateInputElement.setAttribute('aria-expanded', "" + this.computedShow);
@@ -302,7 +311,6 @@ var DateTimePicker = {
       'k-state-invalid': !isValid
     });
     var wrapperClassNames = kendo_vue_common_1.classNames('k-picker-wrap', {
-      'k-state-default': !disabled,
       'k-state-disabled': disabled,
       'k-state-focused': this.isFocused
     });
@@ -594,13 +602,14 @@ var DateTimePicker = {
         }
       }, 200);
     },
-    handleDateIconClick: function handleDateIconClick() {
+    handleDateIconClick: function handleDateIconClick(event) {
       if (this.$props.disabled) {
         return;
       }
 
       this.shouldFocusDateInput = true;
       this.setShow(!this.computedShow);
+      this.$emit('iconclick', event);
     },
     handleIconMouseDown: function handleIconMouseDown(event) {
       event.preventDefault();

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

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

package/dist/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-vue-dateinputs',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1633441296,
+    publishDate: 1634279548,
     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/npm/timepicker/TimePicker.js

@@ -56,6 +56,7 @@ var TimePicker = {
   emits: {
     'changemodel': null,
     'update:modelValue': null,
+    'iconclick': null,
     'change': null,
     'focus': null,
     'blur': null
@@ -237,7 +238,7 @@ var TimePicker = {
 
     this._dateInput = this.v3 ? this.dateInputRef : this.$refs.dateInput;
     this._timeSelector = this.$refs.timeSelector;
-    this._wrapper = this.$refs[this._anchor];
+    this._wrapper = this.v3 ? this.kendoAnchorRef : this.$refs[this._anchor];
 
     if (this._dateInput && this._dateInput.element()) {
       this._dateInput.element().setAttribute('aria-haspopup', 'true');
@@ -248,7 +249,7 @@ var TimePicker = {
   updated: function updated() {
     this._dateInput = this.v3 ? this.dateInputRef : this.$refs.dateInput;
     this._timeSelector = this.$refs.timeSelector;
-    this._wrapper = this.$refs[this._anchor];
+    this._wrapper = this.v3 ? this.kendoAnchorRef : this.$refs[this._anchor];
 
     if (this._dateInput && this._dateInput.element()) {
       this._dateInput.element().setAttribute('aria-expanded', "" + this.computedShow);
@@ -306,7 +307,6 @@ var TimePicker = {
     var isValid = !this.$props.validityStyles || this.validity().valid;
     var rootClassName = kendo_vue_common_1.classNames('k-widget k-timepicker');
     var wrapperClassNames = kendo_vue_common_1.classNames('k-picker-wrap', {
-      'k-state-default': !disabled && isValid,
       'k-state-invalid': !isValid,
       'k-state-disabled': disabled,
       'k-state-focused': this.isFocused
@@ -605,13 +605,14 @@ var TimePicker = {
     handleValueReject: function handleValueReject(_) {
       this.setShow(false);
     },
-    handleIconClick: function handleIconClick(_) {
+    handleIconClick: function handleIconClick(event) {
       if (this.$props.disabled) {
         return;
       }
 
       this.shouldFocusDateInput = true;
       this.setShow(!this.computedShow);
+      this.$emit('iconclick', event);
     },
     handleIconMouseDown: function handleIconMouseDown(event) {
       event.preventDefault();

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

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-vue-dateinputs",
   "description": "Kendo UI for Vue Date Inputs package",
-  "version": "2.5.1-dev.202110051346",
+  "version": "2.5.2-dev.202110150637",
   "repository": {
     "type": "git",
     "url": "https://github.com/telerik/kendo-vue.git"
@@ -46,16 +46,16 @@
   },
   "dependencies": {
     "@progress/kendo-date-math": "1.5.1",
-    "@progress/kendo-vue-buttons": "2.5.1-dev.202110051346",
-    "@progress/kendo-vue-common": "2.5.1-dev.202110051346",
-    "@progress/kendo-vue-labels": "2.5.1-dev.202110051346",
-    "@progress/kendo-vue-popup": "2.5.1-dev.202110051346"
+    "@progress/kendo-vue-buttons": "2.5.2-dev.202110150637",
+    "@progress/kendo-vue-common": "2.5.2-dev.202110150637",
+    "@progress/kendo-vue-labels": "2.5.2-dev.202110150637",
+    "@progress/kendo-vue-popup": "2.5.2-dev.202110150637"
   },
   "devDependencies": {
     "@progress/kendo-data-query": "^1.5.4",
     "@progress/kendo-licensing": "^1.1.0",
-    "@progress/kendo-vue-dropdowns": "2.5.1-dev.202110051346",
-    "@progress/kendo-vue-intl": "2.5.1-dev.202110051346"
+    "@progress/kendo-vue-dropdowns": "2.5.2-dev.202110150637",
+    "@progress/kendo-vue-intl": "2.5.2-dev.202110150637"
   },
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",