@nanoporetech-digital/components 8.7.2 → 8.9.0

package/dist/types/components/input-otp/input-otp-interface.d.ts

@@ -0,0 +1,24 @@
+/**
+ * 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;
+    valid?: boolean;
+    event?: Event;
+}
+export interface InputOtpChangeEventDetail {
+    value?: string | null;
+    valid?: boolean;
+    event?: Event;
+}
+export interface InputOtpCompleteEventDetail {
+    value?: string | null;
+    valid?: boolean;
+    event?: Event;
+}
+export interface InputOtpCustomEvent<T = InputOtpChangeEventDetail> extends CustomEvent {
+    detail: T;
+    target: HTMLNanoInputOtpElement;
+}

package/dist/types/components/input-otp/input-otp.d.ts

@@ -0,0 +1,281 @@
+import type { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+import type { InputOtpChangeEventDetail, InputOtpCompleteEventDetail, InputOtpInputEventDetail } from './input-otp-interface.js';
+/**
+ * A component for entering one-time passwords (OTP) with multiple input fields.
+ *
+ * @version 8.7.2
+ * @status new
+ *
+ * @slot - The default slot for the input description.
+ * @slot validity-icon - A slot for a custom validity icon. If not provided, a default icon will be used.
+ */
+export declare class InputOTP implements ComponentInterface {
+    private inputRefs;
+    private inputId;
+    /**
+     * Stores the initial value of the input when it receives focus.
+     * Used to determine if the value changed during the focus session
+     * to avoid emitting unnecessary change events on blur.
+     */
+    private focusedValue?;
+    /**
+     * Tracks whether the user is navigating through input boxes using keyboard navigation
+     * (arrow keys, tab) versus mouse clicks. This is used to determine the appropriate
+     * focus behavior when an input box is focused.
+     */
+    private isKeyboardNavigation;
+    el: HTMLNanoInputOtpElement;
+    private inputValues;
+    hasFocus: boolean;
+    private previousInputValues;
+    private invalid;
+    private valid;
+    /**
+     * If `true`, the user cannot interact with the input.
+     */
+    disabled: boolean;
+    /**
+     * 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;
+    /**
+     * The type of input allowed in the input boxes.
+     */
+    type: 'text' | 'number';
+    /**
+     * The value of the input group.
+     */
+    value?: string | number | null;
+    /**
+     * If `true`, allows the input to be completely filled with invalid values.
+     * By default, if any input box contains an invalid value, the entire input group
+     * is marked as invalid.
+     * Default is `false`.
+     */
+    allowInvalid: boolean;
+    /**
+     * If `true`, shows a validity icon when all input boxes are filled.
+     * A check icon is shown if all values are valid, and an X icon is shown if any value is invalid.
+     * This does not affect the `invalid` or `valid` states of the input group.
+     * Default is `false`.
+     * */
+    showValidity: boolean;
+    /**
+     * The `nanoInput` event is fired each time the user modifies the input's value.
+     * Unlike the `nanoChange` event, the `nanoInput` 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`.
+     */
+    nanoInput: EventEmitter<InputOtpInputEventDetail>;
+    /**
+     * The `nanoChange` event is fired when the user modifies the input's value.
+     * Unlike the `nanoInput` event, the `nanoChange` event is only fired when changes
+     * are committed, not as the user types.
+     *
+     * The `nanoChange` event fires when the `<nano-input-otp>` component loses
+     * focus after its value has changed.
+     *
+     * This event will not emit when programmatically setting the `value` property.
+     */
+    nanoChange: EventEmitter<InputOtpChangeEventDetail>;
+    /**
+     * Emitted when all input boxes have been filled with valid values.
+     */
+    nanoComplete: EventEmitter<InputOtpCompleteEventDetail>;
+    /**
+     * Emitted when the input group loses focus.
+     */
+    nanoBlur: EventEmitter<FocusEvent>;
+    /**
+     * Emitted when the input group has focus.
+     */
+    nanoFocus: EventEmitter<FocusEvent>;
+    /**
+     * 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>;
+    valueChanged(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    /**
+     * Get the regex pattern for allowed characters.
+     * If a pattern is provided, use it to create a regex pattern
+     * Otherwise, use the default regex pattern based on type
+     */
+    private get validKeyPattern();
+    private get specialCharsPattern();
+    /**
+     * Gets the string pattern to pass to the input element
+     * and use in the regex for allowed characters.
+     * @returns {string} The regex pattern string for allowed characters.
+     */
+    private getPattern;
+    /**
+     * Get the default value for inputmode.
+     * If inputmode is provided, use it.
+     * Otherwise, use the default inputmode based on type
+     * @returns {string} The inputmode to use for the input boxes.
+     */
+    private getInputmode;
+    /**
+     * Initializes the input values array based on the current value prop.
+     * This splits the value into individual characters and validates them against
+     * the allowed pattern. The values are then used as the values in the native
+     * input boxes and the value of the input group is updated.
+     */
+    private initializeValues;
+    /**
+     * Returns `true` if the document or host element
+     * has a `dir` set to `rtl`. The host value will always
+     * take priority over the root document value.
+     * @returns {boolean} True if RTL direction is set, false otherwise.
+     */
+    private isRTL;
+    /**
+     * Updates the value of the input group.
+     * This updates the value of the input group and emits an `nanoChange` event.
+     * If all of the input boxes are filled, it emits an `nanoComplete` event.
+     */
+    private updateValue;
+    /**
+     * Emits an `nanoChange` event.
+     * This API should be called for user committed changes.
+     * This API should not be used for external value changes.
+     */
+    private emitNanoChange;
+    /**
+     * Emits an `nanoInput` event.
+     * This is used to emit the input value when the user types,
+     * backspaces, or pastes.
+     */
+    private emitNanoInput;
+    /**
+     * Handles the focus behavior for the input OTP component.
+     *
+     * Focus behavior:
+     * 1. Keyboard navigation: Allow normal focus movement
+     * 2. Mouse click:
+     *    - If clicked box has value: Focus that box
+     *    - If clicked box is empty: Focus first empty box
+     *
+     * Emits the `nanoFocus` event when the input group gains focus.
+     * @returns {(event: FocusEvent) => void} Event handler for focus events.
+     */
+    private onFocus;
+    /**
+     * Handles the blur behavior for the input OTP component.
+     * Emits the `nanoBlur` event when the input group loses focus.
+     */
+    private onBlur;
+    /**
+     * Focuses the next input box.
+     */
+    private focusNext;
+    /**
+     * Focuses the previous input box.
+     */
+    private focusPrevious;
+    /**
+     * Searches through the input values and returns the index
+     * of the first empty input.
+     * Returns -1 if all inputs are filled.
+     * @returns {number} The index of the first empty input, or -1 if all are filled.
+     */
+    private getFirstEmptyIndex;
+    /**
+     * Returns the index of the input that should be tabbed to.
+     * If all inputs are filled, returns the last input's index.
+     * Otherwise, returns the index of the first empty input.
+     * @returns {number} The index to tab to.
+     */
+    private getTabbableIndex;
+    /**
+     * Updates the tabIndexes for the input boxes.
+     * This is used to ensure that the correct input is
+     * focused when the user navigates using the tab key.
+     */
+    private updateTabIndexes;
+    /**
+     * Handles keyboard navigation for the OTP component.
+     *
+     * Navigation:
+     * - Backspace: Clears current input and moves to previous box if empty
+     * - Arrow Left/Right: Moves focus between input boxes
+     * - Tab: Allows normal tab navigation between components
+     * @returns {(event: KeyboardEvent) => void} Event handler for keydown events.
+     */
+    private onKeyDown;
+    /**
+     * Processes all input scenarios for each input box.
+     *
+     * This function manages:
+     * 1. Autofill handling
+     * 2. Input validation
+     * 3. Full selection replacement or typing in an empty box
+     * 4. Inserting in the middle with available space (shifting)
+     * 5. Single character replacement
+     * @returns {(event: InputEvent) => void} Event handler for input events.
+     */
+    private onInput;
+    /**
+     * Handles pasting text into the input OTP component.
+     * This function prevents the default paste behavior and
+     * validates the pasted text against the allowed pattern.
+     * It then updates the value of the input group and focuses
+     * the next empty input after pasting.
+     */
+    private onPaste;
+    /**
+     * Determines if a separator should be shown for a given index by:
+     * - Checking if the total length is even (no separator for odd lengths)
+     * - If even, showing a separator after the middle index
+     *
+     * @param index - The index to check for a separator.
+     * @returns {boolean} True if a separator should be shown after the given index, false otherwise.
+     */
+    private showSeparator;
+    /**
+     * Filters the input string to only include valid characters based on the
+     * `validKeyPattern` regex. If `allowInvalid` is true, it will also
+     * exclude special characters. The resulting array is sliced to the
+     * maximum length of the input OTP.
+     * @param str - The input string to filter.
+     * @returns {string[]} An array of valid characters.
+     */
+    private getValidChars;
+    /**
+     * Computes the validity of the input group based on the current input values.
+     * Sets the following `invalid` and `valid` states:
+     * - `invalid` is true if `allowInvalid` is true and any input value is invalid.
+     * - `valid` is true if all input boxes are filled with valid values.
+     */
+    private computeValidity;
+    render(): any;
+}

