smoothly 1.102.0 → 1.103.0

package/dist/collection/components/input/demo/user-input/index.js

@@ -19,11 +19,11 @@ export class SmoothlyInputDemoUserInput {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '93ac8ff24d005bece5c380c5fa1e0e460b7c2310' }, h("div", { key: '0ba15264f8f6fb95f48278cee3820a031cfb977f' }, h("h2", { key: '4261f82d2dc941553a6cf0549169f0c2c9a2e2c6' }, "User Input Event"), h("p", { key: 'eeca3c1b24c324e53ca52b23dbd9df821b30e6c1' }, "These inputs demonstrate how user input is handled. The ", h("code", { key: 'b7e43b4a632c958c17a9967440b696f95846dc7c' }, "smoothlyUserInput"), " event fires only when the user interacts with an input, not when its value is changed programmatically (such as by clicking the buttons above).", h("br", { key: '20323a0fffe89110ff3373867dfd8a029904e6b9' }), "Check the console to see the details of each ", h("code", { key: '07ff89fb5e17565794500a28ac48a70718e90cdd' }, "smoothlyUserInput"), " event.")), h("smoothly-button", { key: '21e0a9fb254fd031300e723f6701355b8380625f', color: "tertiary", onClick: () => (this.textIndex = this.increment(this.textIndex)) }, "Change text"), h("smoothly-input", { key: '740cf48fc2cdaec9a3bc65e16f37b1484c004291', looks: "border", name: "demo-user-input-text", value: this.textIndex === undefined ? "" : this.values[this.textIndex], onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Text input"), h("smoothly-button", { key: 'd5e47e8255f17e086949082e1d203fdaf96d239c', onClick: () => (this.selectIndex = this.increment(this.selectIndex)), color: "tertiary" }, "Next select item"), h("smoothly-input-select", { key: '987ba8692821080005e0fdcefa4284ca43e98b47', looks: "border", name: "demo-user-input-select", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, h("span", { key: '791e894a717db40227dfaacb23be2c81e465c06d', slot: "label" }, "Select input"), this.values.map((value, index) => (h("smoothly-item", { value: index, selected: index == this.selectIndex }, value)))), h("smoothly-button", { key: 'a389b777d3a0fb141d5570dbb82d5011d1a53d7e', color: "tertiary", onClick: () => (this.checkboxChecked = !this.checkboxChecked) }, "Toggle checkbox"), h("smoothly-input-checkbox", { key: '278136f9e02298f34940d702e9d8f358f2b80270', looks: "border", name: "demo-user-input-checkbox", checked: this.checkboxChecked, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Checkbox input"), h("smoothly-button", { key: '6c4e2d24b532826987253a56ac23a30f5f3dc60a', color: "tertiary", onClick: () => (this.radioIndex = this.increment(this.radioIndex)) }, "Next radio item"), h("smoothly-input-radio", { key: 'fa59ba1fade7ae69fdf2acaa1b18b05b664e018e', looks: "border", name: "demo-user-input-radio", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, h("span", { key: '26f7ad2608e6db8ba693fbee9e2eed6c64059b29', slot: "label" }, "Radio input"), this.values.map((value, index) => (h("smoothly-input-radio-item", { value: value, selected: index == this.radioIndex }, value)))), h("smoothly-button", { key: '9d78136a67f26faafa61e1abca4e1e1f47cba517', color: "tertiary", onClick: () => (this.rangeValue = this.increment(this.rangeValue)) }, "Next range value"), h("smoothly-input-range", { key: '10e6e5e417e847609935b78b5ddc4400e9533ce9', looks: "border", name: "demo-user-input-range", step: 1, min: 0, max: this.values.length, value: this.rangeValue, label: "Range Input", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }), h("smoothly-button", { key: 'd3ae741244d8a8c791386d8bbf2353cad652c0b5', color: "tertiary", onClick: () => (this.colorIndex = this.increment(this.colorIndex)) }, "Next color"), h("smoothly-input-color", { key: '3c6552b159e6f02dd19ceba1abb854e34f3a13ed', looks: "border", name: "demo-user-input-color", value: typeof this.colorIndex == "number" ? this.colors[this.colorIndex] : undefined, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Color input"), h("smoothly-button", { key: '3b559b505ff8dca9ebb38e42f40f2fbecbc62910', color: "tertiary", onClick: () => (this.dateValue = this.dateValue ? isoly.Date.next(this.dateValue) : isoly.Date.now()) }, "Next day"), h("smoothly-input-date", { key: '0bd408ca9eab5aac19afc12769ad79249f50ac70', looks: "border", name: "demo-user-input-date", value: this.dateValue, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Date input"), h("smoothly-button", { key: '0c12e56f8364e92514b8b12f9e30bbf8df97859d', color: "tertiary", onClick: () => (this.datetimeValue = this.datetimeValue
+        return (h(Host, { key: '3f8731e8b4010dbac473fad42f40b127c56e5d44' }, h("div", { key: 'b1cc52a81b0488bc82506c922c5e378fd9de3189' }, h("h2", { key: 'caa040ebf00d2211f367089297fc43bb784e67fd' }, "User Input Event"), h("p", { key: '778dfcd11303537d6d362ffe13bf03b4172cbc41' }, "These inputs demonstrate how user input is handled. The ", h("code", { key: '133a7f12ea31478e1848679b6a9492d91adb8a1d' }, "smoothlyUserInput"), " event fires only when the user interacts with an input, not when its value is changed programmatically (such as by clicking the buttons above).", h("br", { key: '144eb13a56ef541e5a7828973d698cb6fb672e56' }), "Check the console to see the details of each ", h("code", { key: '6142d5f8f0844caaa2d1e428278413807a3ef094' }, "smoothlyUserInput"), " event.")), h("smoothly-button", { key: 'cbff417434271517e66c04336978429ed5f4b9e8', color: "tertiary", onClick: () => (this.textIndex = this.increment(this.textIndex)) }, "Change text"), h("smoothly-input", { key: '7cf13015c86c9e14a34ee05165b60e4baf0fa06d', looks: "border", name: "demo-user-input-text", value: this.textIndex === undefined ? "" : this.values[this.textIndex], onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Text input"), h("smoothly-button", { key: 'd4e4e5b7230d45583ca98c98929b0bd88514ec28', onClick: () => (this.selectIndex = this.increment(this.selectIndex)), color: "tertiary" }, "Next select item"), h("smoothly-input-select", { key: '84489f8685c6dc0bfbef5b152290be3492a99a64', looks: "border", name: "demo-user-input-select", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, h("span", { key: '1d1a87b139324bf4f8b00c4e5e7ff72121e8e92e', slot: "label" }, "Select input"), this.values.map((value, index) => (h("smoothly-item", { value: index, selected: index == this.selectIndex }, value)))), h("smoothly-button", { key: '62518b7e958e1294175486fe4998a66b16e23bcd', color: "tertiary", onClick: () => (this.checkboxChecked = !this.checkboxChecked) }, "Toggle checkbox"), h("smoothly-input-checkbox", { key: 'ca75c33baaee28ac2968364736916992fe407362', looks: "border", name: "demo-user-input-checkbox", checked: this.checkboxChecked, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Checkbox input"), h("smoothly-button", { key: 'ca93b9ff77ac4cbd540802018be52967ce4b6d78', color: "tertiary", onClick: () => (this.radioIndex = this.increment(this.radioIndex)) }, "Next radio item"), h("smoothly-input-radio", { key: 'e5d2e4df79ba24dff605df4ea057394ba0bd9f4f', looks: "border", name: "demo-user-input-radio", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, h("span", { key: '59780a80a26274e7c4f07a84a4a735a1e68f9caf', slot: "label" }, "Radio input"), this.values.map((value, index) => (h("smoothly-input-radio-item", { value: value, selected: index == this.radioIndex }, value)))), h("smoothly-button", { key: 'e9477a5b9552070aa6c5fbb65d70a3a6fcfb2bb3', color: "tertiary", onClick: () => (this.rangeValue = this.increment(this.rangeValue)) }, "Next range value"), h("smoothly-input-range", { key: 'f78233fd072f673debc5ef2794ccfd92470d2644', looks: "border", name: "demo-user-input-range", step: 1, min: 0, max: this.values.length, value: this.rangeValue, label: "Range Input", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }), h("smoothly-button", { key: 'b9ab61db3f0ef25b29589720ae32fbaf4fc292ce', color: "tertiary", onClick: () => (this.colorIndex = this.increment(this.colorIndex)) }, "Next color"), h("smoothly-input-color", { key: '110b00b1faf7392ae35af47a8363c3eb6f9ab3b1', looks: "border", name: "demo-user-input-color", value: typeof this.colorIndex == "number" ? this.colors[this.colorIndex] : undefined, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Color input"), h("smoothly-button", { key: '48f402cba290ca60d5ee22a83a11bb4d87345a8a', color: "tertiary", onClick: () => (this.dateValue = this.dateValue ? isoly.Date.next(this.dateValue) : isoly.Date.now()) }, "Next day"), h("smoothly-input-date", { key: '143dc7440c89598bc6825bbc001afdcf926b32fb', looks: "border", name: "demo-user-input-date", value: this.dateValue, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Date input"), h("smoothly-button", { key: '208eeaf0da242239958917cb60938ff14240d62f', color: "tertiary", onClick: () => (this.datetimeValue = this.datetimeValue
                 ? isoly.DateTime.nextDay(this.datetimeValue)
-                : isoly.DateTime.now()) }, "Next date time"), h("smoothly-input-date-time", { key: 'f3301a005ae8d06aecc76aee13ec6b2643d79db7', looks: "border", name: "demo-user-input-datetime", value: this.datetimeValue, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Date time input"), h("smoothly-button", { key: 'bd2bd181f98f10188327a854e99e8fb3cfab4483', color: "tertiary", onClick: () => (this.dateRangeValue = this.dateRangeValue
+                : isoly.DateTime.now()) }, "Next date time"), h("smoothly-input-date-time", { key: 'd8ee43e0e07aed4c7bb748b7a8465b80e23715aa', looks: "border", name: "demo-user-input-datetime", value: this.datetimeValue, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Date time input"), h("smoothly-button", { key: '50a1a84990b8749ca6cad6ce954af64c8a2035c4', color: "tertiary", onClick: () => (this.dateRangeValue = this.dateRangeValue
                 ? { start: isoly.Date.next(this.dateRangeValue.start), end: isoly.Date.next(this.dateRangeValue.end) }
-                : { start: isoly.Date.now(), end: isoly.Date.next(isoly.Date.now(), 10) }) }, "Next date range"), h("smoothly-input-date-range", { key: '39ebe21d975120354be6744701a6e0db924946ce', looks: "border", name: "demo-user-input-daterange", start: (_a = this.dateRangeValue) === null || _a === void 0 ? void 0 : _a.start, end: (_b = this.dateRangeValue) === null || _b === void 0 ? void 0 : _b.end, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Date range input")));
+                : { start: isoly.Date.now(), end: isoly.Date.next(isoly.Date.now(), 10) }) }, "Next date range"), h("smoothly-input-date-range", { key: 'ee2818fd24043bc7b96209414e9c56b68fa18493', looks: "border", name: "demo-user-input-daterange", start: (_a = this.dateRangeValue) === null || _a === void 0 ? void 0 : _a.start, end: (_b = this.dateRangeValue) === null || _b === void 0 ? void 0 : _b.end, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Date range input")));
     }
     static get is() { return "smoothly-input-demo-user-input"; }
     static get encapsulation() { return "scoped"; }

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

@@ -28,7 +28,7 @@ export class SmoothlyInputEdit {
     }
     render() {
         var _a;
-        return (h(Host, { key: '3f7558d11b2d44dd408af97a340257484382eb06', title: this.tooltip }, h("smoothly-button", { key: 'f6247d9959f0d3015c2620b1e11073bbcb48e046', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined) }, h("slot", { key: '71b5a8210aa6f4ca12cdc4fdabaabc495b4024f1' }), h("smoothly-icon", { key: 'dcdd203ebb727b94f54cb2f190647be3461d7808', class: "default", name: "create-outline", size: "tiny" }))));
+        return (h(Host, { key: 'f3bc55a7a59a13b8b9359d62e91e3af8d44a50dc', title: this.tooltip }, h("smoothly-button", { key: 'cf4df9b7490783a451ef8b27efe8da46956a51fd', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined) }, h("slot", { key: '4dfbe9901f613a32e125d3dc4568ae43374144b0' }), h("smoothly-icon", { key: 'd45e03a9d3a47032d17f1791ad91fb13529a775f', class: "default", name: "create-outline", size: "tiny" }))));
     }
     static get is() { return "smoothly-input-edit"; }
     static get encapsulation() { return "scoped"; }

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

@@ -111,7 +111,7 @@ export class SmoothlyInputFile {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: '23b78025aa87033e4d55e1a3075fbf54f7f17911', class: { dragging: this.dragging, "has-value": !!this.value }, tabindex: this.disabled ? undefined : 0, onClick: (e) => this.clickHandler(e), onDragOver: (e) => this.dragOverHandler(e), onDragEnter: (e) => this.dragEnterHandler(e) }, h("label", { key: 'c351bd728e22f7735cc40c383370aa34767608e2' }, h("slot", { key: '18424e4ccfb9ddfe1535f65828fde006a00cca23', name: "label" })), h("div", { key: 'b7dc0bb86062b950d8eced795aaee41254ab33f5', class: "input" }, h("smoothly-button", { key: '29aca13db6b86cf9cc52069ba63e460dc474d937', disabled: this.disabled, type: "button", color: this.color, fill: "clear", size: "flexible" }, h("slot", { key: '15e1c28e93edeae1676734d939a209fb14022d83', name: "button" })), h("span", { key: '67b391a462c61f3d7f27b42b5af01bc6e9ec646c' }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.placeholder), h("div", { key: '6dfcfce7fda9969f1b17c5af1fab7a34303cc314', class: "drag-overlay", onDrop: e => this.dropHandler(e), onDragLeave: e => this.dragLeaveHandler(e) }, h("smoothly-icon", { key: '2c2aaa95ef454ea0f49474f84d7dbde3162e7102', name: "document-attach-outline" })), h("input", { key: 'ce82c258c22617d2daed517b710de1585799399e', ref: element => (this.input = element), type: "file", disabled: this.disabled, capture: this.camera == "back" ? "environment" : "user", accept: (_c = this.accept) !== null && _c !== void 0 ? _c : (!this.camera ? undefined : "image/jpeg"), files: this.files, onInput: e => this.inputHandler(e) })), h("span", { key: 'bf34d806278cb594b720619b650f7510e7a6eaf4', onClick: (e) => e.stopPropagation() }, h("slot", { key: 'b08506d4c99d5cc988a4402f43edc4dad7ead875', name: "end" }))));
+        return (h(Host, { key: 'f4df7ddb44c408650f4b204f6e82ae75a801d126', class: { dragging: this.dragging, "has-value": !!this.value }, tabindex: this.disabled ? undefined : 0, onClick: (e) => this.clickHandler(e), onDragOver: (e) => this.dragOverHandler(e), onDragEnter: (e) => this.dragEnterHandler(e) }, h("label", { key: 'c5ee90970f4e3354d561f8cbde49f116f0d641a3' }, h("slot", { key: '54c60e9d796be6153f7afcfa7f959558e12241f0', name: "label" })), h("div", { key: '669a4853db689f4b9cb14c6123baf8586dca6230', class: "input" }, h("smoothly-button", { key: 'bcfdb6eae7a7ba03a911651f1d0af9bb1ed6b407', disabled: this.disabled, type: "button", color: this.color, fill: "clear", size: "flexible" }, h("slot", { key: '7855f3bbd0b7f3bb5f4ba2345143dc17779a8502', name: "button" })), h("span", { key: '017b26231a838eb4d8dcda32e8e3363af6511113' }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.placeholder), h("div", { key: '5354848242f9a021ef51a94f7db6dc7e1caa35fe', class: "drag-overlay", onDrop: e => this.dropHandler(e), onDragLeave: e => this.dragLeaveHandler(e) }, h("smoothly-icon", { key: 'ab8b59f29dc1377f4e3b507e99e291333f332a86', name: "document-attach-outline" })), h("input", { key: '379b0c489e893122c68cf4a9c796b172b656763d', ref: element => (this.input = element), type: "file", disabled: this.disabled, capture: this.camera == "back" ? "environment" : "user", accept: (_c = this.accept) !== null && _c !== void 0 ? _c : (!this.camera ? undefined : "image/jpeg"), files: this.files, onInput: e => this.inputHandler(e) })), h("span", { key: '1bc9a2d979e0975dd01cd320acb5dc34b2029472', onClick: (e) => e.stopPropagation() }, h("slot", { key: '98aa0198ff2cd3b3d522e1350516fec31f6788fe', name: "end" }))));
     }
     static get is() { return "smoothly-input-file"; }
     static get encapsulation() { return "scoped"; }

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

@@ -109,21 +109,21 @@ export class SmoothlyInputMonth {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '18f61ae51348d5bd0c622337b28b45174ff18076' }, h("smoothly-icon", { key: '3353daed3b1accb80fa5aab42304e2d82bf51126', name: "caret-back-outline", size: "tiny", color: this.color, fill: "default", class: {
+        return (h(Host, { key: 'eefcb23c84911b8334155d4035450161bacab335' }, h("smoothly-icon", { key: '54c89c0a776e5cca1d738ff3c2c75bf792e9fec7', name: "caret-back-outline", size: "tiny", color: this.color, fill: "default", class: {
                 disabled: this.readonly || !this.allowPreviousMonth,
-            }, onClick: () => this.allowPreviousMonth && this.adjustMonth(-1) }), h("smoothly-input-select", { key: 'a41333ccdf3a8595cadabdf096706a71bfcf6d1d', ref: e => (this.year = e), name: `${this.name}-year`, readonly: this.readonly, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), onSmoothlyUserInput: e => {
+            }, onClick: () => this.allowPreviousMonth && this.adjustMonth(-1) }), h("smoothly-input-select", { key: 'a8ada0ee9d10be566cce98fb7fd8e98fcae2eb2f', ref: e => (this.year = e), name: `${this.name}-year`, readonly: this.readonly, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), onSmoothlyUserInput: e => {
                 const month = e.detail.value;
                 if (month && isoly.Date.is(month)) {
                     const value = isoly.Date.firstOfMonth(month);
                     this.smoothlyUserInput.emit({ name: this.name, value });
                 }
-            }, searchDisabled: true }, h("div", { key: 'ea87369124256ce2911ec603ce7bf6f5aa653819', slot: "label" }, h("slot", { key: '64aa8263cd0146723944f0226407a88fb24419dc', name: "year-label" })), generate.years((_a = this.value) !== null && _a !== void 0 ? _a : isoly.Date.now(), this.min, this.max).map(year => (h("smoothly-item", { key: year.date, value: year.date, selected: year.selected || this.value == year.date }, year.name)))), h("smoothly-input-select", { key: '318f72ddd1a44ec40b8459ad59e20afc0ce4c0c7', ref: e => (this.month = e), name: `${this.name}-month`, readonly: this.readonly, color: this.color, looks: this.looks, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), onSmoothlyUserInput: e => {
+            }, searchDisabled: true }, h("div", { key: '057bd0d86cba43f640185418aa3f8268364b5a5c', slot: "label" }, h("slot", { key: '379a30d1f4915ba7fc421dac3c6ed13ce8c6f16f', name: "year-label" })), generate.years((_a = this.value) !== null && _a !== void 0 ? _a : isoly.Date.now(), this.min, this.max).map(year => (h("smoothly-item", { key: year.date, value: year.date, selected: year.selected || this.value == year.date }, year.name)))), h("smoothly-input-select", { key: '91fb8b714da6207dc44aac51db1d4f4df5832e85', ref: e => (this.month = e), name: `${this.name}-month`, readonly: this.readonly, color: this.color, looks: this.looks, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), onSmoothlyUserInput: e => {
                 const year = e.detail.value;
                 if (year && isoly.Date.is(year)) {
                     const value = isoly.Date.firstOfMonth(year);
                     this.smoothlyUserInput.emit({ name: this.name, value });
                 }
-            }, searchDisabled: true }, h("div", { key: 'eab69d4faf59b5d3acbd0db9a53912a65b31f210', slot: "label" }, h("slot", { key: '8e9aca70172019bf7c8b41f3f7534a38e231a486', name: "month-label" })), generate.months((_b = this.value) !== null && _b !== void 0 ? _b : isoly.Date.now()).map(month => (h("smoothly-item", { key: month.date, value: month.date, selected: month.selected || this.value == month.date }, month.name)))), h("smoothly-icon", { key: '3e434c79f9ff72f4bce6f2ba3d87803b332b5d83', name: "caret-forward-outline", size: "tiny", color: this.color, fill: "default", class: { disabled: this.readonly || !this.allowNextMonth }, onClick: () => this.allowNextMonth && this.adjustMonth(1) })));
+            }, searchDisabled: true }, h("div", { key: 'f51ace81a7ac85957ead3532b1a228c95acc5f5f', slot: "label" }, h("slot", { key: '27e4c3e1da0dfb4fee70749236ab1372807dc82b', name: "month-label" })), generate.months((_b = this.value) !== null && _b !== void 0 ? _b : isoly.Date.now()).map(month => (h("smoothly-item", { key: month.date, value: month.date, selected: month.selected || this.value == month.date }, month.name)))), h("smoothly-icon", { key: '026c0c398ebce39044581231dc601c6248a6d7eb', name: "caret-forward-outline", size: "tiny", color: this.color, fill: "default", class: { disabled: this.readonly || !this.allowNextMonth }, onClick: () => this.allowNextMonth && this.adjustMonth(1) })));
     }
     static get is() { return "smoothly-input-month"; }
     static get encapsulation() { return "scoped"; }

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

