import { p as proxyCustomElement, H, c as createEvent, h } from './p-a53686b3.js';
import { d as defineCustomElement$1 } from './p-32226717.js';

const mediaImageCss = ".digi-media-image.sc-digi-media-image{position:relative;display:inline-flex;max-width:100%;height:0px}.digi-media-image.digi-media-image--aspect-ratio.sc-digi-media-image{width:var(--digi--media-image--width);height:unset}.digi-media-image.digi-media-image--loaded.sc-digi-media-image{height:unset}.digi-media-image.digi-media-image--fullwidth.sc-digi-media-image{width:100%}.digi-media-image.digi-media-image--unlazy.sc-digi-media-image:not(.digi-media-image--aspect-ratio){height:unset}.digi-media-image--aspect-ratio.sc-digi-media-image .digi-media-image__observer.sc-digi-media-image{position:absolute;top:0;left:0;height:100%}.digi-media-image__padded-box.sc-digi-media-image{display:inline-block;padding-top:var(--digi--media-image--padded-box, 0);height:0}.digi-media-image__image.sc-digi-media-image{max-width:100%;height:auto;opacity:0.06;filter:saturate(0);transition:opacity 0.2s, filter 0.4s}.digi-media-image--loaded.sc-digi-media-image .digi-media-image__image.sc-digi-media-image{opacity:1;filter:saturate(1)}.digi-media-image--unlazy.sc-digi-media-image .digi-media-image__image.sc-digi-media-image{transition:none;opacity:1;filter:none}.digi-media-image--fullwidth.sc-digi-media-image .digi-media-image__image.sc-digi-media-image{width:100%}.digi-media-image--aspect-ratio.sc-digi-media-image .digi-media-image__image.sc-digi-media-image{position:absolute;top:0;left:0;width:100%;height:100%}";
const DigiMediaImageStyle0 = mediaImageCss;

const MediaImage = /*@__PURE__*/ proxyCustomElement(class MediaImage extends H {
    constructor() {
        super();
        this.__registerHost();
        this.afOnLoad = createEvent(this, "afOnLoad", 7);
        this.isPlaceholderLoaded = false;
        this.hasSetSrc = false;
        this.hasAspectRatio = false;
        this.paddedBoxPadding = '0%';
        this.isLoaded = false;
        this.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=';
        this.srcset = undefined;
        this.afObserverOptions = {
            rootMargin: '200px',
            threshold: 0
        };
        this.afSrc = undefined;
        this.afSrcset = undefined;
        this.afAlt = undefined;
        this.afTitle = undefined;
        this.afAriaLabel = undefined;
        this.afWidth = undefined;
        this.afHeight = undefined;
        this.afFullwidth = undefined;
        this.afUnlazy = false;
    }
    srcChangeHandler() {
        this.setImageSrc();
    }
    connectedCallback() {
        if (this.afUnlazy) {
            this.setImageSrc();
        }
        // Add padded box to wrapper if width and height props exists
        if (this.afWidth && this.afHeight) {
            this.hasAspectRatio = true;
            this.setPaddedBox();
        }
    }
    setImageSrc() {
        this.src = this.afSrc;
        this.srcset = this.afSrcset;
        this.hasSetSrc = true;
    }
    setPaddedBox() {
        this.paddedBoxPadding =
            (parseInt(this.afHeight, 10) / parseInt(this.afWidth, 10)) * 100 + '%';
    }
    intersectHandler() {
        if (this.afUnlazy) {
            return;
        }
        this.setImageSrc();
    }
    loadHandler(e) {
        if (this.afUnlazy) {
            return;
        }
        if (this.isPlaceholderLoaded) {
            this.isLoaded = true;
            this.afOnLoad.emit(e);
            return;
        }
        this.isPlaceholderLoaded = true;
    }
    get cssModifiers() {
        return {
            'digi-media-image--unlazy': this.afUnlazy,
            'digi-media-image--loaded': this.isLoaded,
            'digi-media-image--aspect-ratio': this.hasAspectRatio,
            'digi-media-image--fullwidth': this.afFullwidth
        };
    }
    get cssInlineStyles() {
        return {
            '--digi--media-image--padded-box': this.paddedBoxPadding
        };
    }
    render() {
        return (h("host", { key: '9cfb435b346ea2c850e9ad1c8623d1372e194b12' }, h("div", { key: 'c81e1c86fcc1457924cdb05d03c2a2d3f3fcca97', class: Object.assign({ 'digi-media-image': true }, this.cssModifiers), style: {
                '--digi--media-image--width': this.afWidth
                    ? `${this.afWidth}px`
                    : null
            } }, h("digi-util-intersection-observer", { key: '3cec484d599d030b923983294d1e49643acfb98e', class: "digi-media-image__observer", onAfOnIntersect: () => this.intersectHandler(), afOnce: true, afOptions: this.afObserverOptions }), this.hasAspectRatio && (h("div", { key: 'be09f16a35bde1db6b0ef7f9bf62553761b5c1ff', class: "digi-media-image__padded-box", style: this.cssInlineStyles })), h("img", { key: '22c705fa7866f99f741e0c852d319b57d37145a3', class: "digi-media-image__image", onLoad: (e) => this.loadHandler(e), src: this.src, alt: this.afAlt, "aria-label": this.afAriaLabel, height: this.afHeight, srcset: this.srcset, title: this.afTitle, width: this.afWidth, loading: this.afUnlazy ? 'eager' : 'lazy' }))));
    }
    static get watchers() { return {
        "afSrc": ["srcChangeHandler"]
    }; }
    static get style() { return DigiMediaImageStyle0; }
}, [2, "digi-media-image", {
        "afObserverOptions": [16],
        "afSrc": [1, "af-src"],
        "afSrcset": [1, "af-srcset"],
        "afAlt": [1, "af-alt"],
        "afTitle": [1, "af-title"],
        "afAriaLabel": [1, "af-aria-label"],
        "afWidth": [1, "af-width"],
        "afHeight": [1, "af-height"],
        "afFullwidth": [4, "af-fullwidth"],
        "afUnlazy": [4, "af-unlazy"],
        "isLoaded": [32],
        "src": [32],
        "srcset": [32]
    }, undefined, {
        "afSrc": ["srcChangeHandler"]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["digi-media-image", "digi-util-intersection-observer"];
    components.forEach(tagName => { switch (tagName) {
        case "digi-media-image":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, MediaImage);
            }
            break;
        case "digi-util-intersection-observer":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}

export { MediaImage as M, defineCustomElement as d };
