@progress/kendo-vue-dateinputs 3.7.4-dev.202212020747 → 3.7.4-dev.202301091431

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

@@ -13,6 +13,7 @@ import { Action } from '../models/main';
 import { getToday, isInRange, dateInRange, MAX_DATE } from '../../utils';
 import { MIN_DATE } from '../../defaults';
 import { classNames, Keys, getTemplate } from '@progress/kendo-vue-common';
+import { chevronLeftIcon, chevronRightIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -207,6 +208,7 @@ var HeaderVue2 = {
       attrs: this.v3 ? undefined : {
         type: "button",
         icon: 'chevron-left',
+        svgIcon: chevronLeftIcon,
         size: this.$props.size,
         fillMode: 'flat',
         desabled: isPrevDisabled,
@@ -214,6 +216,7 @@ var HeaderVue2 = {
         title: prevViewTitle
       },
       icon: 'chevron-left',
+      svgIcon: chevronLeftIcon,
       size: this.$props.size,
       fillMode: 'flat',
       "class": "k-calendar-nav-pre",
@@ -243,6 +246,7 @@ var HeaderVue2 = {
       attrs: this.v3 ? undefined : {
         type: "button",
         icon: 'chevron-right',
+        svgIcon: chevronRightIcon,
         size: this.$props.size,
         fillMode: 'flat',
         desabled: isNextDisabled,
@@ -250,6 +254,7 @@ var HeaderVue2 = {
         title: nextViewTittle
       },
       icon: 'chevron-right',
+      svgIcon: chevronRightIcon,
       size: this.$props.size,
       fillMode: 'flat',
       "class": "k-calendar-nav-next",

package/dist/es/dateinput/DateInput.js

@@ -17,6 +17,7 @@ import { messages, increaseValue, decreaseValue } from '../messages/main';
 import { isInTimeRange } from '../timepicker/utils';
 import { MIN_TIME, MAX_TIME } from '../defaults';
 import { FloatingLabel } from '@progress/kendo-vue-labels';
+import { caretAltDownIcon, caretAltUpIcon } from '@progress/kendo-svg-icons';
 var VALIDATION_MESSAGE = 'Please enter a valid value!';
 /**
  * @hidden
@@ -147,7 +148,7 @@ var DateInputVue2 = {
       default: undefined
     },
     ariaHasPopup: {
-      type: Boolean,
+      type: String,
       default: undefined
     }
   },
@@ -557,7 +558,8 @@ var DateInputVue2 = {
         "aria-label": ariaLabel,
         "aria-expanded": ariaExpanded,
         "aria-haspopup": ariaHasPopup,
-        "aria-controls": ariaControls
+        "aria-controls": ariaControls,
+        "aria-disabled": this.$props.disabled
       },
       tabindex: this.$props.tabIndex,
       disabled: this.$props.disabled,
@@ -594,6 +596,7 @@ var DateInputVue2 = {
       "aria-expanded": ariaExpanded,
       "aria-haspopup": ariaHasPopup,
       "aria-controls": ariaControls,
+      "aria-disabled": this.$props.disabled,
       ref: setRef(this, 'input')
     }), defaultSlot, this.$props.spinners && h("span", {
       "class": "k-input-spinner k-spin-button",
@@ -609,6 +612,7 @@ var DateInputVue2 = {
         type: "button",
         tabIndex: -1,
         icon: 'caret-alt-up',
+        svgIcon: caretAltUpIcon,
         size: this.$props.size,
         fillMode: this.$props.fillMode,
         "aria-label": localizationService.toLanguageString(increaseValue, messages[increaseValue]),
@@ -616,6 +620,7 @@ var DateInputVue2 = {
       },
       tabIndex: -1,
       icon: 'caret-alt-up',
+      svgIcon: caretAltUpIcon,
       size: this.$props.size,
       fillMode: this.$props.fillMode,
       "class": "k-spinner-increase",
@@ -633,6 +638,7 @@ var DateInputVue2 = {
         type: "button",
         tabIndex: -1,
         icon: 'caret-alt-down',
+        svgIcon: caretAltDownIcon,
         size: this.$props.size,
         fillMode: this.$props.fillMode,
         "aria-label": localizationService.toLanguageString(decreaseValue, messages[decreaseValue]),
@@ -641,6 +647,7 @@ var DateInputVue2 = {
       tabIndex: -1,
       "class": "k-spinner-decrease",
       icon: 'caret-alt-down',
+      svgIcon: caretAltDownIcon,
       size: this.$props.size,
       fillMode: this.$props.fillMode,
       "aria-label": localizationService.toLanguageString(decreaseValue, messages[decreaseValue]),

package/dist/es/dateinput/models/DateInputSettings.d.ts

@@ -79,7 +79,7 @@ export interface DateInputSettings {
     /**
      * Sets the aria-haspopup of the DateInput.
      */
-    ariaHasPopup?: boolean;
+    ariaHasPopup?: String;
     /**
      * Sets the aria-expanded of the DateInput.
      */

package/dist/es/datepicker/DatePicker.js

@@ -5,9 +5,10 @@ var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 var ref = allVue.ref;
 var inject = allVue.inject;
+import { calendarIcon } from '@progress/kendo-svg-icons';
 import { Popup } from '@progress/kendo-vue-popup';
 import { getDate, cloneDate } from '@progress/kendo-date-math';
-import { classNames, guid, Keys, templateRendering, getListeners, getTemplate, validatePackage, canUseDOM, kendoThemeMaps, getDefaultSlots, setRef, getRef } from '@progress/kendo-vue-common';
+import { classNames, guid, Keys, templateRendering, getListeners, getTemplate, validatePackage, canUseDOM, kendoThemeMaps, getDefaultSlots, setRef, getRef, Icon } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata';
 import { DateInput } from '../dateinput/DateInput';
 import { Calendar } from '../calendar/components/Calendar';
@@ -159,7 +160,8 @@ var DatePickerVue2 = {
     valid: {
       type: Boolean,
       default: undefined
-    }
+    },
+    ariaLabel: String
   },
   data: function data() {
     return {
@@ -398,7 +400,8 @@ var DatePickerVue2 = {
       validityStyles = _b.validityStyles,
       size = _b.size,
       fillMode = _b.fillMode,
-      rounded = _b.rounded;
+      rounded = _b.rounded,
+      ariaLabel = _b.ariaLabel;
     var _c = this.$props.popupSettings,
       popupClass = _c.popupClass,
       animate = _c.animate,
@@ -417,12 +420,14 @@ var DatePickerVue2 = {
         type: "button",
         tabIndex: -1,
         icon: "calendar",
+        svgIcon: calendarIcon,
         title: provideLocalizationService(this).toLanguageString(toggleCalendar, messages[toggleCalendar]),
         "aria-label": provideLocalizationService(this).toLanguageString(toggleCalendar, messages[toggleCalendar]),
         rounded: null
       },
       tabIndex: -1,
       icon: "calendar",
+      svgIcon: calendarIcon,
       onMousedown: this.handleIconMouseDown,
       on: this.v3 ? undefined : {
         "mousedown": this.handleIconMouseDown,
@@ -438,8 +443,13 @@ var DatePickerVue2 = {
       h: h,
       template: toggleButton,
       defaultRendering: toggleButtonDefaultRendering,
-      defaultSlots: h("span", {
-        "class": "k-icon k-i-calendar"
+      defaultSlots: h(Icon, {
+        name: "calendar",
+        attrs: this.v3 ? undefined : {
+          name: "calendar",
+          icon: calendarIcon
+        },
+        icon: calendarIcon
       }),
       additionalListeners: {
         click: this.handleIconClick
@@ -470,10 +480,11 @@ var DatePickerVue2 = {
         validationMessage: validationMessage,
         validityStyles: validityStyles,
         value: value,
-        ariaHasPopup: true,
+        ariaHasPopup: 'grid',
         ariaExpanded: show,
         ariaRole: "combobox",
-        ariaControls: this._popupId
+        ariaControls: this._popupId,
+        ariaLabel: ariaLabel
       },
       disabled: disabled,
       format: format,
@@ -496,10 +507,11 @@ var DatePickerVue2 = {
       validationMessage: validationMessage,
       validityStyles: validityStyles,
       value: value,
-      ariaHasPopup: true,
+      ariaHasPopup: 'grid',
       ariaExpanded: show,
       ariaRole: "combobox",
-      ariaControls: this._popupId
+      ariaControls: this._popupId,
+      ariaLabel: ariaLabel
     });
     var dateInputRendering = getTemplate.call(this, {
       h: h,

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

@@ -39,4 +39,8 @@ export interface DatePickerProps extends DatePickerSettings, FormComponentProps
      * Specifies the validate of the DatePicker.
      */
     validate?: boolean;
+    /**
+     * Specifies the validate of the DatePicker.
+     */
+    ariaLabel?: string;
 }

package/dist/es/daterangepicker/DateRangePicker.js

@@ -19,7 +19,7 @@ var ref = allVue.ref;
 var inject = allVue.inject;
 import { Popup } from '@progress/kendo-vue-popup';
 import { cloneDate } from '@progress/kendo-date-math';
-import { guid, Keys, canUseDOM, kendoThemeMaps } from '@progress/kendo-vue-common';
+import { guid, Keys, canUseDOM, kendoThemeMaps, Icon } from '@progress/kendo-vue-common';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { validatePackage, templateRendering, getListeners, getTemplate } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata';
@@ -28,6 +28,7 @@ import { Calendar } from '../calendar/components/Calendar';
 import { EMPTY_SELECTIONRANGE } from '../calendar/models/main';
 import { MIN_DATE, MAX_DATE } from '../defaults';
 import { swapStartEnd, start, end, separator, messages } from '../messages/main';
+import { arrowsSwapIcon } from '@progress/kendo-svg-icons';
 var WRAPPER_STYLES = {
   display: 'inline-block'
 };
@@ -260,7 +261,7 @@ var DateRangePickerVue2 = {
       size: size,
       fillMode: fillMode,
       rounded: rounded,
-      ariaHasPopup: true,
+      ariaHasPopup: 'grid',
       ariaExpanded: this.computedShow,
       value: value.start,
       ariaRole: 'combobox',
@@ -297,7 +298,7 @@ var DateRangePickerVue2 = {
       rounded: rounded,
       disabled: this.$props.disabled,
       valid: this.$props.valid,
-      ariaHasPopup: true,
+      ariaHasPopup: 'grid',
       ariaExpanded: this.computedShow,
       value: value.end,
       ariaRole: 'combobox',
@@ -409,11 +410,17 @@ var DateRangePickerVue2 = {
       onClick: this.handleReverseClick,
       "aria-controls": startDateInputId + ' ' + endDateInputId,
       "aria-label": provideLocalizationService(this).toLanguageString(swapStartEnd, messages[swapStartEnd])
-    }, [h("span", {
+    }, [h(Icon, {
+      name: 'arrows-swap',
+      attrs: this.v3 ? undefined : {
+        name: 'arrows-swap',
+        icon: arrowsSwapIcon
+      },
+      icon: arrowsSwapIcon,
       style: {
         transform: 'rotate(90deg)'
       },
-      "class": "k-icon k-button-icon k-i-arrows-swap"
+      "class": "k-button-icon"
     })]);
     return h("span", {
       "class": this.rootClassName,

package/dist/es/datetimepicker/DateTimePicker.js

@@ -19,6 +19,7 @@ import { DateTimeSelector } from './DateTimeSelector';
 import { isInTimeRange } from '../timepicker/utils';
 import { MIN_TIME } from '../defaults';
 import { defaultFormatPlaceholder } from '../dateinput/utils';
+import { calendarIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -338,7 +339,7 @@ var DateTimePickerVue2 = {
         validationMessage: validationMessage,
         validityStyles: validityStyles,
         value: this.computedValue,
-        ariaHasPopup: true,
+        ariaHasPopup: 'grid',
         ariaExpanded: this.computedShow,
         ariaRole: "combobox",
         ariaControls: this._popupId
@@ -369,7 +370,7 @@ var DateTimePickerVue2 = {
       validationMessage: validationMessage,
       validityStyles: validityStyles,
       value: this.computedValue,
-      ariaHasPopup: true,
+      ariaHasPopup: 'grid',
       ariaExpanded: this.computedShow,
       ariaRole: "combobox",
       ariaControls: this._popupId
@@ -493,6 +494,7 @@ var DateTimePickerVue2 = {
         type: "button",
         tabIndex: -1,
         icon: 'calendar',
+        svgIcon: calendarIcon,
         title: provideLocalizationService(this).toLanguageString(toggleDateTimeSelector, messages[toggleDateTimeSelector]),
         rounded: null,
         "aria-controls": this._popupId,
@@ -500,6 +502,7 @@ var DateTimePickerVue2 = {
       },
       tabIndex: -1,
       icon: 'calendar',
+      svgIcon: calendarIcon,
       onMousedown: this.handleIconMouseDown,
       on: this.v3 ? undefined : {
         "mousedown": this.handleIconMouseDown,

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: 1669966717,
+    publishDate: 1673273820,
     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

@@ -29,6 +29,7 @@ import { TimeSelector } from './TimeSelector';
 import { MIDNIGHT_DATE, MIN_TIME, MAX_TIME, setTime } from '../utils';
 import { isInRange, isSmallerThanMin, isBiggerThanMax } from './utils';
 import { defaultFormatPlaceholder } from '../dateinput/utils';
+import { clockIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -342,7 +343,7 @@ var TimePickerVue2 = {
         validationMessage: validationMessage,
         validityStyles: validityStyles,
         value: this.computedValue && this.normalizeTime(this.computedValue),
-        ariaHasPopup: true,
+        ariaHasPopup: 'grid',
         ariaExpanded: this.computedShow,
         ariaRole: "combobox",
         ariaControls: this._popupId
@@ -371,7 +372,7 @@ var TimePickerVue2 = {
       validationMessage: validationMessage,
       validityStyles: validityStyles,
       value: this.computedValue && this.normalizeTime(this.computedValue),
-      ariaHasPopup: true,
+      ariaHasPopup: 'grid',
       ariaExpanded: this.computedShow,
       ariaRole: "combobox",
       ariaControls: this._popupId
@@ -489,6 +490,7 @@ var TimePickerVue2 = {
         type: "button",
         tabIndex: -1,
         icon: 'clock',
+        svgIcon: clockIcon,
         title: toggleTimeMessage,
         rounded: null,
         "aria-controls": this._popupId,
@@ -496,6 +498,7 @@ var TimePickerVue2 = {
       },
       tabIndex: -1,
       icon: 'clock',
+      svgIcon: clockIcon,
       onMousedown: this.handleIconMouseDown,
       on: this.v3 ? undefined : {
         "mousedown": this.handleIconMouseDown,

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

@@ -13,6 +13,7 @@ import { Action } from '../models/main.js';
 import { getToday, isInRange, dateInRange, MAX_DATE } from '../../utils.js';
 import { MIN_DATE } from '../../defaults.js';
 import { classNames, Keys, getTemplate } from '@progress/kendo-vue-common';
+import { chevronLeftIcon, chevronRightIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -207,6 +208,7 @@ var HeaderVue2 = {
       attrs: this.v3 ? undefined : {
         type: "button",
         icon: 'chevron-left',
+        svgIcon: chevronLeftIcon,
         size: this.$props.size,
         fillMode: 'flat',
         desabled: isPrevDisabled,
@@ -214,6 +216,7 @@ var HeaderVue2 = {
         title: prevViewTitle
       },
       icon: 'chevron-left',
+      svgIcon: chevronLeftIcon,
       size: this.$props.size,
       fillMode: 'flat',
       "class": "k-calendar-nav-pre",
@@ -243,6 +246,7 @@ var HeaderVue2 = {
       attrs: this.v3 ? undefined : {
         type: "button",
         icon: 'chevron-right',
+        svgIcon: chevronRightIcon,
         size: this.$props.size,
         fillMode: 'flat',
         desabled: isNextDisabled,
@@ -250,6 +254,7 @@ var HeaderVue2 = {
         title: nextViewTittle
       },
       icon: 'chevron-right',
+      svgIcon: chevronRightIcon,
       size: this.$props.size,
       fillMode: 'flat',
       "class": "k-calendar-nav-next",

package/dist/esm/dateinput/DateInput.js

@@ -17,6 +17,7 @@ import { messages, increaseValue, decreaseValue } from '../messages/main.js';
 import { isInTimeRange } from '../timepicker/utils.js';
 import { MIN_TIME, MAX_TIME } from '../defaults.js';
 import { FloatingLabel } from '@progress/kendo-vue-labels';
+import { caretAltDownIcon, caretAltUpIcon } from '@progress/kendo-svg-icons';
 var VALIDATION_MESSAGE = 'Please enter a valid value!';
 /**
  * @hidden
@@ -147,7 +148,7 @@ var DateInputVue2 = {
       default: undefined
     },
     ariaHasPopup: {
-      type: Boolean,
+      type: String,
       default: undefined
     }
   },
@@ -557,7 +558,8 @@ var DateInputVue2 = {
         "aria-label": ariaLabel,
         "aria-expanded": ariaExpanded,
         "aria-haspopup": ariaHasPopup,
-        "aria-controls": ariaControls
+        "aria-controls": ariaControls,
+        "aria-disabled": this.$props.disabled
       },
       tabindex: this.$props.tabIndex,
       disabled: this.$props.disabled,
@@ -594,6 +596,7 @@ var DateInputVue2 = {
       "aria-expanded": ariaExpanded,
       "aria-haspopup": ariaHasPopup,
       "aria-controls": ariaControls,
+      "aria-disabled": this.$props.disabled,
       ref: setRef(this, 'input')
     }), defaultSlot, this.$props.spinners && h("span", {
       "class": "k-input-spinner k-spin-button",
@@ -609,6 +612,7 @@ var DateInputVue2 = {
         type: "button",
         tabIndex: -1,
         icon: 'caret-alt-up',
+        svgIcon: caretAltUpIcon,
         size: this.$props.size,
         fillMode: this.$props.fillMode,
         "aria-label": localizationService.toLanguageString(increaseValue, messages[increaseValue]),
@@ -616,6 +620,7 @@ var DateInputVue2 = {
       },
       tabIndex: -1,
       icon: 'caret-alt-up',
+      svgIcon: caretAltUpIcon,
       size: this.$props.size,
       fillMode: this.$props.fillMode,
       "class": "k-spinner-increase",
@@ -633,6 +638,7 @@ var DateInputVue2 = {
         type: "button",
         tabIndex: -1,
         icon: 'caret-alt-down',
+        svgIcon: caretAltDownIcon,
         size: this.$props.size,
         fillMode: this.$props.fillMode,
         "aria-label": localizationService.toLanguageString(decreaseValue, messages[decreaseValue]),
@@ -641,6 +647,7 @@ var DateInputVue2 = {
       tabIndex: -1,
       "class": "k-spinner-decrease",
       icon: 'caret-alt-down',
+      svgIcon: caretAltDownIcon,
       size: this.$props.size,
       fillMode: this.$props.fillMode,
       "aria-label": localizationService.toLanguageString(decreaseValue, messages[decreaseValue]),

package/dist/esm/dateinput/models/DateInputSettings.d.ts

@@ -79,7 +79,7 @@ export interface DateInputSettings {
     /**
      * Sets the aria-haspopup of the DateInput.
      */
-    ariaHasPopup?: boolean;
+    ariaHasPopup?: String;
     /**
      * Sets the aria-expanded of the DateInput.
      */

package/dist/esm/datepicker/DatePicker.js

@@ -5,9 +5,10 @@ var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 var ref = allVue.ref;
 var inject = allVue.inject;
+import { calendarIcon } from '@progress/kendo-svg-icons';
 import { Popup } from '@progress/kendo-vue-popup';
 import { getDate, cloneDate } from '@progress/kendo-date-math';
-import { classNames, guid, Keys, templateRendering, getListeners, getTemplate, validatePackage, canUseDOM, kendoThemeMaps, getDefaultSlots, setRef, getRef } from '@progress/kendo-vue-common';
+import { classNames, guid, Keys, templateRendering, getListeners, getTemplate, validatePackage, canUseDOM, kendoThemeMaps, getDefaultSlots, setRef, getRef, Icon } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata.js';
 import { DateInput } from '../dateinput/DateInput.js';
 import { Calendar } from '../calendar/components/Calendar.js';
@@ -159,7 +160,8 @@ var DatePickerVue2 = {
     valid: {
       type: Boolean,
       default: undefined
-    }
+    },
+    ariaLabel: String
   },
   data: function data() {
     return {
@@ -398,7 +400,8 @@ var DatePickerVue2 = {
       validityStyles = _b.validityStyles,
       size = _b.size,
       fillMode = _b.fillMode,
-      rounded = _b.rounded;
+      rounded = _b.rounded,
+      ariaLabel = _b.ariaLabel;
     var _c = this.$props.popupSettings,
       popupClass = _c.popupClass,
       animate = _c.animate,
@@ -417,12 +420,14 @@ var DatePickerVue2 = {
         type: "button",
         tabIndex: -1,
         icon: "calendar",
+        svgIcon: calendarIcon,
         title: provideLocalizationService(this).toLanguageString(toggleCalendar, messages[toggleCalendar]),
         "aria-label": provideLocalizationService(this).toLanguageString(toggleCalendar, messages[toggleCalendar]),
         rounded: null
       },
       tabIndex: -1,
       icon: "calendar",
+      svgIcon: calendarIcon,
       onMousedown: this.handleIconMouseDown,
       on: this.v3 ? undefined : {
         "mousedown": this.handleIconMouseDown,
@@ -438,8 +443,13 @@ var DatePickerVue2 = {
       h: h,
       template: toggleButton,
       defaultRendering: toggleButtonDefaultRendering,
-      defaultSlots: h("span", {
-        "class": "k-icon k-i-calendar"
+      defaultSlots: h(Icon, {
+        name: "calendar",
+        attrs: this.v3 ? undefined : {
+          name: "calendar",
+          icon: calendarIcon
+        },
+        icon: calendarIcon
       }),
       additionalListeners: {
         click: this.handleIconClick
@@ -470,10 +480,11 @@ var DatePickerVue2 = {
         validationMessage: validationMessage,
         validityStyles: validityStyles,
         value: value,
-        ariaHasPopup: true,
+        ariaHasPopup: 'grid',
         ariaExpanded: show,
         ariaRole: "combobox",
-        ariaControls: this._popupId
+        ariaControls: this._popupId,
+        ariaLabel: ariaLabel
       },
       disabled: disabled,
       format: format,
@@ -496,10 +507,11 @@ var DatePickerVue2 = {
       validationMessage: validationMessage,
       validityStyles: validityStyles,
       value: value,
-      ariaHasPopup: true,
+      ariaHasPopup: 'grid',
       ariaExpanded: show,
       ariaRole: "combobox",
-      ariaControls: this._popupId
+      ariaControls: this._popupId,
+      ariaLabel: ariaLabel
     });
     var dateInputRendering = getTemplate.call(this, {
       h: h,

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

@@ -39,4 +39,8 @@ export interface DatePickerProps extends DatePickerSettings, FormComponentProps
      * Specifies the validate of the DatePicker.
      */
     validate?: boolean;
+    /**
+     * Specifies the validate of the DatePicker.
+     */
+    ariaLabel?: string;
 }

package/dist/esm/daterangepicker/DateRangePicker.js

@@ -19,7 +19,7 @@ var ref = allVue.ref;
 var inject = allVue.inject;
 import { Popup } from '@progress/kendo-vue-popup';
 import { cloneDate } from '@progress/kendo-date-math';
-import { guid, Keys, canUseDOM, kendoThemeMaps } from '@progress/kendo-vue-common';
+import { guid, Keys, canUseDOM, kendoThemeMaps, Icon } from '@progress/kendo-vue-common';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { validatePackage, templateRendering, getListeners, getTemplate } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata.js';
@@ -28,6 +28,7 @@ import { Calendar } from '../calendar/components/Calendar.js';
 import { EMPTY_SELECTIONRANGE } from '../calendar/models/main.js';
 import { MIN_DATE, MAX_DATE } from '../defaults.js';
 import { swapStartEnd, start, end, separator, messages } from '../messages/main.js';
+import { arrowsSwapIcon } from '@progress/kendo-svg-icons';
 var WRAPPER_STYLES = {
   display: 'inline-block'
 };
@@ -260,7 +261,7 @@ var DateRangePickerVue2 = {
       size: size,
       fillMode: fillMode,
       rounded: rounded,
-      ariaHasPopup: true,
+      ariaHasPopup: 'grid',
       ariaExpanded: this.computedShow,
       value: value.start,
       ariaRole: 'combobox',
@@ -297,7 +298,7 @@ var DateRangePickerVue2 = {
       rounded: rounded,
       disabled: this.$props.disabled,
       valid: this.$props.valid,
-      ariaHasPopup: true,
+      ariaHasPopup: 'grid',
       ariaExpanded: this.computedShow,
       value: value.end,
       ariaRole: 'combobox',
@@ -409,11 +410,17 @@ var DateRangePickerVue2 = {
       onClick: this.handleReverseClick,
       "aria-controls": startDateInputId + ' ' + endDateInputId,
       "aria-label": provideLocalizationService(this).toLanguageString(swapStartEnd, messages[swapStartEnd])
-    }, [h("span", {
+    }, [h(Icon, {
+      name: 'arrows-swap',
+      attrs: this.v3 ? undefined : {
+        name: 'arrows-swap',
+        icon: arrowsSwapIcon
+      },
+      icon: arrowsSwapIcon,
       style: {
         transform: 'rotate(90deg)'
       },
-      "class": "k-icon k-button-icon k-i-arrows-swap"
+      "class": "k-button-icon"
     })]);
     return h("span", {
       "class": this.rootClassName,

package/dist/esm/datetimepicker/DateTimePicker.js

@@ -19,6 +19,7 @@ import { DateTimeSelector } from './DateTimeSelector.js';
 import { isInTimeRange } from '../timepicker/utils.js';
 import { MIN_TIME } from '../defaults.js';
 import { defaultFormatPlaceholder } from '../dateinput/utils.js';
+import { calendarIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -338,7 +339,7 @@ var DateTimePickerVue2 = {
         validationMessage: validationMessage,
         validityStyles: validityStyles,
         value: this.computedValue,
-        ariaHasPopup: true,
+        ariaHasPopup: 'grid',
         ariaExpanded: this.computedShow,
         ariaRole: "combobox",
         ariaControls: this._popupId
@@ -369,7 +370,7 @@ var DateTimePickerVue2 = {
       validationMessage: validationMessage,
       validityStyles: validityStyles,
       value: this.computedValue,
-      ariaHasPopup: true,
+      ariaHasPopup: 'grid',
       ariaExpanded: this.computedShow,
       ariaRole: "combobox",
       ariaControls: this._popupId
@@ -493,6 +494,7 @@ var DateTimePickerVue2 = {
         type: "button",
         tabIndex: -1,
         icon: 'calendar',
+        svgIcon: calendarIcon,
         title: provideLocalizationService(this).toLanguageString(toggleDateTimeSelector, messages[toggleDateTimeSelector]),
         rounded: null,
         "aria-controls": this._popupId,
@@ -500,6 +502,7 @@ var DateTimePickerVue2 = {
       },
       tabIndex: -1,
       icon: 'calendar',
+      svgIcon: calendarIcon,
       onMousedown: this.handleIconMouseDown,
       on: this.v3 ? undefined : {
         "mousedown": this.handleIconMouseDown,