@progress/kendo-vue-inputs 5.3.0-dev.202409130647 → 5.3.0-develop.1

package/package.json

@@ -1,34 +1,30 @@
 {
   "name": "@progress/kendo-vue-inputs",
-  "description": "Kendo UI for Vue Input package",
-  "version": "5.3.0-dev.202409130647",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/telerik/kendo-vue.git"
-  },
-  "main": "dist/npm/main.js",
-  "types": "dist/npm/main.d.ts",
-  "module": "dist/es/main.js",
-  "jsnext:main": "dist/es/main.js",
+  "version": "5.3.0-develop.1",
+  "description": "TODO",
+  "author": "Progress",
+  "license": "SEE LICENSE IN LICENSE.md",
+  "homepage": "https://www.telerik.com/kendo-vue-ui",
+  "main": "./index.js",
+  "types": "./index.d.ts",
   "exports": {
-    "node": "./dist/esm/main.js",
-    "import": "./dist/es/main.js",
-    "require": "./dist/npm/main.js",
-    "default": "./dist/npm/main.js"
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.js"
+    }
   },
-  "scripts": {
-    "build-package": "gulp build-package",
-    "start": "gulp start --notsc",
-    "test": "cd ../../ && npm run test -- --testPathPattern=/packages/inputs/.*",
-    "e2e": "cd ../../ && npx jest --maxWorkers=4 --config jest.config.e2e.js packages/inputs"
+  "sideEffects": false,
+  "peerDependencies": {
+    "@progress/kendo-licensing": "^1.3.4",
+    "@progress/kendo-vue-common": "5.3.0-develop.1",
+    "vue": "^3.0.2"
   },
+  "dependencies": {},
   "keywords": [
     "Kendo UI",
     "Vue",
     "Progress",
     "Inputs",
-    "KendoVue",
-    "vuejs",
     "UI",
     "components",
     "Vue component",
@@ -38,42 +34,11 @@
     "friendlyName": "Inputs",
     "framework": "Kendo UI for Vue"
   },
-  "peerDependencies": {
-    "@progress/kendo-drawing": "^1.20.1",
-    "@progress/kendo-licensing": "^1.3.0",
-    "@progress/kendo-svg-icons": "^3.0.0",
-    "@progress/kendo-vue-intl": "^5.0.0",
-    "vue": "^2.6.12 || ^3.0.2"
-  },
-  "dependencies": {
-    "@progress/kendo-inputs-common": "^3.1.0",
-    "@progress/kendo-vue-buttons": "5.3.0-dev.202409130647",
-    "@progress/kendo-vue-common": "5.3.0-dev.202409130647",
-    "@progress/kendo-vue-dialogs": "5.3.0-dev.202409130647",
-    "@progress/kendo-vue-labels": "5.3.0-dev.202409130647",
-    "@progress/kendo-vue-popup": "5.3.0-dev.202409130647"
-  },
-  "devDependencies": {
-    "@progress/kendo-data-query": "^1.7.0",
-    "@progress/kendo-date-math": "^1.5.13",
-    "@progress/kendo-drawing": "^1.20.1",
-    "@progress/kendo-file-saver": "^1.1.1",
-    "@progress/kendo-licensing": "^1.3.0",
-    "@progress/kendo-svg-icons": "^3.0.0",
-    "@progress/kendo-vue-buttons": "5.3.0-dev.202409130647",
-    "@progress/kendo-vue-dropdowns": "5.3.0-dev.202409130647",
-    "@progress/kendo-vue-form": "5.3.0-dev.202409130647",
-    "@progress/kendo-vue-intl": "5.3.0-dev.202409130647",
-    "@progress/kendo-vue-labels": "5.3.0-dev.202409130647",
-    "@progress/kendo-vue-tooltip": "5.3.0-dev.202409130647",
-    "@progress/kendo-vue-upload": "5.3.0-dev.202409130647",
-    "cldr-core": "^41.0.0",
-    "cldr-dates-full": "^41.0.0",
-    "cldr-numbers-full": "^41.0.0"
-  },
-  "author": "Progress",
-  "license": "SEE LICENSE IN LICENSE.md",
   "publishConfig": {
     "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/telerik/kendo-react.git"
   }
-}
+}

