import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-BdVwMG9u.js';
import { B as BEM } from './bem-ByiN-QjD.js';
import { i as isNil } from './index-zWZxKBfo.js';
import { s as stopEventBubbling } from './form-input-DYvzaBlM.js';
import './_commonjsHelpers-BFTU3MAI.js';
import './helpers-BNj87EbG.js';
import './browser-B1u-Mq75.js';
import './config.utils-B7jugjyM.js';

const balDataCss = ":root{--bal-data-item-border-color:var(--bal-color-grey-2);--bal-data-item-border-style:solid;--bal-data-item-border-width:var(--bal-border-width-normal);--bal-data-horizontal-border-bottom-width:var(--bal-border-width-normal);--bal-data-horizontal-border-color:var(--bal-color-primary-2);--bal-data-item-border-bottom:none;--bal-data-item-text-color-disabled:var(--bal-color-text-grey-dark);--bal-data-label-text-color:var(--bal-color-text-primary)}.bal-data{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;max-width:100%;width:100%;outline:none;text-decoration:none;overflow-wrap:break-word;white-space:normal}.bal-data>*{display:-ms-flexbox;display:flex;-ms-flex:1 1;flex:1 1;-ms-flex-wrap:wrap;flex-wrap:wrap}.bal-data-item{display:-ms-flexbox;display:flex;-ms-flex:1 1;flex:1 1;min-height:3rem;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;padding:1rem 0}.bal-data-item.is-disabled .bal-data-label,.bal-data-item.is-disabled .bal-data-value{color:var(--bal-data-item-text-color-disabled)}.bal-data-item--has-border{border-bottom:var(--bal-data-item-border-width) var(--bal-data-item-border-style) var(--bal-data-item-border-color)}.bal-data-label{position:relative;display:block;color:var(--bal-data-label-text-color);-ms-flex:1 1;flex:1 1;-ms-flex-preferred-size:100%;flex-basis:100%;font-family:var(--bal-font-family-text);font-weight:var(--bal-font-weight-bold);font-size:var(--bal-text-size-small);line-height:var(--bal-text-size-normal);-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.bal-data-label .bal-hint{margin-left:.5rem;position:absolute;top:-3px;font-weight:var(--bal-font-weight-regular)}.bal-data-value{display:block;-ms-flex:1 1;flex:1 1;-ms-flex-preferred-size:100%;flex-basis:100%;margin-top:.25rem;min-height:1.5rem;overflow:visible !important;font-family:var(--bal-font-family-text);font-weight:var(--bal-font-weight-bold);font-size:var(--bal-text-size-small);line-height:var(--bal-text-size-normal)}.bal-data-value,.bal-data-value>div{font-family:var(--bal-font-family-text);font-weight:var(--bal-font-weight-regular);font-size:var(--bal-text-size-normal);line-height:1.25rem;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;padding-bottom:2px}.bal-data-value>ul,.bal-data-value>div>ul{margin-bottom:0 !important;margin-left:1.5rem !important}.bal-data-value .bal-button{display:none}.bal-data-value--is-multiline,.bal-data-value--is-multiline>div{white-space:normal}.bal-data:not(.bal-data--is-horizontal) .bal-data-value{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.bal-data:not(.bal-data--is-horizontal) .bal-data-value>div{-ms-flex:1;flex:1}.bal-data:not(.bal-data--is-horizontal) .bal-data-value>div>bal-input input.input{-ms-flex:1;flex:1}.bal-data:not(.bal-data--is-horizontal) .bal-data-value--is-editable .bal-data-value__button{display:block}.bal-data:not(.bal-data--is-horizontal) .bal-data-value>bal-button{margin-left:.5rem}@media screen and (min-width: 769px),print{.bal-data>*{-ms-flex-wrap:no-wrap;flex-wrap:no-wrap}.bal-data .bal-data-item{-ms-flex-wrap:no-wrap;flex-wrap:no-wrap;padding:.5rem 0}.bal-data .bal-data-item .bal-data-label{-ms-flex-preferred-size:0;flex-basis:0}.bal-data .bal-data-item .bal-data-value{-ms-flex-preferred-size:0;flex-basis:0}.bal-data:not(.bal-data--is-horizontal) .bal-data-label{font-size:var(--bal-text-size-normal)}.bal-data:not(.bal-data--is-horizontal) .bal-data-value{margin-top:2px}.bal-data.bal-data--is-horizontal{-ms-flex-direction:row;flex-direction:row;gap:.5rem}.bal-data.bal-data--is-horizontal.has-border{border-bottom:var(--bal-data-horizontal-border-bottom-width) var(--bal-data-item-border-style) var(--bal-data-horizontal-border-color)}.bal-data.bal-data--is-horizontal>*{-ms-flex-wrap:wrap;flex-wrap:wrap}.bal-data.bal-data--is-horizontal .bal-data-item{-ms-flex-wrap:wrap;flex-wrap:wrap;min-width:5rem;-ms-flex-align:start;align-items:flex-start;border-bottom:var(--bal-data-item-border-bottom)}.bal-data.bal-data--is-horizontal .bal-data-item .bal-data-value{min-height:100%}.bal-data.bal-data--is-horizontal .bal-data-item .bal-data-label,.bal-data.bal-data--is-horizontal .bal-data-item .bal-data-value{-ms-flex-preferred-size:100%;flex-basis:100%;width:100%;-ms-flex-item-align:start;align-self:flex-start}}";

