@riverty/web-components 6.3.0 → 6.3.1

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

@@ -0,0 +1,174 @@
+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 an element, displays provided message in case value is invalid. */
+    setCustomValidity(message: string): 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

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

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

@@ -0,0 +1,186 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { PasswordAutocomplete } from './exports';
+export declare class InputPassword {
+    host: HTMLRInputPasswordElement;
+    /** 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;
+    /** The value of the password input */
+    value?: string | null;
+    /** Specifies a short hint that describes the expected value of a input */
+    placeholder?: string;
+    /** 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;
+    /** 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 input 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;
+    /** Maximum character length (enforced by native input). */
+    maxlength?: number;
+    /** Minimum character length (validation only). */
+    minlength?: number;
+    /** Regex pattern the value must match (string form). */
+    pattern?: string;
+    /** Set custom message for `valueMissing` property of a ValidityState object (set by `required`) within Constrain Validation API */
+    valueMissingMessage?: string;
+    /** Custom message for `tooLong`. */
+    tooLongMessage?: string;
+    /** Custom message for `tooShort`. */
+    tooShortMessage?: string;
+    /** Custom message for `patternMismatch`. */
+    patternMismatchMessage?: string;
+    /** Custom error message displayed for any validation failures in the input. */
+    customErrorMessage?: string;
+    /**
+     * Defines label for characters show button.
+     * */
+    showPasswordAriaLabel: string;
+    /**
+     * Defines label for characters hide button.
+     * */
+    hidePasswordAriaLabel: string;
+    /** Custom message when the password is shown to alert screen reader users. */
+    shownPasswordMessage: string;
+    /** Custom message when the password is hidden to alert screen reader users. */
+    hiddenPasswordMessage: string;
+    /**
+     * Safari-specific password rules for strong password generation.
+     * Format: "minlength: X; required: lower; required: upper; required: digit; required: special;"
+     * Example: "minlength: 8; required: lower; required: upper; required: digit; required: special;"
+     * Note: 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;
+    /**
+     * Password-specific autocomplete behavior for browser password managers.
+     *
+     * @example
+     * **Usage Guidelines:**
+     * - `'current-password'`: Use in login forms where users enter their existing password
+     * - `'new-password'`: Use in registration forms or password change forms for the new password field
+     * - `'off'`: Disable autofill in sensitive contexts where password managers should not suggest values
+     *
+     * **Common Patterns:**
+     * ```tsx
+     * // Login form
+     * <r-input-password autocomplete="current-password" />
+     *
+     * // Registration form
+     * <r-input-password autocomplete="new-password" />
+     *
+     * // Sensitive form (e.g., admin panel)
+     * <r-input-password autocomplete="off" />
+     * ```
+     */
+    autocomplete?: PasswordAutocomplete;
+    showed: boolean;
+    /** Validity state passed from validateFormElement function after validation */
+    validityState: string;
+    /** Validity message passed from validateFormElement function after validation */
+    validityMessage: string;
+    passwordVisibilityTimer: any;
+    /** Emits event after each validation */
+    rValidate: EventEmitter<{
+        state: string;
+        message: string;
+    }>;
+    /** Emits 'rInput' event when value of the component is changing */
+    rInput: EventEmitter<{
+        element: HTMLRInputPasswordElement;
+        value: any;
+    }>;
+    /** Emits 'rChange' event when value of the component has been changed */
+    rChange: EventEmitter<{
+        element: HTMLRInputPasswordElement;
+        value: any;
+    }>;
+    /** Emits 'rReset' event when form containing the component was reset */
+    rReset: EventEmitter<{
+        element: HTMLRInputPasswordElement;
+        value: any;
+    }>;
+    /** Emits 'rVisibilityChange' event when password visibility is toggled */
+    rVisibilityChange: EventEmitter<{
+        element: HTMLRInputPasswordElement;
+        visible: boolean;
+    }>;
+    /**
+     * Toggle password text visibility.
+     * */
+    toggleShow(): Promise<void>;
+    /**
+     * Show password text.
+     * */
+    showPassword(): Promise<void>;
+    /**
+     * Hide password text.
+     * */
+    hidePassword(): Promise<void>;
+    /** Get the input value */
+    getValue(): Promise<string>;
+    /** Set the input value */
+    setValue(value: string): Promise<void>;
+    /** Validates an element, displays provided message in case value is invalid. */
+    setCustomValidity(message: string): Promise<void>;
+    /**
+     * Validates the input password without triggering UI and returns a boolean indicating its validity.
+     * @returns A boolean indicating whether the input password is valid.
+     */
+    checkValidity(): Promise<boolean>;
+    /**
+     * Initial attributes state
+     * */
+    private initial;
+    private nativeElement;
+    private passwordVisibilityChangeAlertContainer?;
+    /** Identify wrapping form element */
+    private get parentFormEl();
+    /**
+     * Determine whether this element should be ignored
+     * during Constraint Validation API validation.
+     * */
+    private get isNoValidate();
+    private get hasError();
+    private get hasValidationError();
+    private get hasMessage();
+    private onShowClick;
+    private alertOnPasswordVisibilityChange;
+    private onInput;
+    private onChange;
+    private getValidityStateData;
+    private validateFormElement;
+    componentWillLoad(): void;
+    private contributeToFormData;
+    private connectFormEventListeners;
+    private disconnectFormEventListeners;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private onResetForm;
+    private onSubmitForm;
+    private handleKeyup;
+    private handleBlur;
+    render(): any;
+}

