npm - smoothly - Versions diffs - 1.113.0 → 1.114.0 - Mend

smoothly 1.113.0 → 1.114.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 (366) hide show

package/dist/cjs/smoothly-input-checkbox-demo.cjs.entry.js CHANGED Viewed

@@ -8,7 +8,7 @@ const SmoothlyInputCheckboxDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '62cd9b578b793b42ce87d31e8c479923c35c328a' }, index.h("h2", { key: '42c842216a71aa13d2be4383bc5fb18884ef7a54' }, "All inputs"), index.h("smoothly-form", { key: 'e2cb3ffdc3354e2447adaa34779a691a80e0b047', looks: "grid", readonly: true, action: "https://api.toiletapi.com/6b12fd2f-e896-46f9-b38f-25cf42cee4b4" }, index.h("smoothly-input", { key: '8911d921b47dcaf038125b4cb9891adda2e1f53a', readonly: true, name: "First Name", value: "John" }, "First name"), index.h("smoothly-input", { key: '82186c019e062fbf7039b2c812c1004f23f987a9', name: "Last name", value: "Doe" }, "Last name", index.h("smoothly-input-clear", { key: '8c0dad76fdf225a132a80e583ea34ba67b2c7595', size: "icon", slot: "end" })), index.h("smoothly-input", { key: '6dd2a725472e678d096093ea238d9386b0a97086', type: "phone", name: "Phone", value: "777888999" }, "Phone", index.h("smoothly-input-reset", { key: 'a1a998126419d72bc94e02be86a40a9fbc58e7aa', size: "icon", slot: "end" })), index.h("smoothly-input-radio", { key: 'fd3e7fda9a293e1e137412fdefc4b89942f20350', clearable: true, name: "radioFirstInput" }, index.h("p", { key: '3f295c0de2d9531e30783e195715e2fb4fcf612b', slot: "label" }, "Clearable"), index.h("smoothly-input-radio-item", { key: 'dd604c8017fccab9624aff3c4bdd0c754f41bf2f', slot: "options", value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: 'f7b8bbfcd00753c0ffc7612ede095d678dfedc99', selected: true, slot: "options", value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: '8185b37554d6e9973897d89ee860518a24d35049', slot: "options", value: "third" }, "Label 3")), index.h("smoothly-input-color", { key: '2304148d0df81929fcac680338a3696d9c9a8a47', name: "color", value: "#479f56", output: "rgb" }, "Color"), index.h("smoothly-input-select", { key: 'd676038323375ed173dddac5a2490e9037c60ea3', menuHeight: "7.5items", placeholder: "Select...", multiple: true, name: "select-month" }, index.h("label", { key: 'bbbd77b064171c2fb7ddbfefde89f494212e894b', slot: "label" }, "Month"), index.h("smoothly-item", { key: '5be4f0e88b14a1225fb5fd9dbf8bada60c68193c', value: "1" }, "January"), index.h("smoothly-item", { key: '39a347df6c77fdc8a7abc932bfe4f05976f6efb7', value: "2" }, "February"), index.h("smoothly-item", { key: 'c9cde1792b5512fb61f516f41d8087003f7e1434', value: "3" }, "March"), index.h("smoothly-item", { key: '1627e2bc2d340e2e9dcd846a5f151a3ccc37a418', value: "4" }, "April"), index.h("smoothly-item", { key: '557ca46be77349ce3ded22b079216efd1f0d03c3', value: "5" }, "May"), index.h("smoothly-item", { key: '6a50c4949f11afe60e6f7f3bfa0fb3099cd6c7d3', value: "6" }, "June"), index.h("smoothly-item", { key: '84fe924e744e8257edc6ae0bccbfa6a7f4a4b265', value: "7" }, "July"), index.h("smoothly-item", { key: 'b3143d747989a72d65e91cb2a0cf9a2cadba2504', value: "8" }, "August"), index.h("smoothly-item", { key: '24e5c25ae1a8bcd5b34aad7512fefe67f04d0918', value: "9" }, "September"), index.h("smoothly-item", { key: 'f8688b010b6c2ffdeede228d394104b42c58a988', value: "10" }, "October"), index.h("smoothly-item", { key: 'd8ca163502e7e04c6d8fab2d8863e1a23e61a085', value: "11" }, "November"), index.h("smoothly-item", { key: 'b50d2a5691e9588642596d2e24cbede7ffa0845f', value: "12" }, "December"), index.h("smoothly-input-clear", { key: '3c0d229fffc6ccf6132c5a23c4d0bd3f8589c861', size: "icon", slot: "end" })), index.h("smoothly-input-select", { key: 'be5f84ecaf35bedd71629621691311cfca695766', name: "select-icon", clearable: false, showSelected: false }, index.h("smoothly-item", { key: 'c8e2502dc5d05461b348ec685dd2f9f5870aed56', value: "folder", selected: true }, index.h("smoothly-icon", { key: 'ffa5a4176f0d7ecebbfbd867289364939bb2940a', size: "small", name: "folder-outline" })), index.h("smoothly-item", { key: 'fc028e2b8b5334d38e496b3726790e180664a8b4', value: "camera" }, index.h("smoothly-icon", { key: '0adfbc64668bceefb47187d9a7614609c2105f35', size: "small", name: "camera-outline" }))), index.h("smoothly-input-checkbox", { key: '886eb606828944b48dc7d306fd0831791798ace0', name: "checkbox" }, "Check the box"), index.h("smoothly-input-checkbox", { key: 'ea7d537284fccd859c22cadadc5551c988728c24', name: "checkbox2", checked: true }, "Check the box 2"), index.h("smoothly-input-date-range", { key: '32800d12cb52e378e665fa46e6acad80b5753226', start: index$1.isoly.Date.now(), end: index$1.isoly.Date.now() }), index.h("smoothly-input-date", { key: 'af7ec6c95f6dedd66c9bf469b50978de6eb6da0a', name: "date" }, "Date", index.h("smoothly-input-clear", { key: '9203d6b1561777759d1912af409696e24313b7ee', slot: "end" })), index.h("smoothly-input-range", { key: 'cbe6d674d73f5c202e4f49d4d5e16b347024d34c', step: 1, name: "range3", value: 20000 }, "Select"), index.h("smoothly-input", { key: '4b24a68961da14058371426c905c41dfde4eefd5', name: "pets.0.name" }, "First Pet's Name"), index.h("smoothly-input-range", { key: 'a9a1c86c1fe113995119f89f6390b51acd64312b', name: "pets.0.age", max: 100, step: 1 }, "First Pet's Age"), index.h("smoothly-input", { key: '602580c1b69eafece089ca242f7500e7fc2ee0cb', name: "pets.1.name" }, "Second Pet's Name"), index.h("smoothly-input-range", { key: '876655986846490d80cddb89b7b02a934cc3350f', name: "pets.1.age", max: 100, step: 1 }, "Second Pet's Age"), index.h("smoothly-input", { key: 'a5f37ec6acede820d50a1da9bb245a55ea12bff2', name: "pets.2.name" }, "Third Pet's Name"), index.h("smoothly-input-range", { key: '12caf47761fb7c802b37dfd0faa1c51727305936', name: "pets.2.age", max: 100, step: 1 }, "Third Pet's Age"), index.h("smoothly-input-file", { key: 'ac56467f4fca8f78131a8bdee6f8f03816508661', name: "profile", placeholder: "Click or drag your profile picture here..." }, index.h("span", { key: 'd4f91804a33080174dd6b563303e42e2d9d18579', slot: "label" }, "Profile"), index.h("smoothly-icon", { key: '7dee62dcf2298dbbaa9ef9c63ca32457d77ae95b', slot: "button", name: "person-circle-outline", size: "tiny", fill: "default" })), index.h("smoothly-input-clear", { key: '54a876639427fb7c31310c57247b823115a9ffe8', fill: "default", type: "form", color: "warning", slot: "clear", size: "icon", shape: "rounded" }), index.h("smoothly-input-edit", { key: 'd9549efa42c9b880e218bb7ed917c437cc043e40', fill: "default", type: "form", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), index.h("smoothly-input-reset", { key: 'dfa1dc2459a11ee9d24dd5d90a9c7a0e36f8eb8a', fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), index.h("smoothly-input-submit", { key: '6f8b2f85467de40d67965350ad262977d4d06a75', delete: true, slot: "delete", color: "danger", size: "icon", shape: "rounded" }), index.h("smoothly-input-submit", { key: '3919204248c4b41f8ff4452d2d577d825e74a727', fill: "default", color: "success", slot: "submit", size: "icon", shape: "rounded" }))));
+        return (index.h(index.Host, { key: 'f5df2f70e81f8189b2ed0fc110469fd31118f07e' }, index.h("h2", { key: 'f1805f70b5770fdf51ba8d7cd00ef7ddd2ab7706' }, "All inputs"), index.h("smoothly-form", { key: 'bcf287313fbda727ff66a43111c87f442ef2f77a', looks: "grid", readonly: true, action: "https://api.toiletapi.com/6b12fd2f-e896-46f9-b38f-25cf42cee4b4" }, index.h("smoothly-input", { key: '5ad0e09227c953003294064ec9a74a34dad99884', readonly: true, name: "First Name", value: "John" }, "First name"), index.h("smoothly-input", { key: '4a827cff07982019b2d95e4e440bd2976aeb49da', name: "Last name", value: "Doe" }, "Last name", index.h("smoothly-input-clear", { key: '9e4989baaba55d9d456c243354b611986ba1c42c', size: "icon", slot: "end" })), index.h("smoothly-input", { key: 'aa0d1fc77c155bc236459b40500802ad58716194', type: "phone", name: "Phone", value: "777888999" }, "Phone", index.h("smoothly-input-reset", { key: 'd80e1b9acbd7cf53acfced029cc8d5a0bd24d161', size: "icon", slot: "end" })), index.h("smoothly-input-radio", { key: '630fd379a65538192fb134f75cbcf55a282d8c44', clearable: true, name: "radioFirstInput" }, index.h("p", { key: '2b027b673dbcf3c4bf9d1f24c03f857f7477f59c', slot: "label" }, "Clearable"), index.h("smoothly-input-radio-item", { key: '3ba57b27799284c623037056b2f7d57637055dd8', slot: "options", value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: 'cc4daf5e360276819fb0166a7023afff132dc43a', selected: true, slot: "options", value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: '120fd9fd0758c17b5fb8926425b032a8a1065612', slot: "options", value: "third" }, "Label 3")), index.h("smoothly-input-color", { key: '1f326fa25ce6a00ecbebe2186cec26c6efdb6eb3', name: "color", value: "#479f56", output: "rgb" }, "Color"), index.h("smoothly-input-select", { key: 'a899972ebf9f79209c56d81b544184690b85dfaf', menuHeight: "7.5items", placeholder: "Select...", multiple: true, name: "select-month" }, index.h("label", { key: 'b4e4e3c4eebad921eb830a242531a650bef0acd3', slot: "label" }, "Month"), index.h("smoothly-item", { key: '13f7abe4d7201572786405f17557d44409a8ef3a', value: "1" }, "January"), index.h("smoothly-item", { key: 'd83d6bc200a1f124b850b8636420b388c47879f7', value: "2" }, "February"), index.h("smoothly-item", { key: 'b04c6c85a5db9e867ab2bc931794fe1105855c9e', value: "3" }, "March"), index.h("smoothly-item", { key: 'd5e5c01012f4c278144fcf08c59abcc09ac62533', value: "4" }, "April"), index.h("smoothly-item", { key: 'c4c2b5b4cb3c57f166ef809b0dbba85f0ec190e3', value: "5" }, "May"), index.h("smoothly-item", { key: 'cac9c84f18108bce0025a81635a3b8bdcead4f54', value: "6" }, "June"), index.h("smoothly-item", { key: '0f6c56fcca25ae22f7f22e27a21b379de9ca24b2', value: "7" }, "July"), index.h("smoothly-item", { key: '79019fb60f0b87844767ef3463fd2c5dbd309fa8', value: "8" }, "August"), index.h("smoothly-item", { key: '9a8d4fd4fc756c9b9925f8d176a99aa3bcab935f', value: "9" }, "September"), index.h("smoothly-item", { key: '63e1671cec1610bafe6e962af88f1715ee2dfb28', value: "10" }, "October"), index.h("smoothly-item", { key: '1c200d8d7e11673ce27d2d683a2b8bb9954ca552', value: "11" }, "November"), index.h("smoothly-item", { key: 'e6caeaac708433debb27ab47ec82b51c4ad16c2a', value: "12" }, "December"), index.h("smoothly-input-clear", { key: '8d2405dc1d53e2434dbad4b69990b49651e8c557', size: "icon", slot: "end" })), index.h("smoothly-input-select", { key: '8cb2fe5eb8b152d32045c4a150c7c790ad35d922', name: "select-icon", clearable: false, showSelected: false }, index.h("smoothly-item", { key: 'ae42e4ffed610af298235e7ebe3e1ec6b05d9e13', value: "folder", selected: true }, index.h("smoothly-icon", { key: '328f1295b0eb870bc80151c46a045bc5c180e998', size: "small", name: "folder-outline" })), index.h("smoothly-item", { key: 'c35837e991468d32bd1630519be188266558a976', value: "camera" }, index.h("smoothly-icon", { key: '02479e84c1ba0c5aca2bdbbe9cd72929e0572f0f', size: "small", name: "camera-outline" }))), index.h("smoothly-input-checkbox", { key: '6aa26dafb6d138c976683426757846b816c42dbc', name: "checkbox" }, "Check the box"), index.h("smoothly-input-checkbox", { key: '7bd63dbdc68f36325d579cf0d966fffa3435567c', name: "checkbox2", checked: true }, "Check the box 2"), index.h("smoothly-input-date-range", { key: '9183d69eae1040aede96d59cb5ff639335f43fb6', start: index$1.isoly.Date.now(), end: index$1.isoly.Date.now() }), index.h("smoothly-input-date", { key: '2650ad84a1f017d2672671af94c7c7991ea3e61b', name: "date" }, "Date", index.h("smoothly-input-clear", { key: 'e0f0b0c02189d0b930840e3a59a9adedd28a696a', slot: "end" })), index.h("smoothly-input-range", { key: '693b3fe5a9dd2aebf1dfb4ebb705ce0ecd5028a9', step: 1, name: "range3", value: 20000 }, "Select"), index.h("smoothly-input", { key: '0ac5d490c72cb234bfd328ffbd3cf3659bbc9aed', name: "pets.0.name" }, "First Pet's Name"), index.h("smoothly-input-range", { key: 'c86356ba541ab262d357dd194289ec2778ebbb07', name: "pets.0.age", max: 100, step: 1 }, "First Pet's Age"), index.h("smoothly-input", { key: 'd481ef9163d12757e43508af1e7ff0d7720ce31a', name: "pets.1.name" }, "Second Pet's Name"), index.h("smoothly-input-range", { key: 'e7bf653532ff0c957e6c3e82383cac5dc3210f40', name: "pets.1.age", max: 100, step: 1 }, "Second Pet's Age"), index.h("smoothly-input", { key: '27af92d8ccc19451a7786deb1cf8f59d10991e91', name: "pets.2.name" }, "Third Pet's Name"), index.h("smoothly-input-range", { key: 'fd9eb72093cf6f6c6fa7bdaa98a4d6066fbb43dc', name: "pets.2.age", max: 100, step: 1 }, "Third Pet's Age"), index.h("smoothly-input-file", { key: 'd444f859d0fdf764df0da9457d6a71e594ae560e', name: "profile", placeholder: "Click or drag your profile picture here..." }, index.h("span", { key: 'b044dca389ede3b37362ad564a5e84e9ccfd9c23', slot: "label" }, "Profile"), index.h("smoothly-icon", { key: 'adf0819cbb38fb45501aff5ba55ea75dd225b1e2', slot: "button", name: "person-circle-outline", size: "tiny", fill: "default" })), index.h("smoothly-input-clear", { key: 'ed14b047e2a63cbc29e7d01063abeebbe62e72ea', fill: "default", type: "form", color: "warning", slot: "clear", size: "icon", shape: "rounded" }), index.h("smoothly-input-edit", { key: '930962d9f3a141e8d863b3b7835efb6ac9e31a48', fill: "default", type: "form", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), index.h("smoothly-input-reset", { key: '70eb43c4179e7edaa328f6360e24f7679930dfe7', fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), index.h("smoothly-input-submit", { key: '16f3e821c21d5c79a400c21720aebcc34d96a8eb', delete: true, slot: "delete", color: "danger", size: "icon", shape: "rounded" }), index.h("smoothly-input-submit", { key: 'ff462593ad41911c666bd233d11109cfc9bca486', fill: "default", color: "success", slot: "submit", size: "icon", shape: "rounded" }))));
     }
 };

