smoothly 0.3.38 → 1.0.0-alpha.10

package/dist/collection/components/submit/index.js

@@ -1,84 +1,32 @@
 import { h } from "@stencil/core";
-import { Data } from "./Data";
+import { Button } from "../Button";
 export class SmoothlySubmit {
   constructor() {
-    this.processing = undefined;
-    this.color = undefined;
+    this.color = "success";
     this.expand = undefined;
     this.fill = undefined;
     this.disabled = false;
-    this.prevent = undefined;
-  }
-  get form() {
-    return (this.button && this.button.form) || undefined;
-  }
-  async handleSubmit(event) {
-    if (!this.processing) {
-      this.processing = true;
-      if (this.prevent)
-        event.preventDefault();
-      const result = {};
-      if (this.form) {
-        const elements = this.form.elements;
-        for (let i = 0; i < elements.length; i++) {
-          const element = elements.item(i);
-          if (hasNameAndValue(element) && element.name)
-            result[element.name] = element.value;
-        }
-        const smoothlyInputs = this.form.getElementsByTagName("smoothly-input");
-        for (let i = 0; i < smoothlyInputs.length; i++) {
-          const element = smoothlyInputs.item(i);
-          if (hasNameAndValue(element) && element.name)
-            result[element.name] = element.value;
-        }
-      }
-      this.submitEvent.emit(Data.deepen(result));
-      this.processing = false;
-    }
-  }
-  async submit() {
-    let result;
-    if ((result = !!this.form))
-      this.form.submit();
-    return result;
+    this.type = "button";
+    this.size = undefined;
+    this.shape = undefined;
   }
   render() {
-    return [
-      h("smoothly-spinner", { active: this.processing }),
-      h("button", { type: "submit", disabled: this.disabled || this.processing, ref: (element) => (this.button = element) }, h("slot", null)),
-    ];
+    return h(Button, { disabled: this.disabled, type: this.type });
   }
   static get is() { return "smoothly-submit"; }
   static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {
-      "$": ["style.css"]
+      "$": ["../button/style.css"]
     };
   }
   static get styleUrls() {
     return {
-      "$": ["style.css"]
+      "$": ["../button/style.css"]
     };
   }
   static get properties() {
     return {
-      "processing": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "processing",
-        "reflect": true
-      },
       "color": {
         "type": "string",
         "mutable": false,
@@ -99,20 +47,16 @@ export class SmoothlySubmit {
           "text": ""
         },
         "attribute": "color",
-        "reflect": true
+        "reflect": true,
+        "defaultValue": "\"success\""
       },
       "expand": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "Expand",
+          "original": "\"block\" | \"full\"",
           "resolved": "\"block\" | \"full\" | undefined",
-          "references": {
-            "Expand": {
-              "location": "import",
-              "path": "../../model"
-            }
-          }
+          "references": {}
         },
         "required": false,
         "optional": true,
@@ -163,12 +107,47 @@ export class SmoothlySubmit {
         "reflect": true,
         "defaultValue": "false"
       },
-      "prevent": {
-        "type": "boolean",
+      "type": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean | undefined",
+          "original": "\"link\" | \"button\"",
+          "resolved": "\"button\" | \"link\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "type",
+        "reflect": true,
+        "defaultValue": "\"button\""
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"small\" | \"large\" | \"icon\"",
+          "resolved": "\"icon\" | \"large\" | \"small\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": true
+      },
+      "shape": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"rounded\"",
+          "resolved": "\"rounded\" | undefined",
           "references": {}
         },
         "required": false,
@@ -177,15 +156,15 @@ export class SmoothlySubmit {
           "tags": [],
           "text": ""
         },
-        "attribute": "prevent",
-        "reflect": false
+        "attribute": "shape",
+        "reflect": true
       }
     };
   }
   static get events() {
     return [{
-        "method": "submitEvent",
-        "name": "submit",
+        "method": "smoothlySubmit",
+        "name": "smoothlySubmit",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -194,47 +173,11 @@ export class SmoothlySubmit {
           "text": ""
         },
         "complexType": {
-          "original": "Data",
-          "resolved": "{ [name: string]: string | Data; }",
-          "references": {
-            "Data": {
-              "location": "import",
-              "path": "./Data"
-            }
-          }
-        }
-      }];
-  }
-  static get methods() {
-    return {
-      "submit": {
-        "complexType": {
-          "signature": "() => Promise<boolean>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<boolean>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
+          "original": "any",
+          "resolved": "any",
+          "references": {}
         }
-      }
-    };
-  }
-  static get listeners() {
-    return [{
-        "name": "click",
-        "method": "handleSubmit",
-        "target": undefined,
-        "capture": false,
-        "passive": false
       }];
   }
 }
-function hasNameAndValue(element) {
-  return (typeof element.name == "string" && typeof element.value == "string");
-}
+//# sourceMappingURL=index.js.map

