@riverty/web-components 6.3.0 → 6.3.1

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

@@ -0,0 +1,140 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { PaginationItemsPerPageOptions, PaginationListBoxPosition, PaginationVariant } from './exports';
+export declare class RPagination {
+    /** UI: Arrows present/absent */
+    arrows: boolean;
+    /** Total amount of pages to select from */
+    totalResults: number;
+    /** Current page number */
+    pageActive: number;
+    /** Amount of items to show per page */
+    itemsPerPage: number;
+    /** Items per page options for dropdown */
+    itemsPerPageOptions: PaginationItemsPerPageOptions[];
+    /** Allows selection between different pagination styles: minimized, standard, maximized */
+    variant: PaginationVariant;
+    /** UI: Result Line and select field present/absent */
+    resultsLine: boolean;
+    /** Text to show in beginning of resultLine */
+    startText: string;
+    /** Text to display between currently shown results and total amount of results */
+    middleText: string;
+    /** Text to display after total results */
+    endText: string;
+    /** Text to show in select */
+    selectText: string;
+    /** Position of the list box */
+    listBoxPosition: PaginationListBoxPosition;
+    /** Label for Previous Page button. Important to ensure accessibility for screen reader users. */
+    previousPageButtonLabel: string;
+    /** Label for Next Page button. Important to ensure accessibility for screen reader users.*/
+    nextPageButtonLabel: string;
+    /** Label for First Page button. Important to ensure accessibility for screen reader users.*/
+    firstPageButtonLabel: string;
+    /** Label for Last Page button. Important to ensure accessibility for screen reader users.*/
+    lastPageButtonLabel: string;
+    /** Label for Page number buttons. Important to ensure accessibility for screen reader users.*/
+    pageLabel: string;
+    /** Label for Ellipsis stepper. Important to ensure accessibility for screen reader users.*/
+    ellipsisLabel: string;
+    /** Label for Items per page select. */
+    itemsPerPageLabel: string;
+    /** Signifies that currently active page was changed.
+     *
+     * Pagination state is passed as part of event `detail` property.
+     *
+     * @example
+     * const myPaginationEl = document.querySelector('r-pagination');
+     * myPaginationEl.addEventListener('rChange', (event) => {
+     *   console.log(`Page ${event.detail} was selected`)
+     * });
+     * */
+    rChange: EventEmitter<{
+        total: number;
+        active: number;
+        previous: number;
+        next: number;
+    }>;
+    /** Signifies that one of the pagination number buttons was cliked.
+     *
+     * Pagination state is passed as part of event `detail` property.
+     *
+     * @example
+     * const myPaginationEl = document.querySelector('r-pagination');
+     * myPaginationEl.addEventListener('rNumberClick', (event) => {
+     *   console.log(`Page ${event.detail} was selected`)
+     * });
+     * */
+    rNumberClick: EventEmitter<{
+        total: number;
+        active: number;
+        previous: number;
+        next: number;
+    }>;
+    /** Signifies that one of the pagination arrow buttons was cliked.
+     *
+     * Pagination state and `direction` are passed as part of event `detail` property.
+     *
+     * @example
+     * const myPaginationEl = document.querySelector('r-pagination');
+     * myPaginationEl.addEventListener('rArrowClick', (event) => {
+     *   console.log(`Page ${event.detail} was selected`)
+     * });
+     * */
+    rArrowClick: EventEmitter<{
+        total: number;
+        active: number;
+        previous: number;
+        next: number;
+        direction: string;
+    }>;
+    /** Signifies that items per page was changed.
+     *
+     * New items per page value is passed as part of event `detail` property.
+     *
+     * @example
+     * const myPaginationEl = document.querySelector('r-pagination');
+     * myPaginationEl.addEventListener('rItemsPerPageChange', (event) => {
+     *   console.log(`Items per page changed to ${event.detail}`)
+     * });
+     * */
+    rItemsPerPageChange: EventEmitter<number>;
+    private total;
+    private active;
+    private previous;
+    private next;
+    private first;
+    private last;
+    el: HTMLRPaginationElement;
+    private headerRef;
+    private footerRef;
+    private resizeObserver;
+    get isNoPreviousPage(): boolean;
+    get isNoNextPage(): boolean;
+    get isNotFirstPage(): boolean;
+    get isNotLastPage(): boolean;
+    get paginationState(): {
+        total: number;
+        active: number;
+        previous: number;
+        next: number;
+        first: number;
+        last: number;
+        arrows: boolean;
+    };
+    private setPaginationState;
+    private handleItemsPerPageChange;
+    private _activateStep;
+    /**
+     * Determines the appropriate focus target after navigation based on button states.
+     * Handles edge cases where navigation buttons become disabled.
+     */
+    private getFocusTargetAfterNavigation;
+    private handleItemChange;
+    private syncHeaderWidth;
+    handlePropsChange(): void;
+    componentWillLoad(): void;
+    disconnectedCallback(): void;
+    componentDidRender(): void;
+    render(): any;
+}

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

