@limetech/lime-elements 36.1.0-next.9 → 36.1.0

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,
@@ -83,6 +59,12 @@ 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();
   }
   openWatcher() {
@@ -98,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, onSelect: this.handleSelect, 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');
@@ -130,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."
+        },
+        "defaultValue": "[]"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "A list of items and separators to show in the menu."
+      "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"
       },
-      "defaultValue": "[]"
-    },
-    "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"
-    },
-    "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": "Decides the menu's location in relation to its trigger"
+        },
+        "attribute": "open-direction",
+        "reflect": true,
+        "defaultValue": "'bottom-start'"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Sets the open state of the menu."
+      "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"
       },
-      "attribute": "open",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "badgeIcons": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "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"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Defines whether the menu should show badges."
-      },
-      "attribute": "badge-icons",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "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"
-    }
-  }; }
-  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)) {

package/dist/collection/components/menu-list/menu-list.css

@@ -3816,9 +3816,14 @@ a.mdc-list-item {
   border-radius: 0.375rem;
 }
 .mdc-deprecated-list .mdc-deprecated-list-item {
+  transition: background-color 0.2s ease;
   box-sizing: border-box;
   z-index: 0;
 }
+.mdc-deprecated-list .mdc-deprecated-list-item:not(.mdc-deprecated-list-item--disabled):hover {
+  background-color: rgb(var(--contrast-300));
+  z-index: 1;
+}
 .mdc-deprecated-list .mdc-deprecated-list-item.mdc-deprecated-list-item--disabled {
   cursor: not-allowed;
 }
@@ -3931,132 +3936,22 @@ a.mdc-list-item {
   margin-right: 0.75rem;
 }
 
-.mdc-deprecated-list-item.mdc-ripple-upgraded {
-  --mdc-ripple-fg-size: 0;
-  --mdc-ripple-left: 0;
-  --mdc-ripple-top: 0;
-  --mdc-ripple-fg-scale: 1;
-  --mdc-ripple-fg-translate-end: 0;
-  --mdc-ripple-fg-translate-start: 0;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  will-change: transform, opacity;
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded::before, .mdc-deprecated-list-item.mdc-ripple-upgraded::after {
-  position: absolute;
-  border-radius: 50%;
-  opacity: 0;
-  pointer-events: none;
-  content: "";
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded::before {
-  transition: opacity 15ms linear, background-color 15ms linear;
-  z-index: 1;
-  /* @alternate */
-  z-index: var(--mdc-ripple-z-index, 1);
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded::after {
-  z-index: 0;
-  /* @alternate */
-  z-index: var(--mdc-ripple-z-index, 0);
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded.mdc-ripple-upgraded::before {
-  transform: scale(var(--mdc-ripple-fg-scale, 1));
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded.mdc-ripple-upgraded::after {
-  top: 0;
-  /* @noflip */
-  /*rtl:ignore*/
-  left: 0;
-  transform: scale(0);
-  transform-origin: center center;
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded.mdc-ripple-upgraded--unbounded::after {
-  top: var(--mdc-ripple-top, 0);
-  /* @noflip */
-  /*rtl:ignore*/
-  left: var(--mdc-ripple-left, 0);
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded.mdc-ripple-upgraded--foreground-activation::after {
-  animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded.mdc-ripple-upgraded--foreground-deactivation::after {
-  animation: mdc-ripple-fg-opacity-out 150ms;
-  transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded::before, .mdc-deprecated-list-item.mdc-ripple-upgraded::after {
-  top: calc(50% - 100%);
-  /* @noflip */
-  /*rtl:ignore*/
-  left: calc(50% - 100%);
-  width: 200%;
-  height: 200%;
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded.mdc-ripple-upgraded::after {
-  width: var(--mdc-ripple-fg-size, 100%);
-  height: var(--mdc-ripple-fg-size, 100%);
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded::before, .mdc-deprecated-list-item.mdc-ripple-upgraded::after {
-  background-color: #000;
-  /* @alternate */
-  background-color: var(--mdc-ripple-color, #000);
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded:hover::before, .mdc-deprecated-list-item.mdc-ripple-upgraded.mdc-ripple-surface--hover::before {
-  opacity: 0.04;
-  /* @alternate */
-  opacity: var(--mdc-ripple-hover-opacity, 0.04);
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded.mdc-ripple-upgraded--background-focused::before, .mdc-deprecated-list-item.mdc-ripple-upgraded:not(.mdc-ripple-upgraded):focus::before {
-  transition-duration: 75ms;
-  opacity: 0.12;
-  /* @alternate */
-  opacity: var(--mdc-ripple-focus-opacity, 0.12);
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded:not(.mdc-ripple-upgraded)::after {
-  transition: opacity 150ms linear;
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded:not(.mdc-ripple-upgraded):active::after {
-  transition-duration: 75ms;
-  opacity: 0.12;
-  /* @alternate */
-  opacity: var(--mdc-ripple-press-opacity, 0.12);
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded.mdc-ripple-upgraded {
-  --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12);
-}
-
-.mdc-deprecated-list-item--selected .mdc-deprecated-list-item__text:before {
-  content: "";
+.mdc-deprecated-list-item.mdc-deprecated-list-item--selected:before {
   background-color: var(--mdc-theme-primary);
-  position: absolute;
-  inset: 0;
   opacity: 0.15;
-  pointer-events: none;
 }
 
-@keyframes fade-out-focus-style {
-  0% {
-    opacity: 0.12;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-:not(.mdc-deprecated-list--non-interactive) > :not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item.mdc-ripple-upgraded--background-focused::before, :not(.mdc-deprecated-list--non-interactive) > :not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item:not(.mdc-ripple-upgraded):focus::before {
-  animation: fade-out-focus-style 1s ease forwards;
+:not(.mdc-deprecated-list--non-interactive) > :not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item:focus {
+  outline: none;
 }
 :not(.mdc-deprecated-list--non-interactive) > :not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item:focus-visible {
+  outline: none;
   box-shadow: var(--shadow-depth-8-focused);
+}
+:not(.mdc-deprecated-list--non-interactive) > :not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item:focus-visible {
   border-radius: 0.375rem;
   z-index: 1;
 }
-:not(.mdc-deprecated-list--non-interactive) > :not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item:focus-visible:before {
-  animation-duration: 0s !important;
-}
-:not(.mdc-deprecated-list--non-interactive) > :not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item:before {
-  transition: opacity, background-color;
-  transition-duration: 0.2s;
-  transition-timing-function: ease;
-}
 
 /*
  * This file is imported into every component!