package/dist/collection/components/submit/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/submit/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAEvE,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAOlC,MAAM,OAAO,cAAc;;iBACe,SAAS;;;oBAGd,KAAK;gBACU,QAAQ;;;;EAI3D,MAAM;IACL,OAAO,EAAC,MAAM,IAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAW,CAAA;EACnE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Event, EventEmitter, h, Prop } from \"@stencil/core\"\nimport { Color, Fill } from \"../../model\"\nimport { Button } from \"../Button\"\n\n@Component({\n\ttag: \"smoothly-submit\",\n\tstyleUrl: \"../button/style.css\",\n\tscoped: true,\n})\nexport class SmoothlySubmit {\n\t@Prop({ reflect: true }) color?: Color = \"success\"\n\t@Prop({ reflect: true }) expand?: \"block\" | \"full\"\n\t@Prop({ reflect: true }) fill?: Fill\n\t@Prop({ reflect: true }) disabled = false\n\t@Prop({ reflect: true }) type: \"link\" | \"button\" = \"button\"\n\t@Prop({ reflect: true }) size: \"small\" | \"large\" | \"icon\"\n\t@Prop({ reflect: true }) shape?: \"rounded\"\n\t@Event() smoothlySubmit: EventEmitter\n\trender() {\n\t\treturn <Button disabled={this.disabled} type={this.type}></Button>\n\t}\n}\n"]}

package/dist/collection/components/summary/index.js

@@ -0,0 +1,92 @@
+import { h } from "@stencil/core";
+export class SmoothlySummary {
+  constructor() {
+    this.color = "primary";
+    this.fill = "solid";
+    this.size = "tiny";
+  }
+  render() {
+    return (h("details", null, h("summary", null, h("smoothly-icon", { name: "chevron-forward", color: this.color, fill: this.fill, size: this.size }), h("slot", { name: "summary" })), h("slot", { name: "content" })));
+  }
+  static get is() { return "smoothly-summary"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Color",
+          "resolved": "\"danger\" | \"dark\" | \"default\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\"",
+          "references": {
+            "Color": {
+              "location": "import",
+              "path": "../../model"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color",
+        "reflect": false,
+        "defaultValue": "\"primary\""
+      },
+      "fill": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Fill",
+          "resolved": "\"clear\" | \"default\" | \"outline\" | \"solid\"",
+          "references": {
+            "Fill": {
+              "location": "import",
+              "path": "../../model"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "fill",
+        "reflect": false,
+        "defaultValue": "\"solid\""
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"tiny\" | \"small\" | \"medium\" | \"large\"",
+          "resolved": "\"large\" | \"medium\" | \"small\" | \"tiny\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "\"tiny\""
+      }
+    };
+  }
+}
+//# sourceMappingURL=index.js.map

package/dist/collection/components/summary/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/summary/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAOlD,MAAM,OAAO,eAAe;;iBACJ,SAAS;gBACX,OAAO;gBAC0B,MAAM;;EAE5D,MAAM;IACL,OAAO,CACN;MACC;QACC,qBAAe,IAAI,EAAC,iBAAiB,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAkB;QAC3G,YAAM,IAAI,EAAC,SAAS,GAAQ,CACnB;MACV,YAAM,IAAI,EAAC,SAAS,GAAQ,CACnB,CACV,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Prop } from \"@stencil/core\"\nimport { Color, Fill } from \"../../model\"\n@Component({\n\ttag: \"smoothly-summary\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlySummary {\n\t@Prop() color: Color = \"primary\"\n\t@Prop() fill: Fill = \"solid\"\n\t@Prop() size: \"tiny\" | \"small\" | \"medium\" | \"large\" = \"tiny\"\n\n\trender() {\n\t\treturn (\n\t\t\t<details>\n\t\t\t\t<summary>\n\t\t\t\t\t<smoothly-icon name=\"chevron-forward\" color={this.color} fill={this.fill} size={this.size}></smoothly-icon>\n\t\t\t\t\t<slot name=\"summary\"></slot>\n\t\t\t\t</summary>\n\t\t\t\t<slot name=\"content\"></slot>\n\t\t\t</details>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/components/summary/style.css

@@ -0,0 +1,31 @@
+:host > details > summary {
+	list-style: none;
+	display: flex;
+	gap: 0.5rem;
+	align-items: center;
+}
+
+:host > details > summary > smoothly-icon {
+	transition: 0.2s;
+}
+
+:host > details[open] > summary > smoothly-icon {
+	transform: rotate(90deg);
+}
+
+:host > details > summary::slotted([slot=summary]){
+	display: inline-block;
+	margin: 0;
+}
+
+:host > details::slotted([slot=content]){
+	display: inline-block;
+	margin: 0;
+	padding: 0.5rem 1.75rem;
+}
+
+@media screen and (min-width: 900px){
+	:host > details > summary:hover {
+		cursor: pointer;
+	}
+}

package/dist/collection/components/svg/index.js

@@ -98,3 +98,4 @@ export class SmoothlySvg {
     };
   }
 }
+//# sourceMappingURL=index.js.map

