@riverty/web-components 6.3.0 → 6.3.1

package/dist/types/components/icon/data.d.ts

@@ -0,0 +1,145 @@
+export declare const PATH_ICONS = "https://cdn.riverty.design/icons/";
+export declare const DEFAULT_KIT_NAME = "riverty";
+export declare const parseElementFromSvgContent: (content: string) => SVGSVGElement;
+export declare const getSvgElementBySrc: (src: string) => Promise<SVGSVGElement>;
+export declare const getSvgContentByName: (name: string) => any;
+export declare const getSvgElementByName: (name: any) => SVGSVGElement;
+export declare const getIconsData: () => {
+    ai: string;
+    "alarm-clock": string;
+    "angle-down": string;
+    "angle-left-double": string;
+    "angle-left-with-vertical-line": string;
+    "angle-left": string;
+    "angle-right-double": string;
+    "angle-right-with-vertical-line": string;
+    "angle-right": string;
+    "angle-up": string;
+    "arrow-down-left": string;
+    "arrow-down-right": string;
+    "arrow-down-with-horizontal-line": string;
+    "arrow-down": string;
+    "arrow-left-with-vertical-line": string;
+    "arrow-left": string;
+    "arrow-pointing-backward": string;
+    "arrow-pointing-down-at-tray": string;
+    "arrow-pointing-forward": string;
+    "arrow-right-with-vertical-line": string;
+    "arrow-right": string;
+    "arrow-splitting": string;
+    "arrow-up-left": string;
+    "arrow-up-right-from-square": string;
+    "arrow-up-right": string;
+    "arrow-up-with-horizontal-line": string;
+    "arrow-up": string;
+    "arrows-circled": string;
+    "arrows-pointing-outwards": string;
+    bag: string;
+    bank: string;
+    beer: string;
+    "bell-crossed-out": string;
+    bell: string;
+    "biometric-id-face-scan": string;
+    "biometric-id-fingerprint": string;
+    box: string;
+    "broken-glass": string;
+    "building-office": string;
+    "bullet-list": string;
+    "bulls-eye": string;
+    calendar: string;
+    camera: string;
+    cart: string;
+    check: string;
+    "circle-slash": string;
+    "circled-check": string;
+    "circled-cross": string;
+    "circled-exclamation-mark": string;
+    "circled-information-i": string;
+    "circled-percentage-sign": string;
+    "circled-question-mark": string;
+    "clipboard-with-checkmark": string;
+    clipboard: string;
+    clock: string;
+    "code-prompt": string;
+    cog: string;
+    "coins-stack": string;
+    cookie: string;
+    copy: string;
+    "credit-card-with-plus-sign": string;
+    "credit-card": string;
+    cross: string;
+    "currency-dollar": string;
+    "currency-euro": string;
+    "document-checked": string;
+    document: string;
+    "ellipsis-vertical": string;
+    ellipsis: string;
+    envelope: string;
+    euro: string;
+    "eye-crossed-out": string;
+    eye: string;
+    flag: string;
+    folder: string;
+    "funnel-filter": string;
+    gallery: string;
+    globe: string;
+    graph: string;
+    hamburger: string;
+    "happy-face": string;
+    headset: string;
+    heart: string;
+    "hour-glass": string;
+    house: string;
+    image: string;
+    invoice: string;
+    key: string;
+    "link-crossed-out": string;
+    link: string;
+    login: string;
+    logout: string;
+    "mad-face": string;
+    magnifier: string;
+    "money-bill": string;
+    "money-coin": string;
+    "organization-chart": string;
+    "padlock-closed": string;
+    "padlock-open": string;
+    "paper-plane": string;
+    "paperclip-2": string;
+    "pen-disabled": string;
+    pen: string;
+    "phone-with-shield": string;
+    "pie-chart": string;
+    plus: string;
+    printer: string;
+    "puzzle-piece": string;
+    "qr-code": string;
+    receipt: string;
+    "recycle-bin-1": string;
+    "sad-face": string;
+    scale: string;
+    "shield-check": string;
+    shield: string;
+    "sign-at": string;
+    signature: string;
+    slider: string;
+    "speech-bubble-oval": string;
+    "speech-bubble": string;
+    "splitted-circles": string;
+    star: string;
+    store: string;
+    "straight-face": string;
+    "thumb-up": string;
+    tray: string;
+    "triangle-with-exclamation-mark": string;
+    "two-speech-bubbles": string;
+    "upload-document": string;
+    "user-avatar-multiple": string;
+    "user-avatar-with-bars": string;
+    "user-avatar-with-exclamation-mark": string;
+    "user-avatar-with-minus": string;
+    "user-avatar": string;
+    "very-happy-face": string;
+    webhook: string;
+};
+export declare const addToIconsData: (name: string, value: string) => void;

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

