@limetech/lime-elements 36.0.0-next.9 → 36.1.0-dev.1

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

@@ -1,4 +1,4 @@
-import { Component, Event, h, Prop, Element, Watch, } from '@stencil/core';
+import { h, } from '@stencil/core';
 import { createRandomString } from '../../util/random-string';
 import { zipObject } from 'lodash-es';
 /**
@@ -15,30 +15,6 @@ import { zipObject } from 'lodash-es';
  */
 export class Menu {
   constructor() {
-    /**
-     * A list of items and separators to show in the menu.
-     */
-    this.items = [];
-    /**
-     * Sets the disabled state of the menu.
-     */
-    this.disabled = false;
-    /**
-     * Decides the menu's location in relation to its trigger
-     */
-    this.openDirection = 'bottom-start';
-    /**
-     * Sets the open state of the menu.
-     */
-    this.open = false;
-    /**
-     * Defines whether the menu should show badges.
-     */
-    this.badgeIcons = false;
-    /**
-     * Renders list items in a grid layout, rather than a vertical list
-     */
-    this.gridLayout = false;
     this.setTriggerAttributes = (element) => {
       const attributes = {
         'aria-haspopup': true,
@@ -66,13 +42,8 @@ export class Menu {
       }
       this.open = !this.open;
     };
-    this.onListChange = (event) => {
-      this.items = this.items.map((item) => {
-        if (item === event.detail) {
-          return event.detail;
-        }
-        return item;
-      });
+    this.handleSelect = (event) => {
+      event.stopPropagation();
       this.select.emit(event.detail);
       this.open = false;
     };
@@ -88,14 +59,14 @@ export class Menu {
       const menuElements = Array.from(this.list.shadowRoot.querySelectorAll('[role="menuitem"]'));
       (_a = menuElements[selectedIndex]) === null || _a === void 0 ? void 0 : _a.focus();
     };
+    this.items = [];
+    this.disabled = false;
+    this.openDirection = 'bottom-start';
+    this.open = false;
+    this.badgeIcons = false;
+    this.gridLayout = false;
     this.portalId = createRandomString();
   }
-  componentDidLoad() {
-    if (!this.host.querySelector('[slot="trigger"]')) {
-      // eslint-disable-next-line no-console
-      console.warn('Using limel-menu with the default trigger is deprecated. Please provide your own trigger element.');
-    }
-  }
   openWatcher() {
     if (!this.open) {
       return;
@@ -109,15 +80,11 @@ export class Menu {
   render() {
     const cssProperties = this.getCssProperties();
     const dropdownZIndex = getComputedStyle(this.host).getPropertyValue('--dropdown-z-index');
-    return (h("div", { class: "mdc-menu-surface--anchor", onClick: this.onTriggerClick },
-      h("slot", { name: "trigger" }),
-      h("limel-portal", { visible: this.open, containerId: this.portalId, openDirection: this.openDirection, position: "absolute", containerStyle: { 'z-index': dropdownZIndex } },
-        h("limel-menu-surface", { open: this.open, onDismiss: this.onClose, style: cssProperties, class: {
-            'has-grid-layout': this.gridLayout,
-          } },
-          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 })))));
+    return (h("div", { class: "mdc-menu-surface--anchor", onClick: this.onTriggerClick }, h("slot", { name: "trigger" }), h("limel-portal", { visible: this.open, containerId: this.portalId, openDirection: this.openDirection, position: "absolute", containerStyle: { 'z-index': dropdownZIndex } }, h("limel-menu-surface", { open: this.open, onDismiss: this.onClose, style: cssProperties, class: {
+        'has-grid-layout': this.gridLayout,
+      } }, h("limel-menu-list", { class: {
+        'has-grid-layout has-interactive-items': this.gridLayout,
+      }, items: this.items, type: "menu", badgeIcons: this.badgeIcons, onSelect: this.handleSelect, ref: this.setListElement })))));
   }
   componentDidRender() {
     const slotElement = this.host.shadowRoot.querySelector('slot');
@@ -141,176 +108,186 @@ export class Menu {
   }
   static get is() { return "limel-menu"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["menu.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["menu.css"]
-  }; }
-  static get properties() { return {
-    "items": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "Array<MenuItem | ListSeparator>",
-        "resolved": "(ListSeparator | MenuItem<any>)[]",
-        "references": {
-          "Array": {
-            "location": "global"
-          },
-          "MenuItem": {
-            "location": "import",
-            "path": "@limetech/lime-elements"
-          },
-          "ListSeparator": {
-            "location": "import",
-            "path": "@limetech/lime-elements"
+  static get originalStyleUrls() {
+    return {
+      "$": ["menu.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["menu.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "items": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Array<MenuItem | ListSeparator>",
+          "resolved": "(MenuItem<any> | ListSeparator)[]",
+          "references": {
+            "Array": {
+              "location": "global"
+            },
+            "MenuItem": {
+              "location": "import",
+              "path": "@limetech/lime-elements"
+            },
+            "ListSeparator": {
+              "location": "import",
+              "path": "@limetech/lime-elements"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "A list of items and separators to show in the menu."
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "A list of items and separators to show in the menu."
+        },
+        "defaultValue": "[]"
       },
-      "defaultValue": "[]"
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sets the disabled state of the menu."
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Sets the disabled state of the menu."
-      },
-      "attribute": "disabled",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "openDirection": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "OpenDirection",
-        "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
-        "references": {
-          "OpenDirection": {
-            "location": "import",
-            "path": "@limetech/lime-elements"
+      "openDirection": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "OpenDirection",
+          "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+          "references": {
+            "OpenDirection": {
+              "location": "import",
+              "path": "@limetech/lime-elements"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Decides the menu's location in relation to its trigger"
-      },
-      "attribute": "open-direction",
-      "reflect": true,
-      "defaultValue": "'bottom-start'"
-    },
-    "open": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Sets the open state of the menu."
-      },
-      "attribute": "open",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "badgeIcons": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Defines whether the menu should show badges."
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Decides the menu's location in relation to its trigger"
+        },
+        "attribute": "open-direction",
+        "reflect": true,
+        "defaultValue": "'bottom-start'"
       },
-      "attribute": "badge-icons",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "gridLayout": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "open": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sets the open state of the menu."
+        },
+        "attribute": "open",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Renders list items in a grid layout, rather than a vertical list"
+      "badgeIcons": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Defines whether the menu should show badges."
+        },
+        "attribute": "badge-icons",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "attribute": "grid-layout",
-      "reflect": true,
-      "defaultValue": "false"
-    }
-  }; }
-  static get events() { return [{
-      "method": "cancel",
-      "name": "cancel",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Is emitted when the menu is cancelled."
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
+      "gridLayout": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Renders list items in a grid layout, rather than a vertical list"
+        },
+        "attribute": "grid-layout",
+        "reflect": true,
+        "defaultValue": "false"
       }
-    }, {
-      "method": "select",
-      "name": "select",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Is emitted when a menu item is selected."
-      },
-      "complexType": {
-        "original": "MenuItem | MenuItem[]",
-        "resolved": "MenuItem<any> | MenuItem<any>[]",
-        "references": {
-          "MenuItem": {
-            "location": "import",
-            "path": "@limetech/lime-elements"
+    };
+  }
+  static get events() {
+    return [{
+        "method": "cancel",
+        "name": "cancel",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Is emitted when the menu is cancelled."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "select",
+        "name": "select",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Is emitted when a menu item is selected."
+        },
+        "complexType": {
+          "original": "MenuItem | MenuItem[]",
+          "resolved": "MenuItem<any> | MenuItem<any>[]",
+          "references": {
+            "MenuItem": {
+              "location": "import",
+              "path": "@limetech/lime-elements"
+            }
           }
         }
-      }
-    }]; }
+      }];
+  }
   static get elementRef() { return "host"; }
-  static get watchers() { return [{
-      "propName": "open",
-      "methodName": "openWatcher"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "open",
+        "methodName": "openWatcher"
+      }];
+  }
 }

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

@@ -55,10 +55,7 @@ export class MenuListRenderer {
       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));
+      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));
     };
     /**
      * Render the text of the list item
@@ -70,11 +67,7 @@ export class MenuListRenderer {
       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)));
+      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)) {