@limetech/lime-elements 36.0.0-next.8 → 36.0.0

package/dist/collection/components/dock/dock-button/dock-button.js

@@ -1,4 +1,4 @@
-import { Component, Event, h, Prop, State } from '@stencil/core';
+import { Component, Event, h, Prop, State, Watch, } from '@stencil/core';
 import { createRandomString } from '../../../util/random-string';
 /**
  * @private
@@ -6,17 +6,26 @@ import { createRandomString } from '../../../util/random-string';
 export class DockButton {
   constructor() {
     /**
-     * @inheritdoc
+     * When the dock is expanded or collapsed, dock items
+     * show labels and tooltips as suitable for the layout.
      */
     this.expanded = false;
     /**
-     * @inheritdoc
+     * When dock is using mobile layout, dock items
+     * show labels and tooltips as suitable for the layout.
      */
     this.useMobileLayout = false;
+    /**
+     * Indicated whether the popover that renders a component is open.
+     */
     this.isOpen = false;
     this.openPopover = (event) => {
       event.stopPropagation();
       this.isOpen = true;
+      this.menuOpen.emit(this.item);
+    };
+    this.setCustomComponentElement = (element) => {
+      this.customComponentElement = element;
     };
     this.onPopoverClose = () => {
       this.isOpen = false;
@@ -24,7 +33,13 @@ export class DockButton {
     };
     this.handleClick = (event) => {
       event.stopPropagation();
-      this.interact.emit(this.item);
+      this.itemSelected.emit(this.item);
+    };
+    this.focusCustomComponentElement = () => {
+      var _a, _b, _c;
+      if ((_b = (_a = this.customComponentElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.delegatesFocus) {
+        (_c = this.customComponentElement) === null || _c === void 0 ? void 0 : _c.focus();
+      }
     };
     this.tooltipId = createRandomString();
   }
@@ -35,12 +50,19 @@ export class DockButton {
     }
     return this.renderButton(this.handleClick);
   }
+  openWatcher() {
+    if (!this.isOpen) {
+      return;
+    }
+    const observer = new IntersectionObserver(this.focusCustomComponentElement);
+    observer.observe(this.customComponentElement);
+  }
   renderPopover() {
     var _a;
     const CustomComponent = (_a = this.item) === null || _a === void 0 ? void 0 : _a.dockMenu.componentName;
     return (h("limel-popover", { openDirection: this.useMobileLayout ? 'top' : 'right', open: this.isOpen || this.item.dockMenu.menuOpen, onClose: this.onPopoverClose },
       this.renderButton(this.openPopover, 'trigger'),
-      h(CustomComponent, Object.assign({}, (this.item.dockMenu.props || {}), { onClose: this.onPopoverClose }))));
+      h(CustomComponent, Object.assign({ ref: this.setCustomComponentElement }, (this.item.dockMenu.props || {}), { onClose: this.onPopoverClose }))));
   }
   renderButton(handleClick, slot) {
     var _a;
@@ -95,11 +117,8 @@ export class DockButton {
       "required": true,
       "optional": false,
       "docs": {
-        "tags": [{
-            "name": "inheritdoc",
-            "text": undefined
-          }],
-        "text": ""
+        "tags": [],
+        "text": "Item that is placed in the dock."
       }
     },
     "expanded": {
@@ -113,11 +132,8 @@ export class DockButton {
       "required": false,
       "optional": true,
       "docs": {
-        "tags": [{
-            "name": "inheritdoc",
-            "text": undefined
-          }],
-        "text": ""
+        "tags": [],
+        "text": "When the dock is expanded or collapsed, dock items\nshow labels and tooltips as suitable for the layout."
       },
       "attribute": "expanded",
       "reflect": true,
@@ -134,11 +150,8 @@ export class DockButton {
       "required": false,
       "optional": true,
       "docs": {
-        "tags": [{
-            "name": "inheritdoc",
-            "text": undefined
-          }],
-        "text": ""
+        "tags": [],
+        "text": "When dock is using mobile layout, dock items\nshow labels and tooltips as suitable for the layout."
       },
       "attribute": "use-mobile-layout",
       "reflect": true,
@@ -149,14 +162,34 @@ export class DockButton {
     "isOpen": {}
   }; }
   static get events() { return [{
-      "method": "interact",
-      "name": "interact",
+      "method": "itemSelected",
+      "name": "itemSelected",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Fired when clicking on the flow item."
+        "text": "Fired when a dock item has been selected from the dock."
+      },
+      "complexType": {
+        "original": "DockItem",
+        "resolved": "DockItem",
+        "references": {
+          "DockItem": {
+            "location": "import",
+            "path": "../dock.types"
+          }
+        }
+      }
+    }, {
+      "method": "menuOpen",
+      "name": "menuOpen",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fired when a dock menu is opened."
       },
       "complexType": {
         "original": "DockItem",
@@ -176,7 +209,7 @@ export class DockButton {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Fired when the popover is closed."
       },
       "complexType": {
         "original": "void",
@@ -184,4 +217,8 @@ export class DockButton {
         "references": {}
       }
     }]; }
+  static get watchers() { return [{
+      "propName": "isOpen",
+      "methodName": "openWatcher"
+    }]; }
 }

package/dist/collection/components/dock/dock.css

@@ -92,15 +92,19 @@ nav::-webkit-scrollbar {
   box-shadow: var(--button-shadow-pressed);
   transform: translate3d(0, 0.08rem, 0);
 }
+.expand-shrink:focus {
+  outline: none;
+}
+.expand-shrink:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-depth-8-focused);
+}
 .expand-shrink.expanded {
   justify-content: flex-end;
 }
 .expand-shrink.expanded limel-icon {
   transform: rotateY(180deg);
 }
