smoothly 0.3.65 → 0.3.67

package/dist/custom-elements/index.js

@@ -20337,6 +20337,12 @@ class StateEditor {
     padStart(length, padding) {
         return this.pad(length, padding, 0);
     }
+    toLower() {
+        return this.map(symbol => symbol.toLowerCase());
+    }
+    toUpper() {
+        return this.map(symbol => symbol.toUpperCase());
+    }
     map(mapping) {
         let result = this;
         let j = 0;
@@ -20478,12 +20484,12 @@ function parse(value, type, ...argument) {
     return handler ? handler.fromString(handler.unformat(StateEditor.modify(value)).value) : undefined;
 }
 
-class Handler$f {
+class Handler$h {
     toString(data) {
         return typeof data == "string" ? data : "";
     }
     fromString(value) {
-        return typeof value == "string" ? value : undefined;
+        return typeof value == "string" && !!value ? value : undefined;
     }
     format(unformatted) {
         return { ...unformatted, type: "tel", autocomplete: "cc-csc", length: [3, 3], pattern: /^\d{3}$/ };
@@ -20495,9 +20501,9 @@ class Handler$f {
         return state.value.length < 3 && symbol >= "0" && symbol <= "9";
     }
 }
-add("card-csc", () => new Handler$f());
+add("card-csc", () => new Handler$h());
 
-class Handler$e {
+class Handler$g {
     toString(data) {
         return Array.isArray(data) && data.length == 2 && typeof data[0] == "number" && typeof data[1] == "number"
             ? data[0].toString().padStart(2, "0") + data[1].toString().padStart(2, "0")
@@ -20523,14 +20529,14 @@ class Handler$e {
         return state.value.length < 4 && symbol >= "0" && symbol <= "9";
     }
 }
-add("card-expires", () => new Handler$e());
+add("card-expires", () => new Handler$g());
 
-class Handler$d {
+class Handler$f {
     toString(data) {
         return typeof data == "string" ? data : "";
     }
     fromString(value) {
-        return typeof value == "string" ? value : undefined;
+        return typeof value == "string" && !!value ? value : undefined;
     }
     format(unformatted) {
         const issuer = getIssuer(unformatted.value);
@@ -20552,7 +20558,7 @@ class Handler$d {
         return symbol >= "0" && symbol <= "9" && state.value.length < issuer.length[0];
     }
 }
-add("card-number", () => new Handler$d());
+add("card-number", () => new Handler$f());
 function getIssuer(value) {
     let result = defaultIssuer;
     for (const key in issuers)
@@ -26902,7 +26908,7 @@ add("date", (parameters) => {
     return create();
 });
 
-class Handler$c extends Base {
+class Handler$e extends Base {
     constructor(separator) {
         super(separator);
     }
@@ -26950,11 +26956,11 @@ class Handler$c extends Base {
                             : state.selection.start < 8 && symbol >= "0" && symbol <= "9";
     }
 }
-register("dd.mm.YYYY", () => new Handler$c("."));
-register("dd/mm/YYYY", () => new Handler$c("/"));
-register("dd-mm-YYYY", () => new Handler$c("-"));
+register("dd.mm.YYYY", () => new Handler$e("."));
+register("dd/mm/YYYY", () => new Handler$e("/"));
+register("dd-mm-YYYY", () => new Handler$e("-"));
 
-class Handler$b extends Base {
+class Handler$d extends Base {
     constructor(separator) {
         super(separator);
     }
@@ -26999,9 +27005,9 @@ class Handler$b extends Base {
         return result;
     }
 }
-register("mm/dd/YYYY", () => new Handler$b("/"));
+register("mm/dd/YYYY", () => new Handler$d("/"));
 
-class Handler$a extends Base {
+class Handler$c extends Base {
     constructor(separator) {
         super(separator);
     }
@@ -27050,9 +27056,9 @@ class Handler$a extends Base {
                         : state.selection.start < 8 && symbol >= "0" && symbol <= "9";
     }
 }
-register("YYYY-mm-dd", () => new Handler$a("-"));
+register("YYYY-mm-dd", () => new Handler$c("-"));
 
-class Handler$9 {
+class Handler$b {
     toString(data) {
         return typeof data == "string" ? data : "";
     }
@@ -27105,7 +27111,7 @@ class Handler$9 {
             ((symbol >= "0" && symbol <= "9") || symbol == "-" || symbol == ":" || symbol == "." || symbol == " "));
     }
 }
-add("date-time", () => new Handler$9());
+add("date-time", () => new Handler$b());
 function formatDate(unformatted, format) {
     let result = unformatted;
     switch (format) {
@@ -27202,7 +27208,7 @@ function daysPerMonth(year, month) {
     return result;
 }
 
-class Handler$8 {
+class Handler$a {
     toString(data) {
         return Array.isArray(data) && data.length == 2 && typeof data[0] == "number" && typeof data[1] == "number"
             ? data[0].toString() + " / " + data[1].toString()
@@ -27258,9 +27264,9 @@ class Handler$8 {
         return state.value.length < 7 && ((symbol >= "0" && symbol <= "9") || symbol == "/" || symbol == " ");
     }
 }
-add("divisor", () => new Handler$8());
+add("divisor", () => new Handler$a());
 
-class Handler$7 {
+class Handler$9 {
     constructor() {
         this.separator = ":";
         this.patterns = {
@@ -27342,9 +27348,96 @@ class Handler$7 {
         return !!nextValue.match(this.patterns.allowed);
     }
 }
-add("duration", () => new Handler$7());
+add("duration", () => new Handler$9());
 
-class Handler$6 {
+class Handler$8 {
+    constructor(settings, mode) {
+        this.settings = settings;
+        this.mode = mode;
+    }
+    toString(data) {
+        return typeof data == "string" ? data : "";
+    }
+    fromString(value) {
+        return typeof value == "string" && !!value ? value : undefined;
+    }
+    split(unformatted) {
+        let firstAllowedSymbol;
+        let previousAllowedSymbol = "";
+        return unformatted
+            .map((symbol, index) => {
+            const newSymbol = index !== 0 &&
+                symbol === symbol.toUpperCase() &&
+                isNaN(+symbol) &&
+                previousAllowedSymbol !== " " &&
+                this.isSymbolAllowed(symbol) &&
+                firstAllowedSymbol
+                ? " " + symbol
+                : (symbol === "_" || symbol === "-") && previousAllowedSymbol !== " "
+                    ? " "
+                    : (symbol === " " && previousAllowedSymbol === " ") ||
+                        !this.isSymbolAllowed(symbol) ||
+                        (!firstAllowedSymbol && !this.isSymbolLetter(symbol) && this.mode !== "code")
+                        ? ""
+                        : symbol;
+            !firstAllowedSymbol && (firstAllowedSymbol = this.isSymbolLetter(symbol));
+            this.isSymbolAllowed(symbol) && (previousAllowedSymbol = symbol);
+            return newSymbol;
+        })
+            .toLower()
+            .delete("-")
+            .delete("_");
+    }
+    isSymbolLetter(symbol) {
+        return (symbol >= "a" && symbol <= "z") || (symbol >= "A" && symbol <= "Z");
+    }
+    isSymbolAllowed(symbol) {
+        return this.isSymbolLetter(symbol) || (symbol >= "0" && symbol <= "9") || symbol === " ";
+    }
+    format(unformatted) {
+        const alignedString = this.split(unformatted);
+        let result;
+        switch (this.mode) {
+            case "code":
+                result = alignedString.delete(" ");
+                break;
+            case "pascal":
+            case "camel":
+                let previousSpace;
+                result = alignedString
+                    .map((symbol, index) => {
+                    const newSymbol = (index === 0 && this.mode === "pascal") || previousSpace ? symbol.toUpperCase() : symbol.toLowerCase();
+                    previousSpace = symbol == " ";
+                    return newSymbol;
+                })
+                    .delete(" ");
+                break;
+            case "snake":
+            case "attribute":
+                result = alignedString.replace(" ", this.mode === "snake" ? "_" : "-");
+                break;
+            default:
+                result = unformatted;
+        }
+        return { ...result, ...this.settings, type: "text", autocomplete: "on" };
+    }
+    unformat(formatted) {
+        return formatted;
+    }
+    allowed(symbol, state) {
+        return (this.isSymbolLetter(symbol) ||
+            (symbol >= "0" && symbol <= "9" && (this.mode == "code" || state.value.length > 0)) ||
+            (symbol == "_" && this.mode == "snake" && state.value.length > 0) ||
+            (symbol == "-" && this.mode == "attribute" && state.value.length > 0));
+    }
+}
+add("identifier-code", (settings) => new Handler$8(settings || {}, "code"));
+add("identifier-pascal", (settings) => new Handler$8(settings || {}, "pascal"));
+add("identifier-snake", (settings) => new Handler$8(settings || {}, "snake"));
+add("identifier-camel", (settings) => new Handler$8(settings || {}, "camel"));
+add("identifier-attribute", (settings) => new Handler$8(settings || {}, "attribute"));
+
+class Handler$7 {
     constructor(country) {
         this.country = country;
     }
@@ -27352,7 +27445,7 @@ class Handler$6 {
         return typeof data == "string" ? data : "";
     }
     fromString(value) {
-        return typeof value == "string" ? value : undefined;
+        return typeof value == "string" && !!value ? value : undefined;
     }
     format(unformatted) {
         let result = unformatted;
@@ -27375,14 +27468,39 @@ class Handler$6 {
         return state.value.length < 13 && symbol >= "0" && symbol <= "9";
     }
 }
-add("identity-number", (argument) => new Handler$6(argument && argument.length > 0 ? argument[0] : undefined));
+add("identity-number", (argument) => new Handler$7(argument && argument.length > 0 ? argument[0] : undefined));
+
+class Handler$6 {
+    toString(data) {
+        return typeof data == "number" ? data.toString() : "";
+    }
+    fromString(value) {
+        const parsed = typeof value == "string" ? Number.parseInt(value) : undefined;
+        return typeof parsed == "number" && !Number.isNaN(parsed) ? parsed : undefined;
+    }
+    format(unformatted) {
+        return {
+            ...unformatted,
+            type: "number",
+            length: [3, undefined],
+            pattern: /^[0-9]+$/,
+        };
+    }
+    unformat(formatted) {
+        return formatted;
+    }
+    allowed(symbol, state) {
+        return symbol >= "0" && symbol <= "9";
+    }
+}
+add("integer", () => new Handler$6());
 
 class Handler$5 {
     toString(data) {
         return typeof data == "string" ? data : "";
     }
     fromString(value) {
-        return typeof value == "string" ? value : undefined;
+        return typeof value == "string" && !!value ? value : undefined;
     }
     format(unformatted) {
         return { ...unformatted, type: "password", autocomplete: "current-password" };
@@ -27724,7 +27842,7 @@ class Handler$3 {
         return typeof data == "string" ? data : "";
     }
     fromString(value) {
-        return typeof value == "string" ? value : undefined;
+        return typeof value == "string" && !!value ? value : undefined;
     }
     format(unformatted) {
         let result = unformatted;
@@ -27801,7 +27919,7 @@ class Handler$2 {
         return typeof data == "string" ? data : "";
     }
     fromString(value) {
-        return typeof value == "string" ? value : undefined;
+        return typeof value == "string" && !!value ? value : undefined;
     }
     format(unformatted) {
         const result = !unformatted.value.includes(" ") && unformatted.value.length >= 4 ? unformatted.insert(3, " ") : unformatted;
@@ -27834,19 +27952,17 @@ class Handler$1 {
         return result != undefined && !isNaN(result) ? result : undefined;
     }
     format(unformatted) {
-        let separator = unformatted.value && unformatted.value.includes(".") ? unformatted.value.indexOf(".") : undefined;
         let result = unformatted.value == "NaN" ? unformatted.replace(0, unformatted.value.length, "") : StateEditor.copy(unformatted);
+        const decimals = this.currency && Currency.decimalDigits(this.currency);
+        if (!result.value.includes(".") && decimals && Math.abs(Number.parseFloat(result.value)) > 0)
+            result = result.suffix(".0");
+        let separator = result.value && result.value.includes(".") ? result.value.indexOf(".") : undefined;
         if (separator == 0) {
             result = result.prepend("0");
             separator++;
         }
         if (separator != undefined) {
-            const adjust = separator +
-                1 +
-                (!this.currency || Currency.decimalDigits(this.currency) == undefined
-                    ? 2
-                    : Currency.decimalDigits(this.currency) ?? 2) -
-                result.value.length;
+            const adjust = separator + 1 + (decimals ?? 2) - result.value.length;
             result = adjust < 0 ? result.truncate(result.value.length + adjust) : result.suffix("0".repeat(adjust));
         }
         else
@@ -27889,7 +28005,7 @@ class Handler {
         return typeof data == "string" ? data : "";
     }
     fromString(value) {
-        return typeof value == "string" ? value : undefined;
+        return typeof value == "string" && !!value ? value : undefined;
     }
     format(unformatted) {
         return { ...unformatted, type: "text", ...this.settings };
@@ -28101,6 +28217,8 @@ const SmoothlyGoogleFont$1 = class extends HTMLElement {
   }
 };
 
+const alertCircle = `<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><title>ionicons-v5-a</title><path d="M256,48C141.31,48,48,141.31,48,256s93.31,208,208,208,208-93.31,208-208S370.69,48,256,48Zm0,319.91a20,20,0,1,1,20-20A20,20,0,0,1,256,367.91Zm21.72-201.15-5.74,122a16,16,0,0,1-32,0l-5.74-121.94v-.05a21.74,21.74,0,1,1,43.44,0Z"/></svg>`;
+
 const styleCss$B = "[size].sc-smoothly-icon-h{background:none}.sc-smoothly-icon-h{display:block;transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0)}[hidden].sc-smoothly-icon-h{display:none}[size=tiny].sc-smoothly-icon-h{width:1.2em;height:1.2em}[size=small].sc-smoothly-icon-h{width:1.4em;height:1.4em}[size=medium].sc-smoothly-icon-h{width:1.8em;height:1.8em}[size=large].sc-smoothly-icon-h{width:2.8em;height:2.8em}[size=xlarge].sc-smoothly-icon-h{width:4em;height:4em}";
 
 const SmoothlyIcon$1 = class extends HTMLElement {
@@ -28115,7 +28233,9 @@ const SmoothlyIcon$1 = class extends HTMLElement {
     this.document = undefined;
   }
   async loadDocument() {
-    if (this.name)
+    if (this.name == "alert-circle")
+      this.document = alertCircle;
+    else if (this.name)
       try {
         this.document = await Icon.load(this.name);
       }
@@ -28957,7 +29077,7 @@ const SmoothlyInputDemo$1 = class extends HTMLElement {
   }
   render() {
     return [
-      h("form", { action: "done", style: { position: "relative" } }, h("header", null, h("h5", null, "Form")), h("main", null, h("fieldset", null, h("h2", null, "Smoothly Input"), h("h3", null, "Card"), h("smoothly-input", { type: "text", name: "name", readonly: true, value: "Readonly", onSmoothlyBlur: () => console.log("smoothly blur") }, "Readonly"), h("smoothly-input", { type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, "Name"), h("smoothly-input", { type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Name"), h("smoothly-input-date", null), h("smoothly-input", { type: "date", name: "date" }, "Date"), h("smoothly-input", { type: "date-time", name: "date-time" }, "Date-Time"), h("smoothly-input", { type: "divisor", name: "divisor" }, "Divisor"), h("smoothly-input", { type: "text", name: "street", value: "street" }, "Street"), h("smoothly-input", { type: "card-number", name: "card" }, "Card #"), h("smoothly-input", { type: "card-expires", name: "card", style: { width: "calc(60% - 2px)" } }, "Expires"), h("smoothly-input", { type: "card-csc", name: "card", style: { width: "calc(40% - 1px)", borderLeft: "none" } }, "CVV/CVC"), h("h3", null, "Contact"), h("smoothly-input", { type: "postal-code", name: "zip", style: { width: "calc(60% - 2px)" } }, "ZipCode"), h("smoothly-input", { type: "text", name: "testing" }, "Texttest"), h("smoothly-input", { type: "password", name: "password" }, "Password"), h("smoothly-input", { type: "email", name: "email" }, "Email"), h("smoothly-input", { type: "price", currency: "SEK", name: "price" }, "Price"), h("smoothly-input", { type: "percent", name: "percent" }, "Percent"), h("smoothly-input", { type: "phone", name: "phone" }, "Phone"), h("smoothly-input-date", { name: "some-date" }, "Calendar"), h("smoothly-input-date", { name: "some-date", color: "tertiary" }, "Calendar (chosen color)"), h("smoothly-input-date", { name: "some-date", flexible: true }, "Calendar (no min-width)")), h("fieldset", null, h("h2", null, "Smoothly Radio"), h("h3", null, "Deselectable Radio List with button"), h("smoothly-radio-button", { deselectable: true, decoration: "button" }, h("smoothly-radio-button-item", { value: { some: "content", yes: "sir" }, color: "primary", iconColor: "medium" }, h("span", null, "Option 1"), h("span", { slot: "expansion" }, "Some description.")), h("smoothly-radio-button-item", { value: { some: "thing", yes: "miss" }, iconColor: "light" }, h("span", null, "Option 2"), h("span", { slot: "expansion" }, "Some other description.")), h("smoothly-radio-button-item", { value: { some: "one", yes: "kid" }, iconColor: "danger" }, h("span", null, "Option 3")), h("smoothly-radio-button-item", { value: { some: "some", yes: "thing" }, disabled: true }, h("span", null, "Option 4 (Disabled)"))), h("h3", null, "Radio List with button"), h("smoothly-radio-button", { decoration: "button" }, h("smoothly-radio-button-item", { value: { some: "content", yes: "sir" }, color: "warning" }, h("span", null, "Option 1"), h("span", { slot: "expansion" }, "Some description.")), h("smoothly-radio-button-item", { value: { some: "thing", yes: "miss" } }, h("span", null, "Option 2"), h("span", { slot: "expansion" }, "Some other description.")), h("smoothly-radio-button-item", { value: { some: "one", yes: "kid" } }, h("span", null, "Option 3"))), h("h3", null, "Radio List ", h("b", null, "without button")), h("smoothly-radio-button", null, h("smoothly-radio-button-item", { value: { some: "content", yes: "sir" }, selected: true, color: "light" }, h("span", null, "Option 1"), h("span", { slot: "expansion" }, "Some description.")), h("smoothly-radio-button-item", { value: { some: "thing", yes: "miss" }, color: "light" }, h("span", null, "Option 2"), h("span", { slot: "expansion" }, "Some other description.")), h("smoothly-radio-button-item", { value: { some: "one", yes: "kid" }, color: "light" }, h("span", null, "Option 3"))), h("smoothly-radio", { name: "option", value: "1" }, "option 1"), h("smoothly-radio", { name: "option", value: "2", checked: true }, "option 2"), h("smoothly-radio", { name: "option", value: "3" }, "option 3")), h("fieldset", null, h("h2", null, "Smoothly Accordion"), h("smoothly-accordion", null, h("smoothly-accordion-item", { name: "A", open: true }, h("smoothly-radio", { name: "a", value: "1" }, "a 1"), h("smoothly-radio", { name: "a", value: "2", checked: true }, "a 2"), h("smoothly-radio", { name: "a", value: "3" }, "a 3")), h("smoothly-accordion-item", { name: "B" }, h("smoothly-radio", { name: "b", value: "1" }, "b 1"), h("smoothly-radio", { name: "b", value: "2" }, "b 2"), h("smoothly-radio", { name: "b", value: "3" }, "b 3")))), h("fieldset", null, h("h2", null, "Smoothly checkbox"), h("smoothly-checkbox", { selectAll: true, intermediate: true }), h("smoothly-checkbox", null), h("smoothly-checkbox", { disabled: true })), h("fieldset", null, h("h2", null, "Smoothly addresses"), h("smoothly-address-display", { value: '{ "countryCode": "SE", "street": "Korkstigen 2", "zipCode": "654 31", "city": "Fejksala" }' }), h("smoothly-address", { editable: false, value: '{ "countryCode": "SE", "street": "Stigv\u00E4gen 34", "zipCode": "123 45", "city": "Hobbiton" }' }), h("smoothly-addresses", { allowed: "billing delivery visit", editable: true, value: '{ "billing": { "countryCode": "SE", "street": "Rundslingan 3", "zipCode": "987 65", "city": "Klotby" }, "visit": { "countryCode": "SE", "street": "G\u00E5ngbanan 34", "zipCode": "543 21", "city": "Trasktr\u00E4sk" } }' }))), h("footer", null, h("smoothly-submit", { expand: "block", onSubmit: (e) => alert(e), color: "success" }, "Submit"), h("smoothly-submit", { disabled: true, expand: "block", onClick: e => console.log(e), onSubmit: (e) => alert(e), color: "success" }, "Submit"), h("smoothly-trigger", { expand: "block", color: "success", onClick: (e) => console.log(e.detail) }, "Trigger"))),
+      h("form", { action: "done", style: { position: "relative" } }, h("header", null, h("h5", null, "Form")), h("main", null, h("fieldset", null, h("h2", null, "Smoothly Input"), h("h3", null, "Card"), h("smoothly-input", { type: "text", name: "name", readonly: true, value: "Readonly", onSmoothlyBlur: () => console.log("smoothly blur") }, "Readonly"), h("smoothly-input", { type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, "Name"), h("smoothly-input", { type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Name"), h("smoothly-input-date", null), h("smoothly-input", { type: "date", name: "date" }, "Date"), h("smoothly-input", { type: "date-time", name: "date-time" }, "Date-Time"), h("smoothly-input", { type: "divisor", name: "divisor" }, "Divisor"), h("smoothly-input", { type: "text", name: "street", value: "street" }, "Street"), h("smoothly-input", { type: "card-number", name: "card" }, "Card #"), h("smoothly-input", { type: "card-expires", name: "card", style: { width: "calc(60% - 2px)" } }, "Expires"), h("smoothly-input", { type: "card-csc", name: "card", style: { width: "calc(40% - 1px)", borderLeft: "none" } }, "CVV/CVC"), h("h3", null, "Contact"), h("smoothly-input", { type: "postal-code", name: "zip", style: { width: "calc(60% - 2px)" } }, "ZipCode"), h("smoothly-input", { type: "text", name: "testing" }, "Texttest"), h("smoothly-input", { type: "integer", name: "integer" }, "Integer"), h("smoothly-input", { type: "identifier-code", name: "identifier-code" }, "Identifier"), h("smoothly-input", { type: "password", name: "password" }, "Password"), h("smoothly-input", { type: "email", name: "email" }, "Email"), h("smoothly-input", { type: "price", currency: "SEK", name: "price" }, "Price"), h("smoothly-input", { type: "percent", name: "percent" }, "Percent"), h("smoothly-input", { type: "phone", name: "phone" }, "Phone"), h("smoothly-input-date", { name: "some-date" }, "Calendar"), h("smoothly-input-date", { name: "some-date", color: "tertiary" }, "Calendar (chosen color)"), h("smoothly-input-date", { name: "some-date", flexible: true }, "Calendar (no min-width)")), h("fieldset", null, h("h2", null, "Smoothly Radio"), h("h3", null, "Deselectable Radio List with button"), h("smoothly-radio-button", { deselectable: true, decoration: "button" }, h("smoothly-radio-button-item", { value: { some: "content", yes: "sir" }, color: "primary", iconColor: "medium" }, h("span", null, "Option 1"), h("span", { slot: "expansion" }, "Some description.")), h("smoothly-radio-button-item", { value: { some: "thing", yes: "miss" }, iconColor: "light" }, h("span", null, "Option 2"), h("span", { slot: "expansion" }, "Some other description.")), h("smoothly-radio-button-item", { value: { some: "one", yes: "kid" }, iconColor: "danger" }, h("span", null, "Option 3")), h("smoothly-radio-button-item", { value: { some: "some", yes: "thing" }, disabled: true }, h("span", null, "Option 4 (Disabled)"))), h("h3", null, "Radio List with button"), h("smoothly-radio-button", { decoration: "button" }, h("smoothly-radio-button-item", { value: { some: "content", yes: "sir" }, color: "warning" }, h("span", null, "Option 1"), h("span", { slot: "expansion" }, "Some description.")), h("smoothly-radio-button-item", { value: { some: "thing", yes: "miss" } }, h("span", null, "Option 2"), h("span", { slot: "expansion" }, "Some other description.")), h("smoothly-radio-button-item", { value: { some: "one", yes: "kid" } }, h("span", null, "Option 3"))), h("h3", null, "Radio List ", h("b", null, "without button")), h("smoothly-radio-button", null, h("smoothly-radio-button-item", { value: { some: "content", yes: "sir" }, selected: true, color: "light" }, h("span", null, "Option 1"), h("span", { slot: "expansion" }, "Some description.")), h("smoothly-radio-button-item", { value: { some: "thing", yes: "miss" }, color: "light" }, h("span", null, "Option 2"), h("span", { slot: "expansion" }, "Some other description.")), h("smoothly-radio-button-item", { value: { some: "one", yes: "kid" }, color: "light" }, h("span", null, "Option 3"))), h("smoothly-radio", { name: "option", value: "1" }, "option 1"), h("smoothly-radio", { name: "option", value: "2", checked: true }, "option 2"), h("smoothly-radio", { name: "option", value: "3" }, "option 3")), h("fieldset", null, h("h2", null, "Smoothly Accordion"), h("smoothly-accordion", null, h("smoothly-accordion-item", { name: "A", open: true }, h("smoothly-radio", { name: "a", value: "1" }, "a 1"), h("smoothly-radio", { name: "a", value: "2", checked: true }, "a 2"), h("smoothly-radio", { name: "a", value: "3" }, "a 3")), h("smoothly-accordion-item", { name: "B" }, h("smoothly-radio", { name: "b", value: "1" }, "b 1"), h("smoothly-radio", { name: "b", value: "2" }, "b 2"), h("smoothly-radio", { name: "b", value: "3" }, "b 3")))), h("fieldset", null, h("h2", null, "Smoothly checkbox"), h("smoothly-checkbox", { selectAll: true, intermediate: true }), h("smoothly-checkbox", null), h("smoothly-checkbox", { disabled: true })), h("fieldset", null, h("h2", null, "Smoothly addresses"), h("smoothly-address-display", { value: '{ "countryCode": "SE", "street": "Korkstigen 2", "zipCode": "654 31", "city": "Fejksala" }' }), h("smoothly-address", { editable: false, value: '{ "countryCode": "SE", "street": "Stigv\u00E4gen 34", "zipCode": "123 45", "city": "Hobbiton" }' }), h("smoothly-addresses", { allowed: "billing delivery visit", editable: true, value: '{ "billing": { "countryCode": "SE", "street": "Rundslingan 3", "zipCode": "987 65", "city": "Klotby" }, "visit": { "countryCode": "SE", "street": "G\u00E5ngbanan 34", "zipCode": "543 21", "city": "Trasktr\u00E4sk" } }' }))), h("footer", null, h("smoothly-submit", { expand: "block", onSubmit: (e) => alert(e), color: "success" }, "Submit"), h("smoothly-submit", { disabled: true, expand: "block", onClick: e => console.log(e), onSubmit: (e) => alert(e), color: "success" }, "Submit"), h("smoothly-trigger", { expand: "block", color: "success", onClick: (e) => console.log(e.detail) }, "Trigger"))),
       h("smoothly-backtotop", null),
     ];
   }