npm - smoothly - Versions diffs - 1.0.0-alpha.99 → 1.0.0 - Mend

smoothly 1.0.0-alpha.99 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (456) hide show

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

	@@ -1 +1 @@
1	- {"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"]}
1	+ {"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;;gBAE/B,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\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/summary/style.css CHANGED Viewed

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

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

@@ -3,7 +3,7 @@
 	line-height: 1.5rem;
 	white-space: nowrap;
 	padding: 0.3rem 0 0.3rem 1rem;
-	box-shadow: 0 1px 0 0 rgb(var(--smoothly-light-shade));
+	box-shadow: 0 1px 0 0 rgb(var(--smoothly-color-shade));
 }
 :host smoothly-icon {
 	display: none;
@@ -24,7 +24,8 @@ smoothly-table-expandable-row[open] > div :host:last-of-type smoothly-icon {
 	transform: rotate(90deg);
 }
 :host > div {
-	display: flex;
+	display: grid;
+	grid-template-columns: 1fr auto;
 	align-items: center;
 }
 :host > div > div {
@@ -35,7 +36,6 @@ smoothly-table[align=bottom] :host {
 }
 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.map CHANGED Viewed

	@@ -1 +1 @@
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"]}
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\tprice?: number\n\tnested?: Cat\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 CHANGED Viewed

@@ -1,11 +1,11 @@
-import { h } from "@stencil/core";
-import * as selectively from "selectively";
+import { h, Host } from "@stencil/core";
+import { selectively } from "selectively";
 import * as http from "cloudly-http";
 import { Selector } from "../../Selector";
 export class TableDemoFiltered {
   constructor() {
     this.criteria = {};
-    this.data = undefined;
+    this.cats = undefined;
     this.selector = Selector.create("breed");
   }
   onFilterUpdate(event) {
@@ -17,17 +17,26 @@ export class TableDemoFiltered {
     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);
+    const response = await http.fetch("https://catfact.ninja/breeds?limit=15");
+    this.cats =
+      response.status == 200 &&
+        (await response.body).data.map((cat) => {
+          var _a, _b;
+          return (Object.assign(Object.assign({}, cat), { price: [...cat.breed].reduce((r, c) => r + c.charCodeAt(0), 0), nested: Object.assign(Object.assign({}, cat), { names: (_a = names[cat.country]) !== null && _a !== void 0 ? _a : [] }), names: (_b = names[cat.country]) !== null && _b !== void 0 ? _b : [] }));
+        });
   }
   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)))))),
-      ];
+    const cats = this.cats && selectively.filter(this.criteria, this.cats);
+    return (h(Host, null, h("smoothly-filter", null, h("smoothly-filter-toggle", { properties: { ["nested.pattern"]: "Ticked", breed: "" }, icon: "add", toolTip: "Nested Ticked", slot: "bar" }), h("smoothly-filter-toggle", { properties: { pattern: "Ticked", breed: "" }, icon: "paw", toolTip: "Ticked cats", slot: "bar" }), h("smoothly-filter-toggle", { properties: { breed: "Bombay", pattern: "Solid" }, icon: "radio-button-on", toolTip: "Solid bombay cats", slot: "bar" }), h("smoothly-filter-toggle", { properties: { pattern: "Colorpoint" }, not: true, active: true, icon: "alert", toolTip: "Colored cats", slot: "bar" }), h("smoothly-filter-picker", { label: "coat", property: "nested.coat", slot: "bar", multiple: false }, this.cats &&
+      this.cats.map(cat => {
+        var _a;
+        return ((_a = cat.nested) === null || _a === void 0 ? void 0 : _a.coat) && (h("smoothly-picker-option", { value: cat.nested.coat }, cat.nested.coat));
+      })), h("div", { slot: "detail" }, h("smoothly-form", { looks: "border" }, h("smoothly-filter-picker", { label: "coat", property: "nested.coat", multiple: true }, this.cats &&
+      this.cats.map(cat => {
+        var _a;
+        return ((_a = cat.nested) === null || _a === void 0 ? void 0 : _a.coat) && (h("smoothly-picker-option", { value: cat.nested.coat }, cat.nested.coat));
+      })), h("smoothly-filter-picker", { label: "breed", property: "breed", multiple: false }, this.cats &&
+      this.cats.map(cat => cat.breed && h("smoothly-picker-option", { value: cat.breed }, cat.breed))), h("smoothly-filter-picker", { label: "names", property: "nested.names", multiple: true, type: "array" }, Object.values(names).flatMap(names => names.map(name => h("smoothly-picker-option", { value: name }, name)))), h("smoothly-filter-input", { property: "coat", placeholder: "ex. Short" }), h("smoothly-filter-input", { property: "nested.coat", placeholder: "ex. Rex" })))), !cats ? ("Failed to load data.") : (h("smoothly-table", null, h("smoothly-table-row", null, h("smoothly-table-header", null, this.selector.render(cats)), h("smoothly-table-header", null, "Breed"), h("smoothly-table-header", null, "Coat"), h("smoothly-table-header", null, "Price")), cats.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)), h("smoothly-table-cell", null, h("smoothly-display", { type: "price", value: cat.price, currency: "SEK" }))))), h("smoothly-table-footer", null, h("td", { colSpan: 5 }, h("smoothly-display", { type: "text", value: `Selected: ${this.selector.selected.length != 0 ? this.selector.selected.length : cats ? cats.length : "?"}` })))))));
   }
   static get is() { return "smoothly-table-demo-filtered"; }
   static get encapsulation() { return "scoped"; }
