'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-b55be5aa.js');
const helpers = require('./helpers-d38772ff.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 = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        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 index.h(index.Host, { key: '93640d20d7ebdbb552bafc632d736d3829ebd204' }, index.h("slot", { key: '65608afce0c8e934b30f89976bf53d924f6de002', name: "left" }), index.h("div", { key: '4aae9e4ca8eca8839e3ed6ca040580e8f030c95a' }, index.h("label", { key: 'cb093540dc9de3bdb5e67055d2e608860f562e16', ref: el => this.itemLabel = el, innerHTML: helpers.tinyMDtoHTML(this.label) }), index.h("slot", { key: 'cde232829c92f7c9bf2ec3bd05d6bc061ec3cb5b' })), index.h("slot", { key: '1e4101ec3f8fa8c73dc742c87ea5372a4a60be54', name: "right" }), this.icon && index.h("x-icon", { key: '09a3b08e0bd7053b39801e8dc50e719df12e5a3d', name: this.icon, size: "2rem" }));
    }
    get el() { return index.getElement(this); }
};
XLabel.style = XLabelStyle0;

exports.x_label = XLabel;
