@riverty/web-components 6.3.0 → 6.3.1

package/dist/types/components/input/exports.d.ts

@@ -0,0 +1,55 @@
+export declare const inputTypeArray: readonly ["text", "email", "url", "tel", "password", "search", "number"];
+export declare const inputModeArray: readonly ["text", "tel", "email", "url", "numeric", "decimal", "search", "none"];
+export declare const inputAutocompleteArray: InputAutocomplete[];
+export declare const enterKeyHintArray: readonly ["enter", "done", "go", "next", "previous", "search", "send"];
+export declare const autocapitalizeArray: readonly ["off", "none", "on", "sentences", "words", "characters"];
+export type InputType = typeof inputTypeArray[number];
+export type InputMode = typeof inputModeArray[number];
+export type InputAutocomplete = AutoFill | 'bday' | 'sex' | 'url' | 'photo' | 'language';
+export type EnterKeyHint = typeof enterKeyHintArray[number];
+export type AutocapitalizeType = typeof autocapitalizeArray[number];
+export interface RInputInputEventDetail {
+    element: HTMLRInputElement;
+    value: any;
+}
+export interface RInputChangeEventDetail {
+    element: HTMLRInputElement;
+    value: any;
+}
+export interface RInputValidateEventDetail {
+    state: string;
+    message: string;
+}
+export interface RInputResetEventDetail {
+    element: HTMLRInputElement;
+    value: any;
+}
+export interface InputOption {
+    value: string;
+    label?: string;
+}
+/**
+ * Native HTML input attributes that can be passed through.
+ * Using Set for O(1) lookup performance instead of O(n) array includes.
+ */
+export declare const nativeInputAttributesSet: Set<string>;
+/**
+ * Special case mappings for attributes that need custom camelCase conversion
+ * beyond simple hyphen-based transformation. Maps HTML attribute name (lowercase)
+ * to JSX property name (camelCase).
+ */
+export declare const attributeCamelCaseMap: Record<string, string>;
+/**
+ * Component-specific props that should NOT be passed to the native input.
+ * Using Set for O(1) lookup performance.
+ */
+export declare const excludedAttributesSet: Set<string>;
+/**
+ * Framework/DOM-specific attributes that should never be passed through.
+ */
+export declare const frameworkAttributesSet: Set<string>;
+/**
+ * ARIA attributes that are already handled explicitly by the component
+ * and should not be passed through to avoid conflicts.
+ */
+export declare const managedAriaAttributesSet: Set<string>;

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