@@ -0,0 +1,2 @@
+export declare const panelVariantArray: readonly ["visible", "drawer", "modal"];
+export type PanelVariant = typeof panelVariantArray[number];

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

@@ -0,0 +1,56 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { PanelVariant } from './exports';
+export declare class Panel {
+    host: HTMLRPanelElement;
+    /** The `header` property is a string that specifies the header text. */
+    header?: string;
+    /** A boolean property that indicates whether the component includes a header  */
+    hasHeader: boolean;
+    /** A boolean property that indicates whether the navitems are active of not */
+    active: boolean;
+    /** A boolean property that indicates whether the component includes a footer  */
+    hasFooter: boolean;
+    /** Presentational style */
+    variant: PanelVariant;
+    /** A boolean property that determines the collapsed state of the component. The default state is `false`. */
+    collapsed: boolean;
+    /** Logo link */
+    logoLink: string;
+    /** Aria-label text for collapse */
+    labelCollapse: string;
+    /** Aria-label text for expand */
+    labelExpand: string;
+    /** Maintains the current URL or hash location within the component's state. */
+    currentLocation: string;
+    isCollapsed: boolean;
+    /** Event emitted when the panel state changes */
+    panelStateChanged: EventEmitter<{
+        collapsed: boolean;
+    }>;
+    toggleSubItems(event: MouseEvent): void;
+    /** Expand/Collapse Panel  */
+    togglePanel(): Promise<void>;
+    /** Expand Panel  */
+    expandPanel(): Promise<void>;
+    /** Collapse Panel */
+    collapsePanel(): Promise<void>;
+    handleCollapseChange(collapsed: boolean): void;
+    watchVariant(newVariant: string): void;
+    handleDocumentClick(event: MouseEvent): void;
+    private getNavLinks;
+    private get isVariantCollapsible();
+    private handleClickOutside;
+    componentWillLoad(): void;
+    private updateCurrentLocationBound;
+    componentWillRender(): void;
+    componentDidRender(): void;
+    disconnectedCallback(): void;
+    private updateCurrentLocation;
+    private highlightCurrentLink;
+    private updateLinkState;
+    private highlightParent;
+    private expandParentMenus;
+    private handleSemiCollapsedButtonClick;
+    private handleFullyCollapsedButtonClick;
+    render(): any;
+}

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

@@ -0,0 +1,6 @@
+export declare const popoverDismissModeArray: readonly ["auto", "manual"];
+export declare const popoverHorizontalArray: readonly ["left", "center", "right", "cover"];
+export declare const popoverVerticalArray: readonly ["top", "middle", "bottom", "cover"];
+export type PopoverDismissMode = typeof popoverDismissModeArray[number];
+export type PopoverHorizontal = typeof popoverHorizontalArray[number];
+export type PopoverVertical = typeof popoverVerticalArray[number];

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