@@ -27,7 +27,7 @@ export class SmoothlyInputRadioItem {
         });
     }
     render() {
-        return (h(Host, { key: '00ca9a738cac0a793961eba3dc326a1f6c1f6b79', onClick: () => this.inputHandler(true) }, h("input", { key: 'ad82ad9e78fff1a6803dc5153cac506ee63a6f5b', name: this.name, type: "radio", checked: this.selected, disabled: this.disabled }), h("smoothly-icon", { key: '068db330a5f5eef568a6ed0f77f18aa9e7e27eed', name: this.selected ? "checkmark-circle" : "ellipse-outline", size: "small", tooltip: "Select" }), h("label", { key: '69dced566cdacaa920a78600d9da3d7a88247193' }, h("slot", { key: '70b9d058904331675a062f3df130aae8bd3dd27b' }))));
+        return (h(Host, { key: '070130be28fb079d283c44fd4e1d953fa6ecca57', onClick: () => this.inputHandler(true) }, h("input", { key: '2659b61bb76a9196c82db8ebb07246ace707402a', name: this.name, type: "radio", checked: this.selected, disabled: this.disabled }), h("smoothly-icon", { key: '9c3ac6911f3c8d335728aac0c48382a927fde8d4', name: this.selected ? "checkmark-circle" : "ellipse-outline", size: "small", tooltip: "Select" }), h("label", { key: 'b6e3506b8814d170c43227c8291f8324a07e5547' }, h("slot", { key: '9282d307ffa40211b40bcd9ee0bfff4891620a85' })), h("slot", { key: 'a1537eebdf4ae3bef11bb4ab02cdaf1849b9917f', name: "detail" })));
     }
     static get is() { return "smoothly-input-radio-item"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input/radio/item/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/input/radio/item/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAS,MAAM,eAAe,CAAA;AACpG,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AAUnC,MAAM,OAAO,sBAAsB;;;wBAGiB,KAAK;;;;;IAMxD,iBAAiB;QAChB,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAC5C,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC,IAAI,CAAA;YACvB,MAAM,CAAC,MAAM,CAAC,KAAK,EAAC,CAAC,EAAC,EAAE;gBACvB,IAAI,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;oBACd,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,QAAQ,CAAA;YAC5B,CAAC,CAAC,CAAA;QACH,CAAC,CAAC,CAAA;QACF,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAA;IAC1C,CAAC;IACD,YAAY,CAAC,aAAsB;QAClC,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC;YACjC,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;YAChC,aAAa;SACb,CAAC,CAAA;IACH,CAAC;IAED,MAAM;QACL,OAAO,CACN,EAAC,IAAI,qDAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;YAC3C,8DAAO,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI;YACxF,sEAAe,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,iBAAiB,EAAE,IAAI,EAAC,OAAO,EAAC,OAAO,EAAC,QAAQ,GAAG;YAC7G;gBACC,8DAAQ,CACD,CACF,CACP,CAAA;IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Prop, State, VNode } from \"@stencil/core\"\nimport { Input } from \"../../Input\"\nimport { Looks } from \"../../Looks\"\nimport { SmoothlyInputRadio } from \"../index\"\nimport { RadioItemSelect } from \"../RadioItemSelect\"\n\n@Component({\n\ttag: \"smoothly-input-radio-item\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyInputRadioItem {\n\t@Element() element: HTMLInputElement\n\t@Prop({ mutable: true }) value: any\n\t@Prop({ mutable: true, reflect: true }) selected = false\n\t@Prop({ mutable: true, reflect: true }) looks?: Looks\n\t@Prop({ mutable: true }) name: string\n\t@State() disabled?: boolean\n\t@Event() smoothlyRadioItemSelect: EventEmitter<RadioItemSelect>\n\t@Event() smoothlyRadioItemRegister: EventEmitter<(parent: SmoothlyInputRadio) => void>\n\tcomponentWillLoad(): void | Promise<void> {\n\t\tthis.smoothlyRadioItemRegister.emit(parent => {\n\t\t\tthis.name = parent.name\n\t\t\tparent.listen(async p => {\n\t\t\t\tif (Input.is(p))\n\t\t\t\t\tthis.disabled = p.disabled\n\t\t\t})\n\t\t})\n\t\tthis.selected && this.inputHandler(false)\n\t}\n\tinputHandler(userInitiated: boolean): void {\n\t\tthis.smoothlyRadioItemSelect.emit({\n\t\t\tvalue: this.value,\n\t\t\tselected: this.selected,\n\t\t\tselect: s => (this.selected = s),\n\t\t\tuserInitiated,\n\t\t})\n\t}\n\n\trender(): VNode | VNode[] {\n\t\treturn (\n\t\t\t<Host onClick={() => this.inputHandler(true)}>\n\t\t\t\t<input name={this.name} type=\"radio\" checked={this.selected} disabled={this.disabled} />\n\t\t\t\t<smoothly-icon name={this.selected ? \"checkmark-circle\" : \"ellipse-outline\"} size=\"small\" tooltip=\"Select\" />\n\t\t\t\t<label>\n\t\t\t\t\t<slot />\n\t\t\t\t</label>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/input/radio/item/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAS,MAAM,eAAe,CAAA;AACpG,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AAUnC,MAAM,OAAO,sBAAsB;;;wBAGiB,KAAK;;;;;IAMxD,iBAAiB;QAChB,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAC5C,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC,IAAI,CAAA;YACvB,MAAM,CAAC,MAAM,CAAC,KAAK,EAAC,CAAC,EAAC,EAAE;gBACvB,IAAI,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;oBACd,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,QAAQ,CAAA;YAC5B,CAAC,CAAC,CAAA;QACH,CAAC,CAAC,CAAA;QACF,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAA;IAC1C,CAAC;IACD,YAAY,CAAC,aAAsB;QAClC,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC;YACjC,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;YAChC,aAAa;SACb,CAAC,CAAA;IACH,CAAC;IAED,MAAM;QACL,OAAO,CACN,EAAC,IAAI,qDAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;YAC3C,8DAAO,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI;YACxF,sEAAe,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,iBAAiB,EAAE,IAAI,EAAC,OAAO,EAAC,OAAO,EAAC,QAAQ,GAAG;YAC7G;gBACC,8DAAQ,CACD;YACR,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAChB,CACP,CAAA;IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Prop, State, VNode } from \"@stencil/core\"\nimport { Input } from \"../../Input\"\nimport { Looks } from \"../../Looks\"\nimport { SmoothlyInputRadio } from \"../index\"\nimport { RadioItemSelect } from \"../RadioItemSelect\"\n\n@Component({\n\ttag: \"smoothly-input-radio-item\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyInputRadioItem {\n\t@Element() element: HTMLInputElement\n\t@Prop({ mutable: true }) value: any\n\t@Prop({ mutable: true, reflect: true }) selected = false\n\t@Prop({ mutable: true, reflect: true }) looks?: Looks\n\t@Prop({ mutable: true }) name: string\n\t@State() disabled?: boolean\n\t@Event() smoothlyRadioItemSelect: EventEmitter<RadioItemSelect>\n\t@Event() smoothlyRadioItemRegister: EventEmitter<(parent: SmoothlyInputRadio) => void>\n\tcomponentWillLoad(): void | Promise<void> {\n\t\tthis.smoothlyRadioItemRegister.emit(parent => {\n\t\t\tthis.name = parent.name\n\t\t\tparent.listen(async p => {\n\t\t\t\tif (Input.is(p))\n\t\t\t\t\tthis.disabled = p.disabled\n\t\t\t})\n\t\t})\n\t\tthis.selected && this.inputHandler(false)\n\t}\n\tinputHandler(userInitiated: boolean): void {\n\t\tthis.smoothlyRadioItemSelect.emit({\n\t\t\tvalue: this.value,\n\t\t\tselected: this.selected,\n\t\t\tselect: s => (this.selected = s),\n\t\t\tuserInitiated,\n\t\t})\n\t}\n\n\trender(): VNode | VNode[] {\n\t\treturn (\n\t\t\t<Host onClick={() => this.inputHandler(true)}>\n\t\t\t\t<input name={this.name} type=\"radio\" checked={this.selected} disabled={this.disabled} />\n\t\t\t\t<smoothly-icon name={this.selected ? \"checkmark-circle\" : \"ellipse-outline\"} size=\"small\" tooltip=\"Select\" />\n\t\t\t\t<label>\n\t\t\t\t\t<slot />\n\t\t\t\t</label>\n\t\t\t\t<slot name=\"detail\" />\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/components/input/radio/item/style.css