package/dist/collection/components/svg/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/svg/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAOxD,MAAM,OAAO,WAAW;;IAIN,iBAAY,GAAqF;MACjH,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;MAC1C,MAAM,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;MAC3C,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;MAC1C,IAAI,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;KACvC,CAAA;;;;;EACD,MAAM;IACL,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI;MACvB,CAAC,CAAC,OAAO,IAAI,CAAC,IAAI,IAAI,QAAQ;QAC7B,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM;QAClB,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,MAAM;MACtC,CAAC,CAAC,OAAO,CAAA;IACV,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI;MACtB,CAAC,CAAC,OAAO,IAAI,CAAC,IAAI,IAAI,QAAQ;QAC7B,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK;QACjB,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,KAAK;MACrC,CAAC,CAAC,OAAO,CAAA;IACV,OAAO,CACN,EAAC,IAAI,IACJ,KAAK,EAAE;QACN,YAAY,EAAE,MAAM;QACpB,WAAW,EAAE,KAAK;QAClB,eAAe,EAAE,MAAM;QACvB,cAAc,EAAE,KAAK;QACrB,SAAS,EAAE,IAAI,CAAC,KAAK;OACrB;MACD,cAAQ,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAC,eAAe,EAAC,IAAI,EAAE,IAAI,CAAC,GAAG,GAAI,CACvE,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Host, Prop } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-svg\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlySvg {\n\t@Prop({ reflect: true }) url!: string\n\t@Prop({ reflect: true }) size?: \"large\" | \"medium\" | \"small\" | \"tiny\" | { height: string; width: string }\n\t@Prop() color: string\n\tprivate readonly defaultSizes: Record<\"large\" | \"medium\" | \"small\" | \"tiny\", { height: string; width: string }> = {\n\t\tlarge: { height: \"50rem\", width: \"50rem\" },\n\t\tmedium: { height: \"30rem\", width: \"30rem\" },\n\t\tsmall: { height: \"10rem\", width: \"10rem\" },\n\t\ttiny: { height: \"5rem\", width: \"5rem\" },\n\t}\n\trender() {\n\t\tconst height = this.size\n\t\t\t? typeof this.size == \"object\"\n\t\t\t\t? this.size.height\n\t\t\t\t: this.defaultSizes[this.size].height\n\t\t\t: \"10rem\"\n\t\tconst width = this.size\n\t\t\t? typeof this.size == \"object\"\n\t\t\t\t? this.size.width\n\t\t\t\t: this.defaultSizes[this.size].width\n\t\t\t: \"10rem\"\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tstyle={{\n\t\t\t\t\t\"min-height\": height,\n\t\t\t\t\t\"min-width\": width,\n\t\t\t\t\t\"--size-height\": height,\n\t\t\t\t\t\"--size-width\": width,\n\t\t\t\t\t\"--color\": this.color,\n\t\t\t\t}}>\n\t\t\t\t<object height={height} width={width} type=\"image/svg+xml\" data={this.url} />\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/components/tab/index.js

@@ -109,3 +109,4 @@ export class SmoothlyTab {
       }];
   }
 }
+//# sourceMappingURL=index.js.map

package/dist/collection/components/tab/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/tab/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAO5F,MAAM,OAAO,WAAW;;;;;EAMvB,WAAW;IACV,IAAI,IAAI,CAAC,gBAAgB,EAAE;MAC1B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;KAC9C;EACF,CAAC;EAED,OAAO,CAAC,CAAU;IACjB,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAA;IACtB,CAAC,CAAC,eAAe,EAAE,CAAA;EACpB,CAAC;EACD,gBAAgB;IACf,IAAI,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,IAAI,EAAE;MACvC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;KAC9C;EACF,CAAC;EACD,MAAM;IACL,OAAO,CACN,EAAC,IAAI;MACJ,iBAAQ,IAAI,CAAC,KAAK,CAAS;MAC3B,WAAK,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE;QAC1E,eAAa,CACR,CACA,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Event, EventEmitter, h, Host, Listen, Prop, Watch } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-tab\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyTab {\n\texpansionElement?: HTMLDivElement\n\t@Event() expansionOpen: EventEmitter<HTMLElement>\n\t@Prop() label: string\n\t@Prop({ mutable: true, reflect: true }) open: boolean\n\t@Watch(\"open\")\n\topenChanged() {\n\t\tif (this.expansionElement) {\n\t\t\tthis.expansionOpen.emit(this.expansionElement)\n\t\t}\n\t}\n\t@Listen(\"click\")\n\tonClick(e: UIEvent) {\n\t\tthis.open = !this.open\n\t\te.stopPropagation()\n\t}\n\tcomponentDidLoad(): void {\n\t\tif (this.expansionElement && this.open) {\n\t\t\tthis.expansionOpen.emit(this.expansionElement)\n\t\t}\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<label>{this.label}</label>\n\t\t\t\t<div ref={e => (this.expansionElement = e)} class={!this.open ? \"hide\" : \"\"}>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/components/tab-switch/index.js

@@ -50,3 +50,4 @@ export class SmoothlyTabSwitch {
       }];
   }
 }
+//# sourceMappingURL=index.js.map

