@limetech/lime-elements 36.1.0-next.13 → 36.1.0-next.15

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
+      }];
+  }
 }

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

@@ -1,4 +1,4 @@
-import { Component, Element, h, Prop, Event, Host, Watch, } from '@stencil/core';
+import { h, Host, } from '@stencil/core';
 import { dispatchResizeEvent } from '../../util/dispatch-resize-event';
 /**
  * The `limel-tab-panel` component uses the `limel-tab-bar` component together
@@ -21,11 +21,8 @@ import { dispatchResizeEvent } from '../../util/dispatch-resize-event';
  */
 export class TabPanel {
   constructor() {
-    /**
-     * The tabs to display in the panel
-     */
-    this.tabs = [];
     this.slotElements = [];
+    this.tabs = [];
     this.handleChangeTabs = this.handleChangeTabs.bind(this);
     this.setSlotElements = this.setSlotElements.bind(this);
     this.setTabStatus = this.setTabStatus.bind(this);
@@ -54,11 +51,7 @@ export class TabPanel {
     this.tabs.forEach(this.setTabStatus);
   }
   render() {
-    return (h(Host, { onChangeTab: this.handleChangeTabs },
-      h("div", { class: "tab-panel" },
-        h("limel-tab-bar", { tabs: this.tabs }),
-        h("div", { class: "tab-content" },
-          h("slot", null)))));
+    return (h(Host, { onChangeTab: this.handleChangeTabs }, h("div", { class: "tab-panel" }, h("limel-tab-bar", { tabs: this.tabs }), h("div", { class: "tab-content" }, h("slot", null)))));
   }
   setSlotElements() {
     const slot = this.getSlot();
@@ -101,59 +94,69 @@ export class TabPanel {
   }
   static get is() { return "limel-tab-panel"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["tab-panel.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["tab-panel.css"]
-  }; }
-  static get properties() { return {
-    "tabs": {
-      "type": "unknown",
-      "mutable": true,
-      "complexType": {
-        "original": "Tab[]",
-        "resolved": "Tab[]",
-        "references": {
-          "Tab": {
-            "location": "import",
-            "path": "../tab-bar/tab.types"
+  static get originalStyleUrls() {
+    return {
+      "$": ["tab-panel.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tab-panel.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "tabs": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "Tab[]",
+          "resolved": "Tab[]",
+          "references": {
+            "Tab": {
+              "location": "import",
+              "path": "../tab-bar/tab.types"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The tabs to display in the panel"
-      },
-      "defaultValue": "[]"
-    }
-  }; }
-  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-bar/tab.types"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The tabs to display in the panel"
+        },
+        "defaultValue": "[]"
+      }
+    };
+  }
+  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-bar/tab.types"
+            }
           }
         }
-      }
-    }]; }
+      }];
+  }
   static get elementRef() { return "host"; }
-  static get watchers() { return [{
-      "propName": "tabs",
-      "methodName": "tabsChanged"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "tabs",
+        "methodName": "tabsChanged"
+      }];
+  }
 }