smoothly 1.0.0-alpha.13 → 1.0.0-alpha.131

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

@@ -0,0 +1,224 @@
+[color=default] {
+	--smoothly-color: var(--smoothly-default-color);
+	--smoothly-color-contrast: var(--smoothly-default-contrast);
+	--smoothly-color-shade: var(--smoothly-default-shade);
+	--smoothly-color-tint: var(--smoothly-default-tint);
+}
+
+[color=primary] {
+	--smoothly-color: var(--smoothly-primary-color);
+	--smoothly-color-contrast: var(--smoothly-primary-contrast);
+	--smoothly-color-shade: var(--smoothly-primary-shade);
+	--smoothly-color-tint: var(--smoothly-primary-tint);
+}
+
+[color=secondary] {
+	--smoothly-color: var(--smoothly-secondary-color);
+	--smoothly-color-contrast: var(--smoothly-secondary-contrast);
+	--smoothly-color-shade: var(--smoothly-secondary-shade);
+	--smoothly-color-tint: var(--smoothly-secondary-tint);
+}
+
+[color=tertiary] {
+	--smoothly-color: var(--smoothly-tertiary-color);
+	--smoothly-color-contrast: var(--smoothly-tertiary-contrast);
+	--smoothly-color-shade: var(--smoothly-tertiary-shade);
+	--smoothly-color-tint: var(--smoothly-tertiary-tint);
+}
+
+[color=success] {
+	--smoothly-color: var(--smoothly-success-color);
+	--smoothly-color-contrast: var(--smoothly-success-color);
+	--smoothly-color-shade: var(--smoothly-success-shade);
+	--smoothly-color-tint: var(--smoothly-success-tint);
+}
+
+[color=warning] {
+	--smoothly-color: var(--smoothly-warning-color);
+	--smoothly-color-contrast: var(--smoothly-warning-contrast);
+	--smoothly-color-shade: var(--smoothly-warning-shade);
+	--smoothly-color-tint: var(--smoothly-warning-tint);
+}
+
+[color=danger] {
+	--smoothly-color: var(--smoothly-danger-color);
+	--smoothly-color-contrast: var(--smoothly-danger-contrast);
+	--smoothly-color-shade: var(--smoothly-danger-shade);
+	--smoothly-color-tint: var(--smoothly-danger-tint);
+}
+
+[color=light] {
+	--smoothly-color: var(--smoothly-light-color);
+	--smoothly-color-contrast: var(--smoothly-light-contrast);
+	--smoothly-color-shade: var(--smoothly-light-shade);
+	--smoothly-color-tint: var(--smoothly-light-tint);
+}
+
+[color=medium] {
+	--smoothly-color: var(--smoothly-medium-color);
+	--smoothly-color-contrast: var(--smoothly-medium-contrast);
+	--smoothly-color-shade: var(--smoothly-medium-shade);
+	--smoothly-color-tint: var(--smoothly-medium-tint);
+}
+
+[color=dark] {
+	--smoothly-color: var(--smoothly-dark-color);
+	--smoothly-color-contrast: var(--smoothly-dark-contrast);
+	--smoothly-color-shade: var(--smoothly-dark-shade);
+	--smoothly-color-tint: var(--smoothly-dark-tint);
+}
+
+
+:host{
+	display: inline-block;
+	margin: 1em;
+	box-sizing: border-box;
+	border-radius: 0.5rem;
+	border: solid 1px;
+	transition: background 150ms ease-in-out;
+	cursor: pointer;
+}
+:host([type=link]){
+	display: inline;
+	border: none;
+}
+:host([disabled]){
+	opacity: 0.5;
+	pointer-events: none;
+}
+a,
+button{
+	font-size: 110%;
+	font-weight: 400;
+	border: none;
+	background-color: transparent;
+	cursor: pointer;
+	display: inline-flex;
+	gap: 0.5rem;
+}
+button {
+	justify-content: center;
+	height: 100%;
+	width: 100%;
+	border-radius: 0.5rem;
+	min-width: 8em;
+	align-items: center;
+}
+:host(:not([size=icon])) > button {
+	padding: 0.8em;
+}
+:host([size=icon]) > button{
+	padding: 0.5em;
+}
+:host([shape=rounded]) > button,
+:host([shape=rounded]){
+	border-radius: 2rem;
+}
+:host([type=button]) > a {
+	text-align: center;
+	text-decoration: inherit;
+	width: calc(100% - 0.6em);
+}
+:host([size=small]) > button{
+	font-size: 100%;
+}
+:host([size=large]) > button{
+	font-size: 130%;
+}
+:host(:not([size=icon])){
+	min-width: 8em;
+}
+:host([size=flexible]) {
+	min-width: unset;
+	padding: 0;
+	margin: 0;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	border: none;
+}
+:host([size=flexible]) > button {
+	min-width: unset;
+	padding: 0;
+	margin: 0 !important;
+}
+:host([expand]) {
+	width: 100%;
+}
+:host([expand=full]) {
+	border-left: none;
+	border-right: none;
+	border-radius: 0;
+}
+:host([shape=rounded]) > button,
+:host([shape=rounded]){
+	border-radius: 2rem;
+}
+:host(:not([fill=clear]):hover),
+:host(:not([fill=clear]):focus),	
+:host(:not([fill=clear]):active){
+	border-color: rgb(var(--smoothly-color-tint)) !important;
+	background: rgb(var(--smoothly-color-tint)) !important;
+}
+:host(:not([fill=clear]):hover) > button,
+:host(:not([fill=clear]):focus) > button,
+:host(:not([fill=clear]):active) > button,
+:host(:not([fill=clear]):hover) ::slotted(smoothly-icon),
+:host(:not([fill=clear]):focus) ::slotted(smoothly-icon),
+:host(:not([fill=clear]):active) ::slotted(smoothly-icon){
+	color: rgb(var(--smoothly-color-contrast)) !important;
+	stroke: rgb(var(--smoothly-color-contrast)) !important;
+	fill: rgb(var(--smoothly-color-contrast)) !important;
+}
+:host([fill=clear]:hover) > button,
+:host([fill=clear]:focus) > button,
+:host([fill=clear]:active) > button{
+	color: rgb(var(--smoothly-color-tint)) !important;
+	stroke: rgb(var(--smoothly-color-tint)) !important;
+	fill: rgb(var(--smoothly-color-tint)) !important;
+}
+:host([disabled]){
+	opacity: 0.5;
+	pointer-events: none;
+}
+:host(:not([fill])),
+:host([fill=default]) {
+	background: rgb(var(--smoothly-color));
+	border-color: transparent;
+}
+:host([fill=solid]) {
+	background: rgb(var(--smoothly-color));
+	border-color: rgb(var(--smoothly-color));
+}
+:host([fill=solid]) > button,
+:host([fill=default]) > button{
+	stroke: rgb(var(--smoothly-color-contrast));
+	fill: rgb(var(--smoothly-color-contrast));
+	color: rgb(var(--smoothly-color-contrast));
+}
+:host([fill=outline]) > button,
+:host([fill=clear]) > button{
+	stroke: rgb(var(--smoothly-color));
+	fill: rgb(var(--smoothly-color));
+	color: rgb(var(--smoothly-color));
+}
+:host([fill=outline]) {
+	background: transparent;
+	border-color: rgb(var(--smoothly-color));
+}
+:host([fill=clear]) {
+	background: transparent;
+	border-color: transparent;
+}
+::slotted(smoothly-icon[slot=start]),
+::slotted(smoothly-icon[slot=end]){
+	font-size: 0.65em;
+}
+:host([hidden]){
+	display: none;
+}
+
+
+:host() {
+	margin: 1em 0em;
+}

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

