@exadel/esl/modules/esl-mixin-element/ui/esl-mixin-element.d.ts

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

import { ESLMixinRegistry } from './esl-mixin-registry';
import type { DelegatedEvent, ESLEventType, ESLEventListener, ESLListenerCriteria, ESLListenerDescriptor, ESLListenerHandler, ESLListenerTarget, ExtractEventName } from '../../esl-utils/dom/events';
import type { ESLBaseComponent } from '../../esl-utils/abstract/component';
import type { ESLDomElementRelated } from '../../esl-utils/abstract/dom-target';
/**
 * Base class for mixin elements.
 * Mixin elements attaches to the DOM element via attribute.
 * Allows multiple mixin elements per one DOM element
 */
export declare class ESLMixinElement implements ESLBaseComponent, ESLDomElementRelated {
    readonly $host: HTMLElement;
    /** Root attribute to identify mixin targets. Should contain dash in the name. */
    static is: string;
    /** Additional observed attributes */
    static observedAttributes: string[];
    /** Event to indicate component significant state change that may affect other components state */
    REFRESH_EVENT: string;
    constructor($host: HTMLElement);
    /** Callback of mixin instance initialization */
    protected connectedCallback(): void;
    /** Callback to execute on mixin instance destroy */
    protected disconnectedCallback(): void;
    /**
     * Callback to handle changing of additional attributes.
     * Happens when attribute accessed for writing independently of the actual value change
     */
    protected attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
    /** Subscribes (or resubscribes) all known descriptors that matches criteria */
    $$on<ETarget extends ESLListenerTarget, EName extends ExtractEventName<ETarget>>(criteria: ESLListenerCriteria<ETarget, EName>): 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<ETarget extends ESLListenerTarget, EName extends ExtractEventName<ETarget>>(event: EName | ESLListenerDescriptor<ETarget, EName>, handler: ESLListenerHandler<EName | DelegatedEvent<ESLEventType<EName>>>): ESLEventListener[];
    /** Unsubscribes event listener */
    $$off(...condition: ESLListenerCriteria[]): ESLEventListener[];
    /**
     * Gets or sets CSS classes for the `$host`
     * @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 attribute for the `$host`.
     * 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 current attribute value or previous value for mutation
     */
    $$attr(name: string, value?: null | boolean | string): string | null;
    /**
     * Dispatches component custom event on the `$host`.
     * Uses 'esl:' prefix for event name, overridable to customize event namespaces.
     * @param eventName - event name
     * @param eventInit - custom event init. See {@link CustomEventInit}
     */
    $$fire(eventName: string, eventInit?: CustomEventInit): boolean;
    /** Finds the first element matching the specified traversing query relative to `$host`. Uses ESLTraversingQuery to resolve the element. */
    $$find(selector: string): Element | null;
    /** Finds all elements matching the specified traversing query relative to `$host`. Uses ESLTraversingQuery to resolve the elements. */
    $$findAll(selector: string): Element[];
    /** Default error logger for `@safe` decorator */
    $$error(error: Error | string, key: string): void;
    /** Register current mixin definition */
    static register(): void;
    static readonly get: typeof ESLMixinRegistry.get;
    static readonly getAll: typeof ESLMixinRegistry.getAll;
}
export type ESLMixinElementInternal = ESLMixinElement & {
    connectedCallback(): void;
    disconnectedCallback(): void;
    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
};
export type ESLMixinElementConstructable = typeof ESLMixinElement & (new ($root: HTMLElement) => ESLMixinElement);