@@ -0,0 +1,365 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { InputAutocomplete, InputMode, InputType, EnterKeyHint, AutocapitalizeType } from './exports';
+export declare class RInput {
+    host: HTMLRInputElement;
+    private static autofocusHandled;
+    /**
+     * ID of the form this input is associated with (mirrors native `form` attribute).
+     * Use when the input is not a direct descendant of the target form element.
+     */
+    form?: string;
+    /**
+     * If set, the field is skipped by built‑in (Constraint Validation API) validation logic.
+     * Does not prevent custom validation you may trigger manually.
+     */
+    novalidate?: boolean;
+    /**
+     * Input type (e.g. `text`, `email`, `number`, `password`).
+     * See HTMLInputElement `type` for supported values.
+     */
+    type: InputType;
+    /**
+     * Name used when contributing the value to form submission (`FormData` / POST body).
+     */
+    name: string;
+    /**
+     * Current value. Mutable: can be changed programmatically or through user input.
+     */
+    value?: string | null;
+    /**
+     * Placeholder hint text shown when the field is empty and unfocused.
+     */
+    placeholder?: string;
+    /**
+     * Label text describing the field. Provide for accessibility (or use the `label` slot).
+     */
+    label: string;
+    /**
+     * Small marker string appended to the label (e.g. “Optional”, localized markers, etc.).
+     */
+    fieldIndicator?: string;
+    /**
+     * When true, hides visual label & messages (for internal layout use; accessibility still preserved).
+     */
+    internal?: boolean;
+    /**
+     * Optional contextual help text displayed beneath the field.
+     */
+    hint?: string;
+    /**
+     * When true, stretches the component horizontally to fill its container.
+     */
+    fullWidth?: boolean;
+    /**
+     * Explicit valid state override (when set manually).
+     */
+    valid?: boolean;
+    /**
+     * Explicit invalid state override (when set manually).
+     */
+    invalid?: boolean;
+    /**
+     * Manual error message independent of native validation messages.
+     * When set, native validation messages are suppressed.
+     */
+    error?: string;
+    /**
+     * Disables the field (non-interactive, excluded from form submission).
+     */
+    disabled?: boolean;
+    /**
+     * Marks the field as required; failing to provide a value triggers `valueMissing`.
+     */
+    required?: boolean;
+    /** Maximum character length (enforced by native input). */
+    maxlength?: number;
+    /** Minimum character length (validation only). */
+    minlength?: number;
+    /** Minimum numeric/date value (for supported types). */
+    min?: number;
+    /** Maximum numeric/date value (for supported types). */
+    max?: number;
+    /** Regex pattern the value must match (string form). */
+    pattern?: any;
+    /** Step interval for numeric/date input types. */
+    step?: number;
+    /** Custom message for `valueMissing`. */
+    valueMissingMessage?: string;
+    /** Custom message for `typeMismatch`. */
+    typeMismatchMessage?: string;
+    /** Custom message for `patternMismatch`. */
+    patternMismatchMessage?: string;
+    /** Custom message for `tooLong`. */
+    tooLongMessage?: string;
+    /** Custom message for `tooShort`. */
+    tooShortMessage?: string;
+    /** Custom message for `rangeOverflow`. */
+    rangeOverflowMessage?: string;
+    /** Custom message for `rangeUnderflow`. */
+    rangeUnderflowMessage?: string;
+    /** Custom message for `stepMismatch`. */
+    stepMismatchMessage?: string;
+    /**
+     * Custom message for `badInput` (conversion / parsing failure).
+     */
+    badInputMessage?: string;
+    /**
+     * Custom message for `customError` (applies when set via `setCustomValidity()` logic internally).
+     */
+    customErrorMessage?: string;
+    /**
+     * Native `autocomplete` hint for browsers / password managers.
+     */
+    autocomplete?: InputAutocomplete;
+    /**
+     * Hint for the action label/icon on the virtual keyboard's enter key.
+     * Use cases:
+     * - `enter`: Default, generic newline/submit action
+     * - `done`: Finishes current input session (e.g., last field in a form)
+     * - `go`: Navigates to URL input target (e.g., URL bar)
+     * - `next`: Advances to next input field in a sequence
+     * - `previous`: Goes back to previous input field
+     * - `search`: Submits a search query
+     * - `send`: Sends a message (e.g., chat, email)
+     */
+    enterkeyhint?: EnterKeyHint;
+    /**
+     * Controls browser spell-checking for text input.
+     * When true, enables spell-checking; when false, disables it.
+     * Browser default behavior applies when not specified.
+     */
+    spellcheck?: boolean;
+    /**
+     * Controls automatic capitalization of text input on mobile devices.
+     * - `off` or `none`: No automatic capitalization
+     * - `on` or `sentences`: Capitalize first letter of each sentence (default for most text inputs)
+     * - `words`: Capitalize first letter of each word
+     * - `characters`: Capitalize all characters
+     */
+    autocapitalize?: AutocapitalizeType;
+    /**
+     * Safari-specific password rules for strong password generation (password inputs only).
+     * Format: "minlength: X; required: lower; required: upper; required: digit; required: special;"
+     * This attribute is Safari-specific and will be ignored by other browsers.
+     * See: https://developer.apple.com/documentation/security/password_autofill/customizing_password_autofill_rules
+     */
+    passwordrules?: string;
+    /**
+     * Automatically focus the input when it is first rendered.
+     * Mirrors native `autofocus` attribute behavior. Avoid using multiple times per page.
+     */
+    autofocus?: boolean;
+    /**
+     * Read-only mode (mirrors native `readonly`): value cannot be changed by the user,
+     * but the field can still receive focus, be selected, and be submitted with a form.
+     */
+    readonly?: boolean;
+    /** Internal state for options extracted from slotted datalist */
+    private slottedOptions;
+    /**
+     * Hint to the browser about which keyboard to display on mobile devices.
+     */
+    inputmode?: InputMode;
+    /**
+     * When `true` field renders valid/invalid marker within.
+    */
+    validityMarker: boolean;
+    /** Validity state passed from validateFormElement function after validation */
+    validityState: string;
+    /** Validity message passed from validateFormElement function after validation */
+    validityMessage: string;
+    /** Defines if the component has been touched by user */
+    touched: boolean;
+    /** Defines if the value has been changed by user interaction */
+    dirty: boolean;
+    /** Private flag to prevent validation during reset */
+    private isResetting;
+    /**
+     * Emitted after each validation attempt (native or triggered logic).
+     */
+    rValidate: EventEmitter<{
+        state: string;
+        message: string;
+    }>;
+    /**
+     * Emitted on each user input (mirrors native `input` semantics).
+     */
+    rInput: EventEmitter<{
+        element: HTMLRInputElement;
+        value: any;
+    }>;
+    /**
+     * Emitted when the input loses focus.
+     */
+    rBlur: EventEmitter;
+    /**
+     * Emitted when the input receives focus.
+     */
+    rFocus: EventEmitter;
+    /**
+     * Emitted when the committed value changes (mirrors native `change` semantics).
+     */
+    rChange: EventEmitter<{
+        element: HTMLRInputElement;
+        value: any;
+    }>;
+    /**
+     * Emitted when a parent form is reset and the field restores its initial value.
+     */
+    rReset: EventEmitter<{
+        element: HTMLRInputElement;
+        value: any;
+    }>;
+    /**
+     * Emitted when the input is about to be modified (mirrors native `beforeinput` semantics).
+     * Use for intercepting and preventing input before it occurs.
+     */
+    rBeforeInput: EventEmitter<InputEvent>;
+    /**
+     * Emitted when the input fails validation (mirrors native `invalid` semantics).
+     */
+    rInvalid: EventEmitter<Event>;
+    /**
+     * Emitted when a key is pressed down (mirrors native `keydown` semantics).
+     */
+    rKeyDown: EventEmitter<KeyboardEvent>;
+    /**
+     * Emitted when a key is released (mirrors native `keyup` semantics).
+     */
+    rKeyUp: EventEmitter<KeyboardEvent>;
+    /**
+     * Emitted when text is selected (mirrors native `select` semantics).
+     */
+    rSelect: EventEmitter<Event>;
+    /**
+     * Programmatically focus the native input element.
+     */
+    setFocus(): Promise<void>;
+    /**
+     * Programmatically remove focus from the native input.
+     */
+    setBlur(): Promise<void>;
+    /**
+     * Select (highlight) the entire current input value.
+     */
+    select(): Promise<void>;
+    /**
+     * Get the start index of the current text selection (or null if unavailable).
+     */
+    getSelectionStart(): Promise<number | null>;
+    /**
+     * Get the end index of the current text selection (or null if unavailable).
+     */
+    getSelectionEnd(): Promise<number | null>;
+    /**
+     * Set a selection (or caret) range within the value.
+     * @param start Start index (inclusive)
+     * @param end End index (exclusive)
+     * @param direction Selection direction (browser hint)
+     */
+    setSelectionRange(start: number, end: number, direction?: 'forward' | 'backward' | 'none'): Promise<void>;
+    /**
+     * Retrieve the current value (returns empty string if unset).
+     */
+    getValue(): Promise<string>;
+    /**
+     * Set the current value programmatically (does not fire native input/change automatically).
+     */
+    setValue(value: string): Promise<void>;
+    /** Validates an element, displays provided message in case value is invalid. */
+    setCustomValidity(message: string): Promise<void>;
+    /**
+     * Validates the input without triggering UI and returns a boolean indicating its validity.
+     * @returns A boolean indicating whether the input is valid.
+     */
+    checkValidity(): Promise<boolean>;
+    /**
+     * Gets the touched state (whether user has interacted with the input)
+     */
+    isTouched(): Promise<boolean>;
+    /**
+     * Gets the dirty state (whether value has been changed by user)
+     */
+    isDirty(): Promise<boolean>;
+    /**
+     * Resets touched and dirty states to pristine (untouched/clean)
+     */
+    markAsPristine(): Promise<void>;
+    private nativeElement;
+    /**
+     * Helper to set the native input element ref and apply boolean properties
+     * that don't get properly set through JSX attribute spreading.
+     */
+    private setNativeInputRef;
+    private uniqueId;
+    private get datalistId();
+    /**
+     * Initial attributes state
+     * */
+    private initial;
+    /**
+     * Cache for passthrough attributes to avoid recomputing on every render.
+     * Cleared when attributes might have changed.
+     */
+    private passthroughAttrsCache;
+    /**
+     * Checks if an attribute should be excluded from passthrough.
+     */
+    private shouldExcludeAttribute;
+    /**
+     * Collects native HTML input attributes from the host element that aren't
+     * already handled by explicit props. This allows passing through attributes
+     * like 'list', 'multiple', 'size', etc. without creating explicit props.
+     * Optimized with Set lookups (O(1)) and caching.
+     */
+    private collectNativeAttributes;
+    /** Identify wrapping form element */
+    private get parentFormEl();
+    private get ariaDescribedBy();
+    private get hasError();
+    private get hasValidationError();
+    private get hasMessage();
+    /**
+     * Determine whether this element should be ignored
+     * during Constraint Validation API validation.
+     * */
+    private get isNoValidate();
+    private get hasTrailingSlot();
+    private getValidityStateData;
+    private get validEmailPattern();
+    private validateFormElement;
+    private onInput;
+    private onChange;
+    private onBlur;
+    private onFocus;
+    private onBeforeInput;
+    private onInvalid;
+    private onKeyDown;
+    private onKeyUp;
+    private onSelect;
+    componentWillLoad(): void;
+    /**
+     * Extracts options from a slotted <datalist> element.
+     * Supports both default slot and slot="datalist" usage.
+     */
+    private extractSlottedDatalistOptions;
+    /**
+     * Parses options from a HTMLDataListElement into InputOption array.
+     */
+    private parseDatalistOptions;
+    private contributeToFormData;
+    private connectFormEventListeners;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private datalistObserver;
+    private setupDatalistObserver;
+    private disconnectDatalistObserver;
+    private onResetForm;
+    private onSubmitForm;
+    private handleKeyup;
+    private disconnectFormEventListeners;
+    private handleClick;
+    handleValueChange(): void;
+    handleTypeChange(): void;
+    render(): any;
+}

