igniteui-webcomponents/components/common/controllers/mutation-observer.d.ts

Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.

import type { ReactiveController, ReactiveControllerHost } from 'lit';
/** @ignore */
export interface MutationControllerConfig<T> {
    /** The callback function to run when a mutation occurs. */
    callback: MutationControllerCallback<T>;
    /** The underlying mutation observer configuration parameters. */
    config: MutationObserverInit;
    /**
     * The element to observe.
     * If left out, the observer will listen on the host component itself.
     */
    target?: Element;
    /**
     * A filter configuration.
     * See {@link MutationControllerFilter|this} for additional information.
     */
    filter?: MutationControllerFilter<T>;
}
type MutationControllerCallback<T> = (params: MutationControllerParams<T>) => unknown;
/**
 * Filter configuration to return elements that either match
 * an array of selector strings or a predicate function.
 */
type MutationControllerFilter<T> = string[] | ((node: T) => boolean);
type MutationDOMChange<T> = {
    target: Element;
    node: T;
};
type MutationChange<T> = {
    /** Elements that have attribute(s) changes. */
    attributes: T[];
    /** Elements that have been added. */
    added: MutationDOMChange<T>[];
    /** Elements that have been removed. */
    removed: MutationDOMChange<T>[];
};
export type MutationControllerParams<T> = {
    /** The original mutation records from the underlying observer. */
    records: MutationRecord[];
    /** The aggregated changes. */
    changes: MutationChange<T>;
    /** The observer controller instance. */
    observer: MutationController<T>;
};
declare class MutationController<T> implements ReactiveController {
    private _host;
    private _observer;
    private _target;
    private _config;
    private _callback;
    private _filter?;
    constructor(host: ReactiveControllerHost & Element, options: MutationControllerConfig<T>);
    hostConnected(): void;
    hostDisconnected(): void;
    private _process;
    /**
     * Begin receiving notifications of changes to the DOM based
     * on the configured {@link MutationControllerConfig.target|target} and observer {@link MutationControllerConfig.config|options}.
     */
    observe(): void;
    /** Stop watching for mutations. */
    disconnect(): void;
}
/**
 * Creates and attaches a mutation controller with `config` to the passed in `host`.
 *
 * Automatically starts/stops observing for mutation changes
 * in the respective component connect/disconnect callbacks.
 *
 * The mutation observer is disconnected before invoking the passed in callback and re-attached
 * after that in order to not loop itself in endless stream of changes.
 */
export declare function createMutationController<T>(host: ReactiveControllerHost & Element, config: MutationControllerConfig<T>): MutationController<T>;
export {};