@@ -44,13 +53,13 @@ export class TableDemoFiltered {
   static get states() {
     return {
       "criteria": {},
-      "data": {},
+      "cats": {},
       "selector": {}
     };
   }
   static get listeners() {
     return [{
-        "name": "filters",
+        "name": "smoothlyFilter",
         "method": "onFilterUpdate",
         "target": undefined,
         "capture": false,
@@ -59,9 +68,15 @@ export class TableDemoFiltered {
         "name": "smoothlyInput",
         "method": "smoothlyInputHandler",
         "target": undefined,
-        "capture": true,
+        "capture": false,
         "passive": false
       }];
   }
 }
+const names = {
+  "United States": ["bill", "bob", "brad", "joe", "molly"],
+  Australia: ["nigel", "bruce", "sheila", "brad", "shane"],
+  "United Kingdom": ["nigel", "james", "molly", "shane", "bob"],
+  Greece: ["dionysius", "demetrius", "polikarpos"],
+};
 //# sourceMappingURL=index.js.map

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

	@@ -1 +1 @@
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(\"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"]}
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, Host, Listen, State } from \"@stencil/core\"\nimport { selectively } from \"selectively\"\nimport * as http from \"cloudly-http\"\nimport { Selector } from \"../../Selector\"\nimport { Cat } 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: selectively.Criteria = {}\n\t@State() cats?: Cat[] \| false\n\t@State() selector: Selector<Cat> = Selector.create(\"breed\")\n\t@Listen(\"smoothlyFilter\")\n\tonFilterUpdate(event: CustomEvent<selectively.Criteria>) {\n\t\tevent.stopPropagation()\n\t\tthis.criteria = event.detail\n\t}\n\t@Listen(\"smoothlyInput\")\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=15\")\n\t\tthis.cats =\n\t\t\tresponse.status == 200 &&\n\t\t\t(await response.body).data.map((cat: any) => ({\n\t\t\t\t...cat,\n\t\t\t\tprice: [...cat.breed].reduce((r, c) => r + c.charCodeAt(0), 0),\n\t\t\t\tnested: { ...cat, names: names[cat.country] ?? [] },\n\t\t\t\tnames: names[cat.country] ?? [],\n\t\t\t}))\n\t}\n\n\trender() {\n\t\tconst cats = this.cats && selectively.filter(this.criteria, this.cats)\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<smoothly-filter>\n\t\t\t\t\t<smoothly-filter-toggle\n\t\t\t\t\t\tproperties={{ [\"nested.pattern\"]: \"Ticked\", breed: \"\" }}\n\t\t\t\t\t\ticon=\"add\"\n\t\t\t\t\t\ttoolTip=\"Nested Ticked\"\n\t\t\t\t\t\tslot=\"bar\"\n\t\t\t\t\t/>\n\t\t\t\t\t<smoothly-filter-toggle\n\t\t\t\t\t\tproperties={{ pattern: \"Ticked\", breed: \"\" }}\n\t\t\t\t\t\ticon=\"paw\"\n\t\t\t\t\t\ttoolTip=\"Ticked cats\"\n\t\t\t\t\t\tslot=\"bar\"\n\t\t\t\t\t/>\n\t\t\t\t\t<smoothly-filter-toggle\n\t\t\t\t\t\tproperties={{ breed: \"Bombay\", pattern: \"Solid\" }}\n\t\t\t\t\t\ticon=\"radio-button-on\"\n\t\t\t\t\t\ttoolTip=\"Solid bombay cats\"\n\t\t\t\t\t\tslot=\"bar\"\n\t\t\t\t\t/>\n\t\t\t\t\t<smoothly-filter-toggle\n\t\t\t\t\t\tproperties={{ pattern: \"Colorpoint\" }}\n\t\t\t\t\t\tnot\n\t\t\t\t\t\tactive\n\t\t\t\t\t\ticon=\"alert\"\n\t\t\t\t\t\ttoolTip=\"Colored cats\"\n\t\t\t\t\t\tslot=\"bar\"\n\t\t\t\t\t/>\n\t\t\t\t\t<smoothly-filter-picker label=\"coat\" property=\"nested.coat\" slot=\"bar\" multiple={false}>\n\t\t\t\t\t\t{this.cats &&\n\t\t\t\t\t\t\tthis.cats.map(\n\t\t\t\t\t\t\t\tcat =>\n\t\t\t\t\t\t\t\t\tcat.nested?.coat && (\n\t\t\t\t\t\t\t\t\t\t<smoothly-picker-option value={cat.nested.coat}>{cat.nested.coat}</smoothly-picker-option>\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t</smoothly-filter-picker>\n\t\t\t\t\t<div slot=\"detail\">\n\t\t\t\t\t\t<smoothly-form looks=\"border\">\n\t\t\t\t\t\t\t<smoothly-filter-picker label=\"coat\" property=\"nested.coat\" multiple>\n\t\t\t\t\t\t\t\t{this.cats &&\n\t\t\t\t\t\t\t\t\tthis.cats.map(\n\t\t\t\t\t\t\t\t\t\tcat =>\n\t\t\t\t\t\t\t\t\t\t\tcat.nested?.coat && (\n\t\t\t\t\t\t\t\t\t\t\t\t<smoothly-picker-option value={cat.nested.coat}>{cat.nested.coat}</smoothly-picker-option>\n\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</smoothly-filter-picker>\n\t\t\t\t\t\t\t<smoothly-filter-picker label=\"breed\" property=\"breed\" multiple={false}>\n\t\t\t\t\t\t\t\t{this.cats &&\n\t\t\t\t\t\t\t\t\tthis.cats.map(\n\t\t\t\t\t\t\t\t\t\tcat => cat.breed && <smoothly-picker-option value={cat.breed}>{cat.breed}</smoothly-picker-option>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</smoothly-filter-picker>\n\t\t\t\t\t\t\t<smoothly-filter-picker label=\"names\" property=\"nested.names\" multiple={true} type=\"array\">\n\t\t\t\t\t\t\t\t{Object.values(names).flatMap(names =>\n\t\t\t\t\t\t\t\t\tnames.map(name => <smoothly-picker-option value={name}>{name}</smoothly-picker-option>)\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</smoothly-filter-picker>\n\n\t\t\t\t\t\t\t<smoothly-filter-input property=\"coat\" placeholder=\"ex. Short\" />\n\t\t\t\t\t\t\t<smoothly-filter-input property=\"nested.coat\" placeholder=\"ex. Rex\" />\n\t\t\t\t\t\t</smoothly-form>\n\t\t\t\t\t</div>\n\t\t\t\t</smoothly-filter>\n\t\t\t\t{!cats ? (\n\t\t\t\t\t\"Failed to load data.\"\n\t\t\t\t) : (\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(cats)}</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\t<smoothly-table-header>Price</smoothly-table-header>\n\t\t\t\t\t\t</smoothly-table-row>\n\t\t\t\t\t\t{cats.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\t<smoothly-table-cell>\n\t\t\t\t\t\t\t\t\t<smoothly-display type=\"price\" value={cat.price} currency=\"SEK\"></smoothly-display>\n\t\t\t\t\t\t\t\t</smoothly-table-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\t<smoothly-table-footer>\n\t\t\t\t\t\t\t<td colSpan={5}>\n\t\t\t\t\t\t\t\t<smoothly-display\n\t\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\t\tvalue={`Selected: ${\n\t\t\t\t\t\t\t\t\t\tthis.selector.selected.length != 0 ? this.selector.selected.length : cats ? cats.length : \"?\"\n\t\t\t\t\t\t\t\t\t}`}></smoothly-display>\n\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t</smoothly-table-footer>\n\t\t\t\t\t</smoothly-table>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t)\n\t}\n}\nconst names: Record<string, string[]> = {\n\t\"United States\": [\"bill\", \"bob\", \"brad\", \"joe\", \"molly\"],\n\tAustralia: [\"nigel\", \"bruce\", \"sheila\", \"brad\", \"shane\"],\n\t\"United Kingdom\": [\"nigel\", \"james\", \"molly\", \"shane\", \"bob\"],\n\tGreece: [\"dionysius\", \"demetrius\", \"polikarpos\"],\n}\n"]}

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

@@ -1,3 +1,12 @@
 :host {
 	display: block;
+	width: 80%;
+}
+smoothly-table-cell:nth-of-type(2) {
+	text-align: right;
+}
+td {
+	padding-left: 1.5em;
 }

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

