import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { t as tinyMDtoHTML } from './helpers.js';
import { d as defineCustomElement$2 } from './component.js';

const styleCss = "x-label{display:-ms-flexbox;display:flex;gap:0.5rem;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}x-label>div{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}x-label>div label{display:block;font-weight:bold;font-size:0.8rem;margin-bottom:0.2rem}x-label>div small{font-size:0.7rem}";
const XLabelStyle0 = styleCss;

const XLabel$1 = /*@__PURE__*/ proxyCustomElement(class XLabel extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.icon = undefined;
        this.label = undefined;
    }
    /**
     * On component loaded action
     */
    componentDidLoad() {
        const input = this.el.querySelector('[id]');
        if (input && this.itemLabel) {
            this.itemLabel.htmlFor = input.id;
        }
    }
    /**
     * Render component
     */
    render() {
        return h(Host, { key: '93640d20d7ebdbb552bafc632d736d3829ebd204' }, h("slot", { key: '65608afce0c8e934b30f89976bf53d924f6de002', name: "left" }), h("div", { key: '4aae9e4ca8eca8839e3ed6ca040580e8f030c95a' }, h("label", { key: 'cb093540dc9de3bdb5e67055d2e608860f562e16', ref: el => this.itemLabel = el, innerHTML: tinyMDtoHTML(this.label) }), h("slot", { key: 'cde232829c92f7c9bf2ec3bd05d6bc061ec3cb5b' })), h("slot", { key: '1e4101ec3f8fa8c73dc742c87ea5372a4a60be54', name: "right" }), this.icon && h("x-icon", { key: '09a3b08e0bd7053b39801e8dc50e719df12e5a3d', name: this.icon, size: "2rem" }));
    }
    get el() { return this; }
    static get style() { return XLabelStyle0; }
}, [4, "x-label", {
        "icon": [1],
        "label": [1]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["x-label", "x-icon"];
    components.forEach(tagName => { switch (tagName) {
        case "x-label":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, XLabel$1);
            }
            break;
        case "x-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const XLabel = XLabel$1;
const defineCustomElement = defineCustomElement$1;

export { XLabel, defineCustomElement };
