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

package/switch/Switch.mjs

@@ -0,0 +1,253 @@
+/**
+ * @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, createVNode as i } from "vue";
+import { validatePackage as c, guid as m, kendoThemeMaps as n, getRef as r, isRtl as f, getTabIndex as g, setRef as u, noop as y, Keys as o } from "@progress/kendo-vue-common";
+import { provideLocalizationService as $ } from "@progress/kendo-vue-intl";
+import { switchValidation as h, messages as k } from "../messages/main.mjs";
+import { packageMetadata as b } from "../package-metadata.mjs";
+const B = /* @__PURE__ */ p({
+  name: "KendoSwitch",
+  model: {
+    event: "changemodel"
+  },
+  emits: {
+    change: null,
+    changemodel: null,
+    "update:modelValue": null,
+    focus: null,
+    blur: null
+  },
+  props: {
+    name: String,
+    accessKey: String,
+    checked: {
+      type: Boolean,
+      default: void 0
+    },
+    className: String,
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    defaultChecked: {
+      type: Boolean,
+      default: !1
+    },
+    size: {
+      type: String,
+      default: "medium",
+      validator: function(e) {
+        return [null, "small", "medium", "large"].includes(e);
+      }
+    },
+    trackRounded: {
+      type: String,
+      default: "full",
+      validator: function(e) {
+        return [null, "small", "medium", "large", "full"].includes(e);
+      }
+    },
+    thumbRounded: {
+      type: String,
+      default: "full",
+      validator: function(e) {
+        return [null, "small", "medium", "large", "full"].includes(e);
+      }
+    },
+    dir: String,
+    id: String,
+    ariaLabelledBy: String,
+    ariaDescribedBy: String,
+    offLabel: {
+      type: String,
+      default: "OFF"
+    },
+    onLabel: {
+      type: String,
+      default: "ON"
+    },
+    required: {
+      type: Boolean,
+      default: !1
+    },
+    tabIndex: Number,
+    valid: Boolean,
+    validityStyles: {
+      type: Boolean,
+      default: !1
+    },
+    validationMessage: String,
+    value: {
+      type: [String, Number, Boolean],
+      default: void 0
+    },
+    modelValue: {
+      type: Boolean,
+      default: void 0
+    }
+  },
+  created() {
+    c(b), this._id = m(), this.defaultValidationMessage = $(this);
+  },
+  data() {
+    return {
+      currentChecked: this.$props.defaultChecked,
+      valueDuringOnChange: void 0,
+      focused: !1,
+      currentDir: void 0
+    };
+  },
+  computed: {
+    computedValue() {
+      return this.valueDuringOnChange !== void 0 ? this.valueDuringOnChange : this.$props.checked !== void 0 ? this.$props.checked : this.$props.value !== void 0 ? this.$props.value : this.$props.modelValue !== void 0 ? this.$props.modelValue : this.currentChecked;
+    },
+    switchClassName() {
+      const e = !this.validityStyles || this.validity().valid, t = this.$props.trackRounded;
+      return {
+        "k-switch": !0,
+        [`k-switch-${n.sizeMap[this.$props.size]}`]: this.$props.size,
+        [`k-rounded-${n.roundedMap[t] || t}`]: t,
+        "k-switch-on": this.computedValue,
+        "k-switch-off": !this.computedValue,
+        "k-focus": this.focused,
+        "k-disabled": this.$props.disabled,
+        "k-invalid": !e
+      };
+    },
+    switchTrackClass() {
+      const e = this.$props.trackRounded;
+      return {
+        "k-switch-track": !0,
+        [`k-rounded-${n.roundedMap[e] || e}`]: e
+      };
+    },
+    switchThumbClass() {
+      const e = this.$props.thumbRounded;
+      return {
+        "k-switch-thumb": !0,
+        [`k-rounded-${n.roundedMap[e] || e}`]: e
+      };
+    }
+  },
+  mounted() {
+    this._element = r(this, "element"), this.input = r(this, "input"), this.currentDir = this.$props.dir !== void 0 ? this.$props.dir : f(this.$el) ? "rtl" : "ltr", this.setValidity();
+  },
+  updated() {
+    this.setValidity();
+  },
+  render() {
+    const {
+      disabled: e,
+      id: t,
+      offLabel: s,
+      onLabel: a,
+      tabIndex: d,
+      required: l
+    } = this.$props;
+    return i("span", {
+      class: this.switchClassName,
+      role: "switch",
+      "aria-labelledby": this.$props.ariaLabelledBy,
+      "aria-describedby": this.$props.ariaDescribedBy,
+      "aria-checked": this.computedValue,
+      "aria-disabled": e || void 0,
+      dir: this.currentDir,
+      onKeydown: this.handleKeyDown,
+      onClick: this.handleClick,
+      onFocusout: this.handleWrapperBlur,
+      onFocusin: this.handleWrapperFocus,
+      tabindex: g(d, e, void 0),
+      accesskey: this.$props.accessKey
+    }, [i("span", {
+      class: this.switchTrackClass,
+      ref: u(this, "element")
+    }, [i("input", {
+      type: "checkbox",
+      id: t || this._id,
+      checked: this.$props.checked,
+      ref: u(this, "input"),
+      tabindex: -1,
+      name: this.$props.name,
+      required: l !== void 0 ? l : !1,
+      "aria-hidden": !0,
+      value: this.computedValue,
+      style: {
+        opacity: 0,
+        width: 1,
+        border: 0,
+        zIndex: -1,
+        position: "absolute",
+        left: "50%"
+      },
+      onChange: y
+    }, null), i("span", {
+      class: "k-switch-label-on"
+    }, [a]), i("span", {
+      class: "k-switch-label-off"
+    }, [s])]), i("span", {
+      class: "k-switch-thumb-wrap"
+    }, [i("span", {
+      class: this.switchThumbClass
+    }, null)])]);
+  },
+  methods: {
+    focus() {
+      this._element && this._element.focus();
+    },
+    element() {
+      return this._element;
+    },
+    validity() {
+      const e = this.$props.validationMessage !== void 0, t = this.$props.valid !== void 0 ? this.$props.valid : this.$props.required ? !!this.computedValue : !0, s = this.$props.valid !== void 0 ? this.$props.valid : t;
+      return {
+        customError: e,
+        valid: s,
+        valueMissing: this.computedValue === null
+      };
+    },
+    setValidity() {
+      this.input && this.input.setCustomValidity && this.input.setCustomValidity(this.validity().valid ? "" : this.$props.validationMessage || this.defaultValidationMessage.toLanguageString(h, k[h]));
+    },
+    limit(e, t, s) {
+      const a = s.offsetWidth, d = t.offsetWidth;
+      return e < 0 ? 0 : e > a - d ? a - d : e;
+    },
+    toggle(e, t) {
+      this.currentChecked = e, this.valueDuringOnChange = e, this.$emit("changemodel", e), this.$emit("update:modelValue", e), this.$emit("change", {
+        event: t,
+        component: this,
+        target: {
+          value: e
+        },
+        name: this.$props.name,
+        value: e,
+        validity: this.validity()
+      }), this.valueDuringOnChange = void 0;
+    },
+    handleClick(e) {
+      this.eventTimeStamp !== e.timeStamp && (this.eventTimeStamp = e.timeStamp, this.toggle(!this.computedValue, e));
+    },
+    handleKeyDown(e) {
+      if (this.$props.disabled)
+        return;
+      const {
+        keyCode: t
+      } = e;
+      (t === o.space || t === o.enter) && this.toggle(!this.computedValue, e);
+    },
+    handleWrapperFocus(e) {
+      this.$props.disabled || (this.focused = !0, this.$emit("focus", e));
+    },
+    handleWrapperBlur(e) {
+      this.$props.disabled || (this.focused = !1, this.$emit("blur", e));
+    }
+  }
+});
+export {
+  B as Switch
+};

