@limetech/lime-elements 33.14.0-next.8 → 34.0.0-next.3

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

@@ -0,0 +1,274 @@
+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, Prop, Watch, } from '@stencil/core';
+import { MenuListRenderer } from './menu-list-renderer';
+const { ACTION_EVENT } = listStrings;
+const { SELECTED_EVENT } = menuStrings;
+/**
+ * @private
+ */
+export class MenuList {
+  constructor() {
+    /**
+     * Size of the icons in the list
+     */
+    this.iconSize = 'small';
+    /**
+     * By default, lists will display 3 lines of text, and then truncate the rest.
+     * Consumers can increase or decrease this number by specifying
+     * `maxLinesSecondaryText`. If consumer enters zero or negative
+     * numbers we default to 1; and if they type decimals we round up.
+     */
+    // eslint-disable-next-line no-magic-numbers
+    this.maxLinesSecondaryText = 3;
+    this.MenuListRenderer = new MenuListRenderer();
+    this.setup = () => {
+      this.setupMenu();
+      this.setupListeners();
+    };
+    this.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));
+    };
+    this.setupListeners = () => {
+      if (!this.mdcMenu) {
+        return;
+      }
+      this.mdcMenu.unlisten(SELECTED_EVENT, this.handleMenuSelect);
+      this.mdcMenu.listen(SELECTED_EVENT, this.handleMenuSelect);
+    };
+    this.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();
+    };
+    this.handleAction = (event) => {
+      this.handleSingleSelect(event.detail.index);
+    };
+    this.handleMenuSelect = (event) => {
+      this.handleSingleSelect(event.detail.index);
+    };
+    this.handleSingleSelect = (index) => {
+      const MenuItems = this.items.filter(this.isMenuItem);
+      if (MenuItems[index].disabled) {
+        return;
+      }
+      const selectedItem = MenuItems.find((item) => {
+        return !!item.selected;
+      });
+      if (selectedItem) {
+        this.change.emit(Object.assign(Object.assign({}, selectedItem), { selected: false }));
+      }
+      if (MenuItems[index] !== selectedItem) {
+        this.change.emit(Object.assign(Object.assign({}, MenuItems[index]), { selected: false }));
+      }
+    };
+    this.isMenuItem = (item) => {
+      return !('separator' in item);
+    };
+  }
+  connectedCallback() {
+    this.setup();
+  }
+  disconnectedCallback() {
+    this.teardown();
+  }
+  componentDidLoad() {
+    this.setup();
+  }
+  render() {
+    this.config = {
+      badgeIcons: this.badgeIcons,
+      type: this.type,
+      iconSize: this.iconSize,
+    };
+    const html = this.MenuListRenderer.render(this.items, this.config);
+    return h("div", { class: "mdc-menu mdc-menu-surface" }, html);
+  }
+  handleType() {
+    this.setupListeners();
+  }
+  itemsChanged() {
+    if (!this.mdcList) {
+      return;
+    }
+    const MenuItems = this.items.filter(this.isMenuItem);
+    this.mdcList.selectedIndex = MenuItems.findIndex((item) => item.selected);
+  }
+  static get is() { return "limel-menu-list"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["menu-list.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["menu-list.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"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "List of items to display"
+      }
+    },
+    "badgeIcons": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set to `true` if the list should display larger icons with a background"
+      },
+      "attribute": "badge-icons",
+      "reflect": false
+    },
+    "iconSize": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "IconSize",
+        "resolved": "\"large\" | \"medium\" | \"small\" | \"x-small\"",
+        "references": {
+          "IconSize": {
+            "location": "import",
+            "path": "@limetech/lime-elements"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Size of the icons in the list"
+      },
+      "attribute": "icon-size",
+      "reflect": false,
+      "defaultValue": "'small'"
+    },
+    "type": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "MenuListType",
+        "resolved": "\"menu\"",
+        "references": {
+          "MenuListType": {
+            "location": "import",
+            "path": "@limetech/lime-elements"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The type of the menu, omit to get a regular vertical menu.\nAvailable types are:\n`menu`: regular vertical menu."
+      },
+      "attribute": "type",
+      "reflect": false
+    },
+    "maxLinesSecondaryText": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "By default, lists will display 3 lines of text, and then truncate the rest.\nConsumers can increase or decrease this number by specifying\n`maxLinesSecondaryText`. If consumer enters zero or negative\nnumbers we default to 1; and if they type decimals we round up."
+      },
+      "attribute": "max-lines-secondary-text",
+      "reflect": false,
+      "defaultValue": "3"
+    }
+  }; }
+  static get events() { return [{
+      "method": "change",
+      "name": "change",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fired when a new value has been selected from the list. Only fired if selectable is set to true"
+      },
+      "complexType": {
+        "original": "MenuItem | MenuItem[]",
+        "resolved": "MenuItem<any> | MenuItem<any>[]",
+        "references": {
+          "MenuItem": {
+            "location": "import",
+            "path": "@limetech/lime-elements"
+          }
+        }
+      }
+    }, {
+      "method": "select",
+      "name": "select",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fired when an action has been selected from the action menu of a list item"
+      },
+      "complexType": {
+        "original": "MenuItem | MenuItem[]",
+        "resolved": "MenuItem<any> | MenuItem<any>[]",
+        "references": {
+          "MenuItem": {
+            "location": "import",
+            "path": "@limetech/lime-elements"
+          }
+        }
+      }
+    }]; }
+  static get elementRef() { return "element"; }
+  static get watchers() { return [{
+      "propName": "type",
+      "methodName": "handleType"
+    }, {
+      "propName": "items",
+      "methodName": "itemsChanged"
+    }]; }
+}

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

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

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

