@progress/kendo-vue-inputs 7.0.3-develop.1 → 7.1.0-develop.2

package/index.d.mts

@@ -180,12 +180,12 @@ onChangemodel?: (value: boolean) => any;
 }>, {
 value: string | number | boolean | string[];
 size: string;
+rounded: string;
+checked: boolean;
 modelValue: string | number | boolean | string[];
 defaultValue: any;
-rounded: string;
 valid: boolean;
 validityStyles: boolean;
-checked: boolean;
 defaultChecked: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
@@ -1077,12 +1077,12 @@ tabIndex: number;
 size: string;
 view: string;
 rounded: string;
+adaptive: boolean;
 fillMode: string;
 valid: boolean;
 showClearButton: boolean;
 open: boolean;
 popupSettings: ColorPickerPopupSettings_2;
-adaptive: boolean;
 selectedView: number;
 showPreview: boolean;
 showButtons: boolean;
@@ -1931,11 +1931,11 @@ onChangemodel?: (value: string | number) => any;
 }>, {
 required: boolean;
 size: string;
-modelValue: string | number;
-defaultValue: string | number | string[];
-disabled: boolean;
 rounded: string;
+disabled: boolean;
 fillMode: string;
+modelValue: string | number;
+defaultValue: string | number | string[];
 valid: boolean;
 validityStyles: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
@@ -2905,8 +2905,8 @@ onChangemodel?: (value: number) => any;
 }>, {
 required: boolean;
 size: string;
-disabled: boolean;
 rounded: string;
+disabled: boolean;
 fillMode: string;
 valid: boolean;
 validityStyles: boolean;
@@ -3284,9 +3284,9 @@ onFocus?: (event: RadioGroupFocusEvent) => any;
 onChangemodel?: (value: any) => any;
 "onUpdate:modelValue"?: (value: any) => any;
 }>, {
+item: string;
 disabled: boolean;
 valid: boolean;
-item: string;
 layout: string;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
@@ -3488,7 +3488,7 @@ dispatchStateValue(args: any): void;
 focus(): void;
 handleChange(newValue: any, event: any | DraggableDragEvent): void;
 calcNewDistance(event: any): any;
-calcKey(payload: any): "end" | "start";
+calcKey(payload: any): "start" | "end";
 handleStartKeyDown(event: any): void;
 handleEndKeyDown(event: any): void;
 handleTrackPress(event: any): void;
@@ -3531,8 +3531,8 @@ startTabIndex: NumberConstructor;
 endTabIndex: NumberConstructor;
 }>> & Readonly<{}>, {
 vertical: boolean;
-defaultValue: Record<string, any>;
 disabled: boolean;
+defaultValue: Record<string, any>;
 dir: string;
 step: number;
 }, {}, {}, {}, string, () => {
@@ -4798,11 +4798,11 @@ onChangemodel?: (value: boolean) => any;
 required: boolean;
 value: string | number | boolean;
 size: string;
-modelValue: boolean;
 disabled: boolean;
+checked: boolean;
+modelValue: boolean;
 valid: boolean;
 validityStyles: boolean;
-checked: boolean;
 defaultChecked: boolean;
 trackRounded: string;
 thumbRounded: string;
@@ -5194,10 +5194,10 @@ onChangemodel?: (value: string | number | string[]) => any;
 "onUpdate:modelValue"?: (value: string | number | string[]) => any;
 }>, {
 size: string;
-flow: string;
-modelValue: string | number | string[];
 rounded: string;
 fillMode: string;
+flow: string;
+modelValue: string | number | string[];
 valid: boolean;
 validityStyles: boolean;
 resizable: string;
@@ -5540,7 +5540,9 @@ default: boolean;
 };
 iconName: PropType<string>;
 inputPrefix: PropType<string | boolean | Object | Function>;
+prefix: PropType<string | boolean | Object | Function>;
 inputSuffix: PropType<string | boolean | Object | Function>;
+suffix: PropType<string | boolean | Object | Function>;
 showValidationIcon: PropType<boolean>;
 showLoadingIcon: PropType<boolean>;
 showClearButton: PropType<boolean>;
@@ -5683,7 +5685,9 @@ default: boolean;
 };
 iconName: PropType<string>;
 inputPrefix: PropType<string | boolean | Object | Function>;
+prefix: PropType<string | boolean | Object | Function>;
 inputSuffix: PropType<string | boolean | Object | Function>;
+suffix: PropType<string | boolean | Object | Function>;
 showValidationIcon: PropType<boolean>;
 showLoadingIcon: PropType<boolean>;
 showClearButton: PropType<boolean>;
