smoothly 1.111.0 → 1.113.0

package/dist/collection/components/input/select/style.css

@@ -126,12 +126,8 @@
 	border-radius: var(--smoothly-input-border-radius) var(--smoothly-input-border-radius) 0 0;
 }
 
-:host.icon {
-	width: fit-content;
-	flex-direction: column;
-}
 
-:host>div.select-display {
+:host>.select-display {
 	box-sizing: border-box;
 	display: flex;
 	padding: var(--input-value-padding-top) .8rem var(--input-value-padding-bottom) 0;
@@ -141,17 +137,17 @@
 	gap: 1rem;
 	text-overflow: ellipsis;
 }
-:host:not([readonly]):not([disabled])>div.select-display {
+:host:not([readonly]):not([disabled])>.select-display {
 	cursor: pointer;
 }
 
-:host:not(:has([slot=label]))>div.select-display,
-:host:not([show-label])>div.select-display  {
+:host:not(:has([slot=label]))>.select-display,
+:host:not([show-label])>.select-display  {
 	padding: .6rem .8rem .6rem 0;
 	align-items: center;
 }
 
-:host>div.select-display smoothly-icon {
+:host>.select-display smoothly-icon {
 	color: rgb(var(--smoothly-input-foreground));
 	fill: rgb(var(--smoothly-input-foreground));
 	stroke: rgb(var(--smoothly-input-foreground));
@@ -187,17 +183,15 @@
 	display: none
 }
 
-:host .label {
-	left: .5rem;
-}
 
-:host.has-value:has([slot=label]:not(:empty))>div.select-display,
-:host:not(.has-value)[placeholder]>div.select-display {
+:host.has-value:has([slot=label]:not(:empty))>.select-display,
+:host:not(.has-value)[placeholder]>.select-display {
 	overflow: hidden;
 	width: 100%;
 }
 
-:host>.options {
+
+:host>.dropdown {
 	display: flex;
 	flex-direction: column;
 	position: absolute;
@@ -207,82 +201,96 @@
 	overflow-x: hidden;
 	overflow-y: auto;
 	background-color: rgb(var(--smoothly-input-background));
-	left: 0;
-	right: 0;
+	inset-inline: 0;
 	border-radius: 0 0 var(--smoothly-input-border-radius) var(--smoothly-input-border-radius);
-	min-width: fit-content;
 	border: rgb(var(--smoothly-input-border, var(--smoothly-color-contrast))) solid 1px;
 	border-top: rgba(var(--smoothly-input-border, var(--smoothly-color-contrast)), .4) solid 1px;
 }
-:host[looks="grid"]>div.options,
-:host[looks=border]>div.options,
-:host[looks="transparent"]>div.options {
-	left: -1px;
-	right: -1px;
-}
-:host[multiple]>div.options>smoothly-item::before {
-	content: "";
-	display: inline-block;
-	width: 1rem;
-	height: 1rem;
-	margin-right: 0.5rem;
-	border: 1px solid rgb(var(--smoothly-input-foreground));
-	border-radius: 0.15rem;
-	vertical-align: middle;
-}
-:host[multiple]>div.options>smoothly-item[selected]::after {
-	content: "✔";
-	position: absolute;
-	left: 0.65rem; 
-	color: rgb(var(--smoothly-item-selected-foreground))
-}
-:host[multiple]>div.options>smoothly-item[selected]::before {
-	border: 1px solid rgb(var(--smoothly-item-selected-foreground));
-}
-:host[multiple]>div.options>smoothly-item[selected]::after {
-	color: rgb(var(--smoothly-item-selected-foreground));
-}
-:host[multiple]>div.options>smoothly-item:hover::before {
-	border: 1px solid rgb(var(--smoothly-item-hover-foreground));
+:host:not(.open)>.dropdown {
+	border: 0;
 }
-:host[multiple]>div.options>smoothly-item:hover::after {
-	color: rgb(var(--smoothly-item-hover-foreground));
-}
-:host>div.options::slotted(smoothly-item),
-:host>div.options::slotted(div.search-preview) {
-	padding: .7rem .7rem .7rem .25rem;
+:host[looks="grid"]>.dropdown,
+:host[looks=border]>.dropdown,
+:host[looks="transparent"]>.dropdown {
+	inset-inline: -1px;
 }
 
-:host>div.options::slotted(div.search-preview) {
+:host>.dropdown>.search {
 	display: flex;
 	position: sticky;
+	align-items: center;
 	top: 0;
 	gap: 1rem;
+	padding: .7rem .7rem .7rem .25rem;
 	background-color: rgb(var(--smoothly-input-background));
 	color: rgb(var(--smoothly-input-foreground, var(--smoothly-color-contrast)));
 	fill: rgb(var(--smoothly-input-foreground, var(--smoothly-color-contrast)));
 	stroke: rgb(var(--smoothly-input-foreground, var(--smoothly-color-contrast)));
 }
-:host>div.options::slotted(div.search-preview)::before {
-	/* Hack to not make the search-preview have opacity without showing what is underneath */
+:host:not(.has-filter)>.dropdown>.search {
+	/* hide search */
+	/* search cant be display: none, since it is the focus element */
+	height: 0;
+	padding: 0;
+	overflow: hidden;
+	pointer-events: none;
+}
+:host>.dropdown>.search::before {
+	/* search have opacity without showing what is underneath */
 	content: "";
 	position: absolute;
 	inset: 0;
 	background-color: rgba(var(--smoothly-primary-tint), 0.5);
 	z-index: -1;
 }
-:host>div.options>div.search-preview>smoothly-icon[name="search-outline"],
-:host>div.options>div.search-preview>smoothly-icon[name="backspace-outline"] {
+:host>.dropdown>.search>.search-input {
+	width: 100%;
+	background-color: transparent;
+	border: none;
+	outline: none;
+}
+:host>.dropdown>.search>smoothly-icon[name="search-outline"],
+:host>.dropdown>.search>smoothly-icon[name="backspace-outline"] {
 	color: rgb(var(--smoothly-input-foreground, var(--smoothly-color-contrast)));
 	fill: rgb(var(--smoothly-input-foreground, var(--smoothly-color-contrast)));
 	stroke: rgb(var(--smoothly-input-foreground, var(--smoothly-color-contrast)));
 }
 
-:host>div.options>div.search-preview>smoothly-icon[name="backspace-outline"] {
-	margin-left: auto;
-	margin-right: 0;
-}
 
-:host>div.options.hidden {
+/* --- multiple options --- */
+:host([multiple])::slotted(.dropdown>.menu>smoothly-item) {
+	position: relative;
+}
+:host([multiple])::slotted(.dropdown>.menu>smoothly-item::before) {
+	content: "";
+	display: inline-block;
+	width: 1rem;
+	height: 1rem;
+	margin-right: 0.5rem;
+	border: 1px solid rgb(var(--smoothly-input-foreground));
+	border-radius: 0.15rem;
+	vertical-align: middle;
+}
+:host([multiple])::slotted(.dropdown>.menu>smoothly-item[selected]::before) {
+	border-color: rgb(var(--smoothly-item-selected-foreground));
+}
+:host([multiple])::slotted(.dropdown>.menu>smoothly-item:hover::before) {
+	border: 1px solid rgb(var(--smoothly-item-hover-foreground));
+}
+:host([multiple])::slotted(.dropdown>.menu>smoothly-item[selected]::after) {
+	content: "✔";
+	position: absolute;
+	left: 0.65rem; 
+	color: rgb(var(--smoothly-item-selected-foreground));
+}
+:host([multiple])::slotted(.dropdown>.menu>smoothly-item:hover::after) {
+	color: rgb(var(--smoothly-item-hover-foreground));
+}
+:host>.dropdown {
+	min-width: fit-content;
+}
+:host>.dropdown>.menu[hidden] {
 	display: none;
 }
+
+

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

@@ -17,14 +17,20 @@ export class SmoothlyInputSubmit {
             if (Submittable.is(parent) && Editable.type.is(parent)) {
                 this.parent = parent;
                 parent.listen(async (p) => {
-                    var _a;
                     this.display = !p.readonly;
-                    this.disabled =
-                        !this.delete &&
-                            (p.readonly ||
-                                ("validator" in p && p.validator instanceof isly.Type && !((_a = p.validator) === null || _a === void 0 ? void 0 : _a.is(Data.convertArrays(p.value)))) ||
-                                !p.isDifferentFromInitial);
                 });
+                if (typeof this.disabled !== "boolean") {
+                    parent.listen(async (p) => {
+                        var _a;
+                        this.disabled =
+                            !this.delete &&
+                                (p.readonly ||
+                                    ("validator" in p &&
+                                        p.validator instanceof isly.Type &&
+                                        !((_a = p.validator) === null || _a === void 0 ? void 0 : _a.is(Data.convertArrays(p.value)))) ||
+                                    !p.isDifferentFromInitial);
+                    });
+                }
             }
         });
     }
@@ -34,7 +40,7 @@ export class SmoothlyInputSubmit {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '5bc6d17920c9a5dfa81e81b02df300b661e960f9', title: this.tooltip }, this.delete == true ? (h("smoothly-button-confirm", { size: this.size, shape: this.shape, expand: this.expand, color: (_a = this.color) !== null && _a !== void 0 ? _a : "danger", fill: this.fill, onSmoothlyConfirm: () => this.clickHandler() }, h("slot", null), h("smoothly-icon", { name: "trash-outline", fill: "solid", size: "tiny" }))) : (h("smoothly-button", { disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: (_b = this.color) !== null && _b !== void 0 ? _b : "success", fill: this.fill, onClick: () => this.clickHandler() }, h("slot", null), this.icon && h("smoothly-icon", { name: this.icon, fill: "solid", size: "tiny" })))));
+        return (h(Host, { key: '0fed4a319580841ba1d3281fb084b91a4d7b5a68', title: this.tooltip }, this.delete == true ? (h("smoothly-button-confirm", { size: this.size, shape: this.shape, expand: this.expand, color: (_a = this.color) !== null && _a !== void 0 ? _a : "danger", fill: this.fill, onSmoothlyConfirm: () => this.clickHandler() }, h("slot", null), h("smoothly-icon", { name: "trash-outline", fill: "solid", size: "tiny" }))) : (h("smoothly-button", { disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: (_b = this.color) !== null && _b !== void 0 ? _b : "success", fill: this.fill, onClick: () => this.clickHandler() }, h("slot", null), this.icon && h("smoothly-icon", { name: this.icon, fill: "solid", size: "tiny" })))));
     }
     static get is() { return "smoothly-input-submit"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/input/submit/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentWillLoad, Event, EventEmitter, h, Host, Prop, VNode } from \"@stencil/core\"\nimport { isly } from \"isly\"\nimport { Color, Data, Fill, Icon } from \"../../../model\"\nimport { Editable } from \"../Editable\"\nimport { Submittable } from \"../Submittable\"\n\n@Component({\n\ttag: \"smoothly-input-submit\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyInputSubmit implements ComponentWillLoad {\n\tprivate parent?: Submittable & Editable\n\t@Prop({ reflect: true }) delete = false\n\t@Prop() color?: Color\n\t@Prop() icon: Icon | false = \"checkmark-outline\"\n\t@Prop({ reflect: true }) expand?: \"block\" | \"full\"\n\t@Prop({ reflect: true }) fill?: Fill\n\t@Prop({ reflect: true, mutable: true }) disabled = false\n\t@Prop({ reflect: true, mutable: true }) display = false\n\t@Prop({ reflect: true }) shape?: \"rounded\"\n\t@Prop({ reflect: true }) size: \"flexible\" | \"small\" | \"large\" | \"icon\" = \"icon\"\n\t@Prop() tooltip = this.delete ? \"Remove\" : \"Submit\"\n\t@Event() smoothlyInputLoad: EventEmitter<(parent: Editable) => void>\n\tcomponentWillLoad(): void {\n\t\tthis.smoothlyInputLoad.emit(parent => {\n\t\t\tif (Submittable.is(parent) && Editable.type.is(parent)) {\n\t\t\t\tthis.parent = parent\n\t\t\t\tparent.listen(async p => {\n\t\t\t\t\tthis.display = !p.readonly\n\t\t\t\t\tthis.disabled =\n\t\t\t\t\t\t!this.delete &&\n\t\t\t\t\t\t(p.readonly ||\n\t\t\t\t\t\t\t(\"validator\" in p && p.validator instanceof isly.Type && !p.validator?.is(Data.convertArrays(p.value))) ||\n\t\t\t\t\t\t\t!p.isDifferentFromInitial)\n\t\t\t\t})\n\t\t\t}\n\t\t})\n\t}\n\tclickHandler() {\n\t\tthis.parent?.submit(this.delete)\n\t}\n\n\trender(): VNode | VNode[] {\n\t\treturn (\n\t\t\t<Host title={this.tooltip}>\n\t\t\t\t{this.delete == true ? (\n\t\t\t\t\t<smoothly-button-confirm\n\t\t\t\t\t\tsize={this.size}\n\t\t\t\t\t\tshape={this.shape}\n\t\t\t\t\t\texpand={this.expand}\n\t\t\t\t\t\tcolor={this.color ?? \"danger\"}\n\t\t\t\t\t\tfill={this.fill}\n\t\t\t\t\t\tonSmoothlyConfirm={() => this.clickHandler()}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t<smoothly-icon name=\"trash-outline\" fill=\"solid\" size=\"tiny\" />\n\t\t\t\t\t</smoothly-button-confirm>\n\t\t\t\t) : (\n\t\t\t\t\t<smoothly-button\n\t\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\t\tsize={this.size}\n\t\t\t\t\t\ttype={\"button\"}\n\t\t\t\t\t\tshape={this.shape}\n\t\t\t\t\t\texpand={this.expand}\n\t\t\t\t\t\tcolor={this.color ?? \"success\"}\n\t\t\t\t\t\tfill={this.fill}\n\t\t\t\t\t\tonClick={() => this.clickHandler()}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t{this.icon && <smoothly-icon name={this.icon} fill=\"solid\" size=\"tiny\" />}\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/input/submit/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentWillLoad, Event, EventEmitter, h, Host, Prop, VNode } from \"@stencil/core\"\nimport { isly } from \"isly\"\nimport { Color, Data, Fill, Icon } from \"../../../model\"\nimport { Editable } from \"../Editable\"\nimport { Submittable } from \"../Submittable\"\n\n@Component({\n\ttag: \"smoothly-input-submit\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyInputSubmit implements ComponentWillLoad {\n\tprivate parent?: Submittable & Editable\n\t@Prop({ reflect: true }) delete = false\n\t@Prop() color?: Color\n\t@Prop() icon: Icon | false = \"checkmark-outline\"\n\t@Prop({ reflect: true }) expand?: \"block\" | \"full\"\n\t@Prop({ reflect: true }) fill?: Fill\n\t@Prop({ reflect: true, mutable: true }) disabled = false\n\t@Prop({ reflect: true, mutable: true }) display = false\n\t@Prop({ reflect: true }) shape?: \"rounded\"\n\t@Prop({ reflect: true }) size: \"flexible\" | \"small\" | \"large\" | \"icon\" = \"icon\"\n\t@Prop() tooltip = this.delete ? \"Remove\" : \"Submit\"\n\t@Event() smoothlyInputLoad: EventEmitter<(parent: Editable) => void>\n\tcomponentWillLoad(): void {\n\t\tthis.smoothlyInputLoad.emit(parent => {\n\t\t\tif (Submittable.is(parent) && Editable.type.is(parent)) {\n\t\t\t\tthis.parent = parent\n\t\t\t\tparent.listen(async p => {\n\t\t\t\t\tthis.display = !p.readonly\n\t\t\t\t})\n\t\t\t\tif (typeof this.disabled !== \"boolean\") {\n\t\t\t\t\tparent.listen(async p => {\n\t\t\t\t\t\tthis.disabled =\n\t\t\t\t\t\t\t!this.delete &&\n\t\t\t\t\t\t\t(p.readonly ||\n\t\t\t\t\t\t\t\t(\"validator\" in p &&\n\t\t\t\t\t\t\t\t\tp.validator instanceof isly.Type &&\n\t\t\t\t\t\t\t\t\t!p.validator?.is(Data.convertArrays(p.value))) ||\n\t\t\t\t\t\t\t\t!p.isDifferentFromInitial)\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t}\n\t\t})\n\t}\n\tclickHandler() {\n\t\tthis.parent?.submit(this.delete)\n\t}\n\n\trender(): VNode | VNode[] {\n\t\treturn (\n\t\t\t<Host title={this.tooltip}>\n\t\t\t\t{this.delete == true ? (\n\t\t\t\t\t<smoothly-button-confirm\n\t\t\t\t\t\tsize={this.size}\n\t\t\t\t\t\tshape={this.shape}\n\t\t\t\t\t\texpand={this.expand}\n\t\t\t\t\t\tcolor={this.color ?? \"danger\"}\n\t\t\t\t\t\tfill={this.fill}\n\t\t\t\t\t\tonSmoothlyConfirm={() => this.clickHandler()}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t<smoothly-icon name=\"trash-outline\" fill=\"solid\" size=\"tiny\" />\n\t\t\t\t\t</smoothly-button-confirm>\n\t\t\t\t) : (\n\t\t\t\t\t<smoothly-button\n\t\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\t\tsize={this.size}\n\t\t\t\t\t\ttype={\"button\"}\n\t\t\t\t\t\tshape={this.shape}\n\t\t\t\t\t\texpand={this.expand}\n\t\t\t\t\t\tcolor={this.color ?? \"success\"}\n\t\t\t\t\t\tfill={this.fill}\n\t\t\t\t\t\tonClick={() => this.clickHandler()}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t{this.icon && <smoothly-icon name={this.icon} fill=\"solid\" size=\"tiny\" />}\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

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

@@ -34,7 +34,7 @@ export class SmoothlyItem {
             : false;
     }
     render() {
-        return (h(Host, { key: 'd76e2737454ad914f831482c98d30978975506fd', tabIndex: -1 }, h("slot", { key: 'edef0a2718d076ad33b6f874591a8a2791fb6876' })));
+        return (h(Host, { key: '5a606bfedb2eb8cf6a503386d2d5e16f0f60c090', tabIndex: -1 }, h("slot", { key: 'a7912c7b3ac7ecb40e61058d949b4cc62806246d' })));
     }
     static get is() { return "smoothly-item"; }
     static get encapsulation() { return "scoped"; }

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

@@ -2,9 +2,9 @@ import { h, Host } from "@stencil/core";
 export class SmoothlyLabel {
     render() {
         var _a;
-        return (h(Host, { key: '351e89e82587e7ccb66dc55451c53f05648ac9d4', title: this.description, style: {
+        return (h(Host, { key: 'd6dfddb0df4c99de8e075141cf16d3f4ca4c861a', title: this.description, style: {
                 "--hue": (_a = this.hue) === null || _a === void 0 ? void 0 : _a.toString(),
-            } }, h("slot", { key: '9e2eedbf6c74f923cbb0c0ae8648ce207aabcdb7' })));
+            } }, h("slot", { key: '1f56e22de589b47ac208c96ee5c84edd8484e3a4' })));
     }
     static get is() { return "smoothly-label"; }
     static get encapsulation() { return "scoped"; }

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

@@ -8,7 +8,7 @@ export class SmoothlyLazy {
         this.show = true;
     }
     render() {
-        return (h(Host, { key: '93b333ebfee933e5f5b147895a04385389b5c03d' }, h("slot", { key: 'b10226510296688cb58fc005c01c68a16ffd150c', name: "before" }), h("smoothly-load-more", { key: '9a097a7489d5e670418250abcc0d5870d11f460c', onSmoothlyLoadMore: e => this.loadMoreHandler(e) }), this.show && (typeof this.content == "function" ? h(this.content, null) : this.content), h("slot", { key: 'bf5243f15e485eae1203272284b06f0e51d47fa9' })));
+        return (h(Host, { key: '0b17b27ef091a5cbf3efedc7560c0af506f8927a' }, h("slot", { key: '7cb9a362b4540fbdcdc579bf95a273e7c13fad25', name: "before" }), h("smoothly-load-more", { key: '7dde9ba1e78a9a7f0eeeefbe124c3410f367bd3e', onSmoothlyLoadMore: e => this.loadMoreHandler(e) }), this.show && (typeof this.content == "function" ? h(this.content, null) : this.content), h("slot", { key: 'fbe22ffca8fa781a19bf07537f294be36a8bc212' })));
     }
     static get is() { return "smoothly-lazy"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/load-more/index.js

@@ -37,7 +37,7 @@ export class LoadMore {
         }
     }
     render() {
-        return h(Host, { key: '9f0e2e8278780438f214286cd990ee54a6b5546a' });
+        return h(Host, { key: '1b86dd2400a791b125a24513cb9514face925d3d' });
     }
     static get is() { return "smoothly-load-more"; }
     static get encapsulation() { return "scoped"; }

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

@@ -15,9 +15,9 @@ export class SmoothlyModal {
         this.open = true;
     }
     render() {
-        return (h(Host, { key: '601bd96e27c500c08df01457b2951449e4392c37', role: "alertdialog", onClick: (e) => {
+        return (h(Host, { key: '36caaa17bfd076dd297f58ccb9ac4a12871343a7', role: "alertdialog", onClick: (e) => {
                 this.closable && !e.composedPath().some((el) => { var _a; return (_a = el.classList) === null || _a === void 0 ? void 0 : _a.contains("modal"); }) && this.closeModal();
-            } }, h("div", { key: '9deaaf0008f61aecd194a2094d65544cfa97b425', class: "modal" }, h("div", { key: 'b041b4418cfc98753f6fe34ffca610f2da25ba6b', class: "header" }, h("slot", { key: '848fecf8ba6a2efcacd1b1c753df17ab5a96fcb3', name: "header" }), this.closable && h("smoothly-icon", { key: '1d51dc003fa0604b29530202cbf0fb743322698b', name: "close-outline", fill: "solid", onClick: () => this.closeModal() })), h("slot", { key: '802bd940f81748477962b9c4d615913f073fcd34' }), h("div", { key: 'b31e5dbbf56573298464b071414977be7acf5178', class: "actions" }, h("slot", { key: '85a6a0753237febc205e02a52da4086de9f47fad', name: "actions" })))));
+            } }, h("div", { key: '4c0f2d6537496a8b2392aacddd9ba9db9c5d6052', class: "modal" }, h("div", { key: '0ecf5c976360402e1117570ef10bd3e46f69ff2b', class: "header" }, h("slot", { key: '93b7f39f4a41f83743bc766a3c6e35f3ac1c324f', name: "header" }), this.closable && h("smoothly-icon", { key: 'c61e00a97962890149cb89c0daf5df907c7dfb6e', name: "close-outline", fill: "solid", onClick: () => this.closeModal() })), h("slot", { key: 'fda69f545df08c71f58c85ea096fed500a6c6ff6' }), h("div", { key: 'c7e180ef59712c1096aa12359eac3e97d0c42d6e', class: "actions" }, h("slot", { key: '7cfef8c5cdf40fc9eedb5a0fa2538e02d82be8a7', name: "actions" })))));
     }
     static get is() { return "smoothly-modal"; }
     static get encapsulation() { return "scoped"; }

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

@@ -50,7 +50,7 @@ export class Notification {
         this.onUpdatedNotice(this.notice);
     }
     render() {
-        return (h(Host, { key: 'a8ac459d3c94d3df653723e0d93f6e72260806fc', color: this.properties[0], fill: "solid" }, this.closable && (h("smoothly-trigger", { key: '27e7521a477d0eeb67717166ccc252cfa0a2ce35', fill: "clear", name: "close" }, h("smoothly-icon", { key: '5dff1f73b2937bacf2d81b4e2a528dce8a3c3868', name: "close-circle-outline" }))), h("span", { key: '60584d5ee874685807f6b613592f64e57bba771b', class: this.icon ? "icon" : "clean" }, this.icon && h("smoothly-icon", { key: '186656f3d0f19a4b087a50c5af168be3973cc271', name: this.properties[1] }), h("p", { key: '23547fd1eb3e3d524fb850ff00749f937902a4fb' }, this.notice.message))));
+        return (h(Host, { key: '02ae0659b1c3c7e4e5e74ac356bb94cf91ef8835', color: this.properties[0], fill: "solid" }, this.closable && (h("smoothly-trigger", { key: '4525814eb8b98479507575f107ea3f89f708bc56', fill: "clear", name: "close" }, h("smoothly-icon", { key: 'd611ae4917fa50ef7d0e397a96fec34aee39cb72', name: "close-circle-outline" }))), h("span", { key: '30b99783d4c02842315a782a4029f97a450f5a2b', class: this.icon ? "icon" : "clean" }, this.icon && h("smoothly-icon", { key: '147a0858cc23b98e8aac82463ab19b1891896d1a', name: this.properties[1] }), h("p", { key: '45d9c9e89189a31941461500868439768c3199e6' }, this.notice.message))));
     }
     static get is() { return "smoothly-notification"; }
     static get encapsulation() { return "scoped"; }

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

@@ -11,7 +11,7 @@ export class Notifier {
         this.notices = [...this.notices.filter(n => n != event.detail)];
     }
     render() {
-        return (h(Host, { key: '6d3724d096d8e0547b7b336206f5bb1c97af54e9' }, h("slot", { key: '86d13b581dae9bfa29714e59b272b68d5143dd08' }), h("div", { key: 'fb0790db93da5415e2ce9a05500675d1e13a0f0c', class: "smoothly-notifier-wrapper" }, this.notices.map(n => (h("smoothly-notification", { notice: n, icon: this.icon }))))));
+        return (h(Host, { key: '6da528516e01fc32e6f17fd480068664b5c9e021' }, h("slot", { key: '1067e9afd266e04d3e0b32a79f974762f3bad7d2' }), h("div", { key: '493f3f5119c9c66fd6e5f9ee90d7b4fea22dc30f', class: "smoothly-notifier-wrapper" }, this.notices.map(n => (h("smoothly-notification", { notice: n, icon: this.icon }))))));
     }
     static get is() { return "smoothly-notifier"; }
     static get encapsulation() { return "scoped"; }

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

@@ -5,9 +5,9 @@ export class SmoothlySpinner {
     }
     render() {
         const strokeWidth = this.size == "large" ? 6 : this.size == "medium" ? 8 : this.size == "icon" ? 8 : 12;
-        return (h(Host, { key: 'cc63c3d7a177c5119f9dbd6c38038c06f9fe5093', style: {
+        return (h(Host, { key: '9a0cc6ad21f0c3bfce350ba2a2c83272891844d6', style: {
                 "--spinner-size": this.size == "large" ? "5em" : this.size == "medium" ? "3em" : this.size == "icon" ? "1.8em" : "1.2em",
-            } }, h("svg", { key: '50736fa849eb8112f5f0356d4d2233b70eff5248', class: "spinner", viewBox: `0 0 ${60 + strokeWidth} ${60 + strokeWidth}`, xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: 'f5e92d9993f413213c5cf59d290b4d52316cc06c', class: "path", fill: "none", "stroke-width": strokeWidth, "stroke-linecap": "round", cx: `${30 + strokeWidth / 2}`, cy: `${30 + strokeWidth / 2}`, r: "30" }))));
+            } }, h("svg", { key: '669a73232e58cb2d87dca969cd32150f2fd010f5', class: "spinner", viewBox: `0 0 ${60 + strokeWidth} ${60 + strokeWidth}`, xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '31faf5cfc5a15e627ad7875af4cd16f6e9adac09', class: "path", fill: "none", "stroke-width": strokeWidth, "stroke-linecap": "round", cx: `${30 + strokeWidth / 2}`, cy: `${30 + strokeWidth / 2}`, r: "30" }))));
     }
     static get is() { return "smoothly-spinner"; }
     static get encapsulation() { return "scoped"; }

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

@@ -20,7 +20,7 @@ export class SmoothlySubmit {
         (_a = this.parent) === null || _a === void 0 ? void 0 : _a.submit();
     }
     render() {
-        return (h(Button, { key: '0e3b14b547a1e6e40a0712c67650f5735b127f31', disabled: this.disabled, type: this.type }, h("slot", { key: '14012bb8a6ba7532623db0027ac4f02ec300f772' })));
+        return (h(Button, { key: 'ae0834363121d13204f7ebb794c44acfe10ca71e', disabled: this.disabled, type: this.type }, h("slot", { key: '7cafd59438f3f509652a416964338f8e6a87b9f4' })));
     }
     static get is() { return "smoothly-submit"; }
     static get encapsulation() { return "scoped"; }

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

@@ -10,7 +10,7 @@ export class SmoothlySummary {
         }
     }
     render() {
-        return (h("details", { key: '307957b81f396381ad9eb975137299e7429dc9b5', onToggle: e => this.toggleHandler(e), open: this.open }, h("summary", { key: 'b0951b6f61956f2b7c5253c8c839679af6b4174c' }, h("smoothly-icon", { key: 'f12054adab15e894617ed408fdbb6f6160b42c95', name: "caret-forward", fill: "solid", size: "tiny" }), h("slot", { key: '5138f3df6492a607ac2a0398204f4a95b9e8c547', name: "summary" })), h("slot", { key: '14aba4cf6b25ed41cb002585d4a117168e7a6169', name: "content" })));
+        return (h("details", { key: 'd77e78b718fca10f4d8e9e2bdae4112cffb4cfc3', onToggle: e => this.toggleHandler(e), open: this.open }, h("summary", { key: '5e264e08db22ec0eb85433d3d72f0f12d10cd2c1' }, h("smoothly-icon", { key: '36d49d1d21151034a35fca5b93a064074d49bb84', name: "caret-forward", fill: "solid", size: "tiny" }), h("slot", { key: '55164da27444d19c18b6b931813d12a3d5a4abe4', name: "summary" })), h("slot", { key: 'b459e14735415bee4c85af02cff23c0675372931', name: "content" })));
     }
     static get is() { return "smoothly-summary"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class SmoothlyTableBody {
     render() {
-        return (h(Host, { key: '399b61d93f037a694f0e3a8f99ec433c06b3c640' }, h("slot", { key: 'a8325da9f0ffac6857b6a7a6e5625544b5c46899' })));
+        return (h(Host, { key: '383e7918b3e1e57f2970da2d97f19f2628a53e64' }, h("slot", { key: '8d9059eed589799ad9eea2132a0bd2b10aabc03e' })));
     }
     static get is() { return "smoothly-table-body"; }
     static get encapsulation() { return "scoped"; }

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

@@ -5,7 +5,7 @@ export class SmoothlyTableCell {
     }
     render() {
         var _a;
-        return (h(Host, { key: '0778ff0d0b6e7d5d960f4eb1bc3e63156ac9cc23', class: "smoothly-table-cell", style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) } }, h("slot", { key: '7f735c3219f7107f895008a6fb76e022cee5b2f2' })));
+        return (h(Host, { key: '2c1a6679cabf05342c1e8a783a4a8fb27fd8c6f1', class: "smoothly-table-cell", style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) } }, h("slot", { key: '3a33c09387abdf5f499ba1f92dcf92b5b7f71a2d' })));
     }
     static get is() { return "smoothly-table-cell"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class SmoothlyTableDemoColspan {
     render() {
-        return (h(Host, { key: '206c3432bf7936b15e972c161424e6b0e102a15c' }, h("smoothly-table", { key: 'fd9a1adfc79d7e3fa130e55614c8956aa9993ce7', columns: 3 }, h("smoothly-table-head", { key: '079086e32eab6c27ec06646b7cc1addc5a45e218' }, h("smoothly-table-row", { key: '6b421c777d5857d7b8c6e92dfa8ebb9e65c24f0d' }, h("smoothly-table-cell", { key: '9c0f4181cefa485af433741c55eb8033057333ba' }, "Date"), h("smoothly-table-cell", { key: '6b089e4d9d9d43ead73b8602d1f482b019810ee7' }, "Skip"), h("smoothly-table-cell", { key: 'b3a5f766b5a7bc15fe29aa2ba35d908f33883f7f' }, "Total"))), h("smoothly-table-body", { key: '12be40d0b1546ef3bcb8d95815e3a6751a34dc95' }, h("smoothly-table-row", { key: '22d3015ebb0c1a19b412c175f231de9cd3f9f04c' }, h("smoothly-table-cell", { key: 'cb591fa2b41381aa1c663a701a76b953ff610262', span: 2 }, h("smoothly-display", { key: 'a9dfcaebab3333ea62c290c9952ecc7c77ba33a7', type: "date", value: "2024-01-01" })), h("smoothly-table-cell", { key: 'b3680b9847f0e5635538af75af7c117d86464fcc' }, h("smoothly-display", { key: 'c89fca16b3f2e836dc9dd8c2378f4b26bab2be1f', type: "price", value: 120, currency: "EUR" }))), h("smoothly-table-row", { key: 'd2574793e06a73ede9721349f9e26ea596947500' }, h("smoothly-table-expandable-cell", { key: '2ab7fcbb3c3f54298e7b9f4b6b8287f0e5c07c04', span: 2 }, h("smoothly-display", { key: '40f846739879908115983e730c2e135fc3473977', type: "date", value: "2024-01-02" }), h("smoothly-lazy", { key: '9989441f4da6a580d7d7a21a8623a1dafc0d6a3d', slot: "detail", content: h("smoothly-display", { type: "date-time", value: "2024-01-02T13:37:00.000Z" }) })), h("smoothly-table-expandable-cell", { key: '20f47281da324a3fe529553b57c2e50de7a7039d' }, h("smoothly-display", { key: 'd9d02229b0bfa49122ede86d2513648a1448d8bf', type: "price", value: 220, currency: "EUR" }), h("smoothly-lazy", { key: '7803a63f59d968622edfb07fed2b40338fb1b460', slot: "detail", content: h("span", null, h("smoothly-display", { type: "price", value: 120, currency: "EUR" }), " + ", h("smoothly-display", { type: "price", value: 100, currency: "EUR" })) }))), h("smoothly-table-row", { key: '0bf9dd84e89fef204799961f85e24b5a14d4c4d4' }, h("smoothly-table-cell", { key: '7feacfd6127864b97ac910256f434b42ee57dcd6' }, h("smoothly-display", { key: 'df857a1e9f9503c08c49f564a47bbb4b3b96f170', type: "date", value: "2024-01-02" })), h("smoothly-table-cell", { key: 'bd1848a3218ec7b9177b0354570fc3a96f827c0a' }, "Not Skipped"), h("smoothly-table-cell", { key: '1656b57464928e417afa36732fe710654c6c1e8d' }, h("smoothly-display", { key: '6097190c8c8c9ae2899a0497d524da52f42a145e', type: "price", value: 320, currency: "EUR" })))))));
+        return (h(Host, { key: '1b9dfde05087d6be2711b86baca19630286b2322' }, h("smoothly-table", { key: '0ba0536e747782d879f6a2cf099388435c881ad5', columns: 3 }, h("smoothly-table-head", { key: 'e14bea187af499007f4173c261526c72f3b89c8e' }, h("smoothly-table-row", { key: '9104850519968b86ba1f48f5ee997a1ccfa49a12' }, h("smoothly-table-cell", { key: '26dd9041355d04f517e3951ce608cc8b60b8caaf' }, "Date"), h("smoothly-table-cell", { key: 'b78eb957ed8ec68b5919362fe0afedc1f6375c5d' }, "Skip"), h("smoothly-table-cell", { key: '1f8ef467f5a9e9ba2157e126fc3adedb2821c9ea' }, "Total"))), h("smoothly-table-body", { key: '6679b94c153ce61b39957e64d453f8f5edd47cf0' }, h("smoothly-table-row", { key: 'd0f0c0b13b0e56b7fc761701897f9304c531c5d9' }, h("smoothly-table-cell", { key: '8e022e2e5befad0983c8d6e0567dc92a8fe1bb0c', span: 2 }, h("smoothly-display", { key: 'efb5e464048093e3855163818b6b38d86f084995', type: "date", value: "2024-01-01" })), h("smoothly-table-cell", { key: 'c9912c8e499f751cd84323b15b282f58e1a2a052' }, h("smoothly-display", { key: 'f618c45ed3960424e46ef6f40adf2b69c7307a08', type: "price", value: 120, currency: "EUR" }))), h("smoothly-table-row", { key: 'a8605b2eb3eb80ab039f2cc6e257842045e16909' }, h("smoothly-table-expandable-cell", { key: 'cf8436e7d932f4ff0d92a054c74275551961a1ab', span: 2 }, h("smoothly-display", { key: '2013f65b67bf9f03de31fabae41e2fa4cfab338c', type: "date", value: "2024-01-02" }), h("smoothly-lazy", { key: 'e8d3b46995025d2f3af0f2f587b555bf4d1c0daf', slot: "detail", content: h("smoothly-display", { type: "date-time", value: "2024-01-02T13:37:00.000Z" }) })), h("smoothly-table-expandable-cell", { key: '0409b2d3c90ada5737e6bb9069fb1066ff7063af' }, h("smoothly-display", { key: '82bd4a3cde9062604343fd53161a7d86838f4fed', type: "price", value: 220, currency: "EUR" }), h("smoothly-lazy", { key: '4592efa154194347becf15f00275303577d743b7', slot: "detail", content: h("span", null, h("smoothly-display", { type: "price", value: 120, currency: "EUR" }), " + ", h("smoothly-display", { type: "price", value: 100, currency: "EUR" })) }))), h("smoothly-table-row", { key: '0aa33698c9d9de3f41d04298d60a15b62f9294e4' }, h("smoothly-table-cell", { key: '5e7265ba2d08b2aba02decd78ad88319cc407f72' }, h("smoothly-display", { key: '5af078d9ea92c4a6865a3f7545ece78d709c85fd', type: "date", value: "2024-01-02" })), h("smoothly-table-cell", { key: '606899c1227efff03793e7108f413ca727b77304' }, "Not Skipped"), h("smoothly-table-cell", { key: '9fcdda1bad4686bf2c8a5a78486a05d25d923402' }, h("smoothly-display", { key: '033cf9f7f2f090738f71320df238d26152acdcd1', type: "price", value: 320, currency: "EUR" })))))));
     }
     static get is() { return "smoothly-table-demo-colspan"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/table/demo/filler-row/index.js

@@ -9,7 +9,7 @@ export class SmoothlyTableDemoFillerRow {
         }, 3000);
     }
     render() {
-        return (h(Host, { key: 'e2842ae7ee217b160d69fc5fa6cb686af528e2fc' }, h("smoothly-display", { key: '8ec4889c9bc004f61f6b9d91b87e9135f2b7ba11', type: "text", value: "Filler row" }), h("smoothly-table", { key: '39f5a22a15a05631cf015918050e94215a336d62', color: "primary", columns: 4 }, h("smoothly-table-head", { key: '271ced47bcbc64f53cc70bf3f1ca757059ac81dd' }, h("smoothly-table-row", { key: '7a7566c40b27be58ab6bc3f6eeea2b5e90726cf5' }, h("smoothly-table-cell", { key: 'c3f0eb89f019759418b4524fa923194e1eaa05c9' }, "Breed"), h("smoothly-table-cell", { key: 'beb4c8b9c55d96c4f3e9faa71bfc9bf3971a1e25' }, "Country"), h("smoothly-table-cell", { key: '6c8e3177e07f82961707a6f31729ede9da79acd9' }, "Coat"), h("smoothly-table-cell", { key: '71023e2b53ab05e19b5d2f973f4b45c6ad1b7525' }, "Origin"))), h("smoothly-table-body", { key: 'a4a2e96740dbb0191031fb008fba9c349f4d37b1' }, this.cats === undefined ? (h("smoothly-table-filler-row", null, "No data to display")) : this.cats.length === 0 ? (h("smoothly-table-filler-row", null, h("smoothly-spinner", { style: { margin: "auto" }, color: "default", size: "small" }))) : (this.cats.map(a => (h("smoothly-table-row", null, h("div", { class: "smoothly-table-cell" }, a.breed), h("div", { class: "smoothly-table-cell" }, a.country), h("div", { class: "smoothly-table-cell" }, a.coat), h("div", { class: "smoothly-table-cell" }, a.origin)))))))));
+        return (h(Host, { key: 'f857bf2706fea0bc7bef38da1231c17460e9c609' }, h("smoothly-display", { key: '56bb55f00ea43d80e8b94460bb2e951bc741aa72', type: "text", value: "Filler row" }), h("smoothly-table", { key: '3a6c43bc37797672d40417395ffdacca1b52f327', color: "primary", columns: 4 }, h("smoothly-table-head", { key: '09289f8564422ceb0f8b7d33040a561d35dc9a02' }, h("smoothly-table-row", { key: '9675f44ce397953bc4b674bc768299d3a018820e' }, h("smoothly-table-cell", { key: '8fde03da5517c6f75c7c8da3c5bb336d2ed5a4b0' }, "Breed"), h("smoothly-table-cell", { key: '721fc804d59cb6dca7b66b2fd38dd700172322be' }, "Country"), h("smoothly-table-cell", { key: 'e8fbd6258f7167841eef83776e00406cd9ed3690' }, "Coat"), h("smoothly-table-cell", { key: '3e514eab5bb013da0d23cdde06324492bb97632b' }, "Origin"))), h("smoothly-table-body", { key: 'a14df5fcfad26c2d54ef13810e409ed65f72ac39' }, this.cats === undefined ? (h("smoothly-table-filler-row", null, "No data to display")) : this.cats.length === 0 ? (h("smoothly-table-filler-row", null, h("smoothly-spinner", { style: { margin: "auto" }, color: "default", size: "small" }))) : (this.cats.map(a => (h("smoothly-table-row", null, h("div", { class: "smoothly-table-cell" }, a.breed), h("div", { class: "smoothly-table-cell" }, a.country), h("div", { class: "smoothly-table-cell" }, a.coat), h("div", { class: "smoothly-table-cell" }, a.origin)))))))));
     }
     static get is() { return "smoothly-table-demo-filler-row"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1,7 +1,7 @@
 import { Fragment, h, Host } from "@stencil/core";
 export class SmoothlyTableDemoGroup {
     render() {
-        return (h(Host, { key: '044be2a5a9260e32e91ee8375a225a0dee587ce9' }, h("smoothly-display", { key: 'c8a77f7bcd0bc541ad217e1df6828a2b0815e2f8', type: "text", value: "Group" }), h("smoothly-table", { key: '807f4357d1197b355711e01d5edffd8d3983db6a', color: "primary", columns: 2 }, h("smoothly-table-head", { key: '6b1b3b0e281764d1430fe6b765f2872884e2e09e' }, h("smoothly-table-row", { key: 'c9b2dd1d3b4c17256cbc1d7214a7654cb82d4436' }, h("smoothly-table-cell", { key: 'b1c8d54323e816490f28005e6bbe618c2ffe0e4a' }, "Date"), h("smoothly-table-cell", { key: 'e45d0a4862cbe71c8cca27a8d6aa6a0956709019' }, "Total"))), h("smoothly-table-body", { key: 'c0bdce1d860654b8ba88bac33a9f035363061d19' }, h("smoothly-table-row-group", { key: 'a11c8367f087e12e0a02d25f8b48a29689107e06', align: true }, h("smoothly-display", { key: '8ab3110cbf9d57591bfa9a2dcc9c7e224792a104', slot: "start", type: "date", value: "2024-01-01" }), h("smoothly-display", { key: '826f0acd265a99d445b6786458c232172d2cf381', slot: "end", type: "price", currency: "EUR", value: 510 }), h("smoothly-table-expandable-row", { key: 'ccc0645a756649d0e748f147eec063aa5c7c7036' }, h("smoothly-table-cell", { key: '3a7e33ab43dca04d24872c2041833bff916e8934' }, h("smoothly-display", { key: '972c99f625f6b27352b3e3c17007a6923a1cbfce', type: "date-time", value: "2024-01-01T01:37:00.000Z" })), h("smoothly-table-cell", { key: 'bfe695bac2c193687738aafd05a78cb23feac052' }, h("smoothly-display", { key: '934d9207b9971fa1d7787822e7405f1e9def7a13', type: "price", currency: "EUR", value: 250 })), h("smoothly-lazy", { key: 'a94346f2caa9c0edfa9608485b458da151fae5f9', slot: "detail", content: h(Fragment, null, "Details of 2024-01-01T01:37:00.000Z") })), h("smoothly-table-expandable-row", { key: '51f21f7bc12d6662392b96f7582a78f19d7dc0af' }, h("smoothly-table-cell", { key: '9bf2051dbb810a8eaa7da2ffe850435a943ab7b2' }, h("smoothly-display", { key: '1abb624a6c4cd85f191576e4155e90f12529ac11', type: "date-time", value: "2024-01-01T13:37:00.000Z" })), h("smoothly-table-cell", { key: 'a796212e2c36cbaac2d2d9d10960310c23b7d3e0' }, h("smoothly-display", { key: '605eeaac1fee2ccfd96d900cdbda80e98cf86886', type: "price", currency: "EUR", value: 260 })), h("smoothly-lazy", { key: '8905ac1b38a2acf766c60c74284399a44331874d', slot: "detail", content: h(Fragment, null, "Details of 2024-01-01T13:37:00.000Z") }))), h("smoothly-table-row", { key: '4d49a3ada2507ec28ae70b3361e620758bd95977' }, h("smoothly-table-cell", { key: '9d6c8b5ba8f0704745e014eeaa0eec94f1957739' }, h("smoothly-display", { key: '851e641172245203cc8c80fe191c629c1e8036f6', type: "date", value: "2024-01-02" })), h("smoothly-table-cell", { key: '7a6160c20b31624b7f181526da09ffe4df40ef36' }, h("smoothly-display", { key: '229e788a885e95aa6abb8a0ef633579a17e87a95', type: "price", currency: "EUR", value: 130 }))), h("smoothly-table-row-group", { key: '42fbdb5745b91dc7f42d19f3fb4e7a9c53b96a78' }, h("smoothly-display", { key: '6dcfdbe08def271dfeaf89a1d8fff32e921971b1', slot: "start", type: "date", value: "2024-01-03" }), h("smoothly-display", { key: 'fe218184eb784cc7cd3094775096f81981ee8733', slot: "end", type: "price", currency: "EUR", value: 720 }), h("smoothly-table-expandable-row", { key: '8611b77389d19cb2463ff654328520acc0229030' }, h("smoothly-table-cell", { key: '75d7572ca30ae4a051f3756794a7117c5c7f3c46' }, h("smoothly-display", { key: 'fb86017176633bc226dafc03e37b9ac282f88ddc', type: "date-time", value: "2024-01-03T01:37:00.000Z" })), h("smoothly-table-cell", { key: 'be847bc7c1ac7781c2bc9637b6143b493e9688eb' }, h("smoothly-display", { key: '553cd5b7591033b6f8743b1e6b14e7ec15552889', type: "price", currency: "EUR", value: 320 })), h("smoothly-lazy", { key: 'f3dfa33ba846fdcb5172b0ad47c3ab14e29ee6fb', slot: "detail", content: h(Fragment, null, "Details of 2024-01-03T01:37:00.000Z") })), h("smoothly-table-expandable-row", { key: '7e5acc9b813857a344b7ffde22549088f26bda0a' }, h("smoothly-table-cell", { key: '5cba3d4839ba15c0193e7eec1ac664bc9b3f5f61' }, h("smoothly-display", { key: '312c552c6ccece6028c4cdd8ab0f5f2af3391d5c', type: "date-time", value: "2024-01-03T13:37:00.000Z" })), h("smoothly-table-cell", { key: 'a4273386dd793a0ecb8284727869a51345d0e5bc' }, h("smoothly-display", { key: '21a7a1c5c0a9bcf5e3594a4b48f7c54eb5af0b9a', type: "price", currency: "EUR", value: 400 })), h("smoothly-lazy", { key: '04ee16af0d0033862aa7e29033d0edf95a9b6bfb', slot: "detail", content: h(Fragment, null, "Details of 2024-01-03T13:37:00.000Z") }))), h("smoothly-table-row-group", { key: '7ce12fc20fea9844d23e773e19a0296e8dedcbb2' }, h("smoothly-display", { key: 'ece4ded9117930fc4c64c8d2740ed8add76f4fb6', slot: "start", type: "date", value: "2024-01-04" }), h("smoothly-table-expandable-row", { key: 'b43e2f3e5e51beb019da6b4b823014df4fb9b7ad' }, h("smoothly-table-cell", { key: 'd8ec8e3397e6c702a0ce7ffc1148258b357d850f' }, h("smoothly-display", { key: '663260db0785da46c8978f561aea13ffe434a319', type: "date-time", value: "2024-01-04T01:37:00.000Z" })), h("smoothly-table-cell", { key: 'd526a2aa10c7be28d6e2be439984604c25e98ae8' }, h("smoothly-display", { key: '68f15b2b6bfd5faff55b3421e914633f7e54abc2', type: "price", currency: "EUR", value: 320 })), h("smoothly-lazy", { key: '32eacc646bc96494eab5c117f22f543044a28a16', slot: "detail", content: h(Fragment, null, "Details of 2024-01-04T01:37:00.000Z") })), h("smoothly-table-expandable-row", { key: '419ca2c46ff03e1ef1a78e2089198337c5aeb180' }, h("smoothly-table-cell", { key: '06a07b9699ffe395dc0c68fd8993ab3e4ae27117' }, h("smoothly-display", { key: 'a2cba094f5178e043d930f445304ed7eab4f7fdd', type: "date-time", value: "2024-01-04T13:37:00.000Z" })), h("smoothly-table-cell", { key: '8e974a68dd724ece0945ff277229f8c70a6c9e04' }, h("smoothly-display", { key: 'beb312d995aa44c5138cbb748237d5cf02c944f3', type: "price", currency: "EUR", value: 400 })), h("smoothly-lazy", { key: '75801728d6f20f9e4acbe38a2b302b73ce8cbd32', slot: "detail", content: h(Fragment, null, "Details of 2024-01-04T13:37:00.000Z") }))), h("smoothly-table-row-group", { key: 'a5d4d32fcb7ac204a3734dea7a616c88307e6cbe' }, h("smoothly-display", { key: '2331960fe63909aef8f9b35ecdd76bc37deb6375', slot: "end", type: "price", currency: "EUR", value: 720 }), h("smoothly-table-expandable-row", { key: '19b69cb0e6265bcae3413ff3deacb31359825110' }, h("smoothly-table-cell", { key: 'b1573bf5ea27d637dd429e80c012192fc22e0660' }, h("smoothly-display", { key: 'd8777e74c334c73a60a7fcd377c8ef1d69fae20e', type: "date-time", value: "2024-01-05T01:37:00.000Z" })), h("smoothly-table-cell", { key: '49f464b913486092a2de9b27750a71b00061eef3' }, h("smoothly-display", { key: '0d716ae1f80fa8f98c84e623d1935b7a0213a648', type: "price", currency: "EUR", value: 320 })), h("smoothly-lazy", { key: '7c8d2f82680b35d8f231d828c6ffdb2b6ebb31da', slot: "detail", content: h(Fragment, null, "Details of 2024-01-05T01:37:00.000Z") })), h("smoothly-table-expandable-row", { key: 'b64d7b474e70a8d3334660a01feb0b26c8403e40' }, h("smoothly-table-cell", { key: '64bf40d93b8ff419695fa7d69d4894585e77d92d' }, h("smoothly-display", { key: 'ba5694ed645bb9b5105fa0ffe1dacd63dfa4d72c', type: "date-time", value: "2024-01-05T13:37:00.000Z" })), h("smoothly-table-cell", { key: '837a934ab755965bfad88ed07a5b21a7c7877738' }, h("smoothly-display", { key: '6e2b0d5a372e022374c514393f8a9a439cb06480', type: "price", currency: "EUR", value: 400 })), h("smoothly-lazy", { key: '13966802b164b23cd3959c54373a91a4b99d1ab8', slot: "detail", content: h(Fragment, null, "Details of 2024-01-05T13:37:00.000Z") }))), h("fake-group-wrapper", { key: 'dc7031260e2ca39650f89659822ed86320701751' }, h("smoothly-table-row-group", { key: '8c4f9f5fd19f9c144c439aaba701c0b0a1b22272' }, h("smoothly-display", { key: '9458e205c4be0d91ce42eff9bcecded48c69c961', slot: "start", type: "date", value: "2024-01-06" }), h("smoothly-display", { key: 'a139382798f85d6922dea91e86b473cd2bfd486a', slot: "end", type: "price", currency: "EUR", value: 720 }), h("fake-row-wrapper", { key: 'ae33f14933f819975a4313ad4255d00b371bd677' }, h("smoothly-table-row", { key: 'ececad7f1be8f60215da7e2f2dce838fefcdf279' }, h("fake-cell-wrapper", { key: 'defb123cb025e0dc64085a248645c635bc488507' }, h("smoothly-table-cell", { key: '97cd28e0c190afcab36d300de24bd5ba4c42139b' }, h("smoothly-display", { key: 'd5ec9b80ecffcac24cb936ac8383161523de7e60', type: "date", value: "2024-01-02" }))), h("fake-expandable-cell-wrapper", { key: '08d0df0f2c099dab483a9c2c48b286e3bcba0346' }, h("smoothly-table-expandable-cell", { key: '53b96521de90492a28d44c74ecd6674828a9d54e' }, h("smoothly-display", { key: '9bf466b6f3090ad44103e1eb2be42fde3a337910', type: "price", currency: "EUR", value: 130 }), h("smoothly-lazy", { key: '55f6d59ab1c85058c5634774f33c9a71a9451917', slot: "detail", content: h("span", null, h("smoothly-display", { type: "price", value: 100, currency: "EUR" }), " + ", h("smoothly-display", { type: "price", value: 30, currency: "EUR" })) }))))), h("fake-expandable-row-wrapper", { key: '8476b93642f2b53e5c8ae23698c54edb072c6361' }, h("smoothly-table-expandable-row", { key: '8535dad53ba0eaf19f5ee5d2f5b1f3d6f3e1c6bd' }, h("fake-cell-wrapper", { key: 'ff5facddb89a2cf15f18634ad8f7e8780a51cb6d', class: "span-2" }, h("smoothly-table-cell", { key: 'a4508b413fd6e98ac9d64043dee769bb2ff5c97b', span: 2 }, h("smoothly-display", { key: '65865507298b01080b39b2c7b856e37bcac1ba46', type: "date", value: "2024-01-07" }))), h("smoothly-lazy", { key: '2e6baa60bcdcd7a892b9863975d2ff90a11fbc9f', slot: "detail", content: h("smoothly-display", { type: "date-time", value: "2024-01-07T13:37:00.000Z" }) }))))), h("smoothly-table-row-group", { key: 'bee25e3af1397c26cbcb59fe0aeb178f672d60c3' }, h("smoothly-display", { key: '89e48e848f09c8edb0a5a71de18f6a6e02e298f8', slot: "start", type: "date", value: "2024-01-08" }), h("smoothly-display", { key: '8eb48628fe13eeef290c1b086d3baa338c010cc2', slot: "end", type: "price", currency: "EUR", value: 720 }))))));
+        return (h(Host, { key: '9af97a2dd73e554ea9c1bff231782e9889157fde' }, h("smoothly-display", { key: '2257c3cba1ba5ce0431e32f53dfd92573b25bcb3', type: "text", value: "Group" }), h("smoothly-table", { key: '90b901a78ae391af9f7acdd0ef1c494a8f6fe133', color: "primary", columns: 2 }, h("smoothly-table-head", { key: '972dd604c495658a4655c9d4afbe7585b7f34e9e' }, h("smoothly-table-row", { key: '71e959f5666e68ad006252a4591a194840495936' }, h("smoothly-table-cell", { key: '62d2bd26dce8826b74dc4c8e8c569532cc07ca45' }, "Date"), h("smoothly-table-cell", { key: 'f866b0f9719d679f6a7830c65ac3391491c00349' }, "Total"))), h("smoothly-table-body", { key: '70dc05107403877ad47644460a09d3250c1ddd1e' }, h("smoothly-table-row-group", { key: 'e7f2268c625dcdb0350b9b6171fdbeb3163d8413', align: true }, h("smoothly-display", { key: 'dac67a56a4fc3ab520128b3b63646cde0c6fcbce', slot: "start", type: "date", value: "2024-01-01" }), h("smoothly-display", { key: 'ed4b8fd5dcafc2cae49e475b4c091d35b2b30b3f', slot: "end", type: "price", currency: "EUR", value: 510 }), h("smoothly-table-expandable-row", { key: 'ff08cffdfcec5945cb13ea713e5379ff16e8e917' }, h("smoothly-table-cell", { key: '2575df31b1c799750a491c07400b90f3c8c0732e' }, h("smoothly-display", { key: 'a72e50c14f31b8061a78eb378fdf243e6a757d9a', type: "date-time", value: "2024-01-01T01:37:00.000Z" })), h("smoothly-table-cell", { key: 'b88eb73fcb09cbce241d452905f767498da92335' }, h("smoothly-display", { key: 'bf82b932285431bc9beb341f8c5bd9aaa5b56766', type: "price", currency: "EUR", value: 250 })), h("smoothly-lazy", { key: '0f51682b219b4130d614bffb8399011764f81018', slot: "detail", content: h(Fragment, null, "Details of 2024-01-01T01:37:00.000Z") })), h("smoothly-table-expandable-row", { key: '24aedfa873558b5bfc91d12ed8a1283097b11add' }, h("smoothly-table-cell", { key: '5e7a30c94f9c8b5607ced0bdc1756ba89a9b19e9' }, h("smoothly-display", { key: 'bc14c1e289193e3be9bf3ba4940e11eb2db915f7', type: "date-time", value: "2024-01-01T13:37:00.000Z" })), h("smoothly-table-cell", { key: 'd82b33d05e427ec17f8aae619b168e6968addb68' }, h("smoothly-display", { key: 'a9b7548b18d6ba3dfa509ce436bc90848a485f15', type: "price", currency: "EUR", value: 260 })), h("smoothly-lazy", { key: '5f6c95d971232a61ba4366a0506c6a4d6e143b08', slot: "detail", content: h(Fragment, null, "Details of 2024-01-01T13:37:00.000Z") }))), h("smoothly-table-row", { key: '5e50d0d8833c2d51d3926dd13d13632be5d4a14a' }, h("smoothly-table-cell", { key: '500e6fa274591bfa46fb7df980e5c00e66950f1f' }, h("smoothly-display", { key: 'f3b0357299f95a2708a205a2d6a36fc9153a113c', type: "date", value: "2024-01-02" })), h("smoothly-table-cell", { key: 'e714d0a9d84bc9c2fb7e63df0a5a2242ff0aeb47' }, h("smoothly-display", { key: 'f77b5b7645e03522332aad7c867cc9cc7d50ce5a', type: "price", currency: "EUR", value: 130 }))), h("smoothly-table-row-group", { key: 'd5563da2fba612869aee7e52891dbe3bbbb3eb5b' }, h("smoothly-display", { key: '938b397b77eccae59e9d75c6095314b04d49005d', slot: "start", type: "date", value: "2024-01-03" }), h("smoothly-display", { key: '94cf02e6a97968bc0698e36db986b8f201f383e3', slot: "end", type: "price", currency: "EUR", value: 720 }), h("smoothly-table-expandable-row", { key: 'cd8a0312c1308565eecd1989eff865836259e9ec' }, h("smoothly-table-cell", { key: '6e53dceadf261cfd110895b6803f85f428fbc788' }, h("smoothly-display", { key: '7f006f2a033a00961c7a6a3d68c22f873857ad98', type: "date-time", value: "2024-01-03T01:37:00.000Z" })), h("smoothly-table-cell", { key: '039d08030bd0f63af9c1afa1a728dadc9680ae82' }, h("smoothly-display", { key: 'd88710af1a900007217541f3943e5a7efb5a2a3f', type: "price", currency: "EUR", value: 320 })), h("smoothly-lazy", { key: 'fdcd37bb700758be174cc0e5713b4c07403f8682', slot: "detail", content: h(Fragment, null, "Details of 2024-01-03T01:37:00.000Z") })), h("smoothly-table-expandable-row", { key: '79b4d9f391ef6ab8841d2de05cf8aa55ef8a59ec' }, h("smoothly-table-cell", { key: 'c1261022a5c3fffe6119e321d129907c07fe18ac' }, h("smoothly-display", { key: '5748d8bc6db59fab0f80ce1812f569287d808b81', type: "date-time", value: "2024-01-03T13:37:00.000Z" })), h("smoothly-table-cell", { key: '118a115ba40c16775073062b039d382e5501cca4' }, h("smoothly-display", { key: '42d80083625b2e8374f00c629ea64802788c8459', type: "price", currency: "EUR", value: 400 })), h("smoothly-lazy", { key: '808b3347c13ec37e4a4a1b63c91392eb667e4f66', slot: "detail", content: h(Fragment, null, "Details of 2024-01-03T13:37:00.000Z") }))), h("smoothly-table-row-group", { key: '6f0a95e81ca788091fc90768f1a0f295fa35b6b9' }, h("smoothly-display", { key: '731be311b19de2a133edc969fc6561ded4e6aa99', slot: "start", type: "date", value: "2024-01-04" }), h("smoothly-table-expandable-row", { key: 'e09a2691c08602f3fda9b2803a30ea5056761c27' }, h("smoothly-table-cell", { key: 'e50ef37a30a54a6d1b76cd27fe678c6d4e998486' }, h("smoothly-display", { key: '2b2147f209ef7ef3fcdefe8526d8332188a64e60', type: "date-time", value: "2024-01-04T01:37:00.000Z" })), h("smoothly-table-cell", { key: 'df7f27802f806d3d63c9855f49b26a7281ab2c7e' }, h("smoothly-display", { key: '0945da5982870fab2637680ecaa974801c046690', type: "price", currency: "EUR", value: 320 })), h("smoothly-lazy", { key: 'be7bcd85defabd41296f9e428cbac22bdf52fffc', slot: "detail", content: h(Fragment, null, "Details of 2024-01-04T01:37:00.000Z") })), h("smoothly-table-expandable-row", { key: '4caaa5c8890ff1aca72adea083a6fe58f23ffc1d' }, h("smoothly-table-cell", { key: '46ffccf1ff8e575e1784a8a8b62799c163f76bff' }, h("smoothly-display", { key: 'df4c90a165a16556072af954ddd2ecf2a25fb6cb', type: "date-time", value: "2024-01-04T13:37:00.000Z" })), h("smoothly-table-cell", { key: 'c42afea6b5256e18b5c0bd235abb00a5589a1639' }, h("smoothly-display", { key: 'afd91932af6b3d9df399e31f3a3dfb3710dd67da', type: "price", currency: "EUR", value: 400 })), h("smoothly-lazy", { key: '116923536874fae3bf8f248c654620d7e9d84caf', slot: "detail", content: h(Fragment, null, "Details of 2024-01-04T13:37:00.000Z") }))), h("smoothly-table-row-group", { key: 'c5bfe45b4fe1f13f93cfd525ae19d50442851294' }, h("smoothly-display", { key: 'bd7d161f3cafdcbd699db62bc17723818ef72549', slot: "end", type: "price", currency: "EUR", value: 720 }), h("smoothly-table-expandable-row", { key: '6c23d8c95b24d54b1b331353e18b75069d088ead' }, h("smoothly-table-cell", { key: 'bb493a1fd99fffea71a80b2ee6896461c6690b67' }, h("smoothly-display", { key: 'a97142706d066ef6044dd8c2ffebf1dd205a42aa', type: "date-time", value: "2024-01-05T01:37:00.000Z" })), h("smoothly-table-cell", { key: 'd1dc093bebe2b4983aba8a146958dd91ba25e3d1' }, h("smoothly-display", { key: '375f129f914048e76c1fcb32b9f95eb83acca27c', type: "price", currency: "EUR", value: 320 })), h("smoothly-lazy", { key: '0b75809560b5a2eef3e8efb5a1d4b413430ffff9', slot: "detail", content: h(Fragment, null, "Details of 2024-01-05T01:37:00.000Z") })), h("smoothly-table-expandable-row", { key: 'b53719c5188bb125812eec710b00bf93a7d64fce' }, h("smoothly-table-cell", { key: '20012bd7ea22477b21ca4c6522e04a2296cb5e95' }, h("smoothly-display", { key: '6bbd6c62dad1231cb57e68df58ccceaa33ec76ea', type: "date-time", value: "2024-01-05T13:37:00.000Z" })), h("smoothly-table-cell", { key: 'a04700a2c7ba95e6912a0c8685dd394e1116e56a' }, h("smoothly-display", { key: '28993df17be6cd71f9d8da5580bd13173e5b1728', type: "price", currency: "EUR", value: 400 })), h("smoothly-lazy", { key: '716d3711fb1ba17f1b07e40d0cc4e42f77d6e48a', slot: "detail", content: h(Fragment, null, "Details of 2024-01-05T13:37:00.000Z") }))), h("fake-group-wrapper", { key: '5a8d87d22055a3cc9a6eb3fac647b3b10ddf3107' }, h("smoothly-table-row-group", { key: '6c29d6604c34f297e75f4b5d6b1599b38e3f5c4f' }, h("smoothly-display", { key: '25835c64a61ef3ef5ded3ec48be000c759f3c263', slot: "start", type: "date", value: "2024-01-06" }), h("smoothly-display", { key: 'b986fbafe80daab7dd7a2c522785c633406c01c0', slot: "end", type: "price", currency: "EUR", value: 720 }), h("fake-row-wrapper", { key: '6f0817c4ed598275401f6d86c869dd39b3b900bb' }, h("smoothly-table-row", { key: 'c627b346517b950d2883bed648e8acd06991f7dd' }, h("fake-cell-wrapper", { key: '2136dcadb092ce67f4ce986fe3bd1d73759ad03b' }, h("smoothly-table-cell", { key: '21f1b8c4df866a68caee5da599e1bb8219e042b7' }, h("smoothly-display", { key: '857236ba64c06093da4c1ecb7eae6710c2cddbce', type: "date", value: "2024-01-02" }))), h("fake-expandable-cell-wrapper", { key: 'c840c1896076ee2ca7e6bf3217b6f89ec3cfac7e' }, h("smoothly-table-expandable-cell", { key: 'b5dd3983275b0e6948b71d4d5d4e8696ed9a0373' }, h("smoothly-display", { key: '44b2aa3acfebb161747e8e693fcadd6a95c1f2df', type: "price", currency: "EUR", value: 130 }), h("smoothly-lazy", { key: 'e555b070d789e2ec97a730de08dd5b4c479eb06a', slot: "detail", content: h("span", null, h("smoothly-display", { type: "price", value: 100, currency: "EUR" }), " + ", h("smoothly-display", { type: "price", value: 30, currency: "EUR" })) }))))), h("fake-expandable-row-wrapper", { key: '47afe4d30b2e7a0f29f019489d00f93679b3b3f5' }, h("smoothly-table-expandable-row", { key: '0e066e8ef7beb4f5212b7ab366faa8e8a766f8fc' }, h("fake-cell-wrapper", { key: 'c1e8f9e0bc80e21f5cf13a9e1c08dccfc69812a6', class: "span-2" }, h("smoothly-table-cell", { key: 'aa446fc3558e1777af3f7db9de01838e2f7da1b9', span: 2 }, h("smoothly-display", { key: '80800c6bc0d00193c959425eb1e72d82f74519e1', type: "date", value: "2024-01-07" }))), h("smoothly-lazy", { key: '761732bea1df5e3e78dadef9c2817610e50169ff', slot: "detail", content: h("smoothly-display", { type: "date-time", value: "2024-01-07T13:37:00.000Z" }) }))))), h("smoothly-table-row-group", { key: 'ccc5676e70c09b50f05a5429c8bbba6e7c0031df' }, h("smoothly-display", { key: '8ef9e40351c078324f6f599addbf8d767b4d4a77', slot: "start", type: "date", value: "2024-01-08" }), h("smoothly-display", { key: 'fb97dc92fb8b501a5bcf89e68a1d8ebba1a856b4', slot: "end", type: "price", currency: "EUR", value: 720 }))))));
     }
     static get is() { return "smoothly-table-demo-group"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class SmoothlyTableDemo {
     render() {
-        return (h(Host, { key: 'd7277fac7e25efa923ce5e7263b7fe07b3d1ae7c' }, h("smoothly-table-demo-filler-row", { key: '74942c1891773856c68b58eae197b663476e1892' }), h("smoothly-table-demo-group", { key: 'f307da0e9acdb2269e15e58dd0299539a3f6f3a5' }), h("smoothly-table-demo-colspan", { key: '80c976bd5cdbc95a0248b4efaa48805236f0bf08' }), h("smoothly-table-demo-simple", { key: 'b9de2b65113c2ee7543733abef20476b19b440db' }), h("smoothly-table-demo-nested-no-cell", { key: 'd6b6c367cd66b9cc2eb8cfa86800e6697a258071' })));
+        return (h(Host, { key: '35794212738d56a6ee77383f2cdee89a57db82f1' }, h("smoothly-table-demo-filler-row", { key: '4eeaba2055e5ad58c8e9942264a5f8d81c04e29e' }), h("smoothly-table-demo-group", { key: 'e8d15d7d715d993385df9de46b4dc42597f3a120' }), h("smoothly-table-demo-colspan", { key: '7ae3ade7115e92e55cb992749b6a5e5a6371634d' }), h("smoothly-table-demo-simple", { key: 'edd4c2e7e16c3c9bbb2e28f4321b66fad061e339' }), h("smoothly-table-demo-nested-no-cell", { key: 'd07a40ff623a290ea90367b1b170ecd93b150565' })));
     }
     static get is() { return "smoothly-table-demo"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/table/demo/nested-no-cell/index.js

@@ -5,7 +5,7 @@ export class SmoothlyTableDemoNestedNoCell {
         this.loadedRows = [];
     }
     render() {
-        return (h(Host, { key: 'f0cccc2533446b88de6b0956cb2c24c3ec106962' }, h("smoothly-display", { key: '997fa002f0a3a14e1516d2fe4eb7cf9491979819', type: "text", value: "Nested" }), h("smoothly-table", { key: 'ec7a88e096863fe59f1c5f7c80aaa4a538bb1b48', color: "primary", columns: 8 }, h("smoothly-table-head", { key: '821e802acadb9d8158badd884ee120228feb41de' }, h("smoothly-table-row", { key: '029120e75a85535c08a7bde66ae8835270716e2f' }, h("div", { key: 'acbe3da2f1f60da436c44523b2797b30221996d8', class: "smoothly-table-cell" }, "Id"), h("div", { key: 'd764a06cee565fdb4361161090c7d3ef57b5e5cf', class: "smoothly-table-cell" }, "Registered"), h("div", { key: '17f3a9f0b08bc9b9f22a590942faf5fdbc7344aa', class: "smoothly-table-cell" }, "Name"), h("div", { key: '5a1e9388b4bec34d26cc186cd0d801b9ff8ccb16', class: "smoothly-table-cell" }, "Age"), h("div", { key: '80e4ff513a81355d9e6526057c19d93b65bc457d', class: "smoothly-table-cell" }, "Balance"), h("div", { key: '55594b070d4f81852eab51086bec06a7b04c0635', class: "smoothly-table-cell" }, "EyeColor"), h("div", { key: 'bd684d81b4b52fa721c34846c8cd94b61eca490e', class: "smoothly-table-cell" }, "Gender"), h("div", { key: '3b078a0ee2ea599d54be265f24796024b23ededd', class: "smoothly-table-cell" }, "Company"))), h("smoothly-table-body", { key: 'db35dab7f93e802c1d95c686dd8bc5262362a8f8' }, data.map((entry, index) => (h("smoothly-table-expandable-row", { onSmoothlyTableExpandableRowChange: event => {
+        return (h(Host, { key: '460dd1e98f1ee50a19fbbcc297389ce8406bb59c' }, h("smoothly-display", { key: '36a48c1134c56fb73ee494a3d5838a07485473a1', type: "text", value: "Nested" }), h("smoothly-table", { key: '8eaba9ebaaad200fa7bd0addaca098651dff32c4', color: "primary", columns: 8 }, h("smoothly-table-head", { key: '0a4c113f707aa20076ea30a3a5dd2f27152fedac' }, h("smoothly-table-row", { key: '0c4d3e3ded2c62be537c7304d37533ba3a53e9ac' }, h("div", { key: 'f59f569ba6872affb34f6cf043f08a597f171e2e', class: "smoothly-table-cell" }, "Id"), h("div", { key: 'a72101553c2d7af6d2ce92d488b7cb0aaf622fca', class: "smoothly-table-cell" }, "Registered"), h("div", { key: 'c442f7e5260320209001d6b381089a68f33cf0c1', class: "smoothly-table-cell" }, "Name"), h("div", { key: 'd5c73e0cafdfa5db279babe93176b0efebffb256', class: "smoothly-table-cell" }, "Age"), h("div", { key: 'd668bf984ce8de36976bf95f2ede82f0770336d6', class: "smoothly-table-cell" }, "Balance"), h("div", { key: '9f92f505cef3b3fa10538a33ce94d1aea27e8496', class: "smoothly-table-cell" }, "EyeColor"), h("div", { key: 'def6a9aad7bb6fb64bf6400650c75c5bf89fcec4', class: "smoothly-table-cell" }, "Gender"), h("div", { key: '1e0aad645cb72a7dc7cde05d0e30cb46a86de437', class: "smoothly-table-cell" }, "Company"))), h("smoothly-table-body", { key: '409e2bb51254cbfcb7f87bc77f0723e4ecbf162f' }, data.map((entry, index) => (h("smoothly-table-expandable-row", { onSmoothlyTableExpandableRowChange: event => {
                 if (event.detail) {
                     this.loadingIndex = index;
                     setTimeout(() => {
@@ -13,7 +13,7 @@ export class SmoothlyTableDemoNestedNoCell {
                         this.loadedRows = [...this.loadedRows, index];
                     }, 1500);
                 }
-            } }, this.loadingIndex === index && h("smoothly-spinner", { overlay: true, size: "small" }), this.loadedRows.includes(index) && (h("smoothly-table-demo-nested-no-cell-inner", { color: "secondary", data: entry.friends, slot: "detail" })), h("div", { class: "smoothly-table-cell" }, entry.id), h("div", { class: "smoothly-table-cell" }, entry.registered), h("div", { class: "smoothly-table-cell" }, entry.name), h("div", { class: "smoothly-table-cell" }, entry.age), h("div", { class: "smoothly-table-cell" }, entry.balance), h("div", { class: "smoothly-table-cell" }, entry.eyeColor), h("div", { class: "smoothly-table-cell" }, entry.gender), h("div", { class: "smoothly-table-cell" }, entry.company))))), h("smoothly-table-foot", { key: 'f09a7c7bdf3bf6a423f0dbbcd6999fcdb7d2c0b0' }, h("smoothly-table-row", { key: '6237c3e3f1e5eecb050caacac3a18c70fb7a1d13' }, h("div", { key: 'fa63fb23e29dbe508bec40b0349910597b016164', class: "smoothly-table-cell" }, "Footer Cell"), h("div", { key: '5ff91ed21cf8857ce5d89b2d9d028ad85b4172af', class: "smoothly-table-cell" }, "Footer Cell"))))));
+            } }, this.loadingIndex === index && h("smoothly-spinner", { overlay: true, size: "small" }), this.loadedRows.includes(index) && (h("smoothly-table-demo-nested-no-cell-inner", { color: "secondary", data: entry.friends, slot: "detail" })), h("div", { class: "smoothly-table-cell" }, entry.id), h("div", { class: "smoothly-table-cell" }, entry.registered), h("div", { class: "smoothly-table-cell" }, entry.name), h("div", { class: "smoothly-table-cell" }, entry.age), h("div", { class: "smoothly-table-cell" }, entry.balance), h("div", { class: "smoothly-table-cell" }, entry.eyeColor), h("div", { class: "smoothly-table-cell" }, entry.gender), h("div", { class: "smoothly-table-cell" }, entry.company))))), h("smoothly-table-foot", { key: '5c99a61adab8729709a0887dd866b462e6737554' }, h("smoothly-table-row", { key: '2d224a2a8ad6e35ff2c36eadec885de9f0203b48' }, h("div", { key: '78480235c2e055b5960c5a049314e323528e6030', class: "smoothly-table-cell" }, "Footer Cell"), h("div", { key: 'ba6d2fb174d44ad05eb6d99deec082a8180a247b', class: "smoothly-table-cell" }, "Footer Cell"))))));
     }
     static get is() { return "smoothly-table-demo-nested-no-cell"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/table/demo/nested-no-cell/inner/index.js

@@ -2,7 +2,7 @@ import { h, Host } from "@stencil/core";
 export class SmoothlyTableDemoNestedNoCellInner {
     render() {
         var _a;
-        return (h(Host, { key: '8695c1d15d2eec8b9ee575ed963af80f6319d2ef' }, h("smoothly-table", { key: '45cffac7f3ae618ce4ea0f5f8671f55ed9ba8ab2', columns: 4 }, h("smoothly-table-head", { key: 'c0bdfe025083af1569395f48452d7c1bf2ce2e8e' }, h("smoothly-table-row", { key: '70ef7fc95d6327e8c50134a3815f2b025c4d1f89' }, h("div", { key: 'c9d2b13223be6eddbb4831a9107b1a862d296f94', class: "smoothly-table-cell" }, "Id"), h("div", { key: '14cad91fd59c36a04673ea16250014ea894e0006', class: "smoothly-table-cell" }, "Name"), h("div", { key: '714b0198d5bc725eb78f937741b588b20eed003e', class: "smoothly-table-cell" }, "Age"), h("div", { key: 'f65a8705ba26a84827e11db27c763ea0f2308328', class: "smoothly-table-cell" }, "Balance"))), h("smoothly-table-body", { key: '531c1e3c65c0947291ab22cc888c18615f6b4ee7' }, (_a = this.data) === null || _a === void 0 ? void 0 : _a.map(entry => (h("smoothly-table-expandable-row", null, h("div", { class: "smoothly-table-cell" }, entry.id), h("div", { class: "smoothly-table-cell" }, entry.name), h("div", { class: "smoothly-table-cell" }, entry.age), h("div", { class: "smoothly-table-cell" }, entry.balance))))))));
+        return (h(Host, { key: 'aac05d43b4512b20fa4cec737ccb31ec3a528b56' }, h("smoothly-table", { key: 'b022de2650d8db21e46aab409b8d1df0dc409f80', columns: 4 }, h("smoothly-table-head", { key: '6516f877eb54fdebc85619885a92389af7ec34da' }, h("smoothly-table-row", { key: '8951f89b3230404a2fc8fc6ef1d48a20abea803c' }, h("div", { key: '82ee1252466066d77df7f70385faa4f83850d9a7', class: "smoothly-table-cell" }, "Id"), h("div", { key: '7145ba1e199eadecb5dd727ae1adfa52d25e4bce', class: "smoothly-table-cell" }, "Name"), h("div", { key: '60d99a7d209367adea18000214d01b4a3e1905b9', class: "smoothly-table-cell" }, "Age"), h("div", { key: 'ee489d4b66d755c9590cf0dfe23fe09c440773aa', class: "smoothly-table-cell" }, "Balance"))), h("smoothly-table-body", { key: '86837cf19c76e57fe423dd185e1c877e4f04b192' }, (_a = this.data) === null || _a === void 0 ? void 0 : _a.map(entry => (h("smoothly-table-expandable-row", null, h("div", { class: "smoothly-table-cell" }, entry.id), h("div", { class: "smoothly-table-cell" }, entry.name), h("div", { class: "smoothly-table-cell" }, entry.age), h("div", { class: "smoothly-table-cell" }, entry.balance))))))));
     }
     static get is() { return "smoothly-table-demo-nested-no-cell-inner"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class SmoothlyTableDemoSimple {
     render() {
-        return (h(Host, { key: '91f4891d9b3f238bbf5897254a8e709af436905a' }, h("smoothly-display", { key: '4b2dd92dffa7b2853be7d70a331308f12b04c5c2', type: "text", value: "Simple" }), h("smoothly-table", { key: '6a9840d72c42ae57008fe773a1e2efaaa598271f', color: "primary", columns: 2 }, h("smoothly-table-head", { key: '033754254544d75ce9c7ae69af93803eebc4136d' }, h("smoothly-table-row", { key: 'de2622eda56a4843b7b1b91d9b9ee2c700fcb3c6' }, h("smoothly-table-cell", { key: 'e445efc0c5585fc269ca0dc74873daef7679cf26' }, "Breed"), h("smoothly-table-cell", { key: '0f054ac68fae8dbdd09e467cede70e397529e722' }, "Coat"))), h("smoothly-table-body", { key: 'f80f23b30de2b1dcd6a266b8d1e1ae10b96c1e46' }, cats.map(cat => (h("smoothly-table-row", null, h("smoothly-table-expandable-cell", null, cat.breed, h("div", { slot: "detail" }, "Country:", h("br", null), cat.country)), h("smoothly-table-expandable-cell", null, cat.coat, h("div", { slot: "detail" }, "Pattern: ", cat.pattern))))), h("smoothly-table-row", { key: 'd469f986bbf4e1172906d081be9c73123e3940b5' }, h("smoothly-table-cell", { key: '437a8c8262a11e7270248adb3c8ee8598d4cf4e6' }, "Cell5"), h("smoothly-table-expandable-cell", { key: '3b58406815a7ce4568528d84aabb78627dba819c' }, "Expandable Cell", h("div", { key: '852283739f4d7085726ace98dfd4bf40c5572d95', slot: "detail" }, "Content of the expandable cell"))), h("smoothly-table-row", { key: '249c5a4b449506fc29fa6de81f3018c4f3afdb69' }, h("smoothly-table-expandable-cell", { key: '89bd889979a763f5d122f4b702955f6ec8a875a3' }, "Expandable Cell 1", h("div", { key: '8c022dbeb53e51f4cfa7dfad98c2040d04d453fa', slot: "detail" }, "Content of the expandable cell 1")), h("smoothly-table-expandable-cell", { key: '31cbf39571004b680efaecffb7674804191a5997' }, "Expandable Cell 2", h("div", { key: '3f2fb41ed70a88f413b0133dd5d85aa53bb9f062', slot: "detail" }, "Content of the expandable cell 2")))), h("smoothly-table-foot", { key: '814c8d8d2faab31d6edc4af6f20ad150352f96ea' }, h("smoothly-table-row", { key: 'c9c8981af50d5f2daf71f234f14a0ae2213d2c2a' }, h("smoothly-table-cell", { key: 'f7ee5b1e9bafd407ee9d191645efea768e9998f9' }, "Footer Cell"), h("smoothly-table-cell", { key: '85a523e583fbd8d45fa0c62ebc14d4f4f6be9ced' }, "Footer Cell"))))));
+        return (h(Host, { key: '70206f06c6f0927b7fd56f6c447441883cdb8cbb' }, h("smoothly-display", { key: 'fe882f04329755107f28029e6c3ed3162e2a6f2d', type: "text", value: "Simple" }), h("smoothly-table", { key: '943c5b0e05764d07eb88e9723c42214c7c785a74', color: "primary", columns: 2 }, h("smoothly-table-head", { key: 'e26f7945d199844450707d36aa848e7ef5e85e4c' }, h("smoothly-table-row", { key: 'f60bcd540697bf27ef22ba3b2db828c1eaba8a18' }, h("smoothly-table-cell", { key: '5e2e2d9f3724051fd61ff787caae7e47c120e31f' }, "Breed"), h("smoothly-table-cell", { key: '5ac9dddc03f397574b16d7809938f133be3a5e32' }, "Coat"))), h("smoothly-table-body", { key: '48228f02bdc713ef18e1e9400c7b274b6ed7a91f' }, cats.map(cat => (h("smoothly-table-row", null, h("smoothly-table-expandable-cell", null, cat.breed, h("div", { slot: "detail" }, "Country:", h("br", null), cat.country)), h("smoothly-table-expandable-cell", null, cat.coat, h("div", { slot: "detail" }, "Pattern: ", cat.pattern))))), h("smoothly-table-row", { key: '04146e8b286cede980153a96645635ec21d87135' }, h("smoothly-table-cell", { key: '37ff22202464b1ef68aecea476a5070e3612fa5d' }, "Cell5"), h("smoothly-table-expandable-cell", { key: '0db694a71548c2a27909bd2b74e9c4e24e1368cb' }, "Expandable Cell", h("div", { key: 'f73430644f301ba65ff5b10affee17b767dda779', slot: "detail" }, "Content of the expandable cell"))), h("smoothly-table-row", { key: 'd8e43c4f6104f2ea9ed4a3e1d5526f4216cd1755' }, h("smoothly-table-expandable-cell", { key: 'd63e6c60646e17005dcd1502603ecb0a0bc58519' }, "Expandable Cell 1", h("div", { key: 'f7892854c7a6284ac783062ddf9a99dda3693dc9', slot: "detail" }, "Content of the expandable cell 1")), h("smoothly-table-expandable-cell", { key: 'f46176b69a8f96ad79ab20d0c7ad48dc25830437' }, "Expandable Cell 2", h("div", { key: '7a77dc2d15bb99724a61c606cc21760361f03187', slot: "detail" }, "Content of the expandable cell 2")))), h("smoothly-table-foot", { key: '48288078e1087b9a080970b292019f34c154516f' }, h("smoothly-table-row", { key: '36df570d42c5b836f46876778c1be549ddacf5d9' }, h("smoothly-table-cell", { key: 'b428dbfbc9460d84ca3c86d3e9b3c911e4bf174e' }, "Footer Cell"), h("smoothly-table-cell", { key: '3f288427d5c543e60e9aaf1419b265ce7a26d452' }, "Footer Cell"))))));
     }
     static get is() { return "smoothly-table-demo-simple"; }
     static get encapsulation() { return "scoped"; }