-.expand-shrink:focus-visible {
-  box-shadow: var(--shadow-depth-8-focused);
-}
 .expand-shrink limel-icon {
   width: calc(var(--dock-expand-shrink-button-height) - 0.25rem);
   color: var(--dock-item-icon-color, var(--limel-dock-item-text-color));

package/dist/collection/components/dock/dock.js

@@ -56,12 +56,7 @@ export class Dock {
       return (h("limel-dock-button", { class: {
           'dock-item': true,
           selected: item.selected,
-        }, item: item, expanded: this.expanded && !this.useMobileLayout, useMobileLayout: this.useMobileLayout, onInteract: this.handleDockItemClick }));
-    };
-    this.handleDockItemClick = (event) => {
-      if (!event.detail.selected) {
-        this.itemSelected.emit(event.detail);
-      }
+        }, item: item, expanded: this.expanded && !this.useMobileLayout, useMobileLayout: this.useMobileLayout }));
     };
     this.handleResize = () => {
       if (window.innerWidth <= this.mobileBreakPoint) {
@@ -73,6 +68,7 @@ export class Dock {
     };
     this.toggleDockWidth = () => {
       this.expanded = !this.expanded;
+      this.dockExpanded.emit(this.expanded);
     };
   }
   componentDidLoad() {
@@ -238,7 +234,7 @@ export class Dock {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Fired when a Dock item has been selected from the dock."
+        "text": "Fired when a dock item has been selected from the dock."
       },
       "complexType": {
         "original": "DockItem",
@@ -250,5 +246,55 @@ export class Dock {
           }
         }
       }
+    }, {
+      "method": "menuOpen",
+      "name": "menuOpen",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fired when a dock menu is opened."
+      },
+      "complexType": {
+        "original": "DockItem",
+        "resolved": "DockItem",
+        "references": {
+          "DockItem": {
+            "location": "import",
+            "path": "./dock.types"
+          }
+        }
+      }
+    }, {
+      "method": "close",
+      "name": "close",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fired when the popover is closed."
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
+      "method": "dockExpanded",
+      "name": "dockExpanded",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fired when a Dock is expanded or collapsed."
+      },
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      }
     }]; }
 }

package/dist/collection/components/input-field/input-field.js

