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

package/otpinput/OTPInputCell.mjs

@@ -0,0 +1,173 @@
+/**
+ * @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 r, createVNode as a } from "vue";
+import { classNames as u } from "@progress/kendo-vue-common";
+import { provideLocalizationService as d } from "@progress/kendo-vue-intl";
+import { TextBox as h } from "../textbox/TextBox.mjs";
+import { otpInputCellAriaLabel as s, messages as p } from "../messages/main.mjs";
+const C = /* @__PURE__ */ r({
+  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, i, n, l;
+      if (this.onCellChange) {
+        const o = (i = (t = e.event) != null ? t : e.syntheticEvent) != null ? i : e;
+        this.onCellChange(this.index, (l = (n = o == null ? void 0 : o.target) == null ? void 0 : n.value) != null ? l : "", o);
+      }
+    },
+    handleFocus(e) {
+      var n, l;
+      const t = (n = e.event) != null ? n : e, i = (l = this.$refs.textBoxRef) == null ? void 0 : l._input;
+      i && i.select(), this.onCellFocus && this.onCellFocus(this.index, t);
+    },
+    handleBlur(e) {
+      var i;
+      const t = (i = e.event) != null ? i : e;
+      this.onCellBlur && this.onCellBlur(this.index, t);
+    },
+    handleKeyDown(e) {
+      this.onCellKeyDown && this.onCellKeyDown(this.index, e);
+    }
+  },
+  render() {
+    const t = d(this).toLanguageString(s, p[s]).replace("{index}", String(this.index + 1)).replace("{total}", String(this.totalLength)), i = {
+      autoComplete: "off",
+      type: this.type === "number" ? "text" : this.type,
+      ...this.inputAttributes,
+      // Protected attrs — cannot be overridden by user's inputAttributes:
+      maxLength: 1,
+      ...this.name && {
+        name: this.name
+      },
+      ...this.readOnly && {
+        readOnly: !0
+      },
+      ...this.valid === !1 && {
+        "aria-invalid": !0
+      }
+    };
+    return a(h, {
+      ref: "textBoxRef",
+      wrapperClass: u("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: i
+    }, null);
+  }
+});
+export {
+  C as OTPInputCell
+};

package/otpinput/OTPInputHandle.d.ts

@@ -0,0 +1,33 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * Represents the `ref` of the Kendo UI for Vue OTPInput component.
+ */
+export interface OTPInputHandle {
+    /**
+     * The root wrapper DOM element.
+     */
+    element: HTMLDivElement | null;
+    /**
+     * The current string value of the OTPInput.
+     * Unfilled cells are represented with a space (`' '`).
+     */
+    value: string;
+    /**
+     * Focuses the input cell at `index`.
+     * When `index` is omitted, focuses the first unfilled cell or
+     * the last cell if all are filled.
+     *
+     * @param index - Zero-based index of the cell to focus.
+     */
+    focus: (index?: number) => void;
+    /**
+     * Programmatically blurs the OTPInput.
+     */
+    blur: () => void;
+}

