@rhds/elements/elements/rh-dialog/rh-dialog.d.ts

Red Hat Design System Elements

import { LitElement } from 'lit';
import '@rhds/elements/rh-surface/rh-surface.js';
import '@rhds/elements/rh-button/rh-button.js';
export declare class DialogCancelEvent extends Event {
    constructor();
}
export declare class DialogCloseEvent extends Event {
    constructor();
}
export declare class DialogOpenEvent extends Event {
    /** The trigger element which triggered the dialog to open */
    trigger: HTMLElement | null;
    constructor(
    /** The trigger element which triggered the dialog to open */
    trigger: HTMLElement | null);
}
/**
 * A dialog displays important information to users without requiring them to navigate away from the page.
 *
 * @summary Communicates information requiring user input or action
 *
 * @alias dialog
 *
 * @fires {DialogOpenEvent} open - Fires when a user clicks on the trigger or manually opens a dialog.
 * @fires {DialogCloseEvent} close - Fires when either a user clicks on either the close button or manually closes a dialog.
 * @fires {DialogCancelEvent} cancel - Fires when a user clicks outside the dialog or hits ESC on their keyboard.
 */
export declare class RhDialog extends LitElement {
    #private;
    static readonly styles: CSSStyleSheet[];
    /**
     * The `variant` controls the width of the dialog.
     * There are three options: `small`, `medium` and `large`. The default is `large`.
     */
    variant?: 'small' | 'medium' | 'large';
    /**
     * `position="top"` aligns the dialog with the top of the page
     */
    position?: 'top';
    /**
     * Use `accessible-label="My custom label"` to specify the dialog's accessible name.
     * Defaults to the name of the dialog trigger if no attribute is set and no headings exist in the modal.
     * See Dialog's Accessibility page for more info.
     */
    accessibleLabel?: string;
    /**
     * `open` / `open="open"` declaratively opens the dialog
     */
    open: boolean;
    /** Optional ID of the trigger element */
    trigger?: string;
    /** Use `type="video"` to embed a video player into a dialog. */
    type?: 'video';
    /** @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/returnValue */
    returnValue: string;
    private dialog;
    private content;
    private closeButton;
    connectedCallback(): void;
    disconnectedCallback(): void;
    render(): import("lit-html").TemplateResult<1>;
    protected _init(): Promise<void>;
    protected _openChanged(oldValue?: boolean, open?: boolean): Promise<void>;
    protected _triggerChanged(): void;
    private onTriggerClick;
    cancel(returnValue?: string): Promise<void>;
    setTrigger(element: HTMLElement): void;
    /**
     * Manually toggles the dialog.
     * ```js
     * dialog.toggle();
     * ```
     */
    toggle(): void;
    /**
     * Manually opens the dialog.
     * ```js
     * dialog.show();
     * ```
     */
    show(): void;
    showModal(): void;
    /**
     * Manually closes the dialog.
     * @param [returnValue] dialog return value.
     * @example ```js
     *          dialog.close();
     *          ```
     */
    close(returnValue?: string): void;
}
declare global {
    interface HTMLElementTagNameMap {
        'rh-dialog': RhDialog;
    }
}