import { r as registerInstance, d as createEvent, h, H as Host, c as getElement } from './core-b78a8f7e.js';
import { D as DragController, b as DropController } from './drop.controller-1d933db3.js';
import { T as Tunnel } from './i18n.provider-59e68a9d.js';

var ListTranslations;
(function (ListTranslations) {
    ListTranslations["ADD"] = "Add an item below";
    ListTranslations["REMOVE"] = "Remove this item";
})(ListTranslations || (ListTranslations = {}));

var ListItemTranslations;
(function (ListItemTranslations) {
    ListItemTranslations["DRAG_INSTRUCTION"] = "Draggable item. Press up or down to move.";
})(ListItemTranslations || (ListItemTranslations = {}));
const ListItem = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.handleFocused = false;
        this.hideLabels = false;
        this.anjDrop = createEvent(this, "anjDrop", 7);
        this.anjHover = createEvent(this, "anjHover", 7);
        this.anjHoverEnd = createEvent(this, "anjHoverEnd", 7);
        this.anjRowAdd = createEvent(this, "anjRowAdd", 7);
        this.anjRowRemove = createEvent(this, "anjRowRemove", 7);
        this.anjListItemChange = createEvent(this, "anjListItemChange", 7);
    }
    onBlur() {
        this.handleFocused = false;
    }
    onChange(event) {
        event.stopPropagation();
        this.anjListItemChange.emit({
            value: event.detail.innerValue || event.detail.value,
            index: this.index
        });
    }
    onFocus() {
        this.handleFocused = true;
    }
    connectedCallback() {
        this.dragController = new DragController(this.element, this.getDropData.bind(this));
        this.dropController = new DropController(this.element);
        this.dropController.connect();
    }
    disconnectedCallback() {
        this.dropController.disconnect();
    }
    addRow() {
        this.anjRowAdd.emit(this.index);
    }
    getDropData() {
        return {
            currentIndex: this.index
        };
    }
    handleHover({ target }, action) {
        this.anjHover.emit({ target, action });
    }
    handleHoverEnd() {
        this.anjHoverEnd.emit();
    }
    onKeydown(ev) {
        if (this.handleFocused && (ev.key === 'ArrowDown' || ev.key === 'ArrowUp')) {
            ev.preventDefault();
            const detail = this.getDropData();
            detail['targetIndex'] = (ev.key === 'ArrowDown') ? detail.currentIndex + 1 : detail.currentIndex - 1;
            if (detail['targetIndex'] < 0) {
                return;
            }
            this.anjDrop.emit(detail);
        }
    }
    removeRow() {
        this.anjRowRemove.emit(this.index);
    }
    renderInput() {
        switch (this.type) {
            case 'select':
                return (h("anj-select", { value: this.value }, this.options.map((option) => (h("anj-option", { value: option }, option)))));
            case 'number':
                return (h("anj-input", { value: this.value, type: "number" }, h("anj-number-stepper", null)));
            case 'text':
            default:
                return (h("anj-input", { value: this.value }));
        }
    }
    render() {
        return (h(Host, { draggable: this.handleFocused, class: { 'anj-handle-focused': this.handleFocused }, onMouseEnter: () => this.onFocus(), onMouseLeave: () => this.onBlur() }, h("anj-form-group", null, this.renderInput()), h("anj-button", { context: "icon", "aria-label": "Add", disabled: !this.canAdd, onClick: () => this.addRow(), onMouseEnter: (event) => this.handleHover(event, ListTranslations.ADD), onMouseLeave: () => this.handleHoverEnd() }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" }, h("path", { fill: "none", d: "M0 0h24v24H0V0z" }), h("path", { d: "M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" }))), h("anj-button", { context: "icon", "aria-label": "Remove", disabled: !this.canRemove, onClick: () => this.removeRow(), onMouseEnter: (event) => this.handleHover(event, ListTranslations.REMOVE), onMouseLeave: () => this.handleHoverEnd() }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" }, h("path", { fill: "none", d: "M0 0h24v24H0V0z" }), h("path", { d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM8 9h8v10H8V9zm7.5-5l-1-1h-5l-1 1H5v2h14V4h-3.5z" }))), h("anj-button", { "aria-label": this.translator(ListItemTranslations.DRAG_INSTRUCTION), context: "free", onMouseDown: () => this.dragController.connect(), onMouseUp: () => this.dragController.disconnect(), onKeyDown: (e) => this.onKeydown(e) }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" }, h("path", { d: "M20 9H4v2h16V9zM4 15h16v-2H4v2z" })))));
    }
    get element() { return getElement(this); }
    static get style() { return "anj-list-item {\n  display: -ms-flexbox;\n  display: flex;\n}\nanj-list-item:hover anj-button[context=free], anj-list-item.anj-handle-focused anj-button[context=free] {\n  opacity: 1;\n}\nanj-list-item anj-button[context=free] {\n  opacity: 0;\n}\nanj-list-item anj-form-group {\n  width: 200px;\n}"; }
};
Tunnel.injectProps(ListItem, ['translator']);

export { ListItem as anj_list_item };
