npm - smoothly - Versions diffs - 1.2.1-alpha.61 → 1.2.1-alpha.62 - Mend

smoothly 1.2.1-alpha.61 → 1.2.1-alpha.62

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 (464) hide show

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

@@ -164,7 +164,7 @@ export class SmoothlyForm {
         await Promise.all([...this.inputs.values()].map(input => Editable.Element.type.is(input) && input.setInitialValue()));
     }
     render() {
-        return (h(Host, { key: '2a470af3268fe4b09126d86c2f1c01e1b6ac2ab2' }, h("smoothly-spinner", { key: 'e296f07867de64502324dc2ec4e50d8161ba8128', overlay: true, hidden: !this.processing }), h("form", { key: '4714f583928de712a0825df741f8cc5e308ad61c', onSubmit: !this.prevent ? undefined : e => e.preventDefault(), name: this.name }, h("fieldset", { key: '540893b763c751596966cd0004c6f835fb0bf707' }, h("slot", { key: '09e81fe12b2e9058a3a14321f4e25ac79dab35ae' })), h("div", { key: '1915f8ffba845ed1d6b66404c78c5e1e6f3d87fd' }, h("slot", { key: 'a0143470fa52ed16cafe413fc951c2c26c9419ec', name: "clear" }), h("slot", { key: 'd941855ec112d4854c1be75545101a6a8e00447e', name: "edit" }), h("slot", { key: 'e53b2069d3f5b6a2a3c395727f057fccf510ff3e', name: "reset" }), h("slot", { key: 'b0bdd67438097409ce9c9ec927cbadbd86959bef', name: "delete" }), h("slot", { key: '5897b076b5b2ad467397ee8a820397f8ebaacbd7', name: "submit" })))));
+        return (h(Host, { key: '544cb7ab781d344afba275f3e363a7ca5e615c2e' }, h("smoothly-spinner", { key: 'ffc3e23544446c744aec87941e1f7e137e71d83e', overlay: true, hidden: !this.processing }), h("form", { key: 'ee0a5b140641775c1d55c961db46e3e630b666a8', onSubmit: !this.prevent ? undefined : e => e.preventDefault(), name: this.name }, h("fieldset", { key: 'dc7509953049315094ba44369d7c56ee22c2e511' }, h("slot", { key: 'b510be19fca9b78c6ecb3b84648f75a21fb40d97' })), h("div", { key: '985fd0b35f3664135c09bdd03f6156399a4d3d58' }, h("slot", { key: '014fd2d642d29332f9fc28298b0cdbf2d5b7956a', name: "clear" }), h("slot", { key: '55d2fd1d90b303f56e9578704780fc78b9bc9e17', name: "edit" }), h("slot", { key: '2af69ee44488e47a52cf7dff75138c16c1883ef8', name: "reset" }), h("slot", { key: 'f35a976b66dada2670d5a280d310aac518eedc75', name: "delete" }), h("slot", { key: '90b1dfac51e438c663d93218fb114a491495864f', name: "submit" })))));
     }
     static get is() { return "smoothly-form"; }
     static get originalStyleUrls() {

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

@@ -7,7 +7,7 @@ export class SmoothlyIconDemo {
         this.props = {};
     }
     render() {
-        return (h(Host, { key: '40c73c1b86c82de25ef710d90250ee26f5a97d18' }, h("h2", { key: '9da59d3a9759d294b018b1cccd6b1ab22a80a14d' }, "Filter and Variants"), h("smoothly-form", { key: 'f00d40984821c21dbe6da17699bed1af9833ba98', onSmoothlyFormInput: e => (this.display = e.detail) }, h("smoothly-input", { key: '1e3aea269957e45707b59cac29c7acda1b88b44a', name: "filter" }, "Filter"), h("smoothly-input-select", { key: '920017ab5a12f3ac301e1d497ab5f646b2f5b250', name: "variant" }, h("span", { key: '6f72768a6901c6848b9a8eb15890726b8d9aad65', slot: "label" }, "Variant"), h("smoothly-item", { key: 'e19740138b3d3fb726891c8c83ca48cb63a6d32b', value: "outline" }, "outline"), h("smoothly-item", { key: '9e1101547a526f2e6d5626ea1cb6f9d509e3d77c', value: "sharp" }, "sharp"), h("smoothly-input-clear", { key: '90bf7ea10c6e28f2fe0946246e932c188d2e36d6', slot: "end" }))), h("h2", { key: '03af9cd3b892c8ce5c85ec5f24308ec568d3d7a4' }, "Props"), h("smoothly-form", { key: '5523dd394791968c76bcaa4611ad7f061ef3d4df', onSmoothlyFormInput: e => (this.props = e.detail) }, h("smoothly-input-select", { key: 'afaef5167021cf3f92c0ec46db5a13dc86a793be', name: "color" }, h("span", { key: 'a70c95e49fa7e5863e2ee085cea1a779bae32672', slot: "label" }, "Color"), Color.types.map(color => (h("smoothly-item", { value: color, color: color }, color))), h("smoothly-input-clear", { key: '2e0a61224d72bb2177ccdca8464a062b55c2cdf6', slot: "end" })), h("smoothly-input-select", { key: '33dd05fc21187e59d50294ac6e516859b682cc85', name: "flip" }, h("span", { key: '1c6cfbc839f886094d1c5159ffe15cd53aa7408c', slot: "label" }, "Flip"), h("smoothly-item", { key: '5106005eb437b4928c85f0c199e8a63d2ccb15cf', value: "x" }, "x"), h("smoothly-item", { key: '74127b329d004f066a26cd5ebf1d371b4aa3b0b0', value: "y" }, "y"), h("smoothly-input-clear", { key: '136a83fec40ffe558a645692ee166bf41895a127', slot: "end" })), h("smoothly-input-select", { key: '18f3fefd865f1e464fe028a28cb3c08ed1f521b1', name: "size" }, h("span", { key: 'e12ba7003ac5bd1150df707fe72d4638eb873e6d', slot: "label" }, "Size"), h("smoothly-item", { key: '1aaed4a2d9de5cbb2d11b7e57d4e10fb62023a8b', value: "tiny" }, "tiny"), h("smoothly-item", { key: '506c7ac8f330114d6cfeeacd2ccf28617f48d18f', value: "small" }, "small"), h("smoothly-item", { key: 'fa323988312e0bd28fdb047a29b2bf9b6393316c', value: "medium" }, "medium"), h("smoothly-item", { key: '4a70d203ff25c15d7de12884df57c5908bfddf3f', value: "large" }, "large"), h("smoothly-input-clear", { key: '1484395ca63048f2da3086608c69fd16adc4c767', slot: "end" })), h("smoothly-input-range", { key: '9ec2aa43cbcba1b05b4d0f15630fb3652ba1c68b', name: "rotate", step: 1, min: -180, max: 180, value: 0 }, "Rotate", h("smoothly-input-clear", { key: '9edc8e3b7bd75b9709da67bb106713265d9bae99', slot: "end" }))), h("h1", { key: 'e163cd387bad76c2d031e30ebd3ef3c99ed5c3f4' }, "Icons"), h("div", { key: '991f7e26e28d46d076f9977a2e08ec8e3902a518', class: "icons" }, [
+        return (h(Host, { key: '4243369b1c46749df379f00e96544fa4761a5286' }, h("h2", { key: '118123fd7ac92a6f1d2b6a78cc1fa024002b87cf' }, "Filter and Variants"), h("smoothly-form", { key: '50cf6fb15cf329f386105fced5af132e1bfe24db', onSmoothlyFormInput: e => (this.display = e.detail) }, h("smoothly-input", { key: '9d5255638f23b72f71c43cb3c2545b2ec91d77dc', name: "filter" }, "Filter"), h("smoothly-input-select", { key: '55b8e177f8ea3d3b2b189d256d372511280cbeda', name: "variant" }, h("span", { key: '7bf040f9f34f789ab6cb0ab18296bb890d29f669', slot: "label" }, "Variant"), h("smoothly-item", { key: '1ba46adbd0ff9eb9feb3096e25988c9b8130c228', value: "outline" }, "outline"), h("smoothly-item", { key: 'e55d0500bcfe1710f53cc705c26422744a14c1e1', value: "sharp" }, "sharp"), h("smoothly-input-clear", { key: '3d0134c752032fede37899736da37833dfc869de', slot: "end" }))), h("h2", { key: '1c16464c982caf23966cf682600003b7c3958dda' }, "Props"), h("smoothly-form", { key: 'cc7c7f1cfbaf5f945033509bea2af64fd6898569', onSmoothlyFormInput: e => (this.props = e.detail) }, h("smoothly-input-select", { key: '39f0f89aacf12e2bdcab0873b5246b6780319cc6', name: "color" }, h("span", { key: 'd57d920476f11816ed41492ef518f7e2270e7dbb', slot: "label" }, "Color"), Color.types.map(color => (h("smoothly-item", { value: color, color: color }, color))), h("smoothly-input-clear", { key: '9d2941451b4ce21f096f746b5be86d4eafcff263', slot: "end" })), h("smoothly-input-select", { key: '49fa93be8d22f2073ee01a5b15a0c73b983be912', name: "flip" }, h("span", { key: '2a790cdd858df40128c7ace45ed01d70deb223b8', slot: "label" }, "Flip"), h("smoothly-item", { key: 'd26a41e2dbcc737453649751ac6abbaefd945726', value: "x" }, "x"), h("smoothly-item", { key: 'afa74692c11e593ee2281f26d4687728b56621f4', value: "y" }, "y"), h("smoothly-input-clear", { key: '11055f2f865c79a8916d4494f2431aaadf440f1c', slot: "end" })), h("smoothly-input-select", { key: 'ee959c0778e35040b410009cc12f228d93343855', name: "size" }, h("span", { key: 'b40c960699e8420211c71a944452f5538622b902', slot: "label" }, "Size"), h("smoothly-item", { key: 'b47d06dfde153f3ecc50a6e0e1423d5b737adef5', value: "tiny" }, "tiny"), h("smoothly-item", { key: 'e5e432209245eabc5e95295097318c6732ea1665', value: "small" }, "small"), h("smoothly-item", { key: 'd988461ac6c04ba037a24495b91df69c4375b199', value: "medium" }, "medium"), h("smoothly-item", { key: 'c887bce6d7233eeded5690cdda843caf218a61db', value: "large" }, "large"), h("smoothly-item", { key: 'f28da514b977e3cb249abd0023c22b65b5327eca', value: "xlarge" }, "xlarge"), h("smoothly-input-clear", { key: 'a1af3707e895d0a264bf3268f514c9872ac86659', slot: "end" })), h("smoothly-input-range", { key: '9e1810de388ef5dae13436e1a9c0fa0489d9ec3b', name: "rotate", step: 1, min: -180, max: 180, value: 0 }, "Rotate", h("smoothly-input-clear", { key: 'a3ea9f84ae4f2aacbbdfa86ae1902f61a31305b9', slot: "end" }))), h("h1", { key: '93c331d11d1e08df0e161bf5858c621f7f20c203' }, "Icons"), h("div", { key: '52d373675e9910601a7427a44a4598eaa09a19cc', class: "icons" }, [
             ...Icon.Name.values
                 .filter(name => !this.display.filter || name.includes(this.display.filter))
                 .map((name) => (this.display.variant ? `${name}-${this.display.variant}` : name)),

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/icon/demo/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAC9E,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAMpD,MAAM,OAAO,gBAAgB;;QAC5B,SAAI,GAAG,CAAC,CAAA;uBAE+D,EAAE;~~qBAExE~~,EAAE;;~~IAGH~~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","sourcesContent":["import { Component, Event, EventEmitter, h, Host, State } from \"@stencil/core\"\nimport { Color, 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: { ~~color~~?: Color~~; flip~~?: \"x\" \| \"y\"~~; size~~?: \"tiny\" \| \"small\" \| \"medium\" \| \"large\"; ~~rotate~~?: number ~~} =\~~n\t\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.types.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=\"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-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\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, h, Host, State } from \"@stencil/core\"\nimport { Color, 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\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.types.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=\"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\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/icon/index.js CHANGED Viewed

@@ -5,7 +5,7 @@ export class SmoothlyIcon {
         this.color = undefined;
         this.fill = "solid";
         this.name = "empty";
-        this.size = "medium";
+        this.size = undefined;
         this.rotate = undefined;
         this.flip = undefined;
         this.toolTip = undefined;
@@ -41,7 +41,7 @@ export class SmoothlyIcon {
     }
     render() {
         var _a;
-        return h(Host, { key: '90d808b89e55e020357e31996664df7ae6e492e7', innerHTML: this.document, style: { ["--rotation"]: `${(_a = this.rotate) !== null && _a !== void 0 ? _a : 0}deg` } });
+        return h(Host, { key: '11b2bc0439710470af7ca83d814f7e3e18e5b52e', innerHTML: this.document, style: { ["--rotation"]: `${(_a = this.rotate) !== null && _a !== void 0 ? _a : 0}deg` } });
     }
     static get is() { return "smoothly-icon"; }
     static get encapsulation() { return "scoped"; }
@@ -132,19 +132,18 @@ export class SmoothlyIcon {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "\"tiny\" | \"small\" | \"medium\" | \"large\"",
-                    "resolved": "\"large\" | \"medium\" | \"small\" | \"tiny\"",
+                    "original": "\"tiny\" | \"small\" | \"medium\" | \"large\" | \"xlarge\"",
+                    "resolved": "\"large\" | \"medium\" | \"small\" | \"tiny\" | \"xlarge\" | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
                 "attribute": "size",
-                "reflect": true,
-                "defaultValue": "\"medium\""
+                "reflect": true
             },
             "rotate": {
                 "type": "number",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/icon/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAEtE,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAA;AAOlC,MAAM,OAAO,YAAY;;;oBAEc,OAAO;oBACG,OAAO~~;oBACgB~~,~~QAAQ;;;;;;;IAO/E,~~KAAK,CAAC,iBAAiB;QACtB,MAAM,IAAI,CAAC,WAAW,EAAE,CAAA;IACzB,CAAC;IAGD,KAAK,CAAC,WAAW;QAChB,IAAI,IAAI,CAAC,IAAI,IAAI,OAAO,EAAE,CAAC;YAC1B,MAAM,OAAO,GAAG,CAAC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;YAC3D,IAAI,MAAM,GAAG,MAAM,OAAO,CAAA;YAC1B,IAAI,OAAO,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;gBACnC,MAAM,GAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CACZ,OAAO,CAAC,eAAe,EAAE,eAAe,EACzC,OAAO,CAAC,2BAA2B,EAAE,EAAE,EACvC,OAAO,CAAC,gBAAgB,EAAE,EAAE,CAAC,CAAA;gBAC/B,IAAI,CAAC,IAAI,CAAC,OAAO;oBAChB,MAAM,GAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,CAAC,oBAAoB,EAAE,EAAE,CAAC,CAAA;qBAC9C,IAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,CAAC,SAAS,CAAC;oBACnC,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,wBAAwB,EAAE,UAAU,IAAI,CAAC,OAAO,UAAU,CAAC,CAAA;;oBAEnF,MAAM,GAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,CAAC,iBAAiB,EAAE,YAAY,IAAI,CAAC,OAAO,YAAY,CAAC,CAAA;gBAClF,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAA;YAC5B,CAAC;QACF,CAAC;;YACA,IAAI,CAAC,cAAc,EAAE,CAAA;IACvB,CAAC;IACD,cAAc,CAAC,QAAiB;QAC/B,IAAI,CAAC,QAAQ;YACZ,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GACR;;SAEM,CAAA;IACR,CAAC;IAED,MAAM;;QACL,OAAO,EAAC,IAAI,qDAAC,SAAS,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE,CAAC,YAAY,CAAC,EAAE,GAAG,MAAA,IAAI,CAAC,MAAM,mCAAI,CAAC,KAAK,EAAE,GAAI,CAAA;IAC/F,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACD","sourcesContent":["import { Component, h, Host, Prop, State, Watch } from \"@stencil/core\"\nimport { Color, Fill } from \"../../model\"\nimport { Icon } from \"../../model\"\n\n@Component({\n\ttag: \"smoothly-icon\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyIcon {\n\t@Prop({ reflect: true }) color: Color\n\t@Prop({ reflect: true }) fill: Fill = \"solid\"\n\t@Prop({ reflect: true }) name: Icon \| \"empty\" = \"empty\"\n\t@Prop({ reflect: true }) size: \"tiny\" \| \"small\" \| \"medium\" \| \"large\" = \"~~medium~~\"\n\t@Prop({ reflect: true }) rotate?: number\n\t@Prop({ reflect: true }) flip?: \"x\" \| \"y\"\n\t@Prop() toolTip?: string\n\t@State() latestPromise: Promise<string \| undefined>\n\t@State() document?: string\n\n\tasync componentWillLoad() {\n\t\tawait this.nameChanged()\n\t}\n\t@Watch(\"toolTip\")\n\t@Watch(\"name\")\n\tasync nameChanged() {\n\t\tif (this.name != \"empty\") {\n\t\t\tconst promise = (this.latestPromise = Icon.load(this.name))\n\t\t\tlet result = await promise\n\t\t\tif (promise == this.latestPromise) {\n\t\t\t\tresult = result\n\t\t\t\t\t?.replace(/(?<=^<svg\\s?)/, `$& role=\"img\"`)\n\t\t\t\t\t.replace(` width=\"512\" height=\"512\"`, \"\")\n\t\t\t\t\t.replace(/stroke:#000;/gi, \"\")\n\t\t\t\tif (!this.toolTip)\n\t\t\t\t\tresult = result?.replace(/<title>.<\\/title>/, \"\")\n\t\t\t\telse if (result?.includes(\"<title>\"))\n\t\t\t\t\tresult = result.replace(/(<title>).(<\\/title>)/, `<title>${this.toolTip}</title>`)\n\t\t\t\telse\n\t\t\t\t\tresult = result?.replace(/(.*>)(<\\/svg>$)/, `$1<title>${this.toolTip}</title>$2`)\n\t\t\t\tthis.updateDocument(result)\n\t\t\t}\n\t\t} else\n\t\t\tthis.updateDocument()\n\t}\n\tupdateDocument(document?: string) {\n\t\tthis.document =\n\t\t\tdocument ??\n\t\t\t`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n\t\t<title>Empty</title>\n\t\t</svg>`\n\t}\n\n\trender() {\n\t\treturn <Host innerHTML={this.document} style={{ [\"--rotation\"]: `${this.rotate ?? 0}deg` }} />\n\t}\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/icon/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAEtE,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAA;AAOlC,MAAM,OAAO,YAAY;;;oBAEc,OAAO;oBACG,OAAO;;;;;;;;IAQvD,KAAK,CAAC,iBAAiB;QACtB,MAAM,IAAI,CAAC,WAAW,EAAE,CAAA;IACzB,CAAC;IAGD,KAAK,CAAC,WAAW;QAChB,IAAI,IAAI,CAAC,IAAI,IAAI,OAAO,EAAE,CAAC;YAC1B,MAAM,OAAO,GAAG,CAAC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;YAC3D,IAAI,MAAM,GAAG,MAAM,OAAO,CAAA;YAC1B,IAAI,OAAO,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;gBACnC,MAAM,GAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CACZ,OAAO,CAAC,eAAe,EAAE,eAAe,EACzC,OAAO,CAAC,2BAA2B,EAAE,EAAE,EACvC,OAAO,CAAC,gBAAgB,EAAE,EAAE,CAAC,CAAA;gBAC/B,IAAI,CAAC,IAAI,CAAC,OAAO;oBAChB,MAAM,GAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,CAAC,oBAAoB,EAAE,EAAE,CAAC,CAAA;qBAC9C,IAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,CAAC,SAAS,CAAC;oBACnC,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,wBAAwB,EAAE,UAAU,IAAI,CAAC,OAAO,UAAU,CAAC,CAAA;;oBAEnF,MAAM,GAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,CAAC,iBAAiB,EAAE,YAAY,IAAI,CAAC,OAAO,YAAY,CAAC,CAAA;gBAClF,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAA;YAC5B,CAAC;QACF,CAAC;;YACA,IAAI,CAAC,cAAc,EAAE,CAAA;IACvB,CAAC;IACD,cAAc,CAAC,QAAiB;QAC/B,IAAI,CAAC,QAAQ;YACZ,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GACR;;SAEM,CAAA;IACR,CAAC;IAED,MAAM;;QACL,OAAO,EAAC,IAAI,qDAAC,SAAS,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE,CAAC,YAAY,CAAC,EAAE,GAAG,MAAA,IAAI,CAAC,MAAM,mCAAI,CAAC,KAAK,EAAE,GAAI,CAAA;IAC/F,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Host, Prop, State, Watch } from \"@stencil/core\"\nimport { Color, Fill } from \"../../model\"\nimport { Icon } from \"../../model\"\n\n@Component({\n\ttag: \"smoothly-icon\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyIcon {\n\t@Prop({ reflect: true }) color: Color\n\t@Prop({ reflect: true }) fill: Fill = \"solid\"\n\t@Prop({ reflect: true }) name: Icon \| \"empty\" = \"empty\"\n\t@Prop({ reflect: true }) size?: \"tiny\" \| \"small\" \| \"medium\" \| \"large\" \| \"xlarge\"\n\t@Prop({ reflect: true }) rotate?: number\n\t@Prop({ reflect: true }) flip?: \"x\" \| \"y\"\n\t@Prop() toolTip?: string\n\t@State() latestPromise: Promise<string \| undefined>\n\t@State() document?: string\n\n\tasync componentWillLoad() {\n\t\tawait this.nameChanged()\n\t}\n\t@Watch(\"toolTip\")\n\t@Watch(\"name\")\n\tasync nameChanged() {\n\t\tif (this.name != \"empty\") {\n\t\t\tconst promise = (this.latestPromise = Icon.load(this.name))\n\t\t\tlet result = await promise\n\t\t\tif (promise == this.latestPromise) {\n\t\t\t\tresult = result\n\t\t\t\t\t?.replace(/(?<=^<svg\\s?)/, `$& role=\"img\"`)\n\t\t\t\t\t.replace(` width=\"512\" height=\"512\"`, \"\")\n\t\t\t\t\t.replace(/stroke:#000;/gi, \"\")\n\t\t\t\tif (!this.toolTip)\n\t\t\t\t\tresult = result?.replace(/<title>.<\\/title>/, \"\")\n\t\t\t\telse if (result?.includes(\"<title>\"))\n\t\t\t\t\tresult = result.replace(/(<title>).(<\\/title>)/, `<title>${this.toolTip}</title>`)\n\t\t\t\telse\n\t\t\t\t\tresult = result?.replace(/(.*>)(<\\/svg>$)/, `$1<title>${this.toolTip}</title>$2`)\n\t\t\t\tthis.updateDocument(result)\n\t\t\t}\n\t\t} else\n\t\t\tthis.updateDocument()\n\t}\n\tupdateDocument(document?: string) {\n\t\tthis.document =\n\t\t\tdocument ??\n\t\t\t`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n\t\t<title>Empty</title>\n\t\t</svg>`\n\t}\n\n\trender() {\n\t\treturn <Host innerHTML={this.document} style={{ [\"--rotation\"]: `${this.rotate ?? 0}deg` }} />\n\t}\n}\n"]}

package/dist/collection/components/icon/style.css CHANGED Viewed

@@ -1,4 +1,4 @@
-:host[size] {
+:host[fill] {
 	background: none;
 }
 :host {
@@ -26,24 +26,23 @@
 	display: none;
 }
 :host[size=tiny] {
-	width: 1.2em;
-	height: 1.2em;
+	--smoothly-icon-size: 1.2em;
 }
 :host[size=small] {
-	width: 1.4em;
-	height: 1.4em;
+	--smoothly-icon-size: 1.4em;
 }
 :host[size=medium] {
-	width: 1.8em;
-	height: 1.8em;
+	--smoothly-icon-size: 1.8em;
 }
 :host[size=large] {
-	width: 2.8em;
-	height: 2.8em;
+	--smoothly-icon-size: 2.8em;
 }
 :host[size=xlarge] {
-	width: 4em;
-	height: 4em;
+	--smoothly-icon-size: 4em;
+}
+:host {
+	width: var(--smoothly-icon-size, 1.8em);
+	height: var(--smoothly-icon-size, 1.8em);
 }
 :host::slotted(svg) {
 	/* this is needed for svg to work on safari */

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: '3c8530deb7ac6b81fd703ef18aa24844caebc230' }, h("h2", { key: '012b0c5e9b7ee184ed1c25d1eba8b75b2c43ed56' }, "All inputs"), h("smoothly-form", { key: '67d7aed0c6be4199b7d1142e4863ba6ba72d8193', looks: "grid", readonly: true, action: "https://api.toiletapi.com/6b12fd2f-e896-46f9-b38f-25cf42cee4b4" }, h("smoothly-input", { key: '43413a387e1cce179da34e87470e40db7a8a8b01', readonly: true, name: "First Name", value: "John" }, "First name"), h("smoothly-input", { key: '61493890f37a75f01be55ee9c0ad7c5389859c0c', name: "Last name", value: "Doe" }, "Last name", h("smoothly-input-clear", { key: '056851c8ba611bfea718cdf48125c23db3cfd09a', size: "icon", slot: "end" })), h("smoothly-input", { key: 'a53c9fbe5f5c8456978d7bad47c64b1b255f8529', type: "phone", name: "Phone", value: "777888999" }, "Phone", h("smoothly-input-reset", { key: '6b86c957cb89fe161fa8161a2be57ffb8635ec39', size: "icon", slot: "end" })), h("smoothly-input-radio", { key: '2685a05dc3914a6bf6192665017fafb987e2dff8', clearable: true, name: "radioFirstInput" }, h("p", { key: 'e3ea61067bf6207dcd68f03a66c6c2dd9d3fcc18', slot: "label" }, "Clearable"), h("smoothly-input-radio-item", { key: 'e330713067182512e3d4583aac527b7c935d632a', slot: "options", value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '5d77211e3a89a41003541a1df24cfeff9a6cbfd7', selected: true, slot: "options", value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: 'e987f5290b7d9c2241f64195896e4acf0a81badb', slot: "options", value: "third" }, "Label 3")), h("smoothly-input-color", { key: '451d554d11394e6ad9e61597d2820186cded8a13', name: "color", value: "#479f56", output: "rgb" }, "Color"), h("smoothly-input-select", { key: 'e96286811c16784e955edeace957893013638777', menuHeight: "7.5items", placeholder: "Select...", multiple: true, name: "select-month" }, h("label", { key: 'f39108e6072b31d3314b19519eb3c3b4774a6abc', slot: "label" }, "Month"), h("smoothly-item", { key: 'cd67170179927293f5bdf30777fad9513a90f8d2', value: "1" }, "January"), h("smoothly-item", { key: '351d10451f722d9460c87fa63620e8dc5c96dc8b', value: "2" }, "February"), h("smoothly-item", { key: '1088cde11aca189350f24c250cd3c9b246ce3b43', value: "3" }, "March"), h("smoothly-item", { key: '5084a9bca750bdcf14d169a9e76e7d17b58efdc3', value: "4" }, "April"), h("smoothly-item", { key: '345e1b9d542a599f80cc585288f0628a1c399364', value: "5" }, "May"), h("smoothly-item", { key: 'da79f1e2e06e936e519973e0bbe816912aabcbe2', value: "6" }, "June"), h("smoothly-item", { key: 'c23d8e2a24e5cad601f4c9bcdfa87a132898a560', value: "7" }, "July"), h("smoothly-item", { key: 'ba869711f6a193c2330457dde49f5ff55f2feeb4', value: "8" }, "August"), h("smoothly-item", { key: '748c0791743707bd5faccf7671fe8cac1ab17adc', value: "9" }, "September"), h("smoothly-item", { key: '6b62a2efbf23938d41b887b216d2595b9f02ca13', value: "10" }, "October"), h("smoothly-item", { key: '76dc99a8f8e681ebb853023cabde80fbce106fed', value: "11" }, "November"), h("smoothly-item", { key: '4982c0da0f74f201a0a9bb9a8605059eb0c658fa', value: "12" }, "December"), h("smoothly-input-clear", { key: '8e813be64561c6200a2b50f2540e3c301a64fa89', size: "icon", slot: "end" })), h("smoothly-input-select", { key: '8a3bb885cede296276d57be6e93369fb93ff3824', name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { key: '6f5ebe69f456c7505a90dc557eb05b3266ce6539', value: "folder", selected: true }, h("smoothly-icon", { key: '2b925e79df654dbedad88185028036fe01888109', size: "small", name: "folder-outline" })), h("smoothly-item", { key: '28ee65f30dbd38136d61da521fdd41f93c9aef8e', value: "camera" }, h("smoothly-icon", { key: 'b90d15ddab5a8b4d12be892f6ecd117bf064b6be', size: "small", name: "camera-outline" }))), h("smoothly-input-checkbox", { key: 'b998dc4a72e202dea374f2e91b1f9b44ade32769', name: "checkbox" }, "Check the box"), h("smoothly-input-checkbox", { key: '31c1d90733bb276403108a46c514b7d00e45b46d', name: "checkbox2", checked: true }, "Check the box 2"), h("smoothly-input-date-range", { key: '8f2e8242620b8ff7379697bc510e41dd2b9a9397', start: isoly.Date.now(), end: isoly.Date.now() }), h("smoothly-input-date", { key: 'b45458ce18a1f0cfd9c07e3ec6ecd1eb71effddb', name: "date" }, "Date", h("smoothly-input-clear", { key: '371bd8d4118dc0ed604dec0a77c6c00ce0603386', slot: "end" })), h("smoothly-input-range", { key: '51a3bc8344d72cce05d3564f7d1b355bc3c0fdf1', step: 1, name: "range3", value: 20000 }, "Select"), h("smoothly-input", { key: '9e74939a48e22278b7b37b96b8fbef054b998893', name: "pets.0.name" }, "First Pet's Name"), h("smoothly-input-range", { key: '97d1c06f581a78765678e115d61c14f74e74b29d', name: "pets.0.age", max: 100, step: 1 }, "First Pet's Age"), h("smoothly-input", { key: '6c3de8e3023724e34d98da9a85aacc4851b9b6ca', name: "pets.1.name" }, "Second Pet's Name"), h("smoothly-input-range", { key: '62d2615b31651f36ae5f8dae5242d3b5d22a7852', name: "pets.1.age", max: 100, step: 1 }, "Second Pet's Age"), h("smoothly-input", { key: 'bdc58c28a7cd33516f403da7fec2689482862dce', name: "pets.2.name" }, "Third Pet's Name"), h("smoothly-input-range", { key: '625410b8c74c8f41926c8b65fe2d0516b914033b', name: "pets.2.age", max: 100, step: 1 }, "Third Pet's Age"), h("smoothly-input-file", { key: '726a9fe71325cb838f5e3913e6df3b656a98aa46', name: "profile", placeholder: "Click or drag your profile picture here..." }, h("span", { key: '375273e7f3efd04dc6f6cce4796157c6a806c8d5', slot: "label" }, "Profile"), h("smoothly-icon", { key: '3e422ace57df9960be4bb08c6fbb4cb156700b63', slot: "button", name: "person-circle-outline", size: "tiny", fill: "default" })), h("smoothly-input-clear", { key: 'df252e105ba1f4d8123c8f72428f48a413f3ecd0', fill: "default", type: "form", color: "warning", slot: "clear", size: "icon", shape: "rounded" }), h("smoothly-input-edit", { key: 'eb39bcda1e6b17e932d4ee4e1041f6e8ad493aac', fill: "default", type: "form", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), h("smoothly-input-reset", { key: '246a778c2e95db5f44634d32c1b2c64e21a302fb', fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { key: '17748f8e0ad3a679cddf927535f5b5f8885f8b10', delete: true, slot: "delete", color: "danger", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { key: '5f0dcbf6a1f5ab54cebf5a0fe2141c52307af4a7', fill: "default", color: "success", slot: "submit", size: "icon", shape: "rounded" }))));
+        return (h(Host, { key: '10b593f084bfba8b6bae2c80e25032f8bfebf89d' }, h("h2", { key: 'd1fb2435b6ab956d1a1e41f7b889bfb1d4458d19' }, "All inputs"), h("smoothly-form", { key: '90613d1d1030240fc973f57c5ec835722b6dcf16', looks: "grid", readonly: true, action: "https://api.toiletapi.com/6b12fd2f-e896-46f9-b38f-25cf42cee4b4" }, h("smoothly-input", { key: '2e9c84db6cbc753af0f899408ebddcad7488b239', readonly: true, name: "First Name", value: "John" }, "First name"), h("smoothly-input", { key: '008538407fcb824401d30cbd369978f1493dfe37', name: "Last name", value: "Doe" }, "Last name", h("smoothly-input-clear", { key: 'ba0c3efe4b64a40e3befec00b4ce3d70cc7c5b8b', size: "icon", slot: "end" })), h("smoothly-input", { key: 'b296fc689acde789a6e234200de07129d0fe126c', type: "phone", name: "Phone", value: "777888999" }, "Phone", h("smoothly-input-reset", { key: '32f2a5d4b29b1675cb1a6ddb46021eef8881ec39', size: "icon", slot: "end" })), h("smoothly-input-radio", { key: '54412070a2783b4505066fb1b8c5287d8bcda05b', clearable: true, name: "radioFirstInput" }, h("p", { key: '4de14c44ebeeca6180aaaebd963f779ad5a8388f', slot: "label" }, "Clearable"), h("smoothly-input-radio-item", { key: 'a7219fcefa566821ac081afb25ef56e9abd7c2dc', slot: "options", value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '80ee4a0d8abd2acc0fe4059804af976fb2a01293', selected: true, slot: "options", value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: 'e1fe95069556daa400d17c9f4bbacdaf4281d497', slot: "options", value: "third" }, "Label 3")), h("smoothly-input-color", { key: '7bc5367d04f85b00716a8d2d8a6dd4d72ab7a05d', name: "color", value: "#479f56", output: "rgb" }, "Color"), h("smoothly-input-select", { key: '9f8310aba9f717da51ef41a4e75a486b9c0ca878', menuHeight: "7.5items", placeholder: "Select...", multiple: true, name: "select-month" }, h("label", { key: 'd42ce059112550ce32da552f8c7355f9d95d98eb', slot: "label" }, "Month"), h("smoothly-item", { key: 'e794eccf7831c7168c7c15f2e1050c52590a3353', value: "1" }, "January"), h("smoothly-item", { key: '568c857360fa631fdc9242a90831ea1023024972', value: "2" }, "February"), h("smoothly-item", { key: '4d60b4d2fb1b4700d9975f4f66933836ac81832b', value: "3" }, "March"), h("smoothly-item", { key: 'b20d5b365c8f68ed62f7066c9e82ad523ce33785', value: "4" }, "April"), h("smoothly-item", { key: '5606f83bfb31d613177749d29ba5350be81a8fcf', value: "5" }, "May"), h("smoothly-item", { key: '3dbbf060dde6e066e6c2561150b7637b1fe7f027', value: "6" }, "June"), h("smoothly-item", { key: '89da7a0f64ce6eb16c5c53ece0f2e62dc5721156', value: "7" }, "July"), h("smoothly-item", { key: '8afc1192bd23b5136854cd6717cf8e9fc7f4f7bf', value: "8" }, "August"), h("smoothly-item", { key: '776cf40a1a87bdac4fad827a684b3f48d36b9ce4', value: "9" }, "September"), h("smoothly-item", { key: '953e77db5fa54c9120fa3c5dd727d423e6533df8', value: "10" }, "October"), h("smoothly-item", { key: '85a2e0583c52dec1a2c924ab66da038c054c929e', value: "11" }, "November"), h("smoothly-item", { key: '63a9e234b7f9cde1b036f318fb5c0dd7a2114d62', value: "12" }, "December"), h("smoothly-input-clear", { key: 'adf55cc7af2ee3f31434569e6c97c8cd9943cbc7', size: "icon", slot: "end" })), h("smoothly-input-select", { key: '0259cd6a275181848b6877f8135599703ff5fdbe', name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { key: 'b2d5619aa47a0eb8eab6d0401c18cc038a79996d', value: "folder", selected: true }, h("smoothly-icon", { key: '5296365a8a4d0abe9357d0d383356e612e82bae2', size: "small", name: "folder-outline" })), h("smoothly-item", { key: '7f43e4002c3a2bb801b5c95aeb80b86951c48c00', value: "camera" }, h("smoothly-icon", { key: '2f381cb3ad8b4ecb27fa4308b2ac736263357d9c', size: "small", name: "camera-outline" }))), h("smoothly-input-checkbox", { key: '6b616cf5ddd4d0fa85909cedc1aa2f29522d3870', name: "checkbox" }, "Check the box"), h("smoothly-input-checkbox", { key: '83d71865567648d6250c8c17428fa13a3671f3a0', name: "checkbox2", checked: true }, "Check the box 2"), h("smoothly-input-date-range", { key: '7c773d82eab8d4840db92f6c80c5ec0ed15508a6', start: isoly.Date.now(), end: isoly.Date.now() }), h("smoothly-input-date", { key: '7c826477335785771e0e9cf82535974f57dac774', name: "date" }, "Date", h("smoothly-input-clear", { key: '8b2f71ffce261fda1b19ce691fe00f772b36f477', slot: "end" })), h("smoothly-input-range", { key: 'df376f29f6c5a34451016e7c1f2d4be64dc96f69', step: 1, name: "range3", value: 20000 }, "Select"), h("smoothly-input", { key: '990b7ceb7acad59e3b283d2b9f4d0a7cc16a33bb', name: "pets.0.name" }, "First Pet's Name"), h("smoothly-input-range", { key: 'e0e2134aa0d0ecd2ba71c404474ea9440eefd48b', name: "pets.0.age", max: 100, step: 1 }, "First Pet's Age"), h("smoothly-input", { key: 'a21caf4968868b89238f66e15365d962ea8054d1', name: "pets.1.name" }, "Second Pet's Name"), h("smoothly-input-range", { key: '82426e22efd211781ef035ef3b6f87919d8aacc4', name: "pets.1.age", max: 100, step: 1 }, "Second Pet's Age"), h("smoothly-input", { key: 'a0b050a71ee0f8e91c7b3b1f14da556524981d07', name: "pets.2.name" }, "Third Pet's Name"), h("smoothly-input-range", { key: '99056a74c404f8c3a51013407d344981392f7f91', name: "pets.2.age", max: 100, step: 1 }, "Third Pet's Age"), h("smoothly-input-file", { key: 'd67e67c5ab0251bee48042b319af3417bc5287c2', name: "profile", placeholder: "Click or drag your profile picture here..." }, h("span", { key: '4a5923b6b1423c293f722f1cb8c124d3a762e264', slot: "label" }, "Profile"), h("smoothly-icon", { key: 'e3e352b1b27e28681203f1174e70fd8cb87380f2', slot: "button", name: "person-circle-outline", size: "tiny", fill: "default" })), h("smoothly-input-clear", { key: '3c33d1b6bdd5ce12b4a2bf3349319ae740515c80', fill: "default", type: "form", color: "warning", slot: "clear", size: "icon", shape: "rounded" }), h("smoothly-input-edit", { key: '91063cb06f5c3686ed471dfae9f145ba8ee5f699', fill: "default", type: "form", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), h("smoothly-input-reset", { key: 'f5425341ad97afd73e7298c83da789099a2d02be', fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { key: '9ec02acf768fd6515008fa5a8175981708d4eb97', delete: true, slot: "delete", color: "danger", size: "icon", shape: "rounded" }), h("smoothly-input-submit", { key: '5302e168ffea2b6a628b747e921a40bbab957cb5', 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

@@ -60,7 +60,7 @@ export class SmoothlyInputCheckbox {
         !this.disabled && !this.readonly && (this.checked = !this.checked);
     }
     render() {
-        return (h(Host, { key: '7e9d8f10f1bb4607a3d6d01667ce46b8ab4863d6', onMouseDown: (e) => (this.mouseDownPosition = { x: e.clientX, y: e.clientY }), onMouseUp: (e) => { var _a; return ((_a = this.mouseDownPosition) === null || _a === void 0 ? void 0 : _a.x) == e.clientX && this.mouseDownPosition.y == e.clientY && this.click(); } }, h("input", { key: 'fdc900044c63fe533744d5176893e9a8bcd6591d', type: "checkbox", checked: this.checked }), this.checked && h("smoothly-icon", { key: '7a2c0e280b1e8455c87f717ac87b044bc5746b2b', name: "checkmark-outline", size: "tiny" }), h("label", { key: '9772a8094fa5f788859098f5eb4aca41149d9727' }, h("slot", { key: '050412eef281c0e64980baf7c1b4bae7b835d9b0' }))));
+        return (h(Host, { key: '99d1fd7c03341e1f006d3e93528b3774b7e26644', onMouseDown: (e) => (this.mouseDownPosition = { x: e.clientX, y: e.clientY }), onMouseUp: (e) => { var _a; return ((_a = this.mouseDownPosition) === null || _a === void 0 ? void 0 : _a.x) == e.clientX && this.mouseDownPosition.y == e.clientY && this.click(); } }, h("input", { key: 'e31ef4946a26c9d7dfc36a72e368cd882e8ddfc8', type: "checkbox", checked: this.checked }), this.checked && h("smoothly-icon", { key: '01d2fc86042120ed14744240048b0d86b3ea6b2e', name: "checkmark-outline", size: "tiny" }), h("label", { key: '0064444ff31f2fa701744532c5341c631ef8c60b' }, h("slot", { key: '8e0c6756be0053328b93f3ae6ba9b99b3bbd1691' }))));
     }
     static get is() { return "smoothly-input-checkbox"; }
     static get encapsulation() { return "scoped"; }

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

@@ -39,7 +39,7 @@ export class SmoothlyInputClear {
     }
     render() {
         var _a;
-        return (h(Host, { key: '17668319b54cc454ef29fda2fdef56f9718d1ce8', title: this.tooltip }, h("smoothly-button", { key: 'f1334ad4a05dba52ce919945a9648882eb7d94f2', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined) }, h("slot", { key: '8699712b8661a46231822acfa57fdd15a811b9af' }), h("smoothly-icon", { key: '050e6cc18db2f64bff841a4465b420de3df156c9', name: "close", size: "tiny" }))));
+        return (h(Host, { key: 'c2fef10f6a93c77be53cd2cbb68ad5cb248ff111', title: this.tooltip }, h("smoothly-button", { key: '36519257ceb0a390edbb5efb03f93bda9817e1c0', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined) }, h("slot", { key: '9626ceb7c5b85fe073768c4066190c1312914cee' }), h("smoothly-icon", { key: '0b6bd22cd03a708f555491ac7e66ebddbfb871aa', name: "close", size: "tiny" }))));
     }
     static get is() { return "smoothly-input-clear"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class SmoothlyInputColorDemo {
     render() {
-        return (h(Host, { key: '233cd244e8fbd24d8d36b67afc5e32c74f9c84e9' }, h("h2", { key: 'd3245bbee2dd2b9af5218bb81433138ca9cef085' }, "Color"), h("smoothly-input-color", { key: 'de7d138d123d61aaf0404b64404f335d399423ec', name: "color" }, "Choose color")));
+        return (h(Host, { key: '6a345592a635a49d5c9bd4fa7cbce4d9bb31c1a3' }, h("h2", { key: '43f287ca8e468b9375be66b2d67b7216473dcf07' }, "Color"), h("smoothly-input-color", { key: 'ebb416f1268f49d83ace12f1720ea8871d679f91', name: "color" }, "Choose color")));
     }
     static get is() { return "smoothly-input-color-demo"; }
     static get styles() { return "style.css"; }

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

@@ -138,7 +138,7 @@ export class SmoothlyInputColor {
     }
     render() {
         var _a, _b, _c, _d, _e, _f;
-        return (h(Host, { key: '06ccbfbb8103fb4157b7aab79cdd4b275b477bc0', style: {
+        return (h(Host, { key: '670a7476f048858e2383bf790be29662c2b9d6e8', style: {
                 "--hexCode": this.value,
                 "--rgb-r": `${Math.round((_a = this.rgb.r) !== null && _a !== void 0 ? _a : 0)}`,
                 "--rgb-g": `${Math.round((_b = this.rgb.g) !== null && _b !== void 0 ? _b : 0)}`,
@@ -147,7 +147,7 @@ export class SmoothlyInputColor {
                 "--hsl-s": `${Math.round((_e = this.hsl.s) !== null && _e !== void 0 ? _e : 0)}%`,
                 "--hsl-l": `${Math.round((_f = this.hsl.l) !== null && _f !== void 0 ? _f : 0)}%`,
                 "--element-height": `${this.element.clientHeight}px`,
-            } }, h("smoothly-input", { key: 'c010412a9135a0a2ea6b4c766260fc0f720eaf5b', value: this.value, name: this.name, looks: undefined, color: this.color, type: "hex-color", showLabel: this.showLabel, readonly: this.readonly, onSmoothlyInput: event => (event === null || event === void 0 ? void 0 : event.stopPropagation(), this.hexInputHandler(event.detail[this.name])) }, h("slot", { key: 'c28a3ec9985cefd718787b74c30f8434ac07ad5c' })), h("div", { key: '6ef1c860d2d6431fccea0aebaad5d930753cd9af', class: "color-sample" }), h("smoothly-icon", { key: '9184753b181267e611d19c51709aa1c233fc89dc', color: this.color, name: "options-outline", size: "small", onClick: () => !this.readonly && this.openDropdown() }), h("div", { key: '85be89a51fb536882133d724d81d8d29d794e1aa' }, h("slot", { key: 'd44ffd1cabe83efb3f1a727710737ff1c75bcb28', name: "end" })), this.open && !this.readonly && (h("div", { key: 'e4fd1fd66897f84c7b82b594cdc4afa794c245c1', class: "rgb-sliders" }, h("smoothly-toggle-switch", { key: '2b8ab54580f8a96a72ee6b762616b061d2782d73', title: `${this.sliderMode === "rgb" ? "To HSL" : "To RGB"}`, onSmoothlyToggleSwitchChange: event => this.handleSwitchMode(event), size: "tiny", checkmark: false, selected: this.sliderMode === "hsl" }), Object.entries(this.rgb).map(([key, value]) => (h("smoothly-input-range", { style: this.sliderMode != "rgb" ? { display: "none" } : {}, name: key, min: 0, max: 255, color: undefined, type: "text", value: value, step: 1, outputSide: "right", onSmoothlyInput: event => this.sliderInputHandler(event), label: key.toUpperCase() }))), Object.entries(this.hsl).map(([key, value]) => (h("smoothly-input-range", { style: this.sliderMode != "hsl" ? { display: "none" } : {}, name: key, min: 0, max: key === "h" ? 359 : 1, color: undefined, type: key === "s" || key === "l" ? "percent" : "text", value: (key === "s" || key === "l") && value ? value / 100 : value, step: key === "s" || key === "l" ? 0.01 : 1, outputSide: "right", onSmoothlyInput: event => this.sliderInputHandler(event), label: key.toUpperCase() })))))));
+            } }, h("smoothly-input", { key: '335e0d548863c95bd9ea825b96f6e44b87e088ed', value: this.value, name: this.name, looks: undefined, color: this.color, type: "hex-color", showLabel: this.showLabel, readonly: this.readonly, onSmoothlyInput: event => (event === null || event === void 0 ? void 0 : event.stopPropagation(), this.hexInputHandler(event.detail[this.name])) }, h("slot", { key: 'b0dd625eb8c4a8a1d390b0f16fcf04ff3b0f3a20' })), h("div", { key: '9c2dd79e29f239ed5ae725a5277897b6f1390c0e', class: "color-sample" }), h("smoothly-icon", { key: '1f197df4c01bc228698f6a397f4bb6c659a30e9d', color: this.color, name: "options-outline", size: "small", onClick: () => !this.readonly && this.openDropdown() }), h("div", { key: '1cdf0dde9a954956d406ac8df83911c3f412a7c5' }, h("slot", { key: '0bc12b808f76f1f4c05ef072d6fb51fe7ffffdac', name: "end" })), this.open && !this.readonly && (h("div", { key: '3994288cb82a9596fdd9efb022f8270326cd8e39', class: "rgb-sliders" }, h("smoothly-toggle-switch", { key: '640004c0237e5fc60edf66b413df444c8412c70b', title: `${this.sliderMode === "rgb" ? "To HSL" : "To RGB"}`, onSmoothlyToggleSwitchChange: event => this.handleSwitchMode(event), size: "tiny", checkmark: false, selected: this.sliderMode === "hsl" }), Object.entries(this.rgb).map(([key, value]) => (h("smoothly-input-range", { style: this.sliderMode != "rgb" ? { display: "none" } : {}, name: key, min: 0, max: 255, color: undefined, type: "text", value: value, step: 1, outputSide: "right", onSmoothlyInput: event => this.sliderInputHandler(event), label: key.toUpperCase() }))), Object.entries(this.hsl).map(([key, value]) => (h("smoothly-input-range", { style: this.sliderMode != "hsl" ? { display: "none" } : {}, name: key, min: 0, max: key === "h" ? 359 : 1, color: undefined, type: key === "s" || key === "l" ? "percent" : "text", value: (key === "s" || key === "l") && value ? value / 100 : value, step: key === "s" || key === "l" ? 0.01 : 1, outputSide: "right", onSmoothlyInput: event => this.sliderInputHandler(event), label: key.toUpperCase() })))))));
     }
     static get is() { return "smoothly-input-color"; }
     static get encapsulation() { return "scoped"; }

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

@@ -78,13 +78,13 @@ export class SmoothlyInputDate {
         event.stopPropagation();
     }
     render() {
-        return (h(Host, { key: '537241a6d277b3d97892e6d2a6e7785d1445dd21' }, h("smoothly-input", { key: 'd6b4712b11564007b357279d0ef6353353f2ead2', color: this.color, looks: this.looks == "transparent" ? this.looks : undefined, name: this.name, onFocus: () => !this.readonly && (this.open = !this.open), onClick: () => !this.readonly && (this.open = !this.open), readonly: this.readonly, invalid: this.invalid, type: "date", value: this.value, showLabel: this.showLabel, onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
+        return (h(Host, { key: '57449661e55d63d143b194d62df4171e03b194a3' }, h("smoothly-input", { key: '306bb8ce36b5e7834699eb945b082b447a244a9b', color: this.color, looks: this.looks == "transparent" ? this.looks : undefined, name: this.name, onFocus: () => !this.readonly && (this.open = !this.open), onClick: () => !this.readonly && (this.open = !this.open), readonly: this.readonly, invalid: this.invalid, type: "date", value: this.value, showLabel: this.showLabel, onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
                 e.stopPropagation();
                 this.value = e.detail[this.name];
-            } }, h("slot", { key: '9b353cf3658a2017a6fdf44ea00853c8cf22958e' })), h("span", { key: 'b2d0c1951f0a6c92f8ec7b48a1b049eddc16208d', class: "icons" }, h("slot", { key: '4d1f3d6771d6ee0ea13a7d709740b76350a9ac00', name: "end" })), this.open && !this.readonly && (h("nav", { key: '33fe4e270a7dd48a48a66205342e79c9cf505e22' }, h("smoothly-calendar", { key: '2084bd5d0ef9575c45f2e52504c5bef6a076dba2', doubleInput: false, value: this.value, onSmoothlyValueChange: event => {
+            } }, h("slot", { key: '3277e1e95cf3e371a29e25d44accfea79a6a6ca5' })), h("span", { key: '60daa00cbbf4afef50cfda2a5db9647981e1372b', class: "icons" }, h("slot", { key: '9b20a8d21cc5497f9617ed6dc106cb2e9b44e4cc', name: "end" })), this.open && !this.readonly && (h("nav", { key: '6cdb787d6ba2d2bfdb5da488986ecb8da84927bb' }, h("smoothly-calendar", { key: '41972f350405eacc0d2f726e24d81968bb1b611c', doubleInput: false, value: this.value, onSmoothlyValueChange: event => {
                 this.value = event.detail;
                 event.stopPropagation();
-            }, max: this.max, min: this.min }, h("div", { key: 'c6c5f4e7f6c4d840251e360667154deb2ea4d1f8', slot: "year-label" }, h("slot", { key: 'e1ed184a3b88e62306ff446d4484ff1b44dde2d3', name: "year-label" })), h("div", { key: '89136139b0624ea7f160615ad12e7f66ae83d0bb', slot: "month-label" }, h("slot", { key: '6a4ba7bacf62d96fc09ed3fb8aa28dcc071504f5', name: "month-label" })))))));
+            }, max: this.max, min: this.min }, h("div", { key: 'c9ca20ed5c818887ea7ba619db55ebb78bc9082d', slot: "year-label" }, h("slot", { key: 'd33a0714715e677a3fbc6b9843038d5114c55862', name: "year-label" })), h("div", { key: '32b23e3d8996d3d16f1f09e642fbf6fb6853efda', slot: "month-label" }, h("slot", { key: '563f5174260311dbe25962ec0673f66f9c9a3fe0', name: "month-label" })))))));
     }
     static get is() { return "smoothly-input-date"; }
     static get encapsulation() { return "scoped"; }

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

@@ -91,12 +91,12 @@ export class SmoothlyInputDateRange {
     }
     render() {
         const locale = navigator.language;
-        return (h(Host, { key: '2e8c505b46587906c275c87e0af9632050377e6f', tabindex: 0 }, h("section", { key: '56f3f315fa60e4b6d7230697901f3d34a60fe6b1', onClick: () => !this.readonly && (this.open = !this.open) }, h("smoothly-input", { key: '09e0e316a5f498ea0fe99cb0ca12a5033dccba3c', type: "text", name: "dateRangeInput", readonly: this.readonly, value: this.start && this.end
+        return (h(Host, { key: '10617daa1231da0652830f0a4c123429812de8a0', tabindex: 0 }, h("section", { key: '7e2d1cf85c16d258b415ac53be0d94ab39d6191d', onClick: () => !this.readonly && (this.open = !this.open) }, h("smoothly-input", { key: '89a82d7674433af8cfb2c82137ac02006ded2d1b', type: "text", name: "dateRangeInput", readonly: this.readonly, value: this.start && this.end
                 ? `${tidily.format(this.start, "date", locale)} — ${tidily.format(this.end, "date", locale)}`
                 : undefined, invalid: this.invalid, placeholder: this.placeholder, showLabel: this.showLabel, onSmoothlyInput: e => {
                 e.stopPropagation();
                 this.inputHandler(e.detail);
-            } }, h("slot", { key: 'e5d92bba332e29de53485e20959337fbb1abdc8b' }))), h("span", { key: '2d9f1b56e86db064fcc04bffc1176e768218fda7', class: "icons" }, h("slot", { key: '935f6453d1e7c21a436f0bd0ddec0514ae220888', name: "end" })), this.open && (h("nav", { key: '88e6a8897b3f3de8f438449c4086a867d04af7df' }, h("smoothly-calendar", { key: 'fb70147730585f846df931e06fa658934b926c66', doubleInput: true, onSmoothlyValueChange: e => e.stopPropagation(), onSmoothlyStartChange: e => {
+            } }, h("slot", { key: '1db498c4190f6154db7f89ceb0bacc4c70034b05' }))), h("span", { key: '86290b59033e9565a969aa8cef3a75800b51439e', class: "icons" }, h("slot", { key: '803e5b3556ff808be5bbd0a7f892663d36b2cf6f', name: "end" })), this.open && (h("nav", { key: '790f4a4ab812fae1fd037c7cf831d0f4cea0e5cd' }, h("smoothly-calendar", { key: '956867c0184cd71d3e23b02af8a5c95e2a10e886', doubleInput: true, onSmoothlyValueChange: e => e.stopPropagation(), onSmoothlyStartChange: e => {
                 e.stopPropagation();
                 this.start = e.detail;
             }, onSmoothlyEndChange: e => {

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

@@ -6,14 +6,14 @@ export class SmoothlyInputDemo {
         this.alphanumeric = "!@##";
     }
     render() {
-        return (h(Host, { key: '2246e64ca0039a593a5e79c1b3cbec9f6cb61cd2' }, h("smoothly-input-demo-standard", { key: '2b37d1d772346558fc9877495c98ec484e443d24' }), h("div", { key: '989abdad396917b2bdfe9bc11140a1293546ac5c', class: "inputs" }, h("h2", { key: 'dcf89a34ee6e6397e5f714121724ef563dd3fd28' }, "Calendar"), h("smoothly-input-date", { key: '8e65b556c3fcf1a39323dd3a33d12a30b81e1dcd', name: "some-date" }, "Calendar"), h("h2", { key: '3cb4035f84892162377f96c19ee73680e03125d0' }, "Date Range"), h("smoothly-input-date-range", { key: 'c896e3bd9e37dbfb151be77e2c27703e0e6a2230', name: "testing", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-01", max: "2025-01-31" }), h("smoothly-input-date-range", { key: '40038ceb1fa825b4b690f68541a0f51f594899fc', name: "testing", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-10", max: "2024-12-30" }, h("smoothly-input-reset", { key: '8c390691d230f83b3198d6b55320777570f5f583', slot: "end", size: "icon" })), h("smoothly-input-date-range", { key: 'ff17e15193315eb5f8114f30a926a9ecd04e989c', looks: "grid", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-10", max: "2025-12-30", showLabel: false, style: {
+        return (h(Host, { key: '51f4aee40c6d4fd30250a99a33a4c871dbee07df' }, h("smoothly-input-demo-standard", { key: 'ac59b052dfc234d46b5d7ebeef5b6854ecef440e' }), h("div", { key: '4ddfea7ef3c9fecc5bf78fe7722c80c2f8fd909e', class: "inputs" }, h("h2", { key: 'e2351bb6192e23f3fe206eb127d8a5cff5b8a3b1' }, "Calendar"), h("smoothly-input-date", { key: '64cc4d64b575a915b96fe4f4320aa0e6e50c5878', name: "some-date" }, "Calendar"), h("h2", { key: 'e6c93ff26dd6ddf0c20decaac5afe5f2b4a3ddfb' }, "Date Range"), h("smoothly-input-date-range", { key: '57cc830b6f2b02b4fabb3ae963c218bd532ba433', name: "testing", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-01", max: "2025-01-31" }), h("smoothly-input-date-range", { key: 'fdaf5c97a3e958a1711e3a72df10d26f049b4b06', name: "testing", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-10", max: "2024-12-30" }, h("smoothly-input-reset", { key: 'fc80bf6ef0faf3bc501bbc3e235a1990e0a9f8ea', slot: "end", size: "icon" })), h("smoothly-input-date-range", { key: '3e761321bcfcfd824e657f7eee0bb6d2e78e485e', looks: "grid", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-10", max: "2025-12-30", showLabel: false, style: {
                 "--smoothly-input-border-radius": "0.5rem",
-            } }, h("smoothly-input-clear", { key: '011f43052221a7c6f3ef33f500bcfba46608c841', slot: "end", size: "icon" })), h("h2", { key: 'd791ba4122393a98eb6d81306e291412054e3b23' }, "Date"), h("smoothly-input-date", { key: 'ee353162eccaa90c518ef9190a5457228b50a6da' }, "Date"), h("smoothly-input-date", { key: 'ab3c9d81356be6e50d1c3d55ebfc0d9590884e0d', showLabel: false, value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), h("smoothly-input-date", { key: '660520a7d8dc088129ee8675b418f80580369c84', value: "2021-10-28" }, "Date", h("smoothly-input-reset", { key: 'b41ed6b1f2d86a014bbc8814ae3af5f2bf73a179', slot: "end", size: "icon" })), h("smoothly-input-date", { key: '689789eb3bdd96e5d8bb592ecc54a46809dc571d', value: "2021-10-28" }, "Date", h("smoothly-input-clear", { key: 'c84ce2579bd57ec36bab8936b9260516dfbff578', slot: "end", size: "icon" })), h("h2", { key: 'e9d4a3630cd7dfbc15496d326842036b89b779ed' }, "Select"), h("div", { key: '73b5029be3bcb583ae7acd529c3360ae490f6ab8', class: "select-div" }, h("smoothly-input-select", { key: 'b2bd70fa2d9db0949de37384281cefa5f733e607', name: "select-dessert", looks: "border" }, h("label", { key: '9e876f17a3d8fd4c9dd8df5f36537cbd5ed26cab', slot: "label" }, "Select with clear button"), h("smoothly-item", { key: '99bb1a1be67495f593aab6217417989ae138338f', value: "1" }, "Ice cream"), h("smoothly-item", { key: '4ddecda514f630ede33ff1fedcdca479ab1f365a', value: "2" }, "Sponge cake"), h("smoothly-item", { key: 'edcd18711aa60bd585bb35684bf4335be079534e', value: "3", disabled: true }, "Disabled Item"), h("smoothly-item", { key: '193c1b1a166cab555df2e0738a6dbf7d002a68c6', value: "4" }, "Cookie"), h("smoothly-item", { key: '148b0f60bec0b9afd7611301d47ff3cbda1bd60e', value: "5" }, "Croissant"), h("smoothly-item", { key: '4c19e2ddcf1a804aaf2fc5f0c836c87f1c63536f', value: "6" }, "Chocolate fondue"), h("smoothly-input-clear", { key: '7fdc91054fc6694b3d9ed28fe58bbeb4ac7f3166', size: "icon", slot: "end" })), h("smoothly-input-select", { key: '1dc6118a2716448a03a71c9004e37bd281a04fd8', multiple: true, name: "select-dessert-multiple", looks: "border" }, h("label", { key: '1c9aad56585335964fb6fbdbb322155aed1d8293', slot: "label" }, "Select multiple with reset button"), h("smoothly-item", { key: '1dcc6d0ae6890c8faf6fbd383d7cb49cffb4195d', value: "ice cream" }, "Ice cream"), h("smoothly-item", { key: '4928df31718469ae0a122b196d2da6049e08e27d', value: "sponge cake" }, "Sponge cake"), h("smoothly-item", { key: '804e3d867fdee5b41a691fefb18e1e0c1efa675d', selected: true, value: "cookie" }, "Cookie"), h("smoothly-item", { key: '47e18869a33e35c711b0af238c711c49a74a2f00', value: "croissant" }, "Croissant"), h("smoothly-item", { key: '2141bd943ddc5f23bd2e5d5340fe1c056b733767', selected: true, value: "chocolate fondue" }, "Chocolate fondue"), h("smoothly-input-reset", { key: '383060f11d35eaff155b922d0b4b2d7461d3ccf1', size: "icon", slot: "end" })), h("smoothly-input-select", { key: '997c4890240d191098f752d9a608f292f5e4285e', name: "spirit-animals", looks: "border", mutable: true }, h("label", { key: '4e4941d8eb6bbf6290283a71d88ef63cdabed4b4', slot: "label" }, "Select or add new options"), h("smoothly-item", { key: 'c5b5bdcdd54a7b3f53807b2c91deb0eacc4df76c', value: "manatee" }, "Manatee"), h("smoothly-item", { key: '7b984ebe49e44df568bf8afa71ac316f55c930aa', selected: true, value: "cthulu" }, "Cthulu")), h("smoothly-input-select", { key: 'ceb8e73087957269cb47bb09552a5972dcc83da7', name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { key: 'dc9c4ba90d0ee6c4158abf3cddede72bd04e71d1', value: "folder", selected: true }, h("smoothly-icon", { key: 'edfbf4fa6aafe1588e5f3d805949f837f1e9cfbc', size: "small", name: "folder-outline" })), h("smoothly-item", { key: 'f46beb751b4e5394ca24fed76addc9a7931fa382', value: "camera" }, h("smoothly-icon", { key: '8b976d68da995707e36ff599f81343b9028bce45', size: "small", name: "camera-outline" }))), h("smoothly-input-select", { key: 'a92187babd4d365532b86fbbd7fb0f81dc277821', ordered: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { key: 'c03b7c86c8762080854546f7f0257ea7b5e8d488', slot: "label" }, "Alphabet ordered select"), Array.from({ length: 26 })
+            } }, h("smoothly-input-clear", { key: '5498fe9bd23f5f0aa3bc1564677cd8527c3f216d', slot: "end", size: "icon" })), h("h2", { key: 'e1cd9a2f933ace9b8654a16f8a4b63257c0720ea' }, "Date"), h("smoothly-input-date", { key: 'c402077b09b215d29f2a39a2966129b66778bbf6' }, "Date"), h("smoothly-input-date", { key: '348a3b47233f5a297818801d8342f397d985a34d', showLabel: false, value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), h("smoothly-input-date", { key: '34dcb99153c016b5612ff0b94a7e22344ead452e', value: "2021-10-28" }, "Date", h("smoothly-input-reset", { key: '51225d9833f9cff119d70e073d57e22a3c9ab6b7', slot: "end", size: "icon" })), h("smoothly-input-date", { key: 'a8e0d841589a7835b7aa61e73d6f26402375ce02', value: "2021-10-28" }, "Date", h("smoothly-input-clear", { key: '7c30f983577e754c64eddbbcba405ff88ffab967', slot: "end", size: "icon" })), h("h2", { key: 'ed29c97bfa01d94b769f2b5443a34a0ec2cc81f1' }, "Select"), h("div", { key: '3f02595af663b605a0cbf7ff468ad88db47a7d59', class: "select-div" }, h("smoothly-input-select", { key: '6fa227e9ed5b0b7783a02125d449c63e3e7cfeb3', name: "select-dessert", looks: "border" }, h("label", { key: '25fa5c82c38615865eec7d110e6d0dcf44c81a4a', slot: "label" }, "Select with clear button"), h("smoothly-item", { key: 'ac813fdf89c73912582dc5991fb1dc2e2ce1fb14', value: "1" }, "Ice cream"), h("smoothly-item", { key: 'fa5192b5eb35ff78615cdef32c9520d6a6ef76e0', value: "2" }, "Sponge cake"), h("smoothly-item", { key: 'ff645106190846ec3eb20be801aa181bf10fb298', value: "3", disabled: true }, "Disabled Item"), h("smoothly-item", { key: 'b44e0e0890947c152f2bbacb7a2875acbdf54518', value: "4" }, "Cookie"), h("smoothly-item", { key: '861d5923d90ea8b38bdcae05c978c0e00d137917', value: "5" }, "Croissant"), h("smoothly-item", { key: '56ae54fce385dc55783844eec020aa90af651aeb', value: "6" }, "Chocolate fondue"), h("smoothly-input-clear", { key: 'b02a524509e0e4cbfc3a03fb639c83ee27a71850', size: "icon", slot: "end" })), h("smoothly-input-select", { key: '93208005940d683db4dc4f663438aa57c787c0b2', multiple: true, name: "select-dessert-multiple", looks: "border" }, h("label", { key: '7afee6b3ace710bec7f7790fc0d8d153a2e816a0', slot: "label" }, "Select multiple with reset button"), h("smoothly-item", { key: 'fd35e1647fb441226e5f956454297cd9bc561445', value: "ice cream" }, "Ice cream"), h("smoothly-item", { key: '3acddb1b859f8e48fe686662cca517179e5d1a72', value: "sponge cake" }, "Sponge cake"), h("smoothly-item", { key: '961d256786f4edd9171190ae0d458197306929c7', selected: true, value: "cookie" }, "Cookie"), h("smoothly-item", { key: 'cb2aa0a7c2ac196c3a21517e1eb7832346314174', value: "croissant" }, "Croissant"), h("smoothly-item", { key: '0b2b13a5a83f8078b60ba2e0cae32479f208f2bf', selected: true, value: "chocolate fondue" }, "Chocolate fondue"), h("smoothly-input-reset", { key: '32eb07a7229c9f90890057f1a8ae0abc7cb810be', size: "icon", slot: "end" })), h("smoothly-input-select", { key: '48f36f4dc49fd910b3ac5ca9a6920fecde5a4117', name: "spirit-animals", looks: "border", mutable: true }, h("label", { key: '1dc701cc862d2ca1f200f903b15016fac25b7d1a', slot: "label" }, "Select or add new options"), h("smoothly-item", { key: '48327f5013baccf6bbbec4ae3225646d40b96384', value: "manatee" }, "Manatee"), h("smoothly-item", { key: '14b5652ebb2ab2c9f9efe069dc80f9e999297420', selected: true, value: "cthulu" }, "Cthulu")), h("smoothly-input-select", { key: 'ffbebfb60bf5e643c4298395b652e478a1f782e5', name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { key: '6794446769b476efa03e0536bd9d80e8d816be25', value: "folder", selected: true }, h("smoothly-icon", { key: 'bd8c1f88ea016ad705b128eddc0199caa159a64f', size: "small", name: "folder-outline" })), h("smoothly-item", { key: 'e6357d8a92151fb7e8d6a8c38ca3f8f401fbd0db', value: "camera" }, h("smoothly-icon", { key: '253786f8f4c60a8565c40a2b6b316b2bbaa5f72e', size: "small", name: "camera-outline" }))), h("smoothly-input-select", { key: 'a85cabd287125fc7868360e8fc406e2b256d01a6', ordered: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { key: 'db93308d09a47a4b6e394a18395fac5249ee0899', slot: "label" }, "Alphabet ordered select"), Array.from({ length: 26 })
             .map((_, i) => String.fromCharCode(i + 65))
-            .map(char => (h("smoothly-item", { value: char, selected: char == "H" }, char)))), h("smoothly-input-select", { key: '50afad9842162fcd31c852082016e02197670682', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { key: '8979507659fe2ea3bde09d62fcda6b0e0958f8d1', slot: "label" }, "Month multiple select"), h("smoothly-item", { key: 'b5943c4ffa028794ae353751d9f6f54cb9de8729', value: "1" }, "January"), h("smoothly-item", { key: '715dad0e6198ae650b92216671adcb4f55e38595', value: "2" }, "February"), h("smoothly-item", { key: '5e1c9571dd3e85bfbb662d37e332686f2e995c88', value: "3" }, "March"), h("smoothly-item", { key: '035d61411f7338aa13be7cd5a6e3033416c4d7d5', value: "4" }, "April"), h("smoothly-item", { key: 'f01102310093062173127c830235f72c854f3a72', value: "5" }, "May"), h("smoothly-item", { key: '10e7fb2d176bb14e93c5b3c208b559eec05b63b2', value: "6" }, "June"), h("smoothly-item", { key: 'b7e84c66de94608b6435c69a25d7558e93c9f92f', value: "7" }, "July"), h("smoothly-item", { key: '92a1692fb3399e45f6c1daabab735a5151f7cedd', value: "8" }, "August"), h("smoothly-item", { key: 'c69002d6ef0ffec601898f2da9bfb2093f87b131', value: "9" }, "September"), h("smoothly-item", { key: '1ddfa11c9807052c4dfc35b21edc197dbe292534', value: "10" }, "October"), h("smoothly-item", { key: 'bc5927fa54de0dacd80ae937892d5ce0c9a2d435', value: "11" }, "November"), h("smoothly-item", { key: 'a3d0cd6e6c3f348c294d91cb54484f84f9d51ef5', value: "12" }, "December"))), h("h2", { key: 'ad2d4f82623153c04d76dc435ee9b62d02ae2400' }, "Duration"), h("smoothly-input", { key: '4f4cad2567f82920fcb7dd3c66a82b720e0dfbd4', name: "duration", type: "duration", placeholder: "hh:mm", value: this.duration, onSmoothlyInput: e => (this.duration = e.detail.duration) }, "Duration"), h("smoothly-input", { key: 'a00c994eb83ce0d9123d1c07d7a4baf19e8a0a29', name: "duration", type: "duration", value: this.duration, placeholder: "-hh:mm", onSmoothlyInput: e => {
+            .map(char => (h("smoothly-item", { value: char, selected: char == "H" }, char)))), h("smoothly-input-select", { key: '8d5c0b232dd500dd359c0fc8f2b0a92a6a521bcb', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { key: '8b9175106a63bca1ea5bc819d9843773c10d830e', slot: "label" }, "Month multiple select"), h("smoothly-item", { key: 'a7a2c4509f5343103035ad2077e9127bb1228a8d', value: "1" }, "January"), h("smoothly-item", { key: '98831946e62fa33e863884cebc66973122ce82dd', value: "2" }, "February"), h("smoothly-item", { key: '3a64a70c78e4f9eadcb2ee41c580fe7ea7785b24', value: "3" }, "March"), h("smoothly-item", { key: '470ef2574219e5303888cae46466a0f800a11039', value: "4" }, "April"), h("smoothly-item", { key: '98fb61b1abbcc49254c5e507f9e8c5cf6b52b623', value: "5" }, "May"), h("smoothly-item", { key: '763c4cbe3738ae5294441b57f0d787992d119d05', value: "6" }, "June"), h("smoothly-item", { key: '40638da7cf970dfe3a12fc754e9f35735bf525e0', value: "7" }, "July"), h("smoothly-item", { key: '04022676952f4c3bc7c3438805963d2c5f75c757', value: "8" }, "August"), h("smoothly-item", { key: 'b8b87515bf851056dd050662c4fdfe025a68a776', value: "9" }, "September"), h("smoothly-item", { key: 'ba586667d48408aa3d68b344858426463d60bb05', value: "10" }, "October"), h("smoothly-item", { key: '04c17bafc1ce2274ab4e8633ceb47406cc0dc0fe', value: "11" }, "November"), h("smoothly-item", { key: 'd3aa3783f8a743ad95aaafffd5729648c508ff3b', value: "12" }, "December"))), h("h2", { key: 'a9990b1f07ba34b59b12bd54effacbadfbea3c65' }, "Duration"), h("smoothly-input", { key: '92aa6ba1302c1c34b77a70d29714712c2be3068c', name: "duration", type: "duration", placeholder: "hh:mm", value: this.duration, onSmoothlyInput: e => (this.duration = e.detail.duration) }, "Duration"), h("smoothly-input", { key: 'd2047bac99e33c9f737bd2c4e3900f855baa9999', name: "duration", type: "duration", value: this.duration, placeholder: "-hh:mm", onSmoothlyInput: e => {
                 const duration = e.detail.duration;
                 this.duration = duration;
-            } }, "Duration"), h("h2", { key: '91506193cc92d0c1f497d74031b2be1192b2beca' }, "Integer with Min/Max"), h("smoothly-input", { key: '481aa0956f649040e9f43d2a7c62804bb92efef9', name: "days", type: "integer", min: 0, max: 365 }, "Days per year (0-365)"), h("smoothly-input", { key: '38a054ca282fafdd961218f7e6da5760307fddf1', name: "hour", type: "integer", min: 0, max: 23 }, "Hours per day (0-23)"), h("smoothly-input", { key: '5332e8aa8b06b66427337f2d1ff8f51a8511e382', name: "minute", type: "integer", min: 0, max: 59 }, "Minutes per hour (0-59)"), h("smoothly-input", { key: 'eb44b024a1302cbb48d8bb6e34ba3f8cda2cd919', name: "minute", type: "integer", min: 18, max: 120 }, "Age (18-120)"), h("h2", { key: '4b990e9c2dde97a9f15f9b7c4b87156abab06cbf' }, "Invalid text with warning icon and tooltip"), h("smoothly-input", { key: '71bdb7feb20f18c2a37dc4860ff3a9202eacf8ac', name: "alphanumeric", invalid: !/^[a-zA-Z0-9]+$/.test(this.alphanumeric), errorMessage: "Only alphanumeric allowed", value: this.alphanumeric, onSmoothlyInput: e => (this.alphanumeric = e.detail.alphanumeric) }, "Alphanumeric"), h("h2", { key: '2deb15192feae3b18f0c8d0a0398a12a5bd81d21' }, "Identifiers"), h("smoothly-input", { key: '2e0243a190b1c2280bac015a66516a5fe372258d', type: "identifier-code" }, "Code"), h("smoothly-input", { key: 'ff873320ab3c15d5cfbb9869b6c62aaf74900cea', type: "identifier-attribute" }, "Attribute"), h("smoothly-input", { key: '68246a134a3fc98450ff3fdcb6129ae416e24541', type: "identifier-snake" }, "Snake"), h("smoothly-input", { key: 'e5b5a8a769712436c498a6728cd8c678709256ce', type: "identifier-pascal" }, "Pascal"), h("smoothly-input", { key: 'd8187ead8f3f1a2ccb9ad5255b74b00ea6dcdb81', type: "identifier-camel" }, "Camel"), h("h2", { key: '84ddb5eea8bbc25670b623966ee44acb66985435' }, "Input Alternatives"), h("smoothly-input", { key: 'a4cc2d53f80a569c0fc5aff4002c0d3122d0ef90', type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, h("smoothly-icon", { key: '96c373625202143aeaba7c9c521fc0def6e319be', name: "checkmark-circle", slot: "start" }), "First Name"), h("smoothly-input", { key: '6a681ff90c7c95a22d7e6a7567ee5efd8bdec07f', type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", h("smoothly-icon", { key: '1b11a1e1a295a123126640c4a481af89df6bcec9', name: "checkmark-circle", slot: "end" })), h("smoothly-input", { key: '7ca34d9ae381a0b12c265866ac3f771726eba93d', type: "text", name: "name.first", placeholder: "Smith", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", h("smoothly-icon", { key: '2ff4650c1f7b3f48c6f9828523c7f07de7b4fa85', name: "checkmark-circle", slot: "end" })), h("smoothly-input", { key: '061310e54b36c9c75a87e3e18fbba4112b91cb1c', placeholder: "test" }), h("smoothly-input-submit", { key: '99698172c9514334dedac33b8c2fc6548b88fbaa', slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }), h("h4", { key: 'ad71dff1660186bba82f34191b0ca60efae720d7' }, "Smoothly checkboxes"), h("div", { key: '5718011f939a0878ab8ea3afaecbda302e31c73b', class: "checkbox-group" }, h("smoothly-input-checkbox", { key: '5b5ba10540de4438e2c10b6c02d0fad978d515a4', disabled: true, name: "first-checkbox" }, h("smoothly-icon", { key: '0e718adc3894003b058826ea301d2c754ae8c1f3', name: "checkmark-circle", slot: "start", size: "tiny" }), "First"), h("smoothly-input-checkbox", { key: '15135f72968c4d699acc9e68bb5e5cd816665087', name: "second-checkbox", checked: true }, h("smoothly-icon", { key: 'ae3d257b11cecf9ef2eb97493acf4fb3cbaf3b40', name: "checkmark-circle", slot: "start", size: "tiny" }), "second", h("smoothly-input-clear", { key: 'c27de2287e7659e8e48380f67d02d0408cdb51a2', size: "icon", slot: "end" })), h("smoothly-input-checkbox", { key: '8eb99fac6b762993b72d224e1323579b6148d5f6', name: "third-checkbox" }, "3rd")), h("h4", { key: 'e5dd8c9ca4c8be3222ea3f9aa55f669d4028e5d6' }, "Smoothly Radio Buttons"), h("smoothly-input-radio", { key: '77070459eecd7514acb8601ec93a37b9450168e3', clearable: true, name: "radioFirstInput" }, h("smoothly-icon", { key: '9e3d161e5c499fc80a5945adeacf1144e92df785', name: "checkmark-circle", slot: "start" }), h("label", { key: 'aa6324183b7a0826e7c3a25494ae074b436c174d', slot: "label" }, "Clearable"), h("smoothly-input-radio-item", { key: '02694e25f144985698a0ef92ea53c3659ab84290', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '09d2c82fd813ed5181073ab3dc7725b42bd47f4e', selected: true, value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '2772c21b13d27b3d9a1a800e4f008a838bfe65df', value: "third" }, "Label 3"), h("smoothly-input-clear", { key: '60e95d7e3fbcf1d36b1c36ddbc6994e92a3750c5', size: "icon", slot: "end" })), h("smoothly-input-radio", { key: 'bbd63cb0a3ebda2cfef6221e61ea0b5cb31380d4', name: "radioSecondInput" }, h("label", { key: '4f482e6d096f536aef54c7326bd78d3bf156b8ab', slot: "label" }, "Not clearable"), h("smoothly-input-radio-item", { key: '761efe9c3501c0d2965ad4105733df91934841f9', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: 'd9d6ca775c01be53e0bec4d213c62d6d37958a35', value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: 'fda64767508f76c7343baa564d5fabde05f125b8', value: "third" }, "Label 3"), h("smoothly-input-radio-item", { key: '6e7ba43e516578bf7977b4a3b71cb4c3488d9d1f', value: "fourth" }, "Label 4"), h("smoothly-input-radio-item", { key: '6de5860b06e1dd083818bc46c2c43cdd672e3bfa', value: "fifth" }, "Label 5"), h("smoothly-input-radio-item", { key: '2e3e2e0cf07b6a69aa8b38bad85c7dc4082ca70c', value: "sixth" }, "Label 6")), h("smoothly-input-range-demo", { key: '4d19c2422d932957c98829a27692dd13a0125b34' }), h("smoothly-input-color-demo", { key: '8a811c4a90aa12b89a98513e9a91bc176d346296' }), h("smoothly-input-price-demo", { key: '93e80a88afa678602c2ba2e84cfc7e49ab15d993' }), h("smoothly-back-to-top", { key: '8f02b74e7694f5ebfc62639540c4a3994c6a1ff8' }))));
+            } }, "Duration"), h("h2", { key: '283a6152257e6c7c68e5b5713c860c1877d65f24' }, "Integer with Min/Max"), h("smoothly-input", { key: '01494df3d52b16246cea53b17f2924be03fcd45d', name: "days", type: "integer", min: 0, max: 365 }, "Days per year (0-365)"), h("smoothly-input", { key: '92760df5d824d83cfcabfcbb9c3d3ec14dc7b5f7', name: "hour", type: "integer", min: 0, max: 23 }, "Hours per day (0-23)"), h("smoothly-input", { key: '2b91b33d85c5a8060910c5c113bf86d8025d4258', name: "minute", type: "integer", min: 0, max: 59 }, "Minutes per hour (0-59)"), h("smoothly-input", { key: '753749c84e0a09a6bb22381e82b3db8fe54309f0', name: "minute", type: "integer", min: 18, max: 120 }, "Age (18-120)"), h("h2", { key: '5f4260798c795fe73e9243f1701296aa572409f0' }, "Invalid text with warning icon and tooltip"), h("smoothly-input", { key: '79f1faf413093fa4688f3651d64e285828129022', name: "alphanumeric", invalid: !/^[a-zA-Z0-9]+$/.test(this.alphanumeric), errorMessage: "Only alphanumeric allowed", value: this.alphanumeric, onSmoothlyInput: e => (this.alphanumeric = e.detail.alphanumeric) }, "Alphanumeric"), h("h2", { key: '5a32fcb9c6a6fb1339195ebbdfb5c6ac8e186f5e' }, "Identifiers"), h("smoothly-input", { key: 'e495ce716e08285f08fcb66de94b6e8499f04443', type: "identifier-code" }, "Code"), h("smoothly-input", { key: '27ae27bec80bc7e45d36165d7eaf625cd3f16733', type: "identifier-attribute" }, "Attribute"), h("smoothly-input", { key: '63d4ec8ed784eb0a4ea3fd03468cc0d3017c2c87', type: "identifier-snake" }, "Snake"), h("smoothly-input", { key: '262be226d93f8a826221ee7c69b11b48271ed7b6', type: "identifier-pascal" }, "Pascal"), h("smoothly-input", { key: '9aa3a103dda1203be74a1ed95cabfe0d5b6b338b', type: "identifier-camel" }, "Camel"), h("h2", { key: 'cecf5ca7e639cbcda0914703672c053d3c8ce59e' }, "Input Alternatives"), h("smoothly-input", { key: '1fd87c7537064f3ad713733d39be58f1199293ad', type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, h("smoothly-icon", { key: '55cb2bdaa096df6a1ca2ec3aba6ba49279cc31d3', name: "checkmark-circle", slot: "start" }), "First Name"), h("smoothly-input", { key: '402b8c49765021b02f5a4b360ec58bb65f6dd8a2', type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", h("smoothly-icon", { key: '501dcf174eb7f333491bb451a8e192e15e72805a', name: "checkmark-circle", slot: "end" })), h("smoothly-input", { key: 'cf4afd621a442b90f41b4ae26a96cfa2d8153df4', type: "text", name: "name.first", placeholder: "Smith", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", h("smoothly-icon", { key: '9fb3990c1caf1da748d82f3fb355d300f7404329', name: "checkmark-circle", slot: "end" })), h("smoothly-input", { key: '932b57faaca83f7cfba85e41fbc43eb8695d6ea4', placeholder: "test" }), h("smoothly-input-submit", { key: 'b1aaf41eb1206fdc148d480573302f8693de18aa', slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }), h("h4", { key: 'b7ffb6f9330ced7f5763e48d626e0a17889d9f25' }, "Smoothly checkboxes"), h("div", { key: '80fc9cc65cccc4adb8cba4c811742541137bf698', class: "checkbox-group" }, h("smoothly-input-checkbox", { key: 'be5e8d4dd4cb4c63b9c0d82920c5ea7c6a0e623b', disabled: true, name: "first-checkbox" }, h("smoothly-icon", { key: '75edc6ead1a55befb22e6084d485749bd9cc6da1', name: "checkmark-circle", slot: "start", size: "tiny" }), "First"), h("smoothly-input-checkbox", { key: '704732e5a9e2ccc8e7ea1f4321a9911d4826e5d1', name: "second-checkbox", checked: true }, h("smoothly-icon", { key: '708e9b987f921137264f288bbe1d4ec8499df19b', name: "checkmark-circle", slot: "start", size: "tiny" }), "second", h("smoothly-input-clear", { key: '80c5ce80c75f33f67bbbfdbfe73ba072eaa37d79', size: "icon", slot: "end" })), h("smoothly-input-checkbox", { key: '71264159bccb449aed01eb54f0f3e4c3ae2ad9b6', name: "third-checkbox" }, "3rd")), h("h4", { key: '0c772e064d8a51c6d33172d27fc5af685edbb63f' }, "Smoothly Radio Buttons"), h("smoothly-input-radio", { key: '2e7895c7d085ecbd0ca64410b7f76fa079861106', clearable: true, name: "radioFirstInput" }, h("smoothly-icon", { key: 'baf27045a94f4318c5193072003c3205566be340', name: "checkmark-circle", slot: "start" }), h("label", { key: '1510a8506ed6cc4654e52c0a8db589cb8f07789a', slot: "label" }, "Clearable"), h("smoothly-input-radio-item", { key: '3640444f19026657c628973d69f82b21504c78d6', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '3e38e925bb0dc05927b249d5086a6793f67b6ebf', selected: true, value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '0b0331135e82acaacc3e7ccf86224ae4638190ed', value: "third" }, "Label 3"), h("smoothly-input-clear", { key: '8799173946dae79110b281fd74af4fd7a680b4e9', size: "icon", slot: "end" })), h("smoothly-input-radio", { key: 'a769bb209c9dd9c4ac3f17d6aa3ad887e2d168e8', name: "radioSecondInput" }, h("label", { key: '252ba147b41c9155641e6b893591a6809f98c516', slot: "label" }, "Not clearable"), h("smoothly-input-radio-item", { key: '269ad4c1ad1ef77808486ed910f76a93389ed53c', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '0de3d96a6afbfc9495085936af90c5bf17d2a4e6', value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: 'cac79cc3eab126dea7c063e7f469bc8b28c241b9', value: "third" }, "Label 3"), h("smoothly-input-radio-item", { key: 'c795e26c2789a10e8d0d8335f6f3ed96754a2f17', value: "fourth" }, "Label 4"), h("smoothly-input-radio-item", { key: '63d8c92c4984fdf556360c61968e983da5e23548', value: "fifth" }, "Label 5"), h("smoothly-input-radio-item", { key: '7c786157edd658508d71de20d55a4d596dc96d16', value: "sixth" }, "Label 6")), h("smoothly-input-range-demo", { key: '90e079e7fa142511708ceb0781db47325feb7cbd' }), h("smoothly-input-color-demo", { key: 'f52d61c72a3f01e834a2a626e1e533fd3c6ed11e' }), h("smoothly-input-price-demo", { key: '6da94024c5a01ed305071bce4f3afe97a807fe22' }), h("smoothly-back-to-top", { key: '49936dab6a55005f169850bbcc6d324e0aff0858' }))));
     }
     static get is() { return "smoothly-input-demo"; }
     static get encapsulation() { return "scoped"; }

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

@@ -6,7 +6,7 @@ export class SmoothlyInputPriceDemo {
         this.currency = "USD";
     }
     render() {
-        return (h(Host, { key: 'bf84cea0865e0a30f6967b9d3648779fdf29d106' }, h("h2", { key: '405b6eb3f61ac9f42ef4625da0e6aa7010e7b7d2' }, "State demo on smoothly-input"), h("p", { key: 'edbdba22faca0d9cfac2d4518628d9d57e9e0603' }, "This demo/test the internal state of the smoothly-input component."), h("p", { key: 'd4f7f149a4b985accb2c53c79be73287a640e821' }, "The currency of the price should update when switching between the currencies."), h("smoothly-input-radio", { key: 'a2c020fe7c1aa3bd263e1145acf92c50df47795d', name: "currency", onSmoothlyInput: e => (this.currency = isoly.Currency.is(e.detail.currency) ? e.detail.currency : undefined) }, this.currencies.map(currency => (h("smoothly-input-radio-item", { key: currency, selected: currency == this.currency, value: currency }, currency)))), h("smoothly-input", { key: 'ea586b3e9bb14d372cd0817a968bff912cb5cc26', type: "price", currency: this.currency }, "price")));
+        return (h(Host, { key: '60e993b80b4e917ccbb75c50363683528679057c' }, h("h2", { key: 'd0aba9325c5d06129d4901db66f1013567b6b830' }, "State demo on smoothly-input"), h("p", { key: 'a855d441d2caca97623532b0c2b76fee767cb0c6' }, "This demo/test the internal state of the smoothly-input component."), h("p", { key: 'ace43773575545bf9e1436679882d52fc7df775e' }, "The currency of the price should update when switching between the currencies."), h("smoothly-input-radio", { key: '37bfc9ebfe8859b3d91dc23903c9ed54dbaecde2', name: "currency", onSmoothlyInput: e => (this.currency = isoly.Currency.is(e.detail.currency) ? e.detail.currency : undefined) }, this.currencies.map(currency => (h("smoothly-input-radio-item", { key: currency, selected: currency == this.currency, value: currency }, currency)))), h("smoothly-input", { key: 'bac1cf757d16013bbc16193bc4bb8a290d30f4d8', type: "price", currency: this.currency }, "price")));
     }
     static get is() { return "smoothly-input-price-demo"; }
     static get encapsulation() { return "scoped"; }

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

@@ -21,7 +21,7 @@ export class SmoothlyInputDemoStandard {
     }
     render() {
         const placeholder = this.options.placeholder ? "placeholder" : undefined;
-        return (h(Host, { key: '51d77335aa759b44bd7ccba2bb6e3078898c4242', class: { vertical: !!this.options.vertical } }, h("div", { key: 'd95115d3997c9c545df4bf1f63a5036aaefaba93', class: "description" }, h("h2", { key: '7a8ec01d924468b072950c545f3e5c8c27c9bd80' }, "Input Standard"), h("p", { key: '52e241e1121fab79f28de270ecc5acf40510b402' }, "Height of input should be ", h("code", { key: '16704073dc0dbd604996dfb54ce2d943d97cab8d' }, "3rem"), " including border. This is should result in a 48 pixel height at 100% zoom, assuming a root font-size of 16 pixels."), h("smoothly-form", { key: '7028a903bea80c1ab23f8384daebc93dfee8b699', looks: "grid", onSmoothlyFormInput: (e) => (this.options = e.detail) }, h("smoothly-input-select", { key: '75daf9e2b01bf3a3332ba7e01756e610acc55965', name: "looks" }, h("span", { key: 'e8cc473335d3cdebea58e5590699a77880de24ae', slot: "label" }, "Looks"), Looks.types.map(l => (h("smoothly-item", { value: l }, l)))), h("smoothly-input-checkbox", { key: 'dcccdc46fedc9dad02ef1c62108851abb59fa8f9', name: "readonly" }, "Readonly"), h("smoothly-input-select", { key: '75498be9e59857da131f741ade51e58a576b6d0d', name: "color" }, h("span", { key: '2bc085313684d4bbf833dab63cfae7d189007408', slot: "label" }, "Color"), Color.types.map(c => (h("smoothly-item", { value: c }, h("span", { color: c }, c)))), h("smoothly-input-clear", { key: '07e7e9bc348a7497a4162d6ae0edba6a6268d1c7', slot: "end" })), h("smoothly-input-checkbox", { key: '4a391a51a4433a69ad33533e24999b8032788e42', name: "vertical" }, "Vertical Layout"), h("smoothly-input-checkbox", { key: '294f11e49b9d1649d6a01d7540401e34b55cb434', name: "showLabel", checked: true }, "Show Label"), h("smoothly-input-checkbox", { key: '8696e0c1c6b5baa70a9541b516e883eddc476331', name: "placeholder" }, "Placeholder"), h("smoothly-input-checkbox", { key: '234523c9cda3ebc12d45e8e9875c4a8cdee280a4', name: "invalid" }, "Invalid"), h("smoothly-input", { key: 'cea03f719af69005952237149f31ce9805b4ced3', name: "errorMessage", value: "This is not a valid value" }, "Error Message"), h("smoothly-input-range", { key: '4cdd6b47c8e6129ff18a2751fef6d0cbce5bc39e', label: "Border Radius (rem)", name: "borderRadius", min: 0, max: 2, step: 0.25 }))), h("div", { key: 'fe02455d3c1352619432a8e0cdbe35268894b747', class: "input-wrapper", style: { "--smoothly-input-border-radius": `${this.options.borderRadius}rem` } }, h("div", { key: '95d24203af3409983b41748485fbd3bea660e727', class: "width" }, "100%"), h("div", { key: '3f1ec5bba79988ef868aac7f44bfeaecb6251dda', class: "left-padding" }, "0.5rem - left padding"), h("smoothly-input", { key: 'd358a782913cbabff5d4203a771bd0d90dcf0549', name: "text", looks: this.options.looks, placeholder: placeholder, invalid: this.options.invalid, errorMessage: this.options.errorMessage, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '2e6d53986d00071a5b3f04c27d4e677347c20c8f' }, "Text"), h("smoothly-input-clear", { key: 'ec6b56f05838eb88927a259c7d4d5ab24d391250', slot: "end" })), h("div", { key: 'fd5f0710017cb22c742012d26668920678a6e714', class: "height" }), h("smoothly-input-select", { key: 'a3751f0f8014e765130c1604f8eb075d67073cd1', name: "month", looks: this.options.looks, placeholder: placeholder, invalid: this.options.invalid, errorMessage: this.options.errorMessage, readonly: this.options.readonly, color: this.options.color }, this.options.showLabel && h("label", { key: '687213bc8b3b92c5ea7f7d267a52c7b540c1be56', slot: "label" }, "Select"), h("smoothly-item", { key: '25f3e7b6ec843c7d6c5e2303448fcedeebefa894', value: "1" }, "January"), h("smoothly-item", { key: '0c4bcbec574fba829a4c55ff69d1a0a83e6eb2b7', value: "2" }, "February"), h("smoothly-item", { key: '5b5ebd31a59d355e45f03349382a6d26b10d5748', value: "3" }, "March"), h("smoothly-item", { key: '356fb573c06b2c52a31a21c8347a64bca92064e4', value: "4" }, "April"), h("smoothly-item", { key: '426fe3c47ef1f66238c59cc83fdb1112ce49c509', value: "5" }, "May"), h("smoothly-item", { key: '89cef888cd6e5976ebd31925ff8249539ce124f6', value: "6" }, "June"), h("smoothly-item", { key: '9cf73864df20b1ae2b3cf2ab97723b9e60547132', value: "7" }, "July"), h("smoothly-item", { key: '0a795461bb9076e3165cff3b26506ba29d9f9044', value: "8" }, "August"), h("smoothly-item", { key: 'e7c514f7335b7814836268ea845f7f6f1d673d0f', value: "9" }, "September"), h("smoothly-item", { key: 'd130ce9f3c4b680639ac0be2e9dbf08013cc919a', value: "10" }, "October"), h("smoothly-item", { key: '8897bd4fb1aabe6fc75f6f74e85b7ef66a000c5b', value: "11" }, "November"), h("smoothly-item", { key: '91b501ad9b3332d89593e4e38ba8f85defc90761', value: "12" }, "December"), h("smoothly-input-clear", { key: '7ad82b23742ded62fb3dcfb116f7664a5b180145', slot: "end" })), h("div", { key: '1c4e7e135a81d8b2e2fe7107f2999b5485a72de1', class: "height" }), h("smoothly-input-checkbox", { key: '5fe26f93c0fa10a51ef7e05f28cd54b29c4a11c1', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color }, "Check"), h("div", { key: '81680b9e029f56a1a5b682eb40f1d6eaf3a24f69', class: "height" }), h("smoothly-input-radio", { key: '7e03ecec04c22e77b824bb4890d8e6a96dc59f7a', name: "radio", clearable: true, looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && h("label", { key: 'ff6c03ba5aa902d352f6d64eab01f18264ad5d1d', slot: "label" }, "Radio"), h("smoothly-input-radio-item", { key: '7485d954a29a75d43b79aa3e02a5b936b255c855', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '6ddfbf0852ee6047257aee395fe176263ba417a9', selected: true, value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '33a1c8e763115e1ead15d1be7dfbf72eb97b2903', value: "third" }, "Label 3"), h("smoothly-input-clear", { key: '48365152688a60d1bff7f77596f4b2ecd8009741', slot: "end" })), h("div", { key: '73960a1d0313ea6a7572b696d095315162819738', class: "height" }), h("smoothly-input-file", { key: '4650361bb12bdd1f7d862adead506e2229859200', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, placeholder: placeholder, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: 'f61cf9a54c26176cbb2e4e5653b786f0992425c4', slot: "label" }, "File"), h("smoothly-input-clear", { key: 'c1b2956204c419d41279356303ced0ac2baa6df8', slot: "end" })), h("div", { key: '334de9a57ba8f0f86f318ca639336bffe7aa1b28', class: "height" }), h("smoothly-input-range", { key: 'ff1a5a207b7a3ae0c8eb19edeb9c8ddb4cfce2bf', name: "range", label: this.options.showLabel ? "Range" : undefined, looks: this.options.looks, readonly: this.options.readonly, color: this.options.color }, h("smoothly-input-clear", { key: '1e16c10d2c5c9d6e55dcb96451413944b2e2cfc5', slot: "end" })), h("div", { key: 'e4e508d12a749659164628aaa378ae827e167d5e', class: "height" }), h("smoothly-input-color", { key: '8853163ee4f5a9a55fcb5c95452b014a98e8a663', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: 'a418bff13c7640784a3b63bf181f07644f24c259' }, "Color"), h("smoothly-input-clear", { key: 'ae106935cece376c36ce5e5adc24fce6b7978415', slot: "end" })), h("div", { key: '4bde174e16932e5fcbff4c0ba416a83b0b4c8ddc', class: "height" }), h("smoothly-input-date", { key: '53b575a2c07450900644e52d4aa208b7b4e862fc', looks: this.options.looks, readonly: this.options.readonly, invalid: this.options.invalid, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: 'a3b2900b15653c61cf6fc806267476c5e69f9529' }, "Date"), h("smoothly-input-clear", { key: '1ab17f116e24273c6d86d3ddd839a2ea25e30b7d', slot: "end" })), h("div", { key: '522a5fdea537b227e24d7841223d48540394d362', class: "height" }), h("smoothly-input-date-range", { key: '9850bef1ee238ff2d5bb6d79a394788643da63c1', looks: this.options.looks, readonly: this.options.readonly, invalid: this.options.invalid, color: this.options.color, placeholder: placeholder, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '26b71f937197762e5b3bf523ed0d3436872d0efd' }, "Date Range"), h("smoothly-input-clear", { key: 'd3e283f1a6aabb2b5d4fabf6ff37e5046ee3598d', slot: "end" })), h("div", { key: '34625f7dec1ddda4d3b2cd3f19075897a37d3f23', class: "height" }), h("div", { key: '22e18c044fb0cb4b58601fcf5c13b2fc6f42ade2', class: { "guide-lines": true, "show-label": !!this.options.showLabel } }, this.options.showLabel ? "Aligned labels & values" : "Center values"))));
+        return (h(Host, { key: 'c58dcd7a0ddf98a9833fbe9467b9b08402b388f1', class: { vertical: !!this.options.vertical } }, h("div", { key: 'aa6ad35e296975201ad7bce10df89c67b507daa4', class: "description" }, h("h2", { key: 'b54af57073864460a36cd6358dd103d9a8d6203e' }, "Input Standard"), h("p", { key: '4dd1d682e32b4da92a9c6a496dcc4af4dd455edc' }, "Height of input should be ", h("code", { key: '67d7d6a970a3266c6503dc53cb5bbd7e1053b3ca' }, "3rem"), " including border. This is should result in a 48 pixel height at 100% zoom, assuming a root font-size of 16 pixels."), h("smoothly-form", { key: 'c14ded577c553892f190d82767037447791e08ca', looks: "grid", onSmoothlyFormInput: (e) => (this.options = e.detail) }, h("smoothly-input-select", { key: '733a90dfdfdabb477b2d6105682657df7df51f27', name: "looks" }, h("span", { key: '91aecb53922674bffb8e7b7d084a2dc6f1520fc3', slot: "label" }, "Looks"), Looks.types.map(l => (h("smoothly-item", { value: l }, l)))), h("smoothly-input-checkbox", { key: '72a431fcddf9309c4cc52de91991f75005bb08fa', name: "readonly" }, "Readonly"), h("smoothly-input-select", { key: '06f5861be0d3acc109f02de05abeffebe764db39', name: "color" }, h("span", { key: '3b514f9d59a5a6e85a3a760436110a32983d13e1', slot: "label" }, "Color"), Color.types.map(c => (h("smoothly-item", { value: c }, h("span", { color: c }, c)))), h("smoothly-input-clear", { key: 'efaa0ccf60af3c1310d8ddc89e12825714de5b52', slot: "end" })), h("smoothly-input-checkbox", { key: '8e3ff06a5ec5a272e355ed32c4c3a26feaad93d9', name: "vertical" }, "Vertical Layout"), h("smoothly-input-checkbox", { key: 'f508c381ddc975eba1f73788b4ec9d1a17c6faff', name: "showLabel", checked: true }, "Show Label"), h("smoothly-input-checkbox", { key: '976c451c4c52b9c4cdf06db0b287ce57d78c852f', name: "placeholder" }, "Placeholder"), h("smoothly-input-checkbox", { key: '6c8aa60ab8294a01d5492d981b442bdb9f2567d5', name: "invalid" }, "Invalid"), h("smoothly-input", { key: 'fd721fe78c6623bec6468e647e6ac88f8e483e53', name: "errorMessage", value: "This is not a valid value" }, "Error Message"), h("smoothly-input-range", { key: '8ab1d3698fa0cbe1c1f5da694443d3372aeec095', label: "Border Radius (rem)", name: "borderRadius", min: 0, max: 2, step: 0.25 }))), h("div", { key: 'b3e86ecbfd3d145454b420e3f45d87124c4d4650', class: "input-wrapper", style: { "--smoothly-input-border-radius": `${this.options.borderRadius}rem` } }, h("div", { key: '4719ebb85b566902dc53cae95cbc8826a3b22619', class: "width" }, "100%"), h("div", { key: 'a205e5654718ba2a308e29dc3e34e6c9598f23d6', class: "left-padding" }, "0.5rem - left padding"), h("smoothly-input", { key: 'c5143cfedc84779d8b28d64a56e728ef2ab4df57', name: "text", looks: this.options.looks, placeholder: placeholder, invalid: this.options.invalid, errorMessage: this.options.errorMessage, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: 'a675b1d8ad3e673914e020d9eb14b15a242cee0d' }, "Text"), h("smoothly-input-clear", { key: '1088552e7fca00d6896c74d6da64748b8adcb9cd', slot: "end" })), h("div", { key: 'c5fb2a470f3c7391b3ae9e4dbc5814f7e5550a86', class: "height" }), h("smoothly-input-select", { key: 'b7eaf11fdf18381ae8d551c24e6e8f7566d6179a', name: "month", looks: this.options.looks, placeholder: placeholder, invalid: this.options.invalid, errorMessage: this.options.errorMessage, readonly: this.options.readonly, color: this.options.color }, this.options.showLabel && h("label", { key: '131a55d7d6876efe226c6be6996c1b90b8465904', slot: "label" }, "Select"), h("smoothly-item", { key: '84ff7f28d8b523555d77b8e90dd0a4c2303ddaf7', value: "1" }, "January"), h("smoothly-item", { key: '31f15f5f9c7dc78227c2c6fd648e56623a8e4c8b', value: "2" }, "February"), h("smoothly-item", { key: 'e81d01da312a769b54fd33758d0a6b0f0c138519', value: "3" }, "March"), h("smoothly-item", { key: '96922f4ed441fb7910c7e6838dfa3d3f7c71ef34', value: "4" }, "April"), h("smoothly-item", { key: '9ecfcdcbb63b36deb2e18f195ba7e08ac7f738a1', value: "5" }, "May"), h("smoothly-item", { key: '918d4f499d24d5947bdb060dc28009396fc23caf', value: "6" }, "June"), h("smoothly-item", { key: '973167231cb8e2477ae54572042ec80cafe4ea37', value: "7" }, "July"), h("smoothly-item", { key: 'af47c9a8e15a6bb7ddebf827547e248219f2dd0b', value: "8" }, "August"), h("smoothly-item", { key: '4069036ca290731580df101648683c305e67ebec', value: "9" }, "September"), h("smoothly-item", { key: 'd98add36ae1c3bd7159cb5e3784a74895ee78fff', value: "10" }, "October"), h("smoothly-item", { key: '3c20e5f2c440ed7e3cce046236a22a6fd2259c2d', value: "11" }, "November"), h("smoothly-item", { key: '7f9f272f95377d0fcb6950dbb5d5a5e4f610c613', value: "12" }, "December"), h("smoothly-input-clear", { key: 'b98b27b7a528601f9e1fe1d14e6043c20919377b', slot: "end" })), h("div", { key: '89d4880eaec86e70228d3d3f26f2eb112ad50cb1', class: "height" }), h("smoothly-input-checkbox", { key: '32b9e83ce27c25041b8cf103ad4c10ddbb11f2ce', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color }, "Check"), h("div", { key: '3f0885c44817050860ae95324bacea6721e235cd', class: "height" }), h("smoothly-input-radio", { key: '2263d9a201f26ecf51c4e3a2ec445a94027d61a6', name: "radio", clearable: true, looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && h("label", { key: 'badac80733108311a4800007278c3417cbad57df', slot: "label" }, "Radio"), h("smoothly-input-radio-item", { key: 'd4d72a709daf0c2cdbc7aabfe51db816f1a608ae', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: 'db98b84fc34c0ed7dad88ff4d75ef98533d19259', selected: true, value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: 'f732549c63fb54173349f1219535a54686e4281f', value: "third" }, "Label 3"), h("smoothly-input-clear", { key: 'f0affe94d6280188d9c2b6d482b252e9ab0707ac', slot: "end" })), h("div", { key: 'e9c9eaf8c54bd995fe687366721903cfd2c04f40', class: "height" }), h("smoothly-input-file", { key: 'adbbcd0bc57064fd2293ea700b6fed451bc38fd4', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, placeholder: placeholder, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '70d58f1f7eaf4b31ded93887a4fad73fd99c07f1', slot: "label" }, "File"), h("smoothly-input-clear", { key: '3b75906118b762daaddb6ac754dff28236cc4632', slot: "end" })), h("div", { key: '987ab65df503b27a86263d66c20d022bff4492e3', class: "height" }), h("smoothly-input-range", { key: 'a363a3b91d2ab8e16f53647a8c706d2f14cf6c0d', name: "range", label: this.options.showLabel ? "Range" : undefined, looks: this.options.looks, readonly: this.options.readonly, color: this.options.color }, h("smoothly-input-clear", { key: '98567ea997a482ae3fa6f57f5c28dde08b52a31d', slot: "end" })), h("div", { key: '89c0dac8beabb32cd47c1452360c8e3fc1f41a5d', class: "height" }), h("smoothly-input-color", { key: '47b272d0c0e50a46b885e0b0c23f9e690f8e7151', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '80e2730f7c9ce81cfa49bf193345c4b7f1f014be' }, "Color"), h("smoothly-input-clear", { key: 'd56a6765d8710d9f35d8d10b47d52b4bade2b6fa', slot: "end" })), h("div", { key: 'ffe82240e639efb559a1710ea839708b548b89ef', class: "height" }), h("smoothly-input-date", { key: '2340719aa80968e1b630a4c967da15482ab28abd', looks: this.options.looks, readonly: this.options.readonly, invalid: this.options.invalid, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '7adde192741aaa0850e3ea70c04ea80cd6cfd914' }, "Date"), h("smoothly-input-clear", { key: 'a9187a4b235ef079adf84fe0403c5128e1216025', slot: "end" })), h("div", { key: '7d47f8663295f1ad7675789348becc972266d551', class: "height" }), h("smoothly-input-date-range", { key: 'f1426cd9db9cc037ca2bf262f06672cab8f0e632', looks: this.options.looks, readonly: this.options.readonly, invalid: this.options.invalid, color: this.options.color, placeholder: placeholder, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: 'd0faa66b131aaa9934b216d2a5b07a75a64d57db' }, "Date Range"), h("smoothly-input-clear", { key: 'ac6166b34ea31f06a41c6b856e6cb00bd014e2c5', slot: "end" })), h("div", { key: '44b52319c60c4bb7af8ccd8222ef083454b07814', class: "height" }), h("div", { key: '5e10df393906febb867db526c3a2546fa0911880', class: { "guide-lines": true, "show-label": !!this.options.showLabel } }, this.options.showLabel ? "Aligned labels & values" : "Center values"))));
     }
     static get is() { return "smoothly-input-demo-standard"; }
     static get encapsulation() { return "scoped"; }

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

@@ -28,7 +28,7 @@ export class SmoothlyInputEdit {
     }
     render() {
         var _a;
-        return (h(Host, { key: '40cf13a8c918c5bfce683ada0757c851cbe3a2f8', title: this.toolTip }, h("smoothly-button", { key: 'fccee205cf5c287d317afd1110e8a21312405c26', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined) }, h("slot", { key: 'd1ce1696be9b41b890f5f7a5b3652a63083e4a6f' }), h("smoothly-icon", { key: '56a803c1cbfe6547cfae7c1c3a94d930617e6816', class: "default", name: "create-outline", size: "tiny" }))));
+        return (h(Host, { key: '5e4f89335ebea26c7e28f731e6c469d156737123', title: this.toolTip }, h("smoothly-button", { key: '64bca4444a76e5ff728c3371419bd4a230143fb9', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined) }, h("slot", { key: '379cf7a1b3f7de48d734766e6748d3a0539c4b7d' }), h("smoothly-icon", { key: '53b19345d6883b7c286bdef9a4cdb4e39d20f70d', class: "default", name: "create-outline", size: "tiny" }))));
     }
     static get is() { return "smoothly-input-edit"; }
     static get encapsulation() { return "scoped"; }

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

@@ -101,7 +101,7 @@ export class SmoothlyInputFile {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: '617289904025b51591bdd9fa9187f747750b97f2', class: { dragging: this.dragging, "has-value": !!this.value }, tabindex: 0, onClick: (e) => this.clickHandler(e), onDragOver: (e) => this.dragOverHandler(e), onDragEnter: (e) => this.dragEnterHandler(e) }, h("label", { key: '3f5ddc4021cec796bd4d62c031451c646b5e980b' }, h("slot", { key: 'de44a926247592c2f6e41eed32d646399e6a6c91', name: "label" })), h("div", { key: 'a5b335436fe241a3e544ea62c88f0ea6702a07f5', class: "input" }, h("smoothly-button", { key: '72b6602900c45dfc64d97a3b9762ba36b8b8494f', type: "button", color: this.color, fill: "clear", size: "flexible" }, h("slot", { key: 'c5f78b8189f841518b529f7132836ab4adf9910e', name: "button" })), h("span", { key: 'bd37165108089c02b21cdc0d1e49b72c1bad300b' }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.placeholder), h("div", { key: '927d9ee7cd2d4345ab5196a2546dfef8aaf5a827', class: "drag-overlay", onDrop: e => this.dropHandler(e), onDragLeave: e => this.dragLeaveHandler(e) }, h("smoothly-icon", { key: 'ebd746e29caa3673eac6502f792b7570fadaf4b9', name: "document-attach-outline" })), h("input", { key: 'cc096e9106e01e0f66ce1bb076f5a54267e488b3', ref: element => (this.input = element), type: "file", capture: this.camera == "back" ? "environment" : "user", accept: (_c = this.accept) !== null && _c !== void 0 ? _c : (!this.camera ? undefined : "image/jpeg"), files: this.files, onInput: e => this.inputHandler(e) })), h("div", { key: '09c3feb2ee17503791b4fb07314a43721c93d5db', class: "end", onClick: (e) => e.stopPropagation() }, h("slot", { key: '7c5c0c2a19f8d9abcdc86e631dd29020813fe75b', name: "end" }))));
+        return (h(Host, { key: 'a5683818b91fadba7fb3f46c3abf006be2111d38', class: { dragging: this.dragging, "has-value": !!this.value }, tabindex: 0, onClick: (e) => this.clickHandler(e), onDragOver: (e) => this.dragOverHandler(e), onDragEnter: (e) => this.dragEnterHandler(e) }, h("label", { key: '2034b3f660498dd2e4a510ddb4094073e4b60c51' }, h("slot", { key: '0466b8ef49363c0869f6213d34fb24ece2e9eff6', name: "label" })), h("div", { key: '8106c7ae0fc63199f97e3de977b05018d9fb8535', class: "input" }, h("smoothly-button", { key: 'b4869d4bd56d4d4865d4af8c0c7237a320397078', type: "button", color: this.color, fill: "clear", size: "flexible" }, h("slot", { key: '4a195b824d6ef4bb83aceba448bc95d62826337a', name: "button" })), h("span", { key: '51eb694634e34effd7f2ef90f8ab68ced272cedf' }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.placeholder), h("div", { key: 'ec5b06939273ce018ec60ff75bc1348ec3018460', class: "drag-overlay", onDrop: e => this.dropHandler(e), onDragLeave: e => this.dragLeaveHandler(e) }, h("smoothly-icon", { key: 'e1c90af52875e75e4813a0e23681b0fdbae2a217', name: "document-attach-outline" })), h("input", { key: '4f350280bbed38e8517b9bffca58f8a70b8891c7', ref: element => (this.input = element), type: "file", capture: this.camera == "back" ? "environment" : "user", accept: (_c = this.accept) !== null && _c !== void 0 ? _c : (!this.camera ? undefined : "image/jpeg"), files: this.files, onInput: e => this.inputHandler(e) })), h("div", { key: '451a75e9a5ddfe23431e434b2eccf20decd32078', class: "end", onClick: (e) => e.stopPropagation() }, h("slot", { key: '93dc9c23bd8c44ec4b5fdf7c90e6080f9c8e9005', name: "end" }))));
     }
     static get is() { return "smoothly-input-file"; }
     static get encapsulation() { return "scoped"; }

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

@@ -131,7 +131,7 @@ export class SmoothlyInput {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        return (h(Host, { key: '7471c3e1b2da8ae859931ea784d02651d7708c25', class: { "has-value": ((_a = this.state) === null || _a === void 0 ? void 0 : _a.value) != undefined && ((_b = this.state) === null || _b === void 0 ? void 0 : _b.value) != "" }, onclick: () => { var _a; return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, h("slot", { key: 'b028ff4cc80a672f9660c678d2bd918f9debd4c3', name: "start" }), h("div", { key: 'd8c40843dc84012f3aab57de6f18249eaf1d0b75', class: "smoothly-input-container" }, h("div", { key: '5a69a2a64b38fcbbf767a635be60a4ff7b640079', class: "ghost" }, h("div", { key: '814aa8e223becb771e2b066063023d9f5a73e3af', class: "value" }, (_c = this.state) === null || _c === void 0 ? void 0 : _c.value), h("div", { key: 'f0135aba59beb4ac8940b8c305674efdc7934b87', class: "remainder" }, (_d = this.state) === null || _d === void 0 ? void 0 : _d.remainder)), h("input", { key: '1fa48b8f469be26f5199ab2d55fa5865ae985237', ref: (el) => (this.inputElement = el), color: this.color, name: this.name, type: (_e = this.state) === null || _e === void 0 ? void 0 : _e.type, inputmode: (_f = this.state) === null || _f === void 0 ? void 0 : _f.inputmode, placeholder: this.placeholder, required: this.required, autocomplete: (_g = this.autocomplete) !== null && _g !== void 0 ? _g : (_h = this.state) === null || _h === void 0 ? void 0 : _h.autocomplete, disabled: this.disabled, readOnly: this.readonly, pattern: ((_j = this.state) === null || _j === void 0 ? void 0 : _j.pattern) && ((_k = this.state) === null || _k === void 0 ? void 0 : _k.pattern.source), onKeyDown: event => {
+        return (h(Host, { key: '78e7885c853ce20755b714f0ccf9cab0ac75a5ef', class: { "has-value": ((_a = this.state) === null || _a === void 0 ? void 0 : _a.value) != undefined && ((_b = this.state) === null || _b === void 0 ? void 0 : _b.value) != "" }, onclick: () => { var _a; return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, h("slot", { key: '9197c2a3bfa79e721feffa0a5c652f6370ecc5cf', name: "start" }), h("div", { key: 'b881acabefc935109f3531b75416753c1c75ac43', class: "smoothly-input-container" }, h("div", { key: 'f0aa99d563a84f7b1ed4ffed7da479c4875e75be', class: "ghost" }, h("div", { key: '69a4cbde610389146386eb94b75088d04d13a7e7', class: "value" }, (_c = this.state) === null || _c === void 0 ? void 0 : _c.value), h("div", { key: '566ef9ee4cc2bd590366557b72c92fe3c16ed8e3', class: "remainder" }, (_d = this.state) === null || _d === void 0 ? void 0 : _d.remainder)), h("input", { key: 'da67d5f387d69094e14999b4eebcb16ebe8b69f8', ref: (el) => (this.inputElement = el), color: this.color, name: this.name, type: (_e = this.state) === null || _e === void 0 ? void 0 : _e.type, inputmode: (_f = this.state) === null || _f === void 0 ? void 0 : _f.inputmode, placeholder: this.placeholder, required: this.required, autocomplete: (_g = this.autocomplete) !== null && _g !== void 0 ? _g : (_h = this.state) === null || _h === void 0 ? void 0 : _h.autocomplete, disabled: this.disabled, readOnly: this.readonly, pattern: ((_j = this.state) === null || _j === void 0 ? void 0 : _j.pattern) && ((_k = this.state) === null || _k === void 0 ? void 0 : _k.pattern.source), onKeyDown: event => {
                 this.state = this.stateHandler.onKeyDown(event, this.state);
                 if (!this.readonly && !this.disabled)
                     this.smoothlyKeydown.emit(Key.create(this.name, event));
@@ -144,7 +144,7 @@ export class SmoothlyInput {
                     if (Deep.notEqual(lastValue, this.stateHandler.getValue(this.state)))
                         this.smoothlyChange.emit({ [this.name]: this.stateHandler.getValue(this.state) });
                 }
-            } }), h("label", { key: 'b4dba4b8b51595a94e8b26bac894aa2d5f309c90', class: "label float-on-focus", htmlFor: this.name }, h("slot", { key: '5d7383e1c6c75406bf0dc1b8fa92f049520e85cb' }))), h("smoothly-icon", { key: 'eec82ffebeb4b1f64a7c204d553b5af65ea93c21', class: "smoothly-invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small", toolTip: this.errorMessage }), h("slot", { key: '706cb81ba9345f7dec7c8ac55ac7054e1a49b494', name: "end" })));
+            } }), h("label", { key: 'b25431d691b144dfa5569cb2b08254cdedf24dc4', class: "label float-on-focus", htmlFor: this.name }, h("slot", { key: '702434dac4c0783291d7ac9703ac80db5230ab81' }))), h("smoothly-icon", { key: 'aad96360452850bc638500bbd37fb13dfc2e013e', class: "smoothly-invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small", toolTip: this.errorMessage }), h("slot", { key: 'a86bef126f931e4e0495412368be80748b44302c', name: "end" })));
     }
     static get is() { return "smoothly-input"; }
     static get encapsulation() { return "scoped"; }