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

package/dist/es/colors/ColorContrastLabels.js

@@ -4,8 +4,10 @@ var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { checkIcon, xIcon } from '@progress/kendo-svg-icons';
 import { messages, colorGradientContrastRatio, colorGradientAALevel, colorGradientAAALevel, colorGradientPass, colorGradientFail } from '../messages/main';
 import { getContrastFromTwoRGBAs } from './utils/color-parser';
+import { Icon } from '@progress/kendo-vue-common';
 /**
  * @hidden
  */
@@ -47,14 +49,24 @@ 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(Icon, {
+      name: "check",
+      attrs: this.v3 ? undefined : {
+        name: "check",
+        icon: checkIcon
+      },
+      icon: checkIcon
     })]);
     var error = h("span", {
       key: 2,
       "class": "k-contrast-validation k-text-error"
-    }, [failMessage, " ", h("span", {
-      "class": "k-icon k-i-close"
+    }, [failMessage, " ", h(Icon, {
+      name: "x",
+      attrs: this.v3 ? undefined : {
+        name: "x",
+        icon: xIcon
+      },
+      icon: xIcon
     })]);
     return h("div", {
       "class": "k-vbox k-colorgradient-color-contrast"
@@ -64,14 +76,29 @@ 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(Icon, {
+      name: "check",
+      attrs: this.v3 ? undefined : {
+        name: "check",
+        icon: checkIcon
+      },
+      icon: checkIcon
+    }), aaaPass && h(Icon, {
+      name: "check",
+      attrs: this.v3 ? undefined : {
+        name: "check",
+        icon: checkIcon
+      },
+      icon: checkIcon
     })]) : h("span", {
       "class": "k-contrast-validation k-text-error"
-    }, [h("span", {
-      "class": "k-icon k-i-close"
+    }, [h(Icon, {
+      name: "x",
+      attrs: this.v3 ? undefined : {
+        name: "x",
+        icon: xIcon
+      },
+      icon: xIcon
     })])]), h("div", [h("span", [aaText]), aaPass ? success : error]), h("div", [h("span", [aaaText]), aaaPass ? success : error])]);
   }
 };

package/dist/es/colors/ColorGradient.js

@@ -14,7 +14,7 @@ import { ColorInput } from './ColorInput';
 import { ColorContrastLabels } from './ColorContrastLabels';
 import { ColorContrastSvg } from './ColorContrastSvg';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
