import { RefTreeNode } from "../app";
import { Content } from "./content";
import { DOMNodeComponent, MaybeChildNode } from "./node";
/**
 * Element type of DOM element components.
 */
export type DOMElement = HTMLElement | SVGElement;
/**
 * The merged map from tag name to `DOMElement`.
 */
export type DOMElementTagNameMap = HTMLElementTagNameMap & SVGElementTagNameMap;
/**
 * Get the DOM element type from tag name.
 */
export type TagNameToDOMElement<E extends keyof DOMElementTagNameMap> = E extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[E] : E extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[E] : never;
/**
 * Get the evnet listener map type from tag name.
 */
export type TagNameToEventMap<E extends keyof DOMElementTagNameMap> = E extends keyof HTMLElementEventMap ? HTMLElementEventMap[E] : E extends keyof SVGElementEventMap ? SVGElementEventMap[E] : never;
/**
 * The map of custom event listeners of web components.
 *
 * Add your custom event listeners to this map using declaration merging:
 *
 * ```ts
 * declare module "refina" {
 *   interface WebComponentsEventListeners {
 *     "web-component-tag-name": {
 *        "custom-event-name": (this: CustomElement, ev: CustomEvent) => void;
 *     };
 *   }
 * }
 * ```
 */
export interface WebComponentsEventListeners {
}
/**
 * The map of native event listeners of DOM elements.
 */
type NativeElementEventListeners<E> = {
    [K in keyof HTMLElementEventMap]: (this: E, ev: HTMLElementEventMap[K]) => void;
};
/**
 * Check if the tag name is a native element.
 *
 * If and only if there is no hyphen in the tag name, it is considered as a native element.
 *
 * **Warning**: This type is not that accurate.
 */
type IsNativeElement<E extends keyof DOMElementTagNameMap> = E extends `${string}-${string}` ? false : true;
/**
 * Get the event listeners type by the tag name.
 */
export type DOMElementEventListeners<E extends keyof DOMElementTagNameMap> = IsNativeElement<E> extends true ? NativeElementEventListeners<TagNameToDOMElement<E>> : E extends keyof WebComponentsEventListeners ? WebComponentsEventListeners[E] & NativeElementEventListeners<HTMLElementTagNameMap[E]> : {};
/**
 * The event listeners info type of a DOM element.
 */
export type DOMElementEventListenersInfoRaw<E extends keyof DOMElementTagNameMap = keyof DOMElementTagNameMap> = {
    [K in keyof DOMElementEventListeners<E>]?: DOMElementEventListeners<E>[K] | {
        /**
         * i.e. the first argument of `addEventListener`.
         */
        listener: DOMElementEventListeners<E>[K];
        /**
         * i.e. the second argument of `addEventListener`.
         */
        options?: boolean | AddEventListenerOptions;
    };
};
type EventListenerParams = [
    listener: EventListener,
    options?: boolean | AddEventListenerOptions
];
/**
 * The base class of DOM element components.
 *
 * The main function of this class is to manage the children of the DOM element.
 */
