vira/dist/elements/vira-image.element.d.ts

A simple and highly versatile design system using element-vir.

import { type Dimensions } from '@augment-vir/common';
import { type Duration, type DurationUnit } from 'date-vir';
/**
 * An `<img>` element wrapper that handles size constraints and includes slots for loading and error
 * indicators.
 *
 * Use CSS properties to constrain the image. In particular, set `min-height` and `min-width` on
 * this to control the size of the loader and error slots.
 *
 * @category Image
 * @category Elements
 * @see https://electrovir.github.io/element-vir/vira/book/elements/vira-image
 */
export declare const ViraImage: import("element-vir").DeclarativeElementDefinition<"vira-image", {
    /** The URL of the image to load. This is passed directly to the `<img>` element. */
    imageUrl: string;
    /**
     * The dimension which should dominantly constrain the image size. Whichever dimension this is
     * set to is the dimension that the image will grow to match. This is only relevant if you apply
     * size constraints on ViraImage via CSS in its parent.
     *
     * @default 'width'
     */
    dominantDimension?: keyof Dimensions | undefined;
    /** For debugging only: artificially set a delay for the image loading so you can see the loader. */
    _debugLoadDelay?: Duration<DurationUnit.Milliseconds> | undefined;
}, {
    /**
     * To avoid race conditions between `<img>` element events and potential input changing,
     * save the loaded state of an URL's image by the image's URL.
     */
    loadedUrls: Readonly<{
        [url: string]: true;
    }>;
    /**
     * To avoid race conditions between `<img>` element events and potential input changing,
     * save the errored state of an URL's image by the image's URL.
     */
    erroredUrls: Readonly<{
        [url: string]: true;
    }>;
}, {
    imageLoad: import("element-vir").DefineEvent<void>;
    imageError: import("element-vir").DefineEvent<unknown>;
}, "vira-image-height-constrained", "vira-image-", readonly ["loading", "error"]>;