import { PropertyValueMap } from "lit";
import { FRoot } from "../../mixins/components/f-root/f-root";
export type FPopoverState = "subtle" | "default" | "secondary" | "success" | "warning" | "danger" | "primary" | "transparent";
export type FPopoverPlacement = "top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "auto";
export type FPopoverSize = "stretch" | "large" | "medium" | "small" | "hug-content" | FPopoverCustomSize;
export type FPopoverCustomWidth = `${number}px` | `${number}%` | `${number}vw` | `auto` | `fit-content`;
export type FPopoverCustomHeight = `${number}px` | `${number}%` | `${number}vh` | `auto` | `fit-content`;
export type FPopoverCustomSize = `custom(${FPopoverCustomWidth},${FPopoverCustomHeight})`;
export type FPopOverOffset = {
    mainAxis: number;
    crossAxis?: number;
    alignmentAxis?: number;
};
export declare class FPopover extends FRoot {
    /**
     * css loaded from scss file
     */
    static styles: import("lit").CSSResult[];
    /**
     * @attribute In any placement, by default the popover is centrally aligned to the source and moves according to the space available.
     */
    placement?: FPopoverPlacement;
    /**
     * @attribute A popover can have different sizes depending on the use case from the range: small, medium, large, stretch.
     */
    size?: FPopoverSize;
    /**
     * @attribute is it open?
     */
    open?: boolean;
    /**
     * @attribute display overlay?
     */
    overlay?: boolean;
    /**
     * @attribute display box-shadow
     */
    shadow?: boolean;
    /**
     * @attribute stretch the height to auto
     */
    autoHeight?: boolean;
    /**
     * @attribute conditional closing popover on escape key press
     */
    closeOnEscape?: boolean;
    /**
     * @attribute state property defines the background color of a f-div. It can take only surface colors defined in the library.
     */
    state?: FPopoverState;
    /**
     * @attribute query selector of target
     */
    target: string | HTMLElement;
    cleanup: () => void;
    isEscapeClicked: boolean;
    escapeHandler: (e: KeyboardEvent) => void;
    isTooltip: boolean;
    overlayElement?: HTMLDivElement;
    reqAniFrame?: number;
    offset: FPopOverOffset | null;
    get targetElement(): HTMLElement | null;
    computePlacement(): "bottom" | "top" | "left" | "right" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | undefined;
    computePosition(isTooltip: boolean): void;
    getBodyTargetPlacementCords(): {
        top: string;
        left: string | number | undefined;
        right: string | number | undefined;
        bottom?: undefined;
    } | {
        bottom: string;
        left: string | number | undefined;
        right: string | number | undefined;
        top?: undefined;
    } | {
        right: string;
        bottom: string | number | undefined;
        top: string | number | undefined;
        left?: undefined;
    } | {
        left: string;
        bottom: string | number | undefined;
        top: string | number | undefined;
        right?: undefined;
    } | {
        top: string;
        left: string;
        right?: undefined;
        bottom?: undefined;
    };
    disconnectedCallback(): void;
    connectedCallback(): void;
    dispatchEsc(): void;
    escapekeyHandle(e: KeyboardEvent, el: HTMLElement): void;
    overlayClick(): void;
    render(): "" | import("lit-html").TemplateResult<1>;
    protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
}