@@ -12,9 +12,90 @@ export class MenuSurface {
      * True if the menu surface is open, false otherwise
      */
     this.open = false;
-    this.handleDocumentClick = this.handleDocumentClick.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.handleResize = this.handleResize.bind(this);
+    this.setup = () => {
+      const menuElement = this.host.shadowRoot.querySelector('.mdc-menu-surface');
+      if (!menuElement) {
+        return;
+      }
+      this.menuSurface = new MDCMenuSurface(menuElement);
+      this.menuSurface.setAnchorCorner(Corner.TOP_START);
+      document.addEventListener('mousedown', this.handleDocumentClick, {
+        capture: true,
+      });
+      this.host.addEventListener('keydown', this.handleKeyDown);
+      window.addEventListener('resize', this.handleResize, {
+        passive: true,
+      });
+    };
+    this.teardown = () => {
+      var _a;
+      (_a = this.menuSurface) === null || _a === void 0 ? void 0 : _a.destroy();
+      document.removeEventListener('mousedown', this.handleDocumentClick, {
+        capture: true,
+      });
+      this.host.removeEventListener('keydown', this.handleKeyDown);
+      window.removeEventListener('resize', this.handleResize);
+    };
+    this.handleDocumentClick = (event) => {
+      const elementPath = event.path || [];
+      if (!this.open) {
+        return;
+      }
+      if (isDescendant(event.target, this.host)) {
+        return;
+      }
+      if (this.allowClicksElement) {
+        const clickedInAllowedElement = elementPath.includes(this.allowClicksElement);
+        if (clickedInAllowedElement) {
+          return;
+        }
+      }
+      this.dismiss.emit();
+      this.preventClickEventPropagation();
+    };
+    this.handleResize = () => {
+      if (this.open) {
+        this.dismiss.emit();
+      }
+    };
+    this.preventClickEventPropagation = () => {
+      // When the menu surface is open, we want to stop the `click` event from propagating
+      // when clicking outside the surface itself. This is to prevent any dialog that might
+      // be open from closing, etc. However, when dragging a scrollbar no `click` event is emitted,
+      // only mousedown and mouseup. So we listen for `mousedown` and attach a one-time listener
+      // for `click`, so we can capture and "kill" it.
+      document.addEventListener('click', this.stopEvent, {
+        capture: true,
+        once: true,
+      });
+      // We also capture and "kill" the next `mouseup` event.
+      document.addEventListener('mouseup', this.stopEvent, {
+        capture: true,
+        once: true,
+      });
+      // If the user dragged the scrollbar, no `click` event happens. So when we get the
+      // `mouseup` event, remove the handler for `click` if it's still there.
+      // Otherwise, we would catch the next click even though the menu is no longer open.
+      document.addEventListener('mouseup', () => {
+        document.removeEventListener('click', this.stopEvent, {
+          capture: true,
+        });
+      }, {
+        once: true,
+      });
+    };
+    this.stopEvent = (event) => {
+      event.stopPropagation();
+      event.preventDefault();
+    };
+    this.handleKeyDown = (event) => {
+      const isEscape = event.key === ESCAPE || event.keyCode === ESCAPE_KEY_CODE;
+      const isTab = event.key === TAB || event.keyCode === TAB_KEY_CODE;
+      if (this.open && (isEscape || isTab)) {
+        event.stopPropagation();
+        this.dismiss.emit();
+      }
+    };
   }
   connectedCallback() {
     this.setup();
@@ -36,90 +117,6 @@ export class MenuSurface {
     return (h("div", { class: classList, tabindex: "-1" },
       h("slot", null)));
   }
-  setup() {
-    const menuElement = this.host.shadowRoot.querySelector('.mdc-menu-surface');
-    if (!menuElement) {
-      return;
-    }
-    this.menuSurface = new MDCMenuSurface(menuElement);
-    this.menuSurface.setAnchorCorner(Corner.TOP_START);
-    document.addEventListener('mousedown', this.handleDocumentClick, {
-      capture: true,
-    });
-    this.host.addEventListener('keydown', this.handleKeyDown);
-    window.addEventListener('resize', this.handleResize, {
-      passive: true,
-    });
-  }
-  teardown() {
-    var _a;
-    (_a = this.menuSurface) === null || _a === void 0 ? void 0 : _a.destroy();
-    document.removeEventListener('mousedown', this.handleDocumentClick, {
-      capture: true,
-    });
-    this.host.removeEventListener('keydown', this.handleKeyDown);
-    window.removeEventListener('resize', this.handleResize);
-  }
-  handleDocumentClick(event) {
-    const elementPath = event.path || [];
-    if (!this.open) {
-      return;
-    }
-    if (isDescendant(event.target, this.host)) {
-      return;
-    }
-    if (this.allowClicksElement) {
-      const clickedInAllowedElement = elementPath.includes(this.allowClicksElement);
-      if (clickedInAllowedElement) {
-        return;
-      }
-    }
-    this.dismiss.emit();
-    this.preventClickEventPropagation();
-  }
-  handleResize() {
-    if (this.open) {
-      this.dismiss.emit();
-    }
-  }
-  preventClickEventPropagation() {
-    // When the menu surface is open, we want to stop the `click` event from propagating
-    // when clicking outside the surface itself. This is to prevent any dialog that might
-    // be open from closing, etc. However, when dragging a scrollbar no `click` event is emitted,
-    // only mousedown and mouseup. So we listen for `mousedown` and attach a one-time listener
-    // for `click`, so we can capture and "kill" it.
-    document.addEventListener('click', this.stopEvent, {
-      capture: true,
-      once: true,
-    });
-    // We also capture and "kill" the next `mouseup` event.
-    document.addEventListener('mouseup', this.stopEvent, {
-      capture: true,
-      once: true,
-    });
-    // If the user dragged the scrollbar, no `click` event happens. So when we get the
-    // `mouseup` event, remove the handler for `click` if it's still there.
-    // Otherwise, we would catch the next click even though the menu is no longer open.
-    document.addEventListener('mouseup', () => {
-      document.removeEventListener('click', this.stopEvent, {
-        capture: true,
-      });
-    }, {
-      once: true,
-    });
-  }
-  stopEvent(event) {
-    event.stopPropagation();
-    event.preventDefault();
-  }
-  handleKeyDown(event) {
-    const isEscape = event.key === ESCAPE || event.keyCode === ESCAPE_KEY_CODE;
-    const isTab = event.key === TAB || event.keyCode === TAB_KEY_CODE;
-    if (this.open && (isEscape || isTab)) {
-      event.stopPropagation();
-      this.dismiss.emit();
-    }
-  }
   static get is() { return "limel-menu-surface"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {

package/dist/collection/components/picker/picker.js

@@ -646,8 +646,8 @@ export class Picker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "This was used for a workaround, and isn't needed any\nlonger. Setting it has no effect, and the property will be removed\nin the next major version.",
-            "name": "deprecated"
+            "name": "deprecated",
+            "text": "This was used for a workaround, and isn't needed any\nlonger. Setting it has no effect, and the property will be removed\nin the next major version."
           }],
         "text": "True if the dropdown list should be displayed without cutting the content"
       },

