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

package/index.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"});require("@progress/kendo-vue-common");const r=require("./colors/ColorGradient.js"),t=require("./colors/ColorPalette.js"),o=require("./colors/ColorPicker.js"),i=require("./colors/FlatColorPicker.js"),n=require("./switch/Switch.js"),a=require("./input-separator/InputSeparator.js"),u=require("./input/Input.js"),c=require("./textbox/TextBox.js"),l=require("./numerictextbox/NumericTextBox.js"),s=require("./maskedtextbox/MaskedTextBox.js"),x=require("./slider/Slider.js"),e=require("./slider/SliderLabel.js"),d=require("./range-slider/RangeSlider.js"),S=require("./checkbox/Checkbox.js"),T=require("./radiobutton/RadioGroup.js"),q=require("./radiobutton/RadioButton.js"),R=require("./textarea/TextArea.js"),B=require("./textarea/interfaces/TextAreaResize.js"),C=require("./signature/Signature.js"),p=require("./rating/Rating.js");exports.ColorGradient=r.ColorGradient;exports.ColorPalette=t.ColorPalette;exports.ColorPicker=o.ColorPicker;exports.FlatColorPicker=i.FlatColorPicker;exports.Switch=n.Switch;exports.InputSeparator=a.InputSeparator;exports.Input=u.Input;exports.TextBox=c.TextBox;exports.NumericTextBox=l.NumericTextBox;exports.MaskedTextBox=s.MaskedTextBox;exports.Slider=x.Slider;exports.SLIDER_LABEL_ATTRIBUTE=e.SLIDER_LABEL_ATTRIBUTE;exports.SliderLabel=e.SliderLabel;exports.RangeSlider=d.RangeSlider;exports.Checkbox=S.Checkbox;exports.RadioGroup=T.RadioGroup;exports.RadioButton=q.RadioButton;exports.TextArea=R.TextArea;exports.TextAreaResizeEnum=B.TextAreaResizeEnum;exports.Signature=C.Signature;exports.Rating=p.Rating;

package/index.mjs

@@ -0,0 +1,51 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import "@progress/kendo-vue-common";
+import { ColorGradient as t } from "./colors/ColorGradient.mjs";
+import { ColorPalette as p } from "./colors/ColorPalette.mjs";
+import { ColorPicker as f } from "./colors/ColorPicker.mjs";
+import { FlatColorPicker as i } from "./colors/FlatColorPicker.mjs";
+import { Switch as n } from "./switch/Switch.mjs";
+import { InputSeparator as d } from "./input-separator/InputSeparator.mjs";
+import { Input as R } from "./input/Input.mjs";
+import { TextBox as B } from "./textbox/TextBox.mjs";
+import { NumericTextBox as C } from "./numerictextbox/NumericTextBox.mjs";
+import { MaskedTextBox as A } from "./maskedtextbox/MaskedTextBox.mjs";
+import { Slider as I } from "./slider/Slider.mjs";
+import { SLIDER_LABEL_ATTRIBUTE as g, SliderLabel as P } from "./slider/SliderLabel.mjs";
+import { RangeSlider as h } from "./range-slider/RangeSlider.mjs";
+import { Checkbox as G } from "./checkbox/Checkbox.mjs";
+import { RadioGroup as w } from "./radiobutton/RadioGroup.mjs";
+import { RadioButton as D } from "./radiobutton/RadioButton.mjs";
+import { TextArea as M } from "./textarea/TextArea.mjs";
+import { TextAreaResizeEnum as U } from "./textarea/interfaces/TextAreaResize.mjs";
+import { Signature as q } from "./signature/Signature.mjs";
+import { Rating as y } from "./rating/Rating.mjs";
+export {
+  G as Checkbox,
+  t as ColorGradient,
+  p as ColorPalette,
+  f as ColorPicker,
+  i as FlatColorPicker,
+  R as Input,
+  d as InputSeparator,
+  A as MaskedTextBox,
+  C as NumericTextBox,
+  D as RadioButton,
+  w as RadioGroup,
+  h as RangeSlider,
+  y as Rating,
+  g as SLIDER_LABEL_ATTRIBUTE,
+  q as Signature,
+  I as Slider,
+  P as SliderLabel,
+  n as Switch,
+  M as TextArea,
+  U as TextAreaResizeEnum,
+  B as TextBox
+};

