finpro/dist/components/fp-popover/fp-popover.d.ts

Design System

import { CSSResultGroup, TemplateResult } from 'lit';
import FinproElement from '../../internals/finpro-element';
export declare type Placement = 'top-start' | 'top' | 'top-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end';
/**
 * @tag fp-popover
 * @summary Finpro Popover component
 *
 * @cssproperty [--fp-popover-arrow-display=none] - Sets the display of popovers arrow. Set as `block` to make arrow visible.
 * @cssproperty [--fp-popover-background-color=--fp-color-primary-background] - Sets the background color of popover.
 * @cssproperty [--fp-popover-border-color=--fp-color-primary-hover] - Sets the border color of popover.
 * @cssproperty [--fp-popover-padding=--fp-size-m] - Sets the padding of popover.
 * @cssproperty [--fp-popover-border-radius=--fp-size-3xs] - Sets the border radius of popover.
 * @cssproperty [--fp-popover-position=fixed] - Sets the position of popover. You can set it to `absolute` if parent element is a fixed positioned element like drawer or dialog.
 */
export default class FpPopover extends FinproElement {
    static get styles(): CSSResultGroup;
    private popover;
    private arrow;
    /**
     * Sets placement of the popover
     */
    placement: Placement;
    /**
     * Target elements state
     */
    _target: string | Element;
    /**
     * Sets size of popover same as trigger element
     */
    fitSize: boolean;
    /**
     * Sets the distance between popover and target/trigger element
     */
    offset: number;
    /**
     * Visibility state
     */
    private _visible;
    /**
     * Fires when the popover is shown
     */
    private onFpPopoverShow;
    /**
     * Fires when popover becomes hidden
     */
    private onFpPopoverHide;
    connectedCallback(): void;
    disconnectedCallback(): void;
    private getMiddleware;
    private _handleClickOutside;
    private popoverAutoUpdateCleanup;
    private setPopover;
    /**
     * Sets the target element of the popover to align and trigger.
     * It can be a string id of the target element or can be a direct Element reference of it.
     */
    get target(): string | Element;
    set target(value: string | Element);
    /**
     * Shows popover
     */
    show(): void;
    /**
     * Hides popover
     */
    hide(): void;
    /**
     * Gives the visibility status of the popover
     */
    get visible(): boolean;
    private _handlePopoverShowEvent;
    private _handleKeyupEvent;
    render(): TemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'fp-popover': FpPopover;
    }
}
//# sourceMappingURL=fp-popover.d.ts.map