package/radiobutton/RadioButton.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("vue"),t=require("@progress/kendo-vue-common"),v=require("../package-metadata.js"),N=a.defineComponent({name:"KendoRadioButton",props:{ariaDescribedBy:String,checked:Boolean,disabled:Boolean,className:String,content:[String,Number,Boolean,Object],dataItem:Object,id:String,label:String,labelRender:[String,Number,Boolean,Object],item:[String,Number,Boolean,Object],labelPlacement:String,name:String,index:Number,tag:{type:String,default:"div"},size:{type:String,default:"medium",validator:function(e){return[null,"small","medium","large"].includes(e)}},tabIndex:Number,value:[String,Number,Object],valid:{type:Boolean,default:void 0},role:String},emits:{change:null,focus:null,blur:null},created(){this.calculatedId=t.guid(),t.validatePackage(v.packageMetadata)},mounted(){this.input=t.getRef(this,"input")},computed:{inputClassName(){return{"k-radio":!0,[`k-radio-${t.kendoThemeMaps.sizeMap[this.$props.size]}`]:this.$props.size,"k-invalid":this.$props.valid===!1,[this.$props.className]:this.$props.className}}},methods:{focusElement(){this.input&&this.input.focus()},handleChange(e){this.$emit("change",{event:e,value:this.$props.value})},handleFocus(e){this.$props.disabled||this.$emit("focus",e,void 0)},handleBlur(e){this.$props.disabled||this.$emit("blur",e,void 0)}},setup(){return{inputRef:a.ref(null)}},render(){const e=t.getDefaultSlots(this),{ariaDescribedBy:h,checked:p,disabled:i,id:s,label:d,labelRender:l,labelPlacement:m,name:b,tabIndex:g,value:f,tag:r,role:S}=this.$props;let n=d;if(l){const B=l?t.templateRendering.call(this,l,t.getListeners.call(this)):null;n=t.getTemplate.call(this,{h:a.h,template:B})}const o=t.getTemplate.call(this,{h:a.h,template:this.$props.content}),u=n!==void 0?a.createVNode("label",{class:"k-radio-label",for:s||this.calculatedId,style:{userSelect:"none"},"aria-label":d},[n]):null,c=a.createVNode("input",{role:S,type:"radio",id:s||this.calculatedId,name:b,class:this.inputClassName,ref:t.setRef(this,"input"),disabled:i,tabindex:t.getTabIndex(g,i),checked:p,style:this.$attrs.style,"aria-describedby":h,value:f,onChange:this.handleChange,onFocus:this.handleFocus,onBlur:this.handleBlur},null),$=m==="before"?a.h(r,[u,c,o,e]):a.h(r,[c,u,o,e]);return t.getTemplate.call(this,{h:a.h,template:this.$props.item,defaultRendering:$,defaultSlots:e,additionalListeners:{change:this.handleChange,focus:this.handleFocus,blur:this.handleBlur},additionalProps:{dataItem:this.$props.dataItem}})}});exports.RadioButton=N;

package/radiobutton/RadioButton.mjs