@@ -0,0 +1,152 @@
+export declare const iconsData: {
+    ai: string;
+    "alarm-clock": string;
+    "angle-down": string;
+    "angle-left-double": string;
+    "angle-left-with-vertical-line": string;
+    "angle-left": string;
+    "angle-right-double": string;
+    "angle-right-with-vertical-line": string;
+    "angle-right": string;
+    "angle-up": string;
+    "arrow-down-left": string;
+    "arrow-down-right": string;
+    "arrow-down-with-horizontal-line": string;
+    "arrow-down": string;
+    "arrow-left-with-vertical-line": string;
+    "arrow-left": string;
+    "arrow-pointing-backward": string;
+    "arrow-pointing-down-at-tray": string;
+    "arrow-pointing-forward": string;
+    "arrow-right-with-vertical-line": string;
+    "arrow-right": string;
+    "arrow-splitting": string;
+    "arrow-up-left": string;
+    "arrow-up-right-from-square": string;
+    "arrow-up-right": string;
+    "arrow-up-with-horizontal-line": string;
+    "arrow-up": string;
+    "arrows-circled": string;
+    "arrows-pointing-outwards": string;
+    bag: string;
+    bank: string;
+    beer: string;
+    "bell-crossed-out": string;
+    bell: string;
+    "biometric-id-face-scan": string;
+    "biometric-id-fingerprint": string;
+    box: string;
+    "broken-glass": string;
+    "building-office": string;
+    "bullet-list": string;
+    "bulls-eye": string;
+    calendar: string;
+    camera: string;
+    cart: string;
+    check: string;
+    "circle-slash": string;
+    "circled-check": string;
+    "circled-cross": string;
+    "circled-exclamation-mark": string;
+    "circled-information-i": string;
+    "circled-percentage-sign": string;
+    "circled-question-mark": string;
+    "clipboard-with-checkmark": string;
+    clipboard: string;
+    clock: string;
+    "code-prompt": string;
+    cog: string;
+    "coins-stack": string;
+    cookie: string;
+    copy: string;
+    "credit-card-with-plus-sign": string;
+    "credit-card": string;
+    cross: string;
+    "currency-dollar": string;
+    "currency-euro": string;
+    "document-checked": string;
+    document: string;
+    "ellipsis-vertical": string;
+    ellipsis: string;
+    envelope: string;
+    euro: string;
+    "eye-crossed-out": string;
+    eye: string;
+    flag: string;
+    folder: string;
+    "funnel-filter": string;
+    gallery: string;
+    globe: string;
+    graph: string;
+    hamburger: string;
+    "happy-face": string;
+    headset: string;
+    heart: string;
+    "hour-glass": string;
+    house: string;
+    image: string;
+    invoice: string;
+    key: string;
+    "link-crossed-out": string;
+    link: string;
+    login: string;
+    logout: string;
+    "mad-face": string;
+    magnifier: string;
+    "money-bill": string;
+    "money-coin": string;
+    "organization-chart": string;
+    "padlock-closed": string;
+    "padlock-open": string;
+    "paper-plane": string;
+    "paperclip-2": string;
+    "pen-disabled": string;
+    pen: string;
+    "phone-with-shield": string;
+    "pie-chart": string;
+    plus: string;
+    printer: string;
+    "puzzle-piece": string;
+    "qr-code": string;
+    receipt: string;
+    "recycle-bin-1": string;
+    "sad-face": string;
+    scale: string;
+    "shield-check": string;
+    shield: string;
+    "sign-at": string;
+    signature: string;
+    slider: string;
+    "speech-bubble-oval": string;
+    "speech-bubble": string;
+    "splitted-circles": string;
+    star: string;
+    store: string;
+    "straight-face": string;
+    "thumb-up": string;
+    tray: string;
+    "triangle-with-exclamation-mark": string;
+    "two-speech-bubbles": string;
+    "upload-document": string;
+    "user-avatar-multiple": string;
+    "user-avatar-with-bars": string;
+    "user-avatar-with-exclamation-mark": string;
+    "user-avatar-with-minus": string;
+    "user-avatar": string;
+    "very-happy-face": string;
+    webhook: string;
+};
+export declare const iconSizeArray: readonly ["s", "m", "l"];
+export declare const iconSizeValue: {
+    readonly s: "16";
+    readonly m: "24";
+    readonly l: "32";
+};
+export declare const iconPositionArray: readonly ["start", "end"];
+export declare const iconKitArray: readonly ["riverty", "test"];
+export declare const iconVariantArray: readonly ["button"];
+export type IconSize = typeof iconSizeArray[number];
+export type IconName = keyof typeof iconsData | string;
+export type IconKit = typeof iconKitArray[number];
+export type IconVariant = typeof iconVariantArray[number];
+export type IconPosition = typeof iconPositionArray[number];

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

