@getflip/swirl-components 0.12.0 → 0.14.0

package/dist/collection/components/swirl-table-row/swirl-table-row.js

@@ -1,58 +1,67 @@
-import { Component, h, Host, Prop } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import classnames from "classnames";
 /**
  * @slot slot - The cells of this row.
  */
 export class SwirlTableRow {
+  constructor() {
+    this.highlighted = undefined;
+    this.index = undefined;
+  }
   render() {
     const className = classnames("table-row", {
       "table-row--highlighted": this.highlighted,
     });
-    return (h(Host, { "aria-rowindex": this.index, class: className, role: "row" },
-      h("slot", null)));
+    return (h(Host, { "aria-rowindex": this.index, class: className, role: "row" }, h("slot", null)));
   }
   static get is() { return "swirl-table-row"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["swirl-table-row.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["swirl-table-row.css"]
-  }; }
-  static get properties() { return {
-    "highlighted": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "highlighted",
-      "reflect": false
-    },
-    "index": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+  static get originalStyleUrls() {
+    return {
+      "$": ["swirl-table-row.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["swirl-table-row.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "highlighted": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "highlighted",
+        "reflect": false
       },
-      "attribute": "index",
-      "reflect": false
-    }
-  }; }
+      "index": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "index",
+        "reflect": false
+      }
+    };
+  }
 }

package/dist/collection/components/swirl-table-row-group/swirl-table-row-group.js

@@ -1,41 +1,47 @@
-import { Component, Element, h, Host, Prop } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 /**
  * @slot slot - The rows of this group.
  */
 export class SwirlTableRowGroup {
+  constructor() {
+    this.label = undefined;
+  }
   render() {
     const rowspan = this.el.querySelectorAll("swirl-table-row").length;
-    return (h(Host, { class: "table-row-group", role: "rowgroup" },
-      h("div", { class: "table-row-group__header-row", role: "row" },
-        h("span", { "aria-rowspan": rowspan, class: "table-row-group__label", role: "rowheader" }, this.label)),
-      h("slot", null)));
+    return (h(Host, { class: "table-row-group", role: "rowgroup" }, h("div", { class: "table-row-group__header-row", role: "row" }, h("span", { "aria-rowspan": rowspan, class: "table-row-group__label", role: "rowheader" }, this.label)), h("slot", null)));
   }
   static get is() { return "swirl-table-row-group"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["swirl-table-row-group.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["swirl-table-row-group.css"]
-  }; }
-  static get properties() { return {
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": true,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "label",
-      "reflect": false
-    }
-  }; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["swirl-table-row-group.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["swirl-table-row-group.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": false
+      }
+    };
+  }
   static get elementRef() { return "el"; }
 }

package/dist/collection/components/swirl-tabs/swirl-tabs.js

@@ -1,4 +1,4 @@
-import { Component, Element, Event, h, Host, Method, Prop, State, } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
 import classnames from "classnames";
 export class SwirlTabs {
   constructor() {
@@ -13,6 +13,9 @@ export class SwirlTabs {
         this.activateNextTab();
       }
     };
+    this.initialTab = undefined;
+    this.label = undefined;
+    this.activeTab = undefined;
   }
   componentWillLoad() {
     this.collectTabs();
@@ -61,113 +64,121 @@ export class SwirlTabs {
     this.activateTab(Boolean(initialTab) ? initialTab.tabId : this.tabs[0].tabId);
   }
   render() {
-    return (h(Host, null,
-      h("div", { class: "tabs" },
-        h("div", { "aria-label": this.label, class: "tabs__tab-bar", onKeyDown: this.onKeyDown, role: "tablist" }, this.tabs.map((tab) => {
-          const isActive = tab.tabId === this.activeTab;
-          const className = classnames("tabs__tab", {
-            "tabs__tab--active": isActive,
-          });
-          return (h("button", { "aria-controls": tab.tabId, "aria-selected": isActive ? "true" : "false", class: className, id: `tab-${tab.tabId}`, key: tab.tabId, 
-            // eslint-disable-next-line react/jsx-no-bind
-            onClick: () => this.activateTab(tab.tabId), role: "tab", tabIndex: isActive ? 0 : -1, type: "button" },
-            h("span", { class: "tabs__tab-label" }, tab.label)));
-        })),
-        h("slot", null))));
+    return (h(Host, null, h("div", { class: "tabs" }, h("div", { "aria-label": this.label, class: "tabs__tab-bar", onKeyDown: this.onKeyDown, role: "tablist" }, this.tabs.map((tab) => {
+      const isActive = tab.tabId === this.activeTab;
+      const className = classnames("tabs__tab", {
+        "tabs__tab--active": isActive,
+      });
+      return (h("button", { "aria-controls": tab.tabId, "aria-selected": isActive ? "true" : "false", class: className, id: `tab-${tab.tabId}`, key: tab.tabId,
+        // eslint-disable-next-line react/jsx-no-bind
+        onClick: () => this.activateTab(tab.tabId), role: "tab", tabIndex: isActive ? 0 : -1, type: "button" }, h("span", { class: "tabs__tab-label" }, tab.label)));
+    })), h("slot", null))));
   }
   static get is() { return "swirl-tabs"; }
   static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() { return {
-    "$": ["swirl-tabs.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["swirl-tabs.css"]
-  }; }
-  static get properties() { return {
-    "initialTab": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "initial-tab",
-      "reflect": false
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": true,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "label",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "activeTab": {}
-  }; }
-  static get events() { return [{
-      "method": "tabActivated",
-      "name": "tabActivated",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+  static get originalStyleUrls() {
+    return {
+      "$": ["swirl-tabs.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["swirl-tabs.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "initialTab": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "initial-tab",
+        "reflect": false
       },
-      "complexType": {
-        "original": "HTMLSwirlTabElement",
-        "resolved": "HTMLSwirlTabElement",
-        "references": {
-          "HTMLSwirlTabElement": {
-            "location": "global"
-          }
-        }
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": false
       }
-    }]; }
-  static get methods() { return {
-    "activateTab": {
-      "complexType": {
-        "signature": "(tabId: string) => Promise<void>",
-        "parameters": [{
-            "tags": [{
-                "name": "param",
-                "text": "tabId"
-              }],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
+    };
+  }
+  static get states() {
+    return {
+      "activeTab": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "tabActivated",
+        "name": "tabActivated",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "HTMLSwirlTabElement",
+          "resolved": "HTMLSwirlTabElement",
+          "references": {
+            "HTMLSwirlTabElement": {
+              "location": "global"
+            }
           }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "activateTab": {
+        "complexType": {
+          "signature": "(tabId: string) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "tabId"
+                }],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Activate a tab.",
-        "tags": [{
-            "name": "param",
-            "text": "tabId"
-          }]
+        "docs": {
+          "text": "Activate a tab.",
+          "tags": [{
+              "name": "param",
+              "text": "tabId"
+            }]
+        }
       }
-    }
-  }; }
+    };
+  }
   static get elementRef() { return "el"; }
 }