@ivteplo/html-sheet-element/build/index.d.ts

HTML Custom Element for Sheets

/**
 * HTML Custom Element for creating sheets
 *
 * @example <caption>Define the element in the registry and use it in your HTML</caption>
 * import SheetElement from "@ivteplo/html-sheet-element"
 * SheetElement.defineAs("ui-sheet")
 *
 * // in HTML:
 * <ui-sheet>
 *   <p>Hello World!</p>
 * </ui-sheet>
 *
 * @example <caption>Open the sheet by default</caption>
 * <ui-sheet open>
 *   <p>Hello World!</p>
 * </ui-sheet>
 *
 * @example <caption>Execute certain actions when the sheet opens or closes</caption>
 * const sheet = document.querySelector("...")
 *
 * sheet.addEventListener("open", event => {
 *   console.log("The sheet is now shown")
 * })
 *
 * sheet.addEventListener("close", event => {
 *   console.log("The sheet is now closed")
 * })
 *
 * @example <caption>Confirm whether the user actually wants to close a sheet without submition</caption>
 * // HTML:
 * <ui-sheet>
 *   <form method="dialog">
 *     <textbox placeholder="Your feedback" required></textbox>
 *     <button type="submit">Send</button>
 *   </form>
 * </ui-sheet>
 *
 * // JavaScript:
 * sheet.addEventListener("cancel", event => {
 *   const userWantsToClose = confirm("Are you sure you want to close the form without submition?")
 *   if (!userWantsToClose) {
 *     // the sheet is not going to be closed
 *     event.preventDefault()
 *   }
 * })
 *
 * @example <caption>Open the sheet programmatically</caption>
 * const sheet = document.querySelector("...")
 *
 * sheet.showModal()
 * // is the same as:
 * sheet.show()
 *
 * @example <caption>Show a title in the sheet header</caption>
 * <ui-sheet>
 *   <h2 slot="title-area">Title</h2>
 *   <!-- ... -->
 * </ui-sheet>
 *
 * @example <caption>Replace a button in the sheet header</caption>
 * <ui-sheet id="sheet">
 *   <button slot="button-area" type="button" aria-controls="sheet" onclick="sheet.close()">Close</button>
 *   <!-- ... -->
 * </ui-sheet>
 */
declare class SheetElement extends HTMLElement {
    /**
     * Function to define the sheet element in the HTML Custom Element Registry
     * @param {string} tag - the tag name for the sheet element
     * @example
     * import SheetElement from "@ivteplo/html-sheet-element"
     * SheetElement.defineAs("ui-sheet")
     */
    static defineAs(tag: string): void;
    /**
     * Options for behavior customization
     *
     * @example <caption>Make the sheet <i>not</i> close on backdrop click</caption>
     * <ui-sheet ignore-backdrop-click>
     *   ...
     * </ui-sheet>
     *
     * @example <caption>Make the sheet <i>not</i> close when pressing Escape</caption>
     * <ui-sheet ignore-escape-key>
     *   ...
     * </ui-sheet>
     *
     * @example <caption>Make the sheet <i>not</i> close when dragging it down</caption>
     * <ui-sheet ignore-dragging-down>
     *   ...
     * </ui-sheet>
     */
    options: {
        closeOnBackdropClick: boolean;
        closeOnEscapeKey: boolean;
        closeOnDraggingDown: boolean;
    };
    /**
     * Gets or sets the return value for the sheet, usually to indicate which button the user pressed to close it.
     * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/returnValue
     * @type {string}
     */
    returnValue: string;
    /**
     * Attaches event listeners to the window when the sheet is mounted
     * @ignore
     */
    connectedCallback(): void;
    /**
     * Removes all the event listeners when the sheet is no longer mounted
     * @ignore
     */
    disconnectedCallback(): void;
    /**
     * Open the sheet
     */
    showModal(): void;
    /**
     * Open the sheet
     */
    show(): void;
    /**
     * Collapse the sheet
     */
    close(): void;
    /**
     * An alternative way to open or close the sheet
     * @param {boolean} value
     * @returns {boolean}
     * @example
     * sheet.open = true  // the same as executing sheet.show()
     * sheet.open = false // the same as executing sheet.close()
     */
    set open(value: boolean);
    /**
     * Check if the sheet is open
     * @returns {boolean}
     */
    get open(): boolean;
    #private;
}
export { SheetElement }
export default SheetElement;

export { }