@progress/kendo-vue-dateinputs 2.5.0-dev.202109140519 → 2.5.1-dev.202110051346

package/dist/es/calendar/components/CalendarCell.d.ts

@@ -15,6 +15,7 @@ export interface CalendarCellProps extends CellContext {
  * @hidden
  */
 export interface CalendarCellMethods {
+    [key: string]: any;
     handleClick?: (e: any) => void;
     handleMouseDown?: (e: any) => void;
     handleMouseEnter?: () => void;

package/dist/es/calendar/components/CalendarHeaderTitle.d.ts

@@ -15,6 +15,7 @@ export interface CalendarHeaderTitleProps {
  * @hidden
  */
 export interface CalendarHeaderTitleMethods {
+    [key: string]: any;
     handleClick: (e: any) => void;
 }
 /**

package/dist/es/calendar/components/Header.d.ts

@@ -33,6 +33,7 @@ export interface HeaderProps {
  * @hidden
  */
 export interface HeaderMethods {
+    [key: string]: any;
     getTitle: () => string;
     handleTitleClick: (event: any) => void;
     handleTodayClick: (event: any) => void;
@@ -47,6 +48,7 @@ export interface HeaderMethods {
  * @hidden
  */
 export interface HeaderComputed {
+    [key: string]: any;
     navigate?: () => void;
     todayIsInRange?: () => boolean;
 }

package/dist/es/calendar/components/View.d.ts

@@ -61,6 +61,7 @@ export interface ViewProps {
  * @hidden
  */
 export interface ViewComputed {
+    [key: string]: any;
     isMonthView?: boolean;
     weekNumber?: boolean;
     isHorizontal?: boolean;
@@ -69,6 +70,7 @@ export interface ViewComputed {
  * @hidden
  */
 export interface ViewMethods {
+    [key: string]: any;
     buildWeekNumber: (row: any, idx: number) => void;
     buildRow: (row: any) => void;
     firstDate: (row: any) => any;

package/dist/es/calendar/components/ViewList.d.ts

@@ -69,6 +69,7 @@ export interface ViewListState {
  * @hidden
  */
 export interface ViewListComputed {
+    [key: string]: any;
     weekNames?: string[];
     weekNumber?: boolean;
     animate?: boolean;
@@ -77,6 +78,7 @@ export interface ViewListComputed {
  * @hidden
  */
 export interface ViewListMethods {
+    [key: string]: any;
     blurActiveDate: () => void;
     focusActiveDate: (event: any) => void;
     handleCellEnter: (event: any) => void;

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

@@ -227,7 +227,7 @@ var ViewList = {
   render: function render(createElement) {
     var h = gh || createElement;
     var selectionRange = this.$props.allowReverse ? this.rotateSelectionRange(this.$props.selectionRange) : this.$props.selectionRange;
-    var rootClassNames = classNames('k-calendar-view', 'k-hstck k-align-items-start k-justify-content-center', {
+    var rootClassNames = classNames('k-calendar-view', 'k-hstack k-align-items-start k-justify-content-center', {
       'k-calendar-monthview': this.$props.activeView === CalendarViewEnum.month,
       'k-calendar-yearview': this.$props.activeView === CalendarViewEnum.year,
       'k-calendar-decadeview': this.$props.activeView === CalendarViewEnum.decade,

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

@@ -3,6 +3,7 @@ import { SelectionRangeEnd } from '../../models';
  * @hidden
  */
 export interface CalendarComputed {
+    [key: string]: any;
     activeRange?: SelectionRangeEnd;
     currentMin: Date;
     currentMax: Date;

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

@@ -4,6 +4,7 @@ import { ViewListEventArguments } from '../ViewList';
  * @hidden
  */
 export interface CalendarMethods {
+    [key: string]: any;
     computedValue: () => Date | Date[] | SelectionRange | null;
     focus: (event?: any) => void;
     handleTodayClick: (e: any) => void;

package/dist/es/dateinput/DateInput.js

@@ -23,11 +23,12 @@ import { provideIntlService, provideLocalizationService } from '@progress/kendo-
 import { KendoDate } from './models';
 import { guid, noop, validatePackage, canUseDOM } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata';
-import { approximateStringMatching, defaultFormat, defaultFormatPlaceholder, isInRange, invalidClasses, wrapperClasses } from './utils';
+import { approximateStringMatching, defaultFormat, defaultFormatPlaceholder, isInRange, wrapperClasses } from './utils';
 import { MAX_DATE, MIN_DATE } from './../utils';
 import { messages, increaseValue, decreaseValue } from './../messages';
 import { isInTimeRange } from '../timepicker/utils';
 import { MIN_TIME, MAX_TIME } from '../defaults';
+import { FloatingLabel } from '@progress/kendo-vue-labels';
 var VALIDATION_MESSAGE = 'Please enter a valid value!';
 var DateInput = {
   name: 'DateInput',
@@ -130,9 +131,9 @@ var DateInput = {
       currentFormat: undefined,
       valueDuringOnChange: undefined,
       hasMounted: false,
-      focused: false,
       isEmpty: undefined,
-      lastSelectedSymbol: undefined
+      lastSelectedSymbol: undefined,
+      isFocused: false
     };
   },
   created: function created() {
@@ -159,14 +160,15 @@ var DateInput = {
         return this.kendoDate && this.kendoDate.getDateObject();
       }
     },
-    spanClassNames: {
+    wrapperClassNames: {
       get: function get() {
         var isValid = !this.$data.hasMounted || !this.$props.validityStyles || this.validity().valid;
+        var disabled = this.$props.disabled;
         return {
-          'k-floating-label-container': true,
-          'k-state-focused': this.$data.focused,
-          'k-state-empty': this.$data.isEmpty && this.$props.placeholder === '',
+          'k-dateinput-wrap': true,
+          'k-state-disabled': disabled,
           'k-state-invalid': !isValid && isValid !== undefined,
+          'k-state-focused': this.isFocused,
           'k-rtl': this.$props.dir === 'rtl'
         };
       }
@@ -198,11 +200,11 @@ var DateInput = {
       }
     },
     handleFocus: function handleFocus(e) {
-      this.$data.focused = true;
+      this.$data.isFocused = true;
       this.$emit('focus', e);
     },
     handleBlur: function handleBlur(e) {
-      this.$data.focused = false;
+      this.$data.isFocused = false;
       this.$emit('blur', e);
     },
     intl: function intl() {
@@ -542,7 +544,7 @@ var DateInput = {
 
     this.$data.currentFormat = currentFormat;
     this.$data.isEmpty = currentText === this._emptyText;
-    var showPlaceHolder = this.$props.placeholder !== undefined && this.$data.isEmpty && !this.$data.focused;
+    var showPlaceHolder = this.$props.placeholder !== undefined && this.$data.isEmpty && !this.$data.isFocused;
     var textToDisplay = !showPlaceHolder ? currentText : null;
     var inputId = id || this._inputId;
     var isValid = !this.$props.validityStyles || this.validity().valid;
@@ -558,9 +560,9 @@ var DateInput = {
       attrs: this.v3 ? undefined : {
         dir: this.$props.dir
       },
-      "class": isValid ? wrapperClassesInstance.join(' ') : Array.prototype.concat([], wrapperClassesInstance, invalidClasses).join(' ')
+      "class": wrapperClassesInstance.join(' ')
     }, [h("span", {
-      "class": 'k-dateinput-wrap' + (this.$props.disabled ? ' k-state-disabled' : '')
+      "class": this.wrapperClassNames
     }, [h("input", {
       role: "spinbutton",
       attrs: this.v3 ? undefined : {
@@ -653,21 +655,25 @@ var DateInput = {
     }, [h("span", {
       "class": "k-icon k-i-arrow-s"
     })])])])]);
-    return label ? h("span", {
-      "class": this.spanClassNames,
-      dir: this.$props.dir,
-      attrs: this.v3 ? undefined : {
-        dir: this.$props.dir
-      }
-    }, [dateinput, this.$props.label ? inputId ? h("label", {
-      "for": inputId,
+    return label ? // @ts-ignore function children
+    h(FloatingLabel, {
+      label: label,
       attrs: this.v3 ? undefined : {
-        "for": inputId
+        label: label,
+        editorId: inputId,
+        editorValue: textToDisplay,
+        editorPlaceholder: this.$props.placeholder,
+        editorValid: isValid,
+        editorDisabled: this.$props.disabled
       },
-      "class": "k-label"
-    }, [this.$props.label]) : h("span", {
-      "class": "k-label"
-    }, [this.$props.label]) : null]) : dateinput;
+      editorId: inputId,
+      editorValue: textToDisplay,
+      editorPlaceholder: this.$props.placeholder,
+      editorValid: isValid,
+      editorDisabled: this.$props.disabled
+    }, this.v3 ? function () {
+      return [dateinput];
+    } : [dateinput]) : dateinput;
   }
 };
 var DateInputVue3 = DateInput;

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

@@ -2,6 +2,7 @@
  * @hidden
  */
 export interface DateInputComputed {
+    [key: string]: any;
     computedValue: any;
-    spanClassNames: any;
+    wrapperClassNames: object;
 }

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

@@ -7,4 +7,5 @@ export interface DateInputData {
     currentFormat: string;
     valueDuringOnChange: Date | null | undefined;
     lastSelectedSymbol: string;
+    isFocused: boolean;
 }

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

@@ -5,6 +5,7 @@ import { Selection } from '../models';
  * @hidden
  */
 export interface DateInputMethods {
+    [key: string]: any;
     handleFocus?: (_: any) => void;
     handleBlur?: (_: any) => void;
     element: () => HTMLInputElement | null;

package/dist/es/datepicker/DatePicker.js

@@ -15,7 +15,8 @@ import { isInDateRange } from '../utils';
 import { messages, toggleCalendar } from '../messages';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { ToggleButton } from './ToggleButton';
-import { PickerWrap } from '../common/PickerWrap'; // tslint:enable:max-line-length
+import { PickerWrap } from '../common/PickerWrap';
+import { FloatingLabel } from '@progress/kendo-vue-labels'; // tslint:enable:max-line-length
 
 var DatePicker = {
   name: 'DatePicker',
@@ -70,6 +71,7 @@ var DatePicker = {
         return undefined;
       }
     },
+    label: String,
     placeholder: String,
     popup: {
       type: [String, Object, Function],
@@ -316,6 +318,9 @@ var DatePicker = {
       var value = this.mergeTime(event.value);
       this.handleValueChange(value, event);
     },
+    getDateInputText: function getDateInputText() {
+      return this._dateInput ? this._dateInput._element.value : '';
+    },
     handleValueChange: function handleValueChange(value, event) {
       this.$data.currentValue = cloneDate(value || undefined);
       this.$data.currentShow = false;
@@ -467,7 +472,6 @@ var DatePicker = {
       placeholder: this.$props.placeholder,
       attrs: this.v3 ? undefined : {
         placeholder: this.$props.placeholder,
-        label: this.$props.label,
         disabled: disabled,
         format: format,
         formatPlaceholder: formatPlaceholder,
@@ -483,7 +487,6 @@ var DatePicker = {
         validityStyles: validityStyles,
         value: value
       },
-      label: this.$props.label,
       disabled: disabled,
       format: format,
       formatPlaceholder: formatPlaceholder,
@@ -601,7 +604,7 @@ var DatePicker = {
       defaultRendering: popupDefaultRendering,
       defaultSlots: calendarRendering
     });
-    return h("span", {
+    var datepicker = h("span", {
       ref: this.v3 ? function (el) {
         _this.kendoAnchorRef = el;
       } : this._anchor,
@@ -621,6 +624,28 @@ var DatePicker = {
       onFocusin: this.handleFocus,
       onFocusout: this.handleBlur
     }, [pickerWrapRendering, popupRendering]);
+    return this.$props.label ? // @ts-ignore function children
+    h(FloatingLabel, {
+      label: this.$props.label,
+      attrs: this.v3 ? undefined : {
+        label: this.$props.label,
+        editorId: id,
+        editorValid: isValid,
+        editorValue: this.getDateInputText(),
+        editorPlaceholder: this.$props.placeholder,
+        editorDisabled: this.$props.disabled
+      },
+      editorId: id,
+      editorValid: isValid,
+      editorValue: this.getDateInputText(),
+      editorPlaceholder: this.$props.placeholder,
+      editorDisabled: this.$props.disabled,
+      style: {
+        width: width
+      }
+    }, this.v3 ? function () {
+      return [datepicker];
+    } : [datepicker]) : datepicker;
   }
 };
 var DatePickerVue3 = DatePicker;

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

@@ -2,6 +2,7 @@
  * @hidden
  */
 export interface DatePickerComputed {
+    [key: string]: any;
     computedValue: Date | null;
     computedShow: boolean;
     wrapperClassNames: object;

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

@@ -5,6 +5,7 @@ import { DatePickerState } from './DatePickerState';
  * @hidden
  */
 export interface DatePickerMethods {
+    [key: string]: any;
     emitBlur?: (_: any) => void;
     validity: () => FormComponentValidity;
     nextValue: (nextProps: DatePickerProps, nextState: DatePickerState) => any;
@@ -18,6 +19,7 @@ export interface DatePickerMethods {
     handleBlur: (event: any) => void;
     calendarFocus: (event: any) => void;
     calendarBlur: (event: any) => void;
+    getDateInputText: () => string;
     createBlurTimeout: () => void;
     handleIconClick: () => void;
     handleIconMouseDown: (event: any) => void;

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;
+    /**
+     * Renders a floating label for the DatePicker.
+     */
+    label?: string;
     /**
      * Specifies the value of the placeholder.
      */

package/dist/es/datetimepicker/DateTimePicker.d.ts

@@ -51,6 +51,7 @@ export interface DateTimePickerData {
     valueDuringOnChange?: Date | null;
     showDuringOnChange?: boolean;
     shouldFocusDateInput: boolean;
+    isFocused: boolean;
 }
 /**
  * @hidden
@@ -59,6 +60,7 @@ export interface DateTimePickerState {
     _popupId: string;
     _wrapper: any;
     _dateInput: any;
+    dateInputRef: any;
     _dateTimeSelector: any;
     _anchor: any;
     _oldShow: boolean;
@@ -70,6 +72,7 @@ export interface DateTimePickerState {
  * @hidden
  */
 export interface DateTimePickerComputed {
+    [key: string]: any;
     computedValue: Date | null;
     computedShow: boolean;
 }
@@ -77,6 +80,7 @@ export interface DateTimePickerComputed {
  * @hidden
  */
 export interface DateTimePickerMethods {
+    [key: string]: any;
     validity: () => FormComponentValidity;
     focus: () => void;
     setShow: (show: boolean) => void;
@@ -91,6 +95,7 @@ export interface DateTimePickerMethods {
     timeSelectorBlur: (event: any) => void;
     timeSelectorFocus: () => void;
     createBlurTimeout: () => void;
+    getDateInputText: () => string;
 }
 /**
  * @hidden

package/dist/es/datetimepicker/DateTimePicker.js

@@ -4,6 +4,7 @@ var allVue = Vue;
 var gh = allVue.h;
 var ref = allVue.ref;
 var inject = allVue.inject;
+import { FloatingLabel } from '@progress/kendo-vue-labels';
 import { Popup } from '@progress/kendo-vue-popup';
 import { cloneDate } from '@progress/kendo-date-math';
 import { classNames, guid, Keys, templateRendering, getListeners, getTemplate, validatePackage, canUseDOM } from '@progress/kendo-vue-common';
@@ -95,6 +96,7 @@ var DateTimePicker = {
       }
     },
     name: String,
+    label: String,
     placeholder: String,
     popupSettings: {
       type: Object,
@@ -171,7 +173,8 @@ var DateTimePicker = {
       currentShow: false,
       valueDuringOnChange: undefined,
       showDuringOnChange: undefined,
-      shouldFocusDateInput: false
+      shouldFocusDateInput: false,
+      isFocused: false
     };
   },
   computed: {
@@ -200,6 +203,7 @@ var DateTimePicker = {
     var dateInputElement = this.dateInputElement();
     this._dateTimeSelector = this.$refs.dateTimeSelector;
     this._wrapper = this.$refs[this._anchor];
+    this._dateInput = this.v3 ? this.dateInputRef : this.$refs.dateInput;
 
     if (dateInputElement) {
       dateInputElement.setAttribute('aria-haspopup', 'true');
@@ -278,12 +282,15 @@ var DateTimePicker = {
     });
     var wrapperClassNames = classNames('k-picker-wrap', {
       'k-state-default': !disabled,
-      'k-state-disabled': disabled
+      'k-state-disabled': disabled,
+      'k-state-focused': this.isFocused
     });
     var dateInput = this.$props.dateInput ? templateRendering.call(this, this.$props.dateInput, getListeners.call(this)) : undefined;
     var dateInputDefaultRendering = // @ts-ignore  function children
     h(DateInput, {
-      ref: 'dateInput',
+      ref: this.v3 ? function (el) {
+        _this.dateInputRef = el;
+      } : 'dateInput',
       placeholder: placeholder,
       attrs: this.v3 ? undefined : {
         placeholder: placeholder,
@@ -419,7 +426,7 @@ var DateTimePicker = {
       defaultRendering: popupDefaultRendering,
       defaultSlots: dataTimeSelector
     });
-    return h("div", {
+    var dateTimePicker = h("div", {
       "class": rootClassName,
       onKeydown: this.handleKeyDown,
       on: this.v3 ? undefined : {
@@ -460,6 +467,28 @@ var DateTimePicker = {
     }, [h("span", {
       "class": "k-icon k-i-calendar"
     })])])]), popupRendering]);
+    return this.$props.label ? // @ts-ignore function children
+    h(FloatingLabel, {
+      label: this.$props.label,
+      attrs: this.v3 ? undefined : {
+        label: this.$props.label,
+        editorId: id,
+        editorValid: isValid,
+        editorValue: this.getDateInputText(),
+        editorPlaceholder: this.$props.placeholder,
+        editorDisabled: this.$props.disabled
+      },
+      editorId: id,
+      editorValid: isValid,
+      editorValue: this.getDateInputText(),
+      editorPlaceholder: this.$props.placeholder,
+      editorDisabled: this.$props.disabled,
+      style: {
+        width: width
+      }
+    }, this.v3 ? function () {
+      return [dateTimePicker];
+    } : [dateTimePicker]) : dateTimePicker;
   },
   methods: {
     validity: function validity() {
@@ -475,6 +504,9 @@ var DateTimePicker = {
         valueMissing: this.computedValue === null
       };
     },
+    getDateInputText: function getDateInputText() {
+      return this._dateInput ? this._dateInput._element.value : '';
+    },
     focus: function focus() {
       var dateInputElement = this.dateInputElement();
 
@@ -515,10 +547,7 @@ var DateTimePicker = {
       this.showDuringOnChange = undefined;
     },
     handleFocus: function handleFocus(event) {
-      if (this._wrapper) {
-        this._wrapper.classList.add('k-state-focused');
-      }
-
+      this.isFocused = true;
       this.$emit('focus', event);
     },
     handleBlur: function handleBlur(event) {
@@ -537,9 +566,7 @@ var DateTimePicker = {
       var _this = this;
 
       this._blurTimeout = setTimeout(function () {
-        if (_this._wrapper) {
-          _this._wrapper.classList.remove('k-state-focused');
-        }
+        _this.isFocused = false;
 
         if (_this._dateInput && canUseDOM && document.activeElement !== _this._dateInput.element() && document.activeElement && document.activeElement.className.indexOf('k-time-list') === -1) {
           _this.setShow(false);

package/dist/es/datetimepicker/DateTimeSelector.d.ts

@@ -63,6 +63,7 @@ export interface DateTimeSelectorState {
  * @hidden
  */
 export interface DateTimeSelectorComputed {
+    [key: string]: any;
     hasDateValue: boolean;
     computedMinTime: Date | null;
     computedMaxTime: Date | null;
@@ -71,6 +72,7 @@ export interface DateTimeSelectorComputed {
  * @hidden
  */
 export interface DateTimeSelectorMethods {
+    [key: string]: any;
     focus: (args?: any) => void;
     calendarElement: () => any;
     normalizeRange: (candidate: Date, value: Date | null) => Date | null;

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

@@ -74,6 +74,10 @@ export interface DateTimePickerSettings {
      * Specifies the `name` property of the `input` DOM element.
      */
     name?: string;
+    /**
+     * Renders a floating label for the DateTimePicker.
+     */
+    label?: string;
     /**
      * Specifies the value of the placeholder.
      */
@@ -132,4 +136,9 @@ export interface DateTimePickerSettings {
      * Specifies the validate of the DateTimePicker.
      */
     validate?: boolean;
+    /**
+     * Controls the form error message of the component. If set to an empty string, no error will be thrown.
+     *
+     */
+    validationMessage?: string;
 }

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: 1631596578,
+    publishDate: 1633441296,
     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/TimeList.d.ts

@@ -46,6 +46,7 @@ export interface TimeListState {
  * @hidden
  */
 export interface TimeListComputed {
+    [key: string]: any;
     animate: boolean;
 }
 /**
@@ -58,6 +59,7 @@ export interface TimeListData {
  * @hidden
  */
 export interface TimeListMethods {
+    [key: string]: any;
     focus: (args?: any) => void;
     itemOffset: (scrollTop: number) => number;
     calculateHeights: () => void;

package/dist/es/timepicker/TimePart.d.ts

@@ -58,6 +58,7 @@ export interface TimePartData {
  * @hidden
  */
 export interface TimePartComputed {
+    [key: string]: any;
     element: HTMLSpanElement | null;
     computedValue: Date;
     intl: IntlService;
@@ -68,6 +69,7 @@ export interface TimePartComputed {
  * @hidden
  */
 export interface TimePartMethods {
+    [key: string]: any;
     focus: (args?: any) => void;
     timeFormatReducer: (acc: string, current: DateFormatPart) => any;
     timeFormatFilter: (part: DateFormatPart, index: number, all: DateFormatPart[]) => boolean;

package/dist/es/timepicker/TimePicker.d.ts

@@ -47,6 +47,7 @@ export interface TimePickerState {
     _popupId: string;
     _element: HTMLSpanElement | null;
     _dateInput: any;
+    dateInputRef: any;
     _timeSelector: any;
     _wrapper: any;
     _anchor: any;
@@ -62,6 +63,7 @@ export interface TimePickerState {
  * @hidden
  */
 export interface TimePickerMethods {
+    [key: string]: any;
     validity: () => FormComponentValidity;
     focus: () => void;
     setDateInputRef: (dateInput: any) => void;
@@ -82,6 +84,7 @@ export interface TimePickerMethods {
     timeFocus: (event: any) => void;
     timeBlur: (event: any) => void;
     createBlurTimeout: () => void;
+    getDateInputText: () => string;
 }
 /**
  * @hidden
@@ -89,11 +92,13 @@ export interface TimePickerMethods {
 export interface TimePickerData {
     currentValue: Date | null;
     currentShow: boolean;
+    isFocused: boolean;
 }
 /**
  * @hidden
  */
 export interface TimePickerComputed {
+    [key: string]: any;
     timeSelector: any;
     computedValue: Date | null;
     computedShow: boolean;