@@ -1,5 +1,6 @@
 :host {
 	display: flex;
+	flex-wrap: wrap;
 	align-items: center;
 	position: relative;
 }
@@ -29,8 +30,16 @@ smoothly-input-radio:not([disabled]):not([readonly]) :host>smoothly-icon[name=ch
 	position: absolute;
 	transform: translateX(50%);
 }
-
 :host>label {
 	padding: 0 .3em;
 	white-space: nowrap;
 }
+
+:host[selected] ::slotted([slot="detail"]) { 
+	display: block; 
+	width: 100%; 
+} 
+:host ::slotted([slot="detail"]) { 
+	display: none; 
+}
+

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

@@ -125,6 +125,7 @@
 :host>div>div.options {
 	display: flex;
 	gap: 1.5rem;
+	width: 100%;
 }
 :host[direction=column]>div>div.options {
 	flex-direction: column;

package/dist/collection/components/input/range/demo/index.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class SmoothlyInputRangeDemo {
     render() {
-        return (h(Host, { key: 'b4550b5f4a8435ff07abbfedf03452fa64993f35' }, h("h2", { key: 'b70efe02b4047e0c56e263d7d604b04f21b3bd9d' }, "Range"), h("h3", { key: 'd1ea3331c8e4ecfa78ebd09706bb9c49ea44de56' }, "Phone Number"), h("smoothly-input-range", { key: '6c2241369a1b03a49a22ab708e2e6cbc2fe2ecbc', min: 700000000, max: 799999999, step: 1, label: "Phone Number" }), h("h3", { key: 'be655af45ba80bd54a41dc319b316a1ffdfa115f' }, "Stars out of ten"), h("smoothly-input-range", { key: 'e0f8e3e88934ad2fcff9a9d3cac3f14db7ecce8f', max: 10, step: 1, label: "Stars" }), h("h3", { key: 'e21bb7960d11b42414cbf6e8dba4c1d011438947' }, "Percent"), h("smoothly-input-range", { key: 'f2a326739a164b0397c64a742e5a210bca0385f8', type: "percent", max: 1, step: 0.01, label: "Percent" }), h("h3", { key: '9ac9fa1800004c7719eab3990c7024dcabeac541' }, "With icon at start and clear button"), h("smoothly-input-range", { key: '15558427596efa234ab6a3ecc89fc039d1156bd9', step: 1, name: "range2", label: "Select" }, h("smoothly-icon", { key: '5237da34fc9f10f5eb6a6a01e5f2c9e9ce68ccde', name: "checkmark-circle", slot: "start" }), h("smoothly-input-clear", { key: '3037a54047581eaba241ab6b3b5b4c3586ad93d4', size: "icon", slot: "end" }))));
+        return (h(Host, { key: '517024f5fa43b290588bf6de897eb8604ebb9aec' }, h("h2", { key: '50920a3bb53f5a910ddb094da8afab71b8f57088' }, "Range"), h("h3", { key: '503e792bc7c1d2da6277ac84ea478066e432e3a3' }, "Phone Number"), h("smoothly-input-range", { key: '8ad5509021818af773dcb4b4004aff70b6e9e1d4', min: 700000000, max: 799999999, step: 1, label: "Phone Number" }), h("h3", { key: 'd0721a56d49839e2d409e2371dd22663ee7c6260' }, "Stars out of ten"), h("smoothly-input-range", { key: 'c0729cb660ac13733d73a33f4c9f8fbab6132919', max: 10, step: 1, label: "Stars" }), h("h3", { key: '037a777b872d2338994cccc94aaf9539566b1d25' }, "Percent"), h("smoothly-input-range", { key: 'b46ef1dca494adf50e7407d280b6261fa5fe98d3', type: "percent", max: 1, step: 0.01, label: "Percent" }), h("h3", { key: '49ce896d170de4e93ab1787533eb9ce0830af143' }, "With icon at start and clear button"), h("smoothly-input-range", { key: 'e322080fc04b52b6219d894568759f0a47df81ee', step: 1, name: "range2", label: "Select" }, h("smoothly-icon", { key: '54fd4bed32163cf2368192ceaed499dfd4b6d9f6', name: "checkmark-circle", slot: "start" }), h("smoothly-input-clear", { key: '75786b2a1ef4c44537e28dd95a9b6a67a0a7e883', size: "icon", slot: "end" }))));
     }
     static get is() { return "smoothly-input-range-demo"; }
 }

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

@@ -95,18 +95,18 @@ export class SmoothlyInputRange {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: '896052a02f5cce23a5ed1a02fd1081f19b16b582', class: {
+        return (h(Host, { key: '0edc962695435c709333bfb4cefb492b31b2d0b7', class: {
                 "output-side-right": this.outputSide === "right",
                 "show-label": this.outputSide === "left" && !!this.label,
-            } }, h("slot", { key: '7db794cbda30405f4d2b3b430ffe6bf1130ae804', name: "start" }), h("div", { key: 'd334bdd0df403fde4d5ac3a4f32dfe98efc9d0be' }, h("label", { key: '6511b42785fba191d61fa521baeda6545a86e3f3', htmlFor: this.name }, this.label), h("smoothly-input", { key: 'd2d0dea2140b110461f5738117500d7c5bc08c3a', ref: e => (this.input = e), looks: undefined, color: this.color, name: this.name, showLabel: this.outputSide === "left" && !!this.label, type: this.type, onSmoothlyInputLoad: async (e) => (e.stopPropagation(),
+            } }, h("slot", { key: '63b3652f46e92ec1a3cd331960b5027628e1fa84', name: "start" }), h("div", { key: '412e827085b0b5ff37390d5be4bf6efc6287885c' }, h("label", { key: '1445f01448ecfabe4cd0470a8ba509daac632694', htmlFor: this.name }, this.label), h("smoothly-input", { key: '6bb9b7002eda2ac742f981084093a3cede27a881', ref: e => (this.input = e), looks: undefined, color: this.color, name: this.name, showLabel: this.outputSide === "left" && !!this.label, type: this.type, onSmoothlyInputLoad: async (e) => (e.stopPropagation(),
                 this.setValue(Input.Element.is(e.target) ? Number(await e.target.getValue()) : undefined)), onSmoothlyBlur: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
                 e.stopPropagation();
                 this.setValue(Input.Element.is(e.target) ? Number(await e.target.getValue()) : undefined);
-            }, value: this.type == "percent" ? this.value : (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString(), placeholder: this.outputSide === "right" ? "-" : undefined, readonly: this.readonly, disabled: this.disabled }, this.label), h("smoothly-display", { key: 'feb68df52b048e356a6555c7ee996c20a531e705', label: (this.type == "percent" ? this.min * 100 : this.min).toString() }), h("input", { key: 'c7a95d0ef8d66e2df34caad6504c45a6f8fb7061', name: this.name, part: "range", type: "range", min: this.min, max: this.max, step: (_b = this.step) !== null && _b !== void 0 ? _b : "any", disabled: this.readonly || this.disabled, onInput: event => {
+            }, value: this.type == "percent" ? this.value : (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString(), placeholder: this.outputSide === "right" ? "-" : undefined, readonly: this.readonly, disabled: this.disabled }, this.label), h("smoothly-display", { key: '4f66615300dc91082ee8e0127f96ae463889a498', label: (this.type == "percent" ? this.min * 100 : this.min).toString() }), h("input", { key: 'ab200acfa975a10dc52248cc3f159db0fd2b4ba3', name: this.name, part: "range", type: "range", min: this.min, max: this.max, step: (_b = this.step) !== null && _b !== void 0 ? _b : "any", disabled: this.readonly || this.disabled, onInput: event => {
                 event.stopPropagation();
                 this.setValue(event.target.valueAsNumber);
                 this.smoothlyUserInput.emit({ name: this.name, value: this.value });
-            }, value: (_c = this.value) !== null && _c !== void 0 ? _c : this.min }), h("smoothly-display", { key: 'f72fdf57fc07c3fc9fa4c843525291d8f3bf0da8', label: (this.type == "percent" ? this.max * 100 : this.max).toString() })), h("slot", { key: '03705aaa50dded48ad831412e811d69fde1d6b60', name: "end" })));
+            }, value: (_c = this.value) !== null && _c !== void 0 ? _c : this.min }), h("smoothly-display", { key: '48e0763f8d5d656fbf6e886e78dd85bfe00ba493', label: (this.type == "percent" ? this.max * 100 : this.max).toString() })), h("slot", { key: 'ed8150bb7db19f31a9eaf3b2ad3db82330556653', name: "end" })));
     }
     static get is() { return "smoothly-input-range"; }
     static get encapsulation() { return "scoped"; }

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

