@limetech/lime-elements 33.14.0-next.11 → 33.14.0-next.15

package/dist/collection/components/list/list.js

@@ -1,12 +1,9 @@
 import { MDCList } from '@material/list';
-import { MDCMenu } from '@material/menu';
 import { MDCRipple } from '@material/ripple';
 import { strings as listStrings } from '@material/list/constants';
-import { strings as menuStrings } from '@material/menu/constants';
 import { Component, Element, Event, h, Host, Prop, Watch, } from '@stencil/core';
 import { ListRenderer } from './list-renderer';
 const { ACTION_EVENT } = listStrings;
-const { SELECTED_EVENT } = menuStrings;
 /**
  * @exampleComponent limel-example-list
  * @exampleComponent limel-example-list-secondary
@@ -37,8 +34,81 @@ export class List {
     // eslint-disable-next-line no-magic-numbers
     this.maxLinesSecondaryText = 3;
     this.listRenderer = new ListRenderer();
-    this.handleAction = this.handleAction.bind(this);
-    this.handleMenuSelect = this.handleMenuSelect.bind(this);
+    this.setup = () => {
+      this.setupList();
+      this.setupListeners();
+    };
+    this.setupList = () => {
+      const element = this.element.shadowRoot.querySelector('.mdc-deprecated-list');
+      if (!element) {
+        return;
+      }
+      this.mdcList = new MDCList(element);
+      this.mdcList.listElements.forEach((item) => new MDCRipple(item));
+    };
+    this.setupListeners = () => {
+      if (!this.mdcList) {
+        return;
+      }
+      this.mdcList.unlisten(ACTION_EVENT, this.handleAction);
+      this.selectable = ['selectable', 'radio', 'checkbox'].includes(this.type);
+      this.multiple = this.type === 'checkbox';
+      if (!this.selectable) {
+        return;
+      }
+      this.mdcList.listen(ACTION_EVENT, this.handleAction);
+      this.mdcList.singleSelection = !this.multiple;
+    };
+    this.teardown = () => {
+      var _a, _b;
+      (_a = this.mdcList) === null || _a === void 0 ? void 0 : _a.unlisten(ACTION_EVENT, this.handleAction);
+      (_b = this.mdcList) === null || _b === void 0 ? void 0 : _b.destroy();
+    };
+    this.handleAction = (event) => {
+      if (!this.multiple) {
+        this.handleSingleSelect(event.detail.index);
+        return;
+      }
+      this.handleMultiSelect(event.detail.index);
+    };
+    this.handleSingleSelect = (index) => {
+      const listItems = this.items.filter(this.isListItem);
+      if (listItems[index].disabled) {
+        return;
+      }
+      const selectedItem = listItems.find((item) => {
+        return !!item.selected;
+      });
+      if (selectedItem) {
+        this.change.emit(Object.assign(Object.assign({}, selectedItem), { selected: false }));
+      }
+      if (listItems[index] !== selectedItem) {
+        this.change.emit(Object.assign(Object.assign({}, listItems[index]), { selected: true }));
+      }
+    };
+    this.handleMultiSelect = (index) => {
+      const listItems = this.items.filter(this.isListItem);
+      if (listItems[index].disabled) {
+        return;
+      }
+      const selectedItems = listItems
+        .filter((item, listIndex) => {
+        if (listIndex === index) {
+          // This is the item that was selected or deselected,
+          // so we negate its previous selection status.
+          return !item.selected;
+        }
+        // This is an item that didn't change, so we keep its selection status.
+        return item.selected;
+      })
+        .map((item) => {
+        return Object.assign(Object.assign({}, item), { selected: true });
+      });
+      this.change.emit(selectedItems);
+    };
+    this.isListItem = (item) => {
+      return !('separator' in item);
+    };
   }
   connectedCallback() {
     this.setup();
@@ -61,9 +131,6 @@ export class List {
       maxLinesSecondaryText = 1;
     }
     const html = this.listRenderer.render(this.items, this.config);
-    if (this.type === 'menu') {
-      return h("div", { class: "mdc-menu mdc-menu-surface" }, html);
-    }
     return (h(Host, { style: {
         '--maxLinesSecondaryText': `${maxLinesSecondaryText}`,
       } }, html));
@@ -84,121 +151,6 @@ export class List {
       .filter((item) => item.selected)
       .map((item) => listItems.indexOf(item));
   }
-  setup() {
-    if (this.type === 'menu') {
-      this.setupMenu();
-    }
-    else {
-      this.setupList();
-    }
-    this.setupListeners();
-  }
-  setupList() {
-    const element = this.element.shadowRoot.querySelector('.mdc-deprecated-list');
-    if (!element) {
-      return;
-    }
-    this.mdcList = new MDCList(element);
-    this.mdcList.listElements.forEach((item) => new MDCRipple(item));
-  }
-  setupMenu() {
-    const element = this.element.shadowRoot.querySelector('.mdc-menu');
-    if (!element) {
-      return;
-    }
-    this.mdcMenu = new MDCMenu(element);
-    this.mdcMenu.hasTypeahead = true;
-    this.mdcMenu.wrapFocus = true;
-    this.mdcMenu.items.forEach((item) => new MDCRipple(item));
-  }
-  setupListeners() {
-    if (this.type === 'menu') {
-      this.setupMenuListeners();
-    }
-    else {
-      this.setupListListeners();
-    }
-  }
-  setupListListeners() {
-    if (!this.mdcList) {
-      return;
-    }
-    this.mdcList.unlisten(ACTION_EVENT, this.handleAction);
-    this.selectable = ['selectable', 'radio', 'checkbox', 'menu'].includes(this.type);
-    this.multiple = this.type === 'checkbox';
-    if (!this.selectable) {
-      return;
-    }
-    this.mdcList.listen(ACTION_EVENT, this.handleAction);
-    this.mdcList.singleSelection = !this.multiple;
-  }
-  setupMenuListeners() {
-    if (!this.mdcMenu) {
-      return;
-    }
-    this.mdcMenu.unlisten(SELECTED_EVENT, this.handleMenuSelect);
-    this.selectable = true;
-    this.mdcMenu.listen(SELECTED_EVENT, this.handleMenuSelect);
-  }
-  teardown() {
-    var _a, _b, _c, _d;
-    (_a = this.mdcList) === null || _a === void 0 ? void 0 : _a.unlisten(ACTION_EVENT, this.handleAction);
-    (_b = this.mdcList) === null || _b === void 0 ? void 0 : _b.destroy();
-    (_c = this.mdcMenu) === null || _c === void 0 ? void 0 : _c.unlisten(SELECTED_EVENT, this.handleMenuSelect);
-    (_d = this.mdcMenu) === null || _d === void 0 ? void 0 : _d.destroy();
-  }
-  handleAction(event) {
-    if (!this.multiple) {
-      this.handleSingleSelect(event.detail.index);
-      return;
-    }
-    this.handleMultiSelect(event.detail.index);
-  }
-  handleMenuSelect(event) {
-    this.handleSingleSelect(event.detail.index);
-  }
-  handleSingleSelect(index) {
-    const listItems = this.items.filter(this.isListItem);
-    if (listItems[index].disabled) {
-      return;
-    }
-    const selectedItem = listItems.find((item) => {
-      return !!item.selected;
-    });
-    if (selectedItem) {
-      this.change.emit(Object.assign(Object.assign({}, selectedItem), { selected: false }));
-    }
-    if (listItems[index] !== selectedItem) {
-      if (this.type === 'menu') {
-        this.change.emit(Object.assign(Object.assign({}, listItems[index]), { selected: false }));
-        return;
-      }
-      this.change.emit(Object.assign(Object.assign({}, listItems[index]), { selected: true }));
-    }
-  }
-  handleMultiSelect(index) {
-    const listItems = this.items.filter(this.isListItem);
-    if (listItems[index].disabled) {
-      return;
-    }
-    const selectedItems = listItems
-      .filter((item, listIndex) => {
-      if (listIndex === index) {
-        // This is the item that was selected or deselected,
-        // so we negate its previous selection status.
-        return !item.selected;
-      }
-      // This is an item that didn't change, so we keep its selection status.
-      return item.selected;
-    })
-      .map((item) => {
-      return Object.assign(Object.assign({}, item), { selected: true });
-    });
-    this.change.emit(selectedItems);
-  }
-  isListItem(item) {
-    return !('separator' in item);
-  }
   static get is() { return "limel-list"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
@@ -280,7 +232,7 @@ export class List {
       "mutable": false,
       "complexType": {
         "original": "ListType",
-        "resolved": "\"checkbox\" | \"menu\" | \"radio\" | \"selectable\"",
+        "resolved": "\"checkbox\" | \"radio\" | \"selectable\"",
         "references": {
           "ListType": {
             "location": "import",
@@ -292,7 +244,7 @@ export class List {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The type of the list, omit to get a regular list. Available types are:\n`selectable`: regular list with single selection.\n`radio`: radio button list with single selection.\n`checkbox`: checkbox list with multiple selection.\n`menu`: menu list with single selection."
+        "text": "The type of the list, omit to get a regular list. Available types are:\n`selectable`: regular list with single selection.\n`radio`: radio button list with single selection.\n`checkbox`: checkbox list with multiple selection."
       },
       "attribute": "type",
       "reflect": false

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"; }
@@ -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"
           }
         }
       },
@@ -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)));
+  }
+}