@@ -0,0 +1,131 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { PopoverDismissMode, PopoverVertical, PopoverHorizontal } from './exports';
+import { PopoverTriggerAction } from '../popover-trigger/exports';
+export declare class Popover {
+    host: HTMLRPopoverElement;
+    /**
+     * Defines initial state of the popover visibility.
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * Defines the behavior of the popover's dismissing.
+     * - `auto`: The popover can be dismissed by clicking outside or pressing Esc.
+     * - `manual`: The popover requires explicit user action to close.
+     * @default "auto"
+     */
+    dismissMode: PopoverDismissMode;
+    /**
+     * Defines `aria-label` content for the dismiss button.
+     * Used for accessibility when dismiss button is present.
+     */
+    dismissAriaLabel?: string;
+    /**
+     * Defines the action that will be triggered when the trigger is clicked.
+     * - `toggle`: Toggle the popover open/closed state
+     * - `show`: Only show the popover
+     * - `hide`: Only hide the popover
+     * @default "toggle"
+     */
+    triggerAction: PopoverTriggerAction;
+    /**
+     * Defines `aria-label` content for the popover trigger.
+     * Used for accessibility to describe the trigger button.
+     */
+    triggerAriaLabel?: string;
+    /**
+     * Defines preferred placement vertically relative to the trigger.
+     * - `top`: Position above the trigger
+     * - `bottom`: Position below the trigger
+     * - `middle`: Position to the side of the trigger
+     * @default "bottom"
+     */
+    vertical: PopoverVertical;
+    /**
+     * Defines preferred placement horizontally relative to the trigger.
+     * - `left`: Align to the left of the trigger
+     * - `center`: Center align with the trigger
+     * - `right`: Align to the right of the trigger
+     * @default "center"
+     */
+    horizontal: PopoverHorizontal;
+    /** The current state of the popover's position  */
+    positionState: any;
+    /** Indicates if popover is shown */
+    isOpen: boolean;
+    /** Emits when open state changes */
+    popoverOpenChange: EventEmitter<{
+        open: boolean;
+    }>;
+    /** Emits when popover is hidden */
+    hidePopover: EventEmitter<void>;
+    /** Emits when popover is shown */
+    showPopover: EventEmitter<void>;
+    /** Emits when popover focus is set */
+    focusPopover: EventEmitter<void>;
+    /**
+     * Method to show the popover.
+     * Opens the popover, positions it correctly, and sets focus to appropriate element.
+     * @returns Promise that resolves when the popover is shown
+     */
+    show(): Promise<void>;
+    /**
+     * Method to hide the popover.
+     * Closes the popover and emits hide event.
+     * @returns Promise that resolves when the popover is hidden
+     */
+    hide(): Promise<void>;
+    /**
+     * Toggle popover visibility.
+     * Shows the popover if hidden, hides it if shown.
+     * @returns Promise that resolves when the toggle action is complete
+     */
+    toggle(): Promise<void>;
+    /**
+     * Set focus inside the popover to the most appropriate element.
+     * Priority order:
+     * 1. Dismiss button (if present)
+     * 2. Action element (if present)
+     * 3. Content element (if present)
+     * 4. Host element as fallback
+     * @returns Promise that resolves to the popover instance for chaining
+     */
+    setFocus(): Promise<this>;
+    private _getFocusable;
+    private _focusOnElement;
+    /**
+     * Remove focus from all focusable elements within the popover.
+     * Calls setBlur on all child components and the host element.
+     * @returns Promise that resolves to the popover instance for chaining
+     */
+    setBlur(): Promise<this>;
+    handleOpenChange(): void;
+    watchOpen(): void;
+    handlePreferredPositionChange(): void;
+    onKeyup(event: any): this;
+    onResize(): void;
+    onScroll(): void;
+    private get hasDismiss();
+    private get triggerRect();
+    private get boardRect();
+    get activeElement(): Element;
+    private get headlineSlotContent();
+    private readonly uniqueId;
+    private triggerElement;
+    private dismissElement;
+    private boardElement;
+    /**
+     * Gets the actual interactive element (button/link) from within r-button or r-icon-button shadow DOM,
+     * or returns the element itself if it's already interactive
+     */
+    private getInteractiveElement;
+    /** Position logic */
+    private renderPosition;
+    private onToggle;
+    private onClickDismiss;
+    private setTriggerInitialAttributes;
+    private updateTriggerAttributes;
+    componentDidLoad(): void;
+    private onKeyDown;
+    render(): any;
+}

package/dist/types/components/popover-action/popover-action.d.ts