@@ -0,0 +1,37 @@
+import { IconKit, IconName, IconSize, IconVariant } from './exports';
+export declare class RIcon {
+    /** Host html element */
+    host: HTMLRIconElement;
+    /** Name of icon to select from the set */
+    name?: IconName;
+    /** Source of an icon to fetch from */
+    src?: string;
+    /** Select kit */
+    kit: IconKit;
+    /** Select one of pre-set sizes (width and height automatically selected) */
+    size?: IconSize;
+    /** Customize `viewBox` of rendered icon SVG element */
+    viewBox: string;
+    /**
+     * Quick way to set display color to one of the
+    * Riverty color tokens
+     */
+    color: string;
+    /**
+     * Defines UI deviations for the icon.
+     * */
+    variant?: IconVariant;
+    /**
+     * Defines an accessible name for the icon.
+     * */
+    iconAriaLabel?: string;
+    private get cssColor();
+    private svgElement;
+    private _setElementAttrs;
+    private _defineSvgAttrs;
+    private _passAttributesToSvg;
+    private _defineSvgElement;
+    componentWillLoad(): void;
+    componentWillRender(): Promise<void>;
+    render(): any;
+}

package/dist/types/components/icon/riverty-kit.d.ts

@@ -0,0 +1,139 @@
+declare const data: {
+    ai: string;
+    "alarm-clock": string;
+    "angle-down": string;
+    "angle-left-double": string;
+    "angle-left-with-vertical-line": string;
+    "angle-left": string;
+    "angle-right-double": string;
+    "angle-right-with-vertical-line": string;
+    "angle-right": string;
+    "angle-up": string;
+    "arrow-down-left": string;
+    "arrow-down-right": string;
+    "arrow-down-with-horizontal-line": string;
+    "arrow-down": string;
+    "arrow-left-with-vertical-line": string;
+    "arrow-left": string;
+    "arrow-pointing-backward": string;
+    "arrow-pointing-down-at-tray": string;
+    "arrow-pointing-forward": string;
+    "arrow-right-with-vertical-line": string;
+    "arrow-right": string;
+    "arrow-splitting": string;
+    "arrow-up-left": string;
+    "arrow-up-right-from-square": string;
+    "arrow-up-right": string;
+    "arrow-up-with-horizontal-line": string;
+    "arrow-up": string;
+    "arrows-circled": string;
+    "arrows-pointing-outwards": string;
+    bag: string;
+    bank: string;
+    beer: string;
+    "bell-crossed-out": string;
+    bell: string;
+    "biometric-id-face-scan": string;
+    "biometric-id-fingerprint": string;
+    box: string;
+    "broken-glass": string;
+    "building-office": string;
+    "bullet-list": string;
+    "bulls-eye": string;
+    calendar: string;
+    camera: string;
+    cart: string;
+    check: string;
+    "circle-slash": string;
+    "circled-check": string;
+    "circled-cross": string;
+    "circled-exclamation-mark": string;
+    "circled-information-i": string;
+    "circled-percentage-sign": string;
+    "circled-question-mark": string;
+    "clipboard-with-checkmark": string;
+    clipboard: string;
+    clock: string;
+    "code-prompt": string;
+    cog: string;
+    "coins-stack": string;
+    cookie: string;
+    copy: string;
+    "credit-card-with-plus-sign": string;
+    "credit-card": string;
+    cross: string;
+    "currency-dollar": string;
+    "currency-euro": string;
+    "document-checked": string;
+    document: string;
+    "ellipsis-vertical": string;
+    ellipsis: string;
+    envelope: string;
+    euro: string;
+    "eye-crossed-out": string;
+    eye: string;
+    flag: string;
+    folder: string;
+    "funnel-filter": string;
+    gallery: string;
+    globe: string;
+    graph: string;
+    hamburger: string;
+    "happy-face": string;
+    headset: string;
+    heart: string;
+    "hour-glass": string;
+    house: string;
+    image: string;
+    invoice: string;
+    key: string;
+    "link-crossed-out": string;
+    link: string;
+    login: string;
+    logout: string;
+    "mad-face": string;
+    magnifier: string;
+    "money-bill": string;
+    "money-coin": string;
+    "organization-chart": string;
+    "padlock-closed": string;
+    "padlock-open": string;
+    "paper-plane": string;
+    "paperclip-2": string;
+    "pen-disabled": string;
+    pen: string;
+    "phone-with-shield": string;
+    "pie-chart": string;
+    plus: string;
+    printer: string;
+    "puzzle-piece": string;
+    "qr-code": string;
+    receipt: string;
+    "recycle-bin-1": string;
+    "sad-face": string;
+    scale: string;
+    "shield-check": string;
+    shield: string;
+    "sign-at": string;
+    signature: string;
+    slider: string;
+    "speech-bubble-oval": string;
+    "speech-bubble": string;
+    "splitted-circles": string;
+    star: string;
+    store: string;
+    "straight-face": string;
+    "thumb-up": string;
+    tray: string;
+    "triangle-with-exclamation-mark": string;
+    "two-speech-bubbles": string;
+    "upload-document": string;
+    "user-avatar-multiple": string;
+    "user-avatar-with-bars": string;
+    "user-avatar-with-exclamation-mark": string;
+    "user-avatar-with-minus": string;
+    "user-avatar": string;
+    "very-happy-face": string;
+    webhook: string;
+};
+export default data;

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

