@progress/kendo-vue-inputs 3.7.4-dev.202211301436 → 3.7.4-dev.202212300853

package/dist/esm/slider/Slider.js

@@ -6,7 +6,7 @@ var isV3 = allVue.version && allVue.version[0] === '3';
 var ref = allVue.ref;
 var inject = allVue.inject;
 import { Button } from '@progress/kendo-vue-buttons';
-import { Keys, classNames, Draggable, getTabIndex, validatePackage, getDefaultSlots } from '@progress/kendo-vue-common';
+import { Keys, classNames, Draggable, validatePackage, getDefaultSlots } from '@progress/kendo-vue-common';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { messages, sliderIncreaseValue, sliderDecreaseValue, sliderDragTitle } from '../messages/main.js';
 import { SLIDER_LABEL_ATTRIBUTE } from './SliderLabel.js';
@@ -138,29 +138,13 @@ var SliderVue2 = {
     var percentValue = (this.computedValue - this.$props.min) / (this.$props.max - this.$props.min) * 100;
     var defaultSlot = getDefaultSlots(this);
     return h("div", {
-      "aria-valuemin": this.$props.min,
+      dir: this.currentDir,
       attrs: this.v3 ? undefined : {
-        "aria-valuemin": this.$props.min,
-        "aria-valuemax": this.$props.max,
-        "aria-valuenow": this.computedValue,
-        "aria-disabled": this.$props.disabled ? 'true' : undefined,
-        "aria-labelledby": this.$props.ariaLabelledBy,
-        "aria-describedby": this.$props.ariaDescribedBy,
         dir: this.currentDir,
-        role: "slider",
-        id: this.$props.id,
-        tabindex: getTabIndex(this.$props.tabIndex, this.$props.disabled, undefined)
+        id: this.$props.id
       },
-      "aria-valuemax": this.$props.max,
-      "aria-valuenow": this.computedValue,
-      "aria-disabled": this.$props.disabled ? 'true' : undefined,
-      "aria-labelledby": this.$props.ariaLabelledBy,
-      "aria-describedby": this.$props.ariaDescribedBy,
-      dir: this.currentDir,
-      role: "slider",
       id: this.$props.id,
       style: this.$props.style,
-      tabindex: getTabIndex(this.$props.tabIndex, this.$props.disabled, undefined),
       onFocus: this.onFocus,
       on: this.v3 ? undefined : {
         "focus": this.onFocus,
@@ -183,12 +167,12 @@ var SliderVue2 = {
       type: "button",
       attrs: this.v3 ? undefined : {
         type: "button",
-        tabIndex: -1,
+        tabindex: -1,
         icon: this.$props.vertical ? 'caret-alt-down' : 'caret-alt-left',
         rounded: 'full',
         title: lS.toLanguageString(sliderDecreaseValue, messages[sliderDecreaseValue])
       },
-      tabIndex: -1,
+      tabindex: -1,
       icon: this.$props.vertical ? 'caret-alt-down' : 'caret-alt-left',
       style: {
         position: 'relative'
@@ -230,10 +214,24 @@ var SliderVue2 = {
         }
       }), h("a", {
         "class": "k-draghandle",
-        title: lS.toLanguageString(sliderDragTitle, messages[sliderDragTitle]),
+        role: "slider",
         attrs: _this.v3 ? undefined : {
+          role: "slider",
+          tabIndex: "0",
+          "aria-valuenow": _this.computedValue,
+          "aria-valuemin": _this.$props.min,
+          "aria-valuemax": _this.$props.max,
+          "aria-valuetext": _this.computedValue.toString(),
+          "aria-disabled": _this.$props.disabled ? 'true' : undefined,
           title: lS.toLanguageString(sliderDragTitle, messages[sliderDragTitle])
         },
+        tabIndex: "0",
+        "aria-valuenow": _this.computedValue,
+        "aria-valuemin": _this.$props.min,
+        "aria-valuemax": _this.$props.max,
+        "aria-valuetext": _this.computedValue.toString(),
+        "aria-disabled": _this.$props.disabled ? 'true' : undefined,
+        title: lS.toLanguageString(sliderDragTitle, messages[sliderDragTitle]),
         style: _this.$props.vertical ? {
           bottom: percentValue + '%',
           zIndex: 1
@@ -258,10 +256,24 @@ var SliderVue2 = {
       }
     }), h("a", {
       "class": "k-draghandle",
-      title: lS.toLanguageString(sliderDragTitle, messages[sliderDragTitle]),
+      role: "slider",
       attrs: _this.v3 ? undefined : {
+        role: "slider",
+        tabIndex: "0",
+        "aria-valuenow": _this.computedValue,
+        "aria-valuemin": _this.$props.min,
+        "aria-valuemax": _this.$props.max,
+        "aria-valuetext": _this.computedValue.toString(),
+        "aria-disabled": _this.$props.disabled ? 'true' : undefined,
         title: lS.toLanguageString(sliderDragTitle, messages[sliderDragTitle])
       },
+      tabIndex: "0",
+      "aria-valuenow": _this.computedValue,
+      "aria-valuemin": _this.$props.min,
+      "aria-valuemax": _this.$props.max,
+      "aria-valuetext": _this.computedValue.toString(),
+      "aria-disabled": _this.$props.disabled ? 'true' : undefined,
+      title: lS.toLanguageString(sliderDragTitle, messages[sliderDragTitle]),
       style: _this.$props.vertical ? {
         bottom: percentValue + '%',
         zIndex: 1
@@ -272,12 +284,12 @@ var SliderVue2 = {
       type: "button",
       attrs: this.v3 ? undefined : {
         type: "button",
-        tabIndex: -1,
+        tabindex: -1,
         icon: this.$props.vertical ? 'caret-alt-up' : 'caret-alt-right',
         rounded: 'full',
         title: lS.toLanguageString(sliderIncreaseValue, messages[sliderIncreaseValue])
       },
-      tabIndex: -1,
+      tabindex: -1,
       icon: this.$props.vertical ? 'caret-alt-up' : 'caret-alt-right',
       rounded: 'full',
       style: {

package/dist/esm/switch/Switch.js

@@ -160,10 +160,16 @@ var SwitchVue2 = {
       required = _a.required;
     return h("span", {
       "class": this.switchClassName,
-      dir: this.currentDir,
+      role: 'switch',
       attrs: this.v3 ? undefined : {
+        role: 'switch',
+        "aria-checked": this.computedValue,
+        "aria-disabled": disabled || undefined,
         dir: this.currentDir
       },
+      "aria-checked": this.computedValue,
+      "aria-disabled": disabled || undefined,
+      dir: this.currentDir,
       onKeydown: this.handleKeyDown,
       on: this.v3 ? undefined : {
         "keydown": this.handleKeyDown,
@@ -179,17 +185,11 @@ var SwitchVue2 = {
       id: id || this._id,
       attrs: this.v3 ? undefined : {
         id: id || this._id,
-        role: 'switch',
-        "aria-checked": this.computedValue,
-        "aria-disabled": disabled || undefined,
         "aria-labelledby": this.$props.ariaLabelledBy,
         "aria-describedby": this.$props.ariaDescribedBy,
         tabindex: getTabIndex(tabIndex, disabled, undefined),
         accesskey: this.$props.accessKey
       },
-      role: 'switch',
-      "aria-checked": this.computedValue,
-      "aria-disabled": disabled || undefined,
       "aria-labelledby": this.$props.ariaLabelledBy,
       "aria-describedby": this.$props.ariaDescribedBy,
       ref: setRef(this, 'element'),

package/dist/esm/textarea/TextArea.js

@@ -15,7 +15,7 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
-import { guid, isRtl, getTabIndex, validatePackage, kendoThemeMaps, templateDefinition, templateRendering, getListeners, getTemplate
+import { guid, isRtl, getTabIndex, validatePackage, kendoThemeMaps, templateDefinition, templateRendering, getListeners, getTemplate, Icon
 // useDir,
 } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata.js';
@@ -287,16 +287,28 @@ var TextAreaVue2 = {
       "class": "k-hstack k-flex"
     }, [iconName && h("span", {
       "class": "k-flex-wrap"
-    }, [h("span", {
-      "class": "k-input-icon k-icon k-i-".concat(iconName)
+    }, [h(Icon, {
+      name: iconName,
+      attrs: this.v3 ? undefined : {
+        name: iconName
+      },
+      "class": "k-input-icon"
     })]), textarea, showValidationIcon && this.isValid && h("span", {
       "class": this.suffixIconWrapClass
-    }, [h("span", {
-      "class": "k-input-validation-icon k-icon k-i-check"
+    }, [h(Icon, {
+      name: 'check',
+      attrs: this.v3 ? undefined : {
+        name: 'check'
+      },
+      "class": "k-input-validation-icon"
     })]), showValidationIcon && !this.isValid && h("span", {
       "class": this.suffixIconWrapClass
-    }, [h("span", {
-      "class": "k-input-validation-icon k-icon k-i-warning"
+    }, [h(Icon, {
+      name: 'warning',
+      attrs: this.v3 ? undefined : {
+        name: 'warning'
+      },
+      "class": "k-input-validation-icon"
     })]), showLoadingIcon && h("span", {
       "class": this.suffixIconWrapClass
     }, [h("span", {
@@ -309,8 +321,11 @@ var TextAreaVue2 = {
         "click": this.clearClick
       },
       "class": "k-clear-value"
-    }, [h("span", {
-      "class": "k-icon k-i-x"
+    }, [h(Icon, {
+      name: 'x',
+      attrs: this.v3 ? undefined : {
+        name: 'x'
+      }
     })])])]), this.$props.inputSuffix && h("span", {
       "class": this.suffixRenderClass
     }, [inputSuffix])]);

package/dist/npm/colors/ColorContrastLabels.js

@@ -12,6 +12,7 @@ var isV3 = allVue.version && allVue.version[0] === '3';
 var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
 var main_1 = require("../messages/main");
 var color_parser_1 = require("./utils/color-parser");
+var kendo_vue_common_1 = require("@progress/kendo-vue-common");
 /**
  * @hidden
  */
@@ -53,14 +54,20 @@ var ColorContrastLabelsVue2 = {
     var success = h("span", {
       key: 1,
       "class": "k-contrast-validation k-text-success"
-    }, [passMessage, " ", h("span", {
-      "class": "k-icon k-i-check"
+    }, [passMessage, " ", h(kendo_vue_common_1.Icon, {
+      name: "check",
+      attrs: this.v3 ? undefined : {
+        name: "check"
+      }
     })]);
     var error = h("span", {
       key: 2,
       "class": "k-contrast-validation k-text-error"
-    }, [failMessage, " ", h("span", {
-      "class": "k-icon k-i-close"
+    }, [failMessage, " ", h(kendo_vue_common_1.Icon, {
+      name: "close",
+      attrs: this.v3 ? undefined : {
+        name: "close"
+      }
     })]);
     return h("div", {
       "class": "k-vbox k-colorgradient-color-contrast"
@@ -70,14 +77,23 @@ var ColorContrastLabelsVue2 = {
       "class": "k-contrast-ratio-text"
     }, [contrastText]), aaPass ? h("span", {
       "class": "k-contrast-validation k-text-success"
-    }, [h("span", {
-      "class": "k-icon k-i-check"
-    }), aaaPass && h("span", {
-      "class": "k-icon k-i-check"
+    }, [h(kendo_vue_common_1.Icon, {
+      name: "check",
+      attrs: this.v3 ? undefined : {
+        name: "check"
+      }
+    }), aaaPass && h(kendo_vue_common_1.Icon, {
+      name: "check",
+      attrs: this.v3 ? undefined : {
+        name: "check"
+      }
     })]) : h("span", {
       "class": "k-contrast-validation k-text-error"
-    }, [h("span", {
-      "class": "k-icon k-i-close"
+    }, [h(kendo_vue_common_1.Icon, {
+      name: "close",
+      attrs: this.v3 ? undefined : {
+        name: "close"
+      }
     })])]), h("div", [h("span", [aaText]), aaPass ? success : error]), h("div", [h("span", [aaaText]), aaaPass ? success : error])]);
   }
 };

package/dist/npm/colors/ColorGradient.js

@@ -142,6 +142,10 @@ var ColorGradientVue2 = {
       'k-disabled': this.$props.disabled
     });
     var localizationService = (0, kendo_vue_intl_1.provideLocalizationService)(this);
+    // tslint:disable-next-line:max-line-length
+    var colorGradientHueSliderLabelMessage = localizationService.toLanguageString(main_2.colorGradientHueSliderLabel, main_2.messages[main_2.colorGradientHueSliderLabel]);
+    // tslint:disable-next-line:max-line-length
+    var colorGradientAlphaSliderLabelMessage = localizationService.toLanguageString(main_2.colorGradientAlphaSliderLabel, main_2.messages[main_2.colorGradientAlphaSliderLabel]);
     var dragHandle = localizationService.toLanguageString(main_2.colorGradientDragHandle, main_2.messages[main_2.colorGradientDragHandle]);
     var renderRectangleDragHandle = function renderRectangleDragHandle() {
       var style = {};
@@ -157,11 +161,13 @@ var ColorGradientVue2 = {
         role: "slider",
         attrs: this.v3 ? undefined : {
           role: "slider",
+          "aria-orientation": 'undefined',
           "aria-label": dragHandle + "".concat(this.value || 'none'),
           "aria-valuenow": Math.round(this.hsva.s * 100),
           "aria-valuetext": "\n                    saturation: ".concat(Math.round(this.hsva.s * 100), "%,\n                    value: ").concat(Math.round(this.hsva.v * 100), "%"),
           tabindex: this.computedTabIndex
         },
+        "aria-orientation": 'undefined',
         "aria-label": dragHandle + "".concat(this.value || 'none'),
         "aria-valuenow": Math.round(this.hsva.s * 100),
         "aria-valuetext": "\n                    saturation: ".concat(Math.round(this.hsva.s * 100), "%,\n                    value: ").concat(Math.round(this.hsva.v * 100), "%"),
@@ -264,7 +270,8 @@ var ColorGradientVue2 = {
         min: 0,
         max: 360,
         step: 5,
-        disabled: this.$props.disabled
+        disabled: this.$props.disabled,
+        ariaLabel: colorGradientHueSliderLabelMessage
       },
       value: this.hsva.h,
       buttons: false,
@@ -277,7 +284,8 @@ var ColorGradientVue2 = {
         "change": this.onHueSliderChange
       },
       "class": "k-hue-slider k-colorgradient-slider",
-      disabled: this.$props.disabled
+      disabled: this.$props.disabled,
+      ariaLabel: colorGradientHueSliderLabelMessage
     }), this.$props.opacity && h(main_1.Slider, {
       tabIndex: this.computedTabIndex,
       attrs: this.v3 ? undefined : {
@@ -288,7 +296,8 @@ var ColorGradientVue2 = {
         min: 0,
         max: 100,
         step: 1,
-        disabled: this.$props.disabled
+        disabled: this.$props.disabled,
+        ariaLabel: colorGradientAlphaSliderLabelMessage
       },
       value: (0, misc_1.isPresent)(this.hsva.a) ? this.hsva.a * 100 : 100,
       buttons: false,
@@ -302,6 +311,7 @@ var ColorGradientVue2 = {
       },
       "class": "k-alpha-slider k-colorgradient-slider",
       disabled: this.$props.disabled,
+      ariaLabel: colorGradientAlphaSliderLabelMessage,
       ref: this.v3 ? function (el) {
         _this.alphaSliderRef = el;
       } : 'alphaSlider'

package/dist/npm/colors/ColorPicker.js

@@ -27,6 +27,8 @@ var package_metadata_1 = require("../package-metadata");
 var Picker_1 = require("./Picker");
 var FlatColorPicker_1 = require("./FlatColorPicker");
 var color_cache_1 = require("./utils/color-cache");
+var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
+var main_1 = require("../messages/main");
 /**
  * @hidden
  */
@@ -151,6 +153,11 @@ var ColorPickerVue2 = {
       default: undefined
     }
   },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
   data: function data() {
     return {
       focused: false,
@@ -171,10 +178,6 @@ var ColorPickerVue2 = {
     computedOpen: function computedOpen() {
       return this.isOpenControlled ? this.$props.open : this.currentOpen;
     },
-    computedIconClassName: function computedIconClassName() {
-      var icon = this.$props.icon;
-      return this.$props.iconClassName || icon && "k-icon k-i-".concat(icon);
-    },
     wrapperClassName: function wrapperClassName() {
       var _a;
       var _b = this.$props,
@@ -211,6 +214,9 @@ var ColorPickerVue2 = {
     var _this2 = this;
     var _a;
     var _this = this;
+    var localizationService = (0, kendo_vue_intl_1.provideLocalizationService)(this);
+    // tslint:disable-next-line:max-line-length
+    var colorPickerLabelMessage = localizationService.toLanguageString(main_1.colorPickerDropdownButtonAriaLabel, main_1.messages[main_1.colorPickerDropdownButtonAriaLabel]);
     var h = gh || createElement;
     var _b = this.$props,
       disabled = _b.disabled,
@@ -258,18 +264,26 @@ var ColorPickerVue2 = {
     // const dir = useDir(focusableElementGuid, props.dir);
     return h("span", {
       "class": this.wrapperClassName,
-      dir: dir,
+      role: 'combobox',
       attrs: this.v3 ? undefined : {
+        role: 'combobox',
         dir: dir,
         id: this.$props.id,
         "aria-labelledby": this.$props.ariaLabelledBy,
         "aria-describedby": this.$props.ariaDescribedBy,
+        "aria-disabled": this.$props.disabled,
+        "aria-haspopup": 'dialog',
+        "aria-expanded": this.computedOpen,
         tabindex: (0, kendo_vue_common_1.getTabIndex)(tabIndex, disabled),
         title: this.$props.title
       },
+      dir: dir,
       id: this.$props.id,
       "aria-labelledby": this.$props.ariaLabelledBy,
       "aria-describedby": this.$props.ariaDescribedBy,
+      "aria-disabled": this.$props.disabled,
+      "aria-haspopup": 'dialog',
+      "aria-expanded": this.computedOpen,
       ref: this.focusableElementGuid,
       tabindex: (0, kendo_vue_common_1.getTabIndex)(tabIndex, disabled),
       title: this.$props.title,
@@ -307,7 +321,8 @@ var ColorPickerVue2 = {
         type: "button",
         tabindex: -1,
         rounded: null,
-        icon: 'caret-alt-down'
+        icon: 'caret-alt-down',
+        "aria-label": colorPickerLabelMessage
       },
       tabindex: -1,
       ref: this.v3 ? function (el) {
@@ -319,7 +334,8 @@ var ColorPickerVue2 = {
       },
       rounded: null,
       "class": "k-input-button",
-      icon: 'caret-alt-down'
+      icon: 'caret-alt-down',
+      "aria-label": colorPickerLabelMessage
     }),
     // @ts-ignore function children
     h(Picker_1.Picker, {

package/dist/npm/colors/FlatColorPicker.js

@@ -256,11 +256,17 @@ var FlatColorPickerVue2 = {
           return _this.handleViewChange(e, 'gradient');
         }
       }, _this2.v3 ? function () {
-        return [h("span", {
-          "class": "k-icon k-i-color-canvas"
+        return [h(kendo_vue_common_1.Icon, {
+          name: "color-canvas",
+          attrs: _this2.v3 ? undefined : {
+            name: "color-canvas"
+          }
         })];
-      } : [h("span", {
-        "class": "k-icon k-i-color-canvas"
+      } : [h(kendo_vue_common_1.Icon, {
+        name: "color-canvas",
+        attrs: _this2.v3 ? undefined : {
+          name: "color-canvas"
+        }
       })]),
       // @ts-ignore  function children
       h(kendo_vue_buttons_1.Button, {
@@ -289,11 +295,17 @@ var FlatColorPickerVue2 = {
           return _this.handleViewChange(e, 'palette');
         }
       }, _this2.v3 ? function () {
-        return [h("span", {
-          "class": "k-icon k-i-palette"
+        return [h(kendo_vue_common_1.Icon, {
+          name: "palette",
+          attrs: _this2.v3 ? undefined : {
+            name: "palette"
+          }
         })];
-      } : [h("span", {
-        "class": "k-icon k-i-palette"
+      } : [h(kendo_vue_common_1.Icon, {
+        name: "palette",
+        attrs: _this2.v3 ? undefined : {
+          name: "palette"
+        }
       })])];
     } : [h(kendo_vue_buttons_1.Button, {
       tabIndex: _this2.computedTabIndex,
@@ -321,11 +333,17 @@ var FlatColorPickerVue2 = {
         return _this.handleViewChange(e, 'gradient');
       }
     }, _this2.v3 ? function () {
-      return [h("span", {
-        "class": "k-icon k-i-color-canvas"
+      return [h(kendo_vue_common_1.Icon, {
+        name: "color-canvas",
+        attrs: _this2.v3 ? undefined : {
+          name: "color-canvas"
+        }
       })];
-    } : [h("span", {
-      "class": "k-icon k-i-color-canvas"
+    } : [h(kendo_vue_common_1.Icon, {
+      name: "color-canvas",
+      attrs: _this2.v3 ? undefined : {
+        name: "color-canvas"
+      }
     })]), h(kendo_vue_buttons_1.Button, {
       tabIndex: _this2.computedTabIndex,
       attrs: _this2.v3 ? undefined : {
@@ -352,11 +370,17 @@ var FlatColorPickerVue2 = {
         return _this.handleViewChange(e, 'palette');
       }
     }, _this2.v3 ? function () {
-      return [h("span", {
-        "class": "k-icon k-i-palette"
+      return [h(kendo_vue_common_1.Icon, {
+        name: "palette",
+        attrs: _this2.v3 ? undefined : {
+          name: "palette"
+        }
       })];
-    } : [h("span", {
-      "class": "k-icon k-i-palette"
+    } : [h(kendo_vue_common_1.Icon, {
+      name: "palette",
+      attrs: _this2.v3 ? undefined : {
+        name: "palette"
+      }
     })])])]), h("div", {
       "class": "k-spacer"
     }), h("div", {
@@ -381,11 +405,17 @@ var FlatColorPickerVue2 = {
       },
       onClick: this.handleResetColor
     }, this.v3 ? function () {
-      return [h("span", {
-        "class": "k-icon k-i-droplet-slash"
+      return [h(kendo_vue_common_1.Icon, {
+        name: "droplet-slash",
+        attrs: _this2.v3 ? undefined : {
+          name: "droplet-slash"
+        }
       })];
-    } : [h("span", {
-      "class": "k-icon k-i-droplet-slash"
+    } : [h(kendo_vue_common_1.Icon, {
+      name: "droplet-slash",
+      attrs: _this2.v3 ? undefined : {
+        name: "droplet-slash"
+      }
     })]), this.$props.showPreview && h("div", {
       "class": "k-coloreditor-preview k-vstack"
     }, [h("span", {

package/dist/npm/input/Input.d.ts

@@ -125,6 +125,15 @@ export interface InputProps extends FormComponentProps {
      * Defines additional class to the input element.
      */
     inputClass?: String;
+    /**
+     * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
+     * For example these elements could contain error or hint message.
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Identifies the element(s) which will label the component.
+     */
+    ariaLabelledBy?: string;
 }
 /**
  * @hidden

package/dist/npm/input/Input.js

@@ -114,7 +114,9 @@ var InputVue2 = {
     showClearButton: Boolean,
     inputClass: String,
     wrapperClass: String,
-    tabIndex: Number
+    tabIndex: Number,
+    ariaLabelledBy: String,
+    ariaDescribedBy: String
   },
   data: function data() {
     return {
@@ -163,7 +165,9 @@ var InputVue2 = {
       showValidationIcon = _a.showValidationIcon,
       showLoadingIcon = _a.showLoadingIcon,
       showClearButton = _a.showClearButton,
-      tabIndex = _a.tabIndex;
+      tabIndex = _a.tabIndex,
+      ariaLabelledBy = _a.ariaLabelledBy,
+      ariaDescribedBy = _a.ariaDescribedBy;
     var inputId = id || this._inputId;
     var textbox = h('input', __assign(__assign({
       domProps: this.v3 ? null : __assign(__assign({}, this.$attrs), {
@@ -180,6 +184,9 @@ var InputVue2 = {
       id: inputId,
       tabindex: tabIndex,
       required: required,
+      ariaLabelledby: ariaLabelledBy,
+      ariaDescribedby: ariaDescribedBy,
+      ariaDisabled: this.$props.disabled,
       value: this.computedValue,
       class: this.inputInnerClass,
       ref: this.v3 ? function (el) {
@@ -229,16 +236,28 @@ var InputVue2 = {
       ref: this.v3 ? function (el) {
         _this.wrapperRef = el;
       } : 'wrapper'
-    }, [iconName && h("span", {
-      "class": "k-input-icon k-icon k-i-".concat(iconName)
+    }, [iconName && h(kendo_vue_common_1.Icon, {
+      name: iconName,
+      attrs: this.v3 ? undefined : {
+        name: iconName
+      },
+      "class": "k-input-icon"
     }), this.$props.inputPrefix && h("span", {
       "class": "k-input-prefix"
     }, [inputPrefix]), textbox, this.$props.inputSuffix && h("span", {
       "class": "k-input-suffix"
-    }, [inputSuffix]), showValidationIcon && isValid && h("span", {
-      "class": "k-input-validation-icon k-icon k-i-check"
-    }), showValidationIcon && !isValid && h("span", {
-      "class": "k-input-validation-icon k-icon k-i-warning"
+    }, [inputSuffix]), showValidationIcon && isValid && h(kendo_vue_common_1.Icon, {
+      name: 'check',
+      attrs: this.v3 ? undefined : {
+        name: 'check'
+      },
+      "class": "k-input-validation-icon"
+    }), showValidationIcon && !isValid && h(kendo_vue_common_1.Icon, {
+      name: 'warning',
+      attrs: this.v3 ? undefined : {
+        name: 'warning'
+      },
+      "class": "k-input-validation-icon"
     }), showLoadingIcon && h("span", {
       "class": "k-input-loading-icon k-icon k-i-loading"
     }), showClearButton && this.computedValue && h("span", {
@@ -247,8 +266,11 @@ var InputVue2 = {
         "click": this.clearClick
       },
       "class": "k-clear-value"
-    }, [h("span", {
-      "class": "k-icon k-i-x"
+    }, [h(kendo_vue_common_1.Icon, {
+      name: 'x',
+      attrs: this.v3 ? undefined : {
+        name: 'x'
+      }
     })])]);
     return label ?
     // @ts-ignore function children

package/dist/npm/main.d.ts

@@ -37,3 +37,5 @@ export * from './textarea/TextArea';
 export * from './textarea/interfaces/TextAreaProps';
 export * from './textarea/interfaces/TextAreaChangeEvent';
 export * from './textarea/interfaces/TextAreaFocusEvent';
+export * from './signature/Signature';
+export * from './signature/interfaces';

package/dist/npm/main.js

@@ -56,3 +56,5 @@ __exportStar(require("./textarea/TextArea"), exports);
 __exportStar(require("./textarea/interfaces/TextAreaProps"), exports);
 __exportStar(require("./textarea/interfaces/TextAreaChangeEvent"), exports);
 __exportStar(require("./textarea/interfaces/TextAreaFocusEvent"), exports);
+__exportStar(require("./signature/Signature"), exports);
+__exportStar(require("./signature/interfaces"), exports);