@riverty/web-components 6.2.1 → 6.3.0

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

@@ -1,10 +0,0 @@
-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];

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

@@ -1,300 +0,0 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-import type { InputAutocomplete, InputMode, InputType, EnterKeyHint, AutocapitalizeType } from './exports';
-export declare class RInput {
-    host: HTMLRInputElement;
-    /**
-     * 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;
-    /**
-     * 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;
-    }>;
-    /**
-     * 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 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;
-    private uniqueId;
-    /**
-     * Initial attributes state
-     * */
-    private initial;
-    /** 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;
-    componentWillLoad(): void;
-    private contributeToFormData;
-    private connectFormEventListeners;
-    private disconnectFormEventListeners;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private onResetForm;
-    private onSubmitForm;
-    private handleKeyup;
-    private handleClick;
-    handleValueChange(): void;
-    handleTypeChange(): void;
-    render(): any;
-}

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

@@ -1,4 +0,0 @@
-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

@@ -1,175 +0,0 @@
-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 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

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

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

@@ -1,172 +0,0 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-import { DateStructure } from "./exports";
-export declare class InputDate {
-    host: HTMLRInputDateElement;
-    /** Specifies the `id` of the `<form>` to which the element belongs */
-    form?: string;
-    /** Specifies if element must be ignored during validation of the form elements */
-    novalidate?: boolean;
-    /** Specifies a name for a input */
-    name: string;
-    /** Specifies a date format */
-    format: string;
-    /** The value of the date input */
-    value?: string | null;
-    /** The text on the label */
-    label: string;
-    /** Text of an additional marker in the label */
-    fieldIndicator?: string;
-    /**
-     * Optional hint, visually presented under the input,
-     * giving additional context to the user
-     */
-    hint?: string;
-    /** Defines if the component suppose to occupy 100% width */
-    fullWidth?: boolean;
-    /** Defines label for the input for the day */
-    dayAriaLabel: string;
-    /** Defines label for the input for the month */
-    monthAriaLabel: string;
-    /** Defines label for the input for the year */
-    yearAriaLabel: string;
-    /** Visual indication of valid state */
-    valid?: boolean;
-    /** Validity indicator, serving to change UI of the component */
-    invalid?: boolean;
-    /** The way to provide error message separately from Constraint Validation API. */
-    error?: string;
-    /** Prevents user interaction and applies disabled style */
-    disabled?: boolean;
-    /**
-     * Makes the date inputs read-only: users can focus and copy the value,
-     * but cannot modify it (value still submitted with the form unlike disabled).
-     */
-    readonly?: boolean;
-    /** Specifies that an input is required/must be filled out */
-    required?: boolean;
-    /** Set custom message for `valueMissing` property of a ValidityState object (set by `required`) */
-    valueMissingMessage?: string;
-    /** Custom error message displayed when date is not valid. */
-    invalidDateMessage?: string;
-    /**
-     * Minimum date value (in the same format as the date input).
-     * Note: When changing the `format` prop, ensure `min` is also updated to match the new format.
-     */
-    min?: string;
-    /**
-     * Maximum date value (in the same format as the date input).
-     * Note: When changing the `format` prop, ensure `max` is also updated to match the new format.
-     */
-    max?: string;
-    /** Custom error message displayed when date is before the minimum date. */
-    rangeUnderflowMessage?: string;
-    /** Custom error message displayed when date is after the maximum date. */
-    rangeOverflowMessage?: string;
-    /** Custom error message displayed for any validation failures in the input. */
-    customErrorMessage?: string;
-    /** Save current value */
-    currentValues: DateStructure;
-    /** Defines date delimiter */
-    delimiter: string;
-    /** 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;
-    /** Emits event after each validation */
-    rValidate: EventEmitter<{
-        state: string;
-        message: string;
-    }>;
-    /** Emits 'rInput' event when value of the component is changing */
-    rInput: EventEmitter<{
-        element: HTMLRInputDateElement;
-        value: any;
-    }>;
-    /** Emits 'rChange' event when value of the component has been changed */
-    rChange: EventEmitter<{
-        element: HTMLRInputDateElement;
-        value: any;
-    }>;
-    /** Emits 'rReset' event when form containing the component was reset */
-    rReset: EventEmitter<{
-        element: HTMLRInputDateElement;
-        value: any;
-    }>;
-    handleFormatChange(): void;
-    handleValueChange(): void;
-    /** Get the date value */
-    getValue(): Promise<string>;
-    /** Sets the date value */
-    setValue(value: string): Promise<void>;
-    /** Gets the current date format */
-    getFormat(): Promise<string>;
-    /** Sets the date format */
-    setFormat(format: string): Promise<void>;
-    /** 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>;
-    /**
-     * Resets the component by clearing all input values and focusing the first input.
-     * @returns Promise that resolves when reset is complete
-     */
-    reset(): Promise<void>;
-    /**
-     * Validates the input date without triggering UI and returns a boolean indicating its validity.
-     * @returns A boolean indicating whether the input date is valid.
-     */
-    checkValidity(): Promise<boolean>;
-    /**
-     * Initial attributes state
-     * */
-    private initial;
-    private uniqueId;
-    private nativeElement;
-    private get inputs();
-    private get inputOrder();
-    private get message();
-    private get hasMessage();
-    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 get firstEmptyInput();
-    private get hasTrailingSlot();
-    private getDateComponent;
-    private setDateComponent;
-    private getInputAttrs;
-    private getDelimiter;
-    private updateValue;
-    private onHostClick;
-    private onInputClick;
-    private createKeyDownHandler;
-    private handleKeyDown;
-    private handlePaste;
-    private createInputHandler;
-    private handleInput;
-    private createChangeHandler;
-    private handleChange;
-    private handleBlur;
-    private getValidityStateData;
-    private validateFormElement;
-    private onResetForm;
-    private onSubmitForm;
-    private contributeToFormData;
-    private setCurrentValues;
-    componentWillLoad(): void;
-    private connectFormEventListeners;
-    private disconnectFormEventListeners;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    render(): any;
-}

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

@@ -1 +0,0 @@
-export type PasswordAutocomplete = 'current-password' | 'new-password' | 'off';