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

package/index.d.mts

@@ -79,3 +79,10 @@ export * from './signature/interfaces/main.js';
 export * from './rating/Rating.js';
 export * from './rating/interfaces/RatingFocusEvent.js';
 export * from './rating/interfaces/RatingBlurEvent.js';
+export * from './otpinput/OTPInput.js';
+export * from './otpinput/OTPInputHandle.js';
+export * from './otpinput/interfaces/OTPInputProps.js';
+export * from './otpinput/interfaces/OTPInputChangeEvent.js';
+export * from './otpinput/interfaces/OTPInputFocusEvent.js';
+export * from './otpinput/interfaces/OTPInputBlurEvent.js';
+export * from './otpinput/interfaces/OTPSeparatorIcon.js';

package/index.d.ts

@@ -79,3 +79,10 @@ export * from './signature/interfaces/main';
 export * from './rating/Rating';
 export * from './rating/interfaces/RatingFocusEvent';
 export * from './rating/interfaces/RatingBlurEvent';
+export * from './otpinput/OTPInput';
+export * from './otpinput/OTPInputHandle';
+export * from './otpinput/interfaces/OTPInputProps';
+export * from './otpinput/interfaces/OTPInputChangeEvent';
+export * from './otpinput/interfaces/OTPInputFocusEvent';
+export * from './otpinput/interfaces/OTPInputBlurEvent';
+export * from './otpinput/interfaces/OTPSeparatorIcon';

package/index.js

@@ -5,4 +5,4 @@
  * 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;
+"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"),u=require("./input-separator/InputSeparator.js"),a=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"),T=require("./range-slider/RangeSlider.js"),d=require("./checkbox/Checkbox.js"),q=require("./radiobutton/RadioGroup.js"),S=require("./radiobutton/RadioButton.js"),R=require("./textarea/TextArea.js"),p=require("./textarea/interfaces/TextAreaResize.js"),B=require("./signature/Signature.js"),C=require("./rating/Rating.js"),I=require("./otpinput/OTPInput.js");exports.ColorGradient=r.ColorGradient;exports.ColorPalette=t.ColorPalette;exports.ColorPicker=o.ColorPicker;exports.FlatColorPicker=i.FlatColorPicker;exports.Switch=n.Switch;exports.InputSeparator=u.InputSeparator;exports.Input=a.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=T.RangeSlider;exports.Checkbox=d.Checkbox;exports.RadioGroup=q.RadioGroup;exports.RadioButton=S.RadioButton;exports.TextArea=R.TextArea;exports.TextAreaResizeEnum=p.TextAreaResizeEnum;exports.Signature=B.Signature;exports.Rating=C.Rating;exports.OTPInput=I.OTPInput;

package/index.mjs

