@progress/kendo-vue-inputs - npm Package Compare versions

Comparing version 3.15.0-dev.202309281301 to 4.0.0-dev.202310041201

dist/es/colors/HexInput.js

@@ -8,3 +8,3 @@ // @ts-ignore
 import { isPresent } from './utils/misc';
-import { Input as KInput } from '../input/Input';
+import { TextBox as KInput } from '../textbox/TextBox';
 /**
@@ -11,0 +11,0 @@ * @hidden

dist/es/input/Input.d.ts

@@ -94,2 +94,4 @@ import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
      * Defines a string prop that controls the input icon.
+     *
+     * @deprecated - From version 4.0.0 this functionality is moved in the Textbox component.
      */
@@ -99,2 +101,4 @@ iconName?: String;
      * Defines if the inputPrefix will be shown. Accepts a slot name, a `render` function, or a Vue component.
+     *
+     * @deprecated - From version 4.0.0 this functionality is moved in the Textbox component.
      */
@@ -104,2 +108,4 @@ inputPrefix?: Boolean | String | Object | Function;
      * Defines if the inputSuffix will be shown. Accepts a slot name, a `render` function, or a Vue component.
+     *
+     * @deprecated - From version 4.0.0 this functionality is moved in the Textbox component.
      */
@@ -109,2 +115,4 @@ inputSuffix?: Boolean | String | Object | Function;
      * Defines a boolean prop that controls whether to show the validation icon. Defaults to 'false'.
+     *
+     * @deprecated - From version 4.0.0 this functionality is moved in the Textbox component.
      */
@@ -114,6 +122,11 @@ showValidationIcon?: Boolean;
      * Defines a boolean prop that controls whether to show the loading icon. Defaults to 'false'.
+     *
+     * @deprecated - From version 4.0.0 this functionality is moved in the Textbox component.
      */
     showLoadingIcon?: Boolean;
     /**
+     *
      * Defines a boolean prop that controls whether to show the clear icon. Defaults to 'false'.
+     *
+     * @deprecated - From version 4.0.0 this functionality is moved in the Textbox component.
      */
@@ -123,2 +136,4 @@ showClearButton?: Boolean;
      * Defines additional class to the wrapper element.
+     *
+     * @deprecated - From version 4.0.0 this functionality is moved in the Textbox component.
      */
@@ -173,3 +188,2 @@ wrapperClass?: String;
     _input: any;
-    wrapper: any;
     _inputId?: string;
@@ -176,0 +190,0 @@ v3: boolean;

dist/es/input/Input.js