package/textarea/TextArea.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 t=require("vue"),i=require("@progress/kendo-vue-common"),z=require("../package-metadata.js"),m=require("@progress/kendo-svg-icons"),d=require("./interfaces/TextAreaResize.js"),N=t.defineComponent({name:"KendoTextArea",model:{event:"changemodel"},emits:{input:null,change:null,changemodel:null,"update:modelValue":null,focus:null,blur:null},props:{title:String,ariaDescribedBy:String,ariaLabelledBy:String,autoSize:Boolean,modelValue:{type:[String,Array,Number],default:void 0},defaultValue:[String,Number],dir:String,disabled:Boolean,readOnly:Boolean,rows:Number,id:String,name:String,validationMessage:String,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)}},required:Boolean,placeholder:String,tabIndex:Number,valid:{type:Boolean,default:void 0},value:[String,Array,Number],validityStyles:{type:Boolean,default:!0},iconName:String,inputPrefix:[String,Function],inputSuffix:[String,Function],showValidationIcon:Boolean,showLoadingIcon:Boolean,showClearButton:Boolean,inputClass:String,wrapperClass:String,flow:{type:String,default:"horizontal",validator:function(e){return["horizontal","vertical"].includes(e)}},resizable:{type:String,default:"vertical",validator:function(e){return["both","horizontal","vertical","none"].includes(e)}}},created(){i.validatePackage(z.packageMetadata),this.calculatedId=i.guid()},computed:{resizableClass(){const{resizable:e,autoSize:s}=this.$props;return s||e===d.TextAreaResizeEnum.none?"k-resize-none":e===d.TextAreaResizeEnum.vertical?"k-resize-y":e===d.TextAreaResizeEnum.horizontal?"k-resize-x":"k-resize"},rootClassName(){const{size:e,fillMode:s,rounded:l,required:a,showLoadingIcon:n}=this.$props,r=this.validityStyles===!0?!this.isValid:!1;return{"k-input":!0,"k-textarea":!0,[`k-input-${i.kendoThemeMaps.sizeMap[e]||e}`]:e,[`k-input-${s}`]:s,[`k-rounded-${i.kendoThemeMaps.roundedMap[l]||l}`]:l,"k-disabled":this.$props.disabled,"k-invalid":r,"k-required":a,"k-loading":n,[this.resizableClass]:!0,"!k-flex-col":this.flow==="vertical","!k-flex-row":this.flow==="horizontal",[this.wrapperClass]:this.wrapperClass}},inputInnerClass(){return{"k-input-inner":!0,"!k-resize-none":!0,"!k-overflow-auto":!0,"k-flex":!0,[this.inputClass]:this.inputClass}},prefixRenderClass(){return{"k-input-prefix":!0,"!k-flex-col":this.flow==="horizontal","!k-flex-row":this.flow==="vertical","!k-align-items-start":this.flow==="horizontal"}},suffixRenderClass(){return{"k-input-suffix":!0,"!k-flex-col":this.flow==="horizontal","!k-flex-row":this.flow==="vertical","!k-align-items-start":this.flow==="horizontal"}},suffixIconWrapClass(){return{"k-flex-wrap":!0,"!k-align-items-start":!0}},computedValue(){return this.$props.value!==void 0?this.$props.value:this.$props.modelValue!==void 0?this.$props.modelValue:this.currentValue},isValid(){return this.valid!==void 0?this.valid:this.required?!!this.computedValue:!0}},data(){return{currentValue:this.$props.defaultValue,textAreaHeight:"auto",currentDir:"ltr"}},watch:{size(){this.textAreaHeight="auto"},computedValue(){this.textAreaHeight="auto"}},mounted(){this.element=this.elementRef,this.currentDir=this.$props.dir!==void 0?this.$props.dir:i.isRtl(this.$el)?"rtl":"ltr",this.setValidity()},updated(){this.element=this.elementRef,this.setValidity()},render(){const{ariaDescribedBy:e,ariaLabelledBy:s,autoSize:l,disabled:a,readOnly:n,required:r,rows:f,id:g,name:x,placeholder:k,tabIndex:V,iconName:o,showValidationIcon:u,showLoadingIcon:h,showClearButton:c,title:v}=this.$props,b={id:g||this.calculatedId,name:x,disabled:a,rows:f,title:v,placeholder:k,readOnly:n,required:r,tabIndex:i.getTabIndex(V,a),"aria-labelledby":s,"aria-describedby":e,"aria-multiline":!0,"aria-disabled":a||void 0,...this.$attrs},y=i.templateRendering.call(this,this.$props.inputPrefix,i.getListeners.call(this)),C=i.templateRendering.call(this,this.$props.inputSuffix,i.getListeners.call(this)),S=i.getTemplate.call(this,{h:t.h,template:y,additionalProps:{value:this.computedValue,valid:this.isValid}}),w=i.getTemplate.call(this,{h:t.h,template:C,additionalProps:{value:this.computedValue,valid:this.isValid}}),$=t.h("textarea",{...b,class:this.inputInnerClass,ref:I=>{this.elementRef=I},style:l?{overflow:"hidden",height:this.textAreaHeight}:{},value:this.computedValue,onChange:this.handleChange,onInput:this.handleInput,onFocus:this.handleFocus,onBlur:this.handleBlur}),p=[o&&t.createVNode("span",{class:"k-flex-wrap"},[t.createVNode(i.Icon,{name:o,class:"k-input-icon"},null)]),$,u&&this.isValid&&t.createVNode("span",{class:this.suffixIconWrapClass},[t.createVNode(i.Icon,{name:"check",class:"k-input-validation-icon"},null)]),u&&!this.isValid&&t.createVNode("span",{class:this.suffixIconWrapClass},[t.createVNode(i.Icon,{name:"exclamation-circle",icon:m.exclamationCircleIcon,class:"k-input-validation-icon"},null)]),h&&t.createVNode("span",{class:this.suffixIconWrapClass},[t.createVNode(i.Icon,{name:"loading",class:"k-input-loading-icon"},null)]),c&&this.computedValue&&t.createVNode("span",{class:this.suffixIconWrapClass},[t.createVNode("span",{onClick:this.clearClick,class:"k-clear-value"},[t.createVNode(i.Icon,{name:"x",icon:m.xIcon},null)])])];return t.createVNode("span",{class:this.rootClassName,dir:this.currentDir==="rtl"?this.currentDir:"",style:this.$attrs.style},[this.$props.inputPrefix&&t.createVNode("span",{class:this.prefixRenderClass},[S]),o||u||h||c?t.createVNode("span",{class:"k-hstack k-flex"},[p]):p,this.$props.inputSuffix&&t.createVNode("span",{class:this.suffixRenderClass},[w])])},methods:{setValidity(){this.element&&this.element.setCustomValidity&&this.element.setCustomValidity(this.isValid?"":this.validationMessage||""),this.element&&(this.textAreaHeight=`${this.element.scrollHeight}px`)},clearClick(e){this.emitUpdate(e,"change","")},focus(){this.element&&this.element.focus()},emitUpdate(e,s,l){const a=l;this.$props.disabled||(this.currentValue=a),this.$props.disabled||(this.$emit("changemodel",a),this.$emit("update:modelValue",a),this.$emit(s,{event:e,component:this,name:this.element.name,value:a}))},handleChange(e){this.emitUpdate(e,"change",e.target.value)},handleInput(e){this.emitUpdate(e,"input",e.target.value)},handleFocus(e){this.$props.disabled||this.$emit("focus",{event:e,component:this,name:this.element.name})},handleBlur(e){this.$props.disabled||this.$emit("blur",{event:e,component:this,name:this.element.name})}}});exports.TextArea=N;

