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

var Translations;
(function (Translations) {
    Translations["DRAG_INSTRUCTION"] = "Draggable item. Press up or down to move.";
})(Translations || (Translations = {}));
const ColumnMenuItem = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.handleFocused = false;
        this.anjDrop = createEvent(this, "anjDrop", 7);
    }
    onVisibleChange() {
        this.visible ? this.dropController.connect() : this.dropController.disconnect();
    }
    connectedCallback() {
        this.dragController = new DragController(this.element, this.getDropData.bind(this));
        this.dropController = new DropController(this.element);
        if (this.visible) {
            this.dropController.connect();
        }
    }
    disconnectedCallback() {
        this.dropController.disconnect();
    }
    onToggle(event) {
        if (event.detail.checked === this.visible || event.detail.value !== this.name) {
            event.stopPropagation();
        }
    }
    onEnter(ev) {
        if (this.handleFocused && (ev.key === 'ArrowDown' || ev.key === 'ArrowUp')) {
            const detail = this.getDropData();
            detail['targetIndex'] = (ev.key === 'ArrowDown') ? detail.currentIndex + 1 : detail.currentIndex - 1;
            if (detail['targetIndex'] < 0) {
                return;
            }
            this.anjDrop.emit(detail);
        }
    }
    onFocus() {
        this.handleFocused = true;
    }
    onBlur() {
        this.handleFocused = false;
    }
    getDropData() {
        return {
            currentIndex: this.index
        };
    }
    render() {
        return (h(Host, { draggable: this.handleFocused, class: { 'anj-handle-focused': this.handleFocused }, onMouseEnter: () => this.onFocus(), onMouseLeave: () => this.onBlur() }, this.visible && !this.disabled
            ? h("anj-button", { "aria-label": this.translator(Translations.DRAG_INSTRUCTION), context: "free", onMouseDown: () => this.dragController.connect(), onMouseUp: () => this.dragController.disconnect() }, 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" })))
            : undefined, h("anj-checkbox", { checked: this.visible, value: this.name }, h("slot", null))));
    }
    get element() { return getElement(this); }
    static get watchers() { return {
        "visible": ["onVisibleChange"]
    }; }
    static get style() { return ".sc-anj-column-menu-item-h {\n  display: block;\n  margin-left: -0.5rem;\n  padding: 0.25rem 1.5rem 0.25rem 2.75rem;\n  position: relative;\n  text-transform: capitalize;\n}\n.sc-anj-column-menu-item-h:hover anj-button.sc-anj-column-menu-item, .anj-handle-focused.sc-anj-column-menu-item-h anj-button.sc-anj-column-menu-item {\n  opacity: 1;\n}\n.sc-anj-column-menu-item-h anj-button.sc-anj-column-menu-item {\n  left: 0.75rem;\n  opacity: 0;\n  position: absolute;\n  top: 50%;\n  -webkit-transform: translateY(-50%);\n  transform: translateY(-50%);\n  -webkit-transition: opacity 0.2s ease;\n  transition: opacity 0.2s ease;\n}"; }
};
Tunnel.injectProps(ColumnMenuItem, ['translator']);

export { ColumnMenuItem as anj_column_menu_item };