@@ -0,0 +1,157 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { defineComponent as v, ref as R, h as t, createVNode as h } from "vue";
+import { guid as k, validatePackage as y, getRef as I, kendoThemeMaps as C, getDefaultSlots as x, templateRendering as j, getListeners as O, getTemplate as i, setRef as z, getTabIndex as F } from "@progress/kendo-vue-common";
+import { packageMetadata as L } from "../package-metadata.mjs";
+const M = /* @__PURE__ */ v({
+  name: "KendoRadioButton",
+  props: {
+    ariaDescribedBy: String,
+    checked: Boolean,
+    disabled: Boolean,
+    className: String,
+    content: [String, Number, Boolean, Object],
+    dataItem: Object,
+    id: String,
+    label: String,
+    labelRender: [String, Number, Boolean, Object],
+    item: [String, Number, Boolean, Object],
+    labelPlacement: String,
+    name: String,
+    index: Number,
+    tag: {
+      type: String,
+      default: "div"
+    },
+    size: {
+      type: String,
+      default: "medium",
+      validator: function(e) {
+        return [null, "small", "medium", "large"].includes(e);
+      }
+    },
+    tabIndex: Number,
+    value: [String, Number, Object],
+    valid: {
+      type: Boolean,
+      default: void 0
+    },
+    role: String
+  },
+  emits: {
+    change: null,
+    focus: null,
+    blur: null
+  },
+  created() {
+    this.calculatedId = k(), y(L);
+  },
+  mounted() {
+    this.input = I(this, "input");
+  },
+  computed: {
+    inputClassName() {
+      return {
+        "k-radio": !0,
+        [`k-radio-${C.sizeMap[this.$props.size]}`]: this.$props.size,
+        "k-invalid": this.$props.valid === !1,
+        [this.$props.className]: this.$props.className
+      };
+    }
+  },
+  methods: {
+    focusElement() {
+      this.input && this.input.focus();
+    },
+    handleChange(e) {
+      this.$emit("change", {
+        event: e,
+        value: this.$props.value
+      });
+    },
+    handleFocus(e) {
+      this.$props.disabled || this.$emit("focus", e, void 0);
+    },
+    handleBlur(e) {
+      this.$props.disabled || this.$emit("blur", e, void 0);
+    }
+  },
+  setup() {
+    return {
+      inputRef: R(null)
+    };
+  },
+  render() {
+    const e = x(this), {
+      ariaDescribedBy: p,
+      checked: m,
+      disabled: n,
+      id: s,
+      label: d,
+      labelRender: a,
+      labelPlacement: b,
+      name: f,
+      tabIndex: g,
+      value: S,
+      tag: r,
+      role: $
+    } = this.$props;
+    let l = d;
+    if (a) {
+      const N = a ? j.call(this, a, O.call(this)) : null;
+      l = i.call(this, {
+        h: t,
+        template: N
+      });
+    }
+    const o = i.call(this, {
+      h: t,
+      template: this.$props.content
+    }), u = l !== void 0 ? h("label", {
+      class: "k-radio-label",
+      for: s || this.calculatedId,
+      style: {
+        userSelect: "none"
+      },
+      "aria-label": d
+    }, [l]) : null, c = h("input", {
+      role: $,
+      type: "radio",
+      id: s || this.calculatedId,
+      name: f,
+      class: this.inputClassName,
+      ref: z(this, "input"),
+      disabled: n,
+      tabindex: F(g, n),
+      checked: m,
+      style: this.$attrs.style,
+      "aria-describedby": p,
+      value: S,
+      onChange: this.handleChange,
+      onFocus: this.handleFocus,
+      onBlur: this.handleBlur
+    }, null), B = b === "before" ? t(r, [u, c, o, e]) : t(r, [c, u, o, e]);
+    return i.call(this, {
+      h: t,
+      template: this.$props.item,
+      defaultRendering: B,
+      defaultSlots: e,
+      additionalListeners: {
+        change: this.handleChange,
+        focus: this.handleFocus,
+        blur: this.handleBlur
+      },
+      additionalProps: {
+        dataItem: this.$props.dataItem
+      }
+    });
+  }
+});
+export {
+  M as RadioButton
+};