@@ -0,0 +1,24 @@
+export declare class PopoverAction {
+    host: HTMLRPopoverActionElement;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private setButtonDefaults;
+    /**
+     * Set focus on the first focusable element within the popover action
+     * @returns {Promise<HTMLElement | null>} The focused element or null if no element is found
+     */
+    setFocus(): Promise<any>;
+    /**
+     * Remove focus from the first focusable element within the popover action
+     * @returns {Promise<void>}
+     */
+    setBlur(): Promise<void>;
+    private get activeElement();
+    /**
+     * Get all focusable elements within the popover content
+     * @returns {Promise<HTMLElement[]>} Array of focusable elements
+     */
+    getActiveElements(): Promise<HTMLElement[]>;
+    private handleSlotChange;
+    render(): any;
+}

package/dist/types/components/popover-content/popover-content.d.ts

@@ -0,0 +1,22 @@
+export declare class PopoverContent {
+    host: HTMLRPopoverContentElement;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Set focus on the first focusable element within the popover content
+     * @returns {Promise<HTMLElement | null>} The focused element or null if no element is found
+     */
+    setFocus(): Promise<any>;
+    /**
+     * Remove focus from the first focusable element within the popover content
+     * @returns {Promise<void>}
+     */
+    setBlur(): Promise<void>;
+    private get activeElement();
+    /**
+     * Get all focusable elements within the popover content
+     * @returns {Promise<HTMLElement[]>} Array of focusable elements
+     */
+    getActiveElements(): Promise<HTMLElement[]>;
+    render(): any;
+}

package/dist/types/components/popover-headline/popover-headline.d.ts

@@ -0,0 +1,6 @@
+export declare class PopoverHeadline {
+    host: HTMLRPopoverHeadlineElement;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): any;
+}

package/dist/types/components/popover-trigger/exports.d.ts

@@ -0,0 +1,2 @@
+export declare const popoverTriggerActionArray: readonly ["show", "hide", "toggle"];
+export type PopoverTriggerAction = typeof popoverTriggerActionArray[number];

package/dist/types/components/popover-trigger/popover-trigger.d.ts

@@ -0,0 +1,31 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class PopoverTrigger {
+    host: HTMLRPopoverTriggerElement;
+    /**
+     * Event emitted when the mouse enters the trigger
+     * @event triggerMouseEnter
+     * @property {HTMLRPopoverTriggerElement} element - The trigger element
+     * @property {MouseEvent} event - The mouse event
+     */
+    triggerMouseEnter: EventEmitter;
+    /**
+     * Event emitted when the mouse leaves the trigger
+     * @event triggerMouseLeave
+     * @property {HTMLRPopoverTriggerElement} element - The trigger element
+     * @property {MouseEvent} event - The mouse event
+     */
+    triggerMouseLeave: EventEmitter;
+    private get activeElement();
+    /**
+     * Set focus on the first focusable element within the trigger
+     * @returns {Promise<HTMLElement | null>} The focused element or null if no element is found
+     */
+    setFocus(): Promise<any>;
+    /**
+     * Remove focus from the first focusable element within the trigger
+     */
+    setBlur(): Promise<void>;
+    private handleMouseEnter;
+    private handleMouseLeave;
+    render(): any;
+}

package/dist/types/components/progress-bar/progress-bar.d.ts

@@ -0,0 +1,10 @@
+export declare class ProgressBar {
+    /** Progress bar value */
+    progress: number;
+    /**
+     * Sets string value for `aria-label` attribute
+     * (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)
+    */
+    rAriaLabel: string;
+    render(): any;
+}

package/dist/types/components/radio-button/radio-button.d.ts

