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

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

/**
 * Accordion component class for managing collapsible content sections.
 * @class
 * @example
 * ```typescript
 * new Accordion('#myAccordion');
 *
 * // Create a multi-section accordion with options
 * const multiAccordion = new Accordion('#multiAccordion', {
 *   accordionType: 'multiple',
 *   preventClosingAll: true
 * });
 * ```
 */
export declare class Accordion {
    private accordionEl;
    private options;
    private items;
    private eventListeners;
    private cleanupObserver;
    /**
     * Creates an instance of Accordion
     * @param {string | HTMLElement} accordion - Selector string or HTMLElement for the accordion container
     * @param {AccordionOptions} [options={}] - Configuration options for the accordion
     */
    constructor(accordion: string | HTMLElement, options?: AccordionOptions);
    private initAccordion;
    private handleKeyEvents;
    reload: () => void;
    destroy(): void;
    private setItemState;
    private closeOther;
    private closeAll;
    private dispatchedEvent;
    private triggerItemState;
    private addEventListeners;
    /**
     * Shows/expands an accordion item by its ID
     * @public
     * @param {string} id - The value/ID of the accordion item to show
     * @example
     * ```typescript
     * const accordion = new Accordion('#myAccordion');
     * accordion.show('section1'); // Expands the accordion item with value="section1"
     * ```
     */
    show(id: string): void;
    /**
     * Hides/collapses an accordion item by its ID
     * @public
     * @param {string} id - The value/ID of the accordion item to hide
     * @example
     * ```typescript
     * const accordion = new Accordion('#myAccordion');
     * accordion.hide('section1'); // Collapses the accordion item with value="section1"
     * ```
     */
    hide(id: string): void;
    /**
     * Cleans up the accordion instance by removing event listeners, data attributes, and references.
     * @public
     * @example
     * ```typescript
     * const accordion = new Accordion('#myAccordion');
     * // ... use accordion ...
     * accordion.cleanup(); // Remove all event listeners and clean up resources
     * ```
     */
    cleanup: () => void;
    /**
     * Automatically initializes all accordion components matching the selector
     * @static
     * @param {string} [selector="[data-fx-accordion]"] - The selector to find accordion elements
     * @example
     * ```typescript
     * // Initialize all accordion elements with data-fx-accordion attribute
     * Accordion.autoInit();
     *
     * // Initialize accordions with custom selector
     * Accordion.autoInit('.custom-accordion');
     * ```
     */
    static autoInit: (selector?: string) => void;
    /**
     * Shortcut method to create a new Accordion instance
     * @static
     * @param {string | HTMLElement} accordion - Selector string or HTMLElement for the accordion container
     * @param {AccordionOptions} [options={}] - Configuration options for the accordion
     * @example
     * ```typescript
     * // Initialize with selector
     * const accordion1 = Accordion.init('#myAccordion');
     *
     * // Initialize with HTMLElement and options
     * const element = document.querySelector('#multiAccordion');
     * const accordion2 = Accordion.init(element, {
     *   accordionType: 'multiple',
     *   preventClosingAll: true
     * });
     * ```
     */
    static init: (accordion: string | HTMLElement, options?: AccordionOptions) => Accordion;
}

export declare type AccordionOptions = {
    accordionType?: AccordionType;
    defaultValue?: string;
    preventClosingAll?: boolean;
    allowCloseFromContent?: boolean;
    onChangeItem?: ({ expandedItem }: {
        expandedItem?: ExpandedItem;
    }) => void;
};

declare type AccordionType = "single" | "multiple";

declare type ExpandedItem = {
    accordionItem: HTMLElement;
    trigger: HTMLElement;
    content: HTMLElement;
    value: string;
    isExpanded: boolean;
};

export { }