const Data = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /**
         * If `true` a bottom border is added to the data-item.
         */
        this.border = false;
        /**
         * If `true` the data list is horizontal instead of vertical.
         */
        this.horizontal = false;
        this.inputElements = ['bal-data-item'];
    }
    borderHandler() {
        this.updateProps([...this.inputElements], 'border');
    }
    updateProps(selectors, key) {
        const value = this[key];
        if (value !== undefined) {
            this.notifyComponents(selectors, input => (input[key] = value));
        }
    }
    notifyComponents(selectors, callback) {
        const components = this.element.querySelectorAll(selectors.join(', '));
        components.forEach((c) => callback(c));
    }
    componentWillLoad() {
        this.borderHandler();
    }
    render() {
        const block = BEM.block('data');
        return (h(Host, { key: 'aa8b8920767ec213d19c0ff5bd5b020afd720736', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('has-border').class(this.border)), block.modifier('is-horizontal').class(this.horizontal)) }, h("slot", { key: '521ef64fdbd14bae75547ca851ae20e40d50a68f' })));
    }
    get element() { return getElement(this); }
    static get watchers() { return {
        "border": ["borderHandler"]
    }; }
};
Data.style = balDataCss;

const DataItem = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /**
         * If `true` the item gets a lighter font color.
         */
        this.disabled = false;
        /**
         * If `true` a bottom border is added to the data-item.
         */
        this.border = false;
    }
    render() {
        const element = BEM.block('data-item');
        return (h(Host, { key: '407b2d982f48e77a71daa015e98acb720b369860', class: Object.assign(Object.assign(Object.assign({}, element.class()), element.modifier('is-disabled').class(this.disabled)), element.modifier('has-border').class(this.border)) }, h("slot", { key: 'e9d0e88af9d336879ed87b59732a583c43bd466f' })));
    }
};

const DataLabel = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /**
         * If `true` an asterix is added after the label.
         */
        this.required = false;
    }
    render() {
        return (h(Host, { key: '114f7b7b26f2cc4a0c4ba430df1d3d17f4df786a', class: Object.assign({}, BEM.block('data-label').class()) }, h("slot", { key: 'bba812f478c14efa78880304b42bd8a9d91a3187' }), this.required ? '*' : ''));
    }
};

const DataValue = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.balClick = createEvent(this, "balClick");
        this.balFocus = createEvent(this, "balFocus");
        this.balBlur = createEvent(this, "balBlur");
        /**
         * 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 getElement(this); }
};

export { Data as bal_data, DataItem as bal_data_item, DataLabel as bal_data_label, DataValue as bal_data_value };