@@ -0,0 +1,69 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { IconName, IconSize } from '../icon/exports';
+import { TooltipPosition } from '../tooltip/exports';
+/**
+ * An icon button is a button that contains only an icon and is used to trigger an action.
+ *
+ */
+export declare class IconButton {
+    host: HTMLRIconButtonElement;
+    /**
+     * The label for the button, used for accessibility.
+     * This label is not visible on the button itself.
+     * It is recommended to provide a label for screen readers.
+     * If not provided, the button will be considered as having no label.
+     */
+    label?: string;
+    /**
+     * Name of the icon to display within the button.
+     */
+    name: IconName;
+    /**
+     * Defines the size of the icon used within the button.
+     */
+    size: IconSize;
+    /**
+     * @deprecated Use the `<r-tooltip>` component as a wrapper instead.
+     * Sets position for the tooltip.
+     * - `top`: Tooltip appears above the button.
+     * - `bottom`: Tooltip appears below the button.
+     * - `left`: Tooltip appears to the left of the button.
+     * - `right`: Tooltip appears to the right of the button.
+     */
+    tooltipPosition: TooltipPosition;
+    /**
+     * @deprecated Use the `<r-tooltip>` component as a wrapper instead.
+     * Text to display within the tooltip when the button is hovered or focused.
+     */
+    tooltipText?: string;
+    /**
+     * Prevents user interaction and applies disabled style.
+     */
+    disabled?: boolean;
+    /**
+     * Defines the visual style of the button.
+     * - `standard`: Default button style.
+     * - `contained`: Button with a contained background.
+     */
+    variant: 'standard' | 'contained';
+    /**
+     * Defines the tabindex of the button for keyboard navigation.
+     */
+    rTabindex?: number;
+    /**
+     * Emits `rClick` event on click.
+     */
+    rClick: EventEmitter;
+    /** Reference to the native button */
+    private nativeElement?;
+    /** Simulate a button click */
+    triggerClick(): Promise<void>;
+    /** Set focus on the button */
+    setFocus(): Promise<void>;
+    /** Remove focus from the button */
+    setBlur(): Promise<void>;
+    private _handleClick;
+    private onFocus;
+    private onBlur;
+    render(): any;
+}