package/dist/types/components/input-code/exports.d.ts

@@ -0,0 +1,4 @@
+export declare const InputCodeInputModeArray: readonly ["none", "text", "tel", "url", "email", "numeric", "decimal", "search"];
+export declare const InputCodeEnterKeyHintArray: readonly ["enter", "done", "go", "next", "previous", "search", "send"];
+export type InputCodeInputMode = typeof InputCodeInputModeArray[number];
+export type InputCodeEnterKeyHint = typeof InputCodeEnterKeyHintArray[number];

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

@@ -0,0 +1,177 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { InputCodeInputMode, InputCodeEnterKeyHint } from './exports';
+export declare class InputCode {
+    host: HTMLRInputCodeElement;
+    /** Specifies the `id` of the `<form>` to which the element belongs. */
+    form?: string;
+    /** Specifies a name for an input for submission within formData object. */
+    name: string;
+    /** Number of digits (typically 4–6).
+     * @default: 4
+     */
+    length: number;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Specifies if element must be ignored during validation of the form elements. */
+    novalidate?: boolean;
+    /** Whether the input is required */
+    required?: boolean;
+    /**
+     * Read-only mode (mirrors native `readonly`): value cannot be changed by the user,
+     * but the field can still receive focus, be selected, and be submitted with a form.
+     */
+    readonly?: boolean;
+    /** Label for accessibility.
+     * @default: 'Verification code'
+     */
+    label: string;
+    /** Text of an additional marker in the label */
+    fieldIndicator?: string;
+    /** Description for accessibility */
+    hint?: string;
+    /** Validity indicator, serving to change UI of the component */
+    invalid?: boolean;
+    /** The way to provide error message separately from Constraint Validation API. */
+    error?: string;
+    /** Visual indication of valid state */
+    valid?: boolean;
+    /** Set custom message for `tooShort` property of a ValidityState object (set by `minlength`) within Constrain Validation API */
+    tooShortMessage?: string;
+    /** 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. */
+    customErrorMessage?: string;
+    /** Set custom message for `valueMissing` property of a ValidityState object (set by `required`) within Constrain Validation API */
+    valueMissingMessage?: string;
+    /** Defines if the component suppose to occupy 100% width */
+    fullWidth?: boolean;
+    /** Defines label for each character's input.
+     * Default "Character: ${character number}" */
+    ariaCharacterLabel?: string;
+    /** Defines initial value */
+    value?: string | null;
+    /** Specifies the input mode for the virtual keyboard on mobile devices. Default is 'numeric' for OTP codes.
+     * @default: 'numeric'
+     */
+    inputmode?: InputCodeInputMode;
+    /** Specifies the enter key hint for the virtual keyboard. Default is 'done' for OTP completion.
+     * @default: 'done'
+    */
+    enterkeyhint?: InputCodeEnterKeyHint;
+    /** Specifies the autocomplete behavior. Default is 'one-time-code' for SMS OTP autofill.
+     * @default: 'one-time-code'
+    */
+    autocomplete?: string;
+    /** Emits the current code value as it changes */
+    rChange: EventEmitter<{
+        value: string;
+    }>;
+    /** Emits event after each validation */
+    rValidate: EventEmitter<{
+        state: string;
+        message: string;
+    }>;
+    /** Emits 'rReset' event when form containing the component was reset */
+    rReset: EventEmitter<{
+        element: HTMLRInputCodeElement;
+        value: any;
+    }>;
+    /** Emits when all segments are filled with values */
+    rComplete: EventEmitter<{
+        value: string;
+        isComplete: boolean;
+    }>;
+    /** Holds the current values of each input box */
+    values: string[];
+    /** Tracks whether the component was previously in a complete state */
+    wasComplete: boolean;
+    /** Tracks the last completed value to detect changes */
+    lastCompletedValue: string;
+    /** Validity state passed from validateFormElement function after validation */
+    validityState: string | null;
+    /** Validity message passed from validateFormElement function after validation */
+    validityMessage: string | null;
+    private inputs;
+    /**
+     * 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
+     */
+    private validateSegmentIndex;
+    /**
+     * Gets the current complete code value by joining all individual digit values.
+     * @returns Promise that resolves to the complete code string
+     */
+    getValue(): Promise<string>;
+    /**
+     * Resets the component by clearing all input values and focusing the first input.
+     * @returns Promise that resolves when reset is complete
+     */
+    reset(): Promise<void>;
+    /**
+     * Sets provided value.
+     * */
+    setValue(value: string | null): Promise<void>;
+    /** Validates an element, displays provided message in case value is invalid. */
+    setCustomValidity(message: string): Promise<void>;
+    /**
+     * Validates the input code without triggering UI and returns a boolean indicating its validity.
+     * @returns A boolean indicating whether the input code is valid.
+     */
+    checkValidity(): Promise<boolean>;
+    /**
+     * 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
+     */
+    focusSegment(index: number): Promise<void>;
+    /**
+     * 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)
+     */
+    getSegmentValue(index: number): Promise<string>;
+    /**
+     * 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)
+     */
+    setSegmentValue(index: number, value: string): Promise<void>;
+    handleValuesChange(): void;
+    handleLengthChange(newLength: number): void;
+    /**
+     * 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
+     */
+    private checkAndEmitCompletion;
+    private handleInput;
+    private handleKeyDown;
+    private createInputHandler;
+    private createKeyDownHandler;
+    private handlePaste;
+    private get firstEmptyInput();
+    private onHostClick;
+    private uniqueId;
+    private nativeElement;
+    private get message();
+    private get ariaDescribedBy();
+    /** Identify wrapping form element */
+    private get parentFormEl();
+    /**
+     * Determine whether this element should be ignored
+     * during Constraint Validation API validation.
+     * */
+    private get isNoValidate();
+    private getValidityStateData;
+    private validateFormElement;
+    private onResetForm;
+    private onSubmitForm;
+    private contributeToFormData;
+    private connectFormEventListeners;
+    private disconnectFormEventListeners;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private get hasMessage();
+    private get groupDescribedby();
+    componentWillLoad(): void;
+    render(): any;
+}

package/dist/types/components/input-date/exports.d.ts

@@ -0,0 +1,5 @@
+export interface DateStructure {
+    day?: string;
+    month?: string;
+    year?: string;
+}