@exadel/esl/modules/esl-image-utils/core/esl-image-container.mixin.d.ts

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

import { ESLMixinElement } from '../../esl-mixin-element/core';
/**
 * ESLImageContainerConfig - interface for ESLImageContainerMixin config
 */
export interface ESLImageContainerConfig {
    /** Class that is added to the target element when the image is loaded (in both cases: success and error) */
    readyCls: string;
    /** Class that is added to the target element when the image fails to load */
    errorCls: string;
    /** Image element selector */
    selector: string;
}
/**
 * ESLImageContainerMixin - mixin to provide image loading state class functionality
 * @author Anna Barmina, Alexey Stsefanovich (ala'n)
 *
 * Use example:
 * ```
 * <picture class="img-container img-container-16-9" esl-image-container>
 *   <img loading="lazy" alt="img" src="img.png"/>
 * </picture>
 * ```
 *
 * This mixin is used to enhance native image developer experience by adding specific classes when the image has completely loaded or not
 */
export declare class ESLImageContainerMixin extends ESLMixinElement {
    static is: string;
    /** Default configuration object */
    static DEFAULT_CONFIG: ESLImageContainerConfig;
    /** Configuration object */
    rawConfig: Partial<ESLImageContainerConfig>;
    /** Merged configuration object */
    get config(): ESLImageContainerConfig;
    /** Image element */
    protected get $images(): HTMLImageElement[];
    /** Check if all images are loaded */
    get complete(): boolean;
    /** Check if any image has loading error */
    get hasError(): boolean;
    protected connectedCallback(): void;
    protected attributeChangedCallback(name: string): void;
    protected _onReady(): void;
}