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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -5,4 +5,4 @@
5
5
  * Licensed under commercial license. See LICENSE.md in the package root for more information
6
6
  *-------------------------------------------------------------------------------------------
7
7
  */
8
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("vue"),a=require("@progress/kendo-vue-common"),$=require("@progress/kendo-vue-intl"),g=require("@progress/kendo-vue-buttons"),r=require("../messages/main.js"),i=require("./utils/main.js"),S=require("../package-metadata.js"),h=require("@progress/kendo-svg-icons"),k="Please enter a valid value!",y=s.defineComponent({model:{event:"changemodel"},emits:{change:t=>!0,changemodel:t=>!0,"update:modelValue":t=>!0,focus:t=>!0,blur:t=>!0},props:{modelValue:Number,value:Number,defaultValue:Number,step:{type:Number,default:1},format:[String,Object],tabIndex:Number,accessKey:String,title:String,placeholder:String,min:Number,max:Number,spinners:{type:Boolean,default:!0},disabled:{type:Boolean,default:!1},dir:String,name:String,label:String,validationMessage:String,validityStyles:{type:Boolean,default:!0},valid:{type:Boolean,default:void 0},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)}},required:{type:Boolean,default:!1},id:String,ariaLabel:String,iconName:String,inputPrefix:[String,Function],inputSuffix:[String,Function],showValidationIcon:Boolean,showLoadingIcon:Boolean,showClearButton:Boolean,inputClass:String,inputType:{type:String,default:"tel"},wrapperClass:String,inputAttributes:Object},inject:{kendoIntlService:{default:null},kendoLocalizationService:{default:null}},data(){return{hasMounted:!1,isInvalid:!1,isEmpty:!1,currentValue:0,valueDuringOnChange:0,currentLooseValue:"",selectionStart:0,selectionEnd:0,decimalSelect:!1,focused:!1,forceUpdate:!1}},created(){a.validatePackage(S.packageMetadata),this._textBeforeInput="",this._inputId=a.guid(),this.$data.currentLooseValue=null,this.$data.valueDuringOnChange=void 0,this._intl=$.provideIntlService(this),this._symbols=this._intl.numberSymbols(),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=null},mounted(){this._input=a.getRef(this,"input"),this._elementWrapper=this.elementWrapperRef,this.$data.hasMounted=!0,this._input&&(this._textBeforeInput=this._input.value),this.setValidity()},updated(){!(a.canUseDOM&&document.activeElement!==this._input||!this._input)&&this.$data.currentLooseValue!==null&&this.$data.forceUpdate&&this._input.type!=="number"&&(this._input.selectionStart=this.$data.selectionStart,this._input.selectionEnd=this.$data.selectionEnd,this.$data.forceUpdate=!1),this._input&&(this._textBeforeInput=this._input.value),this.setValidity()},computed:{computedValue(){return this.$data.valueDuringOnChange!==void 0?this.$data.valueDuringOnChange:this.$data.currentValue},looseValue(){return i.formatValue(this.$data.focused?this.$data.currentLooseValue:i.getStateOrPropsValue(this.$props.value,this.$data.currentValue),this.$props.format,this._intl)},spanClassNames(){const t=!this.$data.hasMounted||!this.$props.validityStyles||this.validity().valid,e=this.computedValue;return{"k-floating-label-container":!0,"k-focus":this.$data.focused,"k-empty":!(e===0||e||this.$props.placeholder),"k-invalid":!t&&t!==void 0,"k-rtl":this.$props.dir==="rtl",[this.inputClass]:this.inputClass}},wrapperClassNames(){const{size:t,fillMode:e,rounded:n,required:l,disabled:d}=this.$props,u=!this.$props.validityStyles||this.validity().valid;return{"k-input":!0,"k-numerictextbox":!0,[`k-input-${a.kendoThemeMaps.sizeMap[t]||t}`]:t,[`k-input-${e}`]:e,[`k-rounded-${a.kendoThemeMaps.roundedMap[n]||n}`]:n,"k-invalid":!u,"k-required":l,"k-disabled":d,"k-loading":this.showLoadingIcon,[this.wrapperClass]:this.wrapperClass}},inputInnerClass(){return{"k-input-inner":!0,[this.inputClass]:this.inputClass}}},methods:{validity(){const t=this.$props.validationMessage!==void 0,e=!this.$data.valueIsOutOfRange&&(!this.$props.required||this.computedValue!==null),n=this.$props.valid!==void 0?this.$props.valid:e;return{customError:t,valid:n,valueMissing:this.computedValue===null}},clearClick(t){this.$props.value!==void 0?this.$data.currentValue=this.$props.value:this.$props.modelValue!==void 0?this.$data.currentValue=this.$props.modelValue:this.$data.currentValue=null,this.$emit("changemodel",null),this.$emit("update:modelValue",null),this.$emit("change",{event:t,value:null,component:this,target:{name:this.$props.name,value:null},validity:this.validity()})},focus(){this._input&&this._input.focus()},emitFocus(t){this.$data.currentLooseValue=this._prevLooseValue,this.$data.focused=!0,this.$emit("focus",{event:t})},emitBlur(t){this.$data.eventValue=null,this.$data.prevLooseValue="",this.$data.currentLooseValue="",this.$data.focused=!1,this.$data.selectionStart=void 0,this.$data.selectionEnd=void 0,this.$data.decimalSelect=!1,this.$data.valueIsCorrected=!1,this.$data.valueIsOutOfRange=!1,this.$emit("blur",{event:t})},handleFocus(t){this.$data.focused=!0},handleBlur(t){this.$data.focused=!1},setValidity(){this._input&&this._input.setCustomValidity&&this._input.setCustomValidity(this.validity().valid?"":this.$props.validationMessage||k)},getCurrentState(){return{eventValue:i.getStateOrPropsValue(this.$props.value,this.$data.currentValue),prevLooseValue:this._prevLooseValue,currentLooseValue:this._input.value,selectionStart:this._input.selectionStart,selectionEnd:this._input.selectionEnd,decimalSelect:!1,valueIsCorrected:!1,valueIsOutOfRange:!1,isPaste:this._isPaste,focused:this.$data.focused}},parseNumber(t){return this._intl.parseNumber(t,this.$props.format)},elementChange(t){const e=this.getCurrentState();this._isPaste=!1,this.triggerChange(t,i.sanitizeNumber(e,this.$props.format,this._intl))},triggerChange(t,e){if(this.$props.disabled)return;this.$data.valueDuringOnChange=e.eventValue,this.$data.currentValue=e.eventValue;const n=i.formatValue(i.rangeValue(e.eventValue,this.$props.min,this.$props.max),this.$props.format,this._intl),l=i.rangeValue(this.parseNumber(n),this.$props.min,this.$props.max);if(l!==e.eventValue&&(e.valueIsOutOfRange=!0,e.eventValue=l,this.$data.valueDuringOnChange=l,this.$data.currentValue=l),e.valueIsCorrected){const u=this._elementWrapper;u&&u.className.indexOf("k-invalid")===-1&&(this.$data.isInvalid=!0,setTimeout(()=>{this.$data.isInvalid=!1},50))}const d=this.$props.value!==e.eventValue;this.$props.value!==void 0?this.$data.currentValue=this.$props.value:this.$props.modelValue!==void 0?this.$data.currentValue=this.$props.modelValue:this.$data.currentValue=this.$data.valueDuringOnChange,this.$data.prevLooseValue=e.prevLooseValue,this.$data.currentLooseValue=void 0,this.$data.currentLooseValue=e.currentLooseValue,this.$data.selectionStart=e.selectionStart,this.$data.selectionEnd=e.selectionEnd,this.$data.decimalSelect=e.decimalSelect,this.$data.valueIsCorrected=e.valueIsCorrected,this.$data.valueIsOutOfRange=e.valueIsOutOfRange,this.$data.focused=e.focused,this.$data.isPaste=e.isPaste,this.$data.forceUpdate=!this.$data.forceUpdate,d&&(this.$emit("changemodel",this.$data.valueDuringOnChange),this.$emit("update:modelValue",this.$data.valueDuringOnChange),this.$emit("change",{event:t,value:this.$data.valueDuringOnChange,component:this,target:{name:this.$props.name,value:this.$data.valueDuringOnChange},validity:this.validity()})),this.$data.valueDuringOnChange=void 0},onPasteHandler(t){this._isPaste=!0},increase(t){const e=this.getCurrentState();i.increaseValue(this.parseNumber(String(e.currentLooseValue)),e,this.$props.step,this.$props.min,this.$props.max,this.$props.format,this._intl),this.triggerChange(t,e)},decrease(t){const e=this.getCurrentState();i.decreaseValue(this.parseNumber(String(e.currentLooseValue)),e,this.$props.step,this.$props.min,this.$props.max,this.$props.format,this._intl),this.triggerChange(t,e)},wheel(t){!a.canUseDOM||document.activeElement!==this._input||!this._input||(t.deltaY<0&&(t.preventDefault(),this.increase(t)),t.deltaY>0&&(t.preventDefault(),this.decrease(t)))},keyDown(t){let e=this.getCurrentState(),n,l,d,u;const c=this.parseNumber(String(e.currentLooseValue));if(e.selectionEnd>e.selectionStart&&e.selectionEnd-e.selectionStart===String(e.currentLooseValue).length){const o=this._intl.numberSymbols(),p=o&&t.key===o.minusSign,m=o&&t.key===o.decimal;this.$data.isPaste=!p&&!m;return}switch(t.keyCode){case 38:i.increaseValue(c,e,this.$props.step,this.$props.min,this.$props.max,this.$props.format,this._intl);break;case 40:i.decreaseValue(c,e,this.$props.step,this.$props.min,this.$props.max,this.$props.format,this._intl);break;case 13:n=i.formatValue(i.rangeValue(c,this.$props.min,this.$props.max),this.$props.format,this._intl),l=i.rangeValue(this.parseNumber(n),this.$props.min,this.$props.max),e.eventValue=l,e.currentLooseValue=i.formatValue(l,this.$props.format,this._intl),e.selectionStart=e.selectionEnd=e.currentLooseValue.length;break;case 110:d=this._input,u=this._intl.numberSymbols(),d&&(e.currentLooseValue=e.currentLooseValue.slice(0,e.selectionStart)+u.decimal+e.currentLooseValue.slice(e.selectionEnd),e.selectionStart=e.selectionEnd=e.selectionStart+1,e=i.sanitizeNumber(e,this.$props.format,this._intl));break;default:return}t.preventDefault(),this.triggerChange(t,e)},spinnersWrapperMouseDown(t){a.canUseDOM&&this._input&&(t.preventDefault(),document.activeElement!==this._input&&this._input.focus())}},setup(){const t=s.ref(null),e=s.ref(null),n=s.inject("kendoLocalizationService",{}),l=s.inject("kendoIntlService",{});return{inputRef:t,elementWrapperRef:e,kendoLocalizationService:n,kendoIntlService:l}},render(){const{iconName:t,showValidationIcon:e,showLoadingIcon:n,showClearButton:l,inputAttributes:d}=this.$props,u=this.$props.id||this._inputId,c=a.getDefaultSlots(this),o=$.provideLocalizationService(this),p=this.validity().valid;this.$props.value!==void 0&&this.$props.value!==this.$data.currentValue?this.$data.currentValue=this.$props.value:this.$props.modelValue!==void 0&&this.$props.modelValue!==this.$data.currentValue&&(this.$data.currentValue=this.$props.modelValue),this._prevLooseValue=this.$data.currentLooseValue?this.looseValue:this.looseValue;const m=a.templateRendering.call(this,this.$props.inputPrefix,a.getListeners.call(this)),V=a.templateRendering.call(this,this.$props.inputSuffix,a.getListeners.call(this)),v=a.getTemplate.call(this,{h:s.h,template:m,additionalProps:{value:this.computedValue,valid:p}}),b=a.getTemplate.call(this,{h:s.h,template:V,additionalProps:{value:this.computedValue,valid:p}}),f=s.createVNode("span",{dir:this.$props.dir,class:this.wrapperClassNames,style:this.$attrs.style},[t&&s.createVNode(a.Icon,{name:t,class:"k-input-icon"},null),this.$props.inputPrefix&&s.createVNode("span",{class:"k-input-prefix"},[v]),s.createVNode("input",s.mergeProps({tabindex:this.$props.tabIndex,accesskey:this.$props.accessKey,disabled:this.$props.disabled,title:this.$props.title,"aria-label":this.$props.ariaLabel,"aria-valuemin":this.$props.min,"aria-valuemax":this.$props.max,"aria-disabled":this.$props.disabled?"true":void 0,placeholder:this.$props.placeholder,type:this.$props.inputType,spellcheck:!1,autocomplete:"off",autocorrect:"off",class:this.inputInnerClass,id:u,role:"spinbutton",value:this.looseValue,name:this.$props.name,onWheel:this.wheel,onKeydown:this.keyDown,onInput:this.elementChange,onFocus:this.emitFocus,onBlur:this.emitBlur,onPaste:this.onPasteHandler,ref:a.setRef(this,"input")},d),null),this.$props.inputSuffix&&s.createVNode("span",{class:"k-input-suffix"},[b]),e&&p&&s.createVNode(a.Icon,{name:"check",icon:h.checkIcon,class:"k-input-validation-icon"},null),e&&!p&&s.createVNode(a.Icon,{name:"exclamation-circle",icon:h.exclamationCircleIcon,class:"k-input-validation-icon"},null),n&&s.createVNode(a.Icon,{name:"loading",class:"k-input-loading-icon"},null),l&&this.computedValue!==void 0&&this.computedValue!==null&&s.createVNode("span",{onClick:this.clearClick,class:"k-clear-value"},[s.createVNode(a.Icon,{name:"x",icon:h.xIcon},null)]),c,this.$props.spinners&&s.createVNode("span",{class:"k-input-spinner k-spin-button",onMousedown:this.spinnersWrapperMouseDown},[s.createVNode(g.Button,{type:"button",tabIndex:-1,icon:"caret-alt-up",svgIcon:h.caretAltUpIcon,class:"k-spinner-increase",rounded:null,disabled:this.$props.disabled,"aria-label":o.toLanguageString(r.numericIncreaseValue,r.messages[r.numericIncreaseValue]),title:o.toLanguageString(r.numericIncreaseValue,r.messages[r.numericIncreaseValue]),onClick:this.increase},null),s.createVNode(g.Button,{type:"button",tabIndex:-1,class:"k-spinner-decrease",icon:"caret-alt-down",svgIcon:h.caretAltDownIcon,rounded:null,disabled:this.$props.disabled,"aria-label":o.toLanguageString(r.numericDecreaseValue,r.messages[r.numericDecreaseValue]),title:o.toLanguageString(r.numericDecreaseValue,r.messages[r.numericDecreaseValue]),onClick:this.decrease},null)])]);return this.$props.label?s.createVNode("span",{class:this.spanClassNames,onFocusin:this.handleFocus,onFocusout:this.handleBlur,dir:this.$props.dir},[f,this.$props.label?u?s.createVNode("label",{for:u,class:"k-floating-label"},[this.$props.label]):s.createVNode("span",{class:"k-label"},[this.$props.label]):null]):f}});exports.NumericTextBox=y;
8
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("vue"),i=require("@progress/kendo-vue-common"),$=require("@progress/kendo-vue-intl"),g=require("@progress/kendo-vue-buttons"),r=require("../messages/main.js"),a=require("./utils/main.js"),S=require("../package-metadata.js"),h=require("@progress/kendo-svg-icons"),k="Please enter a valid value!",y=s.defineComponent({model:{event:"changemodel"},emits:{change:t=>!0,changemodel:t=>!0,"update:modelValue":t=>!0,focus:t=>!0,blur:t=>!0},props:{modelValue:Number,value:Number,defaultValue:Number,step:{type:Number,default:1},format:[String,Object],tabIndex:Number,accessKey:String,title:String,placeholder:String,min:Number,max:Number,spinners:{type:Boolean,default:!0},disabled:{type:Boolean,default:!1},dir:String,name:String,label:String,validationMessage:String,validityStyles:{type:Boolean,default:!0},valid:{type:Boolean,default:void 0},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)}},required:{type:Boolean,default:!1},id:String,ariaLabel:String,iconName:String,inputPrefix:[String,Function],inputSuffix:[String,Function],showValidationIcon:Boolean,showLoadingIcon:Boolean,showClearButton:Boolean,inputClass:String,inputType:{type:String,default:"tel"},wrapperClass:String,inputAttributes:Object},inject:{kendoIntlService:{default:null},kendoLocalizationService:{default:null}},data(){return{hasMounted:!1,isInvalid:!1,isEmpty:!1,currentValue:0,valueDuringOnChange:0,currentLooseValue:"",selectionStart:0,selectionEnd:0,decimalSelect:!1,focused:!1,forceUpdate:!1}},created(){i.validatePackage(S.packageMetadata),this._textBeforeInput="",this._inputId=i.guid(),this.$data.currentLooseValue=null,this.$data.valueDuringOnChange=void 0,this._intl=$.provideIntlService(this),this._symbols=this._intl.numberSymbols(),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=null},mounted(){this._input=i.getRef(this,"input"),this._elementWrapper=this.elementWrapperRef,this.$data.hasMounted=!0,this._input&&(this._textBeforeInput=this._input.value),this.setValidity()},updated(){!(i.canUseDOM&&document.activeElement!==this._input||!this._input)&&this.$data.currentLooseValue!==null&&this.$data.forceUpdate&&this._input.type!=="number"&&(this._input.selectionStart=this.$data.selectionStart,this._input.selectionEnd=this.$data.selectionEnd,this.$data.forceUpdate=!1),this._input&&(this._textBeforeInput=this._input.value),this.setValidity()},computed:{computedValue(){return this.$data.valueDuringOnChange!==void 0?this.$data.valueDuringOnChange:this.$data.currentValue},looseValue(){return a.formatValue(this.$data.focused?this.$data.currentLooseValue:a.getStateOrPropsValue(this.$props.value,this.$data.currentValue),this.$props.format,this._intl)},spanClassNames(){const t=!this.$data.hasMounted||!this.$props.validityStyles||this.validity().valid,e=this.computedValue;return{"k-floating-label-container":!0,"k-focus":this.$data.focused,"k-empty":!(e===0||e||this.$props.placeholder),"k-invalid":!t&&t!==void 0,"k-rtl":this.$props.dir==="rtl",[this.inputClass]:this.inputClass}},wrapperClassNames(){const{size:t,fillMode:e,rounded:n,required:l,disabled:d}=this.$props,u=!this.$props.validityStyles||this.validity().valid;return{"k-input":!0,"k-numerictextbox":!0,[`k-input-${i.kendoThemeMaps.sizeMap[t]||t}`]:t,[`k-input-${e}`]:e,[`k-rounded-${i.kendoThemeMaps.roundedMap[n]||n}`]:n,"k-invalid":!u,"k-required":l,"k-disabled":d,"k-loading":this.showLoadingIcon,[this.wrapperClass]:this.wrapperClass}},inputInnerClass(){return{"k-input-inner":!0,[this.inputClass]:this.inputClass}}},methods:{validity(){const t=this.$props.validationMessage!==void 0,e=!this.$data.valueIsOutOfRange&&(!this.$props.required||this.computedValue!==null),n=this.$props.valid!==void 0?this.$props.valid:e;return{customError:t,valid:n,valueMissing:this.computedValue===null}},clearClick(t){this.$props.value!==void 0?this.$data.currentValue=this.$props.value:this.$props.modelValue!==void 0?this.$data.currentValue=this.$props.modelValue:this.$data.currentValue=null,this.$emit("changemodel",null),this.$emit("update:modelValue",null),this.$emit("change",{event:t,value:null,component:this,target:{name:this.$props.name,value:null},validity:this.validity()})},focus(){this._input&&this._input.focus()},emitFocus(t){this.$data.currentLooseValue=this._prevLooseValue,this.$data.focused=!0,this.$emit("focus",{event:t})},emitBlur(t){this.$data.eventValue=null,this.$data.prevLooseValue="",this.$data.currentLooseValue="",this.$data.focused=!1,this.$data.selectionStart=void 0,this.$data.selectionEnd=void 0,this.$data.decimalSelect=!1,this.$data.valueIsCorrected=!1,this.$data.valueIsOutOfRange=!1,this.$emit("blur",{event:t})},handleFocus(t){this.$data.focused=!0},handleBlur(t){this.$data.focused=!1},setValidity(){this._input&&this._input.setCustomValidity&&this._input.setCustomValidity(this.validity().valid?"":this.$props.validationMessage||k)},getCurrentState(){return{eventValue:a.getStateOrPropsValue(this.$props.value,this.$data.currentValue),prevLooseValue:this._prevLooseValue,currentLooseValue:this._input.value,selectionStart:this._input.selectionStart,selectionEnd:this._input.selectionEnd,decimalSelect:!1,valueIsCorrected:!1,valueIsOutOfRange:!1,isPaste:this._isPaste,focused:this.$data.focused}},parseNumber(t){return this._intl.parseNumber(t,this.$props.format)},elementChange(t){const e=this.getCurrentState();this._isPaste=!1,this.triggerChange(t,a.sanitizeNumber(e,this.$props.format,this._intl))},triggerChange(t,e){if(this.$props.disabled)return;this.$data.valueDuringOnChange=e.eventValue,this.$data.currentValue=e.eventValue;const n=a.formatValue(a.rangeValue(e.eventValue,this.$props.min,this.$props.max),this.$props.format,this._intl),l=a.rangeValue(this.parseNumber(n),this.$props.min,this.$props.max);if(l!==e.eventValue&&(e.valueIsOutOfRange=!0,e.eventValue=l,this.$data.valueDuringOnChange=l,this.$data.currentValue=l),e.valueIsCorrected){const u=this._elementWrapper;u&&u.className.indexOf("k-invalid")===-1&&(this.$data.isInvalid=!0,setTimeout(()=>{this.$data.isInvalid=!1},50))}const d=this.$props.value!==e.eventValue;this.$props.value!==void 0?this.$data.currentValue=this.$props.value:this.$props.modelValue!==void 0?this.$data.currentValue=this.$props.modelValue:this.$data.currentValue=this.$data.valueDuringOnChange,this.$data.prevLooseValue=e.prevLooseValue,this.$data.currentLooseValue=void 0,this.$data.currentLooseValue=e.currentLooseValue,this.$data.selectionStart=e.selectionStart,this.$data.selectionEnd=e.selectionEnd,this.$data.decimalSelect=e.decimalSelect,this.$data.valueIsCorrected=e.valueIsCorrected,this.$data.valueIsOutOfRange=e.valueIsOutOfRange,this.$data.focused=e.focused,this.$data.isPaste=e.isPaste,this.$data.forceUpdate=!this.$data.forceUpdate,d&&(this.$emit("changemodel",this.$data.valueDuringOnChange),this.$emit("update:modelValue",this.$data.valueDuringOnChange),this.$emit("change",{event:t,value:this.$data.valueDuringOnChange,component:this,target:{name:this.$props.name,value:this.$data.valueDuringOnChange},validity:this.validity()})),this.$data.valueDuringOnChange=void 0},onPasteHandler(t){this._isPaste=!0},increase(t){const e=this.getCurrentState();a.increaseValue(this.parseNumber(String(e.currentLooseValue)),e,this.$props.step,this.$props.min,this.$props.max,this.$props.format,this._intl),this.triggerChange(t,e)},decrease(t){const e=this.getCurrentState();a.decreaseValue(this.parseNumber(String(e.currentLooseValue)),e,this.$props.step,this.$props.min,this.$props.max,this.$props.format,this._intl),this.triggerChange(t,e)},wheel(t){!i.canUseDOM||document.activeElement!==this._input||!this._input||(t.deltaY<0&&(t.preventDefault(),this.increase(t)),t.deltaY>0&&(t.preventDefault(),this.decrease(t)))},keyDown(t){let e=this.getCurrentState(),n,l,d,u;const c=this.parseNumber(String(e.currentLooseValue));if(e.selectionEnd>e.selectionStart&&e.selectionEnd-e.selectionStart===String(e.currentLooseValue).length){const o=this._intl.numberSymbols(),p=o&&t.key===o.minusSign,m=o&&t.key===o.decimal;this.$data.isPaste=!p&&!m;return}switch(t.keyCode){case 38:a.increaseValue(c,e,this.$props.step,this.$props.min,this.$props.max,this.$props.format,this._intl);break;case 40:a.decreaseValue(c,e,this.$props.step,this.$props.min,this.$props.max,this.$props.format,this._intl);break;case 13:n=a.formatValue(a.rangeValue(c,this.$props.min,this.$props.max),this.$props.format,this._intl),l=a.rangeValue(this.parseNumber(n),this.$props.min,this.$props.max),e.eventValue=l,e.currentLooseValue=a.formatValue(l,this.$props.format,this._intl),e.selectionStart=e.selectionEnd=e.currentLooseValue.length;break;case 110:d=this._input,u=this._intl.numberSymbols(),d&&(e.currentLooseValue=e.currentLooseValue.slice(0,e.selectionStart)+u.decimal+e.currentLooseValue.slice(e.selectionEnd),e.selectionStart=e.selectionEnd=e.selectionStart+1,e=a.sanitizeNumber(e,this.$props.format,this._intl));break;default:return}t.preventDefault(),this.triggerChange(t,e)},spinnersWrapperMouseDown(t){i.canUseDOM&&this._input&&(t.preventDefault(),document.activeElement!==this._input&&this._input.focus())}},setup(){const t=s.ref(null),e=s.ref(null),n=s.inject("kendoLocalizationService",{}),l=s.inject("kendoIntlService",{});return{inputRef:t,elementWrapperRef:e,kendoLocalizationService:n,kendoIntlService:l}},render(){const{iconName:t,showValidationIcon:e,showLoadingIcon:n,showClearButton:l,inputAttributes:d}=this.$props,u=this.$props.id||this._inputId,c=i.getDefaultSlots(this),o=$.provideLocalizationService(this),p=this.validity().valid;this.$props.value!==void 0&&this.$props.value!==this.$data.currentValue?this.$data.currentValue=this.$props.value:this.$props.modelValue!==void 0&&this.$props.modelValue!==this.$data.currentValue&&(this.$data.currentValue=this.$props.modelValue),this._prevLooseValue=this.$data.currentLooseValue?this.looseValue:this.looseValue;const m=i.templateRendering.call(this,this.$props.inputPrefix,i.getListeners.call(this)),V=i.templateRendering.call(this,this.$props.inputSuffix,i.getListeners.call(this)),v=i.getTemplate.call(this,{h:s.h,template:m,additionalProps:{value:this.computedValue,valid:p}}),b=i.getTemplate.call(this,{h:s.h,template:V,additionalProps:{value:this.computedValue,valid:p}}),f=s.createVNode("span",{dir:this.$props.dir,class:this.wrapperClassNames,style:this.$attrs.style},[t&&s.createVNode(i.Icon,{name:t,class:"k-input-icon"},null),this.$props.inputPrefix&&s.createVNode("span",{class:"k-input-prefix"},[v]),s.createVNode("input",s.mergeProps({tabindex:this.$props.tabIndex,accesskey:this.$props.accessKey,disabled:this.$props.disabled,title:this.$props.title,"aria-label":this.$props.ariaLabel,"aria-valuemin":this.$props.min,"aria-valuemax":this.$props.max,"aria-disabled":this.$props.disabled?"true":void 0,placeholder:this.$props.placeholder,type:this.$props.inputType,spellcheck:!1,autocomplete:"off",autocorrect:"off",class:this.inputInnerClass,id:u,role:"spinbutton",value:this.looseValue,name:this.$props.name,onWheel:this.wheel,onKeydown:this.keyDown,onInput:this.elementChange,onFocus:this.emitFocus,onBlur:this.emitBlur,onPaste:this.onPasteHandler,ref:i.setRef(this,"input")},d),null),this.$props.inputSuffix&&s.createVNode("span",{class:"k-input-suffix"},[b]),e&&p&&s.createVNode(i.Icon,{name:"check",icon:h.checkIcon,class:"k-input-validation-icon"},null),e&&!p&&s.createVNode(i.Icon,{name:"exclamation-circle",icon:h.exclamationCircleIcon,class:"k-input-validation-icon"},null),n&&s.createVNode(i.Icon,{name:"loading",class:"k-input-loading-icon"},null),l&&this.computedValue!==void 0&&this.computedValue!==null&&s.createVNode("span",{onClick:this.clearClick,class:"k-clear-value"},[s.createVNode(i.Icon,{name:"x",icon:h.xIcon},null)]),c,this.$props.spinners&&s.createVNode("span",{class:"k-input-spinner k-spin-button",onMousedown:this.spinnersWrapperMouseDown},[s.createVNode(g.Button,{type:"button",tabIndex:-1,icon:"chevron-up",svgIcon:h.chevronUpIcon,class:"k-spinner-increase",rounded:null,disabled:this.$props.disabled,"aria-label":o.toLanguageString(r.numericIncreaseValue,r.messages[r.numericIncreaseValue]),title:o.toLanguageString(r.numericIncreaseValue,r.messages[r.numericIncreaseValue]),onClick:this.increase},null),s.createVNode(g.Button,{type:"button",tabIndex:-1,class:"k-spinner-decrease",icon:"chevron-down",svgIcon:h.chevronDownIcon,rounded:null,disabled:this.$props.disabled,"aria-label":o.toLanguageString(r.numericDecreaseValue,r.messages[r.numericDecreaseValue]),title:o.toLanguageString(r.numericDecreaseValue,r.messages[r.numericDecreaseValue]),onClick:this.decrease},null)])]);return this.$props.label?s.createVNode("span",{class:this.spanClassNames,onFocusin:this.handleFocus,onFocusout:this.handleBlur,dir:this.$props.dir},[f,this.$props.label?u?s.createVNode("label",{for:u,class:"k-floating-label"},[this.$props.label]):s.createVNode("span",{class:"k-label"},[this.$props.label]):null]):f}});exports.NumericTextBox=y;
@@ -6,13 +6,13 @@
6
6
  *-------------------------------------------------------------------------------------------