package/dist/cjs/smoothly-submit.cjs.entry.js CHANGED Viewed

@@ -29,7 +29,7 @@ const SmoothlySubmit = class {
         (_a = this.parent) === null || _a === void 0 ? void 0 : _a.submit();
     }
     render() {
-        return (index.h(Submittable.Button, { key: 'ae0834363121d13204f7ebb794c44acfe10ca71e', disabled: this.disabled, type: this.type }, index.h("slot", { key: '7cafd59438f3f509652a416964338f8e6a87b9f4' })));
+        return (index.h(Submittable.Button, { key: 'b56bb200c5af6dd9a949ed1989ef150cf5902f33', disabled: this.disabled, type: this.type }, index.h("slot", { key: 'c3795191df1b9e6c5a696e7821d0fbc865814cfd' })));
     }
 };
 SmoothlySubmit.style = styleCss();

package/dist/cjs/smoothly-trigger-sink.cjs.entry.js CHANGED Viewed

@@ -24,7 +24,7 @@ const SmoothlyTriggerSink = class {
         }
     }
     render() {
-        return index.h("slot", { key: '2053d8ce9c9690a7fe0c079fa15336d6de74a9f1' });
+        return index.h("slot", { key: '46aea3defd44d2a9b5038aacb56f734bc99857f4' });
     }
 };
 SmoothlyTriggerSink.style = styleCss();

package/dist/cjs/smoothly-trigger-source.cjs.entry.js CHANGED Viewed

@@ -23,7 +23,7 @@ const SmoothlyTriggerSource = class {
         }, window);
     }
     render() {
-        return index.h("slot", { key: '667ab5fb646b207c7a28abd2dc03b96fe7851914' });
+        return index.h("slot", { key: 'f92141efaa40e81b8bc0614af2dd7095fa316a88' });
     }
     get element() { return index.getElement(this); }
 };

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

