@riverty/web-components 6.2.1 → 6.3.0

package/dist/cjs/r-input-code.cjs.entry.js

@@ -1,432 +0,0 @@
-'use strict';
-
-var index = require('./index-BnETQtSf.js');
-var formData = require('./formData-B2DZyLxP.js');
-
-const inputCodeCss = ":host{display:inline-flex;flex-direction:column;vertical-align:top;--r-label--margin-bottom:0}:host slot{display:contents}:host slot[name=trailing]{display:flex;margin-left:auto}:host .r-form-field{display:flex;align-items:center;justify-content:start;gap:1rem}:host([readonly]:not([readonly=false])){--r-input-code--container--background-color:var(--r-background-soft, #f3f1f0);--r-input-code--container--border-color:transparent transparent var(--r-border-soft, #686868) transparent;--r-input-code--container--cursor:text}:host(:hover:not([disabled]:not([disabled=false])):not([readonly]:not([readonly=false]))){--r-input-code--container--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host(:focus-within:not([disabled]:not([disabled=false]))){--r-input-code--container--box-shadow:0 0 0 6px var(--r-border-focused-outlined);--r-input-code--container--outline:2px solid var(--r-border-focused);--r-input-code--container--outline-offset:2px}:host(:active:not([disabled]:not([disabled=false])):not([readonly]:not([readonly=false]))){--r-input-code--container--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12))}:host([full-width]:not([full-width=false])){display:flex}:host([disabled]:not([disabled=false])){cursor:not-allowed;--r-input-code--container--opacity:0.4;--r-input-code--container--cursor:not-allowed;--r-input-code--container--pointer-events:none;--r-input-code--container--background-color:transparent}:host([invalid]:not([invalid=false])){--r-input-code--container--border-color:var(--r-status-error-regular, #b00c15);--r-input-code--container--background-color:var(--r-status-error-soft, #fef6f6)}.r-input-code--label-container{display:var(--r-input-code--label-container--display, flex);gap:var(--r-input-code--label-container--gap, var(--r-spacing-100, 1rem));align-items:var(--r-input-code--label-container--align-items, center);justify-content:var(--r-input-code--label-container--align-items, space-between)}.r-input-code--label-container ::slotted([slot=popover]){display:var(--r-input-code--popover--display, inline-flex);height:var(--r-input-code--popover--height, var(--r-spacing-150, 1.5));align-items:var(--r-input-code--popover--align-items, center);justify-content:var(--r-input-code--popover--justify-content, center);margin-right:var(--r-input-code--popover--margin-right, -0.25rem);--r-popover--trigger--min-width:var(--r-input-code--popover-trigger--min-width, var(--r-spacing-150, 1.5));--r-popover--trigger--min-height:var(--r-input-code--popover--trigger--min-height, var(--r-spacing-150, 1.5))}.r-input-code--container{position:var(--r-input-code--container--position, relative);display:var(--r-input-code--container--display, flex);align-items:var(--r-input-code--container--align-items, center);gap:var(--r-input-code--container--gap, 0.625em);height:var(--r-input-code--container--height, var(--r-spacing-275, 2.75rem));background-color:var(--r-input-code--container--background-color, var(--r-background-softest, #fff));border-width:var(--r-input-code--container--border-width, 1px);border-style:var(--r-input-code--container--border-style, solid);border-color:var(--r-input-code--container--border-color, var(--r-border-soft, #686868));box-sizing:var(--r-input-code--container--box-sizing, border-box);box-shadow:var(--r-input-code--container--box-shadow, none);outline:var(--r-input-code--container--outline, none);outline-offset:var(--r-input-code--container--outline-offset, 0);padding-top:var(--r-input-code--container--padding-top, 0.8em);padding-right:var(--r-input-code--container--padding-right, 0.7em);padding-bottom:var(--r-input-code--container--padding-bottom, 0.8em);padding-left:var(--r-input-code--container--padding-left, 0.7em);opacity:var(--r-input-code--container--opacity, 1);pointer-events:var(--r-input-code--container--pointer-events, auto);line-height:var(--r-input-code--container--line-height, 1);cursor:var(--r-input-code--container--cursor, inherit);margin-top:var(--r-input-code--container--margin-top, var(--r-spacing-025, 0.25rem));margin-bottom:var(--r-input-code--container--margin-bottom, var(--r-spacing-025, 0.25rem))}.r-input-code--input{width:var(--r-input-code--input--width, 0.725rem);outline:var(--r-input-code--input--outline, none);font-size:var(--r-input-code--input--font-size, 1rem);text-align:var(--r-input-code--input--text-align, center);background-color:var(--r-input-code--input--background-color, transparent);border-width:var(--r-input-code--input--border-width, 0 0 1px 0);border-style:var(--r-input-code--input--border-style, solid);border-color:var(--r-input-code--input--border-color, var(--r-text-soft))}.r-input-code--trailing{display:var(--r-input-code--trailing--display, flex);margin-left:var(--r-input-code--trailing--margin-left, auto);align-items:var(--r-input-code--trailing--align-items, center);gap:var(--r-input-code--trailing--gap, 0.625rem)}.r-input-code--readonly-icon{color:var(--r-input-code--readonly-icon--color, var(--r-icon-soft, #686868))}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
-
-const InputCode = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.rChange = index.createEvent(this, "rChange");
-        this.rValidate = index.createEvent(this, "rValidate");
-        this.rReset = index.createEvent(this, "rReset");
-        this.rComplete = index.createEvent(this, "rComplete");
-        /** 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) => {
-            formData.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 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 (index.h(index.Host, { key: 'c7e8e45bf54b060eaeec903857ec842f5f5909ff', value: this.value, onClick: this.onHostClick }, index.h("div", { key: '965e94721f83a4e0c2a21d6ead371085b5faefef', class: "r-input-code--label-container" }, index.h("label", { key: '4a24884c394cbdf28f98f71dd166c7f02fd6b240', htmlFor: uniqueId }, label ?
-            index.h("r-label", Object.assign({}, labelAttr), label)
-            :
-                index.h("slot", { name: "label" })), index.h("slot", { key: '471642b0c4c01243fb26eacec958418ef09af962', name: "popover" })), hint &&
-            index.h("r-hint", { key: 'efdb3d68d72666260bce9d6e9e6ba9853225a473', id: `${uniqueId}-hint`, role: "note" }, hint), index.h("div", { key: '2dc16569529ac0ec9e95cfef8f353efbf2f0e929', class: "r-form-field" }, index.h("slot", { key: '7e3d7abc1931537ce66f6bd1c716f4046f2ca06e', name: "prefix" }), index.h("div", { key: '0e29ba435fe9de7b87cad793be8dc11301bf552e', class: "r-input-code--container", role: "group", "aria-labelledby": `${uniqueId}-label`, "aria-describedby": this.groupDescribedby }, index.h("slot", { key: 'eef6bda22af5d2e21f442bb010d79a60a05b4d69', name: "leading" }), Array.from({ length: this.length }).map((_, i) => (index.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 }))), index.h("input", Object.assign({ key: 'a2185f3e1b5f83e55fa5997662b55002bb251b4c', type: "hidden" }, inputAttrs, { value: this.values.join(''), ref: el => this.nativeElement = el })), index.h("div", { key: '7586c976c27a2c42e9d76c1cf6724ad93beac0ae', class: "r-input-code--trailing" }, this.readonly &&
-            index.h("r-icon", { key: 'b2829cc59cd037f62e33f980fa65887e80059984', class: "r-input-code--readonly-icon", name: "pen-disabled", size: "s" }), index.h("slot", { key: 'e7b996a710b4f2f5f867295518b96952d6d60444', name: "trailing" }, valid &&
-            index.h("r-icon", { key: '3064219d8e6846df86dc934027a561f265fcc82f', name: "circled-check", size: "s", color: "var(--r-status-success-regular)" })))), index.h("slot", { key: 'de7164a83a2d8c6b8bf97583d4407cc7be7e0db4', name: "suffix" })), index.h("slot", { key: 'e12c343b123421fec18546f60ccdb2e4d6ceab5b', name: "message" }, this.hasMessage &&
-            index.h("r-hint", { key: '7fcfab6c47d841a0b695805b61f4a12a164fca3c', "aria-live": "polite", id: `${uniqueId}-message`, variant: "error" }, this.message))));
-    }
-    get host() { return index.getElement(this); }
-    static get watchers() { return {
-        "values": ["handleValuesChange"],
-        "length": ["handleLengthChange"]
-    }; }
-};
-InputCode.style = inputCodeCss;
-
-exports.r_input_code = InputCode;