import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { c as cls } from './helpers.js';

const styleCss = "x-media{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;margin:0;padding:0;text-align:inherit}x-media>img{margin:0 1.5rem 0 0;max-width:100%;height:auto;background-color:rgba(0, 0, 0, 0.1);-webkit-box-shadow:0px 3px 1rem rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(var(--color-border-rgb, 200, 199, 204), 0.35);box-shadow:0px 3px 1rem rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(var(--color-border-rgb, 200, 199, 204), 0.35);-webkit-animation:loadingBG 0.5s infinite alternate;animation:loadingBG 0.5s infinite alternate}.is-dark-mode x-media>img{background-color:rgba(255, 255, 255, 0.1)}x-media>div.media-body{-ms-flex:1;flex:1}x-media.media-rounded>img{border-radius:0.45em}x-media.media-right>img{margin:0 0 0 1.5rem;-ms-flex-order:999;order:999}";
const XMediaStyle0 = styleCss;

const XMedia$1 = /*@__PURE__*/ proxyCustomElement(class XMedia extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.src = undefined;
        this.width = undefined;
        this.height = undefined;
        this.description = undefined;
        this.align = undefined;
        this.rounded = false;
    }
    /**
     * Render component
     */
    render() {
        return h(Host, { key: '64cba2e6ab8febfb3f239c4df10837c161758a66', class: cls({ 'media-rounded': this.rounded, 'media-right': this.align === 'right' }) }, this.src && h("img", { key: '3dcb60ca9daed5b8fc8d21a1b7c8a934ba588954', style: {
                width: this.width,
                height: this.height
            }, src: this.src, alt: this.description, "aria-label": this.description }), h("div", { key: 'd16bebabe1cd62031e7cf2360c141f0308de56eb', class: "media-body" }, h("slot", { key: '90478de405a7eae220f8c01032abbd5f48b512fe' })));
    }
    static get style() { return XMediaStyle0; }
}, [4, "x-media", {
        "src": [1],
        "width": [1],
        "height": [1],
        "description": [1],
        "align": [1],
        "rounded": [4]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["x-media"];
    components.forEach(tagName => { switch (tagName) {
        case "x-media":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, XMedia$1);
            }
            break;
    } });
}

const XMedia = XMedia$1;
const defineCustomElement = defineCustomElement$1;

export { XMedia, defineCustomElement };
