@limetech/lime-elements/dist/types/components/popover/popover.d.ts

Lime Elements

import { OpenDirection } from '../menu/menu.types';
/**
 * A popover is an impermanent layer that is displayed on top of other content
 * when user taps an element that triggers the popover. This element can be
 * practically anything, a button, piece of text, and icon, etc.
 *
 * Popovers are nonmodal, thus they don't have a semi-transparent backdrop layer
 * that darkens the content below them. Also for the same reason, they can be
 * dismissed by tapping or clicking another part of the screen, but not by a
 * clicking a button or link on the popover itself.
 *
 * ## Usage
 * Use a popover to show **options** or **information** related to the trigger
 * onscreen. A typical use case for popovers is a tooltip, in which you show
 * help text or contextual information to users.
 *
 * Popovers are most appropriate on larger screens but can be used on smaller
 * screens too, as long as their content is responsive and takes into account
 * the context they are displayed on.
 *
 * When a popover is displayed, interactions with other controls are blocked,
 * until user dismisses the popover.
 *
 *
 * ## Layout
 * Popovers has only one slot in which you can import a custom web-component.
 *
 * :::note
 * You must make sure that web-components that you import into the slot has
 * a `width: 100%;` style so that it can horizontally stretch across the popover.
 *
 * However, `width` of the popover can be controlled by specifying a CSS variable
 * of `--popover-surface-width`. If you don't specify any width, the popover
 * will grow as wide as its content.
 * :::
 *
 * :::important
 * Do not make a popover too big. They should never take over the entire screen.
 * If your content is that big, you should probably be using a Modal instead.
 * :::
 *
 * @slot - Content to put inside the surface
 * @exampleComponent limel-example-popover-basic
 * @exampleComponent limel-example-popover-trigger-interaction
 * @exampleComponent limel-example-popover-styling
 */
export declare class Popover {
    /**
     * True if the content within the popover should be visible
     */
    open: boolean;
    /**
     * Decides the popover's location in relation to its trigger
     */
    openDirection: OpenDirection;
    /**
     * Emits an event when the component is closing
     */
    private close;
    private host;
    private portalId;
    private triggerSlot;
    private shouldRestoreFocusOnClose;
    constructor();
    protected watchOpen(): void;
    componentWillLoad(): void;
    componentDidRender(): void;
    private setupGlobalHandlers;
    render(): any;
    private globalClickListener;
    private getCssProperties;
    private handleGlobalKeyPress;
    private readonly requestCloseAndRestoreFocus;
    private readonly setTriggerRef;
    private readonly focusTrigger;
    private setTriggerAttributes;
}
//# sourceMappingURL=popover.d.ts.map