import { r as registerInstance, h } from './index-ytAlchvh.js';

const eclPictureEcCss = () => `.ecl-picture.sc-ecl-picture-ec img.sc-ecl-picture-ec{object-position:var(--ecl-image-anchor,"center")}.ecl-picture--zoom.sc-ecl-picture-ec{display:block;overflow:hidden}.ecl-picture--zoom.sc-ecl-picture-ec img.sc-ecl-picture-ec{transition:transform .5s}.ecl-picture--zoom.sc-ecl-picture-ec:focus-visible img.sc-ecl-picture-ec,.ecl-picture--zoom.sc-ecl-picture-ec:hover img.sc-ecl-picture-ec{transform:scale(1.1)}.sc-ecl-picture-ec-h{display:contents}`;

const eclPictureEuCss = () => `.ecl-picture.sc-ecl-picture-eu img.sc-ecl-picture-eu{object-position:var(--ecl-image-anchor,"center")}.ecl-picture--zoom.sc-ecl-picture-eu{display:block;overflow:hidden}.ecl-picture--zoom.sc-ecl-picture-eu img.sc-ecl-picture-eu{transition:transform .5s}.ecl-picture--zoom.sc-ecl-picture-eu:focus-visible img.sc-ecl-picture-eu,.ecl-picture--zoom.sc-ecl-picture-eu:hover img.sc-ecl-picture-eu{transform:scale(1.1)}.sc-ecl-picture-eu-h{display:contents}`;

const EclPicture = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.styleClass = '';
        this.imageAnchor = 'center';
        this.lazy = false;
        this.zoom = false;
    }
    getClass() {
        const styleClasses = [
            `ecl-picture`,
            this.styleClass
        ];
        if (this.zoom) {
            styleClasses.push('ecl-picture--zoom');
        }
        return styleClasses.join(' ');
    }
    getImgAttr() {
        const attrs = {
            src: this.image,
        };
        if (this.imgClass) {
            attrs['class'] = this.imgClass;
        }
        if (this.imageAlt) {
            attrs['alt'] = this.imageAlt;
        }
        if (this.lazy) {
            attrs['loading'] = 'lazy';
        }
        if (this.imageAnchor && this.imageAnchor !== 'center') {
            attrs['style'] = {
                '--ecl-image-anchor': this.imageAnchor,
            };
        }
        return attrs;
    }
    componentWillLoad() {
        var _a;
        this.theme = (_a = document.documentElement.getAttribute('data-ecl-theme')) !== null && _a !== void 0 ? _a : (this.theme || 'ec');
    }
    render() {
        return (h("picture", { key: 'd04b4b39630998f1f3708f2ce96c7feadc48c2b0', class: this.getClass() }, h("slot", { key: '0087999168fefe4ac6a4d36a014028cd18cf998c' }), h("img", Object.assign({ key: '6c9d5fd559a1e8a20f8a2421ebb08008bfe6de26' }, this.getImgAttr()))));
    }
    ;
};
EclPicture.style = {
    ec: eclPictureEcCss(),
    eu: eclPictureEuCss()
};

export { EclPicture as ecl_picture };
