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

const styleCss = "x-flag{background-size:contain;background-position:50%;background-repeat:no-repeat;position:relative;display:inline-block;width:1.33333333em;line-height:1em}x-flag.flag-circle{width:1em !important;height:1em !important;background-position:center;background-size:cover;border-radius:50% !important}";
const XFlagStyle0 = styleCss;

const XFlag$1 = /*@__PURE__*/ proxyCustomElement(class XFlag extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.code = undefined;
        this.circle = false;
        this.rounded = false;
        this.size = '1em';
    }
    /**
     * Render component
     */
    render() {
        return h(Host, { key: '2773eef696be1e7dfc52098939d631176654cb2c', class: cls('flag', `flag-${this.code.toLowerCase()}`, { 'flag-rounded': this.rounded && !this.circle, 'flag-circle': this.circle }), "aria-label": this.code, style: { fontSize: this.size } });
    }
    static get style() { return XFlagStyle0; }
}, [0, "x-flag", {
        "code": [1],
        "circle": [4],
        "rounded": [4],
        "size": [1]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["x-flag"];
    components.forEach(tagName => { switch (tagName) {
        case "x-flag":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, XFlag$1);
            }
            break;
    } });
}

const XFlag = XFlag$1;
const defineCustomElement = defineCustomElement$1;

export { XFlag, defineCustomElement };
