npm - smoothly - Versions diffs - 1.115.0 → 1.117.0 - Mend

smoothly 1.115.0 → 1.117.0

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

Files changed (536) hide show

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

@@ -7,25 +7,25 @@ export class SmoothlyIconDemo {
         this.props = {};
     }
     render() {
-        return (h(Host, { key: 'f176097a9e8b600e7b6849618d986932e1115dfa' }, h("h2", { key: '600c0aaa4c8d9d66b75b3a9fb2546f8128b00f0b' }, "Filter and Variants"), h("smoothly-form", { key: 'da8b0a10a564b01918e644af025436dd13e1aa8c', looks: "grid", onSmoothlyFormInput: e => (this.display = e.detail) }, h("smoothly-input", { key: '976282ac0d7bf9025e305b975b5800ba8946190d', name: "filter" }, "Filter"), h("smoothly-input-select", { key: '81287920684545cdaedf4ae5df9e79bb8a9eea4b', name: "variant" }, h("span", { key: '8f14bd0559ab879184978aa720fbe9d72002c981', slot: "label" }, "Variant"), h("smoothly-item", { key: '262b691b55fc7a5dc662b50f6e84ac98e04db140', value: "outline" }, "outline"), h("smoothly-item", { key: '9baf50fd4633f0785577bebf8647f9ec4c9da525', value: "sharp" }, "sharp"), h("smoothly-input-clear", { key: '5460d9ba34ad9e5f5bc765893174fb57bf88b189', slot: "end" }))), h("h2", { key: 'a204390a284b9da8171a655c315981111ee29906' }, "Props"), h("smoothly-form", { key: 'bbcb2e224b053d8983a743abd34c0a0186bfcc0f', looks: "grid", onSmoothlyFormInput: e => {
+        return (h(Host, { key: 'ec049b1d4b3d93e28913174bd7ab55ce836298ae' }, h("h2", { key: 'd0430155840916db4250402c39e5ee2656dc9930' }, "Filter and Variants"), h("smoothly-form", { key: '4c6f1ffa07fed10ba6051ab4d5f29c1278608b23', looks: "grid", onSmoothlyFormInput: e => (this.display = e.detail) }, h("smoothly-input", { key: 'bea5be3b9c5f839da1fe6efd6497b4fa7c946e77', name: "filter" }, "Filter"), h("smoothly-input-select", { key: 'a64ee5957e34d669c481b77ba0f561ba5eebfa55', name: "variant" }, h("span", { key: '80df7e185a498c1c33cfe1c3fde85f955d46f256', slot: "label" }, "Variant"), h("smoothly-item", { key: 'd6447afb06c4471f9b3036838da77182161ebaf1', value: "outline" }, "outline"), h("smoothly-item", { key: '6622d9acf5549f05128632e386cafcabd4e5df0d', value: "sharp" }, "sharp"), h("smoothly-input-clear", { key: '1a94b3d1d195c77716a7a9e92303bab3dffcf8b0', slot: "end" }))), h("h2", { key: '1320b7b476f6451885fa32dcb0daed671d269612' }, "Props"), h("smoothly-form", { key: '1bc3722b6b25c57352ff7bc1df1571a3df824611', looks: "grid", onSmoothlyFormInput: e => {
                 this.props = e.detail;
                 console.log("props", this.props);
-            } }, h("smoothly-input-select", { key: '7f0f6e1932f649f5fb300f96a2d6eabc88e701aa', name: "color" }, h("span", { key: '508bbda0d768fc4f661f0f0887857e25d21c7a91', slot: "label" }, "Color"), Color.values.map(color => (h("smoothly-item", { value: color }, h("span", { style: {
+            } }, h("smoothly-input-select", { key: '8b065ccb0feb16a805a20ee13eab053d0cd8edfe', name: "color" }, h("span", { key: '3ed5be41ac0893b18741356a70c7653c862579a0', slot: "label" }, "Color"), Color.values.map(color => (h("smoothly-item", { value: color }, h("span", { style: {
                 background: `rgb(var(--smoothly-${color}-color))`,
                 "margin-right": "0.5rem",
                 width: "2.5rem",
                 height: "2.5rem",
-            } }), h("span", null, color)))), h("smoothly-input-clear", { key: 'e9b59296121ab6e415840d4f501ba31a4347e7af', slot: "end" })), h("smoothly-input-select", { key: 'd066f9f4aa8d79c19537b03e9fba85386e673633', name: "fill" }, h("span", { key: 'f6ae683d747cbeb8a3e40e4d240efe08a1ef8ec4', slot: "label" }, "Fill"), Fill.values.map(fill => (h("smoothly-item", { value: fill }, fill))), h("smoothly-input-clear", { key: '594435142c02e0b379f6b54886927069681de3cf', slot: "end" })), h("smoothly-input-select", { key: 'f5f821cfdc6a83063bf22c2eb8417e3fa33845cd', name: "customColor", menuHeight: "12items", ordered: true }, h("span", { key: '2b502f1dc5775cc23df45be8e48da4e297071078', slot: "label" }, "Custom Color"), Color.values.flatMap(c => (h(Fragment, null, ["tint", "color", "shade", "contrast"].map(v => (h("smoothly-item", { value: `--smoothly-${c}-${v}` }, h("span", { style: {
+            } }), h("span", null, color)))), h("smoothly-input-clear", { key: '50b90280c6f0600a073b8b8a254fb035f1aefec0', slot: "end" })), h("smoothly-input-select", { key: 'efda773381d8cb5d491e591b731cea17b406a005', name: "fill" }, h("span", { key: '396dbb906c3b52b53732b062f5ce8ebe70ce85b6', slot: "label" }, "Fill"), Fill.values.map(fill => (h("smoothly-item", { value: fill }, fill))), h("smoothly-input-clear", { key: '44cc4c40f24ad5c978e423496ea30a3068f862a1', slot: "end" })), h("smoothly-input-select", { key: 'd3aaee102be617722fc42dcd47139fe0d2c7284c', name: "customColor", menuHeight: "12items", ordered: true }, h("span", { key: 'dc450c6debc6be202b40628ef77196159e45a082', slot: "label" }, "Custom Color"), Color.values.flatMap(c => (h(Fragment, null, ["tint", "color", "shade", "contrast"].map(v => (h("smoothly-item", { value: `--smoothly-${c}-${v}` }, h("span", { style: {
                 background: `rgb(var(--smoothly-${c}-${v}))`,
                 "margin-right": "0.5rem",
                 width: "2.5rem",
                 height: "2.5rem",
-            } }), h("span", null, `rgb(var(--smoothly-${c}-${v}))`)))))))), h("smoothly-input-select", { key: 'ca3d4788ce77f1175a2e9e0cce841f3c8aa5925c', name: "customBackground", menuHeight: "12items", ordered: true }, h("span", { key: 'cd4faa49f2167739f5b00f1b0c734fdf6b8ddc4b', slot: "label" }, "Custom Background"), Color.values.flatMap(c => (h(Fragment, null, ["tint", "color", "shade", "contrast"].map(v => (h("smoothly-item", { value: `--smoothly-${c}-${v}` }, h("span", { style: {
+            } }), h("span", null, `rgb(var(--smoothly-${c}-${v}))`)))))))), h("smoothly-input-select", { key: 'a68b41f9a46917cb1b46e9ada61d05c280f92ff0', name: "customBackground", menuHeight: "12items", ordered: true }, h("span", { key: 'f094c91bdb64df81fd5fc49945b2760c214c37ed', slot: "label" }, "Custom Background"), Color.values.flatMap(c => (h(Fragment, null, ["tint", "color", "shade", "contrast"].map(v => (h("smoothly-item", { value: `--smoothly-${c}-${v}` }, h("span", { style: {
                 background: `rgb(var(--smoothly-${c}-${v}))`,
                 "margin-right": "0.5rem",
                 width: "2.5rem",
                 height: "2.5rem",
-            } }), h("span", null, `rgb(var(--smoothly-${c}-${v}))`)))))))), h("smoothly-input-select", { key: 'bfebecae9f13f019bd13a8baa8c1029468d83c18', name: "flip" }, h("span", { key: 'e8a300bdca3f1db8c36dff27b0df5afd08c6bda7', slot: "label" }, "Flip"), h("smoothly-item", { key: '5f92573e3420ce19c1d291c394259cf0b1b0cb63', value: "x" }, "x"), h("smoothly-item", { key: 'c55f735398bb6b01d83d0d80922214f007983f07', value: "y" }, "y"), h("smoothly-input-clear", { key: '171d0667b92be8ea4b8ef6c38bc4b6170c1db813', slot: "end" })), h("smoothly-input-select", { key: '30ebb8bdb6d5d75b8cfae380bb8a83bccb89b499', name: "size" }, h("span", { key: '62df815da76512b43ae1c4583ff3e61f29ed5133', slot: "label" }, "Size"), h("smoothly-item", { key: '5cb1ff7cb3660016cc243eb24b5f7f3fde4dd08f', value: "tiny" }, "tiny"), h("smoothly-item", { key: '0d4d0f54b705a47741d11f2b5fd29245362ded31', value: "small" }, "small"), h("smoothly-item", { key: 'd4469868285cfa6c6ec5de5609f313f892cc66f1', value: "medium" }, "medium"), h("smoothly-item", { key: '2b98aac9eeacc7942aa9ea73c48b16f36c226033', value: "large" }, "large"), h("smoothly-item", { key: '520ebe334ad34dde56d5f8b5ecb7ca25e6645989', value: "xlarge" }, "xlarge"), h("smoothly-input-clear", { key: '6b6dd6bd7070703371c89175f71ac30049e8042d', slot: "end" })), h("smoothly-input-range", { key: 'c85ffd310deeec0ef502b8549d9bfce3aa0ea895', name: "rotate", step: 1, min: -180, max: 180, value: 0 }, "Rotate", h("smoothly-input-clear", { key: 'a83b8be42b242c1b42b9ab34c9a3c61e0420ab64', slot: "end" }))), h("h1", { key: '02ce154b99955eece2bca3bb28fa47ad8955d18a' }, "Icons"), h("div", { key: 'e40575d19a189a6c8142c40943692854d9899749', class: "icons" }, [
+            } }), h("span", null, `rgb(var(--smoothly-${c}-${v}))`)))))))), h("smoothly-input-select", { key: '676477dc9f358f3512f0fb0f60a99a1deb3fa400', name: "flip" }, h("span", { key: '7e7924009ac080ccd225052351d0c70079990b6f', slot: "label" }, "Flip"), h("smoothly-item", { key: '70d21d485c90d881422d4c577fa04f101e0dae13', value: "x" }, "x"), h("smoothly-item", { key: '7e57ce51632ddd1dbf5fed24f109599de216eb3e', value: "y" }, "y"), h("smoothly-input-clear", { key: '0ea9f343784f533ebab4bc8d0b0879deb5e75156', slot: "end" })), h("smoothly-input-select", { key: '67e1d6b7b5e040e5284d0f5984c60a9f57a1d47f', name: "size" }, h("span", { key: 'e89ec731e273bd86c43d8993c78dbdcb1e052280', slot: "label" }, "Size"), h("smoothly-item", { key: '06201d3e144034f8984f48a064ea7d01dbdc3a7f', value: "tiny" }, "tiny"), h("smoothly-item", { key: '5f996913a822077f1fd66371819d528b0f67dc7f', value: "small" }, "small"), h("smoothly-item", { key: '1aa1eff32b61221555b6356cbe658fb2591a6678', value: "medium" }, "medium"), h("smoothly-item", { key: '1d18ac8a2bbcc4f16cd19263aa16d2d714582f27', value: "large" }, "large"), h("smoothly-item", { key: 'a0dd2fc34393ef5fc1ed89f1b000d3a3482a2324', value: "xlarge" }, "xlarge"), h("smoothly-input-clear", { key: '1cde73483d40576d71b1994ea7a4a18a0df791dc', slot: "end" })), h("smoothly-input-range", { key: 'c57e682c8ad984279d9b4d4eef60a6c076b3014b', name: "rotate", step: 1, min: -180, max: 180, value: 0 }, "Rotate", h("smoothly-input-clear", { key: '485dc43539bb93a6bdd58ab1ba10ac5ee64abb80', slot: "end" }))), h("h1", { key: 'cef7183437984cc0d8df4765a5afd62790e07881' }, "Icons"), h("div", { key: '332d4c1168cda7307f00eef4106494860ed0a491', class: "icons" }, [
             ...Icon.Name.values
                 .filter(name => !this.display.filter || name.includes(this.display.filter))
                 .map((name) => (this.display.variant ? `${name}-${this.display.variant}` : name)),

package/dist/collection/components/icon/index.js CHANGED Viewed

@@ -43,7 +43,7 @@ export class SmoothlyIcon {
     }
     render() {
         var _a;
-        return h(Host, { key: 'ba28d8662ab4103ffc3708a291b72c179e9e1748', title: this.tooltip, style: { ["--rotation"]: `${(_a = this.rotate) !== null && _a !== void 0 ? _a : 0}deg` } });
+        return h(Host, { key: '0a19bf819d57a94f13fc8c2fbc885aebb0bf7a24', title: this.tooltip, style: { ["--rotation"]: `${(_a = this.rotate) !== null && _a !== void 0 ? _a : 0}deg` } });
     }
     static get is() { return "smoothly-icon"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input/checkbox/demo/index.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { h, Host } from "@stencil/core";
 import { isoly } from "isoly";
 export class SmoothlyInputCheckboxDemo {
     render() {
-        return (h(Host, { key: 'f5df2f70e81f8189b2ed0fc110469fd31118f07e' }, h("h2", { key: 'f1805f70b5770fdf51ba8d7cd00ef7ddd2ab7706' }, "All inputs"), h("smoothly-form", { key: 'bcf287313fbda727ff66a43111c87f442ef2f77a', looks: "grid", readonly: true, action: "https://api.toiletapi.com/6b12fd2f-e896-46f9-b38f-25cf42cee4b4" }, h("smoothly-input", { key: '5ad0e09227c953003294064ec9a74a34dad99884', readonly: true, name: "First Name", value: "John" }, "First name"), h("smoothly-input", { key: '4a827cff07982019b2d95e4e440bd2976aeb49da', name: "Last name", value: "Doe" }, "Last name", h("smoothly-input-clear", { key: '9e4989baaba55d9d456c243354b611986ba1c42c', size: "icon", slot: "end" })), h("smoothly-input", { key: 'aa0d1fc77c155bc236459b40500802ad58716194', type: "phone", name: "Phone", value: "777888999" }, "Phone", h("smoothly-input-reset", { key: 'd80e1b9acbd7cf53acfced029cc8d5a0bd24d161', size: "icon", slot: "end" })), h("smoothly-input-radio", { key: '630fd379a65538192fb134f75cbcf55a282d8c44', clearable: true, name: "radioFirstInput" }, h("p", { key: '2b027b673dbcf3c4bf9d1f24c03f857f7477f59c', slot: "label" }, "Clearable"), h("smoothly-input-radio-item", { key: '3ba57b27799284c623037056b2f7d57637055dd8', slot: "options", value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: 'cc4daf5e360276819fb0166a7023afff132dc43a', selected: true, slot: "options", value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '120fd9fd0758c17b5fb8926425b032a8a1065612', slot: "options", value: "third" }, "Label 3")), h("smoothly-input-color", { key: '1f326fa25ce6a00ecbebe2186cec26c6efdb6eb3', name: "color", value: "#479f56", output: "rgb" }, "Color"), h("smoothly-input-select", { key: 'a899972ebf9f79209c56d81b544184690b85dfaf', menuHeight: "7.5items", placeholder: "Select...", multiple: true, name: "select-month" }, h("label", { key: 'b4e4e3c4eebad921eb830a242531a650bef0acd3', slot: "label" }, "Month"), h("smoothly-item", { key: '13f7abe4d7201572786405f17557d44409a8ef3a', value: "1" }, "January"), h("smoothly-item", { key: 'd83d6bc200a1f124b850b8636420b388c47879f7', value: "2" }, "February"), h("smoothly-item", { key: 'b04c6c85a5db9e867ab2bc931794fe1105855c9e', value: "3" }, "March"), h("smoothly-item", { key: 'd5e5c01012f4c278144fcf08c59abcc09ac62533', value: "4" }, "April"), h("smoothly-item", { key: 'c4c2b5b4cb3c57f166ef809b0dbba85f0ec190e3', value: "5" }, "May"), h("smoothly-item", { key: 'cac9c84f18108bce0025a81635a3b8bdcead4f54', value: "6" }, "June"), h("smoothly-item", { key: '0f6c56fcca25ae22f7f22e27a21b379de9ca24b2', value: "7" }, "July"), h("smoothly-item", { key: '79019fb60f0b87844767ef3463fd2c5dbd309fa8', value: "8" }, "August"), h("smoothly-item", { key: '9a8d4fd4fc756c9b9925f8d176a99aa3bcab935f', value: "9" }, "September"), h("smoothly-item", { key: '63e1671cec1610bafe6e962af88f1715ee2dfb28', value: "10" }, "October"), h("smoothly-item", { key: '1c200d8d7e11673ce27d2d683a2b8bb9954ca552', value: "11" }, "November"), h("smoothly-item", { key: 'e6caeaac708433debb27ab47ec82b51c4ad16c2a', value: "12" }, "December"), h("smoothly-input-clear", { key: '8d2405dc1d53e2434dbad4b69990b49651e8c557', size: "icon", slot: "end" })), h("smoothly-input-select", { key: '8cb2fe5eb8b152d32045c4a150c7c790ad35d922', name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { key: 'ae42e4ffed610af298235e7ebe3e1ec6b05d9e13', value: "folder", selected: true }, h("smoothly-icon", { key: '328f1295b0eb870bc80151c46a045bc5c180e998', size: "small", name: "folder-outline" })), h("smoothly-item", { key: 'c35837e991468d32bd1630519be188266558a976', value: "camera" }, h("smoothly-icon", { key: '02479e84c1ba0c5aca2bdbbe9cd72929e0572f0f', size: "small", name: "camera-outline" }))), h("smoothly-input-checkbox", { key: '6aa26dafb6d138c976683426757846b816c42dbc', name: "checkbox" }, "Check the box"), h("smoothly-input-checkbox", { key: '7bd63dbdc68f36325d579cf0d966fffa3435567c', name: "checkbox2", checked: true }, "Check the box 2"), h("smoothly-input-date-range", { key: '9183d69eae1040aede96d59cb5ff639335f43fb6', start: isoly.Date.now(), end: isoly.Date.now() }), h("smoothly-input-date", { key: '2650ad84a1f017d2672671af94c7c7991ea3e61b', name: "date" }, "Date", h("smoothly-input-clear", { key: 'e0f0b0c02189d0b930840e3a59a9adedd28a696a', slot: "end" })), h("smoothly-input-range", { key: '693b3fe5a9dd2aebf1dfb4ebb705ce0ecd5028a9', step: 1, name: "range3", value: 20000 }, "Select"), h("smoothly-input", { key: '0ac5d490c72cb234bfd328ffbd3cf3659bbc9aed', name: "pets.0.name" }, "First Pet's Name"), h("smoothly-input-range", { key: 'c86356ba541ab262d357dd194289ec2778ebbb07', name: "pets.0.age", max: 100, step: 1 }, "First Pet's Age"), h("smoothly-input", { key: 'd481ef9163d12757e43508af1e7ff0d7720ce31a', name: "pets.1.name" }, "Second Pet's Name"), h("smoothly-input-range", { key: 'e7bf653532ff0c957e6c3e82383cac5dc3210f40', name: "pets.1.age", max: 100, step: 1 }, "Second Pet's Age"), h("smoothly-input", { key: '27af92d8ccc19451a7786deb1cf8f59d10991e91', name: "pets.2.name" }, "Third Pet's Name"), h("smoothly-input-range", { key: 'fd9eb72093cf6f6c6fa7bdaa98a4d6066fbb43dc', name: "pets.2.age", max: 100, step: 1 }, "Third Pet's Age"), h("smoothly-input-file", { key: 'd444f859d0fdf764df0da9457d6a71e594ae560e', name: "profile", placeholder: "Click or drag your profile picture here..." }, h("span", { key: 'b044dca389ede3b37362ad564a5e84e9ccfd9c23', slot: "label" }, "Profile"), h("smoothly-icon", { key: 'adf0819cbb38fb45501aff5ba55ea75dd225b1e2', slot: "button", name: "person-circle-outline", size: "tiny", fill: "default" })), h("smoothly-input-clear", { key: 'ed14b047e2a63cbc29e7d01063abeebbe62e72ea', fill: "default", type: "form", color: "warning", slot: "clear", size: "icon", shape: "rounded" }), h("smoothly-input-edit", { key: '930962d9f3a141e8d863b3b7835efb6ac9e31a48', fill: "default", type: "form", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), h("smoothly-input-reset", { key: '70eb43c4179e7edaa328f6360e24f7679930dfe7', fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { key: '16f3e821c21d5c79a400c21720aebcc34d96a8eb', delete: true, slot: "delete", color: "danger", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { key: 'ff462593ad41911c666bd233d11109cfc9bca486', fill: "default", color: "success", slot: "submit", size: "icon", shape: "rounded" }))));
+        return (h(Host, { key: 'b87b050eb78e63350fdef9978b8ab3f6f75f90ba' }, h("h2", { key: 'b59d7d2132935b59925b3d486334adaa57d34111' }, "All inputs"), h("smoothly-form", { key: '2cf49373621aa3b4952816aa554835ab9a1dc75a', looks: "grid", readonly: true, action: "https://api.toiletapi.com/6b12fd2f-e896-46f9-b38f-25cf42cee4b4" }, h("smoothly-input", { key: '342a601528a1e72db8a79995d906d2f2d8ebd85d', readonly: true, name: "First Name", value: "John" }, "First name"), h("smoothly-input", { key: '6ffb6868dc9fb8b91a535712012a2f1c12137afc', name: "Last name", value: "Doe" }, "Last name", h("smoothly-input-clear", { key: 'a61b4f80fa1a58b159870fcf6c3633ced18634ae', size: "icon", slot: "end" })), h("smoothly-input", { key: '774574e34066312584d662925f47ca07809e4e78', type: "phone", name: "Phone", value: "777888999" }, "Phone", h("smoothly-input-reset", { key: 'b60d029086821dc8b5e754776c5e62233e5cc3b8', size: "icon", slot: "end" })), h("smoothly-input-radio", { key: '3c9969ce5448170cc919b40944981f5ad43edd7e', clearable: true, name: "radioFirstInput" }, h("p", { key: 'd8410427e1341ff530ecb7dee9823c21852fa3a7', slot: "label" }, "Clearable"), h("smoothly-input-radio-item", { key: '61c64bbe7250b4eb4290bd2c75caf62528c355c1', slot: "options", value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '44bbffb4103eb379652bbf436761458a14a7175f', selected: true, slot: "options", value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: 'c5dcb3b19adec142097e43ed1b10f80984477c49', slot: "options", value: "third" }, "Label 3")), h("smoothly-input-color", { key: 'e1cc8f36aa4dd9c84750797073c5d8ed0f2bad10', name: "color", value: "#479f56", output: "rgb" }, "Color"), h("smoothly-input-select", { key: '9543a9f9cc6ac7402415825a9872ec37d3048b3e', menuHeight: "7.5items", placeholder: "Select...", multiple: true, name: "select-month" }, h("label", { key: '41cbb2fab7585029ee91ea45d2b1d2f360a6a732', slot: "label" }, "Month"), h("smoothly-item", { key: '498d55992f8539e09c3862c0a147c271a645038d', value: "1" }, "January"), h("smoothly-item", { key: '1609ea60cb94e9ef195f4a18c61465c5319fb44d', value: "2" }, "February"), h("smoothly-item", { key: '1312da1f050e2e4ffde8c4b13dce23cb22711a2d', value: "3" }, "March"), h("smoothly-item", { key: 'ada60354212087fc55fb81939f831d6551d6ef7d', value: "4" }, "April"), h("smoothly-item", { key: '00da4e1699a9e1fc127a6f48ea7f440b0e3199da', value: "5" }, "May"), h("smoothly-item", { key: '93c3f12dd68334918a5f6a96b37506b548bba081', value: "6" }, "June"), h("smoothly-item", { key: '16c5a1d2d4a76312933e4c75312e29bbc4e77bc2', value: "7" }, "July"), h("smoothly-item", { key: 'fd8b80bb3b8e643f533543ea16041aed0e36a304', value: "8" }, "August"), h("smoothly-item", { key: '5f85430c08aa753b36b31f9de1a7a1d7d8d793e6', value: "9" }, "September"), h("smoothly-item", { key: '1c9447ee0e21fc37b625c4a2c9699659a6a03d80', value: "10" }, "October"), h("smoothly-item", { key: '648214d00c82a87a5403650e289dfc16470417d5', value: "11" }, "November"), h("smoothly-item", { key: '9b680e645e7589c8a8ece5f7fe951d3e818b04d2', value: "12" }, "December"), h("smoothly-input-clear", { key: '2cc62e638bd2037f1ff2f841c070840763b4ad32', size: "icon", slot: "end" })), h("smoothly-input-select", { key: '958f4e3773a9002b8b531defd76b69723abd8f3f', name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { key: '962f4103e460087672484eb3f88045027d32a130', value: "folder", selected: true }, h("smoothly-icon", { key: '6345e8422873c99e0dbab80025984b73aa4bbf68', size: "small", name: "folder-outline" })), h("smoothly-item", { key: '848077e1177766f84d6c7d59d9ffec16792631d4', value: "camera" }, h("smoothly-icon", { key: 'd2c00f76124a9b7be6fc25fb9c07b4de189af3da', size: "small", name: "camera-outline" }))), h("smoothly-input-checkbox", { key: '66a99e5d40cc59d07b203c88596def4a04f80616', name: "checkbox" }, "Check the box"), h("smoothly-input-checkbox", { key: 'a1c6b415241594b64b0faf73f363d16f78124cd9', name: "checkbox2", checked: true }, "Check the box 2"), h("smoothly-input-date-range", { key: '100e28190aaddd73697716b92ec4fb9ad8dd4924', start: isoly.Date.now(), end: isoly.Date.now() }), h("smoothly-input-date", { key: 'ed20d251ffc8bc5a1ddf527da2b2995b9e3bd4bf', name: "date" }, "Date", h("smoothly-input-clear", { key: '92228279c6a86738a4674bd44288a524b83e6307', slot: "end" })), h("smoothly-input-range", { key: 'e4fe8940464d23127d57edcfc79a3f808122107a', step: 1, name: "range3", value: 20000 }, "Select"), h("smoothly-input", { key: '62f3734c6b281d314d585eba4667860ed93860d3', name: "pets.0.name" }, "First Pet's Name"), h("smoothly-input-range", { key: '67a043f52e277658892f34af93b8ab2d50451dd9', name: "pets.0.age", max: 100, step: 1 }, "First Pet's Age"), h("smoothly-input", { key: '133126812e7dbae7f1491640dab148f4feb1c561', name: "pets.1.name" }, "Second Pet's Name"), h("smoothly-input-range", { key: '24cde6c2ea0b981781248e2bd4bad76612bde4ae', name: "pets.1.age", max: 100, step: 1 }, "Second Pet's Age"), h("smoothly-input", { key: 'b3da2cca79cf80972d6d2eb2370c46bcfe75a7ed', name: "pets.2.name" }, "Third Pet's Name"), h("smoothly-input-range", { key: '352432da59dfba1eac043d8b150b2740faf38384', name: "pets.2.age", max: 100, step: 1 }, "Third Pet's Age"), h("smoothly-input-file", { key: 'f711a241f53cfb5803979dc19c0421aa5b4b9936', name: "profile", placeholder: "Click or drag your profile picture here..." }, h("span", { key: '9f0ab930a4b1159d0373f9e33490c54dc070f71f', slot: "label" }, "Profile"), h("smoothly-icon", { key: '114f04898200155379a21c30fd6fe0bc9fac29c1', slot: "button", name: "person-circle-outline", size: "tiny", fill: "default" })), h("smoothly-input-clear", { key: 'e13dfab8e36f03e1862a73ad36e7a16e2f55cd00', fill: "default", type: "form", color: "warning", slot: "clear", size: "icon", shape: "rounded" }), h("smoothly-input-edit", { key: '667402ebc3bdfef1b6cd11be423cd95259d096b9', fill: "default", type: "form", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), h("smoothly-input-reset", { key: '8bf6222df1f9e450a44c28eba57774ab0b00aa43', fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { key: '3d628aed8faa2698a051915c01a6487b59ffa28c', delete: true, slot: "delete", color: "danger", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { key: 'f82e58a33a25824d8ff34103072d404f4b4b98fb', fill: "default", color: "success", slot: "submit", size: "icon", shape: "rounded" }))));
     }
     static get is() { return "smoothly-input-checkbox-demo"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input/checkbox/index.js CHANGED Viewed

@@ -64,10 +64,10 @@ export class SmoothlyInputCheckbox {
         }
     }
     render() {
-        return (h(Host, { key: '3d423adb72e619d4119435408a6b4ee9adbc2704' }, h("input", { key: '489144f56039b3edf5dab1f7ffe9f37e2d0fcadd', type: "checkbox", id: this.id, checked: this.checked, disabled: this.disabled || this.readonly, onChange: async (e) => {
+        return (h(Host, { key: '6c5e8fd09ac7c64be72d541cdeee747c84495a6f' }, h("input", { key: '241ef4d9acc46562323db12313f6ca0a3fea5f0f', type: "checkbox", id: this.id, checked: this.checked, disabled: this.disabled || this.readonly, onChange: async (e) => {
                 this.checked = e.target.checked;
                 this.smoothlyUserInput.emit({ name: this.name, value: await this.getValue() });
-            } }), this.checked && h("smoothly-icon", { key: '6f97dca6dbfedce3d06d4146269bb518016476a8', name: "checkmark-sharp", size: "tiny" }), h("label", { key: '63fc6b505b6d21a779e60ae9803b56134fd855e0', htmlFor: this.id }, h("slot", { key: '88de07dc316049e436784b8ad1e7a3fe359363ff' })), h("span", { key: 'dd9d9e7f30dd37550a089b65c62d26e38471d8bc', class: "smoothly-checkbox-end-slot" }, h("slot", { key: 'f74c25ab1f6765225044bfc21db40b51e47802aa', name: "end" }))));
+            } }), this.checked && h("smoothly-icon", { key: 'a0909dfe8369e31bf4873a2ab05f21880c3f43fe', name: "checkmark-sharp", size: "tiny" }), h("label", { key: 'c3628052b38e4dfbdffefa92d428a04662726f65', htmlFor: this.id }, h("slot", { key: 'bfdbbb43537661b026600d2cb3af9c244d2ae5b3' })), h("span", { key: '4033bb43f9ead47f2f9f7eb6943e4199c7260766', class: "smoothly-checkbox-end-slot" }, h("slot", { key: 'e8985be231a6f80d71d85e1b665705458fb187f2', name: "end" }))));
     }
     static get is() { return "smoothly-input-checkbox"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input/clear/index.js CHANGED Viewed

@@ -42,7 +42,7 @@ export class SmoothlyInputClear {
     }
     render() {
         var _a;
-        return (h(Host, { key: '35dfd4b4b5b2aaac1457f14143591df8244e4e2f', title: this.tooltip }, h("smoothly-button", { key: '681e2d83c6fe6061919a06ece237673e0c68a159', 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: '31f3176ab610d6c1ce68055b6f0df55ba2303e29' }), h("smoothly-icon", { key: 'a454fc3409e50dd4a0fb7566460909645066b944', name: "close", size: "tiny" }))));
+        return (h(Host, { key: 'f1f8c9c1065466cf60851197c73cb3e801593472', title: this.tooltip }, h("smoothly-button", { key: '2166cd37b5a0e93cba98b17657f4bf33e503814e', 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: '427e397efd7fc89e2e6ba34f1703cd249b8b07cf' }), h("smoothly-icon", { key: '3c16b4541b7d1493213d3dfc93adf32aec831869', name: "close", size: "tiny" }))));
     }
     static get is() { return "smoothly-input-clear"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input/color/demo/index.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class SmoothlyInputColorDemo {
     render() {
-        return (h(Host, { key: 'a24614a0d013b44ad55334eba6849d7d4c2ebdc8' }, h("h2", { key: 'f003675167b0a648e3de7cd44a2a2c53a27c1e3a' }, "Color"), h("smoothly-input-color", { key: 'd562fdd31044939c84dd7bd6264adfe9ea4a8bfa', name: "color" }, "Choose color")));
+        return (h(Host, { key: '7b11b0f228e5e8655a3db81717e614354b9fbdc0' }, h("h2", { key: '41e22ff3427c56b0e5b5b5c837215ce3c8e3667b' }, "Color"), h("smoothly-input-color", { key: '778d1355985c37f4b8b193b65d0a534c640c5c1c', name: "color" }, "Choose color")));
     }
     static get is() { return "smoothly-input-color-demo"; }
     static get styles() { return "style.css"; }

package/dist/collection/components/input/color/index.js CHANGED Viewed

@@ -146,7 +146,7 @@ export class SmoothlyInputColor {
     }
     render() {
         var _a, _b, _c, _d, _e, _f;
-        return (h(Host, { key: '443b5ede9cb6485ed194f6c4bcd0dfa4d24fbf5f', style: {
+        return (h(Host, { key: '606897dcf8880a8bceaf646a17b0b682dc0de4fe', style: {
                 "--hexCode": this.value,
                 "--rgb-r": `${Math.round((_a = this.rgb.r) !== null && _a !== void 0 ? _a : 0)}`,
                 "--rgb-g": `${Math.round((_b = this.rgb.g) !== null && _b !== void 0 ? _b : 0)}`,
@@ -155,7 +155,7 @@ export class SmoothlyInputColor {
                 "--hsl-s": `${Math.round((_e = this.hsl.s) !== null && _e !== void 0 ? _e : 0)}%`,
                 "--hsl-l": `${Math.round((_f = this.hsl.l) !== null && _f !== void 0 ? _f : 0)}%`,
                 "--element-height": `${this.element.clientHeight}px`,
-            } }, h("smoothly-input", { key: '773d645e7cbe1dba29ed0faaf411873eff3850e4', value: this.value, color: this.color, looks: undefined, name: this.name, type: "hex-color", readonly: this.readonly, disabled: this.disabled, showLabel: this.showLabel, onSmoothlyInput: event => (event === null || event === void 0 ? void 0 : event.stopPropagation(), this.hexInputHandler(event.detail[this.name])) }, h("slot", { key: 'e0237c1fd28820b5827660cc3f343a0b0daad919' })), h("div", { key: 'd4be603547b585719296c5fe4a129cffd7e5e904', class: "color-sample" }), h("smoothly-icon", { key: '17a5e51dba9a921faa53a42a2bd0b94cbdb8f490', color: this.color, name: "options-outline", size: "small", onClick: () => !this.readonly && !this.disabled && this.openDropdown() }), h("div", { key: '30eaa873254116bfb5930a1da0f93924682d5810' }, h("slot", { key: '65f98a331cb2b8cabbe58715c2cc496950e5a92c', name: "end" })), this.open && !this.readonly && !this.disabled && (h("div", { key: '972192b5efddbb9a173e2b50b35cfeebefb3a1f4', class: "rgb-sliders" }, h("smoothly-toggle-switch", { key: '9ec21361f064f9fc889aa1c1b50f672982882cb3', title: `${this.sliderMode === "rgb" ? "To HSL" : "To RGB"}`, onSmoothlyToggleSwitchChange: event => this.handleSwitchMode(event), size: "tiny", checkmark: false, selected: this.sliderMode === "hsl" }), Object.entries(this.rgb).map(([key, value]) => (h("smoothly-input-range", { style: this.sliderMode != "rgb" ? { display: "none" } : {}, name: key, min: 0, max: 255, color: undefined, type: "text", value: value, step: 1, outputSide: "right", onSmoothlyInput: event => this.sliderInputHandler(event), onSmoothlyUserInput: event => event.stopPropagation(), label: key.toUpperCase() }))), Object.entries(this.hsl).map(([key, value]) => (h("smoothly-input-range", { style: this.sliderMode != "hsl" ? { display: "none" } : {}, name: key, min: 0, max: key === "h" ? 359 : 1, color: undefined, type: key === "s" || key === "l" ? "percent" : "text", value: (key === "s" || key === "l") && value ? value / 100 : value, step: key === "s" || key === "l" ? 0.01 : 1, outputSide: "right", onSmoothlyInput: event => this.sliderInputHandler(event), onSmoothlyUserInput: event => event.stopPropagation(), label: key.toUpperCase() })))))));
+            } }, h("smoothly-input", { key: '3a8211dcd537f07359729f79b88c33ffa8dd26e6', value: this.value, color: this.color, looks: undefined, name: this.name, type: "hex-color", readonly: this.readonly, disabled: this.disabled, showLabel: this.showLabel, onSmoothlyInput: event => (event === null || event === void 0 ? void 0 : event.stopPropagation(), this.hexInputHandler(event.detail[this.name])) }, h("slot", { key: '932e1fee6e31f8942841ae068404f674d20c6d75' })), h("div", { key: '55de847010bfc30641a1b4814fc7d4ea1beb8b63', class: "color-sample" }), h("smoothly-icon", { key: '7e69d59ceb71c617d93205b6ada24bc0a0b6d3fe', color: this.color, name: "options-outline", size: "small", onClick: () => !this.readonly && !this.disabled && this.openDropdown() }), h("div", { key: '38771b0daff4bda14ecb821f7ec0725ef575f50c' }, h("slot", { key: 'b005802e73faf84b2772e7bf28163963abe619ca', name: "end" })), this.open && !this.readonly && !this.disabled && (h("div", { key: 'ed68b37bbbe25ccb1cfe00167b21b49fdcad5326', class: "rgb-sliders" }, h("smoothly-toggle-switch", { key: 'a3643b4c099fb94dfc57b8c2658bde1711aa0c5d', title: `${this.sliderMode === "rgb" ? "To HSL" : "To RGB"}`, onSmoothlyToggleSwitchChange: event => this.handleSwitchMode(event), size: "tiny", checkmark: false, selected: this.sliderMode === "hsl" }), Object.entries(this.rgb).map(([key, value]) => (h("smoothly-input-range", { style: this.sliderMode != "rgb" ? { display: "none" } : {}, name: key, min: 0, max: 255, color: undefined, type: "text", value: value, step: 1, outputSide: "right", onSmoothlyInput: event => this.sliderInputHandler(event), onSmoothlyUserInput: event => event.stopPropagation(), label: key.toUpperCase() }))), Object.entries(this.hsl).map(([key, value]) => (h("smoothly-input-range", { style: this.sliderMode != "hsl" ? { display: "none" } : {}, name: key, min: 0, max: key === "h" ? 359 : 1, color: undefined, type: key === "s" || key === "l" ? "percent" : "text", value: (key === "s" || key === "l") && value ? value / 100 : value, step: key === "s" || key === "l" ? 0.01 : 1, outputSide: "right", onSmoothlyInput: event => this.sliderInputHandler(event), onSmoothlyUserInput: event => event.stopPropagation(), label: key.toUpperCase() })))))));
     }
     static get is() { return "smoothly-input-color"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input/date/index.js CHANGED Viewed

@@ -108,7 +108,7 @@ export class SmoothlyInputDate {
         event.stopPropagation();
     }
     render() {
-        return (h(Host, { key: 'adce039516ed0f3009e61150455b2c51cc0ec899', tabindex: this.disabled ? undefined : 0, class: { "has-value": !!this.value, "has-text": this.hasText, "floating-label": this.alwaysShowGuide }, onClick: (e) => this.onClick(e) }, h("slot", { key: '9050a4383696852cac8b11bf7a426f41d592e3dc', name: "start" }), h("label", { key: '82204edd99bc733897ad6a05d79efc8dd74c83f6', class: "label float-on-focus" }, h("slot", { key: '6a479c63d63fdad7947cd25497f3dceba64574df' })), this.placeholder && h("span", { key: 'a905c85bffb75afa43cf2ea7effdf6a985ce64f8', class: "smoothly-date-placeholder" }, this.placeholder), h("smoothly-date-text", { key: '0e7c8d8a86189c99f83750435da80988153c6519', ref: el => (this.dateTextElement = el), locale: this.locale, readonly: this.readonly, disabled: this.disabled, showLabel: this.showLabel, value: this.value, onSmoothlyDateTextHasText: e => (e.stopPropagation(), (this.hasText = e.detail)), onSmoothlyDateTextFocusChange: e => (e.stopPropagation(), (this.hasFocus = e.detail)), onSmoothlyDateHasPartialDate: e => { var _a; return (e.stopPropagation(), (_a = this.calendarElement) === null || _a === void 0 ? void 0 : _a.jumpTo(e.detail)); }, onSmoothlyDateTextChange: e => (e.stopPropagation(), this.onUserChangedValue(e)), onSmoothlyDateTextDone: e => { var _a; return (e.stopPropagation(), (this.open = false), (_a = this.dateTextElement) === null || _a === void 0 ? void 0 : _a.deselect()); } }), h("span", { key: '6271a396fe0a9db78c65a3ceac415baa6993ce72', class: "smoothly-icons", ref: el => (this.iconsElement = el) }, h("smoothly-icon", { key: '67762b14cf3c1a8657441805585cc22920fcddf6', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), h("slot", { key: '88eaca53d97c64fcfa81e0f749b1e9ff3a0068c4', name: "end" })), this.open && !this.readonly && (h("smoothly-calendar", { key: 'ed5ff09959095128feac27c0c5c4b8ba8b51514f', ref: el => (this.calendarElement = el), doubleInput: false, value: this.value, onSmoothlyDateSet: e => (e.stopPropagation(), this.onUserChangedValue(e)), max: this.max, min: this.min }, h("div", { key: '7d482a7dac0561c9f339948ef22573c9f49ccc51', slot: "year-label" }, h("slot", { key: '6a55528882645e6cc6c5e14b3498b480b8c1d6fd', name: "year-label" })), h("div", { key: 'c310a5c99728b55d0b3f19cb494cc7fe20f12353', slot: "month-label" }, h("slot", { key: '3a4324a869730eb9acb114243a4feae03318b6d5', name: "month-label" }))))));
+        return (h(Host, { key: 'd610c101e778aa42a9369aa03f1caf8e14b8b5c8', tabindex: this.disabled ? undefined : 0, class: { "has-value": !!this.value, "has-text": this.hasText, "floating-label": this.alwaysShowGuide }, onClick: (e) => this.onClick(e) }, h("slot", { key: '44cfdeb10640f183b8d5aee0a40630dc6d3e994e', name: "start" }), h("label", { key: 'd7b5fdb309c4cbe5ca865169953f50e57bae8d4d', class: "label float-on-focus" }, h("slot", { key: '7230b56a3bdbb7a83a8c45800f056734b01bcb90' })), this.placeholder && h("span", { key: '4a0606f9f3d1bf1610393006ee6238b386b56655', class: "smoothly-date-placeholder" }, this.placeholder), h("smoothly-date-text", { key: '19e00959912e9a0ba57bb0989d86a54fbd06006d', ref: el => (this.dateTextElement = el), locale: this.locale, readonly: this.readonly, disabled: this.disabled, showLabel: this.showLabel, value: this.value, onSmoothlyDateTextHasText: e => (e.stopPropagation(), (this.hasText = e.detail)), onSmoothlyDateTextFocusChange: e => (e.stopPropagation(), (this.hasFocus = e.detail)), onSmoothlyDateHasPartialDate: e => { var _a; return (e.stopPropagation(), (_a = this.calendarElement) === null || _a === void 0 ? void 0 : _a.jumpTo(e.detail)); }, onSmoothlyDateTextChange: e => (e.stopPropagation(), this.onUserChangedValue(e)), onSmoothlyDateTextDone: e => { var _a; return (e.stopPropagation(), (this.open = false), (_a = this.dateTextElement) === null || _a === void 0 ? void 0 : _a.deselect()); } }), h("span", { key: '2f7b6396f29e43ff06f86749b20358fd9067def3', class: "smoothly-icons", ref: el => (this.iconsElement = el) }, h("smoothly-icon", { key: '384b7d43cebf3f16a8f14687acd424bcd790a55a', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), h("slot", { key: '445ed1618b342123b180cecc999a2899176095c6', name: "end" })), this.open && !this.readonly && (h("smoothly-calendar", { key: '6345ea59f7dc66a47dcb0b33b01f15b9a3c7720d', ref: el => (this.calendarElement = el), doubleInput: false, value: this.value, onSmoothlyDateSet: e => (e.stopPropagation(), this.onUserChangedValue(e)), max: this.max, min: this.min }, h("div", { key: '6a2d605946629fafeb1a951aa4ce923d5c3cca53', slot: "year-label" }, h("slot", { key: '7352785fb90f97fe59dcc2662e81c12ae3544e70', name: "year-label" })), h("div", { key: '9433f633d73a13a3638df8374cc807e7adfe11d0', slot: "month-label" }, h("slot", { key: '2f9176a79690a41028a1633e5bb6b4bd9c464722', name: "month-label" }))))));
     }
     static get is() { return "smoothly-input-date"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input/date/range/index.js CHANGED Viewed

@@ -123,15 +123,15 @@ export class SmoothlyInputDateRange {
         this.smoothlyInput.emit({ [this.name]: undefined });
     }
     render() {
-        return (h(Host, { key: '1f8b2d046cbb64b8df5343a945cb51563d721f27', tabindex: this.disabled ? undefined : 0, class: {
+        return (h(Host, { key: '4aafb51483d57234d6f42a6252a45078a5cc4054', tabindex: this.disabled ? undefined : 0, class: {
                 "has-value": !!(this.start || this.end),
                 "has-text": !!(this.startHasText || this.endHasText),
                 "floating-label": this.alwaysShowGuide,
-            } }, h("span", { key: 'abc0f86b086ba26c3b1d4951394d81da35f83e86', class: "smoothly-date-range-input-part", onClick: (e) => this.onClick(e) }, h("slot", { key: 'a06c2b9b096aca90e83f765b364dca7544ed99ca', name: "start" }), h("label", { key: '70d76e4a489a17cb028c4b8831d352171214d58f', class: "label float-on-focus" }, h("slot", { key: '929cd10cba08419fbfeb0e19e99d01ef52bfaf96' })), this.placeholder && h("span", { key: '8c91d08654b77a865869dca0633c04d1af54d57f', class: "smoothly-date-range-placeholder" }, this.placeholder), h("smoothly-date-text", { key: '5a37bda38fa94c90ee8e5440f085c9eac3b81648', ref: el => (this.startTextElement = el), class: "start-date-text", locale: this.locale, onSmoothlyDateTextHasText: e => (e.stopPropagation(), (this.startHasText = e.detail)), onSmoothlyDateTextFocusChange: e => (e.stopPropagation(), (this.hasFocus = e.detail)), onSmoothlyDateHasPartialDate: e => { var _a; return (e.stopPropagation(), (_a = this.calendarElement) === null || _a === void 0 ? void 0 : _a.jumpTo(e.detail)); }, onSmoothlyDateTextChange: e => (e.stopPropagation(), this.onSmoothlyDateTextChange(e, "start")), onSmoothlyDateTextNext: e => { var _a; return (e.stopPropagation(), (_a = this.endTextElement) === null || _a === void 0 ? void 0 : _a.select()); }, onSmoothlyDateTextDone: e => {
+            } }, h("span", { key: '5516903b15400ea4dd7dba463dd173ef48ca03df', class: "smoothly-date-range-input-part", onClick: (e) => this.onClick(e) }, h("slot", { key: '273d0fdad0534db6f46e3c37005ab0649edd8abc', name: "start" }), h("label", { key: '67fd396fd707428cf9413a5b8bd6501485874e64', class: "label float-on-focus" }, h("slot", { key: '67a092adcbb0abf829ffb68b48e2e37cc6dbc5ed' })), this.placeholder && h("span", { key: '54ed8804af377cdde573d7d148d62544adae5eb8', class: "smoothly-date-range-placeholder" }, this.placeholder), h("smoothly-date-text", { key: '3144566fd5983266e70637449965c0ca981962b8', ref: el => (this.startTextElement = el), class: "start-date-text", locale: this.locale, onSmoothlyDateTextHasText: e => (e.stopPropagation(), (this.startHasText = e.detail)), onSmoothlyDateTextFocusChange: e => (e.stopPropagation(), (this.hasFocus = e.detail)), onSmoothlyDateHasPartialDate: e => { var _a; return (e.stopPropagation(), (_a = this.calendarElement) === null || _a === void 0 ? void 0 : _a.jumpTo(e.detail)); }, onSmoothlyDateTextChange: e => (e.stopPropagation(), this.onSmoothlyDateTextChange(e, "start")), onSmoothlyDateTextNext: e => { var _a; return (e.stopPropagation(), (_a = this.endTextElement) === null || _a === void 0 ? void 0 : _a.select()); }, onSmoothlyDateTextDone: e => {
                 var _a, _b;
                 return (e.stopPropagation(),
                     this.end ? ((_a = this.startTextElement) === null || _a === void 0 ? void 0 : _a.deselect(), (this.open = false)) : (_b = this.endTextElement) === null || _b === void 0 ? void 0 : _b.select());
-            }, value: this.start, readonly: this.readonly, disabled: this.disabled, showLabel: this.showLabel }), h("span", { key: '694bb773d16025b187d059c8b0cc7b36f94956d5', class: "smoothly-date-range-separator" }, " \u2013 "), h("smoothly-date-text", { key: '830739f213b8c3a27619d7f29667483f4317b612', ref: el => (this.endTextElement = el), class: "end-date-text", locale: this.locale, onSmoothlyDateTextHasText: e => (e.stopPropagation(), (this.endHasText = e.detail)), onSmoothlyDateTextFocusChange: e => (e.stopPropagation(), (this.hasFocus = e.detail)), onSmoothlyDateHasPartialDate: e => { var _a; return (e.stopPropagation(), (_a = this.calendarElement) === null || _a === void 0 ? void 0 : _a.jumpTo(e.detail)); }, onSmoothlyDateTextChange: e => (e.stopPropagation(), this.onSmoothlyDateTextChange(e, "end")), onSmoothlyDateTextPrevious: e => { var _a; return (e.stopPropagation(), (_a = this.startTextElement) === null || _a === void 0 ? void 0 : _a.select("end")); }, onSmoothlyDateTextNext: e => e.stopPropagation(), onSmoothlyDateTextDone: e => { var _a; return (e.stopPropagation(), (_a = this.endTextElement) === null || _a === void 0 ? void 0 : _a.deselect(), (this.open = false)); }, value: this.end, readonly: this.readonly, disabled: this.disabled, showLabel: this.showLabel })), h("span", { key: '90767c1048bbcc816563496f3d3afbea4970e953', class: "smoothly-icons" }, h("smoothly-icon", { key: '9f6ffbfa8e626160be54d8e82f8538d5a1e75c5f', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), h("slot", { key: '83aef1b1b1c8726f0a7b8b939fcf1d54b07a8389', name: "end" })), this.open && (h("smoothly-calendar", { key: '395c5ba753121d7a0eb1c2d1e986cfad58e98232', ref: el => (this.calendarElement = el), doubleInput: true, onSmoothlyDateSet: e => e.stopPropagation(), onSmoothlyDateRangeSet: e => {
+            }, value: this.start, readonly: this.readonly, disabled: this.disabled, showLabel: this.showLabel }), h("span", { key: '80257b7865d284f87a6aafd9f53acead98612f09', class: "smoothly-date-range-separator" }, " \u2013 "), h("smoothly-date-text", { key: 'e6bb858a6a4ee6669ec02949f7e5dcd668187970', ref: el => (this.endTextElement = el), class: "end-date-text", locale: this.locale, onSmoothlyDateTextHasText: e => (e.stopPropagation(), (this.endHasText = e.detail)), onSmoothlyDateTextFocusChange: e => (e.stopPropagation(), (this.hasFocus = e.detail)), onSmoothlyDateHasPartialDate: e => { var _a; return (e.stopPropagation(), (_a = this.calendarElement) === null || _a === void 0 ? void 0 : _a.jumpTo(e.detail)); }, onSmoothlyDateTextChange: e => (e.stopPropagation(), this.onSmoothlyDateTextChange(e, "end")), onSmoothlyDateTextPrevious: e => { var _a; return (e.stopPropagation(), (_a = this.startTextElement) === null || _a === void 0 ? void 0 : _a.select("end")); }, onSmoothlyDateTextNext: e => e.stopPropagation(), onSmoothlyDateTextDone: e => { var _a; return (e.stopPropagation(), (_a = this.endTextElement) === null || _a === void 0 ? void 0 : _a.deselect(), (this.open = false)); }, value: this.end, readonly: this.readonly, disabled: this.disabled, showLabel: this.showLabel })), h("span", { key: '4ccdcf9160a7bb827309e5f5cd908095ba90a0bc', class: "smoothly-icons" }, h("smoothly-icon", { key: '7dbf49e194b48313c7b54eb1bc43d2660f7cf3dc', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), h("slot", { key: '63448fe06f310d74951d3ddbd8b8511d1df170b0', name: "end" })), this.open && (h("smoothly-calendar", { key: '1d334b289c960660269e869ec6e42544beaaf0d7', ref: el => (this.calendarElement = el), doubleInput: true, onSmoothlyDateSet: e => e.stopPropagation(), onSmoothlyDateRangeSet: e => {
                 e.stopPropagation();
                 this.open = false;
                 this.start = e.detail.start;

package/dist/collection/components/input/date/text/index.js CHANGED Viewed

@@ -182,7 +182,7 @@ export class SmoothlyInputDateRangeText {
         }
     }
     render() {
-        return (h(Host, { key: '29343df478fdb9a5805aef00432be4456d8e4d12', class: { "has-text": Object.values(this.parts).some(part => !!part) } }, DateFormat.Order.toArray(this.order).map((part, index) => {
+        return (h(Host, { key: '58630b82c91178b70eee75c26ad8b6c2927410cb', class: { "has-text": Object.values(this.parts).some(part => !!part) } }, DateFormat.Order.toArray(this.order).map((part, index) => {
             var _a;
             return (h("span", { onClick: () => !this.readonly && !this.disabled && this.setFocus(index) }, h("span", { class: {
                     "smoothly-date-text-part": true,

package/dist/collection/components/input/date/time/index.js CHANGED Viewed

@@ -97,30 +97,30 @@ export class SmoothlyInputDateTime {
         this.isDifferentFromInitial = false;
     }
     render() {
-        return (h(Host, { key: 'faf40611232f95c653ef583a7f0b7ed32ebb400d' }, h("smoothly-input", { key: 'e0761d639e8d0b3a4f305a05e70e5a6df241fd29', color: this.color, looks: this.looks == "transparent" ? this.looks : undefined, name: "date", onFocus: () => !this.readonly && !this.disabled && (this.open = !this.open), onClick: () => !this.readonly && !this.disabled && (this.open = !this.open), readonly: this.readonly, disabled: this.disabled, type: "date", value: this.date, showLabel: this.showLabel, onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
+        return (h(Host, { key: 'ad93ad9f51896e7b99f721d7a81808e092816c03' }, h("smoothly-input", { key: '0e212a092315fa9a0feaaf67f3c2127a6c5d76c2', color: this.color, looks: this.looks == "transparent" ? this.looks : undefined, name: "date", onFocus: () => !this.readonly && !this.disabled && (this.open = !this.open), onClick: () => !this.readonly && !this.disabled && (this.open = !this.open), readonly: this.readonly, disabled: this.disabled, type: "date", value: this.date, showLabel: this.showLabel, onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
                 e.stopPropagation();
                 this.date = e.detail.date;
             }, onSmoothlyUserInput: async (e) => {
                 e.stopPropagation();
                 this.smoothlyUserInput.emit({ name: this.name, value: await this.getValue() });
-            } }, h("slot", { key: '7fbe6ae1b6697d22ab4037bcf86ef6d27ce5f923' })), h("smoothly-input", { key: 'cd751c2a4dfe09b316772c07e126ad0c5b875eb4', name: "hour", type: "integer", max: 23, pad: 2, value: this.hour, readonly: this.readonly, disabled: this.disabled, placeholder: "hh", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
+            } }, h("slot", { key: '3365117b617114c1c961a34660585c2ddae7f93d' })), h("smoothly-input", { key: '91b0c6323b1451c1b40f23bcf2aab162eeb2bf4d', name: "hour", type: "integer", max: 23, pad: 2, value: this.hour, readonly: this.readonly, disabled: this.disabled, placeholder: "hh", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
                 e.stopPropagation();
                 this.hour = e.detail.hour;
             }, onSmoothlyUserInput: async (e) => {
                 e.stopPropagation();
                 this.smoothlyUserInput.emit({ name: this.name, value: await this.getValue() });
-            } }), h("span", { key: 'ff4cc79cf32d9cd9528010965e6bbb2c60026f57', class: "colon" }, ":"), h("smoothly-input", { key: 'd96351c5c25c042915f2ea78f94365648f620e35', name: "minute", type: "integer", max: 59, pad: 2, value: this.minute, readonly: this.readonly, disabled: this.disabled, placeholder: "mm", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
+            } }), h("span", { key: '30f3a9608f30b70ec0e999b1087f124a2c0f8f9a', class: "colon" }, ":"), h("smoothly-input", { key: 'd3dfb6f59c4bffd573187b513abbcc3f26621389', name: "minute", type: "integer", max: 59, pad: 2, value: this.minute, readonly: this.readonly, disabled: this.disabled, placeholder: "mm", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
                 e.stopPropagation();
                 this.minute = e.detail.minute;
             }, onSmoothlyUserInput: async (e) => {
                 e.stopPropagation();
                 this.smoothlyUserInput.emit({ name: this.name, value: await this.getValue() });
-            } }), h("span", { key: '258c62771f84b3816025a7831756d52ddc3e61a3', class: "icons" }, h("smoothly-icon", { key: 'f10cdb5bd42fe2a1bc8e3c9eb41cd488957bb0bf', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), h("slot", { key: '867ca6ecbe958d5f97e126fc4df23c6fcef6e1fa', name: "end" })), this.open && !this.readonly && (h("smoothly-calendar", { key: 'd1c1ea3e905b5e677883c273231794de21777fc0', doubleInput: false, value: this.value ? isoly.DateTime.getDate(this.value) : undefined, min: this.min ? isoly.DateTime.getDate(this.min) : undefined, max: this.max ? isoly.DateTime.getDate(this.max) : undefined, onSmoothlyDateSet: async (e) => {
+            } }), h("span", { key: 'a909976d14881c52ff1461afde62ee22acccbea0', class: "icons" }, h("smoothly-icon", { key: 'd200862fdf9b53b85d1deb9569cf4b9c93aee077', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), h("slot", { key: 'c5391f31a81c2b9ed019fb27e5aefb2e41a91d49', name: "end" })), this.open && !this.readonly && (h("smoothly-calendar", { key: 'ac41f035d3f92fd3116dfcf360f2e4d921a829b0', doubleInput: false, value: this.value ? isoly.DateTime.getDate(this.value) : undefined, min: this.min ? isoly.DateTime.getDate(this.min) : undefined, max: this.max ? isoly.DateTime.getDate(this.max) : undefined, onSmoothlyDateSet: async (e) => {
                 e.stopPropagation();
                 this.date = e.detail;
                 this.smoothlyUserInput.emit({ name: this.name, value: await this.getValue() });
                 this.open = false;
-            } }, h("div", { key: '0ab989467e67bc709d0c45285a7eba7743606171', slot: "year-label" }, h("slot", { key: 'ae14dc89cb7cfa3df3bd12ed531d9e4f71242c07', name: "year-label" })), h("div", { key: '9e226c95c5ae7ab3af1e09a93d290222827c5dab', slot: "month-label" }, h("slot", { key: 'c0f55782eece8e74881124284504a2ac9489ed63', name: "month-label" }))))));
+            } }, h("div", { key: '3a0ea948b27c084501a8a98c9ad31195077abd86', slot: "year-label" }, h("slot", { key: 'cc59da90159452014a6434827619eade272e75d3', name: "year-label" })), h("div", { key: 'a7bbff950447fab625edc43dd12814b24711d568', slot: "month-label" }, h("slot", { key: 'a5d595242c8424d5a6021e7306c219cc828dbfb1', name: "month-label" }))))));
     }
     static get is() { return "smoothly-input-date-time"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input/demo/date/index.js CHANGED Viewed

@@ -5,7 +5,7 @@ export class SmoothlyInputDateDemo {
         this.alwaysShowGuide = false;
     }
     render() {
-        return (h(Host, { key: '2eddf4f43fc88d4f0baee5472fb55f98be8464f2' }, h("div", { key: 'a505bd4d499e9fce35b50c88dbb3e3375fe7e36c' }, h("h2", { key: 'b79d4c949fec7c008314b3562ba56ddfe22a1202' }, "Date input"), h("p", { key: 'f76bb9f59b85781610474db18fe10891f1560330' }, "Different locales formatting the same date"), h("smoothly-button", { key: 'c8c39579e4ab97b4b455c88514b7b6d0b78ee781', color: "primary", onClick: () => (this.date = this.date ? isoly.Date.next(this.date) : isoly.Date.now()) }, "Set date"), h("smoothly-input-checkbox", { key: '9e921d7050071821148968680950fe00a0bdad8b', looks: "transparent", onSmoothlyUserInput: e => {
+        return (h(Host, { key: 'b0b29015752f46939700b57c62a07fa06ffe4e40' }, h("div", { key: '513e17083a0162befffa69473ddbdece8548e9ba' }, h("h2", { key: 'd9ac3875a4027fb083c7daad59d99fea4ce27ade' }, "Date input"), h("p", { key: '995523aa50c0634d265b3b9d91f5dac9a8502bf0' }, "Different locales formatting the same date"), h("smoothly-button", { key: '10a90fd4fe35c81b689d4c0cc547cc887b852669', color: "primary", onClick: () => (this.date = this.date ? isoly.Date.next(this.date) : isoly.Date.now()) }, "Set date"), h("smoothly-input-checkbox", { key: 'b7d9b9ab464d611493eb029a1819b1890da7e0c3', looks: "transparent", onSmoothlyUserInput: e => {
                 this.alwaysShowGuide = e.detail.value;
                 console.log(this.alwaysShowGuide);
             } }, "Always Show Guide")), ["en-US", "en-GB", "de-DE", "se-SE"].map(locale => (h(Fragment, null, h("smoothly-input-date", { locale: locale, name: locale, looks: "border", value: this.date, alwaysShowGuide: this.alwaysShowGuide }, locale, h("smoothly-input-clear", { slot: "end" })), h("smoothly-input-date-range", { locale: locale, name: locale + "-range", looks: "border", start: this.date, end: this.date ? isoly.Date.next(this.date) : undefined, alwaysShowGuide: this.alwaysShowGuide }, locale, " Range", h("smoothly-input-clear", { slot: "end" })))))));

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

@@ -7,14 +7,14 @@ export class SmoothlyInputDemo {
         this.numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
     }
     render() {
-        return (h(Host, { key: '0610dea0130909d255f6dcbf7f798521cb18fc4e' }, h("smoothly-input-demo-standard", { key: 'e74b371f701b9371972b5428efb0ea4edea9244c' }), h("smoothly-input-date-demo", { key: 'c989f6853579a9ba68c6f57e2e6381c121ff091c' }), h("smoothly-input-demo-user-input", { key: '67189969e7eeb85c53fa6485cc4bc1c6f8810d3c' }), h("smoothly-input-demo-radio", { key: 'd277353814df2808ab955df71df8dd79a14e3b09' }), h("div", { key: '69864f1761f23e2d9fe5003d1a28895195587f23', class: "inputs" }, h("h2", { key: '9e43ab4414d38f5e7d6ed559293a364700e4e3ff' }, "Calendar"), h("smoothly-input-date", { key: '3cc461eaf51348c11e76a541f4e89c7727d49006', name: "some-date" }, "Calendar"), h("smoothly-input-date-time", { key: '331225ff58737c6cd60986d47935cf906f143d02', name: "someDateTime", value: isoly.DateTime.now() }, "DateTime"), h("h2", { key: '7e7535017eb1d6a683df758a4d017dc7cb1fccc3' }, "Date Range"), h("smoothly-input-date-range", { key: 'fad6725321923c5821fe74add6cef73a560c2496', name: "testing", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-01", max: "2025-01-31" }), h("smoothly-input-date-range", { key: '21d5f9edc259b904554d64c234e8268184db9c78', name: "testing", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-10", max: "2024-12-30" }, h("smoothly-input-reset", { key: 'd08635584ffc2cf923f93304701d5ae0130dcd57', slot: "end", size: "icon" })), h("smoothly-input-date-range", { key: '46c5c5ca642f983a7d4956c83385ab25046044e7', looks: "grid", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-10", max: "2025-12-30", showLabel: false, style: {
+        return (h(Host, { key: 'ef33e129690f3cd0a771a1b12dcb8f9c79fa566e' }, h("smoothly-input-demo-standard", { key: '5e12871414915755af5fb0e896b2ae9cbaeec449' }), h("smoothly-input-date-demo", { key: 'cd9a7179d6d78b58c64a37329d170dafa3c4d4ee' }), h("smoothly-input-demo-user-input", { key: '1dc3897e7c1bb3de9b45084c880745abfadb568c' }), h("smoothly-input-demo-radio", { key: '3a6b7c1417ea8a91a62d4c911562175ba623c1e5' }), h("div", { key: 'd218e51f2785f7caed4318ea33aaab6dca63d05e', class: "inputs" }, h("h2", { key: '53ac6e802dd3e3581ad3dc2feb629537dbeaf9b6' }, "Calendar"), h("smoothly-input-date", { key: '25127e4d56c34404d0dc25d63b7cc96c5e8c3645', name: "some-date" }, "Calendar"), h("smoothly-input-date-time", { key: 'e3025c6634241fa1347c7b2c93a918288a2371d6', name: "someDateTime", value: isoly.DateTime.now() }, "DateTime"), h("h2", { key: '6db99859de7c13e9d6d40aa5c7cbdc25cddffd14' }, "Date Range"), h("smoothly-input-date-range", { key: 'c56da60bdb19ea3c0305d1881180845f848cb625', name: "testing", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-01", max: "2025-01-31" }), h("smoothly-input-date-range", { key: '556c9c8b45219b64f966252c9ea23b8a02bf78a2', name: "testing", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-10", max: "2024-12-30" }, h("smoothly-input-reset", { key: 'd6e08652074753d81334f6f26872f16a4ad27120', slot: "end", size: "icon" })), h("smoothly-input-date-range", { key: '65bffbaab83f117517cd37087c028d1ed2b4936c', looks: "grid", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-10", max: "2025-12-30", showLabel: false, style: {
                 "--smoothly-input-border-radius": "0.5rem",
-            } }, h("smoothly-input-clear", { key: '3465328594f446fbbe97cdb87adb806f057a4041', slot: "end", size: "icon" })), h("h2", { key: 'e2a08b76ba392d10beb4eb95d8363620f07b53e4' }, "Date"), h("smoothly-input-date", { key: 'fbc0b53f5e576341027a9d0199e0a369cab1ed15' }, "Date"), h("smoothly-input-date", { key: 'b5ead1c49120a42e63e310361c29d31eabbcff60', showLabel: false, value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), h("smoothly-input-date", { key: '18fab78a08e80b35d930d40be27c5f2863beaba1', value: "2021-10-28" }, "Date", h("smoothly-input-reset", { key: 'ab9470f9a44be6a115ff89db7c50f631362cecae', slot: "end", size: "icon" })), h("smoothly-input-date", { key: '61aa9be4f7193617ecc89d5250f9c97f30742c35', value: "2021-10-28" }, "Date", h("smoothly-input-clear", { key: '9ab5d2a554d2123360afdac3c266ac79c6035d36', slot: "end", size: "icon" })), h("h2", { key: 'ed8c37111142696858c0eac29661406ae2cd9f55' }, "Select"), h("div", { key: '9ae174d2d4a332de3ad770450464569378f05bdb', class: "select-div" }, h("smoothly-input-select", { key: '34f6a893981c3c8dc6703256a9f2c3089cf4ff25', name: "select-dessert", looks: "border" }, h("label", { key: '7198f30b4aa7cb91377cb72ef16cb7dca79d00ff', slot: "label" }, "Select with clear button"), h("smoothly-item", { key: 'b85cb7fb77fe50cd6a42d0a6c38020dcfb2166ed', value: "1" }, "Ice cream"), h("smoothly-item", { key: 'de464d05e6cdffe4b578e5708d1e9e33376a0521', value: "2" }, "Sponge cake"), h("smoothly-item", { key: '553b7ecd797f0e55def5b6c460440d8286755f4c', value: "3", disabled: true }, "Disabled Item"), h("smoothly-item", { key: '3b4349b0785cd4440611499c23f082961541a91a', value: "4" }, "Cookie"), h("smoothly-item", { key: 'a5638b6d6424c31cb1d26cecb42cfeb1004e7674', value: "5" }, "Croissant"), h("smoothly-item", { key: '015c157d486120f18de97fae45e36b9e0b0ef863', value: "6" }, "Chocolate fondue"), h("smoothly-input-clear", { key: 'b16c9fd651670b3808643e57043198550e3a1103', size: "icon", slot: "end" })), h("smoothly-input-select", { key: '277ad384d61f6a4ce7fb849d90a7e2437f105841', multiple: true, name: "select-dessert-multiple", looks: "border" }, h("label", { key: 'bcd5acb1903599e959821fc91f6aaf60ad0bb5b9', slot: "label" }, "Select multiple with reset button"), h("smoothly-item", { key: '3e5c1545a14684d153a252fba8060965f63b6c46', value: "ice cream" }, "Ice cream"), h("smoothly-item", { key: '155d20eda1c0ed2816a7bac67d54b2e55a7a101a', value: "sponge cake" }, "Sponge cake"), h("smoothly-item", { key: 'cdf81df5d54168f33c679918e7f3440f0f8d5da3', selected: true, value: "cookie" }, "Cookie"), h("smoothly-item", { key: 'ee8b1f2e292c76d0b5f1ea73501d56ed7c5c748c', value: "croissant" }, "Croissant"), h("smoothly-item", { key: 'ea635dbcfc236dec09da467db23e37b18fc8953a', selected: true, value: "chocolate fondue" }, "Chocolate fondue"), h("smoothly-input-reset", { key: 'de1bad5de86767304a5244812506166ac09ef395', size: "icon", slot: "end" })), h("smoothly-input-select", { key: 'a606780ffc3288ff2c3963c63d1e67922e27eb03', name: "spirit-animals", looks: "border", mutable: true }, h("label", { key: '12d7b79350e82d58eab979ae139ba1895e6d60e8', slot: "label" }, "Select or add new options"), h("smoothly-item", { key: 'b9c3dfe20a6df2409ef1e350bf6491284a583d5b', value: "manatee" }, "Manatee"), h("smoothly-item", { key: '609d4f74ac6f9b7b3de0d6cf8239e357e273be3f', selected: true, value: "cthulu" }, "Cthulu")), h("smoothly-input-select", { key: '02c55364f84130fbe531450518a9f14c01d093eb', name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { key: '838cb077ef888a9474f387f3e103d1fe5a7446bf', value: "folder", selected: true }, h("smoothly-icon", { key: 'b25142bf3ef747ac3b0efce4e5b0570da8fe3fdf', size: "small", name: "folder-outline" })), h("smoothly-item", { key: '230ece62e3958643281636ba4185118102394ce8', value: "camera" }, h("smoothly-icon", { key: '2388323ed7eb30ca002c1fdb0a5b3c39e11b5da2', size: "small", name: "camera-outline" }))), h("smoothly-input-select", { key: '39a9cf873e9f7d93b05de669efa66d38f2f23ab6', ordered: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { key: '9789169a41dfb9e3162112e23caffbfe5b6daeea', slot: "label" }, "Alphabet ordered select"), Array.from({ length: 26 })
+            } }, h("smoothly-input-clear", { key: 'e61e9737c489a68b612e38490fa4b2f95de72a6a', slot: "end", size: "icon" })), h("h2", { key: 'd7f0223de99a710561a28daf86ceb69d7aef1da1' }, "Date"), h("smoothly-input-date", { key: '2cf84ece02042c92ac3754379268a94ef536c91a' }, "Date"), h("smoothly-input-date", { key: 'b1b465843e3562c30e589af11004a09bf2b6157a', showLabel: false, value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), h("smoothly-input-date", { key: '5810635fbfd26dd8735f8abd2c2e58f30affd61c', value: "2021-10-28" }, "Date", h("smoothly-input-reset", { key: 'd63d51b77f52243dfa9f13fe2754e53919d21c06', slot: "end", size: "icon" })), h("smoothly-input-date", { key: '7815c1afc2b1d38d3263630d8ef8d5a4cfa0a096', value: "2021-10-28" }, "Date", h("smoothly-input-clear", { key: 'cf8b725f54894024063bb6735e17ed692195c994', slot: "end", size: "icon" })), h("h2", { key: 'db2776f12559673b653e4671f92c578471e65a7a' }, "Select"), h("div", { key: '64ef6bd07f27d07cf6ea6dd23ae434503fdcc740', class: "select-div" }, h("smoothly-input-select", { key: '0a0f832b86bdb2fc7aeb964d52f320a6d76cf40d', name: "select-dessert", looks: "border" }, h("label", { key: 'd95e443f3df2398ca64bd6bcd64d6cdd629d0a8d', slot: "label" }, "Select with clear button"), h("smoothly-item", { key: 'c081a219a330aac151711e87423b474037b79628', value: "1" }, "Ice cream"), h("smoothly-item", { key: 'c168ee280c6dea09c54d86ae72fe2c79e134d448', value: "2" }, "Sponge cake"), h("smoothly-item", { key: 'cfea0b38d63995c108f0277ca248647725d22a60', value: "3", disabled: true }, "Disabled Item"), h("smoothly-item", { key: 'b93622e1a391c980d0c0371a0918dfca7ae7b456', value: "4" }, "Cookie"), h("smoothly-item", { key: 'e8733a8a51b09cea7ee31e4017f58152b58f5827', value: "5" }, "Croissant"), h("smoothly-item", { key: '90731e217754cb6c096cc190fb8b0c56c2bac593', value: "6" }, "Chocolate fondue"), h("smoothly-input-clear", { key: '0129f30c20777f9a37fc19ee8051e377507c9368', size: "icon", slot: "end" })), h("smoothly-input-select", { key: '94d3b7ca28b5fe5f9c9a3c587d995c65c8be45ad', multiple: true, name: "select-dessert-multiple", looks: "border" }, h("label", { key: '2d935f7418f8db300bf20412c4dd15934da5c0d3', slot: "label" }, "Select multiple with reset button"), h("smoothly-item", { key: '3c2579bffcde279703cfc041b315560a6dcc098e', value: "ice cream" }, "Ice cream"), h("smoothly-item", { key: 'a49fcce300b665b0de07fe67b5ea798e2fa94626', value: "sponge cake" }, "Sponge cake"), h("smoothly-item", { key: '4678f38edab9f88113c056ff820df2bd07e2fe33', selected: true, value: "cookie" }, "Cookie"), h("smoothly-item", { key: 'fdcf2ecd485fe75a35ca96ed89352a343819b770', value: "croissant" }, "Croissant"), h("smoothly-item", { key: 'f5cafb0e4b020489c72db9cd2362936449826dbd', selected: true, value: "chocolate fondue" }, "Chocolate fondue"), h("smoothly-input-reset", { key: '8c49833f66cee2e2ebac320c67ee5452a77636f7', size: "icon", slot: "end" })), h("smoothly-input-select", { key: '146806189c90cecb94e0bc9a01c713695689a2bc', name: "spirit-animals", looks: "border", mutable: true }, h("label", { key: '56bc9c8ef474ce79b1af47086b65847877d6a03c', slot: "label" }, "Select or add new options"), h("smoothly-item", { key: 'b13d4158fadfb725ff6c1ca236f4724ba95936df', value: "manatee" }, "Manatee"), h("smoothly-item", { key: '85d95f128731e5fd3ec1c1f3df672d98ff3a199a', selected: true, value: "cthulu" }, "Cthulu")), h("smoothly-input-select", { key: '3bffa0bfbce0ab015208bdff0d648bf8f6d497bf', name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { key: '05d80d05561b9a716ea94d8e3fb3e3d5afc66c4c', value: "folder", selected: true }, h("smoothly-icon", { key: 'f86490ab381f59ed6fcdacb1d7441697fe645fd8', size: "small", name: "folder-outline" })), h("smoothly-item", { key: 'ec29517ce6ee5b7353bc20fc3c4365751815bfc6', value: "camera" }, h("smoothly-icon", { key: '75c27c69a18c0c37a6d989a2268ed9fa7ffb6daf', size: "small", name: "camera-outline" }))), h("smoothly-input-select", { key: '7ff7efc5b6f7a47da43fbd859a0c20cfb013c1c3', ordered: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { key: '3eb848081a594d164a7144ac8fe91719c11dd950', slot: "label" }, "Alphabet ordered select"), Array.from({ length: 26 })
             .map((_, i) => String.fromCharCode(i + 65))
-            .map(char => (h("smoothly-item", { value: char, selected: char == "H" }, char)))), h("smoothly-input-select", { key: 'f387c1c723590cc0af87d9a1fd57d459c1cc73f6', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { key: 'a5db731994586ad163c1077afe56a23f8645654a', slot: "label" }, "Month multiple select"), h("smoothly-item", { key: 'f1f9ee3d60d71883b4dd1b4aea488f2c22cde1d5', value: "1" }, "January"), h("smoothly-item", { key: 'a4432cbbf045646fdb7c5481edd5a4dc647e714e', value: "2" }, "February"), h("smoothly-item", { key: '5004b0e7acb2fca29c26f563933f66a141a87a21', value: "3" }, "March"), h("smoothly-item", { key: 'f9085fa0f5ac2bdc308a6e6eb5f76d060179adac', value: "4" }, "April"), h("smoothly-item", { key: '45c828dcd5f36bcb4624860f11ffe970ecfe3021', value: "5" }, "May"), h("smoothly-item", { key: '6dcc18a959124619842d5a7bd68b38b507ecbb80', value: "6" }, "June"), h("smoothly-item", { key: 'cd1b161f2f13dfe661b2d3363e3b20647c4ec3ca', value: "7" }, "July"), h("smoothly-item", { key: 'a5ae41fa7eed339f47f69aad3681eae4579e0efe', value: "8" }, "August"), h("smoothly-item", { key: '0016e486b487603da72487e53031739b85dc5318', value: "9" }, "September"), h("smoothly-item", { key: 'f1c6ed5593caa14259f74be4c8b3be20386e54cf', value: "10" }, "October"), h("smoothly-item", { key: 'f636538a7669567ff285e74a4c2de398546108ec', value: "11" }, "November"), h("smoothly-item", { key: '0a83028ce8f962d1b8d501041aad0a288a5829c5', value: "12" }, "December")), h("div", { key: 'e16c4ae44a81885c288ca235fc56e53d08b3253f', class: "select-div-row" }, h("smoothly-input-select", { key: 'a399d1152444fff42ea7b37ca41824a6ecf63d81', name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { key: 'af648a4bb5f15488197c34a752e282bd60cf79a3', value: "folder", selected: true }, h("smoothly-icon", { key: '16d8cdf17dbf67544d10c06d8f599dd30b87cb61', size: "small", name: "folder-outline" })), h("smoothly-item", { key: '39012cd32fa3bcecb1cc012160048d6817a94c5c', value: "camera" }, h("smoothly-icon", { key: 'a51166743064c08c1e9509fea17b60fde3f39556', size: "small", name: "camera-outline" })), h("smoothly-item", { key: '5b13f14afbbf764ad387c34db65f48335c8e5ff8', value: "boat" }, h("smoothly-icon", { key: '855facc3a62046b5b3b4ff29f0d5226d2aff1c55', size: "small", name: "boat-outline" }))), h("smoothly-input-select", { key: 'cc1e08d1120f45c8143ae6f28cbdbad769785e58', name: "select-number", clearable: false }, this.numbers.map(number => (h("smoothly-item", { value: "number", selected: number === 3 }, number)))), h("smoothly-input", { key: 'f12155b6e15ef36745915628c1ffc34a2c277bcd', name: "name", value: "Sten Qvist" }, "Name"))), h("h2", { key: '32733265cff202c69112ac37afbbe51e9ee16b13' }, "Duration"), h("smoothly-input", { key: '1c359b65c54c00a291d4ab2fca662ae0823545be', name: "duration", type: "duration", placeholder: "hh:mm", value: this.duration, onSmoothlyInput: e => (this.duration = e.detail.duration) }, "Duration"), h("smoothly-input", { key: 'b50a7ea8c22c140a5d1b81eb197caa88d79ff4cc', name: "duration", type: "duration", value: this.duration, placeholder: "-hh:mm", onSmoothlyInput: e => {
+            .map(char => (h("smoothly-item", { value: char, selected: char == "H" }, char)))), h("smoothly-input-select", { key: '36db6fdd61728c21488000fb0e588858726de95d', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { key: 'b3a93c5d2b02f5c5ca50e2041db860082432ba0f', slot: "label" }, "Month multiple select"), h("smoothly-item", { key: '5b3f4d4dda6ca6bac04d3d58e14b1bc6808a515d', value: "1" }, "January"), h("smoothly-item", { key: '2137f933a08f0bff7661ef7eedb566ef0613b2c0', value: "2" }, "February"), h("smoothly-item", { key: '2b60b2706c7a4e560dc61969fe8bff8bae2ee3b4', value: "3" }, "March"), h("smoothly-item", { key: '10f7a805783997893080eba61a3a293901273b7e', value: "4" }, "April"), h("smoothly-item", { key: 'fbb81488473ab771ba92650e7f6c0d1e385a5486', value: "5" }, "May"), h("smoothly-item", { key: 'bb9a696e13859137773158b219807224c9e456d5', value: "6" }, "June"), h("smoothly-item", { key: 'cb9cb347df1ab4551d11a6104fea41e53646f7fe', value: "7" }, "July"), h("smoothly-item", { key: 'f636d5874c7b810b59d9aea7454ee060093946ff', value: "8" }, "August"), h("smoothly-item", { key: 'd7882ebaf8e4b13216201b04201f19d0152c7997', value: "9" }, "September"), h("smoothly-item", { key: '30815b5d8ae477d52a6896083f58d5e913fc6ec9', value: "10" }, "October"), h("smoothly-item", { key: '70658c05936d61c7e4faf8ab265d5e7ae448774a', value: "11" }, "November"), h("smoothly-item", { key: 'c737ec283e42443c75334f925d7fab3df2527a4f', value: "12" }, "December")), h("div", { key: 'a149cf4a6ebc5828e095c10e9d6d57abbc43c359', class: "select-div-row" }, h("smoothly-input-select", { key: '0b32d71db9eb24afd885c46ea5f414be1e55133c', name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { key: '1c4fb8eeb730b8cfe6e4818ca16c565014a159a7', value: "folder", selected: true }, h("smoothly-icon", { key: '082d0bba96283c4bceb9f92c3e772bd3fd8b7011', size: "small", name: "folder-outline" })), h("smoothly-item", { key: 'ea4df02bbe52f26a1888b2f74ed587beb09890fe', value: "camera" }, h("smoothly-icon", { key: '166ec449cff9acf04d866ac4786ba9f30b2a3b42', size: "small", name: "camera-outline" })), h("smoothly-item", { key: '65aa76f7da4c5677b031fe45a5a86fca0a3d29ee', value: "boat" }, h("smoothly-icon", { key: '32d5688b2e74006e65131f11ee06890d8d52b5dd', size: "small", name: "boat-outline" }))), h("smoothly-input-select", { key: 'fccc2a0bad4e53a6fee2a5ceca85a59b91d70090', name: "select-number", clearable: false }, this.numbers.map(number => (h("smoothly-item", { value: "number", selected: number === 3 }, number)))), h("smoothly-input", { key: 'f8a91a3e5d64b5058bb91a50dde94d3eb128f7b5', name: "name", value: "Sten Qvist" }, "Name"))), h("h2", { key: '012a2aeb69da69b0ab9cff4b761500892f2c9aba' }, "Duration"), h("smoothly-input", { key: '55df5644b13c507f13d0efec711da4c3ae59dc95', name: "duration", type: "duration", placeholder: "hh:mm", value: this.duration, onSmoothlyInput: e => (this.duration = e.detail.duration) }, "Duration"), h("smoothly-input", { key: '4aa5fe278bfd9e37e3a625b67304cadb164bdd78', name: "duration", type: "duration", value: this.duration, placeholder: "-hh:mm", onSmoothlyInput: e => {
                 const duration = e.detail.duration;
                 this.duration = duration;
-            } }, "Duration"), h("h2", { key: '9bf848b3aeb2d99264b20270c030daf0a2e4538c' }, "Integer with Min/Max"), h("smoothly-input", { key: 'ef9a50d998c97e0ee62ce7521a47d9116596f594', name: "days", type: "integer", min: 0, max: 365 }, "Days per year (0-365)"), h("smoothly-input", { key: '3fc4295acaaabe23a12e6e9fd192371d137e2ebd', name: "hour", type: "integer", min: 0, max: 23 }, "Hours per day (0-23)"), h("smoothly-input", { key: 'e3e23c2ff05c311d1d62b86d9de0e333aaf38d16', name: "minute", type: "integer", min: 0, max: 59 }, "Minutes per hour (0-59)"), h("smoothly-input", { key: 'a92c74f2b45cc1df86589e62e97b87c8a7060351', name: "minute", type: "integer", min: 18, max: 120 }, "Age (18-120)"), h("h2", { key: '05151b343a921085863acb3cc263fb4775fc1326' }, "Invalid text with warning icon and tooltip"), h("smoothly-input", { key: '433ed8e5372266ef59393311c0dde265b79efb36', copyable: true, name: "alphanumeric", invalid: !/^[a-zA-Z0-9]+$/.test(this.alphanumeric), errorMessage: "Only alphanumeric allowed", value: this.alphanumeric, onSmoothlyInput: e => (this.alphanumeric = e.detail.alphanumeric) }, "Alphanumeric"), h("h2", { key: 'b5e460972d07d70a04099e129f4b11706ee6ea58' }, "Identifiers"), h("smoothly-input", { key: 'd059d3ecee65ec385e40d11bad328bde8be89246', type: "identifier-code" }, "Code"), h("smoothly-input", { key: '669bda44ce4115dc276335a9566cd433ccc992c4', type: "identifier-attribute" }, "Attribute"), h("smoothly-input", { key: 'a775035df9b192896c2ce7f1beebe6e904c1d42d', type: "identifier-snake" }, "Snake"), h("smoothly-input", { key: '359285e474ea704c36e73984c35e4ae245c47a00', type: "identifier-pascal" }, "Pascal"), h("smoothly-input", { key: 'f1a36423248b413cd20749f738fe12a8eeacae15', type: "identifier-camel" }, "Camel"), h("h2", { key: '2f6beac2f107dd3dc34a537e5b47f13d76206a07' }, "Input Alternatives"), h("smoothly-input", { key: '74cfbe969295b7cb9e02af90b126d9bdb60168cc', type: "text", name: "name.last" }, h("smoothly-icon", { key: '34e749e71f3d9976f2b71e57dd8644d53872aa35', name: "checkmark-circle", slot: "start" }), "First Name"), h("smoothly-input", { key: '61f44e09ab53cf0cf061007d3cf8426722e53312', type: "text", name: "name.first" }, "Last Name", h("smoothly-icon", { key: '55adb72f7485eb5f2235516c9d2839feae927ad7', name: "checkmark-circle", slot: "end" })), h("smoothly-input", { key: '642a573bebe0e805fd7d178dfc8befe7e77bba15', type: "text", name: "name.first", placeholder: "Smith" }, "Last Name", h("smoothly-icon", { key: '5bcfe9a74e7ec780fee1764933bd37f82b36495d', name: "checkmark-circle", slot: "end" })), h("smoothly-input", { key: 'cd5b1bbd73247cfb21b6ff99a56c0989ec7f3239', placeholder: "test" }), h("smoothly-input-submit", { key: '02c46969366444af0882851f2f3a0cd80f1b61c3', slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }), h("h4", { key: '3bc94eda5050b71ec193fda5600d76b5341b71d5' }, "Smoothly checkboxes"), h("div", { key: '165dd5a0d8e539c3d9fdbebf49ded093589acea7', class: "checkbox-group" }, h("smoothly-input-checkbox", { key: '17c781cdca9adf265d7418ca27ace984f0b70499', disabled: true, name: "first-checkbox" }, h("smoothly-icon", { key: '413a357d61374d72ae7be41bca5a7360b105e9e0', name: "checkmark-circle", slot: "start", size: "tiny" }), "First"), h("smoothly-input-checkbox", { key: '81ad9a572cb4e01b86ca1a189d4ce027c81d588b', name: "second-checkbox", checked: true }, h("smoothly-icon", { key: 'a34d9d7860461de0a508e8f36ab3e89627475777', name: "checkmark-circle", slot: "start", size: "tiny" }), "second", h("smoothly-input-clear", { key: 'fc64656864d9c68ef8f8ee42868af8f6d27ff217', size: "icon", slot: "end" })), h("smoothly-input-checkbox", { key: '8d1461bc9cc61eb79488162501232355e27bb992', name: "third-checkbox" }, "3rd")), h("h4", { key: '0eca64c7ae21e4f915e7f146d36662983f5c3759' }, "Smoothly Radio Buttons"), h("smoothly-input-radio", { key: '7677ce8ca260453a84a650fcced18a6592acc6a7', clearable: true, name: "radioFirstInput" }, h("smoothly-icon", { key: 'fd28ffad9dc1a32efb02131873f238c54fcb63e2', name: "checkmark-circle", slot: "start" }), h("label", { key: '63d92632a2ef4832fd863f55991480e1ec58fbae', slot: "label" }, "Clearable"), h("smoothly-input-radio-item", { key: 'a3e81d19c74fc5de2d25e44afb686793807025d5', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '5a4118fd0fb1b24e7a3e957c6186a94caf6c3160', selected: true, value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: 'beb9d9bfec1ebd2bd268b3c94fde2f23ee77b31b', value: "third" }, "Label 3"), h("smoothly-input-clear", { key: '91ff12f5c8d3911b662a4774e3d8887742de6b42', size: "icon", slot: "end" })), h("smoothly-input-radio", { key: '5e708295015296538d73936026d36e5badc6f805', name: "radioSecondInput" }, h("label", { key: '8ffb6b2f623f8e16a19d6b9d83b93b28d9fe2637', slot: "label" }, "Not clearable"), h("smoothly-input-radio-item", { key: 'a5cf624fceafa16030eab1e9050cd3cac2c985f1', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '66ab2a39eb130a221dea6cc77beecb0c221cecf5', value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '44792e09a3cfff26ec11c364e842db24f1eb10f2', value: "third" }, "Label 3"), h("smoothly-input-radio-item", { key: '78b2689f9c52960b2901431b22c7f7faec8605ae', value: "fourth" }, "Label 4"), h("smoothly-input-radio-item", { key: 'fb6757b00011d410ffcf1cad4dcdfe1c586ca24a', value: "fifth" }, "Label 5"), h("smoothly-input-radio-item", { key: 'dcd365bfd3792cab31ede99aa43edf5d41d8af9e', value: "sixth" }, "Label 6")), h("smoothly-input-range-demo", { key: 'c231fb7b9c6d28546b4d13c87ef3a900b33191ca' }), h("smoothly-input-color-demo", { key: '540d7e3d4ec89f99ec6c67d725468e050ec0a183' }), h("smoothly-input-price-demo", { key: 'eb8164f02728a0ee68e10ecb949c6b7f45d2fff2' }), h("smoothly-back-to-top", { key: '98cd43c5de35cfeea70b77434dac7907648c1b6e' }))));
+            } }, "Duration"), h("h2", { key: 'bb855c65c4b59aef87c9d4d18ac6db6b6d21bdec' }, "Integer with Min/Max"), h("smoothly-input", { key: '1a5e0092eb5330cc384aafce47e1438abca4a590', name: "days", type: "integer", min: 0, max: 365 }, "Days per year (0-365)"), h("smoothly-input", { key: '359faaba1e62172b0224c8d8ec58e49cb5a81f09', name: "hour", type: "integer", min: 0, max: 23 }, "Hours per day (0-23)"), h("smoothly-input", { key: '6ce0655a6b0134ce4175d65f80792287e48eefbe', name: "minute", type: "integer", min: 0, max: 59 }, "Minutes per hour (0-59)"), h("smoothly-input", { key: '3ce841cda01cbb2c4f346009648faa281831a4b2', name: "minute", type: "integer", min: 18, max: 120 }, "Age (18-120)"), h("h2", { key: 'e63ebb0b5996cbf653c6b6c969df48d635e28c30' }, "Invalid text with warning icon and tooltip"), h("smoothly-input", { key: '62873bd1d9eadab148e0502f44fdbc779aa5a789', copyable: true, name: "alphanumeric", invalid: !/^[a-zA-Z0-9]+$/.test(this.alphanumeric), errorMessage: "Only alphanumeric allowed", value: this.alphanumeric, onSmoothlyInput: e => (this.alphanumeric = e.detail.alphanumeric) }, "Alphanumeric"), h("h2", { key: '04dffd24a3af57da6ae369a8fbe9372893e6e380' }, "Identifiers"), h("smoothly-input", { key: '3d18b596880f98b84a07742cb9778d0095719294', type: "identifier-code" }, "Code"), h("smoothly-input", { key: '190651f4f4263eaacd8b80f90f4074fef28da183', type: "identifier-attribute" }, "Attribute"), h("smoothly-input", { key: '3a8802a9a173f518f975717cbe23cd1150316fc5', type: "identifier-snake" }, "Snake"), h("smoothly-input", { key: '00ec5419cd67a7217d23f95513f451f2c8e98f8e', type: "identifier-pascal" }, "Pascal"), h("smoothly-input", { key: '93eac4cce148e22640908d0d2f7c19a04b66d3f9', type: "identifier-camel" }, "Camel"), h("h2", { key: '98b93a5cb9daf216199adb5fa089ddd84bc96c61' }, "Input Alternatives"), h("smoothly-input", { key: 'a031c081e8531bad8400469ae449757958d7324a', type: "text", name: "name.last" }, h("smoothly-icon", { key: 'bf00331aeef0f1046c5505911d7db6ba845e636c', name: "checkmark-circle", slot: "start" }), "First Name"), h("smoothly-input", { key: '7824cf3b501d802ff40e4a750dd46defa9cac8b6', type: "text", name: "name.first" }, "Last Name", h("smoothly-icon", { key: '497b0417f5e7b0714753b0e5d78a78ab18130007', name: "checkmark-circle", slot: "end" })), h("smoothly-input", { key: 'ba93dadda8140d398c1d350f98c53d2a08c440db', type: "text", name: "name.first", placeholder: "Smith" }, "Last Name", h("smoothly-icon", { key: '28e8478b908bb51c6c5949e986c69930d1b10cb5', name: "checkmark-circle", slot: "end" })), h("smoothly-input", { key: 'fcb8531d6fe4129585e9a6d6e641022f2f14cb94', placeholder: "test" }), h("smoothly-input-submit", { key: '97a4d319d250ecd00ede7a5beb2c06b077e8e82c', slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }), h("h4", { key: '50579aad1a91b0c728a127076a37be38273b3635' }, "Smoothly checkboxes"), h("div", { key: 'ceee0a83b7626132ac6323dfd894d8ece7ea2f69', class: "checkbox-group" }, h("smoothly-input-checkbox", { key: '0eab1d5ac670458ab57af847c9996fcf874fd985', disabled: true, name: "first-checkbox" }, h("smoothly-icon", { key: 'aa4259b0bc0193a0e31b2bdc2f9550d1e7a9cd66', name: "checkmark-circle", slot: "start", size: "tiny" }), "First"), h("smoothly-input-checkbox", { key: '38fe8ffc98f95b0a81aba7dadb0a46f876ec09f4', name: "second-checkbox", checked: true }, h("smoothly-icon", { key: '40b2451d7fb2f705251abfb2158bc91a31ae9d3d', name: "checkmark-circle", slot: "start", size: "tiny" }), "second", h("smoothly-input-clear", { key: '34675173c8447131c978ca934fdde0d8764f44a8', size: "icon", slot: "end" })), h("smoothly-input-checkbox", { key: '42c6dd2f0fd6bb72d8ce31158f0451c5f500fe2b', name: "third-checkbox" }, "3rd")), h("h4", { key: '94ddf8048c28f947c3d20a2440c49e9340448c58' }, "Smoothly Radio Buttons"), h("smoothly-input-radio", { key: '0e308b17b5783bb23ce817cb30fbb9237a1b5b65', clearable: true, name: "radioFirstInput" }, h("smoothly-icon", { key: '61ab423d103c3f04fbaae7d02d0a1685d576fcfe', name: "checkmark-circle", slot: "start" }), h("label", { key: 'f75b6164630e97ad5f1174c08afe841e7321fe28', slot: "label" }, "Clearable"), h("smoothly-input-radio-item", { key: 'fd4284b27663aed055dce8671b46881789ba7dfb', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '9554d37989867953cefb248a039d1c6217ea0c4f', selected: true, value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '7643fa634aa9693163de7926468ea47ea99d232f', value: "third" }, "Label 3"), h("smoothly-input-clear", { key: 'ef750494dee99f5bf962f93f143a80a540834f20', size: "icon", slot: "end" })), h("smoothly-input-radio", { key: '3cf94704be4ce872a79a97abb4dc1828ade9ad71', name: "radioSecondInput" }, h("label", { key: 'd3feeed0e6debeaba6e95eec7c6effa4e3aa0484', slot: "label" }, "Not clearable"), h("smoothly-input-radio-item", { key: 'ed5bc06f71277cc4ad5e644d4b07c42c80dd1027', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '944215e958076b552f4ee8e5728897f63e88657c', value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '273705d445c5b1c1c01f6cea30bf8ad4036f932a', value: "third" }, "Label 3"), h("smoothly-input-radio-item", { key: 'c16dee456ac64f1aa945dcf6934ff6734c63e597', value: "fourth" }, "Label 4"), h("smoothly-input-radio-item", { key: 'd9795190e66042dedd027a4780900e2a32548ebc', value: "fifth" }, "Label 5"), h("smoothly-input-radio-item", { key: '985a353d4d42885a3597807d9b3a1d6fe2692520', value: "sixth" }, "Label 6")), h("smoothly-input-range-demo", { key: '011666bd072c688123437302f21ef556b9bc45cf' }), h("smoothly-input-color-demo", { key: 'a7e2fedb5277f19eee2c670bf88c1089ead1eb92' }), h("smoothly-input-price-demo", { key: '3e2f3d6d9e0e368ad4b8c7f3294bbc8cb19d3358' }), h("smoothly-back-to-top", { key: 'c2ecc189b026a4eae72d521e4cdffcfbd58ddbd9' }))));
     }
     static get is() { return "smoothly-input-demo"; }
     static get encapsulation() { return "scoped"; }

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

@@ -6,7 +6,7 @@ export class SmoothlyInputPriceDemo {
         this.currency = "USD";
     }
     render() {
-        return (h(Host, { key: '2d35ede0ba48999e163c9b401e822a703c049639' }, h("h2", { key: '6e3c78bd7a51616418555e74379ed81f4351688a' }, "State demo on smoothly-input"), h("p", { key: 'd43ad6219d21d065dc62197872e4cb689fececb5' }, "This demo/test the internal state of the smoothly-input component."), h("p", { key: 'e2a250b7bfb6433bc61fa3d740df11cae0713f85' }, "The currency of the price should update when switching between the currencies."), h("smoothly-input-radio", { key: '4d111e1bd9fbc0dcc57d3a842cfd0756a4807991', 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: '4c81a6bf8c3d854f3443942a6c1fb64db9b67b54', type: "price", currency: this.currency }, "price")));
+        return (h(Host, { key: 'c467c7cb0bc71a80d80b0249bbdaf6b6be48af4b' }, h("h2", { key: '216b76ae5cb923903331b846f0897471ae96bd87' }, "State demo on smoothly-input"), h("p", { key: '50522fbe29c228cf83f1450dbcb32e96d37b2587' }, "This demo/test the internal state of the smoothly-input component."), h("p", { key: '5393c97d661ad1dd1fe8bbac11a2f731ad7fea77' }, "The currency of the price should update when switching between the currencies."), h("smoothly-input-radio", { key: 'f782f50671c0b67344238121e6d742df328672bc', 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: '18a4f7dbfc952fcfa6db9188f8ad98c0c7f98731', 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/radio/index.js CHANGED Viewed

@@ -4,7 +4,7 @@ export class SmoothlyInputDemoRadio {
         console.log("selected", this.selected);
     }
     render() {
-        return (h(Host, { key: '040a57805b385a247d202b5e955a7f8eba616010' }, h("h2", { key: 'f09dbab032e5a1236b6917adf732333decd4f304' }, "radio input - column direction"), h("smoothly-input-radio", { key: 'b433eda6893f6ace20301795321958f684f47d57', name: "radio", direction: "column", onSmoothlyInput: e => (this.selected = e.detail.radio) }, h("smoothly-input-radio-item", { key: '2d9b7a2edea9639f1edebc73c8caca090765ce61', value: "1" }, h("span", { key: 'e42fdc99169da6f957f0f7d701f07e28ec3b6f75' }, "Option 1"), h("span", { key: 'ffdf79cbc7f98435a01a3a1a6c30c307741a566c', slot: "detail" }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")), h("smoothly-input-radio-item", { key: '0d9d95f1375bca503b1aade350a87119bb329c09', value: "2", selected: true }, h("span", { key: 'dc6d2e6888deb8bf32a626badc8a01d1daeb960d' }, "Option 2"), h("div", { key: '5ab436788acba5bcf290faf1551513a1f1b493b6', slot: "detail" }, h("smoothly-tabs", { key: '097716e9e682a11b5eff9880e94c036a01344de4' }, h("smoothly-tab", { key: '4b4117fbeb2aec641c279690438452f1e0ff15d6', label: "Dog", name: "dog", open: true }, "\uD83D\uDC15"), h("smoothly-tab", { key: '4cb637cfdb67a7721dc13348cfe830595d47027b', label: "Cat", name: "cat" }, "\uD83D\uDC08"), h("smoothly-tab", { key: '1c4873e9b744831a602192bb520236b440d8b547', label: "Rat", name: "rat" }, "\uD83D\uDC00")))))));
+        return (h(Host, { key: '926c46d5493184b5562db849fe49f8bc69467635' }, h("h2", { key: '482f5b5dad79420a7d17fd32f8ca364fff3fea40' }, "radio input - column direction"), h("smoothly-input-radio", { key: '56b8f69f400852f3476747d3cfca4e208659a55a', name: "radio", direction: "column", onSmoothlyInput: e => (this.selected = e.detail.radio) }, h("smoothly-input-radio-item", { key: 'f8efa9578d1cd57ed8a1c39f99d1ceb61dc15c0a', value: "1" }, h("span", { key: 'e8a9613c4be5a9a5f22e27376e2a5c3dc9432e9e' }, "Option 1"), h("span", { key: '59f7cb9ed2fb5ca96e16af28567e6ac29c920ee7', slot: "detail" }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")), h("smoothly-input-radio-item", { key: '6c4733d75808282a051c25ccafdbffae1efec8b4', value: "2", selected: true }, h("span", { key: '135b8ad7de02530fb2ec7b1748c706ed7ad6a275' }, "Option 2"), h("div", { key: '8d8beb1041e44e46afe0423540b385ad7aa0a0d1', slot: "detail" }, h("smoothly-tabs", { key: '9295b932c4f29d8672003b063930beb56075662c' }, h("smoothly-tab", { key: '970586efae1aa46ddeb1c6ef203b89682251d77f', label: "Dog", name: "dog", open: true }, "\uD83D\uDC15"), h("smoothly-tab", { key: '8faade213577e3d7cd4481f8c09ca80210f8312b', label: "Cat", name: "cat" }, "\uD83D\uDC08"), h("smoothly-tab", { key: '00c1e6c7f8fa0e3d2ee17f20ac212463f515c7a3', label: "Rat", name: "rat" }, "\uD83D\uDC00")))))));
     }
     static get is() { return "smoothly-input-demo-radio"; }
     static get encapsulation() { return "scoped"; }

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

@@ -20,7 +20,7 @@ export class SmoothlyInputDemoStandard {
         });
     }
     render() {
-        return (h(Host, { key: 'd2a4b3a8e5675b4fe394f551166318902c09ea84' }, h("div", { key: '67b40a89a1cbf17d511c56d966a9173e02a9c92e', class: "description" }, h("h2", { key: 'fdd28a17423a0da06745fc2aad06e1acbde54be4' }, "Input Standard"), h("p", { key: 'e9e84428aa2ebe4ea0b1d04410629ed85de1d329' }, "Height of input should be ", h("code", { key: 'faccb606910cbe8418c176efd45ff05eafd0ffc8' }, "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: 'f8770ba1128622c8b40be48cd26214ed162035e3', looks: "grid", onSmoothlyFormInput: (e) => (this.options = e.detail) }, h("smoothly-input-select", { key: '82ce7ab02f341b560e6347164a19c9273580ed18', name: "color" }, h("span", { key: '4062538c8b4b25d9a1cc1f625df0313383990193', slot: "label" }, "Color"), Color.values.map(c => (h("smoothly-item", { value: c }, h("span", { color: c }, c)))), h("smoothly-input-clear", { key: '659e785d9f5e4043fcf15dc457dde4dc48676215', slot: "end" })), h("smoothly-input-select", { key: '656b68d41b449cde70e4d86b252dc70d994f63ce', name: "looks" }, h("span", { key: '39ef79d28d1dbec7a678b93fa031615457560351', slot: "label" }, "Looks"), Looks.values.map(l => (h("smoothly-item", { value: l }, l)))), h("smoothly-input-range", { key: '3ae946ee3c4cdcf5b698b0456499c4807e53b257', label: "Border Radius (rem)", name: "borderRadius", min: 0, max: 2, step: 0.25 }), h("smoothly-input-checkbox", { key: 'f73361b452096abbda4ebc6908371c397c0a9fd4', name: "readonly" }, "Readonly"), h("smoothly-input-checkbox", { key: '7a4762f9122be37ce57099515e0d9fac7c18df94', name: "disabled" }, "Disabled"), h("smoothly-input-checkbox", { key: '0ac401e2b9e2525dfc899eda4957a61b99947758', name: "invalid" }, "Invalid"), h("smoothly-input", { key: '2ba7f175d8aeef4301598f3c3da5d436a17c45c7', name: "errorMessage", value: "This is not a valid value" }, "Error Message"), h("smoothly-input-checkbox", { key: '5844e0ab1cc53ecd0691d585fa4461f89c9994bc', name: "showLabel", checked: true }, "Show Label"), h("smoothly-input", { key: '6d46add6231e87d95dd8aea7bd91181c47a56490', name: "placeholder" }, "Placeholder"), h("smoothly-input-checkbox", { key: '43af9a815da45bc2ce0e54e8442e3a8ab1bc534c', name: "alwaysShowGuide" }, "Always Show Guide (for date inputs)"))), h("div", { key: 'cf6750528c66ee0c0b9e97478de77514cbd39045', class: "input-wrapper", style: { "--smoothly-input-border-radius": `${this.options.borderRadius}rem` } }, h("div", { key: '4fbc0ba2b6b142f6c4ac8379157b2953d88cb062', class: "width" }, "width: 100%"), h("div", { key: '7fb5a3a68f6ed4d14bcab9758a8de0a95de7e80c', class: "left-padding" }, "padding-left: 0.5rem"), h("smoothly-input", { key: '3d379565ac3335e2ef39e7d616b082fd5247619e', name: "text", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, showLabel: this.options.showLabel, placeholder: this.options.placeholder }, this.options.showLabel && h("span", { key: '7d37fa391bb86cf43fe84db4826d8394c04d8af9' }, "Text"), h("smoothly-input-clear", { key: '5c5b48cd36f13a3b50fc49809edb17148993a004', slot: "end" })), h("div", { key: 'c666bcf200205fbe3d4e045ee69530b217d4845d', class: "height" }), h("smoothly-input-select", { key: '9a2bb30a995830fecbc0dc7f9df2895470ac8e3b', name: "month", color: this.options.color, looks: this.options.looks, menuHeight: "6.7items", readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, placeholder: this.options.placeholder }, this.options.showLabel && h("label", { key: 'd91f28c2c80c6b95703b9476c8d07b64387f989a', slot: "label" }, "Select"), h("smoothly-item", { key: '61aeaf05ac730b30d7fb29b749dcf6ba59932c9c', value: "1" }, "January"), h("smoothly-item", { key: '131052c2a6ad24d5c93cda5352dd16873e81fc81', value: "2" }, "February"), h("smoothly-item", { key: '599a8b88c0abd24346856c8c653c1adc69d432e0', value: "3" }, "March"), h("smoothly-item", { key: 'e8933cb5d5af0fbb4d898a919a1d0ccc26584c11', value: "4" }, "April"), h("smoothly-item", { key: 'eb7b7c07dd9fcb31eba2b5a8da79da32e14f2c67', value: "5" }, "May"), h("smoothly-item", { key: '48e70f3d930689aed016ac28241e6f8d253f61db', value: "6" }, "June"), h("smoothly-item", { key: '738b7ad9d5286f6afc8ad033d9cbb9e066c4c861', value: "7" }, "July"), h("smoothly-item", { key: 'aad0e64de6bf35b315fb3472c8cad86e3fb195d9', value: "8" }, "August"), h("smoothly-item", { key: '81c533fd3eeaa48ae7917f6064a17724b101b650', value: "9" }, "September"), h("smoothly-item", { key: '69f567c427f80cee633f72ac4dd06a4d4b4a27c7', value: "10" }, "October"), h("smoothly-item", { key: '0d87e5fa94a04a60b527d7a5f1670b1788bd4339', value: "11" }, "November"), h("smoothly-item", { key: '34b1425da536971ffde20fbab5b96c9d23f71fe3', value: "12" }, "December"), h("smoothly-input-clear", { key: 'd16aad09e1f53274a0c6d23c071f2abe1157ce4f', slot: "end" })), h("div", { key: '51931a5ed8ec83b8937cd7899a303569cf8bf7cd', class: "height" }), h("smoothly-input-checkbox", { key: '20d5a02ab8d8f1f709b030a0258598de61250555', name: "checkbox", checked: true, color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled }, "Check", h("smoothly-input-reset", { key: 'd36312b0bb0393568cf05e51eea4cfa057dce607', slot: "end" })), h("div", { key: 'c1353494563098fc08fe2c93cceeb80d56a1aa51', class: "height" }), h("smoothly-input-radio", { key: '84976dd68dfe5534f28c02395d2476593bcb3bcd', name: "radio", clearable: true, color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, showLabel: this.options.showLabel }, this.options.showLabel && h("label", { key: 'fd87d0cfc047bcaf959908191d798ea774daca25', slot: "label" }, "Radio"), h("smoothly-input-radio-item", { key: '4029068fb2fea98f2b5c19ec87e8dea13cf22365', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '1ab27866d3db524f52da4f76a3abb5eff1deeed3', selected: true, value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '9415dd464250d9af68a54de51a9e6b15234f8faf', value: "third" }, "Label 3"), h("smoothly-input-clear", { key: '8ea8291c65ca421b0044fe3e0da4127f9fac0c40', slot: "end" })), h("div", { key: 'fa351e941ec780e05a037c2c1948dabd8ef371e8', class: "height" }), h("smoothly-input-file", { key: 'b45c3bf3c7b5e9e8408a6cecacdda30c7ce392df', name: "file", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, showLabel: this.options.showLabel, placeholder: this.options.placeholder }, this.options.showLabel && h("span", { key: '7e81668b6bf2a3f72238d18d02c21f19bf6c2756', slot: "label" }, "File"), h("smoothly-input-clear", { key: '4ead6310cb554351b45699cbbc6d84804d26611b', slot: "end" })), h("div", { key: '73cd3845233377057ff16a18b9ad85eb4e4be30f', class: "height" }), h("smoothly-input-range", { key: 'ec0f42a5ee5fddd52fb5c0d283f9add183e429fd', name: "range", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, label: this.options.showLabel ? "Range" : undefined }, h("smoothly-input-clear", { key: '49536b00574ad5e0cba72b9a8fdeee599435a886', slot: "end" })), h("div", { key: 'cc112e755aeb5724b6e4bc511ed1b4e32b394d08', class: "height" }), h("smoothly-input-color", { key: 'dbd6daa2196f6ba316721ed338c0638d6c713e00', name: "color", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '04197c11337298f86531d7ba52d67df221619051' }, "Color"), h("smoothly-input-clear", { key: '6489a29a796e8e443efdf27574df27e4e24111ee', slot: "end" })), h("div", { key: 'e48defb9f45eaa2f935b0108cf3ec6e331d4ecb2', class: "height" }), h("smoothly-input-date", { key: '0a5c51ecc51013f9572ed8cd8ef38f6d92bd4f5b', name: "date", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, showLabel: this.options.showLabel, placeholder: this.options.placeholder, alwaysShowGuide: this.options.alwaysShowGuide }, this.options.showLabel && h("span", { key: '21f21c543ff1df34c50333fba2d1ca8377ea4e37' }, "Date"), h("smoothly-input-clear", { key: 'f8226e817b97c90070b649935ac70d6ba11f7b30', slot: "end" })), h("div", { key: '8920789228e2911822a6b822d1c8c37537a225e4', class: "height" }), h("smoothly-input-date-time", { key: '2e58e0e5f6370f7a4d0dd7f17c56718038167e6a', name: "dateTime", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, showLabel: this.options.showLabel }, "DateTime", h("smoothly-input-clear", { key: '9ebc24b5b639628fd5f3d11a72500bcd6ae9ab0f', slot: "end" })), h("div", { key: 'dddb389df78c212ec451422436e3f0468f523065', class: "height" }), h("smoothly-input-date-range", { key: '76b7832bcf134165961c00e610180ee37b74968d', name: "dateRange", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, placeholder: this.options.placeholder, alwaysShowGuide: this.options.alwaysShowGuide, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '023a98551ba8d1b848665506fdad5282338a2d2e' }, "Date Range"), h("smoothly-input-clear", { key: '078a1ca386a3f814286b35fc0579573b8e4d64c3', slot: "end" })), h("div", { key: '32733c0b81a14c8a982c1607d5635d807894b2ae', class: "height" }))));
+        return (h(Host, { key: '2e355c9aa093b8466d23357c9aae6d88011170be' }, h("div", { key: 'b212cbda84e5965666cce503713c85baaa045d32', class: "description" }, h("h2", { key: '21f4edf40038c44f1b745a0f0ae5c15a4d909ee6' }, "Input Standard"), h("p", { key: '3f4cf3c1e07effe5cb728f54311cf92f438eecf5' }, "Height of input should be ", h("code", { key: 'e5c546b13ce7c73522216a1509e50022c786a36a' }, "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: '6c3be1205cf4699ae45248278c21a217f5d35e9c', looks: "grid", onSmoothlyFormInput: (e) => (this.options = e.detail) }, h("smoothly-input-select", { key: 'c76494d9a20e705a7a9350f621104aec46b0e857', name: "color" }, h("span", { key: 'c1ccb2f1c17b46e976fadd5331f07c4d7a699791', slot: "label" }, "Color"), Color.values.map(c => (h("smoothly-item", { value: c }, h("span", { color: c }, c)))), h("smoothly-input-clear", { key: 'dbaa782144733cdcbec4d5257e21b0a4f170e5e5', slot: "end" })), h("smoothly-input-select", { key: '28b28e354ac6fc5637ecf14acccfe30bfef11ff6', name: "looks" }, h("span", { key: 'f1452804684f0a76d78542a9cb64928a478f03ec', slot: "label" }, "Looks"), Looks.values.map(l => (h("smoothly-item", { value: l }, l)))), h("smoothly-input-range", { key: '3ca928155a582e8b5ab68ebdc2de073c390b58ed', label: "Border Radius (rem)", name: "borderRadius", min: 0, max: 2, step: 0.25 }), h("smoothly-input-checkbox", { key: '99e0f80359bb1d1813b4445fc642aeff881d0d12', name: "readonly" }, "Readonly"), h("smoothly-input-checkbox", { key: 'fb4e997a1751c7a05fb97d40ae5e151ad62e7a53', name: "disabled" }, "Disabled"), h("smoothly-input-checkbox", { key: '78a9cf0fe349660d1f6869a4051051006b0f13ac', name: "invalid" }, "Invalid"), h("smoothly-input", { key: '01b1d2c7089b8d24d40de9799f6296d8e2e1c34a', name: "errorMessage", value: "This is not a valid value" }, "Error Message"), h("smoothly-input-checkbox", { key: '3a8c24b67d02e7e040ea452bcb74dfcf8176eb6c', name: "showLabel", checked: true }, "Show Label"), h("smoothly-input", { key: '143f2e8974ac80899bcac6c582cfe071c370b491', name: "placeholder" }, "Placeholder"), h("smoothly-input-checkbox", { key: 'd16643507059700194c9b5b5d402d83d68ac7d42', name: "alwaysShowGuide" }, "Always Show Guide (for date inputs)"))), h("div", { key: '5c3a8ad043a7d87f872343009acf3b09c9c61b40', class: "input-wrapper", style: { "--smoothly-input-border-radius": `${this.options.borderRadius}rem` } }, h("div", { key: '2f5cde81d501ffd5c2bce64e1b54586f489cd11f', class: "width" }, "width: 100%"), h("div", { key: 'a055e7019d888ca2c12161581c2c77a35fa247ba', class: "left-padding" }, "padding-left: 0.5rem"), h("smoothly-input", { key: 'f7840a4c2c7197895adabac250b283dd1209d440', name: "text", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, showLabel: this.options.showLabel, placeholder: this.options.placeholder }, this.options.showLabel && h("span", { key: '5983ef639593b4f877b77b99d58f08d9fd47b98d' }, "Text"), h("smoothly-input-clear", { key: '252b68a3efdc6b70a0532eacb18cbcd137b207b3', slot: "end" })), h("div", { key: '37c4139e98071dec4901519ba10a075219e270bf', class: "height" }), h("smoothly-input-select", { key: '6ed894124eadea113968089eba5c38c7fff2caf4', name: "month", color: this.options.color, looks: this.options.looks, menuHeight: "6.7items", readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, placeholder: this.options.placeholder }, this.options.showLabel && h("label", { key: '2229eee3d5a4cab69d203a4f3b8f313693d1852c', slot: "label" }, "Select"), h("smoothly-item", { key: 'bfb7e1e1302677b556256f5c871eaabf83a1a22d', value: "1" }, "January"), h("smoothly-item", { key: '37b4e1404f0d93c3cfec6ae778a009cccc481f37', value: "2" }, "February"), h("smoothly-item", { key: '7804e2f534c4cd279e5f29e212bc8b3f07d3be9e', value: "3" }, "March"), h("smoothly-item", { key: '7de014b6870276d1afbc3f8b4780dd789b42501e', value: "4" }, "April"), h("smoothly-item", { key: 'e30eac74368b6ae4eaf58f371c8bdd0d030c76c1', value: "5" }, "May"), h("smoothly-item", { key: '90e999da893c3c3d6c9aea57d500808fac2f64d4', value: "6" }, "June"), h("smoothly-item", { key: '0c3ae02ce9a1c9ab4fca7c06fd3809ee8067bce5', value: "7" }, "July"), h("smoothly-item", { key: '689c71f20be3bc6fb057445c5ceaa60718f05603', value: "8" }, "August"), h("smoothly-item", { key: 'b1443376f5fa483d15873c9232290f6b6e270f1c', value: "9" }, "September"), h("smoothly-item", { key: '5055f6a2b1e136f911f32bc053d35c1931faaf02', value: "10" }, "October"), h("smoothly-item", { key: '512f871512f7bdd02462b286f724b66b7a845c48', value: "11" }, "November"), h("smoothly-item", { key: '4b6c5608cd060744cdd798803e67f2188ada562f', value: "12" }, "December"), h("smoothly-input-clear", { key: '7fd619f654ad16a0048a12793092d214bb87a7dc', slot: "end" })), h("div", { key: 'ab13b70b196dbc83d694145abd870bee5d121be1', class: "height" }), h("smoothly-input-checkbox", { key: '2eb487f1b741e7b12b50bc1b6eed8990a89b059e', name: "checkbox", checked: true, color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled }, "Check", h("smoothly-input-reset", { key: 'df9db551b674bb4df52b7c84bafbf25adab266fa', slot: "end" })), h("div", { key: 'bb29d6b57fdf27d523c4690ce4903187590c5b18', class: "height" }), h("smoothly-input-radio", { key: '12e400081cb687023137e7f1a3834915c846ac3f', name: "radio", clearable: true, color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, showLabel: this.options.showLabel }, this.options.showLabel && h("label", { key: 'd0646e2ca2ddd5ec6d7b6cdcddace55e907f4f59', slot: "label" }, "Radio"), h("smoothly-input-radio-item", { key: '5f2dd2ecb3289f99f82367cc0ab4c14b578ca0a3', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '5abdb6fb7897c18e088c85ec08313769e744583c', selected: true, value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '2bba28393706691b0973bd9f92836bd28c890b07', value: "third" }, "Label 3"), h("smoothly-input-clear", { key: '5853dbcda5ed68ce1401245bba244f19a248ccbe', slot: "end" })), h("div", { key: '7b1fc6de01785728d758ea07c55c3f2ff47415c8', class: "height" }), h("smoothly-input-file", { key: '1eac17bd99f215911b95f67312164ed294952b6d', name: "file", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, showLabel: this.options.showLabel, placeholder: this.options.placeholder }, this.options.showLabel && h("span", { key: '43d11a34c076520aed899bceb035c829836fd725', slot: "label" }, "File"), h("smoothly-input-clear", { key: '106b3c31ae10b64bdc4bc309a3512d58e929f4e2', slot: "end" })), h("div", { key: 'd13c20742bb1e088160b7cc59efb5f75dbfa4eaf', class: "height" }), h("smoothly-input-range", { key: 'd81378e953c5fe82ec020e544de7cf15d0e76434', name: "range", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, label: this.options.showLabel ? "Range" : undefined }, h("smoothly-input-clear", { key: '27e6247aa7c628859ebab11d8da32cf8be3dfd03', slot: "end" })), h("div", { key: 'ae21676a75148c438d070bf932e96b09f2237325', class: "height" }), h("smoothly-input-color", { key: '718f8309dd37c5e4552de5a2d5c00483b6397127', name: "color", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: 'eaadb8d6f5fa9f6143f2d2549e1b7901e32b2bef' }, "Color"), h("smoothly-input-clear", { key: 'f396f11146e3fb840e559086cf45ec745fe9dad8', slot: "end" })), h("div", { key: '60c4fcb685302ae33a5ff3f700b1b3c0010fd316', class: "height" }), h("smoothly-input-date", { key: '9eadbb8a6648c0986b83bc6c044683ddc7012472', name: "date", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, showLabel: this.options.showLabel, placeholder: this.options.placeholder, alwaysShowGuide: this.options.alwaysShowGuide }, this.options.showLabel && h("span", { key: 'f2502eeec674553779739ba3bf9d6beaa55566a2' }, "Date"), h("smoothly-input-clear", { key: 'f36a9a9403e5aa756a5c1a955cc526b2b349aeb3', slot: "end" })), h("div", { key: 'd0a81dd6a18ae37f0c55e7aa448d4323197b4e40', class: "height" }), h("smoothly-input-date-time", { key: 'a2c25b754dab6b88d1e25a8abecbe227153eab18', name: "dateTime", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, showLabel: this.options.showLabel }, "DateTime", h("smoothly-input-clear", { key: '8e392cdd2f0c92a9aca8f1e468c236065fd3c2b0', slot: "end" })), h("div", { key: '76f81fc46a552dd4ebe1b15b888b85e0faabf5bb', class: "height" }), h("smoothly-input-date-range", { key: '3837975fd0e591d52386c1b12f3171d64e91cf80', name: "dateRange", color: this.options.color, looks: this.options.looks, readonly: this.options.readonly, disabled: this.options.disabled, invalid: this.options.invalid, errorMessage: this.options.errorMessage, placeholder: this.options.placeholder, alwaysShowGuide: this.options.alwaysShowGuide, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '676c2f53a26198524881f0221c73e6b654bb13dc' }, "Date Range"), h("smoothly-input-clear", { key: '1e4740db4bf043f74cfafa1e7e91312878b71b86', slot: "end" })), h("div", { key: 'db0449b44b24dd20fccdb99329b876d938d5f68c', class: "height" }))));
     }
     static get is() { return "smoothly-input-demo-standard"; }
     static get encapsulation() { return "scoped"; }

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

@@ -10,11 +10,11 @@ export class SmoothlyInputDemoUserInput {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: 'eab36e7674fb973f979c4aaed34abadae7576fe0' }, h("div", { key: '8225faa4114dc00127534d7a4400b1d9b23f4ae7' }, h("h2", { key: 'a6e84f195de0a08ef8ea173615663417db7cb4fb' }, "User Input Event"), h("p", { key: 'e6aad349cb3b67654e5eb4499aa0088367862ceb' }, "These inputs demonstrate how user input is handled. The ", h("code", { key: 'ca92dbe2b5834d176ee33651b5d4287ece6d585c' }, "smoothlyUserInput"), " event fires only when the user interacts with an input, not when its value is changed programmatically (such as by clicking the buttons above).", h("br", { key: '96cfdda6ccf73450ce38e886fbb26681c17667ea' }), "Check the console to see the details of each ", h("code", { key: '13af94b46758e72141f7ba0da21f93f2ef70a052' }, "smoothlyUserInput"), " event.")), h("smoothly-button", { key: '5f3eadf13479a585b26f63bbd14d5a06d4efd82e', color: "tertiary", onClick: () => (this.textIndex = this.increment(this.textIndex)) }, "Change text"), h("smoothly-input", { key: '18606ed8401bc0a7a9146ab7b8da848b9f155971', looks: "border", name: "demo-user-input-text", value: this.textIndex === undefined ? "" : this.values[this.textIndex], onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Text input"), h("smoothly-button", { key: '89d848edf493f23af859f999c62788cd58f89b9e', onClick: () => (this.selectIndex = this.increment(this.selectIndex)), color: "tertiary" }, "Next select item"), h("smoothly-input-select", { key: '223ebf76fcfd12bb61cf78cdafb7cc2a6f9ab95a', looks: "border", name: "demo-user-input-select", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, h("span", { key: '1bb540b065fdf0f3571482e0c8a3417a4d9be70a', slot: "label" }, "Select input"), this.values.map((value, index) => (h("smoothly-item", { value: index, selected: index == this.selectIndex }, value)))), h("smoothly-button", { key: 'c8759cf4029e8910db9eca83c856bbcd203721ae', color: "tertiary", onClick: () => (this.checkboxChecked = !this.checkboxChecked) }, "Toggle checkbox"), h("smoothly-input-checkbox", { key: 'a613696a09d76a9410d66e4fc51833db30a8acd6', looks: "border", name: "demo-user-input-checkbox", checked: this.checkboxChecked, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Checkbox input"), h("smoothly-button", { key: '552e86df8bca79435198c9d18258d89471c17f2f', color: "tertiary", onClick: () => (this.radioIndex = this.increment(this.radioIndex)) }, "Next radio item"), h("smoothly-input-radio", { key: '83d0d370cfb15750bfec897741493bf51352409e', looks: "border", name: "demo-user-input-radio", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, h("span", { key: '205e6dc2498d0ae6b95a119aba4d19c75cefabea', slot: "label" }, "Radio input"), this.values.map((value, index) => (h("smoothly-input-radio-item", { value: value, selected: index == this.radioIndex }, value)))), h("smoothly-button", { key: '13bc5121320b0982bdcf65c0ea5454841783ef24', color: "tertiary", onClick: () => (this.rangeValue = this.increment(this.rangeValue)) }, "Next range value"), h("smoothly-input-range", { key: 'c6097f9351a54aefda3b9f51694c71d4faa803a5', looks: "border", name: "demo-user-input-range", step: 1, min: 0, max: this.values.length, value: this.rangeValue, label: "Range Input", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }), h("smoothly-button", { key: '5356c9d3d1ebd1edc281d0802deee76cd098ed7d', color: "tertiary", onClick: () => (this.colorIndex = this.increment(this.colorIndex)) }, "Next color"), h("smoothly-input-color", { key: '18d6651482ef0254f9c1dd1cdefd2127c4d67dc1', looks: "border", name: "demo-user-input-color", value: typeof this.colorIndex == "number" ? this.colors[this.colorIndex] : undefined, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Color input"), h("smoothly-button", { key: '3da5ff4f15a19d39a1537fc0f3f738bc840b17c4', color: "tertiary", onClick: () => (this.dateValue = this.dateValue ? isoly.Date.next(this.dateValue) : isoly.Date.now()) }, "Next day"), h("smoothly-input-date", { key: 'c20a4edf0546a89bcbd55a1f67840ffb6ca6a98a', looks: "border", name: "demo-user-input-date", value: this.dateValue, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Date input"), h("smoothly-button", { key: '0ab185dd19fabc2ded8387b5d08b1580d47726c9', color: "tertiary", onClick: () => (this.datetimeValue = this.datetimeValue
+        return (h(Host, { key: '3707001c9bf5406f3770f566924f8983d4444e18' }, h("div", { key: '6970bb763108f56a34284bb1f3cb73545f2dba2c' }, h("h2", { key: 'e5f96a2b6c360e8f9a81dd90d148822758719850' }, "User Input Event"), h("p", { key: 'e1fb246660c29ddb2791f4dc6f9779ed5f1c18a7' }, "These inputs demonstrate how user input is handled. The ", h("code", { key: '5a9145c2d8517baff49e70fd4aeed1f38600ba7f' }, "smoothlyUserInput"), " event fires only when the user interacts with an input, not when its value is changed programmatically (such as by clicking the buttons above).", h("br", { key: '15459234d2bf75b83479ff0786a20d2433e2dec3' }), "Check the console to see the details of each ", h("code", { key: 'bc857f9996667580c4ba88a74eca429fbc0d9c83' }, "smoothlyUserInput"), " event.")), h("smoothly-button", { key: '66a1190b2266b0650ba087572545780f93d86ac0', color: "tertiary", onClick: () => (this.textIndex = this.increment(this.textIndex)) }, "Change text"), h("smoothly-input", { key: 'a8630cec4bbada0c7084172822b3eeef576066ce', looks: "border", name: "demo-user-input-text", value: this.textIndex === undefined ? "" : this.values[this.textIndex], onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Text input"), h("smoothly-button", { key: '74fe6cc20fa495f2d6c79d13bb016bc76cada1bc', onClick: () => (this.selectIndex = this.increment(this.selectIndex)), color: "tertiary" }, "Next select item"), h("smoothly-input-select", { key: '5f1ad8448db267de3fc98b820be7aca9b64c2a9e', looks: "border", name: "demo-user-input-select", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, h("span", { key: '507fcecb4e27938be38144991221dfe3603c0667', slot: "label" }, "Select input"), this.values.map((value, index) => (h("smoothly-item", { value: index, selected: index == this.selectIndex }, value)))), h("smoothly-button", { key: '883f987123234566bdfd192ebd71605b078434ab', color: "tertiary", onClick: () => (this.checkboxChecked = !this.checkboxChecked) }, "Toggle checkbox"), h("smoothly-input-checkbox", { key: '26a326a43a44339392cca252cace5148c55305d9', looks: "border", name: "demo-user-input-checkbox", checked: this.checkboxChecked, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Checkbox input"), h("smoothly-button", { key: '39dfbc581f8468c49969d5186c9a39304c8b805c', color: "tertiary", onClick: () => (this.radioIndex = this.increment(this.radioIndex)) }, "Next radio item"), h("smoothly-input-radio", { key: 'f26209ed69e401cacbf6ea0094c1e3c8c6640181', looks: "border", name: "demo-user-input-radio", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, h("span", { key: '30b7f2d96d68bbeef6578e5c3fa07d5c56e8131e', slot: "label" }, "Radio input"), this.values.map((value, index) => (h("smoothly-input-radio-item", { value: value, selected: index == this.radioIndex }, value)))), h("smoothly-button", { key: '7d1e0c7d7175bae2453a2392e47a84e21faaa4ea', color: "tertiary", onClick: () => (this.rangeValue = this.increment(this.rangeValue)) }, "Next range value"), h("smoothly-input-range", { key: '0d90079afa3c0beaf9562af7b6db39c0a2795008', looks: "border", name: "demo-user-input-range", step: 1, min: 0, max: this.values.length, value: this.rangeValue, label: "Range Input", onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }), h("smoothly-button", { key: '2161ee4b978c2c37049cfc3d1bfd6ea5de6e16ea', color: "tertiary", onClick: () => (this.colorIndex = this.increment(this.colorIndex)) }, "Next color"), h("smoothly-input-color", { key: '271b3aaeba445473425259990276cf6803eeba55', looks: "border", name: "demo-user-input-color", value: typeof this.colorIndex == "number" ? this.colors[this.colorIndex] : undefined, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Color input"), h("smoothly-button", { key: '5d21c601bdd2b921e6d6cd6596e871fe0ce0d486', color: "tertiary", onClick: () => (this.dateValue = this.dateValue ? isoly.Date.next(this.dateValue) : isoly.Date.now()) }, "Next day"), h("smoothly-input-date", { key: '176fda15f938f2b90134e186c75869db175621a3', looks: "border", name: "demo-user-input-date", value: this.dateValue, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Date input"), h("smoothly-button", { key: '50ee6d7e90187eca79dea958e43fe4d38bb4e544', color: "tertiary", onClick: () => (this.datetimeValue = this.datetimeValue
                 ? isoly.DateTime.nextDay(this.datetimeValue)
-                : isoly.DateTime.now()) }, "Next date time"), h("smoothly-input-date-time", { key: '402a80aa4b3b25a460d2acec85964446350501fa', looks: "border", name: "demo-user-input-datetime", value: this.datetimeValue, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Date time input"), h("smoothly-button", { key: '89b12f184e5f3c2953b3882fca43dbea273f5178', color: "tertiary", onClick: () => (this.dateRangeValue = this.dateRangeValue
+                : isoly.DateTime.now()) }, "Next date time"), h("smoothly-input-date-time", { key: 'b688a44b6ae626c27a5e3e26d4c9be570d0f59f1', looks: "border", name: "demo-user-input-datetime", value: this.datetimeValue, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Date time input"), h("smoothly-button", { key: '9172cca5a258985cda5f244d38d56b692ea75e00', color: "tertiary", onClick: () => (this.dateRangeValue = this.dateRangeValue
                 ? { start: isoly.Date.next(this.dateRangeValue.start), end: isoly.Date.next(this.dateRangeValue.end) }
-                : { start: isoly.Date.now(), end: isoly.Date.next(isoly.Date.now(), 10) }) }, "Next date range"), h("smoothly-input-date-range", { key: '7c2c3867bb8465daf5da9496c70e717bdfd2616c', looks: "border", name: "demo-user-input-daterange", start: (_a = this.dateRangeValue) === null || _a === void 0 ? void 0 : _a.start, end: (_b = this.dateRangeValue) === null || _b === void 0 ? void 0 : _b.end, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Date range input")));
+                : { start: isoly.Date.now(), end: isoly.Date.next(isoly.Date.now(), 10) }) }, "Next date range"), h("smoothly-input-date-range", { key: '4ee747fb66efa022a9e31fda59f4ca839e4b0c5d', looks: "border", name: "demo-user-input-daterange", start: (_a = this.dateRangeValue) === null || _a === void 0 ? void 0 : _a.start, end: (_b = this.dateRangeValue) === null || _b === void 0 ? void 0 : _b.end, onSmoothlyUserInput: e => console.debug(e.type, e.detail.name, e.detail.value) }, "Date range input")));
     }
     static get is() { return "smoothly-input-demo-user-input"; }
     static get encapsulation() { return "scoped"; }