package/dist/types/components/tag/tag.d.ts

@@ -17,6 +17,10 @@ export declare class NanoTag {
      * The size of the tag.
      */
     size?: 'regular' | 'large';
+    /**
+     * If true, the tag will have a different background color.
+     */
+    selected?: boolean;
     el: HTMLNanoTagElement;
     /**
      * Fires when close button is clicked

package/dist/types/components.d.ts

@@ -26,6 +26,7 @@ import { FileInputChangeEventDetail, FileWithUrl } from "./components/file-uploa
 import { AlgoliaNetworkError, MyAccountData } from "./components/global-nav/global-nav-interface";
 import { NanoDatePicker } from "./components/date-picker/date-picker";
 import { InputChangeEventDetail } from "./components/input/input-interface";
+import { InputOtpChangeEventDetail, InputOtpCompleteEventDetail, InputOtpInputEventDetail } from "./components/input-otp/input-otp-interface.js";
 import { NavItemEventDetail } from "./components/nav-item/nav-item-interface";
 import { RangeChangeEventDetail, RangeValue } from "./components/range/range-interface";
 import { ResizeStateChangeEventDetail } from "./components/resize-observe/resize-observe-interface";
@@ -52,6 +53,7 @@ export { FileInputChangeEventDetail, FileWithUrl } from "./components/file-uploa
 export { AlgoliaNetworkError, MyAccountData } from "./components/global-nav/global-nav-interface";
 export { NanoDatePicker } from "./components/date-picker/date-picker";
 export { InputChangeEventDetail } from "./components/input/input-interface";
+export { InputOtpChangeEventDetail, InputOtpCompleteEventDetail, InputOtpInputEventDetail } from "./components/input-otp/input-otp-interface.js";
 export { NavItemEventDetail } from "./components/nav-item/nav-item-interface";
 export { RangeChangeEventDetail, RangeValue } from "./components/range/range-interface";
 export { ResizeStateChangeEventDetail } from "./components/resize-observe/resize-observe-interface";
@@ -2183,6 +2185,68 @@ export namespace Components {
          */
         "valueAsNumber": number;
     }
