import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { m as getSlotElements, l as isPropDefined } from './helpers.js';
import { d as defineCustomElement$6 } from './ic-button2.js';
import { d as defineCustomElement$5 } from './ic-loading-indicator2.js';
import { d as defineCustomElement$4 } from './ic-menu-item2.js';
import { c as createPopper, d as defineCustomElement$3 } from './ic-tooltip2.js';
import { d as defineCustomElement$2 } from './ic-typography2.js';

const icPopoverMenuCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}@media (prefers-reduced-motion: no-preference){:host .opening-from-parent{animation:slide-in var(--ic-transition-duration-slow) ease-in-out}:host .opening-from-child{animation:slide-out var(--ic-transition-duration-slow) ease-in-out}}:host{border-radius:var(--ic-border-radius);color:var(--ic-popover-nav-text);--ic-typography-color:var(--ic-popover-nav-text);position:relative;z-index:var(--ic-z-index-popover);box-sizing:border-box;box-shadow:var(--ic-elevation-overlay);display:none}:host(.on-dialog){inset:auto !important}:host(.on-dialog-fix-translate){transform:translate(0, var(--ic-space-xs)) !important}:host(.on-dialog-translate-y){transform:translate(0, calc(-1 * var(--translate-y))) !important}.menu{border:var(--ic-border-default);border-color:var(--ic-popover-border);border-radius:var(--ic-border-radius);background-color:var(--ic-popover-background);visibility:hidden;height:0}:host(:focus-within){box-shadow:var(--ic-border-focus)}.menu:focus-visible{outline:none}:host(.ic-popover-menu-open){display:block;min-width:calc(20rem - var(--ic-space-xl));width:var(--popover-width, 20rem);max-width:calc(100vw - var(--ic-space-xl))}:host(.ic-popover-menu-open) .menu{visibility:visible;height:-moz-fit-content;height:fit-content;max-height:var(--max-height, -moz-fit-content);max-height:var(--max-height, fit-content);overflow-y:auto;overflow-x:hidden}.parent-label{--ic-typography-color:var(--ic-popover-parent-label);margin:var(--ic-space-xs) var(--ic-space-xs) 0}@keyframes slide-in{from{opacity:0;transform:translateX(10rem)}to{opacity:1;transform:translateX(0)}}@keyframes slide-out{from{opacity:0;transform:translateX(-10rem)}to{opacity:1;transform:translateX(0)}}";
const IcPopoverMenuStyle0 = icPopoverMenuCss;

