import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { i as isNil } from './index2.js';
import { s as stopEventBubbling } from './form-input.js';
import { B as BEM } from './bem.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(registerHost) {
        super();
        if (registerHost !== false) {
            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: '9510a2a23f5823645d757dccb57f533c735b07b3', 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: '3b09f43f14e28b62d36aa7435a213edc1ad8dbde' }, h("slot", { key: '34ac8848b363263f64e5821e66c43985930bf0a9' })), h("bal-button", { key: '1327e889226e14588eb0d62ab63b0f767fde6413', 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; }
}, [260, "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 };