package/input/Input.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"),l=require("@progress/kendo-vue-common"),c=require("../package-metadata.js"),f=require("@progress/kendo-vue-labels");function m(t){return typeof t=="function"||Object.prototype.toString.call(t)==="[object Object]"&&!a.isVNode(t)}const y=a.defineComponent({model:{event:"changemodel"},emits:{input:null,change:null,changemodel:null,"update:modelValue":null,focus:null,blur:null,keyup:null,keydown:null,keypress:null},props:{modelValue:{type:[String,Number],default:void 0},disabled:{type:Boolean,default:void 0},defaultValue:{type:[String,Number],default:""},value:{type:[String,Number]},label:{type:String},placeholder:{type:String},required:{type:Boolean,default:!1},size:{type:String,default:"medium",validator:function(t){return[null,"small","medium","large"].includes(t)}},rounded:{type:String,default:"medium",validator:function(t){return[null,"small","medium","large","full"].includes(t)}},fillMode:{type:String,default:"solid",validator:function(t){return[null,"solid","flat","outline"].includes(t)}},dir:{type:String},id:String,valid:{type:Boolean,default:void 0},validate:{type:Boolean},validationMessage:{type:String},validityStyles:{type:Boolean,default:!0},inputClass:String,tabIndex:Number,ariaLabel:String,ariaLabelledBy:String,ariaDescribedBy:String},data:function(){return{hasMounted:!1,autofill:!1,currentValue:"",valueDuringOnChange:"",focused:!1}},created(){l.validatePackage(c.packageMetadata),this._input=void 0,this._inputId=l.guid(),this.$data.valueDuringOnChange=void 0,this.$data.currentValue=this.$props.defaultValue},mounted(){this._input=this.inputRef,this.$data.hasMounted=!0,this.setValidity()},updated(){this.setValidity(),this.updateValidClass()},setup(){return{inputRef:a.ref(null)}},render(){const t=!this.$props.validityStyles||this.validity().valid,{label:e,id:i,required:n,tabIndex:u,ariaLabel:r,ariaLabelledBy:o,ariaDescribedBy:p}=this.$props,d=i||this._inputId,s=a.h("input",{...this.$attrs,placeholder:this.$props.placeholder,id:d,tabindex:u,required:n,ariaLabel:r,ariaLabelledby:o,ariaDescribedby:p,ariaDisabled:this.$props.disabled,disabled:this.$props.disabled,value:this.computedValue,class:this.inputInnerClass,ref:h=>{this.inputRef=h},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});return e?a.createVNode(f.FloatingLabel,{label:e,editorId:d,editorValue:this.computedValue,editorValid:t,editorDisabled:this.$props.disabled,editorPlaceholder:this.$data.focused?this.$props.placeholder:"",dir:this.$props.dir},m(s)?s:{default:()=>[s]}):s},methods:{updateValidClass(){this._input.classList.toggle("k-invalid",!this.validity().valid)},emitFocus(t){this.$emit("focus",t),this.$data.focused=!0},emitBlur(t){this.$emit("blur",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={badInput:this._input?this._input.validity.badInput:!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(let i in t)t.hasOwnProperty(i)&&(e=e||t[i]);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,i){this.disabled||(this.$data.currentValue=i,this.$data.valueDuringOnChange=i,this.$nextTick(()=>{this.$emit("changemodel",i),this.$emit("update:modelValue",i),this.$emit(e,{event:t,value:i,component:this,target:t.target,validity:this.validity()}),this.$data.valueDuringOnChange=void 0}))},handleAutoFill(t){if(t.animationName==="autoFillStart"){let 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}},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(){const{size:t,fillMode:e,rounded:i}=this.$props,n=!this.$data.hasMounted||!this.$props.validityStyles||this.validity().valid;return{"k-input":!0,[`k-input-${l.kendoThemeMaps.sizeMap[t]||t}`]:t,[`k-input-${e}`]:e,[`k-rounded-${l.kendoThemeMaps.roundedMap[i]||i}`]:i,"k-invalid":!n,"k-required":this.required,"k-disabled":this.$props.disabled,[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.Input=y;

