@flexilla/utilities/dist/dom-utilities.d.ts

Utilities package for flexilla library

/**
 * @param {Object} params - The parameters object
 * @param {HTMLElement} params.element - The target HTML element
 * @param {Function} params.callback - The function to execute after the animation
 * @example
 * const div = document.getElementById('animated-div');
 * afterAnimation({
 *   element: div,
 *   callback: () => console.log('Animation completed')
 * });
 */
export declare const afterAnimation: ({ element, callback, }: {
    element: HTMLElement;
    callback: () => void;
}) => void;

/**
 * Executes a callback after a CSS transition has completed on an element.
 * If no transition is present or the transition is invalid, the callback executes immediately.
 * @param {Object} params - The parameters object
 * @param {HTMLElement} params.element - The target HTML element
 * @param {Function} params.callback - The function to execute after the transition
 * @example
 * const div = document.getElementById('animated-div');
 * afterTransition({
 *   element: div,
 *   callback: () => console.log('Transition completed')
 * });
 */
export declare const afterTransition: ({ element, callback, }: {
    element: HTMLElement;
    callback: () => void;
}) => void;

/**
 * Inserts a new HTML element before an existing element in the DOM.
 * @param {Object} params - The parameters object
 * @param {HTMLElement} params.newElement - The new element to insert
 * @param {HTMLElement} params.existingElement - The reference element before which to insert
 * @throws {Error} If either parameter is not a valid HTML element
 * @throws {Error} If the existing element has no parent element
 * @example
 * const newDiv = document.createElement('div');
 * const existingDiv = document.getElementById('existing');
 * appendBefore({ newElement: newDiv, existingElement: existingDiv });
 */
export declare const appendBefore: ({ newElement, existingElement, }: {
    newElement: HTMLElement;
    existingElement: HTMLElement;
}) => void;

/**
 * Dispatches a custom event with a typed detail object on a specified element.
 * @template T
 * @param {HTMLElement} element - The target HTML element
 * @param {string} eventName - The name of the custom event
 * @param {T} detail - The detail object to be included in the custom event
 * @example
 * const div = document.getElementById('my-div');
 * dispatchCustomEvent(div, 'my-event', { data: 'example' });
 */
export declare const dispatchCustomEvent: <T extends object>(element: HTMLElement, eventName: string, detail: T) => void;

/**
 * Creates a MutationObserver to watch for changes in child elements with specific attributes.
 *
 * @param {Object} params - The parameters object
 * @param {HTMLElement} params.container - The container element to observe
 * @param {string} params.attributeToWatch - The data attribute to watch for (e.g., 'data-tab-panel')
 * @param {() => void} params.onChildAdded - Callback function to execute when a matching child is added
 * ```
 */
export declare const observeChildrenChanges: ({ container, attributeToWatch, onChildAdded }: {
    container: HTMLElement;
    attributeToWatch: string;
    onChildAdded: () => void;
}) => () => void;

/**
 * Sets multiple attributes on an HTML element.
 * @param {HTMLElement} element - The target HTML element
 * @param {Record<string, string>} attributes - An object containing attribute key-value pairs
 * @example
 * const div = document.createElement('div');
 * setAttributes(div, { id: 'myDiv', class: 'my-class', 'data-test': 'value' });
 */
export declare const setAttributes: (element: HTMLElement, attributes: Record<string, string>) => void;

export { }