'use strict';

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

const core = require('./core-bc7a73f4.js');
const i18n_provider = require('./i18n.provider-c74c1600.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{display:inline-block}anj-dropdown .anj-dropdown-toggle>anj-button{margin:0!important;white-space:nowrap}anj-dropdown .anj-dropdown-toggle anj-button:last-child:not(:first-child) .anj-button{border-top-left-radius:0;border-bottom-left-radius:0;border-left:0!important;padding-left:.75rem;padding-right:.75rem}anj-dropdown .anj-dropdown-toggle anj-button:first-child:not(:last-child) .anj-button{border-top-right-radius:0;border-bottom-right-radius:0;padding-right:.75rem}anj-dropdown .anj-dropdown-toggle anj-button:first-child:not(:last-child)[context=primary] .anj-button{border-right:1px solid var(--anj-light-medium)}anj-dropdown anj-icon-opener{font-size:.7rem;margin-left:.5rem}"; }
};
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');
};

const DROPDOWN_ITEM_CLASS = 'anj-dropdown-item';
const DropdownItem = class {
    constructor(hostRef) {
        core.registerInstance(this, hostRef);
        this.active = false;
        /**
         * Is the item disabled
         */
        this.disabled = false;
        this.anjDropdownItemSelect = core.createEvent(this, "anjDropdownItemSelect", 7);
    }
    onDisabled() {
        if (this.anchor) {
            this.anchor.setAttribute('tabindex', this.disabled ? '-1' : undefined);
            this.anchor.setAttribute('aria-disabled', this.disabled ? `${this.disabled}` : undefined);
        }
    }
    componentWillLoad() {
        this.anchor = this.element.querySelector('a') || undefined;
        if (this.anchor) {
            this.anchor.classList.add(DROPDOWN_ITEM_CLASS);
            this.onDisabled();
        }
    }
    onMouseDown(event) {
        if (this.disabled) {
            event.preventDefault();
            event.stopPropagation();
        }
    }
    onClick(event) {
        if (this.disabled) {
            return this.onMouseDown(event);
        }
        this.anjDropdownItemSelect.emit(this.payload);
    }
    render() {
        return this.anchor ? core.h("slot", null) :
            core.h("button", { type: "button", "aria-disabled": this.disabled, disabled: this.disabled, class: DROPDOWN_ITEM_CLASS }, core.h("slot", null));
    }
    get element() { return core.getElement(this); }
    static get watchers() { return {
        "disabled": ["onDisabled"]
    }; }
    static get style() { return "anj-dropdown-item .anj-dropdown-item{display:block;font-size:.875rem;font-family:var(--anj-font-family);line-height:1.5;outline:none;background-color:transparent;border:0;color:var(--anj-text);clear:both;cursor:pointer;font-weight:400;padding:.25rem .75rem;text-align:inherit;white-space:nowrap;width:100%}anj-dropdown-item .anj-dropdown-item,anj-dropdown-item .anj-dropdown-item:after,anj-dropdown-item .anj-dropdown-item:before{-webkit-box-sizing:border-box;box-sizing:border-box;outline:none}anj-dropdown-item .anj-dropdown-item:active,anj-dropdown-item .anj-dropdown-item :active,anj-dropdown-item .anj-dropdown-item:focus,anj-dropdown-item .anj-dropdown-item :focus{outline:none}anj-dropdown-item .anj-dropdown-item:active,anj-dropdown-item .anj-dropdown-item:focus,anj-dropdown-item .anj-dropdown-item:hover{background-color:var(--anj-background);color:var(--anj-text);text-decoration:none;outline:none}anj-dropdown-item[active] .anj-dropdown-item,anj-dropdown-item[active] .anj-dropdown-item:active,anj-dropdown-item[active] .anj-dropdown-item:hover{background-color:var(--anj-highlight);color:var(--anj-light)}anj-dropdown-item[disabled] .anj-dropdown-item,anj-dropdown-item[disabled] .anj-dropdown-item:active,anj-dropdown-item[disabled] .anj-dropdown-item:hover{background-color:var(--anj-light);color:var(--anj-neutral);pointer-events:none}"; }
};

exports.anj_dropdown = Dropdown;
exports.anj_dropdown_item = DropdownItem;
