@limetech/lime-elements 33.14.0-next.12 → 33.14.0-next.16

package/dist/collection/components/menu/menu.js

@@ -97,8 +97,8 @@ export class Menu {
       var _a;
       const activeElement = this.list.shadowRoot.activeElement;
       activeElement === null || activeElement === void 0 ? void 0 : activeElement.blur();
-      const listItems = this.items.filter(this.isListItem);
-      const selectedIndex = Math.max(listItems.findIndex((item) => item.selected), 0);
+      const MenuItems = this.items.filter(this.isMenuItem);
+      const selectedIndex = Math.max(MenuItems.findIndex((item) => item.selected), 0);
       const menuElements = Array.from(this.list.shadowRoot.querySelectorAll('[role="menuitem"]'));
       (_a = menuElements[selectedIndex]) === null || _a === void 0 ? void 0 : _a.focus();
     };
@@ -131,7 +131,7 @@ export class Menu {
       h("slot", { name: "trigger" }, this.renderTrigger()),
       h("limel-portal", { class: portalClasses, style: portalPosition, visible: this.open, containerId: this.portalId, openDirection: this.openDirection, position: this.fixed ? 'fixed' : 'absolute', containerStyle: { 'z-index': dropdownZIndex } },
         h("limel-menu-surface", { open: this.open, onDismiss: this.onClose, style: cssProperties },
-          h("limel-list", { class: {
+          h("limel-menu-list", { class: {
               'has-grid-layout has-interactive-items': this.gridLayout,
             }, items: this.items, type: "menu", badgeIcons: this.badgeIcons, onChange: this.onListChange, ref: this.setListElement })))));
   }
@@ -173,7 +173,7 @@ export class Menu {
     });
     return zipObject(propertyNames, values);
   }
-  isListItem(item) {
+  isMenuItem(item) {
     return !('separator' in item);
   }
   static get is() { return "limel-menu"; }
@@ -197,8 +197,8 @@ export class Menu {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Use with default trigger has been deprecated.\nPlease supply your own trigger element.",
-            "name": "deprecated"
+            "name": "deprecated",
+            "text": "Use with default trigger has been deprecated.\nPlease supply your own trigger element."
           }],
         "text": "Is displayed on the default trigger button."
       },
@@ -218,7 +218,7 @@ export class Menu {
           },
           "MenuItem": {
             "location": "import",
-            "path": "./menu.types"
+            "path": "@limetech/lime-elements"
           },
           "ListSeparator": {
             "location": "import",
@@ -261,7 +261,7 @@ export class Menu {
         "references": {
           "OpenDirection": {
             "location": "import",
-            "path": "./menu.types"
+            "path": "@limetech/lime-elements"
           }
         }
       },
@@ -341,8 +341,8 @@ export class Menu {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Fixed position was used to get around a bug in the placement\nof the menu. This bug has since been fixed, which makes this attribute\nobsolete.",
-            "name": "deprecated"
+            "name": "deprecated",
+            "text": "Fixed position was used to get around a bug in the placement\nof the menu. This bug has since been fixed, which makes this attribute\nobsolete."
           }],
         "text": "Defines whether the menu should have a fixed position on the screen."
       },