+    /**
+     * A component for entering one-time passwords (OTP) with multiple input fields.
+     * @version 8.7.2
+     * @status new
+     */
+    interface NanoInputOtp {
+        /**
+          * If `true`, allows the input to be completely filled with invalid values. By default, if any input box contains an invalid value, the entire input group is marked as invalid. Default is `false`.
+          * @default false
+         */
+        "allowInvalid": boolean;
+        /**
+          * If `true`, the user cannot interact with the input.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * 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.
+          * @default 6
+         */
+        "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.
+          * @default false
+         */
+        "readonly": boolean;
+        /**
+          * 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>;
+        /**
+          * If `true`, shows a validity icon when all input boxes are filled. A check icon is shown if all values are valid, and an X icon is shown if any value is invalid. This does not affect the `invalid` or `valid` states of the input group. Default is `false`.
+          * @default false
+         */
+        "showValidity": boolean;
+        /**
+          * The type of input allowed in the input boxes.
+          * @default 'number'
+         */
+        "type": 'text' | 'number';
+        /**
+          * The value of the input group.
+          * @default ''
+         */
+        "value"?: string | number | null;
+    }
     /**
      * A thin, declarative interface to the [IntersectionObserver API](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver).
      * @version 6.0.0
@@ -3329,6 +3393,11 @@ export namespace Components {
           * @default false
          */
         "closable"?: boolean;
