@umbraco/headless-backoffice-bridge
Version:
Native javascript bridge for the Umbraco Backoffice.
48 lines • 1.66 kB
TypeScript
import { LitElement, TemplateResult } from 'lit';
import { Coordinates, FocalPoint, Udi } from '../../types.js';
/**
* The image display mode.
*/
export declare enum ImageDisplayMode {
/** Renders the image in an `img` tag. */
Default = "",
/** Renders a `div` with the image as the background. */
Cover = "cover"
}
/**
* An element used to show an Image from the Media Library based on it's UDI.
*
* @example
* Renders an image with the UDI `umb://media/0f3cdbaba7a846c2979e16c113426bae` with a width of 800, a height of 600 and the focal point in the center of the image.
*
* ```html
* <umbh-image udi="umb://media/0f3cdbaba7a846c2979e16c113426bae" width="800" height="600" focalpoint='{"left": 0.5, "top": 0.5}'></umbh-image>
* ```
*/
export default class ImageElement extends LitElement {
/** The image alt text. */
alt?: string;
/** If specified the image will be cropped based on the value. */
coordinates?: Coordinates;
/** If specified and the image is cropped the focal point is used to determine the center of the image. */
focalPoint?: FocalPoint;
/** Determines how the image is rendered */
mode?: ImageDisplayMode;
/** The UDI of the image to show. */
udi: Udi;
/** The height of the image element. */
height?: number;
/** The width of the image element. */
width?: number;
private loading;
private media?;
/** @ignore */
connectedCallback(): void;
/** @ignore */
updated(props: Map<PropertyKey, unknown>): void;
/** @ignore */
render(): TemplateResult;
private loadMedia;
private getUrl;
}
//# sourceMappingURL=index.d.ts.map