import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';

const eclContentItemEcCss = ".ecl-content-item.sc-ecl-content-item-ec{align-items:flex-start;display:flex;flex-direction:column;margin:0}.ecl-content-item--inline.sc-ecl-content-item-ec{flex-direction:row}.ecl-content-item--divider.sc-ecl-content-item-ec{border-bottom:1px solid #cfcfcf;padding-bottom:1.5rem}.ecl-content-item__content-block.sc-ecl-content-item-ec{font:normal normal 400 1rem/1.25rem arial,sans-serif;margin-inline-end:auto;max-width:80ch}.ecl-content-item__date.sc-ecl-content-item-ec{flex-shrink:0;margin-inline-end:1rem}.ecl-content-item__picture.sc-ecl-content-item-ec{flex-shrink:0;margin-bottom:1rem;max-width:100%}.ecl-content-item__picture--small.sc-ecl-content-item-ec{height:140px;width:140px}.ecl-content-item__image.sc-ecl-content-item-ec{border:1px solid #cfcfcf;width:100%}@media (min-width:768px){.ecl-content-item.sc-ecl-content-item-ec{flex-direction:row}.ecl-content-item__picture.sc-ecl-content-item-ec{margin-bottom:0;margin-inline-end:1rem;max-width:210px}.ecl-content-item__picture--right.sc-ecl-content-item-ec{margin-inline-end:0;margin-inline-start:1rem;order:1}}";

const eclContentItemEuCss = ".ecl-content-item.sc-ecl-content-item-eu{align-items:flex-start;display:flex;flex-direction:column;margin:0}.ecl-content-item--inline.sc-ecl-content-item-eu{flex-direction:row}.ecl-content-item--divider.sc-ecl-content-item-eu{border-bottom:1px solid #cfdaf5;padding-bottom:1.5rem}.ecl-content-item__content-block.sc-ecl-content-item-eu{font:normal normal 400 1rem/1.25rem arial,sans-serif;margin-inline-end:auto;max-width:80ch}.ecl-content-item__date.sc-ecl-content-item-eu{flex-shrink:0;margin-inline-end:1rem}.ecl-content-item__picture.sc-ecl-content-item-eu{flex-shrink:0;margin-bottom:1rem;max-width:100%}.ecl-content-item__picture--small.sc-ecl-content-item-eu{height:140px;width:140px}.ecl-content-item__image.sc-ecl-content-item-eu{border:1px solid #cfdaf5;width:100%}@media (min-width:768px){.ecl-content-item.sc-ecl-content-item-eu{flex-direction:row}.ecl-content-item__picture.sc-ecl-content-item-eu{margin-bottom:0;margin-inline-end:1rem;max-width:210px}.ecl-content-item__picture--right.sc-ecl-content-item-eu{margin-inline-end:0;margin-inline-start:1rem;order:1}}";

const EclContentItem$1 = /*@__PURE__*/ proxyCustomElement(class EclContentItem extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.styleClass = '';
        this.theme = 'ec';
        this.imagePosition = 'left';
        this.imageSize = 'medium';
    }
    componentDidRender() {
        const picture = this.el.getElementsByTagName('picture')[0];
        const themeClass = `sc-ecl-content-item-${this.theme}`;
        if (picture) {
            picture.classList.add(`sc-ecl-content-item-${this.theme}`, 'ecl-content-item__picture', `ecl-content-item__picture--${this.imageSize}`, `ecl-content-item__picture--${this.imagePosition}`);
            if (this.imagePosition === 'right') {
                picture.parentElement.style.order = '1';
            }
            const img = picture.getElementsByTagName('img')[0];
            if (img) {
                img.classList.add(`ecl-content-item__image`, themeClass);
            }
        }
        const block = this.el.querySelector('.ecl-content-block');
        if (block) {
            block.classList.add(`ecl-content-item__content-block`, themeClass);
        }
    }
    getClass() {
        return [
            `ecl-content-item`,
            this.styleClass
        ].join(' ');
    }
    render() {
        return (h("article", { class: this.getClass() }, h("slot", { name: "picture" }), h("slot", { name: "content-block" })));
    }
    get el() { return this; }
    static get style() { return {
        ec: eclContentItemEcCss,
        eu: eclContentItemEuCss
    }; }
}, [38, "ecl-content-item", {
        "styleClass": [1, "style-class"],
        "theme": [1],
        "imagePosition": [1, "image-position"],
        "imageSize": [1, "image-size"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["ecl-content-item"];
    components.forEach(tagName => { switch (tagName) {
        case "ecl-content-item":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, EclContentItem$1);
            }
            break;
    } });
}

const EclContentItem = EclContentItem$1;
const defineCustomElement = defineCustomElement$1;

export { EclContentItem, defineCustomElement };

//# sourceMappingURL=ecl-content-item.js.map