smoothly 1.2.1-alpha.34 → 1.2.1-alpha.36

package/dist/components/{p-91b783bd.js.map → p-90e9aa1f.js.map}

@@ -1 +1 @@
-{"file":"p-91b783bd.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,wbAAwb,CAAC;AAC1c,kCAAe,QAAQ;;MCMV,WAAW;;;;;;IAEvB,MAAM;QACL,QACC,EAAC,IAAI,uDACJ,8DAAa,CACP,EACP;KACD;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/table/header/style.css?tag=smoothly-table-header&encapsulation=scoped","src/components/table/header/index.tsx"],"sourcesContent":[":host {\n\tdisplay: table-cell;\n\tline-height: 2.5rem;\n\tborder-top: 1px solid rgb(var(--smoothly-color-shade));\n\tbox-shadow: 0 1px 0 0 rgb(var(--smoothly-color-shade));\n\tpadding: 0 .5rem;\n\tfont-weight: bold;\n}\n\nsmoothly-table[align=bottom] :host {\n\tvertical-align: bottom;\n}\nsmoothly-table[align=middle] :host {\n\tvertical-align: middle;\n}\nsmoothly-table[align=top] :host {\n\tvertical-align: top;\n}\n","import { Component, h, Host, Prop } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-table-header\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class TableHeader {\n\t@Prop({ reflect: true }) name: string\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<slot></slot>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}
+{"file":"p-90e9aa1f.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,wbAAwb,CAAC;AAC1c,kCAAe,QAAQ;;MCMV,WAAW;;;;;;IAEvB,MAAM;QACL,QACC,EAAC,IAAI,uDACJ,8DAAa,CACP,EACP;KACD;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/table/header/style.css?tag=smoothly-table-header&encapsulation=scoped","src/components/table/header/index.tsx"],"sourcesContent":[":host {\n\tdisplay: table-cell;\n\tline-height: 2.5rem;\n\tborder-top: 1px solid rgb(var(--smoothly-color-shade));\n\tbox-shadow: 0 1px 0 0 rgb(var(--smoothly-color-shade));\n\tpadding: 0 .5rem;\n\tfont-weight: bold;\n}\n\nsmoothly-table[align=bottom] :host {\n\tvertical-align: bottom;\n}\nsmoothly-table[align=middle] :host {\n\tvertical-align: middle;\n}\nsmoothly-table[align=top] :host {\n\tvertical-align: top;\n}\n","import { Component, h, Host, Prop } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-table-header\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class TableHeader {\n\t@Prop({ reflect: true }) name: string\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<slot></slot>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}

package/dist/components/{p-516e62ab.js → p-93e899e7.js}

@@ -1,12 +1,12 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-f765921a.js';
-import { d as defineCustomElement$8 } from './p-be6d380e.js';
-import { d as defineCustomElement$7 } from './p-e5bd19b5.js';
-import { d as defineCustomElement$6 } from './p-061353e6.js';
-import { d as defineCustomElement$5 } from './p-b5bca419.js';
-import { d as defineCustomElement$4 } from './p-51d51732.js';
-import { d as defineCustomElement$3 } from './p-4713a48e.js';
-import { d as defineCustomElement$2 } from './p-9702b067.js';
-import { d as defineCustomElement$1 } from './p-0cfd31a4.js';
+import { d as defineCustomElement$8 } from './p-306f9cb3.js';
+import { d as defineCustomElement$7 } from './p-686ec006.js';
+import { d as defineCustomElement$6 } from './p-ca69a0ef.js';
+import { d as defineCustomElement$5 } from './p-c63db1c1.js';
+import { d as defineCustomElement$4 } from './p-0b16cab5.js';
+import { d as defineCustomElement$3 } from './p-2738b430.js';
+import { d as defineCustomElement$2 } from './p-631148b4.js';
+import { d as defineCustomElement$1 } from './p-c77944e7.js';
 
 const SmoothlyFormDemoLogin = proxyCustomElement(class SmoothlyFormDemoLogin extends H {
     constructor() {
@@ -14,7 +14,7 @@ const SmoothlyFormDemoLogin = proxyCustomElement(class SmoothlyFormDemoLogin ext
         this.__registerHost();
     }
     render() {
-        return (h(Host, { key: '168c7e940237622031da85f5c5cb62bae9f922b4' }, h("h2", { key: 'a064669065587d7cfc90d760a6dbdf8e3afc13a9' }, "Login"), h("smoothly-form", { key: '41459587d19b629e8ebe3db68d38f55f9b985af5', looks: "border" }, h("smoothly-input", { key: 'a4cb3e71cc8a681fc38f7cefc4dabb2e886195b8', type: "text", name: "username" }, "Username"), h("smoothly-input", { key: '4e24ea60c29a1b5fbfa0826a7d6715c686bf7a47', type: "password", name: "password" }, "Password"), h("smoothly-input-reset", { key: 'b0480797e4813927d8cae0e8feb0f119d25c7d55', slot: "reset", type: "form", size: "icon", color: "warning" }), h("smoothly-input-submit", { key: 'e3ae66fdedc1dfd824ccc493fd30acacf24426c2', slot: "submit" }))));
+        return (h(Host, { key: '559985f2133b7f86de5c22a88cfda3e8bd1a344a' }, h("h2", { key: '693658791fff278e231556b4aadcac20c311190c' }, "Login"), h("smoothly-form", { key: 'fd420a522a1c7f51ce277c5250ad5cc2f300af7f', looks: "border" }, h("smoothly-input", { key: '656686c2d6e54047aa05b2431e059da3bfb656ed', type: "text", name: "username" }, "Username"), h("smoothly-input", { key: 'ef679e989bea7e4c5af277fe2b1a6f4ad1fec063', type: "password", name: "password" }, "Password"), h("smoothly-input-reset", { key: 'e7f58c64563e0e2a6feb789a9dea1aca186631ae', slot: "reset", type: "form", size: "icon", color: "warning" }), h("smoothly-input-submit", { key: 'abc12666abee47139e05db5c583bb9f458f21c8c', slot: "submit" }))));
     }
 }, [2, "smoothly-form-demo-login"]);
 function defineCustomElement() {
@@ -74,4 +74,4 @@ defineCustomElement();
 
 export { SmoothlyFormDemoLogin as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-516e62ab.js.map
+//# sourceMappingURL=p-93e899e7.js.map

package/dist/components/{p-516e62ab.js.map → p-93e899e7.js.map}

@@ -1 +1 @@
-{"file":"p-516e62ab.js","mappings":";;;;;;;;;;MAMa,qBAAqB;;;;;IACjC,MAAM;QACL,QACC,EAAC,IAAI,uDACJ,qEAAc,EACd,sEAAe,KAAK,EAAC,QAAQ,IAC5B,uEAAgB,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,UAAU,eAE1B,EACjB,uEAAgB,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,UAAU,eAE9B,EACjB,6EAAsB,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,SAAS,GAAwB,EAClG,8EAAuB,IAAI,EAAC,QAAQ,GAAyB,CAC9C,CACV,EACP;KACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/form/demo/login/index.tsx"],"sourcesContent":["import { Component, h, Host, VNode } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-form-demo-login\",\n\tscoped: true,\n})\nexport class SmoothlyFormDemoLogin {\n\trender(): VNode | VNode[] {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<h2>Login</h2>\n\t\t\t\t<smoothly-form looks=\"border\">\n\t\t\t\t\t<smoothly-input type=\"text\" name=\"username\">\n\t\t\t\t\t\tUsername\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"password\" name=\"password\">\n\t\t\t\t\t\tPassword\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input-reset slot=\"reset\" type=\"form\" size=\"icon\" color=\"warning\"></smoothly-input-reset>\n\t\t\t\t\t<smoothly-input-submit slot=\"submit\"></smoothly-input-submit>\n\t\t\t\t</smoothly-form>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}
+{"file":"p-93e899e7.js","mappings":";;;;;;;;;;MAMa,qBAAqB;;;;;IACjC,MAAM;QACL,QACC,EAAC,IAAI,uDACJ,qEAAc,EACd,sEAAe,KAAK,EAAC,QAAQ,IAC5B,uEAAgB,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,UAAU,eAE1B,EACjB,uEAAgB,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,UAAU,eAE9B,EACjB,6EAAsB,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,SAAS,GAAwB,EAClG,8EAAuB,IAAI,EAAC,QAAQ,GAAyB,CAC9C,CACV,EACP;KACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/form/demo/login/index.tsx"],"sourcesContent":["import { Component, h, Host, VNode } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-form-demo-login\",\n\tscoped: true,\n})\nexport class SmoothlyFormDemoLogin {\n\trender(): VNode | VNode[] {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<h2>Login</h2>\n\t\t\t\t<smoothly-form looks=\"border\">\n\t\t\t\t\t<smoothly-input type=\"text\" name=\"username\">\n\t\t\t\t\t\tUsername\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"password\" name=\"password\">\n\t\t\t\t\t\tPassword\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input-reset slot=\"reset\" type=\"form\" size=\"icon\" color=\"warning\"></smoothly-input-reset>\n\t\t\t\t\t<smoothly-input-submit slot=\"submit\"></smoothly-input-submit>\n\t\t\t\t</smoothly-form>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}

package/dist/components/{p-ac7fb911.js → p-95404634.js}

@@ -2,30 +2,30 @@ import { p as proxyCustomElement, H, h, d as Host } from './p-f765921a.js';
 import { C as Color } from './p-8e1e509d.js';
 import './p-390767c7.js';
 import './p-47ea6b68.js';
-import { L as Looks, d as defineCustomElement$h } from './p-061353e6.js';
-import { d as defineCustomElement$o } from './p-be6d380e.js';
-import { d as defineCustomElement$n } from './p-76514c29.js';
-import { d as defineCustomElement$m } from './p-f9770ff7.js';
-import { d as defineCustomElement$l } from './p-7c5243b2.js';
-import { d as defineCustomElement$k } from './p-6ead1a42.js';
-import { d as defineCustomElement$j } from './p-2020cb82.js';
-import { d as defineCustomElement$i } from './p-b4bb3e74.js';
-import { d as defineCustomElement$g } from './p-b5bca419.js';
-import { d as defineCustomElement$f } from './p-51d51732.js';
-import { d as defineCustomElement$e } from './p-7f313329.js';
-import { d as defineCustomElement$d } from './p-7ee3f874.js';
-import { d as defineCustomElement$c } from './p-0ddc42e8.js';
-import { d as defineCustomElement$b } from './p-bfb63e71.js';
-import { d as defineCustomElement$a } from './p-0c9d0809.js';
-import { d as defineCustomElement$9 } from './p-be430d3b.js';
-import { d as defineCustomElement$8 } from './p-4380feb9.js';
-import { d as defineCustomElement$7 } from './p-133d18ac.js';
-import { d as defineCustomElement$6 } from './p-f14627ff.js';
-import { d as defineCustomElement$5 } from './p-0cd742cf.js';
-import { d as defineCustomElement$4 } from './p-f47eb337.js';
-import { d as defineCustomElement$3 } from './p-5bbf4b7e.js';
-import { d as defineCustomElement$2 } from './p-0cfd31a4.js';
-import { d as defineCustomElement$1 } from './p-d92ee30a.js';
+import { L as Looks, d as defineCustomElement$h } from './p-ca69a0ef.js';
+import { d as defineCustomElement$o } from './p-306f9cb3.js';
+import { d as defineCustomElement$n } from './p-5b16ff97.js';
+import { d as defineCustomElement$m } from './p-4f80c811.js';
+import { d as defineCustomElement$l } from './p-f770567b.js';
+import { d as defineCustomElement$k } from './p-96acfe2c.js';
+import { d as defineCustomElement$j } from './p-f46dd8e4.js';
+import { d as defineCustomElement$i } from './p-4c6fe645.js';
+import { d as defineCustomElement$g } from './p-c63db1c1.js';
+import { d as defineCustomElement$f } from './p-0b16cab5.js';
+import { d as defineCustomElement$e } from './p-b1db8b28.js';
+import { d as defineCustomElement$d } from './p-09934532.js';
+import { d as defineCustomElement$c } from './p-2b111073.js';
+import { d as defineCustomElement$b } from './p-f2fc107c.js';
+import { d as defineCustomElement$a } from './p-9b4a2430.js';
+import { d as defineCustomElement$9 } from './p-498755ab.js';
+import { d as defineCustomElement$8 } from './p-b20e3206.js';
+import { d as defineCustomElement$7 } from './p-79474a9a.js';
+import { d as defineCustomElement$6 } from './p-a071eaed.js';
+import { d as defineCustomElement$5 } from './p-4c8ef04f.js';
+import { d as defineCustomElement$4 } from './p-083143a9.js';
+import { d as defineCustomElement$3 } from './p-edcdcc51.js';
+import { d as defineCustomElement$2 } from './p-c77944e7.js';
+import { d as defineCustomElement$1 } from './p-45ff39e4.js';
 
 const styleCss = ".sc-smoothly-input-demo-standard-h{width:50%;margin:auto}.sc-smoothly-input-demo-standard-h h2.sc-smoothly-input-demo-standard,.sc-smoothly-input-demo-standard-h p.sc-smoothly-input-demo-standard{margin:.5rem 0}div.input-wrapper.sc-smoothly-input-demo-standard{display:grid;margin-top:1rem;grid-template-columns:2fr 1fr;gap:1rem;position:relative;justify-content:space-around}div.input-wrapper.sc-smoothly-input-demo-standard>[name].sc-smoothly-input-demo-standard{grid-column:1 / 2}div.input-wrapper.sc-smoothly-input-demo-standard>.width.sc-smoothly-input-demo-standard{width:100%;text-align:center;border-bottom:1px dashed black}div.input-wrapper.sc-smoothly-input-demo-standard>.height.sc-smoothly-input-demo-standard{align-content:center;grid-column:2 / 3;border-left:1px dashed black;padding-left:1rem;content:\"hello\"}div.input-wrapper.sc-smoothly-input-demo-standard>.left-padding.sc-smoothly-input-demo-standard{width:0.5rem;grid-column:1 / 2;white-space:nowrap;overflow:visible;position:relative;cursor:default}div.input-wrapper.sc-smoothly-input-demo-standard>.left-padding.sc-smoothly-input-demo-standard::before{content:\"\";position:absolute;width:100%;top:1.5rem;bottom:-1rem;border:1px  dashed black;z-index:2}div.input-wrapper.sc-smoothly-input-demo-standard>.left-padding.sc-smoothly-input-demo-standard:hover::before{bottom:-100vh}.vertical.sc-smoothly-input-demo-standard-h{width:100%;row-gap:0;position:relative}.vertical.sc-smoothly-input-demo-standard-h>div.input-wrapper.sc-smoothly-input-demo-standard{display:grid;grid-template-columns:repeat(auto-fill, 14rem);gap:.5rem}.vertical.sc-smoothly-input-demo-standard-h>div.input-wrapper.sc-smoothly-input-demo-standard>.width.sc-smoothly-input-demo-standard,.vertical.sc-smoothly-input-demo-standard-h>div.input-wrapper.sc-smoothly-input-demo-standard>.height.sc-smoothly-input-demo-standard,.vertical.sc-smoothly-input-demo-standard-h>div.input-wrapper.sc-smoothly-input-demo-standard>.left-padding.sc-smoothly-input-demo-standard{display:none}.vertical.sc-smoothly-input-demo-standard-h>div.input-wrapper.sc-smoothly-input-demo-standard>.guide-lines.sc-smoothly-input-demo-standard::before,.vertical.sc-smoothly-input-demo-standard-h>div.input-wrapper.sc-smoothly-input-demo-standard>.guide-lines.sc-smoothly-input-demo-standard::after{content:\"\";pointer-events:none;right:0;width:100vw;position:absolute;z-index:2;border-top:1px dotted black}.sc-smoothly-input-demo-standard-h:not(.vertical) .guide-lines.sc-smoothly-input-demo-standard{display:none}.guide-lines.sc-smoothly-input-demo-standard{text-align:end;justify-self:center;align-content:center}.guide-lines.sc-smoothly-input-demo-standard::before{top:1rem}.guide-lines.sc-smoothly-input-demo-standard::after{top:2rem}.guide-lines.show-label.sc-smoothly-input-demo-standard::before{top:1.05rem}.guide-lines.show-label.sc-smoothly-input-demo-standard::after{top:2.3rem}";
 const SmoothlyInputDemoStandardStyle0 = styleCss;
@@ -52,7 +52,7 @@ const SmoothlyInputDemoStandard = proxyCustomElement(class SmoothlyInputDemoStan
     }
     render() {
         const placeholder = this.options.placeholder ? "placeholder" : undefined;
-        return (h(Host, { key: '5264c1c9cf0f92f86ff0d368522287f8580122c2', class: { vertical: !!this.options.vertical } }, h("div", { key: 'ffafa5f6546434d2287a1f07469a8e251e9cde9f', class: "description" }, h("h2", { key: 'bccc24c712d54c8b6efc2308a8ac73c9f6fda677' }, "Input Standard"), h("p", { key: '4955d39f7be77b2c88ba56d759d386a8f389b797' }, "Height of input should be ", h("code", { key: '2cba3f4631613cf6c1892c678cf3b6d2489c610a' }, "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: '1ede0f00d2816bb598704f5ad828a95410fffb1e', looks: "grid", onSmoothlyFormInput: (e) => (this.options = e.detail) }, h("smoothly-input-select", { key: '0d7dfc6ef6b3df8c79f863b4c4849d6eea0cf4d8', name: "looks" }, h("span", { key: '3815a6dfb52bcdc791082f5c7aa6dab4ccca9047', slot: "label" }, "Looks"), Looks.types.map(l => (h("smoothly-item", { value: l }, l)))), h("smoothly-input-checkbox", { key: '1849cc0bfa3811add3bba272ce7eb36932b5f4ab', name: "readonly" }, "Readonly"), h("smoothly-input-select", { key: '37de4eaca616147ea628e0005e1066b0db500853', name: "color" }, h("span", { key: '135dac6d13c87b5a70e76fcca9ecea2187bb6012', slot: "label" }, "Color"), Color.types.map(c => (h("smoothly-item", { value: c }, h("span", { color: c }, c)))), h("smoothly-input-clear", { key: '87af07afc6a4a46c8cc785d477a333745e843e53', slot: "end" })), h("smoothly-input-checkbox", { key: '1d58c89cb01bcc24a928495ca511c38856c0215d', name: "vertical" }, "Vertical Layout"), h("smoothly-input-checkbox", { key: 'f6fbabb433bd48583aebca2d12ccb47f819dbb98', name: "showLabel", checked: this.options.showLabel }, "Show Label"), h("smoothly-input-checkbox", { key: '78b1007ac65662cdc82794bf4319267a3cb230a4', name: "placeholder", checked: this.options.placeholder }, "Placeholder"), h("smoothly-input-range", { key: '0d67c1750a475010c2f555c6d7ffa56f9b616843', label: "Border Radius (rem)", name: "borderRadius", value: this.options.borderRadius, min: 0, max: 2, step: 0.25 }))), h("div", { key: '4ff5e67eb421082c3010756b918ab8788dbbd81e', class: "input-wrapper", style: { "--smoothly-input-border-radius": `${this.options.borderRadius}rem` } }, h("div", { key: '09fcde40dd103c81c550ca71bd96e522c840ca4c', class: "width" }, "100%"), h("div", { key: 'd5a14854ee79918e0857d533e37221c5ee088d4d', class: "left-padding" }, "0.5rem - left padding"), h("smoothly-input", { key: 'a126b8db655f22b7daf861eece15b3f031cbc605', name: "text", looks: this.options.looks, placeholder: placeholder, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '33f2cc7f357a3846ccbcaa75201ae42aa369fe1c' }, "Text"), h("smoothly-input-clear", { key: '7b06802ce6ec1cf6e66464454f7e2c08c5509cea', slot: "end" })), h("div", { key: '74036c4691e7dec9f203a6a36987cec8644b7b17', class: "height" }), h("smoothly-input-select", { key: 'd24c977332de2ac0d09e08736dbe68c54fe82f42', name: "month", looks: this.options.looks, placeholder: placeholder, readonly: this.options.readonly, color: this.options.color }, this.options.showLabel && h("label", { key: '5413660ea9e0d9779811ce432ea958cd83d9ebed', slot: "label" }, "Select"), h("smoothly-item", { key: '2ac5c27083962fa8e1a25c5d15d3843a34d02b41', value: "1" }, "January"), h("smoothly-item", { key: '521a8845b6f331ddf040ee52c1f7724fd94f64d3', value: "2" }, "February"), h("smoothly-item", { key: '637195be2eb8ebe0faf80b7fb1c5d3860d33df80', value: "3" }, "March"), h("smoothly-item", { key: '2527e90e5171d97f3bc8b072d03d561c021188bc', value: "4" }, "April"), h("smoothly-item", { key: '5ba652f3e666f2afba3a945bfc674af42fdff10b', value: "5" }, "May"), h("smoothly-item", { key: 'e8898598c2132dc1e3dc47bf8b34443d217fdb6d', value: "6" }, "June"), h("smoothly-item", { key: '8c1797ec614431add028845b98b32d264a36a036', value: "7" }, "July"), h("smoothly-item", { key: '62ac28227f5a066bb5073f1fd90b0b4b1efd3afa', value: "8" }, "August"), h("smoothly-item", { key: '70764eeca66cf56ca620cdb1d963d56defdbdb83', value: "9" }, "September"), h("smoothly-item", { key: '4d132d530b45db4f8829bfe2bf25afc13a38e158', value: "10" }, "October"), h("smoothly-item", { key: 'a4d1ef299f0da9db3bd9973c8452e037c0173305', value: "11" }, "November"), h("smoothly-item", { key: '9e72c334c00b4cdcc74fe00086b2a028e33b6408', value: "12" }, "December"), h("smoothly-input-clear", { key: '1cf2720994c6f70830425ca2066ad370502dbc65', slot: "end" })), h("div", { key: '7b2bd944723409bc21be49273dee40dbe88e8e69', class: "height" }), h("smoothly-input-checkbox", { key: '648dbe1784e117de725a16ba4f70b3c8310c415e', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color }, "Check"), h("div", { key: 'd83bdbe0e7deafdaf375fc92bed15185315f1120', class: "height" }), h("smoothly-input-radio", { key: '2d9a8f739f4177bbebb8a3c7f7e4d51accb4a269', 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: '8e7b75b87d6b097a2820c1f63fbff106c0b3cac2', slot: "label" }, "Radio"), h("smoothly-input-radio-item", { key: '84f9d894f3608bbf6f6fd18166f148142cd59460', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: 'f2a62709db12077c1e46d70737a2de14792cf4e0', selected: true, value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '805e4c62d987029192f924a6e305451abcb95feb', value: "third" }, "Label 3"), h("smoothly-input-clear", { key: '845398abbf6f72f30060b7e080b2e9d024ab2e45', slot: "end" })), h("div", { key: '9b32f05a7587f50d6f02d5606f275f8b636745d8', class: "height" }), h("smoothly-input-file", { key: '05d07fd09bc51cf12855458bfeacb0a9a6f661e9', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, placeholder: placeholder, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '696715b9f104cceb8b20b46f8ca0a1eefecc34b6', slot: "label" }, "File"), h("smoothly-input-clear", { key: '72d276a80a33794c9bcc3e8865ba2c9c2988f6cc', slot: "end" })), h("div", { key: '9dbed3e714e898e5c615b6f24ba5ecdc555c056c', class: "height" }), h("smoothly-input-range", { key: '7357abaf96f5b24b86b150735b9b0c944a642008', 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: '87a942e9be397f8876a099313c67fe292e8f6a34', slot: "end" })), h("div", { key: 'f29eea42ea273adf8014fc721040994704c053fa', class: "height" }), h("smoothly-input-color", { key: 'b97507b13cb5d9d256466c08981980a8299bf999', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '31bcb93fc12b7d03b0aa0a731d769850ec9ae2ec' }, "Color"), h("smoothly-input-clear", { key: 'c12b3d0d204f98c05c27e3df8200bd88b13baae7', slot: "end" })), h("div", { key: '41543b5fae1c2e80c6e249f6d2927c56fc92687c', class: "height" }), h("smoothly-input-date", { key: '4ea99e2b45a8d67fb109177f828dbfcef5a0b97a', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: 'e570d7d9be3c0de7f94253d830fd1915c09f649c' }, "Date"), h("smoothly-input-clear", { key: 'adf60c1a6e47fd6bb04c44a00b485922148a7c59', slot: "end" })), h("div", { key: '8cf5257d16d031fb2f8b5da4f43b18d6ceb51bd5', class: "height" }), h("smoothly-input-date-range", { key: '9b658f7d3a95228035d1a431ef44ee4a7e9d7e4e', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, placeholder: placeholder, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '370a96c354d6e8cb3ef2b50f390deda2dca7e793' }, "Date Range"), h("smoothly-input-clear", { key: '1735d46c5dd3d104680cf0f44768a8d524c5c294', slot: "end" })), h("div", { key: '8bc4fbd1c76eaeaccecf66bb390332d908adaead', class: "height" }), h("div", { key: '999019f00da141e750ee11e5c891e5b85f10ce7d', class: { "guide-lines": true, "show-label": !!this.options.showLabel } }, this.options.showLabel ? "Aligned labels & values" : "Center values"))));
+        return (h(Host, { key: '044fa8c4b9d8f5e7bfc3e57e4ec8c5549da8a011', class: { vertical: !!this.options.vertical } }, h("div", { key: '3662aa7286e3c71ee96b38446ed734c370ad11fe', class: "description" }, h("h2", { key: '831d2d5567a4a520b02730521c8e81a2973eaf5c' }, "Input Standard"), h("p", { key: '05480bcb96442c64da4323f707781d27e3aae2ee' }, "Height of input should be ", h("code", { key: '6c6c7ac45af02f09c11b1a4d62a5164e426a94ec' }, "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: '0ce7d4bd476dfd902f835e858ab5f6ebe645a16f', looks: "grid", onSmoothlyFormInput: (e) => (this.options = e.detail) }, h("smoothly-input-select", { key: '25f2571c6d3f5ddbc9efd0899756024010e2773d', name: "looks" }, h("span", { key: 'ec4db36ee38f76903ff8df4379af65f2f0766646', slot: "label" }, "Looks"), Looks.types.map(l => (h("smoothly-item", { value: l }, l)))), h("smoothly-input-checkbox", { key: 'ebb2fc0c074c89af17e6df50d38a4caef91024bf', name: "readonly" }, "Readonly"), h("smoothly-input-select", { key: 'bd5cef034392cebc5c6000cd43b7c473368421b0', name: "color" }, h("span", { key: 'b6722cf63cb9f995f829704c21833e20d5d31232', slot: "label" }, "Color"), Color.types.map(c => (h("smoothly-item", { value: c }, h("span", { color: c }, c)))), h("smoothly-input-clear", { key: 'd29d56ccb184ff45572f0b67e6a341a9a1ba2825', slot: "end" })), h("smoothly-input-checkbox", { key: '83d811121a1be17b1fed20014014e5c3c556881e', name: "vertical" }, "Vertical Layout"), h("smoothly-input-checkbox", { key: '68aac64ededa8b02b761f3cd56cb3d6f31b45bdb', name: "showLabel", checked: this.options.showLabel }, "Show Label"), h("smoothly-input-checkbox", { key: '128e2f5022cf0cedc5d2f69195e16458b9fc8c61', name: "placeholder", checked: this.options.placeholder }, "Placeholder"), h("smoothly-input-range", { key: '787c162c2497211a78a0b68d44f6329d0858371b', label: "Border Radius (rem)", name: "borderRadius", value: this.options.borderRadius, min: 0, max: 2, step: 0.25 }))), h("div", { key: '35c08c03e943a73a875ed852d739d738db13fabf', class: "input-wrapper", style: { "--smoothly-input-border-radius": `${this.options.borderRadius}rem` } }, h("div", { key: 'a0564063144d6db7656baff3776990e1ddf7fe70', class: "width" }, "100%"), h("div", { key: 'af1770e8636f7f4864b1e9f8d79d21310fc6d5a5', class: "left-padding" }, "0.5rem - left padding"), h("smoothly-input", { key: '684c9e2fb3f232b3a13b7f87dda970a273e06ffe', name: "text", looks: this.options.looks, placeholder: placeholder, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '56e2def6fb71ab72d3a3f156d674c4f0130b56d8' }, "Text"), h("smoothly-input-clear", { key: '7eba7d6a4953d6198e1fda0ed2fdadc97b1ea3c1', slot: "end" })), h("div", { key: '78a7aae500ccc6197dfc64190a8b5e282adbdb35', class: "height" }), h("smoothly-input-select", { key: '064cbc97f54d9efea21c318c5598c2ea9e6a321e', name: "month", looks: this.options.looks, placeholder: placeholder, readonly: this.options.readonly, color: this.options.color }, this.options.showLabel && h("label", { key: 'ca332bfd4e40666e4454a9b10115f8adc345f6be', slot: "label" }, "Select"), h("smoothly-item", { key: 'c93d3bdbb3f77f4599552638a535bec594847468', value: "1" }, "January"), h("smoothly-item", { key: '0c3d8ecce9c8dff3fe3ac0c13fcbc1d85a8a3d84', value: "2" }, "February"), h("smoothly-item", { key: '47f2a838b2f26507d7f52559f5655dd0f6796b1d', value: "3" }, "March"), h("smoothly-item", { key: '42a4dfe12c71630f4896003dde6b8acd96b02655', value: "4" }, "April"), h("smoothly-item", { key: '4bb5861ee318b39b3ac1fa35ecd4f9b640a8229e', value: "5" }, "May"), h("smoothly-item", { key: '3c43648f442f21c2856d4220aef7f1f622c70507', value: "6" }, "June"), h("smoothly-item", { key: 'd470ea78848fb51a989655d6de6c722cd2aaa9e8', value: "7" }, "July"), h("smoothly-item", { key: '5bf658eb99e5d7ea1db8013de92f23e381d2f8b0', value: "8" }, "August"), h("smoothly-item", { key: 'd494ba5400321c08a46bb542717f734d49d5417d', value: "9" }, "September"), h("smoothly-item", { key: 'c75a04e1aaef26dc8ab3869671db48d2e39c097c', value: "10" }, "October"), h("smoothly-item", { key: '9c996849ae914f908d0719a7cf08415b7509e951', value: "11" }, "November"), h("smoothly-item", { key: '1bbdcd5845e428fbfeb91d773c0198ffb9c1cc60', value: "12" }, "December"), h("smoothly-input-clear", { key: 'cc274431a7236faef0147eef2c29c70403ae44b5', slot: "end" })), h("div", { key: '965e84ff3436d07777084992f391349e3e4e0969', class: "height" }), h("smoothly-input-checkbox", { key: 'e25d58dee03f22d22708da8a26783944da473b19', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color }, "Check"), h("div", { key: 'f429538b28976aa446799e160a909f7b57c69ce9', class: "height" }), h("smoothly-input-radio", { key: '9854849f5c559481ca4c2b9e94f3b690f3818d0b', 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: '318f3a3e48ce06b6af452f717cdc63ca1e3257c7', slot: "label" }, "Radio"), h("smoothly-input-radio-item", { key: 'cb47131f2fbbca8f080277e9185a726f59a8f831', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '221e96bbddd2cfff9f587d1ff4fb1b87cae9bc9f', selected: true, value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: 'e55e72b32046dd8ad8a7cfcb1c851a98ecc90fec', value: "third" }, "Label 3"), h("smoothly-input-clear", { key: '091bd8d97c1181c7cc279e1d3ae9308734408f07', slot: "end" })), h("div", { key: 'db06d7584c5aa208ee858e53f9ed5d0c5e0d95ba', class: "height" }), h("smoothly-input-file", { key: '39b93bde42d37989305380fba2979d33eded3156', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, placeholder: placeholder, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '9c6247a33d43de0e5ed649515f33109caeacbe06', slot: "label" }, "File"), h("smoothly-input-clear", { key: '1671d4ce52d245ee1e4cb0985e74dfc358e7c881', slot: "end" })), h("div", { key: '07677318b0ebcb654d4cdb53440380e1ad37e7a0', class: "height" }), h("smoothly-input-range", { key: '4e284dec0fc57a37eb4ab06d32d01d10ed3a5c6f', 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: 'cdbb48fd450975c3781c6b95bad242634fa080c1', slot: "end" })), h("div", { key: 'c24c1881a74e91831c2e4559ae13505d1027d376', class: "height" }), h("smoothly-input-color", { key: 'b617db1b66a73dfd298aa6a17b48b0a537eec64a', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '21e5c0b4f020c63031da90d7668f70d659eb2bd4' }, "Color"), h("smoothly-input-clear", { key: '33b518103b68f12837a4ee25d5f72ccfcbb3b8e7', slot: "end" })), h("div", { key: 'e7706aa12b6cfabc23ae1d9499641d5b3df6bda2', class: "height" }), h("smoothly-input-date", { key: '47c0964845648b7ff59eafc7d9080692b11f8614', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: '0a85480963e8f78279a9ee5751643576de0c7c26' }, "Date"), h("smoothly-input-clear", { key: '3f1b5355882e84c53bfd571be1ee73754f257bcc', slot: "end" })), h("div", { key: '35a82c5f250b6e4d24ece68a0b02c01e53272441', class: "height" }), h("smoothly-input-date-range", { key: '8c06cad779884cadeaaced5c5f934b16776fca70', looks: this.options.looks, readonly: this.options.readonly, color: this.options.color, placeholder: placeholder, showLabel: this.options.showLabel }, this.options.showLabel && h("span", { key: 'a08d77047d018b960f60754359229a3681f2ce03' }, "Date Range"), h("smoothly-input-clear", { key: '8ba119dc695c705749677ff7eafa7bde2d5eeb5f', slot: "end" })), h("div", { key: '216ac78045d830384411de3d5d2f4ee3bd4bca41', class: "height" }), h("div", { key: '24241b7d95382f3a3cd509e86d4a784195c825ff', class: { "guide-lines": true, "show-label": !!this.options.showLabel } }, this.options.showLabel ? "Aligned labels & values" : "Center values"))));
     }
     get element() { return this; }
     static get style() { return SmoothlyInputDemoStandardStyle0; }
@@ -197,4 +197,4 @@ defineCustomElement();
 
 export { SmoothlyInputDemoStandard as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-ac7fb911.js.map
+//# sourceMappingURL=p-95404634.js.map

package/dist/components/{p-ac7fb911.js.map → p-95404634.js.map}

@@ -1 +1 @@
-{"file":"p-ac7fb911.js","mappings":"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","names":[],"sources":["src/components/input/demo/standard/style.css?tag=smoothly-input-demo-standard&encapsulation=scoped","src/components/input/demo/standard/index.tsx"],"sourcesContent":[":host {\n\twidth: 50%;\n\tmargin: auto;\n}\n\n:host h2,\n:host p {\n\tmargin: .5rem 0;\n}\ndiv.input-wrapper {\n\tdisplay: grid;\n\tmargin-top: 1rem;\n\tgrid-template-columns: 2fr 1fr;\n\tgap: 1rem;\n\tposition: relative;\n\tjustify-content: space-around;\n}\ndiv.input-wrapper > [name] {\n\tgrid-column: 1 / 2;\n}\ndiv.input-wrapper > .width {\n\twidth: 100%;\n\ttext-align: center;\n\tborder-bottom: 1px dashed black;\n}\ndiv.input-wrapper > .height {\n\talign-content: center;\n\tgrid-column: 2 / 3;\n\tborder-left: 1px dashed black;\n\tpadding-left: 1rem;\n\tcontent: \"hello\";\n}\ndiv.input-wrapper > .left-padding {\n\twidth: 0.5rem;\n\tgrid-column: 1 / 2;\n\twhite-space: nowrap;\n\toverflow: visible;\n\tposition: relative;\n\tcursor: default;\n}\ndiv.input-wrapper > .left-padding::before {\n\tcontent: \"\";\n\tposition: absolute;\n\twidth: 100%;\n\ttop: 1.5rem;\n\tbottom: -1rem;\n\tborder: 1px  dashed black;\n\tz-index: 2;\n}\ndiv.input-wrapper > .left-padding:hover::before { \n\tbottom: -100vh;\n}\n\n\n/* --- vertical --- */\n\n:host.vertical {\n\twidth: 100%;\n\trow-gap: 0;\n\tposition: relative;\n}\n:host.vertical > div.input-wrapper {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(auto-fill, 14rem);\n\tgap: .5rem;\n}\n:host.vertical > div.input-wrapper > .width,\n:host.vertical > div.input-wrapper > .height,\n:host.vertical > div.input-wrapper > .left-padding {\n\tdisplay: none;\n}\n\n\n:host.vertical > div.input-wrapper > .guide-lines::before,\n:host.vertical > div.input-wrapper > .guide-lines::after {\n\tcontent: \"\";\n\tpointer-events: none;\n\tright: 0;\n\twidth: 100vw;\n\tposition: absolute;\n\tz-index: 2;\n\tborder-top: 1px dotted black;\n}\n\n:host:not(.vertical) .guide-lines {\n\tdisplay: none;\n}\n\n.guide-lines {\n\ttext-align: end;\n\tjustify-self: center;\n  align-content: center;\n}\n\n.guide-lines::before {\n\ttop: 1rem;\n}\n.guide-lines::after {\n\ttop: 2rem;\n}\n.guide-lines.show-label::before {\n\ttop: 1.05rem;\n}\n.guide-lines.show-label::after {\n\ttop: 2.3rem;\n}\n","import { Component, Element, h, Host, State } from \"@stencil/core\"\nimport { isoly } from \"isoly\"\nimport { Color } from \"../../../../model\"\nimport { Looks } from \"../../Looks\"\n\ntype Options = {\n\tlooks?: Looks\n\treadonly?: boolean\n\tcolor?: Color\n\tvertical?: boolean\n\tshowLabel?: boolean\n\tplaceholder?: boolean\n\tborderRadius?: number\n}\n\n@Component({\n\ttag: \"smoothly-input-demo-standard\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyInputDemoStandard {\n\t@Element() element: HTMLElement\n\t@State() duration: isoly.TimeSpan = { hours: 8 }\n\t@State() options: Options = { showLabel: true }\n\n\tconnectedCallback() {\n\t\tthis.updateInputHeightText()\n\t}\n\tcomponentDidRender() {\n\t\tthis.updateInputHeightText()\n\t}\n\n\tupdateInputHeightText() {\n\t\tconst rootFontSize = Number(getComputedStyle(document.documentElement).fontSize.replace(\"px\", \"\"))\n\t\tthis.element.querySelectorAll(\".height\").forEach((el: HTMLDivElement) => {\n\t\t\tconst height = el.clientHeight\n\t\t\tel.innerHTML = `<b>${height / rootFontSize}rem</b> (${height}pixels)`\n\t\t})\n\t}\n\n\trender() {\n\t\tconst placeholder = this.options.placeholder ? \"placeholder\" : undefined\n\t\treturn (\n\t\t\t<Host class={{ vertical: !!this.options.vertical }}>\n\t\t\t\t<div class=\"description\">\n\t\t\t\t\t<h2>Input Standard</h2>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tHeight of input should be <code>3rem</code> including border. This is should result in a 48 pixel height at\n\t\t\t\t\t\t100% zoom, assuming a root font-size of 16 pixels.\n\t\t\t\t\t</p>\n\t\t\t\t\t<smoothly-form looks={\"grid\"} onSmoothlyFormInput={(e: CustomEvent<Options>) => (this.options = e.detail)}>\n\t\t\t\t\t\t<smoothly-input-select name=\"looks\">\n\t\t\t\t\t\t\t<span slot=\"label\">Looks</span>\n\t\t\t\t\t\t\t{Looks.types.map(l => (\n\t\t\t\t\t\t\t\t<smoothly-item value={l}>{l}</smoothly-item>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t\t<smoothly-input-checkbox name=\"readonly\">Readonly</smoothly-input-checkbox>\n\t\t\t\t\t\t<smoothly-input-select name=\"color\">\n\t\t\t\t\t\t\t<span slot=\"label\">Color</span>\n\t\t\t\t\t\t\t{Color.types.map(c => (\n\t\t\t\t\t\t\t\t<smoothly-item value={c}>\n\t\t\t\t\t\t\t\t\t<span color={c}>{c}</span>\n\t\t\t\t\t\t\t\t</smoothly-item>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t<smoothly-input-clear slot=\"end\" />\n\t\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t\t<smoothly-input-checkbox name=\"vertical\">Vertical Layout</smoothly-input-checkbox>\n\t\t\t\t\t\t<smoothly-input-checkbox name=\"showLabel\" checked={this.options.showLabel}>\n\t\t\t\t\t\t\tShow Label\n\t\t\t\t\t\t</smoothly-input-checkbox>\n\t\t\t\t\t\t<smoothly-input-checkbox name=\"placeholder\" checked={this.options.placeholder}>\n\t\t\t\t\t\t\tPlaceholder\n\t\t\t\t\t\t</smoothly-input-checkbox>\n\t\t\t\t\t\t<smoothly-input-range\n\t\t\t\t\t\t\tlabel={\"Border Radius (rem)\"}\n\t\t\t\t\t\t\tname={\"borderRadius\"}\n\t\t\t\t\t\t\tvalue={this.options.borderRadius}\n\t\t\t\t\t\t\tmin={0}\n\t\t\t\t\t\t\tmax={2}\n\t\t\t\t\t\t\tstep={0.25}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</smoothly-form>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"input-wrapper\" style={{ \"--smoothly-input-border-radius\": `${this.options.borderRadius}rem` }}>\n\t\t\t\t\t<div class=\"width\">100%</div>\n\t\t\t\t\t<div class=\"left-padding\">0.5rem - left padding</div>\n\t\t\t\t\t<smoothly-input\n\t\t\t\t\t\tname=\"text\"\n\t\t\t\t\t\tlooks={this.options.looks}\n\t\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\t\treadonly={this.options.readonly}\n\t\t\t\t\t\tcolor={this.options.color}\n\t\t\t\t\t\tshowLabel={this.options.showLabel}>\n\t\t\t\t\t\t{this.options.showLabel && <span>Text</span>}\n\t\t\t\t\t\t<smoothly-input-clear slot=\"end\" />\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<div class=\"height\"></div>\n\n\t\t\t\t\t<smoothly-input-select\n\t\t\t\t\t\tname=\"month\"\n\t\t\t\t\t\tlooks={this.options.looks}\n\t\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\t\treadonly={this.options.readonly}\n\t\t\t\t\t\tcolor={this.options.color}>\n\t\t\t\t\t\t{this.options.showLabel && <label slot=\"label\">Select</label>}\n\t\t\t\t\t\t<smoothly-item value=\"1\">January</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"2\">February</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"3\">March</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"4\">April</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"5\">May</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"6\">June</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"7\">July</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"8\">August</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"9\">September</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"10\">October</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"11\">November</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"12\">December</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<div class=\"height\"></div>\n\n\t\t\t\t\t<smoothly-input-checkbox\n\t\t\t\t\t\tlooks={this.options.looks}\n\t\t\t\t\t\treadonly={this.options.readonly}\n\t\t\t\t\t\tcolor={this.options.color}>\n\t\t\t\t\t\tCheck\n\t\t\t\t\t</smoothly-input-checkbox>\n\t\t\t\t\t<div class=\"height\"></div>\n\n\t\t\t\t\t<smoothly-input-radio\n\t\t\t\t\t\tname=\"radio\"\n\t\t\t\t\t\tclearable\n\t\t\t\t\t\tlooks={this.options.looks}\n\t\t\t\t\t\treadonly={this.options.readonly}\n\t\t\t\t\t\tcolor={this.options.color}\n\t\t\t\t\t\tshowLabel={this.options.showLabel}>\n\t\t\t\t\t\t{this.options.showLabel && <label slot=\"label\">Radio</label>}\n\t\t\t\t\t\t<smoothly-input-radio-item value={\"first\"}>Label 1</smoothly-input-radio-item>\n\t\t\t\t\t\t<smoothly-input-radio-item selected value={\"second\"}>\n\t\t\t\t\t\t\tLabel 2\n\t\t\t\t\t\t</smoothly-input-radio-item>\n\t\t\t\t\t\t<smoothly-input-radio-item value={\"third\"}>Label 3</smoothly-input-radio-item>\n\t\t\t\t\t\t<smoothly-input-clear slot=\"end\" />\n\t\t\t\t\t</smoothly-input-radio>\n\t\t\t\t\t<div class=\"height\"></div>\n\n\t\t\t\t\t<smoothly-input-file\n\t\t\t\t\t\tlooks={this.options.looks}\n\t\t\t\t\t\treadonly={this.options.readonly}\n\t\t\t\t\t\tcolor={this.options.color}\n\t\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\t\tshowLabel={this.options.showLabel}>\n\t\t\t\t\t\t{this.options.showLabel && <span slot={\"label\"}>File</span>}\n\t\t\t\t\t\t<smoothly-input-clear slot=\"end\" />\n\t\t\t\t\t</smoothly-input-file>\n\t\t\t\t\t<div class=\"height\"></div>\n\n\t\t\t\t\t<smoothly-input-range\n\t\t\t\t\t\tname={\"range\"}\n\t\t\t\t\t\tlabel={this.options.showLabel ? \"Range\" : undefined}\n\t\t\t\t\t\tlooks={this.options.looks}\n\t\t\t\t\t\treadonly={this.options.readonly}\n\t\t\t\t\t\tcolor={this.options.color}>\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\t<div class=\"height\"></div>\n\n\t\t\t\t\t<smoothly-input-color\n\t\t\t\t\t\tlooks={this.options.looks}\n\t\t\t\t\t\treadonly={this.options.readonly}\n\t\t\t\t\t\tcolor={this.options.color}\n\t\t\t\t\t\tshowLabel={this.options.showLabel}>\n\t\t\t\t\t\t{this.options.showLabel && <span>Color</span>}\n\t\t\t\t\t\t<smoothly-input-clear slot=\"end\" />\n\t\t\t\t\t</smoothly-input-color>\n\t\t\t\t\t<div class=\"height\"></div>\n\n\t\t\t\t\t<smoothly-input-date\n\t\t\t\t\t\tlooks={this.options.looks}\n\t\t\t\t\t\treadonly={this.options.readonly}\n\t\t\t\t\t\tcolor={this.options.color}\n\t\t\t\t\t\tshowLabel={this.options.showLabel}>\n\t\t\t\t\t\t{this.options.showLabel && <span>Date</span>}\n\t\t\t\t\t\t<smoothly-input-clear slot=\"end\" />\n\t\t\t\t\t</smoothly-input-date>\n\t\t\t\t\t<div class=\"height\"></div>\n\n\t\t\t\t\t<smoothly-input-date-range\n\t\t\t\t\t\tlooks={this.options.looks}\n\t\t\t\t\t\treadonly={this.options.readonly}\n\t\t\t\t\t\tcolor={this.options.color}\n\t\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\t\tshowLabel={this.options.showLabel}>\n\t\t\t\t\t\t{this.options.showLabel && <span>Date Range</span>}\n\t\t\t\t\t\t<smoothly-input-clear slot=\"end\" />\n\t\t\t\t\t</smoothly-input-date-range>\n\t\t\t\t\t<div class=\"height\"></div>\n\t\t\t\t\t<div class={{ \"guide-lines\": true, \"show-label\": !!this.options.showLabel }}>\n\t\t\t\t\t\t{this.options.showLabel ? \"Aligned labels & values\" : \"Center values\"}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}
+{"file":"p-95404634.js","mappings":"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","names":[],"sources":["src/components/input/demo/standard/style.css?tag=smoothly-input-demo-standard&encapsulation=scoped","src/components/input/demo/standard/index.tsx"],"sourcesContent":[":host {\n\twidth: 50%;\n\tmargin: auto;\n}\n\n:host h2,\n:host p {\n\tmargin: .5rem 0;\n}\ndiv.input-wrapper {\n\tdisplay: grid;\n\tmargin-top: 1rem;\n\tgrid-template-columns: 2fr 1fr;\n\tgap: 1rem;\n\tposition: relative;\n\tjustify-content: space-around;\n}\ndiv.input-wrapper > [name] {\n\tgrid-column: 1 / 2;\n}\ndiv.input-wrapper > .width {\n\twidth: 100%;\n\ttext-align: center;\n\tborder-bottom: 1px dashed black;\n}\ndiv.input-wrapper > .height {\n\talign-content: center;\n\tgrid-column: 2 / 3;\n\tborder-left: 1px dashed black;\n\tpadding-left: 1rem;\n\tcontent: \"hello\";\n}\ndiv.input-wrapper > .left-padding {\n\twidth: 0.5rem;\n\tgrid-column: 1 / 2;\n\twhite-space: nowrap;\n\toverflow: visible;\n\tposition: relative;\n\tcursor: default;\n}\ndiv.input-wrapper > .left-padding::before {\n\tcontent: \"\";\n\tposition: absolute;\n\twidth: 100%;\n\ttop: 1.5rem;\n\tbottom: -1rem;\n\tborder: 1px  dashed black;\n\tz-index: 2;\n}\ndiv.input-wrapper > .left-padding:hover::before { \n\tbottom: -100vh;\n}\n\n\n/* --- vertical --- */\n\n:host.vertical {\n\twidth: 100%;\n\trow-gap: 0;\n\tposition: relative;\n}\n:host.vertical > div.input-wrapper {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(auto-fill, 14rem);\n\tgap: .5rem;\n}\n:host.vertical > div.input-wrapper > .width,\n:host.vertical > div.input-wrapper > .height,\n:host.vertical > div.input-wrapper > .left-padding {\n\tdisplay: none;\n}\n\n\n:host.vertical > div.input-wrapper > .guide-lines::before,\n:host.vertical > div.input-wrapper > .guide-lines::after {\n\tcontent: \"\";\n\tpointer-events: none;\n\tright: 0;\n\twidth: 100vw;\n\tposition: absolute;\n\tz-index: 2;\n\tborder-top: 1px dotted black;\n}\n\n:host:not(.vertical) .guide-lines {\n\tdisplay: none;\n}\n\n.guide-lines {\n\ttext-align: end;\n\tjustify-self: center;\n  align-content: center;\n}\n\n.guide-lines::before {\n\ttop: 1rem;\n}\n.guide-lines::after {\n\ttop: 2rem;\n}\n.guide-lines.show-label::before {\n\ttop: 1.05rem;\n}\n.guide-lines.show-label::after {\n\ttop: 2.3rem;\n}\n","import { Component, Element, h, Host, State } from \"@stencil/core\"\nimport { isoly } from \"isoly\"\nimport { Color } from \"../../../../model\"\nimport { Looks } from \"../../Looks\"\n\ntype Options = {\n\tlooks?: Looks\n\treadonly?: boolean\n\tcolor?: Color\n\tvertical?: boolean\n\tshowLabel?: boolean\n\tplaceholder?: boolean\n\tborderRadius?: number\n}\n\n@Component({\n\ttag: \"smoothly-input-demo-standard\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyInputDemoStandard {\n\t@Element() element: HTMLElement\n\t@State() duration: isoly.TimeSpan = { hours: 8 }\n\t@State() options: Options = { showLabel: true }\n\n\tconnectedCallback() {\n\t\tthis.updateInputHeightText()\n\t}\n\tcomponentDidRender() {\n\t\tthis.updateInputHeightText()\n\t}\n\n\tupdateInputHeightText() {\n\t\tconst rootFontSize = Number(getComputedStyle(document.documentElement).fontSize.replace(\"px\", \"\"))\n\t\tthis.element.querySelectorAll(\".height\").forEach((el: HTMLDivElement) => {\n\t\t\tconst height = el.clientHeight\n\t\t\tel.innerHTML = `<b>${height / rootFontSize}rem</b> (${height}pixels)`\n\t\t})\n\t}\n\n\trender() {\n\t\tconst placeholder = this.options.placeholder ? \"placeholder\" : undefined\n\t\treturn (\n\t\t\t<Host class={{ vertical: !!this.options.vertical }}>\n\t\t\t\t<div class=\"description\">\n\t\t\t\t\t<h2>Input Standard</h2>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tHeight of input should be <code>3rem</code> including border. This is should result in a 48 pixel height at\n\t\t\t\t\t\t100% zoom, assuming a root font-size of 16 pixels.\n\t\t\t\t\t</p>\n\t\t\t\t\t<smoothly-form looks={\"grid\"} onSmoothlyFormInput={(e: CustomEvent<Options>) => (this.options = e.detail)}>\n\t\t\t\t\t\t<smoothly-input-select name=\"looks\">\n\t\t\t\t\t\t\t<span slot=\"label\">Looks</span>\n\t\t\t\t\t\t\t{Looks.types.map(l => (\n\t\t\t\t\t\t\t\t<smoothly-item value={l}>{l}</smoothly-item>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t\t<smoothly-input-checkbox name=\"readonly\">Readonly</smoothly-input-checkbox>\n\t\t\t\t\t\t<smoothly-input-select name=\"color\">\n\t\t\t\t\t\t\t<span slot=\"label\">Color</span>\n\t\t\t\t\t\t\t{Color.types.map(c => (\n\t\t\t\t\t\t\t\t<smoothly-item value={c}>\n\t\t\t\t\t\t\t\t\t<span color={c}>{c}</span>\n\t\t\t\t\t\t\t\t</smoothly-item>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t<smoothly-input-clear slot=\"end\" />\n\t\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t\t<smoothly-input-checkbox name=\"vertical\">Vertical Layout</smoothly-input-checkbox>\n\t\t\t\t\t\t<smoothly-input-checkbox name=\"showLabel\" checked={this.options.showLabel}>\n\t\t\t\t\t\t\tShow Label\n\t\t\t\t\t\t</smoothly-input-checkbox>\n\t\t\t\t\t\t<smoothly-input-checkbox name=\"placeholder\" checked={this.options.placeholder}>\n\t\t\t\t\t\t\tPlaceholder\n\t\t\t\t\t\t</smoothly-input-checkbox>\n\t\t\t\t\t\t<smoothly-input-range\n\t\t\t\t\t\t\tlabel={\"Border Radius (rem)\"}\n\t\t\t\t\t\t\tname={\"borderRadius\"}\n\t\t\t\t\t\t\tvalue={this.options.borderRadius}\n\t\t\t\t\t\t\tmin={0}\n\t\t\t\t\t\t\tmax={2}\n\t\t\t\t\t\t\tstep={0.25}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</smoothly-form>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"input-wrapper\" style={{ \"--smoothly-input-border-radius\": `${this.options.borderRadius}rem` }}>\n\t\t\t\t\t<div class=\"width\">100%</div>\n\t\t\t\t\t<div class=\"left-padding\">0.5rem - left padding</div>\n\t\t\t\t\t<smoothly-input\n\t\t\t\t\t\tname=\"text\"\n\t\t\t\t\t\tlooks={this.options.looks}\n\t\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\t\treadonly={this.options.readonly}\n\t\t\t\t\t\tcolor={this.options.color}\n\t\t\t\t\t\tshowLabel={this.options.showLabel}>\n\t\t\t\t\t\t{this.options.showLabel && <span>Text</span>}\n\t\t\t\t\t\t<smoothly-input-clear slot=\"end\" />\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<div class=\"height\"></div>\n\n\t\t\t\t\t<smoothly-input-select\n\t\t\t\t\t\tname=\"month\"\n\t\t\t\t\t\tlooks={this.options.looks}\n\t\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\t\treadonly={this.options.readonly}\n\t\t\t\t\t\tcolor={this.options.color}>\n\t\t\t\t\t\t{this.options.showLabel && <label slot=\"label\">Select</label>}\n\t\t\t\t\t\t<smoothly-item value=\"1\">January</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"2\">February</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"3\">March</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"4\">April</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"5\">May</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"6\">June</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"7\">July</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"8\">August</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"9\">September</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"10\">October</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"11\">November</smoothly-item>\n\t\t\t\t\t\t<smoothly-item value=\"12\">December</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<div class=\"height\"></div>\n\n\t\t\t\t\t<smoothly-input-checkbox\n\t\t\t\t\t\tlooks={this.options.looks}\n\t\t\t\t\t\treadonly={this.options.readonly}\n\t\t\t\t\t\tcolor={this.options.color}>\n\t\t\t\t\t\tCheck\n\t\t\t\t\t</smoothly-input-checkbox>\n\t\t\t\t\t<div class=\"height\"></div>\n\n\t\t\t\t\t<smoothly-input-radio\n\t\t\t\t\t\tname=\"radio\"\n\t\t\t\t\t\tclearable\n\t\t\t\t\t\tlooks={this.options.looks}\n\t\t\t\t\t\treadonly={this.options.readonly}\n\t\t\t\t\t\tcolor={this.options.color}\n\t\t\t\t\t\tshowLabel={this.options.showLabel}>\n\t\t\t\t\t\t{this.options.showLabel && <label slot=\"label\">Radio</label>}\n\t\t\t\t\t\t<smoothly-input-radio-item value={\"first\"}>Label 1</smoothly-input-radio-item>\n\t\t\t\t\t\t<smoothly-input-radio-item selected value={\"second\"}>\n\t\t\t\t\t\t\tLabel 2\n\t\t\t\t\t\t</smoothly-input-radio-item>\n\t\t\t\t\t\t<smoothly-input-radio-item value={\"third\"}>Label 3</smoothly-input-radio-item>\n\t\t\t\t\t\t<smoothly-input-clear slot=\"end\" />\n\t\t\t\t\t</smoothly-input-radio>\n\t\t\t\t\t<div class=\"height\"></div>\n\n\t\t\t\t\t<smoothly-input-file\n\t\t\t\t\t\tlooks={this.options.looks}\n\t\t\t\t\t\treadonly={this.options.readonly}\n\t\t\t\t\t\tcolor={this.options.color}\n\t\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\t\tshowLabel={this.options.showLabel}>\n\t\t\t\t\t\t{this.options.showLabel && <span slot={\"label\"}>File</span>}\n\t\t\t\t\t\t<smoothly-input-clear slot=\"end\" />\n\t\t\t\t\t</smoothly-input-file>\n\t\t\t\t\t<div class=\"height\"></div>\n\n\t\t\t\t\t<smoothly-input-range\n\t\t\t\t\t\tname={\"range\"}\n\t\t\t\t\t\tlabel={this.options.showLabel ? \"Range\" : undefined}\n\t\t\t\t\t\tlooks={this.options.looks}\n\t\t\t\t\t\treadonly={this.options.readonly}\n\t\t\t\t\t\tcolor={this.options.color}>\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\t<div class=\"height\"></div>\n\n\t\t\t\t\t<smoothly-input-color\n\t\t\t\t\t\tlooks={this.options.looks}\n\t\t\t\t\t\treadonly={this.options.readonly}\n\t\t\t\t\t\tcolor={this.options.color}\n\t\t\t\t\t\tshowLabel={this.options.showLabel}>\n\t\t\t\t\t\t{this.options.showLabel && <span>Color</span>}\n\t\t\t\t\t\t<smoothly-input-clear slot=\"end\" />\n\t\t\t\t\t</smoothly-input-color>\n\t\t\t\t\t<div class=\"height\"></div>\n\n\t\t\t\t\t<smoothly-input-date\n\t\t\t\t\t\tlooks={this.options.looks}\n\t\t\t\t\t\treadonly={this.options.readonly}\n\t\t\t\t\t\tcolor={this.options.color}\n\t\t\t\t\t\tshowLabel={this.options.showLabel}>\n\t\t\t\t\t\t{this.options.showLabel && <span>Date</span>}\n\t\t\t\t\t\t<smoothly-input-clear slot=\"end\" />\n\t\t\t\t\t</smoothly-input-date>\n\t\t\t\t\t<div class=\"height\"></div>\n\n\t\t\t\t\t<smoothly-input-date-range\n\t\t\t\t\t\tlooks={this.options.looks}\n\t\t\t\t\t\treadonly={this.options.readonly}\n\t\t\t\t\t\tcolor={this.options.color}\n\t\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\t\tshowLabel={this.options.showLabel}>\n\t\t\t\t\t\t{this.options.showLabel && <span>Date Range</span>}\n\t\t\t\t\t\t<smoothly-input-clear slot=\"end\" />\n\t\t\t\t\t</smoothly-input-date-range>\n\t\t\t\t\t<div class=\"height\"></div>\n\t\t\t\t\t<div class={{ \"guide-lines\": true, \"show-label\": !!this.options.showLabel }}>\n\t\t\t\t\t\t{this.options.showLabel ? \"Aligned labels & values\" : \"Center values\"}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}

package/dist/components/{p-d09d31f6.js → p-969f9875.js}

@@ -26,7 +26,7 @@ const TableRow = proxyCustomElement(class TableRow extends H {
             (_a = this.element) === null || _a === void 0 ? void 0 : _a.after(event.detail);
     }
     render() {
-        return (h("div", { key: 'f4016ec2ba8f871c843780d4d86306344f0a7b42', ref: e => (this.element = e) }, h("slot", { key: 'd02e94248182106e5ccb3da95370c2bd7a4e9b75' })));
+        return (h("div", { key: '52a85d45e77f78a479c1e314650c38b7b97502e4', ref: e => (this.element = e) }, h("slot", { key: '7438dcbe1986dd6d286cd9c2961d51a34f181c37' })));
     }
     static get style() { return SmoothlyTableRowStyle0; }
 }, [6, "smoothly-table-row", {
@@ -49,4 +49,4 @@ defineCustomElement();
 
 export { TableRow as T, defineCustomElement as d };
 
-//# sourceMappingURL=p-d09d31f6.js.map
+//# sourceMappingURL=p-969f9875.js.map

package/dist/components/{p-d09d31f6.js.map → p-969f9875.js.map}

@@ -1 +1 @@
-{"file":"p-d09d31f6.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,kMAAkM,CAAC;AACpN,+BAAe,QAAQ;;MCMV,QAAQ;;;;QAGpB,eAAU,GAA6C,EAAE,CAAA;oBADV,KAAK;;IAGpD,eAAe,CAAC,KAAwB;QACvC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,MAAgD,CAAC,CAAA;KAC5E;IAED,iBAAiB;QAChB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,IAAI,SAAS,CAAC,IAAI,CAAC,CAAA;KAC7D;IAED,eAAe,CAAC,KAA2C;;QAC1D,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI;YAC3B,IAAI,IAAI,IAAI,KAAK,CAAC,MAAM;gBACvB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAA;SAClB,CAAC,CAAA;QACF,IAAI,KAAK,CAAC,MAAM;YACf,MAAA,IAAI,CAAC,OAAO,0CAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;KAClC;IACD,MAAM;QACL,QACC,4DAAK,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,IAChC,8DAAa,CACR,EACN;KACD;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/table/row/style.css?tag=smoothly-table-row&encapsulation=scoped","src/components/table/row/index.tsx"],"sourcesContent":[":host {\n\tdisplay: table-row-group;\n\tcursor: default;\n\tline-height: 1.5rem;\n}\n.hide {\n\tdisplay: none;\n}\n:host > div {\n\tdisplay: contents;\n}\n","import { Component, h, Listen, Prop } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-table-row\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class TableRow {\n\tprivate element?: HTMLElement\n\t@Prop({ reflect: true, mutable: true }) open = false\n\texpansions: HTMLSmoothlyTableExpandableCellElement[] = []\n\t@Listen(\"smoothlyExpansionLoad\")\n\tonExpansionLoad(event: CustomEvent<void>) {\n\t\tthis.expansions.push(event.target as HTMLSmoothlyTableExpandableCellElement)\n\t}\n\t@Listen(\"smoothlyExpandableChange\")\n\tonExpansionChange() {\n\t\tthis.open = this.expansions.some(expansion => expansion.open)\n\t}\n\t@Listen(\"smoothlyExpansionOpen\")\n\tonExpansionOpen(event: CustomEvent<HTMLElement | undefined>) {\n\t\tthis.expansions.forEach(cell => {\n\t\t\tif (cell != event.target)\n\t\t\t\tcell.open = false\n\t\t})\n\t\tif (event.detail)\n\t\t\tthis.element?.after(event.detail)\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<div ref={e => (this.element = e)}>\n\t\t\t\t<slot></slot>\n\t\t\t</div>\n\t\t)\n\t}\n}\n"],"version":3}
+{"file":"p-969f9875.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,kMAAkM,CAAC;AACpN,+BAAe,QAAQ;;MCMV,QAAQ;;;;QAGpB,eAAU,GAA6C,EAAE,CAAA;oBADV,KAAK;;IAGpD,eAAe,CAAC,KAAwB;QACvC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,MAAgD,CAAC,CAAA;KAC5E;IAED,iBAAiB;QAChB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,IAAI,SAAS,CAAC,IAAI,CAAC,CAAA;KAC7D;IAED,eAAe,CAAC,KAA2C;;QAC1D,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI;YAC3B,IAAI,IAAI,IAAI,KAAK,CAAC,MAAM;gBACvB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAA;SAClB,CAAC,CAAA;QACF,IAAI,KAAK,CAAC,MAAM;YACf,MAAA,IAAI,CAAC,OAAO,0CAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;KAClC;IACD,MAAM;QACL,QACC,4DAAK,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,IAChC,8DAAa,CACR,EACN;KACD;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/table/row/style.css?tag=smoothly-table-row&encapsulation=scoped","src/components/table/row/index.tsx"],"sourcesContent":[":host {\n\tdisplay: table-row-group;\n\tcursor: default;\n\tline-height: 1.5rem;\n}\n.hide {\n\tdisplay: none;\n}\n:host > div {\n\tdisplay: contents;\n}\n","import { Component, h, Listen, Prop } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-table-row\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class TableRow {\n\tprivate element?: HTMLElement\n\t@Prop({ reflect: true, mutable: true }) open = false\n\texpansions: HTMLSmoothlyTableExpandableCellElement[] = []\n\t@Listen(\"smoothlyExpansionLoad\")\n\tonExpansionLoad(event: CustomEvent<void>) {\n\t\tthis.expansions.push(event.target as HTMLSmoothlyTableExpandableCellElement)\n\t}\n\t@Listen(\"smoothlyExpandableChange\")\n\tonExpansionChange() {\n\t\tthis.open = this.expansions.some(expansion => expansion.open)\n\t}\n\t@Listen(\"smoothlyExpansionOpen\")\n\tonExpansionOpen(event: CustomEvent<HTMLElement | undefined>) {\n\t\tthis.expansions.forEach(cell => {\n\t\t\tif (cell != event.target)\n\t\t\t\tcell.open = false\n\t\t})\n\t\tif (event.detail)\n\t\t\tthis.element?.after(event.detail)\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<div ref={e => (this.element = e)}>\n\t\t\t\t<slot></slot>\n\t\t\t</div>\n\t\t)\n\t}\n}\n"],"version":3}

package/dist/components/{p-6ead1a42.js → p-96acfe2c.js}

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, h as h$1, d as Host } from './p-f765921a.js';
 import { h } from './p-8dea8179.js';
 import { o as object } from './p-d471066b.js';
-import { d as defineCustomElement$2 } from './p-2020cb82.js';
-import { d as defineCustomElement$1 } from './p-b4bb3e74.js';
+import { d as defineCustomElement$2 } from './p-f46dd8e4.js';
+import { d as defineCustomElement$1 } from './p-4c6fe645.js';
 
 const JsonValue = ({ value, collapseDepth }) => {
     return object().is(value) || Array.isArray(value) ? (h("smoothly-display-json-object", { value: value, collapseDepth: collapseDepth })) : (h("smoothly-display-json-primitive", { value: value }));
@@ -38,9 +38,9 @@ const SmoothlyDisplayJsonObject = proxyCustomElement(class SmoothlyDisplayJsonOb
     }
     render() {
         const nextCollapseDepth = typeof this.collapseDepth == "number" ? Math.max(this.collapseDepth - 1, 0) : undefined;
-        return (h$1(Host, { key: '096aba61e52c82b8fbddfa73b76ad5378898997b', class: { empty: this.empty, open: this.open } }, h$1("span", { key: '23b082be0c70e647b622f876ce92a91aebcdfcd5', class: "open-bracket", onClick: () => (this.open = !this.open), "data-length": this.length }, this.openBracket), h$1("span", { key: '851efa46e336cdcd39eb20b08106b37cf3189c53', class: "content" }, Array.isArray(this.value)
+        return (h$1(Host, { key: 'f0d5f6e755c48269ebeddd210961a91a45ac637c', class: { empty: this.empty, open: this.open } }, h$1("span", { key: '9d8da480999cb92e162e1472c4cf0c4253033553', class: "open-bracket", onClick: () => (this.open = !this.open), "data-length": this.length }, this.openBracket), h$1("span", { key: '4e540c3b7ab63546106d485b5e88849be5e497a3', class: "content" }, Array.isArray(this.value)
             ? this.value.map(v => (h$1("div", { class: "indent" }, h$1(JsonValue, { value: v, collapseDepth: nextCollapseDepth }), h$1("span", { class: "comma" }, ","))))
-            : Object.entries(this.value).map(([k, v]) => (h$1("div", { class: "indent" }, h$1("smoothly-display-json-record-key", { value: k }), ":", " ", h$1(JsonValue, { value: v, collapseDepth: nextCollapseDepth }), h$1("span", { class: "comma" }, ","))))), h$1("span", { key: 'ea5f8fbd4f35a2c5a462c66fbb9133f806655e64' }, this.closeBracket)));
+            : Object.entries(this.value).map(([k, v]) => (h$1("div", { class: "indent" }, h$1("smoothly-display-json-record-key", { value: k }), ":", " ", h$1(JsonValue, { value: v, collapseDepth: nextCollapseDepth }), h$1("span", { class: "comma" }, ","))))), h$1("span", { key: 'b8bd52db35dcf7bc14de9fdfe3b928eebdc04d7a' }, this.closeBracket)));
     }
     static get style() { return SmoothlyDisplayJsonObjectStyle0; }
 }, [2, "smoothly-display-json-object", {
@@ -81,4 +81,4 @@ defineCustomElement();
 
 export { JsonValue as J, SmoothlyDisplayJsonObject as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-6ead1a42.js.map
+//# sourceMappingURL=p-96acfe2c.js.map

package/dist/components/{p-6ead1a42.js.map → p-96acfe2c.js.map}

@@ -1 +1 @@
-{"file":"p-6ead1a42.js","mappings":";;;;;;MAGa,SAAS,GAAgE,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE;IAC9G,OAAOA,MAAW,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IACrD,oCAA8B,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,aAAa,GAAI,KAE5E,uCAAiC,KAAK,EAAE,KAAK,GAAI,CACjD,CAAA;AACF;;ACTA,MAAM,QAAQ,GAAG,o/BAAo/B,CAAC;AACtgC,wCAAe,QAAQ;;MCOV,yBAAyB;;;;QAK7B,gBAAW,GAAW,EAAE,CAAA;QACxB,iBAAY,GAAW,EAAE,CAAA;;;;;;IAGjC,iBAAiB;QAChB,IAAI,CAAC,IAAI,GAAG,OAAO,IAAI,CAAC,aAAa,IAAI,QAAQ,GAAG,IAAI,CAAC,aAAa,GAAG,CAAC,GAAG,IAAI,CAAA;QACjF,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;YAC9B,IAAI,CAAC,WAAW,GAAG,GAAG,CAAA;YACtB,IAAI,CAAC,YAAY,GAAG,GAAG,CAAA;YACvB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAA;SAC/B;aAAM;YACN,IAAI,CAAC,WAAW,GAAG,GAAG,CAAA;YACtB,IAAI,CAAC,YAAY,GAAG,GAAG,CAAA;YACvB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAA;SAC5C;QACD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM,IAAI,CAAC,CAAA;KAC7B;IAED,MAAM;QACL,MAAM,iBAAiB,GAAG,OAAO,IAAI,CAAC,aAAa,IAAI,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,SAAS,CAAA;QACjH,QACCC,IAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAClDA,+DAAM,KAAK,EAAC,cAAc,EAAC,OAAO,EAAE,OAAO,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,iBAAe,IAAI,CAAC,MAAM,IAC1F,IAAI,CAAC,WAAW,CACX,EACPA,+DAAM,KAAK,EAAC,SAAS,IACnB,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;cACvB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,KAChBA,aAAK,KAAK,EAAC,QAAQ,IAClBA,IAAC,SAAS,IAAC,KAAK,EAAE,CAAC,EAAE,aAAa,EAAE,iBAAiB,GAAc,EACnEA,cAAM,KAAK,EAAC,OAAO,QAAS,CACvB,CACL,CAAC;cACF,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,MACtCA,aAAK,KAAK,EAAC,QAAQ,IACjBA,0CAAkC,KAAK,EAAE,CAAC,GAAqC,OAAG,GAAG,EACrFA,IAAC,SAAS,IAAC,KAAK,EAAE,CAAC,EAAE,aAAa,EAAE,iBAAiB,GAAc,EACpEA,cAAM,KAAK,EAAC,OAAO,QAAS,CACvB,CACL,CAAC,CACC,EACPA,iEAAO,IAAI,CAAC,YAAY,CAAQ,CAC1B,EACP;KACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["isly.object","h"],"sources":["src/components/display/json/JsonValue.tsx","src/components/display/json/object/style.css?tag=smoothly-display-json-object&encapsulation=scoped","src/components/display/json/object/index.tsx"],"sourcesContent":["import { FunctionalComponent, h } from \"@stencil/core\"\nimport { isly } from \"isly\"\n\nexport const JsonValue: FunctionalComponent<{ value: any; collapseDepth?: number }> = ({ value, collapseDepth }) => {\n\treturn isly.object().is(value) || Array.isArray(value) ? (\n\t\t<smoothly-display-json-object value={value} collapseDepth={collapseDepth} />\n\t) : (\n\t\t<smoothly-display-json-primitive value={value} />\n\t)\n}\n",":host {\n\tfont-family: monospace;\n\tposition: relative;\n}\n:host[hidden] {\n\tdisplay: none;\n}\n\n.indent {\n\tpadding-left: 1rem;\n\tborder-left: 1px solid rgb(var(--smoothly-light-shade));\n}\n:host(:not(.open)) .content {\n\tdisplay: none;\n}\n:host>.content>.indent:last-child>.comma {\n\tdisplay: none;\n}\n.open-bracket::after {\n\tbackground-color: rgb(var(--smoothly-light-color));\n\tcolor: rgb(var(--smoothly-light-shade));\n\twhite-space: pre;\n\tborder-radius: 0.25rem;\n\tfont-weight: bold;\n\tfont-size: 0.8em;\n}\n\n:host(:not(.open):not(.empty))>.open-bracket::after {\n\tcontent: \" ▶ \" attr(data-length) \" ◀ \";\n}\n:host(.open:not(.empty))>.open-bracket::after {\n\tcontent: \" ▼ \";\n}\n","import { Component, ComponentWillLoad, h, Host, Prop, State, VNode } from \"@stencil/core\"\nimport { JsonValue } from \"../JsonValue\"\n\n@Component({\n\ttag: \"smoothly-display-json-object\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyDisplayJsonObject implements ComponentWillLoad {\n\t@Prop() value: Record<string, any> | any[]\n\t@Prop() collapseDepth?: number\n\t@State() open: boolean\n\t@State() empty: boolean\n\tprivate openBracket: string = \"\"\n\tprivate closeBracket: string = \"\"\n\tprivate length: number\n\n\tcomponentWillLoad() {\n\t\tthis.open = typeof this.collapseDepth == \"number\" ? this.collapseDepth > 0 : true\n\t\tif (Array.isArray(this.value)) {\n\t\t\tthis.openBracket = \"[\"\n\t\t\tthis.closeBracket = \"]\"\n\t\t\tthis.length = this.value.length\n\t\t} else {\n\t\t\tthis.openBracket = \"{\"\n\t\t\tthis.closeBracket = \"}\"\n\t\t\tthis.length = Object.keys(this.value).length\n\t\t}\n\t\tthis.empty = this.length == 0\n\t}\n\n\trender(): VNode {\n\t\tconst nextCollapseDepth = typeof this.collapseDepth == \"number\" ? Math.max(this.collapseDepth - 1, 0) : undefined\n\t\treturn (\n\t\t\t<Host class={{ empty: this.empty, open: this.open }}>\n\t\t\t\t<span class=\"open-bracket\" onClick={() => (this.open = !this.open)} data-length={this.length}>\n\t\t\t\t\t{this.openBracket}\n\t\t\t\t</span>\n\t\t\t\t<span class=\"content\">\n\t\t\t\t\t{Array.isArray(this.value)\n\t\t\t\t\t\t? this.value.map(v => (\n\t\t\t\t\t\t\t\t<div class=\"indent\">\n\t\t\t\t\t\t\t\t\t<JsonValue value={v} collapseDepth={nextCollapseDepth}></JsonValue>\n\t\t\t\t\t\t\t\t\t<span class=\"comma\">,</span>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t  ))\n\t\t\t\t\t\t: Object.entries(this.value).map(([k, v]) => (\n\t\t\t\t\t\t\t\t<div class=\"indent\">\n\t\t\t\t\t\t\t\t\t{<smoothly-display-json-record-key value={k}></smoothly-display-json-record-key>}:{\" \"}\n\t\t\t\t\t\t\t\t\t{<JsonValue value={v} collapseDepth={nextCollapseDepth}></JsonValue>}\n\t\t\t\t\t\t\t\t\t<span class=\"comma\">,</span>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t  ))}\n\t\t\t\t</span>\n\t\t\t\t<span>{this.closeBracket}</span>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}
+{"file":"p-96acfe2c.js","mappings":";;;;;;MAGa,SAAS,GAAgE,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE;IAC9G,OAAOA,MAAW,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IACrD,oCAA8B,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,aAAa,GAAI,KAE5E,uCAAiC,KAAK,EAAE,KAAK,GAAI,CACjD,CAAA;AACF;;ACTA,MAAM,QAAQ,GAAG,o/BAAo/B,CAAC;AACtgC,wCAAe,QAAQ;;MCOV,yBAAyB;;;;QAK7B,gBAAW,GAAW,EAAE,CAAA;QACxB,iBAAY,GAAW,EAAE,CAAA;;;;;;IAGjC,iBAAiB;QAChB,IAAI,CAAC,IAAI,GAAG,OAAO,IAAI,CAAC,aAAa,IAAI,QAAQ,GAAG,IAAI,CAAC,aAAa,GAAG,CAAC,GAAG,IAAI,CAAA;QACjF,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;YAC9B,IAAI,CAAC,WAAW,GAAG,GAAG,CAAA;YACtB,IAAI,CAAC,YAAY,GAAG,GAAG,CAAA;YACvB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAA;SAC/B;aAAM;YACN,IAAI,CAAC,WAAW,GAAG,GAAG,CAAA;YACtB,IAAI,CAAC,YAAY,GAAG,GAAG,CAAA;YACvB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAA;SAC5C;QACD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM,IAAI,CAAC,CAAA;KAC7B;IAED,MAAM;QACL,MAAM,iBAAiB,GAAG,OAAO,IAAI,CAAC,aAAa,IAAI,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,SAAS,CAAA;QACjH,QACCC,IAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAClDA,+DAAM,KAAK,EAAC,cAAc,EAAC,OAAO,EAAE,OAAO,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,iBAAe,IAAI,CAAC,MAAM,IAC1F,IAAI,CAAC,WAAW,CACX,EACPA,+DAAM,KAAK,EAAC,SAAS,IACnB,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;cACvB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,KAChBA,aAAK,KAAK,EAAC,QAAQ,IAClBA,IAAC,SAAS,IAAC,KAAK,EAAE,CAAC,EAAE,aAAa,EAAE,iBAAiB,GAAc,EACnEA,cAAM,KAAK,EAAC,OAAO,QAAS,CACvB,CACL,CAAC;cACF,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,MACtCA,aAAK,KAAK,EAAC,QAAQ,IACjBA,0CAAkC,KAAK,EAAE,CAAC,GAAqC,OAAG,GAAG,EACrFA,IAAC,SAAS,IAAC,KAAK,EAAE,CAAC,EAAE,aAAa,EAAE,iBAAiB,GAAc,EACpEA,cAAM,KAAK,EAAC,OAAO,QAAS,CACvB,CACL,CAAC,CACC,EACPA,iEAAO,IAAI,CAAC,YAAY,CAAQ,CAC1B,EACP;KACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["isly.object","h"],"sources":["src/components/display/json/JsonValue.tsx","src/components/display/json/object/style.css?tag=smoothly-display-json-object&encapsulation=scoped","src/components/display/json/object/index.tsx"],"sourcesContent":["import { FunctionalComponent, h } from \"@stencil/core\"\nimport { isly } from \"isly\"\n\nexport const JsonValue: FunctionalComponent<{ value: any; collapseDepth?: number }> = ({ value, collapseDepth }) => {\n\treturn isly.object().is(value) || Array.isArray(value) ? (\n\t\t<smoothly-display-json-object value={value} collapseDepth={collapseDepth} />\n\t) : (\n\t\t<smoothly-display-json-primitive value={value} />\n\t)\n}\n",":host {\n\tfont-family: monospace;\n\tposition: relative;\n}\n:host[hidden] {\n\tdisplay: none;\n}\n\n.indent {\n\tpadding-left: 1rem;\n\tborder-left: 1px solid rgb(var(--smoothly-light-shade));\n}\n:host(:not(.open)) .content {\n\tdisplay: none;\n}\n:host>.content>.indent:last-child>.comma {\n\tdisplay: none;\n}\n.open-bracket::after {\n\tbackground-color: rgb(var(--smoothly-light-color));\n\tcolor: rgb(var(--smoothly-light-shade));\n\twhite-space: pre;\n\tborder-radius: 0.25rem;\n\tfont-weight: bold;\n\tfont-size: 0.8em;\n}\n\n:host(:not(.open):not(.empty))>.open-bracket::after {\n\tcontent: \" ▶ \" attr(data-length) \" ◀ \";\n}\n:host(.open:not(.empty))>.open-bracket::after {\n\tcontent: \" ▼ \";\n}\n","import { Component, ComponentWillLoad, h, Host, Prop, State, VNode } from \"@stencil/core\"\nimport { JsonValue } from \"../JsonValue\"\n\n@Component({\n\ttag: \"smoothly-display-json-object\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyDisplayJsonObject implements ComponentWillLoad {\n\t@Prop() value: Record<string, any> | any[]\n\t@Prop() collapseDepth?: number\n\t@State() open: boolean\n\t@State() empty: boolean\n\tprivate openBracket: string = \"\"\n\tprivate closeBracket: string = \"\"\n\tprivate length: number\n\n\tcomponentWillLoad() {\n\t\tthis.open = typeof this.collapseDepth == \"number\" ? this.collapseDepth > 0 : true\n\t\tif (Array.isArray(this.value)) {\n\t\t\tthis.openBracket = \"[\"\n\t\t\tthis.closeBracket = \"]\"\n\t\t\tthis.length = this.value.length\n\t\t} else {\n\t\t\tthis.openBracket = \"{\"\n\t\t\tthis.closeBracket = \"}\"\n\t\t\tthis.length = Object.keys(this.value).length\n\t\t}\n\t\tthis.empty = this.length == 0\n\t}\n\n\trender(): VNode {\n\t\tconst nextCollapseDepth = typeof this.collapseDepth == \"number\" ? Math.max(this.collapseDepth - 1, 0) : undefined\n\t\treturn (\n\t\t\t<Host class={{ empty: this.empty, open: this.open }}>\n\t\t\t\t<span class=\"open-bracket\" onClick={() => (this.open = !this.open)} data-length={this.length}>\n\t\t\t\t\t{this.openBracket}\n\t\t\t\t</span>\n\t\t\t\t<span class=\"content\">\n\t\t\t\t\t{Array.isArray(this.value)\n\t\t\t\t\t\t? this.value.map(v => (\n\t\t\t\t\t\t\t\t<div class=\"indent\">\n\t\t\t\t\t\t\t\t\t<JsonValue value={v} collapseDepth={nextCollapseDepth}></JsonValue>\n\t\t\t\t\t\t\t\t\t<span class=\"comma\">,</span>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t  ))\n\t\t\t\t\t\t: Object.entries(this.value).map(([k, v]) => (\n\t\t\t\t\t\t\t\t<div class=\"indent\">\n\t\t\t\t\t\t\t\t\t{<smoothly-display-json-record-key value={k}></smoothly-display-json-record-key>}:{\" \"}\n\t\t\t\t\t\t\t\t\t{<JsonValue value={v} collapseDepth={nextCollapseDepth}></JsonValue>}\n\t\t\t\t\t\t\t\t\t<span class=\"comma\">,</span>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t  ))}\n\t\t\t\t</span>\n\t\t\t\t<span>{this.closeBracket}</span>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}

package/dist/components/{p-4ee37617.js → p-97686228.js}

@@ -11,7 +11,7 @@ const SmoothlyThemeColor = proxyCustomElement(class SmoothlyThemeColor extends H
         this.color = undefined;
     }
     render() {
-        return (h(Host, { key: '31afa14d4490b5c2d3a09322999ac7ec6084f0b8' }, this.color, ["tint", "color", "shade"].map(variant => (h("smoothly-theme-color-variant", { title: `${this.color} ${variant}`, color: this.color, variant: variant })))));
+        return (h(Host, { key: 'a7d4302217c958ba525227484df493bc8fa312e5' }, this.color, ["tint", "color", "shade"].map(variant => (h("smoothly-theme-color-variant", { title: `${this.color} ${variant}`, color: this.color, variant: variant })))));
     }
     static get style() { return SmoothlyThemeColorStyle0; }
 }, [2, "smoothly-theme-color", {
@@ -39,4 +39,4 @@ defineCustomElement();
 
 export { SmoothlyThemeColor as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-4ee37617.js.map
+//# sourceMappingURL=p-97686228.js.map

package/dist/components/{p-4ee37617.js.map → p-97686228.js.map}

@@ -1 +1 @@
-{"file":"p-4ee37617.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,qKAAqK,CAAC;AACvL,iCAAe,QAAQ;;MCOV,kBAAkB;;;;;;IAE9B,MAAM;QACL,QACC,EAAC,IAAI,uDACH,IAAI,CAAC,KAAK,EACT,CAAC,MAAM,EAAE,OAAO,EAAE,OAAO,CAAW,CAAC,GAAG,CAAC,OAAO,KACjD,oCACC,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,OAAO,EAAE,EACjC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,OAAO,GAAiC,CAClD,CAAC,CACI,EACP;KACD;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/theme/color/style.css?tag=smoothly-theme-color&encapsulation=scoped","src/components/theme/color/index.tsx"],"sourcesContent":[":host {\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n}\n:host > :first-child {\n\tmargin-top: 0.2rem;\n}\n","import { Component, h, Host, Prop } from \"@stencil/core\"\nimport { Color } from \"../../../model\"\n\n@Component({\n\ttag: \"smoothly-theme-color\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyThemeColor {\n\t@Prop() color: Color\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{this.color}\n\t\t\t\t{([\"tint\", \"color\", \"shade\"] as const).map(variant => (\n\t\t\t\t\t<smoothly-theme-color-variant\n\t\t\t\t\t\ttitle={`${this.color} ${variant}`}\n\t\t\t\t\t\tcolor={this.color}\n\t\t\t\t\t\tvariant={variant}></smoothly-theme-color-variant>\n\t\t\t\t))}\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}
+{"file":"p-97686228.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,qKAAqK,CAAC;AACvL,iCAAe,QAAQ;;MCOV,kBAAkB;;;;;;IAE9B,MAAM;QACL,QACC,EAAC,IAAI,uDACH,IAAI,CAAC,KAAK,EACT,CAAC,MAAM,EAAE,OAAO,EAAE,OAAO,CAAW,CAAC,GAAG,CAAC,OAAO,KACjD,oCACC,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,OAAO,EAAE,EACjC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,OAAO,GAAiC,CAClD,CAAC,CACI,EACP;KACD;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/theme/color/style.css?tag=smoothly-theme-color&encapsulation=scoped","src/components/theme/color/index.tsx"],"sourcesContent":[":host {\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n}\n:host > :first-child {\n\tmargin-top: 0.2rem;\n}\n","import { Component, h, Host, Prop } from \"@stencil/core\"\nimport { Color } from \"../../../model\"\n\n@Component({\n\ttag: \"smoothly-theme-color\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyThemeColor {\n\t@Prop() color: Color\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{this.color}\n\t\t\t\t{([\"tint\", \"color\", \"shade\"] as const).map(variant => (\n\t\t\t\t\t<smoothly-theme-color-variant\n\t\t\t\t\t\ttitle={`${this.color} ${variant}`}\n\t\t\t\t\t\tcolor={this.color}\n\t\t\t\t\t\tvariant={variant}></smoothly-theme-color-variant>\n\t\t\t\t))}\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}

package/dist/components/p-980ec6be.js

@@ -0,0 +1,176 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-f765921a.js';
+import { D as Date } from './p-390767c7.js';
+import { C as Color } from './p-8e1e509d.js';
+import { N as Notice } from './p-ef01331e.js';
+import './p-47ea6b68.js';
+import { d as defineCustomElement$b } from './p-306f9cb3.js';
+import { d as defineCustomElement$a } from './p-4f80c811.js';
+import { d as defineCustomElement$9 } from './p-d2d74dcd.js';
+import { d as defineCustomElement$8 } from './p-f770567b.js';
+import { d as defineCustomElement$7 } from './p-96acfe2c.js';
+import { d as defineCustomElement$6 } from './p-f46dd8e4.js';
+import { d as defineCustomElement$5 } from './p-4c6fe645.js';
+import { d as defineCustomElement$4 } from './p-c63db1c1.js';
+import { d as defineCustomElement$3 } from './p-4854855c.js';
+import { d as defineCustomElement$2 } from './p-c77944e7.js';
+import { d as defineCustomElement$1 } from './p-cc863bad.js';
+
+const SmoothlyDisplayDemo = proxyCustomElement(class SmoothlyDisplayDemo extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.notice = createEvent(this, "notice", 7);
+        this.downloadingSpinner = undefined;
+    }
+    noticeWarning(notice) {
+        console.log("emit", notice);
+        this.notice.emit(notice);
+    }
+    render() {
+        return [
+            h("main", { key: '39eb7bb72cea0c312714780bd9db27a77836a07d' }, h("fieldset", { key: '46b0779510e3c6ee1106a6b3a83a13d41ac63b2e' }, h("h2", { key: 'f680e63af56e7d50cc660eac1a1b81de653d48bd' }, "Smoothly display"), h("dl", { key: '26c00ce48352dde5b499bdd170488ffc0e9be984' }, h("dt", { key: '8dbadab550b83b5bfc4acf8cff7b61d7ffd43af9' }, "Duration"), h("dd", { key: 'fc8689620efd6dd6e1ab8d1390b8d813be2520ca' }, h("div", { key: '6ef111616240ac903eb2af7f2636936611c0a4f8' }, h("div", { key: '7dc311657409ada5e96ce832158c020e55c4cc45' }, h("smoothly-display", { key: '80fa4e17d62413c7699b94ef3ffa286f04b3f7b8', style: { display: "inline" }, type: "duration", value: { hours: 13, minutes: 100 } }), " h"), h("div", { key: 'e36d5b6131c20a99397c4c59f1dd2aace482dd9d' }, h("smoothly-display", { key: '2858bd44eda1a0e81e22cd7f156ada646ce74e4b', style: { display: "inline" }, type: "duration", value: { hours: 8 } }), " h"), h("div", { key: 'ad4757c65bfdee5ec7eaec6ca93985f8205ef629' }, h("smoothly-display", { key: 'e6b76219a8a754060a122303f9946fd3bac53ac3', style: { display: "inline" }, type: "duration", value: { minutes: 3 } }), " h"), h("div", { key: '5448e1f01cde73667fcddb1c12322bb3580570fd' }, h("smoothly-display", { key: '716327a3acf4cc15693d1dd4bc4a2652ed10c6e5', style: { display: "inline" }, type: "duration", value: { hours: -13, minutes: 100 } }), " h"), h("div", { key: '7163c5acb2a9f3dcb9c620866a1bde90548f1d9a' }, h("smoothly-display", { key: '75f2c509df90c14512e0ff6f9b218806c3b1d690', style: { display: "inline" }, type: "duration", value: { hours: -8 } }), " h"), h("div", { key: '67bf890913db1d4907a7d8dc4a1386a85b30bb49' }, h("smoothly-display", { key: 'f38320854b7cbe1133ac214fda629cdb6e34fd04', style: { display: "inline" }, type: "duration", value: {} }), " h"), h("div", { key: 'a0a553d3d7f1bf1e28c58f307e1cfc56dede0a86' }, h("smoothly-display", { key: 'dc28a4fab596e16a1180a6ff1d0ee081d2250efb', style: { display: "inline" }, type: "duration", value: { minutes: -3 } }), " h"))), h("dt", { key: 'cc4498418d1266333357fa9a47cfe267fefc4cb1' }, "text"), h("dd", { key: 'dbd253f9d092d730792090edc0d1c7294cd3268b' }, h("smoothly-display", { key: '4b140b91c5b2e268dc691c4b2789ab1ad113cf9f', type: "text", value: "text" })), h("dt", { key: '7a7655e9282322688e901e034483e09aefe8dc69' }, "postal code"), h("dd", { key: '3f880dcdad765deeb5bce0cfa92341cf08e42ceb' }, h("smoothly-display", { key: '253b67d433924b812db35ac4b9442e8df6fb456e', type: "postal-code", value: "752 31" })), h("dt", { key: 'a344618739cc1ce559ac80554f09405901643514' }, "password"), h("dd", { key: '0f6f97055179d534b56754e9f4ffe868982f8364' }, h("smoothly-display", { key: '0a95e73ffd18edec818388c6451e10e74ac25a1f', type: "password", value: "password" })), h("dt", { key: 'd799959280bd357c59c1458620947ceb8261a8bc' }, "email"), h("dd", { key: '6d822ad99d14d7ac68dfe5e60e76bc4f62039c60' }, h("smoothly-display", { key: 'df086753232838bbec2b4d6fe17a02e7640c7ec3', type: "email", value: "test@example.com" })), h("dt", { key: 'eade96bd9319f2782533ad3ee6e73a279780dcc4' }, "price"), h("dd", { key: '82580ddd52f3ec732054a92803c608241a03870c' }, h("smoothly-display", { key: 'db4df7924f25fe5c4b8c1ef79e4a2ccbfdb2b759', type: "price", value: "13.37", currency: "SEK" })), h("dt", { key: '6218fda2e606e48855cf22d2541a1b811f568a31' }, "price without decimals"), h("dd", { key: '6f7b2d3f397e98bfcf7031739b8ded01b39c45b8' }, h("smoothly-display", { key: 'eec6de2446c60659d6fcfba09d1e1867dc5bb5f9', type: "price", value: 200, currency: "SEK", toInteger: true })), h("dt", { key: '049e4dd01a1ecadf48febcb0c651b3a463373be7' }, "price with decimals if they are set, otherwise no decimal"), h("dd", { key: '55b856f1380424862dc75ddb5a5d4ff9d6d4393b' }, h("smoothly-display", { key: 'd53fa00ba54c27011a7769bf89fb048d5ac43c2f', type: "price", value: 200.2, currency: "SEK", toInteger: true })), h("dt", { key: '90d8a4d1e1649038656607cb0b65d805e3cb2aab' }, "price with decimals"), h("dd", { key: 'c9632b9d6252727300a101c585a8b26e5cc7fe51' }, h("smoothly-display", { key: 'fef95d8888886353708964a0bad03d716975c183', type: "price", value: 200.2, currency: "SEK" })), h("dt", { key: '7abf3203c89e5c502717cd9757c937e582c1b6c7' }, "percent"), h("dd", { key: '2fd5b7ec91de2fb4e0cbaf864ca258b852e88cca' }, h("smoothly-display", { key: '0e241291b20784a4d802a83e15dadf318079f236', type: "percent", value: "42" })), h("dt", { key: '6c48237d73aba23ab3f35980f898eff5c2b87364' }, "phone"), h("dd", { key: '53f16cee1b5c59599e8283cb4c22e751e8be1f3b' }, h("smoothly-display", { key: '0338829b491a27c9d345cac5190203339c41ac6e', type: "phone", value: "0101881108" })), h("dt", { key: 'afb89b8f0a49ad5bf1ef8bba4a51637f7ed57af1' }, "card number"), h("dd", { key: '29e4eb02d6924ed8f7ac2797377ea3bf7b3e0623' }, h("smoothly-display", { key: '745fefbafe113e1c12ace365f34c39938b3bb659', type: "card-number", value: "4111111111111111" })), h("dt", { key: '54a9b3bf222d4a9fa1bf1444b64fa7e6b4b7d5fd' }, "card expires"), h("dd", { key: 'a538c6af31872884cebb5e5667cd799d1cbe92dd' }, h("smoothly-display", { key: '511a2c804811e9e1d3195d4ab8dad15e3e73cae4', type: "card-expires", value: "7/22" })), h("dt", { key: '16fa7df01a7d60ec01af68a37d196e35ff8d6503' }, "card csc"), h("dd", { key: '0a3df0ba09f6fc7be53d17f0c87eece817a8145c' }, h("smoothly-display", { key: '1351526da17988597fd739fe805a0da21689b520', type: "card-csc", value: "987" })), h("dt", { key: '4ac6ff219663982e06b96e7b3d7661b7317cee7f' }, "date"), h("dd", { key: '6474b93898b9d357a4276a1801c0b1d739e8ae30' }, h("smoothly-display", { key: 'e6a43b2f91d87d9de7dd49583c97c93660157dfd', type: "date", value: "2022-07-07" })), h("dt", { key: 'ad203d97c4b014f6235005882d1e35f32c37d291' }, "date time"), h("dd", { key: '7869f2afaba99fd6c277707fd06dbc546e912377' }, h("smoothly-display", { key: 'c63424a1d505cedcd348aeddbc4083ec0fb99b43', type: "date-time", format: {
+                    year: "numeric",
+                    month: "short",
+                    day: "numeric",
+                    hour: "numeric",
+                    minute: "numeric",
+                    second: "numeric",
+                }, value: "2022-07-07T02:02:02Z" })), h("dd", { key: 'bad6623c83aa440db37bba77404a0e3261406359' }, h("smoothly-display", { key: '70e4ab1844a5c575c54ef14314ce6f40423df47b', type: "date-time", format: {
+                    year: "2-digit",
+                    month: "long",
+                    day: "2-digit",
+                    hour: "2-digit",
+                    minute: "2-digit",
+                    second: "2-digit",
+                }, value: "2022-07-07T02:02:02Z" })), h("dd", { key: 'b7d2b44b723b3d32e063a517034db9c6478a77c5' }, h("smoothly-display", { key: '12492a2754ccdcfa781e2ef46a2579ad3bbb49a0', type: "date-time", format: {
+                    year: "numeric",
+                    month: "2-digit",
+                    day: "2-digit",
+                    hour: "numeric",
+                    minute: "numeric",
+                    second: "numeric",
+                }, value: "2022-07-07T12:22:24Z" })), h("dd", { key: '72fda443ec030240fd29071d1a3eca87e2fa77d2' }, h("smoothly-display", { key: '3bf63c1395a81d5da4c6594825a3120d99d36fd3', type: "date-time", format: {
+                    year: "numeric",
+                    month: "numeric",
+                    day: "numeric",
+                    hour: "numeric",
+                    minute: "numeric",
+                    second: "numeric",
+                }, value: "2022-07-07T12:22:24Z" })), h("dd", { key: 'd9a5a251c68c83e51610bc8aac39c23a14a0da10' }, h("smoothly-display", { key: '8a7438690f5b6ba0bbad4d676ebd161538024540', type: "date-time", format: { year: "numeric", month: "short", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), h("dd", { key: 'f426a55591ef6e03405cce72c0e64eaff677beb3' }, h("smoothly-display", { key: '3402255ed959acefbc71333683b92dee43275d7d', type: "date-time", format: { year: "2-digit", month: "numeric", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), h("dd", { key: 'cc2b1b59c5d789358fb67a6d48a5a9cdf7fe599b' }, h("smoothly-display", { key: '1f3a0edc25b8b9b34d6ffbe88787133bd145bc4c', type: "date-time", format: {
+                    year: "2-digit",
+                    month: "numeric",
+                    day: "numeric",
+                    hour: "2-digit",
+                    minute: "2-digit",
+                    second: "2-digit",
+                    timeZone: "Europe/Stockholm",
+                }, value: "2022-07-07T12:15Z" })), h("dt", { key: '747992d0fa309d7c8cbd13d8eb7818accbb6d522' }, "Display JSON"), h("dd", { key: 'bc2d0785dbb216170fd320a3e7ba000d532e54ff' }, h("smoothly-display-demo-json", { key: '6d23c6c7cc4720d60ea2160780f26ad10384d6f9' })))), h("h2", { key: '2e29c1a9d6b24b00ff6fc6c41201fecd16003684' }, "With labels"), h("dd", { key: 'e60a4cf0fa048db54972698f0c41c10dd420231f' }, h("smoothly-display", { key: 'c31dc1154af9e19ae130336862060106d3e1ca80', label: "Today", type: "date", value: Date.now() }), h("smoothly-display", { key: 'f442d5b680e29cffa32a35b5beab2281bb41d1e8', label: "Total amount", type: "price", currency: "SEK", value: 6789 }), h("smoothly-display", { key: '7054be327820ae495a87652e4eee220bd224835c', label: "Total amount", type: "price", currency: "GBP", value: 678.9 }), h("smoothly-display", { key: '164ed80432c0342192e83ddaea4f27a1b283b222', label: "Logs", type: "json", value: [
+                    { type: "trace", message: "Hello" },
+                    { type: "error", message: "Oh no!" },
+                ] })), h("fieldset", { key: 'ae8fda6783a1045b24a90f73d95eb75fef524c3b' }, h("h2", { key: '8b735feede5041d16621b35ab4ed65b4f6893e02' }, "Test of different kinds of notifier"), h("button", { key: 'eff36a6ecd92f817fcb196996b6677945e535c6a', onClick: () => this.noticeWarning(Notice.warn("This is a test warning notice.")) }, "warning"), h("button", { key: 'bedcbef25de624da67f1ce3b1d6413d7f170113e', onClick: () => this.noticeWarning(Notice.succeeded("This is a test success notice.")) }, "success"), h("button", { key: 'c6a9ac7dacf8cc450d2bfb02a2bcb85f484f0f24', onClick: () => this.noticeWarning(Notice.failed("This is a test danger notice.")) }, "danger"), h("button", { key: 'a31c5b25807dac6438f1d3aad447610260611dbf', onClick: () => this.noticeWarning(Notice.execute("This is a test execute notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "execute"), h("button", { key: '6875bd9cadd9f5eedfdc1dc41a68ef602f3ba160', onClick: () => this.noticeWarning(Notice.delay("This is a test delay notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "delay")), h("fieldset", { key: 'f7493cc029025477c394be2e48640f943e7d45df' }, h("h2", { key: '14f549bdca342919dd0cc6b6e039b387ca9d5f47' }, "Smoothly spinner"), h("div", { key: '2532ec422ca3c7f482fa2f80b8f0e188d00ed9e7', style: { width: "fit-content" } }, "Large", h("smoothly-spinner", { key: 'ca6bff694dfae13cbe31781fe75dc5a7f22726ce', size: "large", style: {
+                    "--spinner-background": "200,255,200",
+                    "--spinner-background-opacity": "0.2",
+                    "--spinner-color": "0,130,0",
+                } })), h("div", { key: '94e96d5ea29719b5ed508879df5905db45e9b892', style: { width: "fit-content" } }, "Medium", h("smoothly-spinner", { key: 'a54f39247c27520000ec8a35acc4dca1eab61269', size: "medium" })), h("div", { key: '694bb6839a34c4d3c159674ac9d7b8764e715a0a', style: { width: "fit-content" } }, "Small", h("smoothly-spinner", { key: 'a4842814663b330faa6eb266722507dea1f1b0f0', size: "small" })), h("div", { key: '11dd2fd0047e3de22abe1de29f63ac56898b715e' }, "Icon sized spinner on button", Color.types.map(color => (h("smoothly-button", { size: "icon", color: color, shape: "rounded", onClick: () => {
+                    this.downloadingSpinner = true;
+                    setTimeout(() => (this.downloadingSpinner = false), 3000);
+                } }, !this.downloadingSpinner && h("smoothly-icon", { name: "download-outline" }), this.downloadingSpinner && (h("smoothly-spinner", { size: "icon", style: { "--spinner-background-opacity": "0" } })))))), h("h3", { key: '8e492b4dbad096875ccc36db465cd7441d33a6fa' }, "Spinner with overlay"), h("div", { key: '00c85d4ee92d8f2cefec690537912abd43f97707', style: { position: "relative", height: "10em" } }, "Large Overlay Spinner", h("smoothly-spinner", { key: 'd340e0a508673de5a44756e13a85cedcfe328e71', overlay: true, size: "large", style: {
+                    "--spinner-background": "255,200,255",
+                    "--spinner-background-opacity": "0.5",
+                    "--spinner-color": "0,130,0",
+                } })), h("div", { key: '016fe696e6e74e25bda569a1699e6049ac92c889', style: { position: "relative", height: "10em" } }, "Medium Overlay Spinner", h("smoothly-spinner", { key: '66092e4011ae66dfaa436c55a39721be315c519a', overlay: true, color: "secondary", size: "medium" })), h("div", { key: '36a1cc846982bb5a1dc54c2f543c476b1fce8c91', style: { position: "relative", height: "10em" } }, "Small Overlay Spinner", h("smoothly-spinner", { key: 'b693e53a081661680f6a19ba81dacd2e41371902', overlay: true, size: "small" }))), h("fieldset", { key: '5a7e3b61ad86969f26a3679a58323a5a3e3eab65' }, h("h2", { key: 'bcc731681d6db9513cfc7391fcf3689233c2d540' }, "Smoothly summary"), h("smoothly-summary", { key: '28698a792708b9630138d21a00bd6e367c8d2836' }, h("p", { key: '43cddb839948c05ee1abe3e972b465601edcfa57', slot: "summary" }, "Some title"), h("p", { key: '7e170421c947e618d3c88c2c78bc937cf895e7d5', slot: "content" }, "Some content")), h("smoothly-summary", { key: '7766bc278e892e217b6e6441e41aa626d7ecf2d0', size: "large" }, h("p", { key: 'a0d83a3dacd955442983b2cbf086c95e5f54b87b', slot: "summary" }, "Some title"), h("p", { key: '2d5957d9d8bd0d0ad1a8f0b11eb2ff211879c393', slot: "content" }, "Some content")), h("smoothly-summary", { key: '9a03d40210651f64b7e3146b4f1f90d0af8e3b68', color: "danger", fill: "clear" }, h("div", { key: '91888525a78ae6cf2bfbf492d4b8dc205d4ac1da', slot: "summary", style: { display: "flex", gap: "0.3rem" } }, h("span", { key: 'a22f933241a444da80c6d89b65275c4f6592609d' }, "Person"), h("smoothly-icon", { key: 'c79775e186b742d77715789887948c93c2c5867b', name: "person", color: "light", fill: "clear", size: "tiny" })), h("p", { key: '41b5c81feda26d37aab0d42093de072484c53045', slot: "content" }, "Some person information.")), h("smoothly-summary", { key: 'b7d82ffdf718528fbd038b9ce51490cbce1226fe', color: "danger", fill: "clear", open: true }, h("p", { key: 'f09c420f105318297999e44fb90b3e22f3a89a67', slot: "summary" }, "Some other title"), h("p", { key: 'b2761d6607e63756c7e0ee18a9da1f16f5c48969', slot: "content" }, "A lot more content, yes please. A lot more content, yes please. A lot more content, yes please. A lot more content, yes please. A lot more content, yes please.A lot more content, yes please. A lot more content, yes please. A lot more content, yes please. A lot more content, yes please.")), h("h2", { key: 'de8ca3994652d8f1dd8b364d79879a8ee638f9e6' }, "Label"), labels.map(l => (h("smoothly-label", { hue: l.hue, description: l.description, shape: "rectangle" }, l.name))), h("smoothly-label", { key: 'dd8c4d057d26e554b03aefc7a1cc63ccb4f162c4', color: "primary", description: "Using colors", shape: "rectangle" }, "Primary"))),
+        ];
+    }
+}, [0, "smoothly-display-demo", {
+        "downloadingSpinner": [32]
+    }]);
+const labels = [
+    {
+        name: "2fa",
+        hue: 120,
+        description: "User has two factor authentication enabled.",
+    },
+    {
+        name: "expired",
+        hue: 240,
+        description: "User's password has expired.",
+    },
+    {
+        name: "inactive",
+        hue: 60,
+        description: "User is inactive.",
+    },
+];
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["smoothly-display-demo", "smoothly-button", "smoothly-display", "smoothly-display-demo-json", "smoothly-display-json", "smoothly-display-json-object", "smoothly-display-json-primitive", "smoothly-display-json-record-key", "smoothly-icon", "smoothly-label", "smoothly-spinner", "smoothly-summary"];
+    components.forEach(tagName => { switch (tagName) {
+        case "smoothly-display-demo":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SmoothlyDisplayDemo);
+            }
+            break;
+        case "smoothly-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "smoothly-display":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "smoothly-display-demo-json":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "smoothly-display-json":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "smoothly-display-json-object":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "smoothly-display-json-primitive":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "smoothly-display-json-record-key":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "smoothly-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "smoothly-label":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "smoothly-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "smoothly-summary":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { SmoothlyDisplayDemo as S, defineCustomElement as d };
+
+//# sourceMappingURL=p-980ec6be.js.map