@@ -1,19 +1,7 @@
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 export class TableDemo {
   render() {
-    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" }, 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"))),
-    ];
+    return (h(Host, null, h("h4", null, "Demo table 1: Filtered & Checked Table"), " ", h("smoothly-lazy", { content: h("smoothly-table-demo-filtered", null) }), h("h4", null, "Demo table 2"), " ", h("smoothly-table-testing", null), " ", h("h4", null, "Demo table 3"), 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("h4", null, "Demo table 4"), 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("h4", null, "Demo table 5"), 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, "nested expandable 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, h("span", null, "nested expandable cells"), 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("h4", null, "Demo table 6"), 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("h4", null, "Demo table 7"), " ", 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("h4", null, "Demo table 8"), " ", 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("h4", null, "Demo table 9"), 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")))), h("h4", null, "Demo table 9 - Lazy expansion rows"), h("smoothly-table", null, h("smoothly-table-row", null, h("smoothly-table-header", null, "Company")), h("smoothly-table-expandable-row", null, h("smoothly-table-cell", null, "Proquse"), h("smoothly-lazy", { slot: "detail", content: h("img", { src: "https://brand.proquse.com/logo/proquse-black.svg", alt: "Proquse Logotype." }) })), h("smoothly-table-expandable-row", null, h("smoothly-table-cell", null, "Pax2Pay"), h("smoothly-lazy", { slot: "detail", content: () => (h("img", { src: "https://dash.pax2pay.app/assets/pax2pay-dark-horizontal.svg", alt: "Pax2Pay Logotype." })) }))), h("h4", null, "Demo table 10 - Lazy expansion cells"), h("smoothly-table", null, h("smoothly-table-row", null, h("smoothly-table-header", null, "Company")), h("smoothly-table-row", null, h("smoothly-table-expandable-cell", null, "Proquse", h("smoothly-lazy", { slot: "detail", content: h("img", { src: "https://brand.proquse.com/logo/proquse-black.svg", alt: "Proquse Logotype." }) }))), h("smoothly-table-row", null, h("smoothly-table-expandable-cell", null, "Pax2Pay", h("smoothly-lazy", { slot: "detail", content: () => (h("img", { src: "https://dash.pax2pay.app/assets/pax2pay-dark-horizontal.svg", alt: "Pax2Pay Logotype." })) }))))));
   }
   static get is() { return "smoothly-table-demo"; }
   static get encapsulation() { return "scoped"; }

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

	@@ -1 +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\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</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\">\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]\n\t}\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/table/demo/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Host } 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<Host>\n\t\t\t\t<h4>Demo table 1: Filtered & Checked Table</h4> <smoothly-lazy content={<smoothly-table-demo-filtered />} />\n\t\t\t\t<h4>Demo table 2</h4> <smoothly-table-testing></smoothly-table-testing> <h4>Demo table 3</h4>\n\t\t\t\t<smoothly-table>\n\t\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t\t<smoothly-table-header>Header A</smoothly-table-header>\n\t\t\t\t\t\t<smoothly-table-header>Header B</smoothly-table-header>\n\t\t\t\t\t\t<smoothly-table-header>Header C</smoothly-table-header>\n\t\t\t\t\t\t<smoothly-table-header>Header D</smoothly-table-header>\n\t\t\t\t\t</smoothly-table-row>\n\t\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t\t<smoothly-table-expandable-cell>\n\t\t\t\t\t\t\tnormal row (exp.cell)\n\t\t\t\t\t\t\t<div slot=\"detail\">expandable cell 1 content</div>\n\t\t\t\t\t\t</smoothly-table-expandable-cell>\n\t\t\t\t\t\t<smoothly-table-expandable-cell>\n\t\t\t\t\t\t\texpandable cell\n\t\t\t\t\t\t\t<div slot=\"detail\">expandable cell 2 content</div>\n\t\t\t\t\t\t</smoothly-table-expandable-cell>\n\t\t\t\t\t\t<smoothly-table-expandable-cell>\n\t\t\t\t\t\t\texpandable cell\n\t\t\t\t\t\t\t<div slot=\"detail\">expandable cell 3 content</div>\n\t\t\t\t\t\t</smoothly-table-expandable-cell>\n\t\t\t\t\t\t<smoothly-table-expandable-cell>\n\t\t\t\t\t\t\texpandable cell\n\t\t\t\t\t\t\t<div slot=\"detail\">expandable cell 4 content</div>\n\t\t\t\t\t\t</smoothly-table-expandable-cell>\n\t\t\t\t\t</smoothly-table-row>\n\t\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t\t<smoothly-table-cell>normal row (nor.cell)\"</smoothly-table-cell>\n\t\t\t\t\t\t<smoothly-table-cell>normal cell</smoothly-table-cell>\n\t\t\t\t\t\t<smoothly-table-expandable-cell>\n\t\t\t\t\t\t\texpandable cell\n\t\t\t\t\t\t\t<div slot=\"detail\">expandable cell details.</div>\n\t\t\t\t\t\t</smoothly-table-expandable-cell>\n\t\t\t\t\t\t<smoothly-table-expandable-cell>\n\t\t\t\t\t\t\texpandable cell\n\t\t\t\t\t\t\t<div slot=\"detail\">expandable cell details.</div>\n\t\t\t\t\t\t</smoothly-table-expandable-cell>\n\t\t\t\t\t</smoothly-table-row>\n\t\t\t\t\t<smoothly-table-expandable-row>\n\t\t\t\t\t\t<smoothly-table-cell>expandable row (nor.cell)</smoothly-table-cell>\n\t\t\t\t\t\t<smoothly-table-cell>Normal cell</smoothly-table-cell>\n\t\t\t\t\t\t<smoothly-table-cell>normal cell</smoothly-table-cell>\n\t\t\t\t\t\t<smoothly-table-cell>Normal cell</smoothly-table-cell>\n\t\t\t\t\t\t<div slot=\"detail\">expandable row content</div>\n\t\t\t\t\t</smoothly-table-expandable-row>\n\t\t\t\t</smoothly-table>\n\t\t\t\t<h4>Demo table 4</h4>\n\t\t\t\t<smoothly-table>\n\t\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t\t<smoothly-table-header>Header A</smoothly-table-header>\n\t\t\t\t\t\t<smoothly-table-expandable-cell>\n\t\t\t\t\t\t\tHeader expansion\n\t\t\t\t\t\t\t<div slot=\"detail\">Expansion content</div>\n\t\t\t\t\t\t</smoothly-table-expandable-cell>\n\t\t\t\t\t</smoothly-table-row>\n\t\t\t\t\t<smoothly-table-expandable-row>\n\t\t\t\t\t\t<smoothly-table-cell>A Content</smoothly-table-cell>\n\t\t\t\t\t\t<smoothly-table-cell>Expansion cell</smoothly-table-cell>\n\t\t\t\t\t\t<div slot=\"detail\">\n\t\t\t\t\t\t\t<smoothly-tab-switch>\n\t\t\t\t\t\t\t\t<smoothly-tab label=\"innertable 1\" open={true}>\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>Header B</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>B Content</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</smoothly-tab>\n\t\t\t\t\t\t\t\t<smoothly-tab label=\"innertable 2\">\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>Header C</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>C Content</smoothly-table-cell>\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</smoothly-tab>\n\t\t\t\t\t\t\t</smoothly-tab-switch>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</smoothly-table-expandable-row>\n\t\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t\t<smoothly-table-cell>A Content</smoothly-table-cell>\n\t\t\t\t\t\t<smoothly-table-expandable-cell>\n\t\t\t\t\t\t\tExpandable cell\n\t\t\t\t\t\t\t<div slot=\"detail\">Expansion content</div>\n\t\t\t\t\t\t</smoothly-table-expandable-cell>\n\t\t\t\t\t</smoothly-table-row>\n\t\t\t\t</smoothly-table>\n\t\t\t\t<h4>Demo table 5</h4>\n\t\t\t\t<smoothly-table>\n\t\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t\t<smoothly-table-header>A</smoothly-table-header>\n\t\t\t\t\t\t<smoothly-table-header>B</smoothly-table-header>\n\t\t\t\t\t</smoothly-table-row>\n\t\t\t\t\t<smoothly-table-expandable-row>\n\t\t\t\t\t\t<smoothly-table-cell>nested expandable row</smoothly-table-cell>\n\t\t\t\t\t\t<smoothly-table-cell>b row</smoothly-table-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-expandable-row>\n\t\t\t\t\t\t\t\t\t<smoothly-table-cell>c</smoothly-table-cell>\n\t\t\t\t\t\t\t\t\t<smoothly-table-cell>d</smoothly-table-cell>\n\t\t\t\t\t\t\t\t\t<div slot=\"detail\">\n\t\t\t\t\t\t\t\t\t\t<smoothly-table>\n\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-header>E</smoothly-table-header>\n\t\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\t</smoothly-table-row>\n\t\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\t<smoothly-table-cell>e row</smoothly-table-cell>\n\t\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\t<div slot=\"detail\">nested expandable row expansion e f</div>\n\t\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</smoothly-table>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</smoothly-table-expandable-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-row>\n\t\t\t\t\t<smoothly-table-expandable-row>\n\t\t\t\t\t\t<smoothly-table-cell>\n\t\t\t\t\t\t\t<span>one</span>\n\t\t\t\t\t\t\t<span>two</span>\n\t\t\t\t\t\t\t<span>three</span>\n\t\t\t\t\t\t</smoothly-table-cell>\n\t\t\t\t\t\t<smoothly-table-cell>\n\t\t\t\t\t\t\tfive<smoothly-icon name=\"paper-plane-sharp\" size=\"small\"></smoothly-icon>\n\t\t\t\t\t\t</smoothly-table-cell>\n\t\t\t\t\t\t<div slot=\"detail\">four</div>\n\t\t\t\t\t</smoothly-table-expandable-row>\n\t\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t\t<smoothly-table-expandable-cell>\n\t\t\t\t\t\t\t<span>nested expandable cells</span>\n\t\t\t\t\t\t\t<div slot=\"detail\">\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>E</smoothly-table-header>\n\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</smoothly-table-row>\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-expandable-cell>\n\t\t\t\t\t\t\t\t\t\t\te cell\n\t\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\t<smoothly-table>\n\t\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\t<smoothly-table-header>G</smoothly-table-header>\n\t\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\t</smoothly-table-row>\n\t\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\t<smoothly-table-expandable-cell>\n\t\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\t<div slot=\"detail\">nested expandable cell expansion g</div>\n\t\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\t<smoothly-table-expandable-cell>\n\t\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\t<div slot=\"detail\">nested expandable cell expansion h</div>\n\t\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-row>\n\t\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</div>\n\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<smoothly-table-expandable-cell>\n\t\t\t\t\t\t\t\t\t\t\tf cell\n\t\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\t</smoothly-table-expandable-cell>\n\t\t\t\t\t\t\t\t\t</smoothly-table-row>\n\t\t\t\t\t\t\t\t</smoothly-table>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</smoothly-table-expandable-cell>\n\t\t\t\t\t\t<smoothly-table-expandable-cell>\n\t\t\t\t\t\t\tb cell\n\t\t\t\t\t\t\t<div slot=\"detail\">\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>C</smoothly-table-header>\n\t\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\t</smoothly-table-row>\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-expandable-cell>\n\t\t\t\t\t\t\t\t\t\t\tc cell\n\t\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\t</smoothly-table-expandable-cell>\n\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\td cell\n\t\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\t</smoothly-table-expandable-cell>\n\t\t\t\t\t\t\t\t\t</smoothly-table-row>\n\t\t\t\t\t\t\t\t</smoothly-table>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</smoothly-table-expandable-cell>\n\t\t\t\t\t</smoothly-table-row>\n\t\t\t\t</smoothly-table>\n\t\t\t\t<h4>Demo table 6</h4>\n\t\t\t\t<smoothly-table>\n\t\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t\t<smoothly-table-header>display</smoothly-table-header>\n\t\t\t\t\t\t<smoothly-table-header>contents</smoothly-table-header>\n\t\t\t\t\t</smoothly-table-row>\n\t\t\t\t\t<smoothly-table-expandable-row>\n\t\t\t\t\t\t<div class={\"content\"}>\n\t\t\t\t\t\t\t<smoothly-table-cell>A</smoothly-table-cell>\n\t\t\t\t\t\t\t<smoothly-table-cell>B</smoothly-table-cell>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div slot=\"detail\">expansion</div>\n\t\t\t\t\t</smoothly-table-expandable-row>\n\t\t\t\t</smoothly-table>\n\t\t\t\t<h4>Demo table 7</h4> <span>nested 1 then normal</span>\n\t\t\t\t<smoothly-table>\n\t\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t\t<smoothly-table-header>A</smoothly-table-header>\n\t\t\t\t\t\t<smoothly-table-header>B</smoothly-table-header>\n\t\t\t\t\t</smoothly-table-row>\n\t\t\t\t\t<smoothly-table-expandable-row>\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\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-cell>c</smoothly-table-cell>\n\t\t\t\t\t\t\t\t\t<smoothly-table-cell>d</smoothly-table-cell>\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-cell>ccc</smoothly-table-cell>\n\t\t\t\t\t\t\t\t\t<smoothly-table-cell>ddd</smoothly-table-cell>\n\t\t\t\t\t\t\t\t</smoothly-table-row>\n\t\t\t\t\t\t\t\t<smoothly-table-expandable-row>\n\t\t\t\t\t\t\t\t\t<smoothly-table-cell>cccc</smoothly-table-cell>\n\t\t\t\t\t\t\t\t\t<smoothly-table-cell>dddd</smoothly-table-cell>\n\t\t\t\t\t\t\t\t\t<div slot=\"detail\">CONTENT</div>\n\t\t\t\t\t\t\t\t</smoothly-table-expandable-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-cell>ccccc</smoothly-table-cell>\n\t\t\t\t\t\t\t\t\t<smoothly-table-cell>ddd</smoothly-table-cell>\n\t\t\t\t\t\t\t\t</smoothly-table-row>\n\t\t\t\t\t\t\t\t<smoothly-table-expandable-row>\n\t\t\t\t\t\t\t\t\t<smoothly-table-cell>cccc</smoothly-table-cell>\n\t\t\t\t\t\t\t\t\t<smoothly-table-cell>dddd</smoothly-table-cell>\n\t\t\t\t\t\t\t\t\t<div slot=\"detail\">CONTENT</div>\n\t\t\t\t\t\t\t\t</smoothly-table-expandable-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-row>\n\t\t\t\t</smoothly-table>\n\t\t\t\t<h4>Demo table 8</h4> <span>not nested</span>\n\t\t\t\t<smoothly-table>\n\t\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t\t<smoothly-table-header>C</smoothly-table-header>\n\t\t\t\t\t\t<smoothly-table-header>D</smoothly-table-header>\n\t\t\t\t\t</smoothly-table-row>\n\t\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t\t<smoothly-table-cell>c</smoothly-table-cell>\n\t\t\t\t\t\t<smoothly-table-cell>d</smoothly-table-cell>\n\t\t\t\t\t</smoothly-table-row>\n\t\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t\t<smoothly-table-cell>cc</smoothly-table-cell>\n\t\t\t\t\t\t<smoothly-table-cell>dd</smoothly-table-cell>\n\t\t\t\t\t</smoothly-table-row>\n\t\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t\t<smoothly-table-cell>ccc</smoothly-table-cell>\n\t\t\t\t\t\t<smoothly-table-cell>ddd</smoothly-table-cell>\n\t\t\t\t\t</smoothly-table-row>\n\t\t\t\t</smoothly-table>\n\t\t\t\t<h4>Demo table 9</h4>\n\t\t\t\t<smoothly-table>\n\t\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t\t<smoothly-table-header>First name</smoothly-table-header>\n\t\t\t\t\t\t<smoothly-table-header>Last name</smoothly-table-header>\n\t\t\t\t\t\t<smoothly-table-header style={{ width: \"1px\" }}>\n\t\t\t\t\t\t\t<smoothly-icon name=\"alert-outline\" />\n\t\t\t\t\t\t</smoothly-table-header>\n\t\t\t\t\t</smoothly-table-row>\n\t\t\t\t\t<smoothly-table-expandable-row>\n\t\t\t\t\t\t<smoothly-table-cell>Jessie</smoothly-table-cell>\n\t\t\t\t\t\t<smoothly-table-cell>Doe</smoothly-table-cell>\n\t\t\t\t\t\t<smoothly-table-cell></smoothly-table-cell>\n\t\t\t\t\t\t<div slot=\"detail\">\n\t\t\t\t\t\t\t<p>This is Jessie</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</smoothly-table-expandable-row>\n\t\t\t\t</smoothly-table>\n\t\t\t\t<h4>Demo table 9 - Lazy expansion rows</h4>\n\t\t\t\t<smoothly-table>\n\t\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t\t<smoothly-table-header>Company</smoothly-table-header>\n\t\t\t\t\t</smoothly-table-row>\n\t\t\t\t\t<smoothly-table-expandable-row>\n\t\t\t\t\t\t<smoothly-table-cell>Proquse</smoothly-table-cell>\n\t\t\t\t\t\t<smoothly-lazy\n\t\t\t\t\t\t\tslot={\"detail\"}\n\t\t\t\t\t\t\tcontent={<img src={\"https://brand.proquse.com/logo/proquse-black.svg\"} alt={\"Proquse Logotype.\"} />}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</smoothly-table-expandable-row>\n\t\t\t\t\t<smoothly-table-expandable-row>\n\t\t\t\t\t\t<smoothly-table-cell>Pax2Pay</smoothly-table-cell>\n\t\t\t\t\t\t<smoothly-lazy\n\t\t\t\t\t\t\tslot={\"detail\"}\n\t\t\t\t\t\t\tcontent={() => (\n\t\t\t\t\t\t\t\t<img src={\"https://dash.pax2pay.app/assets/pax2pay-dark-horizontal.svg\"} alt={\"Pax2Pay Logotype.\"} />\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</smoothly-table-expandable-row>\n\t\t\t\t</smoothly-table>\n\t\t\t\t<h4>Demo table 10 - Lazy expansion cells</h4>\n\t\t\t\t<smoothly-table>\n\t\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t\t<smoothly-table-header>Company</smoothly-table-header>\n\t\t\t\t\t</smoothly-table-row>\n\t\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t\t<smoothly-table-expandable-cell>\n\t\t\t\t\t\t\tProquse\n\t\t\t\t\t\t\t<smoothly-lazy\n\t\t\t\t\t\t\t\tslot={\"detail\"}\n\t\t\t\t\t\t\t\tcontent={<img src={\"https://brand.proquse.com/logo/proquse-black.svg\"} alt={\"Proquse Logotype.\"} />}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</smoothly-table-expandable-cell>\n\t\t\t\t\t</smoothly-table-row>\n\t\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t\t<smoothly-table-expandable-cell>\n\t\t\t\t\t\t\tPax2Pay\n\t\t\t\t\t\t\t<smoothly-lazy\n\t\t\t\t\t\t\t\tslot={\"detail\"}\n\t\t\t\t\t\t\t\tcontent={() => (\n\t\t\t\t\t\t\t\t\t<img src={\"https://dash.pax2pay.app/assets/pax2pay-dark-horizontal.svg\"} alt={\"Pax2Pay Logotype.\"} />\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</smoothly-table-expandable-cell>\n\t\t\t\t\t</smoothly-table-row>\n\t\t\t\t</smoothly-table>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

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