@@ -0,0 +1,92 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { IconName } from '../icon/exports';
+/**
+ * A radio button is used to select a single option in a list.
+ */
+export declare class RadioButton {
+    /** Host DOM element */
+    host: HTMLRRadioButtonElement;
+    /** Specifies the `id` of the `<form>` to which the element belongs */
+    form?: string;
+    /** Name of element (data) within a form */
+    name?: string;
+    /** Value of element data within a form */
+    value: any;
+    /** Specifies if element must be ignored during validation of the form elements */
+    novalidate?: boolean;
+    /** Apply validation error visual style */
+    invalid?: boolean;
+    /** Defines if an element shall be validated */
+    required?: boolean;
+    /** Prevents user interaction and applies disabled style */
+    disabled?: boolean;
+    /** Automatically focus the radio button when the component is mounted. Note: Only one element per page should have autofocus set to true, following browser standard behavior. */
+    autofocus?: boolean;
+    /** When true the radio is selected */
+    checked?: boolean;
+    /**
+     * Optional hint, visually presented under the radio button,
+     * giving additional context to the user
+     */
+    hint?: string;
+    /** Custom validation error message */
+    error?: string;
+    /** Additional directions for radio-button */
+    description?: string;
+    /** Icon name from the set */
+    icon?: IconName;
+    /** Emits `rChange` event on the `<r-radio-button>` when status changes */
+    rChange: EventEmitter<{
+        element: HTMLRRadioButtonElement;
+        value: any;
+        checked: boolean;
+    }>;
+    /** Emits `rReset` event on the `<r-radio-button>` onReset changes its status */
+    rReset: EventEmitter<{
+        element: HTMLRRadioButtonElement;
+        value: any;
+        checked: boolean;
+    }>;
+    /** Emits `radioButtonClick` event on the `<r-radio-button>` on click event */
+    radioButtonClick: EventEmitter<Event>;
+    /** Emits `rChange` event on the `<r-radio-button>` when on keydown event */
+    radioButtonKeydown: EventEmitter<Event>;
+    /** Emits `radioButtonDeselect` event on the `<r-radio-button>` when on deselect event */
+    radioButtonDeselect: EventEmitter<{
+        element: HTMLRRadioButtonElement;
+        value: any;
+        checked: boolean;
+    }>;
+    /** Sets focus on the radio button element */
+    setFocus(): Promise<void>;
+    /** Blurs the radio button element */
+    setBlur(): Promise<void>;
+    /** Selects the radio button element */
+    select(): Promise<void>;
+    private initialState;
+    /** Reference to the native input element */
+    private nativeEl;
+    /** Unique id */
+    private uniqueId;
+    /** Reference to the radio button elements */
+    private get radioElements();
+    /** Get the text content of the slot */
+    private get slotTextValue();
+    /** Identify wrapping radio group element */
+    private get groupEl();
+    /** Identify wrapping form element */
+    private get parentFormEl();
+    /** Check if the radio button is leading */
+    private get isLeading();
+    /** Check if the radio button is trailing */
+    private get isTrailing();
+    private onClick;
+    private onKeydown;
+    private onFocus;
+    private onBlur;
+    private get shouldAutofocus();
+    private applyAutofocus;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    render(): any;
+}

package/dist/types/components/radio-button-description/radio-button-description.d.ts

@@ -0,0 +1,8 @@
+/**
+ * A radio button is used to select a single option in a list.
+ */
+export declare class RadioButtonDescription {
+    /** Host DOM element */
+    host: HTMLRRadioButtonDescriptionElement;
+    render(): any;
+}

package/dist/types/components/radio-button-leading/radio-button-leading.d.ts

@@ -0,0 +1,8 @@
+/**
+ * A radio button is used to select a single option in a list.
+ */
+export declare class RadioButtonLeading {
+    /** Host DOM element */
+    host: HTMLRRadioButtonLeadingElement;
+    render(): any;
+}

package/dist/types/components/radio-button-title/radio-button-title.d.ts

@@ -0,0 +1,8 @@
+/**
+ * A radio button is used to select a single option in a list.
+ */
+export declare class RadioButtonTitle {
+    /** Host DOM element */
+    host: HTMLRRadioButtonTitleElement;
+    render(): any;
+}

package/dist/types/components/radio-button-trailing/radio-button-trailing.d.ts

@@ -0,0 +1,8 @@
+/**
+ * A radio button is used to select a single option in a list.
+ */
+export declare class RadioButtonTrailing {
+    /** Host DOM element */
+    host: HTMLRRadioButtonTrailingElement;
+    render(): any;
+}

package/dist/types/components/radio-group/exports.d.ts

@@ -0,0 +1,2 @@
+export declare const radioGroupVariantArray: readonly ["standard", "contained"];
+export type RadioGroupVariant = typeof radioGroupVariantArray[number];