smoothly 1.2.1-alpha.34 → 1.2.1-alpha.36

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

@@ -6,7 +6,7 @@ export class SmoothlyInputPriceDemo {
         this.currency = "USD";
     }
     render() {
-        return (h(Host, { key: 'e4342c6db7e1e4c6281497cd786e4d499257c504' }, h("h2", { key: '26aa0c16aa87d5dea4bb092e7104a31e2fb26d36' }, "State demo on smoothly-input"), h("p", { key: '163708f05a50f636cc0b9c71d45a692ebac5805f' }, "This demo/test the internal state of the smoothly-input component."), h("p", { key: '7799fc8b8d38da3dc473c2a65fa51d0521db7ea7' }, "The currency of the price should update when switching between the currencies."), h("smoothly-input-radio", { key: 'f55a75be6fa0090e8e55f6ea342bcd157167f0fb', name: "currency", onSmoothlyInput: e => (this.currency = isoly.Currency.is(e.detail.currency) ? e.detail.currency : undefined) }, this.currencies.map(currency => (h("smoothly-input-radio-item", { key: currency, selected: currency == this.currency, value: currency }, currency)))), h("smoothly-input", { key: '6a6e28e0695faddf47599305fc6941fd5dd2e690', type: "price", currency: this.currency }, "price")));
+        return (h(Host, { key: 'e0130489f4c93fd3d843f2462b2c5149f157b3fe' }, h("h2", { key: '1995cbab87f15c67f143d463564ea7f36daae94f' }, "State demo on smoothly-input"), h("p", { key: '125ab5ad3c3edd286fdeec42a751412dd0f48fd8' }, "This demo/test the internal state of the smoothly-input component."), h("p", { key: 'f7cb859f06e3e22661346c8784ab639410b72aaf' }, "The currency of the price should update when switching between the currencies."), h("smoothly-input-radio", { key: '0cf33db6e4b836c71a5847e5a1ae084a75774b13', name: "currency", onSmoothlyInput: e => (this.currency = isoly.Currency.is(e.detail.currency) ? e.detail.currency : undefined) }, this.currencies.map(currency => (h("smoothly-input-radio-item", { key: currency, selected: currency == this.currency, value: currency }, currency)))), h("smoothly-input", { key: '51f7e92ad5e05e7f0272859aa80fe65c01eb5874', type: "price", currency: this.currency }, "price")));
     }
     static get is() { return "smoothly-input-price-demo"; }
     static get encapsulation() { return "scoped"; }

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

@@ -21,7 +21,7 @@ export class SmoothlyInputDemoStandard {
     }
     render() {
         const placeholder = this.options.placeholder ? "placeholder" : undefined;
-        return (h(Host, { key: '5264c1c9cf0f92f86ff0d368522287f8580122c2', class: { vertical: !!this.options.vertical } }, h("div", { key: 'ffafa5f6546434d2287a1f07469a8e251e9cde9f', class: "description" }, h("h2", { key: 'bccc24c712d54c8b6efc2308a8ac73c9f6fda677' }, "Input Standard"), h("p", { key: '4955d39f7be77b2c88ba56d759d386a8f389b797' }, "Height of input should be ", h("code", { key: '2cba3f4631613cf6c1892c678cf3b6d2489c610a' }, "3rem"), " including border. This is should result in a 48 pixel height at 100% zoom, assuming a root font-size of 16 pixels."), h("smoothly-form", { key: '1ede0f00d2816bb598704f5ad828a95410fffb1e', looks: "grid", onSmoothlyFormInput: (e) => (this.options = e.detail) }, h("smoothly-input-select", { key: '0d7dfc6ef6b3df8c79f863b4c4849d6eea0cf4d8', name: "looks" }, h("span", { key: '3815a6dfb52bcdc791082f5c7aa6dab4ccca9047', slot: "label" }, "Looks"), Looks.types.map(l => (h("smoothly-item", { value: l }, l)))), h("smoothly-input-checkbox", { key: '1849cc0bfa3811add3bba272ce7eb36932b5f4ab', name: "readonly" }, "Readonly"), h("smoothly-input-select", { key: '37de4eaca616147ea628e0005e1066b0db500853', name: "color" }, h("span", { key: '135dac6d13c87b5a70e76fcca9ecea2187bb6012', slot: "label" }, "Color"), Color.types.map(c => (h("smoothly-item", { value: c }, h("span", { color: c }, c)))), h("smoothly-input-clear", { key: '87af07afc6a4a46c8cc785d477a333745e843e53', slot: "end" })), h("smoothly-input-checkbox", { key: '1d58c89cb01bcc24a928495ca511c38856c0215d', name: "vertical" }, "Vertical Layout"), h("smoothly-input-checkbox", { key: 'f6fbabb433bd48583aebca2d12ccb47f819dbb98', name: "showLabel", checked: this.options.showLabel }, "Show Label"), h("smoothly-input-checkbox", { key: '78b1007ac65662cdc82794bf4319267a3cb230a4', name: "placeholder", checked: this.options.placeholder }, "Placeholder"), h("smoothly-input-range", { key: '0d67c1750a475010c2f555c6d7ffa56f9b616843', label: "Border Radius (rem)", name: "borderRadius", value: this.options.borderRadius, min: 0, max: 2, step: 0.25 }))), h("div", { key: '4ff5e67eb421082c3010756b918ab8788dbbd81e', class: "input-wrapper", style: { "--smoothly-input-border-radius": `${this.options.borderRadius}rem` } }, h("div", { key: '09fcde40dd103c81c550ca71bd96e522c840ca4c', class: "width" }, "100%"), h("div", { key: 'd5a14854ee79918e0857d533e37221c5ee088d4d', class: "left-padding" }, "0.5rem - left padding"), h("smoothly-input", { key: 'a126b8db655f22b7daf861eece15b3f031cbc605', name: "text", looks: this.options.looks, placeholder: placeholder, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '33f2cc7f357a3846ccbcaa75201ae42aa369fe1c' }, "Text"), h("smoothly-input-clear", { key: '7b06802ce6ec1cf6e66464454f7e2c08c5509cea', slot: "end" })), h("div", { key: '74036c4691e7dec9f203a6a36987cec8644b7b17', class: "height" }), h("smoothly-input-select", { key: 'd24c977332de2ac0d09e08736dbe68c54fe82f42', name: "month", looks: this.options.looks, placeholder: placeholder, readonly: this.options.readonly, color: this.options.color }, this.options.showLabel && h("label", { key: '5413660ea9e0d9779811ce432ea958cd83d9ebed', slot: "label" }, "Select"), h("smoothly-item", { key: '2ac5c27083962fa8e1a25c5d15d3843a34d02b41', value: "1" }, "January"), h("smoothly-item", { key: '521a8845b6f331ddf040ee52c1f7724fd94f64d3', value: "2" }, "February"), h("smoothly-item", { key: '637195be2eb8ebe0faf80b7fb1c5d3860d33df80', value: "3" }, "March"), h("smoothly-item", { key: '2527e90e5171d97f3bc8b072d03d561c021188bc', value: "4" }, "April"), h("smoothly-item", { key: '5ba652f3e666f2afba3a945bfc674af42fdff10b', value: "5" }, "May"), h("smoothly-item", { key: 'e8898598c2132dc1e3dc47bf8b34443d217fdb6d', value: "6" }, "June"), h("smoothly-item", { key: '8c1797ec614431add028845b98b32d264a36a036', value: "7" }, "July"), h("smoothly-item", { key: '62ac28227f5a066bb5073f1fd90b0b4b1efd3afa', value: "8" }, "August"), h("smoothly-item", { key: '70764eeca66cf56ca620cdb1d963d56defdbdb83', value: "9" }, "September"), h("smoothly-item", { key: '4d132d530b45db4f8829bfe2bf25afc13a38e158', value: "10" }, "October"), h("smoothly-item", { key: 'a4d1ef299f0da9db3bd9973c8452e037c0173305', value: "11" }, "November"), h("smoothly-item", { key: '9e72c334c00b4cdcc74fe00086b2a028e33b6408', value: "12" }, "December"), h("smoothly-input-clear", { key: '1cf2720994c6f70830425ca2066ad370502dbc65', slot: "end" })), h("div", { key: '7b2bd944723409bc21be49273dee40dbe88e8e69', class: "height" }), h("smoothly-input-checkbox", { key: '648dbe1784e117de725a16ba4f70b3c8310c415e', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color }, "Check"), h("div", { key: 'd83bdbe0e7deafdaf375fc92bed15185315f1120', class: "height" }), h("smoothly-input-radio", { key: '2d9a8f739f4177bbebb8a3c7f7e4d51accb4a269', name: "radio", clearable: true, looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && h("label", { key: '8e7b75b87d6b097a2820c1f63fbff106c0b3cac2', slot: "label" }, "Radio"), h("smoothly-input-radio-item", { key: '84f9d894f3608bbf6f6fd18166f148142cd59460', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: 'f2a62709db12077c1e46d70737a2de14792cf4e0', selected: true, value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '805e4c62d987029192f924a6e305451abcb95feb', value: "third" }, "Label 3"), h("smoothly-input-clear", { key: '845398abbf6f72f30060b7e080b2e9d024ab2e45', slot: "end" })), h("div", { key: '9b32f05a7587f50d6f02d5606f275f8b636745d8', class: "height" }), h("smoothly-input-file", { key: '05d07fd09bc51cf12855458bfeacb0a9a6f661e9', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, placeholder: placeholder, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '696715b9f104cceb8b20b46f8ca0a1eefecc34b6', slot: "label" }, "File"), h("smoothly-input-clear", { key: '72d276a80a33794c9bcc3e8865ba2c9c2988f6cc', slot: "end" })), h("div", { key: '9dbed3e714e898e5c615b6f24ba5ecdc555c056c', class: "height" }), h("smoothly-input-range", { key: '7357abaf96f5b24b86b150735b9b0c944a642008', name: "range", label: this.options.showLabel ? "Range" : undefined, looks: this.options.looks, readonly: this.options.readonly, color: this.options.color }, h("smoothly-input-clear", { key: '87a942e9be397f8876a099313c67fe292e8f6a34', slot: "end" })), h("div", { key: 'f29eea42ea273adf8014fc721040994704c053fa', class: "height" }), h("smoothly-input-color", { key: 'b97507b13cb5d9d256466c08981980a8299bf999', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '31bcb93fc12b7d03b0aa0a731d769850ec9ae2ec' }, "Color"), h("smoothly-input-clear", { key: 'c12b3d0d204f98c05c27e3df8200bd88b13baae7', slot: "end" })), h("div", { key: '41543b5fae1c2e80c6e249f6d2927c56fc92687c', class: "height" }), h("smoothly-input-date", { key: '4ea99e2b45a8d67fb109177f828dbfcef5a0b97a', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: 'e570d7d9be3c0de7f94253d830fd1915c09f649c' }, "Date"), h("smoothly-input-clear", { key: 'adf60c1a6e47fd6bb04c44a00b485922148a7c59', slot: "end" })), h("div", { key: '8cf5257d16d031fb2f8b5da4f43b18d6ceb51bd5', class: "height" }), h("smoothly-input-date-range", { key: '9b658f7d3a95228035d1a431ef44ee4a7e9d7e4e', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, placeholder: placeholder, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '370a96c354d6e8cb3ef2b50f390deda2dca7e793' }, "Date Range"), h("smoothly-input-clear", { key: '1735d46c5dd3d104680cf0f44768a8d524c5c294', slot: "end" })), h("div", { key: '8bc4fbd1c76eaeaccecf66bb390332d908adaead', class: "height" }), h("div", { key: '999019f00da141e750ee11e5c891e5b85f10ce7d', class: { "guide-lines": true, "show-label": !!this.options.showLabel } }, this.options.showLabel ? "Aligned labels & values" : "Center values"))));
+        return (h(Host, { key: '044fa8c4b9d8f5e7bfc3e57e4ec8c5549da8a011', class: { vertical: !!this.options.vertical } }, h("div", { key: '3662aa7286e3c71ee96b38446ed734c370ad11fe', class: "description" }, h("h2", { key: '831d2d5567a4a520b02730521c8e81a2973eaf5c' }, "Input Standard"), h("p", { key: '05480bcb96442c64da4323f707781d27e3aae2ee' }, "Height of input should be ", h("code", { key: '6c6c7ac45af02f09c11b1a4d62a5164e426a94ec' }, "3rem"), " including border. This is should result in a 48 pixel height at 100% zoom, assuming a root font-size of 16 pixels."), h("smoothly-form", { key: '0ce7d4bd476dfd902f835e858ab5f6ebe645a16f', looks: "grid", onSmoothlyFormInput: (e) => (this.options = e.detail) }, h("smoothly-input-select", { key: '25f2571c6d3f5ddbc9efd0899756024010e2773d', name: "looks" }, h("span", { key: 'ec4db36ee38f76903ff8df4379af65f2f0766646', slot: "label" }, "Looks"), Looks.types.map(l => (h("smoothly-item", { value: l }, l)))), h("smoothly-input-checkbox", { key: 'ebb2fc0c074c89af17e6df50d38a4caef91024bf', name: "readonly" }, "Readonly"), h("smoothly-input-select", { key: 'bd5cef034392cebc5c6000cd43b7c473368421b0', name: "color" }, h("span", { key: 'b6722cf63cb9f995f829704c21833e20d5d31232', slot: "label" }, "Color"), Color.types.map(c => (h("smoothly-item", { value: c }, h("span", { color: c }, c)))), h("smoothly-input-clear", { key: 'd29d56ccb184ff45572f0b67e6a341a9a1ba2825', slot: "end" })), h("smoothly-input-checkbox", { key: '83d811121a1be17b1fed20014014e5c3c556881e', name: "vertical" }, "Vertical Layout"), h("smoothly-input-checkbox", { key: '68aac64ededa8b02b761f3cd56cb3d6f31b45bdb', name: "showLabel", checked: this.options.showLabel }, "Show Label"), h("smoothly-input-checkbox", { key: '128e2f5022cf0cedc5d2f69195e16458b9fc8c61', name: "placeholder", checked: this.options.placeholder }, "Placeholder"), h("smoothly-input-range", { key: '787c162c2497211a78a0b68d44f6329d0858371b', label: "Border Radius (rem)", name: "borderRadius", value: this.options.borderRadius, min: 0, max: 2, step: 0.25 }))), h("div", { key: '35c08c03e943a73a875ed852d739d738db13fabf', class: "input-wrapper", style: { "--smoothly-input-border-radius": `${this.options.borderRadius}rem` } }, h("div", { key: 'a0564063144d6db7656baff3776990e1ddf7fe70', class: "width" }, "100%"), h("div", { key: 'af1770e8636f7f4864b1e9f8d79d21310fc6d5a5', class: "left-padding" }, "0.5rem - left padding"), h("smoothly-input", { key: '684c9e2fb3f232b3a13b7f87dda970a273e06ffe', name: "text", looks: this.options.looks, placeholder: placeholder, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '56e2def6fb71ab72d3a3f156d674c4f0130b56d8' }, "Text"), h("smoothly-input-clear", { key: '7eba7d6a4953d6198e1fda0ed2fdadc97b1ea3c1', slot: "end" })), h("div", { key: '78a7aae500ccc6197dfc64190a8b5e282adbdb35', class: "height" }), h("smoothly-input-select", { key: '064cbc97f54d9efea21c318c5598c2ea9e6a321e', name: "month", looks: this.options.looks, placeholder: placeholder, readonly: this.options.readonly, color: this.options.color }, this.options.showLabel && h("label", { key: 'ca332bfd4e40666e4454a9b10115f8adc345f6be', slot: "label" }, "Select"), h("smoothly-item", { key: 'c93d3bdbb3f77f4599552638a535bec594847468', value: "1" }, "January"), h("smoothly-item", { key: '0c3d8ecce9c8dff3fe3ac0c13fcbc1d85a8a3d84', value: "2" }, "February"), h("smoothly-item", { key: '47f2a838b2f26507d7f52559f5655dd0f6796b1d', value: "3" }, "March"), h("smoothly-item", { key: '42a4dfe12c71630f4896003dde6b8acd96b02655', value: "4" }, "April"), h("smoothly-item", { key: '4bb5861ee318b39b3ac1fa35ecd4f9b640a8229e', value: "5" }, "May"), h("smoothly-item", { key: '3c43648f442f21c2856d4220aef7f1f622c70507', value: "6" }, "June"), h("smoothly-item", { key: 'd470ea78848fb51a989655d6de6c722cd2aaa9e8', value: "7" }, "July"), h("smoothly-item", { key: '5bf658eb99e5d7ea1db8013de92f23e381d2f8b0', value: "8" }, "August"), h("smoothly-item", { key: 'd494ba5400321c08a46bb542717f734d49d5417d', value: "9" }, "September"), h("smoothly-item", { key: 'c75a04e1aaef26dc8ab3869671db48d2e39c097c', value: "10" }, "October"), h("smoothly-item", { key: '9c996849ae914f908d0719a7cf08415b7509e951', value: "11" }, "November"), h("smoothly-item", { key: '1bbdcd5845e428fbfeb91d773c0198ffb9c1cc60', value: "12" }, "December"), h("smoothly-input-clear", { key: 'cc274431a7236faef0147eef2c29c70403ae44b5', slot: "end" })), h("div", { key: '965e84ff3436d07777084992f391349e3e4e0969', class: "height" }), h("smoothly-input-checkbox", { key: 'e25d58dee03f22d22708da8a26783944da473b19', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color }, "Check"), h("div", { key: 'f429538b28976aa446799e160a909f7b57c69ce9', class: "height" }), h("smoothly-input-radio", { key: '9854849f5c559481ca4c2b9e94f3b690f3818d0b', name: "radio", clearable: true, looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && h("label", { key: '318f3a3e48ce06b6af452f717cdc63ca1e3257c7', slot: "label" }, "Radio"), h("smoothly-input-radio-item", { key: 'cb47131f2fbbca8f080277e9185a726f59a8f831', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '221e96bbddd2cfff9f587d1ff4fb1b87cae9bc9f', selected: true, value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: 'e55e72b32046dd8ad8a7cfcb1c851a98ecc90fec', value: "third" }, "Label 3"), h("smoothly-input-clear", { key: '091bd8d97c1181c7cc279e1d3ae9308734408f07', slot: "end" })), h("div", { key: 'db06d7584c5aa208ee858e53f9ed5d0c5e0d95ba', class: "height" }), h("smoothly-input-file", { key: '39b93bde42d37989305380fba2979d33eded3156', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, placeholder: placeholder, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '9c6247a33d43de0e5ed649515f33109caeacbe06', slot: "label" }, "File"), h("smoothly-input-clear", { key: '1671d4ce52d245ee1e4cb0985e74dfc358e7c881', slot: "end" })), h("div", { key: '07677318b0ebcb654d4cdb53440380e1ad37e7a0', class: "height" }), h("smoothly-input-range", { key: '4e284dec0fc57a37eb4ab06d32d01d10ed3a5c6f', name: "range", label: this.options.showLabel ? "Range" : undefined, looks: this.options.looks, readonly: this.options.readonly, color: this.options.color }, h("smoothly-input-clear", { key: 'cdbb48fd450975c3781c6b95bad242634fa080c1', slot: "end" })), h("div", { key: 'c24c1881a74e91831c2e4559ae13505d1027d376', class: "height" }), h("smoothly-input-color", { key: 'b617db1b66a73dfd298aa6a17b48b0a537eec64a', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '21e5c0b4f020c63031da90d7668f70d659eb2bd4' }, "Color"), h("smoothly-input-clear", { key: '33b518103b68f12837a4ee25d5f72ccfcbb3b8e7', slot: "end" })), h("div", { key: 'e7706aa12b6cfabc23ae1d9499641d5b3df6bda2', class: "height" }), h("smoothly-input-date", { key: '47c0964845648b7ff59eafc7d9080692b11f8614', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '0a85480963e8f78279a9ee5751643576de0c7c26' }, "Date"), h("smoothly-input-clear", { key: '3f1b5355882e84c53bfd571be1ee73754f257bcc', slot: "end" })), h("div", { key: '35a82c5f250b6e4d24ece68a0b02c01e53272441', class: "height" }), h("smoothly-input-date-range", { key: '8c06cad779884cadeaaced5c5f934b16776fca70', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, placeholder: placeholder, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: 'a08d77047d018b960f60754359229a3681f2ce03' }, "Date Range"), h("smoothly-input-clear", { key: '8ba119dc695c705749677ff7eafa7bde2d5eeb5f', slot: "end" })), h("div", { key: '216ac78045d830384411de3d5d2f4ee3bd4bca41', class: "height" }), h("div", { key: '24241b7d95382f3a3cd509e86d4a784195c825ff', class: { "guide-lines": true, "show-label": !!this.options.showLabel } }, this.options.showLabel ? "Aligned labels & values" : "Center values"))));
     }
     static get is() { return "smoothly-input-demo-standard"; }
     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: '21b58cd9091410ccd7e18bfd0e7ef4cbf7f8c496', title: this.toolTip }, h("smoothly-button", { key: '9adc403f9d4408ab31aa49235b04ece843f49d94', 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: '141483162e42d7d8ea60ada89c08e61e8fedc28d' }), h("smoothly-icon", { key: '2a09d27319264c6ea07b0a98876ad8840983f286', class: "default", name: "create-outline", size: "tiny" }))));
