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

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

@@ -0,0 +1,176 @@
+import { Host, h } from '@stencil/core';
+/**
+ * A split button is a button with two components:
+ * a button and a side-menu attached to it.
+ *
+ * Clicking on the button runs a default action,
+ * and clicking on the arrow opens up a list of other possible actions.
+ *
+ * :::warning
+ * - Never use a split button for navigation purposes, such as going to next page.
+ * The button should only be used for performing commands!
+ * - Never use this component instead of a Select or Menu component!
+ * :::
+ *
+ * @exampleComponent limel-example-split-button-basic
+ * @exampleComponent limel-example-split-button-repeat-default-command
+ */
+export class SplitButton {
+  constructor() {
+    this.renderMenu = () => {
+      if (!this.items.length) {
+        return;
+      }
+      return (h("limel-menu", { class: {
+          primary: this.primary,
+        }, disabled: this.disabled, items: this.items, openDirection: "bottom" }, h("button", { class: "menu-trigger", slot: "trigger", disabled: this.disabled }, "\u22EE")));
+    };
+    this.label = undefined;
+    this.primary = false;
+    this.icon = undefined;
+    this.disabled = false;
+    this.items = [];
+  }
+  render() {
+    return (h(Host, { class: {
+        'has-menu': !!this.items.length,
+      } }, h("limel-button", { label: this.label, primary: this.primary, icon: this.icon, disabled: this.disabled }), this.renderMenu()));
+  }
+  static get is() { return "limel-split-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["split-button.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["split-button.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The text to show on the default action part of the button."
+        },
+        "attribute": "label",
+        "reflect": true
+      },
+      "primary": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to `true` to make the button primary."
+        },
+        "attribute": "primary",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set icon for the button"
+        },
+        "attribute": "icon",
+        "reflect": true
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to `true` to disable the button."
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "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": "[]"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "select",
+        "name": "select",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Is emitted when a menu item is selected."
+        },
+        "complexType": {
+          "original": "MenuItem",
+          "resolved": "MenuItem<any>",
+          "references": {
+            "MenuItem": {
+              "location": "import",
+              "path": "@limetech/lime-elements"
+            }
+          }
+        }
+      }];
+  }
+}

package/dist/collection/components/switch/switch.js

@@ -1,33 +1,20 @@
 import { MDCSwitch } from '@material/switch';
-import { Component, Element, Event, h, Prop, State, Watch, } from '@stencil/core';
+import { h, } from '@stencil/core';
 import { createRandomString } from '../../util/random-string';
 /**
  * @exampleComponent limel-example-switch
  */
 export class Switch {
   constructor() {
-    /**
-     * Disables the switch when `true`,
-     * and visually shows that the switch is editable but disabled.
-     * This tells the users that if certain requirements are met,
-     * the switch may become interactable.
-     */
-    this.disabled = false;
-    /**
-     * Disables the switch when `true`. This visualizes the switch slightly differently.
-     * But shows no visual sign indicating that the switch is disabled
-     * or can ever become interactable.
-     */
-    this.readonly = false;
-    /**
-     * The value of the switch
-     */
-    this.value = false;
-    this.fieldId = createRandomString();
     this.handleClick = (event) => {
       event.stopPropagation();
       this.change.emit(!this.value);
     };
+    this.label = undefined;
+    this.disabled = false;
+    this.readonly = false;
+    this.value = false;
+    this.fieldId = createRandomString();
   }
   connectedCallback() {
     this.initialize();
@@ -53,18 +40,7 @@ export class Switch {
           'lime-switch--readonly': this.readonly,
           'mdc-switch--unselected': !this.value,
           'mdc-switch--selected': this.value,
-        }, type: "button", role: "switch", "aria-checked": this.value, disabled: this.disabled || this.readonly, onClick: this.handleClick },
-        h("div", { class: "mdc-switch__track" }),
-        h("div", { class: "mdc-switch__handle-track" },
-          h("div", { class: "mdc-switch__handle" },
-            h("div", { class: "mdc-switch__shadow" },
-              h("div", { class: "mdc-elevation-overlay" })),
-            h("div", { class: "mdc-switch__ripple" }),
-            h("div", { class: "mdc-switch__icons" },
-              h("svg", { class: "mdc-switch__icon mdc-switch__icon--on", viewBox: "0 0 24 24" },
-                h("path", { d: "M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z" })),
-              h("svg", { class: "mdc-switch__icon mdc-switch__icon--off", viewBox: "0 0 24 24" },
-                h("path", { d: "M20 13H4v-2h16v2z" })))))),
+        }, type: "button", role: "switch", "aria-checked": this.value, disabled: this.disabled || this.readonly, onClick: this.handleClick }, h("div", { class: "mdc-switch__track" }), h("div", { class: "mdc-switch__handle-track" }, h("div", { class: "mdc-switch__handle" }, h("div", { class: "mdc-switch__shadow" }, h("div", { class: "mdc-elevation-overlay" })), h("div", { class: "mdc-switch__ripple" }), h("div", { class: "mdc-switch__icons" }, h("svg", { class: "mdc-switch__icon mdc-switch__icon--on", viewBox: "0 0 24 24" }, h("path", { d: "M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z" })), h("svg", { class: "mdc-switch__icon mdc-switch__icon--off", viewBox: "0 0 24 24" }, h("path", { d: "M20 13H4v-2h16v2z" })))))),
       h("label", { class: `${this.disabled || this.readonly ? 'disabled' : ''}`, htmlFor: this.fieldId }, this.label),
     ];
   }