@@ -40,7 +40,7 @@ export class SmoothlyInputReset {
     }
     render() {
         var _a;
-        return (h(Host, { key: '39b30b359df4e26ee2ea37795ec3c889307fb899', title: this.tooltip }, h("smoothly-button", { key: '2f17f35ab96330c7ce38bbc606fc06ab604d6a7b', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined), onClick: event => this.clickHandler(event) }, h("slot", { key: 'de14ee9362b39ca6f25caa687b51333eb523748f' }), h("smoothly-icon", { key: '69b34f2f5ae89379635a245905a7d692726957e6', flip: "x", name: "refresh-outline", size: "tiny" }))));
+        return (h(Host, { key: '013126d52ad4e32ce7f5f04b5a54c925a77100a9', title: this.tooltip }, h("smoothly-button", { key: 'b7150136d601bb76bd396c054971fb08e5caa699', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined), onClick: event => this.clickHandler(event) }, h("slot", { key: '2e762ef063d7872cb2b9294fb5b0096a2a565b7d' }), h("smoothly-icon", { key: '950efe9f8a14f3ef3608238f21a3cc0fde4f4161', flip: "x", name: "refresh-outline", size: "tiny" }))));
     }
     static get is() { return "smoothly-input-reset"; }
     static get encapsulation() { return "scoped"; }

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

@@ -288,14 +288,14 @@ export class SmoothlyInputSelect {
         this.addedItems = this.addedItems.concat(h("smoothly-item", { value: this.filter, selected: true }, this.filter));
     }
     render() {
-        return (h(Host, { key: '83a3ae061ed14cd4bb9a769e124093e39329a17d', tabIndex: this.disabled ? undefined : 0, class: { "has-value": this.selected.length !== 0, open: this.open }, onClick: (event) => this.handleShowOptions(event) }, h("div", { key: 'a5fcfb1612ef033df68a7f03d2e88e5f231ba47b', class: "select-display", ref: element => (this.displaySelectedElement = element) }, this.placeholder), h("div", { key: 'cb3f84e88bd3bb5a19f0950c49ef059a0ce7c0e4', class: "icons", ref: element => (this.iconsDiv = element) }, h("smoothly-icon", { key: 'ad38f4e1ed640450832e3b3beea70a9bb346754b', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), h("slot", { key: '5d93d1c33d8d092a2cc2746e5a2f3aeba815a955', name: "end" }), this.looks == "border" && !this.readonly && (h("smoothly-icon", { key: 'd875a46166ec03e7b7555edb649d2a168f76853d', ref: element => (this.toggle = element), size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" }))), h("slot", { key: '2246b453a4d28ff336264e17091d103da2a3a02f', name: "label" }), h("div", { key: 'c4232de7ac74641289d298a85c3f5ac18789a045', class: { hidden: !this.open, options: true }, ref: (el) => (this.optionsDiv = el) }, this.filter.length > 0 && (h("div", { key: 'b3f4ad79ee30b0465dc8b4784bcae62e7cef2f5b', class: "search-preview" }, h("smoothly-icon", { key: '3e42af96ff5c01c1228225b989157f5ec864e611', name: "search-outline", size: "small" }), this.filter, h("smoothly-icon", { key: '82906d6501c4ab798945fdb7c0324b13c756ac9c', name: "backspace-outline", size: "small", onClick: e => {
+        return (h(Host, { key: 'bd6e502e8bc709fbc22676bc30b849b1af3e1a1d', tabIndex: this.disabled ? undefined : 0, class: { "has-value": this.selected.length !== 0, open: this.open }, onClick: (event) => this.handleShowOptions(event) }, h("div", { key: '54a6939ae60dfab5a18815b2e7f9f9637980d537', class: "select-display", ref: element => (this.displaySelectedElement = element) }, this.placeholder), h("div", { key: 'fb2048686f385e31cf5661d4c0fd11c69f849f51', class: "icons", ref: element => (this.iconsDiv = element) }, h("smoothly-icon", { key: '6019295c5e92dd4992664985e83316cfcb540cbc', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), h("slot", { key: 'b9ed43d814b3af4f54b8dc13b68b6bf73a741e67', name: "end" }), this.looks == "border" && !this.readonly && (h("smoothly-icon", { key: 'cf1b69e51b74b886793a69b06dcbff19d6f2a903', ref: element => (this.toggle = element), size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" }))), h("slot", { key: 'd1adde543075447fb3dea33f40101ec58228d6e9', name: "label" }), h("div", { key: 'a291b7f240f7b7d0314eb8a44f5057acf5645db8', class: { hidden: !this.open, options: true }, ref: (el) => (this.optionsDiv = el) }, this.filter.length > 0 && (h("div", { key: 'a431bfad6ce5284641ce0ca6814a947e0f226798', class: "search-preview" }, h("smoothly-icon", { key: '864bb9196328ad3fe04d05bca82214c03033ec86', name: "search-outline", size: "small" }), this.filter, h("smoothly-icon", { key: 'f8d468871eeb80771bb645a6e406e4a395250dd2', name: "backspace-outline", size: "small", onClick: e => {
                 e.stopPropagation();
                 this.filter = "";
                 this.element.focus();
-            } }), this.mutable && (h("smoothly-icon", { key: '06495cf3a9f28877bb4bda2b2b2e3b44db9e7eae', name: "add", size: "small", onClick: e => {
+            } }), this.mutable && (h("smoothly-icon", { key: '36dddd2f4a370406d2b814e7c05463f87849b752', name: "add", size: "small", onClick: e => {
                 e.stopPropagation();
                 this.addItem();
-            } })))), h("slot", { key: '071c26dd63b03d5fac2701a63346351e600ef641' }), this.addedItems)));
+            } })))), h("slot", { key: '9d2e371acf42bed95f49966f073199934e336325' }), this.addedItems)));
     }
     static get is() { return "smoothly-input-select"; }
     static get encapsulation() { return "scoped"; }

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

@@ -38,7 +38,7 @@ export class SmoothlyInputSubmit {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '60f5c4352d0fcf3ac72fecfd513b17cf17b4d02e', 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: '3abfb59a2dacc9a15c8577ecf92f9e2b481542a1', 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/item/index.js

@@ -35,7 +35,7 @@ export class SmoothlyItem {
             : false;
     }
     render() {
-        return (h(Host, { key: '5cd344ce7e1ce972dca5793dd987c1729f019482', tabIndex: -1 }, h("slot", { key: '39e17f355706144b6ba90485c1e7bfea97e0c564' })));
+        return (h(Host, { key: '0656f2503f804b45f00f7ce19519b546cf5c029c', tabIndex: -1 }, h("slot", { key: 'dbac1c150ccb8cbc83fbd5c2626d452a77fc6686' })));
     }
     static get is() { return "smoothly-item"; }
     static get encapsulation() { return "scoped"; }

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

@@ -7,9 +7,9 @@ export class SmoothlyLabel {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'a13b60d3713cf432f2eae3df6fc1193f705c25cd', title: this.description, style: {
+        return (h(Host, { key: '904b7e2545774f010a04f80dfdebbd0fc1000403', title: this.description, style: {
                 "--hue": (_a = this.hue) === null || _a === void 0 ? void 0 : _a.toString(),
-            } }, h("slot", { key: 'b1d2792f681dd5274e6eb099e48dea97ea2d3fc1' })));
+            } }, h("slot", { key: '451cf78802889d2e23b85fcc1ed0955640113b68' })));
     }
     static get is() { return "smoothly-label"; }
     static get encapsulation() { return "scoped"; }

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

@@ -9,7 +9,7 @@ export class SmoothlyLazy {
         this.show = true;
     }
     render() {
-        return (h(Host, { key: 'c9ae1c9e802c0cbfc3ec7c37b3a947f834587d02' }, h("slot", { key: '43f2c47074aec85b940e8dd980c1733f90736374', name: "before" }), h("smoothly-load-more", { key: 'e763c71b4a35fff037cd4018c42a8f80b9b89b8c', onSmoothlyLoadMore: e => this.loadMoreHandler(e) }), this.show && (typeof this.content == "function" ? h(this.content, null) : this.content), h("slot", { key: '94f9c7b38e2490e202b7dc712b1ffaaa151eb0cc' })));
+        return (h(Host, { key: '63b30b3d20ab6d5b10536e8278ed22b569e6640e' }, h("slot", { key: 'ee0160928eea94b227751da2b962e28ef857dd57', name: "before" }), h("smoothly-load-more", { key: 'aa55a115ceb40540fa03f07600f98cc50b4650b2', onSmoothlyLoadMore: e => this.loadMoreHandler(e) }), this.show && (typeof this.content == "function" ? h(this.content, null) : this.content), h("slot", { key: '5e7bb9c0446485537e8491cf595e6c9738d0cfd5' })));
     }
     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: '9028a3a3f21bd4eefe3c39c89a55633db132271a' });
