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

An offcanvas component for creating responsive and off-screen navigation panels in web applications.

/**
 * Class representing an Offcanvas element.
 * An Offcanvas is a sidebar component that can slide in from the edges of the viewport.
 * It can be triggered to show/hide through various user interactions.
 *
 * @example
 * ```ts
 * // Initialize with element ID
 * const offcanvas = new Offcanvas('#myOffcanvas', {
 *   allowBodyScroll: true,
 *   staticBackdrop: false
 * });
 *
 * // Or initialize with HTMLElement
 * const element = document.querySelector('#myOffcanvas');
 * const offcanvas = new Offcanvas(element);
 * ```
 */
export declare class OffCanvas {
    private offCanvasElement;
    private offCanvasTriggers;
    private offCanvasCloseBtns;
    private allowBodyScroll;
    private staticBackdrop;
    private backdrop;
    private options;
    private teleporter;
    /**
     * Creates an instance of Offcanvas.
     * @param offcanvas - The offcanvas element selector or HTMLElement
     * @param options - Configuration options for the offcanvas
     * @throws {Error} When the provided element is not a valid HTMLElement
     *
     * @example
     * ```ts
     * const offcanvas = new Offcanvas('#sidebar', {
     *   allowBodyScroll: true, // Allow scrolling when offcanvas is open
     *   staticBackdrop: false, // Close when clicking outside
     *   backdrop: 'dark',      // Backdrop appearance
     *   onShow: () => console.log('Offcanvas shown'),
     *   onHide: () => console.log('Offcanvas hidden')
     * });
     * ```
     */
    constructor(offcanvas: string | HTMLElement, options?: OffcanvasOptions);
    private moveElOnInit;
    private findOffCanvasElements;
    private setupAttributes;
    private closeWhenClickOutSide;
    private closeOffCanvas;
    private openOffCanvas;
    private closeWithEsc;
    private initCloseBtns;
    private changeState;
    private initTriggers;
    private setupOffcanvas;
    /**
     * Opens the offcanvas element.
     * @example
     * ```ts
     * const offcanvas = new Offcanvas('#sidebar');
     * offcanvas.open();
     * ```
     */
    open(): void;
    /**
     * Closes the offcanvas element.
     * This method will trigger the beforeHide callback if provided,
     * remove the backdrop if present, and finally trigger the onHide callback.
     *
     * @example
     * ```ts
     * const offcanvas = new Offcanvas('#sidebar');
     * offcanvas.close();
     * ```
     */
    close(): void;
    setOptions: ({ allowBodyscroll }: {
        allowBodyscroll?: boolean;
    }) => void;
    /**
     * Cleans up the offcanvas instance by removing event listeners and references.
     * Call this method when the offcanvas component is no longer needed to prevent memory leaks.
     *
     * @example
     * ```ts
     * const offcanvas = new Offcanvas('#sidebar');
     * // ... use offcanvas ...
     * offcanvas.cleanup();
     * ```
     */
    cleanup(): void;
    /**
     *
     * @param selector - The selector for offcanvas elements to initialize.
     * @example
     * ```ts
     * Offcanvas.autoInit('#sidebar');
     * ```
     */
    static autoInit: (selector?: string) => void;
    /**
     * This is an alternative to using the constructor directly.
     * @param offcanvas - The offcanvas element selector or HTMLElement
     * @param options - Configuration options for the offcanvas
     * @returns A new Offcanvas instance
     *
     * @example
     * ```ts
     * const offcanvas = Offcanvas.init('#sidebar', {
     *   allowBodyScroll: true,
     *   staticBackdrop: false
     * });
     * ```
     */
    static init: (offcanvas: string | HTMLElement, options?: OffcanvasOptions) => OffCanvas;
}

export declare type OffcanvasOptions = {
    staticBackdrop?: boolean;
    allowBodyScroll?: boolean;
    backdrop?: string;
    beforeHide?: () => {
        cancelAction?: boolean;
    } | void;
    beforeShow?: () => void;
    onShow?: () => void;
    onHide?: () => void;
};

export { }