@@ -1,4 +1,4 @@
-import { h, Host } from "@stencil/core";
+import { Fragment, h, Host } from "@stencil/core";
 import { Color, Fill, Icon, Notice } from "../../../model";
 export class SmoothlyIconDemo {
     constructor() {
@@ -7,12 +7,34 @@ export class SmoothlyIconDemo {
         this.props = {};
     }
     render() {
-        return (h(Host, { key: '18c352e6e8cbf5c6207f06724fc4f150c3f35c62' }, h("h2", { key: 'ffa9a93a76b1e55ff2a02520271d00018f21c8ef' }, "Filter and Variants"), h("smoothly-form", { key: 'baa8442f242902404ad315ebc4898c03ce305e84', onSmoothlyFormInput: e => (this.display = e.detail) }, h("smoothly-input", { key: 'faa53d6709688e9bddfab452fc87f4747673c93f', name: "filter" }, "Filter"), h("smoothly-input-select", { key: 'd48cbfae334db2bc93781ccfe7707a7158a64d64', name: "variant" }, h("span", { key: 'e6599d7081c25eddb56c0e507610a933540fee2a', slot: "label" }, "Variant"), h("smoothly-item", { key: '79caa2a8f42d9ec8fa99aab43f4e94086a9ca0a9', value: "outline" }, "outline"), h("smoothly-item", { key: 'e31fe80073050b010f809d9b0cb24ace35b23f06', value: "sharp" }, "sharp"), h("smoothly-input-clear", { key: 'e25bedaf8423625fc2519a9f58071678609efd2c', slot: "end" }))), h("h2", { key: '512c66c201567f14abc10e60ee9fc50950792dd7' }, "Props"), h("smoothly-form", { key: '46b821b5871a14d2075a38893d7c072f1ddba8be', onSmoothlyFormInput: e => (this.props = e.detail) }, h("smoothly-input-select", { key: '1b14ebb3490198a4ebcb11a05a543853f48acae2', name: "color" }, h("span", { key: '887bba78b3f7ac5ac31d752be0fc8d64bdccbd31', slot: "label" }, "Color"), Color.values.map(color => (h("smoothly-item", { value: color, color: color }, color))), h("smoothly-input-clear", { key: 'ec1a9f35b7d2efe688a42ac17a745af586ba65d5', slot: "end" })), h("smoothly-input-select", { key: '8eeb32f412b3eb98069382b1fc8146275152de4e', name: "fill" }, h("span", { key: 'b5095c6c37feffc383e411704a35c92d7f1f16d0', slot: "label" }, "Fill"), Fill.values.map(fill => (h("smoothly-item", { value: fill }, fill))), h("smoothly-input-clear", { key: 'c4c9096e4d4f6a0e768a26cd6e291abd03ce8a1d', slot: "end" })), h("smoothly-input-select", { key: '82f39197d5b222078feb0db6c1caaea43cc2ff4c', name: "flip" }, h("span", { key: '28941724eba176612385fd568ae1ac2f70700668', slot: "label" }, "Flip"), h("smoothly-item", { key: 'eb246197acd42723a1024dee8abe0345603272e7', value: "x" }, "x"), h("smoothly-item", { key: '342b97c622d716038f19317684576914257acdb1', value: "y" }, "y"), h("smoothly-input-clear", { key: '21569726b10d6999b787042f7f2e533096d1e759', slot: "end" })), h("smoothly-input-select", { key: 'e8cda7e1e14dcc593abb997e2d1f77caae71ba56', name: "size" }, h("span", { key: '0311005eab874402134fa180e8c62829b6d444d0', slot: "label" }, "Size"), h("smoothly-item", { key: 'c4a818d1eed298db112640f1d356a1c277834c0f', value: "tiny" }, "tiny"), h("smoothly-item", { key: 'a2d5122deb9c8a51fe10796f19c9a16e22453c15', value: "small" }, "small"), h("smoothly-item", { key: '6245959982688e42a7a33a8931c7e3255cc743c2', value: "medium" }, "medium"), h("smoothly-item", { key: 'd9127f7de89eed1680fe5a917b18abbf6933871b', value: "large" }, "large"), h("smoothly-item", { key: '81058c44cc17c319447addd523ccacd72ef9137c', value: "xlarge" }, "xlarge"), h("smoothly-input-clear", { key: '9ac0d568820db33f77d5162b77eb9787fd8ec9ba', slot: "end" })), h("smoothly-input-range", { key: 'aa25c23d3f494139787b7465c5fe9d525092e0b0', name: "rotate", step: 1, min: -180, max: 180, value: 0 }, "Rotate", h("smoothly-input-clear", { key: '1947c759df77c69e1b74ba559357112ba7cf1390', slot: "end" }))), h("h1", { key: 'd893bf2235db23ef7a0b2199e1b5406660823200' }, "Icons"), h("div", { key: '26d05332b66cb566bc0a0d93fc997d8bdebb6563', class: "icons" }, [
+        return (h(Host, { key: 'f176097a9e8b600e7b6849618d986932e1115dfa' }, h("h2", { key: '600c0aaa4c8d9d66b75b3a9fb2546f8128b00f0b' }, "Filter and Variants"), h("smoothly-form", { key: 'da8b0a10a564b01918e644af025436dd13e1aa8c', looks: "grid", onSmoothlyFormInput: e => (this.display = e.detail) }, h("smoothly-input", { key: '976282ac0d7bf9025e305b975b5800ba8946190d', name: "filter" }, "Filter"), h("smoothly-input-select", { key: '81287920684545cdaedf4ae5df9e79bb8a9eea4b', name: "variant" }, h("span", { key: '8f14bd0559ab879184978aa720fbe9d72002c981', slot: "label" }, "Variant"), h("smoothly-item", { key: '262b691b55fc7a5dc662b50f6e84ac98e04db140', value: "outline" }, "outline"), h("smoothly-item", { key: '9baf50fd4633f0785577bebf8647f9ec4c9da525', value: "sharp" }, "sharp"), h("smoothly-input-clear", { key: '5460d9ba34ad9e5f5bc765893174fb57bf88b189', slot: "end" }))), h("h2", { key: 'a204390a284b9da8171a655c315981111ee29906' }, "Props"), h("smoothly-form", { key: 'bbcb2e224b053d8983a743abd34c0a0186bfcc0f', looks: "grid", onSmoothlyFormInput: e => {
+                this.props = e.detail;
+                console.log("props", this.props);
+            } }, h("smoothly-input-select", { key: '7f0f6e1932f649f5fb300f96a2d6eabc88e701aa', name: "color" }, h("span", { key: '508bbda0d768fc4f661f0f0887857e25d21c7a91', slot: "label" }, "Color"), Color.values.map(color => (h("smoothly-item", { value: color }, h("span", { style: {
+                background: `rgb(var(--smoothly-${color}-color))`,
+                "margin-right": "0.5rem",
+                width: "2.5rem",
+                height: "2.5rem",
+            } }), h("span", null, color)))), h("smoothly-input-clear", { key: 'e9b59296121ab6e415840d4f501ba31a4347e7af', slot: "end" })), h("smoothly-input-select", { key: 'd066f9f4aa8d79c19537b03e9fba85386e673633', name: "fill" }, h("span", { key: 'f6ae683d747cbeb8a3e40e4d240efe08a1ef8ec4', slot: "label" }, "Fill"), Fill.values.map(fill => (h("smoothly-item", { value: fill }, fill))), h("smoothly-input-clear", { key: '594435142c02e0b379f6b54886927069681de3cf', slot: "end" })), h("smoothly-input-select", { key: 'f5f821cfdc6a83063bf22c2eb8417e3fa33845cd', name: "customColor", menuHeight: "12items", ordered: true }, h("span", { key: '2b502f1dc5775cc23df45be8e48da4e297071078', slot: "label" }, "Custom Color"), Color.values.flatMap(c => (h(Fragment, null, ["tint", "color", "shade", "contrast"].map(v => (h("smoothly-item", { value: `--smoothly-${c}-${v}` }, h("span", { style: {
+                background: `rgb(var(--smoothly-${c}-${v}))`,
+                "margin-right": "0.5rem",
+                width: "2.5rem",
+                height: "2.5rem",
+            } }), h("span", null, `rgb(var(--smoothly-${c}-${v}))`)))))))), h("smoothly-input-select", { key: 'ca3d4788ce77f1175a2e9e0cce841f3c8aa5925c', name: "customBackground", menuHeight: "12items", ordered: true }, h("span", { key: 'cd4faa49f2167739f5b00f1b0c734fdf6b8ddc4b', slot: "label" }, "Custom Background"), Color.values.flatMap(c => (h(Fragment, null, ["tint", "color", "shade", "contrast"].map(v => (h("smoothly-item", { value: `--smoothly-${c}-${v}` }, h("span", { style: {
+                background: `rgb(var(--smoothly-${c}-${v}))`,
+                "margin-right": "0.5rem",
+                width: "2.5rem",
+                height: "2.5rem",
+            } }), h("span", null, `rgb(var(--smoothly-${c}-${v}))`)))))))), h("smoothly-input-select", { key: 'bfebecae9f13f019bd13a8baa8c1029468d83c18', name: "flip" }, h("span", { key: 'e8a300bdca3f1db8c36dff27b0df5afd08c6bda7', slot: "label" }, "Flip"), h("smoothly-item", { key: '5f92573e3420ce19c1d291c394259cf0b1b0cb63', value: "x" }, "x"), h("smoothly-item", { key: 'c55f735398bb6b01d83d0d80922214f007983f07', value: "y" }, "y"), h("smoothly-input-clear", { key: '171d0667b92be8ea4b8ef6c38bc4b6170c1db813', slot: "end" })), h("smoothly-input-select", { key: '30ebb8bdb6d5d75b8cfae380bb8a83bccb89b499', name: "size" }, h("span", { key: '62df815da76512b43ae1c4583ff3e61f29ed5133', slot: "label" }, "Size"), h("smoothly-item", { key: '5cb1ff7cb3660016cc243eb24b5f7f3fde4dd08f', value: "tiny" }, "tiny"), h("smoothly-item", { key: '0d4d0f54b705a47741d11f2b5fd29245362ded31', value: "small" }, "small"), h("smoothly-item", { key: 'd4469868285cfa6c6ec5de5609f313f892cc66f1', value: "medium" }, "medium"), h("smoothly-item", { key: '2b98aac9eeacc7942aa9ea73c48b16f36c226033', value: "large" }, "large"), h("smoothly-item", { key: '520ebe334ad34dde56d5f8b5ecb7ca25e6645989', value: "xlarge" }, "xlarge"), h("smoothly-input-clear", { key: '6b6dd6bd7070703371c89175f71ac30049e8042d', slot: "end" })), h("smoothly-input-range", { key: 'c85ffd310deeec0ef502b8549d9bfce3aa0ea895', name: "rotate", step: 1, min: -180, max: 180, value: 0 }, "Rotate", h("smoothly-input-clear", { key: 'a83b8be42b242c1b42b9ab34c9a3c61e0420ab64', slot: "end" }))), h("h1", { key: '02ce154b99955eece2bca3bb28fa47ad8955d18a' }, "Icons"), h("div", { key: 'e40575d19a189a6c8142c40943692854d9899749', class: "icons" }, [
             ...Icon.Name.values
                 .filter(name => !this.display.filter || name.includes(this.display.filter))
                 .map((name) => (this.display.variant ? `${name}-${this.display.variant}` : name)),
             ...Icon.Logo.values.filter(name => !this.display.filter || name.includes(this.display.filter)),
-        ].map(name => (h("smoothly-icon", { name: name, tooltip: name, "data-name": name, color: this.props.color, fill: this.props.fill, flip: this.props.flip, size: this.props.size, rotate: this.props.rotate, onClick: () => {
+        ].map(name => (h("smoothly-icon", { name: name, tooltip: name, "data-name": name, color: this.props.color, style: {
+                fill: this.props["customColor"] ? `rgb(var(${this.props["customColor"]}))` : "",
+                color: this.props["customColor"] ? `rgb(var(${this.props["customColor"]}))` : "",
+                background: this.props["customBackground"] ? `rgb(var(${this.props["customBackground"]}))` : "",
+            }, fill: this.props.fill, flip: this.props.flip, size: this.props.size, rotate: this.props.rotate, onClick: () => {
                 navigator.clipboard.writeText(name);
                 this.notice.emit(Notice.succeeded(`Copied "${name}"`));
             } }))))));

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/icon/demo/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Host, State } from \"@stencil/core\"\nimport { Color, Fill, Icon, Notice } from \"../../../model\"\n@Component({\n\ttag: \"smoothly-icon-demo\",\n\tstyleUrl: \"./style.css\",\n\tscoped: true,\n})\nexport class SmoothlyIconDemo {\n\tpage = 0\n\n\t@State() display: { filter?: string; variant?: \"outline\" \| \"sharp\" } = {}\n\t@State() props: {\n\t\tcolor?: Color\n\t\tfill?: Fill\n\t\tflip?: \"x\" \| \"y\"\n\t\tsize?: \"tiny\" \| \"small\" \| \"medium\" \| \"large\" \| \"xlarge\"\n\t\trotate?: number\n\t} = {}\n\t@Event() notice: EventEmitter<Notice>\n\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<h2>Filter and Variants</h2>\n\t\t\t\t<smoothly-form onSmoothlyFormInput={e => (this.display = e.detail)}>\n\t\t\t\t\t<smoothly-input name=\"filter\">Filter</smoothly-input>\n\t\t\t\t\t<smoothly-input-select name=\"variant\">\n\t\t\t\t\t\t<span slot=\"label\">Variant</span>\n\t\t\t\t\t\t<smoothly-item value={\"outline\"}>outline</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value={\"sharp\"}>sharp</smoothly-item>\n\t\t\t\t\t\t<smoothly-input-clear slot={\"end\"} />\n\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t</smoothly-form>\n\t\t\t\t<h2>Props</h2>\n\t\t\t\t<smoothly-form onSmoothlyFormInput={e => (this.props = e.detail)}>\n\t\t\t\t\t<smoothly-input-select name={\"color\"}>\n\t\t\t\t\t\t<span slot={\"label\"}>Color</span>\n\t\t\t\t\t\t{Color.values.map(color => (\n\t\t\t\t\t\t\t<smoothly-item value={color} color={color}>\n\t\t\t\t\t\t\t\t{color}\n\t\t\t\t\t\t\t</smoothly-item>\n\t\t\t\t\t\t))}\n\t\t\t\t\t\t<smoothly-input-clear slot={\"end\"} />\n\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t<smoothly-input-select name={\"fill\"}>\n\t\t\t\t\t\t<span slot={\"label\"}>Fill</span>\n\t\t\t\t\t\t{Fill.values.map(fill => (\n\t\t\t\t\t\t\t<smoothly-item value={fill}>{fill}</smoothly-item>\n\t\t\t\t\t\t))}\n\t\t\t\t\t\t<smoothly-input-clear slot={\"end\"} />\n\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t<smoothly-input-select name=\"flip\">\n\t\t\t\t\t\t<span slot={\"label\"}>Flip</span>\n\t\t\t\t\t\t<smoothly-item value={\"x\"}>x</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value={\"y\"}>y</smoothly-item>\n\t\t\t\t\t\t<smoothly-input-clear slot={\"end\"} />\n\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t<smoothly-input-select name={\"size\"}>\n\t\t\t\t\t\t<span slot={\"label\"}>Size</span>\n\t\t\t\t\t\t<smoothly-item value={\"tiny\"}>tiny</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value={\"small\"}>small</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value={\"medium\"}>medium</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value={\"large\"}>large</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value={\"xlarge\"}>xlarge</smoothly-item>\n\t\t\t\t\t\t<smoothly-input-clear slot={\"end\"} />\n\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t<smoothly-input-range name=\"rotate\" step={1} min={-180} max={180} value={0}>\n\t\t\t\t\t\tRotate\n\t\t\t\t\t\t<smoothly-input-clear slot={\"end\"} />\n\t\t\t\t\t</smoothly-input-range>\n\t\t\t\t</smoothly-form>\n\t\t\t\t<h1>Icons</h1>\n\t\t\t\t<div class=\"icons\">\n\t\t\t\t\t{[\n\t\t\t\t\t\t...Icon.Name.values\n\t\t\t\t\t\t\t.filter(name => !this.display.filter \|\| name.includes(this.display.filter))\n\t\t\t\t\t\t\t.map((name): Icon => (this.display.variant ? `${name}-${this.display.variant}` : name)),\n\t\t\t\t\t\t...Icon.Logo.values.filter(name => !this.display.filter \|\| name.includes(this.display.filter)),\n\t\t\t\t\t].map(name => (\n\t\t\t\t\t\t<smoothly-icon\n\t\t\t\t\t\t\tname={name}\n\t\t\t\t\t\t\ttooltip={name}\n\t\t\t\t\t\t\tdata-name={name}\n\t\t\t\t\t\t\tcolor={this.props.color}\n\t\t\t\t\t\t\tfill={this.props.fill}\n\t\t\t\t\t\t\tflip={this.props.flip}\n\t\t\t\t\t\t\tsize={this.props.size}\n\t\t\t\t\t\t\trotate={this.props.rotate}\n\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\tnavigator.clipboard.writeText(name)\n\t\t\t\t\t\t\t\tthis.notice.emit(Notice.succeeded(`Copied \"${name}\"`))\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/icon/demo/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Fragment, h, Host, State } from \"@stencil/core\"\nimport { Color, Fill, Icon, Notice } from \"../../../model\"\n@Component({\n\ttag: \"smoothly-icon-demo\",\n\tstyleUrl: \"./style.css\",\n\tscoped: true,\n})\nexport class SmoothlyIconDemo {\n\tpage = 0\n\n\t@State() display: { filter?: string; variant?: \"outline\" \| \"sharp\" } = {}\n\t@State() props: {\n\t\tcolor?: Color\n\t\tcustomColor?: string\n\t\tcustomBackground?: string\n\t\tfill?: Fill\n\t\tflip?: \"x\" \| \"y\"\n\t\tsize?: \"tiny\" \| \"small\" \| \"medium\" \| \"large\" \| \"xlarge\"\n\t\trotate?: number\n\t} = {}\n\t@Event() notice: EventEmitter<Notice>\n\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<h2>Filter and Variants</h2>\n\t\t\t\t<smoothly-form looks=\"grid\" onSmoothlyFormInput={e => (this.display = e.detail)}>\n\t\t\t\t\t<smoothly-input name=\"filter\">Filter</smoothly-input>\n\t\t\t\t\t<smoothly-input-select name=\"variant\">\n\t\t\t\t\t\t<span slot=\"label\">Variant</span>\n\t\t\t\t\t\t<smoothly-item value={\"outline\"}>outline</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value={\"sharp\"}>sharp</smoothly-item>\n\t\t\t\t\t\t<smoothly-input-clear slot={\"end\"} />\n\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t</smoothly-form>\n\t\t\t\t<h2>Props</h2>\n\t\t\t\t<smoothly-form\n\t\t\t\t\tlooks=\"grid\"\n\t\t\t\t\tonSmoothlyFormInput={e => {\n\t\t\t\t\t\tthis.props = e.detail\n\t\t\t\t\t\tconsole.log(\"props\", this.props)\n\t\t\t\t\t}}>\n\t\t\t\t\t<smoothly-input-select name={\"color\"}>\n\t\t\t\t\t\t<span slot={\"label\"}>Color</span>\n\t\t\t\t\t\t{Color.values.map(color => (\n\t\t\t\t\t\t\t<smoothly-item value={color}>\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tbackground: `rgb(var(--smoothly-${color}-color))`,\n\t\t\t\t\t\t\t\t\t\t\"margin-right\": \"0.5rem\",\n\t\t\t\t\t\t\t\t\t\twidth: \"2.5rem\",\n\t\t\t\t\t\t\t\t\t\theight: \"2.5rem\",\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<span>{color}</span>\n\t\t\t\t\t\t\t</smoothly-item>\n\t\t\t\t\t\t))}\n\t\t\t\t\t\t<smoothly-input-clear slot={\"end\"} />\n\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t<smoothly-input-select name={\"fill\"}>\n\t\t\t\t\t\t<span slot={\"label\"}>Fill</span>\n\t\t\t\t\t\t{Fill.values.map(fill => (\n\t\t\t\t\t\t\t<smoothly-item value={fill}>{fill}</smoothly-item>\n\t\t\t\t\t\t))}\n\t\t\t\t\t\t<smoothly-input-clear slot={\"end\"} />\n\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t<smoothly-input-select name=\"customColor\" menuHeight=\"12items\" ordered>\n\t\t\t\t\t\t<span slot={\"label\"}>Custom Color</span>\n\t\t\t\t\t\t{Color.values.flatMap(c => (\n\t\t\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t\t\t{[\"tint\", \"color\", \"shade\", \"contrast\"].map(v => (\n\t\t\t\t\t\t\t\t\t<smoothly-item value={`--smoothly-${c}-${v}`}>\n\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\tbackground: `rgb(var(--smoothly-${c}-${v}))`,\n\t\t\t\t\t\t\t\t\t\t\t\t\"margin-right\": \"0.5rem\",\n\t\t\t\t\t\t\t\t\t\t\t\twidth: \"2.5rem\",\n\t\t\t\t\t\t\t\t\t\t\t\theight: \"2.5rem\",\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<span>{`rgb(var(--smoothly-${c}-${v}))`}</span>\n\t\t\t\t\t\t\t\t\t</smoothly-item>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</Fragment>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t<smoothly-input-select name=\"customBackground\" menuHeight=\"12items\" ordered>\n\t\t\t\t\t\t<span slot={\"label\"}>Custom Background</span>\n\t\t\t\t\t\t{Color.values.flatMap(c => (\n\t\t\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t\t\t{[\"tint\", \"color\", \"shade\", \"contrast\"].map(v => (\n\t\t\t\t\t\t\t\t\t<smoothly-item value={`--smoothly-${c}-${v}`}>\n\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\tbackground: `rgb(var(--smoothly-${c}-${v}))`,\n\t\t\t\t\t\t\t\t\t\t\t\t\"margin-right\": \"0.5rem\",\n\t\t\t\t\t\t\t\t\t\t\t\twidth: \"2.5rem\",\n\t\t\t\t\t\t\t\t\t\t\t\theight: \"2.5rem\",\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<span>{`rgb(var(--smoothly-${c}-${v}))`}</span>\n\t\t\t\t\t\t\t\t\t</smoothly-item>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</Fragment>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t<smoothly-input-select name=\"flip\">\n\t\t\t\t\t\t<span slot={\"label\"}>Flip</span>\n\t\t\t\t\t\t<smoothly-item value={\"x\"}>x</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value={\"y\"}>y</smoothly-item>\n\t\t\t\t\t\t<smoothly-input-clear slot={\"end\"} />\n\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t<smoothly-input-select name={\"size\"}>\n\t\t\t\t\t\t<span slot={\"label\"}>Size</span>\n\t\t\t\t\t\t<smoothly-item value={\"tiny\"}>tiny</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value={\"small\"}>small</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value={\"medium\"}>medium</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value={\"large\"}>large</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value={\"xlarge\"}>xlarge</smoothly-item>\n\t\t\t\t\t\t<smoothly-input-clear slot={\"end\"} />\n\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t<smoothly-input-range name=\"rotate\" step={1} min={-180} max={180} value={0}>\n\t\t\t\t\t\tRotate\n\t\t\t\t\t\t<smoothly-input-clear slot={\"end\"} />\n\t\t\t\t\t</smoothly-input-range>\n\t\t\t\t</smoothly-form>\n\t\t\t\t<h1>Icons</h1>\n\t\t\t\t<div class=\"icons\">\n\t\t\t\t\t{[\n\t\t\t\t\t\t...Icon.Name.values\n\t\t\t\t\t\t\t.filter(name => !this.display.filter \|\| name.includes(this.display.filter))\n\t\t\t\t\t\t\t.map((name): Icon => (this.display.variant ? `${name}-${this.display.variant}` : name)),\n\t\t\t\t\t\t...Icon.Logo.values.filter(name => !this.display.filter \|\| name.includes(this.display.filter)),\n\t\t\t\t\t].map(name => (\n\t\t\t\t\t\t<smoothly-icon\n\t\t\t\t\t\t\tname={name}\n\t\t\t\t\t\t\ttooltip={name}\n\t\t\t\t\t\t\tdata-name={name}\n\t\t\t\t\t\t\tcolor={this.props.color}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tfill: this.props[\"customColor\"] ? `rgb(var(${this.props[\"customColor\"]}))` : \"\",\n\t\t\t\t\t\t\t\tcolor: this.props[\"customColor\"] ? `rgb(var(${this.props[\"customColor\"]}))` : \"\",\n\t\t\t\t\t\t\t\tbackground: this.props[\"customBackground\"] ? `rgb(var(${this.props[\"customBackground\"]}))` : \"\",\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tfill={this.props.fill}\n\t\t\t\t\t\t\tflip={this.props.flip}\n\t\t\t\t\t\t\tsize={this.props.size}\n\t\t\t\t\t\t\trotate={this.props.rotate}\n\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\tnavigator.clipboard.writeText(name)\n\t\t\t\t\t\t\t\tthis.notice.emit(Notice.succeeded(`Copied \"${name}\"`))\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

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

@@ -2,7 +2,7 @@ import { h, Host } from "@stencil/core";
 import { isoly } from "isoly";
 export class SmoothlyInputCheckboxDemo {
     render() {
-        return (h(Host, { key: '62cd9b578b793b42ce87d31e8c479923c35c328a' }, h("h2", { key: '42c842216a71aa13d2be4383bc5fb18884ef7a54' }, "All inputs"), h("smoothly-form", { key: 'e2cb3ffdc3354e2447adaa34779a691a80e0b047', looks: "grid", readonly: true, action: "https://api.toiletapi.com/6b12fd2f-e896-46f9-b38f-25cf42cee4b4" }, h("smoothly-input", { key: '8911d921b47dcaf038125b4cb9891adda2e1f53a', readonly: true, name: "First Name", value: "John" }, "First name"), h("smoothly-input", { key: '82186c019e062fbf7039b2c812c1004f23f987a9', name: "Last name", value: "Doe" }, "Last name", h("smoothly-input-clear", { key: '8c0dad76fdf225a132a80e583ea34ba67b2c7595', size: "icon", slot: "end" })), h("smoothly-input", { key: '6dd2a725472e678d096093ea238d9386b0a97086', type: "phone", name: "Phone", value: "777888999" }, "Phone", h("smoothly-input-reset", { key: 'a1a998126419d72bc94e02be86a40a9fbc58e7aa', size: "icon", slot: "end" })), h("smoothly-input-radio", { key: 'fd3e7fda9a293e1e137412fdefc4b89942f20350', clearable: true, name: "radioFirstInput" }, h("p", { key: '3f295c0de2d9531e30783e195715e2fb4fcf612b', slot: "label" }, "Clearable"), h("smoothly-input-radio-item", { key: 'dd604c8017fccab9624aff3c4bdd0c754f41bf2f', slot: "options", value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: 'f7b8bbfcd00753c0ffc7612ede095d678dfedc99', selected: true, slot: "options", value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '8185b37554d6e9973897d89ee860518a24d35049', slot: "options", value: "third" }, "Label 3")), h("smoothly-input-color", { key: '2304148d0df81929fcac680338a3696d9c9a8a47', name: "color", value: "#479f56", output: "rgb" }, "Color"), h("smoothly-input-select", { key: 'd676038323375ed173dddac5a2490e9037c60ea3', menuHeight: "7.5items", placeholder: "Select...", multiple: true, name: "select-month" }, h("label", { key: 'bbbd77b064171c2fb7ddbfefde89f494212e894b', slot: "label" }, "Month"), h("smoothly-item", { key: '5be4f0e88b14a1225fb5fd9dbf8bada60c68193c', value: "1" }, "January"), h("smoothly-item", { key: '39a347df6c77fdc8a7abc932bfe4f05976f6efb7', value: "2" }, "February"), h("smoothly-item", { key: 'c9cde1792b5512fb61f516f41d8087003f7e1434', value: "3" }, "March"), h("smoothly-item", { key: '1627e2bc2d340e2e9dcd846a5f151a3ccc37a418', value: "4" }, "April"), h("smoothly-item", { key: '557ca46be77349ce3ded22b079216efd1f0d03c3', value: "5" }, "May"), h("smoothly-item", { key: '6a50c4949f11afe60e6f7f3bfa0fb3099cd6c7d3', value: "6" }, "June"), h("smoothly-item", { key: '84fe924e744e8257edc6ae0bccbfa6a7f4a4b265', value: "7" }, "July"), h("smoothly-item", { key: 'b3143d747989a72d65e91cb2a0cf9a2cadba2504', value: "8" }, "August"), h("smoothly-item", { key: '24e5c25ae1a8bcd5b34aad7512fefe67f04d0918', value: "9" }, "September"), h("smoothly-item", { key: 'f8688b010b6c2ffdeede228d394104b42c58a988', value: "10" }, "October"), h("smoothly-item", { key: 'd8ca163502e7e04c6d8fab2d8863e1a23e61a085', value: "11" }, "November"), h("smoothly-item", { key: 'b50d2a5691e9588642596d2e24cbede7ffa0845f', value: "12" }, "December"), h("smoothly-input-clear", { key: '3c0d229fffc6ccf6132c5a23c4d0bd3f8589c861', size: "icon", slot: "end" })), h("smoothly-input-select", { key: 'be5f84ecaf35bedd71629621691311cfca695766', name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { key: 'c8e2502dc5d05461b348ec685dd2f9f5870aed56', value: "folder", selected: true }, h("smoothly-icon", { key: 'ffa5a4176f0d7ecebbfbd867289364939bb2940a', size: "small", name: "folder-outline" })), h("smoothly-item", { key: 'fc028e2b8b5334d38e496b3726790e180664a8b4', value: "camera" }, h("smoothly-icon", { key: '0adfbc64668bceefb47187d9a7614609c2105f35', size: "small", name: "camera-outline" }))), h("smoothly-input-checkbox", { key: '886eb606828944b48dc7d306fd0831791798ace0', name: "checkbox" }, "Check the box"), h("smoothly-input-checkbox", { key: 'ea7d537284fccd859c22cadadc5551c988728c24', name: "checkbox2", checked: true }, "Check the box 2"), h("smoothly-input-date-range", { key: '32800d12cb52e378e665fa46e6acad80b5753226', start: isoly.Date.now(), end: isoly.Date.now() }), h("smoothly-input-date", { key: 'af7ec6c95f6dedd66c9bf469b50978de6eb6da0a', name: "date" }, "Date", h("smoothly-input-clear", { key: '9203d6b1561777759d1912af409696e24313b7ee', slot: "end" })), h("smoothly-input-range", { key: 'cbe6d674d73f5c202e4f49d4d5e16b347024d34c', step: 1, name: "range3", value: 20000 }, "Select"), h("smoothly-input", { key: '4b24a68961da14058371426c905c41dfde4eefd5', name: "pets.0.name" }, "First Pet's Name"), h("smoothly-input-range", { key: 'a9a1c86c1fe113995119f89f6390b51acd64312b', name: "pets.0.age", max: 100, step: 1 }, "First Pet's Age"), h("smoothly-input", { key: '602580c1b69eafece089ca242f7500e7fc2ee0cb', name: "pets.1.name" }, "Second Pet's Name"), h("smoothly-input-range", { key: '876655986846490d80cddb89b7b02a934cc3350f', name: "pets.1.age", max: 100, step: 1 }, "Second Pet's Age"), h("smoothly-input", { key: 'a5f37ec6acede820d50a1da9bb245a55ea12bff2', name: "pets.2.name" }, "Third Pet's Name"), h("smoothly-input-range", { key: '12caf47761fb7c802b37dfd0faa1c51727305936', name: "pets.2.age", max: 100, step: 1 }, "Third Pet's Age"), h("smoothly-input-file", { key: 'ac56467f4fca8f78131a8bdee6f8f03816508661', name: "profile", placeholder: "Click or drag your profile picture here..." }, h("span", { key: 'd4f91804a33080174dd6b563303e42e2d9d18579', slot: "label" }, "Profile"), h("smoothly-icon", { key: '7dee62dcf2298dbbaa9ef9c63ca32457d77ae95b', slot: "button", name: "person-circle-outline", size: "tiny", fill: "default" })), h("smoothly-input-clear", { key: '54a876639427fb7c31310c57247b823115a9ffe8', fill: "default", type: "form", color: "warning", slot: "clear", size: "icon", shape: "rounded" }), h("smoothly-input-edit", { key: 'd9549efa42c9b880e218bb7ed917c437cc043e40', fill: "default", type: "form", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), h("smoothly-input-reset", { key: 'dfa1dc2459a11ee9d24dd5d90a9c7a0e36f8eb8a', fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { key: '6f8b2f85467de40d67965350ad262977d4d06a75', delete: true, slot: "delete", color: "danger", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { key: '3919204248c4b41f8ff4452d2d577d825e74a727', fill: "default", color: "success", slot: "submit", size: "icon", shape: "rounded" }))));
+        return (h(Host, { key: 'f5df2f70e81f8189b2ed0fc110469fd31118f07e' }, h("h2", { key: 'f1805f70b5770fdf51ba8d7cd00ef7ddd2ab7706' }, "All inputs"), h("smoothly-form", { key: 'bcf287313fbda727ff66a43111c87f442ef2f77a', looks: "grid", readonly: true, action: "https://api.toiletapi.com/6b12fd2f-e896-46f9-b38f-25cf42cee4b4" }, h("smoothly-input", { key: '5ad0e09227c953003294064ec9a74a34dad99884', readonly: true, name: "First Name", value: "John" }, "First name"), h("smoothly-input", { key: '4a827cff07982019b2d95e4e440bd2976aeb49da', name: "Last name", value: "Doe" }, "Last name", h("smoothly-input-clear", { key: '9e4989baaba55d9d456c243354b611986ba1c42c', size: "icon", slot: "end" })), h("smoothly-input", { key: 'aa0d1fc77c155bc236459b40500802ad58716194', type: "phone", name: "Phone", value: "777888999" }, "Phone", h("smoothly-input-reset", { key: 'd80e1b9acbd7cf53acfced029cc8d5a0bd24d161', size: "icon", slot: "end" })), h("smoothly-input-radio", { key: '630fd379a65538192fb134f75cbcf55a282d8c44', clearable: true, name: "radioFirstInput" }, h("p", { key: '2b027b673dbcf3c4bf9d1f24c03f857f7477f59c', slot: "label" }, "Clearable"), h("smoothly-input-radio-item", { key: '3ba57b27799284c623037056b2f7d57637055dd8', slot: "options", value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: 'cc4daf5e360276819fb0166a7023afff132dc43a', selected: true, slot: "options", value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '120fd9fd0758c17b5fb8926425b032a8a1065612', slot: "options", value: "third" }, "Label 3")), h("smoothly-input-color", { key: '1f326fa25ce6a00ecbebe2186cec26c6efdb6eb3', name: "color", value: "#479f56", output: "rgb" }, "Color"), h("smoothly-input-select", { key: 'a899972ebf9f79209c56d81b544184690b85dfaf', menuHeight: "7.5items", placeholder: "Select...", multiple: true, name: "select-month" }, h("label", { key: 'b4e4e3c4eebad921eb830a242531a650bef0acd3', slot: "label" }, "Month"), h("smoothly-item", { key: '13f7abe4d7201572786405f17557d44409a8ef3a', value: "1" }, "January"), h("smoothly-item", { key: 'd83d6bc200a1f124b850b8636420b388c47879f7', value: "2" }, "February"), h("smoothly-item", { key: 'b04c6c85a5db9e867ab2bc931794fe1105855c9e', value: "3" }, "March"), h("smoothly-item", { key: 'd5e5c01012f4c278144fcf08c59abcc09ac62533', value: "4" }, "April"), h("smoothly-item", { key: 'c4c2b5b4cb3c57f166ef809b0dbba85f0ec190e3', value: "5" }, "May"), h("smoothly-item", { key: 'cac9c84f18108bce0025a81635a3b8bdcead4f54', value: "6" }, "June"), h("smoothly-item", { key: '0f6c56fcca25ae22f7f22e27a21b379de9ca24b2', value: "7" }, "July"), h("smoothly-item", { key: '79019fb60f0b87844767ef3463fd2c5dbd309fa8', value: "8" }, "August"), h("smoothly-item", { key: '9a8d4fd4fc756c9b9925f8d176a99aa3bcab935f', value: "9" }, "September"), h("smoothly-item", { key: '63e1671cec1610bafe6e962af88f1715ee2dfb28', value: "10" }, "October"), h("smoothly-item", { key: '1c200d8d7e11673ce27d2d683a2b8bb9954ca552', value: "11" }, "November"), h("smoothly-item", { key: 'e6caeaac708433debb27ab47ec82b51c4ad16c2a', value: "12" }, "December"), h("smoothly-input-clear", { key: '8d2405dc1d53e2434dbad4b69990b49651e8c557', size: "icon", slot: "end" })), h("smoothly-input-select", { key: '8cb2fe5eb8b152d32045c4a150c7c790ad35d922', name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { key: 'ae42e4ffed610af298235e7ebe3e1ec6b05d9e13', value: "folder", selected: true }, h("smoothly-icon", { key: '328f1295b0eb870bc80151c46a045bc5c180e998', size: "small", name: "folder-outline" })), h("smoothly-item", { key: 'c35837e991468d32bd1630519be188266558a976', value: "camera" }, h("smoothly-icon", { key: '02479e84c1ba0c5aca2bdbbe9cd72929e0572f0f', size: "small", name: "camera-outline" }))), h("smoothly-input-checkbox", { key: '6aa26dafb6d138c976683426757846b816c42dbc', name: "checkbox" }, "Check the box"), h("smoothly-input-checkbox", { key: '7bd63dbdc68f36325d579cf0d966fffa3435567c', name: "checkbox2", checked: true }, "Check the box 2"), h("smoothly-input-date-range", { key: '9183d69eae1040aede96d59cb5ff639335f43fb6', start: isoly.Date.now(), end: isoly.Date.now() }), h("smoothly-input-date", { key: '2650ad84a1f017d2672671af94c7c7991ea3e61b', name: "date" }, "Date", h("smoothly-input-clear", { key: 'e0f0b0c02189d0b930840e3a59a9adedd28a696a', slot: "end" })), h("smoothly-input-range", { key: '693b3fe5a9dd2aebf1dfb4ebb705ce0ecd5028a9', step: 1, name: "range3", value: 20000 }, "Select"), h("smoothly-input", { key: '0ac5d490c72cb234bfd328ffbd3cf3659bbc9aed', name: "pets.0.name" }, "First Pet's Name"), h("smoothly-input-range", { key: 'c86356ba541ab262d357dd194289ec2778ebbb07', name: "pets.0.age", max: 100, step: 1 }, "First Pet's Age"), h("smoothly-input", { key: 'd481ef9163d12757e43508af1e7ff0d7720ce31a', name: "pets.1.name" }, "Second Pet's Name"), h("smoothly-input-range", { key: 'e7bf653532ff0c957e6c3e82383cac5dc3210f40', name: "pets.1.age", max: 100, step: 1 }, "Second Pet's Age"), h("smoothly-input", { key: '27af92d8ccc19451a7786deb1cf8f59d10991e91', name: "pets.2.name" }, "Third Pet's Name"), h("smoothly-input-range", { key: 'fd9eb72093cf6f6c6fa7bdaa98a4d6066fbb43dc', name: "pets.2.age", max: 100, step: 1 }, "Third Pet's Age"), h("smoothly-input-file", { key: 'd444f859d0fdf764df0da9457d6a71e594ae560e', name: "profile", placeholder: "Click or drag your profile picture here..." }, h("span", { key: 'b044dca389ede3b37362ad564a5e84e9ccfd9c23', slot: "label" }, "Profile"), h("smoothly-icon", { key: 'adf0819cbb38fb45501aff5ba55ea75dd225b1e2', slot: "button", name: "person-circle-outline", size: "tiny", fill: "default" })), h("smoothly-input-clear", { key: 'ed14b047e2a63cbc29e7d01063abeebbe62e72ea', fill: "default", type: "form", color: "warning", slot: "clear", size: "icon", shape: "rounded" }), h("smoothly-input-edit", { key: '930962d9f3a141e8d863b3b7835efb6ac9e31a48', fill: "default", type: "form", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), h("smoothly-input-reset", { key: '70eb43c4179e7edaa328f6360e24f7679930dfe7', fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { key: '16f3e821c21d5c79a400c21720aebcc34d96a8eb', delete: true, slot: "delete", color: "danger", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { key: 'ff462593ad41911c666bd233d11109cfc9bca486', fill: "default", color: "success", slot: "submit", size: "icon", shape: "rounded" }))));
     }
     static get is() { return "smoothly-input-checkbox-demo"; }
     static get encapsulation() { return "scoped"; }

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

@@ -64,10 +64,10 @@ export class SmoothlyInputCheckbox {
         }
     }
     render() {
-        return (h(Host, { key: 'd3c69edab659c924b8bcdc9bd7f2c8f3bf3b6b6d' }, h("input", { key: 'a6ce7d4cc668104d71171e717efe6cbf24227d43', type: "checkbox", id: this.id, checked: this.checked, disabled: this.disabled || this.readonly, onChange: async (e) => {
+        return (h(Host, { key: '3d423adb72e619d4119435408a6b4ee9adbc2704' }, h("input", { key: '489144f56039b3edf5dab1f7ffe9f37e2d0fcadd', type: "checkbox", id: this.id, checked: this.checked, disabled: this.disabled || this.readonly, onChange: async (e) => {
                 this.checked = e.target.checked;
                 this.smoothlyUserInput.emit({ name: this.name, value: await this.getValue() });
-            } }), this.checked && h("smoothly-icon", { key: '1469bffde30e54f10340e7a6c4a22dac6d6b3755', name: "checkmark-sharp", size: "tiny" }), h("label", { key: '768ef233b6b58a99328caaeae28a30a3f0ee3c7e', htmlFor: this.id }, h("slot", { key: '8d6cd0ff949cd3b444dad658a3ebe4a6c974ca42' })), h("span", { key: 'e87b01790eb36fafdb0ef8ad4ef4cfefbc32bbde', class: "smoothly-checkbox-end-slot" }, h("slot", { key: '3287f4a21799575093d3116708912944fb475576', name: "end" }))));
+            } }), this.checked && h("smoothly-icon", { key: '6f97dca6dbfedce3d06d4146269bb518016476a8', name: "checkmark-sharp", size: "tiny" }), h("label", { key: '63fc6b505b6d21a779e60ae9803b56134fd855e0', htmlFor: this.id }, h("slot", { key: '88de07dc316049e436784b8ad1e7a3fe359363ff' })), h("span", { key: 'dd9d9e7f30dd37550a089b65c62d26e38471d8bc', class: "smoothly-checkbox-end-slot" }, h("slot", { key: 'f74c25ab1f6765225044bfc21db40b51e47802aa', name: "end" }))));
     }
     static get is() { return "smoothly-input-checkbox"; }
     static get encapsulation() { return "scoped"; }

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

@@ -42,7 +42,7 @@ export class SmoothlyInputClear {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'c3057c346978456fae66b50daa28779d57897fe4', title: this.tooltip }, h("smoothly-button", { key: 'ada585112d53669e71813f504c07f4ea51f8365a', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined) }, h("slot", { key: '5300d48ce3c05f9ba4e7492db5069e5252aba1c3' }), h("smoothly-icon", { key: '771161bfba19ad4f9f875481a75c5b7b65d3d143', name: "close", size: "tiny" }))));
+        return (h(Host, { key: '35dfd4b4b5b2aaac1457f14143591df8244e4e2f', title: this.tooltip }, h("smoothly-button", { key: '681e2d83c6fe6061919a06ece237673e0c68a159', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined) }, h("slot", { key: '31f3176ab610d6c1ce68055b6f0df55ba2303e29' }), h("smoothly-icon", { key: 'a454fc3409e50dd4a0fb7566460909645066b944', name: "close", size: "tiny" }))));
     }
     static get is() { return "smoothly-input-clear"; }
     static get encapsulation() { return "scoped"; }

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

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

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

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

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

@@ -108,7 +108,7 @@ export class SmoothlyInputDate {
         event.stopPropagation();
     }
     render() {
-        return (h(Host, { key: 'daf9c45dec7dd26de2d6e0a6c4be1edb164c550a', tabindex: this.disabled ? undefined : 0, class: { "has-value": !!this.value, "has-text": this.hasText, "floating-label": this.alwaysShowGuide }, onClick: (e) => this.onClick(e) }, h("slot", { key: '7e4ded7f49badad87d40e7c72feea1f97c1b3696', name: "start" }), h("label", { key: 'adb59c083e4c8f8eff91c5ec551b80a8a8c6021c', class: "label float-on-focus" }, h("slot", { key: '5eb72d0fad4a9434e04ca26990f5814c3968816e' })), this.placeholder && h("span", { key: '2db6ea8a6aa504a88f0df85cb51d3b35f169f7e0', class: "smoothly-date-placeholder" }, this.placeholder), h("smoothly-date-text", { key: '579177b155b1ec9057ba5ef0caf6b200255739a8', ref: el => (this.dateTextElement = el), locale: this.locale, readonly: this.readonly, disabled: this.disabled, showLabel: this.showLabel, value: this.value, onSmoothlyDateTextHasText: e => (e.stopPropagation(), (this.hasText = e.detail)), onSmoothlyDateTextFocusChange: e => (e.stopPropagation(), (this.hasFocus = e.detail)), onSmoothlyDateHasPartialDate: e => { var _a; return (e.stopPropagation(), (_a = this.calendarElement) === null || _a === void 0 ? void 0 : _a.jumpTo(e.detail)); }, onSmoothlyDateTextChange: e => (e.stopPropagation(), this.onUserChangedValue(e)), onSmoothlyDateTextDone: e => { var _a; return (e.stopPropagation(), (this.open = false), (_a = this.dateTextElement) === null || _a === void 0 ? void 0 : _a.deselect()); } }), h("span", { key: '7793ab23717002dc3b48c395339ba1a52e4ff29b', class: "smoothly-icons", ref: el => (this.iconsElement = el) }, h("smoothly-icon", { key: '22fe16cd88fd192c18c03ecc6c7e7f68cd46f1dd', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), h("slot", { key: 'abdbafc201ee41a8bf6fd7814ffeb307dcd84c76', name: "end" })), this.open && !this.readonly && (h("smoothly-calendar", { key: '1dfeaaa136dae6ae0665e1c98183d5995d14e546', ref: el => (this.calendarElement = el), doubleInput: false, value: this.value, onSmoothlyDateSet: e => (e.stopPropagation(), this.onUserChangedValue(e)), max: this.max, min: this.min }, h("div", { key: '93bbc2286b76543c4412969f69aeec2713f60a3c', slot: "year-label" }, h("slot", { key: 'bcba612d6b9803c4cba33775c6a8f12e6dc69cd2', name: "year-label" })), h("div", { key: '83a50201b1f1700910012bf9476f3ca02f3a1f49', slot: "month-label" }, h("slot", { key: '92b1ee4b0d5bb6e0a36857063e9657b649d8a901', name: "month-label" }))))));
+        return (h(Host, { key: 'adce039516ed0f3009e61150455b2c51cc0ec899', tabindex: this.disabled ? undefined : 0, class: { "has-value": !!this.value, "has-text": this.hasText, "floating-label": this.alwaysShowGuide }, onClick: (e) => this.onClick(e) }, h("slot", { key: '9050a4383696852cac8b11bf7a426f41d592e3dc', name: "start" }), h("label", { key: '82204edd99bc733897ad6a05d79efc8dd74c83f6', class: "label float-on-focus" }, h("slot", { key: '6a479c63d63fdad7947cd25497f3dceba64574df' })), this.placeholder && h("span", { key: 'a905c85bffb75afa43cf2ea7effdf6a985ce64f8', class: "smoothly-date-placeholder" }, this.placeholder), h("smoothly-date-text", { key: '0e7c8d8a86189c99f83750435da80988153c6519', ref: el => (this.dateTextElement = el), locale: this.locale, readonly: this.readonly, disabled: this.disabled, showLabel: this.showLabel, value: this.value, onSmoothlyDateTextHasText: e => (e.stopPropagation(), (this.hasText = e.detail)), onSmoothlyDateTextFocusChange: e => (e.stopPropagation(), (this.hasFocus = e.detail)), onSmoothlyDateHasPartialDate: e => { var _a; return (e.stopPropagation(), (_a = this.calendarElement) === null || _a === void 0 ? void 0 : _a.jumpTo(e.detail)); }, onSmoothlyDateTextChange: e => (e.stopPropagation(), this.onUserChangedValue(e)), onSmoothlyDateTextDone: e => { var _a; return (e.stopPropagation(), (this.open = false), (_a = this.dateTextElement) === null || _a === void 0 ? void 0 : _a.deselect()); } }), h("span", { key: '6271a396fe0a9db78c65a3ceac415baa6993ce72', class: "smoothly-icons", ref: el => (this.iconsElement = el) }, h("smoothly-icon", { key: '67762b14cf3c1a8657441805585cc22920fcddf6', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), h("slot", { key: '88eaca53d97c64fcfa81e0f749b1e9ff3a0068c4', name: "end" })), this.open && !this.readonly && (h("smoothly-calendar", { key: 'ed5ff09959095128feac27c0c5c4b8ba8b51514f', ref: el => (this.calendarElement = el), doubleInput: false, value: this.value, onSmoothlyDateSet: e => (e.stopPropagation(), this.onUserChangedValue(e)), max: this.max, min: this.min }, h("div", { key: '7d482a7dac0561c9f339948ef22573c9f49ccc51', slot: "year-label" }, h("slot", { key: '6a55528882645e6cc6c5e14b3498b480b8c1d6fd', name: "year-label" })), h("div", { key: 'c310a5c99728b55d0b3f19cb494cc7fe20f12353', slot: "month-label" }, h("slot", { key: '3a4324a869730eb9acb114243a4feae03318b6d5', name: "month-label" }))))));
     }
     static get is() { return "smoothly-input-date"; }
     static get encapsulation() { return "scoped"; }

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

@@ -123,15 +123,15 @@ export class SmoothlyInputDateRange {
         this.smoothlyInput.emit({ [this.name]: undefined });
     }
     render() {
-        return (h(Host, { key: 'd51c1a9eb67ac79c9f2197a1e33226a9b2548967', tabindex: this.disabled ? undefined : 0, class: {
+        return (h(Host, { key: '1f8b2d046cbb64b8df5343a945cb51563d721f27', tabindex: this.disabled ? undefined : 0, class: {
                 "has-value": !!(this.start || this.end),
                 "has-text": !!(this.startHasText || this.endHasText),
                 "floating-label": this.alwaysShowGuide,
-            } }, h("span", { key: 'e401f255c513c13acb60b56c3c5a5f4a0379e8b5', class: "smoothly-date-range-input-part", onClick: (e) => this.onClick(e) }, h("slot", { key: '5ecf9d540aebf83d21b58713d509a64755b1bdf7', name: "start" }), h("label", { key: '04fe956539cc96ad23058cf629785d0a39345652', class: "label float-on-focus" }, h("slot", { key: '852ab71bfc5c592ecdfa6eeba18e2a49ae3db91b' })), this.placeholder && h("span", { key: '1805d99e668be475cc77a724cd6da0b9f27bdc65', class: "smoothly-date-range-placeholder" }, this.placeholder), h("smoothly-date-text", { key: '65e91796cba51d73162c032ec14d002be778ac11', ref: el => (this.startTextElement = el), class: "start-date-text", locale: this.locale, onSmoothlyDateTextHasText: e => (e.stopPropagation(), (this.startHasText = e.detail)), onSmoothlyDateTextFocusChange: e => (e.stopPropagation(), (this.hasFocus = e.detail)), onSmoothlyDateHasPartialDate: e => { var _a; return (e.stopPropagation(), (_a = this.calendarElement) === null || _a === void 0 ? void 0 : _a.jumpTo(e.detail)); }, onSmoothlyDateTextChange: e => (e.stopPropagation(), this.onSmoothlyDateTextChange(e, "start")), onSmoothlyDateTextNext: e => { var _a; return (e.stopPropagation(), (_a = this.endTextElement) === null || _a === void 0 ? void 0 : _a.select()); }, onSmoothlyDateTextDone: e => {
+            } }, h("span", { key: 'abc0f86b086ba26c3b1d4951394d81da35f83e86', class: "smoothly-date-range-input-part", onClick: (e) => this.onClick(e) }, h("slot", { key: 'a06c2b9b096aca90e83f765b364dca7544ed99ca', name: "start" }), h("label", { key: '70d76e4a489a17cb028c4b8831d352171214d58f', class: "label float-on-focus" }, h("slot", { key: '929cd10cba08419fbfeb0e19e99d01ef52bfaf96' })), this.placeholder && h("span", { key: '8c91d08654b77a865869dca0633c04d1af54d57f', class: "smoothly-date-range-placeholder" }, this.placeholder), h("smoothly-date-text", { key: '5a37bda38fa94c90ee8e5440f085c9eac3b81648', ref: el => (this.startTextElement = el), class: "start-date-text", locale: this.locale, onSmoothlyDateTextHasText: e => (e.stopPropagation(), (this.startHasText = e.detail)), onSmoothlyDateTextFocusChange: e => (e.stopPropagation(), (this.hasFocus = e.detail)), onSmoothlyDateHasPartialDate: e => { var _a; return (e.stopPropagation(), (_a = this.calendarElement) === null || _a === void 0 ? void 0 : _a.jumpTo(e.detail)); }, onSmoothlyDateTextChange: e => (e.stopPropagation(), this.onSmoothlyDateTextChange(e, "start")), onSmoothlyDateTextNext: e => { var _a; return (e.stopPropagation(), (_a = this.endTextElement) === null || _a === void 0 ? void 0 : _a.select()); }, onSmoothlyDateTextDone: e => {
                 var _a, _b;
                 return (e.stopPropagation(),
                     this.end ? ((_a = this.startTextElement) === null || _a === void 0 ? void 0 : _a.deselect(), (this.open = false)) : (_b = this.endTextElement) === null || _b === void 0 ? void 0 : _b.select());
-            }, value: this.start, readonly: this.readonly, disabled: this.disabled, showLabel: this.showLabel }), h("span", { key: '3808540c3549d2c2806877f19e59a1d1a73e2cde', class: "smoothly-date-range-separator" }, " \u2013 "), h("smoothly-date-text", { key: '9a880b0c1d61415c832b33dd52374da6e73206bf', ref: el => (this.endTextElement = el), class: "end-date-text", locale: this.locale, onSmoothlyDateTextHasText: e => (e.stopPropagation(), (this.endHasText = e.detail)), onSmoothlyDateTextFocusChange: e => (e.stopPropagation(), (this.hasFocus = e.detail)), onSmoothlyDateHasPartialDate: e => { var _a; return (e.stopPropagation(), (_a = this.calendarElement) === null || _a === void 0 ? void 0 : _a.jumpTo(e.detail)); }, onSmoothlyDateTextChange: e => (e.stopPropagation(), this.onSmoothlyDateTextChange(e, "end")), onSmoothlyDateTextPrevious: e => { var _a; return (e.stopPropagation(), (_a = this.startTextElement) === null || _a === void 0 ? void 0 : _a.select("end")); }, onSmoothlyDateTextNext: e => e.stopPropagation(), onSmoothlyDateTextDone: e => { var _a; return (e.stopPropagation(), (_a = this.endTextElement) === null || _a === void 0 ? void 0 : _a.deselect(), (this.open = false)); }, value: this.end, readonly: this.readonly, disabled: this.disabled, showLabel: this.showLabel })), h("span", { key: '905c40c0e4493dcbf7f19b2b45dad7d3117d5c5e', class: "smoothly-icons" }, h("smoothly-icon", { key: 'cb3e61522d812b6756aa65873740753399cb9256', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), h("slot", { key: 'b2d0ed8714484497ba6c69e3b6617db20c720819', name: "end" })), this.open && (h("smoothly-calendar", { key: '4b62dde1ca06fca127562712a14a287861ca31f9', ref: el => (this.calendarElement = el), doubleInput: true, onSmoothlyDateSet: e => e.stopPropagation(), onSmoothlyDateRangeSet: e => {
+            }, value: this.start, readonly: this.readonly, disabled: this.disabled, showLabel: this.showLabel }), h("span", { key: '694bb773d16025b187d059c8b0cc7b36f94956d5', class: "smoothly-date-range-separator" }, " \u2013 "), h("smoothly-date-text", { key: '830739f213b8c3a27619d7f29667483f4317b612', ref: el => (this.endTextElement = el), class: "end-date-text", locale: this.locale, onSmoothlyDateTextHasText: e => (e.stopPropagation(), (this.endHasText = e.detail)), onSmoothlyDateTextFocusChange: e => (e.stopPropagation(), (this.hasFocus = e.detail)), onSmoothlyDateHasPartialDate: e => { var _a; return (e.stopPropagation(), (_a = this.calendarElement) === null || _a === void 0 ? void 0 : _a.jumpTo(e.detail)); }, onSmoothlyDateTextChange: e => (e.stopPropagation(), this.onSmoothlyDateTextChange(e, "end")), onSmoothlyDateTextPrevious: e => { var _a; return (e.stopPropagation(), (_a = this.startTextElement) === null || _a === void 0 ? void 0 : _a.select("end")); }, onSmoothlyDateTextNext: e => e.stopPropagation(), onSmoothlyDateTextDone: e => { var _a; return (e.stopPropagation(), (_a = this.endTextElement) === null || _a === void 0 ? void 0 : _a.deselect(), (this.open = false)); }, value: this.end, readonly: this.readonly, disabled: this.disabled, showLabel: this.showLabel })), h("span", { key: '90767c1048bbcc816563496f3d3afbea4970e953', class: "smoothly-icons" }, h("smoothly-icon", { key: '9f6ffbfa8e626160be54d8e82f8538d5a1e75c5f', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), h("slot", { key: '83aef1b1b1c8726f0a7b8b939fcf1d54b07a8389', name: "end" })), this.open && (h("smoothly-calendar", { key: '395c5ba753121d7a0eb1c2d1e986cfad58e98232', ref: el => (this.calendarElement = el), doubleInput: true, onSmoothlyDateSet: e => e.stopPropagation(), onSmoothlyDateRangeSet: e => {
                 e.stopPropagation();
                 this.open = false;
                 this.start = e.detail.start;

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

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

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

@@ -97,30 +97,30 @@ export class SmoothlyInputDateTime {
         this.isDifferentFromInitial = false;
     }
     render() {
-        return (h(Host, { key: 'e3026057b92f6fcf94e0abc163d179557991a56d' }, h("smoothly-input", { key: '899dce367576b7d7c9b71c98753579a08b85e4f2', color: this.color, looks: this.looks == "transparent" ? this.looks : undefined, name: "date", onFocus: () => !this.readonly && !this.disabled && (this.open = !this.open), onClick: () => !this.readonly && !this.disabled && (this.open = !this.open), readonly: this.readonly, disabled: this.disabled, type: "date", value: this.date, showLabel: this.showLabel, onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
+        return (h(Host, { key: 'faf40611232f95c653ef583a7f0b7ed32ebb400d' }, h("smoothly-input", { key: 'e0761d639e8d0b3a4f305a05e70e5a6df241fd29', color: this.color, looks: this.looks == "transparent" ? this.looks : undefined, name: "date", onFocus: () => !this.readonly && !this.disabled && (this.open = !this.open), onClick: () => !this.readonly && !this.disabled && (this.open = !this.open), readonly: this.readonly, disabled: this.disabled, type: "date", value: this.date, showLabel: this.showLabel, onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
                 e.stopPropagation();
                 this.date = e.detail.date;
             }, onSmoothlyUserInput: async (e) => {
                 e.stopPropagation();
                 this.smoothlyUserInput.emit({ name: this.name, value: await this.getValue() });
-            } }, h("slot", { key: '8f35a2a863b7b7cf177f0ac69534f7ce77fe1f2c' })), h("smoothly-input", { key: '2eda68cc37c950ca7318d2f82989402890420b3b', name: "hour", type: "integer", max: 23, pad: 2, value: this.hour, readonly: this.readonly, disabled: this.disabled, placeholder: "hh", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
+            } }, h("slot", { key: '7fbe6ae1b6697d22ab4037bcf86ef6d27ce5f923' })), h("smoothly-input", { key: 'cd751c2a4dfe09b316772c07e126ad0c5b875eb4', name: "hour", type: "integer", max: 23, pad: 2, value: this.hour, readonly: this.readonly, disabled: this.disabled, placeholder: "hh", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
                 e.stopPropagation();
                 this.hour = e.detail.hour;
             }, onSmoothlyUserInput: async (e) => {
                 e.stopPropagation();
                 this.smoothlyUserInput.emit({ name: this.name, value: await this.getValue() });
-            } }), h("span", { key: 'adadacca4988e986f1aa32c32f43c9e528b01c3c', class: "colon" }, ":"), h("smoothly-input", { key: '9dad75b858470dd4ba808aa89062eed852190cf9', name: "minute", type: "integer", max: 59, pad: 2, value: this.minute, readonly: this.readonly, disabled: this.disabled, placeholder: "mm", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
+            } }), h("span", { key: 'ff4cc79cf32d9cd9528010965e6bbb2c60026f57', class: "colon" }, ":"), h("smoothly-input", { key: 'd96351c5c25c042915f2ea78f94365648f620e35', name: "minute", type: "integer", max: 59, pad: 2, value: this.minute, readonly: this.readonly, disabled: this.disabled, placeholder: "mm", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
                 e.stopPropagation();
                 this.minute = e.detail.minute;
             }, onSmoothlyUserInput: async (e) => {
                 e.stopPropagation();
                 this.smoothlyUserInput.emit({ name: this.name, value: await this.getValue() });
-            } }), h("span", { key: '71b671253a0616cc4858b3a6ee5e3466442491dd', class: "icons" }, h("smoothly-icon", { key: '42087cb059d241c89ba24bacf3515a3a02641ccf', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), h("slot", { key: '333c5b5cd559d2d1dd492e23cf68ace9bb77821a', name: "end" })), this.open && !this.readonly && (h("smoothly-calendar", { key: 'f51dffb8bfe1e12d9cbc020d5129a0fd27c170e0', doubleInput: false, value: this.value ? isoly.DateTime.getDate(this.value) : undefined, min: this.min ? isoly.DateTime.getDate(this.min) : undefined, max: this.max ? isoly.DateTime.getDate(this.max) : undefined, onSmoothlyDateSet: async (e) => {
+            } }), h("span", { key: '258c62771f84b3816025a7831756d52ddc3e61a3', class: "icons" }, h("smoothly-icon", { key: 'f10cdb5bd42fe2a1bc8e3c9eb41cd488957bb0bf', class: "smoothly-invalid", name: "alert-circle", size: "small", tooltip: this.errorMessage }), h("slot", { key: '867ca6ecbe958d5f97e126fc4df23c6fcef6e1fa', name: "end" })), this.open && !this.readonly && (h("smoothly-calendar", { key: 'd1c1ea3e905b5e677883c273231794de21777fc0', doubleInput: false, value: this.value ? isoly.DateTime.getDate(this.value) : undefined, min: this.min ? isoly.DateTime.getDate(this.min) : undefined, max: this.max ? isoly.DateTime.getDate(this.max) : undefined, onSmoothlyDateSet: async (e) => {
                 e.stopPropagation();
                 this.date = e.detail;
                 this.smoothlyUserInput.emit({ name: this.name, value: await this.getValue() });
                 this.open = false;
-            } }, h("div", { key: 'e2cdfa2540db761e6cba45ea4526cd3b8678d5ec', slot: "year-label" }, h("slot", { key: '96fb5e705509cb97721f48066cbcceee91e4477d', name: "year-label" })), h("div", { key: '134921d0e28c76ba346231073135fab12acdfb17', slot: "month-label" }, h("slot", { key: '73aedfafe560f577e97f16730c0b295eeb8f172e', name: "month-label" }))))));
+            } }, h("div", { key: '0ab989467e67bc709d0c45285a7eba7743606171', slot: "year-label" }, h("slot", { key: 'ae14dc89cb7cfa3df3bd12ed531d9e4f71242c07', name: "year-label" })), h("div", { key: '9e226c95c5ae7ab3af1e09a93d290222827c5dab', slot: "month-label" }, h("slot", { key: 'c0f55782eece8e74881124284504a2ac9489ed63', name: "month-label" }))))));
     }
     static get is() { return "smoothly-input-date-time"; }
     static get encapsulation() { return "scoped"; }

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

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

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

@@ -7,14 +7,14 @@ export class SmoothlyInputDemo {
         this.numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
     }
     render() {
-        return (h(Host, { key: '77487e04cd393519b5080f752b3cba328ae8bbd3' }, h("smoothly-input-demo-standard", { key: 'f9de577b637efcaffe3a92dc55bff25520e0384f' }), h("smoothly-input-date-demo", { key: 'cdb1c974c8cb5844cf800f8fc52c407479db307e' }), h("smoothly-input-demo-user-input", { key: '38bb2d03ef20e3e8e5737e423f4f54c9fad4f973' }), h("smoothly-input-demo-radio", { key: '999e3b97199fbcb547e83c589c1447e726f4754a' }), h("div", { key: 'ee8094197dd274791200a010baedd05db71b888a', class: "inputs" }, h("h2", { key: '5b65b420015ad7bb32ef059f6aee019400cdc6b3' }, "Calendar"), h("smoothly-input-date", { key: '375cad6d89a6f80cbe8e67cbeb1759e0cb28ab11', name: "some-date" }, "Calendar"), h("smoothly-input-date-time", { key: '797e6d6ccbbba14258926f21f202eacad2b85d76', name: "someDateTime", value: isoly.DateTime.now() }, "DateTime"), h("h2", { key: 'a49689e5821a93c721be25c6faa570f05402582b' }, "Date Range"), h("smoothly-input-date-range", { key: 'ab71a879e70b97431da2f0beacf54dc093ca0a7a', name: "testing", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-01", max: "2025-01-31" }), h("smoothly-input-date-range", { key: '703952d0ba703d6a8cc26b4bef028d7a48c8c4f6', name: "testing", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-10", max: "2024-12-30" }, h("smoothly-input-reset", { key: '5bd07b3504d054442cefb2ba9db61c4d83ed39c9', slot: "end", size: "icon" })), h("smoothly-input-date-range", { key: '39c7ae936d2a952626f20dcc19ae0a52885db2f5', looks: "grid", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-10", max: "2025-12-30", showLabel: false, style: {
+        return (h(Host, { key: '0610dea0130909d255f6dcbf7f798521cb18fc4e' }, h("smoothly-input-demo-standard", { key: 'e74b371f701b9371972b5428efb0ea4edea9244c' }), h("smoothly-input-date-demo", { key: 'c989f6853579a9ba68c6f57e2e6381c121ff091c' }), h("smoothly-input-demo-user-input", { key: '67189969e7eeb85c53fa6485cc4bc1c6f8810d3c' }), h("smoothly-input-demo-radio", { key: 'd277353814df2808ab955df71df8dd79a14e3b09' }), h("div", { key: '69864f1761f23e2d9fe5003d1a28895195587f23', class: "inputs" }, h("h2", { key: '9e43ab4414d38f5e7d6ed559293a364700e4e3ff' }, "Calendar"), h("smoothly-input-date", { key: '3cc461eaf51348c11e76a541f4e89c7727d49006', name: "some-date" }, "Calendar"), h("smoothly-input-date-time", { key: '331225ff58737c6cd60986d47935cf906f143d02', name: "someDateTime", value: isoly.DateTime.now() }, "DateTime"), h("h2", { key: '7e7535017eb1d6a683df758a4d017dc7cb1fccc3' }, "Date Range"), h("smoothly-input-date-range", { key: 'fad6725321923c5821fe74add6cef73a560c2496', name: "testing", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-01", max: "2025-01-31" }), h("smoothly-input-date-range", { key: '21d5f9edc259b904554d64c234e8268184db9c78', name: "testing", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-10", max: "2024-12-30" }, h("smoothly-input-reset", { key: 'd08635584ffc2cf923f93304701d5ae0130dcd57', slot: "end", size: "icon" })), h("smoothly-input-date-range", { key: '46c5c5ca642f983a7d4956c83385ab25046044e7', looks: "grid", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-10", max: "2025-12-30", showLabel: false, style: {
                 "--smoothly-input-border-radius": "0.5rem",
-            } }, h("smoothly-input-clear", { key: 'ef4179eba332c4aefcccec094f4cd75e0a724b3d', slot: "end", size: "icon" })), h("h2", { key: '8b97455a27099963ab131055f4d43f0e050f4cc7' }, "Date"), h("smoothly-input-date", { key: 'c167353ed6a2b37488e709929e8dd7691ff3b0b7' }, "Date"), h("smoothly-input-date", { key: 'f0cfeb105e03c511c2b2c4daa5cd618fb1bcbfb4', showLabel: false, value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), h("smoothly-input-date", { key: '771efe6acb85206eb87024409a78ed52d3907af0', value: "2021-10-28" }, "Date", h("smoothly-input-reset", { key: '8e009b6d59da638ada992b07ddb2c2d1c071be55', slot: "end", size: "icon" })), h("smoothly-input-date", { key: '936b5cdea71f19463922d25d2ed9468df89586ce', value: "2021-10-28" }, "Date", h("smoothly-input-clear", { key: 'ad177348cf1f5353d3a2b7c7317fbd71c3614f61', slot: "end", size: "icon" })), h("h2", { key: '475ca58552f978b55eba5222267d18a0d78938c5' }, "Select"), h("div", { key: '7eae0b4cee9e74e38e9e726934101066f870aeec', class: "select-div" }, h("smoothly-input-select", { key: '16d9addd365f75e1ff255d9cd94bb90b20901fd3', name: "select-dessert", looks: "border" }, h("label", { key: '7e7550a94183d31ae99bc7dd85eda059c755e3d0', slot: "label" }, "Select with clear button"), h("smoothly-item", { key: '62b741c6154152014d1206fd2481984aa3097d8f', value: "1" }, "Ice cream"), h("smoothly-item", { key: 'b45f30884b44e05528555295bd11b4e01fc5d3a4', value: "2" }, "Sponge cake"), h("smoothly-item", { key: '7b2c3712a21be6943acf8eb1557ddd9fa101320c', value: "3", disabled: true }, "Disabled Item"), h("smoothly-item", { key: '47bbd5ccbaaa9977688f2db60e3b01ee44c37806', value: "4" }, "Cookie"), h("smoothly-item", { key: '0965a9480aa7dfad59a07bc19d49ccf6a5a7d52d', value: "5" }, "Croissant"), h("smoothly-item", { key: '8298f1a72b728eeb490ba52d31f34e4a5d667da5', value: "6" }, "Chocolate fondue"), h("smoothly-input-clear", { key: '6a5b85b80fd07f85f8d7ca7704e3a80174bd6e6e', size: "icon", slot: "end" })), h("smoothly-input-select", { key: 'e5bc84b980a2bd6cca07a580f15817c3b7dc988b', multiple: true, name: "select-dessert-multiple", looks: "border" }, h("label", { key: 'f73a74a039e1b892a444591ba6c86ab184dbcbbb', slot: "label" }, "Select multiple with reset button"), h("smoothly-item", { key: 'a863ec926936998f9bbf571b0250ed0f6d0d0a9c', value: "ice cream" }, "Ice cream"), h("smoothly-item", { key: '7dc67e9285547dda4daad5136837e80450ac13ea', value: "sponge cake" }, "Sponge cake"), h("smoothly-item", { key: '55dd30ea0dabd3481795c13c350ee7052207aad6', selected: true, value: "cookie" }, "Cookie"), h("smoothly-item", { key: '213ff1fbc6a5c445bbbce07140dbd18ee162cb89', value: "croissant" }, "Croissant"), h("smoothly-item", { key: 'abc065dab103fdaeb511f56c8db239b82cc48577', selected: true, value: "chocolate fondue" }, "Chocolate fondue"), h("smoothly-input-reset", { key: '48922c5a07288a94407c4dc1f55305f567d45893', size: "icon", slot: "end" })), h("smoothly-input-select", { key: '3ebed3f650a369cfbd7850584efd9bcf79c6f846', name: "spirit-animals", looks: "border", mutable: true }, h("label", { key: '73f73f2bce086f81b7fcb46f4808bd5732783aef', slot: "label" }, "Select or add new options"), h("smoothly-item", { key: 'beb4a3b4c715c8b1f2bb5b765fb742da64363cb7', value: "manatee" }, "Manatee"), h("smoothly-item", { key: 'f5c8c7fccb97ac840b42220f8380035a7ac7088f', selected: true, value: "cthulu" }, "Cthulu")), h("smoothly-input-select", { key: '5163d4d246184319955f0c1cc756f9cee765847b', name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { key: '2c7ab7ef09f08930f072f5e2e51677951c84ea50', value: "folder", selected: true }, h("smoothly-icon", { key: '86f4ed31d2e4ff382aece3cedf8f0d0265454b8a', size: "small", name: "folder-outline" })), h("smoothly-item", { key: 'afc8fbf7dba66206051d2ae4d7df8b16a0c3b2cf', value: "camera" }, h("smoothly-icon", { key: 'a9a115b3a8038393e75e72ef38742f3bb1b60339', size: "small", name: "camera-outline" }))), h("smoothly-input-select", { key: 'd7aac15a3ff5c7271fd22cab0621aa6d4f69cb99', ordered: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { key: 'db0eba7390d2b64d810f07898b7b646f0d6a360d', slot: "label" }, "Alphabet ordered select"), Array.from({ length: 26 })
+            } }, h("smoothly-input-clear", { key: '3465328594f446fbbe97cdb87adb806f057a4041', slot: "end", size: "icon" })), h("h2", { key: 'e2a08b76ba392d10beb4eb95d8363620f07b53e4' }, "Date"), h("smoothly-input-date", { key: 'fbc0b53f5e576341027a9d0199e0a369cab1ed15' }, "Date"), h("smoothly-input-date", { key: 'b5ead1c49120a42e63e310361c29d31eabbcff60', showLabel: false, value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), h("smoothly-input-date", { key: '18fab78a08e80b35d930d40be27c5f2863beaba1', value: "2021-10-28" }, "Date", h("smoothly-input-reset", { key: 'ab9470f9a44be6a115ff89db7c50f631362cecae', slot: "end", size: "icon" })), h("smoothly-input-date", { key: '61aa9be4f7193617ecc89d5250f9c97f30742c35', value: "2021-10-28" }, "Date", h("smoothly-input-clear", { key: '9ab5d2a554d2123360afdac3c266ac79c6035d36', slot: "end", size: "icon" })), h("h2", { key: 'ed8c37111142696858c0eac29661406ae2cd9f55' }, "Select"), h("div", { key: '9ae174d2d4a332de3ad770450464569378f05bdb', class: "select-div" }, h("smoothly-input-select", { key: '34f6a893981c3c8dc6703256a9f2c3089cf4ff25', name: "select-dessert", looks: "border" }, h("label", { key: '7198f30b4aa7cb91377cb72ef16cb7dca79d00ff', slot: "label" }, "Select with clear button"), h("smoothly-item", { key: 'b85cb7fb77fe50cd6a42d0a6c38020dcfb2166ed', value: "1" }, "Ice cream"), h("smoothly-item", { key: 'de464d05e6cdffe4b578e5708d1e9e33376a0521', value: "2" }, "Sponge cake"), h("smoothly-item", { key: '553b7ecd797f0e55def5b6c460440d8286755f4c', value: "3", disabled: true }, "Disabled Item"), h("smoothly-item", { key: '3b4349b0785cd4440611499c23f082961541a91a', value: "4" }, "Cookie"), h("smoothly-item", { key: 'a5638b6d6424c31cb1d26cecb42cfeb1004e7674', value: "5" }, "Croissant"), h("smoothly-item", { key: '015c157d486120f18de97fae45e36b9e0b0ef863', value: "6" }, "Chocolate fondue"), h("smoothly-input-clear", { key: 'b16c9fd651670b3808643e57043198550e3a1103', size: "icon", slot: "end" })), h("smoothly-input-select", { key: '277ad384d61f6a4ce7fb849d90a7e2437f105841', multiple: true, name: "select-dessert-multiple", looks: "border" }, h("label", { key: 'bcd5acb1903599e959821fc91f6aaf60ad0bb5b9', slot: "label" }, "Select multiple with reset button"), h("smoothly-item", { key: '3e5c1545a14684d153a252fba8060965f63b6c46', value: "ice cream" }, "Ice cream"), h("smoothly-item", { key: '155d20eda1c0ed2816a7bac67d54b2e55a7a101a', value: "sponge cake" }, "Sponge cake"), h("smoothly-item", { key: 'cdf81df5d54168f33c679918e7f3440f0f8d5da3', selected: true, value: "cookie" }, "Cookie"), h("smoothly-item", { key: 'ee8b1f2e292c76d0b5f1ea73501d56ed7c5c748c', value: "croissant" }, "Croissant"), h("smoothly-item", { key: 'ea635dbcfc236dec09da467db23e37b18fc8953a', selected: true, value: "chocolate fondue" }, "Chocolate fondue"), h("smoothly-input-reset", { key: 'de1bad5de86767304a5244812506166ac09ef395', size: "icon", slot: "end" })), h("smoothly-input-select", { key: 'a606780ffc3288ff2c3963c63d1e67922e27eb03', name: "spirit-animals", looks: "border", mutable: true }, h("label", { key: '12d7b79350e82d58eab979ae139ba1895e6d60e8', slot: "label" }, "Select or add new options"), h("smoothly-item", { key: 'b9c3dfe20a6df2409ef1e350bf6491284a583d5b', value: "manatee" }, "Manatee"), h("smoothly-item", { key: '609d4f74ac6f9b7b3de0d6cf8239e357e273be3f', selected: true, value: "cthulu" }, "Cthulu")), h("smoothly-input-select", { key: '02c55364f84130fbe531450518a9f14c01d093eb', name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { key: '838cb077ef888a9474f387f3e103d1fe5a7446bf', value: "folder", selected: true }, h("smoothly-icon", { key: 'b25142bf3ef747ac3b0efce4e5b0570da8fe3fdf', size: "small", name: "folder-outline" })), h("smoothly-item", { key: '230ece62e3958643281636ba4185118102394ce8', value: "camera" }, h("smoothly-icon", { key: '2388323ed7eb30ca002c1fdb0a5b3c39e11b5da2', size: "small", name: "camera-outline" }))), h("smoothly-input-select", { key: '39a9cf873e9f7d93b05de669efa66d38f2f23ab6', ordered: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { key: '9789169a41dfb9e3162112e23caffbfe5b6daeea', slot: "label" }, "Alphabet ordered select"), Array.from({ length: 26 })
             .map((_, i) => String.fromCharCode(i + 65))
-            .map(char => (h("smoothly-item", { value: char, selected: char == "H" }, char)))), h("smoothly-input-select", { key: 'c61728d55e5e96dc81d5df36c4fa38ed802f8b00', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { key: '5768a186da1bf2fa4fbc80fb91478af031981694', slot: "label" }, "Month multiple select"), h("smoothly-item", { key: '950676b7ffb90bc765f2a0c24cb40c631f64add8', value: "1" }, "January"), h("smoothly-item", { key: '57e77e1ca64869441e44e0c753a0c132e6c8a152', value: "2" }, "February"), h("smoothly-item", { key: '2ee03ce05d5dfa6ec01fc3cde97051a10d2215d9', value: "3" }, "March"), h("smoothly-item", { key: '9c9dfdf2dd5ebdfffdc92732b7dff4b770632775', value: "4" }, "April"), h("smoothly-item", { key: '35a1ce3376a84c830c00fba8080c093ef6f4830a', value: "5" }, "May"), h("smoothly-item", { key: 'cbf4b76e9f8324b29626555ec612f5ee5da8d47b', value: "6" }, "June"), h("smoothly-item", { key: '6f7bc0aaeb4ff6e5d0427ab5226924b625086419', value: "7" }, "July"), h("smoothly-item", { key: '72d72d65b42e1250b527023364c2bb0c79178a37', value: "8" }, "August"), h("smoothly-item", { key: '5d6f57f7ca75f90c30aef101bbbdbb9a26aafb69', value: "9" }, "September"), h("smoothly-item", { key: '08d57569eab4d0948f87eaeb8d5e1b936ee17839', value: "10" }, "October"), h("smoothly-item", { key: '99e91533b340a40db158f87ed28fb371ebd8eb08', value: "11" }, "November"), h("smoothly-item", { key: '4fd40ffef20baed8a6f5ca58768c78693b3a45a4', value: "12" }, "December")), h("div", { key: 'e1c03afba7cd1421976e4a4c59beac860dedf723', class: "select-div-row" }, h("smoothly-input-select", { key: '4067c5e666655fe1b474a73a58241373c826ab03', name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { key: '0589c79c7fa7cf31dbad4ab0e8be68523e684299', value: "folder", selected: true }, h("smoothly-icon", { key: '56813db2ee593db9227920662d646f7493e0515a', size: "small", name: "folder-outline" })), h("smoothly-item", { key: '3937b7ebb395698a854b2eeb9aeed188fe8fd78d', value: "camera" }, h("smoothly-icon", { key: 'ce39494e071c12c23a475c31eb448512d2fa0f25', size: "small", name: "camera-outline" })), h("smoothly-item", { key: '9a65176e01981ccfd312fd4d3d4b255760891699', value: "boat" }, h("smoothly-icon", { key: 'e9e97ae824d225a6dc33fa997b5e46a8bc3c2812', size: "small", name: "boat-outline" }))), h("smoothly-input-select", { key: '1f21eb6eded9dffd449157755bad1b84f7a52981', name: "select-number", clearable: false }, this.numbers.map(number => (h("smoothly-item", { value: "number", selected: number === 3 }, number)))), h("smoothly-input", { key: 'f4afcff411357a29b89fe0a52239ba7c677cb490', name: "name", value: "Sten Qvist" }, "Name"))), h("h2", { key: '9883744d26d1eec36ed1082407e3656d4ea0d1f7' }, "Duration"), h("smoothly-input", { key: 'fa507aaa61557ca41837cf906a78fef5d16affc0', name: "duration", type: "duration", placeholder: "hh:mm", value: this.duration, onSmoothlyInput: e => (this.duration = e.detail.duration) }, "Duration"), h("smoothly-input", { key: 'f5c027a3ed22026819a2e88ddc5300afe7b8c900', name: "duration", type: "duration", value: this.duration, placeholder: "-hh:mm", onSmoothlyInput: e => {
+            .map(char => (h("smoothly-item", { value: char, selected: char == "H" }, char)))), h("smoothly-input-select", { key: 'f387c1c723590cc0af87d9a1fd57d459c1cc73f6', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { key: 'a5db731994586ad163c1077afe56a23f8645654a', slot: "label" }, "Month multiple select"), h("smoothly-item", { key: 'f1f9ee3d60d71883b4dd1b4aea488f2c22cde1d5', value: "1" }, "January"), h("smoothly-item", { key: 'a4432cbbf045646fdb7c5481edd5a4dc647e714e', value: "2" }, "February"), h("smoothly-item", { key: '5004b0e7acb2fca29c26f563933f66a141a87a21', value: "3" }, "March"), h("smoothly-item", { key: 'f9085fa0f5ac2bdc308a6e6eb5f76d060179adac', value: "4" }, "April"), h("smoothly-item", { key: '45c828dcd5f36bcb4624860f11ffe970ecfe3021', value: "5" }, "May"), h("smoothly-item", { key: '6dcc18a959124619842d5a7bd68b38b507ecbb80', value: "6" }, "June"), h("smoothly-item", { key: 'cd1b161f2f13dfe661b2d3363e3b20647c4ec3ca', value: "7" }, "July"), h("smoothly-item", { key: 'a5ae41fa7eed339f47f69aad3681eae4579e0efe', value: "8" }, "August"), h("smoothly-item", { key: '0016e486b487603da72487e53031739b85dc5318', value: "9" }, "September"), h("smoothly-item", { key: 'f1c6ed5593caa14259f74be4c8b3be20386e54cf', value: "10" }, "October"), h("smoothly-item", { key: 'f636538a7669567ff285e74a4c2de398546108ec', value: "11" }, "November"), h("smoothly-item", { key: '0a83028ce8f962d1b8d501041aad0a288a5829c5', value: "12" }, "December")), h("div", { key: 'e16c4ae44a81885c288ca235fc56e53d08b3253f', class: "select-div-row" }, h("smoothly-input-select", { key: 'a399d1152444fff42ea7b37ca41824a6ecf63d81', name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { key: 'af648a4bb5f15488197c34a752e282bd60cf79a3', value: "folder", selected: true }, h("smoothly-icon", { key: '16d8cdf17dbf67544d10c06d8f599dd30b87cb61', size: "small", name: "folder-outline" })), h("smoothly-item", { key: '39012cd32fa3bcecb1cc012160048d6817a94c5c', value: "camera" }, h("smoothly-icon", { key: 'a51166743064c08c1e9509fea17b60fde3f39556', size: "small", name: "camera-outline" })), h("smoothly-item", { key: '5b13f14afbbf764ad387c34db65f48335c8e5ff8', value: "boat" }, h("smoothly-icon", { key: '855facc3a62046b5b3b4ff29f0d5226d2aff1c55', size: "small", name: "boat-outline" }))), h("smoothly-input-select", { key: 'cc1e08d1120f45c8143ae6f28cbdbad769785e58', name: "select-number", clearable: false }, this.numbers.map(number => (h("smoothly-item", { value: "number", selected: number === 3 }, number)))), h("smoothly-input", { key: 'f12155b6e15ef36745915628c1ffc34a2c277bcd', name: "name", value: "Sten Qvist" }, "Name"))), h("h2", { key: '32733265cff202c69112ac37afbbe51e9ee16b13' }, "Duration"), h("smoothly-input", { key: '1c359b65c54c00a291d4ab2fca662ae0823545be', name: "duration", type: "duration", placeholder: "hh:mm", value: this.duration, onSmoothlyInput: e => (this.duration = e.detail.duration) }, "Duration"), h("smoothly-input", { key: 'b50a7ea8c22c140a5d1b81eb197caa88d79ff4cc', name: "duration", type: "duration", value: this.duration, placeholder: "-hh:mm", onSmoothlyInput: e => {
                 const duration = e.detail.duration;
                 this.duration = duration;
-            } }, "Duration"), h("h2", { key: 'f178f51facdeb434a16ecc35c0820ee5035f7d6c' }, "Integer with Min/Max"), h("smoothly-input", { key: 'acc0577e2f0679be92ef3ba362210cd1953a73ff', name: "days", type: "integer", min: 0, max: 365 }, "Days per year (0-365)"), h("smoothly-input", { key: '9a24258cbec32021cf1ec3506f7b4cadf2f459e5', name: "hour", type: "integer", min: 0, max: 23 }, "Hours per day (0-23)"), h("smoothly-input", { key: '95a122168d96126ef14f48810daf29867fba07b4', name: "minute", type: "integer", min: 0, max: 59 }, "Minutes per hour (0-59)"), h("smoothly-input", { key: '9631a9f894bbefd71bb298683f3333c4357db73b', name: "minute", type: "integer", min: 18, max: 120 }, "Age (18-120)"), h("h2", { key: 'c6f4545ede80c54a354bc0f01be6072b19ea2bb1' }, "Invalid text with warning icon and tooltip"), h("smoothly-input", { key: 'ae5cf8e08b0887db2752d0bf39a4c5a14cb1027c', copyable: true, name: "alphanumeric", invalid: !/^[a-zA-Z0-9]+$/.test(this.alphanumeric), errorMessage: "Only alphanumeric allowed", value: this.alphanumeric, onSmoothlyInput: e => (this.alphanumeric = e.detail.alphanumeric) }, "Alphanumeric"), h("h2", { key: '22724babf43bccb1d64e21646130dd8f58c9505c' }, "Identifiers"), h("smoothly-input", { key: 'c5a7f350b414fd154ab54c889aeab223cbe23d16', type: "identifier-code" }, "Code"), h("smoothly-input", { key: 'de0f4aaf40eca11ccb24293c3976ade34f91aaa5', type: "identifier-attribute" }, "Attribute"), h("smoothly-input", { key: 'fda65727abf9aa451b8b7f755f7bb92fa43afb93', type: "identifier-snake" }, "Snake"), h("smoothly-input", { key: '11de906823b2e325f3f9548b019aa8234722656a', type: "identifier-pascal" }, "Pascal"), h("smoothly-input", { key: 'ba3477e4964b1336e6198db348640d7144fbd06c', type: "identifier-camel" }, "Camel"), h("h2", { key: '059c263a0ec79a3986d4e57337a2949c755feb70' }, "Input Alternatives"), h("smoothly-input", { key: '8fbe4f80ac2d1d4bd1093a2b60103e248e4169f8', type: "text", name: "name.last" }, h("smoothly-icon", { key: 'cd0f121fd2ff7bbc8cdc9cfa9cf730cef08e8f11', name: "checkmark-circle", slot: "start" }), "First Name"), h("smoothly-input", { key: 'adf350f5ec052599e95fbf6dcc7c16fa64bcc277', type: "text", name: "name.first" }, "Last Name", h("smoothly-icon", { key: '4d0ca4a746cce893302008a8b66f07df9a96604c', name: "checkmark-circle", slot: "end" })), h("smoothly-input", { key: 'cfb36cd378ca610efbb3d6252e70391985f9b00f', type: "text", name: "name.first", placeholder: "Smith" }, "Last Name", h("smoothly-icon", { key: '9fbb53db768468228c7716881cc996d20b77fba3', name: "checkmark-circle", slot: "end" })), h("smoothly-input", { key: '1383590d66cba4e38a1beb82cfafb551ea1661fd', placeholder: "test" }), h("smoothly-input-submit", { key: '13cc6546a1eb274496d10c27c3c80a2bca7dca66', slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }), h("h4", { key: '53f6a46a5524668011994c2be07b47ab4d2fb1d0' }, "Smoothly checkboxes"), h("div", { key: 'cc5f357f8e9b673c95de607251ef97437f0f2afc', class: "checkbox-group" }, h("smoothly-input-checkbox", { key: 'b12ff9cf6d4c042dfc079dea8ed8f92d95a70c68', disabled: true, name: "first-checkbox" }, h("smoothly-icon", { key: '7daedabd25cb229c4512c017efb990cca3a08cc8', name: "checkmark-circle", slot: "start", size: "tiny" }), "First"), h("smoothly-input-checkbox", { key: '0836da075b7030bee160bb8931c54092a5b93ef8', name: "second-checkbox", checked: true }, h("smoothly-icon", { key: '4d94e2fe73e6580791da9d9a872cd8d4649df36f', name: "checkmark-circle", slot: "start", size: "tiny" }), "second", h("smoothly-input-clear", { key: '117ca8ae52817149a678b4a100a24c3a4829a9b3', size: "icon", slot: "end" })), h("smoothly-input-checkbox", { key: '6e99923c8c082c4727eea3c75b77b23d86eed801', name: "third-checkbox" }, "3rd")), h("h4", { key: '3a807db156e197c5192388886889988b874018d8' }, "Smoothly Radio Buttons"), h("smoothly-input-radio", { key: '85e1ce54231e39c9f248fe1c7829a2b9cc7775e3', clearable: true, name: "radioFirstInput" }, h("smoothly-icon", { key: '72e48b10d12022b72d30591bc74af1c4cb516bf7', name: "checkmark-circle", slot: "start" }), h("label", { key: '5b67d1eaaf73b84abb3a3e26ddd3fe27c9993e23', slot: "label" }, "Clearable"), h("smoothly-input-radio-item", { key: '06f796bdde5479565e1ee6258ad73f0b7c4327f5', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '14ab365a1da0fe3b94f1454549e3040df215d9c8', selected: true, value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: 'ccaf48dc6917aeb500653f637c4b30883814e61a', value: "third" }, "Label 3"), h("smoothly-input-clear", { key: '3cc0373ca5e87e2bb0916b2afed9e4cd70515866', size: "icon", slot: "end" })), h("smoothly-input-radio", { key: 'cdd729d929f57261d1422a45d83f6332912ae399', name: "radioSecondInput" }, h("label", { key: '95d8374b3914b2f88605e2e90cb607bb423fed2b', slot: "label" }, "Not clearable"), h("smoothly-input-radio-item", { key: 'b1cd33f88df8c1161b203675a4e02c8815954f96', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: 'b797b785615fbfd4b881db249c99c39bf0fa6504', value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '8557067758ca9f7acc6b35db56e9c6aee2c49f43', value: "third" }, "Label 3"), h("smoothly-input-radio-item", { key: 'bdbbcf1228089b03cae001cdb573b8c7f37f08df', value: "fourth" }, "Label 4"), h("smoothly-input-radio-item", { key: '414016c094bc15ceb37955e3adf1dc18db87e45c', value: "fifth" }, "Label 5"), h("smoothly-input-radio-item", { key: 'ba3a6a393f5f3af34eb12ec5391d0a6a1eb03e04', value: "sixth" }, "Label 6")), h("smoothly-input-range-demo", { key: '97406c6ddb794364f4a1b53c5e1ed551ed8a1ad6' }), h("smoothly-input-color-demo", { key: '0676c5e29637f2097dd0fb084d6507ec9c5c218c' }), h("smoothly-input-price-demo", { key: '80c25cdc1a8d1c2d88df5c680527d5638da91d65' }), h("smoothly-back-to-top", { key: '6aad374c875c762e4e4aff5567aae10300fbd7be' }))));
+            } }, "Duration"), h("h2", { key: '9bf848b3aeb2d99264b20270c030daf0a2e4538c' }, "Integer with Min/Max"), h("smoothly-input", { key: 'ef9a50d998c97e0ee62ce7521a47d9116596f594', name: "days", type: "integer", min: 0, max: 365 }, "Days per year (0-365)"), h("smoothly-input", { key: '3fc4295acaaabe23a12e6e9fd192371d137e2ebd', name: "hour", type: "integer", min: 0, max: 23 }, "Hours per day (0-23)"), h("smoothly-input", { key: 'e3e23c2ff05c311d1d62b86d9de0e333aaf38d16', name: "minute", type: "integer", min: 0, max: 59 }, "Minutes per hour (0-59)"), h("smoothly-input", { key: 'a92c74f2b45cc1df86589e62e97b87c8a7060351', name: "minute", type: "integer", min: 18, max: 120 }, "Age (18-120)"), h("h2", { key: '05151b343a921085863acb3cc263fb4775fc1326' }, "Invalid text with warning icon and tooltip"), h("smoothly-input", { key: '433ed8e5372266ef59393311c0dde265b79efb36', copyable: true, name: "alphanumeric", invalid: !/^[a-zA-Z0-9]+$/.test(this.alphanumeric), errorMessage: "Only alphanumeric allowed", value: this.alphanumeric, onSmoothlyInput: e => (this.alphanumeric = e.detail.alphanumeric) }, "Alphanumeric"), h("h2", { key: 'b5e460972d07d70a04099e129f4b11706ee6ea58' }, "Identifiers"), h("smoothly-input", { key: 'd059d3ecee65ec385e40d11bad328bde8be89246', type: "identifier-code" }, "Code"), h("smoothly-input", { key: '669bda44ce4115dc276335a9566cd433ccc992c4', type: "identifier-attribute" }, "Attribute"), h("smoothly-input", { key: 'a775035df9b192896c2ce7f1beebe6e904c1d42d', type: "identifier-snake" }, "Snake"), h("smoothly-input", { key: '359285e474ea704c36e73984c35e4ae245c47a00', type: "identifier-pascal" }, "Pascal"), h("smoothly-input", { key: 'f1a36423248b413cd20749f738fe12a8eeacae15', type: "identifier-camel" }, "Camel"), h("h2", { key: '2f6beac2f107dd3dc34a537e5b47f13d76206a07' }, "Input Alternatives"), h("smoothly-input", { key: '74cfbe969295b7cb9e02af90b126d9bdb60168cc', type: "text", name: "name.last" }, h("smoothly-icon", { key: '34e749e71f3d9976f2b71e57dd8644d53872aa35', name: "checkmark-circle", slot: "start" }), "First Name"), h("smoothly-input", { key: '61f44e09ab53cf0cf061007d3cf8426722e53312', type: "text", name: "name.first" }, "Last Name", h("smoothly-icon", { key: '55adb72f7485eb5f2235516c9d2839feae927ad7', name: "checkmark-circle", slot: "end" })), h("smoothly-input", { key: '642a573bebe0e805fd7d178dfc8befe7e77bba15', type: "text", name: "name.first", placeholder: "Smith" }, "Last Name", h("smoothly-icon", { key: '5bcfe9a74e7ec780fee1764933bd37f82b36495d', name: "checkmark-circle", slot: "end" })), h("smoothly-input", { key: 'cd5b1bbd73247cfb21b6ff99a56c0989ec7f3239', placeholder: "test" }), h("smoothly-input-submit", { key: '02c46969366444af0882851f2f3a0cd80f1b61c3', slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }), h("h4", { key: '3bc94eda5050b71ec193fda5600d76b5341b71d5' }, "Smoothly checkboxes"), h("div", { key: '165dd5a0d8e539c3d9fdbebf49ded093589acea7', class: "checkbox-group" }, h("smoothly-input-checkbox", { key: '17c781cdca9adf265d7418ca27ace984f0b70499', disabled: true, name: "first-checkbox" }, h("smoothly-icon", { key: '413a357d61374d72ae7be41bca5a7360b105e9e0', name: "checkmark-circle", slot: "start", size: "tiny" }), "First"), h("smoothly-input-checkbox", { key: '81ad9a572cb4e01b86ca1a189d4ce027c81d588b', name: "second-checkbox", checked: true }, h("smoothly-icon", { key: 'a34d9d7860461de0a508e8f36ab3e89627475777', name: "checkmark-circle", slot: "start", size: "tiny" }), "second", h("smoothly-input-clear", { key: 'fc64656864d9c68ef8f8ee42868af8f6d27ff217', size: "icon", slot: "end" })), h("smoothly-input-checkbox", { key: '8d1461bc9cc61eb79488162501232355e27bb992', name: "third-checkbox" }, "3rd")), h("h4", { key: '0eca64c7ae21e4f915e7f146d36662983f5c3759' }, "Smoothly Radio Buttons"), h("smoothly-input-radio", { key: '7677ce8ca260453a84a650fcced18a6592acc6a7', clearable: true, name: "radioFirstInput" }, h("smoothly-icon", { key: 'fd28ffad9dc1a32efb02131873f238c54fcb63e2', name: "checkmark-circle", slot: "start" }), h("label", { key: '63d92632a2ef4832fd863f55991480e1ec58fbae', slot: "label" }, "Clearable"), h("smoothly-input-radio-item", { key: 'a3e81d19c74fc5de2d25e44afb686793807025d5', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '5a4118fd0fb1b24e7a3e957c6186a94caf6c3160', selected: true, value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: 'beb9d9bfec1ebd2bd268b3c94fde2f23ee77b31b', value: "third" }, "Label 3"), h("smoothly-input-clear", { key: '91ff12f5c8d3911b662a4774e3d8887742de6b42', size: "icon", slot: "end" })), h("smoothly-input-radio", { key: '5e708295015296538d73936026d36e5badc6f805', name: "radioSecondInput" }, h("label", { key: '8ffb6b2f623f8e16a19d6b9d83b93b28d9fe2637', slot: "label" }, "Not clearable"), h("smoothly-input-radio-item", { key: 'a5cf624fceafa16030eab1e9050cd3cac2c985f1', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '66ab2a39eb130a221dea6cc77beecb0c221cecf5', value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '44792e09a3cfff26ec11c364e842db24f1eb10f2', value: "third" }, "Label 3"), h("smoothly-input-radio-item", { key: '78b2689f9c52960b2901431b22c7f7faec8605ae', value: "fourth" }, "Label 4"), h("smoothly-input-radio-item", { key: 'fb6757b00011d410ffcf1cad4dcdfe1c586ca24a', value: "fifth" }, "Label 5"), h("smoothly-input-radio-item", { key: 'dcd365bfd3792cab31ede99aa43edf5d41d8af9e', value: "sixth" }, "Label 6")), h("smoothly-input-range-demo", { key: 'c231fb7b9c6d28546b4d13c87ef3a900b33191ca' }), h("smoothly-input-color-demo", { key: '540d7e3d4ec89f99ec6c67d725468e050ec0a183' }), h("smoothly-input-price-demo", { key: 'eb8164f02728a0ee68e10ecb949c6b7f45d2fff2' }), h("smoothly-back-to-top", { key: '98cd43c5de35cfeea70b77434dac7907648c1b6e' }))));
     }
     static get is() { return "smoothly-input-demo"; }
     static get encapsulation() { return "scoped"; }

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

@@ -6,7 +6,7 @@ export class SmoothlyInputPriceDemo {
         this.currency = "USD";
     }
     render() {
-        return (h(Host, { key: '47fe9e7623e48def83512a77af0c7720b7d359e1' }, h("h2", { key: 'be944b8ee8341bfb659135ee049084cece6dd0da' }, "State demo on smoothly-input"), h("p", { key: '728077f668bbf069362b28336cfca6bfc3c9ef37' }, "This demo/test the internal state of the smoothly-input component."), h("p", { key: '64db9e66b2e50e69f65a234df4a4071221b8926d' }, "The currency of the price should update when switching between the currencies."), h("smoothly-input-radio", { key: 'f260f857923136f03db67981a71f03295014f407', name: "currency", onSmoothlyInput: e => (this.currency = isoly.Currency.is(e.detail.currency) ? e.detail.currency : undefined) }, this.currencies.map(currency => (h("smoothly-input-radio-item", { key: currency, selected: currency == this.currency, value: currency }, currency)))), h("smoothly-input", { key: 'a01183cf22a642906f22873c5dcc09367ca524ef', type: "price", currency: this.currency }, "price")));
+        return (h(Host, { key: '2d35ede0ba48999e163c9b401e822a703c049639' }, h("h2", { key: '6e3c78bd7a51616418555e74379ed81f4351688a' }, "State demo on smoothly-input"), h("p", { key: 'd43ad6219d21d065dc62197872e4cb689fececb5' }, "This demo/test the internal state of the smoothly-input component."), h("p", { key: 'e2a250b7bfb6433bc61fa3d740df11cae0713f85' }, "The currency of the price should update when switching between the currencies."), h("smoothly-input-radio", { key: '4d111e1bd9fbc0dcc57d3a842cfd0756a4807991', name: "currency", onSmoothlyInput: e => (this.currency = isoly.Currency.is(e.detail.currency) ? e.detail.currency : undefined) }, this.currencies.map(currency => (h("smoothly-input-radio-item", { key: currency, selected: currency == this.currency, value: currency }, currency)))), h("smoothly-input", { key: '4c81a6bf8c3d854f3443942a6c1fb64db9b67b54', type: "price", currency: this.currency }, "price")));
     }
     static get is() { return "smoothly-input-price-demo"; }
     static get encapsulation() { return "scoped"; }