+        return h(Host, { key: '043cf42791f2754f79b4d9be6c07241ae6a5468c' });
     }
     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: '29f08751667eeb89ce06138c991eb355296ab219', role: "alertdialog", onClick: (e) => {
+        return (h(Host, { key: '1976a5aaa3fb1fcefb4ffe61ecdf3e27de571764', 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: '02306121f4d645d62c38af123e8f7fba340a50be', class: "modal" }, h("div", { key: '8d6b1e5bb69fa223a5630d0bd5fc673b02c1f962', class: "header" }, h("slot", { key: '1b3a7fb9d6ff286a694d982f409477c72f62a444', name: "header" }), this.closable && h("smoothly-icon", { key: '50d10a954f022cc3496a38971e3fad5977a3e434', name: "close-outline", fill: "solid", onClick: () => this.closeModal() })), h("slot", { key: '0e49d6159f0d9dfccbdeaa06e9a703af5ca76fba' }), h("div", { key: 'c4802c3b9d6c01b06d6c52cb010a3eeb226c6312', class: "actions" }, h("slot", { key: '1623b6fd5e698f11051c1be41eaa6847ecb46b68', name: "actions" })))));
+            } }, h("div", { key: 'c1ba43942ff73044575f4ead220d305cab3d9099', class: "modal" }, h("div", { key: '46f41c03f29231c4f621f8452fba4181a0f9756a', class: "header" }, h("slot", { key: '204fb0ef7d8d9a7d4868d057951e5a32897358f6', name: "header" }), this.closable && h("smoothly-icon", { key: '4a28b30ed78dfc9ed337234b3781e97c442ad666', name: "close-outline", fill: "solid", onClick: () => this.closeModal() })), h("slot", { key: '77d039b6997bf5733f8e742f5ccecdf298b0061c' }), h("div", { key: 'd66baf4ebe44edf48af32f3f7fdc978ecc235803', class: "actions" }, h("slot", { key: '6306178ed0936fe1c876da10f4d14f25422e4763', name: "actions" })))));
     }
     static get is() { return "smoothly-modal"; }
     static get encapsulation() { return "scoped"; }

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