package/dist/types/components/input-phone-number/input-phone-number.d.ts

@@ -0,0 +1,130 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class InputPhoneNumber {
+    host: HTMLRInputPhoneNumberElement;
+    /** Phone number value */
+    value?: string;
+    /** 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;
+    /**  The label for the phone number. */
+    label: string;
+    /** An optional field indicator for the label. */
+    fieldIndicator?: string;
+    /** Optional hint giving additional context to the user */
+    hint?: string;
+    /** Specifies a name for an input for submitting within formData object. */
+    name: string;
+    /** Label for phone input  */
+    inputLabel?: string;
+    /** Label for countryCode code  */
+    countryCodeLabel?: 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 phone number value is required */
+    required?: boolean;
+    /** Visual indication of valid state */
+    valid?: boolean;
+    /** Validity indicator, serving to change UI of the component */
+    invalid?: boolean;
+    /** Custom validation error message */
+    error?: 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;
+    /** Custom error message displayed when phone number is not valid. */
+    invalidPhoneNumberMessage?: string;
+    /** Defines if the component suppose to occupy 100% width */
+    fullWidth?: boolean;
+    fullPhoneNumber: string;
+    phoneNumber: string;
+    validityState: string;
+    validityMessage: string;
+    /** Emits 'rInput' event when value of the component is changing */
+    rInput: EventEmitter<{
+        element: HTMLRInputPhoneNumberElement;
+        value: string;
+        phoneNumber: string;
+        countryCode: string;
+    }>;
+    /** Emits 'rChange' event when value of the component has been changed */
+    rChange: EventEmitter<{
+        element: HTMLRInputPhoneNumberElement;
+        value: string;
+        countryCode: string;
+        phoneNumber: 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: HTMLRInputPhoneNumberElement;
+        value: string;
+    }>;
+    /** Returns the element value. */
+    getValue(): Promise<string>;
+    /** Set the element value. */
+    setValue(value: string): Promise<void>;
+    /** Validates an element, displays provided message in case value is invalid. */
+    setCustomValidity(message: string): Promise<void>;
+    /**
+     * Validates the input phone number without triggering UI and returns a boolean indicating its validity.
+     * @returns A boolean indicating whether the input phone number is valid.
+     */
+    checkValidity(): Promise<boolean>;
+    /** Check validity and reveal validation state. */
+    reportValidity(): Promise<boolean>;
+    /** Reset phone number input to its initial state */
+    reset(): Promise<void>;
+    watchValueChange(value: string): void;
+    handleDisabledChange(): void;
+    handleRequiredChange(): void;
+    handleReadonlyChange(): void;
+    handleLabelChange(): void;
+    private uniqueId;
+    /**
+     * Initial attributes state
+     * */
+    private initial;
+    private nativeElement;
+    /** Identify wrapping form element */
+    private get parentFormEl();
+    private get countryCodeElement();
+    private get countryCode();
+    private get ariaDescribedBy();
+    private get hasError();
+    private get hasValidationError();
+    private get hasMessage();
+    private get errorMessage();
+    /**
+     * Determine whether this element should be ignored
+     * during Constraint Validation API validation.
+     * */
+    private get isNoValidate();
+    private updateValues;
+    private setCountryCodeElementAttributes;
+    private getPhoneValidationResult;
+    private handleOnInput;
+    private handleInputOnChange;
+    private handleValueChange;
+    private validateFormElement;
+    private getValidityStateData;
+    private onSubmitForm;
+    private contributeToFormData;
+    private onResetForm;
+    private connectEventListeners;
+    private disconnectEventListeners;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    render(): any;
+}

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