package/dist/types/components/illustration/data.d.ts

@@ -0,0 +1,52 @@
+export declare const PATH_ILLUSTRATIONS = "https://cdn.riverty.design/illustrations/";
+export declare const DEFAULT_KIT_NAME = "UI";
+export declare const parseElementFromSvgContent: (content: string) => SVGSVGElement;
+export declare const getSvgContentByName: (name: string) => any;
+/**
+ * Returns the current in-memory cache object containing all loaded illustrations.
+ * Cache is stored as { [illustrationName]: svgContent }
+ */
+export declare const getIllustrationsData: () => {
+    "app-update-refresh": string;
+    "empty-state-404": string;
+    "error-phone-01": string;
+    "error-phone-02": string;
+    "error-scan": string;
+    "identity-verification-scan-01": string;
+    "identity-verification-scan-02": string;
+    "identity-verification-scan-03": string;
+    "identity-verification-scan-04-1": string;
+    "identity-verification-scan-04": string;
+    "payment-complete": string;
+    "payment-failed": string;
+    "payment-start": string;
+    "returns-complete": string;
+    "returns-start": string;
+    "rewards-gift": string;
+    "success-hands": string;
+    "success-phone": string;
+};
+/**
+ * Adds a newly fetched illustration to the in-memory cache.
+ * Stores the SVG content by illustration name to prevent redundant CDN fetches.
+ * @param name - The illustration name/identifier
+ * @param content - The SVG content as string
+ */
+export declare const addToIllustrationsData: (name: any, content: any) => void;
+/**
+ * Retrieves a cached SVG illustration from memory by name.
+ * Returns null if not found in cache.
+ * Used to avoid re-fetching already loaded illustrations.
+ * @param name - The illustration name to retrieve from cache
+ * @returns SVG DOM element if found, null otherwise
+ */
+export declare const getSvgElementByName: (name: string) => SVGSVGElement;
+/**
+ * Fetches an SVG illustration from the CDN using the illustration name.
+ * Constructs URL as https://cdn.riverty.design/illustrations/{name}.svg
+ * Throws error if fetch fails or response is not OK.
+ * @param name - The illustration name to fetch from CDN
+ * @returns Promise resolving to SVG DOM element
+ * @throws Error if fetch fails or response status is not OK
+ */
+export declare const getSvgElementByNameFromCdn: (name: string) => Promise<SVGSVGElement>;

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