package/dist/collection/components/tab-switch/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/tab-switch/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAOjF,MAAM,OAAO,iBAAiB;;;;EAI7B,WAAW,CAAC,KAAkB;IAC7B,KAAK,CAAC,eAAe,EAAE,CAAA;IACvB,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,MAAgC,CAAA;IAC7D,IAAI,CAAC,eAAe,CAAC,IAAI,GAAG,IAAI,CAAA;IAChC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;EACjC,CAAC;EAED,gBAAgB,CAAC,KAA6B,EAAE,GAA2B;IAC1E,IAAI,GAAG;MACN,GAAG,CAAC,IAAI,GAAG,KAAK,CAAA;EAClB,CAAC;EAED,MAAM;IACL,OAAO,CACN,EAAC,IAAI;MACJ,eAAa,CACP,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, h, Host, Listen, State, Watch } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-tab-switch\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyTabSwitch {\n\t@Element() element: HTMLSmoothlyTabSwitchElement\n\t@State() selectedElement: HTMLSmoothlyTabElement\n\t@Listen(\"expansionOpen\")\n\topenChanged(event: CustomEvent) {\n\t\tevent.stopPropagation()\n\t\tthis.selectedElement = event.target as HTMLSmoothlyTabElement\n\t\tthis.selectedElement.open = true\n\t\tthis.element.after(event.detail)\n\t}\n\t@Watch(\"selectedElement\")\n\tonSelectedChange(value: HTMLSmoothlyTabElement, old: HTMLSmoothlyTabElement) {\n\t\tif (old)\n\t\t\told.open = false\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<slot></slot>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

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

@@ -0,0 +1,44 @@
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+  if (kind === "a" && !f)
+    throw new TypeError("Private accessor was defined without a getter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+    throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+  if (kind === "m")
+    throw new TypeError("Private method is not writable");
+  if (kind === "a" && !f)
+    throw new TypeError("Private accessor was defined without a setter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+    throw new TypeError("Cannot write private member to an object whose class did not declare it");
+  return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _Selector_selected;
+import { h } from "@stencil/core";
+export class Selector {
+  get selected() {
+    var _a;
+    return (__classPrivateFieldSet(this, _Selector_selected, (_a = __classPrivateFieldGet(this, _Selector_selected, "f")) !== null && _a !== void 0 ? _a : Object.values(this.data), "f"));
+  }
+  constructor(key, data = {}) {
+    this.key = key;
+    this.data = data;
+    _Selector_selected.set(this, void 0);
+  }
+  handle(data) {
+    var _a;
+    return new Selector(this.key, "check-all" in data
+      ? (_a = data["check-all"]) !== null && _a !== void 0 ? _a : {}
+      : Object.fromEntries(Object.entries(Object.assign(Object.assign({}, this.data), data)).filter(([_, value]) => value != undefined)));
+  }
+  render(item) {
+    var _a, _b, _c;
+    return Array.isArray(item) ? (h("smoothly-checkbox", { name: "check-all", value: Object.fromEntries(item.map(i => [i[this.key], i])), intermediate: this.selected.length > 0 && this.selected.length < item.length, checked: this.selected.length == item.length ? true : this.selected.length == 0 && false })) : (h("smoothly-checkbox", { name: (_a = item[this.key]) === null || _a === void 0 ? void 0 : _a.toString(), value: item, checked: !!this.data[(_c = (_b = item[this.key]) === null || _b === void 0 ? void 0 : _b.toString()) !== null && _c !== void 0 ? _c : ""] }));
+  }
+  static create(key) {
+    return new Selector(key);
+  }
+}
+_Selector_selected = new WeakMap();
+//# sourceMappingURL=Selector.js.map

package/dist/collection/components/table/Selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Selector.js","sourceRoot":"","sources":["../../../src/components/table/Selector.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AAEjC,MAAM,OAAO,QAAQ;EAEpB,IAAI,QAAQ;;IACX,OAAO,CAAC,+IAAmB,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,MAAA,CAAC,CAAA;EACrD,CAAC;EACD,YAAqC,GAAY,EAAU,OAAoC,EAAE;IAA5D,QAAG,GAAH,GAAG,CAAS;IAAU,SAAI,GAAJ,IAAI,CAAkC;IAJjG,qCAAe;EAIqF,CAAC;EACrG,MAAM,CAAC,IAAuB;;IAC7B,OAAO,IAAI,QAAQ,CAClB,IAAI,CAAC,GAAG,EACR,WAAW,IAAI,IAAI;MAClB,CAAC,CAAC,MAAA,IAAI,CAAC,WAAW,CAAC,mCAAI,EAAE;MACzB,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,OAAO,iCAAM,IAAI,CAAC,IAAI,GAAK,IAAI,EAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,KAAK,IAAI,SAAS,CAAC,CAAC,CAC3G,CAAA;EACF,CAAC;EACD,MAAM,CAAC,IAAa;;IACnB,OAAO,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAC5B,yBACC,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAC1D,YAAY,EAAE,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,EAC5E,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,IAAI,CAAC,IAAI,KAAK,GACvF,CACF,CAAC,CAAC,CAAC,CACH,yBACC,IAAI,EAAE,MAAA,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,0CAAE,QAAQ,EAAE,EAChC,KAAK,EAAE,IAAI,EACX,OAAO,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,MAAA,MAAA,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,0CAAE,QAAQ,EAAE,mCAAI,EAAE,CAAC,GACrD,CACF,CAAA;EACF,CAAC;EACD,MAAM,CAAC,MAAM,CAAI,GAAY;IAC5B,OAAO,IAAI,QAAQ,CAAC,GAAG,CAAC,CAAA;EACzB,CAAC;CACD","sourcesContent":["import { h } from \"@stencil/core\"\n\nexport class Selector<T> {\n\t#selected?: T[]\n\tget selected(): T[] {\n\t\treturn (this.#selected ??= Object.values(this.data))\n\t}\n\tprivate constructor(private readonly key: keyof T, private data: Readonly<Record<string, T>> = {}) {}\n\thandle(data: Record<string, T>): Selector<T> {\n\t\treturn new Selector(\n\t\t\tthis.key,\n\t\t\t\"check-all\" in data\n\t\t\t\t? data[\"check-all\"] ?? {}\n\t\t\t\t: Object.fromEntries(Object.entries({ ...this.data, ...data }).filter(([_, value]) => value != undefined))\n\t\t)\n\t}\n\trender(item: T | T[]): HTMLSmoothlyCheckboxElement {\n\t\treturn Array.isArray(item) ? (\n\t\t\t<smoothly-checkbox\n\t\t\t\tname=\"check-all\"\n\t\t\t\tvalue={Object.fromEntries(item.map(i => [i[this.key], i]))}\n\t\t\t\tintermediate={this.selected.length > 0 && this.selected.length < item.length}\n\t\t\t\tchecked={this.selected.length == item.length ? true : this.selected.length == 0 && false}\n\t\t\t/>\n\t\t) : (\n\t\t\t<smoothly-checkbox\n\t\t\t\tname={item[this.key]?.toString()}\n\t\t\t\tvalue={item}\n\t\t\t\tchecked={!!this.data[item[this.key]?.toString() ?? \"\"]}\n\t\t\t/>\n\t\t)\n\t}\n\tstatic create<T>(key: keyof T): Selector<T> {\n\t\treturn new Selector(key)\n\t}\n}\n"]}

package/dist/collection/components/table/cell/index.js

@@ -16,3 +16,4 @@ export class TableCell {
     };
   }
 }