@@ -76,107 +52,119 @@ export class Switch {
   }
   static get is() { return "limel-switch"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["switch.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["switch.css"]
-  }; }
-  static get properties() { return {
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Label to display next to the switch"
-      },
-      "attribute": "label",
-      "reflect": true
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Disables the switch when `true`,\nand visually shows that the switch is editable but disabled.\nThis tells the users that if certain requirements are met,\nthe switch may become interactable."
-      },
-      "attribute": "disabled",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "readonly": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Disables the switch when `true`. This visualizes the switch slightly differently.\nBut shows no visual sign indicating that the switch is disabled\nor can ever become interactable."
-      },
-      "attribute": "readonly",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "value": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["switch.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["switch.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Label to display next to the switch"
+        },
+        "attribute": "label",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The value of the switch"
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Disables the switch when `true`,\nand visually shows that the switch is editable but disabled.\nThis tells the users that if certain requirements are met,\nthe switch may become interactable."
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "attribute": "value",
-      "reflect": true,
-      "defaultValue": "false"
-    }
-  }; }
-  static get states() { return {
-    "fieldId": {}
-  }; }
-  static get events() { return [{
-      "method": "change",
-      "name": "change",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the value has changed"
+      "readonly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Disables the switch when `true`. This visualizes the switch slightly differently.\nBut shows no visual sign indicating that the switch is disabled\nor can ever become interactable."
+        },
+        "attribute": "readonly",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "value": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The value of the switch"
+        },
+        "attribute": "value",
+        "reflect": true,
+        "defaultValue": "false"
       }
-    }]; }
+    };
+  }
+  static get states() {
+    return {
+      "fieldId": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "change",
+        "name": "change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the value has changed"
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }];
+  }
   static get elementRef() { return "host"; }
-  static get watchers() { return [{
-      "propName": "value",
-      "methodName": "valueWatcher"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "value",
+        "methodName": "valueWatcher"
+      }];
+  }
 }

package/dist/collection/components/tab-bar/tab-bar.js

@@ -1,4 +1,4 @@
-import { Component, h, Listen, Prop, Element, Event, State, Watch, } from '@stencil/core';
+import { h, } from '@stencil/core';
 import { MDCTabBar } from '@material/tab-bar';
 import { strings } from '@material/tab-bar/constants';
 import { isEqual, difference } from 'lodash-es';