package/radiobutton/RadioGroup.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("vue"),b=require("./RadioButton.js"),t=require("@progress/kendo-vue-common"),f=require("../package-metadata.js"),g=i.defineComponent({name:"KendoRadioGroup",props:{ariaLabelledBy:String,ariaDescribedBy:String,dataItems:Array,defaultValue:[String,Number,Object],dir:String,disabled:Boolean,labelPlacement:String,item:{type:String,default:void 0},layout:{type:String,default:"vertical",validator:function(e){return["horizontal","vertical"].includes(e)}},name:String,modelValue:[String,Number,Object],value:[String,Number,Object],valid:{type:Boolean,default:void 0}},emits:{changemodel:null,"update:modelValue":null,change:null,focus:null,blur:null},model:{event:"changemodel"},created(){this.radioGroupName=t.guid(),t.validatePackage(f.packageMetadata),this.stateChecked=this.$props.defaultValue},watch:{value(e){e===void 0&&(this.stateChecked=this.$props.defaultValue)}},mounted(){this.rtl=t.isRtl(this.$el)},computed:{radioGroupClasses(){const e=this.$props.layout;return{"k-radio-list":!0,"k-list-horizontal":e==="horizontal","k-list-vertical":e==="vertical"||e===void 0}},checkedRadioValue(){const e=this.$props.value;return e!==void 0?e:this.$props.modelValue!==void 0?this.$props.modelValue:this.stateChecked},currentDir(){const e=this.$props.dir;return e||(this.rtl?"rtl":void 0)}},data(){return{rtl:!1,stateChecked:void 0}},methods:{focusElement(){this.$el&&t.focusFirstFocusableChild(this.$el)},handleChange(e){let l=e.value;this.$props.value===void 0&&!this.$props.disabled&&(this.stateChecked=l),this.$props.disabled||(this.$emit("changemodel",l),this.$emit("update:modelValue",l),this.$emit("change",{event:e,value:l}))},handleFocus(e){this.$props.disabled||this.$emit("focus",e)},handleBlur(e){this.$props.disabled||this.$emit("blur",e)}},setup(){return{inputRef:i.ref(null)}},render(){const{ariaLabelledBy:e,ariaDescribedBy:l,dataItems:d,disabled:r,name:u,labelPlacement:o,valid:c}=this.$props,h=d&&d.map(function(a,s){const n=this.checkedRadioValue===a.value,m=this.checkedRadioValue===null||this.checkedRadioValue===void 0,p=t.templateRendering.call(this,this.$props.item||a.item,t.getListeners.call(this));return i.createVNode(b.RadioButton,{class:t.classNames("k-radio-item",{"k-disabled":a.disabled||r}),style:a.style,key:s,item:p,role:"none",tag:"li",valid:c,className:a.className,label:a.label,value:a.value,dataItem:a,checked:n,disabled:!!(a.disabled||r),labelPlacement:a.labelPlacement?a.labelPlacement:o,tabIndex:a.tabIndex?a.tabIndex:m&&s===0||n?0:-1,index:s,name:u||a.name||this.radioGroupName,onChange:this.handleChange,onFocus:this.handleFocus,onBlur:this.handleBlur},{default:()=>[a.content]})},this);return i.createVNode("ul",{role:"radiogroup",class:this.radioGroupClasses,dir:this.currentDir,"aria-labelledby":e,"aria-describedby":l},[h])}});exports.RadioGroup=g;

package/radiobutton/RadioGroup.mjs

