feat(input-otp): add new input-otp component

core/.eslintrc.js

@@ -26,7 +26,7 @@ module.exports = {
     "@typescript-eslint/no-unused-vars": [
       "warn",
       {
-        "varsIgnorePattern": "^h$"
+        "varsIgnorePattern": "^(h|Fragment)$"
       }
     ],
     "no-useless-catch": "off",

core/api.txt

@@ -780,6 +780,74 @@ ion-input,css-prop,--placeholder-font-weight,md
 ion-input,css-prop,--placeholder-opacity,ios
 ion-input,css-prop,--placeholder-opacity,md
 
+ion-input-otp,scoped
+ion-input-otp,prop,autocapitalize,string,'off',false,false
+ion-input-otp,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
+ion-input-otp,prop,disabled,boolean,false,false,true
+ion-input-otp,prop,fill,"outline" | "solid" | undefined,'outline',false,false
+ion-input-otp,prop,inputmode,"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url" | undefined,undefined,false,false
+ion-input-otp,prop,length,number,4,false,false
+ion-input-otp,prop,pattern,string | undefined,undefined,false,false
+ion-input-otp,prop,readonly,boolean,false,false,true
+ion-input-otp,prop,separators,number[] | string | undefined,undefined,false,false
+ion-input-otp,prop,shape,"rectangular" | "round" | "soft",'round',false,false
+ion-input-otp,prop,size,"large" | "medium" | "small",'medium',false,false
+ion-input-otp,prop,type,"number" | "text",'number',false,false
+ion-input-otp,prop,value,null | number | string | undefined,'',false,false
+ion-input-otp,method,reset,reset() => Promise<void>
+ion-input-otp,method,setFocus,setFocus(index?: number) => Promise<void>
+ion-input-otp,event,ionBlur,FocusEvent,true
+ion-input-otp,event,ionChange,InputOtpChangeEventDetail,true
+ion-input-otp,event,ionComplete,InputOtpCompleteEventDetail,true
+ion-input-otp,event,ionFocus,FocusEvent,true
+ion-input-otp,event,ionInput,InputOtpInputEventDetail,true
+ion-input-otp,css-prop,--background,ios
+ion-input-otp,css-prop,--background,md
+ion-input-otp,css-prop,--border-color,ios
+ion-input-otp,css-prop,--border-color,md
+ion-input-otp,css-prop,--border-radius,ios
+ion-input-otp,css-prop,--border-radius,md
+ion-input-otp,css-prop,--border-width,ios
+ion-input-otp,css-prop,--border-width,md
+ion-input-otp,css-prop,--color,ios
+ion-input-otp,css-prop,--color,md
+ion-input-otp,css-prop,--height,ios
+ion-input-otp,css-prop,--height,md
+ion-input-otp,css-prop,--highlight-color-focused,ios
+ion-input-otp,css-prop,--highlight-color-focused,md
+ion-input-otp,css-prop,--highlight-color-invalid,ios
+ion-input-otp,css-prop,--highlight-color-invalid,md
+ion-input-otp,css-prop,--highlight-color-valid,ios
+ion-input-otp,css-prop,--highlight-color-valid,md
+ion-input-otp,css-prop,--margin-bottom,ios
+ion-input-otp,css-prop,--margin-bottom,md
+ion-input-otp,css-prop,--margin-end,ios
+ion-input-otp,css-prop,--margin-end,md
+ion-input-otp,css-prop,--margin-start,ios
+ion-input-otp,css-prop,--margin-start,md
+ion-input-otp,css-prop,--margin-top,ios
+ion-input-otp,css-prop,--margin-top,md
+ion-input-otp,css-prop,--min-width,ios
+ion-input-otp,css-prop,--min-width,md
+ion-input-otp,css-prop,--padding-bottom,ios
+ion-input-otp,css-prop,--padding-bottom,md
+ion-input-otp,css-prop,--padding-end,ios
+ion-input-otp,css-prop,--padding-end,md
+ion-input-otp,css-prop,--padding-start,ios
+ion-input-otp,css-prop,--padding-start,md
+ion-input-otp,css-prop,--padding-top,ios
+ion-input-otp,css-prop,--padding-top,md
+ion-input-otp,css-prop,--separator-border-radius,ios
+ion-input-otp,css-prop,--separator-border-radius,md
+ion-input-otp,css-prop,--separator-color,ios
+ion-input-otp,css-prop,--separator-color,md
+ion-input-otp,css-prop,--separator-height,ios
+ion-input-otp,css-prop,--separator-height,md
+ion-input-otp,css-prop,--separator-width,ios
+ion-input-otp,css-prop,--separator-width,md
+ion-input-otp,css-prop,--width,ios
+ion-input-otp,css-prop,--width,md
+
 ion-input-password-toggle,shadow
 ion-input-password-toggle,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-input-password-toggle,prop,hideIcon,string | undefined,undefined,false,false

core/src/components.d.ts

@@ -18,6 +18,7 @@ import { ScrollBaseDetail, ScrollDetail } from "./components/content/content-int
 import { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, FormatOptions, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
 import { SpinnerTypes } from "./components/spinner/spinner-configs";
 import { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
+import { InputOtpChangeEventDetail, InputOtpCompleteEventDetail, InputOtpInputEventDetail } from "./components/input-otp/input-otp-interface";
 import { MenuChangeEventDetail, MenuCloseEventDetail, MenuType, Side } from "./components/menu/menu-interface";
 import { ModalBreakpointChangeEventDetail, ModalHandleBehavior } from "./components/modal/modal-interface";
 import { NavComponent, NavComponentWithProps, NavOptions, RouterOutletOptions, SwipeGestureHandler, TransitionDoneFn, TransitionInstruction } from "./components/nav/nav-interface";
@@ -55,6 +56,7 @@ export { ScrollBaseDetail, ScrollDetail } from "./components/content/content-int
 export { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, FormatOptions, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
 export { SpinnerTypes } from "./components/spinner/spinner-configs";
 export { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
+export { InputOtpChangeEventDetail, InputOtpCompleteEventDetail, InputOtpInputEventDetail } from "./components/input-otp/input-otp-interface";
 export { MenuChangeEventDetail, MenuCloseEventDetail, MenuType, Side } from "./components/menu/menu-interface";
 export { ModalBreakpointChangeEventDetail, ModalHandleBehavior } from "./components/modal/modal-interface";
 export { NavComponent, NavComponentWithProps, NavOptions, RouterOutletOptions, SwipeGestureHandler, TransitionDoneFn, TransitionInstruction } from "./components/nav/nav-interface";
@@ -1319,6 +1321,69 @@ export namespace Components {
          */
         "value"?: string | number | null;
     }
+    interface IonInputOtp {
+        /**
+          * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
+         */
+        "autocapitalize": string;
+        /**
+          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
+         */
+        "color"?: Color;
+        /**
+          * If `true`, the user cannot interact with the input.
+         */
+        "disabled": boolean;
+        /**
+          * The fill for the input boxes. If `"solid"` the input boxes will have a background. If `"outline"` the input boxes will be transparent with a border.
+         */
+        "fill"?: 'outline' | 'solid';
+        /**
+          * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.  For numbers (type="number"): "numeric" For text (type="text"): "text"
+         */
+        "inputmode"?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+        /**
+          * The number of input boxes to display.
+         */
+        "length": number;
+        /**
+          * A regex pattern string for allowed characters. Defaults based on type.  For numbers (`type="number"`): `"[\p{N}]"` For text (`type="text"`): `"[\p{L}\p{N}]"`
+         */
+        "pattern"?: string;
+        /**
+          * If `true`, the user cannot modify the value.
+         */
+        "readonly": boolean;
+        /**
+          * Resets the value and focus state.
+         */
+        "reset": () => Promise<void>;
+        /**
+          * Where separators should be shown between input boxes. Can be a comma-separated string or an array of numbers.  For example: `"3"` will show a separator after the 3rd input box. `[1,4]` will show a separator after the 1st and 4th input boxes. `"all"` will show a separator between every input box.
+         */
+        "separators"?: 'all' | string | number[];
+        /**
+          * Sets focus to an input box.
+          * @param index - The index of the input box to focus (0-based). If provided and the input box has a value, the input box at that index will be focused. Otherwise, the first empty input box or the last input if all are filled will be focused.
+         */
+        "setFocus": (index?: number) => Promise<void>;
+        /**
+          * The shape of the input boxes. If "round" they will have an increased border radius. If "rectangular" they will have no border radius. If "soft" they will have a soft border radius.
+         */
+        "shape": 'round' | 'rectangular' | 'soft';
+        /**
+          * The size of the input boxes.
+         */
+        "size": 'small' | 'medium' | 'large';
+        /**
+          * The type of input allowed in the input boxes.
+         */
+        "type": 'text' | 'number';
+        /**
+          * The value of the input group.
+         */
+        "value"?: string | number | null;
+    }
     interface IonInputPasswordToggle {
         /**
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
@@ -3404,6 +3469,10 @@ export interface IonInputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIonInputElement;
 }
+export interface IonInputOtpCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIonInputOtpElement;
+}
 export interface IonItemOptionsCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIonItemOptionsElement;
@@ -3933,6 +4002,27 @@ declare global {
         prototype: HTMLIonInputElement;
         new (): HTMLIonInputElement;
     };
+    interface HTMLIonInputOtpElementEventMap {
+        "ionInput": InputOtpInputEventDetail;
+        "ionChange": InputOtpChangeEventDetail;
+        "ionComplete": InputOtpCompleteEventDetail;
+        "ionBlur": FocusEvent;
+        "ionFocus": FocusEvent;
+    }
+    interface HTMLIonInputOtpElement extends Components.IonInputOtp, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIonInputOtpElementEventMap>(type: K, listener: (this: HTMLIonInputOtpElement, ev: IonInputOtpCustomEvent<HTMLIonInputOtpElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIonInputOtpElementEventMap>(type: K, listener: (this: HTMLIonInputOtpElement, ev: IonInputOtpCustomEvent<HTMLIonInputOtpElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLIonInputOtpElement: {
+        prototype: HTMLIonInputOtpElement;
+        new (): HTMLIonInputOtpElement;
+    };
     interface HTMLIonInputPasswordToggleElement extends Components.IonInputPasswordToggle, HTMLStencilElement {
     }
     var HTMLIonInputPasswordToggleElement: {
@@ -4792,6 +4882,7 @@ declare global {
         "ion-infinite-scroll": HTMLIonInfiniteScrollElement;
         "ion-infinite-scroll-content": HTMLIonInfiniteScrollContentElement;
         "ion-input": HTMLIonInputElement;
+        "ion-input-otp": HTMLIonInputOtpElement;
         "ion-input-password-toggle": HTMLIonInputPasswordToggleElement;
         "ion-item": HTMLIonItemElement;
         "ion-item-divider": HTMLIonItemDividerElement;
@@ -6178,6 +6269,80 @@ declare namespace LocalJSX {
          */
         "value"?: string | number | null;
     }
+    interface IonInputOtp {
+        /**
+          * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
+         */
+        "autocapitalize"?: string;
+        /**
+          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
+         */
+        "color"?: Color;
+        /**
+          * If `true`, the user cannot interact with the input.
+         */
+        "disabled"?: boolean;
+        /**
+          * The fill for the input boxes. If `"solid"` the input boxes will have a background. If `"outline"` the input boxes will be transparent with a border.
+         */
+        "fill"?: 'outline' | 'solid';
+        /**
+          * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.  For numbers (type="number"): "numeric" For text (type="text"): "text"
+         */
+        "inputmode"?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+        /**
+          * The number of input boxes to display.
+         */
+        "length"?: number;
+        /**
+          * Emitted when the input group loses focus.
+         */
+        "onIonBlur"?: (event: IonInputOtpCustomEvent<FocusEvent>) => void;
+        /**
+          * The `ionChange` event is fired when the user modifies the input's value. Unlike the `ionInput` event, the `ionChange` event is only fired when changes are committed, not as the user types.  The `ionChange` event fires when the `<ion-input-otp>` component loses focus after its value has changed.  This event will not emit when programmatically setting the `value` property.
+         */
+        "onIonChange"?: (event: IonInputOtpCustomEvent<InputOtpChangeEventDetail>) => void;
+        /**
+          * Emitted when all input boxes have been filled with valid values.
+         */
+        "onIonComplete"?: (event: IonInputOtpCustomEvent<InputOtpCompleteEventDetail>) => void;
+        /**
+          * Emitted when the input group has focus.
+         */
+        "onIonFocus"?: (event: IonInputOtpCustomEvent<FocusEvent>) => void;
+        /**
+          * The `ionInput` event is fired each time the user modifies the input's value. Unlike the `ionChange` event, the `ionInput` event is fired for each alteration to the input's value. This typically happens for each keystroke as the user types.  For elements that accept text input (`type=text`, `type=tel`, etc.), the interface is [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others, the interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If the input is cleared on edit, the type is `null`.
+         */
+        "onIonInput"?: (event: IonInputOtpCustomEvent<InputOtpInputEventDetail>) => void;
+        /**
+          * A regex pattern string for allowed characters. Defaults based on type.  For numbers (`type="number"`): `"[\p{N}]"` For text (`type="text"`): `"[\p{L}\p{N}]"`
+         */
+        "pattern"?: string;
+        /**
+          * If `true`, the user cannot modify the value.
+         */
+        "readonly"?: boolean;
+        /**
+          * Where separators should be shown between input boxes. Can be a comma-separated string or an array of numbers.  For example: `"3"` will show a separator after the 3rd input box. `[1,4]` will show a separator after the 1st and 4th input boxes. `"all"` will show a separator between every input box.
+         */
+        "separators"?: 'all' | string | number[];
+        /**
+          * The shape of the input boxes. If "round" they will have an increased border radius. If "rectangular" they will have no border radius. If "soft" they will have a soft border radius.
+         */
+        "shape"?: 'round' | 'rectangular' | 'soft';
+        /**
+          * The size of the input boxes.
+         */
+        "size"?: 'small' | 'medium' | 'large';
+        /**
+          * The type of input allowed in the input boxes.
+         */
+        "type"?: 'text' | 'number';
+        /**
+          * The value of the input group.
+         */
+        "value"?: string | number | null;
+    }
     interface IonInputPasswordToggle {
         /**
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
@@ -8309,6 +8474,7 @@ declare namespace LocalJSX {
         "ion-infinite-scroll": IonInfiniteScroll;
         "ion-infinite-scroll-content": IonInfiniteScrollContent;
         "ion-input": IonInput;
+        "ion-input-otp": IonInputOtp;
         "ion-input-password-toggle": IonInputPasswordToggle;
         "ion-item": IonItem;
         "ion-item-divider": IonItemDivider;
@@ -8411,6 +8577,7 @@ declare module "@stencil/core" {
             "ion-infinite-scroll": LocalJSX.IonInfiniteScroll & JSXBase.HTMLAttributes<HTMLIonInfiniteScrollElement>;
             "ion-infinite-scroll-content": LocalJSX.IonInfiniteScrollContent & JSXBase.HTMLAttributes<HTMLIonInfiniteScrollContentElement>;
             "ion-input": LocalJSX.IonInput & JSXBase.HTMLAttributes<HTMLIonInputElement>;
+            "ion-input-otp": LocalJSX.IonInputOtp & JSXBase.HTMLAttributes<HTMLIonInputOtpElement>;
             "ion-input-password-toggle": LocalJSX.IonInputPasswordToggle & JSXBase.HTMLAttributes<HTMLIonInputPasswordToggleElement>;
             "ion-item": LocalJSX.IonItem & JSXBase.HTMLAttributes<HTMLIonItemElement>;
             "ion-item-divider": LocalJSX.IonItemDivider & JSXBase.HTMLAttributes<HTMLIonItemDividerElement>;

core/src/components/input-otp/input-otp-interface.ts

@@ -0,0 +1,23 @@
+/**
+ * Values are converted to strings when emitted which is
+ * why we do not have a `number` type here even though the
+ * `value` prop accepts a `number` type.
+ */
+export interface InputOtpInputEventDetail {
+  value?: string | null;
+  event?: Event;
+}
+export interface InputOtpChangeEventDetail {
+  value?: string | null;
+  event?: Event;
+}
+
+export interface InputOtpCompleteEventDetail {
+  value?: string | null;
+  event?: Event;
+}
+
+export interface InputOtpCustomEvent<T = InputOtpChangeEventDetail> extends CustomEvent {
+  detail: T;
+  target: HTMLIonInputOtpElement;
+}

core/src/components/input-otp/input-otp.ios.scss

@@ -0,0 +1,20 @@
+@import "./input-otp";
+@import "../../themes/ionic.globals.ios";
+
+// iOS Input OTP
+// --------------------------------------------------
+
+:host {
+  --border-width: #{$hairlines-width};
+}
+
+:host(.has-focus) .native-input:focus {
+  --border-width: 1px;
+}
+
+// Fills
+// --------------------------------------------------
+
+:host(.input-otp-fill-outline) {
+  --border-color: #{$item-ios-border-color};
+}