'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const core = require('./core-859ae5a6.js');

const ContextMenu = class {
    constructor(hostRef) {
        core.registerInstance(this, hostRef);
        this.menuListener = (event) => this.open(event);
        this.overlayClickListener = (e) => this.onClick(e);
        /**
         * Where to attach the overlay when opened
         * Options are `"parent"` or `"target"` which is the default.
         */
        this.attach = 'parent';
        /**
         * Loader to get the menu options. The default is to grab whatever is slotted.
         */
        this.loader = () => this.getSlottedOptions();
        this.anjContextSelect = core.createEvent(this, "anjContextSelect", 7);
    }
    connectedCallback() {
        this.bodyEl = this.element.ownerDocument.body;
        this.parentEl = this.element.parentElement;
        if (typeof this.attach !== 'string') {
            this.attach.addEventListener('contextmenu', this.menuListener);
        }
        else {
            this.parentEl.addEventListener('contextmenu', this.menuListener);
        }
    }
    disconnectedCallback() {
        if (this.overlay) {
            this.overlay.remove();
        }
        if (typeof this.attach !== 'string') {
            this.attach.removeEventListener('contextmenu', this.menuListener);
        }
        else {
            this.parentEl.removeEventListener('contextmenu', this.menuListener);
        }
        this.unbindOverlay();
    }
    unbindOverlay() {
        if (this.overlay) {
            this.overlay.removeEventListener('click', this.overlayClickListener);
            this.overlay.innerHTML = '';
            this.overlay = null;
        }
    }
    async onElsewhereOpen({ target }) {
        if (this.overlay && target !== this.overlay) {
            return this.close();
        }
    }
    /**
     * open the date picker
     */
    async open(event) {
        event.preventDefault();
        this.bindOverlay(this.element.querySelector('anj-overlay'));
        const popper = await this.overlay.popper();
        if (popper)
            return;
        this.options = await this.loader(event);
        if (!this.options)
            return;
        this.insertOptions();
        this.bodyEl.appendChild(this.overlay);
        await this.overlay.open(this.attach === 'parent' ? this.parentEl : event.target);
    }
    /**
     * close the date picker
     */
    async close() {
        await this.overlay.close();
        this.unbindOverlay();
    }
    async onClick(event) {
        event.preventDefault();
        event.stopPropagation();
        const item = event.target;
        this.anjContextSelect.emit(item.action);
        return this.close();
    }
    bindOverlay(ref) {
        if (ref && !this.overlay) {
            this.overlay = ref;
            this.overlay.addEventListener('click', this.overlayClickListener);
        }
    }
    insertOptions() {
        this.options.forEach(o => this.overlay.appendChild(o));
    }
    async getSlottedOptions() {
        return Array.from(this.overlay.querySelectorAll('anj-context-menu-item'))
            .map(i => i.cloneNode(true));
    }
    render() {
        return (core.h("anj-overlay", { class: "anj-dropdown-menu anj-context-menu", placement: "bottom-start", dismiss: "auto" }));
    }
    get element() { return core.getElement(this); }
    static get style() { return "anj-context-menu {\n  float: right;\n}"; }
};

exports.anj_context_menu = ContextMenu;
