@flexilla/utilities/dist/toggler.d.ts

Utilities package for flexilla library

/**
 * Creates a toggle functionality for DOM elements based on provided options.
 *
 * @param {TogglerOptions} options - Configuration options for the toggler
 * @param {string | HTMLElement} options.trigger - The trigger element that controls the toggle action
 * @param {Array<{element: string | HTMLElement, attributes: {initial: Record<string, string>, to: Record<string, string>}}>} options.targets - Array of target elements and their toggle attributes
 * @param {Function} [options.onToggle] - Optional callback function called when toggle state changes
 *
 * @example
 * ```ts
 * actionToggler({
 *   trigger: '#toggleButton',
 *   targets: [{
 *     element: '#target',
 *     attributes: {
 *       initial: { 'aria-hidden': 'true' },
 *       to: { 'aria-hidden': 'false' }
 *     }
 *   }],
 *   onToggle: ({ isExpanded }) => console.log('Toggle state:', isExpanded)
 * });
 * ```
 */
export declare const actionToggler: (options: TogglerOptions) => void;

declare type AttributeMap = {
    [key: string]: string;
};

/**
 * Creates a toggleable navbar with accessibility support and optional overlay.
 *
 * @param {Object} params - The parameters for navbar toggle functionality
 * @param {string | HTMLElement} params.navbarElement - The navbar element to toggle
 * @param {Function} [params.onToggle] - Optional callback function called when navbar state changes
 * @description
 * Required HTML structure:
 * ```html
 * <button data-nav-trigger data-toggle-nav="navbar-id">Toggle</button>
 * <nav id="navbar-id">...</nav>
 * <div data-nav-overlay data-navbar-id="navbar-id"></div>
 * ```
 */
export declare const toggleNavbar: ({ navbarElement, onToggle }: {
    navbarElement: string | HTMLElement;
    onToggle?: ({ isExpanded }: {
        isExpanded: boolean;
    }) => void;
}) => {
    cleanup: () => void;
    close: () => void;
    toggle: () => void;
} | undefined;

export declare type TogglerOptions = {
    trigger: HTMLElement | string;
    onToggle?: ({ isExpanded }: {
        isExpanded: boolean;
    }) => void;
    targets: {
        element: HTMLElement | string;
        attributes: {
            initial: AttributeMap;
            to: AttributeMap;
        };
    }[];
};

export { }