@progress/kendo-vue-inputs 3.15.0-dev.202309281100 → 4.0.0-dev.202310041201

package/dist/es/colors/HexInput.js

@@ -5,7 +5,7 @@ var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 import { parseColor } from './utils/color-parser';
 import { isPresent } from './utils/misc';
-import { Input as KInput } from '../input/Input';
+import { TextBox as KInput } from '../textbox/TextBox';
 /**
  * @hidden
  */

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

@@ -91,30 +91,45 @@ export interface InputProps extends FormComponentProps {
     placeholder?: string;
     /**
      * Defines a string prop that controls the input icon.
+     *
+     * @deprecated - From version 4.0.0 this functionality is moved in the Textbox component.
      */
     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.
      */
     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.
      */
     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.
      */
     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.
      */
     showClearButton?: Boolean;
     /**
      * Defines additional class to the wrapper element.
+     *
+     * @deprecated - From version 4.0.0 this functionality is moved in the Textbox component.
      */
     wrapperClass?: String;
     /**
@@ -164,7 +179,6 @@ export interface InputData {
 export interface InputState {
     inputRef: any;
     _input: any;
-    wrapper: any;
     _inputId?: string;
     v3: boolean;
 }

package/dist/es/input/Input.js

@@ -16,10 +16,9 @@ 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, 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';
 /**
  * @hidden
  */
@@ -104,14 +103,7 @@ var InputVue2 = {
       type: Boolean,
       default: true
     },
-    iconName: String,
-    inputPrefix: templateDefinition,
-    inputSuffix: templateDefinition,
-    showValidationIcon: Boolean,
-    showLoadingIcon: Boolean,
-    showClearButton: Boolean,
     inputClass: String,
-    wrapperClass: String,
     tabIndex: Number,
     ariaLabel: String,
     ariaLabelledBy: String,
@@ -135,7 +127,6 @@ var InputVue2 = {
   },
   mounted: function mounted() {
     this._input = this.v3 ? this.inputRef : this.$refs.input;
-    this.wrapper = this.v3 ? this.wrapperRef : this.$refs.wrapper;
     this.$data.hasMounted = true;
     this.setValidity();
   },
@@ -160,10 +151,6 @@ var InputVue2 = {
       label = _a.label,
       id = _a.id,
       required = _a.required,
-      iconName = _a.iconName,
-      showValidationIcon = _a.showValidationIcon,
-      showLoadingIcon = _a.showLoadingIcon,
-      showClearButton = _a.showClearButton,
       tabIndex = _a.tabIndex,
       ariaLabel = _a.ariaLabel,
       ariaLabelledBy = _a.ariaLabelledBy,
@@ -216,75 +203,6 @@ var InputVue2 = {
       onAnimationstart: this.handleAutoFill,
       onAnimationend: this.handleAutoFillEnd
     }));
