@umbraco/headless-backoffice-bridge/lib/components/image/index.js

Native javascript bridge for the Umbraco Backoffice.

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { LitElement, html } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { getService } from '../../base/angular/index.js';
/**
 * The image display mode.
 */
export var ImageDisplayMode;
(function (ImageDisplayMode) {
    /** Renders the image in an `img` tag. */
    ImageDisplayMode["Default"] = "";
    /** Renders a `div` with the image as the background. */
    ImageDisplayMode["Cover"] = "cover";
})(ImageDisplayMode || (ImageDisplayMode = {}));
/**
 * 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>
 * ```
 */
let ImageElement = class ImageElement extends LitElement {
    constructor() {
        super(...arguments);
        this.loading = false;
    }
    /** @ignore */
    connectedCallback() {
        super.connectedCallback();
        this.loadMedia()
            .catch(() => {
            this.loading = false;
        });
    }
    /** @ignore */
    updated(props) {
        if (props.get('udi') !== undefined) {
            this.loadMedia()
                .catch(() => {
                this.loading = false;
            });
        }
    }
    /** @ignore */
    render() {
        if ((this.media === undefined || this.media === null) || this.loading)
            return html `<p>loading...</p>`;
        const url = this.getUrl();
        if (this.mode === ImageDisplayMode.Cover) {
            return html `<div style="background: url(${url}); background-size: cover; width: 100%; aspect-ratio: ${this.width ?? 1}/${this.height ?? 1}; overflow: hidden"></div>`;
        }
        return html `<img src=${url} alt=${this.alt} height=${this.height} width=${this.width}>`;
    }
    async loadMedia() {
        this.loading = true;
        this.media = await getService('entityResource').getById(this.udi, 'Media');
        this.loading = false;
    }
    getUrl() {
        let sep = '?';
        let url = this.media?.metaData?.MediaPath;
        if (url === undefined)
            return '';
        if (this.width !== undefined && this.width !== null) {
            sep = '&';
            url += `?width=${String(this.width)}`;
        }
        if (this.height !== undefined && this.height !== null) {
            sep = '&';
            url += `${sep}height=${String(this.height)}`;
        }
        if (this.coordinates !== undefined && this.coordinates !== null) {
            url += `${sep}crop=${String(this.coordinates.x1)},${String(this.coordinates.y1)},${String(this.coordinates.x2)},${String(this.coordinates.y2)}&mode=percentage`;
        }
        else if (this.focalPoint !== undefined && this.focalPoint !== null) {
            url += `${sep}center=${String(this.focalPoint.top)},${String(this.focalPoint.left)}&mode=crop`;
        }
        else {
            url += `${sep}mode=crop`;
        }
        return url;
    }
};
__decorate([
    property({ type: String })
], ImageElement.prototype, "alt", void 0);
__decorate([
    property({ type: Object })
], ImageElement.prototype, "coordinates", void 0);
__decorate([
    property({ type: Object })
], ImageElement.prototype, "focalPoint", void 0);
__decorate([
    property({ type: String })
], ImageElement.prototype, "mode", void 0);
__decorate([
    property({ type: String })
], ImageElement.prototype, "udi", void 0);
__decorate([
    property({ type: Number })
], ImageElement.prototype, "height", void 0);
__decorate([
    property({ type: Number })
], ImageElement.prototype, "width", void 0);
__decorate([
    state()
], ImageElement.prototype, "loading", void 0);
__decorate([
    state()
], ImageElement.prototype, "media", void 0);
ImageElement = __decorate([
    customElement('umbh-image')
], ImageElement);
export default ImageElement;
//# sourceMappingURL=index.js.map