@@ -11,21 +11,22 @@ 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 { InputSeparator as u } 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 { MaskedTextBox as k } from "./maskedtextbox/MaskedTextBox.mjs";
+import { Slider as E } from "./slider/Slider.mjs";
+import { SLIDER_LABEL_ATTRIBUTE as P, SliderLabel as g } 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";
+import { TextAreaResizeEnum as O } from "./textarea/interfaces/TextAreaResize.mjs";
+import { Signature as j } from "./signature/Signature.mjs";
+import { Rating as v } from "./rating/Rating.mjs";
+import { OTPInput as H } from "./otpinput/OTPInput.mjs";
 export {
   G as Checkbox,
   t as ColorGradient,
@@ -33,19 +34,20 @@ export {
   f as ColorPicker,
   i as FlatColorPicker,
   R as Input,
-  d as InputSeparator,
-  A as MaskedTextBox,
+  u as InputSeparator,
+  k as MaskedTextBox,
   C as NumericTextBox,
+  H as OTPInput,
   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,
+  v as Rating,
+  P as SLIDER_LABEL_ATTRIBUTE,
+  j as Signature,
+  E as Slider,
+  g as SliderLabel,
   n as Switch,
   M as TextArea,
-  U as TextAreaResizeEnum,
+  O as TextAreaResizeEnum,
   B as TextBox
 };

package/messages/main.d.ts

@@ -165,6 +165,14 @@ export declare const signatureMaximize = "signature.maximize";
  * @hidden
  */
 export declare const signatureMinimize = "signature.minimize";
+/**
+ * @hidden
+ */
+export declare const otpInputAriaLabel = "otpInput.ariaLabel";
+/**
+ * @hidden
+ */
+export declare const otpInputCellAriaLabel = "otpInput.cellAriaLabel";
 /**
  * @hidden
  */
@@ -209,4 +217,6 @@ export declare const messages: {
     "signature.clear": string;
     "signature.maximize": string;
     "signature.minimize": string;
+    "otpInput.ariaLabel": string;
+    "otpInput.cellAriaLabel": string;
 };

package/messages/main.js

@@ -5,5 +5,5 @@
  * 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="numerictextbox.increment",o="numerictextbox.decrement",r="slider.increment",t="slider.decrement",a="slider.dragTitle",l="colorGradient.dragHandle",n="colorGradient.r",i="colorGradient.g",c="colorGradient.b",d="colorGradient.a",s="colorGradient.hex",G="colorGradient.hexLabel",u="colorGradient.inputColorButton",b="colorGradient.rLabel",g="colorGradient.gLabel",p="colorGradient.bLabel",A="colorGradient.aLabel",C="colorGradient.contrastRatio",L="colorGradient.colorGradientAALevel",P="colorGradient.colorGradientAAALevel",B="colorGradient.colorGradientPass",h="colorGradient.colorGradientFail",k="colorGradient.hueSliderLabel",x="colorGradient.alphaSliderLabel",m="flatColorPicker.cancelBtn",f="flatColorPicker.applyBtn",v="flatColorPicker.gradientBtn",V="flatColorPicker.paletterBtn",D="flatColorPicker.clearBtn",T="colorPicker.adaptiveTitle",w="checkbox.validation",H="checkbox.optionalText",I="radioButton.validation",S="switch.validation",y="colorPicker.dropdownButtonAriaLabel",z="colorGradient.toggleInputsButton",R="rating.ariaLabel",M="signature.clear",F="signature.maximize",O="signature.minimize",j={[e]:"Increase value",[o]:"Decrease value",[r]:"Increase",[t]:"Decrease",[a]:"Drag",[l]:`Color well with two-dimensional slider for selecting
-     saturation and lightness. Selected color is`,[u]:"Change the color input",[n]:"r",[i]:"g",[c]:"b",[d]:"a",[b]:"red chanel",[g]:"green chanel",[p]:"blue chanel",[A]:"alpha chanel",[s]:"hex",[G]:"HEX",[C]:"Contrast ratio",[L]:"AA",[P]:"AAA",[B]:"Pass",[h]:"Fail",[k]:"Hue slider",[x]:"Alpha slider",[z]:"Toggle colorgradient inputs",[m]:"Cancel",[f]:"Apply",[v]:"Gradient",[V]:"Palette",[D]:"Clear",[T]:"Choose color",[w]:"Please check this box if you want to proceed!",[H]:"(Optional)",[I]:"Please select option if you want to proceed!",[S]:"Please turn on if you want to proceed!",[y]:"Select",[R]:"Rating",[M]:"Clear",[F]:"Maximize",[O]:"Minimize"};exports.checkboxOptionalText=H;exports.checkboxValidation=w;exports.colorGradientA=d;exports.colorGradientAAALevel=P;exports.colorGradientAALevel=L;exports.colorGradientALabel=A;exports.colorGradientAlphaSliderLabel=x;exports.colorGradientB=c;exports.colorGradientBLabel=p;exports.colorGradientContrastRatio=C;exports.colorGradientDragHandle=l;exports.colorGradientFail=h;exports.colorGradientG=i;exports.colorGradientGLabel=g;exports.colorGradientHex=s;exports.colorGradientHexLabel=G;exports.colorGradientHueSliderLabel=k;exports.colorGradientInputColorButton=u;exports.colorGradientPass=B;exports.colorGradientR=n;exports.colorGradientRLabel=b;exports.colorGradientToggleInputsButton=z;exports.colorPickerAdaptiveTitle=T;exports.colorPickerDropdownButtonAriaLabel=y;exports.flatColorPickerApplyBtn=f;exports.flatColorPickerCancelBtn=m;exports.flatColorPickerClearBtn=D;exports.flatColorPickerGradientBtn=v;exports.flatColorPickerPaletteBtn=V;exports.messages=j;exports.numericDecreaseValue=o;exports.numericIncreaseValue=e;exports.radioButtonValidation=I;exports.ratingAriaLabel=R;exports.signatureClear=M;exports.signatureMaximize=F;exports.signatureMinimize=O;exports.sliderDecreaseValue=t;exports.sliderDragTitle=a;exports.sliderIncreaseValue=r;exports.switchValidation=S;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e="numerictextbox.increment",o="numerictextbox.decrement",r="slider.increment",t="slider.decrement",a="slider.dragTitle",l="colorGradient.dragHandle",n="colorGradient.r",i="colorGradient.g",c="colorGradient.b",d="colorGradient.a",s="colorGradient.hex",G="colorGradient.hexLabel",u="colorGradient.inputColorButton",p="colorGradient.rLabel",b="colorGradient.gLabel",g="colorGradient.bLabel",A="colorGradient.aLabel",L="colorGradient.contrastRatio",C="colorGradient.colorGradientAALevel",P="colorGradient.colorGradientAAALevel",B="colorGradient.colorGradientPass",h="colorGradient.colorGradientFail",k="colorGradient.hueSliderLabel",x="colorGradient.alphaSliderLabel",m="flatColorPicker.cancelBtn",f="flatColorPicker.applyBtn",I="flatColorPicker.gradientBtn",v="flatColorPicker.paletterBtn",D="flatColorPicker.clearBtn",V="colorPicker.adaptiveTitle",w="checkbox.validation",T="checkbox.optionalText",H="radioButton.validation",S="switch.validation",y="colorPicker.dropdownButtonAriaLabel",z="colorGradient.toggleInputsButton",R="rating.ariaLabel",M="signature.clear",O="signature.maximize",F="signature.minimize",j="otpInput.ariaLabel",E="otpInput.cellAriaLabel",X={[e]:"Increase value",[o]:"Decrease value",[r]:"Increase",[t]:"Decrease",[a]:"Drag",[l]:`Color well with two-dimensional slider for selecting
+     saturation and lightness. Selected color is`,[u]:"Change the color input",[n]:"r",[i]:"g",[c]:"b",[d]:"a",[p]:"red chanel",[b]:"green chanel",[g]:"blue chanel",[A]:"alpha chanel",[s]:"hex",[G]:"HEX",[L]:"Contrast ratio",[C]:"AA",[P]:"AAA",[B]:"Pass",[h]:"Fail",[k]:"Hue slider",[x]:"Alpha slider",[z]:"Toggle colorgradient inputs",[m]:"Cancel",[f]:"Apply",[I]:"Gradient",[v]:"Palette",[D]:"Clear",[V]:"Choose color",[w]:"Please check this box if you want to proceed!",[T]:"(Optional)",[H]:"Please select option if you want to proceed!",[S]:"Please turn on if you want to proceed!",[y]:"Select",[R]:"Rating",[M]:"Clear",[O]:"Maximize",[F]:"Minimize",[j]:"One-time password",[E]:"Digit {index} of {total}"};exports.checkboxOptionalText=T;exports.checkboxValidation=w;exports.colorGradientA=d;exports.colorGradientAAALevel=P;exports.colorGradientAALevel=C;exports.colorGradientALabel=A;exports.colorGradientAlphaSliderLabel=x;exports.colorGradientB=c;exports.colorGradientBLabel=g;exports.colorGradientContrastRatio=L;exports.colorGradientDragHandle=l;exports.colorGradientFail=h;exports.colorGradientG=i;exports.colorGradientGLabel=b;exports.colorGradientHex=s;exports.colorGradientHexLabel=G;exports.colorGradientHueSliderLabel=k;exports.colorGradientInputColorButton=u;exports.colorGradientPass=B;exports.colorGradientR=n;exports.colorGradientRLabel=p;exports.colorGradientToggleInputsButton=z;exports.colorPickerAdaptiveTitle=V;exports.colorPickerDropdownButtonAriaLabel=y;exports.flatColorPickerApplyBtn=f;exports.flatColorPickerCancelBtn=m;exports.flatColorPickerClearBtn=D;exports.flatColorPickerGradientBtn=I;exports.flatColorPickerPaletteBtn=v;exports.messages=X;exports.numericDecreaseValue=o;exports.numericIncreaseValue=e;exports.otpInputAriaLabel=j;exports.otpInputCellAriaLabel=E;exports.radioButtonValidation=H;exports.ratingAriaLabel=R;exports.signatureClear=M;exports.signatureMaximize=O;exports.signatureMinimize=F;exports.sliderDecreaseValue=t;exports.sliderDragTitle=a;exports.sliderIncreaseValue=r;exports.switchValidation=S;

package/messages/main.mjs

@@ -5,7 +5,7 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-const e = "numerictextbox.increment", o = "numerictextbox.decrement", t = "slider.increment", r = "slider.decrement", a = "slider.dragTitle", n = "colorGradient.dragHandle", l = "colorGradient.r", i = "colorGradient.g", c = "colorGradient.b", s = "colorGradient.a", d = "colorGradient.hex", G = "colorGradient.hexLabel", u = "colorGradient.inputColorButton", g = "colorGradient.rLabel", b = "colorGradient.gLabel", p = "colorGradient.bLabel", h = "colorGradient.aLabel", A = "colorGradient.contrastRatio", C = "colorGradient.colorGradientAALevel", L = "colorGradient.colorGradientAAALevel", P = "colorGradient.colorGradientPass", x = "colorGradient.colorGradientFail", B = "colorGradient.hueSliderLabel", k = "colorGradient.alphaSliderLabel", m = "flatColorPicker.cancelBtn", f = "flatColorPicker.applyBtn", v = "flatColorPicker.gradientBtn", w = "flatColorPicker.paletterBtn", D = "flatColorPicker.clearBtn", T = "colorPicker.adaptiveTitle", H = "checkbox.validation", I = "checkbox.optionalText", V = "radioButton.validation", y = "switch.validation", z = "colorPicker.dropdownButtonAriaLabel", S = "colorGradient.toggleInputsButton", R = "rating.ariaLabel", M = "signature.clear", F = "signature.maximize", O = "signature.minimize", E = {
+const e = "numerictextbox.increment", o = "numerictextbox.decrement", t = "slider.increment", r = "slider.decrement", a = "slider.dragTitle", n = "colorGradient.dragHandle", l = "colorGradient.r", i = "colorGradient.g", c = "colorGradient.b", s = "colorGradient.a", d = "colorGradient.hex", G = "colorGradient.hexLabel", u = "colorGradient.inputColorButton", p = "colorGradient.rLabel", b = "colorGradient.gLabel", g = "colorGradient.bLabel", A = "colorGradient.aLabel", L = "colorGradient.contrastRatio", h = "colorGradient.colorGradientAALevel", C = "colorGradient.colorGradientAAALevel", P = "colorGradient.colorGradientPass", x = "colorGradient.colorGradientFail", B = "colorGradient.hueSliderLabel", k = "colorGradient.alphaSliderLabel", m = "flatColorPicker.cancelBtn", f = "flatColorPicker.applyBtn", v = "flatColorPicker.gradientBtn", w = "flatColorPicker.paletterBtn", I = "flatColorPicker.clearBtn", D = "colorPicker.adaptiveTitle", T = "checkbox.validation", H = "checkbox.optionalText", V = "radioButton.validation", y = "switch.validation", z = "colorPicker.dropdownButtonAriaLabel", S = "colorGradient.toggleInputsButton", R = "rating.ariaLabel", M = "signature.clear", F = "signature.maximize", O = "signature.minimize", E = "otpInput.ariaLabel", X = "otpInput.cellAriaLabel", j = {
   [e]: "Increase value",
   [o]: "Decrease value",
   [t]: "Increase",
@@ -18,15 +18,15 @@ const e = "numerictextbox.increment", o = "numerictextbox.decrement", t = "slide
   [i]: "g",
   [c]: "b",
   [s]: "a",
-  [g]: "red chanel",
+  [p]: "red chanel",
   [b]: "green chanel",
-  [p]: "blue chanel",
-  [h]: "alpha chanel",
+  [g]: "blue chanel",
+  [A]: "alpha chanel",
   [d]: "hex",
   [G]: "HEX",
-  [A]: "Contrast ratio",
-  [C]: "AA",
-  [L]: "AAA",
+  [L]: "Contrast ratio",
+  [h]: "AA",
+  [C]: "AAA",
   [P]: "Pass",
   [x]: "Fail",
   [B]: "Hue slider",
@@ -36,29 +36,31 @@ const e = "numerictextbox.increment", o = "numerictextbox.decrement", t = "slide
   [f]: "Apply",
   [v]: "Gradient",
   [w]: "Palette",
-  [D]: "Clear",
-  [T]: "Choose color",
-  [H]: "Please check this box if you want to proceed!",
-  [I]: "(Optional)",
+  [I]: "Clear",
+  [D]: "Choose color",
+  [T]: "Please check this box if you want to proceed!",
+  [H]: "(Optional)",
   [V]: "Please select option if you want to proceed!",
   [y]: "Please turn on if you want to proceed!",
   [z]: "Select",
   [R]: "Rating",
   [M]: "Clear",
   [F]: "Maximize",
-  [O]: "Minimize"
+  [O]: "Minimize",
+  [E]: "One-time password",
+  [X]: "Digit {index} of {total}"
 };
 export {
-  I as checkboxOptionalText,
-  H as checkboxValidation,
+  H as checkboxOptionalText,
+  T as checkboxValidation,
   s as colorGradientA,
-  L as colorGradientAAALevel,
-  C as colorGradientAALevel,
-  h as colorGradientALabel,
+  C as colorGradientAAALevel,
+  h as colorGradientAALevel,
+  A as colorGradientALabel,
   k as colorGradientAlphaSliderLabel,
   c as colorGradientB,
-  p as colorGradientBLabel,
-  A as colorGradientContrastRatio,
+  g as colorGradientBLabel,
+  L as colorGradientContrastRatio,
   n as colorGradientDragHandle,
   x as colorGradientFail,
   i as colorGradientG,
@@ -69,18 +71,20 @@ export {
   u as colorGradientInputColorButton,
   P as colorGradientPass,
   l as colorGradientR,
-  g as colorGradientRLabel,
+  p as colorGradientRLabel,
   S as colorGradientToggleInputsButton,
-  T as colorPickerAdaptiveTitle,
+  D as colorPickerAdaptiveTitle,
   z as colorPickerDropdownButtonAriaLabel,
   f as flatColorPickerApplyBtn,
   m as flatColorPickerCancelBtn,
-  D as flatColorPickerClearBtn,
+  I as flatColorPickerClearBtn,
   v as flatColorPickerGradientBtn,
   w as flatColorPickerPaletteBtn,
-  E as messages,
+  j as messages,
   o as numericDecreaseValue,
   e as numericIncreaseValue,
+  E as otpInputAriaLabel,
+  X as otpInputCellAriaLabel,
   V as radioButtonValidation,
   R as ratingAriaLabel,
   M as signatureClear,

package/otpinput/OTPInput.d.ts

@@ -0,0 +1,256 @@
+/**
+ * @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 { OTPInputHandle } from './OTPInputHandle';
+import { OTPInputChangeEvent } from './interfaces/OTPInputChangeEvent';
+import { OTPInputFocusEvent } from './interfaces/OTPInputFocusEvent';
+import { OTPInputBlurEvent } from './interfaces/OTPInputBlurEvent';
+/**
+ * Represents the Kendo UI for Vue [OTPInput](https://www.telerik.com/kendo-vue-ui/components/inputs/otpinput/) component.
+ */
+declare const OTPInput: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    value: {
+        type: PropType<string>;
+    };
+    modelValue: {
+        type: PropType<string>;
+    };
+    defaultValue: {
+        type: PropType<string>;
+    };
+    length: {
+        type: PropType<number>;
+        default: number;
+    };
+    groupLength: {
+        type: PropType<number | number[]>;
+    };
+    separator: {
+        type: PropType<string | import('..').OTPSeparatorIcon>;
+    };
+    type: {
+        type: PropType<import('./interfaces/OTPInputProps').OTPInputType>;
+        default: string;
+    };
+    placeholder: {
+        type: PropType<string>;
+    };
+    spacing: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    disabled: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    readOnly: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    inputAttributes: {
+        type: PropType<Object>;
+    };
+    name: {
+        type: PropType<string>;
+    };
+    required: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    valid: {
+        type: PropType<boolean>;
+        default: any;
+    };
+    size: {
+        type: PropType<"small" | "medium" | "large">;
+    };
+    fillMode: {
+        type: PropType<"flat" | "solid" | "outline">;
+    };
+    rounded: {
+        type: PropType<"small" | "medium" | "large" | "full" | "none">;
+    };
+    onChange: {
+        type: PropType<(event: OTPInputChangeEvent) => void>;
+    };
+    onFocus: {
+        type: PropType<(event: OTPInputFocusEvent) => void>;
+    };
+    onBlur: {
+        type: PropType<(event: OTPInputBlurEvent) => void>;
+    };
+    ariaLabel: {
+        type: PropType<string>;
+    };
+    ariaLabelledBy: {
+        type: PropType<string>;
+    };
+    ariaDescribedBy: {
+        type: PropType<string>;
+    };
+    id: {
+        type: PropType<string>;
+    };
+    dir: {
+        type: PropType<"rtl" | "ltr">;
+    };
+    touched: {
+        type: PropType<boolean>;
+    };
+    visited: {
+        type: PropType<boolean>;
+    };
+    modified: {
+        type: PropType<boolean>;
+    };
+    validationMessage: {
+        type: PropType<string>;
+    };
+}>, {}, {
+    stateValue: string;
+    lastCommittedValue: string;
+    invalidCellIndex: number;
+    invalidTimer: NodeJS.Timeout;
+}, {
+    currentValue(): string;
+    isControlled(): boolean;
+}, {
+    focus(index?: number): void;
+    blur(): void;
+    _eventTarget(): OTPInputHandle;
+    focusCell(index: number): void;
+    flashInvalid(index: number): void;
+    updateValue(newValue: string, nativeEvent: Event): void;
+    handleCellChange(index: number, _char: string, event: Event): void;
+    handlePrintableOnFilledCell(index: number, key: string, event: KeyboardEvent): void;
+    handleCellKeyDown(index: number, event: KeyboardEvent): void;
+    handleCellFocus(index: number, event: FocusEvent): void;
+    handleCellBlur(_index: number, _event: FocusEvent): void;
+    handleWrapperFocusOut(event: FocusEvent): void;
+    handlePaste(event: ClipboardEvent): void;
+    buildContent(): any[];
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    change: (event: OTPInputChangeEvent) => true;
+    changemodel: (value: string) => true;
+    'update:modelValue': (value: string) => true;
+    focus: (event: OTPInputFocusEvent) => true;
+    blur: (event: OTPInputBlurEvent) => true;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    value: {
+        type: PropType<string>;
+    };
+    modelValue: {
+        type: PropType<string>;
+    };
+    defaultValue: {
+        type: PropType<string>;
+    };
+    length: {
+        type: PropType<number>;
+        default: number;
+    };
+    groupLength: {
+        type: PropType<number | number[]>;
+    };
+    separator: {
+        type: PropType<string | import('..').OTPSeparatorIcon>;
+    };
+    type: {
+        type: PropType<import('./interfaces/OTPInputProps').OTPInputType>;
+        default: string;
+    };
+    placeholder: {
+        type: PropType<string>;
+    };
+    spacing: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    disabled: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    readOnly: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    inputAttributes: {
+        type: PropType<Object>;
+    };
+    name: {
+        type: PropType<string>;
+    };
+    required: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    valid: {
+        type: PropType<boolean>;
+        default: any;
+    };
+    size: {
+        type: PropType<"small" | "medium" | "large">;
+    };
+    fillMode: {
+        type: PropType<"flat" | "solid" | "outline">;
+    };
+    rounded: {
+        type: PropType<"small" | "medium" | "large" | "full" | "none">;
+    };
+    onChange: {
+        type: PropType<(event: OTPInputChangeEvent) => void>;
+    };
+    onFocus: {
+        type: PropType<(event: OTPInputFocusEvent) => void>;
+    };
+    onBlur: {
+        type: PropType<(event: OTPInputBlurEvent) => void>;
+    };
+    ariaLabel: {
+        type: PropType<string>;
+    };
+    ariaLabelledBy: {
+        type: PropType<string>;
+    };
+    ariaDescribedBy: {
+        type: PropType<string>;
+    };
+    id: {
+        type: PropType<string>;
+    };
+    dir: {
+        type: PropType<"rtl" | "ltr">;
+    };
+    touched: {
+        type: PropType<boolean>;
+    };
+    visited: {
+        type: PropType<boolean>;
+    };
+    modified: {
+        type: PropType<boolean>;
+    };
+    validationMessage: {
+        type: PropType<string>;
+    };
+}>> & Readonly<{
+    onBlur?: (event: OTPInputBlurEvent) => any;
+    onChange?: (event: OTPInputChangeEvent) => any;
+    onFocus?: (event: OTPInputFocusEvent) => any;
+    onChangemodel?: (value: string) => any;
+    "onUpdate:modelValue"?: (value: string) => any;
+}>, {
+    length: number;
+    type: import('./interfaces/OTPInputProps').OTPInputType;
+    required: boolean;
+    disabled: boolean;
+    valid: boolean;
+    readOnly: boolean;
+    spacing: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export { OTPInput };

package/otpinput/OTPInput.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 d=require("vue"),p=require("@progress/kendo-vue-common"),v=require("@progress/kendo-vue-intl"),$=require("../package-metadata.js"),m=require("../messages/main.js"),V=require("./OTPInputCell.js"),T=require("./OTPInputSeparator.js"),h=4;function k(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 S=d.defineComponent({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(){p.validatePackage($.packageMetadata)},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=p.getRef(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=p.getRef(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,c=(i=this.currentValue[e])!=null?i:" ";n.length===1&&!a&&!r&&!o&&c!==" "&&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,c,g,y,b;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=(c=this.$props.length)!=null?c:h;let l=-1;for(let u=0;u<s;u++){const f=p.getRef(this,`cell_${u}`),C=(b=f==null?void 0:f._input)!=null?b:(y=(g=f==null?void 0:f.$refs)==null?void 0:g.textBoxRef)==null?void 0:y._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 d.createVNode(V.OTPInputCell,{ref:p.setRef(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?[d.createVNode("div",{key:"group",class:"k-input-group"},[a])]:a}const s=k(e,this.groupLength);let l=0;const i=[];return s.forEach((a,r)=>{const o=l;r>0&&this.separator!==void 0&&i.push(d.createVNode(T.OTPInputSeparator,{key:`sep-${o}`,separator:this.separator},null));const c=[];for(let g=0;g<a;g++)c.push(t(l++));this.spacing===!1?i.push(d.createVNode("div",{key:`group-${o}`,class:"k-input-group"},[c])):i.push(...c)}),i}},render(){const t=v.provideLocalizationService(this).toLanguageString(m.otpInputAriaLabel,m.messages[m.otpInputAriaLabel]),s=p.classNames("k-otp",{"k-disabled":this.disabled,"k-invalid":this.valid===!1,[`k-otp-${p.kendoThemeMaps.sizeMap[this.size]||this.size}`]:this.size},this.$props.className);return d.createVNode("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&&d.createVNode("input",{"aria-hidden":!0,type:"hidden",name:this.name,value:this.currentValue.replace(/ /g,"")},null),this.buildContent()])}});exports.OTPInput=S;