7
7
  */
8
8
  import { defineComponent as B, h as V, createVNode as i, mergeProps as M, ref as b, inject as S } from "vue";
9
- import { getDefaultSlots as w, templateRendering as _, getListeners as k, getTemplate as y, Icon as p, setRef as R, canUseDOM as g, kendoThemeMaps as C, getRef as F, validatePackage as z, guid as T } from "@progress/kendo-vue-common";
10
- import { provideLocalizationService as A, provideIntlService as U } from "@progress/kendo-vue-intl";
9
+ import { getDefaultSlots as w, templateRendering as _, getListeners as k, getTemplate as y, Icon as p, setRef as R, canUseDOM as v, kendoThemeMaps as C, getRef as F, validatePackage as z, guid as T } from "@progress/kendo-vue-common";
10
+ import { provideLocalizationService as U, provideIntlService as W } from "@progress/kendo-vue-intl";
11
11
  import { Button as I } from "@progress/kendo-vue-buttons";
12
12
  import { numericIncreaseValue as d, messages as h, numericDecreaseValue as c } from "../messages/main.mjs";
13
13
  import { sanitizeNumber as x, formatValue as m, rangeValue as f, decreaseValue as L, increaseValue as O, getStateOrPropsValue as D } from "./utils/main.mjs";