package/textarea/TextArea.mjs

@@ -0,0 +1,340 @@
+/**
+ * @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 R, h as d, createVNode as t } from "vue";
+import { validatePackage as M, guid as P, kendoThemeMaps as f, isRtl as T, getTabIndex as q, templateRendering as g, getListeners as x, getTemplate as k, Icon as s } from "@progress/kendo-vue-common";
+import { packageMetadata as D } from "../package-metadata.mjs";
+import { exclamationCircleIcon as H, xIcon as L } from "@progress/kendo-svg-icons";
+import { TextAreaResizeEnum as h } from "./interfaces/TextAreaResize.mjs";
+const K = /* @__PURE__ */ R({
+  name: "KendoTextArea",
+  model: {
+    event: "changemodel"
+  },
+  emits: {
+    input: null,
+    change: null,
+    changemodel: null,
+    "update:modelValue": null,
+    focus: null,
+    blur: null
+  },
+  props: {
+    title: String,
+    ariaDescribedBy: String,
+    ariaLabelledBy: String,
+    autoSize: Boolean,
+    modelValue: {
+      type: [String, Array, Number],
+      default: void 0
+    },
+    defaultValue: [String, Number],
+    dir: String,
+    disabled: Boolean,
+    readOnly: Boolean,
+    rows: Number,
+    id: String,
+    name: String,
+    validationMessage: String,
+    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);
+      }
+    },
+    required: Boolean,
+    placeholder: String,
+    tabIndex: Number,
+    valid: {
+      type: Boolean,
+      default: void 0
+    },
+    value: [String, Array, Number],
+    validityStyles: {
+      type: Boolean,
+      default: !0
+    },
+    iconName: String,
+    inputPrefix: [String, Function],
+    inputSuffix: [String, Function],
+    showValidationIcon: Boolean,
+    showLoadingIcon: Boolean,
+    showClearButton: Boolean,
+    inputClass: String,
+    wrapperClass: String,
+    flow: {
+      type: String,
+      default: "horizontal",
+      validator: function(e) {
+        return ["horizontal", "vertical"].includes(e);
+      }
+    },
+    resizable: {
+      type: String,
+      default: "vertical",
+      validator: function(e) {
+        return ["both", "horizontal", "vertical", "none"].includes(e);
+      }
+    }
+  },
+  created() {
+    M(D), this.calculatedId = P();
+  },
+  computed: {
+    resizableClass() {
+      const {
+        resizable: e,
+        autoSize: a
+      } = this.$props;
+      return a || e === h.none ? "k-resize-none" : e === h.vertical ? "k-resize-y" : e === h.horizontal ? "k-resize-x" : "k-resize";
+    },
+    rootClassName() {
+      const {
+        size: e,
+        fillMode: a,
+        rounded: l,
+        required: i,
+        showLoadingIcon: n
+      } = this.$props, r = this.validityStyles === !0 ? !this.isValid : !1;
+      return {
+        "k-input": !0,
+        "k-textarea": !0,
+        [`k-input-${f.sizeMap[e] || e}`]: e,
+        [`k-input-${a}`]: a,
+        [`k-rounded-${f.roundedMap[l] || l}`]: l,
+        "k-disabled": this.$props.disabled,
+        "k-invalid": r,
+        "k-required": i,
+        "k-loading": n,
+        [this.resizableClass]: !0,
+        "!k-flex-col": this.flow === "vertical",
+        "!k-flex-row": this.flow === "horizontal",
+        [this.wrapperClass]: this.wrapperClass
+      };
+    },
+    inputInnerClass() {
+      return {
+        "k-input-inner": !0,
+        "!k-resize-none": !0,
+        "!k-overflow-auto": !0,
+        "k-flex": !0,
+        [this.inputClass]: this.inputClass
+      };
+    },
+    prefixRenderClass() {
+      return {
+        "k-input-prefix": !0,
+        "!k-flex-col": this.flow === "horizontal",
+        "!k-flex-row": this.flow === "vertical",
+        "!k-align-items-start": this.flow === "horizontal"
+      };
+    },
+    suffixRenderClass() {
+      return {
+        "k-input-suffix": !0,
+        "!k-flex-col": this.flow === "horizontal",
+        "!k-flex-row": this.flow === "vertical",
+        "!k-align-items-start": this.flow === "horizontal"
+      };
+    },
+    suffixIconWrapClass() {
+      return {
+        "k-flex-wrap": !0,
+        "!k-align-items-start": !0
+      };
+    },
+    computedValue() {
+      return this.$props.value !== void 0 ? this.$props.value : this.$props.modelValue !== void 0 ? this.$props.modelValue : this.currentValue;
+    },
+    isValid() {
+      return this.valid !== void 0 ? this.valid : this.required ? !!this.computedValue : !0;
+    }
+  },
+  data() {
+    return {
+      currentValue: this.$props.defaultValue,
+      textAreaHeight: "auto",
+      currentDir: "ltr"
+    };
+  },
+  watch: {
+    size() {
+      this.textAreaHeight = "auto";
+    },
+    computedValue() {
+      this.textAreaHeight = "auto";
+    }
+  },
+  mounted() {
+    this.element = this.elementRef, this.currentDir = this.$props.dir !== void 0 ? this.$props.dir : T(this.$el) ? "rtl" : "ltr", this.setValidity();
+  },
+  updated() {
+    this.element = this.elementRef, this.setValidity();
+  },
+  render() {
+    const {
+      ariaDescribedBy: e,
+      ariaLabelledBy: a,
+      autoSize: l,
+      disabled: i,
+      readOnly: n,
+      required: r,
+      rows: v,
+      id: b,
+      name: C,
+      placeholder: V,
+      tabIndex: y,
+      iconName: o,
+      showValidationIcon: u,
+      showLoadingIcon: p,
+      showClearButton: c,
+      title: w
+    } = this.$props, S = {
+      id: b || this.calculatedId,
+      name: C,
+      disabled: i,
+      rows: v,
+      title: w,
+      placeholder: V,
+      readOnly: n,
+      required: r,
+      tabIndex: q(y, i),
+      "aria-labelledby": a,
+      "aria-describedby": e,
+      "aria-multiline": !0,
+      "aria-disabled": i || void 0,
+      ...this.$attrs
+    }, $ = g.call(this, this.$props.inputPrefix, x.call(this)), z = g.call(this, this.$props.inputSuffix, x.call(this)), I = k.call(this, {
+      h: d,
+      template: $,
+      additionalProps: {
+        value: this.computedValue,
+        valid: this.isValid
+      }
+    }), B = k.call(this, {
+      h: d,
+      template: z,
+      additionalProps: {
+        value: this.computedValue,
+        valid: this.isValid
+      }
+    }), A = d("textarea", {
+      ...S,
+      class: this.inputInnerClass,
+      ref: (N) => {
+        this.elementRef = N;
+      },
+      style: l ? {
+        overflow: "hidden",
+        height: this.textAreaHeight
+      } : {},
+      value: this.computedValue,
+      onChange: this.handleChange,
+      onInput: this.handleInput,
+      onFocus: this.handleFocus,
+      onBlur: this.handleBlur
+    }), m = [o && t("span", {
+      class: "k-flex-wrap"
+    }, [t(s, {
+      name: o,
+      class: "k-input-icon"
+    }, null)]), A, u && this.isValid && t("span", {
+      class: this.suffixIconWrapClass
+    }, [t(s, {
+      name: "check",
+      class: "k-input-validation-icon"
+    }, null)]), u && !this.isValid && t("span", {
+      class: this.suffixIconWrapClass
+    }, [t(s, {
+      name: "exclamation-circle",
+      icon: H,
+      class: "k-input-validation-icon"
+    }, null)]), p && t("span", {
+      class: this.suffixIconWrapClass
+    }, [t(s, {
+      name: "loading",
+      class: "k-input-loading-icon"
+    }, null)]), c && this.computedValue && t("span", {
+      class: this.suffixIconWrapClass
+    }, [t("span", {
+      onClick: this.clearClick,
+      class: "k-clear-value"
+    }, [t(s, {
+      name: "x",
+      icon: L
+    }, null)])])];
+    return t("span", {
+      class: this.rootClassName,
+      dir: this.currentDir === "rtl" ? this.currentDir : "",
+      style: this.$attrs.style
+    }, [this.$props.inputPrefix && t("span", {
+      class: this.prefixRenderClass
+    }, [I]), o || u || p || c ? t("span", {
+      class: "k-hstack k-flex"
+    }, [m]) : m, this.$props.inputSuffix && t("span", {
+      class: this.suffixRenderClass
+    }, [B])]);
+  },
+  methods: {
+    setValidity() {
+      this.element && this.element.setCustomValidity && this.element.setCustomValidity(this.isValid ? "" : this.validationMessage || ""), this.element && (this.textAreaHeight = `${this.element.scrollHeight}px`);
+    },
+    clearClick(e) {
+      this.emitUpdate(e, "change", "");
+    },
+    focus() {
+      this.element && this.element.focus();
+    },
+    emitUpdate(e, a, l) {
+      const i = l;
+      this.$props.disabled || (this.currentValue = i), this.$props.disabled || (this.$emit("changemodel", i), this.$emit("update:modelValue", i), this.$emit(a, {
+        event: e,
+        component: this,
+        name: this.element.name,
+        value: i
+      }));
+    },
+    handleChange(e) {
+      this.emitUpdate(e, "change", e.target.value);
+    },
+    handleInput(e) {
+      this.emitUpdate(e, "input", e.target.value);
+    },
+    handleFocus(e) {
+      this.$props.disabled || this.$emit("focus", {
+        event: e,
+        component: this,
+        name: this.element.name
+      });
+    },
+    handleBlur(e) {
+      this.$props.disabled || this.$emit("blur", {
+        event: e,
+        component: this,
+        name: this.element.name
+      });
+    }
+  }
+});
+export {
+  K as TextArea
+};

package/textarea/interfaces/TextAreaResize.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"});var t=(o=>(o.both="both",o.horizontal="horizontal",o.vertical="vertical",o.none="none",o))(t||{});exports.TextAreaResizeEnum=t;

package/textarea/interfaces/TextAreaResize.mjs

@@ -0,0 +1,11 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+var r = /* @__PURE__ */ ((o) => (o.both = "both", o.horizontal = "horizontal", o.vertical = "vertical", o.none = "none", o))(r || {});
+export {
+  r as TextAreaResizeEnum
+};

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