'use strict';

var index = require('./index-Dc5gCGlQ.js');
var frameworkDetection = require('./framework-detection-C_6nNXcS.js');
var domUtils = require('./dom-utils-dykhxr-_.js');
var popper = require('./popper-Dmp8OTYh.js');

const dropdownCss = ":host{display:inline-block}";

const Dropdown = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.ifxOpen = index.createEvent(this, "ifxOpen", 7);
        this.ifxClose = index.createEvent(this, "ifxClose", 7);
        this.ifxDropdown = index.createEvent(this, "ifxDropdown", 7);
        this.placement = 'bottom-start';
        this.defaultOpen = false;
        this.internalIsOpen = false;
        this.noAppendToBody = false;
        this.noCloseOnOutsideClick = false;
        this.noCloseOnMenuClick = false;
        this.handleTriggerClick = () => {
            if (!this.internalIsOpen)
                this.openDropdown();
            else
                this.closeDropdown();
        };
        this.handleTriggerKeyDown = (e) => {
            const key = e.key;
            if (key === 'Tab' && this.internalIsOpen && !e.shiftKey) {
                e.preventDefault();
                this.focusFirstItem();
            }
        };
        this.handleMenuClick = () => {
            if (!this.noCloseOnMenuClick)
                this.closeDropdown();
        };
        this.handleMenuKeyDown = (e) => {
            var _a, _b, _c;
            const items = this.getItemFocusables();
            if (!items.length)
                return;
            const i = items.indexOf(document.activeElement);
            switch (e.key) {
                case 'ArrowDown':
                    e.preventDefault();
                    items[(i + 1) % items.length].focus();
                    break;
                case 'ArrowUp':
                    e.preventDefault();
                    items[(i - 1 + items.length) % items.length].focus();
                    break;
                case 'Home':
                    e.preventDefault();
                    items[0].focus();
                    break;
                case 'End':
                    e.preventDefault();
                    items[items.length - 1].focus();
                    break;
                case 'Enter':
                case ' ':
                case 'Spacebar':
                    e.preventDefault();
                    (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.click();
                    break;
                case 'Escape':
                    e.preventDefault();
                    this.closeDropdown();
                    (_b = this.trigger) === null || _b === void 0 ? void 0 : _b.focus();
                    break;
                case 'Tab':
                    if (e.shiftKey && i === 0) {
                        e.preventDefault();
                        this.closeDropdown();
                        (_c = this.trigger) === null || _c === void 0 ? void 0 : _c.focus();
                    }
                    break;
            }
        };
    }
    handleOutsideClick(event) {
        const target = event.target;
        if (!this.noCloseOnOutsideClick && !this.el.contains(target) && !this.menu.contains(target)) {
            this.closeDropdown();
        }
    }
    handleFocusOutside(event) {
        const target = event.target;
        if (this.internalIsOpen &&
            !this.el.contains(target) &&
            !this.menu.contains(target)) {
            this.closeDropdown();
        }
    }
    getItemFocusables() {
        if (!this.menu)
            return [];
        const hosts = Array.from(this.menu.querySelectorAll('ifx-dropdown-item'));
        return hosts
            .filter(h => !(h.getAttribute('hide') === 'true' || h.classList.contains('hide')))
            .map(h => { var _a; return (_a = h.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('a'); })
            .filter((el) => !!el);
    }
    componentWillLoad() {
        //maybe not needed
        this.updateSlotContent();
        this.watchHandlerIsOpen(this.defaultOpen, this.internalIsOpen);
    }
    async componentDidLoad() {
        if (!domUtils.isNestedInIfxComponent(this.el)) {
            const framework = frameworkDetection.detectFramework();
            frameworkDetection.trackComponent('ifx-dropdown', await framework);
        }
    }
    watchHandlerIsOpen(newValue, oldValue) {
        if (newValue !== oldValue && newValue !== this.internalIsOpen) {
            if (newValue) {
                this.openDropdown();
            }
            else {
                this.closeDropdown();
            }
        }
    }
    watchHandlerDisabled(newValue) {
        if (this.trigger) {
            this.trigger.disabled = newValue;
        }
    }
    watchHandlerSlot() {
        this.updateSlotContent();
    }
    focusFirstItem() {
        const [first] = this.getItemFocusables();
        first === null || first === void 0 ? void 0 : first.focus();
    }
    updateSlotContent() {
        const newTrigger = this.el.querySelector('ifx-dropdown-trigger-button, ifx-dropdown-trigger');
        if (newTrigger !== this.trigger) {
            if (this.trigger) {
                this.trigger.removeEventListener('click', this.handleTriggerClick);
                this.trigger.removeEventListener('keydown', this.handleTriggerKeyDown);
            }
            this.trigger = newTrigger;
            if (this.trigger) {
                this.trigger.disabled = this.disabled;
                this.trigger.addEventListener('click', this.handleTriggerClick);
                this.trigger.addEventListener('keydown', this.handleTriggerKeyDown);
            }
        }
        const newMenu = this.el.querySelector('ifx-dropdown-menu');
        if (!this.noAppendToBody) {
            if (this.menu && this.menu !== newMenu) {
                this.menu.removeEventListener('click', this.handleMenuClick);
                this.menu.removeEventListener('keydown', this.handleMenuKeyDown);
                this.menu.remove();
            }
            this.menu = newMenu;
            if (this.menu && !document.body.contains(this.menu)) {
                document.body.append(this.menu);
            }
        }
        else {
            this.menu = newMenu;
        }
        if (this.menu) {
            this.menu.removeEventListener('click', this.handleMenuClick);
            this.menu.removeEventListener('keydown', this.handleMenuKeyDown);
            this.menu.addEventListener('click', this.handleMenuClick);
            this.menu.addEventListener('keydown', this.handleMenuKeyDown);
        }
    }
    menuClickHandler() {
        if (!this.noCloseOnMenuClick) {
            this.closeDropdown();
        }
    }
    disconnectedCallback() {
        if (this.popperInstance) {
            this.popperInstance.destroy();
            this.popperInstance = null;
        }
        if (this.menu) {
            this.menu.remove();
        }
    }
    async isOpen() {
        return this.internalIsOpen;
    }
    async closeDropdown() {
        if (this.internalIsOpen) {
            this.internalIsOpen = false;
            this.trigger.isOpen = false;
            this.menu.isOpen = false;
            this.ifxClose.emit();
        }
        if (this.popperInstance) {
            this.popperInstance.destroy();
            this.popperInstance = null;
        }
    }
    async openDropdown() {
        if (!this.internalIsOpen && !this.disabled) {
            this.internalIsOpen = true;
            this.trigger.isOpen = true;
            this.menu.isOpen = true;
            this.popperInstance = popper.createPopper(this.el, this.menu, { placement: this.placement });
            this.ifxOpen.emit();
        }
    }
    render() {
        return (index.h("div", { key: '98fae8a111b3e91b8a4f2690e0dd462d1c6c4791', "aria-label": 'dropdown menu', class: 'dropdown' }, index.h("slot", { key: 'f491cae9545a2d18342efa9f2fb29412d580f643' })));
    }
    get el() { return index.getElement(this); }
    static get watchers() { return {
        "defaultOpen": ["watchHandlerIsOpen"],
        "disabled": ["watchHandlerDisabled"]
    }; }
};
Dropdown.style = dropdownCss;

exports.ifx_dropdown = Dropdown;
//# sourceMappingURL=ifx-dropdown.entry.cjs.js.map

//# sourceMappingURL=ifx-dropdown.cjs.entry.js.map