@@ -7,6 +7,11 @@
 	margin-left: 1.5rem;
 	margin-right: 1.5rem;
 }
 .content {
 	display: contents;
 }
+smoothly-lazy {
+	width: 80%;
+}

package/dist/collection/components/table/demo/testing/data.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"data.js","sourceRoot":"","sources":["../../../../../src/components/table/demo/testing/data.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,IAAI,GAAG;EACnB;IACC,IAAI,EAAE,KAAK;IACX,IAAI,EAAE,OAAO;IACb,GAAG,EAAE,CAAC;GACN;EACD;IACC,IAAI,EAAE,KAAK;IACX,IAAI,EAAE,QAAQ;IACd,GAAG,EAAE,CAAC;GACN;EACD;IACC,IAAI,EAAE,KAAK;IACX,IAAI,EAAE,OAAO;IACb,GAAG,EAAE,CAAC;GACN;EACD;IACC,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,QAAQ;IACd,GAAG,EAAE,CAAC;GACN;EACD;IACC,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,OAAO;IACb,GAAG,EAAE,CAAC;GACN;CACD,CAAA","sourcesContent":["export const data = [\n\t{\n\t\ttype: \"cat\",\n\t\tname: \"Lazie\",\n\t\tage: 3,\n\t},\n\t{\n\t\ttype: \"dog\",\n\t\tname: \"Jessie\",\n\t\tage: 8,\n\t},\n\t{\n\t\ttype: \"cat\",\n\t\tname: \"Snooz\",\n\t\tage: 5,\n\t},\n\t{\n\t\ttype: \"bird\",\n\t\tname: \"Squeak\",\n\t\tage: 1,\n\t},\n\t{\n\t\ttype: \"bird\",\n\t\tname: \"Quirk\",\n\t\tage: 2,\n\t},\n]\n"]}