package/dist/collection/components/popover/popover.js

@@ -53,7 +53,6 @@ import { ESCAPE } from '../../util/keycodes';
  *
  * @slot - Content to put inside the surface
  * @exampleComponent limel-example-popover
- * @private
  */
 export class Popover {
   constructor() {

package/dist/collection/components/progress-flow/progress-flow-item/progress-flow-item.css

@@ -118,7 +118,7 @@
   z-index: 1;
   right: 0;
   transform: translateX(50%);
-  overflow-y: hidden;
+  overflow: hidden;
 }
 .divider:after {
   position: absolute;

package/dist/collection/components/table/table.css

@@ -1209,8 +1209,7 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
   margin-top: 0.75rem;
 }
 :host(.has-low-density) .tabulator-cell {
-  height: 2.75rem;
-  line-height: 2rem;
+  height: 2.75rem !important;
   padding-left: 0.75rem;
   padding-right: 0.5rem;
 }
@@ -1349,6 +1348,14 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
 .tabulator-row .tabulator-cell {
   border-right: transparent;
   padding: 0.5rem;
+  display: inline-flex;
+  align-items: center;
+}
+.tabulator-row .tabulator-cell[style*="text-align: right;"] {
+  justify-content: flex-end;
+}
+.tabulator-row .tabulator-cell[style*="text-align: center;"] {
+  justify-content: center;
 }
 
 .tabulator-col,

package/dist/collection/components/tooltip/tooltip-content.css

@@ -1,21 +1,33 @@
-.tooltip-content {
+:host {
+  animation: display-tooltip 0.2s ease;
   display: flex;
   flex-direction: row;
-  color: rgb(var(--color-gray-default));
-  border-radius: 0.5rem;
-  width: auto;
-  display: flex;
-  padding: 0.75rem;
-  transition: opacity 150ms ease-out;
-  margin-top: 0.3rem;
-  background-color: rgb(var(--color-gray-darker));
+  border-radius: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
+  background-color: rgb(var(--contrast-1300));
+  box-shadow: var(--shadow-depth-16);
 }
-.tooltip-content .tooltip {
-  color: rgb(var(--color-gray-lighter));
+
+.label {
+  color: rgb(var(--contrast-200));
 }
-.tooltip-content .helperLabel {
+
+.helper-label {
+  color: rgb(var(--contrast-800));
   padding: 0 0 0 1rem;
 }
-.tooltip-content .helperLabel:empty {
+.helper-label:empty {
   display: none;
+}
+
+@keyframes display-tooltip {
+  0% {
+    opacity: 0;
+    transform: translate3d(0, 0, 0) scale(0.94);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0) scale(1);
+  }
 }

package/dist/collection/components/tooltip/tooltip-content.js

@@ -6,9 +6,10 @@ import { Component, h, Prop } from '@stencil/core';
  */
 export class TooltipContent {
   render() {
-    return (h("div", { class: "tooltip-content" },
-      h("div", { class: "tooltip" }, this.label),
-      h("div", { class: "helperLabel" }, this.helperLabel)));
+    return [
+      h("div", { class: "label" }, this.label),
+      h("div", { class: "helper-label" }, this.helperLabel),
+    ];
   }
   static get is() { return "limel-tooltip-content"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/tooltip/tooltip.css

@@ -2,11 +2,5 @@
  * @prop --tooltip-z-index: z-index of the tooltip.
  */
 .trigger-anchor {
-  display: inline-block;
   position: relative;
-}
-
-.tooltip-container {
-  color: #f1f1f1;
-  background-color: #232324;
 }

package/dist/collection/components/tooltip/tooltip.js

@@ -1,19 +1,46 @@
 import { Component, h, Prop, Element, State } from '@stencil/core';
 import { createRandomString } from '../../util/random-string';
 /**
- * Tooltips display a text label identifying an element, such as a description
- * of its function.
+ * A tooltip can be used to display a descriptive text for any element.
+ * The displayed content must be a brief and supplemental string of text,
+ * identifying the element or describing its function for the user,
+ * helping them better understand unfamiliar objects that aren't described
+ * directly in the UI.
  *
- * In order to display the tooltip, the tooltip element and the owner element
- * that it should describe must be within the same document or document
- * fragment. A good practice is to just render them next to each other like so:
+ * ## Interaction
+ * The tooltip appears after a slight delay, when the element is hovered;
+ * and disappears as soon as the cursor leaves the element.
+ * Therefore, users cannot interact with the tip, but if the trigger element
+ * itself is interactive, it will remain interactible even with a tooltip bound
+ * to it.
+ *
+ * :::note
+ * In order to display the tooltip, the tooltip element and its trigger element
+ * must be within the same document or document fragment.
+ * A good practice is to just place them next to each other like below:
  *
  * ```html
  * <limel-button icon="search" id="tooltip-example" />
  * <limel-tooltip label="Search" elementId="tooltip-example" />
  * ```
+ * :::
+ *
+ * ## Usage
+ * - Keep in mind that tooltips can be distracting, and can be perceived as an interruption.
+ * Use them only when they add significant value.
+ * - A good tip is concise, helpful, and informative.
+ * Don't explain the obvious or simply repeat what is already on the screen.
+ * When used correctly, supplemental info of a tooltip helps to [declutter the UI](/#/DesignGuidelines/decluttering.md/).
+ * - If the tip is essential to the primary tasks that the user is performing,
+ * such as warnings or important notes, include the information directly in the
+ * interface instead.
+ * - When a component offers a helper text (e.g. [Input field](/#/component/limel-input-field/)),
+ * use that, not a tooltip.
+ * - Make sure to use the tooltip on an element that users naturally and
+ * effortlessly recognize can be hovered.
  *
  * @exampleComponent limel-example-tooltip
+ * @private
  */
 export class Tooltip {
   constructor() {

package/dist/esm/{checkbox.template-434214d5.js → checkbox.template-dbdd27c8.js}

@@ -1,4 +1,4 @@
-import { h } from './index-dc421a6e.js';
+import { h } from './index-2316f345.js';
 
 const CheckboxTemplate = (props) => {
   return (h("div", { class: "mdc-form-field " },