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

package/dist/esm/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/npm/checkbox/Checkbox.js

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

package/dist/npm/colors/ColorPalette.js

@@ -203,15 +203,13 @@ var ColorPaletteVue2 = {
         role: "grid",
         tabindex: (0, kendo_vue_common_1.getTabIndex)(this.$props.tabIndex, this.$props.disabled),
         ref: (0, kendo_vue_common_1.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/npm/colors/ColorPicker.js

@@ -98,6 +98,7 @@ var ColorPickerVue2 = {
     },
     title: String,
     icon: String,
+    svgIcon: Object,
     iconClassName: String,
     popupSettings: {
       type: Object,
@@ -213,22 +214,21 @@ var ColorPickerVue2 = {
   // @ts-ignore
   render: function render(createElement) {
     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,
-      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_1.FlatColorPicker, __assign({
         onKeydown: this.onKeyDownHandler,
@@ -307,8 +307,14 @@ var ColorPickerVue2 = {
         'k-no-color': !this.computedValue,
         'k-icon-color-preview': this.icon || this.iconClassName
       })
-    }, [(this.iconClassName || this.icon) && h("span", {
-      "class": (0, kendo_vue_common_1.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(kendo_vue_common_1.Icon, {
+      "class": (0, kendo_vue_common_1.classNames)('k-color-preview-icon', this.iconClassName),
+      name: (0, kendo_vue_common_1.getIconName)(this.icon),
+      attrs: this.v3 ? undefined : {
+        name: (0, kendo_vue_common_1.getIconName)(this.icon),
+        icon: this.svgIcon
+      },
+      icon: this.svgIcon
     }), h("span", {
       "class": "k-color-preview-mask",
       style: {

package/dist/npm/colors/FlatColorPicker.js

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

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

@@ -268,8 +268,12 @@ var InputVue2 = {
       },
       icon: kendo_svg_icons_1.exclamationCircleIcon,
       "class": "k-input-validation-icon"
-    }), showLoadingIcon && h("span", {
-      "class": "k-input-loading-icon k-icon k-i-loading"
+    }), showLoadingIcon && h(kendo_vue_common_1.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/npm/maskedtextbox/MaskedTextBox.js

@@ -486,8 +486,12 @@ var MaskedTextBoxVue2 = {
       },
       icon: kendo_svg_icons_1.exclamationCircleIcon,
       "class": "k-input-validation-icon"
-    }), showLoadingIcon && h("span", {
-      "class": "k-input-loading-icon k-icon k-i-loading"
+    }), showLoadingIcon && h(kendo_vue_common_1.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/npm/numerictextbox/NumericTextBox.js

@@ -591,8 +591,12 @@ var NumericTextBoxVue2 = {
       },
       icon: kendo_svg_icons_1.exclamationCircleIcon,
       "class": "k-input-validation-icon"
-    }), showLoadingIcon && h("span", {
-      "class": "k-input-loading-icon k-icon k-i-loading"
+    }), showLoadingIcon && h(kendo_vue_common_1.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/npm/package-metadata.js

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

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

package/dist/npm/slider/Slider.js

@@ -144,6 +144,11 @@ var SliderVue2 = {
     var lS = (0, kendo_vue_intl_1.provideLocalizationService)(this);
     var percentValue = (this.computedValue - this.$props.min) / (this.$props.max - this.$props.min) * 100;
     var defaultSlot = (0, kendo_vue_common_1.getDefaultSlots)(this);
+    var vertical = this.$props.vertical;
+    var increaseSvgArrow = this.currentDir === 'rtl' ? vertical ? kendo_svg_icons_1.caretAltUpIcon : kendo_svg_icons_1.caretAltLeftIcon : vertical ? kendo_svg_icons_1.caretAltUpIcon : kendo_svg_icons_1.caretAltRightIcon;
+    var decreaseSvgArrow = this.currentDir === 'rtl' ? vertical ? kendo_svg_icons_1.caretAltDownIcon : kendo_svg_icons_1.caretAltRightIcon : vertical ? kendo_svg_icons_1.caretAltDownIcon : kendo_svg_icons_1.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 : {
@@ -160,7 +165,7 @@ var SliderVue2 = {
       },
       onBlur: this.onBlur,
       onKeydown: this.onKeyDown,
-      "class": (0, kendo_vue_common_1.classNames)('k-slider k-widget', {
+      "class": (0, kendo_vue_common_1.classNames)('k-slider', {
         'k-focus': this.currentFocused,
         'k-disabled': this.$props.disabled,
         'k-slider-horizontal': !this.$props.vertical,
@@ -175,14 +180,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 ? kendo_svg_icons_1.caretAltDownIcon : kendo_svg_icons_1.caretAltLeftIcon,
+        icon: decreaseFontArrow,
+        svgIcon: decreaseSvgArrow,
         rounded: 'full',
         title: lS.toLanguageString(main_1.sliderDecreaseValue, main_1.messages[main_1.sliderDecreaseValue])
       },
       tabindex: -1,
-      icon: this.$props.vertical ? 'caret-alt-down' : 'caret-alt-left',
-      svgIcon: this.$props.vertical ? kendo_svg_icons_1.caretAltDownIcon : kendo_svg_icons_1.caretAltLeftIcon,
+      icon: decreaseFontArrow,
+      svgIcon: decreaseSvgArrow,
       style: {
         position: 'relative'
       },
@@ -294,14 +299,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 ? kendo_svg_icons_1.caretAltUpIcon : kendo_svg_icons_1.caretAltRightIcon,
+        icon: increaseFontArrow,
+        svgIcon: increaseSvgArrow,
         rounded: 'full',
         title: lS.toLanguageString(main_1.sliderIncreaseValue, main_1.messages[main_1.sliderIncreaseValue])
       },
       tabindex: -1,
-      icon: this.$props.vertical ? 'caret-alt-up' : 'caret-alt-right',
-      svgIcon: this.$props.vertical ? kendo_svg_icons_1.caretAltUpIcon : kendo_svg_icons_1.caretAltRightIcon,
+      icon: increaseFontArrow,
+      svgIcon: increaseSvgArrow,
       rounded: 'full',
       style: {
         position: 'relative'

package/dist/npm/textarea/TextArea.js

@@ -308,8 +308,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(kendo_vue_common_1.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/npm/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/npm/textbox/TextBox.js

@@ -205,7 +205,7 @@ var TextBoxVue2 = {
         keydown: this.handleKeydown,
         keyup: this.handleKeyup,
         keypress: this.handleKeypress,
-        input: this.handleTextBox,
+        input: this.handleInput,
         animationstart: this.handleAutoFill,
         animationend: this.handleAutoFillEnd
       },
@@ -215,7 +215,7 @@ var TextBoxVue2 = {
       onChange: this.handleChange,
       onFocus: this.emitFocus,
       onBlur: this.emitBlur,
-      onTextBox: this.handleTextBox,
+      onInput: this.handleInput,
       onAnimationstart: this.handleAutoFill,
       onAnimationend: this.handleAutoFillEnd
     }));
@@ -268,8 +268,12 @@ var TextBoxVue2 = {
       },
       icon: kendo_svg_icons_1.exclamationCircleIcon,
       "class": "k-input-validation-icon"
-    }), showLoadingIcon && h("span", {
-      "class": "k-input-loading-icon k-icon k-i-loading"
+    }), showLoadingIcon && h(kendo_vue_common_1.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 : {
@@ -367,7 +371,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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-vue-inputs",
   "description": "Kendo UI for Vue Input package",
-  "version": "3.10.2",
+  "version": "3.11.0-dev.202305230623",
   "repository": {
     "type": "git",
     "url": "https://github.com/telerik/kendo-vue.git"
@@ -47,11 +47,11 @@
   },
   "dependencies": {
     "@progress/kendo-inputs-common": "^3.1.0",
-    "@progress/kendo-vue-buttons": "3.10.2",
-    "@progress/kendo-vue-common": "3.10.2",
-    "@progress/kendo-vue-dialogs": "3.10.2",
-    "@progress/kendo-vue-labels": "3.10.2",
-    "@progress/kendo-vue-popup": "3.10.2"
+    "@progress/kendo-vue-buttons": "3.11.0-dev.202305230623",
+    "@progress/kendo-vue-common": "3.11.0-dev.202305230623",
+    "@progress/kendo-vue-dialogs": "3.11.0-dev.202305230623",
+    "@progress/kendo-vue-labels": "3.11.0-dev.202305230623",
+    "@progress/kendo-vue-popup": "3.11.0-dev.202305230623"
   },
   "devDependencies": {
     "@progress/kendo-data-query": "^1.5.5",
@@ -60,13 +60,13 @@
     "@progress/kendo-file-saver": "^1.1.1",
     "@progress/kendo-licensing": "^1.3.0",
     "@progress/kendo-svg-icons": "^1.0.0",
-    "@progress/kendo-vue-buttons": "3.10.2",
-    "@progress/kendo-vue-dropdowns": "3.10.2",
-    "@progress/kendo-vue-form": "3.10.2",
-    "@progress/kendo-vue-intl": "3.10.2",
-    "@progress/kendo-vue-labels": "3.10.2",
-    "@progress/kendo-vue-tooltip": "3.10.2",
-    "@progress/kendo-vue-upload": "3.10.2",
+    "@progress/kendo-vue-buttons": "3.11.0-dev.202305230623",
+    "@progress/kendo-vue-dropdowns": "3.11.0-dev.202305230623",
+    "@progress/kendo-vue-form": "3.11.0-dev.202305230623",
+    "@progress/kendo-vue-intl": "3.11.0-dev.202305230623",
+    "@progress/kendo-vue-labels": "3.11.0-dev.202305230623",
+    "@progress/kendo-vue-tooltip": "3.11.0-dev.202305230623",
+    "@progress/kendo-vue-upload": "3.11.0-dev.202305230623",
     "cldr-core": "^41.0.0",
     "cldr-dates-full": "^41.0.0",
     "cldr-numbers-full": "^41.0.0"