package/dist/collection/components/table/demo/testing/index.js ADDED Viewed

@@ -0,0 +1,28 @@
+import { h, Host } from "@stencil/core";
+import { data } from "./data";
+export class SmoothlyTableTesting {
+  constructor() {
+    this.counter = 0;
+  }
+  render() {
+    return (h(Host, null, h("smoothly-table", { color: "dark" }, h("smoothly-table-row", null, h("smoothly-table-header", null, "Type"), h("smoothly-table-header", null, "Name"), h("smoothly-table-header", null, "Age")), data.map(animal => (h("smoothly-table-expandable-row", null, h("smoothly-table-cell", null, animal.type), h("smoothly-table-cell", null, animal.name), h("smoothly-table-cell", null, animal.age), h("smoothly-form", { slot: "detail", onSmoothlyFormSubmit: () => this.counter++, looks: "line" }, h("smoothly-input", { value: animal.type }, "Type"), h("smoothly-input", { value: animal.name }, "Name"), h("smoothly-input", null, animal.age), h("smoothly-submit", { slot: "submit" }, "Submit!"))))), data.map(animal => (h("smoothly-table-row", null, h("smoothly-table-cell", null, animal.type), h("smoothly-table-expandable-cell", null, animal.name, h("smoothly-form", { slot: "detail", onSmoothlyFormSubmit: () => this.counter++, looks: "line" }, h("smoothly-input", { value: animal.name }, "Name"), h("smoothly-submit", { slot: "submit" }, "Submit!"))), h("smoothly-table-expandable-cell", null, animal.age, h("smoothly-form", { slot: "detail", onSmoothlyFormSubmit: () => this.counter++, looks: "line" }, h("smoothly-input", { value: animal.type }, "Type"), h("smoothly-input", { value: animal.name }, "Name"), h("smoothly-input", null, animal.age), h("smoothly-submit", { slot: "submit" }, "Submit!")))))), h("smoothly-table-footer", null, h("td", { colSpan: 2 }, h("div", { class: "footer" }, "Currently viewing content from:", h("smoothly-display", { type: "date", value: "2023-10-12" }))), h("smoothly-table-header", null, "Total age: " + data.reduce((r, a) => r + a.age, 0))))));
+  }
+  static get is() { return "smoothly-table-testing"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get states() {
+    return {
+      "counter": {}
+    };
+  }
+}
+//# sourceMappingURL=index.js.map

package/dist/collection/components/table/demo/testing/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/table/demo/testing/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACzD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAM7B,MAAM,OAAO,oBAAoB;;mBACb,CAAC;;EACpB,MAAM;IACL,OAAO,CACN,EAAC,IAAI;MACJ,sBAAgB,KAAK,EAAC,MAAM;QAC3B;UACC,wCAAmD;UACnD,wCAAmD;UACnD,uCAAkD,CAC9B;QAEpB,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CACnB;UACC,+BAAsB,MAAM,CAAC,IAAI,CAAuB;UACxD,+BAAsB,MAAM,CAAC,IAAI,CAAuB;UACxD,+BAAsB,MAAM,CAAC,GAAG,CAAuB;UACvD,qBAAe,IAAI,EAAC,QAAQ,EAAC,oBAAoB,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,EAAE,KAAK,EAAC,MAAM;YACpF,sBAAgB,KAAK,EAAE,MAAM,CAAC,IAAI,WAAuB;YACzD,sBAAgB,KAAK,EAAE,MAAM,CAAC,IAAI,WAAuB;YACzD,0BAAiB,MAAM,CAAC,GAAG,CAAkB;YAC7C,uBAAiB,IAAI,EAAC,QAAQ,cAA0B,CACzC,CACe,CAChC,CAAC;QACD,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CACnB;UACC,+BAAsB,MAAM,CAAC,IAAI,CAAuB;UACxD;YACE,MAAM,CAAC,IAAI;YACZ,qBAAe,IAAI,EAAC,QAAQ,EAAC,oBAAoB,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,EAAE,KAAK,EAAC,MAAM;cACpF,sBAAgB,KAAK,EAAE,MAAM,CAAC,IAAI,WAAuB;cACzD,uBAAiB,IAAI,EAAC,QAAQ,cAA0B,CACzC,CACgB;UACjC;YACE,MAAM,CAAC,GAAG;YACX,qBAAe,IAAI,EAAC,QAAQ,EAAC,oBAAoB,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,EAAE,KAAK,EAAC,MAAM;cACpF,sBAAgB,KAAK,EAAE,MAAM,CAAC,IAAI,WAAuB;cACzD,sBAAgB,KAAK,EAAE,MAAM,CAAC,IAAI,WAAuB;cACzD,0BAAiB,MAAM,CAAC,GAAG,CAAkB;cAC7C,uBAAiB,IAAI,EAAC,QAAQ,cAA0B,CACzC,CACgB,CACb,CACrB,CAAC;QACF;UACC,UAAI,OAAO,EAAE,CAAC;YACb,WAAK,KAAK,EAAC,QAAQ;;cAElB,wBAAkB,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,YAAY,GAAG,CAC9C,CACF;UACL,iCAAwB,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,CAAyB,CAC7E,CACR,CACX,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Host, State } from \"@stencil/core\"\nimport { data } from \"./data\"\n@Component({\n\ttag: \"smoothly-table-testing\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyTableTesting {\n\t@State() counter = 0\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<smoothly-table color=\"dark\">\n\t\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t\t<smoothly-table-header>Type</smoothly-table-header>\n\t\t\t\t\t\t<smoothly-table-header>Name</smoothly-table-header>\n\t\t\t\t\t\t<smoothly-table-header>Age</smoothly-table-header>\n\t\t\t\t\t</smoothly-table-row>\n\n\t\t\t\t\t{data.map(animal => (\n\t\t\t\t\t\t<smoothly-table-expandable-row>\n\t\t\t\t\t\t\t<smoothly-table-cell>{animal.type}</smoothly-table-cell>\n\t\t\t\t\t\t\t<smoothly-table-cell>{animal.name}</smoothly-table-cell>\n\t\t\t\t\t\t\t<smoothly-table-cell>{animal.age}</smoothly-table-cell>\n\t\t\t\t\t\t\t<smoothly-form slot=\"detail\" onSmoothlyFormSubmit={() => this.counter++} looks=\"line\">\n\t\t\t\t\t\t\t\t<smoothly-input value={animal.type}>Type</smoothly-input>\n\t\t\t\t\t\t\t\t<smoothly-input value={animal.name}>Name</smoothly-input>\n\t\t\t\t\t\t\t\t<smoothly-input>{animal.age}</smoothly-input>\n\t\t\t\t\t\t\t\t<smoothly-submit slot=\"submit\">Submit!</smoothly-submit>\n\t\t\t\t\t\t\t</smoothly-form>\n\t\t\t\t\t\t</smoothly-table-expandable-row>\n\t\t\t\t\t))}\n\t\t\t\t\t{data.map(animal => (\n\t\t\t\t\t\t<smoothly-table-row>\n\t\t\t\t\t\t\t<smoothly-table-cell>{animal.type}</smoothly-table-cell>\n\t\t\t\t\t\t\t<smoothly-table-expandable-cell>\n\t\t\t\t\t\t\t\t{animal.name}\n\t\t\t\t\t\t\t\t<smoothly-form slot=\"detail\" onSmoothlyFormSubmit={() => this.counter++} looks=\"line\">\n\t\t\t\t\t\t\t\t\t<smoothly-input value={animal.name}>Name</smoothly-input>\n\t\t\t\t\t\t\t\t\t<smoothly-submit slot=\"submit\">Submit!</smoothly-submit>\n\t\t\t\t\t\t\t\t</smoothly-form>\n\t\t\t\t\t\t\t</smoothly-table-expandable-cell>\n\t\t\t\t\t\t\t<smoothly-table-expandable-cell>\n\t\t\t\t\t\t\t\t{animal.age}\n\t\t\t\t\t\t\t\t<smoothly-form slot=\"detail\" onSmoothlyFormSubmit={() => this.counter++} looks=\"line\">\n\t\t\t\t\t\t\t\t\t<smoothly-input value={animal.type}>Type</smoothly-input>\n\t\t\t\t\t\t\t\t\t<smoothly-input value={animal.name}>Name</smoothly-input>\n\t\t\t\t\t\t\t\t\t<smoothly-input>{animal.age}</smoothly-input>\n\t\t\t\t\t\t\t\t\t<smoothly-submit slot=\"submit\">Submit!</smoothly-submit>\n\t\t\t\t\t\t\t\t</smoothly-form>\n\t\t\t\t\t\t\t</smoothly-table-expandable-cell>\n\t\t\t\t\t\t</smoothly-table-row>\n\t\t\t\t\t))}\n\t\t\t\t\t<smoothly-table-footer>\n\t\t\t\t\t\t<td colSpan={2}>\n\t\t\t\t\t\t\t<div class=\"footer\">\n\t\t\t\t\t\t\t\tCurrently viewing content from:\n\t\t\t\t\t\t\t\t<smoothly-display type=\"date\" value=\"2023-10-12\" />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</td>\n\t\t\t\t\t\t<smoothly-table-header>{\"Total age: \" + data.reduce((r, a) => r + a.age, 0)}</smoothly-table-header>\n\t\t\t\t\t</smoothly-table-footer>\n\t\t\t\t</smoothly-table>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/components/table/demo/testing/style.css ADDED Viewed