const MENU_SELECTOR = "div.menu-body";
const PopoverMenu = /*@__PURE__*/ proxyCustomElement(class PopoverMenu extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.icPopoverClosed = createEvent(this, "icPopoverClosed", 7);
        this.ARIA_LABEL = "aria-label";
        this.popoverMenuEls = [];
        this.openingFromChild = false;
        this.openingFromParent = false;
        /**
         * @internal The level of menu being displayed.
         */
        this.submenuLevel = 1;
        /**
         * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
         */
        this.theme = "inherit";
        /**
         * If `true`, the popover menu will be displayed.
         */
        this.open = undefined;
        this.setButtonFocus = () => {
            var _a;
            (_a = this.popoverMenuEls[this.currentFocus]) === null || _a === void 0 ? void 0 : _a.focus();
        };
        // Checks that the popover menu has an anchor
        this.findAnchorEl = (anchor) => {
            let anchorElement = null;
            if (!anchor) {
                this.submenuId === undefined &&
                    console.error("No anchor specified for popover component");
            }
            else {
                anchorElement = document.querySelector(anchor.indexOf("#") === 0 ? anchor : "#" + anchor);
                if (anchorElement === null) {
                    console.error(`Popover anchor element '${anchor}' not found`);
                }
            }
            return anchorElement;
        };
        this.isNotPopoverMenuEl = (ev) => {
            const { id, tagName } = ev.target;
            return (id !== this.anchor &&
                tagName !== "IC-MENU-ITEM" &&
                tagName !== "IC-MENU-GROUP" &&
                tagName !== "IC-POPOVER-MENU");
        };
        this.getNextItemToSelect = (currentItem, movingDown) => {
            const numButtons = this.popoverMenuEls.length - 1;
            if (currentItem < 1) {
                currentItem = 0;
            }
            let nextItem = movingDown ? currentItem + 1 : currentItem - 1;
            // Check if wrap around necessary
            if (nextItem < 0) {
                nextItem = numButtons;
            }
            else if (nextItem > numButtons) {
                nextItem = 0;
            }
            return nextItem;
        };
        this.addMenuItems = (elements) => {
            var _a;
            for (let i = 0; i < elements.length; i++) {
                const el = elements[i];
                if (el.tagName === "IC-MENU-ITEM") {
                    this.popoverMenuEls.push(el);
                }
                else if (el.tagName === "IC-MENU-GROUP") {
                    const groupSlotWrapper = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".menu-items-wrapper");
                    if (groupSlotWrapper) {
                        const menuGroupElements = getSlotElements(groupSlotWrapper);
                        menuGroupElements && this.addMenuItems(menuGroupElements);
                    }
                }
            }
        };
        this.getMenuAriaLabel = () => {
            const ariaLabel = this.el.getAttribute(this.ARIA_LABEL);
            if (isPropDefined(this.submenuId)) {
                return `${ariaLabel}, within nested level ${this.submenuLevel} ${this.parentLabel} submenu,`;
            }
            else {
                return ariaLabel;
            }
        };
        this.handleBackButtonClick = () => {
            var _a;
            (_a = this.parentPopover) === null || _a === void 0 ? void 0 : _a.openFromChild();
            this.open = false;
        };
        this.initPopperJS = () => {
            if (this.anchorEl) {
                this.popperInstance = createPopper(this.anchorEl, this.el, {
                    placement: "bottom-start",
                    modifiers: [
                        {
                            name: "offset",
                            options: {
                                offset: [0, 4],
                            },
                        },
                        {
                            name: "flip",
                            options: {
                                fallbackPlacements: ["top-start", "top-end", "bottom-end"],
                                rootBoundary: "viewport",
                            },
                        },
                    ],
                });
            }
        };
    }
    watchOpenHandler() {
        var _a;
        const popoverArr = (_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`ic-popover-menu`);
        if (this.open) {
            if (popoverArr.length > 0) {
                popoverArr.forEach((popover) => {
                    if (popover !== this.el) {
                        popover.open = false;
                    }
                });
            }
            if (this.parentPopover !== undefined &&
                !this.popoverMenuEls.some((menuItem) => menuItem.id)) {
                this.backButton && this.popoverMenuEls.unshift(this.backButton);
            }
            this.currentFocus = 0;
            // Needed so that anchorEl isn't always focused
            setTimeout(this.setButtonFocus, 50);
        }
        else if (this.popperInstance) {
            if (popoverArr.length > 0) {
                popoverArr.forEach((popover) => {
                    if (popover !== this.el) {
                        popover.open = false;
                    }
                });
            }
            this.popperInstance.destroy();
            this.popperInstance = null;
        }
    }
    disconnectedCallback() {
        if (this.popperInstance) {
            this.popperInstance.destroy();
            this.popperInstance = null;
        }
    }
    componentDidLoad() {
        var _a;
        const slotWrapper = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(MENU_SELECTOR);
        if (slotWrapper) {
            const popoverMenuElements = getSlotElements(slotWrapper);
            if (popoverMenuElements !== null) {
                this.addMenuItems(popoverMenuElements);
            }
        }
        if (this.submenuId === undefined &&
            this.el.getAttribute(this.ARIA_LABEL) === null) {
            console.error(`No aria-label specified for popover menu component - aria-label required`);
        }
        this.watchOpenHandler();
    }
    componentWillRender() {
        this.anchorEl = this.findAnchorEl(this.anchor);
    }
    componentDidRender() {
        if (this.open && !this.popperInstance) {
            this.initPopperJS();
        }
    }
    handleMenuItemClick(ev) {
        if (!ev.detail.submenuTriggerFor && ev.detail.label !== "Back") {
            this.closeMenu(false, ev.detail);
        }
    }
    // This is listening for the event emitted when a menu item is acting as a trigger button
    handleSubmenuChange(ev) {
        // Finds the trigger menu item that has emitted the event
        const target = ev.target;
        this.open = false;
        // Find the popover menu that the menu item triggers (i.e. submenu-trigger-for === submenu-id).
        const childEl = document.querySelector(`ic-popover-menu[submenu-id=${target.submenuTriggerFor}]`);
        // Set the parent popover menu of the submenu and open the submenu
        childEl.parentPopover = this.el;
        childEl.anchor = this.anchor;
        childEl.ariaLabel = this.el.getAttribute(this.ARIA_LABEL);
        childEl.openFromParent();
        childEl.submenuLevel = this.submenuLevel + 1;
        // Set the label in the submenu using the label of the menu item that has emitted the event
        childEl.parentLabel = target.label;
    }
    handleClick(ev) {
        if (this.open && this.isNotPopoverMenuEl(ev)) {
            // If menu is open and the next click on the document is not a popover El, close the popover
            this.closeMenu();
        }
    }
    // Manages the keyboard navigation in the popover menu
    handleKeyDown(ev) {
        switch (ev.key) {
            case "ArrowDown":
            case "ArrowUp":
                ev.preventDefault();
                this.currentFocus = this.getNextItemToSelect(this.currentFocus, ev.key === "ArrowDown");
                this.setButtonFocus();
                break;
            case "Home":
                //Sets home focus as first element, or back button
                this.currentFocus = 0;
                this.setButtonFocus();
                break;
            case "End":
                //Sets end focus as last element
                this.currentFocus = this.popoverMenuEls.length - 1;
                this.setButtonFocus();
                break;
            case "Escape":
            case "Tab":
                ev.preventDefault();
                if (this.open) {
                    this.closeMenu(true);
                    this.el.blur();
                }
                break;
        }
    }
    /**
     * @internal Opens the menu from the child menu.
     */
    async openFromChild() {
        this.open = true;
        this.openingFromChild = true;
        setTimeout(() => (this.openingFromChild = false), 1000);
    }
    /**
     * @internal Opens the menu from the parent menu.
     */
    async openFromParent() {
        this.open = true;
        this.openingFromParent = true;
        setTimeout(() => (this.openingFromParent = false), 1000);
    }
    /**
     * @internal Close the menu, emit icPopoverClosed of the root popover
     * @param setFocusToAnchor when true return focus to anchor element when menu is closed
     */
    async closeMenu(setFocusToAnchor = false, menuElement) {
        var _a;
        this.open = false;
        if (this.parentPopover) {
            this.parentPopover.closeMenu(setFocusToAnchor, menuElement);
        }
        else {
            if (setFocusToAnchor) {
                (_a = this.anchorEl) === null || _a === void 0 ? void 0 : _a.focus();
            }
            this.icPopoverClosed.emit(menuElement);
        }
    }
    render() {
        return (h(Host, { key: '45ea929f78a71412b65696067f7573be3a6d3ea8', class: {
                ["ic-popover-menu-open"]: !!this.open,
                [`ic-theme-${this.theme}`]: this.theme !== "inherit",
            } }, h("div", { key: '6bdbe7d1dbb09296d6174028e261577fdd4532ee', id: this.parentPopover === undefined
                ? `ic-popover-submenu-${this.submenuId}`
                : "", class: {
                menu: true,
            } }, h("span", { key: '35fb266531251314aea84b37f812e88c8974e43d', class: {
                "opening-from-parent": this.openingFromParent,
                "opening-from-child": this.openingFromChild,
            } }, isPropDefined(this.submenuId) && (h("span", { key: '6605d6f2491c980baee3089a1857f931626bb54b' }, h("span", { key: '07e80b42e9b4658b36e567a3adb74a8635c96e4c', role: "menu" }, h("ic-menu-item", { key: '3430014d29bde74c907de86c97aecd16db7ea9fe', class: "ic-popover-submenu-back-button", ref: (el) => (this.backButton = el), label: "Back", onClick: this.handleBackButtonClick, id: `ic-popover-submenu-back-button-${this.submenuLevel}` }, h("svg", { key: 'aff3697d9faab6dbe89ea59f7d217cf04af1549e', slot: "icon", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "submenu-back-icon" }, h("path", { key: '451d430e380b75746a2415985cbd8bd7298f3649', d: "M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z", fill: "currentColor" })))), h("ic-typography", { key: '5b1da715db279cf8581b3533343472453f6e40e1', variant: "subtitle-small", class: "parent-label" }, this.parentLabel))), h("div", { key: '9e488ccbc0dbb2b5e56b335cb35f00f87f4921ca', class: "menu-body", "aria-label": this.getMenuAriaLabel(), role: "menu" }, h("slot", { key: '94669f3fc5982fb94ada6f3c3cac1404e5a97e67' }))))));
    }
    static get delegatesFocus() { return true; }
    get el() { return this; }
    static get watchers() { return {
        "open": ["watchOpenHandler"]
    }; }
    static get style() { return IcPopoverMenuStyle0; }
}, [17, "ic-popover-menu", {
        "anchor": [1],
        "parentLabel": [1, "parent-label"],
        "parentPopover": [16],
        "submenuId": [1, "submenu-id"],
        "submenuLevel": [2, "submenu-level"],
        "theme": [1],
        "open": [1540],
        "openingFromChild": [32],
        "openingFromParent": [32],
        "openFromChild": [64],
        "openFromParent": [64],
        "closeMenu": [64]
    }, [[0, "handleMenuItemClick", "handleMenuItemClick"], [2, "triggerPopoverMenuInstance", "handleSubmenuChange"], [4, "click", "handleClick"], [0, "keydown", "handleKeyDown"]], {
        "open": ["watchOpenHandler"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["ic-popover-menu", "ic-button", "ic-loading-indicator", "ic-menu-item", "ic-tooltip", "ic-typography"];
    components.forEach(tagName => { switch (tagName) {
        case "ic-popover-menu":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, PopoverMenu);
            }
            break;
        case "ic-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$6();
            }
            break;
        case "ic-loading-indicator":
            if (!customElements.get(tagName)) {
                defineCustomElement$5();
            }
            break;
        case "ic-menu-item":
            if (!customElements.get(tagName)) {
                defineCustomElement$4();
            }
            break;
        case "ic-tooltip":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "ic-typography":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const IcPopoverMenu = PopoverMenu;
const defineCustomElement = defineCustomElement$1;

export { IcPopoverMenu, defineCustomElement };

//# sourceMappingURL=ic-popover-menu.js.map