smoothly 0.3.6 → 0.3.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/smoothly-accordion_53.cjs.entry.js +25 -25
- package/dist/collection/components/input-demo/index.js +1 -1
- package/dist/collection/components/radio-button/item/style.css +1 -4
- package/dist/custom-elements/index.js +25 -25
- package/dist/esm/smoothly-accordion_53.entry.js +25 -25
- package/dist/smoothly/p-a2da6c33.entry.js +1 -0
- package/dist/smoothly/smoothly.esm.js +1 -1
- package/package.json +2 -2
- package/dist/smoothly/p-8ab82f55.entry.js +0 -1
|
@@ -12551,7 +12551,7 @@ class StateEditor {
|
|
|
12551
12551
|
if (typeof start == "string" && typeof end == "string") {
|
|
12552
12552
|
let s;
|
|
12553
12553
|
result = this;
|
|
12554
|
-
while ((s = result.value.
|
|
12554
|
+
while ((s = result.value.indexOf(start)) > -1)
|
|
12555
12555
|
result = result.replace(s, s + start.length, end);
|
|
12556
12556
|
}
|
|
12557
12557
|
else if (typeof start == "number" && typeof end == "number") {
|
|
@@ -12593,7 +12593,7 @@ class StateEditor {
|
|
|
12593
12593
|
else if (typeof start == "string") {
|
|
12594
12594
|
let s;
|
|
12595
12595
|
result = this;
|
|
12596
|
-
while ((s = result.value.
|
|
12596
|
+
while ((s = result.value.indexOf(start)) > -1)
|
|
12597
12597
|
result = result.delete(s, s + start.length);
|
|
12598
12598
|
}
|
|
12599
12599
|
else
|
|
@@ -31624,11 +31624,11 @@ exports.register = exports.Base = void 0;
|
|
|
31624
31624
|
|
|
31625
31625
|
|
|
31626
31626
|
class Base {
|
|
31627
|
-
constructor(
|
|
31628
|
-
this.
|
|
31627
|
+
constructor(separator) {
|
|
31628
|
+
this.separator = separator;
|
|
31629
31629
|
}
|
|
31630
|
-
unformat(
|
|
31631
|
-
return
|
|
31630
|
+
unformat(formatted) {
|
|
31631
|
+
return formatted.delete(this.separator);
|
|
31632
31632
|
}
|
|
31633
31633
|
daysInMonth(value) {
|
|
31634
31634
|
var _a;
|
|
@@ -31661,12 +31661,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
31661
31661
|
|
|
31662
31662
|
|
|
31663
31663
|
class Handler extends Base_1.Base {
|
|
31664
|
-
constructor(
|
|
31665
|
-
super(
|
|
31664
|
+
constructor(separator) {
|
|
31665
|
+
super(separator);
|
|
31666
31666
|
}
|
|
31667
31667
|
toString(data) {
|
|
31668
31668
|
return (data === null || data === void 0 ? void 0 : data.length) == 10
|
|
31669
|
-
? [data.substring(8, 10), data.substring(5, 7), data.substring(0, 4)].join(this.
|
|
31669
|
+
? [data.substring(8, 10), data.substring(5, 7), data.substring(0, 4)].join(this.separator)
|
|
31670
31670
|
: "";
|
|
31671
31671
|
}
|
|
31672
31672
|
fromString(value) {
|
|
@@ -31678,12 +31678,12 @@ class Handler extends Base_1.Base {
|
|
|
31678
31678
|
if (result.get(0, 1) > "3")
|
|
31679
31679
|
result = result.insert(0, "0");
|
|
31680
31680
|
if (result.value.length > 1)
|
|
31681
|
-
result = result.insert(2, this.
|
|
31681
|
+
result = result.insert(2, this.separator);
|
|
31682
31682
|
if (result.get(3, 1) > "1")
|
|
31683
31683
|
result = result.insert(3, "0");
|
|
31684
31684
|
if (result.value.length > 4)
|
|
31685
|
-
result = result.insert(5, this.
|
|
31686
|
-
return Object.assign(Object.assign({}, result), { type: "text", length: [0, 10], pattern: new RegExp(["^(0[1-9]|[12][0-9]|3[01])", "(0[1-9]|1[012])", "\\d{4}$"].join(this.
|
|
31685
|
+
result = result.insert(5, this.separator);
|
|
31686
|
+
return Object.assign(Object.assign({}, result), { type: "text", length: [0, 10], pattern: new RegExp(["^(0[1-9]|[12][0-9]|3[01])", "(0[1-9]|1[012])", "\\d{4}$"].join(this.separator)) });
|
|
31687
31687
|
}
|
|
31688
31688
|
allowed(symbol, state) {
|
|
31689
31689
|
return state.selection.start == 1 && state.value[0] == "3"
|
|
@@ -31714,12 +31714,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
31714
31714
|
|
|
31715
31715
|
|
|
31716
31716
|
class Handler extends Base_1.Base {
|
|
31717
|
-
constructor(
|
|
31718
|
-
super(
|
|
31717
|
+
constructor(separator) {
|
|
31718
|
+
super(separator);
|
|
31719
31719
|
}
|
|
31720
31720
|
toString(data) {
|
|
31721
31721
|
return (data === null || data === void 0 ? void 0 : data.length) == 10
|
|
31722
|
-
? [data.substring(5, 7), data.substring(8, 10), data.substring(0, 4)].join(this.
|
|
31722
|
+
? [data.substring(5, 7), data.substring(8, 10), data.substring(0, 4)].join(this.separator)
|
|
31723
31723
|
: "";
|
|
31724
31724
|
}
|
|
31725
31725
|
fromString(value) {
|
|
@@ -31731,12 +31731,12 @@ class Handler extends Base_1.Base {
|
|
|
31731
31731
|
if (result.get(0, 1) > "1")
|
|
31732
31732
|
result = result.insert(0, "0");
|
|
31733
31733
|
if (result.value.length > 1)
|
|
31734
|
-
result = result.insert(2, this.
|
|
31734
|
+
result = result.insert(2, this.separator);
|
|
31735
31735
|
if (result.get(3, 1) > (result.get(0, 2) == "02" ? "2" : "3"))
|
|
31736
31736
|
result = result.insert(3, "0");
|
|
31737
31737
|
if (result.value.length > 4)
|
|
31738
|
-
result = result.insert(5, this.
|
|
31739
|
-
return Object.assign(Object.assign({}, result), { type: "text", length: [0, 10], pattern: new RegExp(["^(0[1-9]|1[012])", "(0[1-9]|[12][0-9]|3[01])", "\\d{4}$"].join(this.
|
|
31738
|
+
result = result.insert(5, this.separator);
|
|
31739
|
+
return Object.assign(Object.assign({}, result), { type: "text", length: [0, 10], pattern: new RegExp(["^(0[1-9]|1[012])", "(0[1-9]|[12][0-9]|3[01])", "\\d{4}$"].join(this.separator)) });
|
|
31740
31740
|
}
|
|
31741
31741
|
allowed(symbol, state) {
|
|
31742
31742
|
const result = state.selection.start == 1 && state.value[0] == "1"
|
|
@@ -31762,8 +31762,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
31762
31762
|
|
|
31763
31763
|
|
|
31764
31764
|
class Handler extends Base_1.Base {
|
|
31765
|
-
constructor(
|
|
31766
|
-
super(
|
|
31765
|
+
constructor(separator) {
|
|
31766
|
+
super(separator);
|
|
31767
31767
|
}
|
|
31768
31768
|
toString(data) {
|
|
31769
31769
|
return typeof data != "string" ? "" : data;
|
|
@@ -31775,16 +31775,16 @@ class Handler extends Base_1.Base {
|
|
|
31775
31775
|
format(unformatted) {
|
|
31776
31776
|
let result = unformatted;
|
|
31777
31777
|
if (result.value.length > 3) {
|
|
31778
|
-
result = result.insert(4, this.
|
|
31778
|
+
result = result.insert(4, this.separator);
|
|
31779
31779
|
if (result.get(5, 1) > "1")
|
|
31780
31780
|
result = result.insert(5, "0");
|
|
31781
31781
|
if (result.value.length > 6) {
|
|
31782
|
-
result = result.insert(7, this.
|
|
31782
|
+
result = result.insert(7, this.separator);
|
|
31783
31783
|
if (result.get(8, 1) > this.daysInMonth(unformatted.value).toString().substring(0, 1))
|
|
31784
31784
|
result = result.insert(8, "0");
|
|
31785
31785
|
}
|
|
31786
31786
|
}
|
|
31787
|
-
return Object.assign(Object.assign({}, result), { type: "text", length: [0, 10], pattern: new RegExp(["^\\d{4}", "(0[1-9]|1[012])", "(0[1-9]|[12][0-9]|3[01])$"].join(this.
|
|
31787
|
+
return Object.assign(Object.assign({}, result), { type: "text", length: [0, 10], pattern: new RegExp(["^\\d{4}", "(0[1-9]|1[012])", "(0[1-9]|[12][0-9]|3[01])$"].join(this.separator)) });
|
|
31788
31788
|
}
|
|
31789
31789
|
allowed(symbol, state) {
|
|
31790
31790
|
const daysInMonth = this.daysInMonth(state.value);
|
|
@@ -33637,7 +33637,7 @@ const SmoothlyInputDemo = class {
|
|
|
33637
33637
|
}
|
|
33638
33638
|
render() {
|
|
33639
33639
|
return [
|
|
33640
|
-
index.h("form", { action: "done", style: { position: "relative" } }, index.h("header", null, index.h("h5", null, "Form")), index.h("main", null, index.h("fieldset", null, index.h("h2", null, "Smoothly Iput"), index.h("h3", null, "Card"), index.h("smoothly-input", { type: "text", name: "name", readonly: true, value: "Readonly", onSmoothlyBlur: () => console.log("smoothly blur") }, "Readonly"), index.h("smoothly-input", { type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, "Name"), index.h("smoothly-input", { type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Name"), index.h("smoothly-input-date", null), index.h("smoothly-input", { type: "date", name: "date" }, "Date"), index.h("smoothly-input", { type: "date-time", name: "date-time" }, "Date-Time"), index.h("smoothly-input", { type: "divisor", name: "divisor" }, "Divisor"), index.h("smoothly-input", { type: "text", name: "street", value: "street" }, "Street"), index.h("smoothly-input", { type: "card-number", name: "card" }, "Card #"), index.h("smoothly-input", { type: "card-expires", name: "card", style: { width: "calc(60% - 2px)" } }, "Expires"), index.h("smoothly-input", { type: "card-csc", name: "card", style: { width: "calc(40% - 1px)", borderLeft: "none" } }, "CVV/CVC"), index.h("h3", null, "Contact"), index.h("smoothly-input", { type: "postal-code", name: "zip", style: { width: "calc(60% - 2px)" } }, "ZipCode"), index.h("smoothly-input", { type: "text", name: "testing" }, "Texttest"), index.h("smoothly-input", { type: "password", name: "password" }, "Password"), index.h("smoothly-input", { type: "email", name: "email" }, "Email"), index.h("smoothly-input", { type: "price", currency: "SEK", name: "price" }, "Price"), index.h("smoothly-input", { type: "percent", name: "percent" }, "Percent"), index.h("smoothly-input", { type: "phone", name: "phone" }, "Phone"), index.h("smoothly-input-date", null, "Date")), index.h("fieldset", null, index.h("h2", null, "Smoothly Radio"), index.h("h3", null, "Deselectable Radio List with button"), index.h("smoothly-radio-button", { deselectable: true, decoration: "button" }, index.h("smoothly-radio-button-item", { value: { some: "content", yes: "sir" } }, index.h("span", null, "Option 1"), index.h("span", { slot: "expansion" }, "Some description.")), index.h("smoothly-radio-button-item", { value: { some: "thing", yes: "miss" } }, index.h("span", null, "Option 2"), index.h("span", { slot: "expansion" }, "Some other description.")), index.h("smoothly-radio-button-item", { value: { some: "one", yes: "kid" } }, index.h("span", null, "Option 3"))), index.h("h3", null, "Radio List with button"), index.h("smoothly-radio-button", { decoration: "button" }, index.h("smoothly-radio-button-item", { value: { some: "content", yes: "sir" } }, index.h("span", null, "Option 1"), index.h("span", { slot: "expansion" }, "Some description.")), index.h("smoothly-radio-button-item", { value: { some: "thing", yes: "miss" } }, index.h("span", null, "Option 2"), index.h("span", { slot: "expansion" }, "Some other description.")), index.h("smoothly-radio-button-item", { value: { some: "one", yes: "kid" } }, index.h("span", null, "Option 3"))), index.h("h3", null, "Radio List ", index.h("b", null, "without button")), index.h("smoothly-radio-button", null, index.h("smoothly-radio-button-item", { value: { some: "content", yes: "sir" }, selected: true, color: "
|
|
33640
|
+
index.h("form", { action: "done", style: { position: "relative" } }, index.h("header", null, index.h("h5", null, "Form")), index.h("main", null, index.h("fieldset", null, index.h("h2", null, "Smoothly Iput"), index.h("h3", null, "Card"), index.h("smoothly-input", { type: "text", name: "name", readonly: true, value: "Readonly", onSmoothlyBlur: () => console.log("smoothly blur") }, "Readonly"), index.h("smoothly-input", { type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, "Name"), index.h("smoothly-input", { type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Name"), index.h("smoothly-input-date", null), index.h("smoothly-input", { type: "date", name: "date" }, "Date"), index.h("smoothly-input", { type: "date-time", name: "date-time" }, "Date-Time"), index.h("smoothly-input", { type: "divisor", name: "divisor" }, "Divisor"), index.h("smoothly-input", { type: "text", name: "street", value: "street" }, "Street"), index.h("smoothly-input", { type: "card-number", name: "card" }, "Card #"), index.h("smoothly-input", { type: "card-expires", name: "card", style: { width: "calc(60% - 2px)" } }, "Expires"), index.h("smoothly-input", { type: "card-csc", name: "card", style: { width: "calc(40% - 1px)", borderLeft: "none" } }, "CVV/CVC"), index.h("h3", null, "Contact"), index.h("smoothly-input", { type: "postal-code", name: "zip", style: { width: "calc(60% - 2px)" } }, "ZipCode"), index.h("smoothly-input", { type: "text", name: "testing" }, "Texttest"), index.h("smoothly-input", { type: "password", name: "password" }, "Password"), index.h("smoothly-input", { type: "email", name: "email" }, "Email"), index.h("smoothly-input", { type: "price", currency: "SEK", name: "price" }, "Price"), index.h("smoothly-input", { type: "percent", name: "percent" }, "Percent"), index.h("smoothly-input", { type: "phone", name: "phone" }, "Phone"), index.h("smoothly-input-date", null, "Date")), index.h("fieldset", null, index.h("h2", null, "Smoothly Radio"), index.h("h3", null, "Deselectable Radio List with button"), index.h("smoothly-radio-button", { deselectable: true, decoration: "button" }, index.h("smoothly-radio-button-item", { value: { some: "content", yes: "sir" } }, index.h("span", null, "Option 1"), index.h("span", { slot: "expansion" }, "Some description.")), index.h("smoothly-radio-button-item", { value: { some: "thing", yes: "miss" } }, index.h("span", null, "Option 2"), index.h("span", { slot: "expansion" }, "Some other description.")), index.h("smoothly-radio-button-item", { value: { some: "one", yes: "kid" } }, index.h("span", null, "Option 3"))), index.h("h3", null, "Radio List with button"), index.h("smoothly-radio-button", { decoration: "button" }, index.h("smoothly-radio-button-item", { value: { some: "content", yes: "sir" } }, index.h("span", null, "Option 1"), index.h("span", { slot: "expansion" }, "Some description.")), index.h("smoothly-radio-button-item", { value: { some: "thing", yes: "miss" } }, index.h("span", null, "Option 2"), index.h("span", { slot: "expansion" }, "Some other description.")), index.h("smoothly-radio-button-item", { value: { some: "one", yes: "kid" } }, index.h("span", null, "Option 3"))), index.h("h3", null, "Radio List ", index.h("b", null, "without button")), index.h("smoothly-radio-button", null, index.h("smoothly-radio-button-item", { value: { some: "content", yes: "sir" }, selected: true, color: "light" }, index.h("span", null, "Option 1"), index.h("span", { slot: "expansion" }, "Some description.")), index.h("smoothly-radio-button-item", { value: { some: "thing", yes: "miss" }, color: "light" }, index.h("span", null, "Option 2"), index.h("span", { slot: "expansion" }, "Some other description.")), index.h("smoothly-radio-button-item", { value: { some: "one", yes: "kid" }, color: "light" }, index.h("span", null, "Option 3"))), index.h("smoothly-radio", { name: "option", value: "1" }, "option 1"), index.h("smoothly-radio", { name: "option", value: "2", checked: true }, "option 2"), index.h("smoothly-radio", { name: "option", value: "3" }, "option 3")), index.h("fieldset", null, index.h("h2", null, "Smoothly Accordion"), index.h("smoothly-accordion", null, index.h("smoothly-accordion-item", { name: "A", open: true }, index.h("smoothly-radio", { name: "a", value: "1" }, "a 1"), index.h("smoothly-radio", { name: "a", value: "2", checked: true }, "a 2"), index.h("smoothly-radio", { name: "a", value: "3" }, "a 3")), index.h("smoothly-accordion-item", { name: "B" }, index.h("smoothly-radio", { name: "b", value: "1" }, "b 1"), index.h("smoothly-radio", { name: "b", value: "2" }, "b 2"), index.h("smoothly-radio", { name: "b", value: "3" }, "b 3")))), index.h("fieldset", null, index.h("h2", null, "Smoothly checkbox"), index.h("smoothly-checkbox", { selectAll: true, intermediate: true }), index.h("smoothly-checkbox", null), index.h("smoothly-checkbox", { disabled: true })), index.h("fieldset", null, index.h("h2", null, "Smoothly addresses"), index.h("smoothly-address-display", { value: '{ "countryCode": "SE", "street": "Korkstigen 2", "zipCode": "654 31", "city": "Fejksala" }' }), index.h("smoothly-address", { editable: false, value: '{ "countryCode": "SE", "street": "Stigv\u00E4gen 34", "zipCode": "123 45", "city": "Hobbiton" }' }), index.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" } }' }))), index.h("footer", null, index.h("smoothly-submit", { expand: "block", onSubmit: (e) => alert(e), color: "success" }, "Submit"), index.h("smoothly-trigger", { expand: "block", color: "success", onClick: (e) => console.log(e.detail) }, "Trigger"))),
|
|
33641
33641
|
index.h("smoothly-backtotop", null),
|
|
33642
33642
|
];
|
|
33643
33643
|
}
|
|
@@ -34206,7 +34206,7 @@ const SmoothlyRadioButton = class {
|
|
|
34206
34206
|
};
|
|
34207
34207
|
SmoothlyRadioButton.style = styleCss$i;
|
|
34208
34208
|
|
|
34209
|
-
const styleCss$h = "smoothly-radio-button[decoration=radio] .sc-smoothly-radio-button-item-h{
|
|
34209
|
+
const styleCss$h = "smoothly-radio-button[decoration=radio] .sc-smoothly-radio-button-item-h{transition:0.2s}smoothly-radio-button[decoration=radio] .sc-smoothly-radio-button-item-h>header.sc-smoothly-radio-button-item{padding:0.5rem}smoothly-radio-button[decoration=radio] .sc-smoothly-radio-button-item-h>header.sc-smoothly-radio-button-item>smoothly-icon.sc-smoothly-radio-button-item{display:none}smoothly-radio-button[decoration=radio] [selected].sc-smoothly-radio-button-item-h>header.sc-smoothly-radio-button-item{color:rgb(var(--smoothly-secondary-contrast));background:rgb(var(--smoothly-secondary-color))}smoothly-radio-button[decoration=radio].sc-smoothly-radio-button-item-s>[slot=expansion]::before,smoothly-radio-button[decoration=radio] .sc-smoothly-radio-button-item-s>[slot=expansion]::before{content:unset}@media screen and (min-width: 900px){smoothly-radio-button[decoration=radio] .sc-smoothly-radio-button-item-h:hover{background:rgb(var(--smoothly-secondary-shade));cursor:pointer}}smoothly-radio-button[decoration=button] .sc-smoothly-radio-button-item-h{padding:0.3rem}smoothly-radio-button[decoration=button] .sc-smoothly-radio-button-item-h>header.sc-smoothly-radio-button-item>smoothly-icon.sc-smoothly-radio-button-item{margin-right:0.5rem;border-radius:100%;font-size:1.3rem;display:flex;background:rgb(var(--smoothly-light-color));transition:0.2s}smoothly-radio-button[decoration=button] [selected].sc-smoothly-radio-button-item-h>header.sc-smoothly-radio-button-item>smoothly-icon.sc-smoothly-radio-button-item{color:rgb(var(--smoothly-success-color));background:rgb(var(--smoothly-success-shade))}smoothly-radio-button[decoration=button].sc-smoothly-radio-button-item-s>[slot=expansion],smoothly-radio-button[decoration=button] .sc-smoothly-radio-button-item-s>[slot=expansion]{background:rgb(var(--smoothly-secondary-color));color:rgb(var(--smoothly-secondary-contrast));border-radius:5px;margin-top:0.5rem}smoothly-radio-button[decoration=button].sc-smoothly-radio-button-item-s>[slot=expansion]::before,smoothly-radio-button[decoration=button] .sc-smoothly-radio-button-item-s>[slot=expansion]::before{content:\"\\25B2\";position:absolute;top:-0.8rem;left:3rem;color:rgb(var(--smoothly-secondary-color))}@media screen and (min-width: 900px){smoothly-radio-button[decoration=button] .sc-smoothly-radio-button-item-h>header.sc-smoothly-radio-button-item:hover>smoothly-icon.sc-smoothly-radio-button-item{background:rgb(var(--smoothly-success-color));cursor:pointer}smoothly-radio-button[deselectable] [selected].sc-smoothly-radio-button-item-h>header.sc-smoothly-radio-button-item:hover>smoothly-icon.sc-smoothly-radio-button-item{background:rgb(var(--smoothly-warning-shade));color:rgb(var(--smoothly-warning-color));cursor:pointer}}.sc-smoothly-radio-button-item-h{display:block}.sc-smoothly-radio-button-item-h>header.sc-smoothly-radio-button-item{display:flex;align-items:center}.sc-smoothly-radio-button-item-s>[slot=expansion]{display:none;background:rgb(var(--smoothly-secondary-tint));color:rgb(var(--smoothly-secondary-contrast));padding:0;position:relative;transition:0.1s}[selected].sc-smoothly-radio-button-item-s>[slot=expansion]{display:block;padding:0.5rem}";
|
|
34210
34210
|
|
|
34211
34211
|
const SmoothlyRadioButtonItem = class {
|
|
34212
34212
|
constructor(hostRef) {
|
|
@@ -2,7 +2,7 @@ import { h } from "@stencil/core";
|
|
|
2
2
|
export class SmoothlyInputDemo {
|
|
3
3
|
render() {
|
|
4
4
|
return [
|
|
5
|
-
h("form", { action: "done", style: { position: "relative" } }, h("header", null, h("h5", null, "Form")), h("main", null, h("fieldset", null, h("h2", null, "Smoothly Iput"), 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", null, "Date")), 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" } }, 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 with button"), h("smoothly-radio-button", { decoration: "button" }, h("smoothly-radio-button-item", { value: { some: "content", yes: "sir" } }, 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: "
|
|
5
|
+
h("form", { action: "done", style: { position: "relative" } }, h("header", null, h("h5", null, "Form")), h("main", null, h("fieldset", null, h("h2", null, "Smoothly Iput"), 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", null, "Date")), 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" } }, 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 with button"), h("smoothly-radio-button", { decoration: "button" }, h("smoothly-radio-button-item", { value: { some: "content", yes: "sir" } }, 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-trigger", { expand: "block", color: "success", onClick: (e) => console.log(e.detail) }, "Trigger"))),
|
|
6
6
|
h("smoothly-backtotop", null),
|
|
7
7
|
];
|
|
8
8
|
}
|
|
@@ -1,6 +1,4 @@
|
|
|
1
1
|
smoothly-radio-button[decoration=radio] :host {
|
|
2
|
-
background: rgb(var(--smoothly-secondary-shade));
|
|
3
|
-
color: rgb(var(--smoothly-secondary-contrast));
|
|
4
2
|
transition: 0.2s;
|
|
5
3
|
}
|
|
6
4
|
|
|
@@ -8,13 +6,12 @@ smoothly-radio-button[decoration=radio] :host > header {
|
|
|
8
6
|
padding: 0.5rem;
|
|
9
7
|
}
|
|
10
8
|
|
|
11
|
-
|
|
12
9
|
smoothly-radio-button[decoration=radio] :host > header > smoothly-icon {
|
|
13
10
|
display: none;
|
|
14
11
|
}
|
|
15
12
|
smoothly-radio-button[decoration=radio] :host[selected] > header {
|
|
16
13
|
color: rgb(var(--smoothly-secondary-contrast));
|
|
17
|
-
background: rgb(var(--smoothly-secondary-
|
|
14
|
+
background: rgb(var(--smoothly-secondary-color));
|
|
18
15
|
}
|
|
19
16
|
|
|
20
17
|
smoothly-radio-button[decoration=radio] ::slotted([slot=expansion])::before {
|
|
@@ -14148,7 +14148,7 @@ class StateEditor {
|
|
|
14148
14148
|
if (typeof start == "string" && typeof end == "string") {
|
|
14149
14149
|
let s;
|
|
14150
14150
|
result = this;
|
|
14151
|
-
while ((s = result.value.
|
|
14151
|
+
while ((s = result.value.indexOf(start)) > -1)
|
|
14152
14152
|
result = result.replace(s, s + start.length, end);
|
|
14153
14153
|
}
|
|
14154
14154
|
else if (typeof start == "number" && typeof end == "number") {
|
|
@@ -14190,7 +14190,7 @@ class StateEditor {
|
|
|
14190
14190
|
else if (typeof start == "string") {
|
|
14191
14191
|
let s;
|
|
14192
14192
|
result = this;
|
|
14193
|
-
while ((s = result.value.
|
|
14193
|
+
while ((s = result.value.indexOf(start)) > -1)
|
|
14194
14194
|
result = result.delete(s, s + start.length);
|
|
14195
14195
|
}
|
|
14196
14196
|
else
|
|
@@ -33221,11 +33221,11 @@ exports.register = exports.Base = void 0;
|
|
|
33221
33221
|
|
|
33222
33222
|
|
|
33223
33223
|
class Base {
|
|
33224
|
-
constructor(
|
|
33225
|
-
this.
|
|
33224
|
+
constructor(separator) {
|
|
33225
|
+
this.separator = separator;
|
|
33226
33226
|
}
|
|
33227
|
-
unformat(
|
|
33228
|
-
return
|
|
33227
|
+
unformat(formatted) {
|
|
33228
|
+
return formatted.delete(this.separator);
|
|
33229
33229
|
}
|
|
33230
33230
|
daysInMonth(value) {
|
|
33231
33231
|
var _a;
|
|
@@ -33258,12 +33258,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
33258
33258
|
|
|
33259
33259
|
|
|
33260
33260
|
class Handler extends Base_1.Base {
|
|
33261
|
-
constructor(
|
|
33262
|
-
super(
|
|
33261
|
+
constructor(separator) {
|
|
33262
|
+
super(separator);
|
|
33263
33263
|
}
|
|
33264
33264
|
toString(data) {
|
|
33265
33265
|
return (data === null || data === void 0 ? void 0 : data.length) == 10
|
|
33266
|
-
? [data.substring(8, 10), data.substring(5, 7), data.substring(0, 4)].join(this.
|
|
33266
|
+
? [data.substring(8, 10), data.substring(5, 7), data.substring(0, 4)].join(this.separator)
|
|
33267
33267
|
: "";
|
|
33268
33268
|
}
|
|
33269
33269
|
fromString(value) {
|
|
@@ -33275,12 +33275,12 @@ class Handler extends Base_1.Base {
|
|
|
33275
33275
|
if (result.get(0, 1) > "3")
|
|
33276
33276
|
result = result.insert(0, "0");
|
|
33277
33277
|
if (result.value.length > 1)
|
|
33278
|
-
result = result.insert(2, this.
|
|
33278
|
+
result = result.insert(2, this.separator);
|
|
33279
33279
|
if (result.get(3, 1) > "1")
|
|
33280
33280
|
result = result.insert(3, "0");
|
|
33281
33281
|
if (result.value.length > 4)
|
|
33282
|
-
result = result.insert(5, this.
|
|
33283
|
-
return Object.assign(Object.assign({}, result), { type: "text", length: [0, 10], pattern: new RegExp(["^(0[1-9]|[12][0-9]|3[01])", "(0[1-9]|1[012])", "\\d{4}$"].join(this.
|
|
33282
|
+
result = result.insert(5, this.separator);
|
|
33283
|
+
return Object.assign(Object.assign({}, result), { type: "text", length: [0, 10], pattern: new RegExp(["^(0[1-9]|[12][0-9]|3[01])", "(0[1-9]|1[012])", "\\d{4}$"].join(this.separator)) });
|
|
33284
33284
|
}
|
|
33285
33285
|
allowed(symbol, state) {
|
|
33286
33286
|
return state.selection.start == 1 && state.value[0] == "3"
|
|
@@ -33311,12 +33311,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
33311
33311
|
|
|
33312
33312
|
|
|
33313
33313
|
class Handler extends Base_1.Base {
|
|
33314
|
-
constructor(
|
|
33315
|
-
super(
|
|
33314
|
+
constructor(separator) {
|
|
33315
|
+
super(separator);
|
|
33316
33316
|
}
|
|
33317
33317
|
toString(data) {
|
|
33318
33318
|
return (data === null || data === void 0 ? void 0 : data.length) == 10
|
|
33319
|
-
? [data.substring(5, 7), data.substring(8, 10), data.substring(0, 4)].join(this.
|
|
33319
|
+
? [data.substring(5, 7), data.substring(8, 10), data.substring(0, 4)].join(this.separator)
|
|
33320
33320
|
: "";
|
|
33321
33321
|
}
|
|
33322
33322
|
fromString(value) {
|
|
@@ -33328,12 +33328,12 @@ class Handler extends Base_1.Base {
|
|
|
33328
33328
|
if (result.get(0, 1) > "1")
|
|
33329
33329
|
result = result.insert(0, "0");
|
|
33330
33330
|
if (result.value.length > 1)
|
|
33331
|
-
result = result.insert(2, this.
|
|
33331
|
+
result = result.insert(2, this.separator);
|
|
33332
33332
|
if (result.get(3, 1) > (result.get(0, 2) == "02" ? "2" : "3"))
|
|
33333
33333
|
result = result.insert(3, "0");
|
|
33334
33334
|
if (result.value.length > 4)
|
|
33335
|
-
result = result.insert(5, this.
|
|
33336
|
-
return Object.assign(Object.assign({}, result), { type: "text", length: [0, 10], pattern: new RegExp(["^(0[1-9]|1[012])", "(0[1-9]|[12][0-9]|3[01])", "\\d{4}$"].join(this.
|
|
33335
|
+
result = result.insert(5, this.separator);
|
|
33336
|
+
return Object.assign(Object.assign({}, result), { type: "text", length: [0, 10], pattern: new RegExp(["^(0[1-9]|1[012])", "(0[1-9]|[12][0-9]|3[01])", "\\d{4}$"].join(this.separator)) });
|
|
33337
33337
|
}
|
|
33338
33338
|
allowed(symbol, state) {
|
|
33339
33339
|
const result = state.selection.start == 1 && state.value[0] == "1"
|
|
@@ -33359,8 +33359,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
33359
33359
|
|
|
33360
33360
|
|
|
33361
33361
|
class Handler extends Base_1.Base {
|
|
33362
|
-
constructor(
|
|
33363
|
-
super(
|
|
33362
|
+
constructor(separator) {
|
|
33363
|
+
super(separator);
|
|
33364
33364
|
}
|
|
33365
33365
|
toString(data) {
|
|
33366
33366
|
return typeof data != "string" ? "" : data;
|
|
@@ -33372,16 +33372,16 @@ class Handler extends Base_1.Base {
|
|
|
33372
33372
|
format(unformatted) {
|
|
33373
33373
|
let result = unformatted;
|
|
33374
33374
|
if (result.value.length > 3) {
|
|
33375
|
-
result = result.insert(4, this.
|
|
33375
|
+
result = result.insert(4, this.separator);
|
|
33376
33376
|
if (result.get(5, 1) > "1")
|
|
33377
33377
|
result = result.insert(5, "0");
|
|
33378
33378
|
if (result.value.length > 6) {
|
|
33379
|
-
result = result.insert(7, this.
|
|
33379
|
+
result = result.insert(7, this.separator);
|
|
33380
33380
|
if (result.get(8, 1) > this.daysInMonth(unformatted.value).toString().substring(0, 1))
|
|
33381
33381
|
result = result.insert(8, "0");
|
|
33382
33382
|
}
|
|
33383
33383
|
}
|
|
33384
|
-
return Object.assign(Object.assign({}, result), { type: "text", length: [0, 10], pattern: new RegExp(["^\\d{4}", "(0[1-9]|1[012])", "(0[1-9]|[12][0-9]|3[01])$"].join(this.
|
|
33384
|
+
return Object.assign(Object.assign({}, result), { type: "text", length: [0, 10], pattern: new RegExp(["^\\d{4}", "(0[1-9]|1[012])", "(0[1-9]|[12][0-9]|3[01])$"].join(this.separator)) });
|
|
33385
33385
|
}
|
|
33386
33386
|
allowed(symbol, state) {
|
|
33387
33387
|
const daysInMonth = this.daysInMonth(state.value);
|
|
@@ -35255,7 +35255,7 @@ const SmoothlyInputDemo$1 = class extends HTMLElement {
|
|
|
35255
35255
|
}
|
|
35256
35256
|
render() {
|
|
35257
35257
|
return [
|
|
35258
|
-
h("form", { action: "done", style: { position: "relative" } }, h("header", null, h("h5", null, "Form")), h("main", null, h("fieldset", null, h("h2", null, "Smoothly Iput"), 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", null, "Date")), 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" } }, 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 with button"), h("smoothly-radio-button", { decoration: "button" }, h("smoothly-radio-button-item", { value: { some: "content", yes: "sir" } }, 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: "
|
|
35258
|
+
h("form", { action: "done", style: { position: "relative" } }, h("header", null, h("h5", null, "Form")), h("main", null, h("fieldset", null, h("h2", null, "Smoothly Iput"), 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", null, "Date")), 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" } }, 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 with button"), h("smoothly-radio-button", { decoration: "button" }, h("smoothly-radio-button-item", { value: { some: "content", yes: "sir" } }, 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-trigger", { expand: "block", color: "success", onClick: (e) => console.log(e.detail) }, "Trigger"))),
|
|
35259
35259
|
h("smoothly-backtotop", null),
|
|
35260
35260
|
];
|
|
35261
35261
|
}
|
|
@@ -35838,7 +35838,7 @@ const SmoothlyRadioButton$1 = class extends HTMLElement {
|
|
|
35838
35838
|
static get style() { return styleCss$m; }
|
|
35839
35839
|
};
|
|
35840
35840
|
|
|
35841
|
-
const styleCss$l = "smoothly-radio-button[decoration=radio] .sc-smoothly-radio-button-item-h{
|
|
35841
|
+
const styleCss$l = "smoothly-radio-button[decoration=radio] .sc-smoothly-radio-button-item-h{transition:0.2s}smoothly-radio-button[decoration=radio] .sc-smoothly-radio-button-item-h>header.sc-smoothly-radio-button-item{padding:0.5rem}smoothly-radio-button[decoration=radio] .sc-smoothly-radio-button-item-h>header.sc-smoothly-radio-button-item>smoothly-icon.sc-smoothly-radio-button-item{display:none}smoothly-radio-button[decoration=radio] [selected].sc-smoothly-radio-button-item-h>header.sc-smoothly-radio-button-item{color:rgb(var(--smoothly-secondary-contrast));background:rgb(var(--smoothly-secondary-color))}smoothly-radio-button[decoration=radio].sc-smoothly-radio-button-item-s>[slot=expansion]::before,smoothly-radio-button[decoration=radio] .sc-smoothly-radio-button-item-s>[slot=expansion]::before{content:unset}@media screen and (min-width: 900px){smoothly-radio-button[decoration=radio] .sc-smoothly-radio-button-item-h:hover{background:rgb(var(--smoothly-secondary-shade));cursor:pointer}}smoothly-radio-button[decoration=button] .sc-smoothly-radio-button-item-h{padding:0.3rem}smoothly-radio-button[decoration=button] .sc-smoothly-radio-button-item-h>header.sc-smoothly-radio-button-item>smoothly-icon.sc-smoothly-radio-button-item{margin-right:0.5rem;border-radius:100%;font-size:1.3rem;display:flex;background:rgb(var(--smoothly-light-color));transition:0.2s}smoothly-radio-button[decoration=button] [selected].sc-smoothly-radio-button-item-h>header.sc-smoothly-radio-button-item>smoothly-icon.sc-smoothly-radio-button-item{color:rgb(var(--smoothly-success-color));background:rgb(var(--smoothly-success-shade))}smoothly-radio-button[decoration=button].sc-smoothly-radio-button-item-s>[slot=expansion],smoothly-radio-button[decoration=button] .sc-smoothly-radio-button-item-s>[slot=expansion]{background:rgb(var(--smoothly-secondary-color));color:rgb(var(--smoothly-secondary-contrast));border-radius:5px;margin-top:0.5rem}smoothly-radio-button[decoration=button].sc-smoothly-radio-button-item-s>[slot=expansion]::before,smoothly-radio-button[decoration=button] .sc-smoothly-radio-button-item-s>[slot=expansion]::before{content:\"\\25B2\";position:absolute;top:-0.8rem;left:3rem;color:rgb(var(--smoothly-secondary-color))}@media screen and (min-width: 900px){smoothly-radio-button[decoration=button] .sc-smoothly-radio-button-item-h>header.sc-smoothly-radio-button-item:hover>smoothly-icon.sc-smoothly-radio-button-item{background:rgb(var(--smoothly-success-color));cursor:pointer}smoothly-radio-button[deselectable] [selected].sc-smoothly-radio-button-item-h>header.sc-smoothly-radio-button-item:hover>smoothly-icon.sc-smoothly-radio-button-item{background:rgb(var(--smoothly-warning-shade));color:rgb(var(--smoothly-warning-color));cursor:pointer}}.sc-smoothly-radio-button-item-h{display:block}.sc-smoothly-radio-button-item-h>header.sc-smoothly-radio-button-item{display:flex;align-items:center}.sc-smoothly-radio-button-item-s>[slot=expansion]{display:none;background:rgb(var(--smoothly-secondary-tint));color:rgb(var(--smoothly-secondary-contrast));padding:0;position:relative;transition:0.1s}[selected].sc-smoothly-radio-button-item-s>[slot=expansion]{display:block;padding:0.5rem}";
|
|
35842
35842
|
|
|
35843
35843
|
const SmoothlyRadioButtonItem$1 = class extends HTMLElement {
|
|
35844
35844
|
constructor() {
|