@progress/kendo-vue-inputs 9.0.1-develop.1 → 9.1.0-develop.1

package/otpinput/OTPInput.mjs

@@ -0,0 +1,424 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { defineComponent as v, createVNode as c } from "vue";
+import { classNames as $, kendoThemeMaps as V, getRef as m, validatePackage as T, setRef as k } from "@progress/kendo-vue-common";
+import { provideLocalizationService as S } from "@progress/kendo-vue-intl";
+import { packageMetadata as B } from "../package-metadata.mjs";
+import { otpInputAriaLabel as b, messages as D } from "../messages/main.mjs";
+import { OTPInputCell as O } from "./OTPInputCell.mjs";
+import { OTPInputSeparator as w } from "./OTPInputSeparator.mjs";
+const h = 4;
+function _(e, t) {
+  if (Array.isArray(t)) {
+    const i = t.reduce((n, a) => n + a, 0);
+    return i !== e && console.warn(`[OTPInput] The sum of groupLength values (${i}) must equal length (${e}).`), t;
+  }
+  const s = [];
+  let l = e;
+  for (; l > 0; )
+    s.push(Math.min(t, l)), l -= t;
+  return s;
+}
+const z = /* @__PURE__ */ v({
+  name: "KendoOTPInput",
+  model: {
+    event: "changemodel"
+  },
+  emits: {
+    change: (e) => !0,
+    changemodel: (e) => !0,
+    "update:modelValue": (e) => !0,
+    focus: (e) => !0,
+    blur: (e) => !0
+  },
+  props: {
+    value: {
+      type: String
+    },
+    modelValue: {
+      type: String
+    },
+    defaultValue: {
+      type: String
+    },
+    length: {
+      type: Number,
+      default: h
+    },
+    groupLength: {
+      type: [Number, Array]
+    },
+    separator: {
+      type: [String, Object]
+    },
+    type: {
+      type: String,
+      default: "text"
+    },
+    placeholder: {
+      type: String
+    },
+    spacing: {
+      type: Boolean,
+      default: !0
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    readOnly: {
+      type: Boolean,
+      default: !1
+    },
+    inputAttributes: {
+      type: Object
+    },
+    name: {
+      type: String
+    },
+    required: {
+      type: Boolean,
+      default: !1
+    },
+    valid: {
+      type: Boolean,
+      default: void 0
+    },
+    size: {
+      type: String
+    },
+    fillMode: {
+      type: String
+    },
+    rounded: {
+      type: String
+    },
+    onChange: {
+      type: Function
+    },
+    onFocus: {
+      type: Function
+    },
+    onBlur: {
+      type: Function
+    },
+    ariaLabel: {
+      type: String
+    },
+    ariaLabelledBy: {
+      type: String
+    },
+    ariaDescribedBy: {
+      type: String
+    },
+    id: {
+      type: String
+    },
+    dir: {
+      type: String
+    },
+    touched: {
+      type: Boolean
+    },
+    visited: {
+      type: Boolean
+    },
+    modified: {
+      type: Boolean
+    },
+    validationMessage: {
+      type: String
+    }
+  },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  data() {
+    var l, i, n, a;
+    const e = (l = this.$props.defaultValue) != null ? l : "", t = (i = this.$props.length) != null ? i : h, s = ((a = (n = this.$props.value) != null ? n : this.$props.modelValue) != null ? a : e).padEnd(t, " ").slice(0, t);
+    return {
+      stateValue: e.padEnd(t, " ").slice(0, t),
+      lastCommittedValue: s,
+      invalidCellIndex: null,
+      invalidTimer: null
+    };
+  },
+  created() {
+    T(B);
+  },
+  beforeUnmount() {
+    this.invalidTimer !== null && clearTimeout(this.invalidTimer);
+  },
+  computed: {
+    currentValue() {
+      var s, l, i;
+      const e = (s = this.$props.length) != null ? s : h;
+      return ((i = (l = this.$props.value) != null ? l : this.$props.modelValue) != null ? i : this.stateValue).padEnd(e, " ").slice(0, e);
+    },
+    isControlled() {
+      return this.$props.value !== void 0 || this.$props.modelValue !== void 0;
+    }
+  },
+  watch: {
+    currentValue(e) {
+      this.lastCommittedValue = e;
+    }
+  },
+  methods: {
+    focus(e) {
+      var s;
+      const t = (s = this.$props.length) != null ? s : h;
+      if (e !== void 0)
+        this.focusCell(e);
+      else {
+        const l = this.lastCommittedValue.indexOf(" ");
+        this.focusCell(l >= 0 ? l : t - 1);
+      }
+    },
+    blur() {
+      var t;
+      const e = (t = this.$props.length) != null ? t : h;
+      for (let s = 0; s < e; s++) {
+        const l = m(this, `cell_${s}`);
+        l && typeof l.blur == "function" && l.blur();
+      }
+    },
+    _eventTarget() {
+      var e;
+      return {
+        element: (e = this.$el) != null ? e : null,
+        value: this.currentValue,
+        focus: (t) => this.focus(t),
+        blur: () => this.blur()
+      };
+    },
+    focusCell(e) {
+      var i;
+      const t = (i = this.$props.length) != null ? i : h, s = Math.max(0, Math.min(e, t - 1)), l = m(this, `cell_${s}`);
+      l && typeof l.focus == "function" && l.focus();
+    },
+    flashInvalid(e) {
+      this.invalidTimer !== null && clearTimeout(this.invalidTimer), this.invalidCellIndex = e, this.invalidTimer = setTimeout(() => {
+        this.invalidCellIndex = null, this.invalidTimer = null;
+      }, 300);
+    },
+    updateValue(e, t) {
+      var a;
+      const s = (a = this.$props.length) != null ? a : h, l = e.padEnd(s, " ").slice(0, s);
+      if (l === this.currentValue)
+        return;
+      this.isControlled || (this.stateValue = l), this.lastCommittedValue = l;
+      const i = this._eventTarget(), n = {
+        syntheticEvent: t,
+        nativeEvent: t,
+        target: i,
+        value: l,
+        component: this
+      };
+      this.$emit("change", n), this.$emit("changemodel", l), this.$emit("update:modelValue", l);
+    },
+    handleCellChange(e, t, s) {
+      const l = s.target, n = l.value.slice(-1);
+      if (!n)
+        return;
+      if (this.$props.type === "number" && !/^\d$/.test(n)) {
+        this.flashInvalid(e);
+        const r = this.currentValue[e] === " " ? "" : this.currentValue[e];
+        l.value = r, l.select();
+        return;
+      }
+      const a = this.lastCommittedValue.split("");
+      a[e] = n, this.updateValue(a.join(""), s), this.focusCell(e + 1);
+    },
+    handlePrintableOnFilledCell(e, t, s) {
+      if (s.preventDefault(), this.$props.type === "number" && !/^\d$/.test(t)) {
+        this.flashInvalid(e), s.target.select();
+        return;
+      }
+      const l = this.currentValue.split("");
+      l[e] = t, this.updateValue(l.join(""), s), this.focusCell(e + 1);
+    },
+    handleCellKeyDown(e, t) {
+      var l, i;
+      if (this.$props.readOnly)
+        return;
+      const s = ((l = this.$el) == null ? void 0 : l.getAttribute("dir")) === "rtl";
+      switch (t.key) {
+        case "ArrowLeft": {
+          t.preventDefault(), this.focusCell(s ? e + 1 : e - 1);
+          break;
+        }
+        case "ArrowRight": {
+          t.preventDefault(), this.focusCell(s ? e - 1 : e + 1);
+          break;
+        }
+        case "ArrowUp":
+        case "ArrowDown": {
+          t.preventDefault();
+          break;
+        }
+        case "Backspace": {
+          t.preventDefault();
+          const n = this.currentValue.split("");
+          n[e] = " ", this.updateValue(n.join(""), t), this.focusCell(e - 1);
+          break;
+        }
+        case "Delete": {
+          t.preventDefault();
+          const n = this.currentValue.split("");
+          n[e] = " ", this.updateValue(n.join(""), t);
+          break;
+        }
+        default: {
+          const {
+            key: n,
+            ctrlKey: a,
+            altKey: r,
+            metaKey: o
+          } = t, p = (i = this.currentValue[e]) != null ? i : " ";
+          n.length === 1 && !a && !r && !o && p !== " " && this.handlePrintableOnFilledCell(e, n, t);
+          break;
+        }
+      }
+    },
+    handleCellFocus(e, t) {
+      const s = this._eventTarget(), l = {
+        syntheticEvent: t,
+        nativeEvent: t,
+        target: s,
+        cellIndex: e
+      };
+      this.$emit("focus", l);
+    },
+    handleCellBlur(e, t) {
+    },
+    handleWrapperFocusOut(e) {
+      var i;
+      const t = e.relatedTarget;
+      if (t && ((i = this.$el) != null && i.contains(t)))
+        return;
+      const s = this._eventTarget(), l = {
+        syntheticEvent: e,
+        nativeEvent: e,
+        target: s
+      };
+      this.$emit("blur", l);
+    },
+    handlePaste(e) {
+      var r, o, p, f, g, y;
+      if (e.preventDefault(), this.$props.readOnly)
+        return;
+      const t = (o = (r = e.clipboardData) == null ? void 0 : r.getData("text")) != null ? o : "";
+      if (!t)
+        return;
+      const s = (p = this.$props.length) != null ? p : h;
+      let l = -1;
+      for (let u = 0; u < s; u++) {
+        const d = m(this, `cell_${u}`), C = (y = d == null ? void 0 : d._input) != null ? y : (g = (f = d == null ? void 0 : d.$refs) == null ? void 0 : f.textBoxRef) == null ? void 0 : g._input;
+        if (C && C === document.activeElement) {
+          l = u;
+          break;
+        }
+      }
+      const i = l >= 0 ? l : 0;
+      if (this.$props.type === "number" && !/^\d+$/.test(t.trim())) {
+        this.flashInvalid(i);
+        return;
+      }
+      const n = this.currentValue.split("");
+      for (let u = 0; u < t.length && i + u < s; u++)
+        n[i + u] = t[u];
+      this.updateValue(n.join(""), e);
+      const a = Math.min(i + t.length, s - 1);
+      this.focusCell(a);
+    },
+    buildContent() {
+      var n;
+      const e = (n = this.length) != null ? n : h, t = (a) => {
+        var r, o;
+        return c(O, {
+          ref: k(this, `cell_${a}`),
+          index: a,
+          totalLength: e,
+          char: (r = this.currentValue[a]) != null ? r : " ",
+          type: this.type,
+          placeholder: this.placeholder,
+          disabled: this.disabled,
+          readOnly: this.readOnly,
+          required: this.required,
+          size: this.size,
+          fillMode: this.fillMode,
+          rounded: this.rounded,
+          inputAttributes: this.inputAttributes,
+          valid: this.valid === !1 || this.invalidCellIndex === a ? !1 : (o = this.valid) != null ? o : !0,
+          id: this.id ? `${this.id}-cell-${a}` : `otp-cell-${a}`,
+          name: this.name ? `${this.name}-cell-${a}` : `otp-cell-${a}`,
+          onCellChange: this.handleCellChange,
+          onCellKeyDown: this.handleCellKeyDown,
+          onCellFocus: this.handleCellFocus,
+          onCellBlur: this.handleCellBlur
+        }, null);
+      };
+      if (!this.groupLength) {
+        const a = Array.from({
+          length: e
+        }, (r, o) => t(o));
+        return this.spacing === !1 ? [c("div", {
+          key: "group",
+          class: "k-input-group"
+        }, [a])] : a;
+      }
+      const s = _(e, this.groupLength);
+      let l = 0;
+      const i = [];
+      return s.forEach((a, r) => {
+        const o = l;
+        r > 0 && this.separator !== void 0 && i.push(c(w, {
+          key: `sep-${o}`,
+          separator: this.separator
+        }, null));
+        const p = [];
+        for (let f = 0; f < a; f++)
+          p.push(t(l++));
+        this.spacing === !1 ? i.push(c("div", {
+          key: `group-${o}`,
+          class: "k-input-group"
+        }, [p])) : i.push(...p);
+      }), i;
+    }
+  },
+  render() {
+    const t = S(this).toLanguageString(b, D[b]), s = $("k-otp", {
+      "k-disabled": this.disabled,
+      "k-invalid": this.valid === !1,
+      [`k-otp-${V.sizeMap[this.size] || this.size}`]: this.size
+    }, this.$props.className);
+    return c("div", {
+      class: s,
+      role: "group",
+      "aria-label": this.ariaLabel || t,
+      "aria-labelledby": this.ariaLabelledBy,
+      "aria-describedby": this.ariaDescribedBy,
+      id: this.id,
+      style: this.$props.style,
+      dir: this.dir,
+      onFocusout: this.handleWrapperFocusOut,
+      onPaste: this.handlePaste
+    }, [this.name && c("input", {
+      "aria-hidden": !0,
+      type: "hidden",
+      name: this.name,
+      value: this.currentValue.replace(/ /g, "")
+    }, null), this.buildContent()]);
+  }
+});
+export {
+  z as OTPInput
+};

package/otpinput/OTPInputCell.d.ts

@@ -0,0 +1,168 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { PropType } from 'vue';
+/** @hidden */
+export interface OTPInputCellProps {
+    index: number;
+    totalLength: number;
+    char: string;
+    type?: 'text' | 'password' | 'number';
+    placeholder?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    size?: 'small' | 'medium' | 'large';
+    fillMode?: 'solid' | 'flat' | 'outline';
+    rounded?: 'small' | 'medium' | 'large' | 'full' | 'none';
+    id?: string;
+    name?: string;
+    inputAttributes?: Object;
+    valid?: boolean;
+    onCellChange?: (index: number, char: string, event: Event) => void;
+    onCellKeyDown?: (index: number, event: KeyboardEvent) => void;
+    onCellFocus?: (index: number, event: FocusEvent) => void;
+    onCellBlur?: (index: number, event: FocusEvent) => void;
+}
+/** @hidden */
+export declare const OTPInputCell: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    index: {
+        type: PropType<number>;
+        required: true;
+    };
+    totalLength: {
+        type: PropType<number>;
+        required: true;
+    };
+    char: {
+        type: PropType<string>;
+        required: true;
+    };
+    type: {
+        type: PropType<"number" | "text" | "password">;
+    };
+    placeholder: {
+        type: PropType<string>;
+    };
+    disabled: {
+        type: PropType<boolean>;
+    };
+    readOnly: {
+        type: PropType<boolean>;
+    };
+    required: {
+        type: PropType<boolean>;
+    };
+    size: {
+        type: PropType<"small" | "medium" | "large">;
+    };
+    fillMode: {
+        type: PropType<"flat" | "solid" | "outline">;
+    };
+    rounded: {
+        type: PropType<"small" | "medium" | "large" | "full" | "none">;
+    };
+    id: {
+        type: PropType<string>;
+    };
+    name: {
+        type: PropType<string>;
+    };
+    inputAttributes: {
+        type: PropType<Object>;
+    };
+    valid: {
+        type: PropType<boolean>;
+        default: any;
+    };
+    onCellChange: {
+        type: PropType<(index: number, char: string, event: Event) => void>;
+    };
+    onCellKeyDown: {
+        type: PropType<(index: number, event: KeyboardEvent) => void>;
+    };
+    onCellFocus: {
+        type: PropType<(index: number, event: FocusEvent) => void>;
+    };
+    onCellBlur: {
+        type: PropType<(index: number, event: FocusEvent) => void>;
+    };
+}>, {}, {
+    _input: HTMLInputElement;
+}, {}, {
+    focus(): void;
+    blur(): void;
+    select(): void;
+    handleChange(e: any): void;
+    handleFocus(e: any): void;
+    handleBlur(e: any): void;
+    handleKeyDown(e: KeyboardEvent): void;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    index: {
+        type: PropType<number>;
+        required: true;
+    };
+    totalLength: {
+        type: PropType<number>;
+        required: true;
+    };
+    char: {
+        type: PropType<string>;
+        required: true;
+    };
+    type: {
+        type: PropType<"number" | "text" | "password">;
+    };
+    placeholder: {
+        type: PropType<string>;
+    };
+    disabled: {
+        type: PropType<boolean>;
+    };
+    readOnly: {
+        type: PropType<boolean>;
+    };
+    required: {
+        type: PropType<boolean>;
+    };
+    size: {
+        type: PropType<"small" | "medium" | "large">;
+    };
+    fillMode: {
+        type: PropType<"flat" | "solid" | "outline">;
+    };
+    rounded: {
+        type: PropType<"small" | "medium" | "large" | "full" | "none">;
+    };
+    id: {
+        type: PropType<string>;
+    };
+    name: {
+        type: PropType<string>;
+    };
+    inputAttributes: {
+        type: PropType<Object>;
+    };
+    valid: {
+        type: PropType<boolean>;
+        default: any;
+    };
+    onCellChange: {
+        type: PropType<(index: number, char: string, event: Event) => void>;
+    };
+    onCellKeyDown: {
+        type: PropType<(index: number, event: KeyboardEvent) => void>;
+    };
+    onCellFocus: {
+        type: PropType<(index: number, event: FocusEvent) => void>;
+    };
+    onCellBlur: {
+        type: PropType<(index: number, event: FocusEvent) => void>;
+    };
+}>> & Readonly<{}>, {
+    valid: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/otpinput/OTPInputCell.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 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 r=require("vue"),a=require("@progress/kendo-vue-common"),u=require("@progress/kendo-vue-intl"),d=require("../textbox/TextBox.js"),s=require("../messages/main.js"),h=r.defineComponent({name:"OTPInputCell",props:{index:{type:Number,required:!0},totalLength:{type:Number,required:!0},char:{type:String,required:!0},type:{type:String},placeholder:{type:String},disabled:{type:Boolean},readOnly:{type:Boolean},required:{type:Boolean},size:{type:String},fillMode:{type:String},rounded:{type:String},id:{type:String},name:{type:String},inputAttributes:{type:Object},valid:{type:Boolean,default:void 0},onCellChange:{type:Function},onCellKeyDown:{type:Function},onCellFocus:{type:Function},onCellBlur:{type:Function}},inject:{kendoLocalizationService:{default:null}},data(){return{_input:null}},mounted(){var e,t;this._input=(t=(e=this.$refs.textBoxRef)==null?void 0:e._input)!=null?t:null},methods:{focus(){var t;const e=(t=this.$refs.textBoxRef)==null?void 0:t._input;e&&e.focus()},blur(){var t;const e=(t=this.$refs.textBoxRef)==null?void 0:t._input;e&&e.blur()},select(){var t;const e=(t=this.$refs.textBoxRef)==null?void 0:t._input;e&&e.select()},handleChange(e){var t,n,i,l;if(this.onCellChange){const o=(n=(t=e.event)!=null?t:e.syntheticEvent)!=null?n:e;this.onCellChange(this.index,(l=(i=o==null?void 0:o.target)==null?void 0:i.value)!=null?l:"",o)}},handleFocus(e){var i,l;const t=(i=e.event)!=null?i:e,n=(l=this.$refs.textBoxRef)==null?void 0:l._input;n&&n.select(),this.onCellFocus&&this.onCellFocus(this.index,t)},handleBlur(e){var n;const t=(n=e.event)!=null?n:e;this.onCellBlur&&this.onCellBlur(this.index,t)},handleKeyDown(e){this.onCellKeyDown&&this.onCellKeyDown(this.index,e)}},render(){const t=u.provideLocalizationService(this).toLanguageString(s.otpInputCellAriaLabel,s.messages[s.otpInputCellAriaLabel]).replace("{index}",String(this.index+1)).replace("{total}",String(this.totalLength)),n={autoComplete:"off",type:this.type==="number"?"text":this.type,...this.inputAttributes,maxLength:1,...this.name&&{name:this.name},...this.readOnly&&{readOnly:!0},...this.valid===!1&&{"aria-invalid":!0}};return r.createVNode(d.TextBox,{ref:"textBoxRef",wrapperClass:a.classNames("k-otp-input",{"k-readonly":this.readOnly,"k-invalid":this.valid===!1}),value:this.char===" "?"":this.char,size:this.size,fillMode:this.fillMode,rounded:this.rounded,disabled:this.disabled,required:this.required,valid:this.valid,validityStyles:!1,id:this.id,placeholder:this.placeholder,ariaLabel:t,onInput:this.onCellChange?this.handleChange:void 0,onFocus:this.handleFocus,onBlur:this.handleBlur,onKeydown:this.handleKeyDown,inputAttributes:n},null)}});exports.OTPInputCell=h;