@momentum-design/components 0.74.2 → 0.74.4

package/dist/utils/mixins/MenuMixin.js

@@ -0,0 +1,474 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { property, queryAssignedElements } from 'lit/decorators.js';
+import { TAG_NAME as MENU_TAGNAME } from '../../components/menu/menu.constants';
+import { ORIENTATION, TAG_NAME as MENUBAR_TAGNAME } from '../../components/menubar/menubar.constants';
+import { TAG_NAME as MENUITEM_TAGNAME } from '../../components/menuitem/menuitem.constants';
+import { TAG_NAME as MENUITEMCHECKBOX_TAGNAME } from '../../components/menuitemcheckbox/menuitemcheckbox.constants';
+import { TAG_NAME as MENUITEMRADIO_TAGNAME } from '../../components/menuitemradio/menuitemradio.constants';
+import { TAG_NAME as MENUPOPOVER_TAGNAME } from '../../components/menupopover/menupopover.constants';
+import { TAG_NAME as MENUSECTION_TAGNAME } from '../../components/menusection/menusection.constants';
+import { POPOVER_PLACEMENT } from '../../components/popover/popover.constants';
+import { KEYS } from '../keys';
+export const MenuMixin = (superClass) => {
+    class InnerMixinClass extends superClass {
+        constructor() {
+            super(...arguments);
+            /**
+             * Defines the orientation of the menu. This value is reflected to
+             * the `aria-orientation` attribute and can be either `'horizontal'` or `'vertical'`.
+             * @default 'horizontal'
+             */
+            this.ariaOrientation = ORIENTATION.HORIZONTAL;
+        }
+        /** @internal */
+        get menuItems() {
+            var _a;
+            const slot = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
+            const allAssignedElements = ((slot === null || slot === void 0 ? void 0 : slot.assignedElements({ flatten: true })) || []);
+            return allAssignedElements.map((node) => {
+                if (node.tagName.toLowerCase() === MENUSECTION_TAGNAME) {
+                    return Array.from(node.children)
+                        .filter((child) => this.isValidMenuItem(child));
+                }
+                return this.isValidMenuItem(node) ? node : [];
+            })
+                .flat()
+                .filter((node) => !!node)
+                .filter((node) => !node.hasAttribute('disabled'));
+        }
+        firstUpdated(changedProperties) {
+            super.firstUpdated(changedProperties);
+            this.setMenuBarPopoverValue(false);
+        }
+        /**
+         * Sets the value of the data-menu-popover-open attribute on the menu element.
+         * @param value - The value to set.
+         */
+        setMenuBarPopoverValue(value) {
+            const { menu } = this.getParentMenuItemDetails('', this);
+            menu === null || menu === void 0 ? void 0 : menu.setAttribute('data-menu-popover-open', value.toString());
+        }
+        /**
+         * Returns true if the data-menu-popover-open attribute on the menu element is set to 'true', false otherwise.
+         */
+        isMenuPopoverOpen() {
+            const { menu } = this.getParentMenuItemDetails('', this);
+            return (menu === null || menu === void 0 ? void 0 : menu.getAttribute('data-menu-popover-open')) === 'true';
+        }
+        /**
+         * Returns the index of the given target in the menuItems array.
+         * If the target is not a menu item, but a child element of a menu item,
+         * it returns the index of the parent menu item.
+         * @param target - The target element to find the index of.
+         * @returns The index of the target element in the menuItems array.
+         */
+        getCurrentIndex(target) {
+            return this.menuItems.findIndex((node) => node === target || node === target.parentElement);
+        }
+        /**
+         * Updates the placement of the popover based on the aria-orientation property.
+         */
+        updatePopoverPlacementBasedOnOrientation() {
+            if (this.ariaOrientation === ORIENTATION.HORIZONTAL) {
+                this.menuPopoverItems.forEach((node) => {
+                    node.setAttribute('placement', POPOVER_PLACEMENT.BOTTOM_START);
+                });
+            }
+            else {
+                this.menuPopoverItems.forEach((node) => {
+                    node.setAttribute('placement', POPOVER_PLACEMENT.RIGHT_START);
+                });
+            }
+        }
+        /**
+         * Updates the tabindex of the current index to -1 and the tabindex of the new index to 0,
+         * effectively setting the active element. This is used when navigating the menu via keyboard.
+         * @param menuItems - The list of menu items.
+         * @param currentIndex - The current index of the focused menu item.
+         * @param newIndex - The index of the new active element in the list.
+         */
+        updateTabIndexAndFocusNewIndex(menuItems, currentIndex, newIndex) {
+            var _a, _b, _c, _d;
+            if (newIndex < 0 || currentIndex < 0) {
+                return;
+            }
+            if (currentIndex === newIndex) {
+                (_a = menuItems[currentIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+                return;
+            }
+            (_b = menuItems[currentIndex]) === null || _b === void 0 ? void 0 : _b.setAttribute('tabindex', '-1');
+            (_c = menuItems[newIndex]) === null || _c === void 0 ? void 0 : _c.setAttribute('tabindex', '0');
+            (_d = menuItems[newIndex]) === null || _d === void 0 ? void 0 : _d.focus();
+        }
+        /**
+         * Checks if the given tag name is a valid menu tag name.
+         * @param tagName - The tag name to check.
+         * @returns True if the tag name is a valid menu, false otherwise.
+         */
+        isValidMenu(tagName) {
+            return ((tagName === null || tagName === void 0 ? void 0 : tagName.toLowerCase()) === MENU_TAGNAME
+                || (tagName === null || tagName === void 0 ? void 0 : tagName.toLowerCase()) === MENUBAR_TAGNAME);
+        }
+        /**
+         * Checks if the given tag name is a valid menu popover tag name.
+         * @param tagName - The tag name to check.
+         * @returns True if the tag name is a valid menu popover, false otherwise.
+         */
+        isValidPopover(tagName) {
+            return (tagName === null || tagName === void 0 ? void 0 : tagName.toLowerCase()) === MENUPOPOVER_TAGNAME;
+        }
+        /**
+         * Opens the popover at the given index if it exists.
+         * @param index - The index of the menu item to open the popover for.
+         * @returns True if the popover was opened, false if not.
+         */
+        openPopover(index) {
+            var _a, _b;
+            if (this.isValidPopover((_b = (_a = this.menuItems[index]) === null || _a === void 0 ? void 0 : _a.nextElementSibling) === null || _b === void 0 ? void 0 : _b.tagName)) {
+                const currentMenuId = this.menuItems[index].getAttribute('id');
+                const result = this.menuPopoverItems.findIndex((node) => node.getAttribute('triggerid') === currentMenuId);
+                if (result !== -1) {
+                    if (!this.menuPopoverItems[result].hasAttribute('visible')) {
+                        this.menuPopoverItems[result].toggleAttribute('visible');
+                    }
+                    this.setMenuBarPopoverValue(true);
+                    return true;
+                }
+            }
+            return false;
+        }
+        /**
+         * Navigates to the previous menu item and updates the tabindex of the current index
+         * to -1 and the tabindex of the new index to 0.
+         * @param currentIndex - The current index of the focused menu item.
+         * @param firstMenuIndex - The index of the first menu item.
+         * @param lastMenuIndex - The index of the last menu item.
+         * @param ariaOrientation - The orientation of the menu.
+         */
+        navigateToPrevMenuItem(currentIndex, firstMenuIndex, lastMenuIndex, ariaOrientation) {
+            const newIndex = currentIndex === firstMenuIndex ? lastMenuIndex : currentIndex - 1;
+            this.updateTabIndexAndFocusNewIndex(this.menuItems, currentIndex, newIndex);
+            // - if the isMenuPopoverOpen is true and orientation is horizontal, then we will open the popover.
+            if (this.isMenuPopoverOpen() && ariaOrientation === ORIENTATION.HORIZONTAL) {
+                this.openPopover(newIndex);
+            }
+        }
+        /**
+         * Navigates to the next menu item and updates the tabindex of the current index
+         * to -1 and the tabindex of the new index to 0.
+         * @param currentIndex - The current index of the focused menu item.
+         * @param firstMenuIndex - The index of the first menu item.
+         * @param lastMenuIndex - The index of the last menu item.
+         * @param ariaOrientation - The orientation of the menu.
+         */
+        navigateToNextMenuItem(currentIndex, firstMenuIndex, lastMenuIndex, ariaOrientation) {
+            const newIndex = currentIndex === lastMenuIndex ? firstMenuIndex : currentIndex + 1;
+            this.updateTabIndexAndFocusNewIndex(this.menuItems, currentIndex, newIndex);
+            // - if the isMenuPopoverOpen is true, then we will close all popovers recursively,
+            if (this.isMenuPopoverOpen() && ariaOrientation === ORIENTATION.HORIZONTAL) {
+                this.openPopover(newIndex);
+            }
+        }
+        /**
+         * Returns the parent menu item details for the given menu child id.
+         * It recursively traverses up the DOM tree until it finds a menu or menubar element.
+         * @param menuChildId - The id of the menu child element.
+         * @param menu - The current menu element to start traversing from.
+         * @returns An object containing the parent menu element and the menu child id.
+         */
+        getParentMenuItemDetails(menuChildId, menu) {
+            var _a, _b;
+            if (menu && this.isValidMenu(menu.tagName)) {
+                return { menu, menuChildId };
+            }
+            return this.getParentMenuItemDetails((_b = (_a = menu === null || menu === void 0 ? void 0 : menu.previousElementSibling) === null || _a === void 0 ? void 0 : _a.getAttribute('id')) !== null && _b !== void 0 ? _b : '', menu === null || menu === void 0 ? void 0 : menu.parentElement);
+        }
+        /**
+         * Recursively hides all the popovers up the DOM tree until it finds a menu or menubar element.
+         * @param menu - The current menu element to start traversing from.
+         */
+        hideAllPopovers(menu) {
+            if (this.isValidMenu(menu === null || menu === void 0 ? void 0 : menu.tagName)) {
+                return;
+            }
+            if (this.isValidPopover(menu === null || menu === void 0 ? void 0 : menu.tagName)) {
+                menu === null || menu === void 0 ? void 0 : menu.toggleAttribute('visible');
+            }
+            if (menu === null || menu === void 0 ? void 0 : menu.parentElement) {
+                this.hideAllPopovers(menu.parentElement);
+            }
+        }
+        /**
+         * Recursively navigates up the DOM tree until it finds the previous menu item
+         * and updates the tabindex of the current index to -1 and the tabindex of the new index to 0.
+         * Also opens the popover of the previous menu item.
+         * @param currentIndex - The current index of the focused menu item.
+         */
+        navigateToPrevParentMenuItem(currentIndex, key) {
+            var _a, _b, _c, _d, _e;
+            const parentMenuItem = (_a = this.menuItems[currentIndex].parentElement) === null || _a === void 0 ? void 0 : _a.previousElementSibling;
+            const parentMenuItemsChildren = Array.from(((_b = this.parentElement) === null || _b === void 0 ? void 0 : _b.children) || []).filter((node) => this.isValidMenuItem(node));
+            const parentMenuItemIndex = parentMenuItemsChildren.findIndex((node) => node === parentMenuItem);
+            let newIndex = parentMenuItemIndex;
+            if (key === KEYS.ARROW_LEFT && this.isValidMenu((_c = this.parentElement) === null || _c === void 0 ? void 0 : _c.tagName)) {
+                newIndex = parentMenuItemIndex - 1;
+            }
+            this.updateTabIndexAndFocusNewIndex(parentMenuItemsChildren, parentMenuItemIndex, newIndex);
+            if (key === KEYS.ARROW_LEFT) {
+                (_e = (_d = parentMenuItemsChildren[parentMenuItemIndex - 1]) === null || _d === void 0 ? void 0 : _d.nextElementSibling) === null || _e === void 0 ? void 0 : _e.toggleAttribute('visible');
+            }
+        }
+        /**
+         * Closes the current menu popover and navigates to the previous parent menu item.
+         * @param currentIndex - The current index of the focused menu item.
+         */
+        closePopoverAndNavigateToPrevParentMenuItem(currentIndex, key) {
+            // - close popover first
+            this.toggleAttribute('visible');
+            // - get parent menu item details and update the tab index to parent menu item.
+            this.navigateToPrevParentMenuItem(currentIndex, key);
+        }
+        /**
+         * Gets the parent menu contents of the given current menu item.
+         * It recursively traverses up the DOM tree until it finds the parent menu element
+         * and gets the parent menu item details and the children of the parent menu item.
+         * @param currentMenuItem - The current menu item to start traversing from.
+         * @returns An object containing the parent menu item details and the children of the parent menu item.
+         */
+        getParentMenuContents(currentMenuItem) {
+            var _a;
+            const parentMenuItemDetails = this.getParentMenuItemDetails('', currentMenuItem);
+            const parentMenuItemsChildren = Array.from(((_a = parentMenuItemDetails.menu) === null || _a === void 0 ? void 0 : _a.children) || []).filter((node) => this.isValidMenuItem(node));
+            return { parentMenuItemDetails, parentMenuItemsChildren };
+        }
+        /**
+         * Sets focus to the parent menu item of the given current menu item.
+         * It retrieves the parent menu item details and its children, then focuses
+         * on the menu item that matches the parent menu child ID.
+         * @param currentMenuItem - The current menu item from which to find and focus the parent menu item.
+         */
+        setFocusToParentMenuItem(currentMenuItem) {
+            var _a;
+            const { parentMenuItemDetails, parentMenuItemsChildren, } = this.getParentMenuContents(currentMenuItem);
+            // Only proceed if menuChildId is non-empty
+            if (parentMenuItemDetails === null || parentMenuItemDetails === void 0 ? void 0 : parentMenuItemDetails.menuChildId) {
+                const menuBarMenuItem = parentMenuItemsChildren.filter((node) => node.getAttribute('id') === parentMenuItemDetails.menuChildId);
+                (_a = menuBarMenuItem[0]) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+        }
+        /**
+         * Opens the popover of the next children menu item if there are children.
+         * If there are no children, then it closes all popovers recursively and
+         * navigates to the next menu item from the menu bar.
+         * If the parent menu item does not have any children, then we will go to the next menu item.
+         * @param currentIndex - The current index of the focused menu item.
+         */
+        openPopoverAndNavigateToNextChildrenMenuItem(currentIndex) {
+            var _a, _b;
+            if (this.openPopover(currentIndex)) {
+                return;
+            }
+            // - If there are no popovers to the right, then we will close all popovers recursively,
+            // and go the next menu item from the menu bar
+            this.hideAllPopovers(this.menuItems[currentIndex]);
+            // - get the top parent menu items using recursion.
+            const { parentMenuItemDetails, parentMenuItemsChildren, } = this.getParentMenuContents(this.menuItems[currentIndex]);
+            if (parentMenuItemsChildren.length === 0 || (parentMenuItemDetails === null || parentMenuItemDetails === void 0 ? void 0 : parentMenuItemDetails.menuChildId) === '') {
+                this.navigateToNextMenuItem(currentIndex, 0, this.menuItems.length - 1, this.ariaOrientation);
+                return;
+            }
+            const parentMenuItemIndex = parentMenuItemsChildren.findIndex((node) => node.getAttribute('id') === (parentMenuItemDetails === null || parentMenuItemDetails === void 0 ? void 0 : parentMenuItemDetails.menuChildId));
+            const newIndex = parentMenuItemIndex === -1 ? currentIndex + 1 : parentMenuItemIndex + 1;
+            this.updateTabIndexAndFocusNewIndex(parentMenuItemsChildren, parentMenuItemIndex, newIndex);
+            (_b = (_a = parentMenuItemsChildren[newIndex]) === null || _a === void 0 ? void 0 : _a.nextElementSibling) === null || _b === void 0 ? void 0 : _b.toggleAttribute('visible');
+        }
+        /**
+         * Checks if the given menu item is a valid menu item.
+         * @param menuItem - The menu item to check.
+         * @returns True if the menu item is a valid menu item, false otherwise.
+         */
+        isValidMenuItem(menuItem) {
+            var _a;
+            return [MENUITEM_TAGNAME, MENUITEMCHECKBOX_TAGNAME, MENUITEMRADIO_TAGNAME]
+                .includes((_a = menuItem.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase());
+        }
+        /**
+         * Handles the mouse click event on the menu items.
+         * Resets all the menu items tabindex to -1 and sets the tabindex of the
+         * element at the given index to 0, effectively setting the active
+         * element. This is used when clicking on the menu items.
+         * @param event - The mouse click event.
+         */
+        setTabIndexOnMouseClick(event) {
+            var _a;
+            const newIndex = this.getCurrentIndex(event.target);
+            this.resetTabIndexAndSetActiveTabIndex(newIndex);
+            (_a = this.menuItems[newIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        /**
+         * Resets all list items tabindex to -1 and sets the tabindex of the
+         * element at the given index to 0, effectively setting the active
+         * element. This is used when navigating the list via keyboard.
+         *
+         * @param newIndex - The index of the new active element in the list.
+         */
+        resetTabIndexAndSetActiveTabIndex(newIndex) {
+            this.menuItems.forEach((node, index) => {
+                const newTabindex = newIndex === index ? '0' : '-1';
+                node === null || node === void 0 ? void 0 : node.setAttribute('tabindex', newTabindex);
+            });
+        }
+        /**
+         * Handles the keydown event on the menu bar.
+         * The keys are as follows:
+         * - HOME: Sets focus to the first menu item.
+         * - END: Sets focus to the last menu item.
+         * - ARROW_LEFT:
+         *   - If orientation is horizontal, then it navigates to the previous menu item.
+         *   - If orientation is vertical, then it closes the popover of the current menu item and
+         *     navigates to the previous parent menu item.
+         * - ARROW_RIGHT:
+         *   - If orientation is horizontal, then it navigates to the next menu item.
+         *   - If orientation is vertical, then it opens the popover of the current menu item and
+         *     navigates to the next children menu item.
+         * - ARROW_UP:
+         *   - If orientation is horizontal, then it opens the popover of the current menu item.
+         *   - If orientation is vertical, then it navigates to the previous menu item.
+         * - ARROW_DOWN:
+         *   - If orientation is horizontal, then it opens the popover of the current menu item.
+         *   - If orientation is vertical, then it navigates to the next menu item.
+         * - SPACE:
+         * - ENTER:
+         *   - If the next element sibling is a menu popover, then it opens the popover of the current
+         *     menu item and navigates to the next children menu item.
+         *   - If the target element is a menu item, then it closes all popovers recursively and
+         *     navigates to the previous parent menu item.
+         * - ESCAPE:
+         *   - If a popover is already open then we close it and navigate to the parent menu item.
+         *   - If the current menuitem is a child of menubar, then we will set the value of isMenuPopoverOpen to false.,
+         * @param event - The keyboard event.
+         */
+        handleKeyDown(event) {
+            var _a, _b;
+            const firstMenuIndex = 0;
+            const lastMenuIndex = this.menuItems.length - 1;
+            const currentIndex = this.getCurrentIndex(event.target);
+            if (currentIndex === -1)
+                return;
+            switch (event.key) {
+                case KEYS.HOME:
+                    this.updateTabIndexAndFocusNewIndex(this.menuItems, currentIndex, firstMenuIndex);
+                    break;
+                case KEYS.END:
+                    this.updateTabIndexAndFocusNewIndex(this.menuItems, currentIndex, lastMenuIndex);
+                    break;
+                case KEYS.ARROW_LEFT: {
+                    if (this.ariaOrientation === ORIENTATION.HORIZONTAL) {
+                        this.navigateToPrevMenuItem(currentIndex, firstMenuIndex, lastMenuIndex, this.ariaOrientation);
+                    }
+                    if (this.ariaOrientation === ORIENTATION.VERTICAL) {
+                        this.closePopoverAndNavigateToPrevParentMenuItem(currentIndex, event.key);
+                    }
+                    break;
+                }
+                case KEYS.ARROW_RIGHT: {
+                    if (this.ariaOrientation === ORIENTATION.HORIZONTAL) {
+                        this.navigateToNextMenuItem(currentIndex, firstMenuIndex, lastMenuIndex, this.ariaOrientation);
+                    }
+                    if (this.ariaOrientation === ORIENTATION.VERTICAL) {
+                        this.openPopoverAndNavigateToNextChildrenMenuItem(currentIndex);
+                    }
+                    break;
+                }
+                case KEYS.ARROW_UP: {
+                    if (this.ariaOrientation === ORIENTATION.HORIZONTAL) {
+                        this.openPopover(currentIndex);
+                    }
+                    if (this.ariaOrientation === ORIENTATION.VERTICAL) {
+                        this.navigateToPrevMenuItem(currentIndex, firstMenuIndex, lastMenuIndex, this.ariaOrientation);
+                    }
+                    event.preventDefault();
+                    break;
+                }
+                case KEYS.ARROW_DOWN: {
+                    if (this.ariaOrientation === ORIENTATION.HORIZONTAL) {
+                        this.openPopover(currentIndex);
+                    }
+                    if (this.ariaOrientation === ORIENTATION.VERTICAL) {
+                        this.navigateToNextMenuItem(currentIndex, firstMenuIndex, lastMenuIndex, this.ariaOrientation);
+                    }
+                    event.preventDefault();
+                    break;
+                }
+                case KEYS.SPACE:
+                case KEYS.ENTER: {
+                    if (this.isValidPopover((_b = (_a = this.menuItems[currentIndex]) === null || _a === void 0 ? void 0 : _a.nextElementSibling) === null || _b === void 0 ? void 0 : _b.tagName)) {
+                        this.openPopoverAndNavigateToNextChildrenMenuItem(currentIndex);
+                    }
+                    else if (this.isValidMenuItem(event.target)) {
+                        this.setMenuBarPopoverValue(false);
+                        this.setFocusToParentMenuItem(this.menuItems[currentIndex]);
+                    }
+                    break;
+                }
+                case KEYS.ESCAPE: {
+                    this.setMenuBarPopoverValue(false);
+                    if (this.ariaOrientation === ORIENTATION.VERTICAL) {
+                        this.navigateToPrevParentMenuItem(currentIndex, event.key);
+                    }
+                    break;
+                }
+                default:
+                    break;
+            }
+        }
+        /**
+         * Closes all popovers except the current one.
+         * @param currentIndex - The index of the current menu item.
+         */
+        closeAllPopoversExceptCurrent(currentIndex) {
+            this.menuPopoverItems
+                .filter((node) => node !== this.menuItems[currentIndex])
+                .filter((node) => node.hasAttribute('visible'))
+                .forEach((node) => node.toggleAttribute('visible'));
+        }
+        /**
+         * Handles the mouse click event on the menu items.
+         * - If the menuitem has children, then it opens the popover of the next children menu item.
+         * - If the menuitem does not have children, then it closes all popovers recursively.
+         * @param event - The mouse click event.
+         */
+        handleMouseClick(event) {
+            var _a, _b;
+            const target = event.target;
+            const currentIndex = this.getCurrentIndex(target);
+            if (currentIndex === -1)
+                return;
+            if (this.isValidPopover((_b = (_a = this.menuItems[currentIndex]) === null || _a === void 0 ? void 0 : _a.nextElementSibling) === null || _b === void 0 ? void 0 : _b.tagName)) {
+                this.closeAllPopoversExceptCurrent(currentIndex);
+                this.openPopoverAndNavigateToNextChildrenMenuItem(currentIndex);
+            }
+            else if (this.isValidMenuItem(target)) {
+                this.hideAllPopovers(this.menuItems[currentIndex]);
+            }
+        }
+    }
+    __decorate([
+        property({ type: String, reflect: true, attribute: 'aria-orientation' }),
+        __metadata("design:type", String)
+    ], InnerMixinClass.prototype, "ariaOrientation", void 0);
+    __decorate([
+        queryAssignedElements({ selector: `${MENUPOPOVER_TAGNAME}:not([disabled])` }),
+        __metadata("design:type", Array)
+    ], InnerMixinClass.prototype, "menuPopoverItems", void 0);
+    // Cast return type to your mixin's interface intersected with the superClass type
+    return InnerMixinClass;
+};

package/package.json

@@ -41,5 +41,5 @@
     "lottie-web": "^5.12.2",
     "uuid": "^11.0.5"
   },
-  "version": "0.74.2"
+  "version": "0.74.4"
 }