@ukic/web-components 3.0.0-alpha.1 → 3.0.0-alpha.11

package/dist/collection/components/ic-popover-menu/ic-popover-menu.js

@@ -31,18 +31,6 @@ export class PopoverMenu {
                 tagName !== "IC-MENU-GROUP" &&
                 tagName !== "IC-POPOVER-MENU");
         };
-        /**
-         * Close the popover menu, emit isPopoverClosed event
-         * @param setFocusToAnchor when true return focus to anchor element when menu is closed
-         */
-        this.closeMenu = (setFocusToAnchor = false) => {
-            var _a;
-            this.open = false;
-            if (setFocusToAnchor) {
-                (_a = this.anchorEl) === null || _a === void 0 ? void 0 : _a.focus();
-            }
-            this.icPopoverClosed.emit();
-        };
         this.getNextItemToSelect = (currentItem, movingDown) => {
             const numButtons = this.popoverMenuEls.length - 1;
             if (currentItem < 1) {
@@ -65,7 +53,7 @@ export class PopoverMenu {
                     this.popoverMenuEls.push(el);
                 }
                 else if (el.tagName === "IC-MENU-GROUP") {
-                    const groupSlotWrapper = el.shadowRoot.querySelector("ul");
+                    const groupSlotWrapper = el.shadowRoot.querySelector(".menu-items-wrapper");
                     const menuGroupElements = getSlotElements(groupSlotWrapper);
                     this.addMenuItems(menuGroupElements);
                 }
@@ -111,19 +99,36 @@ export class PopoverMenu {
         this.parentPopover = undefined;
         this.submenuId = undefined;
         this.submenuLevel = 1;
+        this.theme = "inherit";
         this.open = undefined;
     }
     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.popoverMenuEls.unshift(this.backButton);
             }
-            this.currentFocus = isPropDefined(this.submenuId) ? 1 : 0;
+            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;
         }