14
- import { packageMetadata as W } from "../package-metadata.mjs";
15
- import { checkIcon as j, exclamationCircleIcon as q, xIcon as K, caretAltUpIcon as H, caretAltDownIcon as Y } from "@progress/kendo-svg-icons";
14
+ import { packageMetadata as A } from "../package-metadata.mjs";
15
+ import { checkIcon as j, exclamationCircleIcon as q, xIcon as K, chevronUpIcon as H, chevronDownIcon as Y } from "@progress/kendo-svg-icons";
16
16
  const G = "Please enter a valid value!", ae = /* @__PURE__ */ B({
17
17
  model: {
18
18
  event: "changemodel"
@@ -121,13 +121,13 @@ const G = "Please enter a valid value!", ae = /* @__PURE__ */ B({
121
121
  };
122
122
  },
123
123
  created() {
124
- z(W), this._textBeforeInput = "", this._inputId = T(), this.$data.currentLooseValue = null, this.$data.valueDuringOnChange = void 0, this._intl = U(this), this._symbols = this._intl.numberSymbols(), 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 = null;
124
+ z(A), this._textBeforeInput = "", this._inputId = T(), this.$data.currentLooseValue = null, this.$data.valueDuringOnChange = void 0, this._intl = W(this), this._symbols = this._intl.numberSymbols(), 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 = null;
125
125
  },
126
126
  mounted() {
127
127
  this._input = F(this, "input"), this._elementWrapper = this.elementWrapperRef, this.$data.hasMounted = !0, this._input && (this._textBeforeInput = this._input.value), this.setValidity();
128
128
  },
129
129
  updated() {
130
- !(g && document.activeElement !== this._input || !this._input) && this.$data.currentLooseValue !== null && this.$data.forceUpdate && this._input.type !== "number" && (this._input.selectionStart = this.$data.selectionStart, this._input.selectionEnd = this.$data.selectionEnd, this.$data.forceUpdate = !1), this._input && (this._textBeforeInput = this._input.value), this.setValidity();
130
+ !(v && document.activeElement !== this._input || !this._input) && this.$data.currentLooseValue !== null && this.$data.forceUpdate && this._input.type !== "number" && (this._input.selectionStart = this.$data.selectionStart, this._input.selectionEnd = this.$data.selectionEnd, this.$data.forceUpdate = !1), this._input && (this._textBeforeInput = this._input.value), this.setValidity();
131
131
  },
132
132
  computed: {
133
133
  computedValue() {
@@ -274,7 +274,7 @@ const G = "Please enter a valid value!", ae = /* @__PURE__ */ B({
274
274
  L(this.parseNumber(String(e.currentLooseValue)), e, this.$props.step, this.$props.min, this.$props.max, this.$props.format, this._intl), this.triggerChange(t, e);
275
275
  },
276
276
  wheel(t) {
277
- !g || document.activeElement !== this._input || !this._input || (t.deltaY < 0 && (t.preventDefault(), this.increase(t)), t.deltaY > 0 && (t.preventDefault(), this.decrease(t)));
277
+ !v || document.activeElement !== this._input || !this._input || (t.deltaY < 0 && (t.preventDefault(), this.increase(t)), t.deltaY > 0 && (t.preventDefault(), this.decrease(t)));
278
278
  },
279
279
  keyDown(t) {
280
280
  let e = this.getCurrentState(), s, a, r, n;
@@ -303,7 +303,7 @@ const G = "Please enter a valid value!", ae = /* @__PURE__ */ B({
303
303
  t.preventDefault(), this.triggerChange(t, e);
304
304
  },
305
305
  spinnersWrapperMouseDown(t) {
306
- g && this._input && (t.preventDefault(), document.activeElement !== this._input && this._input.focus());
306
+ v && this._input && (t.preventDefault(), document.activeElement !== this._input && this._input.focus());
307
307
  }
308
308
  },
309
309
  setup() {
@@ -322,7 +322,7 @@ const G = "Please enter a valid value!", ae = /* @__PURE__ */ B({
322
322
  showLoadingIcon: s,
323
323
  showClearButton: a,
324
324
  inputAttributes: r
325
- } = this.$props, n = this.$props.id || this._inputId, o = w(this), l = A(this), u = this.validity().valid;
325
+ } = this.$props, n = this.$props.id || this._inputId, o = w(this), l = U(this), u = this.validity().valid;
326
326
  this.$props.value !== void 0 && this.$props.value !== this.$data.currentValue ? this.$data.currentValue = this.$props.value : this.$props.modelValue !== void 0 && this.$props.modelValue !== this.$data.currentValue && (this.$data.currentValue = this.$props.modelValue), this._prevLooseValue = this.$data.currentLooseValue ? this.looseValue : this.looseValue;
327
327
  const $ = _.call(this, this.$props.inputPrefix, k.call(this)), N = _.call(this, this.$props.inputSuffix, k.call(this)), E = y.call(this, {
328
328
  h: V,
@@ -338,7 +338,7 @@ const G = "Please enter a valid value!", ae = /* @__PURE__ */ B({
338
338
  value: this.computedValue,
339
339
  valid: u
340
340
  }
341
- }), v = i("span", {
341
+ }), g = i("span", {
342
342
  dir: this.$props.dir,
343
343
  class: this.wrapperClassNames,
344
344
  style: this.$attrs.style
@@ -398,7 +398,7 @@ const G = "Please enter a valid value!", ae = /* @__PURE__ */ B({
398
398
  }, [i(I, {
399
399
  type: "button",
400
400
  tabIndex: -1,
401
- icon: "caret-alt-up",
401
+ icon: "chevron-up",
402
402
  svgIcon: H,
403
403
  class: "k-spinner-increase",
404
404
  rounded: null,
@@ -410,7 +410,7 @@ const G = "Please enter a valid value!", ae = /* @__PURE__ */ B({
410
410
  type: "button",
411
411
  tabIndex: -1,
412
412
  class: "k-spinner-decrease",
413
- icon: "caret-alt-down",
413
+ icon: "chevron-down",
414
414
  svgIcon: Y,
415
415
  rounded: null,
416
416
  disabled: this.$props.disabled,
@@ -423,12 +423,12 @@ const G = "Please enter a valid value!", ae = /* @__PURE__ */ B({
423
423
  onFocusin: this.handleFocus,
424
424
  onFocusout: this.handleBlur,
425
425
  dir: this.$props.dir
426
- }, [v, this.$props.label ? n ? i("label", {
426
+ }, [g, this.$props.label ? n ? i("label", {
427
427
  for: n,
428
428
  class: "k-floating-label"
429
429
  }, [this.$props.label]) : i("span", {
430
430
  class: "k-label"
431
- }, [this.$props.label]) : null]) : v;
431
+ }, [this.$props.label]) : null]) : g;
432
432
  }
433
433
  });
434
434
  export {
@@ -5,4 +5,4 @@
5
5
  * Licensed under commercial license. See LICENSE.md in the package root for more information
6
6
  *-------------------------------------------------------------------------------------------
7
7
  */
8
- "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: 1778759322,version:"8.4.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;
8
+ "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: 1779123050,version:"8.4.0-develop.4",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;
@@ -10,8 +10,8 @@ const e = {
10
10
  productName: "Kendo UI for Vue",
11
11
  productCode: "KENDOUIVUE",
12
12
  productCodes: ["KENDOUIVUE"],
13
- publishDate: 1778759322,
14
- version: "8.4.0-develop.2",
13
+ publishDate: 1779123050,
14
+ version: "8.4.0-develop.4",
15
15
  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"
16
16
  };
17
17
  export {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@progress/kendo-vue-inputs",
3
- "version": "8.4.0-develop.2",
3
+ "version": "8.4.0-develop.4",
4
4
  "description": "TODO",
5
5
  "author": "Progress",
6
6
  "license": "SEE LICENSE IN LICENSE.md",
@@ -26,14 +26,14 @@
26
26
  "peerDependencies": {
27
27
  "@progress/kendo-drawing": "^1.21.1",
28
28
  "@progress/kendo-licensing": "^1.7.2",
29
- "@progress/kendo-vue-animation": "8.4.0-develop.2",
30
- "@progress/kendo-vue-buttons": "8.4.0-develop.2",
31
- "@progress/kendo-vue-common": "8.4.0-develop.2",
32
- "@progress/kendo-vue-dialogs": "8.4.0-develop.2",
33
- "@progress/kendo-vue-intl": "8.4.0-develop.2",
34
- "@progress/kendo-vue-labels": "8.4.0-develop.2",
35
- "@progress/kendo-vue-popup": "8.4.0-develop.2",
36
- "@progress/kendo-svg-icons": "^4.4.0",
29
+ "@progress/kendo-vue-animation": "8.4.0-develop.4",
30
+ "@progress/kendo-vue-buttons": "8.4.0-develop.4",
31
+ "@progress/kendo-vue-common": "8.4.0-develop.4",
32
+ "@progress/kendo-vue-dialogs": "8.4.0-develop.4",
33
+ "@progress/kendo-vue-intl": "8.4.0-develop.4",
34
+ "@progress/kendo-vue-labels": "8.4.0-develop.4",
35
+ "@progress/kendo-vue-popup": "8.4.0-develop.4",
36
+ "@progress/kendo-svg-icons": "^4.9.0 || ^5.0.0",
37
37
  "vue": "^3.0.2"
38
38
  },
39
39
  "dependencies": {
@@ -55,7 +55,7 @@
55
55
  "package": {
56
56
  "productName": "Kendo UI for Vue",
57
57
  "productCode": "KENDOUIVUE",
58
- "publishDate": 1778759322,
58
+ "publishDate": 1779123050,
59
59
  "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"
60
60
  }
61
61
  },
@@ -65,5 +65,10 @@
65
65
  "repository": {
66
66
  "type": "git",
67
67
  "url": "git+https://github.com/telerik/kendo-vue.git"
68
+ },
69
+ "peerDependenciesMeta": {
70
+ "@progress/kendo-svg-icons": {
71
+ "optional": true
72
+ }
68
73
  }
69
74
  }
@@ -5,4 +5,4 @@
5
5
  * Licensed under commercial license. See LICENSE.md in the package root for more information
6
6
  *-------------------------------------------------------------------------------------------
7
7
  */
8
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),o=require("@progress/kendo-vue-common"),u=require("@progress/kendo-svg-icons"),I=t.defineComponent({name:"KendoVueRatingItem",emits:{click:e=>!0,keydown:null,focus:null,blur:null,mouseenter:e=>!0,mouseleave:e=>!0,mousemove:e=>!0},props:{id:String,tabIndex:Number,half:Boolean,title:String,icon:Object,selected:Boolean,hovered:Boolean,onClick:Function,onKeyDown:Function,onFocus:Function,onBlur:Function,onMouseEnter:Function,svgIconOutline:Object,svgIcon:Object,haveSelectedValue:Boolean,item:String,itemTemplate:Object,dir:{type:String,default:"ltr",validator:function(e){return[null,"ltr","rtl"].includes(e)}},value:{type:Number,required:!0}},setup(){return{inputRef:t.ref(null)}},computed:{wrapperClass(){return o.classNames(`k-rating-item${this.$props.dir==="rtl"?" k-rtl":""}${this.$props.haveSelectedValue||this.$props.selected?" k-selected":""}${this.$props.hovered?" k-hover":""}`)}},render(){const{id:e,dir:r,half:s,tabIndex:h,title:d,icon:n,svgIcon:l,svgIconOutline:a,hovered:i,selected:c,haveSelectedValue:m,item:p,itemTemplate:v}=this.$props,g=o.getTemplate.call(this,{h:t.h,template:v,additionalProps:{dir:r,half:s,title:d,icon:n,svgIcon:l,svgIconOutline:a,hovered:i,selected:c,haveSelectedValue:m},additionalListeners:{onclick:this.handleClick,onkeydown:this.handleKeyDown,onfocus:this.handleFocus,onblur:this.handleBlur,onmouseenter:this.handleMouseEnter,onmouseleave:this.handleMouseLeave,onmousemove:this.handleMouseMove}});return t.createVNode("span",{id:e,dir:r,"data-half":s,tabindex:h,title:d,class:this.wrapperClass,onClick:this.handleClick,onKeydown:this.handleKeyDown,onFocus:this.handleFocus,onBlur:this.handleBlur,onMouseenter:this.handleMouseEnter,onMouseleave:this.handleMouseLeave,onMousemove:this.handleMouseMove},[p?g:[s&&t.createVNode("span",{class:"k-rating-precision-complement"},[!(n||a)&&t.createVNode(o.Icon,{name:"star-outline",icon:u.starOutlineIcon,style:r==="rtl"?{clipPath:"inset(0 50% 0 0)"}:{clipPath:"inset(0 0 0 50%)"},size:"xlarge"},null),(n||a)&&t.createVNode(o.Icon,{name:o.getIconName(`${n}-outline`),icon:a,size:"xlarge"},null)]),s&&t.createVNode("span",{class:"k-rating-precision-part"},[!(n||l)&&t.createVNode(o.Icon,{name:"star",icon:u.starIcon,style:r==="rtl"?{clipPath:"inset(0 0 0 50%)"}:{clipPath:"inset(0 50% 0 0)"},size:"xlarge"},null),(n||l)&&t.createVNode(o.Icon,{name:n?o.getIconName(n):void 0,icon:l,size:"xlarge"},null)]),s&&t.createVNode("span",{style:{width:"24px",height:"24px",display:"block"}},null),!s&&(!(n||l)&&(i||c&&!i)&&t.createVNode(o.Icon,{name:"star",icon:u.starIcon,size:"xlarge"},null)||!(n||l)&&!i&&!c&&t.createVNode(o.Icon,{name:"star-outline",icon:u.starOutlineIcon,size:"xlarge"},null)||(n||l)&&(i||c&&!i)&&t.createVNode(o.Icon,{name:n,icon:l,size:"xlarge"},null)||(n||l)&&!i&&t.createVNode(o.Icon,{name:o.getIconName(`${n}-outline`),icon:a,size:"xlarge"},null))]])},methods:{handleClick(e){this.$emit("click",{value:this.$props.value,target:this.$el,event:e})},handleMouseLeave(e){this.$emit("mouseleave",{target:this.$el,event:e})},handleMouseMove(e){this.$emit("mousemove",{value:this.$props.value,target:this.$el,event:e})},handleMouseEnter(e){this.$emit("mouseenter",{target:this.$el,event:e})},handleKeyDown(e){this.$emit("keydown",e)},handleFocus(e){this.$emit("focus",e)},handleBlur(e){this.$emit("blur",e)}}});exports.RatingItem=I;
8
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),o=require("@progress/kendo-vue-common"),u=require("@progress/kendo-svg-icons"),I=t.defineComponent({name:"KendoVueRatingItem",emits:{click:e=>!0,keydown:null,focus:null,blur:null,mouseenter:e=>!0,mouseleave:e=>!0,mousemove:e=>!0},props:{id:String,tabIndex:Number,half:Boolean,title:String,icon:Object,selected:Boolean,hovered:Boolean,onClick:Function,onKeyDown:Function,onFocus:Function,onBlur:Function,onMouseEnter:Function,svgIconOutline:Object,svgIcon:Object,haveSelectedValue:Boolean,item:String,itemTemplate:Object,dir:{type:String,default:"ltr",validator:function(e){return[null,"ltr","rtl"].includes(e)}},value:{type:Number,required:!0}},setup(){return{inputRef:t.ref(null)}},computed:{wrapperClass(){return o.classNames(`k-rating-item${this.$props.dir==="rtl"?" k-rtl":""}${this.$props.haveSelectedValue||this.$props.selected?" k-selected":""}${this.$props.hovered?" k-hover":""}`)}},render(){const{id:e,dir:r,half:i,tabIndex:h,title:d,icon:n,svgIcon:l,svgIconOutline:a,hovered:s,selected:c,haveSelectedValue:m,item:p,itemTemplate:v}=this.$props,g=o.getTemplate.call(this,{h:t.h,template:v,additionalProps:{dir:r,half:i,title:d,icon:n,svgIcon:l,svgIconOutline:a,hovered:s,selected:c,haveSelectedValue:m},additionalListeners:{onclick:this.handleClick,onkeydown:this.handleKeyDown,onfocus:this.handleFocus,onblur:this.handleBlur,onmouseenter:this.handleMouseEnter,onmouseleave:this.handleMouseLeave,onmousemove:this.handleMouseMove}});return t.createVNode("span",{id:e,dir:r,"data-half":i,tabindex:h,title:d,class:this.wrapperClass,onClick:this.handleClick,onKeydown:this.handleKeyDown,onFocus:this.handleFocus,onBlur:this.handleBlur,onMouseenter:this.handleMouseEnter,onMouseleave:this.handleMouseLeave,onMousemove:this.handleMouseMove},[p?g:[i&&t.createVNode("span",{class:"k-rating-precision-complement"},[!(n||a)&&t.createVNode(o.Icon,{name:"star",icon:u.starIcon,style:r==="rtl"?{clipPath:"inset(0 50% 0 0)"}:{clipPath:"inset(0 0 0 50%)"},size:"xlarge"},null),(n||a)&&t.createVNode(o.Icon,{name:o.getIconName(`${n}-outline`),icon:a,size:"xlarge"},null)]),i&&t.createVNode("span",{class:"k-rating-precision-part"},[!(n||l)&&t.createVNode(o.Icon,{name:"star",icon:u.starIcon,style:r==="rtl"?{clipPath:"inset(0 0 0 50%)"}:{clipPath:"inset(0 50% 0 0)"},size:"xlarge"},null),(n||l)&&t.createVNode(o.Icon,{name:n?o.getIconName(n):void 0,icon:l,size:"xlarge"},null)]),i&&t.createVNode("span",{style:{width:"24px",height:"24px",display:"block"}},null),!i&&(!(n||l)&&(s||c&&!s)&&t.createVNode(o.Icon,{name:"star",icon:u.starIcon,size:"xlarge"},null)||!(n||l)&&!s&&!c&&t.createVNode(o.Icon,{name:"star",icon:u.starIcon,size:"xlarge"},null)||(n||l)&&(s||c&&!s)&&t.createVNode(o.Icon,{name:n,icon:l,size:"xlarge"},null)||(n||l)&&!s&&t.createVNode(o.Icon,{name:o.getIconName(`${n}-outline`),icon:a,size:"xlarge"},null))]])},methods:{handleClick(e){this.$emit("click",{value:this.$props.value,target:this.$el,event:e})},handleMouseLeave(e){this.$emit("mouseleave",{target:this.$el,event:e})},handleMouseMove(e){this.$emit("mousemove",{value:this.$props.value,target:this.$el,event:e})},handleMouseEnter(e){this.$emit("mouseenter",{target:this.$el,event:e})},handleKeyDown(e){this.$emit("keydown",e)},handleFocus(e){this.$emit("focus",e)},handleBlur(e){this.$emit("blur",e)}}});exports.RatingItem=I;
@@ -5,10 +5,10 @@
5
5
  * Licensed under commercial license. See LICENSE.md in the package root for more information
6
6
  *-------------------------------------------------------------------------------------------
7
7
  */
8
- import { defineComponent as f, h as M, createVNode as n, ref as x } from "vue";
9
- import { getTemplate as y, Icon as i, getIconName as h, classNames as b } from "@progress/kendo-vue-common";
10
- import { starOutlineIcon as d, starIcon as m } from "@progress/kendo-svg-icons";
11
- const B = /* @__PURE__ */ f({
8
+ import { defineComponent as k, h as f, createVNode as n, ref as M } from "vue";
9
+ import { getTemplate as x, Icon as i, getIconName as c, classNames as y } from "@progress/kendo-vue-common";
10
+ import { starIcon as h } from "@progress/kendo-svg-icons";
11
+ const F = /* @__PURE__ */ k({
12
12
  name: "KendoVueRatingItem",
13
13
  emits: {
14
14
  click: (e) => !0,
@@ -51,12 +51,12 @@ const B = /* @__PURE__ */ f({
51
51
  },
52
52
  setup() {
53
53
  return {
54
- inputRef: x(null)
54
+ inputRef: M(null)
55
55
  };
56
56
  },
57
57
  computed: {
58
58
  wrapperClass() {
59
- return b(`k-rating-item${this.$props.dir === "rtl" ? " k-rtl" : ""}${this.$props.haveSelectedValue || this.$props.selected ? " k-selected" : ""}${this.$props.hovered ? " k-hover" : ""}`);
59
+ return y(`k-rating-item${this.$props.dir === "rtl" ? " k-rtl" : ""}${this.$props.haveSelectedValue || this.$props.selected ? " k-selected" : ""}${this.$props.hovered ? " k-hover" : ""}`);
60
60
  }
61
61
  },
62
62
  render() {
@@ -64,29 +64,29 @@ const B = /* @__PURE__ */ f({
64
64
  id: e,
65
65
  dir: r,
66
66
  half: s,
67
- tabIndex: p,
68
- title: c,
67
+ tabIndex: m,
68
+ title: d,
69
69
  icon: t,
70
70
  svgIcon: l,
71
71
  svgIconOutline: a,
72
72
  hovered: o,
73
73
  selected: u,
74
- haveSelectedValue: v,
75
- item: g,
76
- itemTemplate: $
77
- } = this.$props, k = y.call(this, {
78
- h: M,
79
- template: $,
74
+ haveSelectedValue: p,
75
+ item: v,
76
+ itemTemplate: g
77
+ } = this.$props, $ = x.call(this, {
78
+ h: f,
79
+ template: g,
80
80
  additionalProps: {
81
81
  dir: r,
82
82
  half: s,
83
- title: c,
83
+ title: d,
84
84
  icon: t,
85
85
  svgIcon: l,
86
86
  svgIconOutline: a,
87
87
  hovered: o,
88
88
  selected: u,
89
- haveSelectedValue: v
89
+ haveSelectedValue: p
90
90
  },
91
91
  additionalListeners: {
92
92
  onclick: this.handleClick,
@@ -102,8 +102,8 @@ const B = /* @__PURE__ */ f({
102
102
  id: e,
103
103
  dir: r,
104
104
  "data-half": s,
105
- tabindex: p,
106
- title: c,
105
+ tabindex: m,
106
+ title: d,
107
107
  class: this.wrapperClass,
108
108
  onClick: this.handleClick,
109
109
  onKeydown: this.handleKeyDown,
@@ -112,11 +112,11 @@ const B = /* @__PURE__ */ f({
112
112
  onMouseenter: this.handleMouseEnter,
113
113
  onMouseleave: this.handleMouseLeave,
114
114
  onMousemove: this.handleMouseMove
115
- }, [g ? k : [s && n("span", {
115
+ }, [v ? $ : [s && n("span", {
116
116
  class: "k-rating-precision-complement"
117
117
  }, [!(t || a) && n(i, {
118
- name: "star-outline",
119
- icon: d,
118
+ name: "star",
119
+ icon: h,
120
120
  style: r === "rtl" ? {
121
121
  clipPath: "inset(0 50% 0 0)"
122
122
  } : {
@@ -124,14 +124,14 @@ const B = /* @__PURE__ */ f({
124
124
  },
125
125
  size: "xlarge"
126
126
  }, null), (t || a) && n(i, {
127
- name: h(`${t}-outline`),
127
+ name: c(`${t}-outline`),
128
128
  icon: a,
129
129
  size: "xlarge"
130
130
  }, null)]), s && n("span", {
131
131
  class: "k-rating-precision-part"
132
132
  }, [!(t || l) && n(i, {
133
133
  name: "star",
134
- icon: m,
134
+ icon: h,
135
135
  style: r === "rtl" ? {
136
136
  clipPath: "inset(0 0 0 50%)"
137
137
  } : {
@@ -139,7 +139,7 @@ const B = /* @__PURE__ */ f({
139
139
  },
140
140
  size: "xlarge"
141
141
  }, null), (t || l) && n(i, {
142
- name: t ? h(t) : void 0,
142
+ name: t ? c(t) : void 0,
143
143
  icon: l,
144
144
  size: "xlarge"
145
145
  }, null)]), s && n("span", {
@@ -150,18 +150,18 @@ const B = /* @__PURE__ */ f({
150
150
  }
151
151
  }, null), !s && (!(t || l) && (o || u && !o) && n(i, {
152
152
  name: "star",
153
- icon: m,
153
+ icon: h,
154
154
  size: "xlarge"
155
155
  }, null) || !(t || l) && !o && !u && n(i, {
156
- name: "star-outline",
157
- icon: d,
156
+ name: "star",
157
+ icon: h,
158
158
  size: "xlarge"
159
159
  }, null) || (t || l) && (o || u && !o) && n(i, {
160
160
  name: t,
161
161
  icon: l,
162
162
  size: "xlarge"
163
163
  }, null) || (t || l) && !o && n(i, {
164
- name: h(`${t}-outline`),
164
+ name: c(`${t}-outline`),
165
165
  icon: a,
166
166
  size: "xlarge"
167
167
  }, null))]]);
@@ -205,5 +205,5 @@ const B = /* @__PURE__ */ f({
205
205
  }
206
206
  });
207
207
  export {
208
- B as RatingItem
208
+ F as RatingItem
209
209
  };
package/slider/Slider.js CHANGED
@@ -5,4 +5,4 @@
5
5
  * Licensed under commercial license. See LICENSE.md in the package root for more information
6
6
  *-------------------------------------------------------------------------------------------
7
7
  */
8
- "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;
8
+ "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;