@@ -49,7 +49,7 @@ export class Notification {
         this.onUpdatedNotice(this.notice);
     }
     render() {
-        return (h(Host, { key: 'd73f9641d0d37113ec19891b5c9f59d8019230f8', color: this.properties[0], fill: "solid" }, this.closable && (h("smoothly-trigger", { key: 'e818ddd9455d8b7aca012be7c6a33f8942cb9a68', fill: "clear", name: "close" }, h("smoothly-icon", { key: 'fe3e9e3f88077e060f333baf9fbddfea07c1e7be', name: "close-circle-outline" }))), h("span", { key: 'f89d90613b740f806201bd2298d40ba2cb994fc8', class: this.icon ? "icon" : "clean" }, this.icon && h("smoothly-icon", { key: 'e773e024e416c84bec77fb891462b9b7c841824f', name: this.properties[1] }), h("p", { key: '4daa8f0c0e8b9ffc1f1ba786ad233c1264099bdc' }, this.notice.message))));
+        return (h(Host, { key: 'ea4244b7ad04c638e4bca7cd6c9aa550d1128401', color: this.properties[0], fill: "solid" }, this.closable && (h("smoothly-trigger", { key: 'baa7387b56bda4232d59cbd83fc1477b1f728c10', fill: "clear", name: "close" }, h("smoothly-icon", { key: 'ab42df6a7cbc5a04a781c7a48c9146b137f540dd', name: "close-circle-outline" }))), h("span", { key: '4e9b253ffd09e188816ceabffa08ab8e138e87a6', class: this.icon ? "icon" : "clean" }, this.icon && h("smoothly-icon", { key: '35a676710dc5deeeee38a21a345e297e83fff3b3', name: this.properties[1] }), h("p", { key: '1fae910be7ea1e55253e08f50d0d064e20eaac91' }, 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: 'bedcd18dde0e5ef17522b8289dee911015708d43' }, h("slot", { key: '3b631d5e334d1a8c698098a7ff21ee8cd40a572e' }), h("div", { key: '7052a9eb6a207f477e7a06fbf2f67e231ccce23e', class: "smoothly-notifier-wrapper" }, this.notices.map(n => (h("smoothly-notification", { notice: n, icon: this.icon }))))));
+        return (h(Host, { key: '25e53ef1a4d48669cda0a254c63dbc439726a4c4' }, h("slot", { key: '6bed9d295489eedbe95ce62a03cd535059ffcdef' }), h("div", { key: 'dc788339a0295b6ac649c26072638b510165524d', 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

@@ -6,9 +6,9 @@ export class SmoothlySpinner {
     }
     render() {
         const strokeWidth = this.size == "large" ? 6 : this.size == "medium" ? 8 : this.size == "icon" ? 8 : 12;
-        return (h(Host, { key: '91e0a007802a3083c6a9139b8eac70e5589a6bd8', style: {
+        return (h(Host, { key: 'db702a6ff6bcd18b4fd92240cf2f33fa1a92e773', style: {
                 "--spinner-size": this.size == "large" ? "5em" : this.size == "medium" ? "3em" : this.size == "icon" ? "1.8em" : "1.2em",
-            } }, h("svg", { key: '831ec769d03d32917064a7bdcf6c79db27d3ba34', class: "spinner", viewBox: `0 0 ${60 + strokeWidth} ${60 + strokeWidth}`, xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '27b650bff53888f95016353422c5ae928b758288', class: "path", fill: "none", "stroke-width": strokeWidth, "stroke-linecap": "round", cx: `${30 + strokeWidth / 2}`, cy: `${30 + strokeWidth / 2}`, r: "30" }))));
+            } }, h("svg", { key: 'e5162cf5e7fc56497f39fec5eb1459fbb5f7feb4', class: "spinner", viewBox: `0 0 ${60 + strokeWidth} ${60 + strokeWidth}`, xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: 'ba2b10a9860d03befc818a8f0529456fb06962cb', 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

@@ -25,7 +25,7 @@ export class SmoothlySubmit {
         (_a = this.parent) === null || _a === void 0 ? void 0 : _a.submit();
     }
     render() {
-        return (h(Button, { key: 'fa8802fdba3357d4e2718ba01cdaacb6eb9dc447', disabled: this.disabled, type: this.type }, h("slot", { key: '6089bc597c9ba8a1d8df0ccc3388ca09b9ea4f49' })));
+        return (h(Button, { key: '083174c3923c6f43955fe12bc58679e045572565', disabled: this.disabled, type: this.type }, h("slot", { key: 'a85f6012cab4b0335f5aaf883adf44eaffc61bc5' })));
     }
     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: 'bfc42e899118e3da7e8960d2511182a73a5b2a6a', onToggle: e => this.toggleHandler(e), open: this.open }, h("summary", { key: 'e59d4ba68e9f50851536c0870b0322a2af621f2c' }, h("smoothly-icon", { key: 'c2a3da3176bbde4ce4b3f5e68f715dc3896998b1', name: "caret-forward", fill: "solid", size: "tiny" }), h("slot", { key: '0ba069fa0fd3e10e39257470ba3c145b7104ab3a', name: "summary" })), h("slot", { key: 'c1f1c78609a469b86394fcb62ae8bf97a3e2d4ae', name: "content" })));
+        return (h("details", { key: '656532b655d792c24156ace59836ed5bbbea2fa1', onToggle: e => this.toggleHandler(e), open: this.open }, h("summary", { key: '72eed454a1a2e915e1fddcc6cca455b39ae7cefe' }, h("smoothly-icon", { key: 'b5b910c2617888ec9cb1c620e5fc6b2ae36ef121', name: "caret-forward", fill: "solid", size: "tiny" }), h("slot", { key: 'f899d029a7efc1a36aa3afc8f01ca35819c56e9a', name: "summary" })), h("slot", { key: 'e9b8f59e6c8809f74290194f9f5dd2ac35d2bc29', 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: 'db37d0ab8fc16f55f3e81aa1b4e5b77377c9f95c' }, h("slot", { key: '8e82a1f5998227ad1c3e46ac3e147492f66fb482' })));
+        return (h(Host, { key: 'ea2c8974b36285804e22594f210d0aafed868ab8' }, h("slot", { key: '94a9f2e944cb1844c10e5e4af0063f0998ae6c21' })));
     }
     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: '30943ec45f6e73df71d5ad72bbad350e4f076f34', class: "smoothly-table-cell", style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) } }, h("slot", { key: '4af540a7486d8616d427159feaa6200c91000e05' })));
+        return (h(Host, { key: 'b349520506057a78b00279d9a7f38473a94a978a', class: "smoothly-table-cell", style: { "--smoothly-table-cell-span": (_a = this.span) === null || _a === void 0 ? void 0 : _a.toString(10) } }, h("slot", { key: '960a4a8e7dccab667961506a2f9369a4e0bc470c' })));
     }
     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: '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" })))))));
+        return (h(Host, { key: 'fff7b4cb91b1f9b0e6534666a84a2ea28c269310' }, h("smoothly-table", { key: '4ddff78ef850a69b7e0cc7bcfec6f8174c11c914', columns: 3 }, h("smoothly-table-head", { key: 'ab6863e67f5d10fa589e03f91777bcb14fe8ce4e' }, h("smoothly-table-row", { key: '59f589f45581a84b7a438f183ca8a67c1df140d1' }, h("smoothly-table-cell", { key: '583bf167c1def4d301e8348a5fa50b6fdfdc0e94' }, "Date"), h("smoothly-table-cell", { key: 'e9f01b05874f41d929466292261c3769a5da4446' }, "Skip"), h("smoothly-table-cell", { key: '1d2fa708369e2a48fa44aadf188e24e72519c0f6' }, "Total"))), h("smoothly-table-body", { key: '4480d442f17ab3272473576fd006b516679ba74c' }, h("smoothly-table-row", { key: '1f5761800165248dc09cd748f256f27924bb456f' }, h("smoothly-table-cell", { key: '97224720b11bb6ede655ce803e341fc85baf86bc', span: 2 }, h("smoothly-display", { key: '194f5e0a678d14248c474c1c0ffd7478ed9ffaae', type: "date", value: "2024-01-01" })), h("smoothly-table-cell", { key: '1bdaeb35ee09362fe75f022311e5643e34f52db1' }, h("smoothly-display", { key: 'b582e4561a2eb4f2cbe22be2e083d90e146dc183', type: "price", value: 120, currency: "EUR" }))), h("smoothly-table-row", { key: '837006088b86dd7ef032e0c7a5753e3d64f6a1ba' }, h("smoothly-table-expandable-cell", { key: 'b7b6019430bbdeca619eafef1dd6b9442c87ef5d', span: 2 }, h("smoothly-display", { key: '88b8d3e5a75c3a958e879d23b7f9e413fba47da4', type: "date", value: "2024-01-02" }), h("smoothly-lazy", { key: 'fcb63742e4d64bd2a38f0337412e045bedbf39ed', slot: "detail", content: h("smoothly-display", { type: "date-time", value: "2024-01-02T13:37:00.000Z" }) })), h("smoothly-table-expandable-cell", { key: '240131b49a8b7521004a7a95737366ebb1bdda20' }, h("smoothly-display", { key: '4aad0bf2cbf412e075f766e10d40c5758a048be2', type: "price", value: 220, currency: "EUR" }), h("smoothly-lazy", { key: 'c53342cf39d624907d06c540afa90fb5646d360f', 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: '7e6f015b0e0794f403e8d5c8895aaae682bf6bb8' }, h("smoothly-table-cell", { key: 'bd245690132ffc224cf1e3bb816dcc5a78203ce6' }, h("smoothly-display", { key: '286f1a6ab76766ba8f572aa332ad95fd20273315', type: "date", value: "2024-01-02" })), h("smoothly-table-cell", { key: '81ed56ba532993dbd457df465c3ea37c4c827c31' }, "Not Skipped"), h("smoothly-table-cell", { key: 'abd4bcd79701b87d36266387299db43d88773bf9' }, h("smoothly-display", { key: 'f5a50eeccb0ee32593ba953447fb73ba5900f0ea', 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: '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)))))))));
+        return (h(Host, { key: '17a220a0ea37578573d2532ac64e21590839cdd2' }, h("smoothly-display", { key: '7e800297cd73ceed94d928ba259c5a9d4eb70350', type: "text", value: "Filler row" }), h("smoothly-table", { key: '453f06abcfd482c5ffae7cf42fb510503205798e', color: "primary", columns: 4 }, h("smoothly-table-head", { key: 'eca5f7c566ed5fabcd794856b6d4c88f3c1e218c' }, h("smoothly-table-row", { key: '2296af99c98c5aed2c2015f630743c2a06346b2a' }, h("smoothly-table-cell", { key: '3acd97b05e0598adf9b1c168a02c51a71a0901dc' }, "Breed"), h("smoothly-table-cell", { key: 'ecf66c5063fc3b3e51ded23ff0cc95804bbcfd60' }, "Country"), h("smoothly-table-cell", { key: 'ba6db28368d1c7e2a8ca7fc326d64fb05a3d5524' }, "Coat"), h("smoothly-table-cell", { key: '47d711b8b459884b9e319b412f215e8d11673575' }, "Origin"))), h("smoothly-table-body", { key: '2b3e2c185036029fd330adc9272b69f1f1167c2b' }, 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/filtered/index.js

@@ -27,18 +27,18 @@ export class TableDemoFiltered {
     }
     render() {
         const cats = this.cats && selectively.filter(this.criteria, this.cats);
-        return (h(Host, { key: 'd8b3ad77da3b6cb9e815a50d79f84d1c6a811e4e' }, h("smoothly-display", { key: '98af74a79c021d4a2c2745d22efdfda66c8824d4', type: "text", value: "Filtered" }), h("smoothly-filter", { key: 'fb4409524f1fd2d09b4ca245679bbe1d0b8a989e' }, h("smoothly-filter-toggle", { key: '50f1a730744c162ea32eca49f175a618ea182e22', properties: { ["nested.pattern"]: "Ticked", breed: "" }, icon: "add", tooltip: "Nested Ticked", slot: "bar" }), h("smoothly-filter-toggle", { key: '3ccd46f9bf9d95ea8efc6f4b9904287cacf58774', properties: { pattern: "Ticked", breed: "" }, icon: "paw", tooltip: "Ticked cats", slot: "bar" }), h("smoothly-filter-toggle", { key: '55ac1ae50f0d758a8c4967f90bfb1158b19355ff', properties: { breed: "Bombay", pattern: "Solid" }, icon: "radio-button-on", tooltip: "Solid bombay cats", slot: "bar" }), h("smoothly-filter-toggle", { key: '28c9d499e5d68c81f5ff50b39912b70e85c0951d', properties: { pattern: "Colorpoint" }, not: true, active: true, icon: "alert", tooltip: "Colored cats", slot: "bar" }), h("smoothly-filter-select", { key: '6b72624b9ebd4a12b99074597ab3832b7025011c', menuHeight: "5items", label: "coat", property: "nested.coat", slot: "bar", multiple: false }, this.cats &&
+        return (h(Host, { key: 'c17dfa504eb6da9d55ca3faefbb939e205e576dc' }, h("smoothly-display", { key: '0346275c6e0c788318bbeea532d6d0e62f89471b', type: "text", value: "Filtered" }), h("smoothly-filter", { key: '60932eb8b56d569f3deb5aefddacf933f60cec14' }, h("smoothly-filter-toggle", { key: '86067684d7dae87ad332f379b161e2cb5a6d4974', properties: { ["nested.pattern"]: "Ticked", breed: "" }, icon: "add", tooltip: "Nested Ticked", slot: "bar" }), h("smoothly-filter-toggle", { key: 'c6b53af97218f61df526fba4540f0119560b6bd1', properties: { pattern: "Ticked", breed: "" }, icon: "paw", tooltip: "Ticked cats", slot: "bar" }), h("smoothly-filter-toggle", { key: '9513d102b67ebd2645f3ddcca646bd5a5f74962d', properties: { breed: "Bombay", pattern: "Solid" }, icon: "radio-button-on", tooltip: "Solid bombay cats", slot: "bar" }), h("smoothly-filter-toggle", { key: '7e811e0c5c34d620d906f410396ca3802d70344f', properties: { pattern: "Colorpoint" }, not: true, active: true, icon: "alert", tooltip: "Colored cats", slot: "bar" }), h("smoothly-filter-select", { key: '2283fbe2db0238ce81837fd8056ded22f3968016', menuHeight: "5items", label: "coat", property: "nested.coat", slot: "bar", multiple: false }, this.cats &&
             Object.values(this.cats.reduce((r, cat) => (cat.nested ? Object.assign(Object.assign({}, r), { [cat.nested.coat]: cat }) : r), {})).map(cat => {
                 var _a;
                 return ((_a = cat.nested) === null || _a === void 0 ? void 0 : _a.coat) && (h("smoothly-item", { slot: "items", value: cat.nested.coat }, cat.nested.coat));
-            })), h("div", { key: 'd41ea8b32d00dccaa5387f84d71a5ea4cec7970d', slot: "detail" }, h("smoothly-form", { key: '5654b332a077152ae1438eac095cd3523da770a8', looks: "border" }, h("smoothly-filter-select", { key: 'c1c07dc99c02dbf9043e1f6ad2ad2eea8a49a511', menuHeight: "5items", label: "coat", property: "nested.coat", multiple: true }, this.cats &&
+            })), h("div", { key: 'df1913243aea481ffd77293833cba7c9898973b7', slot: "detail" }, h("smoothly-form", { key: '69e4574ff214ac51c7adf5411c6eca1d5a1b550a', looks: "border" }, h("smoothly-filter-select", { key: '743a1dde796abb94d5dbfcbb77b9f6a3130af8af', menuHeight: "5items", label: "coat", property: "nested.coat", multiple: true }, this.cats &&
             Object.values(this.cats.reduce((r, cat) => (cat.nested ? Object.assign(Object.assign({}, r), { [cat.nested.coat]: cat }) : r), {})).map(cat => {
                 var _a;
                 return ((_a = cat.nested) === null || _a === void 0 ? void 0 : _a.coat) && (h("smoothly-item", { slot: "items", value: cat.nested.coat }, cat.nested.coat));
-            })), h("smoothly-filter-select", { key: '3b5479f13abe40f9da79a68f0db36a4b33660f73', menuHeight: "5items", label: "breed", property: "breed", multiple: false }, this.cats &&
-            Object.values(this.cats.reduce((r, cat) => (cat.breed ? Object.assign(Object.assign({}, r), { [cat.breed]: cat }) : r), {})).map(cat => cat.breed && (h("smoothly-item", { slot: "items", value: cat.breed }, cat.breed)))), h("smoothly-filter-select", { key: 'a84c4c06a961d71bd8605c7e90b960f72c6b10d5', menuHeight: "5items", label: "names", property: "nested.names", multiple: true, type: "array" }, Object.keys(Object.values(names)
+            })), h("smoothly-filter-select", { key: '319fb71c26845ef2c37afb42e3634c9a4bc4ad62', menuHeight: "5items", label: "breed", property: "breed", multiple: false }, this.cats &&
+            Object.values(this.cats.reduce((r, cat) => (cat.breed ? Object.assign(Object.assign({}, r), { [cat.breed]: cat }) : r), {})).map(cat => cat.breed && (h("smoothly-item", { slot: "items", value: cat.breed }, cat.breed)))), h("smoothly-filter-select", { key: '0db333307aaac5fe3d8cdfac849389feead95c00', menuHeight: "5items", label: "names", property: "nested.names", multiple: true, type: "array" }, Object.keys(Object.values(names)
             .flat()
-            .reduce((r, name) => (Object.assign(Object.assign({}, r), { [name]: true })), {})).flatMap(name => (h("smoothly-item", { slot: "items", value: name }, name)))), h("smoothly-filter-input", { key: '12a34eaa89d99be16bb563dbbf32a353e988865a', label: "Coat", property: "coat" }), h("smoothly-filter-input", { key: 'ad77d0b787cc319fc830c9ed699f31baaa071da5', label: "Nested Coat", property: "nested.coat" })))), !cats ? ("Failed to load data.") : (h("smoothly-table", { columns: 4 }, h("smoothly-table-head", null, h("smoothly-table-row", null, h("smoothly-table-cell", null, this.selector.render(cats)), h("smoothly-table-cell", null, "Breed"), h("smoothly-table-cell", null, "Coat"), h("smoothly-table-cell", 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-foot", null, h("smoothly-table-row", null, h("smoothly-table-cell", { span: 3 }, h("smoothly-display", { type: "text", value: `Selected: ${this.selector.selected.length != 0 ? this.selector.selected.length : cats ? cats.length : "?"}` }))))))));
+            .reduce((r, name) => (Object.assign(Object.assign({}, r), { [name]: true })), {})).flatMap(name => (h("smoothly-item", { slot: "items", value: name }, name)))), h("smoothly-filter-input", { key: 'b358bc8a8377058d1404ec6a9201c729e172706c', label: "Coat", property: "coat" }), h("smoothly-filter-input", { key: '15acf410163142d187b6de4d6f4e5e57bce48f18', label: "Nested Coat", property: "nested.coat" })))), !cats ? ("Failed to load data.") : (h("smoothly-table", { columns: 4 }, h("smoothly-table-head", null, h("smoothly-table-row", null, h("smoothly-table-cell", null, this.selector.render(cats)), h("smoothly-table-cell", null, "Breed"), h("smoothly-table-cell", null, "Coat"), h("smoothly-table-cell", 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-foot", null, h("smoothly-table-row", null, h("smoothly-table-cell", { span: 3 }, 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"; }

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: '2588ee8b11cceb6f30d6cf3e16f012284b88aef5' }, h("smoothly-display", { key: 'c4072df4a3b2a51efee6b88940d073df277cdacb', type: "text", value: "Group" }), h("smoothly-table", { key: '593411511952a94c54646c10c1d79a616af16348', color: "primary", columns: 2 }, h("smoothly-table-head", { key: '85207ce5dda04eca8e1cd6c9b6d517957273d196' }, h("smoothly-table-row", { key: '8b499af43a319be84bb26ca64a28a2b550b1147f' }, h("smoothly-table-cell", { key: '8f5e13c5fa0c98e5e572943b85c5166105f3bd7b' }, "Date"), h("smoothly-table-cell", { key: 'fcfd559317a468734d04511b27550a7c0d077a2e' }, "Total"))), h("smoothly-table-body", { key: 'e40ee8bfa1fce7644a63f5d4ae7ad9570c8fa9d9' }, h("smoothly-table-row-group", { key: 'dee01fd5283fb7151191ed0b37e0982ca4b0f687', align: true }, h("smoothly-display", { key: '9a22541cad30cd45299a36fef7204cde3a3fdd3f', slot: "start", type: "date", value: "2024-01-01" }), h("smoothly-display", { key: 'b6d651c90cbd5e1505b5cad319865822bc4435bd', slot: "end", type: "price", currency: "EUR", value: 510 }), h("smoothly-table-expandable-row", { key: '87014f0572f1da25fb891d290e832875a3a5a4d5' }, h("smoothly-table-cell", { key: '4ff8a957ad3af6735251d0365fefbffe641a9989' }, h("smoothly-display", { key: '2c8ac9e458f90805ee50f41fd5068a2829eb69f6', type: "date-time", value: "2024-01-01T01:37:00.000Z" })), h("smoothly-table-cell", { key: '5485d068b066424513077c103d363b28dc296a85' }, h("smoothly-display", { key: '9752fafab23c6b2bee43f518575693d6341c1af0', type: "price", currency: "EUR", value: 250 })), h("smoothly-lazy", { key: '738ade928043ec56b5dd4cd2350d7b264f2b0c68', slot: "detail", content: h(Fragment, null, "Details of 2024-01-01T01:37:00.000Z") })), h("smoothly-table-expandable-row", { key: '75c05fbf6aff637af2014b2e09d75cdc7de7c8c0' }, h("smoothly-table-cell", { key: '699bbc5005849e0ee23b24c7c2e273f1fb6c4c8f' }, h("smoothly-display", { key: '53a9dc520b688c9ce94b68798ffa90bd459c183e', type: "date-time", value: "2024-01-01T13:37:00.000Z" })), h("smoothly-table-cell", { key: 'cac110be1952cd054343b325761e30b194337461' }, h("smoothly-display", { key: '55748ae8a05d0f383b7a5d155fd67fdcb0d94435', type: "price", currency: "EUR", value: 260 })), h("smoothly-lazy", { key: '5d424b9dda2176af0b42a83d87e8a2a0a25d8001', slot: "detail", content: h(Fragment, null, "Details of 2024-01-01T13:37:00.000Z") }))), h("smoothly-table-row", { key: '34ba6f053457f1a0ee1b0f890f8ad8407450ad41' }, h("smoothly-table-cell", { key: 'ac03d46f47ced40e2189f9542a67db1b9b1e497a' }, h("smoothly-display", { key: '99a1ffa65c16c219783e0103a934aaaf040c1f5c', type: "date", value: "2024-01-02" })), h("smoothly-table-cell", { key: 'b172e3877d0c0bd4f8a75e08576fc2ae1a124bbb' }, h("smoothly-display", { key: '3b61525a2201aaaf74bff02dc98a69823e86571c', type: "price", currency: "EUR", value: 130 }))), h("smoothly-table-row-group", { key: '0ee99a8b2ad921aa8c8bfb812307ae8aa57119eb' }, h("smoothly-display", { key: 'efebc41060422de6b1a9c86c6954f10ead7f1136', slot: "start", type: "date", value: "2024-01-03" }), h("smoothly-display", { key: '26d97fd3f9c3a6c399687b61565719914913f99b', slot: "end", type: "price", currency: "EUR", value: 720 }), h("smoothly-table-expandable-row", { key: '72462b7c0883b23bf82d9776d07801957f7d784c' }, h("smoothly-table-cell", { key: 'fe1f362f8c3298c198942dfd2337033e5aad08ce' }, h("smoothly-display", { key: '2a568646554e5fa224b133728ffe83a4bb09d62d', type: "date-time", value: "2024-01-03T01:37:00.000Z" })), h("smoothly-table-cell", { key: '486b9a50a92767eb446a576c39612f9d8a296dc1' }, h("smoothly-display", { key: '446decb6ea726843bc26154f920c3907a1acaae0', type: "price", currency: "EUR", value: 320 })), h("smoothly-lazy", { key: '57837cff0a487c4f7e565ecaaa48f9a3dd6fd4e8', slot: "detail", content: h(Fragment, null, "Details of 2024-01-03T01:37:00.000Z") })), h("smoothly-table-expandable-row", { key: '53f917b56a01973712dbe5fb2cac2d38f471b991' }, h("smoothly-table-cell", { key: '91255e99fc2324b0d142b68bbdf09a36dd33dc94' }, h("smoothly-display", { key: '6a7e97b732bc1913895c921f275949f0f62208f4', type: "date-time", value: "2024-01-03T13:37:00.000Z" })), h("smoothly-table-cell", { key: '830a3287399a9e1fc6565fe7c891764e70e03e8d' }, h("smoothly-display", { key: 'a65573dc1af4b3fd737a6ee475ccf34c7a0b9c9f', type: "price", currency: "EUR", value: 400 })), h("smoothly-lazy", { key: '646707de9e76d024e6812e253cb14a59a46f11d4', slot: "detail", content: h(Fragment, null, "Details of 2024-01-03T13:37:00.000Z") }))), h("smoothly-table-row-group", { key: '0026f89477afc7f84eb1ee924082213ee0c89c7b' }, h("smoothly-display", { key: 'dff0f1591513de1245c07f8b537d77809ddefc48', slot: "start", type: "date", value: "2024-01-04" }), h("smoothly-table-expandable-row", { key: '787ddfe55945e3589e84b65e29c487d56a391e0e' }, h("smoothly-table-cell", { key: 'f8b2249eb641fb8de2f33b025f0177dbafe445fc' }, h("smoothly-display", { key: 'bc7bf9c2f642a633d466f1e494c8d1323350a22a', type: "date-time", value: "2024-01-04T01:37:00.000Z" })), h("smoothly-table-cell", { key: '049d6cc9bf23932308b023d8abfa5d5b0278ed56' }, h("smoothly-display", { key: '93a3e761635f6c3eecb4bbf7e9462b2811357f85', type: "price", currency: "EUR", value: 320 })), h("smoothly-lazy", { key: '7f385f05fea35af8f0aff74ed041c59ae3e5bf46', slot: "detail", content: h(Fragment, null, "Details of 2024-01-04T01:37:00.000Z") })), h("smoothly-table-expandable-row", { key: '328cb04ef6023106ae1989af83af5de1301e850f' }, h("smoothly-table-cell", { key: 'b0b00601ca9089b5575df356d8367e0dda4c9994' }, h("smoothly-display", { key: 'e7a933a35de331582863dd6f253496a6e5e8dd8a', type: "date-time", value: "2024-01-04T13:37:00.000Z" })), h("smoothly-table-cell", { key: 'f48e05f30e255b69034a5a566cbcb3db67c6a56e' }, h("smoothly-display", { key: '2ceca893aba24718dd13a89eea0e28500e7d699b', type: "price", currency: "EUR", value: 400 })), h("smoothly-lazy", { key: 'dc43c7409460036978af41cacc068ef0f38e4cfc', slot: "detail", content: h(Fragment, null, "Details of 2024-01-04T13:37:00.000Z") }))), h("smoothly-table-row-group", { key: '86a9605cfd9fd2fb4389589c385faa4da1c6c6f6' }, h("smoothly-display", { key: '9d47934ec72c1b209899a6fd08616055b086dd8e', slot: "end", type: "price", currency: "EUR", value: 720 }), h("smoothly-table-expandable-row", { key: '5f04b9721430f40c51a6425c2dff7036ea139e08' }, h("smoothly-table-cell", { key: 'd8d4e856ed91c2ad53cee6be90cce00d27f14069' }, h("smoothly-display", { key: '964358b865a984471f5671f5061ba31977016042', type: "date-time", value: "2024-01-05T01:37:00.000Z" })), h("smoothly-table-cell", { key: 'dcfecb038915410fa4c2083376b73053ed48935a' }, h("smoothly-display", { key: '5620c84e881a0e59b113715f128941c16d24ec80', type: "price", currency: "EUR", value: 320 })), h("smoothly-lazy", { key: '04b7afee25f019c2a312f96cf69d7b0adc08f726', slot: "detail", content: h(Fragment, null, "Details of 2024-01-05T01:37:00.000Z") })), h("smoothly-table-expandable-row", { key: 'aaf61d4297e578396a8ed658e066f146d990b0f9' }, h("smoothly-table-cell", { key: '9b4bf0540e0f373b8d34eebd297832878acf1427' }, h("smoothly-display", { key: 'ee0da2b1910d78411bd0c95dbb1792290514a499', type: "date-time", value: "2024-01-05T13:37:00.000Z" })), h("smoothly-table-cell", { key: '79201617d37419b2d7972fc257e7bb1fba8cd7ab' }, h("smoothly-display", { key: '685d9ebb4fe99613c70d93ce6a2e9d5a4739f39e', type: "price", currency: "EUR", value: 400 })), h("smoothly-lazy", { key: '2ac506baea9413ddcd17dec9d74ade91db501782', slot: "detail", content: h(Fragment, null, "Details of 2024-01-05T13:37:00.000Z") }))), h("fake-group-wrapper", { key: 'c7e42840958c6cc67b3f67f623d75972bdc7e62a' }, h("smoothly-table-row-group", { key: 'edfb3fc48b53bfb808b077c1ada7454f04397481' }, h("smoothly-display", { key: '81565e5820fee3e24100edb097fa029293704ced', slot: "start", type: "date", value: "2024-01-06" }), h("smoothly-display", { key: '7fe07e7763c2ba9add544de5bfcc909aba40282d', slot: "end", type: "price", currency: "EUR", value: 720 }), h("fake-row-wrapper", { key: 'f5424a7dddc7f0163182e259ceaffb6963809b53' }, h("smoothly-table-row", { key: 'f6ed19f1e02b5166b20ba010f1a0c30086fe1813' }, h("fake-cell-wrapper", { key: '3b877001f93114b3339a0c17c90062cf96ef32e7' }, h("smoothly-table-cell", { key: '2c4b73e799abc490e066de0c5617cafe38497052' }, h("smoothly-display", { key: 'd23df7e47dd898d65d619e664399d50bc82bb2cd', type: "date", value: "2024-01-02" }))), h("fake-expandable-cell-wrapper", { key: '4602c998b541cc2477678362057dd3d36d4ceafd' }, h("smoothly-table-expandable-cell", { key: '302d2efef19bc6d29f4aebdcce8c5bc9e86e5953' }, h("smoothly-display", { key: 'e82ec13f78ca0bdeea085fdeb1759d6c16cc818a', type: "price", currency: "EUR", value: 130 }), h("smoothly-lazy", { key: 'cbb04477852ae61054063dc8f6854e7351435792', 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: 'fade1308d120d94005a13f4e54e5541495accc01' }, h("smoothly-table-expandable-row", { key: '7e925f320ecbbd2c665cc5f475b019bce0126e89' }, h("fake-cell-wrapper", { key: '54b47216d6677202de3d2ed691748f6e8c94bb4b', class: "span-2" }, h("smoothly-table-cell", { key: '9797b634c544b7bdce16b4097ee7688341c28e9c', span: 2 }, h("smoothly-display", { key: '6e42c40713217d020d33966218c21787b5bf5033', type: "date", value: "2024-01-07" }))), h("smoothly-lazy", { key: '93dbde72d7127b087dc64e1404fcd0d12e39c20e', slot: "detail", content: h("smoothly-display", { type: "date-time", value: "2024-01-07T13:37:00.000Z" }) }))))), h("smoothly-table-row-group", { key: 'b91620f1e396ec86d09e170ef6d48e325a5979de' }, h("smoothly-display", { key: '0faf7a3e5ddd36ffcd5bc66643e9e8958b1ce9f1', slot: "start", type: "date", value: "2024-01-08" }), h("smoothly-display", { key: '2926b9df72107c99229fc621a02c1b9bb4e6f2d4', slot: "end", type: "price", currency: "EUR", value: 720 }))))));
+        return (h(Host, { key: '99b42d440d627f137c861a505268bd01ddf80502' }, h("smoothly-display", { key: 'ec8de18cda2946a8a9303b7a6089d9be4e55ef46', type: "text", value: "Group" }), h("smoothly-table", { key: '92bc77999729786e1ee916dae43d024ec03e1378', color: "primary", columns: 2 }, h("smoothly-table-head", { key: 'e5e3f7ab31387894ab9847e7747b0d1fc33bb2b4' }, h("smoothly-table-row", { key: 'cacf171bc9956c3c9fb474f740e8522d2d86e600' }, h("smoothly-table-cell", { key: 'b1491e5cc504a6da7821e67f599091f9b854ef43' }, "Date"), h("smoothly-table-cell", { key: 'c50f5f1f02b277c915cdf69ef2ac4454ddc2a229' }, "Total"))), h("smoothly-table-body", { key: '77ed062a1e8d40b2c7a9f98c69c0cccd045634e4' }, h("smoothly-table-row-group", { key: 'f42c04c5e24dc7736355fd9646eb0d086ac5b6f2', align: true }, h("smoothly-display", { key: 'c2ab76c5737d7813c4cc301627b3bd843a014b90', slot: "start", type: "date", value: "2024-01-01" }), h("smoothly-display", { key: '92b7d7177e1856aaaf5214189e37e5ae94d8e211', slot: "end", type: "price", currency: "EUR", value: 510 }), h("smoothly-table-expandable-row", { key: '7f94acb1b687c79bc96da97389e511d67ed05e7b' }, h("smoothly-table-cell", { key: 'f6f7a60734c594ad3cd6b15ec6db1cb4c5bbd89a' }, h("smoothly-display", { key: 'c5437c032254090f5bcba260091c235aef8780b7', type: "date-time", value: "2024-01-01T01:37:00.000Z" })), h("smoothly-table-cell", { key: '8f04f8b04500f62e9af0087a7146b3d24605c1f1' }, h("smoothly-display", { key: '39c580cd2d658206a14f05cbd634e4eb1d1c7c67', type: "price", currency: "EUR", value: 250 })), h("smoothly-lazy", { key: 'ed03fdb041650c7b5c2b8e99372447a48773b57d', slot: "detail", content: h(Fragment, null, "Details of 2024-01-01T01:37:00.000Z") })), h("smoothly-table-expandable-row", { key: 'cd3b3b59ae009a93a8b4f9517144e1d95daa9af2' }, h("smoothly-table-cell", { key: '581a9f684b96d4b8b148f9963f2e82995784097c' }, h("smoothly-display", { key: '87f20d9bf62ceda60398faf87f582aa93f6bc7fa', type: "date-time", value: "2024-01-01T13:37:00.000Z" })), h("smoothly-table-cell", { key: '189628c8cbf0f19739db99163e06752b55e43159' }, h("smoothly-display", { key: '0f90df1f79874aaa4b2fa19c370e7dbdb0a12739', type: "price", currency: "EUR", value: 260 })), h("smoothly-lazy", { key: 'b4ebafa6ca44d7ea1098a2d9bd87b8dab5ee9eef', slot: "detail", content: h(Fragment, null, "Details of 2024-01-01T13:37:00.000Z") }))), h("smoothly-table-row", { key: '60fc8f54f7957102e47b4280ec49a4d0d70f5fd1' }, h("smoothly-table-cell", { key: '5764a87679414315c11cdb84f17218e3b9b04951' }, h("smoothly-display", { key: '2268b6e0ee468f3fa1759210716fe9446ac67057', type: "date", value: "2024-01-02" })), h("smoothly-table-cell", { key: '4ffebace59ff3e25dec10816d49adb341c34dd13' }, h("smoothly-display", { key: '33b2206b0752571a3c00f62a12caa093e52fd9a2', type: "price", currency: "EUR", value: 130 }))), h("smoothly-table-row-group", { key: 'c5b086270908b14b9833178f2dd9e0aadf64c1bf' }, h("smoothly-display", { key: '84f02269594765452ff9b31c14ccf5b5faae6fb0', slot: "start", type: "date", value: "2024-01-03" }), h("smoothly-display", { key: 'e89560e658b68dac93825c4749359b37c3785ca4', slot: "end", type: "price", currency: "EUR", value: 720 }), h("smoothly-table-expandable-row", { key: '7d631402b0a13e6ea99f6d17c7fd6e933b35513e' }, h("smoothly-table-cell", { key: '3d1d33f3f7ac515d677542c313d0ae738107ec42' }, h("smoothly-display", { key: '846ee43881ad60461f04cffc709641858c3661fe', type: "date-time", value: "2024-01-03T01:37:00.000Z" })), h("smoothly-table-cell", { key: '0ed59247a38eb4b334e360d5c9aa5ed6d218a0a4' }, h("smoothly-display", { key: 'd18d9e3a385db7e69a547831587294dedafeff1d', type: "price", currency: "EUR", value: 320 })), h("smoothly-lazy", { key: '6460a9221def237f36931168260b9ca54a3da236', slot: "detail", content: h(Fragment, null, "Details of 2024-01-03T01:37:00.000Z") })), h("smoothly-table-expandable-row", { key: '4bf48b933495597deaf73fad4595532b1743fae6' }, h("smoothly-table-cell", { key: '1a623646f7855e92746ef90c4d7875b6793ff0fa' }, h("smoothly-display", { key: '34e50f53da13807a520cd25af4666c48d222e242', type: "date-time", value: "2024-01-03T13:37:00.000Z" })), h("smoothly-table-cell", { key: '0c95dbe2f69e387c3da68eb3cee829c12a4e25ea' }, h("smoothly-display", { key: 'be5ff17b5da3f88a96fc6b2453265532b25c8c85', type: "price", currency: "EUR", value: 400 })), h("smoothly-lazy", { key: 'a050674d329e220fa10297de7369529da240dbc2', slot: "detail", content: h(Fragment, null, "Details of 2024-01-03T13:37:00.000Z") }))), h("smoothly-table-row-group", { key: '35a74aa978281c51a5e89cff416a3820edd3fea1' }, h("smoothly-display", { key: '40f65fe238cae60b0322d7aa2095d337fd114c2e', slot: "start", type: "date", value: "2024-01-04" }), h("smoothly-table-expandable-row", { key: '8ac7dd169af9ba076228c13e7106c90532713bea' }, h("smoothly-table-cell", { key: 'b2aa1000642e810242d26b3beab0618b7e7533f1' }, h("smoothly-display", { key: '42b510a936ff7c375f94f62d7c90352190fa15b1', type: "date-time", value: "2024-01-04T01:37:00.000Z" })), h("smoothly-table-cell", { key: '52f9a53daf63ba78cca490a1d2b1d503cebd1cbe' }, h("smoothly-display", { key: '2efcd3103f556b7d2bdb162955c1a2786df6406f', type: "price", currency: "EUR", value: 320 })), h("smoothly-lazy", { key: 'afa791309481d7bd57fec774cdb8cc0eae49a46b', slot: "detail", content: h(Fragment, null, "Details of 2024-01-04T01:37:00.000Z") })), h("smoothly-table-expandable-row", { key: '0a516ca4106870129ef3416ecd091860dfa8e747' }, h("smoothly-table-cell", { key: 'ba7c34c5ff3bf0a7b4d0dd756b06d08c311515f3' }, h("smoothly-display", { key: 'c4f7acc99b53775cc270b6c07d747f8380d7f6bc', type: "date-time", value: "2024-01-04T13:37:00.000Z" })), h("smoothly-table-cell", { key: '40ba97dadd14f034ce1cc1f7e9620b55f6868b4d' }, h("smoothly-display", { key: '9eeb16c9d8b36ff07ff0e2b5b7d984a906a28f8f', type: "price", currency: "EUR", value: 400 })), h("smoothly-lazy", { key: '0a7daa49993eb0fe81b1710d52671fd9ccb3fdea', slot: "detail", content: h(Fragment, null, "Details of 2024-01-04T13:37:00.000Z") }))), h("smoothly-table-row-group", { key: '124fe8317cd613d0a95d078879a2af27d9a30378' }, h("smoothly-display", { key: '7d34f0ba876c6ad7208ca7252f5aebbda39b41fd', slot: "end", type: "price", currency: "EUR", value: 720 }), h("smoothly-table-expandable-row", { key: 'b07d589cc83c31fd58eb166f71bcf2e7f14667a2' }, h("smoothly-table-cell", { key: '5bbd85e55939d383ad00988b2b62b6594593aef1' }, h("smoothly-display", { key: '626673afdd4f8dbc7c8dda5da6f371b40496d346', type: "date-time", value: "2024-01-05T01:37:00.000Z" })), h("smoothly-table-cell", { key: 'a9ed9598f2dcf387458e652e9844e1f66c03953e' }, h("smoothly-display", { key: '866d3525f916e7c7c7d59389fcc7f8796be07c6f', type: "price", currency: "EUR", value: 320 })), h("smoothly-lazy", { key: '18ff51ffedfb0aa9e5d31f69da365b90063b2e87', slot: "detail", content: h(Fragment, null, "Details of 2024-01-05T01:37:00.000Z") })), h("smoothly-table-expandable-row", { key: 'a6d2f2cd291699874c381b59fff2525b888b4357' }, h("smoothly-table-cell", { key: '126a4db06d0aaa8b18e11cd8ab06c9abf8bec706' }, h("smoothly-display", { key: 'bbc04101c4c81670fc0d9247bd8449b345d219d7', type: "date-time", value: "2024-01-05T13:37:00.000Z" })), h("smoothly-table-cell", { key: 'bca6cb4152a63a2fce65e7d8656c8d9d24d4f973' }, h("smoothly-display", { key: '475a29b822ba659d2062106ef569b52d5640b4ef', type: "price", currency: "EUR", value: 400 })), h("smoothly-lazy", { key: '3a60daee840665182671a0337a5e20bc0294e313', slot: "detail", content: h(Fragment, null, "Details of 2024-01-05T13:37:00.000Z") }))), h("fake-group-wrapper", { key: '8047fea73d43878404baef9ecdfa1954325ce89b' }, h("smoothly-table-row-group", { key: '9b59043a06becd4df17280877a009937a07f3096' }, h("smoothly-display", { key: '7e9258f5981e7320d755f002d925a402b4ddfa52', slot: "start", type: "date", value: "2024-01-06" }), h("smoothly-display", { key: '4c7f501e94a886b150580d66005afcaf6b71caf4', slot: "end", type: "price", currency: "EUR", value: 720 }), h("fake-row-wrapper", { key: '59b7e0ace09eddc316bebf8fc200960a73bb9a28' }, h("smoothly-table-row", { key: 'a784f8d2f6cb687ce8ffef106f96c1d3e2b3c2b2' }, h("fake-cell-wrapper", { key: 'fee4873fcc05603551839fd45ae820418cd77247' }, h("smoothly-table-cell", { key: 'b88bb6f4bd7db66b079d37d923111dae55a58d2d' }, h("smoothly-display", { key: 'de2badec58466cbe87d95794d419f7a1ff030238', type: "date", value: "2024-01-02" }))), h("fake-expandable-cell-wrapper", { key: '140a3eefd53af98ebdc23f93f26362a3e073ebd9' }, h("smoothly-table-expandable-cell", { key: 'd5e871ee2feca4ff89007522c77a16ef6e18e93d' }, h("smoothly-display", { key: 'e60ebe013aeed9990e195145a5b6f3a56619a991', type: "price", currency: "EUR", value: 130 }), h("smoothly-lazy", { key: '4cef4b25e4a804ecf788aaeecf28b49c552a8692', 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: '17a410017a8b58e6b9dbddfa08bb01cc7bb69fc2' }, h("smoothly-table-expandable-row", { key: 'e29c776f6f7265d00811ab46b81484214eeab024' }, h("fake-cell-wrapper", { key: '26d6d274907877f8e5b9d2aa10026b046db87552', class: "span-2" }, h("smoothly-table-cell", { key: 'be8be305615a9a4d6f99a3a527ae448ea23edf0d', span: 2 }, h("smoothly-display", { key: 'c329b1c0d3de0cb7acd156d0436d6ba4f11d359a', type: "date", value: "2024-01-07" }))), h("smoothly-lazy", { key: '7053359a810f8f370d01836fb41a5057c061a839', slot: "detail", content: h("smoothly-display", { type: "date-time", value: "2024-01-07T13:37:00.000Z" }) }))))), h("smoothly-table-row-group", { key: 'c01f8cc394c57afbfac54c884776fcd4df62672a' }, h("smoothly-display", { key: 'de89520fe26ab9ac713479ab5f7219e71bcab43f', slot: "start", type: "date", value: "2024-01-08" }), h("smoothly-display", { key: '542ec870ac9915503c411530b593e8462436e190', slot: "end", type: "price", currency: "EUR", value: 720 }))))));
     }
     static get is() { return "smoothly-table-demo-group"; }
     static get encapsulation() { return "scoped"; }