import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { i as isNil } from './index2.js';
import { B as BEM } from './bem.js';
import { s as stopEventBubbling } from './form-input.js';
import { d as defineCustomElement$4 } from './bal-button2.js';
import { d as defineCustomElement$3 } from './bal-icon2.js';
import { d as defineCustomElement$2 } from './bal-spinner2.js';

const DataValue = /*@__PURE__*/ proxyCustomElement(class DataValue extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.balClick = createEvent(this, "balClick", 7);
        this.balFocus = createEvent(this, "balFocus", 7);
        this.balBlur = createEvent(this, "balBlur", 7);
        /**
         * If `true` a small button with a edit icon will be shown on the right.
         */
        this.editable = false;
        /**
         * If `true` the button will get disabled.
         */
        this.disabled = false;
        /**
         * If `true` the text will break and the height of the item increases.
         */
        this.multiline = false;
        this.onClickHandler = (ev) => {
            const input = this.el.querySelector('bal-input');
            if (!isNil(input)) {
                input.setFocus();
            }
            stopEventBubbling(ev);
            this.balClick.emit(ev.detail);
        };
    }
    render() {
        const block = BEM.block('data-value');
        const buttonEl = block.element('button');
        return (h(Host, { key: '1407b2c714f532e06ffcba50e1c21a06d33f34fe', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('is-editable').class(this.editable)), block.modifier('is-multiline').class(this.multiline)) }, h("div", { key: '71427202ef765e83e32b631eb277b9432b80c8c3' }, h("slot", { key: '0bbe71b9ebe87bc23941aab4f9643f5d58ea31c6' })), h("bal-button", { key: '5ba17c254646c82d8e6d8d9c8e5a229326542b12', class: Object.assign({}, buttonEl.class()), "data-testid": "bal-data-value-button", square: true, outlined: true, color: "text", size: "small", icon: "edit", disabled: this.disabled, onBalBlur: _ => this.balBlur.emit(), onBalFocus: _ => this.balFocus.emit(), onBalClick: ev => this.onClickHandler(ev) })));
    }
    get el() { return this; }
}, [4, "bal-data-value", {
        "editable": [4],
        "disabled": [4],
        "multiline": [4]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["bal-data-value", "bal-button", "bal-icon", "bal-spinner"];
    components.forEach(tagName => { switch (tagName) {
        case "bal-data-value":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, DataValue);
            }
            break;
        case "bal-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$4();
            }
            break;
        case "bal-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "bal-spinner":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const BalDataValue = DataValue;
const defineCustomElement = defineCustomElement$1;

export { BalDataValue, defineCustomElement };
