@progress/kendo-vue-inputs 8.4.0-develop.3 → 8.4.0-develop.4

package/rating/RatingItem.mjs

@@ -5,10 +5,10 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as f, h as M, createVNode as n, ref as x } from "vue";
-import { getTemplate as y, Icon as i, getIconName as h, classNames as b } from "@progress/kendo-vue-common";
-import { starOutlineIcon as d, starIcon as m } from "@progress/kendo-svg-icons";
-const B = /* @__PURE__ */ f({
+import { defineComponent as k, h as f, createVNode as n, ref as M } from "vue";
+import { getTemplate as x, Icon as i, getIconName as c, classNames as y } from "@progress/kendo-vue-common";
+import { starIcon as h } from "@progress/kendo-svg-icons";
+const F = /* @__PURE__ */ k({
   name: "KendoVueRatingItem",
   emits: {
     click: (e) => !0,
@@ -51,12 +51,12 @@ const B = /* @__PURE__ */ f({
   },
   setup() {
     return {
-      inputRef: x(null)
+      inputRef: M(null)
     };
   },
   computed: {
     wrapperClass() {
-      return b(`k-rating-item${this.$props.dir === "rtl" ? " k-rtl" : ""}${this.$props.haveSelectedValue || this.$props.selected ? " k-selected" : ""}${this.$props.hovered ? " k-hover" : ""}`);
+      return y(`k-rating-item${this.$props.dir === "rtl" ? " k-rtl" : ""}${this.$props.haveSelectedValue || this.$props.selected ? " k-selected" : ""}${this.$props.hovered ? " k-hover" : ""}`);
     }
   },
   render() {
@@ -64,29 +64,29 @@ const B = /* @__PURE__ */ f({
       id: e,
       dir: r,
       half: s,
-      tabIndex: p,
-      title: c,
+      tabIndex: m,
+      title: d,
       icon: t,
       svgIcon: l,
       svgIconOutline: a,
       hovered: o,
       selected: u,
-      haveSelectedValue: v,
-      item: g,
-      itemTemplate: $
-    } = this.$props, k = y.call(this, {
-      h: M,
-      template: $,
+      haveSelectedValue: p,
+      item: v,
+      itemTemplate: g
+    } = this.$props, $ = x.call(this, {
+      h: f,
+      template: g,
       additionalProps: {
         dir: r,
         half: s,
-        title: c,
+        title: d,
         icon: t,
         svgIcon: l,
         svgIconOutline: a,
         hovered: o,
         selected: u,
-        haveSelectedValue: v
+        haveSelectedValue: p
       },
       additionalListeners: {
         onclick: this.handleClick,
@@ -102,8 +102,8 @@ const B = /* @__PURE__ */ f({
       id: e,
       dir: r,
       "data-half": s,
-      tabindex: p,
-      title: c,
+      tabindex: m,
+      title: d,
       class: this.wrapperClass,
       onClick: this.handleClick,
       onKeydown: this.handleKeyDown,
@@ -112,11 +112,11 @@ const B = /* @__PURE__ */ f({
       onMouseenter: this.handleMouseEnter,
       onMouseleave: this.handleMouseLeave,
       onMousemove: this.handleMouseMove
-    }, [g ? k : [s && n("span", {
+    }, [v ? $ : [s && n("span", {
       class: "k-rating-precision-complement"
     }, [!(t || a) && n(i, {
-      name: "star-outline",
-      icon: d,
+      name: "star",
+      icon: h,
       style: r === "rtl" ? {
         clipPath: "inset(0 50% 0 0)"
       } : {
@@ -124,14 +124,14 @@ const B = /* @__PURE__ */ f({
       },
       size: "xlarge"
     }, null), (t || a) && n(i, {
-      name: h(`${t}-outline`),
+      name: c(`${t}-outline`),
       icon: a,
       size: "xlarge"
     }, null)]), s && n("span", {
       class: "k-rating-precision-part"
     }, [!(t || l) && n(i, {
       name: "star",
-      icon: m,
+      icon: h,
       style: r === "rtl" ? {
         clipPath: "inset(0 0 0 50%)"
       } : {
@@ -139,7 +139,7 @@ const B = /* @__PURE__ */ f({
       },
       size: "xlarge"
     }, null), (t || l) && n(i, {
-      name: t ? h(t) : void 0,
+      name: t ? c(t) : void 0,
       icon: l,
       size: "xlarge"
     }, null)]), s && n("span", {
@@ -150,18 +150,18 @@ const B = /* @__PURE__ */ f({
       }
     }, null), !s && (!(t || l) && (o || u && !o) && n(i, {
       name: "star",
-      icon: m,
+      icon: h,
       size: "xlarge"
     }, null) || !(t || l) && !o && !u && n(i, {
-      name: "star-outline",
-      icon: d,
+      name: "star",
+      icon: h,
       size: "xlarge"
     }, null) || (t || l) && (o || u && !o) && n(i, {
       name: t,
       icon: l,
       size: "xlarge"
     }, null) || (t || l) && !o && n(i, {
-      name: h(`${t}-outline`),
+      name: c(`${t}-outline`),
       icon: a,
       size: "xlarge"
     }, null))]]);
@@ -205,5 +205,5 @@ const B = /* @__PURE__ */ f({
   }
 });
 export {
-  B as RatingItem
+  F as RatingItem
 };

package/slider/Slider.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 r=require("vue"),c=require("@progress/kendo-vue-buttons"),s=require("@progress/kendo-vue-common"),p=require("@progress/kendo-vue-intl"),a=require("../messages/main.js"),g=require("./SliderLabel.js"),m=require("../package-metadata.js"),n=require("@progress/kendo-svg-icons"),f=r.defineComponent({name:"KendoSlider",model:{event:"changemodel"},emits:{changemodel:e=>!0,"update:modelValue":e=>!0,change:e=>!0,blur:e=>!0,focus:e=>!0},props:{modelValue:{type:Number,default:void 0},defaultValue:{type:Number,default:void 0},name:String,buttons:Boolean,tabIndex:Number,disabled:Boolean,dir:String,step:Number,min:{type:Number,required:!0},max:{type:Number,required:!0},value:Number,vertical:Boolean,id:String,ariaLabelledBy:String,ariaDescribedBy:String,ariaLabel:String},provide(){return{kendoMin:this.$props.min,kendoMax:this.$props.max,kendoVertical:this.$props.vertical}},inject:{kendoLocalizationService:{default:null}},data(){return{currentValue:void 0,currentFocused:!1,currentDir:"ltr"}},computed:{computedValue(){const e=this.$props.value!==void 0?this.$props.value:this.currentValue,{min:t,max:o}=this.$props;return e===void 0?e:Math.min(Math.max(e,t),o)},sliderTrack(){return this._sliderTrack}},created(){s.validatePackage(m.packageMetadata),this.$props.value!==void 0?this.$data.currentValue=this.$props.value:this.$props.modelValue!==void 0?this.$data.currentValue=this.$props.modelValue:this.$props.defaultValue!==void 0?this.$data.currentValue=this.$props.defaultValue:this.$data.currentValue=this.$props.min,this.currentFocused=!1,this.currentDir=this.$props.dir},mounted(){if(this._sliderTrack=this.$refs.sliderTrack,this.$el&&(this.draggable=this.$refs.draggable),!this.currentDir&&window&&this.$el){const e=window.getComputedStyle(this.$el).direction;e&&(this.currentDir=e)}},updated(){this.$el&&(this.draggable=this.$refs.draggable)},setup(){const e=r.ref(null),t=r.inject("kendoLocalizationService",{});return{inputRef:e,kendoLocalizationService:t}},render(){const e=p.provideLocalizationService(this),t=(this.computedValue-this.$props.min)/(this.$props.max-this.$props.min)*100,o=s.getDefaultSlots(this),{vertical:i}=this.$props,l=this.currentDir==="rtl"?i?n.caretAltUpIcon:n.caretAltLeftIcon:i?n.caretAltUpIcon:n.caretAltRightIcon,u=this.currentDir==="rtl"?i?n.caretAltDownIcon:n.caretAltRightIcon:i?n.caretAltDownIcon:n.caretAltLeftIcon,d=this.currentDir==="rtl"?i?"caret-alt-up":"caret-alt-left":i?"caret-alt-up":"caret-alt-right",h=this.currentDir==="rtl"?i?"caret-alt-down":"caret-alt-right":i?"caret-alt-down":"caret-alt-left";return r.createVNode("div",{dir:this.currentDir,id:this.$props.id,style:this.$props.style,onFocus:this.onFocus,onBlur:this.onBlur,onKeydown:this.onKeyDown,"aria-label":this.$props.ariaLabel,class:s.classNames("k-slider",{"k-focus":this.currentFocused,"k-disabled":this.$props.disabled,"k-slider-horizontal":!this.$props.vertical,"k-slider-vertical":this.$props.vertical},this.$props.className)},[this.$props.buttons&&r.createVNode(c.Button,{type:"button",tabIndex:-1,icon:h,svgIcon:u,style:{position:"relative"},rounded:"full",class:"k-button-decrease",title:e.toLanguageString(a.sliderDecreaseValue,a.messages[a.sliderDecreaseValue]),onClick:this.decrement},null),r.createVNode(s.Draggable,{onDrag:this.dragOver,onPress:this.dragStart,ref:"draggable"},{default:()=>[r.createVNode("div",{class:"k-slider-track-wrap",style:{touchAction:"none"}},[o&&r.createVNode("ul",{class:"k-reset k-slider-items"},[o]),r.createVNode("div",{class:"k-slider-track",ref:"sliderTrack"},[r.createVNode("div",{class:"k-slider-selection",style:this.$props.vertical?{height:t+"%"}:{width:t+"%"}},null),r.createVNode("span",{class:"k-draghandle",role:"slider",tabindex:"0","aria-valuenow":this.computedValue,"aria-valuemin":this.$props.min,"aria-valuemax":this.$props.max,"aria-valuetext":this.computedValue.toString(),"aria-disabled":this.$props.disabled?"true":void 0,title:e.toLanguageString(a.sliderDragTitle,a.messages[a.sliderDragTitle]),style:this.$props.vertical?{bottom:t+"%",zIndex:1}:{[this.currentDir==="rtl"?"right":"left"]:t+"%",zIndex:1}},null)])])]}),this.$props.buttons&&r.createVNode(c.Button,{type:"button",tabIndex:-1,icon:d,svgIcon:l,rounded:"full",style:{position:"relative"},class:"k-button-increase",title:e.toLanguageString(a.sliderIncreaseValue,a.messages[a.sliderIncreaseValue]),onClick:this.increment},null)])},methods:{focus(){this.$el&&this.$el.focus()},isLabel(e){let t=e;for(;t;){if(t.getAttribute(g.SLIDER_LABEL_ATTRIBUTE))return!0;t=t.parentElement}return!1},onFocus(e){this.currentFocused=!0,this.$emit("focus",{event:e})},onBlur(e){this.currentFocused=!1,this.$emit("blur",{event:e})},onKeyDown(e){let t;e.keyCode===s.Keys.left||e.keyCode===s.Keys.down?t=this.currentValue-(this.$props.step||0):e.keyCode===s.Keys.right||e.keyCode===s.Keys.up?t=this.currentValue+(this.$props.step||0):e.keyCode===s.Keys.home?t=this.$props.min:e.keyCode===s.Keys.end&&(t=this.$props.max),t!==void 0&&(e.preventDefault(),this.change(e,t))},decrement(e){e.preventDefault(),this.change(e,this.currentValue-(this.$props.step||0))},increment(e){e.preventDefault(),this.change(e,this.currentValue+(this.$props.step||0))},dragStart(e){this.isLabel(e.originalEvent.target)||(e.isTouch&&e.originalEvent.preventDefault(),this.drag(e))},dragOver(e){e.originalEvent.preventDefault(),this.drag(e)},drag(e){const t=this.draggable.element.getBoundingClientRect(),o=this.$props.vertical?t.bottom-e.clientY:this.currentDir==="rtl"?t.right-e.clientX:e.clientX-t.left,i=this.$props.vertical?t.height:t.width,l=o/i;this.change(e,this.$props.min+l*(this.$props.max-this.$props.min))},change(e,t){t=Math.min(Math.max(t,this.$props.min),this.$props.max),this.currentValue=t,this.$emit("changemodel",t),this.$emit("update:modelValue",t),this.$emit("change",{event:e,value:t,component:this,target:{name:this.$props.name,value:t}})}}});exports.Slider=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("vue"),p=require("@progress/kendo-vue-buttons"),i=require("@progress/kendo-vue-common"),g=require("@progress/kendo-vue-intl"),s=require("../messages/main.js"),m=require("./SliderLabel.js"),f=require("../package-metadata.js"),a=require("@progress/kendo-svg-icons"),v=r.defineComponent({name:"KendoSlider",model:{event:"changemodel"},emits:{changemodel:e=>!0,"update:modelValue":e=>!0,change:e=>!0,blur:e=>!0,focus:e=>!0},props:{modelValue:{type:Number,default:void 0},defaultValue:{type:Number,default:void 0},name:String,buttons:Boolean,tabIndex:Number,disabled:Boolean,dir:String,step:Number,min:{type:Number,required:!0},max:{type:Number,required:!0},value:Number,vertical:Boolean,id:String,ariaLabelledBy:String,ariaDescribedBy:String,ariaLabel:String},provide(){return{kendoMin:this.$props.min,kendoMax:this.$props.max,kendoVertical:this.$props.vertical}},inject:{kendoLocalizationService:{default:null}},data(){return{currentValue:void 0,currentFocused:!1,currentDir:"ltr"}},computed:{computedValue(){const e=this.$props.value!==void 0?this.$props.value:this.currentValue,{min:t,max:n}=this.$props;return e===void 0?e:Math.min(Math.max(e,t),n)},sliderTrack(){return this._sliderTrack}},created(){i.validatePackage(f.packageMetadata),this.$props.value!==void 0?this.$data.currentValue=this.$props.value:this.$props.modelValue!==void 0?this.$data.currentValue=this.$props.modelValue:this.$props.defaultValue!==void 0?this.$data.currentValue=this.$props.defaultValue:this.$data.currentValue=this.$props.min,this.currentFocused=!1,this.currentDir=this.$props.dir},mounted(){if(this._sliderTrack=this.$refs.sliderTrack,this.$el&&(this.draggable=this.$refs.draggable),!this.currentDir&&window&&this.$el){const e=window.getComputedStyle(this.$el).direction;e&&(this.currentDir=e)}},updated(){this.$el&&(this.draggable=this.$refs.draggable)},setup(){const e=r.ref(null),t=r.inject("kendoLocalizationService",{});return{inputRef:e,kendoLocalizationService:t}},render(){const e=g.provideLocalizationService(this),t=(this.computedValue-this.$props.min)/(this.$props.max-this.$props.min)*100,n=i.getDefaultSlots(this),{vertical:c}=this.$props,h=this.currentDir==="rtl";let o,l,u,d;return c?(o=a.chevronUpIcon,l=a.chevronDownIcon,u="chevron-up",d="chevron-down"):h?(o=a.chevronLeftIcon,l=a.chevronRightIcon,u="chevron-left",d="chevron-right"):(o=a.chevronRightIcon,l=a.chevronLeftIcon,u="chevron-right",d="chevron-left"),r.createVNode("div",{dir:this.currentDir,id:this.$props.id,style:this.$props.style,onFocus:this.onFocus,onBlur:this.onBlur,onKeydown:this.onKeyDown,"aria-label":this.$props.ariaLabel,class:i.classNames("k-slider",{"k-focus":this.currentFocused,"k-disabled":this.$props.disabled,"k-slider-horizontal":!this.$props.vertical,"k-slider-vertical":this.$props.vertical},this.$props.className)},[this.$props.buttons&&r.createVNode(p.Button,{type:"button",tabIndex:-1,icon:d,svgIcon:l,style:{position:"relative"},rounded:"full",class:"k-button-decrease",title:e.toLanguageString(s.sliderDecreaseValue,s.messages[s.sliderDecreaseValue]),onClick:this.decrement},null),r.createVNode(i.Draggable,{onDrag:this.dragOver,onPress:this.dragStart,ref:"draggable"},{default:()=>[r.createVNode("div",{class:"k-slider-track-wrap",style:{touchAction:"none"}},[n&&r.createVNode("ul",{class:"k-reset k-slider-items"},[n]),r.createVNode("div",{class:"k-slider-track",ref:"sliderTrack"},[r.createVNode("div",{class:"k-slider-selection",style:this.$props.vertical?{height:t+"%"}:{width:t+"%"}},null),r.createVNode("span",{class:"k-draghandle",role:"slider",tabindex:"0","aria-valuenow":this.computedValue,"aria-valuemin":this.$props.min,"aria-valuemax":this.$props.max,"aria-valuetext":this.computedValue.toString(),"aria-disabled":this.$props.disabled?"true":void 0,title:e.toLanguageString(s.sliderDragTitle,s.messages[s.sliderDragTitle]),style:this.$props.vertical?{bottom:t+"%",zIndex:1}:{[this.currentDir==="rtl"?"right":"left"]:t+"%",zIndex:1}},null)])])]}),this.$props.buttons&&r.createVNode(p.Button,{type:"button",tabIndex:-1,icon:u,svgIcon:o,rounded:"full",style:{position:"relative"},class:"k-button-increase",title:e.toLanguageString(s.sliderIncreaseValue,s.messages[s.sliderIncreaseValue]),onClick:this.increment},null)])},methods:{focus(){this.$el&&this.$el.focus()},isLabel(e){let t=e;for(;t;){if(t.getAttribute(m.SLIDER_LABEL_ATTRIBUTE))return!0;t=t.parentElement}return!1},onFocus(e){this.currentFocused=!0,this.$emit("focus",{event:e})},onBlur(e){this.currentFocused=!1,this.$emit("blur",{event:e})},onKeyDown(e){let t;e.keyCode===i.Keys.left||e.keyCode===i.Keys.down?t=this.currentValue-(this.$props.step||0):e.keyCode===i.Keys.right||e.keyCode===i.Keys.up?t=this.currentValue+(this.$props.step||0):e.keyCode===i.Keys.home?t=this.$props.min:e.keyCode===i.Keys.end&&(t=this.$props.max),t!==void 0&&(e.preventDefault(),this.change(e,t))},decrement(e){e.preventDefault(),this.change(e,this.currentValue-(this.$props.step||0))},increment(e){e.preventDefault(),this.change(e,this.currentValue+(this.$props.step||0))},dragStart(e){this.isLabel(e.originalEvent.target)||(e.isTouch&&e.originalEvent.preventDefault(),this.drag(e))},dragOver(e){e.originalEvent.preventDefault(),this.drag(e)},drag(e){const t=this.draggable.element.getBoundingClientRect(),n=this.$props.vertical?t.bottom-e.clientY:this.currentDir==="rtl"?t.right-e.clientX:e.clientX-t.left,c=this.$props.vertical?t.height:t.width,h=n/c;this.change(e,this.$props.min+h*(this.$props.max-this.$props.min))},change(e,t){t=Math.min(Math.max(t,this.$props.min),this.$props.max),this.currentValue=t,this.$emit("changemodel",t),this.$emit("update:modelValue",t),this.$emit("change",{event:e,value:t,component:this,target:{name:this.$props.name,value:t}})}}});exports.Slider=v;

package/slider/Slider.mjs

@@ -5,15 +5,15 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as b, createVNode as i, ref as k, inject as V } from "vue";
-import { Button as l } from "@progress/kendo-vue-buttons";
-import { Keys as a, getDefaultSlots as y, classNames as D, Draggable as S, validatePackage as w } from "@progress/kendo-vue-common";
-import { provideLocalizationService as x } from "@progress/kendo-vue-intl";
-import { sliderDecreaseValue as u, messages as o, sliderDragTitle as d, sliderIncreaseValue as c } from "../messages/main.mjs";
-import { SLIDER_LABEL_ATTRIBUTE as L } from "./SliderLabel.mjs";
-import { packageMetadata as I } from "../package-metadata.mjs";
-import { caretAltUpIcon as p, caretAltLeftIcon as h, caretAltRightIcon as m, caretAltDownIcon as g } from "@progress/kendo-svg-icons";
-const M = /* @__PURE__ */ b({
+import { defineComponent as v, createVNode as r, ref as b, inject as k } from "vue";
+import { Button as h } from "@progress/kendo-vue-buttons";
+import { Keys as s, getDefaultSlots as V, classNames as y, Draggable as S, validatePackage as D } from "@progress/kendo-vue-common";
+import { provideLocalizationService as w } from "@progress/kendo-vue-intl";
+import { sliderDecreaseValue as p, messages as c, sliderDragTitle as m, sliderIncreaseValue as g } from "../messages/main.mjs";
+import { SLIDER_LABEL_ATTRIBUTE as x } from "./SliderLabel.mjs";
+import { packageMetadata as L } from "../package-metadata.mjs";
+import { chevronUpIcon as I, chevronDownIcon as B, chevronLeftIcon as f, chevronRightIcon as $ } from "@progress/kendo-svg-icons";
+const R = /* @__PURE__ */ v({
   name: "KendoSlider",
   model: {
     event: "changemodel"
@@ -78,16 +78,16 @@ const M = /* @__PURE__ */ b({
     computedValue() {
       const e = this.$props.value !== void 0 ? this.$props.value : this.currentValue, {
         min: t,
-        max: s
+        max: i
       } = this.$props;
-      return e === void 0 ? e : Math.min(Math.max(e, t), s);
+      return e === void 0 ? e : Math.min(Math.max(e, t), i);
     },
     sliderTrack() {
       return this._sliderTrack;
     }
   },
   created() {
-    w(I), this.$props.value !== void 0 ? this.$data.currentValue = this.$props.value : this.$props.modelValue !== void 0 ? this.$data.currentValue = this.$props.modelValue : this.$props.defaultValue !== void 0 ? this.$data.currentValue = this.$props.defaultValue : this.$data.currentValue = this.$props.min, this.currentFocused = !1, this.currentDir = this.$props.dir;
+    D(L), this.$props.value !== void 0 ? this.$data.currentValue = this.$props.value : this.$props.modelValue !== void 0 ? this.$data.currentValue = this.$props.modelValue : this.$props.defaultValue !== void 0 ? this.$data.currentValue = this.$props.defaultValue : this.$data.currentValue = this.$props.min, this.currentFocused = !1, this.currentDir = this.$props.dir;
   },
   mounted() {
     if (this._sliderTrack = this.$refs.sliderTrack, this.$el && (this.draggable = this.$refs.draggable), !this.currentDir && window && this.$el) {
@@ -99,17 +99,18 @@ const M = /* @__PURE__ */ b({
     this.$el && (this.draggable = this.$refs.draggable);
   },
   setup() {
-    const e = k(null), t = V("kendoLocalizationService", {});
+    const e = b(null), t = k("kendoLocalizationService", {});
     return {
       inputRef: e,
       kendoLocalizationService: t
     };
   },
   render() {
-    const e = x(this), t = (this.computedValue - this.$props.min) / (this.$props.max - this.$props.min) * 100, s = y(this), {
-      vertical: r
-    } = this.$props, n = this.currentDir === "rtl" ? r ? p : h : r ? p : m, f = this.currentDir === "rtl" ? r ? g : m : r ? g : h, $ = this.currentDir === "rtl" ? r ? "caret-alt-up" : "caret-alt-left" : r ? "caret-alt-up" : "caret-alt-right", v = this.currentDir === "rtl" ? r ? "caret-alt-down" : "caret-alt-right" : r ? "caret-alt-down" : "caret-alt-left";
-    return i("div", {
+    const e = w(this), t = (this.computedValue - this.$props.min) / (this.$props.max - this.$props.min) * 100, i = V(this), {
+      vertical: u
+    } = this.$props, d = this.currentDir === "rtl";
+    let n, a, o, l;
+    return u ? (n = I, a = B, o = "chevron-up", l = "chevron-down") : d ? (n = f, a = $, o = "chevron-left", l = "chevron-right") : (n = $, a = f, o = "chevron-right", l = "chevron-left"), r("div", {
       dir: this.currentDir,
       id: this.$props.id,
       style: this.$props.style,
@@ -117,47 +118,47 @@ const M = /* @__PURE__ */ b({
       onBlur: this.onBlur,
       onKeydown: this.onKeyDown,
       "aria-label": this.$props.ariaLabel,
-      class: D("k-slider", {
+      class: y("k-slider", {
         "k-focus": this.currentFocused,
         "k-disabled": this.$props.disabled,
         "k-slider-horizontal": !this.$props.vertical,
         "k-slider-vertical": this.$props.vertical
       }, this.$props.className)
-    }, [this.$props.buttons && i(l, {
+    }, [this.$props.buttons && r(h, {
       type: "button",
       tabIndex: -1,
-      icon: v,
-      svgIcon: f,
+      icon: l,
+      svgIcon: a,
       style: {
         position: "relative"
       },
       rounded: "full",
       class: "k-button-decrease",
-      title: e.toLanguageString(u, o[u]),
+      title: e.toLanguageString(p, c[p]),
       onClick: this.decrement
-    }, null), i(S, {
+    }, null), r(S, {
       onDrag: this.dragOver,
       onPress: this.dragStart,
       ref: "draggable"
     }, {
-      default: () => [i("div", {
+      default: () => [r("div", {
         class: "k-slider-track-wrap",
         style: {
           touchAction: "none"
         }
-      }, [s && i("ul", {
+      }, [i && r("ul", {
         class: "k-reset k-slider-items"
-      }, [s]), i("div", {
+      }, [i]), r("div", {
         class: "k-slider-track",
         ref: "sliderTrack"
-      }, [i("div", {
+      }, [r("div", {
         class: "k-slider-selection",
         style: this.$props.vertical ? {
           height: t + "%"
         } : {
           width: t + "%"
         }
-      }, null), i("span", {
+      }, null), r("span", {
         class: "k-draghandle",
         role: "slider",
         tabindex: "0",
@@ -166,7 +167,7 @@ const M = /* @__PURE__ */ b({
         "aria-valuemax": this.$props.max,
         "aria-valuetext": this.computedValue.toString(),
         "aria-disabled": this.$props.disabled ? "true" : void 0,
-        title: e.toLanguageString(d, o[d]),
+        title: e.toLanguageString(m, c[m]),
         style: this.$props.vertical ? {
           bottom: t + "%",
           zIndex: 1
@@ -175,17 +176,17 @@ const M = /* @__PURE__ */ b({
           zIndex: 1
         }
       }, null)])])]
-    }), this.$props.buttons && i(l, {
+    }), this.$props.buttons && r(h, {
       type: "button",
       tabIndex: -1,
-      icon: $,
+      icon: o,
       svgIcon: n,
       rounded: "full",
       style: {
         position: "relative"
       },
       class: "k-button-increase",
-      title: e.toLanguageString(c, o[c]),
+      title: e.toLanguageString(g, c[g]),
       onClick: this.increment
     }, null)]);
   },
@@ -196,7 +197,7 @@ const M = /* @__PURE__ */ b({
     isLabel(e) {
       let t = e;
       for (; t; ) {
-        if (t.getAttribute(L))
+        if (t.getAttribute(x))
           return !0;
         t = t.parentElement;
       }
@@ -214,7 +215,7 @@ const M = /* @__PURE__ */ b({
     },
     onKeyDown(e) {
       let t;
-      e.keyCode === a.left || e.keyCode === a.down ? t = this.currentValue - (this.$props.step || 0) : e.keyCode === a.right || e.keyCode === a.up ? t = this.currentValue + (this.$props.step || 0) : e.keyCode === a.home ? t = this.$props.min : e.keyCode === a.end && (t = this.$props.max), t !== void 0 && (e.preventDefault(), this.change(e, t));
+      e.keyCode === s.left || e.keyCode === s.down ? t = this.currentValue - (this.$props.step || 0) : e.keyCode === s.right || e.keyCode === s.up ? t = this.currentValue + (this.$props.step || 0) : e.keyCode === s.home ? t = this.$props.min : e.keyCode === s.end && (t = this.$props.max), t !== void 0 && (e.preventDefault(), this.change(e, t));
     },
     decrement(e) {
       e.preventDefault(), this.change(e, this.currentValue - (this.$props.step || 0));
@@ -229,8 +230,8 @@ const M = /* @__PURE__ */ b({
       e.originalEvent.preventDefault(), this.drag(e);
     },
     drag(e) {
-      const t = this.draggable.element.getBoundingClientRect(), s = this.$props.vertical ? t.bottom - e.clientY : this.currentDir === "rtl" ? t.right - e.clientX : e.clientX - t.left, r = this.$props.vertical ? t.height : t.width, n = s / r;
-      this.change(e, this.$props.min + n * (this.$props.max - this.$props.min));
+      const t = this.draggable.element.getBoundingClientRect(), i = this.$props.vertical ? t.bottom - e.clientY : this.currentDir === "rtl" ? t.right - e.clientX : e.clientX - t.left, u = this.$props.vertical ? t.height : t.width, d = i / u;
+      this.change(e, this.$props.min + d * (this.$props.max - this.$props.min));
     },
     change(e, t) {
       t = Math.min(Math.max(t, this.$props.min), this.$props.max), this.currentValue = t, this.$emit("changemodel", t), this.$emit("update:modelValue", t), this.$emit("change", {
@@ -246,5 +247,5 @@ const M = /* @__PURE__ */ b({
   }
 });
 export {
-  M as Slider
+  R as Slider
 };

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 e=require("vue"),a=require("@progress/kendo-vue-common"),k=require("../package-metadata.js"),V=require("@progress/kendo-vue-labels"),o=require("@progress/kendo-svg-icons");function x(t){return typeof t=="function"||Object.prototype.toString.call(t)==="[object Object]"&&!e.isVNode(t)}const S=e.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,validator:function(t){return["small","medium","large"].includes(t)}},rounded:{type:String,validator:function(t){return["none","small","medium","large","full"].includes(t)}},fillMode:{type:String,validator:function(t){return["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(k.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:e.ref(null)}},render(){const t=!this.$props.validityStyles||this.validity().valid,{label:i,id:n,required:l,iconName:u,showValidationIcon:p,showLoadingIcon:h,showClearButton:c,inputAttributes:f}=this.$props,d=n||this._inputId,m=e.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:d,required:l,disabled:this.$props.disabled,value:this.computedValue,class:this.inputInnerClass,ref:r=>{this.inputRef=r},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)),$=a.getTemplate.call(this,{h:e.h,template:g,additionalProps:{value:this.computedValue,valid:t}}),y=a.getTemplate.call(this,{h:e.h,template:v,additionalProps:{value:this.computedValue,valid:t}}),s=e.createVNode("span",{class:this.inputWrapperClass(),ref:r=>{this.wrapperRef=r}},[u&&e.createVNode(a.Icon,{name:u,class:"k-input-icon"},null),(this.$props.prefix||this.$props.inputPrefix)&&e.createVNode("span",{class:"k-input-prefix k-input-prefix-horizontal"},[$]),(this.$props.prefix||this.$props.inputPrefix)&&e.createVNode("span",{class:"k-input-separator k-input-separator-vertical"},null),m,(this.$props.suffix||this.$props.inputSuffix)&&e.createVNode("span",{class:"k-input-separator k-input-separator-vertical"},null),(this.$props.suffix||this.$props.inputSuffix)&&e.createVNode("span",{class:"k-input-suffix k-input-suffix-horizontal"},[y]),p&&t&&e.createVNode(a.Icon,{name:"check",icon:o.checkIcon,class:"k-input-validation-icon"},null),p&&!t&&e.createVNode(a.Icon,{name:"exclamation-circle",icon:o.exclamationCircleIcon,class:"k-input-validation-icon"},null),h&&e.createVNode(a.Icon,{name:"loading",class:"k-input-loading-icon"},null),c&&this.computedValue&&e.createVNode("span",{onClick:this.clearClick,class:"k-clear-value"},[e.createVNode(a.Icon,{name:"x",icon:o.xIcon},null)])]);return i?e.createVNode(V.FloatingLabel,{label:i,editorId:d,editorValue:this.computedValue,editorValid:t,editorDisabled:this.$props.disabled,editorPlaceholder:this.$data.focused?this.$props.placeholder:"",dir:this.$props.dir},x(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 i=!1;for(const n in t)t.hasOwnProperty(n)&&(i=i||t[n]);return i},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,i,n){this.disabled||(this.$data.currentValue=n,this.$data.valueDuringOnChange=n,this.$nextTick(()=>{this.$emit("changemodel",n),this.$emit("update:modelValue",n),this.$emit(i,{event:t,value:n,component:this,target:t.target,validity:this.validity()}),this.$data.valueDuringOnChange=void 0}))},handleAutoFill(t){if(t.animationName==="autoFillStart"){const i=t.target.parentNode;i&&i.classList.contains("k-empty")&&(this.$data.autofill=!0,i.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:i,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-${i}`]:i,[`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"),r=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,validator:function(t){return["small","medium","large"].includes(t)}},rounded:{type:String,validator:function(t){return["none","small","medium","large","full"].includes(t)}},fillMode:{type:String,validator:function(t){return["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:u,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:o=>{this.inputRef=o},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:o=>{this.wrapperRef=o}},[u&&i.createVNode(a.Icon,{name:u,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:r.checkIcon,class:"k-input-validation-icon"},null),d&&!t&&i.createVNode(a.Icon,{name:"exclamation-circle",icon:r.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:r.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,7 +5,7 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as V, h as u, createVNode as a, ref as C, isVNode as _ } from "vue";
+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";
@@ -136,25 +136,25 @@ const R = /* @__PURE__ */ V({
       id: e,
       required: l,
       iconName: o,
-      showValidationIcon: p,
+      showValidationIcon: d,
       showLoadingIcon: g,
       showClearButton: v,
-      inputAttributes: $
-    } = this.$props, d = e || this._inputId, y = u("input", {
+      inputAttributes: y
+    } = this.$props, p = e || this._inputId, $ = r("input", {
       ...this.$attrs,
-      ...$,
+      ...y,
       "aria-label": this.$props.ariaLabel,
       role: this.$props.role,
       title: this.$props.title,
       tabindex: this.$props.tabIndex,
       placeholder: this.$props.placeholder,
-      id: d,
+      id: p,
       required: l,
       disabled: this.$props.disabled,
       value: this.computedValue,
       class: this.inputInnerClass,
-      ref: (r) => {
-        this.inputRef = r;
+      ref: (u) => {
+        this.inputRef = u;
       },
       onKeydown: this.handleKeydown,
       onKeyup: this.handleKeyup,
@@ -165,15 +165,15 @@ const R = /* @__PURE__ */ V({
       onInput: this.handleInput,
       onAnimationstart: this.handleAutoFill,
       onAnimationend: this.handleAutoFillEnd
-    }), 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)), S = m.call(this, {
-      h: u,
+    }), 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
       }
-    }), b = m.call(this, {
-      h: u,
+    }), S = m.call(this, {
+      h: r,
       template: x,
       additionalProps: {
         value: this.computedValue,
@@ -181,25 +181,21 @@ const R = /* @__PURE__ */ V({
       }
     }), n = a("span", {
       class: this.inputWrapperClass(),
-      ref: (r) => {
-        this.wrapperRef = r;
+      ref: (u) => {
+        this.wrapperRef = u;
       }
     }, [o && a(s, {
       name: o,
       class: "k-input-icon"
     }, null), (this.$props.prefix || this.$props.inputPrefix) && a("span", {
-      class: "k-input-prefix k-input-prefix-horizontal"
-    }, [S]), (this.$props.prefix || this.$props.inputPrefix) && a("span", {
-      class: "k-input-separator k-input-separator-vertical"
-    }, null), y, (this.$props.suffix || this.$props.inputSuffix) && a("span", {
-      class: "k-input-separator k-input-separator-vertical"
-    }, null), (this.$props.suffix || this.$props.inputSuffix) && a("span", {
-      class: "k-input-suffix k-input-suffix-horizontal"
-    }, [b]), p && t && a(s, {
+      class: "k-input-prefix"
+    }, [b]), $, (this.$props.suffix || this.$props.inputSuffix) && a("span", {
+      class: "k-input-suffix"
+    }, [S]), d && t && a(s, {
       name: "check",
       icon: F,
       class: "k-input-validation-icon"
-    }, null), p && !t && a(s, {
+    }, null), d && !t && a(s, {
       name: "exclamation-circle",
       icon: N,
       class: "k-input-validation-icon"
@@ -215,7 +211,7 @@ const R = /* @__PURE__ */ V({
     }, null)])]);
     return i ? a(B, {
       label: i,
-      editorId: d,
+      editorId: p,
       editorValue: this.computedValue,
       editorValid: t,
       editorDisabled: this.$props.disabled,