@riverty/web-components 5.7.0 → 6.0.0

package/dist/collection/components/input-code/exports.js

@@ -0,0 +1,2 @@
+export const inputModeArray = ['none', 'text', 'tel', 'url', 'email', 'numeric', 'decimal', 'search'];
+export const enterKeyHintArray = ['enter', 'done', 'go', 'next', 'previous', 'search', 'send'];

package/dist/collection/components/input-code/input-code.js

@@ -2,18 +2,32 @@ import { h, Host } from "@stencil/core";
 import { appendControlToFormData } from "../../utils/formData";
 export class InputCode {
     constructor() {
-        /** Specifies a name for an input for submittion within formData object. */
+        /** Specifies a name for an input for submission within formData object. */
         this.name = 'input-code';
-        /** Number of digits (typically 4–6) */
+        /** Number of digits (typically 4–6).
+         * @default: 4
+         */
         this.length = 4;
-        /** Label for accessibility */
+        /** Label for accessibility.
+         * @default: 'Verification code'
+         */
         this.label = 'Verification code';
-        /** Set custom message for `tooShort` property of a ValidityState object (set by `minlength`) within Constrain Validation API */
-        this.tooShortMessage = `All ${this.length} characters must be filled.`;
         /** Defines initial value */
         this.value = '';
+        /** Specifies the input mode for the virtual keyboard on mobile devices. Default is 'numeric' for OTP codes.
+         * @default: 'numeric'
+         */
+        this.inputmode = 'numeric';
+        /** Specifies the enter key hint for the virtual keyboard. Default is 'done' for OTP completion.
+         * @default: 'done'
+        */
+        this.enterkeyhint = 'done';
+        /** Specifies the autocomplete behavior. Default is 'one-time-code' for SMS OTP autofill.
+         * @default: 'one-time-code'
+        */
+        this.autocomplete = 'one-time-code';
         /** Holds the current values of each input box */
-        this.values = new Array(this.length).fill('');
+        this.values = [];
         /** Validity state passed from validateFormElement function after validation */
         this.validityState = '';
         /** Validity message passed from validateFormElement function after validation */
@@ -98,24 +112,33 @@ export class InputCode {
         this.uniqueId = `r-input-code-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
         this.nativeElement = null;
         this.getValidityStateData = (element) => {
-            if (element.value.length === 0) {
-                this.validityState = 'valueMissing';
-                this.validityMessage = this.valueMissingMessage;
-                return;
+            let validityState = '';
+            let validityMessage = '';
+            if (!element) {
+                validityState = 'valid';
+                return { validityState, validityMessage };
+            }
+            if (this.required && element.value.length === 0) {
+                validityState = 'valueMissing';
+                validityMessage = this.valueMissingMessage;
+                return { validityState, validityMessage };
             }
             if (element.value.length > 0 && element.value.length < this.length) {
-                this.validityState = 'tooShort';
-                this.validityMessage = this.tooShortMessage;
-                return;
+                validityState = 'tooShort';
+                validityMessage = this.tooShortMessage || `All ${this.length} characters must be filled.`;
+                return { validityState, validityMessage };
             }
-            this.validityState = 'valid';
+            validityState = 'valid';
+            return { validityState, validityMessage };
         };
         this.validateFormElement = (element) => {
             if (element === null)
                 return;
             if (this.isNoValidate)
                 return;
-            this.getValidityStateData(element);
+            const { validityState, validityMessage } = this.getValidityStateData(element);
+            this.validityState = validityState;
+            this.validityMessage = validityMessage;
             const isValid = this.validityState === 'valid';
             this.valid = isValid;
             this.invalid = !isValid;
@@ -127,7 +150,7 @@ export class InputCode {
         this.onResetForm = async () => {
             if (this.readonly)
                 return;
-            this.reset();
+            await this.reset();
             this.validityState = null;
             this.validityMessage = null;
             this.invalid = null;
@@ -150,6 +173,19 @@ export class InputCode {
             appendControlToFormData(this.nativeElement || this.host, event.formData);
         };
     }
+    /**
+     * Validates segment index and throws descriptive errors if invalid.
+     * @param index - The index to validate
+     * @throws Error if index is not an integer or out of bounds
+     */
+    validateSegmentIndex(index) {
+        if (typeof index !== 'number' || !Number.isInteger(index)) {
+            throw new Error('Index must be an integer');
+        }
+        if (index < 0 || index >= this.length) {
+            throw new Error(`Index out of bounds: must be between 0 and ${this.length - 1}`);
+        }
+    }
     /**
      * Gets the current complete code value by joining all individual digit values.
      * @returns Promise that resolves to the complete code string
@@ -177,12 +213,83 @@ export class InputCode {
             return;
         }
         const valueArray = Array.from(value).slice(0, this.length).map(char => String(char));
+        // Pad with empty strings if value is shorter than length
+        while (valueArray.length < this.length) {
+            valueArray.push('');
+        }
         this.values = valueArray;
         this.rChange.emit({ value: this.values.join('') });
     }
+    /**
+     * Validates the input code without triggering UI and returns a boolean indicating its validity.
+     * @returns A boolean indicating whether the input code is valid.
+     */
+    async checkValidity() {
+        const { validityState } = this.getValidityStateData(this.nativeElement);
+        return validityState === 'valid';
+    }
+    /**
+     * Focuses a specific segment (input) by index.
+     * @param index - The zero-based index of the segment to focus (0 to length-1)
+     * @returns Promise that resolves when focus is set, or rejects if index is invalid
+     */
+    async focusSegment(index) {
+        this.validateSegmentIndex(index);
+        const input = this.inputs[index];
+        if (input) {
+            input.focus();
+            // Select the content if it exists
+            if (this.values[index]) {
+                setTimeout(() => {
+                    // Check if setSelectionRange exists (not available in some test environments)
+                    if (typeof input.setSelectionRange === 'function') {
+                        input.setSelectionRange(0, 1);
+                    }
+                }, 0);
+            }
+        }
+    }
+    /**
+     * Gets the value of a specific segment by index.
+     * @param index - The zero-based index of the segment (0 to length-1)
+     * @returns Promise that resolves to the segment value (single character string or empty string)
+     */
+    async getSegmentValue(index) {
+        this.validateSegmentIndex(index);
+        return this.values[index] || '';
+    }
+    /**
+     * Sets the value of a specific segment by index.
+     * @param index - The zero-based index of the segment (0 to length-1)
+     * @param value - The value to set (will be truncated to first character if longer)
+     */
+    async setSegmentValue(index, value) {
+        this.validateSegmentIndex(index);
+        // Take only the first character, or empty string if value is empty
+        const newValue = value ? value.charAt(0) : '';
+        this.values[index] = newValue;
+        this.values = [...this.values];
+        // Update the input element's value to reflect the change
+        const input = this.inputs[index];
+        if (input) {
+            input.value = newValue;
+        }
+    }
     handleValuesChange() {
         this.value = this.values.join('');
     }
+    handleLengthChange(newLength) {
+        // Adjust values array when length changes
+        if (this.values.length !== newLength) {
+            const newValues = new Array(newLength).fill('');
+            // Copy existing values up to the new length
+            for (let i = 0; i < Math.min(this.values.length, newLength); i++) {
+                newValues[i] = this.values[i];
+            }
+            this.values = newValues;
+            this.inputs = [];
+        }
+    }
     get firstEmptyInput() {
         return this.inputs.find(input => !input.value) || null;
     }
@@ -195,7 +302,7 @@ export class InputCode {
             return null;
         }
         return (this.validityState && this.validityState !== 'valid' ?
-            (this.customErrorMessage || this.validityMessage)
+            (this.customErrorMessage || this.validityMessage || `All ${this.length} characters must be filled.`)
             : null);
     }
     get ariaDescribedBy() {
@@ -273,15 +380,15 @@ export class InputCode {
             id: `${uniqueId}-label`,
             fieldIndicator
         } : {};
-        return (h(Host, { key: '7c77442f0a5b39e6baca0e0a19b07e5c28388267', value: this.value, onClick: this.onHostClick }, h("div", { key: 'e9d80a3cbb3f8afcbfce17da69bbe881112307c5', class: "r-input-code--label-container" }, h("label", { key: 'dfdc795d969466e71d82492dd142773fbad93f6b', htmlFor: uniqueId }, label ?
+        return (h(Host, { key: '4d744320f4bf03760e4b11dd38934c0f7ce05223', value: this.value, onClick: this.onHostClick }, h("div", { key: 'f047f6669b243f301a2a462188d24721ccb565a5', class: "r-input-code--label-container" }, h("label", { key: 'a5acdd7308cca3981a78619c480d79c499ebc58a', htmlFor: uniqueId }, label ?
             h("r-label", Object.assign({}, labelAttr), label)
             :
-                h("slot", { name: "label" })), h("slot", { key: 'f68f02578abd8be8fceea4bdaf1af657f07f5327', name: "popover" })), hint &&
-            h("r-hint", { key: '784b4a072ee504c99873d8e7744c1c055cbdd52a', id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { key: 'b9b458b9b18859132145848135118aacf6c43ab2', class: "r-input-code--container", role: "group", "aria-labelledby": `${uniqueId}-label`, "aria-describedby": this.groupDescribedby }, h("slot", { key: '34d0391987a526d9672ff457fbfd34c153099dbc', name: "leading" }), Array.from({ length: this.length }).map((_, i) => (h("input", { class: "r-input-code--input", key: i, id: `${uniqueId}-input-section-${i}`, "aria-label": `${this.ariaCharacterLabel || 'Character'}: ${i + 1}`, "aria-invalid": `${this.invalid || false}`, value: this.values[i], ref: el => this.inputs[i] = el, maxlength: 1, disabled: this.disabled, required: this.required, readonly: readonly, onInput: this.createInputHandler(i), onKeyDown: this.createKeyDownHandler(i), onPaste: this.handlePaste }))), h("input", Object.assign({ key: '029bcca9a6907090058ea65de36cc3aea106ad25', type: "hidden" }, inputAttrs, { value: this.values.join(''), ref: el => this.nativeElement = el })), h("div", { key: 'a91256c17340a75fe1e5a7942c9ede1089bd477c', class: "r-input-code--trailing" }, this.readonly &&
-            h("r-icon", { key: '28df1a0823e8b6c94a26fe8dac6838d663da26b7', class: "r-input-code--readonly-icon", name: "pen-disabled", size: "s" }), this.hasTrailingSlot &&
-            h("slot", { key: '13dee654a15b7104fbe66408ba6c0a8d4b839a2c', name: "trailing" }, valid &&
-                h("r-icon", { key: '85f0413d86b7366229fe07af87a7bdd5368f8a22', name: "circled-check", size: "s", color: "var(--r-status-success-regular)" })))), h("slot", { key: 'cf9e23001dec5216a2c35144b9282dee25d5fe50', name: "message" }, this.hasMessage &&
-            h("r-hint", { key: '0c642fbeef09ec9c5ce1e2a6272bb27160be05c0', "aria-live": "polite", id: `${uniqueId}-message`, variant: "error" }, this.message))));
+                h("slot", { name: "label" })), h("slot", { key: '696554954e2b29b49a8d639aa79d80abeaa6a729', name: "popover" })), hint &&
+            h("r-hint", { key: '58b3e011e49b4a3bd4dd31050ab554483fba0fc4', id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { key: '6f4668b5bda975b59ff269759e2d3ae3306b09c4', class: "r-input-code--container", role: "group", "aria-labelledby": `${uniqueId}-label`, "aria-describedby": this.groupDescribedby }, h("slot", { key: '59206e0ed6e335735b610c44a925ea70b137ffe0', name: "leading" }), Array.from({ length: this.length }).map((_, i) => (h("input", { class: "r-input-code--input", key: i, id: `${uniqueId}-input-section-${i}`, "aria-label": `${this.ariaCharacterLabel || 'Character'}: ${i + 1}`, "aria-invalid": `${this.invalid || false}`, value: this.values[i], ref: el => this.inputs[i] = el, maxlength: 1, disabled: this.disabled, required: this.required, readonly: readonly, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, autocomplete: this.autocomplete, onInput: this.createInputHandler(i), onKeyDown: this.createKeyDownHandler(i), onPaste: this.handlePaste }))), h("input", Object.assign({ key: '815da7a7566b0cefdbdfda32c990637385eba304', type: "hidden" }, inputAttrs, { value: this.values.join(''), ref: el => this.nativeElement = el })), h("div", { key: 'b03d7e03bd6c91d441f4377d53bb7d845edf498d', class: "r-input-code--trailing" }, this.readonly &&
+            h("r-icon", { key: '53796d1b572ff2eac8297a0fad8e22d3a95f1bee', class: "r-input-code--readonly-icon", name: "pen-disabled", size: "s" }), this.hasTrailingSlot &&
+            h("slot", { key: '9becd49e7d79f824fcd79e7afbc3040a1b0f33a3', name: "trailing" }, valid &&
+                h("r-icon", { key: 'a31379d7e8eb6ad66bbf1567d4cd4f9526962226', name: "circled-check", size: "s", color: "var(--r-status-success-regular)" })))), h("slot", { key: 'a38ac5d9dda2017a443ec2b58cffbdd0db952239', name: "message" }, this.hasMessage &&
+            h("r-hint", { key: '39e47e0fdf23b1ebab5a0384447a965a8890d77f', "aria-live": "polite", id: `${uniqueId}-message`, variant: "error" }, this.message))));
     }
     static get is() { return "r-input-code"; }
     static get encapsulation() { return "shadow"; }
@@ -329,7 +436,7 @@ export class InputCode {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Specifies a name for an input for submittion within formData object."
+                    "text": "Specifies a name for an input for submission within formData object."
                 },
                 "getter": false,
                 "setter": false,
@@ -348,8 +455,11 @@ export class InputCode {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Number of digits (typically 4\u20136)"
+                    "tags": [{
+                            "name": "default",
+                            "text": ": 4"
+                        }],
+                    "text": "Number of digits (typically 4\u20136)."
                 },
                 "getter": false,
                 "setter": false,
@@ -444,8 +554,11 @@ export class InputCode {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Label for accessibility"
+                    "tags": [{
+                            "name": "default",
+                            "text": ": 'Verification code'"
+                        }],
+                    "text": "Label for accessibility."
                 },
                 "getter": false,
                 "setter": false,
@@ -557,15 +670,14 @@ export class InputCode {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Set custom message for `tooShort` property of a ValidityState object (set by `minlength`) within Constrain Validation API"
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "defaultValue": "`All ${this.length} characters must be filled.`"
+                "reflect": false
             },
             "customErrorMessage": {
                 "type": "string",
@@ -662,6 +774,87 @@ export class InputCode {
                 "setter": false,
                 "reflect": true,
                 "defaultValue": "''"
+            },
+            "inputmode": {
+                "type": "string",
+                "attribute": "inputmode",
+                "mutable": false,
+                "complexType": {
+                    "original": "InputMode",
+                    "resolved": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\"",
+                    "references": {
+                        "InputMode": {
+                            "location": "import",
+                            "path": "./exports",
+                            "id": "src/components/input-code/exports.ts::InputMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": ": 'numeric'"
+                        }],
+                    "text": "Specifies the input mode for the virtual keyboard on mobile devices. Default is 'numeric' for OTP codes."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'numeric'"
+            },
+            "enterkeyhint": {
+                "type": "string",
+                "attribute": "enterkeyhint",
+                "mutable": false,
+                "complexType": {
+                    "original": "EnterKeyHint",
+                    "resolved": "\"done\" | \"enter\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\"",
+                    "references": {
+                        "EnterKeyHint": {
+                            "location": "import",
+                            "path": "./exports",
+                            "id": "src/components/input-code/exports.ts::EnterKeyHint"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": ": 'done'"
+                        }],
+                    "text": "Specifies the enter key hint for the virtual keyboard. Default is 'done' for OTP completion."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'done'"
+            },
+            "autocomplete": {
+                "type": "string",
+                "attribute": "autocomplete",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": ": 'one-time-code'"
+                        }],
+                    "text": "Specifies the autocomplete behavior. Default is 'one-time-code' for SMS OTP autofill."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'one-time-code'"
             }
         };
     }
@@ -769,10 +962,10 @@ export class InputCode {
             },
             "setValue": {
                 "complexType": {
-                    "signature": "(value: any) => Promise<void>",
+                    "signature": "(value: string | null) => Promise<void>",
                     "parameters": [{
                             "name": "value",
-                            "type": "any",
+                            "type": "string",
                             "docs": ""
                         }],
                     "references": {
@@ -787,6 +980,111 @@ export class InputCode {
                     "text": "Sets provided value.",
                     "tags": []
                 }
+            },
+            "checkValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Validates the input code without triggering UI and returns a boolean indicating its validity.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "A boolean indicating whether the input code is valid."
+                        }]
+                }
+            },
+            "focusSegment": {
+                "complexType": {
+                    "signature": "(index: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "index",
+                            "type": "number",
+                            "docs": "- The zero-based index of the segment to focus (0 to length-1)"
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Focuses a specific segment (input) by index.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "index - The zero-based index of the segment to focus (0 to length-1)"
+                        }, {
+                            "name": "returns",
+                            "text": "Promise that resolves when focus is set, or rejects if index is invalid"
+                        }]
+                }
+            },
+            "getSegmentValue": {
+                "complexType": {
+                    "signature": "(index: number) => Promise<string>",
+                    "parameters": [{
+                            "name": "index",
+                            "type": "number",
+                            "docs": "- The zero-based index of the segment (0 to length-1)"
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "Gets the value of a specific segment by index.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "index - The zero-based index of the segment (0 to length-1)"
+                        }, {
+                            "name": "returns",
+                            "text": "Promise that resolves to the segment value (single character string or empty string)"
+                        }]
+                }
+            },
+            "setSegmentValue": {
+                "complexType": {
+                    "signature": "(index: number, value: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "index",
+                            "type": "number",
+                            "docs": "- The zero-based index of the segment (0 to length-1)"
+                        }, {
+                            "name": "value",
+                            "type": "string",
+                            "docs": "- The value to set (will be truncated to first character if longer)"
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets the value of a specific segment by index.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "index - The zero-based index of the segment (0 to length-1)"
+                        }, {
+                            "name": "param",
+                            "text": "value - The value to set (will be truncated to first character if longer)"
+                        }]
+                }
             }
         };
     }
@@ -795,6 +1093,9 @@ export class InputCode {
         return [{
                 "propName": "values",
                 "methodName": "handleValuesChange"
+            }, {
+                "propName": "length",
+                "methodName": "handleLengthChange"
             }];
     }
 }