@alegendstale/holly-components/dist/components/bottom-sheet/bottom-sheet.d.ts

Reusable UI components created using lit

import { LitElement } from 'lit';
/**
 * A container component primarily for mobile devices which slides up and down from the bottom of the screen.
 *
 * @event hc-snapped - Emits when the sheet has snapped to a new point.
 *
 * @cssprop {<length> (dvh)} --height - The height of the sheet.
 *
 * @csspart __handle - Styles handle element..
 * @csspart __content - Styles the content wrapper element.
 */
export declare class BottomSheet extends LitElement {
    static styles: import("lit").CSSResult[];
    /** @internal */
    private dialog;
    /** @internal */
    private nonModalDialog?;
    /** @internal */
    private modalDialog?;
    /** Whether the sheet is open or closed. */
    open: boolean;
    /** Whether the sheet is nonmodal. */
    nonmodal: boolean;
    /** Whether the sheet can be dragged. */
    dragging: boolean;
    /** Whether the sheet can be scrolled. */
    scrolling: boolean;
    /** An array of percentages that the sheet will stop at or be drawn to after being released. */
    snapPoints: number[];
    /** The default percentage that the sheet will open to. */
    defaultSnap: number;
    /**
     * Sets the height of the sheet.
     * Infinity can be used to fit content automatically.
     * @type {number}
     * @default fit-content
     */
    set height(val: number);
    get height(): number;
    /** @internal */
    private startY;
    /** @internal */
    private startHeight;
    /** @internal */
    private previousTouch;
    /** @internal */
    private lastScrollTop;
    connectedCallback(): void;
    render(): import("lit-html").TemplateResult<1>;
    /**
     * Find closest point index to target in array
     */
    private closestSnapPointIndex;
    /**
     * Sets sheet height to the closest snap
     * @param height percentage
     */
    private setSnap;
    /**
     * @returns Whether sheet is snapped to a snap point
     */
    private isSnapped;
    /**
     * Sets the display state of the sheet
     */
    showSheet(open: boolean): void;
    /**
     * Toggles the display state of the sheet
     */
    toggleSheet(): void;
    /**
     * Remove overscroll to prevent mobile browsers from refreshing during drag
     */
    private setOverscroll;
    private setDialog;
    private touchDown;
    private touchMove;
    private touchUp;
    private pointerDown;
    private pointerMove;
    private pointerUp;
    private onSnapped;
    private contentScroll;
}
declare global {
    interface HTMLElementTagNameMap {
        'bottom-sheet': BottomSheet;
    }
}
//# sourceMappingURL=bottom-sheet.d.ts.map