@@ -28,13 +28,10 @@ const HIDE_SCROLL_BUTTONS_WHEN_SCROLLED_LESS_THAN_PX = 40;
  */
 export class TabBar {
   constructor() {
-    /**
-     * List of tabs to display
-     */
+    this.setupMdc = false;
     this.tabs = [];
     this.canScrollLeft = false;
     this.canScrollRight = false;
-    this.setupMdc = false;
     this.handleTabActivated = this.handleTabActivated.bind(this);
     this.handleScroll = this.handleScroll.bind(this);
     this.handleLeftScrollClick = this.handleLeftScrollClick.bind(this);
@@ -58,20 +55,11 @@ export class TabBar {
     this.tearDown();
   }
   render() {
-    return (h("div", { class: "mdc-tab-bar", role: "tablist" },
-      h("div", { class: {
-          'mdc-tab-scroller': true,
-          'can-scroll-left': this.canScrollLeft,
-          'can-scroll-right': this.canScrollRight,
-        } },
-        h("div", { class: "mdc-tab-scroller__scroll-area lime-hide-scrollbars" },
-          h("div", { class: "mdc-tab-scroller__scroll-content" }, this.tabs.map(this.renderTab))),
-        h("div", { class: "scroll-fade left" }),
-        h("div", { class: "scroll-button left" },
-          h("limel-icon-button", { icon: "angle_left", elevated: true, tabindex: "-1", "aria-hidden": "true", disabled: !this.canScrollLeft, onClick: this.handleLeftScrollClick })),
-        h("div", { class: "scroll-fade right" }),
-        h("div", { class: "scroll-button right" },
-          h("limel-icon-button", { icon: "angle_right", elevated: true, tabindex: "-1", "aria-hidden": "true", disabled: !this.canScrollRight, onClick: this.handleRightScrollClick })))));
+    return (h("div", { class: "mdc-tab-bar", role: "tablist" }, h("div", { class: {
+        'mdc-tab-scroller': true,
+        'can-scroll-left': this.canScrollLeft,
+        'can-scroll-right': this.canScrollRight,
+      } }, h("div", { class: "mdc-tab-scroller__scroll-area lime-hide-scrollbars" }, h("div", { class: "mdc-tab-scroller__scroll-content" }, this.tabs.map(this.renderTab))), h("div", { class: "scroll-fade left" }), h("div", { class: "scroll-button left" }, h("limel-icon-button", { icon: "angle_left", elevated: true, tabindex: "-1", "aria-hidden": "true", disabled: !this.canScrollLeft, onClick: this.handleLeftScrollClick })), h("div", { class: "scroll-fade right" }), h("div", { class: "scroll-button right" }, h("limel-icon-button", { icon: "angle_right", elevated: true, tabindex: "-1", "aria-hidden": "true", disabled: !this.canScrollRight, onClick: this.handleRightScrollClick })))));
   }
   tabsChanged(newTabs = [], oldTabs = []) {
     const newIds = newTabs.map((tab) => tab.id);
@@ -171,84 +159,91 @@ export class TabBar {
     return (h("button", { class: {
         'mdc-tab': true,
         'mdc-tab--active': !!tab.active,
-      }, role: "tab", "aria-selected": tab.active ? 'true' : 'false', tabindex: tab.active ? 0 : -1 },
-      h("span", { class: "mdc-tab__content" },
-        this.renderIcon(tab),
-        h("span", { class: "mdc-tab__text-label" }, tab.text),
-        tab.badge ? h("limel-badge", { label: tab.badge }) : ''),
-      h("span", { class: {
-          'mdc-tab-indicator': true,
-          'mdc-tab-indicator--active': !!tab.active,
-        } },
-        h("span", { class: "mdc-tab-indicator__content mdc-tab-indicator__content--underline" })),
-      h("span", { class: "mdc-tab__ripple" })));
+      }, role: "tab", "aria-selected": tab.active ? 'true' : 'false', tabindex: tab.active ? 0 : -1 }, h("span", { class: "mdc-tab__content" }, this.renderIcon(tab), h("span", { class: "mdc-tab__text-label" }, tab.text), tab.badge ? h("limel-badge", { label: tab.badge }) : ''), h("span", { class: {
+        'mdc-tab-indicator': true,
+        'mdc-tab-indicator--active': !!tab.active,
+      } }, h("span", { class: "mdc-tab-indicator__content mdc-tab-indicator__content--underline" })), h("span", { class: "mdc-tab__ripple" })));
   }
   static get is() { return "limel-tab-bar"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["tab-bar.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["tab-bar.css"]
-  }; }
-  static get properties() { return {
-    "tabs": {
-      "type": "unknown",
-      "mutable": true,
-      "complexType": {
-        "original": "Tab[]",
-        "resolved": "Tab[]",
-        "references": {
-          "Tab": {
-            "location": "import",
-            "path": "./tab.types"
+  static get originalStyleUrls() {
+    return {
+      "$": ["tab-bar.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tab-bar.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "tabs": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "Tab[]",
+          "resolved": "Tab[]",
+          "references": {
+            "Tab": {
+              "location": "import",
+              "path": "./tab.types"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "List of tabs to display"
-      },
-      "defaultValue": "[]"
-    }
-  }; }
-  static get states() { return {
-    "canScrollLeft": {},
-    "canScrollRight": {}
-  }; }
-  static get events() { return [{
-      "method": "changeTab",
-      "name": "changeTab",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when a tab has been changed"
-      },
-      "complexType": {
-        "original": "Tab",
-        "resolved": "Tab",
-        "references": {
-          "Tab": {
-            "location": "import",
-            "path": "./tab.types"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "List of tabs to display"
+        },
+        "defaultValue": "[]"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "canScrollLeft": {},
+      "canScrollRight": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "changeTab",
+        "name": "changeTab",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when a tab has been changed"
+        },
+        "complexType": {
+          "original": "Tab",
+          "resolved": "Tab",
+          "references": {
+            "Tab": {
+              "location": "import",
+              "path": "./tab.types"
+            }
           }
         }
-      }
-    }]; }
+      }];
+  }
   static get elementRef() { return "host"; }
-  static get watchers() { return [{
-      "propName": "tabs",
-      "methodName": "tabsChanged"
-    }]; }
-  static get listeners() { return [{
-      "name": "resize",
-      "method": "handleWindowResize",
-      "target": "window",
-      "capture": false,
-      "passive": true
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "tabs",
+        "methodName": "tabsChanged"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "resize",
+        "method": "handleWindowResize",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
 }