export declare abstract class DOMElementComponent<E extends keyof DOMElementTagNameMap = keyof DOMElementTagNameMap> extends DOMNodeComponent<TagNameToDOMElement<E>> {
    /**
     * The ref tree node of this element.
     */
    $refTreeNode: RefTreeNode;
    /**
     * The primary element of the component.
     *
     * In common cases, this is the same as `this`.
     */
    $primaryEl: DOMElementComponent;
    /**
     * Children DOM node components that are not updated to the DOM tree yet.
     */
    pendingChildren: DOMNodeComponent[];
    /**
     * Children DOM node components that have mounted to the DOM tree.
     */
    protected mountedChildren: Set<DOMNodeComponent<Node>>;
    updateDOM(): MaybeChildNode;
    /**
     * The attributes that are not applied yet.
     *
     * It can accumulate attributes from multiple calls of `addAttr` during the `UPDATE` call.
     */
    protected pendingAttrs: Partial<this["node"]>;
    /**
     * Add a attributes to the element.
     *
     * @param attrs The attributes to add.
     */
    addAttrs(attrs: Partial<this["node"]>): void;
    /**
     * The attributes that are applied to the DOM element.
     */
    protected appliedAttrs: Partial<this["node"]>;
    /**
     * Write the pending attributes to the DOM element.
     */
    protected applyAttrs(): void;
    /**
     * The classes that are not applied yet.
     *
     * It can accumulate classes from multiple calls of `addCls` during the `UPDATE` call.
     */
    protected pendingCls: string;
    /**
     * Append classes to the element.
     *
     * @param cls The classes to add.
     */
    addCls(cls: string): void;
    /**
     * The classes that are applied to the DOM element.
     */
    protected appliedCls: string;
    /**
     * Write the pending classes to the DOM element.
     */
    protected applyCls(): void;
    /**
     * The styles that are not applied yet.
     *
     * It can accumulate styles from multiple calls of `addCss` during the `UPDATE` call.
     */
    protected pendingCss: string;
    /**
     * Append styles to the element.
     *
     * **Note**: It is not required to add a semicolon (`;`) at the end of the style.
     *
     * @param css The css to add.
     */
    addCss(css: string): void;
    /**
     * The styles that are applied to the DOM element.
     */
    protected appliedCss: string;
    /**
     * Write the pending styles to the DOM element.
     */
    protected applyCss(): void;
    /**
     * The event listeners that are not applied yet.
     *
     * It can accumulate event listeners from multiple calls of `addEventListener` during the `UPDATE` call.
     */
    pendingEventListeners: Record<string, EventListenerParams[]>;
    /**
     * The event listeners that are applied to the DOM element.
     */
    registeredEventListeners: Record<string, EventListenerParams[]>;
    /**
     * Add an event listener to the element.
     *
     * **Note**: The parameters of this method is the same as `addEventListener` of `HTMLElement`.
     *
     * @param type The event type.
     * @param listener The event listener.
     * @param options The event listener options.
     */
    addEventListener<K extends keyof DOMElementEventListeners<E>>(type: K & string, listener: IsNativeElement<E> extends true ? (this: HTMLAnchorElement, ev: TagNameToEventMap<E>) => void : DOMElementEventListeners<E>[K], options?: boolean | AddEventListenerOptions): void;
    /**
     * This method is used by `Context` to add the event listeners
     *  from the third argument of the DOM element component function.
     *
     * @param listeners The event listener map to add.
     */
    addEventListeners(listeners: DOMElementEventListenersInfoRaw<E>): void;
    /**
     * Write the pending event listeners to the DOM element.
     */
    applyEventListeners(): void;
}
export declare class HTMLElementComponent<E extends keyof HTMLElementTagNameMap = keyof HTMLElementTagNameMap> extends DOMElementComponent<E> {
    protected applyAttrs(): void;
}
export declare class SVGElementComponent<E extends keyof SVGElementTagNameMap = keyof SVGElementTagNameMap> extends DOMElementComponent<E> {
    protected applyAttrs(): void;
}
/**
 * Replace all hyphens with low lines.
 *
 * This is used to convert the tag name of custom elements to the function name.
 */
type ReplaceHyphenWithLowLine<S extends string> = S extends `${infer A}-${infer B}` ? `${A}_${ReplaceHyphenWithLowLine<B>}` : S;
/**
 * The component functions of HTML elements.
 */
export type HTMLElementFuncs = {
    [E in keyof HTMLElementTagNameMap as `_${ReplaceHyphenWithLowLine<E>}`]: (data?: Partial<HTMLElementTagNameMap[E]>, children?: Content, eventListeners?: DOMElementEventListenersInfoRaw<E>) => void;
};
/**
 * Because type of attributes of SVG elements is not provided,
 *  this type is used to specify the attributes of SVG elements.
 */
export type SVGElementFuncData = Record<string, undefined | string | number | ((...args: any) => any)>;
/**
 * The component functions of SVG elements.
 */
export type SVGElementFuncs = {
    [E in keyof SVGElementTagNameMap as `_svg${Capitalize<E>}`]: (data?: SVGElementFuncData, children?: Content, eventListeners?: DOMElementEventListenersInfoRaw<E>) => void;
};
declare module ".." {
    interface ContextFuncs extends HTMLElementFuncs {
    }
    interface ContextFuncs extends SVGElementFuncs {
    }
}
export {};
//# sourceMappingURL=element.d.ts.map