package/otpinput/OTPInputSeparator.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @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';
+import { OTPSeparatorIcon } from './interfaces/OTPSeparatorIcon';
+/** @hidden */
+export interface OTPInputSeparatorProps {
+    separator: string | OTPSeparatorIcon;
+}
+/** @hidden */
+export declare const OTPInputSeparator: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    separator: {
+        type: PropType<string | OTPSeparatorIcon>;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    separator: {
+        type: PropType<string | OTPSeparatorIcon>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/otpinput/OTPInputSeparator.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 t=require("vue"),r=require("@progress/kendo-vue-common"),a=t.defineComponent({name:"OTPInputSeparator",props:{separator:{type:[String,Object],required:!0}},render(){let e;return typeof this.separator=="string"?e=this.separator:this.separator.type==="svgIcon"?e=t.createVNode(r.Icon,{icon:this.separator.value},null):this.separator.type==="iconClass"?e=t.createVNode("span",{class:this.separator.value},null):e=t.createVNode(r.Icon,{name:this.separator.value},null),t.createVNode("div",{class:"k-otp-separator"},[e])}});exports.OTPInputSeparator=a;

package/otpinput/OTPInputSeparator.mjs

@@ -0,0 +1,33 @@
+/**
+ * @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 a, createVNode as t } from "vue";
+import { Icon as r } from "@progress/kendo-vue-common";
+const p = /* @__PURE__ */ a({
+  name: "OTPInputSeparator",
+  props: {
+    separator: {
+      type: [String, Object],
+      required: !0
+    }
+  },
+  render() {
+    let e;
+    return typeof this.separator == "string" ? e = this.separator : this.separator.type === "svgIcon" ? e = t(r, {
+      icon: this.separator.value
+    }, null) : this.separator.type === "iconClass" ? e = t("span", {
+      class: this.separator.value
+    }, null) : e = t(r, {
+      name: this.separator.value
+    }, null), t("div", {
+      class: "k-otp-separator"
+    }, [e]);
+  }
+});
+export {
+  p as OTPInputSeparator
+};

package/otpinput/interfaces/OTPInputBlurEvent.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { OTPInputHandle } from '../OTPInputHandle';
+/**
+ * Event object fired by `OTPInput` `blur` event.
+ */
+export interface OTPInputBlurEvent {
+    /**
+     * The component that originated the event.
+     */
+    target: OTPInputHandle;
+    /**
+     * The underlying native blur event.
+     */
+    nativeEvent: FocusEvent;
+    /**
+     * The underlying synthetic event.
+     */
+    syntheticEvent: FocusEvent;
+}

package/otpinput/interfaces/OTPInputChangeEvent.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { OTPInputHandle } from '../OTPInputHandle';
+/**
+ * Event object fired by `OTPInput` `change` event.
+ */
+export interface OTPInputChangeEvent {
+    /**
+     * The component that originated the event.
+     */
+    target: OTPInputHandle;
+    /**
+     * The native DOM event.
+     */
+    nativeEvent: Event;
+    /**
+     * The synthetic Vue event.
+     */
+    syntheticEvent: Event;
+    /**
+     * The new full string value of the OTPInput after the change.
+     * Unfilled cells are represented as a space (`' '`).
+     */
+    value: string;
+    /**
+     * The component instance that originated the event.
+     */
+    component?: any;
+}

package/otpinput/interfaces/OTPInputFocusEvent.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { OTPInputHandle } from '../OTPInputHandle';
+/**
+ * Event object fired by `OTPInput` `focus` event.
+ */
+export interface OTPInputFocusEvent {
+    /**
+     * The component that originated the event.
+     */
+    target: OTPInputHandle;
+    /**
+     * The underlying native focus event.
+     */
+    nativeEvent: FocusEvent;
+    /**
+     * The underlying synthetic event.
+     */
+    syntheticEvent: FocusEvent;
+    /**
+     * The zero-based index of the cell that received focus.
+     */
+    cellIndex: number;
+}

package/otpinput/interfaces/OTPInputProps.d.ts

@@ -0,0 +1,316 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { OTPSeparatorIcon } from './OTPSeparatorIcon';
+import { OTPInputChangeEvent } from './OTPInputChangeEvent';
+import { OTPInputFocusEvent } from './OTPInputFocusEvent';
+import { OTPInputBlurEvent } from './OTPInputBlurEvent';
+/**
+ * The input `type` options for the OTPInput.
+ */
+export type OTPInputType = 'text' | 'password' | 'number';
+/**
+ * Represents the props for the Kendo UI for Vue
+ * [OTPInput](https://www.telerik.com/kendo-vue-ui/components/inputs/otpinput/) component.
+ */
+export interface OTPInputProps {
+    /**
+     * Sets the current value of the OTPInput (controlled mode).
+     * Unfilled input cells are represented with a space (`' '`).
+     *
+     * @example
+     * ```vue
+     * <OTPInput :value="'12 4'" :length="4" @change="handleChange" />
+     * ```
+     */
+    value?: string;
+    /**
+     * Sets the current value of the OTPInput via `v-model` (two-way binding).
+     * Prefer using `v-model` over `value` + `@change` for simpler two-way binding.
+     *
+     * @example
+     * ```vue
+     * <OTPInput v-model="otpCode" :length="6" />
+     * ```
+     */
+    modelValue?: string;
+    /**
+     * Sets the initial value of the OTPInput (uncontrolled mode).
+     * Once set, subsequent updates are managed internally.
+     *
+     * @example
+     * ```vue
+     * <OTPInput defaultValue="12" :length="6" />
+     * ```
+     */
+    defaultValue?: string;
+    /**
+     * Sets the total number of individual input cells.
+     *
+     * @default 4
+     *
+     * @example
+     * ```vue
+     * <OTPInput :length="6" />
+     * ```
+     */
+    length?: number;
+    /**
+     * Sets the length of each group of input cells.
+     *
+     * - Provide a `number` to give all groups the same length.
+     * - Provide a `number[]` to assign different lengths to each group.
+     *
+     * The sum of all group lengths must equal `length`.
+     *
+     * @example
+     * ```vue
+     * <OTPInput :length="6" :groupLength="3" separator="-" />
+     * <OTPInput :length="12" :groupLength="[4, 4, 4]" separator="-" />
+     * ```
+     */
+    groupLength?: number | number[];
+    /**
+     * Sets the separator rendered between groups of input cells.
+     * Only effective when `groupLength` is set.
+     *
+     * - Provide a `string` to render a text separator.
+     * - Provide an `OTPSeparatorIcon` to render an icon separator.
+     *
+     * @example
+     * ```vue
+     * <OTPInput :length="6" :groupLength="3" separator="-" />
+     * <OTPInput :length="6" :groupLength="3" :separator="{ type: 'svgIcon', value: minusIcon }" />
+     * ```
+     */
+    separator?: string | OTPSeparatorIcon;
+    /**
+     * Sets the input type.
+     *
+     * @default 'text'
+     *
+     * @example
+     * ```vue
+     * <OTPInput type="number" :length="6" />
+     * ```
+     */
+    type?: OTPInputType;
+    /**
+     * Sets a placeholder character shown in each empty input cell.
+     *
+     * @example
+     * ```vue
+     * <OTPInput placeholder="·" :length="6" />
+     * ```
+     */
+    placeholder?: string;
+    /**
+     * When `true`, renders the input cells as separate boxes with spacing
+     * between them. When `false`, renders them as adjacent (joined) cells.
+     *
+     * @default true
+     *
+     * @example
+     * ```vue
+     * <OTPInput :spacing="false" :length="6" />
+     * ```
+     */
+    spacing?: boolean;
+    /**
+     * When `true`, disables the OTPInput so that it cannot be interacted
+     * with and receives the `k-disabled` CSS class.
+     *
+     * @default false
+     *
+     * @example
+     * ```vue
+     * <OTPInput :disabled="true" :length="6" />
+     * ```
+     */
+    disabled?: boolean;
+    /**
+     * When `true`, sets the OTPInput to read-only mode.
+     *
+     * @default false
+     *
+     * @example
+     * ```vue
+     * <OTPInput :readOnly="true" value="123456" :length="6" />
+     * ```
+     */
+    readOnly?: boolean;
+    /**
+     * Sets additional HTML attributes on every inner `<input>` element.
+     * Attributes that are required for the component to work correctly cannot be overridden.
+     *
+     * @example
+     * ```vue
+     * <OTPInput :inputAttributes="{ autoComplete: 'off' }" :length="6" />
+     * ```
+     */
+    inputAttributes?: Object;
+    /**
+     * Sets the `name` attribute used when the component participates in an
+     * HTML form. A hidden `<input>` with this name and the current value
+     * is rendered for native form submission.
+     *
+     * @example
+     * ```vue
+     * <OTPInput name="verificationCode" :length="6" />
+     * ```
+     */
+    name?: string;
+    /**
+     * Marks the field as required for HTML5 constraint validation.
+     *
+     * @default false
+     *
+     * @example
+     * ```vue
+     * <OTPInput :required="true" :length="6" />
+     * ```
+     */
+    required?: boolean;
+    /**
+     * When `false`, renders the component in an invalid visual state.
+     *
+     * @example
+     * ```vue
+     * <OTPInput :valid="false" :length="6" />
+     * ```
+     */
+    valid?: boolean;
+    /**
+     * Configures the `size` of the component.
+     *
+     * The available options are:
+     * - `'small'`
+     * - `'medium'`
+     * - `'large'`
+     *
+     * @example
+     * ```vue
+     * <OTPInput size="large" :length="6" />
+     * ```
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Configures the `fillMode` of the component.
+     *
+     * The available options are:
+     * - `'solid'`
+     * - `'flat'`
+     * - `'outline'`
+     *
+     * @example
+     * ```vue
+     * <OTPInput fillMode="outline" :length="6" />
+     * ```
+     */
+    fillMode?: 'solid' | 'flat' | 'outline';
+    /**
+     * Configures the `rounded` property of the component.
+     *
+     * The available options are:
+     * - `'small'`
+     * - `'medium'`
+     * - `'large'`
+     * - `'full'`
+     * - `'none'`
+     *
+     * @example
+     * ```vue
+     * <OTPInput rounded="full" :length="6" />
+     * ```
+     */
+    rounded?: 'small' | 'medium' | 'large' | 'full' | 'none';
+    /**
+     * Fires when the user changes the value of any input cell.
+     *
+     * @example
+     * ```vue
+     * <OTPInput @change="(e) => console.log(e.value)" :length="6" />
+     * ```
+     */
+    onChange?: (event: OTPInputChangeEvent) => void;
+    /**
+     * Fires when any input cell receives focus.
+     *
+     * @example
+     * ```vue
+     * <OTPInput @focus="(e) => console.log('focused cell index', e.cellIndex)" :length="6" />
+     * ```
+     */
+    onFocus?: (event: OTPInputFocusEvent) => void;
+    /**
+     * Fires when the entire OTPInput loses focus (not on every
+     * inter-cell navigation).
+     *
+     * @example
+     * ```vue
+     * <OTPInput @blur="(e) => console.log('blurred')" :length="6" />
+     * ```
+     */
+    onBlur?: (event: OTPInputBlurEvent) => void;
+    /**
+     * Sets the `aria-label` attribute on the OTPInput wrapper element.
+     *
+     * @example
+     * ```vue
+     * <OTPInput ariaLabel="Enter your 6-digit code" :length="6" />
+     * ```
+     */
+    ariaLabel?: string;
+    /**
+     * Sets the `aria-labelledby` attribute on the OTPInput wrapper element.
+     */
+    ariaLabelledBy?: string;
+    /**
+     * Sets the `aria-describedby` attribute on the OTPInput wrapper element.
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Sets the `id` attribute on the OTPInput wrapper element.
+     *
+     * @example
+     * ```vue
+     * <OTPInput id="otp-code" :length="6" />
+     * ```
+     */
+    id?: string;
+    /**
+     * Sets the text direction of the OTPInput.
+     *
+     * The available options are:
+     * - `'ltr'` — left-to-right (default)
+     * - `'rtl'` — right-to-left
+     *
+     * When set to `'rtl'`, the Arrow Left/Right keyboard navigation is reversed accordingly.
+     *
+     * @example
+     * ```vue
+     * <OTPInput dir="rtl" />
+     * ```
+     */
+    dir?: 'ltr' | 'rtl';
+    /**
+     * @hidden
+     */
+    touched?: boolean;
+    /**
+     * @hidden
+     */
+    visited?: boolean;
+    /**
+     * @hidden
+     */
+    modified?: boolean;
+    /**
+     * @hidden
+     */
+    validationMessage?: string;
+}