import { r as registerInstance, d as createEvent, h } from './core-1db051ba.js';
import { T as Tunnel } from './i18n.provider-15e382c4.js';

const List = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.content = '';
        this.hideLabels = false;
        this.value = [];
        this.anjChange = createEvent(this, "anjChange", 7);
        this.anjInvalid = createEvent(this, "anjInvalid", 7);
    }
    invalidWatcher(newVal) {
        this.anjInvalid.emit(newVal);
    }
    onBlur() {
        // Aids with inferred key tracking on the this.value iteration in render()
        this.value = this.value.slice(0);
    }
    onDrop({ detail, target }) {
        detail['targetIndex'] = (Number.isInteger(detail.targetIndex)) ? detail.targetIndex : target.index;
        const movingValue = this.value[detail.currentIndex];
        this.value.splice(detail.currentIndex, 1);
        this.value.splice(detail.targetIndex, 0, movingValue);
        this.value = this.value.slice(0);
    }
    onToolTipHover({ detail }) {
        clearTimeout(this.timer);
        this.content = this.translator(detail.action);
        this.popoverControl.display(detail.target);
    }
    onToolTipHoverEnd() {
        this.timer = window.setTimeout(() => {
            this.popoverControl.hide();
        }, 250);
    }
    onRowAdd({ detail }) {
        if (this.canAdd()) {
            this.value.splice(detail + 1, 0, null);
            this.value = this.value.slice(0);
        }
        this.emitListChange();
    }
    onRowRemove({ detail }) {
        if (this.canRemove()) {
            this.value.splice(detail, 1);
            this.value = this.value.slice(0);
        }
        this.emitListChange();
    }
    onItemChange({ detail }) {
        this.value.splice(detail.index, 1, detail.value);
        this.emitListChange();
    }
    componentWillLoad() {
        this.setArray();
    }
    emitListChange() {
        clearTimeout(this.debounceTimer);
        this.debounceTimer = window.setTimeout(() => {
            this.popoverControl.hide();
            this.anjChange.emit(this.value);
        }, 50);
    }
    canAdd() {
        return (!this.max || this.value.length < this.max);
    }
    canRemove() {
        return ((!this.min || this.value.length > this.min) && this.value.length > 1);
    }
    // Setup list at minimum required fields
    setArray() {
        const lessThanMin = (this.min) ? this.min - this.value.length : 0;
        const lessThanOne = 1 - this.value.length;
        if (lessThanMin > 0 || lessThanOne > 0) {
            for (let i = 0; i < Math.max(lessThanOne, lessThanMin); i++) {
                this.value.push(null);
            }
        }
    }
    render() {
        return [
            h("anj-form-group", { class: "anj-schema-list-label" }, (!this.hideLabels) ? h("anj-label", null, this.label) : undefined),
            this.value.map((item, index) => h("anj-list-item", { canAdd: this.canAdd(), canRemove: this.canRemove(), index: index, options: this.options, type: this.type, value: item })),
            h("anj-popover", { placement: "bottom", ref: r => this.popoverControl = r }, this.content)
        ];
    }
    static get watchers() { return {
        "invalid": ["invalidWatcher"]
    }; }
    static get style() { return "anj-list .anj-schema-list-label {\n  margin-top: 1rem;\n}\nanj-list .list-item {\n  display: -ms-flexbox;\n  display: flex;\n}\nanj-list .list-item .form-group {\n  -ms-flex: 1;\n  flex: 1;\n}"; }
};
Tunnel.injectProps(List, ['translator']);

export { List as anj_list };