+//# sourceMappingURL=index.js.map

package/dist/collection/components/table/cell/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/table/cell/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAOlD,MAAM,OAAO,SAAS;EACrB,MAAM;IACL,OAAO,CACN,EAAC,IAAI;MACJ;QACC;UACC,eAAa,CACR;QACN,qBAAe,IAAI,EAAC,iBAAiB,EAAC,IAAI,EAAC,MAAM,GAAG,CAC/C,CACA,CACP,CAAA;EACF,CAAC;;;;;;;;;CACD","sourcesContent":["import { Component, h, Host } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-table-cell\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class TableCell {\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div>\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</div>\n\t\t\t\t\t<smoothly-icon name=\"chevron-forward\" size=\"tiny\" />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/components/table/cell/style.css

@@ -23,3 +23,13 @@
 	margin: 0 0.3rem;
 	transition: transform 0.2s;
 }
+smoothly-table[align=bottom] :host {
+	vertical-align: bottom;
+}
+smoothly-table[align=middle] :host {
+	vertical-align: middle;
+	text-align: left;
+}
+smoothly-table[align=top] :host {
+	vertical-align: top;
+}

package/dist/collection/components/table/demo/filtered/Root.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Root.js.map

package/dist/collection/components/table/demo/filtered/Root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Root.js","sourceRoot":"","sources":["../../../../../src/components/table/demo/filtered/Root.ts"],"names":[],"mappings":"","sourcesContent":["export interface Root {\n\tcurrent_page: number\n\tdata: Cat[]\n\tfirst_page_url: string\n\tfrom: number\n\tlast_page: number\n\tlast_page_url: string\n\tlinks: Link[]\n\tnext_page_url: string\n\tpath: string\n\tper_page: string\n\tprev_page_url: any\n\tto: number\n\ttotal: number\n}\n\nexport interface Cat {\n\tbreed: string\n\tcountry: string\n\torigin: string\n\tcoat: string\n\tpattern: string\n}\n\nexport interface Link {\n\turl?: string\n\tlabel: string\n\tactive: boolean\n}\n"]}

package/dist/collection/components/table/demo/filtered/index.js