@@ -0,0 +1,9 @@
+/**
+ * Utility component, mostly used internally in other design system components,
+ * for consistent presentation of text with optional associated tooltip.
+ */
+export declare class RLabel {
+    /** Text of an additional marker */
+    fieldIndicator?: string;
+    render(): any;
+}

package/dist/types/components/list-item/list-item/exports.d.ts

@@ -0,0 +1,4 @@
+export declare const TrailingTextAlignmentArray: readonly ["top", "center", "bottom"];
+export declare const listItemVariantArray: readonly ["list-item", "navitem", "subitem"];
+export type TrailingTextAlignment = typeof TrailingTextAlignmentArray[number];
+export type ListItemVariant = typeof listItemVariantArray[number];

package/dist/types/components/list-item/list-item/list-item.d.ts

@@ -0,0 +1,61 @@
+import { IconName } from '../../icon/exports';
+import { TrailingTextAlignment, ListItemVariant } from './exports';
+export declare class RListItem {
+    host: HTMLRListItemElement;
+    /**
+     * The main text or headline displayed in the text slot (2nd slot) of the list item.
+    */
+    headline?: string;
+    /** Secondary text displayed below the headline (2nd slot), used for additional details or context. */
+    description?: string;
+    /** When enabled, the description is limited to a single line and truncated with an ellipsis if it overflows. */
+    truncateDescription?: boolean;
+    /** Specifies the name of the icon to display in the leading slot (1st slot) of the list item. */
+    leadingIcon?: IconName;
+    /** Defines an icon source to be presented in leading slot */
+    leadingIconSrc?: string;
+    /** Defines if the leading icon shall become hidden. */
+    hideLeadingIcon?: boolean;
+    /** Specifies the name of the icon to display in the trailing slot (3rd slot) of the list item. */
+    trailingIcon?: IconName;
+    /** Defines an icon source to be presented in trailing slot */
+    trailingIconSrc?: string;
+    /** Text displayed in the trailing slot (3rd slot), as an alternative to an icon. */
+    trailingText?: string;
+    /** Defines the alignment style for the trailing text. */
+    alignment: TrailingTextAlignment;
+    /** If true, adds a horizontal divider below the list item. */
+    divider?: boolean;
+    /** If provided, renders the list item as a link using the <a> tag with the given href attribute. */
+    href?: string;
+    /** If true, prevents user interaction with the list item and applies a disabled style. */
+    disabled?: boolean;
+    /** Controls the style variation of the list item, such as regular or subitem. */
+    variant: ListItemVariant;
+    /** Determines whether the list item is expanded to show its subitems. It can be toggled programmatically or through user interaction. */
+    expanded: boolean;
+    /** Indicates whether the list item is currently active (e.g., represents the current page). */
+    active?: boolean;
+    /** Method to toggle sub-items of the list-item */
+    toggleSubitems(): Promise<void>;
+    /** Unique id for each subItem list */
+    private uniqueSubmitemsId;
+    private isEl;
+    private get isLeadingIcon();
+    private get isLeadingSlot();
+    private get isLeading();
+    private get isTrailingIcon();
+    private get isTrailingSlot();
+    private get isTrailing();
+    private get isTextSlot();
+    private get isHeadlineSlot();
+    private get isDescriptionSlot();
+    private get headlineContent();
+    private get hasSubitems();
+    private get subItems();
+    /** Function to set tabindex for sub-items */
+    private setTabIndexOnSubItems;
+    componentDidLoad(): void;
+    private get tagName();
+    render(): any;
+}

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

@@ -0,0 +1,6 @@
+export declare const paginationVariantArray: readonly ["minimized", "standard", "maximized"];
+export declare const paginationItemsPerPageOptionsArray: readonly [5, 10, 15, 20, 25, 50, 100];
+export declare const paginationListBoxPositionArray: readonly ["top", "bottom"];
+export type PaginationVariant = typeof paginationVariantArray[number];
+export type PaginationItemsPerPageOptions = typeof paginationItemsPerPageOptionsArray[number];
+export type PaginationListBoxPosition = typeof paginationListBoxPositionArray[number];