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/confirm/index.js CHANGED Viewed

@@ -18,7 +18,7 @@ export class SmoothlyButtonConfirm {
         }
     }
     render() {
-        return (h(Host, { key: 'c074a83b5c1adf25489bd21d6ddd877bce15b91b', warning: this.clickTimeStamp }, h("smoothly-button", { key: 'f4c7658b1c98dc7a7b3bfdd427fba714b43de7d8', fill: this.fill, expand: this.expand, size: this.size, shape: this.shape, color: "warning", disabled: this.disabled, type: "button", onClick: event => this.clickHandler(event) }, h("smoothly-icon", { key: 'c41cfe01abddd88b047e6cf90da0864fe13a9d7c', name: "alert-outline", fill: this.fill, color: "warning", size: this.size === "icon" ? "tiny" : "small" })), h("smoothly-button", { key: 'df2f31430eb709a846295c8eb9f1241598c08a35', fill: this.fill, expand: this.expand, size: this.size, shape: this.shape, color: this.color, disabled: this.disabled, type: "button", onClick: event => this.clickHandler(event) }, h("slot", { key: 'f442c9e90dc109936afe5267f36ad482a6a841d9' }))));
+        return (h(Host, { key: '4412f32553a126e383e1d9bf32d1d0013eb85bc9', warning: this.clickTimeStamp }, h("smoothly-button", { key: '8f53b5dfa7d10e669536b87c7d91a9fe2f05a240', fill: this.fill, expand: this.expand, size: this.size, shape: this.shape, color: "warning", disabled: this.disabled, type: "button", onClick: event => this.clickHandler(event) }, h("smoothly-icon", { key: 'be8bbedf8b038e06468c5aac4c813a5af41205ff', name: "alert-outline", fill: this.fill, color: "warning", size: this.size === "icon" ? "tiny" : "small" })), h("smoothly-button", { key: '719d905afde3e78e2297eba4bb7cc37e1a8728d6', fill: this.fill, expand: this.expand, size: this.size, shape: this.shape, color: this.color, disabled: this.disabled, type: "button", onClick: event => this.clickHandler(event) }, h("slot", { key: 'f3add649906ef5e0d5dd6a7fb504a2af4efe0e66' }))));
     }
     static get is() { return "smoothly-button-confirm"; }
     static get encapsulation() { return "scoped"; }

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