@@ -5707,11 +5711,11 @@ onChangemodel?: (value: string | number) => any;
 }>, {
 required: boolean;
 size: string;
-modelValue: string | number;
-defaultValue: string | number | string[];
-disabled: boolean;
 rounded: string;
+disabled: boolean;
 fillMode: string;
+modelValue: string | number;
+defaultValue: string | number | string[];
 valid: boolean;
 validityStyles: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
@@ -5842,13 +5846,27 @@ export declare interface TextBoxProps extends FormComponentProps {
      */
     iconName?: string;
     /**
+     *
+     * @obsolete Use `prefix` instead.
+     *
      * Defines if the inputPrefix will be shown. Accepts a slot name, a `render` function, or a Vue component.
      */
     inputPrefix?: boolean | string | Object | Function;
     /**
+     * Defines if the inputPrefix will be shown. Accepts a slot name, a `render` function, or a Vue component.
+     */
+    prefix?: boolean | string | Object | Function;
+    /**
+     *
+     * @obsolete Use `suffix` instead.
+     *
      * Defines if the inputSuffix will be shown. Accepts a slot name, a `render` function, or a Vue component.
      */
     inputSuffix?: boolean | string | Object | Function;
+    /**
+     * Defines if the inputSuffix will be shown. Accepts a slot name, a `render` function, or a Vue component.
+     */
+    suffix?: boolean | string | Object | Function;
     /**
      * Defines a boolean prop that controls whether to show the validation icon. Defaults to 'false'.
      */

package/index.d.ts

@@ -180,12 +180,12 @@ onChangemodel?: (value: boolean) => any;
 }>, {
 value: string | number | boolean | string[];
 size: string;
+rounded: string;
+checked: boolean;
 modelValue: string | number | boolean | string[];
 defaultValue: any;
-rounded: string;
 valid: boolean;
 validityStyles: boolean;
-checked: boolean;
 defaultChecked: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
@@ -1077,12 +1077,12 @@ tabIndex: number;
 size: string;
 view: string;
 rounded: string;
+adaptive: boolean;
 fillMode: string;
 valid: boolean;
 showClearButton: boolean;
 open: boolean;
 popupSettings: ColorPickerPopupSettings_2;
-adaptive: boolean;
 selectedView: number;
 showPreview: boolean;
 showButtons: boolean;
@@ -1931,11 +1931,11 @@ onChangemodel?: (value: string | number) => any;
 }>, {
 required: boolean;
 size: string;
-modelValue: string | number;
-defaultValue: string | number | string[];
-disabled: boolean;
 rounded: string;
+disabled: boolean;
 fillMode: string;
+modelValue: string | number;
+defaultValue: string | number | string[];
 valid: boolean;
 validityStyles: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
@@ -2905,8 +2905,8 @@ onChangemodel?: (value: number) => any;
 }>, {
 required: boolean;
 size: string;
-disabled: boolean;
 rounded: string;
+disabled: boolean;
 fillMode: string;
 valid: boolean;
 validityStyles: boolean;
@@ -3284,9 +3284,9 @@ onFocus?: (event: RadioGroupFocusEvent) => any;
 onChangemodel?: (value: any) => any;
 "onUpdate:modelValue"?: (value: any) => any;
 }>, {
+item: string;
 disabled: boolean;
 valid: boolean;
-item: string;
 layout: string;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
@@ -3488,7 +3488,7 @@ dispatchStateValue(args: any): void;
 focus(): void;
 handleChange(newValue: any, event: any | DraggableDragEvent): void;
 calcNewDistance(event: any): any;
-calcKey(payload: any): "end" | "start";
+calcKey(payload: any): "start" | "end";
 handleStartKeyDown(event: any): void;
 handleEndKeyDown(event: any): void;
 handleTrackPress(event: any): void;
@@ -3531,8 +3531,8 @@ startTabIndex: NumberConstructor;
 endTabIndex: NumberConstructor;
 }>> & Readonly<{}>, {
 vertical: boolean;
-defaultValue: Record<string, any>;
 disabled: boolean;
+defaultValue: Record<string, any>;
 dir: string;
 step: number;
 }, {}, {}, {}, string, () => {
@@ -4798,11 +4798,11 @@ onChangemodel?: (value: boolean) => any;
 required: boolean;
 value: string | number | boolean;
 size: string;
-modelValue: boolean;
 disabled: boolean;
+checked: boolean;
+modelValue: boolean;
 valid: boolean;
 validityStyles: boolean;
-checked: boolean;
 defaultChecked: boolean;
 trackRounded: string;
 thumbRounded: string;
@@ -5194,10 +5194,10 @@ onChangemodel?: (value: string | number | string[]) => any;
 "onUpdate:modelValue"?: (value: string | number | string[]) => any;
 }>, {
 size: string;
-flow: string;
-modelValue: string | number | string[];
 rounded: string;
 fillMode: string;
+flow: string;
+modelValue: string | number | string[];
 valid: boolean;
 validityStyles: boolean;
 resizable: string;
@@ -5540,7 +5540,9 @@ default: boolean;
 };
 iconName: PropType<string>;
 inputPrefix: PropType<string | boolean | Object | Function>;
+prefix: PropType<string | boolean | Object | Function>;
 inputSuffix: PropType<string | boolean | Object | Function>;
+suffix: PropType<string | boolean | Object | Function>;
 showValidationIcon: PropType<boolean>;
 showLoadingIcon: PropType<boolean>;
 showClearButton: PropType<boolean>;
@@ -5683,7 +5685,9 @@ default: boolean;
 };
 iconName: PropType<string>;
 inputPrefix: PropType<string | boolean | Object | Function>;