@@ -0,0 +1,158 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { defineComponent as p, ref as f, createVNode as r } from "vue";
+import { RadioButton as b } from "./RadioButton.mjs";
+import { guid as g, validatePackage as $, isRtl as k, focusFirstFocusableChild as v, templateRendering as y, getListeners as C, classNames as V } from "@progress/kendo-vue-common";
+import { packageMetadata as R } from "../package-metadata.mjs";
+const I = /* @__PURE__ */ p({
+  name: "KendoRadioGroup",
+  props: {
+    ariaLabelledBy: String,
+    ariaDescribedBy: String,
+    dataItems: Array,
+    defaultValue: [String, Number, Object],
+    dir: String,
+    disabled: Boolean,
+    labelPlacement: String,
+    item: {
+      type: String,
+      default: void 0
+    },
+    layout: {
+      type: String,
+      default: "vertical",
+      validator: function(e) {
+        return ["horizontal", "vertical"].includes(e);
+      }
+    },
+    name: String,
+    modelValue: [String, Number, Object],
+    value: [String, Number, Object],
+    valid: {
+      type: Boolean,
+      default: void 0
+    }
+  },
+  emits: {
+    changemodel: null,
+    "update:modelValue": null,
+    change: null,
+    focus: null,
+    blur: null
+  },
+  model: {
+    event: "changemodel"
+  },
+  created() {
+    this.radioGroupName = g(), $(R), this.stateChecked = this.$props.defaultValue;
+  },
+  watch: {
+    value(e) {
+      e === void 0 && (this.stateChecked = this.$props.defaultValue);
+    }
+  },
+  mounted() {
+    this.rtl = k(this.$el);
+  },
+  computed: {
+    radioGroupClasses() {
+      const e = this.$props.layout;
+      return {
+        "k-radio-list": !0,
+        "k-list-horizontal": e === "horizontal",
+        "k-list-vertical": e === "vertical" || e === void 0
+      };
+    },
+    checkedRadioValue() {
+      const e = this.$props.value;
+      return e !== void 0 ? e : this.$props.modelValue !== void 0 ? this.$props.modelValue : this.stateChecked;
+    },
+    currentDir() {
+      const e = this.$props.dir;
+      return e || (this.rtl ? "rtl" : void 0);
+    }
+  },
+  data() {
+    return {
+      rtl: !1,
+      stateChecked: void 0
+    };
+  },
+  methods: {
+    focusElement() {
+      this.$el && v(this.$el);
+    },
+    handleChange(e) {
+      let t = e.value;
+      this.$props.value === void 0 && !this.$props.disabled && (this.stateChecked = t), this.$props.disabled || (this.$emit("changemodel", t), this.$emit("update:modelValue", t), this.$emit("change", {
+        event: e,
+        value: t
+      }));
+    },
+    handleFocus(e) {
+      this.$props.disabled || this.$emit("focus", e);
+    },
+    handleBlur(e) {
+      this.$props.disabled || this.$emit("blur", e);
+    }
+  },
+  setup() {
+    return {
+      inputRef: f(null)
+    };
+  },
+  render() {
+    const {
+      ariaLabelledBy: e,
+      ariaDescribedBy: t,
+      dataItems: i,
+      disabled: s,
+      name: n,
+      labelPlacement: u,
+      valid: o
+    } = this.$props, c = i && i.map(function(a, l) {
+      const d = this.checkedRadioValue === a.value, h = this.checkedRadioValue === null || this.checkedRadioValue === void 0, m = y.call(this, this.$props.item || a.item, C.call(this));
+      return r(b, {
+        class: V("k-radio-item", {
+          "k-disabled": a.disabled || s
+        }),
+        style: a.style,
+        key: l,
+        item: m,
+        role: "none",
+        tag: "li",
+        valid: o,
+        className: a.className,
+        label: a.label,
+        value: a.value,
+        dataItem: a,
+        checked: d,
+        disabled: !!(a.disabled || s),
+        labelPlacement: a.labelPlacement ? a.labelPlacement : u,
+        tabIndex: a.tabIndex ? a.tabIndex : h && l === 0 || d ? 0 : -1,
+        index: l,
+        name: n || a.name || this.radioGroupName,
+        onChange: this.handleChange,
+        onFocus: this.handleFocus,
+        onBlur: this.handleBlur
+      }, {
+        default: () => [a.content]
+      });
+    }, this);
+    return r("ul", {
+      role: "radiogroup",
+      class: this.radioGroupClasses,
+      dir: this.currentDir,
+      "aria-labelledby": e,
+      "aria-describedby": t
+    }, [c]);
+  }
+});
+export {
+  I as RadioGroup
+};

