@limetech/lime-elements 36.0.0-next.3 → 36.0.0-next.30

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

@@ -0,0 +1,300 @@
+import { Component, Event, h, Host, Prop, State, } from '@stencil/core';
+const DEFAULT_MOBILE_BREAKPOINT = 700;
+/**
+ * @exampleComponent limel-example-dock-basic
+ * @exampleComponent limel-example-dock-custom-component
+ * @exampleComponent limel-example-dock-mobile
+ * @exampleComponent limel-example-dock-expanded
+ * @exampleComponent limel-example-dock-colors-css
+ * @private
+ */
+export class Dock {
+  constructor() {
+    /**
+     * Items that are placed in the dock.
+     */
+    this.dockItems = [];
+    /**
+     * Items that are placed at the bottom of the dock. (Or at the end in mobile
+     * layout.)
+     */
+    this.dockFooterItems = [];
+    /**
+     * Defines the width of the component, when it loads.
+     * - `true`: shows both icons and labels of the Dock items.
+     * - `false`: only shows icons of the doc items, and displays
+     * their labels as tooltip.
+     *
+     * Note: when `useMobileLayout` is `true`, labels will always
+     * be shown as tooltips. Read more below…
+     */
+    this.expanded = false;
+    /**
+     * Set to `false` if you do not want to allow end-users
+     * to exapnd or shrink the Dock. This will hide the
+     * expand/shrink button, and the only things that defines
+     * the layout will be the `expanded` property, and
+     * the `mobileBreakPoint`.
+     */
+    this.allowResize = true;
+    /**
+     * Defines the breakpoint in pixles, at which the component will be rendered
+     * in a hoizontal layout. Default breakpoint is `700` pixels, which means
+     * when the screen size is smaller than `700px`, the component will automatically
+     * switch to a horizontal layout.
+     */
+    this.mobileBreakPoint = DEFAULT_MOBILE_BREAKPOINT;
+    /**
+     * Is used to render the component horizontally, and place
+     * the Dock items in a row.
+     */
+    this.useMobileLayout = false;
+    this.renderSeparator = () => {
+      return this.useMobileLayout ? null : h("span", { class: "footer-separator" });
+    };
+    this.renderDockItem = (item) => {
+      return (h("limel-dock-button", { class: {
+          'dock-item': true,
+          selected: item.selected,
+        }, item: item, expanded: this.expanded && !this.useMobileLayout, useMobileLayout: this.useMobileLayout }));
+    };
+    this.handleResize = () => {
+      if (window.innerWidth <= this.mobileBreakPoint) {
+        this.useMobileLayout = true;
+      }
+      else {
+        this.useMobileLayout = false;
+      }
+    };
+    this.toggleDockWidth = () => {
+      this.expanded = !this.expanded;
+      this.dockExpanded.emit(this.expanded);
+    };
+  }
+  componentDidLoad() {
+    this.resizeObserver = new ResizeObserver(this.handleResize);
+    this.resizeObserver.observe(document.body);
+  }
+  disconnectedCallback() {
+    this.resizeObserver.disconnect();
+  }
+  render() {
+    return (h(Host, { class: {
+        dock: true,
+        expanded: this.expanded,
+        'has-mobile-layout': this.useMobileLayout,
+      } },
+      h("nav", { "aria-label": this.accessibleLabel },
+        this.dockItems.map(this.renderDockItem),
+        this.renderSeparator(),
+        this.dockFooterItems.map(this.renderDockItem)),
+      this.renderExpandShrinkToggle()));
+  }
+  renderExpandShrinkToggle() {
+    if (this.useMobileLayout || !this.allowResize) {
+      return;
+    }
+    return (h("button", { class: {
+        'expand-shrink': true,
+        expanded: this.expanded,
+      }, onClick: this.toggleDockWidth },
+      h("limel-icon", { name: "angle_right" })));
+  }
+  static get is() { return "limel-dock"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["dock.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["dock.css"]
+  }; }
+  static get properties() { return {
+    "dockItems": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DockItem[]",
+        "resolved": "DockItem[]",
+        "references": {
+          "DockItem": {
+            "location": "import",
+            "path": "./dock.types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Items that are placed in the dock."
+      },
+      "defaultValue": "[]"
+    },
+    "dockFooterItems": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DockItem[]",
+        "resolved": "DockItem[]",
+        "references": {
+          "DockItem": {
+            "location": "import",
+            "path": "./dock.types"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Items that are placed at the bottom of the dock. (Or at the end in mobile\nlayout.)"
+      },
+      "defaultValue": "[]"
+    },
+    "accessibleLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "A label used to describe the purpose of the navigation element to users\nof assistive technologies, like screen readers. Especially useful when\nthere are multiple navigation elements in the user interface.\nExample value: \"Primary navigation\""
+      },
+      "attribute": "accessible-label",
+      "reflect": true
+    },
+    "expanded": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Defines the width of the component, when it loads.\n- `true`: shows both icons and labels of the Dock items.\n- `false`: only shows icons of the doc items, and displays\ntheir labels as tooltip.\n\nNote: when `useMobileLayout` is `true`, labels will always\nbe shown as tooltips. Read more below\u2026"
+      },
+      "attribute": "expanded",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "allowResize": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Set to `false` if you do not want to allow end-users\nto exapnd or shrink the Dock. This will hide the\nexpand/shrink button, and the only things that defines\nthe layout will be the `expanded` property, and\nthe `mobileBreakPoint`."
+      },
+      "attribute": "allow-resize",
+      "reflect": true,
+      "defaultValue": "true"
+    },
+    "mobileBreakPoint": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Defines the breakpoint in pixles, at which the component will be rendered\nin a hoizontal layout. Default breakpoint is `700` pixels, which means\nwhen the screen size is smaller than `700px`, the component will automatically\nswitch to a horizontal layout."
+      },
+      "attribute": "mobile-break-point",
+      "reflect": true,
+      "defaultValue": "DEFAULT_MOBILE_BREAKPOINT"
+    }
+  }; }
+  static get states() { return {
+    "useMobileLayout": {}
+  }; }
+  static get events() { return [{
+      "method": "itemSelected",
+      "name": "itemSelected",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "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",
+        "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/dock/dock.types.js

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

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/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 {
@@ -165,11 +164,7 @@
   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 {
   right: 0.5rem;
@@ -177,6 +172,20 @@
 
 .flow-item:not(.off-progress-item) .step.selected:after {
   content: "";
+  width: 0.375rem;
+  height: 0.375rem;
+  background-color: var(--step-divider-color);
+  opacity: 0.7;
+}
+.flow-item:not(.off-progress-item) .step.disabled:after {
+  content: "";
+  width: 0.75rem;
+  height: 0.75rem;
+  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='rgba(127,127,127,0.7)' 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='rgba(127,127,127,0.7)' 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: difference;
 }
 
 .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';
+}