@@ -19,6 +19,5 @@ var __assign = this && this.__assign || function () {
 var ref = allVue.ref;
-import { guid, templateDefinition, validatePackage, kendoThemeMaps, templateRendering, getListeners, getTemplate, Icon } from '@progress/kendo-vue-common';
+import { guid, validatePackage, kendoThemeMaps } 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';
 /**
@@ -108,10 +107,3 @@ * @hidden
     },
-    iconName: String,
-    inputPrefix: templateDefinition,
-    inputSuffix: templateDefinition,
-    showValidationIcon: Boolean,
-    showLoadingIcon: Boolean,
-    showClearButton: Boolean,
     inputClass: String,
-    wrapperClass: String,
     tabIndex: Number,
@@ -140,3 +132,2 @@ ariaLabel: String,
     this._input = this.v3 ? this.inputRef : this.$refs.input;
-    this.wrapper = this.v3 ? this.wrapperRef : this.$refs.wrapper;
     this.$data.hasMounted = true;
@@ -166,6 +157,2 @@ this.setValidity();
       required = _a.required,
-      iconName = _a.iconName,
-      showValidationIcon = _a.showValidationIcon,
-      showLoadingIcon = _a.showLoadingIcon,
-      showClearButton = _a.showClearButton,
       tabIndex = _a.tabIndex,
@@ -223,71 +210,2 @@ ariaLabel = _a.ariaLabel,
     }));
-    var inputPrefixTemplate = templateRendering.call(this, this.$props.inputPrefix, getListeners.call(this));
-    var inputSuffixTemplate = templateRendering.call(this, this.$props.inputSuffix, getListeners.call(this));
-    var inputPrefix = getTemplate.call(this, {
-      h: h,
-      template: inputPrefixTemplate,
-      additionalProps: {
-        value: this.computedValue,
-        valid: isValid
-      }
-    });
-    var inputSuffix = getTemplate.call(this, {
-      h: h,
-      template: inputSuffixTemplate,
-      additionalProps: {
-        value: this.computedValue,
-        valid: isValid
-      }
-    });
-    var inputWrapper = h("span", {
-      "class": this.inputWrapperClass(),
-      ref: this.v3 ? function (el) {
-        _this.wrapperRef = el;
-      } : 'wrapper'
-    }, [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(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(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 : {
-        "click": this.clearClick
-      },
-      "class": "k-clear-value"
-    }, [h(Icon, {
-      name: 'x',
-      attrs: this.v3 ? undefined : {
-        name: 'x',
-        icon: xIcon
-      },
-      icon: xIcon
-    })])]);
     return label ?
@@ -313,8 +231,8 @@ // @ts-ignore function children
     }, this.v3 ? function () {
-      return [inputWrapper];
-    } : [inputWrapper]) : inputWrapper;
+      return [textbox];
+    } : [textbox]) : textbox;
   },
   methods: {
     updateValidClass: function updateValidClass() {
-      this.wrapper.classList.toggle('k-invalid', !this.validity().valid);
+      this._input.classList.toggle('k-invalid', !this.validity().valid);
     },
@@ -422,14 +340,2 @@ emitFocus: function emitFocus(e) {
       return this.$props.name;
-    },
-    inputWrapperClass: function inputWrapperClass() {
-      var _a;
-      var _b = this.$props,
-        size = _b.size,
-        fillMode = _b.fillMode,
-        rounded = _b.rounded;
-      var isValid = !this.$data.hasMounted || !this.$props.validityStyles || this.validity().valid;
-      return _a = {
-        'k-textbox': true,
-        'k-input': true
-      }, _a["k-input-".concat(kendoThemeMaps.sizeMap[size] || size)] = size, _a["k-input-".concat(fillMode)] = fillMode, _a["k-rounded-".concat(kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded, _a['k-invalid'] = !isValid, _a['k-required'] = this.required, _a['k-disabled'] = this.$props.disabled, _a[this.wrapperClass] = this.wrapperClass, _a;
     }
@@ -453,5 +359,10 @@ },
       var _a;
+      var _b = this.$props,
+        size = _b.size,
+        fillMode = _b.fillMode,
+        rounded = _b.rounded;
+      var isValid = !this.$data.hasMounted || !this.$props.validityStyles || this.validity().valid;
       return _a = {
-        'k-input-inner': true
-      }, _a[this.inputClass] = this.inputClass, _a;
+        'k-input': true
+      }, _a["k-input-".concat(kendoThemeMaps.sizeMap[size] || size)] = size, _a["k-input-".concat(fillMode)] = fillMode, _a["k-rounded-".concat(kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded, _a['k-invalid'] = !isValid, _a['k-required'] = this.required, _a['k-disabled'] = this.$props.disabled, _a[this.inputClass] = this.inputClass, _a;
     },
@@ -458,0 +369,0 @@ computedValue: {

dist/es/package-metadata.js

@@ -8,5 +8,5 @@ /**
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1695905381,
+    publishDate: 1696420036,
     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'
 };

dist/esm/colors/HexInput.js

@@ -8,3 +8,3 @@ // @ts-ignore
 import { isPresent } from './utils/misc.js';
-import { Input as KInput } from '../input/Input.js';
+import { TextBox as KInput } from '../textbox/TextBox.js';
 /**
@@ -11,0 +11,0 @@ * @hidden

dist/esm/input/Input.d.ts

@@ -94,2 +94,4 @@ import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
      * Defines a string prop that controls the input icon.
+     *
+     * @deprecated - From version 4.0.0 this functionality is moved in the Textbox component.
      */
@@ -99,2 +101,4 @@ iconName?: String;
      * Defines if the inputPrefix will be shown. Accepts a slot name, a `render` function, or a Vue component.
+     *
+     * @deprecated - From version 4.0.0 this functionality is moved in the Textbox component.
      */
@@ -104,2 +108,4 @@ inputPrefix?: Boolean | String | Object | Function;
      * Defines if the inputSuffix will be shown. Accepts a slot name, a `render` function, or a Vue component.
+     *
+     * @deprecated - From version 4.0.0 this functionality is moved in the Textbox component.
      */
@@ -109,2 +115,4 @@ inputSuffix?: Boolean | String | Object | Function;
      * Defines a boolean prop that controls whether to show the validation icon. Defaults to 'false'.
+     *
+     * @deprecated - From version 4.0.0 this functionality is moved in the Textbox component.
      */
@@ -114,6 +122,11 @@ showValidationIcon?: Boolean;
      * Defines a boolean prop that controls whether to show the loading icon. Defaults to 'false'.
+     *
+     * @deprecated - From version 4.0.0 this functionality is moved in the Textbox component.
      */
     showLoadingIcon?: Boolean;
     /**
+     *
      * Defines a boolean prop that controls whether to show the clear icon. Defaults to 'false'.
+     *
+     * @deprecated - From version 4.0.0 this functionality is moved in the Textbox component.
      */
@@ -123,2 +136,4 @@ showClearButton?: Boolean;
      * Defines additional class to the wrapper element.
+     *
+     * @deprecated - From version 4.0.0 this functionality is moved in the Textbox component.
      */
@@ -173,3 +188,2 @@ wrapperClass?: String;
     _input: any;
-    wrapper: any;
     _inputId?: string;
@@ -176,0 +190,0 @@ v3: boolean;

dist/esm/input/Input.js

@@ -19,6 +19,5 @@ var __assign = this && this.__assign || function () {
 var ref = allVue.ref;
-import { guid, templateDefinition, validatePackage, kendoThemeMaps, templateRendering, getListeners, getTemplate, Icon } from '@progress/kendo-vue-common';
+import { guid, validatePackage, kendoThemeMaps } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata.js';
 import { FloatingLabel } from '@progress/kendo-vue-labels';
-import { checkIcon, exclamationCircleIcon, xIcon } from '@progress/kendo-svg-icons';
 /**
@@ -108,10 +107,3 @@ * @hidden
     },
-    iconName: String,
-    inputPrefix: templateDefinition,
-    inputSuffix: templateDefinition,
-    showValidationIcon: Boolean,
-    showLoadingIcon: Boolean,
-    showClearButton: Boolean,
     inputClass: String,
-    wrapperClass: String,
     tabIndex: Number,
@@ -140,3 +132,2 @@ ariaLabel: String,
     this._input = this.v3 ? this.inputRef : this.$refs.input;
-    this.wrapper = this.v3 ? this.wrapperRef : this.$refs.wrapper;
     this.$data.hasMounted = true;
@@ -166,6 +157,2 @@ this.setValidity();
       required = _a.required,
-      iconName = _a.iconName,
-      showValidationIcon = _a.showValidationIcon,
-      showLoadingIcon = _a.showLoadingIcon,
-      showClearButton = _a.showClearButton,
       tabIndex = _a.tabIndex,
@@ -223,71 +210,2 @@ ariaLabel = _a.ariaLabel,
     }));
-    var inputPrefixTemplate = templateRendering.call(this, this.$props.inputPrefix, getListeners.call(this));
-    var inputSuffixTemplate = templateRendering.call(this, this.$props.inputSuffix, getListeners.call(this));
-    var inputPrefix = getTemplate.call(this, {
-      h: h,
-      template: inputPrefixTemplate,
-      additionalProps: {
-        value: this.computedValue,
-        valid: isValid
-      }
-    });
-    var inputSuffix = getTemplate.call(this, {
-      h: h,
-      template: inputSuffixTemplate,
-      additionalProps: {
-        value: this.computedValue,
-        valid: isValid
-      }
-    });
-    var inputWrapper = h("span", {
-      "class": this.inputWrapperClass(),
-      ref: this.v3 ? function (el) {
-        _this.wrapperRef = el;
-      } : 'wrapper'
-    }, [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(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(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 : {
-        "click": this.clearClick
-      },
-      "class": "k-clear-value"
-    }, [h(Icon, {
-      name: 'x',
-      attrs: this.v3 ? undefined : {
-        name: 'x',
-        icon: xIcon
-      },
-      icon: xIcon
-    })])]);
     return label ?
@@ -313,8 +231,8 @@ // @ts-ignore function children
     }, this.v3 ? function () {
-      return [inputWrapper];
-    } : [inputWrapper]) : inputWrapper;
+      return [textbox];
+    } : [textbox]) : textbox;
   },
   methods: {
     updateValidClass: function updateValidClass() {
-      this.wrapper.classList.toggle('k-invalid', !this.validity().valid);
+      this._input.classList.toggle('k-invalid', !this.validity().valid);
     },
@@ -422,14 +340,2 @@ emitFocus: function emitFocus(e) {
       return this.$props.name;
-    },
-    inputWrapperClass: function inputWrapperClass() {
-      var _a;
-      var _b = this.$props,
-        size = _b.size,
-        fillMode = _b.fillMode,
-        rounded = _b.rounded;
-      var isValid = !this.$data.hasMounted || !this.$props.validityStyles || this.validity().valid;
-      return _a = {
-        'k-textbox': true,
-        'k-input': true
-      }, _a["k-input-".concat(kendoThemeMaps.sizeMap[size] || size)] = size, _a["k-input-".concat(fillMode)] = fillMode, _a["k-rounded-".concat(kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded, _a['k-invalid'] = !isValid, _a['k-required'] = this.required, _a['k-disabled'] = this.$props.disabled, _a[this.wrapperClass] = this.wrapperClass, _a;
     }
@@ -453,5 +359,10 @@ },
       var _a;
+      var _b = this.$props,
+        size = _b.size,
+        fillMode = _b.fillMode,
+        rounded = _b.rounded;
+      var isValid = !this.$data.hasMounted || !this.$props.validityStyles || this.validity().valid;
       return _a = {
-        'k-input-inner': true
-      }, _a[this.inputClass] = this.inputClass, _a;
+        'k-input': true
+      }, _a["k-input-".concat(kendoThemeMaps.sizeMap[size] || size)] = size, _a["k-input-".concat(fillMode)] = fillMode, _a["k-rounded-".concat(kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded, _a['k-invalid'] = !isValid, _a['k-required'] = this.required, _a['k-disabled'] = this.$props.disabled, _a[this.inputClass] = this.inputClass, _a;
     },
@@ -458,0 +369,0 @@ computedValue: {

dist/esm/package-metadata.js

@@ -8,5 +8,5 @@ /**
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1695905381,
+    publishDate: 1696420036,
     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'
 };

dist/npm/colors/HexInput.js

@@ -14,3 +14,3 @@ "use strict";
 var misc_1 = require("./utils/misc");
-var Input_1 = require("../input/Input");
+var TextBox_1 = require("../textbox/TextBox");
 /**
@@ -61,3 +61,3 @@ * @hidden
     var h = gh || createElement;
-    return h(Input_1.Input, {
+    return h(TextBox_1.TextBox, {
       value: this.currentHex,
@@ -64,0 +64,0 @@ attrs: this.v3 ? undefined : {

dist/npm/input/Input.d.ts

@@ -94,2 +94,4 @@ import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
      * Defines a string prop that controls the input icon.
+     *
+     * @deprecated - From version 4.0.0 this functionality is moved in the Textbox component.
      */
@@ -99,2 +101,4 @@ iconName?: String;
      * Defines if the inputPrefix will be shown. Accepts a slot name, a `render` function, or a Vue component.
+     *
+     * @deprecated - From version 4.0.0 this functionality is moved in the Textbox component.
      */
@@ -104,2 +108,4 @@ inputPrefix?: Boolean | String | Object | Function;
      * Defines if the inputSuffix will be shown. Accepts a slot name, a `render` function, or a Vue component.
+     *
+     * @deprecated - From version 4.0.0 this functionality is moved in the Textbox component.
      */
@@ -109,2 +115,4 @@ inputSuffix?: Boolean | String | Object | Function;
      * Defines a boolean prop that controls whether to show the validation icon. Defaults to 'false'.
+     *
+     * @deprecated - From version 4.0.0 this functionality is moved in the Textbox component.
      */
@@ -114,6 +122,11 @@ showValidationIcon?: Boolean;
      * Defines a boolean prop that controls whether to show the loading icon. Defaults to 'false'.
+     *
+     * @deprecated - From version 4.0.0 this functionality is moved in the Textbox component.
      */
     showLoadingIcon?: Boolean;
     /**
+     *
      * Defines a boolean prop that controls whether to show the clear icon. Defaults to 'false'.
+     *
+     * @deprecated - From version 4.0.0 this functionality is moved in the Textbox component.
      */
@@ -123,2 +136,4 @@ showClearButton?: Boolean;
      * Defines additional class to the wrapper element.
+     *
+     * @deprecated - From version 4.0.0 this functionality is moved in the Textbox component.
      */
@@ -173,3 +188,2 @@ wrapperClass?: String;
     _input: any;
-    wrapper: any;
     _inputId?: string;
@@ -176,0 +190,0 @@ v3: boolean;

dist/npm/input/Input.js

@@ -28,3 +28,2 @@ "use strict";
 var kendo_vue_labels_1 = require("@progress/kendo-vue-labels");
-var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 /**
@@ -114,10 +113,3 @@ * @hidden
     },
-    iconName: String,
-    inputPrefix: kendo_vue_common_1.templateDefinition,
-    inputSuffix: kendo_vue_common_1.templateDefinition,
-    showValidationIcon: Boolean,
-    showLoadingIcon: Boolean,
-    showClearButton: Boolean,
     inputClass: String,
-    wrapperClass: String,
     tabIndex: Number,
@@ -146,3 +138,2 @@ ariaLabel: String,
     this._input = this.v3 ? this.inputRef : this.$refs.input;
-    this.wrapper = this.v3 ? this.wrapperRef : this.$refs.wrapper;
     this.$data.hasMounted = true;
@@ -172,6 +163,2 @@ this.setValidity();
       required = _a.required,
-      iconName = _a.iconName,
-      showValidationIcon = _a.showValidationIcon,
-      showLoadingIcon = _a.showLoadingIcon,
-      showClearButton = _a.showClearButton,
       tabIndex = _a.tabIndex,
@@ -229,71 +216,2 @@ ariaLabel = _a.ariaLabel,
     }));
-    var inputPrefixTemplate = kendo_vue_common_1.templateRendering.call(this, this.$props.inputPrefix, kendo_vue_common_1.getListeners.call(this));
-    var inputSuffixTemplate = kendo_vue_common_1.templateRendering.call(this, this.$props.inputSuffix, kendo_vue_common_1.getListeners.call(this));
-    var inputPrefix = kendo_vue_common_1.getTemplate.call(this, {
-      h: h,
-      template: inputPrefixTemplate,
-      additionalProps: {
-        value: this.computedValue,
-        valid: isValid
-      }
-    });
-    var inputSuffix = kendo_vue_common_1.getTemplate.call(this, {
-      h: h,
-      template: inputSuffixTemplate,
-      additionalProps: {
-        value: this.computedValue,
-        valid: isValid
-      }
-    });
-    var inputWrapper = h("span", {
-      "class": this.inputWrapperClass(),
-      ref: this.v3 ? function (el) {
-        _this.wrapperRef = el;
-      } : 'wrapper'
-    }, [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(kendo_vue_common_1.Icon, {
-      name: 'check',
-      attrs: this.v3 ? undefined : {
-        name: 'check',
-        icon: kendo_svg_icons_1.checkIcon
-      },
-      icon: kendo_svg_icons_1.checkIcon,
-      "class": "k-input-validation-icon"
-    }), showValidationIcon && !isValid && h(kendo_vue_common_1.Icon, {
-      name: 'exclamation-circle',
-      attrs: this.v3 ? undefined : {
-        name: 'exclamation-circle',
-        icon: kendo_svg_icons_1.exclamationCircleIcon
-      },
-      icon: kendo_svg_icons_1.exclamationCircleIcon,
-      "class": "k-input-validation-icon"
-    }), 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 : {
-        "click": this.clearClick
-      },
-      "class": "k-clear-value"
-    }, [h(kendo_vue_common_1.Icon, {
-      name: 'x',
-      attrs: this.v3 ? undefined : {
-        name: 'x',
-        icon: kendo_svg_icons_1.xIcon
-      },
-      icon: kendo_svg_icons_1.xIcon
-    })])]);
     return label ?
@@ -319,8 +237,8 @@ // @ts-ignore function children
     }, this.v3 ? function () {
-      return [inputWrapper];
-    } : [inputWrapper]) : inputWrapper;
+      return [textbox];
+    } : [textbox]) : textbox;
   },
   methods: {
     updateValidClass: function updateValidClass() {
-      this.wrapper.classList.toggle('k-invalid', !this.validity().valid);
+      this._input.classList.toggle('k-invalid', !this.validity().valid);
     },
@@ -428,14 +346,2 @@ emitFocus: function emitFocus(e) {
       return this.$props.name;
-    },
-    inputWrapperClass: function inputWrapperClass() {
-      var _a;
-      var _b = this.$props,
-        size = _b.size,
-        fillMode = _b.fillMode,
-        rounded = _b.rounded;
-      var isValid = !this.$data.hasMounted || !this.$props.validityStyles || this.validity().valid;
-      return _a = {
-        'k-textbox': true,
-        'k-input': true
-      }, _a["k-input-".concat(kendo_vue_common_1.kendoThemeMaps.sizeMap[size] || size)] = size, _a["k-input-".concat(fillMode)] = fillMode, _a["k-rounded-".concat(kendo_vue_common_1.kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded, _a['k-invalid'] = !isValid, _a['k-required'] = this.required, _a['k-disabled'] = this.$props.disabled, _a[this.wrapperClass] = this.wrapperClass, _a;
     }
@@ -459,5 +365,10 @@ },
       var _a;
+      var _b = this.$props,
+        size = _b.size,
+        fillMode = _b.fillMode,
+        rounded = _b.rounded;
+      var isValid = !this.$data.hasMounted || !this.$props.validityStyles || this.validity().valid;
       return _a = {
-        'k-input-inner': true
-      }, _a[this.inputClass] = this.inputClass, _a;
+        'k-input': true
+      }, _a["k-input-".concat(kendo_vue_common_1.kendoThemeMaps.sizeMap[size] || size)] = size, _a["k-input-".concat(fillMode)] = fillMode, _a["k-rounded-".concat(kendo_vue_common_1.kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded, _a['k-invalid'] = !isValid, _a['k-required'] = this.required, _a['k-disabled'] = this.$props.disabled, _a[this.inputClass] = this.inputClass, _a;
     },
@@ -464,0 +375,0 @@ computedValue: {

dist/npm/package-metadata.js

@@ -11,5 +11,5 @@ "use strict";
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1695905381,
+    publishDate: 1696420036,
     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.json

 {
   "name": "@progress/kendo-vue-inputs",
   "description": "Kendo UI for Vue Input package",
-  "version": "3.15.0-dev.202309281301",
+  "version": "4.0.0-dev.202310041201",
   "repository": {
@@ -50,7 +50,7 @@ "type": "git",
     "@progress/kendo-inputs-common": "^3.1.0",
-    "@progress/kendo-vue-buttons": "3.15.0-dev.202309281301",
-    "@progress/kendo-vue-common": "3.15.0-dev.202309281301",
-    "@progress/kendo-vue-dialogs": "3.15.0-dev.202309281301",
-    "@progress/kendo-vue-labels": "3.15.0-dev.202309281301",
-    "@progress/kendo-vue-popup": "3.15.0-dev.202309281301"
+    "@progress/kendo-vue-buttons": "4.0.0-dev.202310041201",
+    "@progress/kendo-vue-common": "4.0.0-dev.202310041201",
+    "@progress/kendo-vue-dialogs": "4.0.0-dev.202310041201",
+    "@progress/kendo-vue-labels": "4.0.0-dev.202310041201",
+    "@progress/kendo-vue-popup": "4.0.0-dev.202310041201"
   },
@@ -64,9 +64,9 @@ "devDependencies": {
     "@progress/kendo-svg-icons": "^1.0.0",
-    "@progress/kendo-vue-buttons": "3.15.0-dev.202309281301",
-    "@progress/kendo-vue-dropdowns": "3.15.0-dev.202309281301",
-    "@progress/kendo-vue-form": "3.15.0-dev.202309281301",
-    "@progress/kendo-vue-intl": "3.15.0-dev.202309281301",
-    "@progress/kendo-vue-labels": "3.15.0-dev.202309281301",
-    "@progress/kendo-vue-tooltip": "3.15.0-dev.202309281301",
-    "@progress/kendo-vue-upload": "3.15.0-dev.202309281301",
+    "@progress/kendo-vue-buttons": "4.0.0-dev.202310041201",
+    "@progress/kendo-vue-dropdowns": "4.0.0-dev.202310041201",
+    "@progress/kendo-vue-form": "4.0.0-dev.202310041201",
+    "@progress/kendo-vue-intl": "4.0.0-dev.202310041201",
+    "@progress/kendo-vue-labels": "4.0.0-dev.202310041201",
+    "@progress/kendo-vue-tooltip": "4.0.0-dev.202310041201",
+    "@progress/kendo-vue-upload": "4.0.0-dev.202310041201",
     "cldr-core": "^41.0.0",
@@ -73,0 +73,0 @@ "cldr-dates-full": "^41.0.0",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

2861805

decreased by-0.31%

Lines of code

47274

decreased by-0.47%

Dependency changes

• + Added@progress/kendo-vue-animation@4.0.0-dev.202310041201(transitive)

• + Added@progress/kendo-vue-buttons@4.0.0-dev.202310041201(transitive)

• + Added@progress/kendo-vue-common@4.0.0-dev.202310041201(transitive)

• + Added@progress/kendo-vue-dialogs@4.0.0-dev.202310041201(transitive)

• + Added@progress/kendo-vue-labels@4.0.0-dev.202310041201(transitive)

• + Added@progress/kendo-vue-popup@4.0.0-dev.202310041201(transitive)

• - Removed@progress/kendo-vue-animation@3.15.0-dev.202309281301(transitive)

• - Removed@progress/kendo-vue-buttons@3.15.0-dev.202309281301(transitive)

• - Removed@progress/kendo-vue-common@3.15.0-dev.202309281301(transitive)

• - Removed@progress/kendo-vue-dialogs@3.15.0-dev.202309281301(transitive)

• - Removed@progress/kendo-vue-labels@3.15.0-dev.202309281301(transitive)

• - Removed@progress/kendo-vue-popup@3.15.0-dev.202309281301(transitive)

• Updated@progress/kendo-vue-buttons@4.0.0-dev.202310041201

• Updated@progress/kendo-vue-common@4.0.0-dev.202310041201

• Updated@progress/kendo-vue-dialogs@4.0.0-dev.202310041201

• Updated@progress/kendo-vue-labels@4.0.0-dev.202310041201

• Updated@progress/kendo-vue-popup@4.0.0-dev.202310041201