+        return (h(Host, { key: '0b15d6fa5f06856dcf50fa85e6c70574cfb8f22e', title: this.toolTip }, h("smoothly-button", { key: 'ac8f4e69cc564c1c580b8d9650626f9c34486d0e', 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: 'dedf30644a1b42cfdf39be7df53094457da4e698' }), h("smoothly-icon", { key: 'f1237a29936486379e732f82f47595643e45596f', 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

@@ -101,7 +101,7 @@ export class SmoothlyInputFile {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: 'b39d3e741149d0b0e442b352e61b558cdc2bb13a', class: { dragging: this.dragging, "has-value": !!this.value }, tabindex: 0, onClick: (e) => this.clickHandler(e), onDragOver: (e) => this.dragOverHandler(e), onDragEnter: (e) => this.dragEnterHandler(e) }, h("label", { key: '475bd4fb9ff30dc19b9c518c76556c4f3bf1e2a7' }, h("slot", { key: 'e19aa48c27ec6240b01766013a5004d0b87bdc95', name: "label" })), h("div", { key: 'a6d5c0ecb60b1b66ecb346c33f417fefb7414278', class: "input" }, h("smoothly-button", { key: 'd7e74af6c6c97b9c545a9c8d4d638bee9cdb45a0', color: this.color, fill: "clear", size: "flexible" }, h("slot", { key: '3194230dd2b45a1a6f808f36e0a8eea187a69584', name: "button" })), h("span", { key: 'ce4913a9f28977541b85fe2efa8e173f28b102a2' }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.placeholder), h("div", { key: '7d5c8206a2f424da4f3d042a2f21a2a2600b6dbf', class: "drag-overlay", onDrop: e => this.dropHandler(e), onDragLeave: e => this.dragLeaveHandler(e) }, h("smoothly-icon", { key: '12a26ab3030ff6c43252bb9b735964a89592fb94', name: "document-attach-outline" })), h("input", { key: '60b903e6e81a5e4447ea4c87b1316972a1ac5ceb', ref: element => (this.input = element), type: "file", 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("div", { key: '554dbf6b985f049bf1edcd41d356ba3ad22eb254', class: "end", onClick: (e) => e.stopPropagation() }, h("slot", { key: '47f15c7c35b9753684db8dd60f851e1681ee60f1', name: "end" }))));
+        return (h(Host, { key: '6a8f4866c1fe41c863df77fc56867ea9ef894a1d', class: { dragging: this.dragging, "has-value": !!this.value }, tabindex: 0, onClick: (e) => this.clickHandler(e), onDragOver: (e) => this.dragOverHandler(e), onDragEnter: (e) => this.dragEnterHandler(e) }, h("label", { key: '1f4e0aa503fa8c7434d782e6255e270615d6dcba' }, h("slot", { key: '40c4a96f6e5140cb0c42bfc3cbc2a76c3d8bd430', name: "label" })), h("div", { key: 'ad4a5eba13f8743a7454d92c699a9356d8f7f1b8', class: "input" }, h("smoothly-button", { key: '1ca0073fdfbaefc1c95cff97198ee0a846902857', color: this.color, fill: "clear", size: "flexible" }, h("slot", { key: '8504273921a1b3ff6795592ccb4ad7a2d9242f84', name: "button" })), h("span", { key: '2d1d1293ec1d7621375598821e6e9607f45139bb' }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.placeholder), h("div", { key: 'b877d7af3e3cd96238b95e7b3599087c6e09b7d8', class: "drag-overlay", onDrop: e => this.dropHandler(e), onDragLeave: e => this.dragLeaveHandler(e) }, h("smoothly-icon", { key: '816248a36d060bd217a01bd6b6dd4b5e9b7560fe', name: "document-attach-outline" })), h("input", { key: 'cbe1e61cd982f89843f91652c728ff2c95cd4a00', ref: element => (this.input = element), type: "file", 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("div", { key: 'dc9dde4d839683bed42ede9090308921479dc84c', class: "end", onClick: (e) => e.stopPropagation() }, h("slot", { key: '9ac84050b1dd036501fcfe89ccb59be8a3ac3589', name: "end" }))));
     }
     static get is() { return "smoothly-input-file"; }
     static get encapsulation() { return "scoped"; }

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

@@ -110,7 +110,7 @@ export class SmoothlyInput {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        return (h(Host, { key: '6cd7aa8a819bb907669e1ab37160653363eea7d7', class: { "has-value": ((_a = this.state) === null || _a === void 0 ? void 0 : _a.value) != undefined && ((_b = this.state) === null || _b === void 0 ? void 0 : _b.value) != "" }, onclick: () => { var _a; return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, h("slot", { key: '0cb34738baae3f04cf1b571c2216b3b156e37af6', name: "start" }), h("div", { key: '7d903f93a5eec82c11ae11ad353ffc4d6367935d' }, h("div", { key: '476b41ea405c5535a26c6031fec5a1a7dc525d57', class: "ghost" }, h("div", { key: '6df340bc0af606853148a89e35058e117699c9a3', class: "value" }, (_c = this.state) === null || _c === void 0 ? void 0 : _c.value), h("div", { key: '8536db3c4b3f11c7b7461af4c5275620ea032d0e', class: "remainder" }, (_d = this.state) === null || _d === void 0 ? void 0 : _d.remainder)), h("input", { key: '78716f7025f1b224ece5439cedba196d7eedf471', ref: (el) => (this.inputElement = el), color: this.color, name: this.name, type: (_e = this.state) === null || _e === void 0 ? void 0 : _e.type, inputmode: (_f = this.state) === null || _f === void 0 ? void 0 : _f.inputmode, placeholder: this.placeholder, required: this.required, autocomplete: (_g = this.autocomplete) !== null && _g !== void 0 ? _g : (_h = this.state) === null || _h === void 0 ? void 0 : _h.autocomplete, disabled: this.disabled, readOnly: this.readonly, pattern: ((_j = this.state) === null || _j === void 0 ? void 0 : _j.pattern) && ((_k = this.state) === null || _k === void 0 ? void 0 : _k.pattern.source), onKeyDown: event => {
+        return (h(Host, { key: '488da348621b80d3cce00d253fe59ad967d4243f', class: { "has-value": ((_a = this.state) === null || _a === void 0 ? void 0 : _a.value) != undefined && ((_b = this.state) === null || _b === void 0 ? void 0 : _b.value) != "" }, onclick: () => { var _a; return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, h("slot", { key: '0c454e5e090958f8d9be3ba57c5aa2b6bc42be31', name: "start" }), h("div", { key: '7ce07e645553ed5e0ecdf0547ddd4b01c3ef57ed' }, h("div", { key: 'b8f0936c66be5fd781c7acc051fc61e0bb04e248', class: "ghost" }, h("div", { key: '3df46f48fe6831d428d5106d77d8c9d5eb9f5128', class: "value" }, (_c = this.state) === null || _c === void 0 ? void 0 : _c.value), h("div", { key: '2f71893d7211225d7add357a7dcd76d3ffaa970c', class: "remainder" }, (_d = this.state) === null || _d === void 0 ? void 0 : _d.remainder)), h("input", { key: '0aee0a897bc4f3794e8d177fba2c6d09d681f06d', ref: (el) => (this.inputElement = el), color: this.color, name: this.name, type: (_e = this.state) === null || _e === void 0 ? void 0 : _e.type, inputmode: (_f = this.state) === null || _f === void 0 ? void 0 : _f.inputmode, placeholder: this.placeholder, required: this.required, autocomplete: (_g = this.autocomplete) !== null && _g !== void 0 ? _g : (_h = this.state) === null || _h === void 0 ? void 0 : _h.autocomplete, disabled: this.disabled, readOnly: this.readonly, pattern: ((_j = this.state) === null || _j === void 0 ? void 0 : _j.pattern) && ((_k = this.state) === null || _k === void 0 ? void 0 : _k.pattern.source), onKeyDown: event => {
                 this.state = this.stateHandler.onKeyDown(event, this.state);
                 if (event.key == "Enter")
                     this.smoothlyBlur.emit();
@@ -123,7 +123,7 @@ export class SmoothlyInput {
                     if (Deep.notEqual(lastValue, this.stateHandler.getValue(this.state)))
                         this.smoothlyChange.emit({ [this.name]: this.stateHandler.getValue(this.state) });
                 }
-            } }), h("label", { key: 'f58d7b17ee3d85271d2176af3467d486dad75242', class: "label float-on-focus", htmlFor: this.name }, h("slot", { key: 'c60916793141a30eed9a9bee88d91d6f4b0691a8' })), h("smoothly-icon", { key: 'ff2b6d441306f6ad9f06b2d9097caa7bfea1d0a0', name: "alert-circle", color: "danger", fill: "clear", size: "small", toolTip: this.errorMessage })), h("slot", { key: 'b776850e4b5fb350aac85ba09ea234c075d4ca3b', name: "end" })));
+            } }), h("label", { key: 'fb3bcebc770543e7811d68c7930c09cf2370859d', class: "label float-on-focus", htmlFor: this.name }, h("slot", { key: '1881af7df48fab8b47e9f337ef8db3e277b6c3ac' })), h("smoothly-icon", { key: '459cc05ea72fd98cd43d64acdd60c58327a2677c', name: "alert-circle", color: "danger", fill: "clear", size: "small", toolTip: this.errorMessage })), h("slot", { key: '219c8d02c6ef657d4e972fb667e959f3803ab4f9', name: "end" })));
     }
     static get is() { return "smoothly-input"; }
     static get encapsulation() { return "scoped"; }

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

@@ -106,9 +106,9 @@ export class SmoothlyInputMonth {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '7e05d80ebe8162924f86140f2335b7581c719a1b' }, h("smoothly-icon", { key: '2c74fc9ba9e3b9ae40d15f18ec1503270c153bfb', name: "caret-back-outline", size: "tiny", color: this.color, fill: "default", class: {
+        return (h(Host, { key: '8326dd10b2cb03a49c3df12c484d794ee42422e5' }, h("smoothly-icon", { key: '03d5ab4562e48c9d345dd28f8ba7260d8ca84534', 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: '60babf60bf9354c30c4745750259f7b5bf6835f0', ref: e => (this.year = e), name: `${this.name}-year`, readonly: this.readonly, changed: this.changed, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), searchDisabled: true }, h("div", { key: '424585680e3e999dc2817dea33be756d350a2d02', slot: "label" }, h("slot", { key: 'b658f5a779d57cf7731ba90fea7bf1ae5407e107', 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: '10a65c08cb5534b9aa34c4b22e933ec13c48c5ac', ref: e => (this.month = e), name: `${this.name}-month`, readonly: this.readonly, color: this.color, looks: this.looks, changed: this.changed, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), searchDisabled: true }, h("div", { key: 'd2d7f290030344d7ebc4ceed10492c9d4fdd45fa', slot: "label" }, h("slot", { key: '45b5a1a76f3e832f3455f717f57d09bdda313af4', 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: '432fdd7e4c46f6694bb7e6461a634bc37053689b', name: "caret-forward-outline", size: "tiny", color: this.color, fill: "default", class: {
+            }, onClick: () => this.allowPreviousMonth && this.adjustMonth(-1) }), h("smoothly-input-select", { key: 'cd2085f09d9ccf1c49ab6e7716301b270449cb8c', ref: e => (this.year = e), name: `${this.name}-year`, readonly: this.readonly, changed: this.changed, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), searchDisabled: true }, h("div", { key: '026788ad6b0d4f12b71478b04fee7ab9ec5f705c', slot: "label" }, h("slot", { key: '911d041691ed519c2485ba979f50a9936bd76611', 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: '08ada4e1dfd316a7c406e5e19f8c826f4e8a855e', ref: e => (this.month = e), name: `${this.name}-month`, readonly: this.readonly, color: this.color, looks: this.looks, changed: this.changed, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), searchDisabled: true }, h("div", { key: '8eff1f76b4388c488a773b234604794b83268bfa', slot: "label" }, h("slot", { key: 'c15e6145cb9bacc40843abdd1ad1a9cb7afe4baa', 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: 'f5f0e3b60b17279611012998265600b1a59f54e5', name: "caret-forward-outline", size: "tiny", color: this.color, fill: "default", class: {
                 disabled: this.readonly || !this.allowNextMonth,
             }, onClick: () => this.allowNextMonth && this.adjustMonth(1) })));
     }

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

@@ -96,7 +96,7 @@ export class SmoothlyInputRadio {
         (_b = (_a = this.listener).changed) === null || _b === void 0 ? void 0 : _b.call(_a, this);
     }
     render() {
-        return (h(Host, { key: 'e57746c2bec5f30fc57caa9e7159436c19bb44e7', class: "floating-label" }, h("slot", { key: '4cde319cff145536d92afc992723d413af4b483c', name: "start" }), h("div", { key: '9acdd7631c4f98059801a62385b94201238c9926' }, h("slot", { key: '2764bc78bf6aea432ee8615cbe06155bcf3be343', name: "label" }), h("div", { key: 'f6aed08f2bc4ab55a5361f4e25f8e503fd5d1e49', class: "options" }, h("slot", { key: 'a7e98902742dd3255fece1692b91ca9e18699fd2' }))), h("slot", { key: '1f90dc67b62832bf374c6abf73612feccecbbff4', name: "end" })));
+        return (h(Host, { key: '94325a8156ac640837a500e5c28f68ce2c06e72d', class: "floating-label" }, h("slot", { key: '61a87a363ffc2667860db9af4ad52a08edd99b62', name: "start" }), h("div", { key: '6b7a40b69d699f420f3c610b3fbaddd477fe37ca' }, h("slot", { key: 'a6676f95118a14e4814a3704fbc9808077bd8c1a', name: "label" }), h("div", { key: 'b8a3e6e7b6e173501e5e160db39791f6be61425a', class: "options" }, h("slot", { key: 'ecbed40f61155505265f5f8d6b3c7601dd6635e6' }))), h("slot", { key: '8dd360a537b119abb284c51243d3427d1a95c630', name: "end" })));
     }
     static get is() { return "smoothly-input-radio"; }
     static get encapsulation() { return "scoped"; }

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

@@ -14,7 +14,7 @@ export class SmoothlyInputRadioItem {
         this.smoothlySelect.emit({ value: this.value, selected: this.selected, select: s => (this.selected = s) });
     }
     render() {
-        return (h(Host, { key: 'abf7bcf3e4097671cdb53ec9a7909f10a4a98b73', onClick: () => this.inputHandler() }, h("input", { key: '9a5e3d668f1fdad37f114119a980726025f3fd83', name: this.name, type: "radio", checked: this.selected }), h("smoothly-icon", { key: '05aa10f3e7f5a8ed0e4e7f8d903df23dcd3d2c14', name: this.selected ? "checkmark-circle" : "ellipse-outline", size: "small", fill: "outline", color: this.selected ? "success" : "medium", toolTip: "Select" }), h("label", { key: '22f8d1b96b318e90cae673e6405659ccc1bf8b5a' }, h("slot", { key: 'd0a730e5a0cacb96eef896a4a12dfb000fab6bdd' }))));
+        return (h(Host, { key: 'd881877d7a8cd254071fe0202554e25e359a78e5', onClick: () => this.inputHandler() }, h("input", { key: 'ebd98073073f29821aae7ab753f19c3ffea0aec6', name: this.name, type: "radio", checked: this.selected }), h("smoothly-icon", { key: 'ced600a185b7853039c093d855a699950c8e221c', name: this.selected ? "checkmark-circle" : "ellipse-outline", size: "small", fill: "outline", color: this.selected ? "success" : "medium", toolTip: "Select" }), h("label", { key: 'fc9b714d55603e377ffe0c9341ec8ce242dc5881' }, h("slot", { key: '6bb1ab286ea926069e31e48fb23415257299ab00' }))));
     }
     static get is() { return "smoothly-input-radio-item"; }
     static get encapsulation() { return "scoped"; }

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: 'c812675343d64f3315f190ad1c908d10ace2c62c' }, h("h2", { key: '7638d925da134a917c195e141e9f5cc0ab501322' }, "Range"), h("h3", { key: '64ea67fce5489026de55211b6de6e5d181de30e1' }, "Phone Number"), h("smoothly-input-range", { key: '932e86e4c6df5b5ce4e64b31db597740628f5113', min: 700000000, max: 799999999, step: 1, label: "Phone Number" }), h("h3", { key: 'ccb928822f4f87d9069863cc195febea279b58a0' }, "Stars out of ten"), h("smoothly-input-range", { key: '7232e44dd5a8be19b3fd91232b548a090bd100be', max: 10, step: 1, label: "Stars" }), h("h3", { key: 'a8d2891ea79f41a2374030da6c8988b4d63dba2d' }, "Percent"), h("smoothly-input-range", { key: '4f9558319cf15a5926e4abe175af9abf8727e5f8', type: "percent", max: 1, step: 0.01, label: "Percent" }), h("h3", { key: '2b939b4330ceead0aa93bb2932baa0ceca932961' }, "With icon at start and clear button"), h("smoothly-input-range", { key: '7000d532a0a3086942c05676c3a200c8b942d4a9', step: 1, name: "range2", label: "Select" }, h("smoothly-icon", { key: '9ab62a9e0238046064533134ae9e251d10837c98', name: "checkmark-circle", slot: "start" }), h("smoothly-input-clear", { key: 'e97a0579668dd6dc631e23b58606882b9955bb6b', size: "icon", slot: "end" }))));
+        return (h(Host, { key: '4051df0b6e7e3616d4003fbf6041d7114e42bca5' }, h("h2", { key: '1bc9976be3dd1bdd9cafb957804721bfc2d35e8f' }, "Range"), h("h3", { key: 'c2d36a50622ab5aa5a91e7d07128710042ead62b' }, "Phone Number"), h("smoothly-input-range", { key: '9e3df23e6f60dee8edcb2dca05ff8fabc3f3f0b6', min: 700000000, max: 799999999, step: 1, label: "Phone Number" }), h("h3", { key: '30124f483876140e0b75fbbeea412e34430c00ee' }, "Stars out of ten"), h("smoothly-input-range", { key: 'd4aa30a14fea1abe86520faa74db9671397c75c9', max: 10, step: 1, label: "Stars" }), h("h3", { key: '855cdcf0cf5968c42dc038d3cb636a4aa0c4c75c' }, "Percent"), h("smoothly-input-range", { key: '78a4f0ddb5615947071bcc05cd2bdd6e14c83a96', type: "percent", max: 1, step: 0.01, label: "Percent" }), h("h3", { key: '3ccd439f2d386f40d87d92d22b5e9539bb7a2b9c' }, "With icon at start and clear button"), h("smoothly-input-range", { key: '3c1aa4fa46ac4c7e73fdf9df8628bf2459b354e5', step: 1, name: "range2", label: "Select" }, h("smoothly-icon", { key: '989b64f1e98a59d34e710eff806cdf7a2fec2e9b', name: "checkmark-circle", slot: "start" }), h("smoothly-input-clear", { key: '3cfabb3409c3ba4a3bb1ecd63dd51c2b79277552', size: "icon", slot: "end" }))));
     }
     static get is() { return "smoothly-input-range-demo"; }
 }

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

@@ -90,17 +90,17 @@ export class SmoothlyInputRange {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: '6eb88b4d79900c496a6c0c41ae56fc12b66f34b1', class: {
+        return (h(Host, { key: '90232044ed7c86886c63e0f3a3247cd9615416bb', class: {
                 "output-side-right": this.outputSide === "right",
                 "show-label": this.outputSide === "left" && !!this.label,
-            } }, h("slot", { key: '21f1f080b371d4418846270c79019dbb5c13b486', name: "start" }), h("div", { key: '3cf86a0fe223bb050a81e1fa40c33a52d4bd9089' }, h("label", { key: '8fd4d658aa15dfe1841e21bfaca5904e1189ff2a', htmlFor: this.name }, this.label), h("smoothly-input", { key: 'd70471f27095e8ba81dad816068782efd479cef7', 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: '7504c2e4c61bfa725571afed2f9081f4b86e8fb8', name: "start" }), h("div", { key: 'd62e225b32966530fb7ec9c82c39520ac3bc1238' }, h("label", { key: '5547ce5921cb8fda0a25a32c132c639c5eba10b9', htmlFor: this.name }, this.label), h("smoothly-input", { key: '08d86ea1cb133fede356dc71d4342fe6802f738e', 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 }, this.label), h("smoothly-display", { key: 'c4024448438ff16146298c09851089b8b24e2798', label: (this.type == "percent" ? this.min * 100 : this.min).toString() }), h("input", { key: '27569cc45c80a0415098deea69de0d82bc41603a', 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, 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 }, this.label), h("smoothly-display", { key: '7ee11f59b572f7ad3bc943154981ae582ea18bec', label: (this.type == "percent" ? this.min * 100 : this.min).toString() }), h("input", { key: '4c96c9a690942a98638725062656861f331d66d1', 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, onInput: event => {
                 event.stopPropagation();
                 this.setValue(event.target.valueAsNumber);
-            }, value: (_c = this.value) !== null && _c !== void 0 ? _c : this.min }), h("smoothly-display", { key: 'd74289b20e2645fefba9ee362e5d4c6d4bf40924', label: (this.type == "percent" ? this.max * 100 : this.max).toString() })), h("slot", { key: 'b4e6ac8ac6ca21e394f3cc74facf06d48226fa85', name: "end" })));
+            }, value: (_c = this.value) !== null && _c !== void 0 ? _c : this.min }), h("smoothly-display", { key: '85d93077d0dfed541c2979132616981d1f5d231c', label: (this.type == "percent" ? this.max * 100 : this.max).toString() })), h("slot", { key: 'c671e7d73d701eab03855ec487bdcb967df01cc4', name: "end" })));
     }
     static get is() { return "smoothly-input-range"; }
     static get encapsulation() { return "scoped"; }

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

@@ -39,7 +39,7 @@ export class SmoothlyInputReset {
     }
     render() {
         var _a;
-        return (h(Host, { key: '71225baa49eaeb96d36c3d5dc2f1880d33ac2861', title: this.tooltip }, h("smoothly-button", { key: '6de9cca047751443fb84b7ab91e24834604f824b', 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: '31f056aa77bbf74bb2457c4999d699e6892ad437' }), h("smoothly-icon", { key: 'cb5f326a194a0ccac34d404d921cc858bf77f8a7', flip: "x", name: "refresh-outline", size: "tiny" }))));
+        return (h(Host, { key: '3783efaed2304cc336fa8659579dfce6801fcd07', title: this.tooltip }, h("smoothly-button", { key: 'fbea13e6f94c40b97ff55ce8a6cc86bc50f4ce73', 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: 'ad1384e929cb9414dfdfec1a3863b5b4106b041f' }), h("smoothly-icon", { key: '36d9df6c1bc74b62940a4de263cfc260e604bbdc', 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

@@ -280,14 +280,14 @@ export class SmoothlyInputSelect {
         this.addedItems = this.addedItems.concat(h("smoothly-item", { value: this.filter, selected: true }, this.filter));
     }
     render() {
-        return (h(Host, { key: '4e0632f2279150363b616f4fb562b14531d3a4b9', tabIndex: 0, class: { "has-value": this.selected.length !== 0, open: this.open, invalid: !!this.invalid }, onClick: (event) => this.handleShowOptions(event) }, h("div", { key: '3f43ae2df3bf57d85a7f596e444eb7ec890c1dd4', class: "select-display", ref: element => (this.displaySelectedElement = element) }, this.placeholder), h("div", { key: '6d6cacb9cca744dfbe6afe9ff04bf24288fa6480', class: "icons", ref: element => (this.iconsDiv = element) }, h("slot", { key: 'e4371a6ea005aad63b7f214bd818ccd889521225', name: "end" }), this.looks == "border" && !this.readonly && (h("smoothly-icon", { key: '86c19de5e8f1ecdcef0c4ac66e1340b5802e9280', ref: element => (this.toggle = element), size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" })), h("smoothly-icon", { key: 'effb63b5a8e00d905b301b31f7c97c35e07fc5b8', class: "invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small" })), h("slot", { key: '806bd09cc47d8c35bb01901d7ba20e25dcdc0bb2', name: "label" }), h("div", { key: '8792bdb77b6c63e36a73a18a767dd57dbae6cc21', class: { hidden: !this.open, options: true }, ref: (el) => (this.optionsDiv = el) }, this.filter.length > 0 && (h("smoothly-item", { key: 'bc8b6ee08d787ccf0e2b6b4e2f32eeccee6effb0', selectable: false }, h("smoothly-icon", { key: '86d925feceb294c2ebfc7a9b427e19d95d203446', name: "search-outline", size: "small" }), this.filter, h("smoothly-icon", { key: '4e5733106f07af612cbabcfa3d2fa1e248b4e343', name: "backspace-outline", size: "small", onClick: e => {
+        return (h(Host, { key: 'fb0756c6066361bd2287aebc6d28b5f2496bc394', tabIndex: 0, class: { "has-value": this.selected.length !== 0, open: this.open, invalid: !!this.invalid }, onClick: (event) => this.handleShowOptions(event) }, h("div", { key: '9bfa5562754d20fb476b2e31c0ec2893c03d51cf', class: "select-display", ref: element => (this.displaySelectedElement = element) }, this.placeholder), h("div", { key: 'a16dd0637d4a14ce7c0c4087722c0290928f8d05', class: "icons", ref: element => (this.iconsDiv = element) }, h("slot", { key: '1205952806dbbc15ae2f21d6c28bf38f3098c97c', name: "end" }), this.looks == "border" && !this.readonly && (h("smoothly-icon", { key: '4f8ef15bd401a71207b649bea68c1fc1f9459896', ref: element => (this.toggle = element), size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" })), h("smoothly-icon", { key: '8e132252a0c1f1385b2abd12959d677c817c6958', class: "invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small" })), h("slot", { key: 'fd83ad097c45d8fff14e9f2283cf98235ff8fba5', name: "label" }), h("div", { key: 'fb839d6052e539a55269290220ac5b6556fd384e', class: { hidden: !this.open, options: true }, ref: (el) => (this.optionsDiv = el) }, this.filter.length > 0 && (h("smoothly-item", { key: '675b123e1c9dda89f283bc90dd3b5cf187b3913c', selectable: false }, h("smoothly-icon", { key: '98bf2c68ab35af19717bbdcbb4afb70b13eb14ff', name: "search-outline", size: "small" }), this.filter, h("smoothly-icon", { key: 'd841fbef1a3ab0cbb0106917d73236a1a06fd2aa', name: "backspace-outline", size: "small", onClick: e => {
                 e.stopPropagation();
                 this.filter = "";
                 this.element.focus();
-            } }), this.mutable && (h("smoothly-icon", { key: 'c0168cd488ff01296ff962a9ff4636d2df244905', name: "add", size: "small", onClick: e => {
+            } }), this.mutable && (h("smoothly-icon", { key: '2341fc5864c70c90f2d2629bf1168bb0bb669f95', name: "add", size: "small", onClick: e => {
                 e.stopPropagation();
                 this.addItem();
-            } })))), h("slot", { key: '9cd4292d4da25894b44297506ba89e4259ea9cd1' }), this.addedItems)));
+            } })))), h("slot", { key: '9f4727478c8483f3e35ed3e24604f4bb18d9c7c4' }), this.addedItems)));
     }
     static get is() { return "smoothly-input-select"; }
     static get encapsulation() { return "scoped"; }

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

@@ -37,7 +37,7 @@ export class SmoothlyInputSubmit {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '438434b7f94ee3a7d8b5cf3ed6c90113221c4494', 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: '5768d9069f8002611288580dec67d6119f4f4559', 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

@@ -30,7 +30,7 @@ export class SmoothlyItem {
                 : false;
     }
     render() {
-        return (h(Host, { key: 'a6ebadd25393a75972ec92c5860de2381825976d', tabIndex: -1 }, h("slot", { key: '2eefba52d0cc208111208720bb474a3324a79299' })));
+        return (h(Host, { key: '1ad7925c7766f48131a3b868e29a8d3b4ef81167', tabIndex: -1 }, h("slot", { key: '9b813b0b3f1caafd72cefebed40b6e6c48aace9e' })));
     }
     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: '01f79c44a6a9f4d3736efe6e4c0ee5ee3f973a0b', title: this.description, style: {
+        return (h(Host, { key: '2e33f0d93baee1a2589bdcad782c57b52a63bc33', title: this.description, style: {
                 "--hue": (_a = this.hue) === null || _a === void 0 ? void 0 : _a.toString(),
-            } }, h("slot", { key: '14273a6f60d52b740355383bfe7c419bb5ea14a4' })));
+            } }, h("slot", { key: '645b66d7fea66cb7b5bf1045e7e2400358a22608' })));
     }
     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: '88024c5d322957a45010c9898bd110b8f48f1438' }, h("slot", { key: 'a585246e4fc2b4fcd240047b8bb1f2b7530cc25f', name: "before" }), h("smoothly-load-more", { key: 'f259e7ac58e3297a85a0ce9b843062a969b38273', onSmoothlyLoadMore: e => this.loadMoreHandler(e) }), this.show && (typeof this.content == "function" ? h(this.content, null) : this.content), h("slot", { key: 'a6ad1c4865a75cb75eaae8920fc280a32105ac91' })));
+        return (h(Host, { key: '35a95fb4af778600b397523dd64bdc8f36db6624' }, h("slot", { key: 'b5aa77a8c758fe97602d099e7cfa5af3cf981199', name: "before" }), h("smoothly-load-more", { key: 'f469461edc4759aa9c898ae6edf8d0461b253c87', onSmoothlyLoadMore: e => this.loadMoreHandler(e) }), this.show && (typeof this.content == "function" ? h(this.content, null) : this.content), h("slot", { key: '41e879c9ddcebe32934aa54de2b34b700b6fb146' })));
     }
     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: '28ddc5d3fca6524101b268794c4d83186352f77b' });