@@ -0,0 +1,66 @@
+import { h } from "@stencil/core";
+import * as selectively from "selectively";
+import * as http from "cloudly-http";
+import { Selector } from "../../Selector";
+export class TableDemoFiltered {
+  constructor() {
+    this.criteria = {};
+    this.data = undefined;
+    this.selector = Selector.create("breed");
+  }
+  onFilterUpdate(event) {
+    event.stopPropagation();
+    this.criteria = event.detail;
+  }
+  smoothlyCheckedHandler(event) {
+    this.selector = this.selector.handle(event.detail);
+  }
+  async componentWillLoad() {
+    const response = await http.fetch("https://catfact.ninja/breeds?limit=10");
+    this.data = response.status == 200 && (await response.body);
+  }
+  render() {
+    const data = this.data && selectively.filter(this.criteria, this.data.data);
+    return !data
+      ? "Failed to load data."
+      : [
+        h("smoothly-filter", null, h("smoothly-icon", { slot: "start", name: "search-outline", size: "small" }), "Readonly", h("div", { slot: "filter" }, h("smoothly-form", { looks: "border" }, h("smoothly-filter-input", { name: "breed", placeholder: "ex. Abyssinian" }, "Breed", h("smoothly-icon", { slot: "start", name: "search-outline", size: "small" }))), h("smoothly-form", { looks: "border" }, h("smoothly-filter-input", { name: "country", placeholder: "ex. Ethiopia" }, "Country", h("smoothly-icon", { slot: "start", name: "search-outline", size: "small" }))), h("smoothly-form", { looks: "border" }, h("smoothly-filter-input", { name: "coat", placeholder: "ex. Short" }, "Coat", h("smoothly-icon", { slot: "start", name: "search-outline", size: "small" }))), h("smoothly-form", { looks: "border" }, h("smoothly-filter-input", { name: "pattern", placeholder: "ex. Ticked" }, "Pattern", h("smoothly-icon", { slot: "start", name: "search-outline", size: "small" }))))),
+        h("smoothly-table", null, h("smoothly-table-row", null, h("smoothly-table-header", null, this.selector.render(data)), h("smoothly-table-header", null, "Breed"), h("smoothly-table-header", null, "Coat")), data.map(cat => (h("smoothly-table-row", null, h("smoothly-table-cell", null, this.selector.render(cat)), h("smoothly-table-expandable-cell", null, cat.breed, h("div", { slot: "detail" }, "Country: ", cat.country)), h("smoothly-table-expandable-cell", null, cat.coat, h("div", { slot: "detail" }, "Pattern: ", cat.pattern)))))),
+      ];
+  }
+  static get is() { return "smoothly-table-demo-filtered"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get states() {
+    return {
+      "criteria": {},
+      "data": {},
+      "selector": {}
+    };
+  }
+  static get listeners() {
+    return [{
+        "name": "filters",
+        "method": "onFilterUpdate",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "smoothlyChecked",
+        "method": "smoothlyCheckedHandler",
+        "target": undefined,
+        "capture": true,
+        "passive": false
+      }];
+  }
+}
+//# sourceMappingURL=index.js.map

package/dist/collection/components/table/demo/filtered/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/table/demo/filtered/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentWillLoad, h, Listen, State } from \"@stencil/core\"\nimport * as selectively from \"selectively\"\nimport { Criteria } from \"selectively\"\nimport * as http from \"cloudly-http\"\nimport { Selector } from \"../../Selector\"\nimport { Cat, Root } from \"./Root\"\n\n@Component({\n\ttag: \"smoothly-table-demo-filtered\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class TableDemoFiltered implements ComponentWillLoad {\n\t@State() criteria: Criteria = {}\n\t@State() data?: Root | false\n\t@State() selector: Selector<Cat> = Selector.create(\"breed\")\n\n\t@Listen(\"filters\")\n\tonFilterUpdate(event: CustomEvent<Record<string, Criteria>>) {\n\t\tevent.stopPropagation()\n\t\tthis.criteria = event.detail\n\t}\n\n\t@Listen(\"smoothlyChecked\", { capture: true })\n\tsmoothlyCheckedHandler(event: CustomEvent<Record<string, any>>) {\n\t\tthis.selector = this.selector.handle(event.detail)\n\t}\n\n\tasync componentWillLoad(): Promise<void> {\n\t\tconst response = await http.fetch(\"https://catfact.ninja/breeds?limit=10\")\n\t\tthis.data = response.status == 200 && (await response.body)\n\t}\n\n\trender() {\n\t\tconst data = this.data && selectively.filter(this.criteria, this.data.data)\n\t\treturn !data\n\t\t\t? \"Failed to load data.\"\n\t\t\t: [\n\t\t\t\t\t<smoothly-filter>\n\t\t\t\t\t\t<smoothly-icon slot=\"start\" name=\"search-outline\" size=\"small\" />\n\t\t\t\t\t\tReadonly\n\t\t\t\t\t\t<div slot=\"filter\">\n\t\t\t\t\t\t\t<smoothly-form looks=\"border\">\n\t\t\t\t\t\t\t\t<smoothly-filter-input name=\"breed\" placeholder=\"ex. Abyssinian\">\n\t\t\t\t\t\t\t\t\tBreed\n\t\t\t\t\t\t\t\t\t<smoothly-icon slot=\"start\" name=\"search-outline\" size=\"small\" />\n\t\t\t\t\t\t\t\t</smoothly-filter-input>\n\t\t\t\t\t\t\t</smoothly-form>\n\t\t\t\t\t\t\t<smoothly-form looks=\"border\">\n\t\t\t\t\t\t\t\t<smoothly-filter-input name=\"country\" placeholder=\"ex. Ethiopia\">\n\t\t\t\t\t\t\t\t\tCountry\n\t\t\t\t\t\t\t\t\t<smoothly-icon slot=\"start\" name=\"search-outline\" size=\"small\" />\n\t\t\t\t\t\t\t\t</smoothly-filter-input>\n\t\t\t\t\t\t\t</smoothly-form>\n\t\t\t\t\t\t\t<smoothly-form looks=\"border\">\n\t\t\t\t\t\t\t\t<smoothly-filter-input name=\"coat\" placeholder=\"ex. Short\">\n\t\t\t\t\t\t\t\t\tCoat\n\t\t\t\t\t\t\t\t\t<smoothly-icon slot=\"start\" name=\"search-outline\" size=\"small\" />\n\t\t\t\t\t\t\t\t</smoothly-filter-input>\n\t\t\t\t\t\t\t</smoothly-form>\n\t\t\t\t\t\t\t<smoothly-form looks=\"border\">\n\t\t\t\t\t\t\t\t<smoothly-filter-input name=\"pattern\" placeholder=\"ex. Ticked\">\n\t\t\t\t\t\t\t\t\tPattern\n\t\t\t\t\t\t\t\t\t<smoothly-icon slot=\"start\" name=\"search-outline\" size=\"small\" />\n\t\t\t\t\t\t\t\t</smoothly-filter-input>\n\t\t\t\t\t\t\t</smoothly-form>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</smoothly-filter>,\n\n\t\t\t\t\t<smoothly-table>\n\t\t\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t\t\t<smoothly-table-header>{this.selector.render(data)}</smoothly-table-header>\n\t\t\t\t\t\t\t<smoothly-table-header>Breed</smoothly-table-header>\n\t\t\t\t\t\t\t<smoothly-table-header>Coat</smoothly-table-header>\n\t\t\t\t\t\t</smoothly-table-row>\n\t\t\t\t\t\t{data.map(cat => (\n\t\t\t\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t\t\t\t<smoothly-table-cell>{this.selector.render(cat)}</smoothly-table-cell>\n\t\t\t\t\t\t\t\t<smoothly-table-expandable-cell>\n\t\t\t\t\t\t\t\t\t{cat.breed}\n\t\t\t\t\t\t\t\t\t<div slot=\"detail\">Country: {cat.country}</div>\n\t\t\t\t\t\t\t\t</smoothly-table-expandable-cell>\n\t\t\t\t\t\t\t\t<smoothly-table-expandable-cell>\n\t\t\t\t\t\t\t\t\t{cat.coat}\n\t\t\t\t\t\t\t\t\t<div slot=\"detail\">Pattern: {cat.pattern}</div>\n\t\t\t\t\t\t\t\t</smoothly-table-expandable-cell>\n\t\t\t\t\t\t\t</smoothly-table-row>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</smoothly-table>,\n\t\t\t  ]\n\t}\n}\n"]}