@@ -11,7 +11,7 @@ export class SmoothlyCountry {
     render() {
         var _a;
         const name = this.language && this.value ? isoly.CountryCode.Name.from(this.language, this.value) : undefined;
-        return (h(Host, { key: '580c08f364516b186c0870e887ae128a5e7d79d9', title: this.text == "alpha2" && name ? name : this.value }, ((_a = this.value) === null || _a === void 0 ? void 0 : _a.toUpperCase().replace(/./g, char => String.fromCodePoint(char.charCodeAt(0) + 127397))) +
+        return (h(Host, { key: 'c2bcd0dea7476367642b1890e4d178168c302f2e', title: this.text == "alpha2" && name ? name : this.value }, ((_a = this.value) === null || _a === void 0 ? void 0 : _a.toUpperCase().replace(/./g, char => String.fromCodePoint(char.charCodeAt(0) + 127397))) +
             " " +
             (this.text == "alpha2" ? this.value : this.text == "name" ? name : "")));
     }

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

@@ -6,7 +6,7 @@ export class SmoothlyDialogDemo {
         this.showFrame = false;
     }
     render() {
-        return (h(Host, { key: '8add700509240579f6f83dc95a6d4d0bddee067e' }, h("smoothly-button", { key: '35a3641241542400cfdca56b058887eaaca7c629', fill: "solid", color: "light", onClick: () => (this.openModal = true) }, "Open Modal"), h("smoothly-button", { key: '38a3e022173090e5a04547774c3a75674ad8937b', fill: "solid", color: "light", onClick: () => (this.openTallModal = true) }, "Open Modal with long text and top-aligned."), h("smoothly-button", { key: '0c52d6216d204dd41310fda4c810e8212fafe3e4', fill: "solid", color: "light", onClick: () => (this.showFrame = !this.showFrame) }, "Show Frame"), h("smoothly-modal", { key: '73d07f4662ac3ee4e398c98fdc50073af6a6cd63', closable: true, open: this.openModal, onSmoothlyModalChange: e => (this.openModal = e.detail) }, h("h2", { key: '4b8420bae8815bf0f491ebb38948f3348a5bc84c', slot: "header" }, "Modal"), h("span", { key: '2115cc46f1adb4149cf71331e3151f1fe876f681' }, "Are you sure you want to confirm this action?"), h("smoothly-button", { key: 'c722bed6d0ace30ab2ef644e219fb599da17276d', slot: "actions", color: "success" }, "Confirm"), h("smoothly-button", { key: '18c7bcebed68d09049ccddb2c559edbcc6c0b2d4', slot: "actions", color: "light", fill: "outline", onClick: () => (this.openModal = false) }, "Cancel")), h("smoothly-modal", { key: 'a89476ee4a3f90e1b57b243a4217a43b91874628', closable: true, open: this.openTallModal, onSmoothlyModalChange: e => (this.openTallModal = e.detail), align: "top" }, h("h2", { key: 'b778a0933b0b0b28aedefadaafed3b3f67f770a3', slot: "header" }, "Modal"), h("smoothly-summary", { key: 'fdfaa4526ee58e7bb2c356750de4540f45dfbf65' }, h("div", { key: 'a8418a82b28b6a698214ebff19b2aa28148e6ce2', slot: "summary" }, "Lorem ipsum"), h("div", { key: 'c4f120ea3e663e2e05fc6e109b8094129c88e8d5', slot: "content" }, Array.from({ length: 10 }).map(() => (h("p", null, "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-button", { key: 'e17da5e0786e43d783ec17008bdf956e90d44946', slot: "actions", color: "light", fill: "outline", onClick: () => (this.openTallModal = false) }, "Cancel")), this.showFrame && (h("smoothly-dialog", { key: '3e5e753799e6d49303cd5afe03448dac8c1a7c0a', closable: true }, h("smoothly-frame", { key: 'f61497a6984b98e8a392dd33dcc1ac6a7ba35734', url: "https://www.wikipedia.org/", name: "parent", style: { height: "80vh" } })))));
+        return (h(Host, { key: '0d1ca7f9bc049064eb1680cc807bd49bafab0e7e' }, h("smoothly-button", { key: '33683c13b2f666aea6d3306056b74b694cb88654', fill: "solid", color: "light", onClick: () => (this.openModal = true) }, "Open Modal"), h("smoothly-button", { key: '46de03312dfa5a28f164aacd442a7074148d6390', fill: "solid", color: "light", onClick: () => (this.openTallModal = true) }, "Open Modal with long text and top-aligned."), h("smoothly-button", { key: 'ea629cfa5afabb8151f230b4916d9eb13849a4d7', fill: "solid", color: "light", onClick: () => (this.showFrame = !this.showFrame) }, "Show Frame"), h("smoothly-modal", { key: '45b7313f8539478b1418298a7e086e506b18cf79', closable: true, open: this.openModal, onSmoothlyModalChange: e => (this.openModal = e.detail) }, h("h2", { key: '005f8f44463bd4f5048582f4d59b8792a02321e4', slot: "header" }, "Modal"), h("span", { key: '8bdae975d32f862fe1b2da1b75c1cdd8e0596e19' }, "Are you sure you want to confirm this action?"), h("smoothly-button", { key: '7a4fc7fbeb273ddaf66723c022c0408d7d5e6cc0', slot: "actions", color: "success" }, "Confirm"), h("smoothly-button", { key: 'c41f548b2f249ab1d04d180c6a8745f0be0c3180', slot: "actions", color: "light", fill: "outline", onClick: () => (this.openModal = false) }, "Cancel")), h("smoothly-modal", { key: '9b8efe1c92dae88afeb60053efcc19c89fcb53f6', closable: true, open: this.openTallModal, onSmoothlyModalChange: e => (this.openTallModal = e.detail), align: "top" }, h("h2", { key: '0c7b0382250669ac142152a49f24214180b75c11', slot: "header" }, "Modal"), h("smoothly-summary", { key: 'ccb69953bda0af96ba9e6679d0492770e1face22' }, h("div", { key: '95d44ba81eec2106d470f4f84c0857aab8f9b6c5', slot: "summary" }, "Lorem ipsum"), h("div", { key: '73a8c397c891af87ebb019bdb3ace838ab40ee24', slot: "content" }, Array.from({ length: 10 }).map(() => (h("p", null, "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-button", { key: '61c0e81f6b49ff91d58cc3536c516e25afe9ee71', slot: "actions", color: "light", fill: "outline", onClick: () => (this.openTallModal = false) }, "Cancel")), this.showFrame && (h("smoothly-dialog", { key: 'c0315ea0fbf1a253fe4fbc7aa9e01f7b21e49293', closable: true }, h("smoothly-frame", { key: '1469ba8f2d229d42329627b12e2a4bd4028a2273', url: "https://www.wikipedia.org/", name: "parent", style: { height: "80vh" } })))));
     }
     static get is() { return "smoothly-dialog-demo"; }
     static get encapsulation() { return "scoped"; }

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

@@ -18,7 +18,7 @@ export class SmoothlyDialog {
         };
     }
     render() {
-        return (h("section", { key: 'd3c1f7ac7d570b91b7f333e6ed1a3d324968c87c' }, h("div", { key: '008dcd5c0e1ab41ae9af6b064888a16391b2c9d3', class: "header" }, this.closable && (h("smoothly-trigger", { key: 'fefe3f3dcf2fb30a1da8617169b513228674fa62', fill: "clear", name: "close" }, h("smoothly-icon", { key: 'dbc75bd2df07148370796f4b2836cc1046332f3e', name: "close-circle", fill: "solid", color: this.color }))), this.header ? h("h1", null, this.header) : h("slot", { name: "header" })), h("div", { key: 'ef442c19429cead69075b022cb0511bd5cdbab50', class: "content" }, h("slot", { key: '65681298d9f89649128e93c9193b5e7488157ddf' }))));
+        return (h("section", { key: '5bdc10b02671eed7397ae99e872f104cb098d2c0' }, h("div", { key: '05bbab31a6d30c2ff0e3ec64ac59c8e56560526c', class: "header" }, this.closable && (h("smoothly-trigger", { key: '4f5d1a0d5c87d22d00281fadba0ffacf20c4b8db', fill: "clear", name: "close" }, h("smoothly-icon", { key: '2474cba19d732b0d34b02a055379bf1926a8fc4d', name: "close-circle", fill: "solid", color: this.color }))), this.header ? h("h1", null, this.header) : h("slot", { name: "header" })), h("div", { key: '861af5e557c0ef202273cab84877c8806bb2c232', class: "content" }, h("slot", { key: 'e755042ab3f24972fa2eaac24914649d10dafd0f' }))));
     }
     static get is() { return "smoothly-dialog"; }
     static get encapsulation() { return "scoped"; }

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

@@ -8,35 +8,35 @@ export class SmoothlyDisplayDemo {
     }
     render() {
         return [
-            h("main", { key: 'f0027441bfef78c171ba61092be17b58234f9441' }, h("fieldset", { key: 'd6d0987729d19296ae9bca9108b51b02d4cffe12' }, h("h2", { key: '8bf8fb79a2962ee6f57199fbca073d3d6108bfaf' }, "Smoothly display"), h("dl", { key: 'a611e082683866edf1aed27253cc139cdfae914d' }, h("dt", { key: '57ab7bbd1eb80eafbac37682b663cb14fbc0afc8' }, "Duration"), h("dd", { key: '0ff01664956d694165bfb366cad10146ba748f92' }, h("div", { key: 'aa1e91e3c22cb273d96ae15597b31c6ce6d826f3' }, h("div", { key: '4a51be0b383303cffad2bf958865e943a86eb35c' }, h("smoothly-display", { key: 'a69cc7be176c850fad91eb13feec5ad81f867e81', style: { display: "inline" }, type: "duration", value: { hours: 13, minutes: 100 } }), " h"), h("div", { key: '49df16cc21484f0b58025cc55fdcb4f4316db50f' }, h("smoothly-display", { key: '865bf3acaced59068f8dea2c22c76cd6906f3d14', style: { display: "inline" }, type: "duration", value: { hours: 8 } }), " h"), h("div", { key: 'afcb613ed8ee92fc23d2adc1f4a8019840b137a4' }, h("smoothly-display", { key: '21eeba322f8ed8b24160c7c4c2cf042c3d942762', style: { display: "inline" }, type: "duration", value: { minutes: 3 } }), " h"), h("div", { key: '9a08731fcf35e804463fba62e505fe23f7971b2d' }, h("smoothly-display", { key: '39c432749ba1147433b0a4703030c872bfc17b15', style: { display: "inline" }, type: "duration", value: { hours: -13, minutes: 100 } }), " h"), h("div", { key: 'e2fed37cd00090311d04917160996fb6c9d7c202' }, h("smoothly-display", { key: '166fd0d523c1ff7000d21232b3511d46ff642104', style: { display: "inline" }, type: "duration", value: { hours: -8 } }), " h"), h("div", { key: 'f59fa2cf4af468c0efd8d282559458d3048bb54a' }, h("smoothly-display", { key: 'aa40b1c43f5cfe22dd0bc0e6101db78a92c53621', style: { display: "inline" }, type: "duration", value: {} }), " h"), h("div", { key: '7e15d974058f15a3c42ec1d12ada1673beb1d6b3' }, h("smoothly-display", { key: 'e2b4163ee526312211aeb628b90b8eedcbe7e6f0', style: { display: "inline" }, type: "duration", value: { minutes: -3 } }), " h"))), h("dt", { key: 'bc84f7802f65b61b07be817c9aaf94e3f61ae84d' }, "text"), h("dd", { key: '57f8d7a74ceac39909d10cbe481b3971f2ecdeeb' }, h("smoothly-display", { key: '642c8f1d612e0debcca8bd7b201bd365af96cfa9', type: "text", value: "text" })), h("dt", { key: 'f935e44f241328df81553f11839f5c8ffbc10c9e' }, "postal code"), h("dd", { key: '9e330664f885f7219842624d3f38bcb196477f01' }, h("smoothly-display", { key: 'd9b64e1a659e44ea742cd4eaaa957568fb1e0d34', type: "postal-code", value: "752 31" })), h("dt", { key: '5dbf58da2741a7c0b23fd504b2f98e136f494949' }, "password"), h("dd", { key: '4b649f79b01043826cfb8daecc643fe252fab4a8' }, h("smoothly-display", { key: '0a3981b795879dc97bfb89c0ba24956742ce239c', type: "password", value: "password" })), h("dt", { key: '65971d774fbdbae74ffc9fc96668ba012701ea71' }, "email"), h("dd", { key: 'fb22a5ca78f8b003de2dced241e5525fe42c5fde' }, h("smoothly-display", { key: '2512acf71be746c2fcc2501451ce785bdbd01455', type: "email", value: "test@example.com" })), h("dt", { key: 'b89f91cecf9c963edd07250bf2a065a3da64837b' }, "price"), h("dd", { key: '6a2bf5ba95dcc27acc8629a4f3bd4ab8662a0365' }, h("smoothly-display", { key: 'e591993c95b899fa4aa976cfe3539e0e723e6ef3', type: "price", value: "13.37", currency: "SEK" })), h("dt", { key: '207e97191f04e431c5e511eb85fdbcf63572ffe8' }, "price without decimals"), h("dd", { key: 'a6420d4a9a8cf3d608e07999dfad03b6fccc43a9' }, h("smoothly-display", { key: 'b0e5761078c10a07616023a95b10765b86dd5a82', type: "price", value: 200, currency: "SEK", toInteger: true })), h("dt", { key: 'f3a1266f7e0610880115e0ba93f13cac57e8d038' }, "price with decimals if they are set, otherwise no decimal"), h("dd", { key: '601c5f79148527505141bc3a1995b068998190b6' }, h("smoothly-display", { key: '349b706f45c15353a5247608d9b5eddd5d514fb3', type: "price", value: 200.2, currency: "SEK", toInteger: true })), h("dt", { key: '46331fe9a8124257ee9d5e9713b713831e1f615f' }, "price with decimals"), h("dd", { key: '317c8ca991740a994b59830c94e8393bc01d3f07' }, h("smoothly-display", { key: '5ec0d759372c9fb36fd2149aae7953600cc67726', type: "price", value: 200.2, currency: "SEK" })), h("dt", { key: '60a3e8e4672dcd6050d79937f297404e6e84a04a' }, "percent"), h("dd", { key: '572df0ef47bb43bef3f15695ce774e3a205e27f5' }, h("smoothly-display", { key: 'b740dabdd447e609096a9587e70d04ae069f6ef6', type: "percent", value: "42" })), h("dt", { key: '9af3e07c435f10b3159d9fb313237129246669a4' }, "phone"), h("dd", { key: '31d3728c41a9cfad3440d4c5498f129b7be62b3e' }, h("smoothly-display", { key: '76bda1d9a032c2df5d10850ed34ec96c94524238', type: "phone", value: "0101881108" })), h("dt", { key: '339edc1575a020d74fe03f3dcd428352d905591f' }, "card number"), h("dd", { key: 'ef75e57c991ca5a1f886e2f6716d3475d6023e42' }, h("smoothly-display", { key: '1e694d62f751eb4c566b54ced5094030249eeebd', type: "card-number", value: "4111111111111111" })), h("dt", { key: 'c8cd5d87ac6ab7e778449f6e8528c3aeab576438' }, "card expires"), h("dd", { key: 'af791cca99d6ea340884d8becdb78c4e11a6a40b' }, h("smoothly-display", { key: '5e2c05c3f80af6f427c6bd4842d72db8c5dab3e9', type: "card-expires", value: "7/22" })), h("dt", { key: '6a9433b4e2048cd4de63a47c772ee6418d3acf21' }, "card csc"), h("dd", { key: 'd7e5f17ce69a12146a8ad54c981e59f5f69ae4da' }, h("smoothly-display", { key: '24a9c38b6c032aa554974376e13cb2b8ec0b84d0', type: "card-csc", value: "987" })), h("dt", { key: '48f5cac78c36bb5136f51ba66a6d0f07fb1a895f' }, "date"), h("dd", { key: 'f5de472e757607197287bb40299df53029677995' }, h("smoothly-display", { key: '3c3f43d0b929ab99bf66b7e6d2652480272e199b', type: "date", value: "2022-07-07" })), h("dt", { key: 'cc7cdb8e399598175e0772b23a7f7426eb6eb9dc' }, "date time"), h("dd", { key: '9ece32e9caa673525dcf71b86cd45b061d9827d9' }, h("smoothly-display", { key: '8c34dc9335a1dcd809368d490e38b366e0cbad98', type: "date-time", format: {
+            h("main", { key: '570a8cf525b8d883f2c226fd9d1f24ef9d2a7bac' }, h("fieldset", { key: '9daf4d2a5ff6c3924c09186d0b73c8dc11ef2354' }, h("h2", { key: '01bf90a47c56197346494bbc1992edf5ab9d8b2e' }, "Smoothly display"), h("dl", { key: 'dd5fbdf6e596430cb0a18482b50a8d3ef46cc2d9' }, h("dt", { key: 'e97f6d69f565560e54956acc47c61e676db32b26' }, "Duration"), h("dd", { key: 'b3ec7065ba3cb6e1832cf22f329964bc3a983d09' }, h("div", { key: 'db46dbf07917dd784f0939803fcb97f80d4ab0a7' }, h("div", { key: 'eda3a232df465a291734a9e1e607f779727928a2' }, h("smoothly-display", { key: '894097c909f8c1b0dd276696db72daadf3365aee', style: { display: "inline" }, type: "duration", value: { hours: 13, minutes: 100 } }), " h"), h("div", { key: '0f258be9133609201671eb993a290b2be1ee8d2b' }, h("smoothly-display", { key: 'd98834b9c367bbb650e8e933be3ee20b93df8082', style: { display: "inline" }, type: "duration", value: { hours: 8 } }), " h"), h("div", { key: '2dc0241b935f3d45f812fe0175731954c8e0b983' }, h("smoothly-display", { key: 'cc4c171af5aa79cf5487a8a131430bacc5248c98', style: { display: "inline" }, type: "duration", value: { minutes: 3 } }), " h"), h("div", { key: '19ff8935bb3454d538b0312530d32ff63dfb3034' }, h("smoothly-display", { key: 'e3c7ba72956c3735bc646773cf30eb78c2c4e75b', style: { display: "inline" }, type: "duration", value: { hours: -13, minutes: 100 } }), " h"), h("div", { key: '40d13934f818da8df03dd4215b5176cdf0089c20' }, h("smoothly-display", { key: 'f03306bc6cbd65f3ee50ce6fb57c66b2af229a83', style: { display: "inline" }, type: "duration", value: { hours: -8 } }), " h"), h("div", { key: 'f0d127f6a00ed1c06eb36fdfa1b809354cb139ba' }, h("smoothly-display", { key: '85ea4fa490947ec5bf9810fc5e5677550b507f7b', style: { display: "inline" }, type: "duration", value: {} }), " h"), h("div", { key: 'f60948619c1fcbad63e4af03f282ff3366f1ba76' }, h("smoothly-display", { key: '846841ac1b7cd206a2a95034db25a3059dccf890', style: { display: "inline" }, type: "duration", value: { minutes: -3 } }), " h"))), h("dt", { key: '3db393fff9fd7740683746088e884d83ac51e1e8' }, "text"), h("dd", { key: '2bd200acca8afd5cf72dd94294e4438e811ac411' }, h("smoothly-display", { key: 'aa88f3c9ed96edff41c91b4ed2206a04c90ed6f4', type: "text", value: "text" })), h("dt", { key: '81e183489b4fb749823c25b2a50ced9621aa432e' }, "postal code"), h("dd", { key: '390dd9916fcf42cb15a48727082a27550e46814a' }, h("smoothly-display", { key: '7e80d1d0b8746596448ca50c356e4afbe7d6f276', type: "postal-code", value: "752 31" })), h("dt", { key: 'c0d0dc8205d93cb8479713bdae1208e2847e477a' }, "password"), h("dd", { key: '0ea85f4699579f4b24f35f59775d7dec43978e5e' }, h("smoothly-display", { key: '9779849ced3842513a5c7d5d37cd20bf1f01f244', type: "password", value: "password" })), h("dt", { key: '5143b3ae0e39eb416c344a98b45974c2ad480eef' }, "email"), h("dd", { key: '8c25c7f73f1f4ec38cea3d7c520dc037df7b2224' }, h("smoothly-display", { key: '53a354324dea186db81a5b59bf75e222db33e56d', type: "email", value: "test@example.com" })), h("dt", { key: '469bd6001f5ad150ea815bb6e89a29eda53b5b77' }, "price"), h("dd", { key: 'cde7a755ca3ff50a5b0cea8eb4a1dae6aa5b253b' }, h("smoothly-display", { key: 'bb68a44ffd892b48277aa20a95f5e863680b4fa3', type: "price", value: "13.37", currency: "SEK" })), h("dt", { key: 'aff590f97d41ab80c38e7ecaba3e8023fd8ea734' }, "price without decimals"), h("dd", { key: '39a40abdaae41f74fa5e52be77cbe1045965e1dc' }, h("smoothly-display", { key: '1c653914e801725457fb55bb1b70ed56d991dabb', type: "price", value: 200, currency: "SEK", toInteger: true })), h("dt", { key: 'be366012d28535a04fa54216d29fa7835bdd789b' }, "price with decimals if they are set, otherwise no decimal"), h("dd", { key: 'f40b67c170fec282518c59179189b4f262a12804' }, h("smoothly-display", { key: '52ba5c8026d562f40ac62cd14fe1cf67b5d0c641', type: "price", value: 200.2, currency: "SEK", toInteger: true })), h("dt", { key: 'cc1048ee5cb4ef42c4396009ccb085e7ce8c3eca' }, "price with decimals"), h("dd", { key: '4814a19946eb610096f1aa76236971ca4e7d52f6' }, h("smoothly-display", { key: 'cb4cbda427c7a488bbba0c978d91a80683b9d8cb', type: "price", value: 200.2, currency: "SEK" })), h("dt", { key: 'deb381d3caec587043c0f58a58d06406f215f3e5' }, "percent"), h("dd", { key: 'afbe0bc5aa167605f50ec765a999432856019082' }, h("smoothly-display", { key: 'ffb1aee2a313b9f6ab71d42ed937619423095293', type: "percent", value: "42" })), h("dt", { key: '381bc0bb2857f9cc3b0e1b9e2cd439e35106f24b' }, "phone"), h("dd", { key: '96c9e0fb69de5004ba8666939b932f42db444db6' }, h("smoothly-display", { key: 'a242f3011ff04f9f02791b40bc0c042d9b95e087', type: "phone", value: "0101881108" })), h("dt", { key: 'ddf64889ff408a199d11b734ee2d41f15c619ace' }, "card number"), h("dd", { key: 'a6d6b94ab7b1c53b35622fb1e063b1293a637cf6' }, h("smoothly-display", { key: '8dbdba91c26bd0f1b4f923f76589b08f5c032f65', type: "card-number", value: "4111111111111111" })), h("dt", { key: 'ef7ef814a8cf29fec2f974efd32f040c3d725cc7' }, "card expires"), h("dd", { key: '84321e803af55ddd5469ef3068fd2eb8d946420b' }, h("smoothly-display", { key: '20651476830684d2a40e911a40fc00fe7f1ffe7e', type: "card-expires", value: "7/22" })), h("dt", { key: '7aef10fd17c205805fe7f5e790d12c2b89247a77' }, "card csc"), h("dd", { key: '00eca296571bf49a6c338c13a939d6f3155d4a08' }, h("smoothly-display", { key: 'c18662e291199765f4278d54e595588bfc3d6f1e', type: "card-csc", value: "987" })), h("dt", { key: 'e92d089a639a1e3357a6d39d2e499fff6bd7c2d1' }, "date"), h("dd", { key: 'f3cc2aabdec6942c8eadc2278b7a42adae09168d' }, h("smoothly-display", { key: 'fcd502f245a1c814faa093d82bb101182b3dafcd', type: "date", value: "2022-07-07" })), h("dt", { key: '81b8cbdb349df1bd1e1f84cc4bd006d7f2549c19' }, "date time"), h("dd", { key: 'eb5a64ea635751c62366292ce0ca23d125ad17ee' }, h("smoothly-display", { key: '039d66c0457be7e82b999a9e4c0672deee8fbe90', type: "date-time", format: {
                     year: "numeric",
                     month: "short",
                     day: "numeric",
                     hour: "numeric",
                     minute: "numeric",
                     second: "numeric",
-                }, value: "2022-07-07T02:02:02Z" })), h("dd", { key: 'bffb607f7fff4cbd83976db7ebb4b6d047181749' }, h("smoothly-display", { key: '9532c7fc763f670bc7efdf790bba83498224fa2b', type: "date-time", format: {
+                }, value: "2022-07-07T02:02:02Z" })), h("dd", { key: '456d8713e2e366e0efd48c4b0eca946a780bcd93' }, h("smoothly-display", { key: 'a6ea10ff87584dc5ce0146d6547b0948bb625e2e', type: "date-time", format: {
                     year: "2-digit",
                     month: "long",
                     day: "2-digit",
                     hour: "2-digit",
                     minute: "2-digit",
                     second: "2-digit",
-                }, value: "2022-07-07T02:02:02Z" })), h("dd", { key: 'e69696c5cacfd2eb127822b7372401baa4838c1f' }, h("smoothly-display", { key: '24dd4186d2e39e2ec123f31155e7ec5e9d473237', type: "date-time", format: {
+                }, value: "2022-07-07T02:02:02Z" })), h("dd", { key: '0fc3da083c35e907cb4c48645ecc7a3e4a4455d7' }, h("smoothly-display", { key: '49485eb182ac66fb8f9940d3719c4059c3897dc4', type: "date-time", format: {
                     year: "numeric",
                     month: "2-digit",
                     day: "2-digit",
                     hour: "numeric",
                     minute: "numeric",
                     second: "numeric",
-                }, value: "2022-07-07T12:22:24Z" })), h("dd", { key: '57656dda4f48f82ea0b089be6613076de5c08613' }, h("smoothly-display", { key: 'f8dc33572b80480deb71b2333d4ccb28a4d4b556', type: "date-time", format: {
+                }, value: "2022-07-07T12:22:24Z" })), h("dd", { key: '40a262a2fc34177b63b7e2969b3b59a5de602861' }, h("smoothly-display", { key: 'b7f00e769f842ed9ea6a630058cd01768ec2c0ac', type: "date-time", format: {
                     year: "numeric",
                     month: "numeric",
                     day: "numeric",
                     hour: "numeric",
                     minute: "numeric",
                     second: "numeric",
-                }, value: "2022-07-07T12:22:24Z" })), h("dd", { key: '8e06ce3ce8c92fc344b7d0152667ecd3de933ef0' }, h("smoothly-display", { key: 'dfe29b01b180372cb1bac5702e0ead534ad59ad5', type: "date-time", format: { year: "numeric", month: "short", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), h("dd", { key: '416f2e6fac955dc4a7a08b543186a5176b4359f2' }, h("smoothly-display", { key: '42baa9b698ae41db2a96203f11439217b4dd0598', type: "date-time", format: { year: "2-digit", month: "numeric", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), h("dd", { key: '9fa5bf6bcc7f11f24c92ea73235fc2c8fd1a9fa5' }, h("smoothly-display", { key: '9dc5fc24afb8952b6556c2f4405e47270f7d96c5', type: "date-time", format: {
+                }, value: "2022-07-07T12:22:24Z" })), h("dd", { key: '4a3173f9713aaa4371ab13ebd8577cd7a7935c95' }, h("smoothly-display", { key: '05904422b25f61dfc9f4325a4bb51b3d39a9aabf', type: "date-time", format: { year: "numeric", month: "short", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), h("dd", { key: '59783d4201fcf777c5e3635ad53934644eb68310' }, h("smoothly-display", { key: '58450e26b3eeab44be1c083f7f1320976dadf783', type: "date-time", format: { year: "2-digit", month: "numeric", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), h("dd", { key: '0beada1376af2c6652c3dad47b08c1b1699b24bb' }, h("smoothly-display", { key: '9d1b738dd535da8a7e07b959b4e581cf0f2b93d1', type: "date-time", format: {
                     year: "2-digit",
                     month: "numeric",
                     day: "numeric",
@@ -44,21 +44,21 @@ export class SmoothlyDisplayDemo {
                     minute: "2-digit",
                     second: "2-digit",
                     timeZone: "Europe/Stockholm",
-                }, value: "2022-07-07T12:15Z" })), h("dt", { key: 'fa0fee5e4d57648ef7379fcab25b1c861df29572' }, "Display JSON"), h("dd", { key: '24e8222807dd1a65b3d0b4d49e4e9b7f2f63ca45' }, h("smoothly-display-demo-json", { key: '3bfc573006f805f99a9815efd69bdb4cae7da5b0' })))), h("h2", { key: '526bb69d7ad95db53610949dfdfb1a8335d0d734' }, "With labels"), h("dd", { key: '42b3f4d34abb22ce98f7421c04076af3cf9592d7' }, h("smoothly-display", { key: 'bdfcb7554a39ed2f937ef2acc613f07e863b4460', label: "Today", type: "date", value: isoly.Date.now() }), h("smoothly-display", { key: 'ca523fd7b87353ad81a0fd6747626e3313dcd803', label: "Total amount", type: "price", currency: "SEK", value: 6789 }), h("smoothly-display", { key: 'f185521dbf646db7f2dbd0856d5b51c19cea0f7e', label: "Total amount", type: "price", currency: "GBP", value: 678.9 }), h("smoothly-display", { key: '2b11b984ee41bcfd8651422099dd0243dea5c1f9', label: "Logs", type: "json", value: [
+                }, value: "2022-07-07T12:15Z" })), h("dt", { key: '6d2aac61ed9fad093c2f19c2ec4d4de32b12e9a0' }, "Display JSON"), h("dd", { key: '2215884fa898511c90acf6997f8e20aea4c0ea0d' }, h("smoothly-display-demo-json", { key: '85cecf5eeaa416c9baca4a7876e348b54a09dbcb' })))), h("h2", { key: '56ae1be90a6bf9a152118dab9fec7d04b2a9b8e4' }, "With labels"), h("dd", { key: '4689634be5c50bafa97e8a08baee4b85b0a621ec' }, h("smoothly-display", { key: '14067ba1153408f0d11b02a76c5685b2c1f4a374', label: "Today", type: "date", value: isoly.Date.now() }), h("smoothly-display", { key: '4ba2105f9b3e139fac91bab03b9640766a18814a', label: "Total amount", type: "price", currency: "SEK", value: 6789 }), h("smoothly-display", { key: '138eb84408cb4efbc29f43ed1e3f9f71539dfac8', label: "Total amount", type: "price", currency: "GBP", value: 678.9 }), h("smoothly-display", { key: '2bddcb3e8ec54e29fc53a8ff4213cd157b34c8f1', label: "Logs", type: "json", value: [
                     { type: "trace", message: "Hello" },
                     { type: "error", message: "Oh no!" },
-                ] })), h("fieldset", { key: 'ef8bc44b54f0a98227581bcade3330debc22729c' }, h("h2", { key: '0dee7b56295ee035a7459a687e95bdcde727e1f7' }, "Test of different kinds of notifier"), h("button", { key: '88076dc7ef7db955ba07bad008e3082c9c3177e4', onClick: () => this.noticeWarning(Notice.warn("This is a test warning notice.")) }, "warning"), h("button", { key: 'f07659e51be16b4019d2a4759e62ef7a1e526c32', onClick: () => this.noticeWarning(Notice.succeeded("This is a test success notice.")) }, "success"), h("button", { key: 'ba7ae24c1f495c0babea9c9c4a5219129d16b5a1', onClick: () => this.noticeWarning(Notice.failed("This is a test danger notice.")) }, "danger"), h("button", { key: '6bec07e40f8cdf258d1ac09bac883570b6599e82', onClick: () => this.noticeWarning(Notice.execute("This is a test execute notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "execute"), h("button", { key: '30284847af0b9196965d40ef9a1e252fb9c6cb93', onClick: () => this.noticeWarning(Notice.delay("This is a test delay notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "delay")), h("fieldset", { key: '3d00362adfdf13d785a824e7a37151bea10f0991' }, h("h2", { key: 'ec4235bbe8d792aefe999743de12f8f1657e6789' }, "Smoothly spinner"), h("div", { key: '041c2d303ad7de8e19695eaca34461b08af1f8ef', style: { width: "fit-content" } }, "Large", h("smoothly-spinner", { key: '7899818b65ed91864b3a566a06c652be320779ee', size: "large", style: {
+                ] })), h("fieldset", { key: '830ecceb2f6904425d60f24ab37e046e4d147b04' }, h("h2", { key: 'dbab367e69309f7c29a3d025d585afbb2fa88965' }, "Test of different kinds of notifier"), h("button", { key: '187872d0e82b1389961e3d41a0998a0814f5e086', onClick: () => this.noticeWarning(Notice.warn("This is a test warning notice.")) }, "warning"), h("button", { key: '3f2ee3e8052834171ee2878dc3dcbd58d0fa6ed5', onClick: () => this.noticeWarning(Notice.succeeded("This is a test success notice.")) }, "success"), h("button", { key: '678349d8e5f0ba8b237ef1f2cd7c2b2d04aafe14', onClick: () => this.noticeWarning(Notice.failed("This is a test danger notice.")) }, "danger"), h("button", { key: '06792c0fd16258c1a306a902c77e3600bcae0872', onClick: () => this.noticeWarning(Notice.execute("This is a test execute notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "execute"), h("button", { key: '91ffa7d831eefbdce57ea2732ca884a3f30129ea', onClick: () => this.noticeWarning(Notice.delay("This is a test delay notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "delay")), h("fieldset", { key: '020e2fe53b4ee2f6b36a94863dbe2367d02e0b51' }, h("h2", { key: 'bb7cfda125e43c7f2afee6d7853318522456762e' }, "Smoothly spinner"), h("div", { key: 'a9f199a1fe6837f1546ee3aca45b74c399c23519', style: { width: "fit-content" } }, "Large", h("smoothly-spinner", { key: 'b3d78a677a1c3a62be4e448ac394096d62bc04e0', size: "large", style: {
                     "--spinner-background": "200,255,200",
                     "--spinner-background-opacity": "0.2",
                     "--spinner-color": "0,130,0",
-                } })), h("div", { key: 'd91ace8ab22931ac828734c330ec6bdffb7a1874', style: { width: "fit-content" } }, "Medium", h("smoothly-spinner", { key: 'e9c676eb8aeb5be8bbe3145fab86c5b8e5ce102d', size: "medium" })), h("div", { key: '4ddb83d57b7054a240391751efb43642f89af289', style: { width: "fit-content" } }, "Small", h("smoothly-spinner", { key: 'f81d12395407c33d35244069cb3f337c2fc68f7e', size: "small" })), h("div", { key: '442d309f4b04986e52cbeae4758377695fbdc3e4' }, "Icon sized spinner on button", Color.values.map(color => (h("smoothly-button", { size: "icon", color: color, shape: "rounded", onClick: () => {
+                } })), h("div", { key: 'db5b5ce167113c8471537bc9604af1d31ef5f228', style: { width: "fit-content" } }, "Medium", h("smoothly-spinner", { key: '2eff854f0c518cb3928615775367c6ca768f1a9e', size: "medium" })), h("div", { key: 'b92410ef7ff77eb220554dce92ee9e5e0161b8d2', style: { width: "fit-content" } }, "Small", h("smoothly-spinner", { key: '4836644ee23ce44de781fc59b185c363d2d10e5e', size: "small" })), h("div", { key: 'a6b659783973f77a39e1643940fc97f77be1f7ad' }, "Icon sized spinner on button", Color.values.map(color => (h("smoothly-button", { size: "icon", color: color, shape: "rounded", onClick: () => {
                     this.downloadingSpinner = true;
                     setTimeout(() => (this.downloadingSpinner = false), 3000);
-                } }, !this.downloadingSpinner && h("smoothly-icon", { name: "download-outline" }), this.downloadingSpinner && (h("smoothly-spinner", { size: "icon", style: { "--spinner-background-opacity": "0" } })))))), h("h3", { key: 'bc6fe08536d2b7245fecb987c84112377532ff5f' }, "Spinner with overlay"), h("div", { key: '286d6fc3429a30743f362b89874b22db0c8f00d8', style: { position: "relative", height: "10em" } }, "Large Overlay Spinner", h("smoothly-spinner", { key: '05f8103a25be0a00235dabfaf17b17dd059f110d', overlay: true, size: "large", style: {
+                } }, !this.downloadingSpinner && h("smoothly-icon", { name: "download-outline" }), this.downloadingSpinner && (h("smoothly-spinner", { size: "icon", style: { "--spinner-background-opacity": "0" } })))))), h("h3", { key: '8161fb53d9dfa5aba8bc164adcaf9e3daeeaa627' }, "Spinner with overlay"), h("div", { key: '8d4115c6ab8a24add137c06cde794937aba85b69', style: { position: "relative", height: "10em" } }, "Large Overlay Spinner", h("smoothly-spinner", { key: 'd04a2e77e759e5e094244922ec70fc150bac6858', overlay: true, size: "large", style: {
                     "--spinner-background": "255,200,255",
                     "--spinner-background-opacity": "0.5",
                     "--spinner-color": "0,130,0",
-                } })), h("div", { key: '88dae76ba4f26b5ba5dab790d030efd2740a9c3a', style: { position: "relative", height: "10em" } }, "Medium Overlay Spinner", h("smoothly-spinner", { key: 'ea74d644a344b2347888a609a72b20ac5c8651df', overlay: true, color: "secondary", size: "medium" })), h("div", { key: '64d9ade2587010213832e33830c5eeca985c7480', style: { position: "relative", height: "10em" } }, "Small Overlay Spinner", h("smoothly-spinner", { key: '494f01fde3c846454bfa32681895b2253db373a4', overlay: true, size: "small" }))), h("fieldset", { key: '6629bd3d32263860e046c756bd0f392c51f25be0' }, h("h2", { key: '33d110238af08bfc80a06d55b93cc128cc3a4d50' }, "Smoothly summary"), h("smoothly-summary", { key: '5439e9671227547e17576d921bd4d193184310ae' }, h("span", { key: '5aa376de959eac730f1731a9d1abaa7c9b2906e2', slot: "summary" }, "Some title"), h("smoothly-summary", { key: '0f3c9220d9317c54c53037b25b92374ee64b8b3b', slot: "content" }, h("div", { key: 'aa1dc04d09749f3c125eac38fdd59b15f990871e', slot: "summary" }, "Some other title"), h("div", { key: '327cbe85e798cbd7b5a6a96acb0d62db4486b6e2', slot: "content" }, "A lot more content, yes please. A lot more content, yes please. A lot more content, yes please. A lot more content, yes please. A lot more content, yes please.A lot more content, yes please. A lot more content, yes please. A lot more content, yes please. A lot more content, yes please."))), h("smoothly-summary", { key: '34df179fe11e57724c204fc7faa92b6dd3d2c312' }, h("div", { key: 'bc7f0348eba69ce4b5ec090c3132152829cd2bdb', slot: "summary", style: { display: "flex", gap: "0.3rem" } }, h("span", { key: 'e46943da2844edc16d8c93e99f2a421668af34cf' }, "Person"), h("smoothly-icon", { key: 'b677ed1036743b2994003c0b4d8573124fa30407', name: "person", color: "light", fill: "clear", size: "tiny" })), h("p", { key: '8a22ac8f00f37ce9b4d90978d329daef975a2856', slot: "content" }, "Some person information.")), h("h2", { key: '52120c774608c56017e1b8479631be4019449516' }, "Label"), labels.map(l => (h("smoothly-label", { hue: l.hue, description: l.description, shape: "rectangle" }, l.name))), h("smoothly-label", { key: '16fba37231ff5ef8859a05e1d7b138ce27ba2769', color: "primary", description: "Using colors", shape: "rectangle" }, "Primary"))),
+                } })), h("div", { key: 'e284851987d3e475d72dd68e5465ff2b54e38710', style: { position: "relative", height: "10em" } }, "Medium Overlay Spinner", h("smoothly-spinner", { key: '29d593da93d2e11ac520650d64af1de6728e837e', overlay: true, color: "secondary", size: "medium" })), h("div", { key: 'bcc6e156596f946964173cf9a100dce8f3f9adcb', style: { position: "relative", height: "10em" } }, "Small Overlay Spinner", h("smoothly-spinner", { key: '57498aeaf7c8690958a1f42d80220bf6ba01a069', overlay: true, size: "small" }))), h("fieldset", { key: 'ed65a407dde854768a1934add1d88a40d99f20c5' }, h("h2", { key: '3f0a8eba2588ac878f02104f60fbc6072173c480' }, "Smoothly summary"), h("smoothly-summary", { key: 'b5538b3841957408ca25314d20789fc87db9f89c' }, h("span", { key: '0a66c656b75981dd493f9288522c914c6aaf3177', slot: "summary" }, "Some title"), h("smoothly-summary", { key: 'd7a1064544e0f530ee18fc98e5dbac110f7aad79', slot: "content" }, h("div", { key: '7dc9a5d35ddd789ef54fe021ecf9b784793a3074', slot: "summary" }, "Some other title"), h("div", { key: 'b0b0000431972ce6510eeb966d35f90f98baa372', slot: "content" }, "A lot more content, yes please. A lot more content, yes please. A lot more content, yes please. A lot more content, yes please. A lot more content, yes please.A lot more content, yes please. A lot more content, yes please. A lot more content, yes please. A lot more content, yes please."))), h("smoothly-summary", { key: '7eac5c136d5ed3c09c53f676991fb957bdea50f2' }, h("div", { key: '45239a377a7ae5b15baa3fefaca04f965bc3dd80', slot: "summary", style: { display: "flex", gap: "0.3rem" } }, h("span", { key: 'aed615a5e1dcfece04dc29d3381e706e89328025' }, "Person"), h("smoothly-icon", { key: 'bbdbee4093170b788015686e6ac31cb75adfb3c4', name: "person", color: "light", fill: "clear", size: "tiny" })), h("p", { key: 'dcbe807176c6c8c0a642b8351487c63a2a31d1d1', slot: "content" }, "Some person information.")), h("h2", { key: 'b939b82ef761060a6de4190fd80e5aec1d6c6938' }, "Label"), labels.map(l => (h("smoothly-label", { hue: l.hue, description: l.description, shape: "rectangle" }, l.name))), h("smoothly-label", { key: '9dd6878b3e540f24dee8fc99d6834a6c2ed85744', color: "primary", description: "Using colors", shape: "rectangle" }, "Primary"))),
         ];
     }
     static get is() { return "smoothly-display-demo"; }

package/dist/collection/components/display/demo/json/index.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class SmoothlyDisplayDemoJson {
     render() {
-        return (h(Host, { key: 'c459dfb0ab28ba6c9ec1be1f334398200800cf56' }, [0, 1, 3, undefined].map(colapseDepth => [
+        return (h(Host, { key: 'dd76081f4adf3ae47e0015c2f17b43e50c6ace15' }, [0, 1, 3, undefined].map(colapseDepth => [
             h("div", null, "collapseDepth=", colapseDepth !== null && colapseDepth !== void 0 ? colapseDepth : "undefined"),
             h("div", null, h("smoothly-display", { type: "json", value: json, collapseDepth: colapseDepth })),
         ])));

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

@@ -9,16 +9,16 @@ export class SmoothlyDisplay {
         const type = this.type;
         switch (type) {
             case "json":
-                result = h("smoothly-display-json", { key: '64f0c43d63b42975833202265cd02a4e7b7af147', value: this.value, collapseDepth: this.collapseDepth });
+                result = h("smoothly-display-json", { key: 'fd641ce179a967152448d7c489ad96dd5ea6cc4e', value: this.value, collapseDepth: this.collapseDepth });
                 break;
             default:
                 result = tidily.format(this.value, type);
                 break;
             case "email":
-                result = h("a", { key: '0c287d32f128b8740b8c349ee1558ed5e60ce50e', href: "mailto:" + this.value }, tidily.format(this.value, type));
+                result = h("a", { key: 'd32e3545f5b4e43e0b8f383ba0ef7274472f4d41', href: "mailto:" + this.value }, tidily.format(this.value, type));
                 break;
             case "phone":
-                result = h("a", { key: 'dc27f6c1d36f47721908d7ae04783ceab3863a29', href: "tel:" + this.value }, tidily.format(this.value, type, this.country));
+                result = h("a", { key: '3b6156fba727f342215fc2510e497bf24e21fa9b', href: "tel:" + this.value }, tidily.format(this.value, type, this.country));
                 break;
             case "postal-code":
                 result = tidily.format(this.value, type, this.country);

package/dist/collection/components/display/json/index.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { h } from "@stencil/core";
 import { JsonValue } from "./JsonValue";
 export class SmoothlyDisplayJson {
     render() {
-        return h(JsonValue, { key: 'dc8824ed92fdfde3a318f0449eb531600678000f', value: this.value, collapseDepth: this.collapseDepth });
+        return h(JsonValue, { key: '939a93b45e7f0f021c361331d011e7cb61627fed', value: this.value, collapseDepth: this.collapseDepth });
     }
     static get is() { return "smoothly-display-json"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/display/json/object/index.js CHANGED Viewed

@@ -21,9 +21,9 @@ export class SmoothlyDisplayJsonObject {
     }
     render() {
         const nextCollapseDepth = typeof this.collapseDepth == "number" ? Math.max(this.collapseDepth - 1, 0) : undefined;
-        return (h(Host, { key: 'd8c5fd222b4cbe393ccd7e5fe13ec04bff9c5614', class: { empty: this.empty, open: this.open } }, h("span", { key: '56070a9821ec22233a1a53614bf062234b5e1645', class: "open-bracket", onClick: () => (this.open = !this.open), "data-length": this.length }, this.openBracket), h("span", { key: '9fb7f10b2c330e486270e875bc3adff84066aa23', class: "content" }, Array.isArray(this.value)
+        return (h(Host, { key: '9c9b5a46433770a7d56343c4bf723163e8a56475', class: { empty: this.empty, open: this.open } }, h("span", { key: '836957462d65b5c136231bd3867f7da169ecb343', class: "open-bracket", onClick: () => (this.open = !this.open), "data-length": this.length }, this.openBracket), h("span", { key: 'ef132e20317fb0b1b3f38442fec7bd2731ec5c43', class: "content" }, Array.isArray(this.value)
             ? this.value.map(v => (h("div", { class: "indent" }, h(JsonValue, { value: v, collapseDepth: nextCollapseDepth }), h("span", { class: "comma" }, ","))))
-            : Object.entries(this.value).map(([k, v]) => (h("div", { class: "indent" }, h("smoothly-display-json-record-key", { value: k }), ":", " ", h(JsonValue, { value: v, collapseDepth: nextCollapseDepth }), h("span", { class: "comma" }, ","))))), h("span", { key: '13fc780163726d1c6b03c4657ed7dd303fe4aca9', class: "close-bracket" }, this.closeBracket)));
+            : Object.entries(this.value).map(([k, v]) => (h("div", { class: "indent" }, h("smoothly-display-json-record-key", { value: k }), ":", " ", h(JsonValue, { value: v, collapseDepth: nextCollapseDepth }), h("span", { class: "comma" }, ","))))), h("span", { key: '50bed891b85fc5d407cad5e8ae1d53dcf56551d2', class: "close-bracket" }, this.closeBracket)));
     }
     static get is() { return "smoothly-display-json-object"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/display/json/object/key/index.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class SmoothlyDisplayJsonRecordKey {
     render() {
-        return h(Host, { key: '2a03b569bedb742a25108741886a5a781f31a703' }, "\"", this.value, "\"");
+        return h(Host, { key: '67d6629e71ecde01829b6279188bc7332c3d9379' }, "\"", this.value, "\"");
     }
     static get is() { return "smoothly-display-json-record-key"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/display/json/primitive/index.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class SmoothlyDisplayJsonPrimitive {
     render() {
-        return h(Host, { key: '0e8d894d5b03272d4df6b648eef111b4efe5b236', class: this.value == null ? "null" : typeof this.value }, "" + JSON.stringify(this.value));
+        return h(Host, { key: '017bbc369b1e8ff42466411a5b28b52c5661b740', class: this.value == null ? "null" : typeof this.value }, "" + JSON.stringify(this.value));
     }
     static get is() { return "smoothly-display-json-primitive"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/form/demo/all/index.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import { h, Host } from "@stencil/core";
 export class SmoothlyFormDemoAll {
     render() {
-        return (h(Host, { key: '26d8859a979a266ef04c3bb1fc37d43b7eb9eb02' }, h("h2", { key: 'dd96fffed9ca4ab9aa7a4d7c3b1ecd01ff354258' }, "All inputs"), h("smoothly-form", { key: '3f87a50316c1ee79f0c302f41e658f0c62145af3', looks: "grid", type: "create", readonly: true, action: "https://api.toiletapi.com/upload/6b12fd2f-e896-46f9-b38f-25cf42cee4b4", onSmoothlyFormSubmit: e => {
+        return (h(Host, { key: '2b2e779dc35f9f35173515a6db59425654d7446a' }, h("h2", { key: 'b2423e5f45a6841b6fedcb7db17626ed192ee15d' }, "All inputs"), h("smoothly-form", { key: 'ac6fc721d22456edb5104ba9553c423d6f8bdebe', looks: "grid", type: "create", readonly: true, action: "https://api.toiletapi.com/upload/6b12fd2f-e896-46f9-b38f-25cf42cee4b4", onSmoothlyFormSubmit: e => {
                 Object.entries(e.detail.value).forEach(([key, value]) => console.log(key, value));
-            } }, h("smoothly-input", { key: '80413fc035c38ec456921554da4ad0710f240ec2', readonly: true, name: "First Name", value: "John" }, "First name"), h("smoothly-input", { key: '9a05f6d391da8353b44e1f6d9497daa50b743373', showLabel: false, name: "Last name", value: "Doe" }, "Last name", h("smoothly-input-clear", { key: 'd84f796d222470385097527e85a8a00fe054df87', size: "icon", slot: "end" })), h("smoothly-input", { key: '2701ab2d4dcba753fae952f20870b1c481393b3b', type: "phone", name: "Phone", value: "777888999" }, "Phone", h("smoothly-input-reset", { key: '667c5a1b5985b222785f1bb60f74c76a95e07d6b', size: "icon", slot: "end" })), h("smoothly-input-radio", { key: '30b8830f31e272e8701115e7849ac8f4cf623a30', clearable: true, name: "radioFirstInput" }, h("label", { key: '784cacf4d835eb4989c07e836808704ed25de96c', slot: "label" }, "Clearable"), h("smoothly-input-radio-item", { key: 'c8ed8ee4bec740a9dcea2f381b6eed3045726638', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '936678767e2b83845e54fb0eaa116a5de111ae1c', selected: true, value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '15135664da662bafb7b2a6105086c67346e09bd4', value: "third" }, "Label 3")), h("smoothly-input-color", { key: 'f021a72c05dbf64358c33476b13954a6de8fc690', name: "color" }, "Color"), h("smoothly-input-select", { key: '73a13398b6a3ea07fe3801bf6e8c1e2990fcf579', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { key: '70b07064df546094f42653d09020e44e147f3c4f', slot: "label" }, "Month multiple select"), h("smoothly-item", { key: '69ac138a4b2c5c2b13a1120c56defe5af15757ac', value: "1" }, "January"), h("smoothly-item", { key: '42b673e3da28c9694dceecec4b9363d23e2df256', value: "2" }, "February"), h("smoothly-item", { key: 'd77be546fff12aec5d24c5842acfff45e47b84af', value: "3" }, "March"), h("smoothly-item", { key: 'f3439c6da3efab944e5621c6b553cea248e8b903', value: "4" }, "April"), h("smoothly-item", { key: 'bc2bd414c62217c0c77bbd81ab047b989d92d116', value: "5" }, "May"), h("smoothly-item", { key: 'a76d3d4079774b087ea6e5332269d7ca18517a98', value: "6" }, "June"), h("smoothly-item", { key: '325023552ef5f72e80498b240a28854d924aa62e', value: "7" }, "July"), h("smoothly-item", { key: 'a565da7502901f6f1264ffb1ceb18a1a2b90f4ba', value: "8" }, "August"), h("smoothly-item", { key: 'a65416ddab3bc75c8a471a070a20091a564fa554', value: "9" }, "September"), h("smoothly-item", { key: 'ec61990c57155a52b80f057474a61c386d0b9a53', value: "10" }, "October"), h("smoothly-item", { key: '2aee5e3e54a18654df0657bf5915e57e8ec21fff', value: "11" }, "November"), h("smoothly-item", { key: '48931868850a9d640e92ad8c1533d20118382a85', value: "12" }, "December")), h("smoothly-input-select", { key: '60a31db453287a4fe94eb6f70c493e92f9d14585', name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { key: 'df690c551ae8250a1f4d31f1b915029c6d7c5734', value: "folder", selected: true }, h("smoothly-icon", { key: '291f79a3573eaffce90bc9e8ea15f952029af89e', size: "small", name: "folder-outline" })), h("smoothly-item", { key: 'bdc8cff7786d6e08368f0561045180e169c85e3d', value: "camera" }, h("smoothly-icon", { key: '7aa0eff29200aa015782bd0e46ac46d11db51c10', size: "small", name: "camera-outline" }))), h("smoothly-input-checkbox", { key: '17bd997576aac246bc1cb9fa3490ae930a176a1a', name: "checkbox" }, "Check the box"), h("smoothly-input-checkbox", { key: 'a4350c47d2b7c2521f78ddc66b0c46392e9174fc', name: "checkbox2", checked: true }, "Check the box 2"), h("smoothly-input-range", { key: '34c0a3695fda6f5c244febfe1ef0601fe8aad3e8', step: 1, name: "range3", value: 20, label: "Range" }), h("smoothly-input", { key: '4dad37c0545770b7a4e121ff059bd3ef6fcf1b0c', name: "pets.0.name" }, "First Pet's Name"), h("smoothly-input-range", { key: '6dc2ab3e61d071eba1ba37b6bfa9d69cddf163ba', name: "pets.0.age", max: 100, step: 1, label: "First Pet's Age" }), h("smoothly-input", { key: '4f3c9643f4458da009f4abc44f4aa3bfed0b45c5', name: "pets.1.name" }, "Second Pet's Name"), h("smoothly-input-range", { key: '46d4a4160d3052e23c3c4404dbe79bb28afad4a5', name: "pets.1.age", max: 100, step: 1, label: "Second Pet's Age" }), h("smoothly-input", { key: '31c35b9176a80e7ee6d5c3fea1800f9f4ef6e9a6', name: "pets.2.name" }, "Third Pet's Name"), h("smoothly-input-range", { key: 'a896c737e2109950144e1a3f2efa9210fba9c3c0', name: "pets.2.age", max: 100, step: 1, label: "Third Pet's Age" }), h("smoothly-input-file", { key: '01de90a10782f288c4d4fb4517275a7274b4dc92', name: "profile", placeholder: "Click or drag your profile picture here..." }, h("span", { key: '5b7e453a366a439e2a97998f2eec3299bdb4eb25', slot: "label" }, "Profile"), h("smoothly-icon", { key: '53aa8eda968297d191c0afea3c11934f9c203377', slot: "button", name: "person-circle-outline", size: "tiny", fill: "default" })), h("smoothly-input", { key: '0825ce082e0c19387407d1d1de148f8d76b48757', type: "duration", name: "duration", value: {} }, "Duration"), h("smoothly-input-clear", { key: '9c7b8c2a145e5132a3b76cc9978e00683ab50759', fill: "default", type: "form", color: "warning", slot: "clear", size: "icon", shape: "rounded" }), h("smoothly-input-edit", { key: '6dc5f9607c6d81f53b87f850c22617c7bedc0e82', fill: "default", type: "form", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), h("smoothly-input-reset", { key: '743cb42c1bdc976361e47a61b2b2964cc6f9604c', fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { key: '3d6cc6c98ef08841aadd30acf363964ad5c355af', delete: true, slot: "delete", color: "danger", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { key: 'f3f671351e1b356ce6c1dea41f14bc54535e076e', fill: "default", color: "success", slot: "submit", size: "icon", shape: "rounded" }))));
+            } }, h("smoothly-input", { key: '4ec033bb9d51a7edc81cce2a1fde55bd21458318', readonly: true, name: "First Name", value: "John" }, "First name"), h("smoothly-input", { key: '8d6abee797b1c9b60efeb068c828453174401012', showLabel: false, name: "Last name", value: "Doe" }, "Last name", h("smoothly-input-clear", { key: '8caeac3cbd2290eaeeda549aea083d4499b960c5', size: "icon", slot: "end" })), h("smoothly-input", { key: '9a22277ed064a84b98a8c68c5f176758735748f0', type: "phone", name: "Phone", value: "777888999" }, "Phone", h("smoothly-input-reset", { key: '2b45ff8ceaf71289d350e102d53123dc1c82600f', size: "icon", slot: "end" })), h("smoothly-input-radio", { key: '15856b48204c21b5f7318df22130e17aa3e14e8d', clearable: true, name: "radioFirstInput" }, h("label", { key: 'c94b6e0c185c8ab4325161a6e4249863017e5eb2', slot: "label" }, "Clearable"), h("smoothly-input-radio-item", { key: 'e978bde5ec519ab872eac3fb2a7d75b493099f31', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '3c30fd0d9b549f93c912759f8329570db377df79', selected: true, value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '2f3f773cade1c39fa2a121b24ba2778a42d9a9b0', value: "third" }, "Label 3")), h("smoothly-input-color", { key: 'f1e0b0b1e759c85c5de1f3a8af9818b41c692bdb', name: "color" }, "Color"), h("smoothly-input-select", { key: '7e1069ff0515224e17145539afefec11979ed88c', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { key: 'c42749acb44e6e7db99f4e7981f20ad0c09f1694', slot: "label" }, "Month multiple select"), h("smoothly-item", { key: 'fdd0c90294bdf50d77ccf187777fdd804760b8ac', value: "1" }, "January"), h("smoothly-item", { key: '4f0c9d90f6909eaacccd5d385e317832f5a8b213', value: "2" }, "February"), h("smoothly-item", { key: '7779ea4af1f17cb48ef0249b7857262deb6c485d', value: "3" }, "March"), h("smoothly-item", { key: '5f15c3d32240bfb7c3b8d0a61f90599697b8e2a0', value: "4" }, "April"), h("smoothly-item", { key: '0952c95b2cf623f5573d70b5fa39b1c1ce008f16', value: "5" }, "May"), h("smoothly-item", { key: '1352e9245e39341d99d1bc8d051691b6b70dac37', value: "6" }, "June"), h("smoothly-item", { key: '7eddedff608a9148cb2b9c17f23ac2108b2190fd', value: "7" }, "July"), h("smoothly-item", { key: '627e81c5c7ddd5e1230b6eead20ac7932edbff9a', value: "8" }, "August"), h("smoothly-item", { key: '587bcf666e0bc92c14f5665f975563f06a419bac', value: "9" }, "September"), h("smoothly-item", { key: '896f05e2b88d7613cbc7f21b2aa4c58f1ae3938d', value: "10" }, "October"), h("smoothly-item", { key: 'fb539afa5edd3fe8391df5fc9d63fcb84940512c', value: "11" }, "November"), h("smoothly-item", { key: '959e9af2c479a299431f302041649bd86f5db331', value: "12" }, "December")), h("smoothly-input-select", { key: '64e83fb7dba19c8c21b5697eade0c7c5404d330c', name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { key: 'b1a055ab1c73f28e0b49e626561aeff83efb124b', value: "folder", selected: true }, h("smoothly-icon", { key: '9ba931c9dd28c9f88168f5ab94fd80bc6f7f6bc0', size: "small", name: "folder-outline" })), h("smoothly-item", { key: 'acd791714a16504b5dc6a56f2fbfc89cf1ef4600', value: "camera" }, h("smoothly-icon", { key: 'd65e7beb3c74941bf494769126124ef79ce800d0', size: "small", name: "camera-outline" }))), h("smoothly-input-checkbox", { key: 'd6f2f199daf447bb0992ca8839b89e4e14166846', name: "checkbox" }, "Check the box"), h("smoothly-input-checkbox", { key: '79885d84642626f7cba6d348d0044f2c8037007e', name: "checkbox2", checked: true }, "Check the box 2"), h("smoothly-input-range", { key: '7e791279c3b1bd2898d4c5e9e35ef9df76aa14cf', step: 1, name: "range3", value: 20, label: "Range" }), h("smoothly-input", { key: 'f7b07cef9882952dc91be6484c04ba459ef5db62', name: "pets.0.name" }, "First Pet's Name"), h("smoothly-input-range", { key: '44b404105c6d9aa19c7f14ac529e7b8ab3f964e9', name: "pets.0.age", max: 100, step: 1, label: "First Pet's Age" }), h("smoothly-input", { key: 'aca9bc7aebd243f8e82158d1c60b7a69886e9a02', name: "pets.1.name" }, "Second Pet's Name"), h("smoothly-input-range", { key: '674b16d94949bcbd3fd4980b0b262ba580efbd5b', name: "pets.1.age", max: 100, step: 1, label: "Second Pet's Age" }), h("smoothly-input", { key: 'b25175ffa941b70d606a66db0f97e61547faf5b9', name: "pets.2.name" }, "Third Pet's Name"), h("smoothly-input-range", { key: '0113d466fc09afc4734a65500cdc20b06267d77d', name: "pets.2.age", max: 100, step: 1, label: "Third Pet's Age" }), h("smoothly-input-file", { key: 'cd15c39915ea43095e237f4f1952ed271f6e756b', name: "profile", placeholder: "Click or drag your profile picture here..." }, h("span", { key: 'a6138d70fbf10e1cf7cc4ad624422315d05c9619', slot: "label" }, "Profile"), h("smoothly-icon", { key: '5c53d92dd91402c2db9d57dc3dfd274cbea4b730', slot: "button", name: "person-circle-outline", size: "tiny", fill: "default" })), h("smoothly-input", { key: '497261e5f152c2af406dcc6860a6092df8bbe1af', type: "duration", name: "duration", value: {} }, "Duration"), h("smoothly-input-clear", { key: '7ba91aa6d31f7ff2ebbb3d07bd958610aad0fc1f', fill: "default", type: "form", color: "warning", slot: "clear", size: "icon", shape: "rounded" }), h("smoothly-input-edit", { key: 'fd6a01b3f7417aa4074bbf2ca385cec9d437e429', fill: "default", type: "form", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), h("smoothly-input-reset", { key: '3221d6e405488a7af0b917c99ee7f5acd9ca9f1d', fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { key: 'e81eff668f6592a23f3f13262c123e97d1ca6c30', delete: true, slot: "delete", color: "danger", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { key: '334bca3eb505ccd23c75efe1d3d66faa7638f4e0', fill: "default", color: "success", slot: "submit", size: "icon", shape: "rounded" }))));
     }
     static get is() { return "smoothly-form-demo-all"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/form/demo/card/index.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class SmoothlyFormDemoCard {
     render() {
-        return (h(Host, { key: '644dd5d2d56fea755d44d8cfed8c0b52d64883ef' }, h("h2", { key: 'f8be0372bf3f537f5e6cd66087aa9102a69fa4b3' }, "Card"), h("smoothly-form", { key: '1e006ccad98f0a73c50a312dc39f6c8f07a89f96', looks: "grid", onSmoothlyFormSubmit: (e) => alert(JSON.stringify(e.detail)) }, h("smoothly-input", { key: 'af0e0cf9d593a4b95e6d9ccf38cb504bcf30c907', type: "card-number", name: "card" }, "Card #"), h("smoothly-input-submit", { key: '8a68e341800be545d7c4b242e60fac52bd56afd5', size: "icon", slot: "submit", color: "success", fill: "solid" }), h("smoothly-input", { key: '031b83a8b2b9f261741c9b430599681ee0c90442', type: "card-expires", name: "expires" }, "Expires"), h("smoothly-input", { key: '75f8bbc9cff24f247f88dfd276bef1adaf478586', type: "card-csc", name: "csc" }, "CVV/CVC"), h("smoothly-input", { key: '5043b806ecf84bb31b4f713778336063a771ffa9', type: "text", name: "name.first" }, "First Name"), h("smoothly-input", { key: '4314de22f36b48c796deec9258e71e282a434bbe', type: "text", name: "name.last" }, "Last Name"))));
+        return (h(Host, { key: '12a00d87271d0af126cadbad9443b858e477561e' }, h("h2", { key: 'b5f4db995901068b60a0005cd99e81c818ea19cc' }, "Card"), h("smoothly-form", { key: '327812f8a2d381d9806338675532029d4f42ce59', looks: "grid", onSmoothlyFormSubmit: (e) => alert(JSON.stringify(e.detail)) }, h("smoothly-input", { key: '3379bf37a7333b1599aef7c0362e3e45af69f99d', type: "card-number", name: "card" }, "Card #"), h("smoothly-input-submit", { key: '66f625510bd3f7f2bcd67671e39a55e4009c6f40', size: "icon", slot: "submit", color: "success", fill: "solid" }), h("smoothly-input", { key: '2a050bd1808ed0b2b75ba5a62581e942788d115f', type: "card-expires", name: "expires" }, "Expires"), h("smoothly-input", { key: '4ed6ae1574aaf02fde846bd23dc55782c0f066ac', type: "card-csc", name: "csc" }, "CVV/CVC"), h("smoothly-input", { key: 'd0e62a606289683f604016a935564f8602daa041', type: "text", name: "name.first" }, "First Name"), h("smoothly-input", { key: 'bfbd0c1a13053aa98d9a93dcc06ceae8b933561e', type: "text", name: "name.last" }, "Last Name"))));
     }
     static get is() { return "smoothly-form-demo-card"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/form/demo/controlled/index.js CHANGED Viewed

@@ -33,7 +33,7 @@ export class SmoothlyFormDemoControlled {
         event.detail.result(false);
     }
     render() {
-        return (h(Host, { key: '2131171a287333757dd2e257272b2151f445d00a' }, h("h2", { key: 'ae5d57d207b35d5d25568cb929551076b02b29bb' }, "Controlled"), h("smoothly-form", { key: '206b0c12bade21ffe5ec4357c27a11612adf99f7', readonly: true, looks: "grid", onSmoothlyFormSubmit: e => this.submitHandler(e) }, h("smoothly-input", { key: '9f607b8f55df8931f04e2df1746bc5b8f239700c', type: "text", name: "name", value: this.name }, "Name"), h("smoothly-input-select", { key: '5fe97133fc282b8a428ba9d1d28e27f5642857d3', name: "currency" }, h("span", { key: '76ca8e412897900e1054a70c2a2645ad3587d55d', slot: "label" }, "Currency"), this.currencies.map(currency => (h("smoothly-item", { selected: currency == this.currency, value: currency }, currency)))), h("smoothly-input", { key: '3099df2a407af93f416da0ff8e6093df00c49467' }, "Dummy"), h("smoothly-input-month", { key: '1c5c73a802f6a8e90b8163e8fb9b652e0ba073f6', name: "date", value: this.date, next: true, previous: true }, h("span", { key: '71f40ad3683c72e71366e0faa9750c536c82e05a', slot: "year-label" }, "Year"), h("span", { key: '71888a27f0f94e796c983a4f41c6a679be7d66fe', slot: "month-label" }, "Month")), h("smoothly-input-edit", { key: '1f2aba348ed5559946c30abede9e4656c30d887b', slot: "edit", size: "icon", color: "primary", fill: "default" }), h("smoothly-input-reset", { key: '6800fe757dab08be1ddb7c22e266b9093ffffefa', slot: "reset", size: "icon", color: "warning", fill: "default" }), h("smoothly-input-submit", { key: 'f0c595bc65fa6207cd01792e7fa782e3a59b8464', slot: "submit", size: "icon", color: "success" }))));
+        return (h(Host, { key: 'be70b1b758bbe11772a1ba8ba7dca4f5405ea651' }, h("h2", { key: '68973a8cf2107ecaa72790a917cf14191cfd0fa9' }, "Controlled"), h("smoothly-form", { key: '4da1c66f41c89d78c180b55b3ae1df15190eae0c', readonly: true, looks: "grid", onSmoothlyFormSubmit: e => this.submitHandler(e) }, h("smoothly-input", { key: '201cb10b36c39d6a5a98d456459b82ef9d3f0a7d', type: "text", name: "name", value: this.name }, "Name"), h("smoothly-input-select", { key: 'a434d27014de8a28230f7bc60a3b5c6b706005b6', name: "currency" }, h("span", { key: 'eefb198ba0a863dd7c6ff37162383522c722803c', slot: "label" }, "Currency"), this.currencies.map(currency => (h("smoothly-item", { selected: currency == this.currency, value: currency }, currency)))), h("smoothly-input", { key: '4813e2c249bd21afc6a2c1a6ab78793b49fa2d68' }, "Dummy"), h("smoothly-input-month", { key: '7225723a71776a7d9d88a21361443128a5893d42', name: "date", value: this.date, next: true, previous: true }, h("span", { key: 'be0572c78ce576807a459738426416e941a997fd', slot: "year-label" }, "Year"), h("span", { key: '99bb6cf5516bccb1721013e87ca2bec463341983', slot: "month-label" }, "Month")), h("smoothly-input-edit", { key: 'b7be05116d563ee33665f502c45bd01d9aaf61e1', slot: "edit", size: "icon", color: "primary", fill: "default" }), h("smoothly-input-reset", { key: 'bf423459f9b8717e9de26e4c900d054ea90baf7a', slot: "reset", size: "icon", color: "warning", fill: "default" }), h("smoothly-input-submit", { key: 'fd42172c00aae5c33f2b22e3d3bdccb6e71ec294', slot: "submit", size: "icon", color: "success" }))));
     }
     static get is() { return "smoothly-form-demo-controlled"; }
     static get encapsulation() { return "scoped"; }

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

@@ -21,7 +21,7 @@ export class SmoothlyFormDemoDate {
         event.detail.result(false);
     }
     render() {
-        return (h(Host, { key: '5784da3e53561844b6425a7e8577660a86c61f1a' }, h("h2", { key: '950410300b6a7f87362a139c35399856dc547080' }, "Date input"), h("smoothly-form", { key: '1197555e126930ab2acd0810309e3114b7644fee', looks: "border", type: "create", validator: this.validator, onSmoothlyFormSubmit: e => this.submitHandler(e) }, h("smoothly-input-date", { key: 'beeb9a1969cc330fd1e9c5a01a2d571aab854f87', name: "date" }, "Date"), h("smoothly-input-submit", { key: 'e9f8448d0442b0dcaf4a793cd6f86c4156dcea04', slot: "submit" }, h("smoothly-icon", { key: '998ef6127d165df5a08cfbafeb5ba64d9e87921a', name: "checkmark-outline" })))));
+        return (h(Host, { key: 'f6a0bf1656158091b0b9d6647707ec6c919cbf66' }, h("h2", { key: '210f22f5cbef0a441d7863764a0b6665afecdce1' }, "Date input"), h("smoothly-form", { key: 'eea3a74d6591f0193d8043d552a506868af1721d', looks: "border", type: "create", validator: this.validator, onSmoothlyFormSubmit: e => this.submitHandler(e) }, h("smoothly-input-date", { key: 'b9fc6aca0411799a7dd952a4ae27fff20bb7a085', name: "date" }, "Date"), h("smoothly-input-submit", { key: '9abd42160b4efd43ec4e976bd143871437d2d08b', slot: "submit" }, h("smoothly-icon", { key: '690f42105cb25db4275ba0c03bdaa6a16b24faa3', name: "checkmark-outline" })))));
     }
     static get is() { return "smoothly-form-demo-date"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/form/demo/date-range/index.js CHANGED Viewed

@@ -21,7 +21,7 @@ export class SmoothlyFormDemoDateRange {
         event.detail.result(false);
     }
     render() {
-        return (h(Host, { key: '5cbcb41cef877f0e9fb78ce81697fc2439abb4f0' }, h("h2", { key: '6a4ff28901af3515b1b7e6bf6b7feaf6a2d382a0' }, "Date-range input"), h("smoothly-form", { key: '9579ce7a593f945b634c669880b9eb39a41f059f', looks: "border", type: "create", validator: this.validator, onSmoothlyFormSubmit: e => this.submitHandler(e) }, h("smoothly-input-date-range", { key: '43a8f7e8882a37479f5a52d902798815828d86c4', name: "range" }, "Range"), h("smoothly-input-submit", { key: '72c48ab7aa2df6e594a2256969e31ad98543decc', slot: "submit" }, h("smoothly-icon", { key: '71ae5057364c903f6fae97c46d3acef660471cc4', name: "checkmark-outline" })))));
+        return (h(Host, { key: '3833e26bb2993e1c9e34f9ae0e769667be96068f' }, h("h2", { key: '22a384e50f46467bcbafa7be795461024c25b8b0' }, "Date-range input"), h("smoothly-form", { key: '201517c3e9cd58a086d978da2b80d94cbb4b7a36', looks: "border", type: "create", validator: this.validator, onSmoothlyFormSubmit: e => this.submitHandler(e) }, h("smoothly-input-date-range", { key: '6cb457ad45877b3e36c60cba1c8f364133648478', name: "range" }, "Range"), h("smoothly-input-submit", { key: '91e289602933e30ee845516efc85094ff03c453d', slot: "submit" }, h("smoothly-icon", { key: '93d0acb0034106aeadfb8727cb2bb7e6b1bad52a', name: "checkmark-outline" })))));
     }
     static get is() { return "smoothly-form-demo-date-range"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class SmoothlyFormDemo {
     render() {
-        return (h(Host, { key: '1ddc9511911663c0c6732b9e9b00b3e68d008216' }, h("div", { key: '8716afd31e7b741071f8fee4b939c7c1a2067343' }, h("smoothly-form-demo-all", { key: '0856d387645fdb66fddb050be10ed906fde59b58' }), h("smoothly-form-demo-pet", { key: '4f2b563802b34dcfb8905bcaedd5d6c1d9a53e40' }), h("smoothly-form-demo-card", { key: 'c362f29b57a6b321f0db6cbb4088fccdf1ba4ac7' }), h("smoothly-form-demo-login", { key: 'a14e189b9455e4ca98911c987f5082c2d52e14ef' }), h("smoothly-form-demo-prices", { key: '1244782f93a5e5cca8af5d076d6adf594c22eb65' }), h("smoothly-form-demo-typed", { key: '15e40ae537693e1c19ddce3c50311718aa76c531' }), h("smoothly-form-demo-transparent", { key: '2ecde43fd255a80832e8302a7ffbdc2e4c1308da' }), h("smoothly-form-demo-date", { key: 'e31bcebea1a06295cbcb5c3cf09f24e1e4678244' }), h("smoothly-form-demo-schedule", { key: 'c82d53e933bce5540f10ef60fb3d17b4566abd06' }), h("smoothly-form-demo-date-range", { key: '4789cc150fa75b61bf578777cc86db216d75ca13' }), h("smoothly-form-demo-controlled", { key: '451ad913671046be1255752b103066eeac96eae8' }))));
+        return (h(Host, { key: 'e6b40ea5e535c8fd4fbbe65aa060d0ba061f5a3e' }, h("div", { key: '848116c5bc43a4a5adb20ecf3f66a66b050e529c' }, h("smoothly-form-demo-all", { key: '44179c77bfd53bfa4f347a465a3f4000d4d94b08' }), h("smoothly-form-demo-pet", { key: '356b17321dc0f11e63c8dd4846c4e1d91c7b6b5c' }), h("smoothly-form-demo-card", { key: '2584856236b89b5818551f8826056c0a14ab6356' }), h("smoothly-form-demo-login", { key: 'dacc85e611dec4115fefc49f63463912b6718285' }), h("smoothly-form-demo-prices", { key: '500d6d4c056c79113b16bd0f67bfe0ab562cd8d8' }), h("smoothly-form-demo-typed", { key: '933cce32ed4668eb28140c0c01c8238cdf1526d2' }), h("smoothly-form-demo-transparent", { key: '2a39b5d64aaff4d53d703c9508df3de18d5a6ad6' }), h("smoothly-form-demo-date", { key: 'fb0a6356529047d3bbbebd1b5980c2884be0cbb6' }), h("smoothly-form-demo-schedule", { key: 'c7eb48895c714d436f04544af9519a93232f76d0' }), h("smoothly-form-demo-date-range", { key: '6370bf9ca0671705777b03e6b985361d06ee9d56' }), h("smoothly-form-demo-controlled", { key: 'abf920dd124a8c43ce7818ba29bb1931a4b90910' }))));
     }
     static get is() { return "smoothly-form-demo"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/form/demo/login/index.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class SmoothlyFormDemoLogin {
     render() {
-        return (h(Host, { key: 'a85b73dcf84b35975a7f8baac4cee7db4a96e070' }, h("h2", { key: 'fa5ab594ad42bbe9eb3c704803eef599da54feb8' }, "Login"), h("smoothly-form", { key: 'e6abe031a6d92a6d4bcd86c53b838140c4a74eaa', looks: "border" }, h("smoothly-input", { key: '0850b34c15fd675bec5d759c836588d0dee63c7a', type: "text", name: "username" }, "Username"), h("smoothly-input", { key: 'c22698a31ccfe3df8ee6e582d271540ec2759a28', type: "password", name: "password" }, "Password"), h("smoothly-input-reset", { key: '28a205519134187c020abd897f40a8ed4a29341f', slot: "reset", type: "form", size: "icon", color: "warning" }), h("smoothly-input-submit", { key: 'ecc29e9c09754fb89a21d1050234d5624a5aa855', slot: "submit" }))));
+        return (h(Host, { key: '2c9674e5f435d97bd0387de4d5b91443aa521196' }, h("h2", { key: 'd1440db142e8443b534d60a050416740e0ba82f9' }, "Login"), h("smoothly-form", { key: 'f1fa4c58d439b4465a4cc3eaad87637ecbf3ac51', looks: "border" }, h("smoothly-input", { key: 'c419a3578e1de751d77052c78992bfe9daef6238', type: "text", name: "username" }, "Username"), h("smoothly-input", { key: 'fbce70bd6ac07efbf59bb39ea1d728a3e78c6d77', type: "password", name: "password" }, "Password"), h("smoothly-input-reset", { key: '22df0cdc42340f207032132943cd3a5206dee49b', slot: "reset", type: "form", size: "icon", color: "warning" }), h("smoothly-input-submit", { key: '83967b0011d19526ec165d2888a5bd4533a4cf0c', slot: "submit" }))));
     }
     static get is() { return "smoothly-form-demo-login"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/form/demo/pet/index.js CHANGED Viewed

@@ -7,10 +7,10 @@ export class SmoothlyFormDemoPet {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '88099a7fd5f8f5a0d613fcff4b817545901d356d' }, h("h2", { key: '8dd122875fc1f4c742102f0e62a512db538baac8' }, "Pet"), h("h3", { key: 'bfb98de17657a63e7713c2b02f12f0be7eca9231' }, "Value"), h("smoothly-form", { key: '8395ed11ebcff8d9c8f66d3718324b08c0445d83', looks: "border", onSmoothlyFormSubmit: (e) => alert(JSON.stringify(e.detail)), onSmoothlyFormInput: e => (this.value = Object.assign({}, e.detail)) }, h("smoothly-input", { key: 'af774efd343074cf0582e5e94f163db036cb0879', type: "text", name: "name.first", value: "Johnny" }, "Name", h("smoothly-input-reset", { key: '84f83295dc09f2cae1660b7809f4f9fc5cd0703f', slot: "end" })), h("smoothly-input", { key: '6b7a0b6717c2ccb9aa0e2095afe94138213a3e67', type: "integer", name: "age" }, "Age (Years)"), h("smoothly-input-checkbox", { key: 'c0094ce4c1c2b3809642b501ed2daa5b11960cc6', name: "hasOwner", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
+        return (h(Host, { key: '1e20a61c9db6aafdf47e54ed7aaef6c1ca3d8bfa' }, h("h2", { key: '45492fefcf3cc0fb1a4010711cf10f0bded34893' }, "Pet"), h("h3", { key: 'bc05c80a795091886b94ba85dd89746e58159ea3' }, "Value"), h("smoothly-form", { key: '42a8ccf63773aa8b235931cc66415cfd0f1f0c14', looks: "border", onSmoothlyFormSubmit: (e) => alert(JSON.stringify(e.detail)), onSmoothlyFormInput: e => (this.value = Object.assign({}, e.detail)) }, h("smoothly-input", { key: '3606396ae683768fb6ef5e5940f43fbef81800c9', type: "text", name: "name.first", value: "Johnny" }, "Name", h("smoothly-input-reset", { key: '1128b00ce30571d90960f0747caf90394d08f093', slot: "end" })), h("smoothly-input", { key: 'fbd205ba349d3f754af21ebdc40434946bb712a4', type: "integer", name: "age" }, "Age (Years)"), h("smoothly-input-checkbox", { key: 'e4465a244c36403f0869f5d739d9cdea595136ce', name: "hasOwner", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
                 this.hasOwner = e.detail.hasOwner;
                 e.stopPropagation();
-            } }, "Has Owner", h("smoothly-input-reset", { key: 'fb26cd76bb633fb4c02d6cf886a013c85b63fd07', slot: "end" })), this.hasOwner && (h(Fragment, { key: '0ab3080a8779a0eb75fcad913be3f37674eef021' }, h("smoothly-input", { key: '35ae9e6768fc5d28e2977a505887e27453093f4f', type: "text", name: "owner.firstName", value: this.owner.firstName, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { firstName: e.detail["owner.firstName"] })) }, "Owner First Name", h("smoothly-input-reset", { key: 'ccae0cd45403a3a9cdc75d14199133478f2fbe33', slot: "end" })), h("smoothly-input", { key: 'd7a6162e9b0b05794d234dedef605673ca3df8ba', type: "text", name: "owner.lastName", value: this.owner.lastName, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { lastName: e.detail["owner.lastName"] })) }, "Owner Last Name"), h("smoothly-input-file", { key: 'b2200911dadfb95781f82dd3a4f31f4217861c84', name: "owner.picture" }, h("span", { key: '4b4d34c2d3956c655f688e320d8f1557fe250dbe', slot: "label" }, "Owner picture")), h("smoothly-input-date", { key: '1092a9022d1e49ad15a8a27cd053b77679e82605', name: "owner.birthday", value: this.owner.birthday, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { birthday: e.detail["owner.birthday"] })) }, "Owner birthday", h("smoothly-input-reset", { key: '7b3fb12d0755e96fdacca6a9b07fc65616b66330', slot: "end" })), h("smoothly-input-date-range", { key: 'd8f76a97851a6ba11085b42487f69b1056ffd829', name: "owner.ownedRange", start: (_a = this.owner.ownedRange) === null || _a === void 0 ? void 0 : _a.start, end: (_b = this.owner.ownedRange) === null || _b === void 0 ? void 0 : _b.end, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { ownedRange: e.detail["owner.ownedRange"] })) }, "Owner ownedRange", h("smoothly-input-reset", { key: 'c879d11886be04ab9bb8d090f7f8b56a67466b9b', slot: "end" })), h("smoothly-input-range", { key: '476435b88267d69b4f75880f0b14d762bad9e55b', name: "owner.height", step: 1, max: 250, value: this.owner.height, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { height: e.detail["owner.height"] })) }, "Owner's Height", h("smoothly-input-reset", { key: 'cfde948cafc0d28ad7eb6cd2eb6fe5147d2ad2e5', slot: "end" })), h("smoothly-input-select", { key: 'e31966b6b1f089057a709e0df0ee74cd4794bc4c', name: "owner.favoriteHat" }, h("span", { key: '0db0b774a2742f2ea985167bf2e9088e13ca2964', slot: "label" }, "Owner's Favorite Hat"), ["🎩 top hat", "🧢 cap", "👒 sun hat", "❌ none"].map((value, index) => (h("smoothly-item", { value: value, key: index, selected: this.owner.favoriteHat == value }, value))), h("smoothly-input-reset", { key: 'd7ed622d339284fad2057e703b2c7125fb15c01a', slot: "end" })), h("smoothly-input-color", { key: '537f228ad70488f3347bab5aa8e5fba50d7ad174', name: "owner.favoriteColor", value: this.owner.favoriteColor ? RGB.toHex(this.owner.favoriteColor) : undefined, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { favoriteColor: e.detail["owner.favoriteColor"] })) }, "Owner's Favorite Color", h("smoothly-input-reset", { key: '22b5f2f502e774827676fa238e72dbe083188421', slot: "end" })), h("smoothly-input-radio", { key: '71b2de0772f311b39af9db0a6c32e1ebdbe9b60e', name: "owner.favoritePizza", value: this.owner.favoritePizza, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { favoritePizza: e.detail["owner.favoritePizza"] })) }, h("span", { key: '178dadde1b90e0babc9e4d3d2576f96cbc876fdd', slot: "label" }, "Owner's Favorite Pizza"), ["vesuvio", "capricciosa", "quattro formaggi"].map((value, index) => (h("smoothly-input-radio-item", { value: value, key: index }, value)))), h("smoothly-input-checkbox", { key: '8ef6280e5514b390ab22b28146aadd819c89f95e', name: "owner.hasPet", checked: this.owner.hasPet, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { hasPet: e.detail["owner.hasPet"] })) }, "Has Pet"))), h("smoothly-tabs", { key: 'a566ef21f483d11b0d7ad4d42218244f715ab58c' }, h("smoothly-tab", { key: 'efeebdaf5ee1175c36b248e3ce5d4a1cb0e1e0f1', label: "Dog", name: "dog" }, h("smoothly-input", { key: 'f932840909cede23f122c6094a75525b14378f7c', type: "text", name: "dog.breed" }, "Breed"), h("smoothly-input-file", { key: 'b3b91c23a61e9ba9c20badb039ff555972fe3985', name: "dog.picture" }, h("span", { key: 'c74681d13077eb990d89716c7cd2c89950e44eb9', slot: "label" }, "Dog picture")), h("smoothly-input-date-time", { key: 'bd89d002065c7365b7c93033714eb1e21a8e4774', name: "dog.lastWalk" }, "Time of last walk"), h("smoothly-input-date", { key: '4ac749261e9edb101e85a7000376a813de212942', name: "dog.birthday" }, "Dog birthday"), h("smoothly-input-date-range", { key: '86e21db2c7e5c68e22f1583e7309318e6e4c6003', name: "dog.dateRange" }, "Dog date range"), h("smoothly-input-select", { key: 'efaaffb5b33575a079ca40319ef829ffef5af14e', name: "dog.favoriteHat" }, h("span", { key: 'b9a9268cad14e92950cba4e851b4d1eaf2206b30', slot: "label" }, "Dog's Favorite Hat"), ["🎩 top hat", "🧢 cap", "👒 sun hat", "❌ none"].map((value, index) => (h("smoothly-item", { value: value, key: index }, value)))), h("smoothly-input-color", { key: 'd6b56f10b63036a12423b84ebee35cb48faa659a', name: "dog.favoriteColor" }, "Dog's Favorite Color"), h("smoothly-input-radio", { key: '3be208ceca38e4023a06f0df9318e5dd03d7d010', name: "dog.favoritePizza" }, h("span", { key: 'e0b8eb2e2ac66bef9f9efe292d07dd77f5f936c9', slot: "label" }, "Dog's Favorite Pizza"), ["vesuvio", "capricciosa", "quattro formaggi"].map((value, index) => (h("smoothly-input-radio-item", { value: value, key: index }, value)))), h("smoothly-input-checkbox", { key: 'c532d5f50b3a18ecc1e5c52e8aa6b3548ab328c7', name: "dog.hasPet" }, "Has Pet")), h("smoothly-tab", { key: 'fc6d91caf8efbedf2c402cb83c88e8b674214f20', label: "Cat", name: "cat", open: true }, h("smoothly-input", { key: 'd6f645801298a26aaa9ea895f3c2c111463ac71d', name: "cat.favoriteFood" }, "Favorite Food")), h("smoothly-tab", { key: '1d54790895d58a973a0d9909cf037834d5e18d79', label: "Parrot", name: "parrot" }, h("smoothly-input", { key: '58f54b19c876d990ac7bd4aeaaca620dcebc6e04', type: "price", name: "parrot.price", currency: "EUR" }, "Summary Price"), h("smoothly-input-file", { key: 'c05427bbcb200a2021d4e1c5c24a5c5577e58a3f', name: "parrot.picture" }, h("span", { key: 'af2b39ee8335219617413cba2b2be4a17a1c8b6b', slot: "label" }, "Summary picture"), h("smoothly-input-clear", { key: '8a9c7f79972bb8367006428930583285c0e13b2b', slot: "end" })), h("smoothly-input-date", { key: 'c5de0ec3a5094ba38f7390cd738ffd5baac4ee3a', name: "parrot.birthday" }, "Summary birthday"), h("smoothly-input-date-range", { key: '5017f8fdc65f5f28a5917f3d478d01b5bdf09746', name: "parrot.ownedRange", start: "2020-01-01", end: "2020-01-15" }, "Summary ownedRange", h("smoothly-input-reset", { key: '1de78bfe5e684e17cc73588572573e7b8f81f8be', slot: "end" })), h("smoothly-input-range", { key: 'b33b26c10f148fab67de81002b5d17a34952c373', name: "parrot.height", label: "Height" }, h("smoothly-input-reset", { key: '0d197f376f0b195a1f5730fd35b3ca8f489af593', slot: "end" })), h("smoothly-input-select", { key: '3ef09882c984348ac99b741cfc0c9e2203bf5877', name: "parrot.favoriteHat" }, h("span", { key: '939906ee1a07df997032b9ef2ef126038d16ecb5', slot: "label" }, "Summary's Favorite Hat"), ["🎩 top hat", "🧢 cap", "👒 sun hat", "❌ none"].map((value, index) => (h("smoothly-item", { value: value, key: index }, value)))), h("smoothly-input-month", { key: '02131f864b606361fe0fe452e2ae77122c16cbb0', name: "parrot.month" }, h("span", { key: 'cd499075feb735fbbea8d15f008e7bca7efe6b10', slot: "month-label" }, "Summary month")), h("smoothly-input-color", { key: '04411c6e66665d6dd1eb87095ca08d42edf409da', name: "parrot.color" }, "Summary Color"), h("smoothly-input-radio", { key: 'bd220ce16e75be0cd9feb80df9d96b6d491eec93', name: "parrot.favoritePizza" }, h("span", { key: '8c0a80e74e9f0f6f4f3d7a6d850d0895d93aa7ae', slot: "label" }, "Summary's Favorite Pizza"), ["vesuvio", "capricciosa", "quattro formaggi"].map((value, index) => (h("smoothly-input-radio-item", { value: value, key: index }, value)))), h("smoothly-input-checkbox", { key: '51035c80dac7e59682c2258aa9104a088d907f6b', name: "parrot.hasPet" }, "Has Pet"))), h("smoothly-input-submit", { key: '28c6f78988d06a5d52aa4fc1e7b8c1322d360f52', size: "icon", slot: "submit", color: "success", fill: "solid" })), h("smoothly-display", { key: '20a329d0b039ff4058b7b7869ecb4927d82aaf0c', type: "json", value: this.value })));
+            } }, "Has Owner", h("smoothly-input-reset", { key: '7be8886cdeedbdeb87c28b2024c26bd4532f07ed', slot: "end" })), this.hasOwner && (h(Fragment, { key: '972c8da03c31ff920a5131daa1d046f7e80418c1' }, h("smoothly-input", { key: '4fd076e713c449b56e4d3b38b47009a3301c81df', type: "text", name: "owner.firstName", value: this.owner.firstName, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { firstName: e.detail["owner.firstName"] })) }, "Owner First Name", h("smoothly-input-reset", { key: '2af7bfb23d1d67903be625827d5d237640fc16b0', slot: "end" })), h("smoothly-input", { key: 'ba357c367c5006c2002dee8f597b0344572c6238', type: "text", name: "owner.lastName", value: this.owner.lastName, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { lastName: e.detail["owner.lastName"] })) }, "Owner Last Name"), h("smoothly-input-file", { key: '8caa1d54740a0e1fb3b29d709f6feb32c8c45a31', name: "owner.picture" }, h("span", { key: '10332335746aadd62719e024aaa6f825a5b2800b', slot: "label" }, "Owner picture")), h("smoothly-input-date", { key: 'c8c1afc04ae737af2b45c061ee21b4dfb1713869', name: "owner.birthday", value: this.owner.birthday, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { birthday: e.detail["owner.birthday"] })) }, "Owner birthday", h("smoothly-input-reset", { key: 'e13a649d0d308340d419d2355d7d48fbfce257e7', slot: "end" })), h("smoothly-input-date-range", { key: '952264d17218340e89fe16c40b6003ee94f34c9e', name: "owner.ownedRange", start: (_a = this.owner.ownedRange) === null || _a === void 0 ? void 0 : _a.start, end: (_b = this.owner.ownedRange) === null || _b === void 0 ? void 0 : _b.end, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { ownedRange: e.detail["owner.ownedRange"] })) }, "Owner ownedRange", h("smoothly-input-reset", { key: 'f99d74c312b6b7ddc3d3b169b672d3cc478cb3a3', slot: "end" })), h("smoothly-input-range", { key: 'd799c177fa826a5a582d1785add6d9ac512434a2', name: "owner.height", step: 1, max: 250, value: this.owner.height, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { height: e.detail["owner.height"] })) }, "Owner's Height", h("smoothly-input-reset", { key: 'a872fe1b4ae49293daad5ca2c781fe9abe514b95', slot: "end" })), h("smoothly-input-select", { key: 'cc6a5ef5238abc4dce3c2321c8f5c184c0dfe320', name: "owner.favoriteHat" }, h("span", { key: 'a073973ff9b090a82a23b81ca82875ac5155f822', slot: "label" }, "Owner's Favorite Hat"), ["🎩 top hat", "🧢 cap", "👒 sun hat", "❌ none"].map((value, index) => (h("smoothly-item", { value: value, key: index, selected: this.owner.favoriteHat == value }, value))), h("smoothly-input-reset", { key: 'c39f9d320b08362f082749f5338de8d4530f9da5', slot: "end" })), h("smoothly-input-color", { key: '50e462d1f87b19685f627deb90d9eb3d2798c15a', name: "owner.favoriteColor", value: this.owner.favoriteColor ? RGB.toHex(this.owner.favoriteColor) : undefined, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { favoriteColor: e.detail["owner.favoriteColor"] })) }, "Owner's Favorite Color", h("smoothly-input-reset", { key: 'd63535ee7ac6bae7424f60bff48cc5342594ced6', slot: "end" })), h("smoothly-input-radio", { key: 'f015946e2a17358be9f8279c5f92566101dd69ef', name: "owner.favoritePizza", value: this.owner.favoritePizza, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { favoritePizza: e.detail["owner.favoritePizza"] })) }, h("span", { key: '0e33220f442cf7e1b2908259c68bbf196fe2d2b2', slot: "label" }, "Owner's Favorite Pizza"), ["vesuvio", "capricciosa", "quattro formaggi"].map((value, index) => (h("smoothly-input-radio-item", { value: value, key: index }, value)))), h("smoothly-input-checkbox", { key: '7db7129193020bc6375b859f8eed9bbd3a774b72', name: "owner.hasPet", checked: this.owner.hasPet, onSmoothlyInput: e => (this.owner = Object.assign(Object.assign({}, this.owner), { hasPet: e.detail["owner.hasPet"] })) }, "Has Pet"))), h("smoothly-tabs", { key: 'c02261545ec207a2be19261796ff1ab0322221c7' }, h("smoothly-tab", { key: '64fc9145089d8175e87b77746a301d2a300227ff', label: "Dog", name: "dog" }, h("smoothly-input", { key: '93efb08d77a27ebeb0ec1ffaa31d8f20ad1c5c79', type: "text", name: "dog.breed" }, "Breed"), h("smoothly-input-file", { key: 'fbb759287fbb384110dab6bd67e526e0e1b87061', name: "dog.picture" }, h("span", { key: '75354c72313adfbf2f0590a4a1d629b056a584d0', slot: "label" }, "Dog picture")), h("smoothly-input-date-time", { key: '67cb08aae3427ea09418763cd4f5c89f4c12885c', name: "dog.lastWalk" }, "Time of last walk"), h("smoothly-input-date", { key: 'bfc8d1878f5e8c0b9e06dd6db93c5414d072aade', name: "dog.birthday" }, "Dog birthday"), h("smoothly-input-date-range", { key: 'd89333abe0b84513f7b59d0910ec979dc63e4f76', name: "dog.dateRange" }, "Dog date range"), h("smoothly-input-select", { key: '0ca96cd6cd0ed9d0d0b6e3212c4e545b1783edda', name: "dog.favoriteHat" }, h("span", { key: 'e9bb41040522fc010702793420c2f448fa2fc0af', slot: "label" }, "Dog's Favorite Hat"), ["🎩 top hat", "🧢 cap", "👒 sun hat", "❌ none"].map((value, index) => (h("smoothly-item", { value: value, key: index }, value)))), h("smoothly-input-color", { key: '609b660e2980b33ac4c437fd3a2cecc212fb700d', name: "dog.favoriteColor" }, "Dog's Favorite Color"), h("smoothly-input-radio", { key: '496506fd830c3da16c3cbb32ed7a93b54e1d023f', name: "dog.favoritePizza" }, h("span", { key: '59bdad0dc97036ca753d7de08dadcd9ab888df47', slot: "label" }, "Dog's Favorite Pizza"), ["vesuvio", "capricciosa", "quattro formaggi"].map((value, index) => (h("smoothly-input-radio-item", { value: value, key: index }, value)))), h("smoothly-input-checkbox", { key: '2ad32725e92f4eb3f6402751facf72563491a5a7', name: "dog.hasPet" }, "Has Pet")), h("smoothly-tab", { key: '09d4b79adbbf8772285a13ce1bb45fea67c3c019', label: "Cat", name: "cat", open: true }, h("smoothly-input", { key: '2a298883bf58261ec42cd8a7cb220421604233f2', name: "cat.favoriteFood" }, "Favorite Food")), h("smoothly-tab", { key: '6ded1101edaf7025402e2084cfa3d530a9440497', label: "Parrot", name: "parrot" }, h("smoothly-input", { key: 'c6fec8eff6ed07080cfcfd7e04a1accd9be5e698', type: "price", name: "parrot.price", currency: "EUR" }, "Summary Price"), h("smoothly-input-file", { key: '1ef6c74c21f3a530ea18a5fb843c0f39c5d09a5c', name: "parrot.picture" }, h("span", { key: '1506866be3f7d5032caa07277ddb4900adf796e4', slot: "label" }, "Summary picture"), h("smoothly-input-clear", { key: '2768b4e77018167d8c5459561627c7176f6af19e', slot: "end" })), h("smoothly-input-date", { key: '4482cadd8c81d8cf68d01d940759c9c8fa302889', name: "parrot.birthday" }, "Summary birthday"), h("smoothly-input-date-range", { key: '1db7a128f9fe548e64a26b106f0428cf027515dd', name: "parrot.ownedRange", start: "2020-01-01", end: "2020-01-15" }, "Summary ownedRange", h("smoothly-input-reset", { key: 'f61bb824149c3927ee9e7df5474bc1140b557c2d', slot: "end" })), h("smoothly-input-range", { key: '455be79335de1c32001a9baf41bc6601600a6f2b', name: "parrot.height", label: "Height" }, h("smoothly-input-reset", { key: 'f0c5284602a08d52331e2fca63bf561212bce4f9', slot: "end" })), h("smoothly-input-select", { key: '2b5d15b9bdda780755ddb704019bdf9b075f7593', name: "parrot.favoriteHat" }, h("span", { key: 'e23e7228157f39f8d5b565c6283e65d848d662f2', slot: "label" }, "Summary's Favorite Hat"), ["🎩 top hat", "🧢 cap", "👒 sun hat", "❌ none"].map((value, index) => (h("smoothly-item", { value: value, key: index }, value)))), h("smoothly-input-month", { key: '282eb367f0a8bbcc9b296358933c83a2ab1246a2', name: "parrot.month" }, h("span", { key: '46678c21d019c38d586da52a8ca5ba14e54f9545', slot: "month-label" }, "Summary month")), h("smoothly-input-color", { key: '74de10bf1eb9a54f1f5139f9b7549b84d90f521e', name: "parrot.color" }, "Summary Color"), h("smoothly-input-radio", { key: '2135343dbedb74df58a88e011921ed5cf93a8f69', name: "parrot.favoritePizza" }, h("span", { key: 'b549ce953d14b96b12496f989cf8c237fa697d6d', slot: "label" }, "Summary's Favorite Pizza"), ["vesuvio", "capricciosa", "quattro formaggi"].map((value, index) => (h("smoothly-input-radio-item", { value: value, key: index }, value)))), h("smoothly-input-checkbox", { key: 'e4fd4673ea5c4feb91142062527f7537f715738e', name: "parrot.hasPet" }, "Has Pet"))), h("smoothly-input-submit", { key: 'c757eec9af05b183a036119430533a2fdfa7ff26', size: "icon", slot: "submit", color: "success", fill: "solid" })), h("smoothly-display", { key: '94108e7af02550ba3ea038b879e0db56fe057833', type: "json", value: this.value })));
     }
     static get is() { return "smoothly-form-demo-pet"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/form/demo/prices/index.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class SmoothlyFormDemoPrices {
     render() {
-        return (h(Host, { key: 'ddaf2991aa275d3e43d7b103c1610e9c9d90e540' }, h("h2", { key: 'ade32ad1ec5facad78d0c02c60fb41e7ddc220b2' }, "Prices"), h("smoothly-form", { key: 'babe8324ffdccb239ea220e4f78b0eb8180935e2', looks: "line" }, h("smoothly-input", { key: '108bae0b5210eedc2ea7eecf733c307c81902c67', type: "price", name: "no" }, "No currency"), h("smoothly-input", { key: '8db15ba85d0a56d34e5af866cf41adb26c05f24f', type: "price", name: "crowns", currency: "SEK", toInteger: true }, "SEK (toInteger)"), h("smoothly-input", { key: 'de60d9244a12bbe6eff9ffc0b9a4ca4bb57059cc', type: "price", name: "usDollar", currency: "USD" }, "USD"), h("smoothly-input", { key: '86c99574c9b71982e761c36c749a299ee77035e1', type: "price", name: "pounds", currency: "GBP" }, "GBP"), h("smoothly-input", { key: '7f60f189c2f39bc4d90ea5e1a4ade4405424bfb2', type: "price", name: "peso", currency: "UYW" }, "UYW"), h("smoothly-input", { key: '2a6608e00e03a3b296df690c332d60d2538d5d5b', type: "price", name: "iceland", currency: "ISK" }, "ISK"), h("smoothly-input", { key: 'b69ac9c3668624b1050b4adbd40ea2988c89b7bc', type: "price", name: "Palladium", currency: "XPD" }, "XPD (Palladium)"), h("smoothly-input-reset", { key: 'e161b00dae69f994c8f8a1cf8b0d218c9b76b186', slot: "reset", fill: "default", type: "form", color: "warning" }), h("smoothly-input-submit", { key: '620aed2e802906bc5c69b9dada89cdc5e01cc2d8', slot: "submit" }))));
+        return (h(Host, { key: 'c1873c86bb44177e638d7b52d7bbbcb1d0482e1b' }, h("h2", { key: 'a8edb5f0241dac96350d75eaad7b0c78adf1c13b' }, "Prices"), h("smoothly-form", { key: '143874192e2caf3ce0297983e1c5ecc6002705a2', looks: "line" }, h("smoothly-input", { key: '151a20903ab8024b291ef1cd6f868bfcbdfdf187', type: "price", name: "no" }, "No currency"), h("smoothly-input", { key: 'c7a5959241c42d8fee2d741064585c1c79560544', type: "price", name: "crowns", currency: "SEK", toInteger: true }, "SEK (toInteger)"), h("smoothly-input", { key: 'cfe92d5a2e94598e728d0f0b815652e4ed6d33e1', type: "price", name: "usDollar", currency: "USD" }, "USD"), h("smoothly-input", { key: 'bd3ffd16af42eb13fe3d6ea4ddad8ceb83827671', type: "price", name: "pounds", currency: "GBP" }, "GBP"), h("smoothly-input", { key: 'a12b9078e45b65a5b281a0c4ff40caf6446522b8', type: "price", name: "peso", currency: "UYW" }, "UYW"), h("smoothly-input", { key: 'a8a1efcb2bacb8e56b552aeda19e65eca5690fd3', type: "price", name: "iceland", currency: "ISK" }, "ISK"), h("smoothly-input", { key: 'be59abc2f31cb215c192566ca4218a19cf2f004a', type: "price", name: "Palladium", currency: "XPD" }, "XPD (Palladium)"), h("smoothly-input-reset", { key: 'a331ae378f5c10553c3b7f7669322c3d4e9d9973', slot: "reset", fill: "default", type: "form", color: "warning" }), h("smoothly-input-submit", { key: 'bef886536c5366779bf3c7c10e35a3e42f65075b', slot: "submit" }))));
     }
     static get is() { return "smoothly-form-demo-prices"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/form/demo/schedule/index.js CHANGED Viewed

@@ -14,7 +14,7 @@ var TimeTable;
 })(TimeTable || (TimeTable = {}));
 export class SmoothlyFormDemoPrices {
     render() {
-        return (h(Host, { key: '6c26fc85d61f779af5fcab96c9e284d5b878688b' }, h("h2", { key: '03b826fce15279c6e12a41b7b36801ae7ee4c519' }, "Schedule"), h("smoothly-form", { key: 'd346491153ecef66014e4094e2a146d9f22d05d2', looks: "line", validator: TimeTable.type }, h("smoothly-input-date", { key: '2c9e97babe7f546172b3c2cba82196c023a202bd', name: "schedule.0.date" }, "Date"), h("smoothly-input", { key: 'ce96e610d3ccd1dc33a73bd50cdaa76a37cd5bdb', name: "schedule.0.amount", type: "price" }, "Amount"), h("smoothly-input-date", { key: '53f1beac7d55968d08bac99d593df36e1aca34be', name: "schedule.1.date" }, "Date"), h("smoothly-input", { key: '4d576bb6887c81df8b3bc70da45b6218d1dce3e9', name: "schedule.1.amount", type: "price" }, "Amount"), h("smoothly-input-date", { key: 'f743cfaa8782867a30cd80320c684b7a50aea546', name: "schedule.2.date" }, "Date"), h("smoothly-input", { key: '7a9b171261c173302c61ce089849cdc0ddddf9cf', name: "schedule.2.amount", type: "price" }, "Amount"), h("smoothly-input-reset", { key: 'fe8b3bb4f160c7f40d1f383e39ac700a5e00ff07', slot: "reset", fill: "default", type: "form", color: "warning" }), h("smoothly-input-submit", { key: '2f494f54c287b73b73dd94956018360affffec4c', slot: "submit" }))));
+        return (h(Host, { key: 'af726abe173fe267f43278671ab53c62184ca7b3' }, h("h2", { key: '85994b1d612017c07fcbff85d1c7520419c4125f' }, "Schedule"), h("smoothly-form", { key: '7bace3476a4344bb7ece715a3d797acadf40dd58', looks: "line", validator: TimeTable.type }, h("smoothly-input-date", { key: '5450e239098e87b0eacc7da44459d35dc30bb5dc', name: "schedule.0.date" }, "Date"), h("smoothly-input", { key: '9cc1b52c9f636a99b549267198503d47b3afb0f8', name: "schedule.0.amount", type: "price" }, "Amount"), h("smoothly-input-date", { key: '5f298fa2efabe38e2aef28d9c992ec1ec0804b46', name: "schedule.1.date" }, "Date"), h("smoothly-input", { key: 'b71aba89d7e05258226fbbaaf705dc9c435a1c37', name: "schedule.1.amount", type: "price" }, "Amount"), h("smoothly-input-date", { key: '22095cea02b58862ae930857daee6242a51b33b6', name: "schedule.2.date" }, "Date"), h("smoothly-input", { key: '9c33bd7be7e0de733986cc2ef6f9c2e52b3f273a', name: "schedule.2.amount", type: "price" }, "Amount"), h("smoothly-input-reset", { key: 'b02b3225e549665b393a77627da3304881473f9e', slot: "reset", fill: "default", type: "form", color: "warning" }), h("smoothly-input-submit", { key: '25d0d08fb11531e71d0f9c4a9394d3bb36a0565c', slot: "submit" }))));
     }
     static get is() { return "smoothly-form-demo-schedule"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/form/demo/transparent/index.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class SmoothlyFormDemoTransparent {
     render() {
-        return (h(Host, { key: '5a3fdbd366a32b297862b100c85177af79f16d86' }, h("h2", { key: 'c38d0dac4ca5c387c8a0e88f1aa016ad671d01f7' }, "Transparent"), h("smoothly-form", { key: '810ccd9b0ffdef37a833a09b7168decb20264262', looks: "transparent", onSmoothlyFormSubmit: e => console.log(e.detail.value) }, h("smoothly-input-file", { key: '58587dd36208d8ebbc60442c145107d8fe0362b8', name: "file" }, h("span", { key: '3d30591aded5f5b78d8a94c4c8c2df5e3265eda8', slot: "label" }, "File"), h("smoothly-icon", { key: '85ca32d6d83edce9365e547c7d821a97dafc6d50', slot: "button", name: "folder-open-outline", size: "small" })), h("smoothly-input", { key: '34ae4b828a10983ead287a522811715705df3aa6', type: "duration", looks: "transparent", placeholder: "h:mm" }, "Input"), h("smoothly-input-date", { key: 'e562c31da45ad29784b6e6fd0c9790dec0056f33' }, "Date"), h("smoothly-input-date-range", { key: 'e76232bb888f0206eb97573066b02edb984e0d53' }, "Date Range"), h("smoothly-input-select", { key: 'c578c9b0cce028fd15bee9defb3d7ec4ef00a3d5', name: "transport" }, h("smoothly-item", { key: '41cb244bc1e5a71b086f61e0d691bed6e11675b0', value: "plane" }, h("smoothly-icon", { key: 'b47d61e8b5639f49094b35b35a571bed2024f3e1', name: "airplane-outline" })), h("smoothly-item", { key: '1519381101efae10236102ff61b34cf7ffd8687b', value: "car" }, h("smoothly-icon", { key: '045e2d48e1dbc887a582be5bf6541663bce0c585', name: "car-outline" })), h("smoothly-item", { key: '3f15f91ba811d4cb8b690abbe49c374b63003820', value: "bus", selected: true }, h("smoothly-icon", { key: 'bc1141e336893ec5e65db1513c95cc390ca54e60', name: "bus-outline" }))), h("smoothly-input-submit", { key: '9e6a13bc16f206d4b545c9dd8b09ca4babf9719d', icon: "checkbox-outline" }))));
+        return (h(Host, { key: 'fc0659542a5e17d903ecb4da9aee7679ef39cdec' }, h("h2", { key: '1d1b9ac96324d7c421cdb19d2734bd2fbbb5a8fb' }, "Transparent"), h("smoothly-form", { key: '992b6ce5260a8af1f63b9025faca67acef755dc2', looks: "transparent", onSmoothlyFormSubmit: e => console.log(e.detail.value) }, h("smoothly-input-file", { key: 'e79178c59b6617703cb42fdeb16a246047110f85', name: "file" }, h("span", { key: '0c34c069e55446fdf26eef201f492000b1692a3e', slot: "label" }, "File"), h("smoothly-icon", { key: '85c1a66268e78a94b308be411ff5cb712890a1b0', slot: "button", name: "folder-open-outline", size: "small" })), h("smoothly-input", { key: '64c3c4206bf9455f5c923c427cae185c5f84ca60', type: "duration", looks: "transparent", placeholder: "h:mm" }, "Input"), h("smoothly-input-date", { key: '006326702c0d9d6f349292de7531b390e6b7add8' }, "Date"), h("smoothly-input-date-range", { key: '78784fe14706cbbb5d8ef6d040891127991a418b' }, "Date Range"), h("smoothly-input-select", { key: 'e48d3d2cd97b472558f2cbfb7c19aed71c505ed1', name: "transport" }, h("smoothly-item", { key: 'afdc23c9ed61e272893ddd45b70e8d62f0e613fc', value: "plane" }, h("smoothly-icon", { key: 'ba6c15f1ac729420811ff77b355424426f2b35eb', name: "airplane-outline" })), h("smoothly-item", { key: '90c591649758b43835de47380f9cf0ba89665a43', value: "car" }, h("smoothly-icon", { key: '170d4aeeec48e2ea8d57ee17421daa0eacbd6125', name: "car-outline" })), h("smoothly-item", { key: 'fce1fc75af8d839f10d1057d699b5049cd4bee84', value: "bus", selected: true }, h("smoothly-icon", { key: '1fbb7c4afc326efe8d569c5c032fb7d285876974', name: "bus-outline" }))), h("smoothly-input-submit", { key: 'fd292fb5b88f89e103d843e95b14ccf7a3ab9871', icon: "checkbox-outline" }))));
     }
     static get is() { return "smoothly-form-demo-transparent"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/form/demo/typed/index.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { isoly } from "isoly";
 import { Contact } from "./Contact";
 export class SmoothlyFormDemoTyped {
     render() {
-        return (h(Host, { key: 'b2defb07fd1fef12b85e5c983c3ec9a06eaacd5c' }, h("h2", { key: '4f45fac5e8febcc52cdb7ee2e3cb6e6586c04f34' }, "Typed Contact"), h("smoothly-form", { key: '169c7879c27f2e65a5da9f44f2066e65fa4b09db', validator: Contact.type }, h("smoothly-input", { key: '7e11e762f2f88ad82b3bb584f5f151624a73cd37', name: "name.first" }, "First Name"), h("smoothly-input", { key: '207226d54b3ac9250512c962200e97e06dfb237d', name: "name.middle" }, "Middle Name (optional)"), h("smoothly-input", { key: '5235de33144f057b20a46353ae13c7eaa15fd97b', name: "name.last" }, "Last Name"), h("smoothly-input", { key: '3e1607c6f2301ca86a1f430e2c6d3d12c8035f70', name: "age", type: "integer" }, "Age (18-120)"), h("smoothly-input-select", { key: 'd1fa86d5f8ca6e8a4d0c40e363f60c9ca53aad98', name: "country" }, h("span", { key: 'b54fe7f96a97014e3baac54b1ac5f903b88b170b', slot: "label" }, "Country"), isoly.CountryCode.Alpha2.values.map(country => (h("smoothly-item", { value: country }, isoly.CountryCode.Name.en.from(country))))), h("smoothly-input-date", { key: 'c616775dda21611243a88c6bf23ba280e9e89fb3', name: "birthday" }, "Date of birth"), h("smoothly-input-reset", { key: '11c1023ca25b7cae8afb727e1fb21f28ee1e7644', slot: "reset", type: "form", size: "icon", color: "warning" }), h("smoothly-input-submit", { key: '3dbb734a1ef36ab8104dc6588c622b38567e61b2', slot: "submit", size: "icon", color: "success" }))));
+        return (h(Host, { key: '2dbbb21af22c211fa354d7213c94088ec796cf8d' }, h("h2", { key: 'f944fd5f9a04be35baa6d04760ef8fd083f84c6c' }, "Typed Contact"), h("smoothly-form", { key: '43b74057023eda58b4b89ba9c52e59f9f8fd2329', validator: Contact.type }, h("smoothly-input", { key: '6179ce405787b71e56af49ab16cac3d225476c9b', name: "name.first" }, "First Name"), h("smoothly-input", { key: '41568d9f6447f715c2d9ca414aeca6e103085df8', name: "name.middle" }, "Middle Name (optional)"), h("smoothly-input", { key: '71407b265ac5f00f5db126ae0e1b5ced6c329977', name: "name.last" }, "Last Name"), h("smoothly-input", { key: 'f2dcbd6af35236299eb573d573efa521672c0a4e', name: "age", type: "integer" }, "Age (18-120)"), h("smoothly-input-select", { key: 'd881ad1a7d8f3b3279c9f4aac5473514a2b95d5f', name: "country" }, h("span", { key: '1606d2a8eb5f7160abd3c6a4e983561808fabca5', slot: "label" }, "Country"), isoly.CountryCode.Alpha2.values.map(country => (h("smoothly-item", { value: country }, isoly.CountryCode.Name.en.from(country))))), h("smoothly-input-date", { key: '09e7d8d8f9250304279b1d245044b919c147cc1f', name: "birthday" }, "Date of birth"), h("smoothly-input-reset", { key: 'd212e7a41fba21fc4ba2efd9349834f4c5d8a41d', slot: "reset", type: "form", size: "icon", color: "warning" }), h("smoothly-input-submit", { key: 'c5e62e8b33276b0f5e16e5c37538cca20c5e2ace', slot: "submit", size: "icon", color: "success" }))));
     }
     static get is() { return "smoothly-form-demo-typed"; }
     static get encapsulation() { return "scoped"; }