@@ -377,10 +377,10 @@ export class Menu {
         "text": "Is emitted when a menu item is selected."
       },
       "complexType": {
-        "original": "ListItem | ListItem[]",
-        "resolved": "ListItem<any> | ListItem<any>[]",
+        "original": "MenuItem | MenuItem[]",
+        "resolved": "MenuItem<any> | MenuItem<any>[]",
         "references": {
-          "ListItem": {
+          "MenuItem": {
             "location": "import",
             "path": "@limetech/lime-elements"
           }

package/dist/collection/components/menu-list/menu-list-renderer-config.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/menu-list/menu-list-renderer.js

@@ -0,0 +1,158 @@
+import { h } from '@stencil/core';
+export class MenuListRenderer {
+  constructor() {
+    this.defaultConfig = {
+      isOpen: true,
+      badgeIcons: false,
+    };
+    /**
+     * Determine which MenuItem should have the `tab-index` attribute set,
+     * and return the index at which that MenuItem is located in `items`.
+     * Returns `undefined` if no item should have the attribute set.
+     * See https://github.com/material-components/material-components-web/tree/e66a43a75fef4f9179e24856649518e15e279a04/packages/mdc-list#accessibility
+     *
+     * @param {Array<ListSeparator | MenuItems>} items the items of the list, including any `ListSeparator`:s
+     * @returns {number} the index as per the description
+     */
+    this.getIndexForWhichToApplyTabIndex = (items) => {
+      let result;
+      for (let i = 0, max = items.length; i < max; i += 1) {
+        if ('separator' in items[i]) {
+          // Ignore ListSeparator
+        }
+        else {
+          const item = items[i];
+          if (item.selected) {
+            result = i;
+            break;
+          }
+          if (result === undefined && !item.disabled) {
+            result = i;
+            // Do NOT break, as any later item with
+            // `selected=true` should get the tab-index instead!
+          }
+        }
+      }
+      return result;
+    };
+    /**
+     * Render a single list item
+     *
+     * @param {ListSeparator | MenuItems} item the item to render
+     * @param {number} index the index the item had in the `items` array
+     * @returns {HTMLElement} the list item
+     */
+    this.renderMenuItem = (item, index) => {
+      if ('separator' in item) {
+        return h("li", { class: "mdc-deprecated-list-divider", role: "separator" });
+      }
+      const classNames = {
+        'mdc-deprecated-list-item': true,
+        'mdc-deprecated-list-item--disabled': item.disabled,
+        'mdc-deprecated-list-item--selected': item.selected,
+      };
+      const attributes = {};
+      if (index === this.applyTabIndexToItemAtIndex) {
+        attributes.tabindex = '0';
+      }
+      return (h("li", Object.assign({ class: classNames, role: "menuitem", "aria-disabled": item.disabled ? 'true' : 'false', "aria-selected": item.selected ? 'true' : 'false', "data-index": index }, attributes),
+        item.icon ? this.renderIcon(this.config, item) : null,
+        this.renderText(item),
+        this.twoLines && this.avatarList ? this.renderDivider() : null,
+        this.renderActionMenu(item.actions)));
+    };
+    /**
+     * Render the text of the list item
+     *
+     * @param {MenuItem} item the list item
+     * @returns {HTMLElement | string} the text for the list item
+     */
+    this.renderText = (item) => {
+      if (this.isSimpleItem(item)) {
+        return (h("span", { class: "mdc-deprecated-list-item__text" }, item.text));
+      }
+      return (h("div", { class: "mdc-deprecated-list-item__text" },
+        h("div", { class: "mdc-deprecated-list-item__primary-command-text" },
+          h("div", { class: "mdc-deprecated-list-item__primary-text" }, item.text),
+          this.renderCommandText(item)),
+        h("div", { class: "mdc-deprecated-list-item__secondary-text" }, item.secondaryText)));
+    };
+    this.renderCommandText = (item) => {
+      if (!('commandText' in item)) {
+        return;
+      }
+      return (h("div", { class: "mdc-deprecated-list-item__command-text" }, item.commandText));
+    };
+    this.isSimpleItem = (item) => {
+      if ('commandText' in item) {
+        return false;
+      }
+      if ('secondaryText' in item) {
+        return false;
+      }
+      return true;
+    };
+    /**
+     * Render an icon for a list item
+     *
+     * @param {MenuListRendererConfig} config the config object, passed on from the `renderMenuItem` function
+     * @param {MenuItem} item the list item
+     * @returns {HTMLElement} the icon element
+     */
+    this.renderIcon = (config, item) => {
+      const style = {};
+      if (item.iconColor) {
+        if (config.badgeIcons) {
+          style['--icon-background-color'] = item.iconColor;
+        }
+        else {
+          style.color = item.iconColor;
+        }
+      }
+      return (h("limel-icon", { badge: config.badgeIcons, class: "mdc-deprecated-list-item__graphic", name: item.icon, style: style, size: config.iconSize }));
+    };
+    this.renderDivider = () => {
+      const classes = {
+        'mdc-deprecated-list-divider': true,
+        'mdc-deprecated-list-divider--inset': true,
+      };
+      if (this.config.iconSize) {
+        classes[this.config.iconSize] = true;
+      }
+      return h("hr", { class: classes });
+    };
+    this.renderActionMenu = (actions) => {
+      if (!actions || actions.length === 0) {
+        return;
+      }
+      return (h("limel-menu", { class: "mdc-deprecated-list-item__meta", items: actions, openDirection: "left" },
+        h("limel-icon", { slot: "trigger", name: "menu_2", size: "small" })));
+    };
+  }
+  render(items, config = {}) {
+    items = items || [];
+    this.config = Object.assign(Object.assign({}, this.defaultConfig), config);
+    this.twoLines = items.some((item) => {
+      return 'secondaryText' in item && !!item.secondaryText;
+    });
+    this.commandKey = items.some((item) => {
+      return 'commandText' in item && !!item.commandText;
+    });
+    this.hasIcons = items.some((item) => {
+      return 'icon' in item && !!item.icon;
+    });
+    this.avatarList = this.config.badgeIcons && this.hasIcons;
+    this.applyTabIndexToItemAtIndex =
+      this.getIndexForWhichToApplyTabIndex(items);
+    const classNames = {
+      'mdc-deprecated-list': true,
+      'mdc-deprecated-list--two-line': this.twoLines,
+      selectable: true,
+      'mdc-deprecated-list--avatar-list': this.avatarList,
+      'list--compact': this.twoLines &&
+        this.commandKey &&
+        ['small', 'x-small'].includes(this.config.iconSize),
+    };
+    return (h("ul", { class: classNames, "aria-hidden": true, role: "menu", "aria-orientation": "vertical" }, items.map(this.renderMenuItem)));
+  }
+}