import { Renderer2 } from '@angular/core';
import { MigImageClassNames } from '../interfaces/mig-image-class-names.interface';
import { MigImageConfiguration } from '../interfaces/mig-image-configuration.interface';
import { MigImageData } from '../interfaces/mig-image-data.interface';
import { MigImageStyle } from '../interfaces/mig-Image-style.interface';
import { imageElementBase } from '../interfaces/progressive-image.interface';
/**
 * This class manages a single image. It keeps track of the image's height,
 * width, and position in the grid. An instance of this class is associated
 * with a single image figure, which looks like this:
 *
 *   <figure class="mat-image-grid-figure" style="transform: ...">
 *     <img class="mat-image-grid-thumbnail mat-image-grid-loaded" src="/path/to/thumbnail/image.jpg" />
 *     <img class="mat-image-grid-full-image mat-image-grid-loaded" src="/path/to/500px/image.jpg" />
 *   </figure>
 *
 * However, this element may or may not actually exist in the DOM. The actual
 * DOM element may loaded and unloaded depending on where it is with respect
 * to the viewport. This class is responsible for managing the DOM elements,
 * but does not include logic to determine _when_ the DOM elements should
 * be removed.
 *
 * This class also manages the blur-into-focus load effect.  First, the
 * <figure> element is inserted into the page. Then, a very small thumbnail
 * is loaded, stretched out to the full size of the image.  This pixelated
 * image is then blurred using CSS filter: blur(). Then, the full image is
 * loaded, with opacity:0.  Once it has loaded, it is given the
 * `mat-image-grid-loaded` class, and its opacity is set to 1.  This creates
 * an effect where there is first a blurred version of the image, and then it
 * appears to come into focus.
 */
export declare class ProgressiveImage<ServerData extends MigImageData> {
    aspectRatio: number;
    existsOnPage: boolean;
    style?: MigImageStyle;
    private readonly onClickSubject;
    onClick$: import("rxjs").Observable<ServerData>;
    protected elements: Map<string, imageElementBase>;
    protected singleImageData: ServerData;
    protected imageIndex: number;
    protected classNames: MigImageClassNames;
    protected createSubelementDelayInMs: number;
    protected renderer: Renderer2;
    private configuration;
    private readonly mainElementsKey;
    /**
     * Creates an instance of ProgressiveImage.
     * @param renderer2 - Angular class to modify DOM.
     * @param singleImageData - An array of metadata about each image.
     * @param index - Index of image in data source.
     * @param configuration - Object with the configuration data from the parent object.
     */
    constructor(renderer2: Renderer2, singleImageData: ServerData, index: number, configuration: MigImageConfiguration);
    /**
     * Load the image element associated with this ProgressiveImage into the DOM.
     * This function will append the figure tag into the DOM, create and insert the
     * thumbnail, and create and insert the full image.
     */
    load(): void;
    /**
     * Removes the main element (<figure> tag) and all subelements (thumbnail and
     * full image) from the DOM and this ProgressiveImage object.
     */
    hide(): void;
    /**
     * Prepare class for disposing (e.g. complete all observables).
     */
    dispose(): void;
    /**
     * Event handler for the image clicked event (attached to the figure tag).
     * The event handler emits a value to the onClickSubject.
     */
    imageClicked: () => void;
    /**
     * Gets the Y position of the top of the image in the web page
     * @returns Y position of the top of the image
     */
    get yTop(): number;
    /**
     * Gets the Y position of the bottom of the image in the web page
     * @returns Y position of the bottom of the image
     */
    get yBottom(): number;
    /**
     * Get the wrapper DOM element (<figure> tag) associated with this ProgressiveImage.
     * We create it, if it doesn't exist. The DOM element is not added to the page.
     * @returns The wrapper DOM element associated with this instance.
     */
    protected getMainElement(): HTMLElement;
    /**
     * Add an image as a subelement to the <figure> tag.
     * @param mainElement - Main element of this image (<figure> tag)
     * @param subElementName - Name of the subelement
     * @param className - Name of the class to be added to the new subelement (default value='' - i.e. no class added)
     * @param src - source string of image element (default value = '')
     */
    protected addImageAsSubElement(mainElement: HTMLElement, subElementName: string, className?: string, src?: string): void;
    /**
     * Add all subelements of the <figure> tag (default: 'thumbnail' and 'fullImage').
     */
    protected addAllSubElements(): void;
    /**
     * Remove a subelement (e.g. an image) of the main element.
     * @param mainElement - Main element of this image (<figure> tag)
     * @param subElementName - Name of the subElement (e.g. 'fullImage')
     */
    protected removeSubElement(mainElement: HTMLElement, subElementName: string): void;
    /**
     * Remove all subelements of the <figure> tag (default: 'thumbnail' and 'fullImage')
     * and the event handler for the figure click event (if one exists).
     */
    protected removeAllSubElements(): void;
    /**
     * Updates the style attribute to reflect the style property of this object.
     * The style property is used to position the main element in the grid.
     * @param element - HTML element where to set the styles.
     */
    protected updateStyles(element: HTMLElement): void;
}