+        return h(Host, { key: '828ce432656973cd3dc94015a4f7a350cffc2814' });
     }
     static get is() { return "smoothly-load-more"; }
     static get encapsulation() { return "scoped"; }

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

@@ -3,12 +3,13 @@ export class SmoothlyModal {
     constructor() {
         this.open = false;
         this.closable = false;
+        this.align = "center";
     }
     openChanged() {
         this.smoothlyModalChange.emit(this.open);
     }
     render() {
-        return (h(Host, { key: '8bdd830db07503dc5ad7a485ea41fbd14ae633cb', role: "alertdialog" }, h("div", { key: 'd6ba6d97bcae9b4110c3eaef01e6f92dc48d9013', class: "modal" }, h("div", { key: '1174aebeb08e2c9d31bfe264230ac12a79db9923', class: "header" }, h("slot", { key: 'c5422829ad590bae88ff33798fcea80b0df6e555', name: "header" }), this.closable && h("smoothly-icon", { key: '1f54c5792caa7da280803c7eedf2eb5dbac7f0ae', name: "close-outline", fill: "solid", onClick: () => (this.open = false) })), h("slot", { key: 'e568a5e424f3be6fdb79917fcfd0c1487c0535ac' }), h("div", { key: '2521bd8a631756db112465be5a04bb34a17ba05c', class: "actions" }, h("slot", { key: '3e6f6cbf6c41feee3c6b33c0d468f0737d3b7981', name: "actions" })))));
+        return (h(Host, { key: 'ca8c015be405179688f7eacb9becfd437733d136', role: "alertdialog" }, h("div", { key: '05afa423533ecfe7eb42578bb32e93d3b0189916', class: "modal" }, h("div", { key: 'a1ad92a2aa33376be6a210cc3d2b356c61a6b612', class: "header" }, h("slot", { key: 'e446def80df406f67a7db346e665cc72ab6c3994', name: "header" }), this.closable && h("smoothly-icon", { key: '73df336557af04d2cdc601c3e8d2f5c8a8a19222', name: "close-outline", fill: "solid", onClick: () => (this.open = false) })), h("slot", { key: 'aca2bb1c7221fbce49a00a2fd33539463414dbc5' }), h("div", { key: '802d7b631ae8fd42853120dc1c857fadb8c289ce', class: "actions" }, h("slot", { key: '31e0f0cc09d4567cc4ddb8a0a4e1b46c5229f11b', name: "actions" })))));
     }
     static get is() { return "smoothly-modal"; }
     static get encapsulation() { return "scoped"; }
@@ -59,6 +60,24 @@ export class SmoothlyModal {
                 "attribute": "closable",
                 "reflect": true,
                 "defaultValue": "false"
+            },
+            "align": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"top\" | \"center\"",
+                    "resolved": "\"center\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "align",
+                "reflect": true,
+                "defaultValue": "\"center\""
             }
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/modal/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAOpF,MAAM,OAAO,aAAa;;oBACsB,KAAK;wBAChB,KAAK;;IAIzC,WAAW;QACV,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IACzC,CAAC;IAED,MAAM;QACL,OAAO,CACN,EAAC,IAAI,qDAAC,IAAI,EAAC,aAAa;YACvB,4DAAK,KAAK,EAAC,OAAO;gBACjB,4DAAK,KAAK,EAAC,QAAQ;oBAClB,6DAAM,IAAI,EAAC,QAAQ,GAAG;oBACrB,IAAI,CAAC,QAAQ,IAAI,sEAAe,IAAI,EAAC,eAAe,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,GAAI,CACpG;gBACN,8DAAQ;gBACR,4DAAK,KAAK,EAAC,SAAS;oBACnB,6DAAM,IAAI,EAAC,SAAS,GAAG,CAClB,CACD,CACA,CACP,CAAA;IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Event, EventEmitter, h, Host, Prop, Watch } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-modal\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyModal {\n\t@Prop({ mutable: true, reflect: true }) open = false\n\t@Prop({ reflect: true }) closable = false\n\t@Event() smoothlyModalChange: EventEmitter<boolean>\n\n\t@Watch(\"open\")\n\topenChanged() {\n\t\tthis.smoothlyModalChange.emit(this.open)\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host role=\"alertdialog\">\n\t\t\t\t<div class=\"modal\">\n\t\t\t\t\t<div class=\"header\">\n\t\t\t\t\t\t<slot name=\"header\" />\n\t\t\t\t\t\t{this.closable && <smoothly-icon name=\"close-outline\" fill=\"solid\" onClick={() => (this.open = false)} />}\n\t\t\t\t\t</div>\n\t\t\t\t\t<slot />\n\t\t\t\t\t<div class=\"actions\">\n\t\t\t\t\t\t<slot name=\"actions\" />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/modal/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAOpF,MAAM,OAAO,aAAa;;oBACsB,KAAK;wBAChB,KAAK;qBACU,QAAQ;;IAI3D,WAAW;QACV,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IACzC,CAAC;IAED,MAAM;QACL,OAAO,CACN,EAAC,IAAI,qDAAC,IAAI,EAAC,aAAa;YACvB,4DAAK,KAAK,EAAC,OAAO;gBACjB,4DAAK,KAAK,EAAC,QAAQ;oBAClB,6DAAM,IAAI,EAAC,QAAQ,GAAG;oBACrB,IAAI,CAAC,QAAQ,IAAI,sEAAe,IAAI,EAAC,eAAe,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,GAAI,CACpG;gBACN,8DAAQ;gBACR,4DAAK,KAAK,EAAC,SAAS;oBACnB,6DAAM,IAAI,EAAC,SAAS,GAAG,CAClB,CACD,CACA,CACP,CAAA;IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Event, EventEmitter, h, Host, Prop, Watch } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-modal\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyModal {\n\t@Prop({ mutable: true, reflect: true }) open = false\n\t@Prop({ reflect: true }) closable = false\n\t@Prop({ reflect: true }) align: \"top\" | \"center\" = \"center\"\n\t@Event() smoothlyModalChange: EventEmitter<boolean>\n\n\t@Watch(\"open\")\n\topenChanged() {\n\t\tthis.smoothlyModalChange.emit(this.open)\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host role=\"alertdialog\">\n\t\t\t\t<div class=\"modal\">\n\t\t\t\t\t<div class=\"header\">\n\t\t\t\t\t\t<slot name=\"header\" />\n\t\t\t\t\t\t{this.closable && <smoothly-icon name=\"close-outline\" fill=\"solid\" onClick={() => (this.open = false)} />}\n\t\t\t\t\t</div>\n\t\t\t\t\t<slot />\n\t\t\t\t\t<div class=\"actions\">\n\t\t\t\t\t\t<slot name=\"actions\" />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

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

@@ -2,7 +2,6 @@
 	position: fixed;
 	display: flex;
 	justify-content: center;
-	align-items: center;
 	top: 0;
   left: 0;
   width: 100%;
@@ -15,6 +14,12 @@
 :host[hidden] {
 	display: none;
 }
+:host[align=center] {
+	align-items: center;
+}
+:host[align=top]>div.modal{
+	margin-top: calc((100dvh - var(--smoothly-modal-max-height)) / 2);
+}
 
 :host>div.modal {
 	display: flex;

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

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class SmoothlyNextDemoColspan {
     render() {
-        return (h(Host, { key: '322f2b276edccd53dfbaeb0a69c3fa177b43cab4' }, h("smoothly-next-table", { key: '5f6c1454afd074f410af1bc58b9051e4cc4565a5', columns: 3 }, h("smoothly-next-table-head", { key: '996f681fb42d9fa100bb6c1db890d63b45380aaa' }, h("smoothly-next-table-row", { key: 'f60c3d4f82d89ff57af38bb496f40d6880e65946' }, h("smoothly-next-table-cell", { key: '59ecdb00d518b081233441162f059f0351886a01' }, "Date"), h("smoothly-next-table-cell", { key: '4a0fc107f01a3f5990a66d72567fabd5d724f9c0' }, "Skip"), h("smoothly-next-table-cell", { key: 'dd73ce38da65de83632820b21af6f05ee07c3828' }, "Total"))), h("smoothly-next-table-body", { key: 'fbcd74ddfd81ca8b654a52045f9ac67a2ba086af' }, h("smoothly-next-table-row", { key: '974ebd927a3349cc5cee1a5f07456b8a9d04ed3c' }, h("smoothly-next-table-cell", { key: 'e23508ac94205d46507bf4035327ba6b8de1c59c', span: 2 }, h("smoothly-display", { key: 'ce6dec493c93ab4b56ab766b18a887a5c04b9a88', type: "date", value: "2024-01-01" })), h("smoothly-next-table-cell", { key: 'b0e802c95f68f126a100154ad9141fc96d4683bb' }, h("smoothly-display", { key: '7deb4d4111349fef3aba452cda451f362803ab46', type: "price", value: 120, currency: "EUR" }))), h("smoothly-next-table-row", { key: '77fe0794effe69b2000fbdb83868ed0553d0272b' }, h("smoothly-next-table-expandable-cell", { key: 'ac46fc6b2e2e86c40841ba4a3454e67dbf7879fa', span: 2 }, h("smoothly-display", { key: 'a8a251e544f1a96f0def89f33431b93d19199e8c', type: "date", value: "2024-01-02" }), h("smoothly-lazy", { key: '707e9fa0004e99b78f509049ae4f8e1abb5aaeb9', slot: "detail", content: h("smoothly-display", { type: "date-time", value: "2024-01-02T13:37:00.000Z" }) })), h("smoothly-next-table-expandable-cell", { key: 'e94393b2fe556d7a9a66d01f210bf78be31145e4' }, h("smoothly-display", { key: '3e9fe0dd066923340c8b6950ac5658280bb4b3ca', type: "price", value: 220, currency: "EUR" }), h("smoothly-lazy", { key: '000469e04b9c9c1decf3bcddf9dae83d57bce855', 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-next-table-row", { key: '1ac46694973e9a7d6ed7b0f963b0821627a9ad60' }, h("smoothly-next-table-cell", { key: '6ce70e4a0ba8adc455e96d66c4242730e332dbc4' }, h("smoothly-display", { key: 'b63c0e82edf8c8d461b5bb4127724fef865b98b0', type: "date", value: "2024-01-02" })), h("smoothly-next-table-cell", { key: '52cfc79ba1e09a72172d85510627bdad36096874' }, "Not Skipped"), h("smoothly-next-table-cell", { key: '26e4310cfde062fd1bb1edaf4d70e00007633906' }, h("smoothly-display", { key: '5f7a96c719a12e7acbc7a26d10e5e39abb9c5cef', type: "price", value: 320, currency: "EUR" })))))));
+        return (h(Host, { key: '9fae5ae5fd52417900b85cd1b7286226211988ae' }, h("smoothly-next-table", { key: '7fa918696ff0cbc055fc9679fada1682d83c30db', columns: 3 }, h("smoothly-next-table-head", { key: '953b379bc04dfbc70c48555be37634cc633bbe89' }, h("smoothly-next-table-row", { key: 'a57b92a5a37e839f5de4e33d2d0b1c36dfea9c4d' }, h("smoothly-next-table-cell", { key: '93aae315bf7dd8067602f31497c7d88453551d4c' }, "Date"), h("smoothly-next-table-cell", { key: '691050621549e189413af27ad3abebd7b1d06631' }, "Skip"), h("smoothly-next-table-cell", { key: '769cca5e01095fd8c4a99f9c88d0c5ee605c0ce6' }, "Total"))), h("smoothly-next-table-body", { key: 'ba10a91dc9b7dd6e36c5251316365054190e5f65' }, h("smoothly-next-table-row", { key: '0ef1e28d588a03cd17c49ec4b311d049404722df' }, h("smoothly-next-table-cell", { key: '2f01f179122351a37aa4d9bfee49c3a9f7a9f1b0', span: 2 }, h("smoothly-display", { key: 'cdce0e78b6cc01a43fcad4cf4f8f2ef985b3b51e', type: "date", value: "2024-01-01" })), h("smoothly-next-table-cell", { key: '5d17373e81827518dfb5e719b6501aa2cad32f56' }, h("smoothly-display", { key: 'ac37b31a93d75ec0cc51b8f026a044fd5c38968c', type: "price", value: 120, currency: "EUR" }))), h("smoothly-next-table-row", { key: '96632fe65093c0a5ffb0a99f13bbe673144e3cf6' }, h("smoothly-next-table-expandable-cell", { key: 'ccfd950b1e3f891501de681727fb04e30eb3e644', span: 2 }, h("smoothly-display", { key: '133eab18da8f74a9b5a1b062c503d517fd6f5483', type: "date", value: "2024-01-02" }), h("smoothly-lazy", { key: '0038fc2344f62cd389599c8259b1c688c6d84e1f', slot: "detail", content: h("smoothly-display", { type: "date-time", value: "2024-01-02T13:37:00.000Z" }) })), h("smoothly-next-table-expandable-cell", { key: '52ca0b3bc98dd236105cbd1070840f911f7088b1' }, h("smoothly-display", { key: '835f4f495f37982e3eeccf4fd1fd52b3bf06a884', type: "price", value: 220, currency: "EUR" }), h("smoothly-lazy", { key: '294b4a0bd1348ceafeb2bc97e7dd91ca7adfd1c2', 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-next-table-row", { key: 'a816070b9f7e2452e454c068ba820936158d32a9' }, h("smoothly-next-table-cell", { key: 'ba8caee508c08f738a05f94d77f94afff212a044' }, h("smoothly-display", { key: '12e4191c74895446481c8ef2b18c562139f63781', type: "date", value: "2024-01-02" })), h("smoothly-next-table-cell", { key: 'ac0a9f374fa3213b236b61eb703b8817f7e36faf' }, "Not Skipped"), h("smoothly-next-table-cell", { key: '1281d3957bb7ba877a594c1b3fd39e659ebe6a95' }, h("smoothly-display", { key: 'e861b9022b6ade127f99014d24cb2a4767733f51', type: "price", value: 320, currency: "EUR" })))))));
     }
     static get is() { return "smoothly-next-demo-colspan"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/next/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: '4c341fbd43b5bbd2e04c1e2ee00a07c7ea045202' }, h("smoothly-display", { key: '7bbe6ef242a6a1c3a7e2567025a6047c60545a13', type: "text", value: "Filtered" }), h("smoothly-filter", { key: 'c1ab30a5084a12a02a9b06ceb29ee696e8a169ae' }, h("smoothly-filter-toggle", { key: '903bf17689829b658b49940f6bec29a2433480e8', properties: { ["nested.pattern"]: "Ticked", breed: "" }, icon: "add", toolTip: "Nested Ticked", slot: "bar" }), h("smoothly-filter-toggle", { key: '66c99d6f0203db09a0d910e7b8a400c0f38a7170', properties: { pattern: "Ticked", breed: "" }, icon: "paw", toolTip: "Ticked cats", slot: "bar" }), h("smoothly-filter-toggle", { key: '2dfaa749577006dfe8f3e2b8e515982bfd55717e', properties: { breed: "Bombay", pattern: "Solid" }, icon: "radio-button-on", toolTip: "Solid bombay cats", slot: "bar" }), h("smoothly-filter-toggle", { key: '6ad16fcad1526fc789ab40a0129a26e8db89bf69', properties: { pattern: "Colorpoint" }, not: true, active: true, icon: "alert", toolTip: "Colored cats", slot: "bar" }), h("smoothly-filter-select", { key: '332596b7bcdee9807e13ed624d5ad86f1801cb7f', menuHeight: "5items", label: "coat", property: "nested.coat", slot: "bar", multiple: false }, this.cats &&
+        return (h(Host, { key: 'c404d58def3c3f7914736425f44b84ed0cf62441' }, h("smoothly-display", { key: 'a9cbe527936a663f454e7946397404f0d61af565', type: "text", value: "Filtered" }), h("smoothly-filter", { key: '00613bd320d8e7d244649e3aabb4ef8f35626abf' }, h("smoothly-filter-toggle", { key: 'dfdb7ef8c4ee1cb66836d1577a2b0315d3fc94ab', properties: { ["nested.pattern"]: "Ticked", breed: "" }, icon: "add", toolTip: "Nested Ticked", slot: "bar" }), h("smoothly-filter-toggle", { key: 'a53b725089f7909b8dba61c681be67f3b6a22648', properties: { pattern: "Ticked", breed: "" }, icon: "paw", toolTip: "Ticked cats", slot: "bar" }), h("smoothly-filter-toggle", { key: 'a9946e90151c488dca6cf485aecb7e9280eab2b1', properties: { breed: "Bombay", pattern: "Solid" }, icon: "radio-button-on", toolTip: "Solid bombay cats", slot: "bar" }), h("smoothly-filter-toggle", { key: '4d77c916108266c02800615a85ac4e86c035d002', properties: { pattern: "Colorpoint" }, not: true, active: true, icon: "alert", toolTip: "Colored cats", slot: "bar" }), h("smoothly-filter-select", { key: 'fc584e7577ae6cf7ffcf3cbb4376a113bca12041', 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: 'b40256e9e0600b770e75347692db324557948d9c', slot: "detail" }, h("smoothly-form", { key: 'c8183d8e51d0d8fa8a213cb045f638e04164dc3d', looks: "border" }, h("smoothly-filter-select", { key: 'fc0e067002129f9b75d65b5828ef8f0fc1dfce40', menuHeight: "5items", label: "coat", property: "nested.coat", multiple: true }, this.cats &&
+            })), h("div", { key: 'cd47ae3e7fde506a0fee97fccc62a0fe2cb13758', slot: "detail" }, h("smoothly-form", { key: '843a2f2d18ff4a5d226362c05271de9fdd208370', looks: "border" }, h("smoothly-filter-select", { key: 'ad9c7bf21e573c01fdadd3ebfe6bdc0a1ef58cf5', 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: 'ea9b038234c2e2a257f20f2a3d974e0abd99f12d', 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: 'a49b3b47fe6793d1e58e4accb61d4ae2f03fb45b', menuHeight: "5items", label: "names", property: "nested.names", multiple: true, type: "array" }, Object.keys(Object.values(names)
+            })), h("smoothly-filter-select", { key: 'f9e28061b92518d2f2c6fb76bab76232ea21611b', 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: '20950cf227e487754578871d8cbf7f5d1ec341aa', 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: '8a4b00297e311b4d553e92aa83505f2e237fdb1b', label: "Coat", property: "coat" }), h("smoothly-filter-input", { key: '0d50a452467c6d24e94e881b25082a7fa68eec9e', label: "Nested Coat", property: "nested.coat" })))), !cats ? ("Failed to load data.") : (h("smoothly-next-table", { columns: 4 }, h("smoothly-next-table-head", null, h("smoothly-next-table-row", null, h("smoothly-next-table-cell", null, this.selector.render(cats)), h("smoothly-next-table-cell", null, "Breed"), h("smoothly-next-table-cell", null, "Coat"), h("smoothly-next-table-cell", null, "Price"))), cats.map(cat => (h("smoothly-next-table-row", null, h("smoothly-next-table-cell", null, this.selector.render(cat)), h("smoothly-next-table-expandable-cell", null, cat.breed, h("div", { slot: "detail" }, "Country: ", cat.country)), h("smoothly-next-table-expandable-cell", null, cat.coat, h("div", { slot: "detail" }, "Pattern: ", cat.pattern)), h("smoothly-next-table-cell", null, h("smoothly-display", { type: "price", value: cat.price, currency: "SEK" }))))), h("smoothly-next-table-foot", null, h("smoothly-next-table-row", null, h("smoothly-next-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: '4ae6421aeff8d0d33c4d1241e27af31cfc58a536', label: "Coat", property: "coat" }), h("smoothly-filter-input", { key: 'd9b10a96f555bc1ca6f468a58309cce0eab8fe35', label: "Nested Coat", property: "nested.coat" })))), !cats ? ("Failed to load data.") : (h("smoothly-next-table", { columns: 4 }, h("smoothly-next-table-head", null, h("smoothly-next-table-row", null, h("smoothly-next-table-cell", null, this.selector.render(cats)), h("smoothly-next-table-cell", null, "Breed"), h("smoothly-next-table-cell", null, "Coat"), h("smoothly-next-table-cell", null, "Price"))), cats.map(cat => (h("smoothly-next-table-row", null, h("smoothly-next-table-cell", null, this.selector.render(cat)), h("smoothly-next-table-expandable-cell", null, cat.breed, h("div", { slot: "detail" }, "Country: ", cat.country)), h("smoothly-next-table-expandable-cell", null, cat.coat, h("div", { slot: "detail" }, "Pattern: ", cat.pattern)), h("smoothly-next-table-cell", null, h("smoothly-display", { type: "price", value: cat.price, currency: "SEK" }))))), h("smoothly-next-table-foot", null, h("smoothly-next-table-row", null, h("smoothly-next-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-next-table-demo-filtered"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1,7 +1,7 @@
 import { Fragment, h, Host } from "@stencil/core";
 export class SmoothlyNextDemoGroup {
     render() {
-        return (h(Host, { key: 'd04e8c35153417e76bba14acd36ea4ca7a55c3ec' }, h("smoothly-display", { key: '45973c766fa5e9f2de58fb465f175142a750e3db', type: "text", value: "Group" }), h("smoothly-next-table", { key: 'cfd126eb4d264e375b58967c659235d736b50c3d', color: "primary", columns: 2 }, h("smoothly-next-table-head", { key: 'c3c4ce2044e020cf2745fa8dc40df3c19ca24f63' }, h("smoothly-next-table-row", { key: 'fad438c3509dfff4df18082c0b57cb650895e546' }, h("smoothly-next-table-cell", { key: 'a53c5c4be617d724e5bc05d2511f983f85b3172f' }, "Date"), h("smoothly-next-table-cell", { key: '4d058ee9aa113d8ef0148b96e166ea774967d144' }, "Total"))), h("smoothly-next-table-body", { key: 'e0f0747e86439ff3d90f3a6171ca282731eaf358' }, h("smoothly-next-table-row-group", { key: '15511e13439150b8a92d52391f21b01d9be82b8a', align: true }, h("smoothly-display", { key: 'd6025dfbbd9a9b4d0fa0a7903937d3ad372201a5', slot: "start", type: "date", value: "2024-01-01" }), h("smoothly-display", { key: 'e0741caeb2ae307a4307ddb757b38fe536c32122', slot: "end", type: "price", currency: "EUR", value: 510 }), h("smoothly-next-table-expandable-row", { key: 'cf3287e8015acf361d1590fa81f364c3a511a661' }, h("smoothly-next-table-cell", { key: '7aa5daa4614bab82c0483f39f7d1fc552c6315ff' }, h("smoothly-display", { key: '2edbf7c3201bf10ab21941bd7cd6496307cd770d', type: "date-time", value: "2024-01-01T01:37:00.000Z" })), h("smoothly-next-table-cell", { key: '1bf0b2f56c52546c8691a812c7fb689608580fe2' }, h("smoothly-display", { key: '05a8761b2b0cb683363709c4ec5371a824abfa71', type: "price", currency: "EUR", value: 250 })), h("smoothly-lazy", { key: '17b67e01e33757832dffa10015a31affe9500036', slot: "detail", content: h(Fragment, null, "Details of 2024-01-01T01:37:00.000Z") })), h("smoothly-next-table-expandable-row", { key: '28f2b114fb220d0adfebdbdae124bb2472ca30d6' }, h("smoothly-next-table-cell", { key: 'a200b2197ab8b94e9b3c7e95824f9af8a835e79e' }, h("smoothly-display", { key: '9a688195d0a5905f540197085211c6f1e5216d17', type: "date-time", value: "2024-01-01T13:37:00.000Z" })), h("smoothly-next-table-cell", { key: 'b20029908c653d5faba884752364c3b3a5876e05' }, h("smoothly-display", { key: '8784939571b6805fd657ada73847695e8fa0163f', type: "price", currency: "EUR", value: 260 })), h("smoothly-lazy", { key: 'b9be8d6d6176960f7a049c20c2edbc14fa88cd45', slot: "detail", content: h(Fragment, null, "Details of 2024-01-01T13:37:00.000Z") }))), h("smoothly-next-table-row", { key: '668ce58755d59879479a02ff46f54a31053fae0f' }, h("smoothly-next-table-cell", { key: '7e14ed0793eaf28b4b30a1977d866de86d16d564' }, h("smoothly-display", { key: 'd5db14298acd3818a28504fdf90157be80806beb', type: "date", value: "2024-01-02" })), h("smoothly-next-table-cell", { key: '8be549ef0cb3aca8cc88bfb5d7f7d80c10d1d085' }, h("smoothly-display", { key: '73e18de7dc992c7bbf44afe16b1f9d2fdbf1dbdb', type: "price", currency: "EUR", value: 130 }))), h("smoothly-next-table-row-group", { key: '587669b4c01cd33711a28c8f8d2ffa51f4a42ac4' }, h("smoothly-display", { key: '28954087fb6438f6ac144677d95ca4ce8ddf1db4', slot: "start", type: "date", value: "2024-01-03" }), h("smoothly-display", { key: 'bff26087e74f633be84cfdaa1b2b3c0c2212644d', slot: "end", type: "price", currency: "EUR", value: 720 }), h("smoothly-next-table-expandable-row", { key: '045e21ff3f3e7369e5c22227165fd6924e95a7df' }, h("smoothly-next-table-cell", { key: 'd48c17ad4d6ad581967bdf285d6f48f8ddd3a2eb' }, h("smoothly-display", { key: 'd035a6fab995d18389b87320dffd61142acaf3da', type: "date-time", value: "2024-01-03T01:37:00.000Z" })), h("smoothly-next-table-cell", { key: 'cbdca0f53679358b66b71c0d0d5ea6162e07cacc' }, h("smoothly-display", { key: '2550e158ae294def827bee82d598c428e300f77c', type: "price", currency: "EUR", value: 320 })), h("smoothly-lazy", { key: '808b6848a47f39544c75106c8fe52d67946cdba1', slot: "detail", content: h(Fragment, null, "Details of 2024-01-03T01:37:00.000Z") })), h("smoothly-next-table-expandable-row", { key: 'ca2f239d8db4b65c5ec053c606fb78ba9afb3d92' }, h("smoothly-next-table-cell", { key: 'b323b68935ab2a21bff9c48795bcdd899ea8c82c' }, h("smoothly-display", { key: 'b80e960842a48f8d9f7444dfd15794eeb881a992', type: "date-time", value: "2024-01-03T13:37:00.000Z" })), h("smoothly-next-table-cell", { key: 'edb157281e51e08030d353e22d5f3622c03fe82c' }, h("smoothly-display", { key: 'c340c065598212a016fd43052b69a326350a7e7b', type: "price", currency: "EUR", value: 400 })), h("smoothly-lazy", { key: 'e123201f6341fb44b62818e793a5e7c2c34e323f', slot: "detail", content: h(Fragment, null, "Details of 2024-01-03T13:37:00.000Z") }))), h("smoothly-next-table-row-group", { key: 'a766e561ba2f5f270c394ee301c650c2d76a6884' }, h("smoothly-display", { key: 'f87ae1dd2860d7a5ed692157b87ba3dd2efb8611', slot: "start", type: "date", value: "2024-01-04" }), h("smoothly-next-table-expandable-row", { key: 'a6fdb5701da825cf3c9fcf8d695e808cc2e5874f' }, h("smoothly-next-table-cell", { key: 'a72fae772e958d7d22a688db3a2a81d0c4abf29b' }, h("smoothly-display", { key: 'd4f6c8135a71be2eae4fdae73260aeca39a1ee38', type: "date-time", value: "2024-01-04T01:37:00.000Z" })), h("smoothly-next-table-cell", { key: 'd039c7016265c977cfef3525e3222c03362fce99' }, h("smoothly-display", { key: '50ec614595e3ff2344b243315649d4535c64eb06', type: "price", currency: "EUR", value: 320 })), h("smoothly-lazy", { key: 'c1434b0eb47245530e0819275a1cee6ef8271e2c', slot: "detail", content: h(Fragment, null, "Details of 2024-01-04T01:37:00.000Z") })), h("smoothly-next-table-expandable-row", { key: 'e9e6ebcdd9cef452818d28c71c596a1242b0f205' }, h("smoothly-next-table-cell", { key: '2733ff9bc8e16e4acc0a6d9e9c8cc9d886c44558' }, h("smoothly-display", { key: '33c4db0fbed9d0221091032fdbb4c1b6c8c5f30b', type: "date-time", value: "2024-01-04T13:37:00.000Z" })), h("smoothly-next-table-cell", { key: '3b29e90b233fd7260c04ca449b65e3f7173c090f' }, h("smoothly-display", { key: '978af4218d9af91ff45a462ad6792e5e9eb37a3e', type: "price", currency: "EUR", value: 400 })), h("smoothly-lazy", { key: '66218c9e216b8e4f976442b0fd177ade75ddc42a', slot: "detail", content: h(Fragment, null, "Details of 2024-01-04T13:37:00.000Z") }))), h("smoothly-next-table-row-group", { key: '446d0e34d7ccc20a433933864f46f14b6a4c12e9' }, h("smoothly-display", { key: 'f7c4e5c34c0ccb49c07180d54cc576abd3304108', slot: "end", type: "price", currency: "EUR", value: 720 }), h("smoothly-next-table-expandable-row", { key: 'b9cc6547eb1b3a0bfd7c8825651807b11b86ee40' }, h("smoothly-next-table-cell", { key: 'c61156c4d46d9ed051e50a3728c0f1c6e5f11102' }, h("smoothly-display", { key: 'c7ec764a0932d07bf8bbe8f5c9c2874d24e71c7d', type: "date-time", value: "2024-01-05T01:37:00.000Z" })), h("smoothly-next-table-cell", { key: 'f516de923e16af3f1d81638d9944d3fc29ad011d' }, h("smoothly-display", { key: '4be7e012c8849ab7c16c248caecc4fa7cb07473b', type: "price", currency: "EUR", value: 320 })), h("smoothly-lazy", { key: 'f92b87c1c882a17362d34fd7113201115a1fc6f9', slot: "detail", content: h(Fragment, null, "Details of 2024-01-05T01:37:00.000Z") })), h("smoothly-next-table-expandable-row", { key: '3585351b9a566e40a1a81d3d04e65c3d71ab3489' }, h("smoothly-next-table-cell", { key: '4985799bacb6611fc366e079989eb8b96cbef8f7' }, h("smoothly-display", { key: 'c932c83068a8786d70e88eda742172a85ad3bc12', type: "date-time", value: "2024-01-05T13:37:00.000Z" })), h("smoothly-next-table-cell", { key: '0d3a603683cd7198c47f98a5c2fa04b8d5ed7ed5' }, h("smoothly-display", { key: '72e4a955d95f296bb1b4e23fc516bfa2318a603d', type: "price", currency: "EUR", value: 400 })), h("smoothly-lazy", { key: '90f148647cea3373df3842c92b3dd3e1af24de89', slot: "detail", content: h(Fragment, null, "Details of 2024-01-05T13:37:00.000Z") }))), h("fake-group-wrapper", { key: '77c771394227915988cb8045248c3bdc9d3e7da8' }, h("smoothly-next-table-row-group", { key: '1e309ad2bc941f611621adad1ee35d1426d373bb' }, h("smoothly-display", { key: 'aeb8df50733526bce7d1c2b45c7e662fdf4a27c1', slot: "start", type: "date", value: "2024-01-06" }), h("smoothly-display", { key: '23234d0f7215037c4e0e4a391acf1a224a822a4e', slot: "end", type: "price", currency: "EUR", value: 720 }), h("fake-row-wrapper", { key: '1441d65eac330485a0d67ba4da04794701c2a3f3' }, h("smoothly-next-table-row", { key: '99169f5e4843630a88cf4ba2feb8995dd1c7a6e9' }, h("fake-cell-wrapper", { key: 'f8728758cf1fd2820aa3495a7b14752bf2b454bb' }, h("smoothly-next-table-cell", { key: 'a9a795b78df65f1ace69e3a68420a1eaa12f76c9' }, h("smoothly-display", { key: '671e72183571983d83cfc9bb12c8ca42289e28bd', type: "date", value: "2024-01-02" }))), h("fake-expandable-cell-wrapper", { key: 'f63a4cf639ce50a82ebb1215b28198307009498a' }, h("smoothly-next-table-expandable-cell", { key: '79077527b9db7986243558f6283a57976fbaaf52' }, h("smoothly-display", { key: '4a1684618784970112d56021e33f072efaa8a7af', type: "price", currency: "EUR", value: 130 }), h("smoothly-lazy", { key: 'e0804b12698c1f69cf02f1ddbea48e6657405881', 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: 'f5ca21a477eb968f7e368966b21e94e215ef7f6e' }, h("smoothly-next-table-expandable-row", { key: 'aa84b462d7f31077d57b2edcec07bb964fd22a13' }, h("fake-cell-wrapper", { key: '19dd81792f7b4c6e194ddcfbbc3487faee27a5b2', class: "span-2" }, h("smoothly-next-table-cell", { key: '0d7c1e44d6ec12f464b3397f2cdb33bee34babc6', span: 2 }, h("smoothly-display", { key: 'f29965447072706a42077fc644b9edfc2851eee6', type: "date", value: "2024-01-07" }))), h("smoothly-lazy", { key: '66bf15ee9b7ac24ac4807bb12aef379d8bd2e34e', slot: "detail", content: h("smoothly-display", { type: "date-time", value: "2024-01-07T13:37:00.000Z" }) }))))), h("smoothly-next-table-row-group", { key: '8e7fd297cab98d86eebd601f8a88e28d2a617602' }, h("smoothly-display", { key: 'bee4e8292c9a724d39fe4595d8b126905874e2ec', slot: "start", type: "date", value: "2024-01-08" }), h("smoothly-display", { key: '0b2dee430ae48168b00c93e5550e6746bd608025', slot: "end", type: "price", currency: "EUR", value: 720 }))))));
+        return (h(Host, { key: '6812f172370b2f33eff4df66ce64cba3ea507950' }, h("smoothly-display", { key: '34e7fcda101824ebc5c838fd8a86b6c0b53f4e6d', type: "text", value: "Group" }), h("smoothly-next-table", { key: 'ad19427f7f4f5429852c813e96f558703f0d896a', color: "primary", columns: 2 }, h("smoothly-next-table-head", { key: '5d6082020030f6f62061d4478c09f133937e6f9f' }, h("smoothly-next-table-row", { key: 'a6429aace4d69831d5dfbfa202edd32c2a0be838' }, h("smoothly-next-table-cell", { key: '67907d0e1f8b428f2e830a34e4431f94f2c31d92' }, "Date"), h("smoothly-next-table-cell", { key: '4fd987d8b36cb50c326f0a244e6aeed180c584cb' }, "Total"))), h("smoothly-next-table-body", { key: '08a6d5633c917d73b34bb1c3794ebb19cc58693c' }, h("smoothly-next-table-row-group", { key: '2ef152f2278b642de82a4419320e079d8bdf2917', align: true }, h("smoothly-display", { key: 'f0c7e2c271d99ecbeb3b02bb118b1770f90c788c', slot: "start", type: "date", value: "2024-01-01" }), h("smoothly-display", { key: '738562449da05e24eddaf2b1a8870eb77eb871f4', slot: "end", type: "price", currency: "EUR", value: 510 }), h("smoothly-next-table-expandable-row", { key: '6f2e6dd98f8ea4e8fe1fa0a5d89c65e040618e35' }, h("smoothly-next-table-cell", { key: '2033c732353e85743f88579d81e799fffbb8767a' }, h("smoothly-display", { key: '29caa5fd660855ce740b9a5e62030f7ddab88d75', type: "date-time", value: "2024-01-01T01:37:00.000Z" })), h("smoothly-next-table-cell", { key: '8d52795adea316c6b0a6582a56b1506304362e0c' }, h("smoothly-display", { key: '54c0b7d38b5d001693909e40c835a905bf06f18e', type: "price", currency: "EUR", value: 250 })), h("smoothly-lazy", { key: 'afc33b08bdaa21b1c2b9718c6a3a20947ef4ccec', slot: "detail", content: h(Fragment, null, "Details of 2024-01-01T01:37:00.000Z") })), h("smoothly-next-table-expandable-row", { key: '003bc5f38a5a893f2f175a167d36aacb4e66bf55' }, h("smoothly-next-table-cell", { key: '7679e43a33148cb91858ca51c1e003fefa54fbea' }, h("smoothly-display", { key: '323ed36c5717aa2744dc8a0e4dd2179b992be795', type: "date-time", value: "2024-01-01T13:37:00.000Z" })), h("smoothly-next-table-cell", { key: '44f86caf0ab0eccc70b0daaeb61dd4a02673727d' }, h("smoothly-display", { key: '7a0385eda926bc3685c178bd90bc62e1c40609e1', type: "price", currency: "EUR", value: 260 })), h("smoothly-lazy", { key: '2823addb8cb61d132f28fec06b201b669fe8a8df', slot: "detail", content: h(Fragment, null, "Details of 2024-01-01T13:37:00.000Z") }))), h("smoothly-next-table-row", { key: '49de0ac612ab238e713281237c302c6b2d3fb08b' }, h("smoothly-next-table-cell", { key: '17badf73bb16e2e2d032cfdc9c83242cf962fe90' }, h("smoothly-display", { key: '37e150c03c577e514d1ffa2d520e92252ccf08ce', type: "date", value: "2024-01-02" })), h("smoothly-next-table-cell", { key: '6df8ac2e9838332a15eaad0e1b5fdf3385d11fe0' }, h("smoothly-display", { key: '3ef7763132aa6820b981f80c08670949126ce1e4', type: "price", currency: "EUR", value: 130 }))), h("smoothly-next-table-row-group", { key: '5e52abbedd65ce832012b2851f866334d63f6ca4' }, h("smoothly-display", { key: '29a670d47bb52e16ffcf455ca2526172877901c6', slot: "start", type: "date", value: "2024-01-03" }), h("smoothly-display", { key: 'aa1d996473e2ccdd5b9b808150538d8c6c3dbe4f', slot: "end", type: "price", currency: "EUR", value: 720 }), h("smoothly-next-table-expandable-row", { key: '7270edcce4b824073f410b284a65e3bb88057f0c' }, h("smoothly-next-table-cell", { key: '8a25cb24a0794394c5a5a8bc95e2edb7efaa25f1' }, h("smoothly-display", { key: '22dc2fb4fd39a8647f88559cde0bb36b2a3d0d64', type: "date-time", value: "2024-01-03T01:37:00.000Z" })), h("smoothly-next-table-cell", { key: 'b09d3259d98629932d8f65ac5b7cf0b4b9eb69f5' }, h("smoothly-display", { key: '81f0c27f64cad92003cf51ab291a4c3633dc0d46', type: "price", currency: "EUR", value: 320 })), h("smoothly-lazy", { key: '19164346935e3b584774e91f9339c0044fbb1125', slot: "detail", content: h(Fragment, null, "Details of 2024-01-03T01:37:00.000Z") })), h("smoothly-next-table-expandable-row", { key: 'ceb7e2376ad4572abe07e9a6a3dc032278583e7b' }, h("smoothly-next-table-cell", { key: 'af444c1d74c4b7698a9d475802340e8923841dbe' }, h("smoothly-display", { key: '6019baf37aed2aeab3acd6a801e05d2e416e8269', type: "date-time", value: "2024-01-03T13:37:00.000Z" })), h("smoothly-next-table-cell", { key: '755825e84e1f80b5266ab4f212761b752c1a5f01' }, h("smoothly-display", { key: '5489a5f9482863aa3016af95e7bef41977f9a038', type: "price", currency: "EUR", value: 400 })), h("smoothly-lazy", { key: '3e8c4bfb8d26f580bb0a67f16e6bdb0b3d24b0d2', slot: "detail", content: h(Fragment, null, "Details of 2024-01-03T13:37:00.000Z") }))), h("smoothly-next-table-row-group", { key: '1415ea3d2c7dbdbad280b377d34dd46c6d1f2d6b' }, h("smoothly-display", { key: '6968e1670f576d4f3d0aef3b55369e9bcad51a92', slot: "start", type: "date", value: "2024-01-04" }), h("smoothly-next-table-expandable-row", { key: '3e4f458a90d9845f29ba2220e1d5ac54f4b0e83e' }, h("smoothly-next-table-cell", { key: '005d4bb9cf77c6776f58e48b7e09ae3e297dca41' }, h("smoothly-display", { key: '7f71630981bc0f89d99fc6ee9cc5231a6053a12f', type: "date-time", value: "2024-01-04T01:37:00.000Z" })), h("smoothly-next-table-cell", { key: 'cca41e35a46199eb5282b209b0d9dd40af0a40b7' }, h("smoothly-display", { key: 'c141ca1622aac2802fc9a6c2eadc6427f33ecddc', type: "price", currency: "EUR", value: 320 })), h("smoothly-lazy", { key: 'ee6f89969c77c83a545e7350016723efd15b6920', slot: "detail", content: h(Fragment, null, "Details of 2024-01-04T01:37:00.000Z") })), h("smoothly-next-table-expandable-row", { key: 'bd9fbcbab9f33fc30845cb6d6768483f6a5e3b4a' }, h("smoothly-next-table-cell", { key: 'f27f36c7ac11adf79cd434601a906b12927bf8ed' }, h("smoothly-display", { key: '5e167c7a000590aa9ad80d10df9c8a6700305ee1', type: "date-time", value: "2024-01-04T13:37:00.000Z" })), h("smoothly-next-table-cell", { key: '4affa13546c2802454f88874ede921d609c9d1c2' }, h("smoothly-display", { key: '6e6d9f7fb5cc6978f16dae939d54a9a86e589088', type: "price", currency: "EUR", value: 400 })), h("smoothly-lazy", { key: '2fb8b325d27a7491ec3350b66105bd46b2740057', slot: "detail", content: h(Fragment, null, "Details of 2024-01-04T13:37:00.000Z") }))), h("smoothly-next-table-row-group", { key: '28c5673d8e2b70ba2d46aa7b573b3e28f829a78d' }, h("smoothly-display", { key: '257db1a81e89f3ab4baeaca246e338a60733e044', slot: "end", type: "price", currency: "EUR", value: 720 }), h("smoothly-next-table-expandable-row", { key: '2589b697446de13a1803a46555f538c8183a91ef' }, h("smoothly-next-table-cell", { key: '3242eac11e4baefe389723e5dfa01aea00b9bf4d' }, h("smoothly-display", { key: 'a9024aeffa7c484a641625141c5c503e2437694f', type: "date-time", value: "2024-01-05T01:37:00.000Z" })), h("smoothly-next-table-cell", { key: '11abfc5a4c581cf603a2d177956dec6b9943785d' }, h("smoothly-display", { key: '59d018ad4bd98109206d36ad7506e7193b3b9e1b', type: "price", currency: "EUR", value: 320 })), h("smoothly-lazy", { key: 'e6e9bc6ab1dbd9a199aa8b9a0a6269d6879a8538', slot: "detail", content: h(Fragment, null, "Details of 2024-01-05T01:37:00.000Z") })), h("smoothly-next-table-expandable-row", { key: '013fef3e59696278aaf3330cd3ff8fc8a74f8302' }, h("smoothly-next-table-cell", { key: '88994bcdaa43d1bc01f4b0bcf632899690403ad4' }, h("smoothly-display", { key: '34b22b944b032128277471dfed92934e774d74f4', type: "date-time", value: "2024-01-05T13:37:00.000Z" })), h("smoothly-next-table-cell", { key: 'a49b3e12ae016f2f1a7bca634e1640bf92880883' }, h("smoothly-display", { key: '63196fb68baa16350c0b21638332f34a7c0dfc05', type: "price", currency: "EUR", value: 400 })), h("smoothly-lazy", { key: '0dd6f9e4b9779241ec1932dc31e1f24b885fb0ff', slot: "detail", content: h(Fragment, null, "Details of 2024-01-05T13:37:00.000Z") }))), h("fake-group-wrapper", { key: '2c4118b69e01d8bbcbe70e4af42d852f81f0d1ed' }, h("smoothly-next-table-row-group", { key: '5279ebbaddc45369f9e4272b445816ea1413030e' }, h("smoothly-display", { key: '5aa00f2016608e3aa26a6141220160851dd8d13f', slot: "start", type: "date", value: "2024-01-06" }), h("smoothly-display", { key: '79aaf1e8096a00b62a90b6eae78da7c064e61d84', slot: "end", type: "price", currency: "EUR", value: 720 }), h("fake-row-wrapper", { key: '4577c1485bc26468c22d122b21d31f4bfdd2c374' }, h("smoothly-next-table-row", { key: 'cc10b4565c1967a119ac785fcb52be8c26af2672' }, h("fake-cell-wrapper", { key: '8825c2125fb69ba280c1d6aaba26f382a549be27' }, h("smoothly-next-table-cell", { key: 'ffcb5e9dcc8d4484052911432d702a81b998fe1b' }, h("smoothly-display", { key: 'ab21c5efd0cb92ca571cbb591cb75c985891c3c6', type: "date", value: "2024-01-02" }))), h("fake-expandable-cell-wrapper", { key: '2f236ad7a1ac83b3b0f4f2920f88a7876c46412e' }, h("smoothly-next-table-expandable-cell", { key: 'dde72163ce70689ecc2ade6feba3d73b120a84dd' }, h("smoothly-display", { key: 'a721d0ca5ecc6b1791dc718c9f4372325da7763d', type: "price", currency: "EUR", value: 130 }), h("smoothly-lazy", { key: '4abba2a13db57cb8a7dadbebd00900ad633f67bf', 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: '3a5f1574d5eb17004dd10b579a13e9002f216bdf' }, h("smoothly-next-table-expandable-row", { key: 'b6d9de9f3c3513fa225265c96162a4d23ad3f4f3' }, h("fake-cell-wrapper", { key: 'bbf2a862515fa0fcbcf375e57ece305bec73dad1', class: "span-2" }, h("smoothly-next-table-cell", { key: '9f4623b7bd2e88ed451b28226fb5b714ae60e5e4', span: 2 }, h("smoothly-display", { key: '1dde9cab0330ab4233bf35a156d33d588f2fdef2', type: "date", value: "2024-01-07" }))), h("smoothly-lazy", { key: 'edcdd269b9acbbce57caa1bf30e25fdbd23f2d1d', slot: "detail", content: h("smoothly-display", { type: "date-time", value: "2024-01-07T13:37:00.000Z" }) }))))), h("smoothly-next-table-row-group", { key: '1aa93e2c3a25258217f8675430797d343809d0b4' }, h("smoothly-display", { key: '6c5ab0e9a2b94add4883f1d905fea7a1cf49f39c', slot: "start", type: "date", value: "2024-01-08" }), h("smoothly-display", { key: '3e86daea52b5404e33e8a50ac11f9b2099f3c31a', slot: "end", type: "price", currency: "EUR", value: 720 }))))));
     }
     static get is() { return "smoothly-next-demo-group"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class SmoothlyNextDemo {
     render() {
-        return (h(Host, { key: 'd68c0979b5132c5dcb0764454ace4fc8f4b64983' }, h("smoothly-next-demo-group", { key: '846702fef150fe18cfdd909b1a1c2d64c1ff5242' }), h("smoothly-next-demo-colspan", { key: '244cebea8a6e51b398ba7c2af2cfc41da80e5121' }), h("smoothly-next-demo-simple", { key: 'fda034e25449569e6543e12cb1836d9421a9285f' }), h("smoothly-next-demo-nested", { key: 'c00ed11e4fdd08c2478153ce3bd5391fcef86440' }), h("smoothly-next-table-demo-filtered", { key: 'd058bfb651c724b5497eb49b93a90480790daf7d' })));
+        return (h(Host, { key: '623ee286c870010d07f78c86d65a5e0acfddc0fb' }, h("smoothly-next-demo-group", { key: 'ead07b554223bc4c8a178aaad2b933e6fcf6be29' }), h("smoothly-next-demo-colspan", { key: 'd5da62f2f5c67b5ba2e2524050b631e927487a71' }), h("smoothly-next-demo-simple", { key: '50eaaaf73bbf68eff78068eaeace5eb793b7a979' }), h("smoothly-next-demo-nested", { key: 'a695bb7ff0dcb529866b9484c01e33a5da5dc894' }), h("smoothly-next-table-demo-filtered", { key: '05246c90e3650d4e12279639e63b93944885e4a3' })));
     }
     static get is() { return "smoothly-next-demo"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/next/demo/nested/index.js

@@ -2,7 +2,7 @@ import { h, Host } from "@stencil/core";
 import { data } from "./data";
 export class SmoothlyNextDemoNested {
     render() {
-        return (h(Host, { key: 'adfb7e48147e8015dcb72757c2b31d106a879127' }, h("smoothly-display", { key: '7d9c5c7d09369e813b55be6268631b75be70ca2c', type: "text", value: "Nested" }), h("smoothly-next-table", { key: '5fd37fde775e88fafb20d6784fe82be3ed86412b', color: "primary", columns: 8 }, h("smoothly-next-table-head", { key: '525cc6d3a6ae46999eef64fac6041b5fde216238' }, h("smoothly-next-table-row", { key: 'e16e37cfb054582e50b38a0dd174922db5274aa1' }, h("smoothly-next-table-cell", { key: 'f73b540b514009242730f53813e5781281dff4f6' }, "Id"), h("smoothly-next-table-cell", { key: '3b49084a612ccaaa24b5fe1a0f3b5cda68f8c91f' }, "Registered"), h("smoothly-next-table-cell", { key: 'd61176c2d4004786a8d46de386014185d7548593' }, "Name"), h("smoothly-next-table-cell", { key: 'e8c020d083e9e8646cac57d5591afc555c49df79' }, "Age"), h("smoothly-next-table-cell", { key: '236011cf9fac056411a3a01ec487b4169235693d' }, "Balance"), h("smoothly-next-table-cell", { key: '52bf0214223130e7ae5e3362f3fdef899fa7d589' }, "EyeColor"), h("smoothly-next-table-cell", { key: '7158968cd3f0558b82dce2bc62b83fc1db1fdf73' }, "Gender"), h("smoothly-next-table-cell", { key: '3e91a70642866ff714035819f4e016dff8ab308f' }, "Company"))), h("smoothly-next-table-body", { key: '74bd43db33fd5533be589117bd471eff82c6bc70' }, data.map(entry => (h("smoothly-next-table-expandable-row", null, h("smoothly-next-demo-nested-inner", { color: "secondary", data: entry.friends, slot: "detail" }), h("smoothly-next-table-cell", null, entry.id), h("smoothly-next-table-cell", null, entry.registered), h("smoothly-next-table-cell", null, entry.name), h("smoothly-next-table-cell", null, entry.age), h("smoothly-next-table-cell", null, entry.balance), h("smoothly-next-table-cell", null, entry.eyeColor), h("smoothly-next-table-cell", null, entry.gender), h("smoothly-next-table-cell", null, entry.company))))), h("smoothly-next-table-foot", { key: '68462c407816da7d352f66f79fc5c294cc076330' }, h("smoothly-next-table-row", { key: 'fc862a5173ae9ffa04b6ba81862d71f267b82021' }, h("smoothly-next-table-cell", { key: 'e262856b8354c0e76ade754c6a742b0fe4eefe63' }, "Footer Cell"), h("smoothly-next-table-cell", { key: 'e2d44a80f3e499006a0cef3b9c2b4e611b632342' }, "Footer Cell"))))));
+        return (h(Host, { key: 'afcb91d12b2188a832b5f344fa80aed2ae377917' }, h("smoothly-display", { key: '4eb71bbf17e1ddbb233478e4faa2947c702e8b7f', type: "text", value: "Nested" }), h("smoothly-next-table", { key: '2c0bf69688b33746c0a274418df65a10464b420f', color: "primary", columns: 8 }, h("smoothly-next-table-head", { key: 'f5c1e7bd1ba7e218f2ad31a698598262413aa04c' }, h("smoothly-next-table-row", { key: '2e7269938614a4677a793b4165e564c0085270a3' }, h("smoothly-next-table-cell", { key: 'a381ac27bad403059bc2a10d6b828ea6e595ad5d' }, "Id"), h("smoothly-next-table-cell", { key: '558aa07a3d1deef689f80956374d3c3af547b604' }, "Registered"), h("smoothly-next-table-cell", { key: '366b0cec95d3baffac284038cd5403c199f180c8' }, "Name"), h("smoothly-next-table-cell", { key: '94b41c5aea9b089cd5a79b9be15c98cde5bc395b' }, "Age"), h("smoothly-next-table-cell", { key: 'b4fc9626909c9704ccdc27a0b82a9e69a6ea406b' }, "Balance"), h("smoothly-next-table-cell", { key: '77fa6fa37704c286862b57bdfb7ab207fcccec51' }, "EyeColor"), h("smoothly-next-table-cell", { key: 'd7943dc79f9706f889b76bf0a661c91797072522' }, "Gender"), h("smoothly-next-table-cell", { key: '9f222000a5c566ea794c195229150ef9b9821aaf' }, "Company"))), h("smoothly-next-table-body", { key: '40f669ce19da8d005095220d43cea0234410cf5a' }, data.map(entry => (h("smoothly-next-table-expandable-row", null, h("smoothly-next-demo-nested-inner", { color: "secondary", data: entry.friends, slot: "detail" }), h("smoothly-next-table-cell", null, entry.id), h("smoothly-next-table-cell", null, entry.registered), h("smoothly-next-table-cell", null, entry.name), h("smoothly-next-table-cell", null, entry.age), h("smoothly-next-table-cell", null, entry.balance), h("smoothly-next-table-cell", null, entry.eyeColor), h("smoothly-next-table-cell", null, entry.gender), h("smoothly-next-table-cell", null, entry.company))))), h("smoothly-next-table-foot", { key: '31cb73ea50fe4cd712337a36b347496e2e4e4668' }, h("smoothly-next-table-row", { key: '565ce53718e7e9e730e9864316242d166513af39' }, h("smoothly-next-table-cell", { key: '8c26e7318ff853f3048e28c578b107780dca82e4' }, "Footer Cell"), h("smoothly-next-table-cell", { key: '4996825b9fadaa50472fb905269db3acc02acb8e' }, "Footer Cell"))))));
     }
     static get is() { return "smoothly-next-demo-nested"; }
     static get encapsulation() { return "scoped"; }