-import { colorGradientDragHandle, messages } from '../messages/main';
+import { colorGradientDragHandle, colorGradientHueSliderLabel, colorGradientAlphaSliderLabel, messages } from '../messages/main';
 var FORMAT = 'rgba';
 var DEFAULT_SELECTED_COLOR = 'rgba(255, 255, 255, 1)';
 /**
@@ -136,6 +136,10 @@ var ColorGradientVue2 = {
       'k-disabled': this.$props.disabled
     });
     var localizationService = provideLocalizationService(this);
+    // tslint:disable-next-line:max-line-length
+    var colorGradientHueSliderLabelMessage = localizationService.toLanguageString(colorGradientHueSliderLabel, messages[colorGradientHueSliderLabel]);
+    // tslint:disable-next-line:max-line-length
+    var colorGradientAlphaSliderLabelMessage = localizationService.toLanguageString(colorGradientAlphaSliderLabel, messages[colorGradientAlphaSliderLabel]);
     var dragHandle = localizationService.toLanguageString(colorGradientDragHandle, messages[colorGradientDragHandle]);
     var renderRectangleDragHandle = function renderRectangleDragHandle() {
       var style = {};
@@ -151,11 +155,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), "%"),
@@ -258,7 +264,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,
@@ -271,7 +278,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(Slider, {
       tabIndex: this.computedTabIndex,
       attrs: this.v3 ? undefined : {
@@ -282,7 +290,8 @@ var ColorGradientVue2 = {
         min: 0,
         max: 100,
         step: 1,
-        disabled: this.$props.disabled
+        disabled: this.$props.disabled,
+        ariaLabel: colorGradientAlphaSliderLabelMessage
       },
       value: isPresent(this.hsva.a) ? this.hsva.a * 100 : 100,
       buttons: false,
@@ -296,6 +305,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/es/colors/ColorInput.js

@@ -22,6 +22,7 @@ import { Label } from '@progress/kendo-vue-labels';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { messages, colorGradientR, colorGradientHex, colorGradientA, colorGradientB, colorGradientG, colorGradientRLabel, colorGradientGLabel, colorGradientBLabel, colorGradientALabel, colorGradientInputColorButton } from '../messages/main';
 import { guid, Keys } from '@progress/kendo-vue-common';
+import { caretAltExpandIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -99,12 +100,14 @@ var ColorInputVue2 = {
         tabIndex: this.tabIndex,
         type: "button",
         fillMode: 'flat',
-        icon: 'caret-alt-expand'
+        icon: 'caret-alt-expand',
+        svgIcon: caretAltExpandIcon
       },
       tabIndex: this.tabIndex,
       type: "button",
       fillMode: 'flat',
       icon: 'caret-alt-expand',
+      svgIcon: caretAltExpandIcon,
       "class": "k-colorgradient-toggle-mode k-icon-button",
       onClick: this.onToggleModeChange,
       on: this.v3 ? undefined : {

package/dist/es/colors/ColorPicker.js

@@ -23,6 +23,9 @@ import { packageMetadata } from '../package-metadata';
 import { Picker } from './Picker';
 import { FlatColorPicker } from './FlatColorPicker';
 import { DEFAULT_GRADIENT_SETTINGS, DEFAULT_PALETTE_SETTINGS } from './utils/color-cache';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { messages, colorPickerDropdownButtonAriaLabel } from '../messages/main';
+import { caretAltDownIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -147,6 +150,11 @@ var ColorPickerVue2 = {
       default: undefined
     }
   },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
   data: function data() {
     return {
       focused: false,
@@ -167,10 +175,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,
@@ -207,6 +211,9 @@ var ColorPickerVue2 = {
     var _this2 = this;
     var _a;
     var _this = this;
+    var localizationService = provideLocalizationService(this);
+    // tslint:disable-next-line:max-line-length
+    var colorPickerLabelMessage = localizationService.toLanguageString(colorPickerDropdownButtonAriaLabel, messages[colorPickerDropdownButtonAriaLabel]);
     var h = gh || createElement;
     var _b = this.$props,
       disabled = _b.disabled,
@@ -254,18 +261,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: 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: getTabIndex(tabIndex, disabled),
       title: this.$props.title,
@@ -303,7 +318,9 @@ var ColorPickerVue2 = {
         type: "button",
         tabindex: -1,
         rounded: null,
-        icon: 'caret-alt-down'
+        icon: 'caret-alt-down',
+        svgIcon: caretAltDownIcon,
+        "aria-label": colorPickerLabelMessage
       },
       tabindex: -1,
       ref: this.v3 ? function (el) {
@@ -315,7 +332,9 @@ var ColorPickerVue2 = {
       },
       rounded: null,
       "class": "k-input-button",
-      icon: 'caret-alt-down'
+      icon: 'caret-alt-down',
+      svgIcon: caretAltDownIcon,
+      "aria-label": colorPickerLabelMessage
     }),
     // @ts-ignore function children
     h(Picker, {

package/dist/es/colors/FlatColorPicker.js

@@ -15,7 +15,8 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
-import { classNames, validatePackage, getTabIndex, setRef, focusContainer, focusFirstFocusableChild, Keys, templateRendering, getListeners, getTemplate } from '@progress/kendo-vue-common';
+import { dropletSlashIcon, dropletSliderIcon, paletteIcon } from '@progress/kendo-svg-icons';
+import { classNames, validatePackage, getTabIndex, setRef, focusContainer, focusFirstFocusableChild, Keys, templateRendering, getListeners, getTemplate, Icon } from '@progress/kendo-vue-common';
 import { ButtonGroup, Button } from '@progress/kendo-vue-buttons';
 import { ColorPalette } from './ColorPalette';
 import { ColorGradient } from './ColorGradient';
@@ -250,11 +251,21 @@ var FlatColorPickerVue2 = {
           return _this.handleViewChange(e, 'gradient');
         }
       }, _this2.v3 ? function () {
-        return [h("span", {
-          "class": "k-icon k-i-color-canvas"
+        return [h(Icon, {
+          name: "droplet-slider",
+          attrs: _this2.v3 ? undefined : {
+            name: "droplet-slider",
+            icon: dropletSliderIcon
+          },
+          icon: dropletSliderIcon
         })];
-      } : [h("span", {
-        "class": "k-icon k-i-color-canvas"
+      } : [h(Icon, {
+        name: "droplet-slider",
+        attrs: _this2.v3 ? undefined : {
+          name: "droplet-slider",
+          icon: dropletSliderIcon
+        },
+        icon: dropletSliderIcon
       })]),
       // @ts-ignore  function children
       h(Button, {
@@ -283,11 +294,21 @@ var FlatColorPickerVue2 = {
           return _this.handleViewChange(e, 'palette');
         }
       }, _this2.v3 ? function () {
-        return [h("span", {
-          "class": "k-icon k-i-palette"
+        return [h(Icon, {
+          name: "palette",
+          attrs: _this2.v3 ? undefined : {
+            name: "palette",
+            icon: paletteIcon
+          },
+          icon: paletteIcon
         })];
-      } : [h("span", {
-        "class": "k-icon k-i-palette"
+      } : [h(Icon, {
+        name: "palette",
+        attrs: _this2.v3 ? undefined : {
+          name: "palette",
+          icon: paletteIcon
+        },
+        icon: paletteIcon
       })])];
     } : [h(Button, {
       tabIndex: _this2.computedTabIndex,
@@ -315,11 +336,21 @@ var FlatColorPickerVue2 = {
         return _this.handleViewChange(e, 'gradient');
       }
     }, _this2.v3 ? function () {
-      return [h("span", {
-        "class": "k-icon k-i-color-canvas"
+      return [h(Icon, {
+        name: "droplet-slider",
+        attrs: _this2.v3 ? undefined : {
+          name: "droplet-slider",
+          icon: dropletSliderIcon
+        },
+        icon: dropletSliderIcon
       })];
-    } : [h("span", {
-      "class": "k-icon k-i-color-canvas"
+    } : [h(Icon, {
+      name: "droplet-slider",
+      attrs: _this2.v3 ? undefined : {
+        name: "droplet-slider",
+        icon: dropletSliderIcon
+      },
+      icon: dropletSliderIcon
     })]), h(Button, {
       tabIndex: _this2.computedTabIndex,
       attrs: _this2.v3 ? undefined : {
@@ -346,11 +377,21 @@ var FlatColorPickerVue2 = {
         return _this.handleViewChange(e, 'palette');
       }
     }, _this2.v3 ? function () {
-      return [h("span", {
-        "class": "k-icon k-i-palette"
+      return [h(Icon, {
+        name: "palette",
+        attrs: _this2.v3 ? undefined : {
+          name: "palette",
+          icon: paletteIcon
+        },
+        icon: paletteIcon
       })];
-    } : [h("span", {
-      "class": "k-icon k-i-palette"
+    } : [h(Icon, {
+      name: "palette",
+      attrs: _this2.v3 ? undefined : {
+        name: "palette",
+        icon: paletteIcon
+      },
+      icon: paletteIcon
     })])])]), h("div", {
       "class": "k-spacer"
     }), h("div", {
@@ -375,11 +416,21 @@ var FlatColorPickerVue2 = {
       },
       onClick: this.handleResetColor
     }, this.v3 ? function () {
-      return [h("span", {
-        "class": "k-icon k-i-droplet-slash"
+      return [h(Icon, {
+        name: "droplet-slash",
+        attrs: _this2.v3 ? undefined : {
+          name: "droplet-slash",
+          icon: dropletSlashIcon
+        },
+        icon: dropletSlashIcon
       })];
-    } : [h("span", {
-      "class": "k-icon k-i-droplet-slash"
+    } : [h(Icon, {
+      name: "droplet-slash",
+      attrs: _this2.v3 ? undefined : {
+        name: "droplet-slash",
+        icon: dropletSlashIcon
+      },
+      icon: dropletSlashIcon
     })]), this.$props.showPreview && h("div", {
       "class": "k-coloreditor-preview k-vstack"
     }, [h("span", {

package/dist/es/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/es/input/Input.js

@@ -16,9 +16,10 @@ var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 var ref = allVue.ref;
-import { guid, templateDefinition, validatePackage, kendoThemeMaps, templateRendering, getListeners, getTemplate } from '@progress/kendo-vue-common';
+import { guid, templateDefinition, validatePackage, kendoThemeMaps, templateRendering, getListeners, getTemplate, Icon } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata';
 import { FloatingLabel } from '@progress/kendo-vue-labels';
+import { checkIcon, exclamationCircleIcon, xIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -108,7 +109,9 @@ var InputVue2 = {
     showClearButton: Boolean,
     inputClass: String,
     wrapperClass: String,
-    tabIndex: Number
+    tabIndex: Number,
+    ariaLabelledBy: String,
+    ariaDescribedBy: String
   },
   data: function data() {
     return {
@@ -157,7 +160,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), {
@@ -174,6 +179,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) {
@@ -223,16 +231,32 @@ 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(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(Icon, {
+      name: 'check',
+      attrs: this.v3 ? undefined : {
+        name: 'check',
+        icon: checkIcon
+      },
+      icon: checkIcon,
+      "class": "k-input-validation-icon"
+    }), showValidationIcon && !isValid && h(Icon, {
+      name: 'exclamation-circle',
+      attrs: this.v3 ? undefined : {
+        name: 'exclamation-circle',
+        icon: exclamationCircleIcon
+      },
+      icon: exclamationCircleIcon,
+      "class": "k-input-validation-icon"
     }), showLoadingIcon && h("span", {
       "class": "k-input-loading-icon k-icon k-i-loading"
     }), showClearButton && this.computedValue && h("span", {
@@ -241,8 +265,13 @@ var InputVue2 = {
         "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',
+        icon: xIcon
+      },
+      icon: xIcon
     })])]);
     return label ?
     // @ts-ignore function children

package/dist/es/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/es/main.js

@@ -35,3 +35,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/es/maskedtextbox/MaskedTextBox.js

@@ -6,8 +6,9 @@ var isV3 = allVue.version && allVue.version[0] === '3';
 var ref = allVue.ref;
 import { MaskingService } from './masking.service';
 import { defaultRules, maskingChanged, returnFalse } from './utils';
-import { guid, getTabIndex, validatePackage, kendoThemeMaps, templateDefinition, templateRendering, getListeners, getTemplate, setRef } from '@progress/kendo-vue-common';
+import { guid, getTabIndex, validatePackage, kendoThemeMaps, templateDefinition, templateRendering, getListeners, getTemplate, setRef, Icon } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata';
+import { checkIcon, exclamationCircleIcon, xIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -15,6 +16,8 @@ var MaskedTextBoxVue2 = {
   model: {
     event: 'changemodel'
   },
+  // @ts-ignore
+  emits: ['change', 'focus', 'blur', 'update:modelValue', 'update:modelRawValue', 'changemodel'],
   props: {
     type: {
       type: String,
@@ -392,8 +395,12 @@ var MaskedTextBoxVue2 = {
       style: !this.$props.label ? {
         width: this.$props.width
       } : undefined
-    }, [iconName && h("span", {
-      "class": "k-input-icon k-icon k-i-".concat(iconName)
+    }, [iconName && h(Icon, {
+      name: iconName,
+      attrs: this.v3 ? undefined : {
+        name: iconName
+      },
+      "class": 'k-input-icon'
     }), this.$props.inputPrefix && h("span", {
       "class": "k-input-prefix"
     }, [inputPrefix]), h("input", {
@@ -407,6 +414,7 @@ var MaskedTextBoxVue2 = {
         id: inputId,
         "aria-labelledby": this.$props.ariaLabelledBy,
         "aria-describedby": this.$props.ariaDescribedBy,
+        "aria-disabled": this.$props.disabled,
         name: this.$props.name,
         tabindex: getTabIndex(this.$props.tabIndex, this.$props.disabled, true),
         accesskey: this.$props.accessKey,
@@ -414,6 +422,7 @@ var MaskedTextBoxVue2 = {
         disabled: this.$props.disabled || undefined,
         readonly: this.$props.readonly || undefined,
         placeholder: this.$props.placeholder,
+        "aria-placeholder": this.$props.placeholder,
         required: this.$props.required
       },
       autocomplete: "off",
@@ -428,6 +437,7 @@ var MaskedTextBoxVue2 = {
       id: inputId,
       "aria-labelledby": this.$props.ariaLabelledBy,
       "aria-describedby": this.$props.ariaDescribedBy,
+      "aria-disabled": this.$props.disabled,
       name: this.$props.name,
       tabindex: getTabIndex(this.$props.tabIndex, this.$props.disabled, true),
       accesskey: this.$props.accessKey,
@@ -435,6 +445,7 @@ var MaskedTextBoxVue2 = {
       disabled: this.$props.disabled || undefined,
       readonly: this.$props.readonly || undefined,
       placeholder: this.$props.placeholder,
+      "aria-placeholder": this.$props.placeholder,
       required: this.$props.required,
       ref: setRef(this, 'input'),
       onInput: this.onChangeHandler,
@@ -453,10 +464,22 @@ var MaskedTextBoxVue2 = {
       onDrop: returnFalse
     }), 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(Icon, {
+      name: 'check',
+      attrs: this.v3 ? undefined : {
+        name: 'check',
+        icon: checkIcon
+      },
+      icon: checkIcon,
+      "class": "k-input-validation-icon"
+    }), showValidationIcon && !isValid && h(Icon, {
+      name: 'exclamation-circle',
+      attrs: this.v3 ? undefined : {
+        name: 'exclamation-circle',
+        icon: exclamationCircleIcon
+      },
+      icon: exclamationCircleIcon,
+      "class": "k-input-validation-icon"
     }), showLoadingIcon && h("span", {
       "class": "k-input-loading-icon k-icon k-i-loading"
     }), showClearButton && newValue && h("span", {
@@ -465,8 +488,13 @@ var MaskedTextBoxVue2 = {
         "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',
+        icon: xIcon
+      },
+      icon: xIcon
     })])]);
     return this.$props.label ? h("span", {
       "class": this.spanClassNames,