@flexilla/popover/dist/index.d.ts

A lightweight and customizable Popover component for displaying additional information on hover over elements in web applications.

import { OverlayOptions } from 'flexipop/create-overlay';
import { Placement } from 'flexipop';
import { Placement as Placement_2 } from 'flexipop/create-overlay';

declare type ExperimentaOptions = {
    /** Whether to teleport the dropdown content to the body or not
     * @default false
     */
    teleport: boolean;
    /** Whether to move the dropdown content to the body and remove it in DOM when not used anymore or not
     * @default "detachable"
     */
    teleportMode?: "move" | "detachable";
};

export { Placement }

/**
 * Creates a new popover instance with the specified trigger and content elements.
 * @class
 * @description A class that creates and manages a popover component with customizable trigger and content elements.
 */
export declare class Popover {
    private triggerElement;
    private contentElement;
    private options;
    private PopoverInstance;
    private triggerStrategy;
    private placement;
    private offsetDistance;
    private preventFromCloseOutside;
    private preventFromCloseInside;
    private defaultState;
    private experimentalOptions;
    private teleporter;
    /**
     * Creates a new Popover instance.
     * @param {string | HTMLElement} popoverEl - The popover content element or its selector.
     * @param {PopoverOptions} [options={}] - Configuration options for the popover.
     * @example
     * // Create a popover with default options
     * const popover = new Popover('#my-popover');
     *
     * // Create a popover with custom options
     * const popover = new Popover('#my-popover', {
     *   placement: 'top',
     *   triggerStrategy: 'hover',
     *   offsetDistance: 10
     * });
     */
    constructor(popoverEl: string | HTMLElement, options?: PopoverOptions);
    private moveElOnInit;
    private moveEl;
    private restoreEl;
    private beforeShow;
    private onHide;
    private onShow;
    setShowOptions: ({ placement, offsetDistance }: {
        placement: Placement_2;
        offsetDistance?: number;
    }) => void;
    /**
     * Updates the Popover's placement and offset settings
     * @param options - The new placement and offset options
     */
    setOptions: ({ placement, offsetDistance }: {
        placement: Placement_2;
        offsetDistance?: number;
    }) => void;
    /**
     * Updates the Popover trigger reference Element and options
     * The new set trigger will be used as reference for the Popover
     */
    setPopperTrigger: (trigger: HTMLElement, options: {
        placement?: Placement_2;
        offsetDistance?: number;
    }) => void;
    show: () => void;
    hide: () => void;
    /**
     * Creates a new Popover instance with the specified options.
     * @param {string | HTMLElement} popoverEl - The popover content element or its selector.
     * @param {PopoverOptions} [options] - Configuration options for the popover.
     * @returns {Popover} A new Popover instance.
     * @example
     * const popover = Popover.init('#my-popover', {
     *   placement: 'bottom',
     *   triggerStrategy: 'click'
     * });
     */
    static init(popoverEl: string | HTMLElement, options?: PopoverOptions): Popover;
    cleanup: () => void;
    /**
     * Automatically initializes all popover elements matching the specified selector.
     * @param {string} [selector='[data-fx-popover]'] - The selector to find popover elements.
     * @example
     * // Initialize all popovers with default selector
     * Popover.autoInit();
     *
     * // Initialize popovers with custom selector
     * Popover.autoInit('.custom-popover');
     */
    static autoInit(selector?: string): void;
}

/**
 * Configuration options for the Popover component
 */
export declare type PopoverOptions = OverlayOptions & {
    experimental?: ExperimentaOptions;
};

export { }