import { r as registerInstance, h } from './index-b13326fc.js';

const ElementFormEditor = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.hack = 0;
        this.addInput = (current) => {
            const insert = {
                id: window.BCE.generateId(),
                label: '',
                required: false,
                type: 'text'
            };
            const value = [...current, insert];
            this.handler.set('input', value, { emit: true, localize: true });
            setTimeout(() => this.hack++, 60);
        };
        this.editInput = (id, event, prop, value) => {
            const index = this.input.findIndex(i => i.id === id);
            const copy = [...this.input];
            const update = Object.assign(Object.assign({}, this.input[index]), { [prop]: value });
            copy.splice(index, 1, update);
            this.handler.set('input', copy, { emit: true, localize: true });
            event.stopPropagation();
        };
        this.removeInput = (current, id) => {
            const value = current.filter(v => v.id !== id);
            this.handler.set('input', value, { emit: true, localize: true });
            setTimeout(() => this.hack++, 60);
        };
    }
    get input() {
        return this.handler.get('input', { localize: true });
    }
    prop(path, options = {}) {
        return this.handler.prop(path, Object.assign({}, options));
    }
    renderInputCreator(current, input) {
        const edit = this.editInput.bind(this, input.id);
        return (h("div", { class: "input-creator", id: input.id, key: input.id }, h("bce-select", { placeholder: "Type", type: "dropdown", value: input.type, onInput: (e) => edit(e, 'type', e.target.value) }, h("bce-option", { value: "date" }, "Date"), h("bce-option", { value: "text" }, "Text")), h("bce-input", { placeholder: "Label", value: input.label, onInput: (e) => edit(e, 'label', e.target.value || '') }), h("label", null, this.t('me-required')), h("bce-switch", { value: input.required, onInput: (e) => edit(e, 'required', e.target.value) }), h("bce-button", { design: "text", icon: "fas:trash", onClick: () => this.removeInput(current, input.id) })));
    }
    render() {
        const inputProp = this.prop('input', { default: () => [], localize: true });
        const input = inputProp.value;
        return [
            input.map(i => this.renderInputCreator(input, i)),
            h("bce-button", { design: "text", icon: "fas:plus", onClick: () => this.addInput(input), "data-i": this.hack }, this.t('add-item', { item: 'Input' })),
            h("slot", null)
        ];
    }
    static get style() { return ":host{position:relative;display:block}:host .input-creator{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin:20px 0}:host .input-creator bce-input,:host .input-creator bce-select{margin:0}:host .input-creator bce-input{-ms-flex:1 1 auto;flex:1 1 auto}:host .input-creator label{margin:0 16px}:host .input-creator bce-switch{-ms-flex:0 0 auto;flex:0 0 auto;margin:0 16px 0 0}"; }
};

export { ElementFormEditor as bce_element_form_editor };
