'use strict';

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

const core = require('./core-b7b9d752.js');
const i18n_provider = require('./i18n.provider-5632e5ed.js');
const a11y = require('./a11y-fb385a78.js');

var Translations;
(function (Translations) {
    Translations["DROPDOWN_TOGGLE"] = "Dropdown toggle";
})(Translations || (Translations = {}));
const Dropdown = class {
    constructor(hostRef) {
        core.registerInstance(this, hostRef);
        this.expanded = false;
        this.toggleClickListener = () => this.onToggle();
        this.overlayListener = () => this.close();
        this.itemListener = ({ detail }) => this.onItemSelected(detail);
        /**
         * Should the dropdown render the arrow.
         * Defaults to true.
         */
        this.arrow = true;
        /**
         * How to align the overlay when it opens.
         * Supports all popper placements.
         */
        this.placement = 'bottom-start';
        this.anjDropdownWillOpen = core.createEvent(this, "anjDropdownWillOpen", 7);
        this.anjDropdownWillClose = core.createEvent(this, "anjDropdownWillClose", 7);
        this.anjDropdownSelect = core.createEvent(this, "anjDropdownSelect", 7);
    }
    injectedPropWatcher() {
        this.setToggleLabel();
    }
    connectedCallback() {
        this.bindToggle();
    }
    componentDidRender() {
        if (!this.toggle) {
            this.bindToggle();
        }
    }
    disconnectedCallback() {
        if (this.toggle) {
            this.toggle.removeEventListener('click', this.toggleClickListener);
        }
        this.unbindOverlay();
    }
    async close(refocusToggle = false) {
        this.anjDropdownWillClose.emit();
        if (!a11y.isFocusable(document.activeElement) || refocusToggle) {
            this.toggle.focus();
        }
        await this.overlay.close();
        this.expanded = false;
        this.setToggleExpanded();
        this.unbindOverlay();
    }
    async open() {
        if (this.expanded)
            return;
        this.overlay = this.bindOverlay();
        this.anjDropdownWillOpen.emit();
        this.expanded = true;
        this.setToggleExpanded();
        return this.overlay.open(this.toggle);
    }
    async onToggle() {
        return this.expanded ? this.close() : this.open();
    }
    async onItemSelected(payload) {
        this.anjDropdownSelect.emit(payload);
        return this.close(true);
    }
    setToggleExpanded() {
        this.toggle.parentElement.active = this.expanded;
        this.toggle.setAttribute('aria-expanded', `${this.expanded}`);
    }
    bindToggle() {
        const buttons = Array.from(this.element.querySelectorAll(`.anj-dropdown-toggle button`)).filter(noCloseButtons);
        this.toggle = buttons[buttons.length - 1];
        if (this.toggle) {
            // Eat the mouse down event so that it doesn't trigger the overlay close
            this.toggle.addEventListener('click', this.toggleClickListener);
            this.toggle.setAttribute('aria-haspopup', 'true');
            this.setToggleLabel();
            this.setToggleExpanded();
        }
    }
    bindOverlay() {
        const el = this.element.querySelector('anj-overlay');
        el.addEventListener('anjWillDismiss', this.overlayListener);
        el.addEventListener('anjDropdownItemSelect', this.itemListener);
        return el;
    }
    unbindOverlay() {
        if (this.overlay) {
            this.overlay.removeEventListener('anjWillDismiss', this.overlayListener);
            this.overlay.removeEventListener('anjDropdownItemSelect', this.itemListener);
            this.overlay = undefined;
        }
    }
    setToggleLabel() {
        if (this.toggle) {
            this.toggle.setAttribute('aria-label', this.toggle.textContent
                ? this.toggle.textContent : this.translator(Translations.DROPDOWN_TOGGLE));
        }
    }
    render() {
        return [
            core.h("span", { class: "anj-dropdown-toggle" }, core.h("slot", { name: "dropdown-toggle" })),
            core.h("anj-overlay", { class: "anj-dropdown-menu", placement: this.placement, offset: this.arrow ? '0, 15' : '0, 0', trapFocus: true }, this.arrow ? core.h("anj-arrow", null) : undefined, core.h("slot", null))
        ];
    }
    get element() { return core.getElement(this); }
    static get watchers() { return {
        "translator": ["injectedPropWatcher"]
    }; }
    static get style() { return "anj-dropdown {\n  display: inline-block;\n}\nanj-dropdown .anj-dropdown-toggle > anj-button {\n  margin: 0 !important;\n  white-space: nowrap;\n}\nanj-dropdown .anj-dropdown-toggle anj-button:last-child:not(:first-child) .anj-button {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n  border-left: 0 !important;\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\nanj-dropdown .anj-dropdown-toggle anj-button:first-child:not(:last-child) .anj-button {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n  padding-right: 0.75rem;\n}\nanj-dropdown .anj-dropdown-toggle anj-button:first-child:not(:last-child)[context=primary] .anj-button {\n  border-right: 1px solid var(--anj-light-medium);\n}\nanj-dropdown anj-icon-opener {\n  font-size: 0.7rem;\n  margin-left: 0.5rem;\n}"; }
};
i18n_provider.Tunnel.injectProps(Dropdown, ['translator']);
// Fixes https://git.zias.io/ui-foundation/anjuna/issues/867 by not binding to clear/close buttons as dropdown toggles
const noCloseButtons = (el) => {
    return !el.closest('anj-button-close');
};

exports.anj_dropdown = Dropdown;