-    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 ?
     // @ts-ignore function children
     h(FloatingLabel, {
@@ -305,12 +223,12 @@ var InputVue2 = {
       editorPlaceholder: this.$data.focused ? this.$props.placeholder : '',
       dir: this.$props.dir
     }, 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);
     },
     emitFocus: function emitFocus(e) {
       this.$emit('focus', e);
@@ -413,18 +331,6 @@ var InputVue2 = {
     },
     name: function name() {
       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;
     }
   },
   computed: {
@@ -443,9 +349,14 @@ var InputVue2 = {
     },
     inputInnerClass: function inputInnerClass() {
       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;
     },
     computedValue: {
       get: function get() {

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: 1695898189,
+    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/dist/esm/colors/HexInput.js

@@ -5,7 +5,7 @@ var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 import { parseColor } from './utils/color-parser.js';
 import { isPresent } from './utils/misc.js';
-import { Input as KInput } from '../input/Input.js';
+import { TextBox as KInput } from '../textbox/TextBox.js';
 /**
  * @hidden
  */

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

@@ -91,30 +91,45 @@ export interface InputProps extends FormComponentProps {
     placeholder?: string;
     /**
      * Defines a string prop that controls the input icon.
+     *
+     * @deprecated - From version 4.0.0 this functionality is moved in the Textbox component.
      */
     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.
      */
     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.
      */
     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.
      */
     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.
      */
     showClearButton?: Boolean;
     /**
      * Defines additional class to the wrapper element.
+     *
+     * @deprecated - From version 4.0.0 this functionality is moved in the Textbox component.
      */
     wrapperClass?: String;
     /**
@@ -164,7 +179,6 @@ export interface InputData {
 export interface InputState {
     inputRef: any;
     _input: any;
-    wrapper: any;
     _inputId?: string;
     v3: boolean;
 }

package/dist/esm/input/Input.js

@@ -16,10 +16,9 @@ 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, 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';
 /**
  * @hidden
  */
@@ -104,14 +103,7 @@ var InputVue2 = {
       type: Boolean,
       default: true
     },
-    iconName: String,
-    inputPrefix: templateDefinition,
-    inputSuffix: templateDefinition,
-    showValidationIcon: Boolean,
-    showLoadingIcon: Boolean,
-    showClearButton: Boolean,
     inputClass: String,
-    wrapperClass: String,
     tabIndex: Number,
     ariaLabel: String,
     ariaLabelledBy: String,
@@ -135,7 +127,6 @@ var InputVue2 = {
   },
   mounted: function mounted() {
     this._input = this.v3 ? this.inputRef : this.$refs.input;
-    this.wrapper = this.v3 ? this.wrapperRef : this.$refs.wrapper;
     this.$data.hasMounted = true;
     this.setValidity();
   },
@@ -160,10 +151,6 @@ var InputVue2 = {
       label = _a.label,
       id = _a.id,
       required = _a.required,
-      iconName = _a.iconName,
-      showValidationIcon = _a.showValidationIcon,
-      showLoadingIcon = _a.showLoadingIcon,
-      showClearButton = _a.showClearButton,
       tabIndex = _a.tabIndex,
       ariaLabel = _a.ariaLabel,
       ariaLabelledBy = _a.ariaLabelledBy,
@@ -216,75 +203,6 @@ var InputVue2 = {
       onAnimationstart: this.handleAutoFill,
       onAnimationend: this.handleAutoFillEnd
     }));
-    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 ?
     // @ts-ignore function children
     h(FloatingLabel, {
@@ -305,12 +223,12 @@ var InputVue2 = {
       editorPlaceholder: this.$data.focused ? this.$props.placeholder : '',
       dir: this.$props.dir
     }, 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);
     },
     emitFocus: function emitFocus(e) {
       this.$emit('focus', e);
@@ -413,18 +331,6 @@ var InputVue2 = {
     },
     name: function name() {
       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;
     }
   },
   computed: {
@@ -443,9 +349,14 @@ var InputVue2 = {
     },
     inputInnerClass: function inputInnerClass() {
       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;
     },
     computedValue: {
       get: function get() {

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: 1695898189,
+    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/dist/npm/colors/HexInput.js

@@ -11,7 +11,7 @@ var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 var color_parser_1 = require("./utils/color-parser");
 var misc_1 = require("./utils/misc");
-var Input_1 = require("../input/Input");
+var TextBox_1 = require("../textbox/TextBox");
 /**
  * @hidden
  */
@@ -57,7 +57,7 @@ var HexInputVue2 = {
   // @ts-ignore
   render: function render(createElement) {
     var h = gh || createElement;
-    return h(Input_1.Input, {
+    return h(TextBox_1.TextBox, {
       value: this.currentHex,
       attrs: this.v3 ? undefined : {
         value: this.currentHex,

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

@@ -91,30 +91,45 @@ export interface InputProps extends FormComponentProps {
     placeholder?: string;
     /**
      * Defines a string prop that controls the input icon.
+     *
+     * @deprecated - From version 4.0.0 this functionality is moved in the Textbox component.
      */
     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.
      */
     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.
      */
     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.
      */
     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.
      */
     showClearButton?: Boolean;
     /**
      * Defines additional class to the wrapper element.
+     *
+     * @deprecated - From version 4.0.0 this functionality is moved in the Textbox component.
      */
     wrapperClass?: String;
     /**
@@ -164,7 +179,6 @@ export interface InputData {
 export interface InputState {
     inputRef: any;
     _input: any;
-    wrapper: any;
     _inputId?: string;
     v3: boolean;
 }