@progress/kendo-vue-inputs 3.10.2 → 3.11.0-dev.202305230751

package/dist/es/checkbox/Checkbox.js

@@ -193,6 +193,7 @@ var CheckboxVue2 = {
     this.defaultValidationMessage = this.localizeMessage(checkboxValidation);
     this.optionalMessage = this.localizeMessage(checkboxOptionalText);
     var checkboxClasses = classNames({
+      'k-checkbox-wrap': true,
       'k-disabled': disabled
     });
     var inputClasses = classNames((_a = {

package/dist/es/colors/ColorPalette.js

@@ -197,15 +197,13 @@ var ColorPaletteVue2 = {
         role: "grid",
         tabindex: getTabIndex(this.$props.tabIndex, this.$props.disabled),
         ref: setRef(this, 'wrapper')
-      }, [h("div", {
-        "class": "k-colorpalette-table-wrap"
       }, [h("table", {
         "class": "k-colorpalette-table k-palette",
         role: "presentation",
         attrs: this.v3 ? undefined : {
           role: "presentation"
         }
-      }, [h("tbody", [renderRows.call(this, svc.colorRows, selectedCellCoords, focusedCellCoords)])])])]);
+      }, [h("tbody", [renderRows.call(this, svc.colorRows, selectedCellCoords, focusedCellCoords)])])]);
     } else {
       // In this way, the code prevents an eventual focus of the component when no cells are available.
       // This is needed because upon focus the first cell gets focused.

package/dist/es/colors/ColorPicker.js

@@ -18,7 +18,7 @@ var isV3 = allVue.version && allVue.version[0] === '3';
 import { Button } from '@progress/kendo-vue-buttons';
 import { classNames, Keys,
 // useDir, 
-getTabIndex, guid, kendoThemeMaps, validatePackage, setRef, getRef } from '@progress/kendo-vue-common';
+getTabIndex, guid, kendoThemeMaps, validatePackage, setRef, getRef, Icon, getIconName } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata';
 import { Picker } from './Picker';
 import { FlatColorPicker } from './FlatColorPicker';
@@ -94,6 +94,7 @@ var ColorPickerVue2 = {
     },
     title: String,
     icon: String,