package/range-slider/RangeSlider.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("vue"),r=require("@progress/kendo-vue-common"),n=require("../messages/main.js"),c=require("@progress/kendo-vue-intl"),a=require("./range-raducer.js"),h=require("../package-metadata.js"),u=s.defineComponent({name:"KendoRangeSlider",model:{event:"changemodel"},props:{id:String,value:{type:Object,validator:function(e){return e.start<=e.end}},defaultValue:{type:Object,default:function(){return{start:0,end:0}},validator:function(e){return e.start<=e.end}},step:{type:Number,default:1},min:{type:Number,required:!0},max:{type:Number,required:!0},vertical:Boolean,disabled:Boolean,dir:{type:String,default:"ltr",validator:function(e){return[null,"ltr","rtl"].includes(e)}},startTabIndex:Number,endTabIndex:Number},provide(){return{kendoMin:this.$props.min,kendoMax:this.$props.max,kendoVertical:this.$props.vertical}},inject:{kendoLocalizationService:{default:null}},created(){r.validatePackage(h.packageMetadata)},data(){return{currentValue:this.defaultValue,currentDrag:"",currentDir:"ltr"}},computed:{computedValue(){return this.$props.value!==void 0?this.$props.value:this.currentValue},percentStart(){return(this.computedValue.start-this.min)/(this.max-this.min)*100},percentEnd(){return(this.computedValue.end-this.min)/(this.max-this.min)*100},sliderItemsStyle(){return this.vertical?{paddingTop:0,height:"100%"}:{}},trackStyles(){return this.vertical?{marginTop:"0.5rem",marginBottom:"0.5rem"}:{marginLeft:"0.5rem",marginRight:"0.5rem"}}},mounted(){if(this.sliderRef=this.$refs.sliderRef,this.sliderSelectionRef=this.$refs.sliderSelectionRef,this.startHandle=this.$refs.startHandle,this.endHandle=this.$refs.endHandle,this.sliderTrackRef=this.$refs.sliderTrackRef,this.sliderTrackWrapRef=this.$refs.sliderTrackWrapRef,!this.currentDir&&window&&this.$el){const e=window.getComputedStyle(this.$el).direction;e&&(this.currentDir=e)}},setup(){const e=s.ref(null),t=s.inject("kendoLocalizationService",{});return{inputRef:e,kendoLocalizationService:t}},render(){const e=c.provideLocalizationService(this),t=r.getDefaultSlots(this),{id:i,dir:l}=this.$props;return s.createVNode("div",{id:i,dir:this.currentDir,class:r.classNames("k-slider",{"k-rtl":this.currentDir==="rtl","k-disabled":this.$props.disabled,"k-slider-vertical":this.$props.vertical,"k-slider-horizontal":!this.$props.vertical},this.$props.class),"aria-labelledby":this.$props.ariaLabelledBy,"aria-describedby":this.$props.ariaDescribedBy},[s.createVNode(r.Draggable,{onDrag:this.handleTrackDrag,onPress:this.handleTrackPress,onRelease:this.handleTrackRelease,ref:"draggable"},{default:()=>[s.createVNode("div",{ref:"sliderTrackWrapRef",class:"k-slider-track-wrap",style:{flexGrow:1,position:"relative",touchAction:"none",...this.trackStyles}},[t&&s.createVNode("ul",{class:"k-reset k-slider-items",style:{...this.sliderItemsStyle}},[t]),s.createVNode("div",{ref:"sliderTrackRef",class:"k-slider-track",style:this.$props.vertical?{bottom:0,height:"100%"}:{[this.currentDir==="rtl"?"right":"left"]:0,width:"100%"}},[this.percentStart!==null&&this.percentEnd!==null&&s.createVNode("div",{"data-selection":!0,ref:"sliderSelectionRef",title:`${this.computedValue.start} - ${this.computedValue.end}`,class:"k-slider-selection",style:this.vertical?{height:this.percentEnd-this.percentStart+"%",bottom:this.percentStart+"%"}:{[this.currentDir==="rtl"?"right":"left"]:this.percentStart+"%",width:this.percentEnd-this.percentStart+"%"}},null),s.createVNode("span",{ref:"startHandle",role:"slider",tabindex:r.getTabIndex(this.startTabIndex,this.$props.disabled,void 0),"aria-valuemin":this.min,"aria-valuemax":Math.max(this.max,this.computedValue.end),"aria-valuenow":this.computedValue.start,"aria-disabled":this.disabled?"true":void 0,"aria-valuetext":this.computedValue.start,class:"k-draghandle",title:e.toLanguageString(n.sliderDragTitle,n.messages[n.sliderDragTitle]),style:this.vertical?{bottom:"calc("+this.percentStart+"%)",zIndex:1}:this.currentDir==="rtl"?{right:"calc("+this.percentStart+"% - 13px)",zIndex:1}:{left:"calc("+this.percentStart+"%)",zIndex:1},onKeydown:this.handleStartKeyDown},null),s.createVNode("span",{ref:"endHandle",role:"slider",tabindex:r.getTabIndex(this.endTabIndex,this.$props.disabled,void 0),"aria-valuemin":Math.min(this.min,this.computedValue.start),"aria-valuemax":this.max,"aria-valuenow":this.computedValue.end,"aria-disabled":this.disabled?"true":void 0,"aria-valuetext":this.computedValue.end,class:"k-draghandle",title:e.toLanguageString(n.sliderDragTitle,n.messages[n.sliderDragTitle]),style:this.vertical?{bottom:"calc("+this.percentEnd+"%)",zIndex:1}:this.currentDir==="rtl"?{right:"calc("+this.percentEnd+"% - 13px)",zIndex:1}:{left:"calc("+this.percentEnd+"%)",zIndex:1},onKeydown:this.handleEndKeyDown},null)])])]})])},methods:{dispatchStateValue(e){const t=a.rangeReducer({start:this.computedValue.start,end:this.computedValue.end},{...e,min:this.min,max:this.max,step:this.step});this.currentValue.start=t.start,this.currentValue.end=t.end,this.$emit("change",{min:this.min,max:this.max,step:this.step,value:{start:t.start,end:t.end}})},focus(){this.startHandle&&this.startHandle.focus()},handleChange(e,t){this.$emit("change",{value:e,event:t})},calcNewDistance(e){if(!this.sliderTrackWrapRef)return;e.originalEvent.preventDefault();const t=this.sliderTrackWrapRef.getBoundingClientRect(),i=this.$props.vertical?t.bottom-e.clientY:this.currentDir==="rtl"?t.right-e.clientX:e.clientX-t.left,l=this.$props.vertical?t.height:t.width,d=i/l;return this.min+d*(this.max-this.min)},calcKey(e){return e<=this.computedValue.start?"start":e>=this.computedValue.end?"end":2*e<this.computedValue.end+this.computedValue.start?"start":"end"},handleStartKeyDown(e){switch(e.keyCode){case r.Keys.right:e.preventDefault(),this.dispatchStateValue({type:this.currentDir==="rtl"?a.RANGE_ACTION.decrease:a.RANGE_ACTION.increase,key:"start",event:e});break;case r.Keys.up:e.preventDefault(),this.dispatchStateValue({type:a.RANGE_ACTION.increase,key:"start",event:e});break;case r.Keys.left:e.preventDefault(),this.dispatchStateValue({type:this.currentDir==="rtl"?a.RANGE_ACTION.increase:a.RANGE_ACTION.decrease,key:"start",event:e});break;case r.Keys.down:e.preventDefault(),this.dispatchStateValue({type:a.RANGE_ACTION.decrease,key:"start",event:e});break;case r.Keys.home:e.preventDefault(),this.dispatchStateValue({type:a.RANGE_ACTION.min,key:"start",event:e});break;case r.Keys.end:e.preventDefault(),this.dispatchStateValue({type:a.RANGE_ACTION.max,key:"start",event:e});break}},handleEndKeyDown(e){switch(e.keyCode){case r.Keys.right:e.preventDefault(),this.dispatchStateValue({type:this.currentDir==="rtl"?a.RANGE_ACTION.decrease:a.RANGE_ACTION.increase,key:"end",event:e});break;case r.Keys.up:e.preventDefault(),this.dispatchStateValue({type:a.RANGE_ACTION.increase,key:"end",event:e});break;case r.Keys.left:e.preventDefault(),this.dispatchStateValue({type:this.currentDir==="rtl"?a.RANGE_ACTION.increase:a.RANGE_ACTION.decrease,key:"end",event:e});break;case r.Keys.down:e.preventDefault(),this.dispatchStateValue({type:a.RANGE_ACTION.decrease,key:"end",event:e});break;case r.Keys.home:e.preventDefault(),this.dispatchStateValue({type:a.RANGE_ACTION.min,key:"end",event:e});break;case r.Keys.end:e.preventDefault(),this.dispatchStateValue({type:a.RANGE_ACTION.max,key:"end",event:e});break}},handleTrackPress(e){const t=this.calcNewDistance(e),i=this.calcKey(t);this.currentDrag=i,i==="end"?this.endHandle.focus():this.startHandle.focus();const l=i==="end"?a.RANGE_ACTION.end:a.RANGE_ACTION.start;this.dispatchStateValue({type:l,payload:t,event:e})},handleTrackDrag(e){const t=this.calcNewDistance(e),i=this.currentDrag==="end"?a.RANGE_ACTION.end:a.RANGE_ACTION.start;this.dispatchStateValue({type:i,payload:t,event:e})},handleTrackRelease(e){const t=this.calcNewDistance(e),i=this.currentDrag==="end"?a.RANGE_ACTION.end:a.RANGE_ACTION.start;this.dispatchStateValue({type:i,payload:t,event:e}),this.currentDrag=""}}});exports.RangeSlider=u;