package/input/Input.mjs

@@ -0,0 +1,289 @@
+/**
+ * @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 h, ref as f, h as c, createVNode as m, isVNode as y } from "vue";
+import { validatePackage as g, guid as v, kendoThemeMaps as n } from "@progress/kendo-vue-common";
+import { packageMetadata as $ } from "../package-metadata.mjs";
+import { FloatingLabel as b } from "@progress/kendo-vue-labels";
+function V(t) {
+  return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !y(t);
+}
+const M = /* @__PURE__ */ h({
+  model: {
+    event: "changemodel"
+  },
+  emits: {
+    input: null,
+    change: null,
+    changemodel: null,
+    "update:modelValue": null,
+    focus: null,
+    blur: null,
+    keyup: null,
+    keydown: null,
+    keypress: null
+  },
+  props: {
+    modelValue: {
+      type: [String, Number],
+      default: void 0
+    },
+    disabled: {
+      type: Boolean,
+      default: void 0
+    },
+    defaultValue: {
+      type: [String, Number],
+      default: ""
+    },
+    value: {
+      type: [String, Number]
+    },
+    label: {
+      type: String
+    },
+    placeholder: {
+      type: String
+    },
+    required: {
+      type: Boolean,
+      default: !1
+    },
+    size: {
+      type: String,
+      default: "medium",
+      validator: function(t) {
+        return [null, "small", "medium", "large"].includes(t);
+      }
+    },
+    rounded: {
+      type: String,
+      default: "medium",
+      validator: function(t) {
+        return [null, "small", "medium", "large", "full"].includes(t);
+      }
+    },
+    fillMode: {
+      type: String,
+      default: "solid",
+      validator: function(t) {
+        return [null, "solid", "flat", "outline"].includes(t);
+      }
+    },
+    dir: {
+      type: String
+    },
+    id: String,
+    valid: {
+      type: Boolean,
+      default: void 0
+    },
+    validate: {
+      type: Boolean
+    },
+    validationMessage: {
+      type: String
+    },
+    validityStyles: {
+      type: Boolean,
+      default: !0
+    },
+    inputClass: String,
+    tabIndex: Number,
+    ariaLabel: String,
+    ariaLabelledBy: String,
+    ariaDescribedBy: String
+  },
+  data: function() {
+    return {
+      hasMounted: !1,
+      autofill: !1,
+      currentValue: "",
+      valueDuringOnChange: "",
+      focused: !1
+    };
+  },
+  created() {
+    g($), this._input = void 0, this._inputId = v(), this.$data.valueDuringOnChange = void 0, this.$data.currentValue = this.$props.defaultValue;
+  },
+  mounted() {
+    this._input = this.inputRef, this.$data.hasMounted = !0, this.setValidity();
+  },
+  updated() {
+    this.setValidity(), this.updateValidClass();
+  },
+  setup() {
+    return {
+      inputRef: f(null)
+    };
+  },
+  render() {
+    const t = !this.$props.validityStyles || this.validity().valid, {
+      label: i,
+      id: e,
+      required: s,
+      tabIndex: d,
+      ariaLabel: u,
+      ariaLabelledBy: r,
+      ariaDescribedBy: o
+    } = this.$props, l = e || this._inputId, a = c("input", {
+      ...this.$attrs,
+      placeholder: this.$props.placeholder,
+      id: l,
+      tabindex: d,
+      required: s,
+      ariaLabel: u,
+      ariaLabelledby: r,
+      ariaDescribedby: o,
+      ariaDisabled: this.$props.disabled,
+      disabled: this.$props.disabled,
+      value: this.computedValue,
+      class: this.inputInnerClass,
+      ref: (p) => {
+        this.inputRef = p;
+      },
+      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
+    });
+    return i ? m(b, {
+      label: i,
+      editorId: l,
+      editorValue: this.computedValue,
+      editorValid: t,
+      editorDisabled: this.$props.disabled,
+      editorPlaceholder: this.$data.focused ? this.$props.placeholder : "",
+      dir: this.$props.dir
+    }, V(a) ? a : {
+      default: () => [a]
+    }) : a;
+  },
+  methods: {
+    updateValidClass() {
+      this._input.classList.toggle("k-invalid", !this.validity().valid);
+    },
+    emitFocus(t) {
+      this.$emit("focus", t), this.$data.focused = !0;
+    },
+    emitBlur(t) {
+      this.$emit("blur", 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 = {
+        badInput: this._input ? this._input.validity.badInput : !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 (let e in t)
+        t.hasOwnProperty(e) && (i = i || t[e]);
+      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, e) {
+      this.disabled || (this.$data.currentValue = e, this.$data.valueDuringOnChange = e, this.$nextTick(() => {
+        this.$emit("changemodel", e), this.$emit("update:modelValue", e), this.$emit(i, {
+          event: t,
+          value: e,
+          component: this,
+          target: t.target,
+          validity: this.validity()
+        }), this.$data.valueDuringOnChange = void 0;
+      }));
+    },
+    handleAutoFill(t) {
+      if (t.animationName === "autoFillStart") {
+        let 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;
+    }
+  },
+  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() {
+      const {
+        size: t,
+        fillMode: i,
+        rounded: e
+      } = this.$props, s = !this.$data.hasMounted || !this.$props.validityStyles || this.validity().valid;
+      return {
+        "k-input": !0,
+        [`k-input-${n.sizeMap[t] || t}`]: t,
+        [`k-input-${i}`]: i,
+        [`k-rounded-${n.roundedMap[e] || e}`]: e,
+        "k-invalid": !s,
+        "k-required": this.required,
+        "k-disabled": this.$props.disabled,
+        [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;
+    }
+  }
+});
+export {
+  M as Input
+};

package/input-separator/InputSeparator.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 e=require("vue"),a=require("../package-metadata.js"),t=require("@progress/kendo-vue-common"),r=e.defineComponent({created(){t.validatePackage(a.packageMetadata)},render(){return e.createVNode("span",{class:"k-input-separator"},null)}});exports.InputSeparator=r;

package/input-separator/InputSeparator.mjs

@@ -0,0 +1,23 @@
+/**
+ * @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 e, createVNode as a } from "vue";
+import { packageMetadata as r } from "../package-metadata.mjs";
+import { validatePackage as t } from "@progress/kendo-vue-common";
+const m = /* @__PURE__ */ e({
+  created() {
+    t(r);
+  },
+  render() {
+    return a("span", {
+      class: "k-input-separator"
+    }, null);
+  }
+});
+export {
+  m as InputSeparator
+};

package/maskedtextbox/MaskedTextBox.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 n=require("vue"),g=require("./masking.service.js"),u=require("./utils.js"),s=require("@progress/kendo-vue-common"),v=require("../package-metadata.js"),c=require("@progress/kendo-svg-icons"),$=n.defineComponent({model:{event:"changemodel"},emits:["change","focus","blur","update:modelValue","update:modelRawValue","changemodel"],props:{type:{type:String,default:"text"},modelValue:String,modelRawValue:String,value:String,defaultValue:String,placeholder:String,title:String,dir:String,id:String,ariaLabelledBy:String,ariaDescribedBy:String,tabIndex:Number,accessKey:String,disabled:Boolean,readonly:Boolean,size:{type:String,default:"medium",validator:function(e){return[null,"small","medium","large"].includes(e)}},rounded:{type:String,default:"medium",validator:function(e){return[null,"small","medium","large","full"].includes(e)}},fillMode:{type:String,default:"solid",validator:function(e){return[null,"solid","flat","outline"].includes(e)}},prompt:{type:String,default:"_"},promptPlaceholder:{type:String,default:" "},includeLiterals:{type:Boolean,default:!1},maskValidation:{type:Boolean,default:!0},mask:String,rules:{type:Object,default:function(){return u.defaultRules}},selection:Object,name:String,label:String,validationMessage:String,required:{type:Boolean,default:!1},valid:{type:Boolean,default:void 0},validityStyles:{type:Boolean,default:!0},iconName:String,inputPrefix:s.templateDefinition,inputSuffix:s.templateDefinition,showValidationIcon:Boolean,showLoadingIcon:Boolean,showClearButton:Boolean,inputClass:String,wrapperClass:String},data(){return{currentValue:void 0,currentFocused:!1,inputValue:void 0,currentSelection:[null,null]}},created(){s.validatePackage(v.packageMetadata),this.hasMounted=!1,this.valueDuringOnChange=void 0,this.inputId=`k-${s.guid()}`,this.service=new g.MaskingService,this.isPasted=!1},setup(){return{inputRef:n.ref(null)}},mounted(){this.hasMounted=!0,this.element=this.input=this.inputRef,this.updateService(),this.setValidity()},watch:{currentFocused:function(e,t){this.prevCurrentFocused=t},selection:function(e,t){this.prevSelection=t},includeLiterals:function(e,t){this.prevIncludeLiterals=t},mask:function(e,t){this.prevMask=t},prompt:function(e,t){this.prevPrompt=t},promptPlaceholder:function(e,t){this.prevPromptPlaceholder=t},rules:function(e,t){this.prevRules=t}},updated(){if(this.element&&this.currentFocused){let[t,i]=this.currentSelection;const a=this.prevSelection,l=this.$props.selection;(!a&&l||a&&l&&(a.start!==l.start||a.end!==l.end))&&(t=l.start,i=l.end),t!==null&&i!==null&&this.element.setSelectionRange(t,i)}const e={includeLiterals:this.prevIncludeLiterals,mask:this.prevMask,prompt:this.prevPrompt,promptPlaceholder:this.prevPromptPlaceholder,rules:this.prevRules};u.maskingChanged(e,this.$props)&&this.updateService(),this.setValidity()},computed:{computedRules(){return Object.assign({},u.defaultRules,this.$props.rules)},spanClassNames(){const e=!this.hasMounted||!this.$props.validityStyles||this.validity().valid;return{"k-floating-label-container":!0,"k-focus":this.currentFocused,"k-empty":!this.computedValue(),"k-invalid":!e&&e!==void 0,"k-rtl":this.$props.dir==="rtl","k-loading":this.showLoadingIcon,[this.wrapperClass]:this.wrapperClass}},wrapperSpanClass(){const{size:e,fillMode:t,rounded:i}=this.$props,a=!this.$props.validityStyles||this.validity().valid;return{"k-maskedtextbox":!0,"k-input":!0,[`k-input-${s.kendoThemeMaps.sizeMap[e]||e}`]:e,[`k-input-${t}`]:t,[`k-rounded-${s.kendoThemeMaps.roundedMap[i]||i}`]:i,"k-invalid":!a,"k-required":this.required,"k-disabled":this.$props.disabled,"k-loading":this.showLoadingIcon,[this.wrapperClass]:this.wrapperClass}},inputInnerClass(){return{"k-input-inner":!0,[this.inputClass]:this.inputClass}}},methods:{focus(){this.input&&this.input.focus()},computedValue(){let e;return this.valueDuringOnChange!==void 0?e=this.valueDuringOnChange:this.$props.value!==void 0?e=this.$props.value:this.$props.modelValue!==void 0?e=this.$props.modelValue:this.currentValue!==void 0?e=this.currentValue:this.$props.defaultValue!==void 0&&(e=this.$props.defaultValue),e||""},rawValue(){return this.service.rawValue(this.computedValue())},validity(){const e=this.computedValue(),t=this.service.validationValue(e),i=this.$props.validationMessage!==void 0,a=this.$props.valid!==void 0?this.$props.valid:(!this.$props.required||!!t)&&(!this.$props.maskValidation||!this.$props.prompt||e.indexOf(this.$props.prompt)===-1);return{customError:i,valid:a,valueMissing:!t}},pasteHandler(e){const{selectionStart:t,selectionEnd:i}=e.target;i!==t&&(this.isPasted=!0,this.currentSelection=[t||0,i||0])},clearClick(e){this.triggerOnChange("",e)},onChangeHandler(e){const t=e.currentTarget,i=this.inputValue=t.value,a=this.currentSelection[0]||0,l=this.currentSelection[1]||0;if(!this.$props.mask){this.isPasted=!1,this.currentSelection=[null,null],this.triggerOnChange(i,e);return}const o=this.computedValue();let r;if(this.isPasted){this.isPasted=!1;const p=o.length-l,d=i.length-p;r=this.service.maskInRange(i.slice(a,d),o,a,l)}else r=this.service.maskInput(i,o,t.selectionStart||0);this.currentSelection=[r.selection,r.selection],this.triggerOnChange(r.value,e),this.inputValue=void 0},focusHandler(e){this.currentFocused||(this.currentFocused=!0,this.$emit("focus",{target:this,event:e}))},blurHandler(e){this.currentFocused&&(this.currentFocused=!1,this.$emit("blur",{target:this,event:e}))},triggerOnChange(e,t){this.currentValue=e,this.valueDuringOnChange=e,this.$emit("change",{event:t,selectionStart:this.currentSelection[0],selectionEnd:this.currentSelection[1],value:this.computedValue(),component:this,target:{name:this.$props.name,value:this.computedValue(),rawValue:this.rawValue()},validity:this.validity()}),this.$emit("update:modelValue",this.computedValue()),this.$emit("update:modelRawValue",this.rawValue()),this.$emit("changemodel",this.computedValue()),this.valueDuringOnChange=void 0},updateService(e){const t=Object.assign({includeLiterals:this.$props.includeLiterals,mask:this.$props.mask,prompt:this.$props.prompt,promptPlaceholder:this.$props.promptPlaceholder,rules:this.$props.rules},e);this.service.update(t)},setValidity(){this.element&&this.element.setCustomValidity(this.validity().valid?"":this.$props.validationMessage||"")}},render(){const e=this.$props.id||this.inputId,{iconName:t,showValidationIcon:i,showLoadingIcon:a,showClearButton:l}=this.$props,o=!this.$props.validityStyles||this.validity().valid,r=this.computedValue();this.inputValue;const p=s.templateRendering.call(this,this.$props.inputPrefix,s.getListeners.call(this)),d=s.templateRendering.call(this,this.$props.inputSuffix,s.getListeners.call(this)),f=s.getTemplate.call(this,{h:n.h,template:p,additionalProps:{value:r,valid:o}}),m=s.getTemplate.call(this,{h:n.h,template:d,additionalProps:{value:r,valid:o}}),h=n.createVNode("span",{dir:this.$props.dir,class:this.wrapperSpanClass,style:this.$props.label?void 0:{width:this.$props.width}},[t&&n.createVNode(s.Icon,{name:t,class:"k-input-icon"},null),this.$props.inputPrefix&&n.createVNode("span",{class:"k-input-prefix"},[f]),n.createVNode("input",{type:this.$props.type,autocomplete:"off",autocorrect:"off",autocapitalize:"off",spellcheck:!1,class:this.inputInnerClass,value:r,id:e,"aria-labelledby":this.$props.ariaLabelledBy,"aria-describedby":this.$props.ariaDescribedBy,"aria-disabled":this.$props.disabled,name:this.$props.name,tabindex:s.getTabIndex(this.$props.tabIndex,this.$props.disabled,!0),accesskey:this.$props.accessKey,title:this.$props.title,disabled:this.$props.disabled||void 0,readonly:this.$props.readonly||void 0,placeholder:this.$props.placeholder,"aria-placeholder":this.$props.placeholder,required:this.$props.required,ref:s.setRef(this,"input"),onInput:this.onChangeHandler,onPaste:this.pasteHandler,onFocus:this.focusHandler,onBlur:this.blurHandler,onDragstart:u.returnFalse,onDrop:u.returnFalse},null),this.$props.inputSuffix&&n.createVNode("span",{class:"k-input-suffix"},[m]),i&&o&&n.createVNode(s.Icon,{name:"check",icon:c.checkIcon,class:"k-input-validation-icon"},null),i&&!o&&n.createVNode(s.Icon,{name:"exclamation-circle",icon:c.exclamationCircleIcon,class:"k-input-validation-icon"},null),a&&n.createVNode(s.Icon,{name:"loading",class:"k-input-loading-icon"},null),l&&r&&n.createVNode("span",{onClick:this.clearClick,class:"k-clear-value"},[n.createVNode(s.Icon,{name:"x",icon:c.xIcon},null)])]);return this.$props.label?n.createVNode("span",{class:this.spanClassNames,dir:this.$props.dir},[h,this.$props.label?e?n.createVNode("label",{for:e,class:"k-floating-label"},[this.$props.label]):n.createVNode("span",{class:"k-label"},[this.$props.label]):null]):h}});exports.MaskedTextBox=$;