@@ -0,0 +1,32 @@
+:host {
+	width: 100%;
+	display: flex;
+	justify-content: center;
+}
+smoothly-table {
+	width: 80%;
+}
+.tableCell {
+	height: 3rem;
+	display: flex;
+	align-items: center;
+}
+.tableCell>div {
+	margin-left: 3rem;
+	margin-right: 3rem;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+	gap: 2rem;
+}
+td>div.footer {
+	display: flex;
+	padding-left: 1.5em;
+	flex-direction: row;
+	gap: 1em;
+}

package/dist/collection/components/table/expandable/cell/index.js CHANGED Viewed

@@ -3,7 +3,6 @@ export class TableExpandableCell {
   constructor() {
     this.allowSpotlight = true;
     this.spotlight = true;
-    this.align = "left";
     this.open = undefined;
   }
   openChanged(value) {
@@ -37,7 +36,7 @@ export class TableExpandableCell {
     event.detail(this.element);
   }
   render() {
-    return (h(Host, { style: { textAlign: this.align } }, h("aside", null, h("smoothly-icon", { name: "caret-forward-outline" }), h("slot", null)), h("tr", { class: { spotlight: this.spotlight }, ref: e => (this.expansionElement = e) }, h("td", { colSpan: 999, class: !this.open ? "hide" : "" }, h("slot", { name: "detail" })))));
+    return (h(Host, null, h("div", null, h("smoothly-icon", { name: "caret-forward-outline" }), h("slot", null)), h("tr", { class: { spotlight: this.spotlight }, ref: e => (this.expansionElement = e) }, h("td", { colSpan: 999, class: !this.open ? "hide" : "" }, h("slot", { name: "detail" })))));
   }
   static get is() { return "smoothly-table-expandable-cell"; }
   static get encapsulation() { return "scoped"; }
@@ -53,24 +52,6 @@ export class TableExpandableCell {
   }
   static get properties() {
     return {
-      "align": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"left\" | \"center\" | \"right\"",
-          "resolved": "\"center\" | \"left\" | \"right\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "align",
-        "reflect": false,
-        "defaultValue": "\"left\""
-      },
       "open": {
         "type": "boolean",
         "mutable": true,

package/dist/collection/components/table/expandable/cell/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/table/expandable/cell/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACN,SAAS,EAET,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,KAAK,EACL,KAAK,GACL,MAAM,eAAe,CAAA;AAOtB,MAAM,OAAO,mBAAmB;;0BAIL,IAAI;qBACT,IAAI~~;iBACoB,MAAM~~;;;~~EAOnD~~,WAAW,CAAC,KAAc;IACzB,IAAI,IAAI,CAAC,gBAAgB;MACxB,IAAI,KAAK;QACR,IAAI,CAAC,SAAS,GAAG,IAAI,CAAA;;QAErB,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;IAC5C,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;EAC9C,CAAC;EAGD,eAAe;IACd,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,cAAc,CAAA;EAClD,CAAC;EACD,iBAAiB;IAChB,IAAI,CAAC,qBAAqB,CAAC,IAAI,EAAE,CAAA;IACjC,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC;MAChC,cAAc,EAAE,CAAC,OAAgB,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC;KACrE,CAAC,CAAA;EACH,CAAC;EACD,kBAAkB;IACjB,IAAI,IAAI,CAAC,SAAS,EAAE;MACnB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAA;MACtB,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;KACtD;EACF,CAAC;EAED,OAAO;IACN,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAA;EACvB,CAAC;EAED,iBAAiB,CAAC,KAAgD;IACjE,KAAK,CAAC,eAAe,EAAE,CAAA;IACvB,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;EAC3B,CAAC;EACD,MAAM;IACL,OAAO,CACN,EAAC,IAAI~~,IAAC,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,KAAK,EAAE~~;~~MACrC~~;QACC,qBAAe,IAAI,EAAC,uBAAuB,GAAiB;QAC5D,eAAa,~~CACN~~;~~MACR~~,UAAI,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC;QAC9E,UAAI,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE;UAChD,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACD,CACC,CACP,CAAA;EACF,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACD","sourcesContent":["import {\n\tComponent,\n\tComponentWillLoad,\n\tElement,\n\tEvent,\n\tEventEmitter,\n\th,\n\tHost,\n\tListen,\n\tProp,\n\tState,\n\tWatch,\n} from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-table-expandable-cell\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class TableExpandableCell implements ComponentWillLoad {\n\tprivate expansionElement?: HTMLTableRowElement\n\tprivate beginOpen: boolean\n\t@Element() element: HTMLSmoothlyTableExpandableCellElement\n\t@State() allowSpotlight = true\n\t@State() spotlight = true\n\t@Prop(~~) align: \"left\" \| \"center\" \| \"right\" = \"left\"\n\t@Prop(~~{ mutable: true, reflect: true }) open: boolean\n\t@Event() smoothlyExpansionOpen: EventEmitter<HTMLElement>\n\t@Event() smoothlyExpansionLoad: EventEmitter<void>\n\t@Event() smoothlyExpandableChange: EventEmitter<boolean>\n\t@Event() smoothlyExpandableLoad: EventEmitter<{ allowSpotlight: (allowed: boolean) => void }>\n\t@Watch(\"open\")\n\topenChanged(value: boolean) {\n\t\tif (this.expansionElement)\n\t\t\tif (value)\n\t\t\t\tthis.beginOpen = true\n\t\t\telse\n\t\t\t\tthis.element.append(this.expansionElement)\n\t\tthis.smoothlyExpandableChange.emit(this.open)\n\t}\n\t@Watch(\"open\")\n\t@Watch(\"allowSpotlight\")\n\thandleSpotlight() {\n\t\tthis.spotlight = this.open && this.allowSpotlight\n\t}\n\tcomponentWillLoad(): void {\n\t\tthis.smoothlyExpansionLoad.emit()\n\t\tthis.smoothlyExpandableLoad.emit({\n\t\t\tallowSpotlight: (allowed: boolean) => (this.allowSpotlight = allowed),\n\t\t})\n\t}\n\tcomponentDidRender(): void {\n\t\tif (this.beginOpen) {\n\t\t\tthis.beginOpen = false\n\t\t\tthis.smoothlyExpansionOpen.emit(this.expansionElement)\n\t\t}\n\t}\n\t@Listen(\"click\")\n\tonClick() {\n\t\tthis.open = !this.open\n\t}\n\t@Listen(\"smoothlyTableLoad\")\n\thandleTableLoaded(event: CustomEvent<(owner: EventTarget) => void>) {\n\t\tevent.stopPropagation()\n\t\tevent.detail(this.element)\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<Host ~~style={{ textAlign: this.align }}~~>\n\t\t\t\t<~~aside~~>\n\t\t\t\t\t<smoothly-icon name=\"caret-forward-outline\"></smoothly-icon>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</~~aside~~>\n\t\t\t\t<tr class={{ spotlight: this.spotlight }} ref={e => (this.expansionElement = e)}>\n\t\t\t\t\t<td colSpan={999} class={!this.open ? \"hide\" : \"\"}>\n\t\t\t\t\t\t<slot name=\"detail\"></slot>\n\t\t\t\t\t</td>\n\t\t\t\t</tr>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/table/expandable/cell/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACN,SAAS,EAET,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,KAAK,EACL,KAAK,GACL,MAAM,eAAe,CAAA;AAOtB,MAAM,OAAO,mBAAmB;;0BAIL,IAAI;qBACT,IAAI;;;EAOzB,WAAW,CAAC,KAAc;IACzB,IAAI,IAAI,CAAC,gBAAgB;MACxB,IAAI,KAAK;QACR,IAAI,CAAC,SAAS,GAAG,IAAI,CAAA;;QAErB,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;IAC5C,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;EAC9C,CAAC;EAGD,eAAe;IACd,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,cAAc,CAAA;EAClD,CAAC;EACD,iBAAiB;IAChB,IAAI,CAAC,qBAAqB,CAAC,IAAI,EAAE,CAAA;IACjC,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC;MAChC,cAAc,EAAE,CAAC,OAAgB,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC;KACrE,CAAC,CAAA;EACH,CAAC;EACD,kBAAkB;IACjB,IAAI,IAAI,CAAC,SAAS,EAAE;MACnB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAA;MACtB,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;KACtD;EACF,CAAC;EAED,OAAO;IACN,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAA;EACvB,CAAC;EAED,iBAAiB,CAAC,KAAgD;IACjE,KAAK,CAAC,eAAe,EAAE,CAAA;IACvB,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;EAC3B,CAAC;EACD,MAAM;IACL,OAAO,CACN,EAAC,IAAI;MACJ;QACC,qBAAe,IAAI,EAAC,uBAAuB,GAAiB;QAC5D,eAAa,CACR;MACN,UAAI,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC;QAC9E,UAAI,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE;UAChD,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACD,CACC,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import {\n\tComponent,\n\tComponentWillLoad,\n\tElement,\n\tEvent,\n\tEventEmitter,\n\th,\n\tHost,\n\tListen,\n\tProp,\n\tState,\n\tWatch,\n} from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-table-expandable-cell\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class TableExpandableCell implements ComponentWillLoad {\n\tprivate expansionElement?: HTMLTableRowElement\n\tprivate beginOpen: boolean\n\t@Element() element: HTMLSmoothlyTableExpandableCellElement\n\t@State() allowSpotlight = true\n\t@State() spotlight = true\n\t@Prop({ mutable: true, reflect: true }) open: boolean\n\t@Event() smoothlyExpansionOpen: EventEmitter<HTMLElement>\n\t@Event() smoothlyExpansionLoad: EventEmitter<void>\n\t@Event() smoothlyExpandableChange: EventEmitter<boolean>\n\t@Event() smoothlyExpandableLoad: EventEmitter<{ allowSpotlight: (allowed: boolean) => void }>\n\t@Watch(\"open\")\n\topenChanged(value: boolean) {\n\t\tif (this.expansionElement)\n\t\t\tif (value)\n\t\t\t\tthis.beginOpen = true\n\t\t\telse\n\t\t\t\tthis.element.append(this.expansionElement)\n\t\tthis.smoothlyExpandableChange.emit(this.open)\n\t}\n\t@Watch(\"open\")\n\t@Watch(\"allowSpotlight\")\n\thandleSpotlight() {\n\t\tthis.spotlight = this.open && this.allowSpotlight\n\t}\n\tcomponentWillLoad(): void {\n\t\tthis.smoothlyExpansionLoad.emit()\n\t\tthis.smoothlyExpandableLoad.emit({\n\t\t\tallowSpotlight: (allowed: boolean) => (this.allowSpotlight = allowed),\n\t\t})\n\t}\n\tcomponentDidRender(): void {\n\t\tif (this.beginOpen) {\n\t\t\tthis.beginOpen = false\n\t\t\tthis.smoothlyExpansionOpen.emit(this.expansionElement)\n\t\t}\n\t}\n\t@Listen(\"click\")\n\tonClick() {\n\t\tthis.open = !this.open\n\t}\n\t@Listen(\"smoothlyTableLoad\")\n\thandleTableLoaded(event: CustomEvent<(owner: EventTarget) => void>) {\n\t\tevent.stopPropagation()\n\t\tevent.detail(this.element)\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div>\n\t\t\t\t\t<smoothly-icon name=\"caret-forward-outline\"></smoothly-icon>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</div>\n\t\t\t\t<tr class={{ spotlight: this.spotlight }} ref={e => (this.expansionElement = e)}>\n\t\t\t\t\t<td colSpan={999} class={!this.open ? \"hide\" : \"\"}>\n\t\t\t\t\t\t<slot name=\"detail\"></slot>\n\t\t\t\t\t</td>\n\t\t\t\t</tr>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}