@@ -0,0 +1,23 @@
+export declare const illustrationsData: {
+    "app-update-refresh": string;
+    "empty-state-404": string;
+    "error-phone-01": string;
+    "error-phone-02": string;
+    "error-scan": string;
+    "identity-verification-scan-01": string;
+    "identity-verification-scan-02": string;
+    "identity-verification-scan-03": string;
+    "identity-verification-scan-04-1": string;
+    "identity-verification-scan-04": string;
+    "payment-complete": string;
+    "payment-failed": string;
+    "payment-start": string;
+    "returns-complete": string;
+    "returns-start": string;
+    "rewards-gift": string;
+    "success-hands": string;
+    "success-phone": string;
+};
+export declare const illustrationThemeArray: readonly ["light", "dark", "auto"];
+export type IllustrationTheme = typeof illustrationThemeArray[number];
+export type IllustrationName = keyof typeof illustrationsData | string;

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

@@ -0,0 +1,51 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { IllustrationName, IllustrationTheme } from './exports';
+export declare class RIllustration {
+    /** Host html element */
+    host: HTMLRIllustrationElement;
+    /** Name of illustration to select from the set */
+    name?: IllustrationName;
+    /** Defines initial width of an illustration. */
+    width?: string;
+    /** Theme mode for illustration rendering */
+    theme: IllustrationTheme;
+    /** Minimum width constraint for responsive behavior */
+    minWidth?: string;
+    /** Maximum width constraint for responsive behavior */
+    maxWidth?: string;
+    /** Optional title element to be added inside the SVG for accessibility */
+    svgTitle?: string;
+    /** Optional description element to be added inside the SVG for accessibility */
+    svgDescription?: string;
+    /** Error message text to display when illustration fails to load */
+    errorMessage?: string;
+    /** Accessibility: title for the image representing "failed-to-load" state */
+    emptyImageTitle?: string;
+    /** Accessibility: title for the marker representing "failed-to-load" state */
+    emptyMarkerTitle?: string;
+    /** Emitted when illustration fails to load */
+    rFailed: EventEmitter<void>;
+    /** Emitted when illustration completes loading */
+    rComplete: EventEmitter<void>;
+    detectedTheme: string | null;
+    error: boolean;
+    private get cssVars();
+    private get ariaRole();
+    private get ariaLabelledBy();
+    private svgElement;
+    private svgAttributes;
+    private svgInnerHTML;
+    private themeObserver;
+    private uniqueId;
+    private _setElementAttrs;
+    private _defineSvgAttrs;
+    private _passAttributesToSvg;
+    private _defineIllustrationElement;
+    componentWillLoad(): void;
+    componentWillRender(): Promise<void>;
+    private _extractSvgData;
+    private _buildSvgContent;
+    disconnectedCallback(): void;
+    private _setupAutoThemeDetection;
+    render(): any;
+}

package/dist/types/components/illustration/illustrations-ui-kit.d.ts

@@ -0,0 +1,21 @@
+declare const data: {
+    "app-update-refresh": string;
+    "empty-state-404": string;
+    "error-phone-01": string;
+    "error-phone-02": string;
+    "error-scan": string;
+    "identity-verification-scan-01": string;
+    "identity-verification-scan-02": string;
+    "identity-verification-scan-03": string;
+    "identity-verification-scan-04-1": string;
+    "identity-verification-scan-04": string;
+    "payment-complete": string;
+    "payment-failed": string;
+    "payment-start": string;
+    "returns-complete": string;
+    "returns-start": string;
+    "rewards-gift": string;
+    "success-hands": string;
+    "success-phone": string;
+};
+export default data;