+    svgIcon: Object,
     iconClassName: String,
     popupSettings: {
       type: Object,
@@ -209,22 +210,21 @@ var ColorPickerVue2 = {
   // @ts-ignore
   render: function render(createElement) {
     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,
-      tabIndex = _b.tabIndex,
-      dir = _b.dir,
-      view = _b.view,
-      selectedView = _b.selectedView,
-      showClearButton = _b.showClearButton,
-      showPreview = _b.showPreview,
-      showButtons = _b.showButtons,
-      popupSettings = _b.popupSettings;
+    var _a = this.$props,
+      disabled = _a.disabled,
+      tabIndex = _a.tabIndex,
+      dir = _a.dir,
+      view = _a.view,
+      selectedView = _a.selectedView,
+      showClearButton = _a.showClearButton,
+      showPreview = _a.showPreview,
+      showButtons = _a.showButtons,
+      popupSettings = _a.popupSettings;
     var renderFlatColorPicker = function renderFlatColorPicker() {
       return h(FlatColorPicker, __assign({
         onKeydown: this.onKeyDownHandler,
@@ -303,8 +303,14 @@ var ColorPickerVue2 = {
         'k-no-color': !this.computedValue,
         'k-icon-color-preview': this.icon || this.iconClassName
       })
-    }, [(this.iconClassName || this.icon) && h("span", {
-      "class": classNames('k-color-preview-icon', this.iconClassName, (_a = {}, _a["k-icon k-i-".concat(this.icon)] = this.icon && !this.iconClassName, _a))
+    }, [(this.iconClassName || this.icon || this.svgIcon) && h(Icon, {
+      "class": classNames('k-color-preview-icon', this.iconClassName),
+      name: getIconName(this.icon),
+      attrs: this.v3 ? undefined : {
+        name: getIconName(this.icon),
+        icon: this.svgIcon
+      },
+      icon: this.svgIcon
     }), h("span", {
       "class": "k-color-preview-mask",
       style: {

package/dist/es/colors/FlatColorPicker.js

@@ -222,7 +222,9 @@ var FlatColorPickerVue2 = {
       "class": "k-coloreditor-header-actions k-hstack"
     }, [
     // @ts-ignore  function children
-    h(ButtonGroup, this.v3 ? function () {
+    h(ButtonGroup, {
+      "class": "k-button-group-flat"
+    }, this.v3 ? function () {
       return [
       // @ts-ignore  function children
       h(Button, {

package/dist/es/colors/interfaces/ColorPickerProps.d.ts

@@ -7,6 +7,7 @@ import { ColorPickerPaletteSettings } from './ColorPickerPaletteSettings';
 import { ColorPickerView } from './ColorPickerView';
 import { ColorGradientProps } from './ColorGradientProps';
 import { FlatColorPickerProps } from '../FlatColorPicker';
+import { SVGIcon } from '@progress/kendo-vue-common';
 /**
  * Represents the props of the [Kendo UI for Vue ColorPicker component]({% slug overview_colorpicker %}).
  */
@@ -76,11 +77,13 @@ export interface ColorPickerProps {
     showButtons?: boolean;
     /**
      * Defines the name of an [existing icon in the Kendo UI for Vue theme]({% slug icons %}).
-     * You have to provide only the name of the icon without the `k-icon` or the `k-i-` prefixes.
-     * For example, `edit-tools` will be parsed to `k-icon k-i-edit-tools`
      * ([see example]({% slug customizecolorpicker_colorpicker %}#toc-displaying-kendo-ui-icons)).
      */
     icon?: string;
+    /**
+     * Defines an SVGIcon to be rendered within the ColorPicker button.
+     */
+    svgIcon?: SVGIcon;
     /**
      * The class name which displays an icon in the ColorPicker button
      * ([see example]({% slug customizecolorpicker_colorpicker %}#toc-displaying-custom-icons)).

package/dist/es/input/Input.js

@@ -262,8 +262,12 @@ var InputVue2 = {
       },
       icon: exclamationCircleIcon,
       "class": "k-input-validation-icon"
-    }), showLoadingIcon && h("span", {
-      "class": "k-input-loading-icon k-icon k-i-loading"
+    }), showLoadingIcon && h(Icon, {
+      name: 'loading',
+      attrs: this.v3 ? undefined : {
+        name: 'loading'
+      },
+      "class": 'k-input-loading-icon'
     }), showClearButton && this.computedValue && h("span", {
       onClick: this.clearClick,
       on: this.v3 ? undefined : {

package/dist/es/maskedtextbox/MaskedTextBox.js

@@ -480,8 +480,12 @@ var MaskedTextBoxVue2 = {
       },
       icon: exclamationCircleIcon,
       "class": "k-input-validation-icon"
-    }), showLoadingIcon && h("span", {
-      "class": "k-input-loading-icon k-icon k-i-loading"
+    }), showLoadingIcon && h(Icon, {
+      name: 'loading',
+      attrs: this.v3 ? undefined : {
+        name: 'loading'
+      },
+      "class": 'k-input-loading-icon'
     }), showClearButton && newValue && h("span", {
       onClick: this.clearClick,
       on: this.v3 ? undefined : {

package/dist/es/numerictextbox/NumericTextBox.js

@@ -585,8 +585,12 @@ var NumericTextBoxVue2 = {
       },
       icon: exclamationCircleIcon,
       "class": "k-input-validation-icon"
-    }), showLoadingIcon && h("span", {
-      "class": "k-input-loading-icon k-icon k-i-loading"
+    }), showLoadingIcon && h(Icon, {
+      name: 'loading',
+      attrs: this.v3 ? undefined : {
+        name: 'loading'
+      },
+      "class": 'k-input-loading-icon'
     }), showClearButton && this.computedValue !== undefined && this.computedValue !== null && h("span", {
       onClick: this.clearClick,
       on: this.v3 ? undefined : {

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-inputs',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1684762651,
+    publishDate: 1684827609,
     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/range-slider/RangeSlider.js

@@ -169,7 +169,7 @@ var RangeSliderVue2 = {
         "aria-describedby": this.$props.ariaDescribedBy
       },
       dir: this.currentDir,
-      "class": classNames('k-widget k-slider', {
+      "class": classNames('k-slider', {
         'k-rtl': this.currentDir === 'rtl',
         'k-disabled': this.$props.disabled,
         'k-slider-vertical': this.$props.vertical,

package/dist/es/slider/Slider.js

@@ -138,6 +138,11 @@ var SliderVue2 = {
     var lS = provideLocalizationService(this);
     var percentValue = (this.computedValue - this.$props.min) / (this.$props.max - this.$props.min) * 100;
     var defaultSlot = getDefaultSlots(this);
+    var vertical = this.$props.vertical;
+    var increaseSvgArrow = this.currentDir === 'rtl' ? vertical ? caretAltUpIcon : caretAltLeftIcon : vertical ? caretAltUpIcon : caretAltRightIcon;
+    var decreaseSvgArrow = this.currentDir === 'rtl' ? vertical ? caretAltDownIcon : caretAltRightIcon : vertical ? caretAltDownIcon : caretAltLeftIcon;
+    var increaseFontArrow = this.currentDir === 'rtl' ? vertical ? 'caret-alt-up' : 'caret-alt-left' : vertical ? 'caret-alt-up' : 'caret-alt-right';
+    var decreaseFontArrow = this.currentDir === 'rtl' ? vertical ? 'caret-alt-down' : 'caret-alt-right' : vertical ? 'caret-alt-down' : 'caret-alt-left';
     return h("div", {
       dir: this.currentDir,
       attrs: this.v3 ? undefined : {
@@ -154,7 +159,7 @@ var SliderVue2 = {
       },
       onBlur: this.onBlur,
       onKeydown: this.onKeyDown,
-      "class": classNames('k-slider k-widget', {
+      "class": classNames('k-slider', {
         'k-focus': this.currentFocused,
         'k-disabled': this.$props.disabled,
         'k-slider-horizontal': !this.$props.vertical,
@@ -169,14 +174,14 @@ var SliderVue2 = {
       attrs: this.v3 ? undefined : {
         type: "button",
         tabindex: -1,
-        icon: this.$props.vertical ? 'caret-alt-down' : 'caret-alt-left',
-        svgIcon: this.$props.vertical ? caretAltDownIcon : caretAltLeftIcon,
+        icon: decreaseFontArrow,
+        svgIcon: decreaseSvgArrow,
         rounded: 'full',
         title: lS.toLanguageString(sliderDecreaseValue, messages[sliderDecreaseValue])
       },
       tabindex: -1,
-      icon: this.$props.vertical ? 'caret-alt-down' : 'caret-alt-left',
-      svgIcon: this.$props.vertical ? caretAltDownIcon : caretAltLeftIcon,
+      icon: decreaseFontArrow,
+      svgIcon: decreaseSvgArrow,
       style: {
         position: 'relative'
       },
@@ -288,14 +293,14 @@ var SliderVue2 = {
       attrs: this.v3 ? undefined : {
         type: "button",
         tabindex: -1,
-        icon: this.$props.vertical ? 'caret-alt-up' : 'caret-alt-right',
-        svgIcon: this.$props.vertical ? caretAltUpIcon : caretAltRightIcon,
+        icon: increaseFontArrow,
+        svgIcon: increaseSvgArrow,
         rounded: 'full',
         title: lS.toLanguageString(sliderIncreaseValue, messages[sliderIncreaseValue])
       },
       tabindex: -1,
-      icon: this.$props.vertical ? 'caret-alt-up' : 'caret-alt-right',
-      svgIcon: this.$props.vertical ? caretAltUpIcon : caretAltRightIcon,
+      icon: increaseFontArrow,
+      svgIcon: increaseSvgArrow,
       rounded: 'full',
       style: {
         position: 'relative'

package/dist/es/textarea/TextArea.js

@@ -304,8 +304,12 @@ var TextAreaVue2 = {
       "class": "k-input-validation-icon"
     })]), showLoadingIcon && h("span", {
       "class": this.suffixIconWrapClass
-    }, [h("span", {
-      "class": "k-input-loading-icon k-icon k-i-loading"
+    }, [h(Icon, {
+      name: 'loading',
+      attrs: this.v3 ? undefined : {
+        name: 'loading'
+      },
+      "class": 'k-input-loading-icon'
     })]), showClearButton && this.computedValue && h("span", {
       "class": this.suffixIconWrapClass
     }, [h("span", {

package/dist/es/textbox/TextBox.d.ts

@@ -175,7 +175,7 @@ export interface TextBoxMethods {
     validity: () => any;
     isInvalid: (state: any) => any;
     setValidity: () => void;
-    handleTextBox?: () => void;
+    handleInput?: () => void;
     handleChange: (event: any) => void;
     handleKeyup?: (event: any) => void;
     handleKeydown?: (event: any) => void;

package/dist/es/textbox/TextBox.js

@@ -199,7 +199,7 @@ var TextBoxVue2 = {
         keydown: this.handleKeydown,
         keyup: this.handleKeyup,
         keypress: this.handleKeypress,
-        input: this.handleTextBox,
+        input: this.handleInput,
         animationstart: this.handleAutoFill,
         animationend: this.handleAutoFillEnd
       },
@@ -209,7 +209,7 @@ var TextBoxVue2 = {
       onChange: this.handleChange,
       onFocus: this.emitFocus,
       onBlur: this.emitBlur,
-      onTextBox: this.handleTextBox,
+      onInput: this.handleInput,
       onAnimationstart: this.handleAutoFill,
       onAnimationend: this.handleAutoFillEnd
     }));
@@ -262,8 +262,12 @@ var TextBoxVue2 = {
       },
       icon: exclamationCircleIcon,
       "class": "k-input-validation-icon"
-    }), showLoadingIcon && h("span", {
-      "class": "k-input-loading-icon k-icon k-i-loading"
+    }), showLoadingIcon && h(Icon, {
+      name: 'loading',
+      attrs: this.v3 ? undefined : {
+        name: 'loading'
+      },
+      "class": 'k-input-loading-icon'
     }), showClearButton && this.computedValue && h("span", {
       onClick: this.clearClick,
       on: this.v3 ? undefined : {
@@ -361,7 +365,7 @@ var TextBoxVue2 = {
         this._input.setCustomValidity(this.validity().valid ? '' : this.$props.validationMessage || '');
       }
     },
-    handleTextBox: function handleTextBox(event) {
+    handleInput: function handleInput(event) {
       this.emitUpdate(event, 'input', event.target.value);
     },
     handleChange: function handleChange(event) {

package/dist/esm/checkbox/Checkbox.js

@@ -193,6 +193,7 @@ var CheckboxVue2 = {
     this.defaultValidationMessage = this.localizeMessage(checkboxValidation);
     this.optionalMessage = this.localizeMessage(checkboxOptionalText);
     var checkboxClasses = classNames({
+      'k-checkbox-wrap': true,
       'k-disabled': disabled
     });
     var inputClasses = classNames((_a = {

package/dist/esm/colors/ColorPalette.js

@@ -197,15 +197,13 @@ var ColorPaletteVue2 = {
         role: "grid",
         tabindex: getTabIndex(this.$props.tabIndex, this.$props.disabled),
         ref: setRef(this, 'wrapper')
-      }, [h("div", {
-        "class": "k-colorpalette-table-wrap"
       }, [h("table", {
         "class": "k-colorpalette-table k-palette",
         role: "presentation",
         attrs: this.v3 ? undefined : {
           role: "presentation"
         }
-      }, [h("tbody", [renderRows.call(this, svc.colorRows, selectedCellCoords, focusedCellCoords)])])])]);
+      }, [h("tbody", [renderRows.call(this, svc.colorRows, selectedCellCoords, focusedCellCoords)])])]);
     } else {
       // In this way, the code prevents an eventual focus of the component when no cells are available.
       // This is needed because upon focus the first cell gets focused.

package/dist/esm/colors/ColorPicker.js

@@ -18,7 +18,7 @@ var isV3 = allVue.version && allVue.version[0] === '3';
 import { Button } from '@progress/kendo-vue-buttons';
 import { classNames, Keys,
 // useDir, 
-getTabIndex, guid, kendoThemeMaps, validatePackage, setRef, getRef } from '@progress/kendo-vue-common';
+getTabIndex, guid, kendoThemeMaps, validatePackage, setRef, getRef, Icon, getIconName } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata.js';
 import { Picker } from './Picker.js';
 import { FlatColorPicker } from './FlatColorPicker.js';
@@ -94,6 +94,7 @@ var ColorPickerVue2 = {
     },
     title: String,
     icon: String,
+    svgIcon: Object,
     iconClassName: String,
     popupSettings: {
       type: Object,
@@ -209,22 +210,21 @@ var ColorPickerVue2 = {
   // @ts-ignore
   render: function render(createElement) {
     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,
-      tabIndex = _b.tabIndex,
-      dir = _b.dir,
-      view = _b.view,
-      selectedView = _b.selectedView,
-      showClearButton = _b.showClearButton,
-      showPreview = _b.showPreview,
-      showButtons = _b.showButtons,
-      popupSettings = _b.popupSettings;
+    var _a = this.$props,
+      disabled = _a.disabled,
+      tabIndex = _a.tabIndex,
+      dir = _a.dir,
+      view = _a.view,
+      selectedView = _a.selectedView,
+      showClearButton = _a.showClearButton,
+      showPreview = _a.showPreview,
+      showButtons = _a.showButtons,
+      popupSettings = _a.popupSettings;
     var renderFlatColorPicker = function renderFlatColorPicker() {
       return h(FlatColorPicker, __assign({
         onKeydown: this.onKeyDownHandler,
@@ -303,8 +303,14 @@ var ColorPickerVue2 = {
         'k-no-color': !this.computedValue,
         'k-icon-color-preview': this.icon || this.iconClassName
       })
-    }, [(this.iconClassName || this.icon) && h("span", {
-      "class": classNames('k-color-preview-icon', this.iconClassName, (_a = {}, _a["k-icon k-i-".concat(this.icon)] = this.icon && !this.iconClassName, _a))
+    }, [(this.iconClassName || this.icon || this.svgIcon) && h(Icon, {
+      "class": classNames('k-color-preview-icon', this.iconClassName),
+      name: getIconName(this.icon),
+      attrs: this.v3 ? undefined : {
+        name: getIconName(this.icon),
+        icon: this.svgIcon
+      },
+      icon: this.svgIcon
     }), h("span", {
       "class": "k-color-preview-mask",
       style: {

package/dist/esm/colors/FlatColorPicker.js

@@ -222,7 +222,9 @@ var FlatColorPickerVue2 = {
       "class": "k-coloreditor-header-actions k-hstack"
     }, [
     // @ts-ignore  function children
-    h(ButtonGroup, this.v3 ? function () {
+    h(ButtonGroup, {
+      "class": "k-button-group-flat"
+    }, this.v3 ? function () {
       return [
       // @ts-ignore  function children
       h(Button, {

package/dist/esm/colors/interfaces/ColorPickerProps.d.ts

@@ -7,6 +7,7 @@ import { ColorPickerPaletteSettings } from './ColorPickerPaletteSettings';
 import { ColorPickerView } from './ColorPickerView';
 import { ColorGradientProps } from './ColorGradientProps';
 import { FlatColorPickerProps } from '../FlatColorPicker';
+import { SVGIcon } from '@progress/kendo-vue-common';
 /**
  * Represents the props of the [Kendo UI for Vue ColorPicker component]({% slug overview_colorpicker %}).
  */
@@ -76,11 +77,13 @@ export interface ColorPickerProps {
     showButtons?: boolean;
     /**
      * Defines the name of an [existing icon in the Kendo UI for Vue theme]({% slug icons %}).
-     * You have to provide only the name of the icon without the `k-icon` or the `k-i-` prefixes.
-     * For example, `edit-tools` will be parsed to `k-icon k-i-edit-tools`
      * ([see example]({% slug customizecolorpicker_colorpicker %}#toc-displaying-kendo-ui-icons)).
      */
     icon?: string;
+    /**
+     * Defines an SVGIcon to be rendered within the ColorPicker button.
+     */
+    svgIcon?: SVGIcon;
     /**
      * The class name which displays an icon in the ColorPicker button
      * ([see example]({% slug customizecolorpicker_colorpicker %}#toc-displaying-custom-icons)).

package/dist/esm/input/Input.js

@@ -262,8 +262,12 @@ var InputVue2 = {
       },
       icon: exclamationCircleIcon,
       "class": "k-input-validation-icon"
-    }), showLoadingIcon && h("span", {
-      "class": "k-input-loading-icon k-icon k-i-loading"
+    }), showLoadingIcon && h(Icon, {
+      name: 'loading',
+      attrs: this.v3 ? undefined : {
+        name: 'loading'
+      },
+      "class": 'k-input-loading-icon'
     }), showClearButton && this.computedValue && h("span", {
       onClick: this.clearClick,
       on: this.v3 ? undefined : {

package/dist/esm/maskedtextbox/MaskedTextBox.js

@@ -480,8 +480,12 @@ var MaskedTextBoxVue2 = {
       },
       icon: exclamationCircleIcon,
       "class": "k-input-validation-icon"
-    }), showLoadingIcon && h("span", {
-      "class": "k-input-loading-icon k-icon k-i-loading"
+    }), showLoadingIcon && h(Icon, {
+      name: 'loading',
+      attrs: this.v3 ? undefined : {
+        name: 'loading'
+      },
+      "class": 'k-input-loading-icon'
     }), showClearButton && newValue && h("span", {
       onClick: this.clearClick,
       on: this.v3 ? undefined : {

package/dist/esm/numerictextbox/NumericTextBox.js

@@ -585,8 +585,12 @@ var NumericTextBoxVue2 = {
       },
       icon: exclamationCircleIcon,
       "class": "k-input-validation-icon"
-    }), showLoadingIcon && h("span", {
-      "class": "k-input-loading-icon k-icon k-i-loading"
+    }), showLoadingIcon && h(Icon, {
+      name: 'loading',
+      attrs: this.v3 ? undefined : {
+        name: 'loading'
+      },
+      "class": 'k-input-loading-icon'
     }), showClearButton && this.computedValue !== undefined && this.computedValue !== null && h("span", {
       onClick: this.clearClick,
       on: this.v3 ? undefined : {

package/dist/esm/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-inputs',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1684762651,
+    publishDate: 1684827609,
     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/esm/range-slider/RangeSlider.js

@@ -169,7 +169,7 @@ var RangeSliderVue2 = {
         "aria-describedby": this.$props.ariaDescribedBy
       },
       dir: this.currentDir,
-      "class": classNames('k-widget k-slider', {
+      "class": classNames('k-slider', {
         'k-rtl': this.currentDir === 'rtl',
         'k-disabled': this.$props.disabled,
         'k-slider-vertical': this.$props.vertical,

package/dist/esm/slider/Slider.js

@@ -138,6 +138,11 @@ var SliderVue2 = {
     var lS = provideLocalizationService(this);
     var percentValue = (this.computedValue - this.$props.min) / (this.$props.max - this.$props.min) * 100;
     var defaultSlot = getDefaultSlots(this);
+    var vertical = this.$props.vertical;
+    var increaseSvgArrow = this.currentDir === 'rtl' ? vertical ? caretAltUpIcon : caretAltLeftIcon : vertical ? caretAltUpIcon : caretAltRightIcon;
+    var decreaseSvgArrow = this.currentDir === 'rtl' ? vertical ? caretAltDownIcon : caretAltRightIcon : vertical ? caretAltDownIcon : caretAltLeftIcon;
+    var increaseFontArrow = this.currentDir === 'rtl' ? vertical ? 'caret-alt-up' : 'caret-alt-left' : vertical ? 'caret-alt-up' : 'caret-alt-right';
+    var decreaseFontArrow = this.currentDir === 'rtl' ? vertical ? 'caret-alt-down' : 'caret-alt-right' : vertical ? 'caret-alt-down' : 'caret-alt-left';
     return h("div", {
       dir: this.currentDir,
       attrs: this.v3 ? undefined : {
@@ -154,7 +159,7 @@ var SliderVue2 = {
       },
       onBlur: this.onBlur,
       onKeydown: this.onKeyDown,
-      "class": classNames('k-slider k-widget', {
+      "class": classNames('k-slider', {
         'k-focus': this.currentFocused,
         'k-disabled': this.$props.disabled,
         'k-slider-horizontal': !this.$props.vertical,
@@ -169,14 +174,14 @@ var SliderVue2 = {
       attrs: this.v3 ? undefined : {
         type: "button",
         tabindex: -1,
-        icon: this.$props.vertical ? 'caret-alt-down' : 'caret-alt-left',
-        svgIcon: this.$props.vertical ? caretAltDownIcon : caretAltLeftIcon,
+        icon: decreaseFontArrow,
+        svgIcon: decreaseSvgArrow,
         rounded: 'full',
         title: lS.toLanguageString(sliderDecreaseValue, messages[sliderDecreaseValue])
       },
       tabindex: -1,
-      icon: this.$props.vertical ? 'caret-alt-down' : 'caret-alt-left',
-      svgIcon: this.$props.vertical ? caretAltDownIcon : caretAltLeftIcon,
+      icon: decreaseFontArrow,
+      svgIcon: decreaseSvgArrow,
       style: {
         position: 'relative'
       },
@@ -288,14 +293,14 @@ var SliderVue2 = {
       attrs: this.v3 ? undefined : {
         type: "button",
         tabindex: -1,
-        icon: this.$props.vertical ? 'caret-alt-up' : 'caret-alt-right',
-        svgIcon: this.$props.vertical ? caretAltUpIcon : caretAltRightIcon,
+        icon: increaseFontArrow,
+        svgIcon: increaseSvgArrow,
         rounded: 'full',
         title: lS.toLanguageString(sliderIncreaseValue, messages[sliderIncreaseValue])
       },
       tabindex: -1,
-      icon: this.$props.vertical ? 'caret-alt-up' : 'caret-alt-right',
-      svgIcon: this.$props.vertical ? caretAltUpIcon : caretAltRightIcon,
+      icon: increaseFontArrow,
+      svgIcon: increaseSvgArrow,
       rounded: 'full',
       style: {
         position: 'relative'

package/dist/esm/textarea/TextArea.js

@@ -304,8 +304,12 @@ var TextAreaVue2 = {
       "class": "k-input-validation-icon"
     })]), showLoadingIcon && h("span", {
       "class": this.suffixIconWrapClass
-    }, [h("span", {
-      "class": "k-input-loading-icon k-icon k-i-loading"
+    }, [h(Icon, {
+      name: 'loading',
+      attrs: this.v3 ? undefined : {
+        name: 'loading'
+      },
+      "class": 'k-input-loading-icon'
     })]), showClearButton && this.computedValue && h("span", {
       "class": this.suffixIconWrapClass
     }, [h("span", {

package/dist/esm/textbox/TextBox.d.ts

@@ -175,7 +175,7 @@ export interface TextBoxMethods {
     validity: () => any;
     isInvalid: (state: any) => any;
     setValidity: () => void;
-    handleTextBox?: () => void;
+    handleInput?: () => void;
     handleChange: (event: any) => void;
     handleKeyup?: (event: any) => void;
     handleKeydown?: (event: any) => void;