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

smoothly 1.113.0 → 1.115.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 (378) 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/cjs/smoothly.cjs.js CHANGED Viewed

@@ -19,7 +19,7 @@ var patchBrowser = () => {
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy(JSON.parse("[[\"smoothly-app_98.cjs\",[[0,\"smoothly-app-demo\",{\"baseUrl\":[1,\"base-url\"]},[[8,\"smoothlyUrlChange\",\"urlChangeHandler\"]]],[2,\"smoothly-form-demo\"],[2,\"smoothly-input-demo\",{\"duration\":[32],\"alphanumeric\":[32]}],[2,\"smoothly-table-demo\"],[0,\"smoothly-button-demo\"],[2,\"smoothly-icon-demo\",{\"display\":[32],\"props\":[32]}],[2,\"smoothly-theme-demo\"],[0,\"smoothly-display-demo\",{\"downloadingSpinner\":[32]}],[2,\"smoothly-dialog-demo\",{\"openModal\":[32],\"openTallModal\":[32],\"showFrame\":[32]}],[260,\"smoothly-app\",{\"label\":[513],\"color\":[1],\"home\":[1],\"menuOpen\":[1540,\"menu-open\"],\"navBreakpoint\":[513,\"nav-breakpoint\"],\"mobileMode\":[32],\"selected\":[32],\"selectRoom\":[64]},[[8,\"popstate\",\"locationChangeHandler\"],[0,\"smoothlyRoomSelect\",\"roomSelectedHandler\"],[0,\"smoothlyRoomLoad\",\"roomLoadedHandler\"],[8,\"click\",\"clickHandler\"]],{\"selected\":[{\"selectedChanged\":0}]}],[262,\"smoothly-app-room\",{\"label\":[513],\"icon\":[513],\"disabled\":[516],\"path\":[1],\"selected\":[1540],\"content\":[16],\"mobileMode\":[32],\"setMobileMode\":[64],\"getContent\":[64],\"setSelected\":[64]},[[8,\"smoothlyUrlUpdate\",\"setQuery\"]]],[2,\"smoothly-tabs-demo\",{\"extraTab1\":[32],\"extraTab2\":[32]}],[2,\"smoothly-form-demo-pet\",{\"hasOwner\":[32],\"owner\":[32],\"value\":[32]}],[2,\"smoothly-input-demo-standard\",{\"duration\":[32],\"options\":[32]}],[2,\"smoothly-form-demo-all\"],[2,\"smoothly-input-demo-user-input\",{\"textIndex\":[32],\"selectIndex\":[32],\"checkboxChecked\":[32],\"radioIndex\":[32],\"rangeValue\":[32],\"colorIndex\":[32],\"dateValue\":[32],\"datetimeValue\":[32],\"dateRangeValue\":[32]}],[2,\"smoothly-form-demo-transparent\"],[2,\"smoothly-table-demo-group\"],[2,\"smoothly-form-demo-schedule\"],[2,\"smoothly-form-demo-typed\"],[2,\"smoothly-table-demo-colspan\"],[2,\"smoothly-table-demo-nested-no-cell\",{\"loadingIndex\":[32],\"loadedRows\":[32]}],[2,\"smoothly-form-demo-controlled\",{\"name\":[32],\"currency\":[32],\"date\":[32]},null,{\"name\":[{\"nameChanged\":0}]}],[2,\"smoothly-form-demo-date\"],[2,\"smoothly-form-demo-date-range\"],[2,\"smoothly-table-demo-filler-row\",{\"cats\":[32]}],[2,\"smoothly-table-demo-simple\"],[2,\"smoothly-button-demo-standard\",{\"props\":[32],\"heightText\":[32],\"lastButton\":[32]},null,{\"props\":[{\"updateInputHeightText\":0}]}],[2,\"smoothly-input-date-demo\",{\"date\":[32],\"alwaysShowGuide\":[32]}],[0,\"smoothly-input-color-demo\"],[0,\"smoothly-input-range-demo\"],[2,\"smoothly-form-demo-login\"],[2,\"smoothly-form-demo-prices\"],[2,\"smoothly-form-demo-card\"],[0,\"smoothly-display-demo-json\"],[2,\"smoothly-input-demo-radio\",{\"selected\":[32]},null,{\"selected\":[{\"selectedChange\":0}]}],[2,\"smoothly-theme-guide\"],[2,\"smoothly-input-price-demo\",{\"currencies\":[32],\"currency\":[32]}],[262,\"smoothly-notifier\",{\"icon\":[4],\"notices\":[32]},[[0,\"notice\",\"onNotice\"],[0,\"remove\",\"onRemove\"]]],[262,\"smoothly-theme-picker\",{\"element\":[1]}],[262,\"smoothly-dialog\",{\"color\":[513],\"open\":[1540],\"closable\":[516],\"header\":[513]},[[0,\"trigger\",\"TriggerListener\"]]],[2,\"smoothly-theme-colors\"],[2,\"smoothly-toggle-switch-demo\"],[2,\"smoothly-burger\",{\"open\":[1540]},[[0,\"click\",\"clickHandler\"]],{\"open\":[{\"openChanged\":0}]}],[262,\"smoothly-modal\",{\"open\":[1540],\"closable\":[516],\"align\":[513],\"closeModal\":[64],\"openModal\":[64]},null,{\"open\":[{\"openChanged\":0}]}],[2,\"smoothly-frame\",{\"url\":[1],\"name\":[513],\"origin\":[1],\"send\":[64]}],[262,\"smoothly-label\",{\"hue\":[2],\"description\":[1],\"shape\":[513]}],[2,\"smoothly-table-demo-nested-no-cell-inner\",{\"data\":[16]}],[2,\"smoothly-notification\",{\"notice\":[16],\"closable\":[4],\"icon\":[4],\"tick\":[32]},[[0,\"trigger\",\"onTrigger\"]],{\"notice\":[{\"onUpdatedNotice\":0}]}],[262,\"smoothly-table-filler-row\"],[2,\"smoothly-back-to-top\",{\"opacity\":[1],\"bottom\":[1],\"right\":[1],\"visible\":[32]}],[262,\"smoothly-summary\",{\"open\":[1540]}],[2,\"smoothly-theme-color\",{\"color\":[1]}],[262,\"smoothly-table-row-group\",{\"align\":[516],\"open\":[1540]}],[262,\"smoothly-table-foot\"],[2,\"smoothly-theme-color-variant\",{\"color\":[513],\"variant\":[513]}],[262,\"smoothly-input-edit\",{\"color\":[1],\"expand\":[513],\"fill\":[513],\"disabled\":[1540],\"display\":[1540],\"shape\":[513],\"type\":[513],\"size\":[513],\"tooltip\":[1]},[[0,\"click\",\"clickHandler\"]]],[262,\"smoothly-lazy\",{\"show\":[1028],\"content\":[16]}],[262,\"smoothly-table-expandable-cell\",{\"span\":[514],\"open\":[1540],\"close\":[64]},null,{\"open\":[{\"openChange\":0}]}],[262,\"smoothly-table-expandable-row\",{\"open\":[1540]},null,{\"open\":[{\"openChange\":0}]}],[262,\"smoothly-input-date-time\",{\"color\":[1537],\"looks\":[1537],\"name\":[513],\"readonly\":[1540],\"disabled\":[516],\"invalid\":[516],\"errorMessage\":[513,\"error-message\"],\"value\":[1025],\"open\":[1028],\"showLabel\":[516,\"show-label\"],\"min\":[1],\"max\":[1],\"date\":[32],\"hour\":[32],\"minute\":[32],\"register\":[64],\"unregister\":[64],\"getValue\":[64],\"listen\":[64],\"clear\":[64],\"edit\":[64],\"reset\":[64],\"setInitialValue\":[64]},[[0,\"smoothlyInputLooks\",\"smoothlyInputLooksHandler\"],[0,\"smoothlyInputLoad\",\"smoothlyInputLoadHandler\"],[8,\"click\",\"onWindowClick\"]],{\"name\":[{\"nameChange\":0}],\"date\":[{\"handleChange\":0}],\"hour\":[{\"handleChange\":0}],\"minute\":[{\"handleChange\":0}],\"value\":[{\"valueChange\":0}],\"disabled\":[{\"watchingReadonly\":0}],\"readonly\":[{\"watchingReadonly\":0}]}],[2,\"smoothly-load-more\",{\"triggerMode\":[1,\"trigger-mode\"],\"name\":[1],\"multiple\":[4],\"inView\":[32]}],[262,\"smoothly-tab\",{\"label\":[1],\"name\":[1],\"tooltip\":[1],\"open\":[1540],\"disabled\":[516]},[[0,\"smoothlyInputLoad\",\"onInputLoad\"],[0,\"smoothlyInput\",\"onInputLoad\"]],{\"open\":[{\"openHandler\":0}]}],[262,\"smoothly-tabs\",{\"tabs\":[513],\"numberOfTabs\":[2,\"number-of-tabs\"],\"tabElements\":[32],\"selectedElement\":[32],\"removeTab\":[64]},[[0,\"smoothlyTabLoad\",\"onInputLoad\"],[0,\"smoothlyTabOpen\",\"openChanged\"]],{\"selectedElement\":[{\"onSelectedChange\":0}]}],[262,\"smoothly-trigger\",{\"color\":[513],\"fill\":[513],\"disabled\":[516],\"type\":[513],\"name\":[1],\"value\":[8]},[[0,\"click\",\"onClick\"]]],[262,\"smoothly-table-cell\",{\"span\":[514]}],[262,\"smoothly-input-file\",{\"readonly\":[1540],\"disabled\":[516],\"accept\":[1],\"color\":[1537],\"looks\":[1537],\"camera\":[513],\"name\":[513],\"showLabel\":[516,\"show-label\"],\"value\":[1040],\"placeholder\":[1537],\"dragging\":[32],\"register\":[64],\"unregister\":[64],\"getValue\":[64],\"clear\":[64],\"listen\":[64],\"edit\":[64],\"reset\":[64],\"setInitialValue\":[64],\"binary\":[64]},[[0,\"smoothlyInputLoad\",\"smoothlyInputLoadHandler\"]],{\"name\":[{\"nameChange\":0}],\"value\":[{\"valueChanged\":0}]}],[262,\"smoothly-table\",{\"columns\":[2]},[[0,\"smoothlyTableExpandableRowChange\",\"smoothlyTableExpandableRowChange\"],[0,\"smoothlyTableExpandableCellChange\",\"smoothlyTableExpandableCellChange\"]]],[262,\"smoothly-table-body\"],[262,\"smoothly-table-head\",{\"scrolled\":[32],\"depth\":[32]}],[262,\"smoothly-input-color\",{\"value\":[1025],\"looks\":[1537],\"color\":[1537],\"readonly\":[1540],\"disabled\":[516],\"output\":[1],\"name\":[513],\"showLabel\":[516,\"show-label\"],\"open\":[32],\"sliderMode\":[32],\"register\":[64],\"unregister\":[64],\"getValue\":[64],\"clear\":[64],\"listen\":[64],\"edit\":[64],\"reset\":[64],\"setInitialValue\":[64]},[[0,\"smoothlyInputLooks\",\"smoothlyInputLooksHandler\"],[0,\"smoothlyInputLoad\",\"smoothlyInputLoadHandler\"],[8,\"click\",\"onWindowClick\"]],{\"name\":[{\"nameChange\":0}],\"disabled\":[{\"watchingReadonly\":0}],\"readonly\":[{\"watchingReadonly\":0}],\"value\":[{\"valueChanged\":0}]}],[262,\"smoothly-table-row\",null,[[0,\"smoothlyTableExpandableCellRegister\",\"smoothlyTableExpandableCellRegisterHandler\"],[0,\"smoothlyTableExpandableCellChange\",\"smoothlyTableExpandableCellChangeHandler\"]]],[262,\"smoothly-input-date-range\",{\"locale\":[513],\"name\":[513],\"color\":[1537],\"looks\":[1537],\"readonly\":[1540],\"disabled\":[516],\"showLabel\":[516,\"show-label\"],\"start\":[1025],\"end\":[1025],\"placeholder\":[513],\"alwaysShowGuide\":[516,\"always-show-guide\"],\"invalid\":[516],\"errorMessage\":[513,\"error-message\"],\"max\":[1],\"min\":[1],\"open\":[32],\"startHasText\":[32],\"endHasText\":[32],\"register\":[64],\"unregister\":[64],\"getValue\":[64],\"listen\":[64],\"edit\":[64],\"reset\":[64],\"setInitialValue\":[64],\"clear\":[64]},[[0,\"smoothlyInputLoad\",\"smoothlyInputLoadHandler\"],[0,\"smoothlyInputLooks\",\"smoothlyInputLooksHandler\"],[8,\"click\",\"onWindowClick\"]],{\"start\":[{\"startChanged\":0}],\"end\":[{\"endChanged\":0}],\"disabled\":[{\"watchingReadonly\":0}],\"readonly\":[{\"watchingReadonly\":0}],\"name\":[{\"nameChange\":0}]}],[262,\"smoothly-input-checkbox\",{\"name\":[513],\"readonly\":[1540],\"disabled\":[516],\"checked\":[1540],\"value\":[16],\"looks\":[1537],\"color\":[1537],\"register\":[64],\"unregister\":[64],\"getValue\":[64],\"clear\":[64],\"listen\":[64],\"edit\":[64],\"reset\":[64],\"setInitialValue\":[64]},[[0,\"smoothlyInputLoad\",\"smoothlyInputLoadHandler\"]],{\"name\":[{\"nameChange\":0}],\"disabled\":[{\"handleDisabledChange\":0}],\"readonly\":[{\"handleDisabledChange\":0}],\"checked\":[{\"elementCheck\":0}]}],[262,\"smoothly-input-range\",{\"value\":[1026],\"looks\":[1537],\"color\":[1537],\"defined\":[1028],\"readonly\":[1540],\"disabled\":[516],\"type\":[1],\"min\":[2],\"max\":[2],\"name\":[513],\"step\":[2],\"outputSide\":[1,\"output-side\"],\"label\":[1],\"showInput\":[32],\"register\":[64],\"unregister\":[64],\"getValue\":[64],\"clear\":[64],\"listen\":[64],\"edit\":[64],\"reset\":[64],\"setInitialValue\":[64]},[[0,\"smoothlyInputLoad\",\"smoothlyInputLoadHandler\"],[0,\"smoothlyInputLooks\",\"smoothlyInputLooksHandler\"]],{\"name\":[{\"nameChange\":0}],\"value\":[{\"valueChanged\":0}],\"disabled\":[{\"watchingReadonly\":0}],\"readonly\":[{\"watchingReadonly\":0}]}],[262,\"smoothly-input-date\",{\"locale\":[513],\"color\":[1537],\"looks\":[1537],\"name\":[513],\"readonly\":[1540],\"disabled\":[516],\"invalid\":[516],\"errorMessage\":[513,\"error-message\"],\"placeholder\":[513],\"alwaysShowGuide\":[516,\"always-show-guide\"],\"value\":[1025],\"open\":[1028],\"max\":[1025],\"min\":[1025],\"showLabel\":[516,\"show-label\"],\"hasText\":[32],\"register\":[64],\"unregister\":[64],\"getValue\":[64],\"listen\":[64],\"clear\":[64],\"edit\":[64],\"reset\":[64],\"setInitialValue\":[64]},[[0,\"smoothlyInput\",\"smoothlyInputHandler\"],[0,\"smoothlyInputLooks\",\"smoothlyInputLooksHandler\"],[0,\"smoothlyInputLoad\",\"smoothlyInputLoadHandler\"],[8,\"click\",\"onWindowClick\"],[0,\"smoothlyDateSet\",\"dateSetHandler\"]],{\"name\":[{\"nameChange\":0}],\"value\":[{\"onValueChange\":0}],\"disabled\":[{\"watchingReadonly\":0}],\"readonly\":[{\"watchingReadonly\":0}]}],[262,\"smoothly-input-clear\",{\"color\":[1],\"expand\":[513],\"fill\":[513],\"disabled\":[1540],\"size\":[513],\"shape\":[513],\"display\":[1540],\"type\":[513],\"tooltip\":[1]},[[0,\"click\",\"clickHandler\"]]],[262,\"smoothly-input-reset\",{\"color\":[1],\"expand\":[513],\"fill\":[513],\"disabled\":[1540],\"size\":[513],\"shape\":[513],\"display\":[1540],\"type\":[513],\"tooltip\":[1]},[[0,\"click\",\"clickHandler\"]]],[262,\"smoothly-input-radio-item\",{\"value\":[1032],\"selected\":[1540],\"looks\":[1537],\"name\":[1025],\"disabled\":[32]}],[2,\"smoothly-toggle-switch\",{\"checkmark\":[516],\"selected\":[1540],\"disabled\":[516],\"size\":[513],\"color\":[513],\"fill\":[513]}],[262,\"smoothly-input-radio\",{\"value\":[1032],\"looks\":[1537],\"color\":[1537],\"direction\":[513],\"clearable\":[4],\"readonly\":[1540],\"disabled\":[516],\"name\":[513],\"showLabel\":[516,\"show-label\"],\"listen\":[64],\"register\":[64],\"unregister\":[64],\"getValue\":[64],\"clear\":[64],\"edit\":[64],\"reset\":[64],\"setInitialValue\":[64]},[[0,\"smoothlyRadioItemRegister\",\"handleRegister\"],[0,\"smoothlyInputLoad\",\"smoothlyInputLoadHandler\"],[0,\"smoothlyRadioItemSelect\",\"smoothlyRadioInputHandler\"]],{\"name\":[{\"nameChange\":0}],\"value\":[{\"valueChanged\":0}],\"disabled\":[{\"watchingReadonly\":0}],\"readonly\":[{\"watchingReadonly\":0}]}],[262,\"smoothly-input-submit\",{\"delete\":[516],\"color\":[1],\"icon\":[8],\"expand\":[513],\"fill\":[513],\"disabled\":[1540],\"display\":[1540],\"shape\":[513],\"size\":[513],\"tooltip\":[1]}],[2,\"smoothly-date-text\",{\"locale\":[1],\"readonly\":[516],\"disabled\":[516],\"showLabel\":[516,\"show-label\"],\"value\":[1],\"parts\":[32],\"order\":[32],\"separator\":[32],\"focusedIndex\":[32],\"setValue\":[64],\"select\":[64],\"deselect\":[64]},[[0,\"beforeinput\",\"beforeInputHandler\"],[2,\"input\",\"inputHandler\"]],{\"parts\":[{\"partsHandler\":0}],\"focusedIndex\":[{\"focusedIndexHandler\":0}]}],[262,\"smoothly-calendar\",{\"month\":[1025],\"value\":[1025],\"start\":[1],\"end\":[1],\"max\":[1025],\"min\":[1025],\"doubleInput\":[516,\"double-input\"],\"startInternal\":[32],\"endInternal\":[32],\"jumpTo\":[64]},null,{\"start\":[{\"onStart\":0}],\"end\":[{\"onEnd\":0}]}],[262,\"smoothly-button-confirm\",{\"color\":[1],\"name\":[513],\"doubleClickTime\":[2,\"double-click-time\"],\"expand\":[513],\"fill\":[1],\"disabled\":[516],\"shape\":[1],\"size\":[1],\"clickTimeStamp\":[32]}],[262,\"smoothly-input-month\",{\"readonly\":[1540],\"color\":[513],\"looks\":[1537],\"name\":[513],\"value\":[1025],\"max\":[1025],\"min\":[1025],\"next\":[516],\"previous\":[516],\"inCalendar\":[516,\"in-calendar\"],\"showLabel\":[516,\"show-label\"],\"allowPreviousMonth\":[32],\"allowNextMonth\":[32],\"register\":[64],\"unregister\":[64],\"getValue\":[64],\"clear\":[64],\"listen\":[64],\"edit\":[64],\"reset\":[64],\"setInitialValue\":[64]},[[0,\"smoothlyInputLooks\",\"smoothlyInputLooksHandler\"],[0,\"smoothlyInputLoad\",\"smoothlyInputLoadHandler\"]],{\"value\":[{\"valueChanged\":0},{\"setAllowPreviousMonth\":0},{\"setAllowNextMonth\":0}],\"min\":[{\"setAllowPreviousMonth\":0}],\"max\":[{\"setAllowNextMonth\":0}],\"name\":[{\"nameChange\":0}]}],[260,\"smoothly-form\",{\"color\":[1537],\"value\":[1040],\"action\":[1],\"validator\":[16],\"type\":[1],\"readonly\":[1028],\"looks\":[513],\"name\":[513],\"prevent\":[4],\"processing\":[1040],\"removeInput\":[64],\"listen\":[64],\"submit\":[64],\"clear\":[64],\"edit\":[64],\"reset\":[64],\"setInitialValue\":[64]},[[0,\"smoothlyInputLooks\",\"smoothlyInputLooksHandler\"],[0,\"smoothlyInput\",\"smoothlyInputHandler\"],[0,\"smoothlyKeydown\",\"smoothlyKeydownHandler\"],[8,\"smoothlyFormSubmit\",\"windowSubmitHandler\"],[0,\"smoothlyFormSubmit\",\"submitHandler\"],[0,\"smoothlyInputLoad\",\"smoothlyInputLoadHandler\"],[0,\"smoothlyFormDisable\",\"smoothlyFormDisableHandler\"]],{\"value\":[{\"watchValue\":0}],\"readonly\":[{\"watchReadonly\":0}]}],[2,\"smoothly-display\",{\"type\":[1],\"label\":[1],\"value\":[8],\"collapseDepth\":[2,\"collapse-depth\"],\"toInteger\":[4,\"to-integer\"],\"currency\":[1],\"country\":[1],\"format\":[16]}],[2,\"smoothly-display-json\",{\"value\":[8],\"collapseDepth\":[2,\"collapse-depth\"]}],[262,\"smoothly-input\",{\"color\":[1537],\"looks\":[1537],\"name\":[513],\"value\":[1032],\"type\":[513],\"required\":[516],\"showLabel\":[516,\"show-label\"],\"autocomplete\":[1],\"placeholder\":[513],\"disabled\":[516],\"readonly\":[1540],\"toInteger\":[4,\"to-integer\"],\"currency\":[513],\"min\":[2],\"max\":[2],\"pad\":[2],\"invalid\":[516],\"errorMessage\":[513,\"error-message\"],\"copyable\":[516],\"initialValue\":[32],\"state\":[32],\"copied\":[32],\"getValue\":[64],\"setValue\":[64],\"setFocus\":[64],\"setSelection\":[64],\"listen\":[64],\"register\":[64],\"unregister\":[64],\"clear\":[64],\"edit\":[64],\"reset\":[64],\"setInitialValue\":[64],\"setCustomInitialValue\":[64]},[[0,\"smoothlyInputLoad\",\"smoothlyInputLoadHandler\"],[0,\"input\",\"onEvent\"],[0,\"beforeinput\",\"onEvent\"]],{\"name\":[{\"nameChange\":0}],\"currency\":[{\"typeChange\":0}],\"type\":[{\"typeChange\":0}],\"state\":[{\"stateChange\":0}],\"value\":[{\"valueChange\":0}],\"disabled\":[{\"readonlyChange\":0}],\"readonly\":[{\"readonlyChange\":0}]}],[2,\"smoothly-spinner\",{\"size\":[513],\"overlay\":[516]}],[262,\"smoothly-input-select\",{\"invalid\":[516],\"errorMessage\":[513,\"error-message\"],\"name\":[513],\"color\":[1537],\"looks\":[1537],\"showLabel\":[516,\"show-label\"],\"showSelected\":[1540,\"show-selected\"],\"readonly\":[1540],\"disabled\":[516],\"inCalendar\":[516,\"in-calendar\"],\"ordered\":[516],\"multiple\":[516],\"clearable\":[4],\"defined\":[1028],\"placeholder\":[520],\"menuHeight\":[1,\"menu-height\"],\"required\":[4],\"searchDisabled\":[4,\"search-disabled\"],\"mutable\":[4],\"open\":[32],\"selected\":[32],\"filter\":[32],\"addedItems\":[32],\"register\":[64],\"unregister\":[64],\"getValue\":[64],\"getItems\":[64],\"listen\":[64],\"reset\":[64],\"clear\":[64],\"edit\":[64],\"setInitialValue\":[64]},[[0,\"smoothlyInputLoad\",\"smoothlyInputLoadHandler\"],[8,\"click\",\"onWindowClick\"],[0,\"smoothlyItemDOMChange\",\"onItemDomChange\"],[0,\"smoothlyItemSelect\",\"onItemSelect\"]],{\"name\":[{\"nameChange\":0}],\"selected\":[{\"onSelectedChange\":0}],\"required\":[{\"onRequiredChange\":0}],\"filter\":[{\"onFilterChange\":0}],\"disabled\":[{\"watchingReadonly\":0}],\"readonly\":[{\"watchingReadonly\":0}],\"open\":[{\"onClosed\":0}]}],[2,\"smoothly-display-json-object\",{\"value\":[16],\"collapseDepth\":[2,\"collapse-depth\"],\"open\":[32],\"empty\":[32]}],[2,\"smoothly-display-json-primitive\",{\"value\":[8]}],[2,\"smoothly-display-json-record-key\",{\"value\":[8]}],[262,\"smoothly-item\",{\"value\":[8],\"selected\":[1540],\"marked\":[1540],\"disabled\":[516],\"deselectable\":[4],\"filter\":[64]},[[0,\"click\",\"clickHandler\"]],{\"selected\":[{\"selectedWatcher\":0}]}],[262,\"smoothly-button\",{\"color\":[513],\"expand\":[513],\"fill\":[513],\"tooltip\":[513],\"disabled\":[516],\"type\":[513],\"size\":[513],\"shape\":[513],\"link\":[1]}],[2,\"smoothly-icon\",{\"color\":[513],\"fill\":[513],\"name\":[513],\"size\":[513],\"rotate\":[514],\"flip\":[513],\"tooltip\":[1],\"latestPromise\":[32]},null,{\"tooltip\":[{\"nameChanged\":0}],\"name\":[{\"nameChanged\":0}]}]]],[\"smoothly-input-checkbox-demo.cjs\",[[2,\"smoothly-input-checkbox-demo\"]]],[\"smoothly-checkbox.cjs\",[[262,\"smoothly-checkbox\",{\"size\":[1],\"checked\":[1540],\"intermediate\":[1540],\"unavailable\":[516],\"disabled\":[516],\"name\":[513],\"value\":[8],\"t\":[32],\"toggle\":[64],\"clear\":[64]},null,{\"checked\":[{\"unavailableChanged\":0}],\"unavailable\":[{\"unavailableChanged\":0}]}]]],[\"smoothly-color.cjs\",[[262,\"smoothly-color\",{\"color\":[513]}]]],[\"smoothly-country.cjs\",[[2,\"smoothly-country\",{\"value\":[1],\"text\":[1],\"language\":[32]}]]],[\"smoothly-submit.cjs\",[[262,\"smoothly-submit\",{\"color\":[513],\"expand\":[513],\"fill\":[513],\"disabled\":[516],\"type\":[513],\"size\":[513],\"shape\":[513],\"prevent\":[4]},[[0,\"click\",\"clickHandler\"]]]]],[\"smoothly-trigger-sink.cjs\",[[262,\"smoothly-trigger-sink\",{\"context\":[16],\"destination\":[1],\"filter\":[1]},[[0,\"trigger\",\"TriggerListener\"]]]]],[\"smoothly-trigger-source.cjs\",[[262,\"smoothly-trigger-source\",{\"listen\":[1]}]]]]"), options);
+  return index.bootstrapLazy(JSON.parse("[[\"smoothly-app_98.cjs\",[[0,\"smoothly-app-demo\",{\"baseUrl\":[1,\"base-url\"]},[[8,\"smoothlyUrlChange\",\"urlChangeHandler\"]]],[2,\"smoothly-form-demo\"],[2,\"smoothly-input-demo\",{\"duration\":[32],\"alphanumeric\":[32]}],[2,\"smoothly-table-demo\"],[0,\"smoothly-button-demo\"],[2,\"smoothly-icon-demo\",{\"display\":[32],\"props\":[32]}],[2,\"smoothly-theme-demo\"],[0,\"smoothly-display-demo\",{\"downloadingSpinner\":[32]}],[2,\"smoothly-dialog-demo\",{\"openModal\":[32],\"openTallModal\":[32],\"showFrame\":[32]}],[260,\"smoothly-app\",{\"label\":[513],\"color\":[1],\"home\":[1],\"menuOpen\":[1540,\"menu-open\"],\"navBreakpoint\":[513,\"nav-breakpoint\"],\"mobileMode\":[32],\"selected\":[32],\"selectRoom\":[64]},[[8,\"popstate\",\"locationChangeHandler\"],[0,\"smoothlyRoomSelect\",\"roomSelectedHandler\"],[0,\"smoothlyRoomLoad\",\"roomLoadedHandler\"],[8,\"click\",\"clickHandler\"]],{\"selected\":[{\"selectedChanged\":0}]}],[262,\"smoothly-app-room\",{\"label\":[513],\"icon\":[513],\"disabled\":[516],\"path\":[1],\"selected\":[1540],\"content\":[16],\"paths\":[32],\"mobileMode\":[32],\"setMobileMode\":[64],\"getContent\":[64],\"setSelected\":[64]},[[8,\"smoothlyUrlUpdate\",\"setQuery\"]]],[2,\"smoothly-tabs-demo\",{\"extraTab1\":[32],\"extraTab2\":[32]}],[2,\"smoothly-form-demo-pet\",{\"hasOwner\":[32],\"owner\":[32],\"value\":[32]}],[2,\"smoothly-input-demo-standard\",{\"duration\":[32],\"options\":[32]}],[2,\"smoothly-form-demo-all\"],[2,\"smoothly-input-demo-user-input\",{\"textIndex\":[32],\"selectIndex\":[32],\"checkboxChecked\":[32],\"radioIndex\":[32],\"rangeValue\":[32],\"colorIndex\":[32],\"dateValue\":[32],\"datetimeValue\":[32],\"dateRangeValue\":[32]}],[2,\"smoothly-form-demo-transparent\"],[2,\"smoothly-table-demo-group\"],[2,\"smoothly-form-demo-schedule\"],[2,\"smoothly-form-demo-typed\"],[2,\"smoothly-table-demo-colspan\"],[2,\"smoothly-table-demo-nested-no-cell\",{\"loadingIndex\":[32],\"loadedRows\":[32]}],[2,\"smoothly-form-demo-controlled\",{\"name\":[32],\"currency\":[32],\"date\":[32]},null,{\"name\":[{\"nameChanged\":0}]}],[2,\"smoothly-form-demo-date\"],[2,\"smoothly-form-demo-date-range\"],[2,\"smoothly-table-demo-filler-row\",{\"cats\":[32]}],[2,\"smoothly-table-demo-simple\"],[2,\"smoothly-button-demo-standard\",{\"props\":[32],\"heightText\":[32],\"lastButton\":[32]},null,{\"props\":[{\"updateInputHeightText\":0}]}],[2,\"smoothly-input-date-demo\",{\"date\":[32],\"alwaysShowGuide\":[32]}],[0,\"smoothly-input-color-demo\"],[0,\"smoothly-input-range-demo\"],[2,\"smoothly-form-demo-login\"],[2,\"smoothly-form-demo-prices\"],[2,\"smoothly-form-demo-card\"],[0,\"smoothly-display-demo-json\"],[2,\"smoothly-input-demo-radio\",{\"selected\":[32]},null,{\"selected\":[{\"selectedChange\":0}]}],[2,\"smoothly-theme-guide\"],[2,\"smoothly-input-price-demo\",{\"currencies\":[32],\"currency\":[32]}],[262,\"smoothly-notifier\",{\"icon\":[4],\"notices\":[32]},[[0,\"notice\",\"onNotice\"],[0,\"remove\",\"onRemove\"]]],[262,\"smoothly-theme-picker\",{\"element\":[1]}],[262,\"smoothly-dialog\",{\"color\":[513],\"open\":[1540],\"closable\":[516],\"header\":[513]},[[0,\"trigger\",\"TriggerListener\"]]],[2,\"smoothly-theme-colors\"],[2,\"smoothly-toggle-switch-demo\"],[2,\"smoothly-burger\",{\"open\":[1540]},[[0,\"click\",\"clickHandler\"]],{\"open\":[{\"openChanged\":0}]}],[262,\"smoothly-modal\",{\"open\":[1540],\"closable\":[516],\"align\":[513],\"closeModal\":[64],\"openModal\":[64]},null,{\"open\":[{\"openChanged\":0}]}],[2,\"smoothly-frame\",{\"url\":[1],\"name\":[513],\"origin\":[1],\"send\":[64]}],[262,\"smoothly-label\",{\"hue\":[2],\"description\":[1],\"shape\":[513]}],[2,\"smoothly-table-demo-nested-no-cell-inner\",{\"data\":[16]}],[2,\"smoothly-notification\",{\"notice\":[16],\"closable\":[4],\"icon\":[4],\"tick\":[32]},[[0,\"trigger\",\"onTrigger\"]],{\"notice\":[{\"onUpdatedNotice\":0}]}],[262,\"smoothly-table-filler-row\"],[2,\"smoothly-back-to-top\",{\"opacity\":[1],\"bottom\":[1],\"right\":[1],\"visible\":[32]}],[262,\"smoothly-summary\",{\"open\":[1540]}],[2,\"smoothly-theme-color\",{\"color\":[1]}],[262,\"smoothly-table-row-group\",{\"align\":[516],\"open\":[1540]}],[262,\"smoothly-table-foot\"],[2,\"smoothly-theme-color-variant\",{\"color\":[513],\"variant\":[513]}],[262,\"smoothly-input-edit\",{\"color\":[1],\"expand\":[513],\"fill\":[513],\"disabled\":[1540],\"display\":[1540],\"shape\":[513],\"type\":[513],\"size\":[513],\"tooltip\":[1]},[[0,\"click\",\"clickHandler\"]]],[262,\"smoothly-lazy\",{\"show\":[1028],\"content\":[16]}],[262,\"smoothly-table-expandable-cell\",{\"span\":[514],\"open\":[1540],\"close\":[64]},null,{\"open\":[{\"openChange\":0}]}],[262,\"smoothly-table-expandable-row\",{\"open\":[1540]},null,{\"open\":[{\"openChange\":0}]}],[262,\"smoothly-input-date-time\",{\"color\":[1537],\"looks\":[1537],\"name\":[513],\"readonly\":[1540],\"disabled\":[516],\"invalid\":[516],\"errorMessage\":[513,\"error-message\"],\"value\":[1025],\"open\":[1028],\"showLabel\":[516,\"show-label\"],\"min\":[1],\"max\":[1],\"date\":[32],\"hour\":[32],\"minute\":[32],\"register\":[64],\"unregister\":[64],\"getValue\":[64],\"listen\":[64],\"clear\":[64],\"edit\":[64],\"reset\":[64],\"setInitialValue\":[64]},[[0,\"smoothlyInputLooks\",\"smoothlyInputLooksHandler\"],[0,\"smoothlyInputLoad\",\"smoothlyInputLoadHandler\"],[8,\"click\",\"onWindowClick\"]],{\"name\":[{\"nameChange\":0}],\"date\":[{\"handleChange\":0}],\"hour\":[{\"handleChange\":0}],\"minute\":[{\"handleChange\":0}],\"value\":[{\"valueChange\":0}],\"disabled\":[{\"watchingReadonly\":0}],\"readonly\":[{\"watchingReadonly\":0}]}],[2,\"smoothly-load-more\",{\"triggerMode\":[1,\"trigger-mode\"],\"name\":[1],\"multiple\":[4],\"inView\":[32]}],[262,\"smoothly-tab\",{\"label\":[1],\"name\":[1],\"tooltip\":[1],\"open\":[1540],\"disabled\":[516]},[[0,\"smoothlyInputLoad\",\"onInputLoad\"],[0,\"smoothlyInput\",\"onInputLoad\"]],{\"open\":[{\"openHandler\":0}]}],[262,\"smoothly-tabs\",{\"tabs\":[513],\"numberOfTabs\":[2,\"number-of-tabs\"],\"tabElements\":[32],\"selectedElement\":[32],\"removeTab\":[64]},[[0,\"smoothlyTabLoad\",\"onInputLoad\"],[0,\"smoothlyTabOpen\",\"openChanged\"]],{\"selectedElement\":[{\"onSelectedChange\":0}]}],[262,\"smoothly-trigger\",{\"color\":[513],\"fill\":[513],\"disabled\":[516],\"type\":[513],\"name\":[1],\"value\":[8]},[[0,\"click\",\"onClick\"]]],[262,\"smoothly-table-cell\",{\"span\":[514]}],[262,\"smoothly-input-file\",{\"readonly\":[1540],\"disabled\":[516],\"accept\":[1],\"color\":[1537],\"looks\":[1537],\"camera\":[513],\"name\":[513],\"showLabel\":[516,\"show-label\"],\"value\":[1040],\"placeholder\":[1537],\"dragging\":[32],\"register\":[64],\"unregister\":[64],\"getValue\":[64],\"clear\":[64],\"listen\":[64],\"edit\":[64],\"reset\":[64],\"setInitialValue\":[64],\"binary\":[64]},[[0,\"smoothlyInputLoad\",\"smoothlyInputLoadHandler\"]],{\"name\":[{\"nameChange\":0}],\"value\":[{\"valueChanged\":0}]}],[262,\"smoothly-table\",{\"columns\":[2]},[[0,\"smoothlyTableExpandableRowChange\",\"smoothlyTableExpandableRowChange\"],[0,\"smoothlyTableExpandableCellChange\",\"smoothlyTableExpandableCellChange\"]]],[262,\"smoothly-table-body\"],[262,\"smoothly-table-head\",{\"scrolled\":[32],\"depth\":[32]}],[262,\"smoothly-input-color\",{\"value\":[1025],\"looks\":[1537],\"color\":[1537],\"readonly\":[1540],\"disabled\":[516],\"output\":[1],\"name\":[513],\"showLabel\":[516,\"show-label\"],\"open\":[32],\"sliderMode\":[32],\"register\":[64],\"unregister\":[64],\"getValue\":[64],\"clear\":[64],\"listen\":[64],\"edit\":[64],\"reset\":[64],\"setInitialValue\":[64]},[[0,\"smoothlyInputLooks\",\"smoothlyInputLooksHandler\"],[0,\"smoothlyInputLoad\",\"smoothlyInputLoadHandler\"],[8,\"click\",\"onWindowClick\"]],{\"name\":[{\"nameChange\":0}],\"disabled\":[{\"watchingReadonly\":0}],\"readonly\":[{\"watchingReadonly\":0}],\"value\":[{\"valueChanged\":0}]}],[262,\"smoothly-table-row\",null,[[0,\"smoothlyTableExpandableCellRegister\",\"smoothlyTableExpandableCellRegisterHandler\"],[0,\"smoothlyTableExpandableCellChange\",\"smoothlyTableExpandableCellChangeHandler\"]]],[262,\"smoothly-input-date-range\",{\"locale\":[513],\"name\":[513],\"color\":[1537],\"looks\":[1537],\"readonly\":[1540],\"disabled\":[516],\"showLabel\":[516,\"show-label\"],\"start\":[1025],\"end\":[1025],\"placeholder\":[513],\"alwaysShowGuide\":[516,\"always-show-guide\"],\"invalid\":[516],\"errorMessage\":[513,\"error-message\"],\"max\":[1],\"min\":[1],\"open\":[32],\"startHasText\":[32],\"endHasText\":[32],\"register\":[64],\"unregister\":[64],\"getValue\":[64],\"listen\":[64],\"edit\":[64],\"reset\":[64],\"setInitialValue\":[64],\"clear\":[64]},[[0,\"smoothlyInputLoad\",\"smoothlyInputLoadHandler\"],[0,\"smoothlyInputLooks\",\"smoothlyInputLooksHandler\"],[8,\"click\",\"onWindowClick\"]],{\"start\":[{\"startChanged\":0}],\"end\":[{\"endChanged\":0}],\"disabled\":[{\"watchingReadonly\":0}],\"readonly\":[{\"watchingReadonly\":0}],\"name\":[{\"nameChange\":0}]}],[262,\"smoothly-input-checkbox\",{\"name\":[513],\"readonly\":[1540],\"disabled\":[516],\"checked\":[1540],\"value\":[16],\"looks\":[1537],\"color\":[1537],\"register\":[64],\"unregister\":[64],\"getValue\":[64],\"clear\":[64],\"listen\":[64],\"edit\":[64],\"reset\":[64],\"setInitialValue\":[64]},[[0,\"smoothlyInputLoad\",\"smoothlyInputLoadHandler\"]],{\"name\":[{\"nameChange\":0}],\"disabled\":[{\"handleDisabledChange\":0}],\"readonly\":[{\"handleDisabledChange\":0}],\"checked\":[{\"elementCheck\":0}]}],[262,\"smoothly-input-range\",{\"value\":[1026],\"looks\":[1537],\"color\":[1537],\"defined\":[1028],\"readonly\":[1540],\"disabled\":[516],\"type\":[1],\"min\":[2],\"max\":[2],\"name\":[513],\"step\":[2],\"outputSide\":[1,\"output-side\"],\"label\":[1],\"showInput\":[32],\"register\":[64],\"unregister\":[64],\"getValue\":[64],\"clear\":[64],\"listen\":[64],\"edit\":[64],\"reset\":[64],\"setInitialValue\":[64]},[[0,\"smoothlyInputLoad\",\"smoothlyInputLoadHandler\"],[0,\"smoothlyInputLooks\",\"smoothlyInputLooksHandler\"]],{\"name\":[{\"nameChange\":0}],\"value\":[{\"valueChanged\":0}],\"disabled\":[{\"watchingReadonly\":0}],\"readonly\":[{\"watchingReadonly\":0}]}],[262,\"smoothly-input-date\",{\"locale\":[513],\"color\":[1537],\"looks\":[1537],\"name\":[513],\"readonly\":[1540],\"disabled\":[516],\"invalid\":[516],\"errorMessage\":[513,\"error-message\"],\"placeholder\":[513],\"alwaysShowGuide\":[516,\"always-show-guide\"],\"value\":[1025],\"open\":[1028],\"max\":[1025],\"min\":[1025],\"showLabel\":[516,\"show-label\"],\"hasText\":[32],\"register\":[64],\"unregister\":[64],\"getValue\":[64],\"listen\":[64],\"clear\":[64],\"edit\":[64],\"reset\":[64],\"setInitialValue\":[64]},[[0,\"smoothlyInput\",\"smoothlyInputHandler\"],[0,\"smoothlyInputLooks\",\"smoothlyInputLooksHandler\"],[0,\"smoothlyInputLoad\",\"smoothlyInputLoadHandler\"],[8,\"click\",\"onWindowClick\"],[0,\"smoothlyDateSet\",\"dateSetHandler\"]],{\"name\":[{\"nameChange\":0}],\"value\":[{\"onValueChange\":0}],\"disabled\":[{\"watchingReadonly\":0}],\"readonly\":[{\"watchingReadonly\":0}]}],[262,\"smoothly-input-clear\",{\"color\":[1],\"expand\":[513],\"fill\":[513],\"disabled\":[1540],\"size\":[513],\"shape\":[513],\"display\":[1540],\"type\":[513],\"tooltip\":[1]},[[0,\"click\",\"clickHandler\"]]],[262,\"smoothly-input-reset\",{\"color\":[1],\"expand\":[513],\"fill\":[513],\"disabled\":[1540],\"size\":[513],\"shape\":[513],\"display\":[1540],\"type\":[513],\"tooltip\":[1]},[[0,\"click\",\"clickHandler\"]]],[262,\"smoothly-input-radio-item\",{\"value\":[1032],\"selected\":[1540],\"looks\":[1537],\"name\":[1025],\"disabled\":[32]}],[2,\"smoothly-toggle-switch\",{\"checkmark\":[516],\"selected\":[1540],\"disabled\":[516],\"size\":[513],\"color\":[513],\"fill\":[513]}],[262,\"smoothly-input-radio\",{\"value\":[1032],\"looks\":[1537],\"color\":[1537],\"direction\":[513],\"clearable\":[4],\"readonly\":[1540],\"disabled\":[516],\"name\":[513],\"showLabel\":[516,\"show-label\"],\"listen\":[64],\"register\":[64],\"unregister\":[64],\"getValue\":[64],\"clear\":[64],\"edit\":[64],\"reset\":[64],\"setInitialValue\":[64]},[[0,\"smoothlyRadioItemRegister\",\"handleRegister\"],[0,\"smoothlyInputLoad\",\"smoothlyInputLoadHandler\"],[0,\"smoothlyRadioItemSelect\",\"smoothlyRadioInputHandler\"]],{\"name\":[{\"nameChange\":0}],\"value\":[{\"valueChanged\":0}],\"disabled\":[{\"watchingReadonly\":0}],\"readonly\":[{\"watchingReadonly\":0}]}],[262,\"smoothly-input-submit\",{\"delete\":[516],\"color\":[1],\"icon\":[8],\"expand\":[513],\"fill\":[513],\"disabled\":[1540],\"display\":[1540],\"shape\":[513],\"size\":[513],\"tooltip\":[1]}],[2,\"smoothly-date-text\",{\"locale\":[1],\"readonly\":[516],\"disabled\":[516],\"showLabel\":[516,\"show-label\"],\"value\":[1],\"parts\":[32],\"order\":[32],\"separator\":[32],\"focusedIndex\":[32],\"setValue\":[64],\"select\":[64],\"deselect\":[64]},[[0,\"beforeinput\",\"beforeInputHandler\"],[2,\"input\",\"inputHandler\"]],{\"parts\":[{\"partsHandler\":0}],\"focusedIndex\":[{\"focusedIndexHandler\":0}]}],[262,\"smoothly-calendar\",{\"month\":[1025],\"value\":[1025],\"start\":[1],\"end\":[1],\"max\":[1025],\"min\":[1025],\"doubleInput\":[516,\"double-input\"],\"startInternal\":[32],\"endInternal\":[32],\"jumpTo\":[64]},null,{\"start\":[{\"onStart\":0}],\"end\":[{\"onEnd\":0}]}],[262,\"smoothly-button-confirm\",{\"color\":[1],\"name\":[513],\"doubleClickTime\":[2,\"double-click-time\"],\"expand\":[513],\"fill\":[1],\"disabled\":[516],\"shape\":[1],\"size\":[1],\"clickTimeStamp\":[32]}],[262,\"smoothly-input-month\",{\"readonly\":[1540],\"color\":[513],\"looks\":[1537],\"name\":[513],\"value\":[1025],\"max\":[1025],\"min\":[1025],\"next\":[516],\"previous\":[516],\"inCalendar\":[516,\"in-calendar\"],\"showLabel\":[516,\"show-label\"],\"allowPreviousMonth\":[32],\"allowNextMonth\":[32],\"register\":[64],\"unregister\":[64],\"getValue\":[64],\"clear\":[64],\"listen\":[64],\"edit\":[64],\"reset\":[64],\"setInitialValue\":[64]},[[0,\"smoothlyInputLooks\",\"smoothlyInputLooksHandler\"],[0,\"smoothlyInputLoad\",\"smoothlyInputLoadHandler\"]],{\"value\":[{\"valueChanged\":0},{\"setAllowPreviousMonth\":0},{\"setAllowNextMonth\":0}],\"min\":[{\"setAllowPreviousMonth\":0}],\"max\":[{\"setAllowNextMonth\":0}],\"name\":[{\"nameChange\":0}]}],[260,\"smoothly-form\",{\"color\":[1537],\"value\":[1040],\"action\":[1],\"validator\":[16],\"type\":[1],\"readonly\":[1028],\"looks\":[513],\"name\":[513],\"prevent\":[4],\"processing\":[1040],\"removeInput\":[64],\"listen\":[64],\"submit\":[64],\"clear\":[64],\"edit\":[64],\"reset\":[64],\"setInitialValue\":[64]},[[0,\"smoothlyInputLooks\",\"smoothlyInputLooksHandler\"],[0,\"smoothlyInput\",\"smoothlyInputHandler\"],[0,\"smoothlyKeydown\",\"smoothlyKeydownHandler\"],[8,\"smoothlyFormSubmit\",\"windowSubmitHandler\"],[0,\"smoothlyFormSubmit\",\"submitHandler\"],[0,\"smoothlyInputLoad\",\"smoothlyInputLoadHandler\"],[0,\"smoothlyFormDisable\",\"smoothlyFormDisableHandler\"]],{\"value\":[{\"watchValue\":0}],\"readonly\":[{\"watchReadonly\":0}]}],[2,\"smoothly-display\",{\"type\":[1],\"label\":[1],\"value\":[8],\"collapseDepth\":[2,\"collapse-depth\"],\"toInteger\":[4,\"to-integer\"],\"currency\":[1],\"country\":[1],\"format\":[16]}],[2,\"smoothly-display-json\",{\"value\":[8],\"collapseDepth\":[2,\"collapse-depth\"]}],[262,\"smoothly-input\",{\"color\":[1537],\"looks\":[1537],\"name\":[513],\"value\":[1032],\"type\":[513],\"required\":[516],\"showLabel\":[516,\"show-label\"],\"autocomplete\":[1],\"placeholder\":[513],\"disabled\":[516],\"readonly\":[1540],\"toInteger\":[4,\"to-integer\"],\"currency\":[513],\"min\":[2],\"max\":[2],\"pad\":[2],\"invalid\":[516],\"errorMessage\":[513,\"error-message\"],\"copyable\":[516],\"initialValue\":[32],\"state\":[32],\"copied\":[32],\"getValue\":[64],\"setValue\":[64],\"setFocus\":[64],\"setSelection\":[64],\"listen\":[64],\"register\":[64],\"unregister\":[64],\"clear\":[64],\"edit\":[64],\"reset\":[64],\"setInitialValue\":[64],\"setCustomInitialValue\":[64]},[[0,\"smoothlyInputLoad\",\"smoothlyInputLoadHandler\"],[0,\"input\",\"onEvent\"],[0,\"beforeinput\",\"onEvent\"]],{\"name\":[{\"nameChange\":0}],\"currency\":[{\"typeChange\":0}],\"type\":[{\"typeChange\":0}],\"state\":[{\"stateChange\":0}],\"value\":[{\"valueChange\":0}],\"disabled\":[{\"readonlyChange\":0}],\"readonly\":[{\"readonlyChange\":0}]}],[2,\"smoothly-spinner\",{\"size\":[513],\"overlay\":[516]}],[262,\"smoothly-input-select\",{\"invalid\":[516],\"errorMessage\":[513,\"error-message\"],\"name\":[513],\"color\":[1537],\"looks\":[1537],\"showLabel\":[516,\"show-label\"],\"showSelected\":[1540,\"show-selected\"],\"readonly\":[1540],\"disabled\":[516],\"inCalendar\":[516,\"in-calendar\"],\"ordered\":[516],\"multiple\":[516],\"clearable\":[4],\"defined\":[1028],\"placeholder\":[520],\"menuHeight\":[1,\"menu-height\"],\"required\":[4],\"searchDisabled\":[4,\"search-disabled\"],\"mutable\":[4],\"open\":[32],\"selected\":[32],\"filter\":[32],\"addedItems\":[32],\"register\":[64],\"unregister\":[64],\"getValue\":[64],\"getItems\":[64],\"listen\":[64],\"reset\":[64],\"clear\":[64],\"edit\":[64],\"setInitialValue\":[64]},[[0,\"smoothlyInputLoad\",\"smoothlyInputLoadHandler\"],[8,\"click\",\"onWindowClick\"],[0,\"smoothlyItemDOMChange\",\"onItemDomChange\"],[0,\"smoothlyItemSelect\",\"onItemSelect\"]],{\"name\":[{\"nameChange\":0}],\"selected\":[{\"onSelectedChange\":0}],\"required\":[{\"onRequiredChange\":0}],\"filter\":[{\"onFilterChange\":0}],\"disabled\":[{\"watchingReadonly\":0}],\"readonly\":[{\"watchingReadonly\":0}],\"open\":[{\"onClosed\":0}]}],[2,\"smoothly-display-json-object\",{\"value\":[16],\"collapseDepth\":[2,\"collapse-depth\"],\"open\":[32],\"empty\":[32]}],[2,\"smoothly-display-json-primitive\",{\"value\":[8]}],[2,\"smoothly-display-json-record-key\",{\"value\":[8]}],[262,\"smoothly-item\",{\"value\":[8],\"selected\":[1540],\"marked\":[1540],\"disabled\":[516],\"deselectable\":[4],\"filter\":[64]},[[0,\"click\",\"clickHandler\"]],{\"selected\":[{\"selectedWatcher\":0}]}],[262,\"smoothly-button\",{\"color\":[513],\"expand\":[513],\"fill\":[513],\"tooltip\":[513],\"disabled\":[516],\"type\":[513],\"size\":[513],\"shape\":[513],\"link\":[1]}],[2,\"smoothly-icon\",{\"color\":[513],\"fill\":[513],\"name\":[513],\"size\":[513],\"rotate\":[514],\"flip\":[513],\"tooltip\":[1],\"latestPromise\":[32]},null,{\"tooltip\":[{\"nameChanged\":0}],\"name\":[{\"nameChanged\":0}]}]]],[\"smoothly-input-checkbox-demo.cjs\",[[2,\"smoothly-input-checkbox-demo\"]]],[\"smoothly-checkbox.cjs\",[[262,\"smoothly-checkbox\",{\"size\":[1],\"checked\":[1540],\"intermediate\":[1540],\"unavailable\":[516],\"disabled\":[516],\"name\":[513],\"value\":[8],\"t\":[32],\"toggle\":[64],\"clear\":[64]},null,{\"checked\":[{\"unavailableChanged\":0}],\"unavailable\":[{\"unavailableChanged\":0}]}]]],[\"smoothly-color.cjs\",[[262,\"smoothly-color\",{\"color\":[513]}]]],[\"smoothly-country.cjs\",[[2,\"smoothly-country\",{\"value\":[1],\"text\":[1],\"language\":[32]}]]],[\"smoothly-submit.cjs\",[[262,\"smoothly-submit\",{\"color\":[513],\"expand\":[513],\"fill\":[513],\"disabled\":[516],\"type\":[513],\"size\":[513],\"shape\":[513],\"prevent\":[4]},[[0,\"click\",\"clickHandler\"]]]]],[\"smoothly-trigger-sink.cjs\",[[262,\"smoothly-trigger-sink\",{\"context\":[16],\"destination\":[1],\"filter\":[1]},[[0,\"trigger\",\"TriggerListener\"]]]]],[\"smoothly-trigger-source.cjs\",[[262,\"smoothly-trigger-source\",{\"listen\":[1]}]]]]"), options);
 });
 exports.setNonce = index.setNonce;

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