+        /**
+          * If true, the tag will have a different background color.
+          * @default false
+         */
+        "selected"?: boolean;
         /**
           * The size of the tag.
           * @default 'regular'
@@ -3502,6 +3571,10 @@ export interface NanoInputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLNanoInputElement;
 }
+export interface NanoInputOtpCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLNanoInputOtpElement;
+}
 export interface NanoIntersectionObserveCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLNanoIntersectionObserveElement;
@@ -4391,6 +4464,32 @@ declare global {
         prototype: HTMLNanoInputElement;
         new (): HTMLNanoInputElement;
     };
+    interface HTMLNanoInputOtpElementEventMap {
+        "nanoInput": InputOtpInputEventDetail;
+        "nanoChange": InputOtpChangeEventDetail;
+        "nanoComplete": InputOtpCompleteEventDetail;
+        "nanoBlur": FocusEvent;
+        "nanoFocus": FocusEvent;
+    }
+    /**
+     * A component for entering one-time passwords (OTP) with multiple input fields.
+     * @version 8.7.2
+     * @status new
+     */
+    interface HTMLNanoInputOtpElement extends Components.NanoInputOtp, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLNanoInputOtpElementEventMap>(type: K, listener: (this: HTMLNanoInputOtpElement, ev: NanoInputOtpCustomEvent<HTMLNanoInputOtpElementEventMap[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 HTMLNanoInputOtpElementEventMap>(type: K, listener: (this: HTMLNanoInputOtpElement, ev: NanoInputOtpCustomEvent<HTMLNanoInputOtpElementEventMap[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 HTMLNanoInputOtpElement: {
+        prototype: HTMLNanoInputOtpElement;
+        new (): HTMLNanoInputOtpElement;
+    };
     interface HTMLNanoIntersectionObserveElementEventMap {
         "nanoIntersectionChange": IntersectionObserverEntry;
         "nanoIntersecting": IntersectionObserverEntry;
@@ -4999,6 +5098,7 @@ declare global {
         "nano-in-page-nav": HTMLNanoInPageNavElement;
         "nano-increment": HTMLNanoIncrementElement;
         "nano-input": HTMLNanoInputElement;
+        "nano-input-otp": HTMLNanoInputOtpElement;
         "nano-intersection-observe": HTMLNanoIntersectionObserveElement;
         "nano-masked-overflow": HTMLNanoMaskedOverflowElement;
         "nano-menu": HTMLNanoMenuElement;
@@ -7241,6 +7341,83 @@ declare namespace LocalJSX {
          */
         "valueAsNumber"?: number;
     }
+    /**
+     * A component for entering one-time passwords (OTP) with multiple input fields.
+     * @version 8.7.2
+     * @status new
+     */
+    interface NanoInputOtp {
+        /**
+          * If `true`, allows the input to be completely filled with invalid values. By default, if any input box contains an invalid value, the entire input group is marked as invalid. Default is `false`.
+          * @default false
+         */
+        "allowInvalid"?: boolean;
+        /**
+          * If `true`, the user cannot interact with the input.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * 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.
+          * @default 6
+         */
+        "length"?: number;
+        /**
+          * Emitted when the input group loses focus.
+         */
+        "onNanoBlur"?: (event: NanoInputOtpCustomEvent<FocusEvent>) => void;
+        /**
+          * The `nanoChange` event is fired when the user modifies the input's value. Unlike the `nanoInput` event, the `nanoChange` event is only fired when changes are committed, not as the user types.  The `nanoChange` event fires when the `<nano-input-otp>` component loses focus after its value has changed.  This event will not emit when programmatically setting the `value` property.
+         */
+        "onNanoChange"?: (event: NanoInputOtpCustomEvent<InputOtpChangeEventDetail>) => void;
+        /**
+          * Emitted when all input boxes have been filled with valid values.
+         */
+        "onNanoComplete"?: (event: NanoInputOtpCustomEvent<InputOtpCompleteEventDetail>) => void;
+        /**
+          * Emitted when the input group has focus.
+         */
+        "onNanoFocus"?: (event: NanoInputOtpCustomEvent<FocusEvent>) => void;
+        /**
+          * The `nanoInput` event is fired each time the user modifies the input's value. Unlike the `nanoChange` event, the `nanoInput` 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`.
+         */
+        "onNanoInput"?: (event: NanoInputOtpCustomEvent<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.
+          * @default false
+         */
+        "readonly"?: boolean;
+        /**
+          * If `true`, shows a validity icon when all input boxes are filled. A check icon is shown if all values are valid, and an X icon is shown if any value is invalid. This does not affect the `invalid` or `valid` states of the input group. Default is `false`.
+          * @default false
+         */
+        "showValidity"?: boolean;
+        /**
+          * The type of input allowed in the input boxes.
+          * @default 'number'
+         */
+        "type"?: 'text' | 'number';
+        /**
+          * The value of the input group.
+          * @default ''
+         */
+        "value"?: string | number | null;
+    }
     /**
      * A thin, declarative interface to the [IntersectionObserver API](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver).
      * @version 6.0.0
@@ -8440,6 +8617,11 @@ declare namespace LocalJSX {
           * Fires when close button is clicked
          */
         "onNanoClose"?: (event: NanoTagCustomEvent<any>) => void;
+        /**
+          * If true, the tag will have a different background color.
+          * @default false
+         */
+        "selected"?: boolean;
         /**
           * The size of the tag.
           * @default 'regular'
@@ -8562,6 +8744,7 @@ declare namespace LocalJSX {
         "nano-in-page-nav": NanoInPageNav;
         "nano-increment": NanoIncrement;
         "nano-input": NanoInput;
+        "nano-input-otp": NanoInputOtp;
         "nano-intersection-observe": NanoIntersectionObserve;
         "nano-masked-overflow": NanoMaskedOverflow;
         "nano-menu": NanoMenu;
@@ -8852,6 +9035,12 @@ declare module "@stencil/core" {
              * @version 1.0.0
              */
             "nano-input": LocalJSX.NanoInput & JSXBase.HTMLAttributes<HTMLNanoInputElement>;
+            /**
+             * A component for entering one-time passwords (OTP) with multiple input fields.
+             * @version 8.7.2
+             * @status new
+             */
+            "nano-input-otp": LocalJSX.NanoInputOtp & JSXBase.HTMLAttributes<HTMLNanoInputOtpElement>;
             /**
              * A thin, declarative interface to the [IntersectionObserver API](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver).
              * @version 6.0.0