@@ -154,8 +159,8 @@ export class PopoverMenu {
         }
     }
     handleMenuItemClick(ev) {
-        if (!ev.detail.hasSubMenu && ev.detail.label !== "Back") {
-            this.closeMenu();
+        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
@@ -201,6 +206,7 @@ export class PopoverMenu {
                 break;
             case "Escape":
             case "Tab":
+                ev.preventDefault();
                 if (this.open) {
                     this.closeMenu(true);
                     this.el.blur();
@@ -224,19 +230,35 @@ export class PopoverMenu {
         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, { class: { "ic-popover-menu-open": this.open } }, h("div", { id: this.parentPopover === undefined
+        return (h(Host, { class: {
+                ["ic-popover-menu-open"]: this.open,
+                [`ic-theme-${this.theme}`]: this.theme !== "inherit",
+            } }, h("div", { id: this.parentPopover === undefined
                 ? `ic-popover-submenu-${this.submenuId}`
                 : "", class: {
                 menu: true,
-            }, tabindex: open ? "0" : "-1" }, h("div", { class: {
+            }, tabindex: open ? "0" : "-1" }, h("span", { class: {
                 "opening-from-parent": this.openingFromParent,
                 "opening-from-child": this.openingFromChild,
-            } }, isPropDefined(this.submenuId) && (h("div", null, h("ic-menu-item", { 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", { slot: "icon", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "submenu-back-icon" }, h("path", { d: "M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z", fill: "currentColor" }))), h("ic-typography", { variant: "subtitle-small", class: "parent-label" }, this.parentLabel))), h("ul", { class: "button", "aria-label": this.getMenuAriaLabel(), role: "menu", "aria-owns": isPropDefined(this.submenuId)
-                ? `ic-popover-submenu-back-button-${this.submenuLevel}`
-                : false, "aria-controls": isPropDefined(this.submenuId)
-                ? `ic-popover-submenu-back-button-${this.submenuLevel}`
-                : false }, h("slot", null))))));
+            } }, isPropDefined(this.submenuId) && (h("span", null, h("span", { role: "menu" }, h("ic-menu-item", { 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", { slot: "icon", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "submenu-back-icon" }, h("path", { d: "M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z", fill: "currentColor" })))), h("ic-typography", { variant: "subtitle-small", class: "parent-label" }, this.parentLabel))), h("ul", { class: "button", "aria-label": this.getMenuAriaLabel(), role: "menu" }, h("slot", null))))));
     }
     static get is() { return "ic-popover-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -351,6 +373,30 @@ export class PopoverMenu {
                 "reflect": false,
                 "defaultValue": "1"
             },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcThemeMode",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
+                    "references": {
+                        "IcThemeMode": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcThemeMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "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."
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"inherit\""
+            },
             "open": {
                 "type": "boolean",
                 "mutable": true,
@@ -389,9 +435,14 @@ export class PopoverMenu {
                     "text": "Emitted when the popover menu is closed."
                 },
                 "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
+                    "original": "HTMLIcMenuItemElement",
+                    "resolved": "HTMLIcMenuItemElement",
+                    "references": {
+                        "HTMLIcMenuItemElement": {
+                            "location": "global",
+                            "id": "global::HTMLIcMenuItemElement"
+                        }
+                    }
                 }
             }];
     }
@@ -436,6 +487,41 @@ export class PopoverMenu {
                             "text": "Opens the menu from the parent menu."
                         }]
                 }
+            },
+            "closeMenu": {
+                "complexType": {
+                    "signature": "(setFocusToAnchor?: boolean, menuElement?: HTMLIcMenuItemElement) => Promise<void>",
+                    "parameters": [{
+                            "name": "setFocusToAnchor",
+                            "type": "boolean",
+                            "docs": "when true return focus to anchor element when menu is closed"
+                        }, {
+                            "name": "menuElement",
+                            "type": "HTMLIcMenuItemElement",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLIcMenuItemElement": {
+                            "location": "global",
+                            "id": "global::HTMLIcMenuItemElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Close the menu, emit icPopoverClosed of the root popover"
+                        }, {
+                            "name": "param",
+                            "text": "setFocusToAnchor when true return focus to anchor element when menu is closed"
+                        }]
+                }
             }
         };
     }

package/dist/collection/components/ic-popover-menu/ic-popover-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-popover-menu.js","sourceRoot":"","sources":["../../../src/components/ic-popover-menu/ic-popover-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,IAAI,EACJ,CAAC,EACD,IAAI,EACJ,MAAM,EACN,KAAK,EACL,KAAK,EACL,MAAM,EACN,KAAK,GAEN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACrE,OAAO,EAAE,YAAY,EAA8B,MAAM,gBAAgB,CAAC;AAS1E,MAAM,OAAO,WAAW;;QAEd,eAAU,GAAW,YAAY,CAAC;QAGlC,mBAAc,GAA4B,EAAE,CAAC;QAiM7C,mBAAc,GAAG,GAAG,EAAE;;YAC5B,MAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC,0CAAE,KAAK,EAAE,CAAC;QAClD,CAAC,CAAC;QAEF,6CAA6C;QACrC,iBAAY,GAAG,CAAC,MAAc,EAAe,EAAE;YACrD,IAAI,aAAa,GAAgB,IAAI,CAAC;YACtC,IAAI,CAAC,MAAM,EAAE,CAAC;gBACZ,IAAI,CAAC,SAAS,KAAK,SAAS;oBAC1B,OAAO,CAAC,KAAK,CAAC,2CAA2C,CAAC,CAAC;YAC/D,CAAC;iBAAM,CAAC;gBACN,aAAa,GAAG,QAAQ,CAAC,aAAa,CACpC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,GAAG,MAAM,CAClD,CAAC;gBACF,IAAI,aAAa,KAAK,IAAI,EAAE,CAAC;oBAC3B,OAAO,CAAC,KAAK,CAAC,2BAA2B,MAAM,aAAa,CAAC,CAAC;gBAChE,CAAC;YACH,CAAC;YACD,OAAO,aAAa,CAAC;QACvB,CAAC,CAAC;QAEM,uBAAkB,GAAG,CAAC,EAAS,EAAE,EAAE;YACzC,MAAM,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,MAAqB,CAAC;YACjD,OAAO,CACL,EAAE,KAAK,IAAI,CAAC,MAAM;gBAClB,OAAO,KAAK,cAAc;gBAC1B,OAAO,KAAK,eAAe;gBAC3B,OAAO,KAAK,iBAAiB,CAC9B,CAAC;QACJ,CAAC,CAAC;QAEF;;;WAGG;QACK,cAAS,GAAG,CAAC,gBAAgB,GAAG,KAAK,EAAE,EAAE;;YAC/C,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,IAAI,gBAAgB,EAAE,CAAC;gBACrB,MAAA,IAAI,CAAC,QAAQ,0CAAE,KAAK,EAAE,CAAC;YACzB,CAAC;YACD,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;QAC9B,CAAC,CAAC;QAEM,wBAAmB,GAAG,CAC5B,WAAmB,EACnB,UAAmB,EACX,EAAE;YACV,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC;YAElD,IAAI,WAAW,GAAG,CAAC,EAAE,CAAC;gBACpB,WAAW,GAAG,CAAC,CAAC;YAClB,CAAC;YAED,IAAI,QAAQ,GAAG,UAAU,CAAC,CAAC,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC,WAAW,GAAG,CAAC,CAAC;YAE9D,iCAAiC;YACjC,IAAI,QAAQ,GAAG,CAAC,EAAE,CAAC;gBACjB,QAAQ,GAAG,UAAU,CAAC;YACxB,CAAC;iBAAM,IAAI,QAAQ,GAAG,UAAU,EAAE,CAAC;gBACjC,QAAQ,GAAG,CAAC,CAAC;YACf,CAAC;YAED,OAAO,QAAQ,CAAC;QAClB,CAAC,CAAC;QAEM,iBAAY,GAAG,CAAC,QAA2C,EAAE,EAAE;YACrE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;gBACzC,MAAM,EAAE,GAAG,QAAQ,CAAC,CAAC,CAA0B,CAAC;gBAChD,IAAI,EAAE,CAAC,OAAO,KAAK,cAAc,EAAE,CAAC;oBAClC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;gBAC/B,CAAC;qBAAM,IAAI,EAAE,CAAC,OAAO,KAAK,eAAe,EAAE,CAAC;oBAC1C,MAAM,gBAAgB,GAAG,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;oBAC3D,MAAM,iBAAiB,GAAG,eAAe,CAAC,gBAAgB,CAAC,CAAC;oBAE5D,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;gBACvC,CAAC;YACH,CAAC;QACH,CAAC,CAAC;QAEM,qBAAgB,GAAG,GAAW,EAAE;YACtC,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YAExD,IAAI,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC;gBAClC,OAAO,GAAG,SAAS,yBAAyB,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,WAAW,WAAW,CAAC;YAC/F,CAAC;iBAAM,CAAC;gBACN,OAAO,SAAS,CAAC;YACnB,CAAC;QACH,CAAC,CAAC;QAEM,0BAAqB,GAAG,GAAS,EAAE;YACzC,IAAI,CAAC,aAAa,CAAC,aAAa,EAAE,CAAC;YACnC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QACpB,CAAC,CAAC;QAEM,iBAAY,GAAG,GAAG,EAAE;YAC1B,IAAI,CAAC,cAAc,GAAG,YAAY,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,EAAE;gBACzD,SAAS,EAAE,cAAc;gBACzB,SAAS,EAAE;oBACT;wBACE,IAAI,EAAE,QAAQ;wBACd,OAAO,EAAE;4BACP,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;yBACf;qBACF;oBACD;wBACE,IAAI,EAAE,MAAM;wBACZ,OAAO,EAAE;4BACP,kBAAkB,EAAE,CAAC,WAAW,EAAE,SAAS,EAAE,YAAY,CAAC;4BAC1D,YAAY,EAAE,UAAU;yBACzB;qBACF;iBACF;aACF,CAAC,CAAC;QACL,CAAC,CAAC;gCA7SmC,KAAK;iCACJ,KAAK;;;;;4BAyBZ,CAAC;oBAKwB,SAAS;;IAGjE,gBAAgB;QACd,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,IACE,IAAI,CAAC,aAAa,KAAK,SAAS;gBAChC,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,EACpD,CAAC;gBACD,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YAC/C,CAAC;YAED,IAAI,CAAC,YAAY,GAAG,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAC1D,+CAA+C;YAC/C,UAAU,CAAC,IAAI,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC;QACtC,CAAC;aAAM,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YAC/B,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,CAAC;YAC9B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;QAC7B,CAAC;IACH,CAAC;IAOD,oBAAoB;QAClB,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,CAAC;YAC9B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;QAC7B,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;QAClE,MAAM,mBAAmB,GAAG,eAAe,CAAC,WAAW,CAAC,CAAC;QAEzD,IAAI,mBAAmB,KAAK,IAAI,EAAE,CAAC;YACjC,IAAI,CAAC,YAAY,CAAC,mBAAmB,CAAC,CAAC;QACzC,CAAC;QAED,IACE,IAAI,CAAC,SAAS,KAAK,SAAS;YAC5B,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,IAAI,EAC9C,CAAC;YACD,OAAO,CAAC,KAAK,CACX,0EAA0E,CAC3E,CAAC;QACJ,CAAC;IACH,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACjD,CAAC;IAED,kBAAkB;QAChB,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;YACtC,IAAI,CAAC,YAAY,EAAE,CAAC;QACtB,CAAC;IACH,CAAC;IAGD,mBAAmB,CACjB,EAGE;QAEF,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,UAAU,IAAI,EAAE,CAAC,MAAM,CAAC,KAAK,KAAK,MAAM,EAAE,CAAC;YACxD,IAAI,CAAC,SAAS,EAAE,CAAC;QACnB,CAAC;IACH,CAAC;IAED,yFAAyF;IAEzF,mBAAmB,CAAC,EAAS;QAC3B,yDAAyD;QACzD,MAAM,MAAM,GAAG,EAAE,CAAC,MAA+B,CAAC;QAClD,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAElB,+FAA+F;QAC/F,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CACpC,8BAA8B,MAAM,CAAC,iBAAiB,GAAG,CAC9B,CAAC;QAC9B,kEAAkE;QAClE,OAAO,CAAC,aAAa,GAAG,IAAI,CAAC,EAAE,CAAC;QAChC,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;QAC7B,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAC1D,OAAO,CAAC,cAAc,EAAE,CAAC;QACzB,OAAO,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;QAC7C,2FAA2F;QAC3F,OAAO,CAAC,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC;IACrC,CAAC;IAGD,WAAW,CAAC,EAAS;QACnB,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,kBAAkB,CAAC,EAAE,CAAC,EAAE,CAAC;YAC7C,4FAA4F;YAC5F,IAAI,CAAC,SAAS,EAAE,CAAC;QACnB,CAAC;IACH,CAAC;IAED,sDAAsD;IAEtD,aAAa,CAAC,EAAiB;QAC7B,QAAQ,EAAE,CAAC,GAAG,EAAE,CAAC;YACf,KAAK,WAAW,CAAC;YACjB,KAAK,SAAS;gBACZ,EAAE,CAAC,cAAc,EAAE,CAAC;gBACpB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,mBAAmB,CAC1C,IAAI,CAAC,YAAY,EACjB,EAAE,CAAC,GAAG,KAAK,WAAW,CACvB,CAAC;gBACF,IAAI,CAAC,cAAc,EAAE,CAAC;gBACtB,MAAM;YACR,KAAK,MAAM;gBACT,kDAAkD;gBAClD,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;gBACtB,IAAI,CAAC,cAAc,EAAE,CAAC;gBACtB,MAAM;YACR,KAAK,KAAK;gBACR,gCAAgC;gBAChC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC;gBACnD,IAAI,CAAC,cAAc,EAAE,CAAC;gBACtB,MAAM;YACR,KAAK,QAAQ,CAAC;YACd,KAAK,KAAK;gBACR,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;oBACd,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;oBACrB,IAAI,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC;gBACjB,CAAC;gBACD,MAAM;QACV,CAAC;IACH,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,aAAa;QACjB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;QAE7B,UAAU,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC,EAAE,IAAI,CAAC,CAAC;IAC1D,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,cAAc;QAClB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;QAE9B,UAAU,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC,EAAE,IAAI,CAAC,CAAC;IAC3D,CAAC;IAqHD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,sBAAsB,EAAE,IAAI,CAAC,IAAI,EAAE;YAChD,WACE,EAAE,EACA,IAAI,CAAC,aAAa,KAAK,SAAS;oBAC9B,CAAC,CAAC,sBAAsB,IAAI,CAAC,SAAS,EAAE;oBACxC,CAAC,CAAC,EAAE,EAER,KAAK,EAAE;oBACL,IAAI,EAAE,IAAI;iBACX,EACD,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI;gBAE3B,WACE,KAAK,EAAE;wBACL,qBAAqB,EAAE,IAAI,CAAC,iBAAiB;wBAC7C,oBAAoB,EAAE,IAAI,CAAC,gBAAgB;qBAC5C;oBAEA,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAChC;wBACE,oBACE,KAAK,EAAC,gCAAgC,EACtC,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC,EACnC,KAAK,EAAC,MAAM,EACZ,OAAO,EAAE,IAAI,CAAC,qBAAqB,EACnC,EAAE,EAAE,kCAAkC,IAAI,CAAC,YAAY,EAAE;4BAEzD,WACE,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,mBAAmB;gCAEzB,YACE,CAAC,EAAC,mEAAmE,EACrE,IAAI,EAAC,cAAc,GACnB,CACE,CACO;wBACf,qBAAe,OAAO,EAAC,gBAAgB,EAAC,KAAK,EAAC,cAAc,IACzD,IAAI,CAAC,WAAW,CACH,CACZ,CACP;oBACD,UACE,KAAK,EAAC,QAAQ,gBACF,IAAI,CAAC,gBAAgB,EAAE,EACnC,IAAI,EAAC,MAAM,eAET,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC;4BAC3B,CAAC,CAAC,kCAAkC,IAAI,CAAC,YAAY,EAAE;4BACvD,CAAC,CAAC,KAAK,mBAGT,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC;4BAC3B,CAAC,CAAC,kCAAkC,IAAI,CAAC,YAAY,EAAE;4BACvD,CAAC,CAAC,KAAK;wBAGX,eAAa,CACV,CACD,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  h,\n  Prop,\n  Listen,\n  Watch,\n  State,\n  Method,\n  Event,\n  EventEmitter,\n} from \"@stencil/core\";\nimport { getSlotElements, isPropDefined } from \"../../utils/helpers\";\nimport { createPopper, Instance as PopperInstance } from \"@popperjs/core\";\n\n@Component({\n  tag: \"ic-popover-menu\",\n  styleUrl: \"ic-popover-menu.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class PopoverMenu {\n  private anchorEl: HTMLElement;\n  private ARIA_LABEL: string = \"aria-label\";\n  private backButton: HTMLIcMenuItemElement;\n  private currentFocus: number;\n  private popoverMenuEls: HTMLIcMenuItemElement[] = [];\n  private popperInstance: PopperInstance;\n\n  @Element() el: HTMLIcPopoverMenuElement;\n\n  @State() openingFromChild: boolean = false;\n  @State() openingFromParent: boolean = false;\n\n  /**\n   * The ID of the element the popover menu will anchor itself to. This is required unless the popover is a submenu.\n   */\n  @Prop() anchor: string;\n\n  /**\n   * @internal The parent popover menu of a child popover menu.\n   */\n  @Prop() parentLabel?: string;\n\n  /**\n   * @internal The parent popover menu of a child popover menu.\n   */\n  @Prop() parentPopover?: HTMLIcPopoverMenuElement;\n\n  /**\n   * The unique identifier for a popover submenu.\n   */\n  @Prop() submenuId?: string;\n\n  /**\n   * @internal The level of menu being displayed.\n   */\n  @Prop() submenuLevel: number = 1;\n\n  /**\n   * If `true`, the popover menu will be displayed.\n   */\n  @Prop({ reflect: true, mutable: true }) open: boolean = undefined;\n\n  @Watch(\"open\")\n  watchOpenHandler(): void {\n    if (this.open) {\n      if (\n        this.parentPopover !== undefined &&\n        !this.popoverMenuEls.some((menuItem) => menuItem.id)\n      ) {\n        this.popoverMenuEls.unshift(this.backButton);\n      }\n\n      this.currentFocus = isPropDefined(this.submenuId) ? 1 : 0;\n      // Needed so that anchorEl isn't always focused\n      setTimeout(this.setButtonFocus, 50);\n    } else if (this.popperInstance) {\n      this.popperInstance.destroy();\n      this.popperInstance = null;\n    }\n  }\n\n  /**\n   * Emitted when the popover menu is closed.\n   */\n  @Event() icPopoverClosed: EventEmitter<void>;\n\n  disconnectedCallback(): void {\n    if (this.popperInstance) {\n      this.popperInstance.destroy();\n      this.popperInstance = null;\n    }\n  }\n\n  componentDidLoad(): void {\n    const slotWrapper = this.el.shadowRoot.querySelector(\"ul.button\");\n    const popoverMenuElements = getSlotElements(slotWrapper);\n\n    if (popoverMenuElements !== null) {\n      this.addMenuItems(popoverMenuElements);\n    }\n\n    if (\n      this.submenuId === undefined &&\n      this.el.getAttribute(this.ARIA_LABEL) === null\n    ) {\n      console.error(\n        `No aria-label specified for popover menu component - aria-label required`\n      );\n    }\n  }\n\n  componentWillRender(): void {\n    this.anchorEl = this.findAnchorEl(this.anchor);\n  }\n\n  componentDidRender(): void {\n    if (this.open && !this.popperInstance) {\n      this.initPopperJS();\n    }\n  }\n\n  @Listen(\"handleMenuItemClick\")\n  handleMenuItemClick(\n    ev: CustomEvent<{\n      label: string;\n      hasSubMenu: boolean;\n    }>\n  ): void {\n    if (!ev.detail.hasSubMenu && ev.detail.label !== \"Back\") {\n      this.closeMenu();\n    }\n  }\n\n  // This is listening for the event emitted when a menu item is acting as a trigger button\n  @Listen(\"triggerPopoverMenuInstance\", { capture: true })\n  handleSubmenuChange(ev: Event): void {\n    // Finds the trigger menu item that has emitted the event\n    const target = ev.target as HTMLIcMenuItemElement;\n    this.open = false;\n\n    // Find the popover menu that the menu item triggers (i.e. submenu-trigger-for === submenu-id).\n    const childEl = document.querySelector(\n      `ic-popover-menu[submenu-id=${target.submenuTriggerFor}]`\n    ) as HTMLIcPopoverMenuElement;\n    // Set the parent popover menu of the submenu and open the submenu\n    childEl.parentPopover = this.el;\n    childEl.anchor = this.anchor;\n    childEl.ariaLabel = this.el.getAttribute(this.ARIA_LABEL);\n    childEl.openFromParent();\n    childEl.submenuLevel = this.submenuLevel + 1;\n    // Set the label in the submenu using the label of the menu item that has emitted the event\n    childEl.parentLabel = target.label;\n  }\n\n  @Listen(\"click\", { target: \"document\" })\n  handleClick(ev: Event): void {\n    if (this.open && this.isNotPopoverMenuEl(ev)) {\n      // If menu is open and the next click on the document is not a popover El, close the popover\n      this.closeMenu();\n    }\n  }\n\n  // Manages the keyboard navigation in the popover menu\n  @Listen(\"keydown\", {})\n  handleKeyDown(ev: KeyboardEvent): void {\n    switch (ev.key) {\n      case \"ArrowDown\":\n      case \"ArrowUp\":\n        ev.preventDefault();\n        this.currentFocus = this.getNextItemToSelect(\n          this.currentFocus,\n          ev.key === \"ArrowDown\"\n        );\n        this.setButtonFocus();\n        break;\n      case \"Home\":\n        //Sets home focus as first element, or back button\n        this.currentFocus = 0;\n        this.setButtonFocus();\n        break;\n      case \"End\":\n        //Sets end focus as last element\n        this.currentFocus = this.popoverMenuEls.length - 1;\n        this.setButtonFocus();\n        break;\n      case \"Escape\":\n      case \"Tab\":\n        if (this.open) {\n          this.closeMenu(true);\n          this.el.blur();\n        }\n        break;\n    }\n  }\n\n  /**\n   * @internal Opens the menu from the child menu.\n   */\n  @Method()\n  async openFromChild(): Promise<void> {\n    this.open = true;\n    this.openingFromChild = true;\n\n    setTimeout(() => (this.openingFromChild = false), 1000);\n  }\n\n  /**\n   * @internal Opens the menu from the parent menu.\n   */\n  @Method()\n  async openFromParent(): Promise<void> {\n    this.open = true;\n    this.openingFromParent = true;\n\n    setTimeout(() => (this.openingFromParent = false), 1000);\n  }\n\n  private setButtonFocus = () => {\n    this.popoverMenuEls[this.currentFocus]?.focus();\n  };\n\n  // Checks that the popover menu has an anchor\n  private findAnchorEl = (anchor: string): HTMLElement => {\n    let anchorElement: HTMLElement = null;\n    if (!anchor) {\n      this.submenuId === undefined &&\n        console.error(\"No anchor specified for popover component\");\n    } else {\n      anchorElement = document.querySelector(\n        anchor.indexOf(\"#\") === 0 ? anchor : \"#\" + anchor\n      );\n      if (anchorElement === null) {\n        console.error(`Popover anchor element '${anchor}' not found`);\n      }\n    }\n    return anchorElement;\n  };\n\n  private isNotPopoverMenuEl = (ev: Event) => {\n    const { id, tagName } = ev.target as HTMLElement;\n    return (\n      id !== this.anchor &&\n      tagName !== \"IC-MENU-ITEM\" &&\n      tagName !== \"IC-MENU-GROUP\" &&\n      tagName !== \"IC-POPOVER-MENU\"\n    );\n  };\n\n  /**\n   * Close the popover menu, emit isPopoverClosed event\n   * @param setFocusToAnchor when true return focus to anchor element when menu is closed\n   */\n  private closeMenu = (setFocusToAnchor = false) => {\n    this.open = false;\n    if (setFocusToAnchor) {\n      this.anchorEl?.focus();\n    }\n    this.icPopoverClosed.emit();\n  };\n\n  private getNextItemToSelect = (\n    currentItem: number,\n    movingDown: boolean\n  ): number => {\n    const numButtons = this.popoverMenuEls.length - 1;\n\n    if (currentItem < 1) {\n      currentItem = 0;\n    }\n\n    let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n\n    // Check if wrap around necessary\n    if (nextItem < 0) {\n      nextItem = numButtons;\n    } else if (nextItem > numButtons) {\n      nextItem = 0;\n    }\n\n    return nextItem;\n  };\n\n  private addMenuItems = (elements: Element[] | NodeListOf<ChildNode>) => {\n    for (let i = 0; i < elements.length; i++) {\n      const el = elements[i] as HTMLIcMenuItemElement;\n      if (el.tagName === \"IC-MENU-ITEM\") {\n        this.popoverMenuEls.push(el);\n      } else if (el.tagName === \"IC-MENU-GROUP\") {\n        const groupSlotWrapper = el.shadowRoot.querySelector(\"ul\");\n        const menuGroupElements = getSlotElements(groupSlotWrapper);\n\n        this.addMenuItems(menuGroupElements);\n      }\n    }\n  };\n\n  private getMenuAriaLabel = (): string => {\n    const ariaLabel = this.el.getAttribute(this.ARIA_LABEL);\n\n    if (isPropDefined(this.submenuId)) {\n      return `${ariaLabel}, within nested level ${this.submenuLevel} ${this.parentLabel} submenu,`;\n    } else {\n      return ariaLabel;\n    }\n  };\n\n  private handleBackButtonClick = (): void => {\n    this.parentPopover.openFromChild();\n    this.open = false;\n  };\n\n  private initPopperJS = () => {\n    this.popperInstance = createPopper(this.anchorEl, this.el, {\n      placement: \"bottom-start\",\n      modifiers: [\n        {\n          name: \"offset\",\n          options: {\n            offset: [0, 4],\n          },\n        },\n        {\n          name: \"flip\",\n          options: {\n            fallbackPlacements: [\"top-start\", \"top-end\", \"bottom-end\"],\n            rootBoundary: \"viewport\",\n          },\n        },\n      ],\n    });\n  };\n\n  render() {\n    return (\n      <Host class={{ \"ic-popover-menu-open\": this.open }}>\n        <div\n          id={\n            this.parentPopover === undefined\n              ? `ic-popover-submenu-${this.submenuId}`\n              : \"\"\n          }\n          class={{\n            menu: true,\n          }}\n          tabindex={open ? \"0\" : \"-1\"}\n        >\n          <div\n            class={{\n              \"opening-from-parent\": this.openingFromParent,\n              \"opening-from-child\": this.openingFromChild,\n            }}\n          >\n            {isPropDefined(this.submenuId) && (\n              <div>\n                <ic-menu-item\n                  class=\"ic-popover-submenu-back-button\"\n                  ref={(el) => (this.backButton = el)}\n                  label=\"Back\"\n                  onClick={this.handleBackButtonClick}\n                  id={`ic-popover-submenu-back-button-${this.submenuLevel}`}\n                >\n                  <svg\n                    slot=\"icon\"\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    class=\"submenu-back-icon\"\n                  >\n                    <path\n                      d=\"M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                </ic-menu-item>\n                <ic-typography variant=\"subtitle-small\" class=\"parent-label\">\n                  {this.parentLabel}\n                </ic-typography>\n              </div>\n            )}\n            <ul\n              class=\"button\"\n              aria-label={this.getMenuAriaLabel()}\n              role=\"menu\"\n              aria-owns={\n                isPropDefined(this.submenuId)\n                  ? `ic-popover-submenu-back-button-${this.submenuLevel}`\n                  : false\n              }\n              aria-controls={\n                isPropDefined(this.submenuId)\n                  ? `ic-popover-submenu-back-button-${this.submenuLevel}`\n                  : false\n              }\n            >\n              <slot></slot>\n            </ul>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-popover-menu.js","sourceRoot":"","sources":["../../../src/components/ic-popover-menu/ic-popover-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  h,\n  Prop,\n  Listen,\n  Watch,\n  State,\n  Method,\n  Event,\n  EventEmitter,\n} from \"@stencil/core\";\nimport { getSlotElements, isPropDefined } from \"../../utils/helpers\";\nimport { createPopper, Instance as PopperInstance } from \"@popperjs/core\";\nimport { IcThemeMode } from \"../../utils/types\";\n\n@Component({\n  tag: \"ic-popover-menu\",\n  styleUrl: \"ic-popover-menu.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class PopoverMenu {\n  private anchorEl: HTMLElement;\n  private ARIA_LABEL: string = \"aria-label\";\n  private backButton: HTMLIcMenuItemElement;\n  private currentFocus: number;\n  private popoverMenuEls: HTMLIcMenuItemElement[] = [];\n  private popperInstance: PopperInstance;\n\n  @Element() el: HTMLIcPopoverMenuElement;\n\n  @State() openingFromChild: boolean = false;\n  @State() openingFromParent: boolean = false;\n\n  /**\n   * The ID of the element the popover menu will anchor itself to. This is required unless the popover is a submenu.\n   */\n  @Prop() anchor: string;\n\n  /**\n   * @internal The parent popover menu of a child popover menu.\n   */\n  @Prop() parentLabel?: string;\n\n  /**\n   * @internal The parent popover menu of a child popover menu.\n   */\n  @Prop() parentPopover?: HTMLIcPopoverMenuElement;\n\n  /**\n   * The unique identifier for a popover submenu.\n   */\n  @Prop() submenuId?: string;\n\n  /**\n   * @internal The level of menu being displayed.\n   */\n  @Prop() submenuLevel: number = 1;\n\n  /**\n   * 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.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  /**\n   * If `true`, the popover menu will be displayed.\n   */\n  @Prop({ reflect: true, mutable: true }) open: boolean = undefined;\n\n  @Watch(\"open\")\n  watchOpenHandler(): void {\n    const popoverArr = this.el.parentElement?.querySelectorAll(\n      `ic-popover-menu`\n    ) as NodeListOf<HTMLIcPopoverMenuElement>;\n    if (this.open) {\n      if (popoverArr.length > 0) {\n        popoverArr.forEach((popover) => {\n          if (popover !== this.el) {\n            popover.open = false;\n          }\n        });\n      }\n      if (\n        this.parentPopover !== undefined &&\n        !this.popoverMenuEls.some((menuItem) => menuItem.id)\n      ) {\n        this.popoverMenuEls.unshift(this.backButton);\n      }\n\n      this.currentFocus = 0;\n      // Needed so that anchorEl isn't always focused\n      setTimeout(this.setButtonFocus, 50);\n    } else if (this.popperInstance) {\n      if (popoverArr.length > 0) {\n        popoverArr.forEach((popover) => {\n          if (popover !== this.el) {\n            popover.open = false;\n          }\n        });\n      }\n      this.popperInstance.destroy();\n      this.popperInstance = null;\n    }\n  }\n\n  /**\n   * Emitted when the popover menu is closed.\n   */\n  @Event() icPopoverClosed: EventEmitter<HTMLIcMenuItemElement>;\n\n  disconnectedCallback(): void {\n    if (this.popperInstance) {\n      this.popperInstance.destroy();\n      this.popperInstance = null;\n    }\n  }\n\n  componentDidLoad(): void {\n    const slotWrapper = this.el.shadowRoot.querySelector(\"ul.button\");\n    const popoverMenuElements = getSlotElements(slotWrapper);\n\n    if (popoverMenuElements !== null) {\n      this.addMenuItems(popoverMenuElements);\n    }\n\n    if (\n      this.submenuId === undefined &&\n      this.el.getAttribute(this.ARIA_LABEL) === null\n    ) {\n      console.error(\n        `No aria-label specified for popover menu component - aria-label required`\n      );\n    }\n  }\n\n  componentWillRender(): void {\n    this.anchorEl = this.findAnchorEl(this.anchor);\n  }\n\n  componentDidRender(): void {\n    if (this.open && !this.popperInstance) {\n      this.initPopperJS();\n    }\n  }\n\n  @Listen(\"handleMenuItemClick\")\n  handleMenuItemClick(ev: CustomEvent<HTMLIcMenuItemElement>): void {\n    if (!ev.detail.submenuTriggerFor && ev.detail.label !== \"Back\") {\n      this.closeMenu(false, ev.detail);\n    }\n  }\n\n  // This is listening for the event emitted when a menu item is acting as a trigger button\n  @Listen(\"triggerPopoverMenuInstance\", { capture: true })\n  handleSubmenuChange(ev: Event): void {\n    // Finds the trigger menu item that has emitted the event\n    const target = ev.target as HTMLIcMenuItemElement;\n    this.open = false;\n\n    // Find the popover menu that the menu item triggers (i.e. submenu-trigger-for === submenu-id).\n    const childEl = document.querySelector(\n      `ic-popover-menu[submenu-id=${target.submenuTriggerFor}]`\n    ) as HTMLIcPopoverMenuElement;\n    // Set the parent popover menu of the submenu and open the submenu\n    childEl.parentPopover = this.el;\n    childEl.anchor = this.anchor;\n    childEl.ariaLabel = this.el.getAttribute(this.ARIA_LABEL);\n    childEl.openFromParent();\n    childEl.submenuLevel = this.submenuLevel + 1;\n    // Set the label in the submenu using the label of the menu item that has emitted the event\n    childEl.parentLabel = target.label;\n  }\n\n  @Listen(\"click\", { target: \"document\" })\n  handleClick(ev: Event): void {\n    if (this.open && this.isNotPopoverMenuEl(ev)) {\n      // If menu is open and the next click on the document is not a popover El, close the popover\n      this.closeMenu();\n    }\n  }\n\n  // Manages the keyboard navigation in the popover menu\n  @Listen(\"keydown\", {})\n  handleKeyDown(ev: KeyboardEvent): void {\n    switch (ev.key) {\n      case \"ArrowDown\":\n      case \"ArrowUp\":\n        ev.preventDefault();\n        this.currentFocus = this.getNextItemToSelect(\n          this.currentFocus,\n          ev.key === \"ArrowDown\"\n        );\n        this.setButtonFocus();\n        break;\n      case \"Home\":\n        //Sets home focus as first element, or back button\n        this.currentFocus = 0;\n        this.setButtonFocus();\n        break;\n      case \"End\":\n        //Sets end focus as last element\n        this.currentFocus = this.popoverMenuEls.length - 1;\n        this.setButtonFocus();\n        break;\n      case \"Escape\":\n      case \"Tab\":\n        ev.preventDefault();\n        if (this.open) {\n          this.closeMenu(true);\n          this.el.blur();\n        }\n        break;\n    }\n  }\n\n  /**\n   * @internal Opens the menu from the child menu.\n   */\n  @Method()\n  async openFromChild(): Promise<void> {\n    this.open = true;\n    this.openingFromChild = true;\n\n    setTimeout(() => (this.openingFromChild = false), 1000);\n  }\n\n  /**\n   * @internal Opens the menu from the parent menu.\n   */\n  @Method()\n  async openFromParent(): Promise<void> {\n    this.open = true;\n    this.openingFromParent = true;\n\n    setTimeout(() => (this.openingFromParent = false), 1000);\n  }\n\n  private setButtonFocus = () => {\n    this.popoverMenuEls[this.currentFocus]?.focus();\n  };\n\n  // Checks that the popover menu has an anchor\n  private findAnchorEl = (anchor: string): HTMLElement => {\n    let anchorElement: HTMLElement = null;\n    if (!anchor) {\n      this.submenuId === undefined &&\n        console.error(\"No anchor specified for popover component\");\n    } else {\n      anchorElement = document.querySelector(\n        anchor.indexOf(\"#\") === 0 ? anchor : \"#\" + anchor\n      );\n      if (anchorElement === null) {\n        console.error(`Popover anchor element '${anchor}' not found`);\n      }\n    }\n    return anchorElement;\n  };\n\n  private isNotPopoverMenuEl = (ev: Event) => {\n    const { id, tagName } = ev.target as HTMLElement;\n    return (\n      id !== this.anchor &&\n      tagName !== \"IC-MENU-ITEM\" &&\n      tagName !== \"IC-MENU-GROUP\" &&\n      tagName !== \"IC-POPOVER-MENU\"\n    );\n  };\n\n  /**\n   * @internal Close the menu, emit icPopoverClosed of the root popover\n   * @param setFocusToAnchor when true return focus to anchor element when menu is closed\n   */\n  @Method()\n  async closeMenu(\n    setFocusToAnchor = false,\n    menuElement?: HTMLIcMenuItemElement\n  ): Promise<void> {\n    this.open = false;\n    if (this.parentPopover) {\n      this.parentPopover.closeMenu(setFocusToAnchor, menuElement);\n    } else {\n      if (setFocusToAnchor) {\n        this.anchorEl?.focus();\n      }\n      this.icPopoverClosed.emit(menuElement);\n    }\n  }\n\n  private getNextItemToSelect = (\n    currentItem: number,\n    movingDown: boolean\n  ): number => {\n    const numButtons = this.popoverMenuEls.length - 1;\n\n    if (currentItem < 1) {\n      currentItem = 0;\n    }\n\n    let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n\n    // Check if wrap around necessary\n    if (nextItem < 0) {\n      nextItem = numButtons;\n    } else if (nextItem > numButtons) {\n      nextItem = 0;\n    }\n\n    return nextItem;\n  };\n\n  private addMenuItems = (elements: Element[] | NodeListOf<ChildNode>) => {\n    for (let i = 0; i < elements.length; i++) {\n      const el = elements[i] as HTMLIcMenuItemElement;\n      if (el.tagName === \"IC-MENU-ITEM\") {\n        this.popoverMenuEls.push(el);\n      } else if (el.tagName === \"IC-MENU-GROUP\") {\n        const groupSlotWrapper = el.shadowRoot.querySelector(\n          \".menu-items-wrapper\"\n        );\n        const menuGroupElements = getSlotElements(groupSlotWrapper);\n\n        this.addMenuItems(menuGroupElements);\n      }\n    }\n  };\n\n  private getMenuAriaLabel = (): string => {\n    const ariaLabel = this.el.getAttribute(this.ARIA_LABEL);\n\n    if (isPropDefined(this.submenuId)) {\n      return `${ariaLabel}, within nested level ${this.submenuLevel} ${this.parentLabel} submenu,`;\n    } else {\n      return ariaLabel;\n    }\n  };\n\n  private handleBackButtonClick = (): void => {\n    this.parentPopover.openFromChild();\n    this.open = false;\n  };\n\n  private initPopperJS = () => {\n    this.popperInstance = createPopper(this.anchorEl, this.el, {\n      placement: \"bottom-start\",\n      modifiers: [\n        {\n          name: \"offset\",\n          options: {\n            offset: [0, 4],\n          },\n        },\n        {\n          name: \"flip\",\n          options: {\n            fallbackPlacements: [\"top-start\", \"top-end\", \"bottom-end\"],\n            rootBoundary: \"viewport\",\n          },\n        },\n      ],\n    });\n  };\n\n  render() {\n    return (\n      <Host\n        class={{\n          [\"ic-popover-menu-open\"]: this.open,\n          [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n        }}\n      >\n        <div\n          id={\n            this.parentPopover === undefined\n              ? `ic-popover-submenu-${this.submenuId}`\n              : \"\"\n          }\n          class={{\n            menu: true,\n          }}\n          tabindex={open ? \"0\" : \"-1\"}\n        >\n          <span\n            class={{\n              \"opening-from-parent\": this.openingFromParent,\n              \"opening-from-child\": this.openingFromChild,\n            }}\n          >\n            {isPropDefined(this.submenuId) && (\n              <span>\n                <span role=\"menu\">\n                  <ic-menu-item\n                    class=\"ic-popover-submenu-back-button\"\n                    ref={(el) => (this.backButton = el)}\n                    label=\"Back\"\n                    onClick={this.handleBackButtonClick}\n                    id={`ic-popover-submenu-back-button-${this.submenuLevel}`}\n                  >\n                    <svg\n                      slot=\"icon\"\n                      viewBox=\"0 0 24 24\"\n                      fill=\"none\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      class=\"submenu-back-icon\"\n                    >\n                      <path\n                        d=\"M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z\"\n                        fill=\"currentColor\"\n                      />\n                    </svg>\n                  </ic-menu-item>\n                </span>\n                <ic-typography variant=\"subtitle-small\" class=\"parent-label\">\n                  {this.parentLabel}\n                </ic-typography>\n              </span>\n            )}\n            <ul class=\"button\" aria-label={this.getMenuAriaLabel()} role=\"menu\">\n              <slot></slot>\n            </ul>\n          </span>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}