@riverty/web-components 6.3.0 → 6.3.1

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

@@ -0,0 +1,1165 @@
+import { h, Host } from "@stencil/core";
+import { appendControlToFormData } from "../../utils/formData";
+export class InputCode {
+    constructor() {
+        /** Specifies a name for an input for submission within formData object. */
+        this.name = 'input-code';
+        /** Number of digits (typically 4–6).
+         * @default: 4
+         */
+        this.length = 4;
+        /** Label for accessibility.
+         * @default: 'Verification code'
+         */
+        this.label = 'Verification code';
+        /** 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 = [];
+        /** Tracks whether the component was previously in a complete state */
+        this.wasComplete = false;
+        /** Tracks the last completed value to detect changes */
+        this.lastCompletedValue = '';
+        /** Validity state passed from validateFormElement function after validation */
+        this.validityState = '';
+        /** Validity message passed from validateFormElement function after validation */
+        this.validityMessage = '';
+        this.inputs = [];
+        /**
+         * Checks if all segments are filled and emits rComplete event when:
+         * 1. Transitioning from incomplete to complete
+         * 2. Complete and value has changed from previous completed value
+         */
+        this.checkAndEmitCompletion = () => {
+            const isFullLength = this.value.length === this.length;
+            const isNoEmptySegments = this.values.every(val => val !== '');
+            const isComplete = isFullLength && isNoEmptySegments;
+            // Emit when transitioning to complete OR when complete with a different value
+            if (isComplete && (!this.wasComplete || this.value !== this.lastCompletedValue)) {
+                this.wasComplete = true;
+                this.lastCompletedValue = this.value;
+                this.rComplete.emit({ value: this.value, isComplete: true });
+            }
+            else if (!isComplete && this.wasComplete) {
+                // Reset the flag when becoming incomplete
+                this.wasComplete = false;
+            }
+        };
+        this.handleInput = (index, event) => {
+            var _a;
+            if (this.readonly)
+                return;
+            const input = event.target;
+            const value = input.value.slice(-1);
+            this.values[index] = value;
+            this.values = [...this.values];
+            if (value && index < this.length - 1) {
+                (_a = this.inputs[index + 1]) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+            this.rChange.emit({ value: this.values.join('') });
+        };
+        this.handleKeyDown = (index, event) => {
+            var _a, _b, _c;
+            if (this.readonly)
+                return;
+            const key = event.key;
+            if (key === 'Backspace') {
+                if (!this.values[index] && index > 0) {
+                    this.values[index - 1] = '';
+                    this.values = [...this.values];
+                    (_a = this.inputs[index - 1]) === null || _a === void 0 ? void 0 : _a.focus();
+                }
+            }
+            if (key === 'ArrowLeft') {
+                if (index > 0) {
+                    (_b = this.inputs[index - 1]) === null || _b === void 0 ? void 0 : _b.focus();
+                    if (this.values[index - 1]) {
+                        setTimeout(() => {
+                            var _a;
+                            (_a = this.inputs[index - 1]) === null || _a === void 0 ? void 0 : _a.setSelectionRange(0, 1);
+                        }, 0);
+                    }
+                }
+            }
+            if (key === 'ArrowRight') {
+                if (index < this.length - 1) {
+                    (_c = this.inputs[index + 1]) === null || _c === void 0 ? void 0 : _c.focus();
+                    if (this.values[index + 1]) {
+                        setTimeout(() => {
+                            var _a;
+                            (_a = this.inputs[index + 1]) === null || _a === void 0 ? void 0 : _a.setSelectionRange(0, 1);
+                        }, 0);
+                    }
+                }
+            }
+        };
+        this.createInputHandler = (index) => {
+            return (e) => this.handleInput(index, e);
+        };
+        this.createKeyDownHandler = (index) => {
+            return (e) => this.handleKeyDown(index, e);
+        };
+        this.handlePaste = async (event) => {
+            var _a;
+            if (this.readonly)
+                return;
+            event.preventDefault();
+            const pasted = event.clipboardData.getData('text').slice(0, this.length);
+            this.values = pasted.split('').concat(new Array(this.length).fill('')).slice(0, this.length);
+            this.values = [...this.values];
+            this.rChange.emit({ value: this.values.join('') });
+            const nextEmpty = this.values.findIndex(v => !v);
+            const nextIndex = nextEmpty === -1 ? this.length - 1 : nextEmpty;
+            (_a = this.inputs[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+        this.onHostClick = () => {
+            const input = this.firstEmptyInput || this.inputs[this.inputs.length - 1];
+            input === null || input === void 0 ? void 0 : input.focus();
+            if (this.firstEmptyInput === null) {
+                setTimeout(() => {
+                    input === null || input === void 0 ? void 0 : input.setSelectionRange(0, 1);
+                }, 0);
+            }
+        };
+        this.uniqueId = `r-input-code-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
+        this.nativeElement = null;
+        this.getValidityStateData = (element) => {
+            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) {
+                validityState = 'tooShort';
+                validityMessage = this.tooShortMessage || `All ${this.length} characters must be filled.`;
+                return { validityState, validityMessage };
+            }
+            validityState = 'valid';
+            return { validityState, validityMessage };
+        };
+        this.validateFormElement = (element) => {
+            if (element === null)
+                return;
+            if (this.isNoValidate)
+                return;
+            const { validityState, validityMessage } = this.getValidityStateData(element);
+            this.validityState = validityState;
+            this.validityMessage = validityMessage;
+            const isValid = this.validityState === 'valid';
+            this.valid = isValid;
+            this.invalid = !isValid;
+            this.rValidate.emit({
+                state: this.validityState,
+                message: this.validityMessage
+            });
+        };
+        this.onResetForm = async () => {
+            if (this.readonly)
+                return;
+            await this.reset();
+            this.validityState = null;
+            this.validityMessage = null;
+            this.invalid = null;
+            this.valid = null;
+            const { host } = this;
+            this.rReset.emit({ element: host, value: this.values.join('') });
+        };
+        this.onSubmitForm = (event) => {
+            if (this.isNoValidate)
+                return;
+            if (this.disabled)
+                return;
+            this.validateFormElement(this.nativeElement);
+            if (this.invalid) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        };
+        this.contributeToFormData = (event) => {
+            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
+     */
+    async getValue() {
+        return this.values.join('');
+    }
+    /**
+     * Resets the component by clearing all input values and focusing the first input.
+     * @returns Promise that resolves when reset is complete
+     */
+    async reset() {
+        var _a;
+        if (this.readonly)
+            return;
+        this.values = new Array(this.length).fill('');
+        (_a = this.inputs[0]) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    /**
+     * Sets provided value.
+     * */
+    async setValue(value) {
+        if (!value) {
+            this.values = new Array(this.length).fill('');
+            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 an element, displays provided message in case value is invalid. */
+    async setCustomValidity(message) {
+        this.customErrorMessage = message;
+        this.validateFormElement(this.nativeElement);
+    }
+    /**
+     * 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('');
+        this.checkAndEmitCompletion();
+    }
+    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;
+    }
+    get message() {
+        if (this.invalid && this.error) {
+            return this.error;
+        }
+        const isValid = this.valid || this.validityState === 'valid';
+        if (isValid) {
+            return null;
+        }
+        return (this.validityState && this.validityState !== 'valid' ?
+            (this.customErrorMessage || this.validityMessage || `All ${this.length} characters must be filled.`)
+            : null);
+    }
+    get ariaDescribedBy() {
+        const messageId = this.message ? `${this.uniqueId}-message` : null;
+        return this.hint ? `${this.uniqueId}-hint ${messageId}` : messageId;
+    }
+    /** Identify wrapping form element */
+    get parentFormEl() {
+        return this.host.closest('form') || document.querySelector(`#${this.form}`) || null;
+    }
+    /**
+     * Determine whether this element should be ignored
+     * during Constraint Validation API validation.
+     * */
+    get isNoValidate() {
+        var _a, _b;
+        return (((_a = this.parentFormEl) === null || _a === void 0 ? void 0 : _a.hasAttribute('novalidate')) ||
+            this.novalidate ||
+            this.disabled ||
+            ((_b = this.error) === null || _b === void 0 ? void 0 : _b.length) > 0 ||
+            false);
+    }
+    connectFormEventListeners() {
+        var _a, _b, _c;
+        (_a = this.parentFormEl) === null || _a === void 0 ? void 0 : _a.addEventListener('formdata', this.contributeToFormData);
+        (_b = this.parentFormEl) === null || _b === void 0 ? void 0 : _b.addEventListener('submit', this.onSubmitForm, { capture: true });
+        (_c = this.parentFormEl) === null || _c === void 0 ? void 0 : _c.addEventListener('reset', this.onResetForm);
+    }
+    disconnectFormEventListeners() {
+        var _a, _b, _c;
+        (_a = this.parentFormEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('formdata', this.contributeToFormData);
+        (_b = this.parentFormEl) === null || _b === void 0 ? void 0 : _b.removeEventListener('submit', this.onSubmitForm);
+        (_c = this.parentFormEl) === null || _c === void 0 ? void 0 : _c.removeEventListener('reset', this.onResetForm);
+    }
+    connectedCallback() {
+        this.connectFormEventListeners();
+    }
+    disconnectedCallback() {
+        this.disconnectFormEventListeners();
+    }
+    get hasMessage() {
+        return !!this.message;
+    }
+    get groupDescribedby() {
+        const { uniqueId, hint, hasMessage } = this;
+        if (hasMessage && hint)
+            return `${uniqueId}-message ${uniqueId}-hint`;
+        if (hasMessage)
+            return `${uniqueId}-message`;
+        if (hint)
+            return `${uniqueId}-hint`;
+        return null;
+    }
+    componentWillLoad() {
+        this.setValue(this.value);
+    }
+    render() {
+        const { form, name, novalidate, required, disabled, label, fieldIndicator, hint, uniqueId, valid, readonly } = this;
+        const inputAttrs = {
+            id: uniqueId,
+            readonly,
+            form,
+            name,
+            novalidate,
+            required,
+            disabled,
+            'aria-describedby': this.ariaDescribedBy,
+            minlength: this.length,
+            maxlength: this.length
+        };
+        const labelAttr = label ? {
+            id: `${uniqueId}-label`,
+            fieldIndicator
+        } : {};
+        return (h(Host, { key: '800791debf1f1c64b666d8933dddfc9d308ef70e', value: this.value, onClick: this.onHostClick }, h("div", { key: 'b081be06e5e46fbce4764d59ee3de65091c39464', class: "r-input-code--label-container" }, h("label", { key: '4b98d9f9ea5e318943da440c1851887a9c540d50', htmlFor: uniqueId }, label ?
+            h("r-label", Object.assign({}, labelAttr), label)
+            :
+                h("slot", { name: "label" })), h("slot", { key: 'd7949be3b99b6774529948b22a4dc9544da2057d', name: "popover" })), hint &&
+            h("r-hint", { key: 'cd46c69b0f7ca4468219bc5d5698f95a8639864b', id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { key: '3249a7836c7354a8ec8b9457d6dc0e81140710c9', class: "r-form-field" }, h("slot", { key: '9e1e2574802b9b650ba99bb971a5c0a165b0b197', name: "prefix" }), h("div", { key: '6ccba704319cc140d68a37b9bea922f62e4513b6', class: "r-input-code--container", role: "group", "aria-labelledby": `${uniqueId}-label`, "aria-describedby": this.groupDescribedby }, h("slot", { key: '06d57c63d11f5818f4cf2ccacca60aa64bd16a49', 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: '56e629b9f9c4a7cbf83e0ba10d3338cccb27579f', type: "hidden" }, inputAttrs, { value: this.values.join(''), ref: el => this.nativeElement = el })), h("div", { key: '1388dab339130521becb1a0c2d0005ba8e1b8fde', class: "r-input-code--trailing" }, this.readonly &&
+            h("r-icon", { key: 'ea1cbf74635a3480ec03ea16f41d8133a156219d', class: "r-input-code--readonly-icon", name: "pen-disabled", size: "s" }), h("slot", { key: '90801524b96b72fdb21b49f6c15d00d4809faba6', name: "trailing" }, valid &&
+            h("r-icon", { key: '709294d96d12dfff3c902bbac8656d59d0e6064b', name: "circled-check", size: "s", color: "var(--r-status-success-regular)" })))), h("slot", { key: '67195193bd3d6a8c3e7aaa3ae0b5f35274971add', name: "suffix" })), h("slot", { key: '735676c16afee87dc1b121ec4eed689645e40f84', name: "message" }, this.hasMessage &&
+            h("r-hint", { key: 'f7733e7bdaa5037fa6244fb351551c9a6d7faf95', "aria-live": "polite", id: `${uniqueId}-message`, variant: "error" }, this.message))));
+    }
+    static get is() { return "r-input-code"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["input-code.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["input-code.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "form": {
+                "type": "string",
+                "attribute": "form",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies the `id` of the `<form>` to which the element belongs."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "name": {
+                "type": "string",
+                "attribute": "name",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies a name for an input for submission within formData object."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'input-code'"
+            },
+            "length": {
+                "type": "number",
+                "attribute": "length",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": ": 4"
+                        }],
+                    "text": "Number of digits (typically 4\u20136)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "4"
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the input is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "novalidate": {
+                "type": "boolean",
+                "attribute": "novalidate",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies if element must be ignored during validation of the form elements."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "required": {
+                "type": "boolean",
+                "attribute": "required",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the input is required"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "readonly": {
+                "type": "boolean",
+                "attribute": "readonly",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Read-only mode (mirrors native `readonly`): value cannot be changed by the user,\nbut the field can still receive focus, be selected, and be submitted with a form."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "label": {
+                "type": "string",
+                "attribute": "label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": ": 'Verification code'"
+                        }],
+                    "text": "Label for accessibility."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Verification code'"
+            },
+            "fieldIndicator": {
+                "type": "string",
+                "attribute": "field-indicator",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Text of an additional marker in the label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "hint": {
+                "type": "string",
+                "attribute": "hint",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Description for accessibility"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "invalid": {
+                "type": "boolean",
+                "attribute": "invalid",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Validity indicator, serving to change UI of the component"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "error": {
+                "type": "string",
+                "attribute": "error",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The way to provide error message separately from Constraint Validation API."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "valid": {
+                "type": "boolean",
+                "attribute": "valid",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual indication of valid state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "tooShortMessage": {
+                "type": "string",
+                "attribute": "too-short-message",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": 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
+            },
+            "customErrorMessage": {
+                "type": "string",
+                "attribute": "custom-error-message",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Set custom message for `customError` property of a ValidityState object indicating whether the element's custom validity message has been set to a non-empty string by calling the element's setCustomValidity() method."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "valueMissingMessage": {
+                "type": "string",
+                "attribute": "value-missing-message",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Set custom message for `valueMissing` property of a ValidityState object (set by `required`) within Constrain Validation API"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "fullWidth": {
+                "type": "boolean",
+                "attribute": "full-width",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines if the component suppose to occupy 100% width"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "ariaCharacterLabel": {
+                "type": "string",
+                "attribute": "aria-character-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines label for each character's input.\nDefault \"Character: ${character number}\""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "value": {
+                "type": "string",
+                "attribute": "value",
+                "mutable": true,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines initial value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "inputmode": {
+                "type": "string",
+                "attribute": "inputmode",
+                "mutable": false,
+                "complexType": {
+                    "original": "InputCodeInputMode",
+                    "resolved": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\"",
+                    "references": {
+                        "InputCodeInputMode": {
+                            "location": "import",
+                            "path": "./exports",
+                            "id": "src/components/input-code/exports.ts::InputCodeInputMode"
+                        }
+                    }
+                },
+                "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": "InputCodeEnterKeyHint",
+                    "resolved": "\"done\" | \"enter\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\"",
+                    "references": {
+                        "InputCodeEnterKeyHint": {
+                            "location": "import",
+                            "path": "./exports",
+                            "id": "src/components/input-code/exports.ts::InputCodeEnterKeyHint"
+                        }
+                    }
+                },
+                "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'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "values": {},
+            "wasComplete": {},
+            "lastCompletedValue": {},
+            "validityState": {},
+            "validityMessage": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "rChange",
+                "name": "rChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits the current code value as it changes"
+                },
+                "complexType": {
+                    "original": "{ value: string }",
+                    "resolved": "{ value: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "rValidate",
+                "name": "rValidate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits event after each validation"
+                },
+                "complexType": {
+                    "original": "{\n    state: string,\n    message: string\n  }",
+                    "resolved": "{ state: string; message: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "rReset",
+                "name": "rReset",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits 'rReset' event when form containing the component was reset"
+                },
+                "complexType": {
+                    "original": "{\n    element: HTMLRInputCodeElement,\n    value: any\n  }",
+                    "resolved": "{ element: HTMLRInputCodeElement; value: any; }",
+                    "references": {
+                        "HTMLRInputCodeElement": {
+                            "location": "global",
+                            "id": "global::HTMLRInputCodeElement"
+                        }
+                    }
+                }
+            }, {
+                "method": "rComplete",
+                "name": "rComplete",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits when all segments are filled with values"
+                },
+                "complexType": {
+                    "original": "{ value: string, isComplete: boolean }",
+                    "resolved": "{ value: string; isComplete: boolean; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "getValue": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "Gets the current complete code value by joining all individual digit values.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Promise that resolves to the complete code string"
+                        }]
+                }
+            },
+            "reset": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Resets the component by clearing all input values and focusing the first input.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Promise that resolves when reset is complete"
+                        }]
+                }
+            },
+            "setValue": {
+                "complexType": {
+                    "signature": "(value: string | null) => Promise<void>",
+                    "parameters": [{
+                            "name": "value",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets provided value.",
+                    "tags": []
+                }
+            },
+            "setCustomValidity": {
+                "complexType": {
+                    "signature": "(message: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "message",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Validates an element, displays provided message in case value is invalid.",
+                    "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)"
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "values",
+                "methodName": "handleValuesChange"
+            }, {
+                "propName": "length",
+                "methodName": "handleLengthChange"
+            }];
+    }
+}