@@ -1,12 +1,19 @@
 import { h } from "@stencil/core";
 export class SmoothlySummary {
   constructor() {
+    this.open = false;
     this.color = "primary";
     this.fill = "solid";
     this.size = "tiny";
   }
+  toggleHandler(event) {
+    if (event.target instanceof HTMLDetailsElement) {
+      this.open = event.target.open;
+      this.smoothlySummaryOpen.emit(this.open);
+    }
+  }
   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" })));
+    return (h("details", { onToggle: e => this.toggleHandler(e), open: this.open }, h("summary", null, h("smoothly-icon", { name: "caret-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"; }
@@ -22,6 +29,24 @@ export class SmoothlySummary {
   }
   static get properties() {
     return {
+      "open": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "open",
+        "reflect": true,
+        "defaultValue": "false"
+      },
       "color": {
         "type": "string",
         "mutable": false,
@@ -88,5 +113,23 @@ export class SmoothlySummary {
       }
     };
   }
+  static get events() {
+    return [{
+        "method": "smoothlySummaryOpen",
+        "name": "smoothlySummaryOpen",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }];
+  }
 }
 //# sourceMappingURL=index.js.map

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

@@ -1 +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"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/summary/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAOvE,MAAM,OAAO,eAAe;;gBACoB,KAAK;iBAC7B,SAAS;gBACX,OAAO;gBAC0B,MAAM;;EAG5D,aAAa,CAAC,KAAY;IACzB,IAAI,KAAK,CAAC,MAAM,YAAY,kBAAkB,EAAE;MAC/C,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAA;MAC7B,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KACxC;EACF,CAAC;EAED,MAAM;IACL,OAAO,CACN,eAAS,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI;MAC7D;QACC,qBAAe,IAAI,EAAC,eAAe,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAkB;QACzG,YAAM,IAAI,EAAC,SAAS,GAAQ,CACnB;MACV,YAAM,IAAI,EAAC,SAAS,GAAQ,CACnB,CACV,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Event, EventEmitter, 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({ mutable: true, reflect: true }) open = false\n\t@Prop() color: Color = \"primary\"\n\t@Prop() fill: Fill = \"solid\"\n\t@Prop() size: \"tiny\" | \"small\" | \"medium\" | \"large\" = \"tiny\"\n\t@Event() smoothlySummaryOpen: EventEmitter<boolean>\n\n\ttoggleHandler(event: Event) {\n\t\tif (event.target instanceof HTMLDetailsElement) {\n\t\t\tthis.open = event.target.open\n\t\t\tthis.smoothlySummaryOpen.emit(this.open)\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<details onToggle={e => this.toggleHandler(e)} open={this.open}>\n\t\t\t\t<summary>\n\t\t\t\t\t<smoothly-icon name=\"caret-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/svg/style.css

@@ -2,10 +2,10 @@
 	display: block;
 	min-width: var(--size-width);
 	min-height: var(--size-height);
-	background-color: rgb(var(--color));
+	background-color: rgb(var(--color, var(--smoothly-color-contrast)));
 }
 object {
 	min-width: var(--size-width);
 	min-height: var(--size-height);
-	background-color: rgb(var(--color));
+	background-color: rgb(var(--color, var(--smoothly-color-contrast)));
 }

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

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class TableCell {
   render() {
-    return (h(Host, null, h("div", null, h("div", null, h("slot", null)), h("smoothly-icon", { name: "chevron-forward", size: "tiny" }))));
+    return (h(Host, null, h("div", null, h("div", null, h("slot", null)), h("smoothly-icon", { name: "caret-forward-outline", size: "tiny" }))));
   }
   static get is() { return "smoothly-table-cell"; }
   static get encapsulation() { return "scoped"; }

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

@@ -1 +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"]}
+{"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,uBAAuB,EAAC,IAAI,EAAC,MAAM,GAAG,CACrD,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=\"caret-forward-outline\" 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

@@ -3,26 +3,35 @@
 	line-height: 1.5rem;
 	white-space: nowrap;
 	padding: 0.3rem 0 0.3rem 1rem;
-	border-bottom: 1px solid rgb(var(--smoothly-dark-color));
+	box-shadow: 0 1px 0 0 rgb(var(--smoothly-color-shade));
 }
-
 :host smoothly-icon {
 	display: none;
+	width: 1em;
+	height: auto;
+	aspect-ratio: 1 / 1;
+	margin: 0 0.3rem;
+	transition: transform 0.2s, opacity 0.1s;
+	opacity: 0.3;
 }
-
-:host > div {
+:host:hover smoothly-icon {
+	opacity: 1;
+}
+smoothly-table-expandable-row > div :host:last-of-type smoothly-icon {
 	display: flex;
+}
+smoothly-table-expandable-row[open] > div :host:last-of-type smoothly-icon {
+	transform: rotate(90deg);
+}
+:host > div {
+	display: grid;
+	grid-auto-flow: column;
 	align-items: center;
+	justify-content: space-between;
 }
 :host > div > div {
 	width: 100%;
 }
-:host smoothly-icon {
-	width: 0.6rem;
-	height: 0.6rem;
-	margin: 0 0.3rem;
-	transition: transform 0.2s;
-}
 smoothly-table[align=bottom] :host {
 	vertical-align: bottom;
 }

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

@@ -12,7 +12,8 @@ export class TableDemoFiltered {
     event.stopPropagation();
     this.criteria = event.detail;
   }
-  smoothlyCheckedHandler(event) {
+  smoothlyInputHandler(event) {
+    event.stopPropagation();
     this.selector = this.selector.handle(event.detail);
   }
   async componentWillLoad() {
@@ -55,8 +56,8 @@ export class TableDemoFiltered {
         "capture": false,
         "passive": false
       }, {
-        "name": "smoothlyChecked",
-        "method": "smoothlyCheckedHandler",
+        "name": "smoothlyInput",
+        "method": "smoothlyInputHandler",
         "target": undefined,
         "capture": true,
         "passive": false

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/table/demo/filtered/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAqB,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAC9E,OAAO,KAAK,WAAW,MAAM,aAAa,CAAA;AAE1C,OAAO,KAAK,IAAI,MAAM,cAAc,CAAA;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAQzC,MAAM,OAAO,iBAAiB;;oBACC,EAAE;;oBAEG,QAAQ,CAAC,MAAM,CAAC,OAAO,CAAC;;EAG3D,cAAc,CAAC,KAA4C;IAC1D,KAAK,CAAC,eAAe,EAAE,CAAA;IACvB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAA;EAC7B,CAAC;EAGD,sBAAsB,CAAC,KAAuC;IAC7D,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;EACnD,CAAC;EAED,KAAK,CAAC,iBAAiB;IACtB,MAAM,QAAQ,GAAG,MAAM,IAAI,CAAC,KAAK,CAAC,uCAAuC,CAAC,CAAA;IAC1E,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,QAAQ,CAAC,IAAI,CAAC,CAAA;EAC5D,CAAC;EAED,MAAM;IACL,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC3E,OAAO,CAAC,IAAI;MACX,CAAC,CAAC,sBAAsB;MACxB,CAAC,CAAC;QACA;UACC,qBAAe,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,gBAAgB,EAAC,IAAI,EAAC,OAAO,GAAG;;UAEjE,WAAK,IAAI,EAAC,QAAQ;YACjB,qBAAe,KAAK,EAAC,QAAQ;cAC5B,6BAAuB,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,gBAAgB;;gBAE/D,qBAAe,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,gBAAgB,EAAC,IAAI,EAAC,OAAO,GAAG,CAC1C,CACT;YAChB,qBAAe,KAAK,EAAC,QAAQ;cAC5B,6BAAuB,IAAI,EAAC,SAAS,EAAC,WAAW,EAAC,cAAc;;gBAE/D,qBAAe,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,gBAAgB,EAAC,IAAI,EAAC,OAAO,GAAG,CAC1C,CACT;YAChB,qBAAe,KAAK,EAAC,QAAQ;cAC5B,6BAAuB,IAAI,EAAC,MAAM,EAAC,WAAW,EAAC,WAAW;;gBAEzD,qBAAe,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,gBAAgB,EAAC,IAAI,EAAC,OAAO,GAAG,CAC1C,CACT;YAChB,qBAAe,KAAK,EAAC,QAAQ;cAC5B,6BAAuB,IAAI,EAAC,SAAS,EAAC,WAAW,EAAC,YAAY;;gBAE7D,qBAAe,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,gBAAgB,EAAC,IAAI,EAAC,OAAO,GAAG,CAC1C,CACT,CACX,CACW;QAElB;UACC;YACC,iCAAwB,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,CAAyB;YAC3E,yCAAoD;YACpD,wCAAmD,CAC/B;UACpB,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CAChB;YACC,+BAAsB,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,GAAG,CAAC,CAAuB;YACtE;cACE,GAAG,CAAC,KAAK;cACV,WAAK,IAAI,EAAC,QAAQ;;gBAAW,GAAG,CAAC,OAAO,CAAO,CACf;YACjC;cACE,GAAG,CAAC,IAAI;cACT,WAAK,IAAI,EAAC,QAAQ;;gBAAW,GAAG,CAAC,OAAO,CAAO,CACf,CACb,CACrB,CAAC,CACc;OAChB,CAAA;EACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","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"]}
+{"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(\"smoothlyInput\", { capture: true })\n\tsmoothlyInputHandler(event: CustomEvent<Record<string, any>>) {\n\t\tevent.stopPropagation()\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/index.js

@@ -4,10 +4,16 @@ export class TableDemo {
     return [
       h("h4", null, "Filtered & Checked Table"),
       h("smoothly-table-demo-filtered", null),
+      h("smoothly-table-testing", 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, "Header A"), h("smoothly-table-expandable-cell", null, "Header expansion", h("div", { slot: "detail" }, "Expansion content"))), h("smoothly-table-expandable-row", null, h("smoothly-table-cell", null, "A Content"), h("smoothly-table-cell", null, "Expansion cell"), 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-row", null, h("smoothly-table-cell", null, "A Content"), h("smoothly-table-expandable-cell", null, "Expandable cell", h("div", { slot: "detail" }, "Expansion 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" }, h("smoothly-table", null, h("smoothly-table-row", null, h("smoothly-table-header", null, "G"), h("smoothly-table-header", null, "H")), h("smoothly-table-row", null, h("smoothly-table-expandable-cell", null, "g cell", h("div", { slot: "detail" }, "nested expandable cell expansion g")), h("smoothly-table-expandable-cell", null, "h cell", h("div", { slot: "detail" }, "nested expandable cell expansion h")))))), 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"))),
+      h("span", null, "nested 1 then normal"),
+      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"), h("smoothly-table-cell", null, "b"), 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-cell", null, "c"), h("smoothly-table-cell", null, "d")), h("smoothly-table-row", null, h("smoothly-table-cell", null, "ccc"), h("smoothly-table-cell", null, "ddd")), h("smoothly-table-expandable-row", null, h("smoothly-table-cell", null, "cccc"), h("smoothly-table-cell", null, "dddd"), h("div", { slot: "detail" }, "CONTENT")), h("smoothly-table-row", null, h("smoothly-table-cell", null, "ccccc"), h("smoothly-table-cell", null, "ddd")), h("smoothly-table-expandable-row", null, h("smoothly-table-cell", null, "cccc"), h("smoothly-table-cell", null, "dddd"), h("div", { slot: "detail" }, "CONTENT")))))),
+      h("span", null, "not nested"),
+      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-cell", null, "c"), h("smoothly-table-cell", null, "d")), h("smoothly-table-row", null, h("smoothly-table-cell", null, "cc"), h("smoothly-table-cell", null, "dd")), h("smoothly-table-row", null, h("smoothly-table-cell", null, "ccc"), h("smoothly-table-cell", null, "ddd"))),
+      h("smoothly-table", null, h("smoothly-table-row", null, h("smoothly-table-header", null, "First name"), h("smoothly-table-header", null, "Last name"), h("smoothly-table-header", { style: { width: "1px" } }, h("smoothly-icon", { name: "alert-outline" }))), h("smoothly-table-expandable-row", null, h("smoothly-table-cell", null, "Jessie"), h("smoothly-table-cell", null, "Doe"), h("smoothly-table-cell", null), h("div", { slot: "detail" }, h("p", null, "This is Jessie")))),
     ];
   }
   static get is() { return "smoothly-table-demo"; }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/table/demo/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-table-demo\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class TableDemo {\n\trender() {\n\t\treturn [\n\t\t\t<h4>Filtered & Checked Table</h4>,\n\t\t\t<smoothly-table-demo-filtered></smoothly-table-demo-filtered>,\n\n\t\t\t<smoothly-table>\n\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t<smoothly-table-header>Header A</smoothly-table-header>\n\t\t\t\t\t<smoothly-table-header>Header B</smoothly-table-header>\n\t\t\t\t\t<smoothly-table-header>Header C</smoothly-table-header>\n\t\t\t\t\t<smoothly-table-header>Header D</smoothly-table-header>\n\t\t\t\t</smoothly-table-row>\n\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t<smoothly-table-expandable-cell>\n\t\t\t\t\t\tnormal row (exp.cell)\n\t\t\t\t\t\t<div slot=\"detail\">expandable cell 1 content</div>\n\t\t\t\t\t</smoothly-table-expandable-cell>\n\t\t\t\t\t<smoothly-table-expandable-cell>\n\t\t\t\t\t\texpandable cell\n\t\t\t\t\t\t<div slot=\"detail\">expandable cell 2 content</div>\n\t\t\t\t\t</smoothly-table-expandable-cell>\n\t\t\t\t\t<smoothly-table-expandable-cell>\n\t\t\t\t\t\texpandable cell\n\t\t\t\t\t\t<div slot=\"detail\">expandable cell 3 content</div>\n\t\t\t\t\t</smoothly-table-expandable-cell>\n\t\t\t\t\t<smoothly-table-expandable-cell>\n\t\t\t\t\t\texpandable cell\n\t\t\t\t\t\t<div slot=\"detail\">expandable cell 4 content</div>\n\t\t\t\t\t</smoothly-table-expandable-cell>\n\t\t\t\t</smoothly-table-row>\n\n\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t<smoothly-table-cell>normal row (nor.cell)\"</smoothly-table-cell>\n\t\t\t\t\t<smoothly-table-cell>normal cell</smoothly-table-cell>\n\t\t\t\t\t<smoothly-table-expandable-cell>\n\t\t\t\t\t\texpandable cell\n\t\t\t\t\t\t<div slot=\"detail\">expandable cell details.</div>\n\t\t\t\t\t</smoothly-table-expandable-cell>\n\t\t\t\t\t<smoothly-table-expandable-cell>\n\t\t\t\t\t\texpandable cell\n\t\t\t\t\t\t<div slot=\"detail\">expandable cell details.</div>\n\t\t\t\t\t</smoothly-table-expandable-cell>\n\t\t\t\t</smoothly-table-row>\n\n\t\t\t\t<smoothly-table-expandable-row>\n\t\t\t\t\t<smoothly-table-cell>expandable row (nor.cell)</smoothly-table-cell>\n\t\t\t\t\t<smoothly-table-cell>Normal cell</smoothly-table-cell>\n\t\t\t\t\t<smoothly-table-cell>normal cell</smoothly-table-cell>\n\t\t\t\t\t<smoothly-table-cell>Normal cell</smoothly-table-cell>\n\t\t\t\t\t<div slot=\"detail\">expandable row content</div>\n\t\t\t\t</smoothly-table-expandable-row>\n\t\t\t</smoothly-table>,\n\t\t\t<smoothly-table>\n\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t<smoothly-table-header>Header A</smoothly-table-header>\n\t\t\t\t</smoothly-table-row>\n\t\t\t\t<smoothly-table-expandable-row>\n\t\t\t\t\t<smoothly-table-cell>A Content</smoothly-table-cell>\n\t\t\t\t\t<div slot=\"detail\">\n\t\t\t\t\t\t<smoothly-tab-switch>\n\t\t\t\t\t\t\t<smoothly-tab label=\"innertable 1\" open={true}>\n\t\t\t\t\t\t\t\t<smoothly-table>\n\t\t\t\t\t\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t\t\t\t\t\t<smoothly-table-header>Header B</smoothly-table-header>\n\t\t\t\t\t\t\t\t\t</smoothly-table-row>\n\t\t\t\t\t\t\t\t\t<smoothly-table-expandable-row>B Content</smoothly-table-expandable-row>\n\t\t\t\t\t\t\t\t</smoothly-table>\n\t\t\t\t\t\t\t</smoothly-tab>\n\t\t\t\t\t\t\t<smoothly-tab label=\"innertable 2\">\n\t\t\t\t\t\t\t\t<smoothly-table>\n\t\t\t\t\t\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t\t\t\t\t\t<smoothly-table-header>Header C</smoothly-table-header>\n\t\t\t\t\t\t\t\t\t</smoothly-table-row>\n\t\t\t\t\t\t\t\t\t<smoothly-table-expandable-row>\n\t\t\t\t\t\t\t\t\t\t<smoothly-table-cell>C Content</smoothly-table-cell>\n\t\t\t\t\t\t\t\t\t</smoothly-table-expandable-row>\n\t\t\t\t\t\t\t\t</smoothly-table>\n\t\t\t\t\t\t\t</smoothly-tab>\n\t\t\t\t\t\t</smoothly-tab-switch>\n\t\t\t\t\t</div>\n\t\t\t\t</smoothly-table-expandable-row>\n\t\t\t</smoothly-table>,\n\t\t\t<smoothly-table>\n\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t<smoothly-table-header>A</smoothly-table-header>\n\t\t\t\t\t<smoothly-table-header>B</smoothly-table-header>\n\t\t\t\t</smoothly-table-row>\n\t\t\t\t<smoothly-table-expandable-row>\n\t\t\t\t\t<smoothly-table-cell>a row</smoothly-table-cell>\n\t\t\t\t\t<smoothly-table-cell>b row</smoothly-table-cell>\n\t\t\t\t\t<div slot=\"detail\">\n\t\t\t\t\t\t<smoothly-table>\n\t\t\t\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t\t\t\t<smoothly-table-header>C</smoothly-table-header>\n\t\t\t\t\t\t\t\t<smoothly-table-header>D</smoothly-table-header>\n\t\t\t\t\t\t\t</smoothly-table-row>\n\t\t\t\t\t\t\t<smoothly-table-expandable-row>\n\t\t\t\t\t\t\t\t<smoothly-table-cell>c</smoothly-table-cell>\n\t\t\t\t\t\t\t\t<smoothly-table-cell>d</smoothly-table-cell>\n\t\t\t\t\t\t\t\t<div slot=\"detail\">\n\t\t\t\t\t\t\t\t\t<smoothly-table>\n\t\t\t\t\t\t\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t\t\t\t\t\t\t<smoothly-table-header>E</smoothly-table-header>\n\t\t\t\t\t\t\t\t\t\t\t<smoothly-table-header>F</smoothly-table-header>\n\t\t\t\t\t\t\t\t\t\t</smoothly-table-row>\n\t\t\t\t\t\t\t\t\t\t<smoothly-table-expandable-row>\n\t\t\t\t\t\t\t\t\t\t\t<smoothly-table-cell>e row</smoothly-table-cell>\n\t\t\t\t\t\t\t\t\t\t\t<smoothly-table-cell>f row</smoothly-table-cell>\n\t\t\t\t\t\t\t\t\t\t\t<div slot=\"detail\">nested expandable row expansion e f</div>\n\t\t\t\t\t\t\t\t\t\t</smoothly-table-expandable-row>\n\t\t\t\t\t\t\t\t\t</smoothly-table>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</smoothly-table-expandable-row>\n\t\t\t\t\t\t</smoothly-table>\n\t\t\t\t\t</div>\n\t\t\t\t</smoothly-table-expandable-row>\n\t\t\t\t<smoothly-table-expandable-row>\n\t\t\t\t\t<smoothly-table-cell>\n\t\t\t\t\t\t<span>one</span>\n\t\t\t\t\t\t<span>two</span>\n\t\t\t\t\t\t<span>three</span>\n\t\t\t\t\t</smoothly-table-cell>\n\t\t\t\t\t<smoothly-table-cell>\n\t\t\t\t\t\tfive<smoothly-icon name=\"paper-plane-sharp\" size=\"small\"></smoothly-icon>\n\t\t\t\t\t</smoothly-table-cell>\n\t\t\t\t\t<div slot=\"detail\">four</div>\n\t\t\t\t</smoothly-table-expandable-row>\n\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t<smoothly-table-expandable-cell>\n\t\t\t\t\t\ta cell\n\t\t\t\t\t\t<div slot=\"detail\">\n\t\t\t\t\t\t\t<smoothly-table>\n\t\t\t\t\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t\t\t\t\t<smoothly-table-header>E</smoothly-table-header>\n\t\t\t\t\t\t\t\t\t<smoothly-table-header>F</smoothly-table-header>\n\t\t\t\t\t\t\t\t</smoothly-table-row>\n\t\t\t\t\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t\t\t\t\t<smoothly-table-expandable-cell>\n\t\t\t\t\t\t\t\t\t\te cell\n\t\t\t\t\t\t\t\t\t\t<div slot=\"detail\">nested expandable cell expansion e</div>\n\t\t\t\t\t\t\t\t\t</smoothly-table-expandable-cell>\n\t\t\t\t\t\t\t\t\t<smoothly-table-expandable-cell>\n\t\t\t\t\t\t\t\t\t\tf cell\n\t\t\t\t\t\t\t\t\t\t<div slot=\"detail\">nested expandable cell expansion f</div>\n\t\t\t\t\t\t\t\t\t</smoothly-table-expandable-cell>\n\t\t\t\t\t\t\t\t</smoothly-table-row>\n\t\t\t\t\t\t\t</smoothly-table>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</smoothly-table-expandable-cell>\n\t\t\t\t\t<smoothly-table-expandable-cell>\n\t\t\t\t\t\tb cell\n\t\t\t\t\t\t<div slot=\"detail\">\n\t\t\t\t\t\t\t<smoothly-table>\n\t\t\t\t\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t\t\t\t\t<smoothly-table-header>C</smoothly-table-header>\n\t\t\t\t\t\t\t\t\t<smoothly-table-header>D</smoothly-table-header>\n\t\t\t\t\t\t\t\t</smoothly-table-row>\n\t\t\t\t\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t\t\t\t\t<smoothly-table-expandable-cell>\n\t\t\t\t\t\t\t\t\t\tc cell\n\t\t\t\t\t\t\t\t\t\t<div slot=\"detail\">nested expandable cell expansion c</div>\n\t\t\t\t\t\t\t\t\t</smoothly-table-expandable-cell>\n\t\t\t\t\t\t\t\t\t<smoothly-table-expandable-cell>\n\t\t\t\t\t\t\t\t\t\td cell\n\t\t\t\t\t\t\t\t\t\t<div slot=\"detail\">nested expandable cell expansion d</div>\n\t\t\t\t\t\t\t\t\t</smoothly-table-expandable-cell>\n\t\t\t\t\t\t\t\t</smoothly-table-row>\n\t\t\t\t\t\t\t</smoothly-table>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</smoothly-table-expandable-cell>\n\t\t\t\t</smoothly-table-row>\n\t\t\t</smoothly-table>,\n\t\t\t<smoothly-table>\n\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t<smoothly-table-header>display</smoothly-table-header>\n\t\t\t\t\t<smoothly-table-header>contents</smoothly-table-header>\n\t\t\t\t</smoothly-table-row>\n\t\t\t\t<smoothly-table-expandable-row>\n\t\t\t\t\t<div class={\"content\"}>\n\t\t\t\t\t\t<smoothly-table-cell>A</smoothly-table-cell>\n\t\t\t\t\t\t<smoothly-table-cell>B</smoothly-table-cell>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div slot=\"detail\">expansion</div>\n\t\t\t\t</smoothly-table-expandable-row>\n\t\t\t</smoothly-table>,\n\t\t]\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/table/demo/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-table-demo\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class TableDemo {\n\trender() {\n\t\treturn [\n\t\t\t<h4>Filtered & Checked Table</h4>,\n\t\t\t<smoothly-table-demo-filtered></smoothly-table-demo-filtered>,\n\t\t\t<smoothly-table-testing></smoothly-table-testing>,\n\t\t\t<smoothly-table>\n\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t<smoothly-table-header>Header A</smoothly-table-header>\n\t\t\t\t\t<smoothly-table-header>Header B</smoothly-table-header>\n\t\t\t\t\t<smoothly-table-header>Header C</smoothly-table-header>\n\t\t\t\t\t<smoothly-table-header>Header D</smoothly-table-header>\n\t\t\t\t</smoothly-table-row>\n\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t<smoothly-table-expandable-cell>\n\t\t\t\t\t\tnormal row (exp.cell)\n\t\t\t\t\t\t<div slot=\"detail\">expandable cell 1 content</div>\n\t\t\t\t\t</smoothly-table-expandable-cell>\n\t\t\t\t\t<smoothly-table-expandable-cell>\n\t\t\t\t\t\texpandable cell\n\t\t\t\t\t\t<div slot=\"detail\">expandable cell 2 content</div>\n\t\t\t\t\t</smoothly-table-expandable-cell>\n\t\t\t\t\t<smoothly-table-expandable-cell>\n\t\t\t\t\t\texpandable cell\n\t\t\t\t\t\t<div slot=\"detail\">expandable cell 3 content</div>\n\t\t\t\t\t</smoothly-table-expandable-cell>\n\t\t\t\t\t<smoothly-table-expandable-cell>\n\t\t\t\t\t\texpandable cell\n\t\t\t\t\t\t<div slot=\"detail\">expandable cell 4 content</div>\n\t\t\t\t\t</smoothly-table-expandable-cell>\n\t\t\t\t</smoothly-table-row>\n\n\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t<smoothly-table-cell>normal row (nor.cell)\"</smoothly-table-cell>\n\t\t\t\t\t<smoothly-table-cell>normal cell</smoothly-table-cell>\n\t\t\t\t\t<smoothly-table-expandable-cell>\n\t\t\t\t\t\texpandable cell\n\t\t\t\t\t\t<div slot=\"detail\">expandable cell details.</div>\n\t\t\t\t\t</smoothly-table-expandable-cell>\n\t\t\t\t\t<smoothly-table-expandable-cell>\n\t\t\t\t\t\texpandable cell\n\t\t\t\t\t\t<div slot=\"detail\">expandable cell details.</div>\n\t\t\t\t\t</smoothly-table-expandable-cell>\n\t\t\t\t</smoothly-table-row>\n\n\t\t\t\t<smoothly-table-expandable-row>\n\t\t\t\t\t<smoothly-table-cell>expandable row (nor.cell)</smoothly-table-cell>\n\t\t\t\t\t<smoothly-table-cell>Normal cell</smoothly-table-cell>\n\t\t\t\t\t<smoothly-table-cell>normal cell</smoothly-table-cell>\n\t\t\t\t\t<smoothly-table-cell>Normal cell</smoothly-table-cell>\n\t\t\t\t\t<div slot=\"detail\">expandable row content</div>\n\t\t\t\t</smoothly-table-expandable-row>\n\t\t\t</smoothly-table>,\n\t\t\t<smoothly-table>\n\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t<smoothly-table-header>Header A</smoothly-table-header>\n\t\t\t\t\t<smoothly-table-expandable-cell>\n\t\t\t\t\t\tHeader expansion\n\t\t\t\t\t\t<div slot=\"detail\">Expansion content</div>\n\t\t\t\t\t</smoothly-table-expandable-cell>\n\t\t\t\t</smoothly-table-row>\n\t\t\t\t<smoothly-table-expandable-row>\n\t\t\t\t\t<smoothly-table-cell>A Content</smoothly-table-cell>\n\t\t\t\t\t<smoothly-table-cell>Expansion cell</smoothly-table-cell>\n\t\t\t\t\t<div slot=\"detail\">\n\t\t\t\t\t\t<smoothly-tab-switch>\n\t\t\t\t\t\t\t<smoothly-tab label=\"innertable 1\" open={true}>\n\t\t\t\t\t\t\t\t<smoothly-table>\n\t\t\t\t\t\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t\t\t\t\t\t<smoothly-table-header>Header B</smoothly-table-header>\n\t\t\t\t\t\t\t\t\t</smoothly-table-row>\n\t\t\t\t\t\t\t\t\t<smoothly-table-expandable-row>B Content</smoothly-table-expandable-row>\n\t\t\t\t\t\t\t\t</smoothly-table>\n\t\t\t\t\t\t\t</smoothly-tab>\n\t\t\t\t\t\t\t<smoothly-tab label=\"innertable 2\">\n\t\t\t\t\t\t\t\t<smoothly-table>\n\t\t\t\t\t\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t\t\t\t\t\t<smoothly-table-header>Header C</smoothly-table-header>\n\t\t\t\t\t\t\t\t\t</smoothly-table-row>\n\t\t\t\t\t\t\t\t\t<smoothly-table-expandable-row>\n\t\t\t\t\t\t\t\t\t\t<smoothly-table-cell>C Content</smoothly-table-cell>\n\t\t\t\t\t\t\t\t\t</smoothly-table-expandable-row>\n\t\t\t\t\t\t\t\t</smoothly-table>\n\t\t\t\t\t\t\t</smoothly-tab>\n\t\t\t\t\t\t</smoothly-tab-switch>\n\t\t\t\t\t</div>\n\t\t\t\t</smoothly-table-expandable-row>\n\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t<smoothly-table-cell>A Content</smoothly-table-cell>\n\t\t\t\t\t<smoothly-table-expandable-cell>\n\t\t\t\t\t\tExpandable cell\n\t\t\t\t\t\t<div slot=\"detail\">Expansion content</div>\n\t\t\t\t\t</smoothly-table-expandable-cell>\n\t\t\t\t</smoothly-table-row>\n\t\t\t</smoothly-table>,\n\t\t\t<smoothly-table>\n\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t<smoothly-table-header>A</smoothly-table-header>\n\t\t\t\t\t<smoothly-table-header>B</smoothly-table-header>\n\t\t\t\t</smoothly-table-row>\n\t\t\t\t<smoothly-table-expandable-row>\n\t\t\t\t\t<smoothly-table-cell>a row</smoothly-table-cell>\n\t\t\t\t\t<smoothly-table-cell>b row</smoothly-table-cell>\n\t\t\t\t\t<div slot=\"detail\">\n\t\t\t\t\t\t<smoothly-table>\n\t\t\t\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t\t\t\t<smoothly-table-header>C</smoothly-table-header>\n\t\t\t\t\t\t\t\t<smoothly-table-header>D</smoothly-table-header>\n\t\t\t\t\t\t\t</smoothly-table-row>\n\t\t\t\t\t\t\t<smoothly-table-expandable-row>\n\t\t\t\t\t\t\t\t<smoothly-table-cell>c</smoothly-table-cell>\n\t\t\t\t\t\t\t\t<smoothly-table-cell>d</smoothly-table-cell>\n\t\t\t\t\t\t\t\t<div slot=\"detail\">\n\t\t\t\t\t\t\t\t\t<smoothly-table>\n\t\t\t\t\t\t\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t\t\t\t\t\t\t<smoothly-table-header>E</smoothly-table-header>\n\t\t\t\t\t\t\t\t\t\t\t<smoothly-table-header>F</smoothly-table-header>\n\t\t\t\t\t\t\t\t\t\t</smoothly-table-row>\n\t\t\t\t\t\t\t\t\t\t<smoothly-table-expandable-row>\n\t\t\t\t\t\t\t\t\t\t\t<smoothly-table-cell>e row</smoothly-table-cell>\n\t\t\t\t\t\t\t\t\t\t\t<smoothly-table-cell>f row</smoothly-table-cell>\n\t\t\t\t\t\t\t\t\t\t\t<div slot=\"detail\">nested expandable row expansion e f</div>\n\t\t\t\t\t\t\t\t\t\t</smoothly-table-expandable-row>\n\t\t\t\t\t\t\t\t\t</smoothly-table>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</smoothly-table-expandable-row>\n\t\t\t\t\t\t</smoothly-table>\n\t\t\t\t\t</div>\n\t\t\t\t</smoothly-table-expandable-row>\n\t\t\t\t<smoothly-table-expandable-row>\n\t\t\t\t\t<smoothly-table-cell>\n\t\t\t\t\t\t<span>one</span>\n\t\t\t\t\t\t<span>two</span>\n\t\t\t\t\t\t<span>three</span>\n\t\t\t\t\t</smoothly-table-cell>\n\t\t\t\t\t<smoothly-table-cell>\n\t\t\t\t\t\tfive<smoothly-icon name=\"paper-plane-sharp\" size=\"small\"></smoothly-icon>\n\t\t\t\t\t</smoothly-table-cell>\n\t\t\t\t\t<div slot=\"detail\">four</div>\n\t\t\t\t</smoothly-table-expandable-row>\n\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t<smoothly-table-expandable-cell>\n\t\t\t\t\t\ta cell\n\t\t\t\t\t\t<div slot=\"detail\">\n\t\t\t\t\t\t\t<smoothly-table>\n\t\t\t\t\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t\t\t\t\t<smoothly-table-header>E</smoothly-table-header>\n\t\t\t\t\t\t\t\t\t<smoothly-table-header>F</smoothly-table-header>\n\t\t\t\t\t\t\t\t</smoothly-table-row>\n\t\t\t\t\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t\t\t\t\t<smoothly-table-expandable-cell>\n\t\t\t\t\t\t\t\t\t\te cell\n\t\t\t\t\t\t\t\t\t\t<div slot=\"detail\">\n\t\t\t\t\t\t\t\t\t\t\t<smoothly-table>\n\t\t\t\t\t\t\t\t\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<smoothly-table-header>G</smoothly-table-header>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<smoothly-table-header>H</smoothly-table-header>\n\t\t\t\t\t\t\t\t\t\t\t\t</smoothly-table-row>\n\t\t\t\t\t\t\t\t\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<smoothly-table-expandable-cell>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tg cell\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div slot=\"detail\">nested expandable cell expansion g</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</smoothly-table-expandable-cell>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<smoothly-table-expandable-cell>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\th cell\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div slot=\"detail\">nested expandable cell expansion h</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</smoothly-table-expandable-cell>\n\t\t\t\t\t\t\t\t\t\t\t\t</smoothly-table-row>\n\t\t\t\t\t\t\t\t\t\t\t</smoothly-table>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</smoothly-table-expandable-cell>\n\t\t\t\t\t\t\t\t\t<smoothly-table-expandable-cell>\n\t\t\t\t\t\t\t\t\t\tf cell\n\t\t\t\t\t\t\t\t\t\t<div slot=\"detail\">nested expandable cell expansion f</div>\n\t\t\t\t\t\t\t\t\t</smoothly-table-expandable-cell>\n\t\t\t\t\t\t\t\t</smoothly-table-row>\n\t\t\t\t\t\t\t</smoothly-table>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</smoothly-table-expandable-cell>\n\t\t\t\t\t<smoothly-table-expandable-cell>\n\t\t\t\t\t\tb cell\n\t\t\t\t\t\t<div slot=\"detail\">\n\t\t\t\t\t\t\t<smoothly-table>\n\t\t\t\t\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t\t\t\t\t<smoothly-table-header>C</smoothly-table-header>\n\t\t\t\t\t\t\t\t\t<smoothly-table-header>D</smoothly-table-header>\n\t\t\t\t\t\t\t\t</smoothly-table-row>\n\t\t\t\t\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t\t\t\t\t<smoothly-table-expandable-cell>\n\t\t\t\t\t\t\t\t\t\tc cell\n\t\t\t\t\t\t\t\t\t\t<div slot=\"detail\">nested expandable cell expansion c</div>\n\t\t\t\t\t\t\t\t\t</smoothly-table-expandable-cell>\n\t\t\t\t\t\t\t\t\t<smoothly-table-expandable-cell>\n\t\t\t\t\t\t\t\t\t\td cell\n\t\t\t\t\t\t\t\t\t\t<div slot=\"detail\">nested expandable cell expansion d</div>\n\t\t\t\t\t\t\t\t\t</smoothly-table-expandable-cell>\n\t\t\t\t\t\t\t\t</smoothly-table-row>\n\t\t\t\t\t\t\t</smoothly-table>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</smoothly-table-expandable-cell>\n\t\t\t\t</smoothly-table-row>\n\t\t\t</smoothly-table>,\n\t\t\t<smoothly-table>\n\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t<smoothly-table-header>display</smoothly-table-header>\n\t\t\t\t\t<smoothly-table-header>contents</smoothly-table-header>\n\t\t\t\t</smoothly-table-row>\n\t\t\t\t<smoothly-table-expandable-row>\n\t\t\t\t\t<div class={\"content\"}>\n\t\t\t\t\t\t<smoothly-table-cell>A</smoothly-table-cell>\n\t\t\t\t\t\t<smoothly-table-cell>B</smoothly-table-cell>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div slot=\"detail\">expansion</div>\n\t\t\t\t</smoothly-table-expandable-row>\n\t\t\t</smoothly-table>,\n\t\t\t<span>nested 1 then normal</span>,\n\t\t\t<smoothly-table>\n\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t<smoothly-table-header>A</smoothly-table-header>\n\t\t\t\t\t<smoothly-table-header>B</smoothly-table-header>\n\t\t\t\t</smoothly-table-row>\n\t\t\t\t<smoothly-table-expandable-row>\n\t\t\t\t\t<smoothly-table-cell>a</smoothly-table-cell>\n\t\t\t\t\t<smoothly-table-cell>b</smoothly-table-cell>\n\t\t\t\t\t<div slot=\"detail\">\n\t\t\t\t\t\t<smoothly-table>\n\t\t\t\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t\t\t\t<smoothly-table-header>C</smoothly-table-header>\n\t\t\t\t\t\t\t\t<smoothly-table-header>D</smoothly-table-header>\n\t\t\t\t\t\t\t</smoothly-table-row>\n\t\t\t\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t\t\t\t<smoothly-table-cell>c</smoothly-table-cell>\n\t\t\t\t\t\t\t\t<smoothly-table-cell>d</smoothly-table-cell>\n\t\t\t\t\t\t\t</smoothly-table-row>\n\t\t\t\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t\t\t\t<smoothly-table-cell>ccc</smoothly-table-cell>\n\t\t\t\t\t\t\t\t<smoothly-table-cell>ddd</smoothly-table-cell>\n\t\t\t\t\t\t\t</smoothly-table-row>\n\t\t\t\t\t\t\t<smoothly-table-expandable-row>\n\t\t\t\t\t\t\t\t<smoothly-table-cell>cccc</smoothly-table-cell>\n\t\t\t\t\t\t\t\t<smoothly-table-cell>dddd</smoothly-table-cell>\n\t\t\t\t\t\t\t\t<div slot=\"detail\">CONTENT</div>\n\t\t\t\t\t\t\t</smoothly-table-expandable-row>\n\t\t\t\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t\t\t\t<smoothly-table-cell>ccccc</smoothly-table-cell>\n\t\t\t\t\t\t\t\t<smoothly-table-cell>ddd</smoothly-table-cell>\n\t\t\t\t\t\t\t</smoothly-table-row>\n\t\t\t\t\t\t\t<smoothly-table-expandable-row>\n\t\t\t\t\t\t\t\t<smoothly-table-cell>cccc</smoothly-table-cell>\n\t\t\t\t\t\t\t\t<smoothly-table-cell>dddd</smoothly-table-cell>\n\t\t\t\t\t\t\t\t<div slot=\"detail\">CONTENT</div>\n\t\t\t\t\t\t\t</smoothly-table-expandable-row>\n\t\t\t\t\t\t</smoothly-table>\n\t\t\t\t\t</div>\n\t\t\t\t</smoothly-table-expandable-row>\n\t\t\t</smoothly-table>,\n\t\t\t<span>not nested</span>,\n\t\t\t<smoothly-table>\n\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t<smoothly-table-header>C</smoothly-table-header>\n\t\t\t\t\t<smoothly-table-header>D</smoothly-table-header>\n\t\t\t\t</smoothly-table-row>\n\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t<smoothly-table-cell>c</smoothly-table-cell>\n\t\t\t\t\t<smoothly-table-cell>d</smoothly-table-cell>\n\t\t\t\t</smoothly-table-row>\n\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t<smoothly-table-cell>cc</smoothly-table-cell>\n\t\t\t\t\t<smoothly-table-cell>dd</smoothly-table-cell>\n\t\t\t\t</smoothly-table-row>\n\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t<smoothly-table-cell>ccc</smoothly-table-cell>\n\t\t\t\t\t<smoothly-table-cell>ddd</smoothly-table-cell>\n\t\t\t\t</smoothly-table-row>\n\t\t\t</smoothly-table>,\n\t\t\t<smoothly-table>\n\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t<smoothly-table-header>First name</smoothly-table-header>\n\t\t\t\t\t<smoothly-table-header>Last name</smoothly-table-header>\n\t\t\t\t\t<smoothly-table-header style={{ width: \"1px\" }}>\n\t\t\t\t\t\t<smoothly-icon name=\"alert-outline\" />\n\t\t\t\t\t</smoothly-table-header>\n\t\t\t\t</smoothly-table-row>\n\t\t\t\t<smoothly-table-expandable-row>\n\t\t\t\t\t<smoothly-table-cell>Jessie</smoothly-table-cell>\n\t\t\t\t\t<smoothly-table-cell>Doe</smoothly-table-cell>\n\t\t\t\t\t<smoothly-table-cell></smoothly-table-cell>\n\t\t\t\t\t<div slot=\"detail\">\n\t\t\t\t\t\t<p>This is Jessie</p>\n\t\t\t\t\t</div>\n\t\t\t\t</smoothly-table-expandable-row>\n\t\t\t</smoothly-table>,\n\t\t]\n\t}\n}\n"]}

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

@@ -4,6 +4,8 @@
 	align-items: center;
 	gap: 3rem;
 	padding-bottom: 10rem;
+	margin-left: 1.5rem;
+	margin-right: 1.5rem;
 }
 .content {
 	display: contents;