package/dist/collection/components/table/demo/filtered/style.css

@@ -0,0 +1,3 @@
+:host {
+	display: block;
+}

package/dist/collection/components/table/demo/index.js

@@ -2,7 +2,9 @@ import { h } from "@stencil/core";
 export class TableDemo {
   render() {
     return [
-      h("smoothly-table", null, h("smoothly-table-row", null, h("smoothly-table-header", null, "Header A"), h("smoothly-table-header", null, "Header B"), h("smoothly-table-header", null, "Header C"), h("smoothly-table-header", null, "Header D")), h("smoothly-table-row", null, h("smoothly-table-expandable-cell", { open: true }, "normal row (exp.cell)", h("div", { slot: "detail" }, "expandable cell 1 content")), h("smoothly-table-expandable-cell", null, "expandable cell", h("div", { slot: "detail" }, "expandable cell 2 content")), h("smoothly-table-expandable-cell", null, "expandable cell", h("div", { slot: "detail" }, "expandable cell 3 content")), h("smoothly-table-expandable-cell", null, "expandable cell", h("div", { slot: "detail" }, "expandable cell 4 content"))), h("smoothly-table-row", null, h("smoothly-table-cell", null, "normal row (nor.cell)\""), h("smoothly-table-cell", null, "normal cell"), h("smoothly-table-expandable-cell", { open: true }, "expandable cell", h("div", { slot: "detail" }, "expandable cell details.")), h("smoothly-table-expandable-cell", null, "expandable cell", h("div", { slot: "detail" }, "expandable cell details."))), h("smoothly-table-expandable-row", null, h("smoothly-table-cell", null, "expandable row (nor.cell)"), h("smoothly-table-cell", null, "Normal cell"), h("smoothly-table-cell", null, "normal cell"), h("smoothly-table-cell", null, "Normal cell"), h("div", { slot: "detail" }, "expandable row content"))),
+      h("h4", null, "Filtered & Checked Table"),
+      h("smoothly-table-demo-filtered", null),
+      h("smoothly-table", null, h("smoothly-table-row", null, h("smoothly-table-header", null, "Header A"), h("smoothly-table-header", null, "Header B"), h("smoothly-table-header", null, "Header C"), h("smoothly-table-header", null, "Header D")), h("smoothly-table-row", null, h("smoothly-table-expandable-cell", null, "normal row (exp.cell)", h("div", { slot: "detail" }, "expandable cell 1 content")), h("smoothly-table-expandable-cell", null, "expandable cell", h("div", { slot: "detail" }, "expandable cell 2 content")), h("smoothly-table-expandable-cell", null, "expandable cell", h("div", { slot: "detail" }, "expandable cell 3 content")), h("smoothly-table-expandable-cell", null, "expandable cell", h("div", { slot: "detail" }, "expandable cell 4 content"))), h("smoothly-table-row", null, h("smoothly-table-cell", null, "normal row (nor.cell)\""), h("smoothly-table-cell", null, "normal cell"), h("smoothly-table-expandable-cell", null, "expandable cell", h("div", { slot: "detail" }, "expandable cell details.")), h("smoothly-table-expandable-cell", null, "expandable cell", h("div", { slot: "detail" }, "expandable cell details."))), h("smoothly-table-expandable-row", null, h("smoothly-table-cell", null, "expandable row (nor.cell)"), h("smoothly-table-cell", null, "Normal cell"), h("smoothly-table-cell", null, "normal cell"), h("smoothly-table-cell", null, "Normal cell"), h("div", { slot: "detail" }, "expandable row content"))),
       h("smoothly-table", null, h("smoothly-table-row", null, h("smoothly-table-header", null, "Header A")), h("smoothly-table-expandable-row", null, h("smoothly-table-cell", null, "A Content"), h("div", { slot: "detail" }, h("smoothly-tab-switch", null, h("smoothly-tab", { label: "innertable 1", open: true }, h("smoothly-table", null, h("smoothly-table-row", null, h("smoothly-table-header", null, "Header B")), h("smoothly-table-expandable-row", null, "B Content"))), h("smoothly-tab", { label: "innertable 2" }, h("smoothly-table", null, h("smoothly-table-row", null, h("smoothly-table-header", null, "Header C")), h("smoothly-table-expandable-row", null, h("smoothly-table-cell", null, "C Content")))))))),
       h("smoothly-table", null, h("smoothly-table-row", null, h("smoothly-table-header", null, "A"), h("smoothly-table-header", null, "B")), h("smoothly-table-expandable-row", null, h("smoothly-table-cell", null, "a row"), h("smoothly-table-cell", null, "b row"), h("div", { slot: "detail" }, h("smoothly-table", null, h("smoothly-table-row", null, h("smoothly-table-header", null, "C"), h("smoothly-table-header", null, "D")), h("smoothly-table-expandable-row", null, h("smoothly-table-cell", null, "c"), h("smoothly-table-cell", null, "d"), h("div", { slot: "detail" }, h("smoothly-table", null, h("smoothly-table-row", null, h("smoothly-table-header", null, "E"), h("smoothly-table-header", null, "F")), h("smoothly-table-expandable-row", null, h("smoothly-table-cell", null, "e row"), h("smoothly-table-cell", null, "f row"), h("div", { slot: "detail" }, "nested expandable row expansion e f")))))))), h("smoothly-table-expandable-row", null, h("smoothly-table-cell", null, h("span", null, "one"), h("span", null, "two"), h("span", null, "three")), h("smoothly-table-cell", null, "five", h("smoothly-icon", { name: "paper-plane-sharp", size: "small" })), h("div", { slot: "detail" }, "four")), h("smoothly-table-row", null, h("smoothly-table-expandable-cell", null, "a cell", h("div", { slot: "detail" }, h("smoothly-table", null, h("smoothly-table-row", null, h("smoothly-table-header", null, "E"), h("smoothly-table-header", null, "F")), h("smoothly-table-row", null, h("smoothly-table-expandable-cell", null, "e cell", h("div", { slot: "detail" }, "nested expandable cell expansion e")), h("smoothly-table-expandable-cell", null, "f cell", h("div", { slot: "detail" }, "nested expandable cell expansion f")))))), h("smoothly-table-expandable-cell", null, "b cell", h("div", { slot: "detail" }, h("smoothly-table", null, h("smoothly-table-row", null, h("smoothly-table-header", null, "C"), h("smoothly-table-header", null, "D")), h("smoothly-table-row", null, h("smoothly-table-expandable-cell", null, "c cell", h("div", { slot: "detail" }, "nested expandable cell expansion c")), h("smoothly-table-expandable-cell", null, "d cell", h("div", { slot: "detail" }, "nested expandable cell expansion d")))))))),
       h("smoothly-table", null, h("smoothly-table-row", null, h("smoothly-table-header", null, "display"), h("smoothly-table-header", null, "contents")), h("smoothly-table-expandable-row", null, h("div", { class: "content" }, h("smoothly-table-cell", null, "A"), h("smoothly-table-cell", null, "B")), h("div", { slot: "detail" }, "expansion"))),
@@ -21,3 +23,4 @@ export class TableDemo {
     };
   }
 }
+//# sourceMappingURL=index.js.map