@exadel/esl/modules/esl-base-element/core/esl-base-element.d.ts

Exadel Smart Library (ESL) is the lightweight custom elements library that provide a set of super-flexible components

import type { ESLEventListener, ESLListenerHandler, ESLListenerCriteria, ESLListenerDescriptor } from '../../esl-utils/dom/events';
import type { ESLBaseComponent } from '../../esl-utils/abstract/component';
/**
 * Base class for ESL custom elements
 * Allows defining custom element with the optional custom tag name
 */
export declare abstract class ESLBaseElement extends HTMLElement implements ESLBaseComponent {
    /** Custom element tag name */
    static is: string;
    /** Event to indicate component significant state change that may affect other components state */
    REFRESH_EVENT: string;
    protected _connected: boolean;
    /** @returns custom element tag name */
    get baseTagName(): string;
    protected connectedCallback(): void;
    protected disconnectedCallback(): void;
    /**
     * Callback to handle changing of element attributes.
     * Happens when attribute accessed for writing independently of the actual value change
     */
    protected attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
    /** Checks that the element's `connectedCallback` has been executed */
    get connected(): boolean;
    /** Subscribes (or resubscribes) all known descriptors that matches criteria */
    $$on(criteria: ESLListenerCriteria): ESLEventListener[];
    /** Subscribes `handler` method marked with `@listen` decorator */
    $$on(handler: ESLListenerHandler): ESLEventListener[];
    /** Subscribes `handler` function by the passed DOM event descriptor {@link ESLListenerDescriptor} or event name */
    $$on<EType extends keyof ESLListenerEventMap>(event: EType | ESLListenerDescriptor<EType>, handler: ESLListenerHandler<ESLListenerEventMap[EType]>): ESLEventListener[];
    /** Unsubscribes event listener */
    $$off(...condition: ESLListenerCriteria[]): ESLEventListener[];
    /**
     * Gets or sets CSS classes for the current element.
     * @param cls - CSS classes query {@link CSSClassUtils}
     * @param value - boolean to set CSS class(es) state or undefined to skip mutation
     * @returns current classes state or passed state
     */
    $$cls(cls: string, value?: boolean): boolean;
    /**
     * Gets or sets an attribute for the current element.
     * If the `value` param is undefined then skips mutation.
     * @param name - attribute name
     * @param value - string attribute value, boolean attribute state or `null` to delete attribute
     * @returns the current attribute value or previous value for mutation
     */
    $$attr(name: string, value?: null | boolean | string): string | null;
    /**
     * Dispatches component custom event.
     * @param eventName - event name
     * @param eventInit - custom event init. See {@link CustomEventInit}
     */
    $$fire(eventName: string, eventInit?: CustomEventInit): boolean;
    /**
     * Register component in the {@link customElements} registry
     * @param tagName - custom tag name to register custom element
     */
    static register(this: typeof ESLBaseElement, tagName?: string): void;
    /** Shortcut for `customElements.whenDefined(currentCustomElement)` */
    static get registered(): Promise<CustomElementConstructor>;
    /** Creates an instance of the current custom element */
    static create<T extends typeof ESLBaseElement>(this: T): InstanceType<T>;
    /** General signature of {@link create} to allow simplified overrides of the method */
    static create(this: typeof ESLBaseElement): ESLBaseElement;
}