+prefix: PropType<string | boolean | Object | Function>;
 inputSuffix: PropType<string | boolean | Object | Function>;
+suffix: PropType<string | boolean | Object | Function>;
 showValidationIcon: PropType<boolean>;
 showLoadingIcon: PropType<boolean>;
 showClearButton: PropType<boolean>;
@@ -5707,11 +5711,11 @@ onChangemodel?: (value: string | number) => any;
 }>, {
 required: boolean;
 size: string;
-modelValue: string | number;
-defaultValue: string | number | string[];
-disabled: boolean;
 rounded: string;
+disabled: boolean;
 fillMode: string;
+modelValue: string | number;
+defaultValue: string | number | string[];
 valid: boolean;
 validityStyles: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
@@ -5842,13 +5846,27 @@ export declare interface TextBoxProps extends FormComponentProps {
      */
     iconName?: string;
     /**
+     *
+     * @obsolete Use `prefix` instead.
+     *
      * Defines if the inputPrefix will be shown. Accepts a slot name, a `render` function, or a Vue component.
      */
     inputPrefix?: boolean | string | Object | Function;
     /**
+     * Defines if the inputPrefix will be shown. Accepts a slot name, a `render` function, or a Vue component.
+     */
+    prefix?: boolean | string | Object | Function;
+    /**
+     *
+     * @obsolete Use `suffix` instead.
+     *
      * Defines if the inputSuffix will be shown. Accepts a slot name, a `render` function, or a Vue component.
      */
     inputSuffix?: boolean | string | Object | Function;
+    /**
+     * Defines if the inputSuffix will be shown. Accepts a slot name, a `render` function, or a Vue component.
+     */
+    suffix?: boolean | string | Object | Function;
     /**
      * Defines a boolean prop that controls whether to show the validation icon. Defaults to 'false'.
      */

package/package-metadata.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={name:"@progress/kendo-vue-inputs",productName:"Kendo UI for Vue",productCode:"KENDOUIVUE",productCodes:["KENDOUIVUE"],publishDate: 1764664423,version:"7.0.3-develop.1",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"};exports.packageMetadata=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={name:"@progress/kendo-vue-inputs",productName:"Kendo UI for Vue",productCode:"KENDOUIVUE",productCodes:["KENDOUIVUE"],publishDate: 1766490871,version:"7.1.0-develop.2",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"};exports.packageMetadata=e;

package/package-metadata.mjs

@@ -10,8 +10,8 @@ const e = {
   productName: "Kendo UI for Vue",
   productCode: "KENDOUIVUE",
   productCodes: ["KENDOUIVUE"],
-  publishDate: 1764664423,
-  version: "7.0.3-develop.1",
+  publishDate: 1766490871,
+  version: "7.1.0-develop.2",
   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"
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-vue-inputs",
-  "version": "7.0.3-develop.1",
+  "version": "7.1.0-develop.2",
   "description": "TODO",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -20,13 +20,13 @@
   "peerDependencies": {
     "@progress/kendo-drawing": "^1.21.1",
     "@progress/kendo-licensing": "^1.7.2",
-    "@progress/kendo-vue-animation": "7.0.3-develop.1",
-    "@progress/kendo-vue-buttons": "7.0.3-develop.1",
-    "@progress/kendo-vue-common": "7.0.3-develop.1",
-    "@progress/kendo-vue-dialogs": "7.0.3-develop.1",
-    "@progress/kendo-vue-intl": "7.0.3-develop.1",
-    "@progress/kendo-vue-labels": "7.0.3-develop.1",
-    "@progress/kendo-vue-popup": "7.0.3-develop.1",
+    "@progress/kendo-vue-animation": "7.1.0-develop.2",
+    "@progress/kendo-vue-buttons": "7.1.0-develop.2",
+    "@progress/kendo-vue-common": "7.1.0-develop.2",
+    "@progress/kendo-vue-dialogs": "7.1.0-develop.2",
+    "@progress/kendo-vue-intl": "7.1.0-develop.2",
+    "@progress/kendo-vue-labels": "7.1.0-develop.2",
+    "@progress/kendo-vue-popup": "7.1.0-develop.2",
     "@progress/kendo-svg-icons": "^4.4.0",
     "vue": "^3.0.2"
   },
@@ -49,7 +49,7 @@
     "package": {
       "productName": "Kendo UI for Vue",
       "productCode": "KENDOUIVUE",
-      "publishDate": 1764664423,
+      "publishDate": 1766490871,
       "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/textbox/TextBox.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("vue"),a=require("@progress/kendo-vue-common"),V=require("../package-metadata.js"),k=require("@progress/kendo-vue-labels"),o=require("@progress/kendo-svg-icons");function b(t){return typeof t=="function"||Object.prototype.toString.call(t)==="[object Object]"&&!i.isVNode(t)}const S=i.defineComponent({model:{event:"changemodel"},inheritAttrs:!1,emits:{input:t=>!0,change:t=>!0,changemodel:t=>!0,"update:modelValue":t=>!0,focus:t=>!0,blur:t=>!0,keyup:t=>!0,keydown:t=>!0,keypress:t=>!0},props:{modelValue:{type:[String,Number],default:void 0},disabled:{type:Boolean,default:void 0},defaultValue:{type:[String,Number],default:""},value:{type:[String,Number]},label:{type:String},placeholder:{type:String},required:{type:Boolean,default:!1},size:{type:String,default:"medium",validator:function(t){return[null,"small","medium","large"].includes(t)}},rounded:{type:String,default:"medium",validator:function(t){return[null,"small","medium","large","full"].includes(t)}},fillMode:{type:String,default:"solid",validator:function(t){return[null,"solid","flat","outline"].includes(t)}},dir:{type:String},id:String,valid:{type:Boolean,default:void 0},validate:{type:Boolean},validationMessage:{type:String},validityStyles:{type:Boolean,default:!0},iconName:String,inputPrefix:[String,Function],inputSuffix:[String,Function],showValidationIcon:Boolean,showLoadingIcon:Boolean,showClearButton:Boolean,inputClass:String,wrapperClass:String,tabIndex:Number,role:String,title:String,ariaLabel:String,inputAttributes:Object},data:function(){return{hasMounted:!1,autofill:!1,currentValue:"",valueDuringOnChange:"",focused:!1}},created(){a.validatePackage(V.packageMetadata),this._input=void 0,this._inputId=a.guid(),this.$data.valueDuringOnChange=void 0,this.$data.currentValue=this.$props.defaultValue},mounted(){this._input=this.inputRef,this.wrapper=this.wrapperRef,this.$data.hasMounted=!0,this.setValidity()},updated(){this.setValidity(),this.updateValidClass()},setup(){return{inputRef:i.ref(null)}},render(){const t=!this.$props.validityStyles||this.validity().valid,{label:e,id:n,required:l,iconName:r,showValidationIcon:d,showLoadingIcon:h,showClearButton:c,inputAttributes:f}=this.$props,p=n||this._inputId,m=i.h("input",{...this.$attrs,...f,"aria-label":this.$props.ariaLabel,role:this.$props.role,title:this.$props.title,tabindex:this.$props.tabIndex,placeholder:this.$props.placeholder,id:p,required:l,disabled:this.$props.disabled,value:this.computedValue,class:this.inputInnerClass,ref:u=>{this.inputRef=u},onKeydown:this.handleKeydown,onKeyup:this.handleKeyup,onKeypress:this.handleKeypress,onChange:this.handleChange,onFocus:this.emitFocus,onBlur:this.emitBlur,onInput:this.handleInput,onAnimationstart:this.handleAutoFill,onAnimationend:this.handleAutoFillEnd}),g=a.templateRendering.call(this,this.$props.inputPrefix,a.getListeners.call(this)),v=a.templateRendering.call(this,this.$props.inputSuffix,a.getListeners.call(this)),y=a.getTemplate.call(this,{h:i.h,template:g,additionalProps:{value:this.computedValue,valid:t}}),$=a.getTemplate.call(this,{h:i.h,template:v,additionalProps:{value:this.computedValue,valid:t}}),s=i.createVNode("span",{class:this.inputWrapperClass(),ref:u=>{this.wrapperRef=u}},[r&&i.createVNode(a.Icon,{name:r,class:"k-input-icon"},null),this.$props.inputPrefix&&i.createVNode("span",{class:"k-input-prefix"},[y]),m,this.$props.inputSuffix&&i.createVNode("span",{class:"k-input-suffix"},[$]),d&&t&&i.createVNode(a.Icon,{name:"check",icon:o.checkIcon,class:"k-input-validation-icon"},null),d&&!t&&i.createVNode(a.Icon,{name:"exclamation-circle",icon:o.exclamationCircleIcon,class:"k-input-validation-icon"},null),h&&i.createVNode(a.Icon,{name:"loading",class:"k-input-loading-icon"},null),c&&this.computedValue&&i.createVNode("span",{onClick:this.clearClick,class:"k-clear-value"},[i.createVNode(a.Icon,{name:"x",icon:o.xIcon},null)])]);return e?i.createVNode(k.FloatingLabel,{label:e,editorId:p,editorValue:this.computedValue,editorValid:t,editorDisabled:this.$props.disabled,editorPlaceholder:this.$data.focused?this.$props.placeholder:"",dir:this.$props.dir},b(s)?s:{default:()=>[s]}):s},methods:{updateValidClass(){this.wrapper.classList.toggle("k-invalid",!this.validity().valid)},emitFocus(t){this.$emit("focus",{event:t}),this.$data.focused=!0},emitBlur(t){this.$emit("blur",{event:t}),this.$data.focused=!1},handleKeydown(t){this.$emit("keydown",t)},handleKeyup(t){this.$emit("keyup",t)},handleKeypress(t){this.$emit("keypress",t)},clearClick(t){this.emitUpdate(t,"change","")},focus(){this._input&&this._input.focus()},validity(){const t={badTextBox:this._input?this._input.validity.badTextBox:!1,patternMismatch:this._input?this._input.validity.patternMismatch:!1,rangeOverflow:this._input?this._input.validity.rangeOverflow:!1,rangeUnderflow:this._input?this._input.validity.rangeUnderflow:!1,stepMismatch:this._input?this._input.validity.stepMismatch:!1,tooLong:this._input?this._input.validity.tooLong:!1,tooShort:this._input?this._input.validity.tooShort:!1,typeMismatch:this._input?this._input.validity.typeMismatch:!1,valueMissing:this._input?this._input.validity.valueMissing:!1};return{...t,customError:this.$props.validationMessage!==void 0,valid:this.$props.valid!==void 0?this.$props.valid:this._input?!this.isInvalid(t):!0}},isInvalid(t){let e=!1;for(const n in t)t.hasOwnProperty(n)&&(e=e||t[n]);return e},setValidity(){this._input&&this._input.setCustomValidity&&this._input.setCustomValidity(this.validity().valid?"":this.$props.validationMessage||"")},handleInput(t){this.emitUpdate(t,"input",t.target.value)},handleChange(t){this.emitUpdate(t,"change",t.target.value)},emitUpdate(t,e,n){this.disabled||(this.$data.currentValue=n,this.$data.valueDuringOnChange=n,this.$nextTick(()=>{this.$emit("changemodel",n),this.$emit("update:modelValue",n),this.$emit(e,{event:t,value:n,component:this,target:t.target,validity:this.validity()}),this.$data.valueDuringOnChange=void 0}))},handleAutoFill(t){if(t.animationName==="autoFillStart"){const e=t.target.parentNode;e&&e.classList.contains("k-empty")&&(this.$data.autofill=!0,e.classList.remove("k-empty"))}},handleAutoFillEnd(t){t.animationName==="autoFillEnd"&&t.target.parentNode&&(this.$data.autofill=!1)},name:function(){return this.$props.name},inputWrapperClass(){const{size:t,fillMode:e,rounded:n}=this.$props,l=!this.$data.hasMounted||!this.$props.validityStyles||this.validity().valid;return{"k-textbox":!0,"k-input":!0,[`k-input-${a.kendoThemeMaps.sizeMap[t]||t}`]:t,[`k-input-${e}`]:e,[`k-rounded-${a.kendoThemeMaps.roundedMap[n]||n}`]:n,"k-invalid":!l,"k-required":this.required,"k-disabled":this.$props.disabled,[this.wrapperClass]:this.wrapperClass}}},computed:{spanClassNames(){const t=!this.$data.hasMounted||!this.$props.validityStyles||this.validity().valid;return{"k-floating-label-container":!0,"k-focus":this.$data.focused,"k-empty":!(this.computedValue===0||this.computedValue||this.$props.placeholder||this.$data.autofill),"k-autofill":this.$data.autofill,"k-invalid":!t&&t!==void 0,"k-rtl":this.$props.dir==="rtl"}},inputInnerClass(){return{"k-input-inner":!0,[this.inputClass]:this.inputClass}},computedValue(){return this.$data.valueDuringOnChange!==void 0?this.$data.valueDuringOnChange:this.$props.value!==void 0?this.$props.value:this.$props.modelValue!==void 0?this.$props.modelValue:this.$data.currentValue}}});exports.TextBox=S;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("vue"),a=require("@progress/kendo-vue-common"),V=require("../package-metadata.js"),k=require("@progress/kendo-vue-labels"),o=require("@progress/kendo-svg-icons");function b(t){return typeof t=="function"||Object.prototype.toString.call(t)==="[object Object]"&&!i.isVNode(t)}const x=i.defineComponent({model:{event:"changemodel"},inheritAttrs:!1,emits:{input:t=>!0,change:t=>!0,changemodel:t=>!0,"update:modelValue":t=>!0,focus:t=>!0,blur:t=>!0,keyup:t=>!0,keydown:t=>!0,keypress:t=>!0},props:{modelValue:{type:[String,Number],default:void 0},disabled:{type:Boolean,default:void 0},defaultValue:{type:[String,Number],default:""},value:{type:[String,Number]},label:{type:String},placeholder:{type:String},required:{type:Boolean,default:!1},size:{type:String,default:"medium",validator:function(t){return[null,"small","medium","large"].includes(t)}},rounded:{type:String,default:"medium",validator:function(t){return[null,"small","medium","large","full"].includes(t)}},fillMode:{type:String,default:"solid",validator:function(t){return[null,"solid","flat","outline"].includes(t)}},dir:{type:String},id:String,valid:{type:Boolean,default:void 0},validate:{type:Boolean},validationMessage:{type:String},validityStyles:{type:Boolean,default:!0},iconName:String,inputPrefix:[String,Function],prefix:[String,Function],inputSuffix:[String,Function],suffix:[String,Function],showValidationIcon:Boolean,showLoadingIcon:Boolean,showClearButton:Boolean,inputClass:String,wrapperClass:String,tabIndex:Number,role:String,title:String,ariaLabel:String,inputAttributes:Object},data:function(){return{hasMounted:!1,autofill:!1,currentValue:"",valueDuringOnChange:"",focused:!1}},created(){a.validatePackage(V.packageMetadata),this._input=void 0,this._inputId=a.guid(),this.$data.valueDuringOnChange=void 0,this.$data.currentValue=this.$props.defaultValue},mounted(){this._input=this.inputRef,this.wrapper=this.wrapperRef,this.$data.hasMounted=!0,this.setValidity()},updated(){this.setValidity(),this.updateValidClass()},setup(){return{inputRef:i.ref(null)}},render(){const t=!this.$props.validityStyles||this.validity().valid,{label:e,id:n,required:l,iconName:r,showValidationIcon:d,showLoadingIcon:h,showClearButton:c,inputAttributes:f}=this.$props,p=n||this._inputId,m=i.h("input",{...this.$attrs,...f,"aria-label":this.$props.ariaLabel,role:this.$props.role,title:this.$props.title,tabindex:this.$props.tabIndex,placeholder:this.$props.placeholder,id:p,required:l,disabled:this.$props.disabled,value:this.computedValue,class:this.inputInnerClass,ref:u=>{this.inputRef=u},onKeydown:this.handleKeydown,onKeyup:this.handleKeyup,onKeypress:this.handleKeypress,onChange:this.handleChange,onFocus:this.emitFocus,onBlur:this.emitBlur,onInput:this.handleInput,onAnimationstart:this.handleAutoFill,onAnimationend:this.handleAutoFillEnd}),g=a.templateRendering.call(this,this.$props.prefix||this.$props.inputPrefix,a.getListeners.call(this)),v=a.templateRendering.call(this,this.$props.suffix||this.$props.inputSuffix,a.getListeners.call(this)),y=a.getTemplate.call(this,{h:i.h,template:g,additionalProps:{value:this.computedValue,valid:t}}),$=a.getTemplate.call(this,{h:i.h,template:v,additionalProps:{value:this.computedValue,valid:t}}),s=i.createVNode("span",{class:this.inputWrapperClass(),ref:u=>{this.wrapperRef=u}},[r&&i.createVNode(a.Icon,{name:r,class:"k-input-icon"},null),(this.$props.prefix||this.$props.inputPrefix)&&i.createVNode("span",{class:"k-input-prefix"},[y]),m,(this.$props.suffix||this.$props.inputSuffix)&&i.createVNode("span",{class:"k-input-suffix"},[$]),d&&t&&i.createVNode(a.Icon,{name:"check",icon:o.checkIcon,class:"k-input-validation-icon"},null),d&&!t&&i.createVNode(a.Icon,{name:"exclamation-circle",icon:o.exclamationCircleIcon,class:"k-input-validation-icon"},null),h&&i.createVNode(a.Icon,{name:"loading",class:"k-input-loading-icon"},null),c&&this.computedValue&&i.createVNode("span",{onClick:this.clearClick,class:"k-clear-value"},[i.createVNode(a.Icon,{name:"x",icon:o.xIcon},null)])]);return e?i.createVNode(k.FloatingLabel,{label:e,editorId:p,editorValue:this.computedValue,editorValid:t,editorDisabled:this.$props.disabled,editorPlaceholder:this.$data.focused?this.$props.placeholder:"",dir:this.$props.dir},b(s)?s:{default:()=>[s]}):s},methods:{updateValidClass(){this.wrapper.classList.toggle("k-invalid",!this.validity().valid)},emitFocus(t){this.$emit("focus",{event:t}),this.$data.focused=!0},emitBlur(t){this.$emit("blur",{event:t}),this.$data.focused=!1},handleKeydown(t){this.$emit("keydown",t)},handleKeyup(t){this.$emit("keyup",t)},handleKeypress(t){this.$emit("keypress",t)},clearClick(t){this.emitUpdate(t,"change","")},focus(){this._input&&this._input.focus()},validity(){const t={badTextBox:this._input?this._input.validity.badTextBox:!1,patternMismatch:this._input?this._input.validity.patternMismatch:!1,rangeOverflow:this._input?this._input.validity.rangeOverflow:!1,rangeUnderflow:this._input?this._input.validity.rangeUnderflow:!1,stepMismatch:this._input?this._input.validity.stepMismatch:!1,tooLong:this._input?this._input.validity.tooLong:!1,tooShort:this._input?this._input.validity.tooShort:!1,typeMismatch:this._input?this._input.validity.typeMismatch:!1,valueMissing:this._input?this._input.validity.valueMissing:!1};return{...t,customError:this.$props.validationMessage!==void 0,valid:this.$props.valid!==void 0?this.$props.valid:this._input?!this.isInvalid(t):!0}},isInvalid(t){let e=!1;for(const n in t)t.hasOwnProperty(n)&&(e=e||t[n]);return e},setValidity(){this._input&&this._input.setCustomValidity&&this._input.setCustomValidity(this.validity().valid?"":this.$props.validationMessage||"")},handleInput(t){this.emitUpdate(t,"input",t.target.value)},handleChange(t){this.emitUpdate(t,"change",t.target.value)},emitUpdate(t,e,n){this.disabled||(this.$data.currentValue=n,this.$data.valueDuringOnChange=n,this.$nextTick(()=>{this.$emit("changemodel",n),this.$emit("update:modelValue",n),this.$emit(e,{event:t,value:n,component:this,target:t.target,validity:this.validity()}),this.$data.valueDuringOnChange=void 0}))},handleAutoFill(t){if(t.animationName==="autoFillStart"){const e=t.target.parentNode;e&&e.classList.contains("k-empty")&&(this.$data.autofill=!0,e.classList.remove("k-empty"))}},handleAutoFillEnd(t){t.animationName==="autoFillEnd"&&t.target.parentNode&&(this.$data.autofill=!1)},name:function(){return this.$props.name},inputWrapperClass(){const{size:t,fillMode:e,rounded:n}=this.$props,l=!this.$data.hasMounted||!this.$props.validityStyles||this.validity().valid;return{"k-textbox":!0,"k-input":!0,[`k-input-${a.kendoThemeMaps.sizeMap[t]||t}`]:t,[`k-input-${e}`]:e,[`k-rounded-${a.kendoThemeMaps.roundedMap[n]||n}`]:n,"k-invalid":!l,"k-required":this.required,"k-disabled":this.$props.disabled,[this.wrapperClass]:this.wrapperClass}}},computed:{spanClassNames(){const t=!this.$data.hasMounted||!this.$props.validityStyles||this.validity().valid;return{"k-floating-label-container":!0,"k-focus":this.$data.focused,"k-empty":!(this.computedValue===0||this.computedValue||this.$props.placeholder||this.$data.autofill),"k-autofill":this.$data.autofill,"k-invalid":!t&&t!==void 0,"k-rtl":this.$props.dir==="rtl"}},inputInnerClass(){return{"k-input-inner":!0,[this.inputClass]:this.inputClass}},computedValue(){return this.$data.valueDuringOnChange!==void 0?this.$data.valueDuringOnChange:this.$props.value!==void 0?this.$props.value:this.$props.modelValue!==void 0?this.$props.modelValue:this.$data.currentValue}}});exports.TextBox=x;

package/textbox/TextBox.mjs

@@ -5,15 +5,15 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as x, h as o, createVNode as a, ref as C, isVNode as _ } from "vue";
-import { kendoThemeMaps as h, templateRendering as c, getListeners as f, getTemplate as m, Icon as n, validatePackage as w, guid as I } from "@progress/kendo-vue-common";
+import { defineComponent as V, h as r, createVNode as a, ref as C, isVNode as _ } from "vue";
+import { kendoThemeMaps as h, templateRendering as c, getListeners as f, getTemplate as m, Icon as s, validatePackage as w, guid as I } from "@progress/kendo-vue-common";
 import { packageMetadata as M } from "../package-metadata.mjs";
 import { FloatingLabel as B } from "@progress/kendo-vue-labels";
-import { checkIcon as N, exclamationCircleIcon as F, xIcon as O } from "@progress/kendo-svg-icons";
+import { checkIcon as F, exclamationCircleIcon as N, xIcon as O } from "@progress/kendo-svg-icons";
 function L(t) {
   return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !_(t);
 }
-const R = /* @__PURE__ */ x({
+const R = /* @__PURE__ */ V({
   model: {
     event: "changemodel"
   },
@@ -96,7 +96,9 @@ const R = /* @__PURE__ */ x({
     },
     iconName: String,
     inputPrefix: [String, Function],
+    prefix: [String, Function],
     inputSuffix: [String, Function],
+    suffix: [String, Function],
     showValidationIcon: Boolean,
     showLoadingIcon: Boolean,
     showClearButton: Boolean,
@@ -136,12 +138,12 @@ const R = /* @__PURE__ */ x({
       label: i,
       id: e,
       required: l,
-      iconName: r,
+      iconName: o,
       showValidationIcon: d,
       showLoadingIcon: g,
       showClearButton: v,
       inputAttributes: y
-    } = this.$props, p = e || this._inputId, $ = o("input", {
+    } = this.$props, p = e || this._inputId, $ = r("input", {
       ...this.$attrs,
       ...y,
       "aria-label": this.$props.ariaLabel,
@@ -166,47 +168,47 @@ const R = /* @__PURE__ */ x({
       onInput: this.handleInput,
       onAnimationstart: this.handleAutoFill,
       onAnimationend: this.handleAutoFillEnd
-    }), k = c.call(this, this.$props.inputPrefix, f.call(this)), b = c.call(this, this.$props.inputSuffix, f.call(this)), V = m.call(this, {
-      h: o,
+    }), k = c.call(this, this.$props.prefix || this.$props.inputPrefix, f.call(this)), x = c.call(this, this.$props.suffix || this.$props.inputSuffix, f.call(this)), b = m.call(this, {
+      h: r,
       template: k,
       additionalProps: {
         value: this.computedValue,
         valid: t
       }
     }), S = m.call(this, {
-      h: o,
-      template: b,
+      h: r,
+      template: x,
       additionalProps: {
         value: this.computedValue,
         valid: t
       }
-    }), s = a("span", {
+    }), n = a("span", {
       class: this.inputWrapperClass(),
       ref: (u) => {
         this.wrapperRef = u;
       }
-    }, [r && a(n, {
-      name: r,
+    }, [o && a(s, {
+      name: o,
       class: "k-input-icon"
-    }, null), this.$props.inputPrefix && a("span", {
+    }, null), (this.$props.prefix || this.$props.inputPrefix) && a("span", {
       class: "k-input-prefix"
-    }, [V]), $, this.$props.inputSuffix && a("span", {
+    }, [b]), $, (this.$props.suffix || this.$props.inputSuffix) && a("span", {
       class: "k-input-suffix"
-    }, [S]), d && t && a(n, {
+    }, [S]), d && t && a(s, {
       name: "check",
-      icon: N,
+      icon: F,
       class: "k-input-validation-icon"
-    }, null), d && !t && a(n, {
+    }, null), d && !t && a(s, {
       name: "exclamation-circle",
-      icon: F,
+      icon: N,
       class: "k-input-validation-icon"
-    }, null), g && a(n, {
+    }, null), g && a(s, {
       name: "loading",
       class: "k-input-loading-icon"
     }, null), v && this.computedValue && a("span", {
       onClick: this.clearClick,
       class: "k-clear-value"
-    }, [a(n, {
+    }, [a(s, {
       name: "x",
       icon: O
     }, null)])]);
@@ -218,9 +220,9 @@ const R = /* @__PURE__ */ x({
       editorDisabled: this.$props.disabled,
       editorPlaceholder: this.$data.focused ? this.$props.placeholder : "",
       dir: this.$props.dir
-    }, L(s) ? s : {
-      default: () => [s]
-    }) : s;
+    }, L(n) ? n : {
+      default: () => [n]
+    }) : n;
   },
   methods: {
     updateValidClass() {