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

A versatile and interactive collapse component for creating collapsible sections in web applications, conserving space and improving user experience.

/**
 * A class that implements collapsible functionality for HTML elements.
 * It allows elements to be expanded and collapsed with smooth transitions.
 *
 * @example
 * ```ts
 * // Basic usage
 * const collapse = new Collapse('#myCollapse');
 *
 * // With options
 * const collapse = new Collapse('#myCollapse', {
 *   defaultState: 'open',
 *   closeHeight: 50,
 *   onToggle: ({ isExpanded }) => console.log(`Collapse is ${isExpanded ? 'expanded' : 'collapsed'}`)
 * });
 *
 * // With custom trigger
 * const collapse = new Collapse('#myCollapse', {}, '#customTrigger');
 * ```
 */
export declare class Collapse {
    private element;
    private defaultState;
    private collapseId;
    private collapseTrigger;
    private options;
    private closeHeight;
    /**
     * Creates a new Collapse instance.
     * @param selector - The CSS selector string or HTMLElement to be collapsed/expanded
     * @param options - Configuration options for the collapse behavior
     * @param triggerSelector - Optional CSS selector for the trigger element. If not provided,
     *                         it will look for an element with data-collapse-trigger attribute
     * @throws {Error} When the provided element is not a valid HTMLElement
     */
    constructor(selector: string | HTMLElement, options?: CollapseOptions, triggerSelector?: string);
    /**
     * Expands the collapse element to show its content.
     * Triggers 'beforeshow' and 'aftershow' events, and calls the onToggle callback if provided.
     *
     * @example
     * ```ts
     * const collapse = new Collapse('#myCollapse');
     * collapse.show();
     * ```
     */
    show: () => void;
    /**
     * Collapses the element to hide its content.
     * Triggers 'beforehide' and 'afterhide' events, and calls the onToggle callback if provided.
     *
     * @example
     * ```ts
     * const collapse = new Collapse('#myCollapse');
     * collapse.hide();
     * ```
     */
    hide: () => void;
    /**
     * Toggles the collapse element between expanded and collapsed states.
     * Triggers 'beforetoggle' and 'aftertoggle' events, and calls the onToggle callback if provided.
     *
     * @example
     * ```ts
     * const collapse = new Collapse('#myCollapse');
     * collapse.toggle();
     * ```
     */
    toggle: () => void;
    setCloseHeight: (closeHeight: number) => void;
    private initCollapse;
    /**
     * Cleans up the Collapse instance by removing event listeners.
     * This method should be called when the collapse component is no longer needed
     * to prevent memory leaks.
     *
     * @example
     * ```ts
     * const collapse = new Collapse('#myCollapse');
     * // When done with the collapse component
     * collapse.cleanup();
     * ```
     */
    cleanup(): void;
    /**
     * Initializes a new Collapse instance with the specified configuration.
     *
     * @param selector - The CSS selector string or HTMLElement to be collapsed/expanded
     * @param options - Configuration options for the collapse behavior
     * @param triggerSelector - Optional CSS selector for the trigger element
     * @returns A new Collapse instance
     *
     * @example
     * ```ts
     * const collapse = Collapse.init('#myCollapse', {
     *   defaultState: 'open',
     *   onToggle: ({ isExpanded }) => console.log(isExpanded)
     * });
     * ```
     */
    static init: (selector: string | HTMLElement, options?: CollapseOptions, triggerSelector?: string) => Collapse;
    /**
     * Automatically initializes all collapse components in the document that match the provided selector.
     * This is useful for setting up multiple collapse elements at once without manual initialization.
     *
     * @param selector - CSS selector to identify collapse elements. Defaults to '[data-fx-collapse]'
     *
     * @example
     * ```ts
     * // Initialize all elements with data-fx-collapse attribute
     * Collapse.autoInit();
     *
     * // Initialize elements with custom selector
     * Collapse.autoInit('.custom-collapse');
     * ```
     */
    static autoInit: (selector?: string) => void;
}

export declare type CollapseOptions = {
    defaultState?: CollapseState;
    closeHeight?: number;
    onToggle?: ({ isExpanded }: {
        isExpanded: boolean;
    }) => void;
};

declare type CollapseState = "open" | "close";

export { }