@@ -7,6 +7,7 @@ import { createRandomString } from '../../util/random-string';
 const helperTextId = 'tf-helper-text';
 /**
  * @exampleComponent limel-example-input-field-text
+ * @exampleComponent limel-example-input-field-placeholder
  * @exampleComponent limel-example-input-field-text-multiple
  * @exampleComponent limel-example-input-field-number
  * @exampleComponent limel-example-input-field-autocomplete
@@ -101,6 +102,7 @@ export class InputField {
     this.getContainerClassList = () => {
       const classList = {
         'mdc-text-field': true,
+        'mdc-text-field--no-label': !this.label,
         'mdc-text-field--outlined': true,
         'mdc-text-field--invalid': this.isInvalid(),
         'mdc-text-field--disabled': this.disabled || this.readonly,
@@ -127,7 +129,7 @@ export class InputField {
         return;
       }
       const type = this.type === 'urlAsText' ? 'text' : this.type;
-      return (h("input", Object.assign({}, properties, { type: type, pattern: this.pattern, onWheel: this.handleWheel, onKeyDown: this.onKeyDown, value: this.value })));
+      return (h("input", Object.assign({}, properties, { type: type, pattern: this.pattern, onWheel: this.handleWheel, onKeyDown: this.onKeyDown, value: this.value, placeholder: this.placeholder })));
     };
     this.renderTextarea = (properties) => {
       if (this.type !== 'textarea') {
@@ -252,6 +254,17 @@ export class InputField {
       }
       return this.limelInputField.shadowRoot.querySelector(elementName);
     };
+    this.renderLabel = (labelId) => {
+      const labelClassList = {
+        'mdc-floating-label': true,
+        'mdc-floating-label--float-above': !!this.value || this.isFocused || this.readonly,
+      };
+      if (!this.label) {
+        return;
+      }
+      return (h("span", { class: "mdc-notched-outline__notch" },
+        h("span", { class: labelClassList, id: labelId }, this.label)));
+    };
     this.renderLeadingIcon = () => {
       if (this.type === 'textarea') {
         return;
@@ -516,16 +529,11 @@ export class InputField {
       properties['aria-controls'] = helperTextId;
       properties['aria-describedby'] = helperTextId;
     }
-    const labelClassList = {
-      'mdc-floating-label': true,
-      'mdc-floating-label--float-above': !!this.value || this.isFocused || this.readonly,
-    };
     return [
       h("label", { class: this.getContainerClassList() },
         h("span", { class: "mdc-notched-outline", tabindex: "-1" },
           h("span", { class: "mdc-notched-outline__leading" }),
-          h("span", { class: "mdc-notched-outline__notch" },
-            h("span", { class: labelClassList, id: labelId }, this.label)),
+          this.renderLabel(labelId),
           h("span", { class: "mdc-notched-outline__trailing" })),
         this.renderLeadingIcon(),
         this.renderEmptyValueForReadonly(),
@@ -627,6 +635,23 @@ export class InputField {
       "attribute": "label",
       "reflect": true
     },
+    "placeholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The placeholder text shown inside the input field, when the field is focused and empty."
+      },
+      "attribute": "placeholder",
+      "reflect": true
+    },
     "helperText": {
       "type": "string",
       "mutable": false,

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

@@ -66,13 +66,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;
     };
@@ -90,12 +85,6 @@ export class Menu {
     };
     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;
@@ -117,7 +106,7 @@ export class Menu {
           } },
           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 })))));
+            }, items: this.items, type: "menu", badgeIcons: this.badgeIcons, onSelect: this.handleSelect, ref: this.setListElement })))));
   }
   componentDidRender() {
     const slotElement = this.host.shadowRoot.querySelector('slot');

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

@@ -67,10 +67,10 @@ export class MenuList {
         return !!item.selected;
       });
       if (selectedItem) {
-        this.change.emit(Object.assign(Object.assign({}, selectedItem), { selected: false }));
+        this.select.emit(Object.assign(Object.assign({}, selectedItem), { selected: false }));
       }
       if (MenuItems[index] !== selectedItem) {
-        this.change.emit(Object.assign(Object.assign({}, MenuItems[index]), { selected: false }));
+        this.select.emit(Object.assign(Object.assign({}, MenuItems[index]), { selected: false }));
       }
     };
     this.isMenuItem = (item) => {
@@ -223,26 +223,6 @@ export class MenuList {
     }
   }; }
   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,
@@ -250,11 +230,11 @@ export class MenuList {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Fired when an action has been selected from the action menu of a list item"
+        "text": "Fired when a new value has been selected from the list."
       },
       "complexType": {
-        "original": "MenuItem | MenuItem[]",
-        "resolved": "MenuItem<any> | MenuItem<any>[]",
+        "original": "MenuItem",
+        "resolved": "MenuItem<any>",
         "references": {
           "MenuItem": {
             "location": "import",

package/dist/collection/components/popover-surface/popover-surface.css

@@ -31,12 +31,13 @@
   border-radius: var(--popover-border-radius, 0.75rem);
   background-color: var(--popover-body-background-color, rgb(var(--contrast-100)));
 }
-.limel-popover-surface:focus, .limel-popover-surface:focus-within {
+.limel-popover-surface:focus {
   outline: none;
 }
+.limel-popover-surface:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-depth-8-focused);
+}
 .limel-popover-surface:focus:after, .limel-popover-surface:focus-within:after {
   opacity: 1;
-}
-.limel-popover-surface:focus-visible {
-  box-shadow: var(--shadow-depth-16-focused);
 }

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

@@ -67,7 +67,6 @@
   font-size: 0.875rem;
 }
 .step.disabled {
-  opacity: 0.75;
   cursor: not-allowed;
 }
 .step.disabled.readonly {
@@ -159,24 +158,38 @@
   z-index: 2;
 }
 
-.step:after {
+.step:before, .step:after {
   pointer-events: none;
   box-sizing: border-box;
   z-index: 2;
   position: absolute;
   right: var(--selected-indicator-right);
-  background-color: var(--step-divider-color);
-  width: 0.375rem;
-  height: 0.375rem;
   border-radius: 50%;
-  opacity: 0.7;
 }
-.last .step:after {
+.last .step:before, .last .step:after {
   right: 0.5rem;
 }
 
-.flow-item:not(.off-progress-item) .step.selected:after {
+.flow-item:not(.off-progress-item) .step.selected:before, .flow-item:not(.off-progress-item) .step.selected:after {
+  content: "";
+  width: 0.375rem;
+  height: 0.375rem;
+}
+.flow-item:not(.off-progress-item) .step.selected:before {
+  background-color: var(--step-divider-color);
+  opacity: 0.7;
+}
+.flow-item:not(.off-progress-item) .step.disabled:before, .flow-item:not(.off-progress-item) .step.disabled:after {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+.flow-item:not(.off-progress-item) .step.disabled:after {
   content: "";
+  background-image: url("data:image/svg+xml;charset=utf-8, <svg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg' xml:space='preserve' fill-rule='evenodd' clip-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2'><path fill='rgb(127,127,127)' d='M32.18 13.711c0-2.207-1.793-4-4.002-4H11.821c-2.208 0-4 1.793-4 4V28.29a4 4 0 0 0 4 4h16.357a4.002 4.002 0 0 0 4.001-4V13.711Z'/><path fill='rgb(127,127,127)' d='M11.211 9.758V7.673A7.489 7.489 0 0 1 18.696.188h2.608a7.489 7.489 0 0 1 7.485 7.485v2.085h-3V7.673a4.488 4.488 0 0 0-4.485-4.485h-2.608a4.488 4.488 0 0 0-4.485 4.485v2.085h-3Z'/></svg>");
+  background-size: 90%;
+  background-repeat: no-repeat;
+  background-position: center;
+  mix-blend-mode: multiply;
 }
 
 .step {

package/dist/collection/components/select/select.css

@@ -1726,6 +1726,10 @@
   left: 1rem;
 }
 
+.mdc-select__dropdown-icon-graphic {
+  transition: transform 0.2s ease;
+}
+
 .limel-select__selected-option {
   display: flex;
   align-items: center;
@@ -1774,7 +1778,8 @@
   outline: none;
 }
 .limel-select .limel-select-trigger:focus-visible {
-  box-shadow: var(--shadow-depth-8-focused) !important;
+  outline: none;
+  box-shadow: var(--shadow-depth-8-focused);
 }
 .limel-select .limel-select-trigger .mdc-floating-label {
   color: rgba(var(--contrast-1200), 1);
@@ -1786,15 +1791,6 @@
   font-size: 0.875rem;
   transform: translateY(-2.171875rem) scale(0.75);
 }
-.limel-select .mdc-select__dropdown-icon {
-  transition: box-shadow 0.2s ease;
-  border-radius: 50%;
-  background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='10' height='5' viewBox='7 10 10 5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' opacity='.54' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat 50%;
-  position: relative;
-  bottom: unset;
-  margin-left: 0;
-  margin-right: 0.25rem;
-}
 .limel-select .limel-select-trigger,
 .limel-select .limel-select__selected-option {
   width: 100%;
@@ -1822,7 +1818,10 @@
   color: var(--mdc-theme-primary);
 }
 .limel-select:not(.mdc-select--disabled) .limel-select-trigger.limel-select--focused .mdc-select__dropdown-icon {
-  color: var(--mdc-theme-primary);
+  fill: var(--mdc-theme-primary);
+}
+.limel-select:not(.mdc-select--disabled) .limel-select-trigger.limel-select--focused .mdc-select__dropdown-icon-graphic {
+  transform: rotate(-180deg);
 }
 .limel-select.limel-select--required .mdc-floating-label::after {
   content: "*";

package/dist/collection/components/select/select.template.js

@@ -39,7 +39,7 @@ const SelectValue = (props) => {
     'mdc-floating-label--float-above': props.hasValue || props.isOpen || props.readonly,
     'mdc-floating-label--active': props.isOpen,
   };
-  return (h("div", { class: anchorClassList, tabindex: "0", onClick: props.open, onKeyPress: props.onTriggerPress, role: "button", "aria-haspopup": "listbox", "aria-expanded": "false", "aria-labelledby": "s-label s-selected-text" },
+  return (h("div", { class: anchorClassList, tabindex: "0", onClick: props.open, onKeyPress: props.onTriggerPress, role: "button", "aria-haspopup": "listbox", "aria-expanded": "false", "aria-labelledby": "s-label s-selected-text", "aria-required": props.required, "aria-disabled": props.disabled },
     h("span", { id: "s-label", class: labelClassList }, props.label),
     h("span", { class: "mdc-select__selected-text-container limel-select__selected-option" },
       getSelectedIcon(props.value),
@@ -47,8 +47,7 @@ const SelectValue = (props) => {
     h(ShowIcon, Object.assign({}, props, { isValid: props.isValid })),
     h("span", { class: "mdc-select__dropdown-icon" },
       h("svg", { class: "mdc-select__dropdown-icon-graphic", viewBox: "7 10 10 5", focusable: "false" },
-        h("polygon", { class: "mdc-select__dropdown-icon-inactive", stroke: "none", "fill-rule": "evenodd", points: "7 10 12 15 17 10" }),
-        h("polygon", { class: "mdc-select__dropdown-icon-active", stroke: "none", "fill-rule": "evenodd", points: "7 15 12 10 17 15" })))));
+        h("polygon", { stroke: "none", "fill-rule": "evenodd", points: "7 10 12 15 17 10" })))));
 };
 const ShowIcon = (props) => {
   if (props.isValid) {
@@ -80,7 +79,7 @@ const MenuDropdown = (props) => {
       h("limel-list", { items: items, type: props.multiple ? 'checkbox' : 'selectable', onChange: props.onMenuChange }))));
 };
 const NativeDropdown = (props) => {
-  return (h("select", { required: props.required, "aria-required": props.required, onChange: props.onNativeChange, onFocus: props.open, onBlur: props.close, class: "limel-select__native-control", disabled: props.disabled, multiple: props.multiple }, props.options.map((option) => {
+  return (h("select", { required: props.required, "aria-disabled": props.disabled, "aria-required": props.required, onChange: props.onNativeChange, onFocus: props.open, onBlur: props.close, class: "limel-select__native-control", disabled: props.disabled, multiple: props.multiple }, props.options.map((option) => {
     return (h("option", { key: option.value, value: option.value, selected: isSelected(option, props.value), disabled: option.disabled }, option.text));
   })));
 };

package/dist/collection/components/table/columns.js

@@ -17,6 +17,7 @@ export class ColumnDefinitionFactory {
       title: column.title,
       field: column.field,
       hozAlign: column.horizontalAlign,
+      headerSort: column.headerSort,
     };
     if (column.headerComponent) {
       definition.titleFormatter = formatHeader(column);

package/dist/collection/components/table/layout.js

@@ -0,0 +1,8 @@
+export function mapLayout(layout) {
+  const layouts = {
+    stretchLastColumn: 'fitDataStretch',
+    stretchColumns: 'fitColumns',
+    lowDensity: 'fitData',
+  };
+  return layouts[layout] || 'fitDataFill';
+}