@@ -55,7 +55,7 @@ export class SmoothlyApp {
             this.menuOpen = false;
         }
         if (!event.detail.history) {
-            const path = this.selected.element.path.toString();
+            const path = event.detail.path;
             const location = new URL(window.location.pathname == path ? window.location.href : window.location.origin);
             location.pathname = path;
             location.search = event.detail.query ? `?${event.detail.query}` : "";
@@ -74,7 +74,7 @@ export class SmoothlyApp {
         }
     }
     render() {
-        return (h(Host, { key: 'c0204db44c75c6235d5eb2adc776112372989a13', class: { "smoothly-mobile-mode": this.mobileMode } }, h("smoothly-notifier", { key: '2c9ff0711219189499cbe1cb6f37e41715f4234a' }, h("header", { key: '25b6ac0023b7ff634d315627297f1968fe78d199', color: this.color }, h("h1", { key: 'cb52ccc4d73bee709c95597b08c7260c28c116c0' }, h("a", { key: '9db53cc3d88d3bb2c557dddc306adda2b9c1bb57', href: "" }, this.label)), h("slot", { key: 'd8f71e17edf3b65d4579386004666b4b7d8655f7', name: "header" }), h("nav", { key: '71416658d3fd7578d1e9911355efe8250b7f1b73', ref: e => (this.navElement = e) }, h("ul", { key: '79dae2e8b641e4d4fcb13245fa647d3b4fcbdea7' }, h("div", { key: '4f85e34495814cf144eb1b39b4b0f5a07807ee51', class: "nav-start-container" }, h("slot", { key: '06f4ce02a90619d13ea21d6564f5434233346c06', name: "nav-start" })), h("slot", { key: 'f261dcbcd2781b0c6d6f499bd559763bc7172742' }), h("div", { key: 'ed668608a800ef08363b9ae239a392dfd515f49a', class: "nav-end-container" }, h("slot", { key: 'c5d11b8ac9b158ca030df27ff345c82979cb6ae5', name: "nav-end" })))), h("smoothly-burger", { key: 'ce9f13229cc55cc95e5bc9bacc4c692febd15ec4', ref: e => (this.burgerElement = e), open: this.menuOpen, onSmoothlyNavStatus: e => (e.stopPropagation(), (this.menuOpen = e.detail)) })), h("main", { key: '62e5ea6a00dbbc910f8c2682b55727487202b248', ref: e => (this.mainElement = e) }))));
+        return (h(Host, { key: '746fa3adf359072b95f0b00ecea914189bdfead2', class: { "smoothly-mobile-mode": this.mobileMode } }, h("smoothly-notifier", { key: 'ddf542afef536ab6141394b658e82686bd414e69' }, h("header", { key: '511a856fb813b5476a705c993734380ad94194cf', color: this.color }, h("h1", { key: '9c3e79f9fcd3ef587183e3b83d646753a0f8dd7c' }, h("a", { key: '9be4ba4d2ffaeaca1cb00752b5fcba0b1b64c261', href: "" }, this.label)), h("slot", { key: '92573b6cffad97e2afbfb6b6a7d5d1fb8f0ec59e', name: "header" }), h("nav", { key: '4a7c5cbbb39a82b845775d6dd0015a47ab72757d', ref: e => (this.navElement = e) }, h("ul", { key: 'a8035a4e9143d4cd49ac4edfbb837785a8a58cd8' }, h("div", { key: '2c4de281ad7f522c2c09acfcad890eadabc30c40', class: "nav-start-container" }, h("slot", { key: '05e3f3a40f45d9505a463a29c90bbfcc2a3ff330', name: "nav-start" })), h("slot", { key: '695fd5bef476d1c00e5654803c03e94c8218943a' }), h("div", { key: '382c0271207f040374c3f69aa2946d0938bbb1c1', class: "nav-end-container" }, h("slot", { key: '02fe44b3c557b7a930f24fdc465d8824eccbbbef', name: "nav-end" })))), h("smoothly-burger", { key: 'fad0b5d8e2841ed284af04d9b0554e91ddf98575', ref: e => (this.burgerElement = e), open: this.menuOpen, onSmoothlyNavStatus: e => (e.stopPropagation(), (this.menuOpen = e.detail)) })), h("main", { key: '5c6464b6db6e0eba2acbaf5efd549cebe08c1a95', ref: e => (this.mainElement = e) }))));
     }
     static get is() { return "smoothly-app"; }
     static get originalStyleUrls() {

package/dist/collection/components/app/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/app/index.tsx"],"names":[],"mappings":"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~~KAAuE~~;~~QAC1F~~,IAAI,CAAC,QAAQ,GAAG,EAAE,OAAO,EAAE,KAAK,CAAC,MAAM,EAAE,CAAA;QACzC,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACrB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAA;QACtB,CAAC;QACD,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC;YAC3B,MAAM,IAAI,GAAG,~~IAAI~~,CAAC,~~QAAQ~~,CAAC,~~OAAO,CAAC,~~IAAI,~~CAAC,QAAQ,EAAE,~~CAAA;~~YAClD~~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","sourcesContent":["import { Component, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from \"@stencil/core\"\nimport { SmoothlyAppRoomCustomEvent } from \"../../components\"\nimport { Color } from \"../../model\"\n\ntype Room = {\n\telement: HTMLSmoothlyAppRoomElement\n}\n@Component({\n\ttag: \"smoothly-app\",\n\tstyleUrl: \"style.css\",\n\tscoped: false,\n})\nexport class SmoothlyApp {\n\t@Prop({ reflect: true }) label?: string\n\t@Prop() color: Color\n\t@Prop() home?: string\n\t@Prop({ mutable: true, reflect: true }) menuOpen = false\n\t@Prop({ reflect: true }) navBreakpoint: `${number}${\"px\" \| \"em\" \| \"rem\"}` = \"48rem\"\n\t@State() mobileMode = false\n\t@State() selected?: Room\n\t@Event() smoothlyUrlChange: EventEmitter<string>\n\tprivate burgerElement?: HTMLSmoothlyBurgerElement\n\tprivate navElement?: HTMLElement\n\tmainElement?: HTMLElement\n\trooms: Record<string, Room \| undefined> = {}\n\n\tcomponentWillLoad() {\n\t\tconst mediaQuery = window.matchMedia(`(max-width: ${this.navBreakpoint})`)\n\t\tthis.mobileMode = mediaQuery.matches\n\t\tmediaQuery.addEventListener(\"change\", e => this.updateMobileMode(e.matches))\n\t}\n\tcomponentDidLoad() {\n\t\tthis.updateMobileMode(this.mobileMode)\n\t}\n\tupdateMobileMode(mobileMode: boolean) {\n\t\tthis.mobileMode = mobileMode\n\t\tObject.values(this.rooms).forEach(room => room?.element.setMobileMode(mobileMode))\n\t\tif (!mobileMode) {\n\t\t\tthis.menuOpen = false\n\t\t}\n\t}\n\n\tasync componentDidRender() {\n\t\tif (!this.selected && !window.location.search) {\n\t\t\t;(this.home && this.rooms[this.home]\n\t\t\t\t? this.rooms[this.home]\n\t\t\t\t: Object.values(this.rooms).find(room => !room?.element.disabled)\n\t\t\t)?.element.setSelected(true)\n\t\t}\n\t}\n\t@Method()\n\tasync selectRoom(path: string) {\n\t\tthis.rooms[path]?.element.setSelected(true)\n\t}\n\t@Watch(\"selected\")\n\tasync selectedChanged() {\n\t\tObject.values(this.rooms).forEach(\n\t\t\troom => room?.element.path != this.selected?.element.path && room?.element.setSelected(false)\n\t\t)\n\t\tconst content = await this.selected?.element.getContent()\n\t\trequestAnimationFrame(() => {\n\t\t\tif (this.mainElement && content) {\n\t\t\t\tthis.mainElement.replaceChildren(content)\n\t\t\t}\n\t\t})\n\t}\n\t@Listen(\"popstate\", { target: \"window\" })\n\tasync locationChangeHandler(event: PopStateEvent) {\n\t\tthis.rooms[event.state.smoothlyPath]?.element.setSelected(true, { history: true })\n\t\tthis.smoothlyUrlChange.emit(window.location.href)\n\t}\n\t@Listen(\"smoothlyRoomSelect\")\n\troomSelectedHandler(event: SmoothlyAppRoomCustomEvent<{ history: boolean; query?: string }>) {\n\t\tthis.selected = { element: event.target }\n\t\tif (this.mobileMode) {\n\t\t\tthis.menuOpen = false\n\t\t}\n\t\tif (!event.detail.history) {\n\t\t\tconst path = ~~this~~.~~selected~~.~~element.~~path~~.toString()~~\n\t\t\tconst location = new URL(window.location.pathname == path ? window.location.href : window.location.origin)\n\t\t\tlocation.pathname = path\n\t\t\tlocation.search = event.detail.query ? `?${event.detail.query}` : \"\"\n\t\t\twindow.history.pushState({ smoothlyPath: path, smoothlyQuery: event.detail.query \|\| \"\" }, \"\", location.href)\n\t\t}\n\t}\n\t@Listen(\"smoothlyRoomLoad\")\n\troomLoadedHandler(event: SmoothlyAppRoomCustomEvent<{ selected: boolean }>) {\n\t\tconst room = (this.rooms[event.target.path.toString()] = { element: event.target })\n\t\tif (room.element.selected) {\n\t\t\tthis.selected = room\n\t\t}\n\t}\n\t@Listen(\"click\", { target: \"window\" })\n\tclickHandler(event: MouseEvent) {\n\t\tif (this.mobileMode && !event.composedPath().some(e => e == this.burgerElement \|\| e == this.navElement)) {\n\t\t\tthis.menuOpen = false\n\t\t}\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<Host class={{ \"smoothly-mobile-mode\": this.mobileMode }}>\n\t\t\t\t<smoothly-notifier>\n\t\t\t\t\t<header color={this.color}>\n\t\t\t\t\t\t<h1>\n\t\t\t\t\t\t\t<a href={\"\"}>{this.label}</a>\n\t\t\t\t\t\t</h1>\n\t\t\t\t\t\t<slot name=\"header\" />\n\t\t\t\t\t\t<nav ref={e => (this.navElement = e)}>\n\t\t\t\t\t\t\t<ul>\n\t\t\t\t\t\t\t\t<div class={\"nav-start-container\"}>\n\t\t\t\t\t\t\t\t\t<slot name=\"nav-start\" />\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t\t\t<div class={\"nav-end-container\"}>\n\t\t\t\t\t\t\t\t\t<slot name=\"nav-end\" />\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t</nav>\n\t\t\t\t\t\t<smoothly-burger\n\t\t\t\t\t\t\tref={e => (this.burgerElement = e)}\n\t\t\t\t\t\t\topen={this.menuOpen}\n\t\t\t\t\t\t\tonSmoothlyNavStatus={e => (e.stopPropagation(), (this.menuOpen = e.detail))}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</header>\n\t\t\t\t\t<main ref={e => (this.mainElement = e)} />\n\t\t\t\t</smoothly-notifier>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/app/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from \"@stencil/core\"\nimport { SmoothlyAppRoomCustomEvent } from \"../../components\"\nimport { Color } from \"../../model\"\n\ntype Room = {\n\telement: HTMLSmoothlyAppRoomElement\n}\n@Component({\n\ttag: \"smoothly-app\",\n\tstyleUrl: \"style.css\",\n\tscoped: false,\n})\nexport class SmoothlyApp {\n\t@Prop({ reflect: true }) label?: string\n\t@Prop() color: Color\n\t@Prop() home?: string\n\t@Prop({ mutable: true, reflect: true }) menuOpen = false\n\t@Prop({ reflect: true }) navBreakpoint: `${number}${\"px\" \| \"em\" \| \"rem\"}` = \"48rem\"\n\t@State() mobileMode = false\n\t@State() selected?: Room\n\t@Event() smoothlyUrlChange: EventEmitter<string>\n\tprivate burgerElement?: HTMLSmoothlyBurgerElement\n\tprivate navElement?: HTMLElement\n\tmainElement?: HTMLElement\n\trooms: Record<string, Room \| undefined> = {}\n\n\tcomponentWillLoad() {\n\t\tconst mediaQuery = window.matchMedia(`(max-width: ${this.navBreakpoint})`)\n\t\tthis.mobileMode = mediaQuery.matches\n\t\tmediaQuery.addEventListener(\"change\", e => this.updateMobileMode(e.matches))\n\t}\n\tcomponentDidLoad() {\n\t\tthis.updateMobileMode(this.mobileMode)\n\t}\n\tupdateMobileMode(mobileMode: boolean) {\n\t\tthis.mobileMode = mobileMode\n\t\tObject.values(this.rooms).forEach(room => room?.element.setMobileMode(mobileMode))\n\t\tif (!mobileMode) {\n\t\t\tthis.menuOpen = false\n\t\t}\n\t}\n\n\tasync componentDidRender() {\n\t\tif (!this.selected && !window.location.search) {\n\t\t\t;(this.home && this.rooms[this.home]\n\t\t\t\t? this.rooms[this.home]\n\t\t\t\t: Object.values(this.rooms).find(room => !room?.element.disabled)\n\t\t\t)?.element.setSelected(true)\n\t\t}\n\t}\n\t@Method()\n\tasync selectRoom(path: string) {\n\t\tthis.rooms[path]?.element.setSelected(true)\n\t}\n\t@Watch(\"selected\")\n\tasync selectedChanged() {\n\t\tObject.values(this.rooms).forEach(\n\t\t\troom => room?.element.path != this.selected?.element.path && room?.element.setSelected(false)\n\t\t)\n\t\tconst content = await this.selected?.element.getContent()\n\t\trequestAnimationFrame(() => {\n\t\t\tif (this.mainElement && content) {\n\t\t\t\tthis.mainElement.replaceChildren(content)\n\t\t\t}\n\t\t})\n\t}\n\t@Listen(\"popstate\", { target: \"window\" })\n\tasync locationChangeHandler(event: PopStateEvent) {\n\t\tthis.rooms[event.state.smoothlyPath]?.element.setSelected(true, { history: true })\n\t\tthis.smoothlyUrlChange.emit(window.location.href)\n\t}\n\t@Listen(\"smoothlyRoomSelect\")\n\troomSelectedHandler(event: SmoothlyAppRoomCustomEvent<{ history: boolean; path: string; query?: string }>) {\n\t\tthis.selected = { element: event.target }\n\t\tif (this.mobileMode) {\n\t\t\tthis.menuOpen = false\n\t\t}\n\t\tif (!event.detail.history) {\n\t\t\tconst path = event.detail.path\n\t\t\tconst location = new URL(window.location.pathname == path ? window.location.href : window.location.origin)\n\t\t\tlocation.pathname = path\n\t\t\tlocation.search = event.detail.query ? `?${event.detail.query}` : \"\"\n\t\t\twindow.history.pushState({ smoothlyPath: path, smoothlyQuery: event.detail.query \|\| \"\" }, \"\", location.href)\n\t\t}\n\t}\n\t@Listen(\"smoothlyRoomLoad\")\n\troomLoadedHandler(event: SmoothlyAppRoomCustomEvent<{ selected: boolean }>) {\n\t\tconst room = (this.rooms[event.target.path.toString()] = { element: event.target })\n\t\tif (room.element.selected) {\n\t\t\tthis.selected = room\n\t\t}\n\t}\n\t@Listen(\"click\", { target: \"window\" })\n\tclickHandler(event: MouseEvent) {\n\t\tif (this.mobileMode && !event.composedPath().some(e => e == this.burgerElement \|\| e == this.navElement)) {\n\t\t\tthis.menuOpen = false\n\t\t}\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<Host class={{ \"smoothly-mobile-mode\": this.mobileMode }}>\n\t\t\t\t<smoothly-notifier>\n\t\t\t\t\t<header color={this.color}>\n\t\t\t\t\t\t<h1>\n\t\t\t\t\t\t\t<a href={\"\"}>{this.label}</a>\n\t\t\t\t\t\t</h1>\n\t\t\t\t\t\t<slot name=\"header\" />\n\t\t\t\t\t\t<nav ref={e => (this.navElement = e)}>\n\t\t\t\t\t\t\t<ul>\n\t\t\t\t\t\t\t\t<div class={\"nav-start-container\"}>\n\t\t\t\t\t\t\t\t\t<slot name=\"nav-start\" />\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t\t\t<div class={\"nav-end-container\"}>\n\t\t\t\t\t\t\t\t\t<slot name=\"nav-end\" />\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t</nav>\n\t\t\t\t\t\t<smoothly-burger\n\t\t\t\t\t\t\tref={e => (this.burgerElement = e)}\n\t\t\t\t\t\t\topen={this.menuOpen}\n\t\t\t\t\t\t\tonSmoothlyNavStatus={e => (e.stopPropagation(), (this.menuOpen = e.detail))}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</header>\n\t\t\t\t\t<main ref={e => (this.mainElement = e)} />\n\t\t\t\t</smoothly-notifier>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/components/app/room/index.js CHANGED Viewed

@@ -9,9 +9,11 @@ export class SmoothlyAppRoom {
         this.selected && this.smoothlyUrlChange.emit(window.location.href);
     }
     componentWillLoad() {
-        this.selected = (typeof this.path == "string" ? new URLPattern({ pathname: this.path }) : this.path).test(window.location);
+        const stringOrPatternPaths = Array.isArray(this.path) ? this.path : [this.path];
+        this.paths = stringOrPatternPaths.map(path => (typeof path == "string" ? new URLPattern({ pathname: path }) : path));
+        this.selected = this.paths.some(pattern => pattern.test(window.location.href));
         this.smoothlyRoomLoad.emit({ selected: this.selected });
-        this.selected && window.history.replaceState({ smoothlyPath: this.path }, "", window.location.href);
+        this.selected && window.history.replaceState({ smoothlyPath: this.paths[0].pathname }, "", window.location.href);
     }
     async setMobileMode(mobile) {
         this.mobileMode = mobile;
@@ -22,7 +24,7 @@ export class SmoothlyAppRoom {
     async setSelected(selected, options) {
         this.selected = selected;
         if (selected) {
-            this.smoothlyRoomSelect.emit({ history: !!(options === null || options === void 0 ? void 0 : options.history), query: this.query });
+            this.smoothlyRoomSelect.emit({ history: !!(options === null || options === void 0 ? void 0 : options.history), path: this.paths[0].pathname, query: this.query });
         }
     }
     async setQuery(event) {
@@ -39,7 +41,8 @@ export class SmoothlyAppRoom {
         }
     }
     render() {
-        return (h(Host, { key: 'e06ad4adb4d72a03e6b33e6a2d11698f3cdc450e', class: { "smoothly-mobile-mode": this.mobileMode } }, h("li", { key: 'f236706b03f0cd505b1081f0998ed1dd0b721766' }, h("a", { key: '2147ccb7a8296d1de4cdaa0bf968955c14711e7b', href: typeof this.path == "string" ? this.path : this.path.pathname, onClick: e => this.clickHandler(e) }, this.icon && h("smoothly-icon", { key: '4d1530eb064e95429de842958f1d07e4946dcf15', name: this.icon }), this.label && h("span", { key: 'e5badd955a4fd1b5d12e37fa8dea3bc88eed3841', class: "label" }, this.label))), h("div", { key: 'cf23be6250b7c42f814b74637f4ed6b6510a216f', ref: e => (this.contentElement = e) }, this.content && h("smoothly-lazy", { key: '3a6825efc72c8490827df6e6154b0fbfe3a15d72', content: this.content }), h("slot", { key: 'a786686ce15650ef54ef56fd1778f9b8e28c339e' }))));
+        var _a;
+        return (h(Host, { key: '416a7250b9c2f2a42060522a0c305d3e10c530e2', class: { "smoothly-mobile-mode": this.mobileMode } }, h("li", { key: '13946e4e07e65dd755e6752c7c24b0e9f70a6519' }, h("a", { key: 'be5cc463ec7a2adeb513da59cb925de5f470242f', href: (_a = this.paths[0]) === null || _a === void 0 ? void 0 : _a.pathname, onClick: e => this.clickHandler(e) }, this.icon && h("smoothly-icon", { key: '9b76338e6f64f0331f00d85cbc164da9951051e6', name: this.icon }), this.label && h("span", { key: '1e12b7e8e3b35920f3f5c162e41208e4a87a5033', class: "label" }, this.label))), h("div", { key: '1e3e09244c7e623768dfee215c9a63a801fdf663', ref: e => (this.contentElement = e) }, this.content && h("smoothly-lazy", { key: '1f5938ff9fd197cf96761e5ee6868b45213c18a7', content: this.content }), h("slot", { key: 'f68188a185d5b6792b6dd7b3c971e69145fcb554' }))));
     }
     static get is() { return "smoothly-app-room"; }
     static get encapsulation() { return "scoped"; }
@@ -123,8 +126,8 @@ export class SmoothlyAppRoom {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string | URLPattern",
-                    "resolved": "URLPattern | string",
+                    "original": "string | URLPattern | (string | URLPattern)[]",
+                    "resolved": "(string | URLPattern)[] | URLPattern | string",
                     "references": {
                         "URLPattern": {
                             "location": "global",
@@ -197,6 +200,7 @@ export class SmoothlyAppRoom {
     }
     static get states() {
         return {
+            "paths": {},
             "mobileMode": {}
         };
     }
@@ -212,8 +216,8 @@ export class SmoothlyAppRoom {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "{ history: boolean; query?: string }",
-                    "resolved": "{ history: boolean; query?: string | undefined; }",
+                    "original": "{ history: boolean; path: string; query?: string }",
+                    "resolved": "{ history: boolean; path: string; query?: string | undefined; }",
                     "references": {}
                 }
             }, {

package/dist/collection/components/app/room/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/app/room/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACN,SAAS,EACT,KAAK,EAGL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,MAAM,EACN,IAAI,EACJ,KAAK,GAEL,MAAM,eAAe,CAAA;AACtB,OAAO,qBAAqB,CAAA;AAQ5B,MAAM,OAAO,eAAe;IAL5B;QAUS,SAAI,~~GAAwB~~,EAAE,CAAA;~~QAG7B~~,eAAU,GAAG,KAAK,CAAA;KAkE3B;IA7DA,kBAAkB;QACjB,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;IACnE,CAAC;IACD,iBAAiB;QAChB,IAAI,CAAC,~~QAAQ~~,GAAG,CAAC,~~OAAO~~,IAAI,CAAC,IAAI,IAAI,QAAQ,CAAC,CAAC,CAAC,IAAI,UAAU,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,~~IAAI~~,~~EAAE~~,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,~~CACxG~~,MAAM,CAAC,QAAQ,~~CACf~~,CAAA;~~QACD~~,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAA;QACvD,IAAI,CAAC,QAAQ,IAAI,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,YAAY,EAAE,IAAI,CAAC,~~IAAI~~,EAAE,EAAE,EAAE,EAAE,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;~~IACpG~~,CAAC;IAED,KAAK,CAAC,aAAa,CAAC,MAAe;QAClC,IAAI,CAAC,UAAU,GAAG,MAAM,CAAA;IACzB,CAAC;IAED,KAAK,CAAC,UAAU;QACf,OAAO,IAAI,CAAC,cAAc,CAAA;IAC3B,CAAC;IAED,KAAK,CAAC,WAAW,CAAC,QAAiB,EAAE,OAA+B;QACnE,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAA;QACxB,IAAI,QAAQ,EAAE,CAAC;YACd,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,CAAA,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAA;~~QACjF~~,CAAC;IACF,CAAC;IAED,KAAK,CAAC,QAAQ,CAAC,KAAoD;QAClE,IAAI,KAAK,CAAC,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;YACxE,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAA;YAC/B,MAAM,CAAC,OAAO,CAAC,SAAS,CACvB,EAAE,YAAY,EAAE,IAAI,CAAC,IAAI,EAAE,aAAa,EAAE,IAAI,CAAC,KAAK,EAAE,EACtD,EAAE,EACF,GAAG,MAAM,CAAC,QAAQ,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,CAClE,CAAA;YACD,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;QAClD,CAAC;IACF,CAAC;IAED,YAAY,CAAC,KAAiB;QAC7B,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,KAAK,IAAI,CAAC,IAAI,KAAK,CAAC,MAAM,IAAI,CAAC,EAAE,CAAC;YAC/E,KAAK,CAAC,cAAc,EAAE,CAAA;YACtB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAA;QACvB,CAAC;IACF,CAAC;IAED,MAAM;QACL,OAAO,CACN,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,sBAAsB,EAAE,IAAI,CAAC,UAAU,EAAE;YACvD;gBACC,0DAAG,IAAI,EAAE,~~OAAO~~,IAAI,CAAC,~~IAAI~~,~~IAAI,QAAQ,~~CAAC,CAAC,CAAC,~~IAAI~~,~~CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,~~QAAQ,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;~~oBACxG~~,IAAI,CAAC,IAAI,IAAI,sEAAe,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI;oBAC/C,IAAI,CAAC,KAAK,IAAI,6DAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CACnD,CACA;YACL,4DAAK,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC;gBACtC,IAAI,CAAC,OAAO,IAAI,sEAAe,OAAO,EAAE,IAAI,CAAC,OAAO,GAAI;gBACzD,8DAAQ,CACH,CACA,CACP,CAAA;IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import {\n\tComponent,\n\tEvent,\n\tEventEmitter,\n\tFunctionalComponent,\n\th,\n\tHost,\n\tListen,\n\tMethod,\n\tProp,\n\tState,\n\tVNode,\n} from \"@stencil/core\"\nimport \"urlpattern-polyfill\"\nimport { Icon } from \"../../../model\"\n\n@Component({\n\ttag: \"smoothly-app-room\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyAppRoom {\n\tprivate query?: string\n\t@Prop({ reflect: true }) label?: string\n\t@Prop({ reflect: true }) icon?: Icon\n\t@Prop({ reflect: true }) disabled: boolean\n\t@Prop() path: string \| URLPattern = \"\"\n\t@Prop({ reflect: true, mutable: true }) selected?: boolean\n\t@Prop() content?: VNode \| FunctionalComponent\n\t@State() mobileMode = false\n\t@Event() smoothlyRoomSelect: EventEmitter<{ history: boolean; query?: string }>\n\t@Event() smoothlyRoomLoad: EventEmitter<{ selected: boolean }>\n\t@Event() smoothlyUrlChange: EventEmitter<string>\n\tprivate contentElement?: HTMLElement\n\tcomponentDidRender() {\n\t\tthis.selected && this.smoothlyUrlChange.emit(window.location.href)\n\t}\n\tcomponentWillLoad() {\n\t\tthis.~~selected~~ = (typeof ~~this.~~path == \"string\" ? new URLPattern({ pathname: ~~this.~~path }) : ~~this.~~path)~~.test(~~\n\t\~~t\twindow~~.location~~\n\t\t~~)\n\t\tthis.smoothlyRoomLoad.emit({ selected: this.selected })\n\t\tthis.selected && window.history.replaceState({ smoothlyPath: this.~~path~~ }, \"\", window.location.href)\n\t}\n\t@Method()\n\tasync setMobileMode(mobile: boolean) {\n\t\tthis.mobileMode = mobile\n\t}\n\t@Method()\n\tasync getContent(): Promise<HTMLElement \| undefined> {\n\t\treturn this.contentElement\n\t}\n\t@Method()\n\tasync setSelected(selected: boolean, options?: { history?: boolean }): Promise<void> {\n\t\tthis.selected = selected\n\t\tif (selected) {\n\t\t\tthis.smoothlyRoomSelect.emit({ history: !!options?.history, query: this.query })\n\t\t}\n\t}\n\t@Listen(\"smoothlyUrlUpdate\", { target: \"window\" })\n\tasync setQuery(event: CustomEvent<{ query?: string; path: string }>): Promise<void> {\n\t\tif (event.detail.path == this.path && this.query != event.detail.query) {\n\t\t\tthis.query = event.detail.query\n\t\t\twindow.history.pushState(\n\t\t\t\t{ smoothlyPath: this.path, smoothlyQuery: this.query },\n\t\t\t\t\"\",\n\t\t\t\t`${window.location.pathname}${this.query ? `?${this.query}` : \"\"}`\n\t\t\t)\n\t\t\tthis.smoothlyUrlChange.emit(window.location.href)\n\t\t}\n\t}\n\n\tclickHandler(event: MouseEvent) {\n\t\tif (!event.metaKey && !event.ctrlKey && event.which != 2 && event.button != 1) {\n\t\t\tevent.preventDefault()\n\t\t\tthis.setSelected(true)\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={{ \"smoothly-mobile-mode\": this.mobileMode }}>\n\t\t\t\t<li>\n\t\t\t\t\t<a href={~~typeof~~ this.~~path == \"string\" ? this.path : this.path.~~pathname} onClick={e => this.clickHandler(e)}>\n\t\t\t\t\t\t{this.icon && <smoothly-icon name={this.icon} />}\n\t\t\t\t\t\t{this.label && <span class=\"label\">{this.label}</span>}\n\t\t\t\t\t</a>\n\t\t\t\t</li>\n\t\t\t\t<div ref={e => (this.contentElement = e)}>\n\t\t\t\t\t{this.content && <smoothly-lazy content={this.content} />}\n\t\t\t\t\t<slot />\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/app/room/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n\tComponent,\n\tEvent,\n\tEventEmitter,\n\tFunctionalComponent,\n\th,\n\tHost,\n\tListen,\n\tMethod,\n\tProp,\n\tState,\n\tVNode,\n} from \"@stencil/core\"\nimport \"urlpattern-polyfill\"\nimport { Icon } from \"../../../model\"\n\n@Component({\n\ttag: \"smoothly-app-room\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyAppRoom {\n\tprivate query?: string\n\t@Prop({ reflect: true }) label?: string\n\t@Prop({ reflect: true }) icon?: Icon\n\t@Prop({ reflect: true }) disabled: boolean\n\t@Prop() path: string \| URLPattern \| (string \| URLPattern)[] = \"\"\n\t@State() paths: URLPattern[]\n\t@Prop({ reflect: true, mutable: true }) selected?: boolean\n\t@Prop() content?: VNode \| FunctionalComponent\n\t@State() mobileMode = false\n\t@Event() smoothlyRoomSelect: EventEmitter<{ history: boolean; path: string; query?: string }>\n\t@Event() smoothlyRoomLoad: EventEmitter<{ selected: boolean }>\n\t@Event() smoothlyUrlChange: EventEmitter<string>\n\tprivate contentElement?: HTMLElement\n\tcomponentDidRender() {\n\t\tthis.selected && this.smoothlyUrlChange.emit(window.location.href)\n\t}\n\tcomponentWillLoad() {\n\t\tconst stringOrPatternPaths = Array.isArray(this.path) ? this.path : [this.path]\n\t\tthis.paths = stringOrPatternPaths.map(path => (typeof path == \"string\" ? new URLPattern({ pathname: path }) : path))\n\t\tthis.selected = this.paths.some(pattern => pattern.test(window.location.href))\n\t\tthis.smoothlyRoomLoad.emit({ selected: this.selected })\n\t\tthis.selected && window.history.replaceState({ smoothlyPath: this.paths[0].pathname }, \"\", window.location.href)\n\t}\n\t@Method()\n\tasync setMobileMode(mobile: boolean) {\n\t\tthis.mobileMode = mobile\n\t}\n\t@Method()\n\tasync getContent(): Promise<HTMLElement \| undefined> {\n\t\treturn this.contentElement\n\t}\n\t@Method()\n\tasync setSelected(selected: boolean, options?: { history?: boolean }): Promise<void> {\n\t\tthis.selected = selected\n\t\tif (selected) {\n\t\t\tthis.smoothlyRoomSelect.emit({ history: !!options?.history, path: this.paths[0].pathname, query: this.query })\n\t\t}\n\t}\n\t@Listen(\"smoothlyUrlUpdate\", { target: \"window\" })\n\tasync setQuery(event: CustomEvent<{ query?: string; path: string }>): Promise<void> {\n\t\tif (event.detail.path == this.path && this.query != event.detail.query) {\n\t\t\tthis.query = event.detail.query\n\t\t\twindow.history.pushState(\n\t\t\t\t{ smoothlyPath: this.path, smoothlyQuery: this.query },\n\t\t\t\t\"\",\n\t\t\t\t`${window.location.pathname}${this.query ? `?${this.query}` : \"\"}`\n\t\t\t)\n\t\t\tthis.smoothlyUrlChange.emit(window.location.href)\n\t\t}\n\t}\n\n\tclickHandler(event: MouseEvent) {\n\t\tif (!event.metaKey && !event.ctrlKey && event.which != 2 && event.button != 1) {\n\t\t\tevent.preventDefault()\n\t\t\tthis.setSelected(true)\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={{ \"smoothly-mobile-mode\": this.mobileMode }}>\n\t\t\t\t<li>\n\t\t\t\t\t<a href={this.paths[0]?.pathname} onClick={e => this.clickHandler(e)}>\n\t\t\t\t\t\t{this.icon && <smoothly-icon name={this.icon} />}\n\t\t\t\t\t\t{this.label && <span class=\"label\">{this.label}</span>}\n\t\t\t\t\t</a>\n\t\t\t\t</li>\n\t\t\t\t<div ref={e => (this.contentElement = e)}>\n\t\t\t\t\t{this.content && <smoothly-lazy content={this.content} />}\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

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"; }