import { h, Host } from "@stencil/core";
import isNil from "lodash.isnil";
import { stopEventBubbling } from "../../../utils/form-input";
import { BEM } from "../../../utils/bem";
export class DataValue {
    constructor() {
        /**
         * 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) })));
    }
    static get is() { return "bal-data-value"; }
    static get properties() {
        return {
            "editable": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true` a small button with a edit icon will be shown on the right."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "editable",
                "defaultValue": "false"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true` the button will get disabled."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "disabled",
                "defaultValue": "false"
            },
            "multiline": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true` the text will break and the height of the item increases."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "multiline",
                "defaultValue": "false"
            }
        };
    }
    static get events() {
        return [{
                "method": "balClick",
                "name": "balClick",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the edit button has focus."
                },
                "complexType": {
                    "original": "BalEvents.BalDataValueClickDetail",
                    "resolved": "MouseEvent",
                    "references": {
                        "BalEvents": {
                            "location": "global",
                            "id": "global::BalEvents"
                        }
                    }
                }
            }, {
                "method": "balFocus",
                "name": "balFocus",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the edit button has focus."
                },
                "complexType": {
                    "original": "BalEvents.BalDataValueFocusDetail",
                    "resolved": "void",
                    "references": {
                        "BalEvents": {
                            "location": "global",
                            "id": "global::BalEvents"
                        }
                    }
                }
            }, {
                "method": "balBlur",
                "name": "balBlur",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the edit button loses focus."
                },
                "complexType": {
                    "original": "BalEvents.BalDataValueBlurDetail",
                    "resolved": "void",
                    "references": {
                        "BalEvents": {
                            "location": "global",
                            "id": "global::BalEvents"
                        }
                    }
                }
            }];
    }
    static get elementRef() { return "el"; }
}
