smoothly 1.0.0-alpha.132 → 1.0.0-alpha.133

package/dist/cjs/smoothly-accordion_70.cjs.entry.js

@@ -3523,7 +3523,7 @@ const SmoothlyDisplayDemo = class {
   }
   render() {
     return [
-      index.h("main", null, index.h("fieldset", null, index.h("h2", null, "Smoothly display"), index.h("dl", null, index.h("dt", null, "text"), index.h("dd", null, index.h("smoothly-display", { type: "text", value: "text" })), index.h("dt", null, "postal code"), index.h("dd", null, index.h("smoothly-display", { type: "postal-code", value: "752 31" })), index.h("dt", null, "password"), index.h("dd", null, index.h("smoothly-display", { type: "password", value: "password" })), index.h("dt", null, "email"), index.h("dd", null, index.h("smoothly-display", { type: "email", value: "test@example.com" })), index.h("dt", null, "price"), index.h("dd", null, index.h("smoothly-display", { type: "price", value: "13.37", currency: "SEK" })), index.h("dt", null, "display amount without decimals"), index.h("dd", null, index.h("smoothly-display-amount", { amount: 200, currency: "SEK", toInteger: true })), index.h("dt", null, "display amount with decimals if they are set, otherwise no decimal"), index.h("dd", null, index.h("smoothly-display-amount", { amount: 200.20, currency: "SEK", toInteger: true })), index.h("dt", null, "display amount with decimals"), index.h("dd", null, index.h("smoothly-display-amount", { amount: 200.20, currency: "SEK" })), index.h("dt", null, "percent"), index.h("dd", null, index.h("smoothly-display", { type: "percent", value: "42" })), index.h("dt", null, "phone"), index.h("dd", null, index.h("smoothly-display", { type: "phone", value: "0101881108" })), index.h("dt", null, "card number"), index.h("dd", null, index.h("smoothly-display", { type: "card-number", value: "4111111111111111" })), index.h("dt", null, "card expires"), index.h("dd", null, index.h("smoothly-display", { type: "card-expires", value: "7/22" })), index.h("dt", null, "card csc"), index.h("dd", null, index.h("smoothly-display", { type: "card-csc", value: "987" })), index.h("dt", null, "date"), index.h("dd", null, index.h("smoothly-display", { type: "date", value: "2022-07-07" })), index.h("dt", null, "date time"), index.h("dd", null, index.h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "short", day: "numeric", hour: "numeric", minute: "numeric", second: "numeric" }, value: "2022-07-07T02:02:02Z" })), index.h("dd", null, index.h("smoothly-display", { 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" })), index.h("dd", null, index.h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "2-digit", day: "2-digit", hour: "numeric", minute: "numeric", second: "numeric" }, value: "2022-07-07T12:22:24Z" })), index.h("dd", null, index.h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "numeric", day: "numeric", hour: "numeric", minute: "numeric", second: "numeric" }, value: "2022-07-07T12:22:24Z" })), index.h("dd", null, index.h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "short", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), index.h("dd", null, index.h("smoothly-display", { type: "date-time", format: { year: "2-digit", month: "numeric", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), index.h("dd", null, index.h("smoothly-display", { 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" })), index.h("dt", null, "Deprecated display date time"), index.h("dt", null, "Display amount"), index.h("dd", null, index.h("smoothly-display-amount", { currency: "SEK", amount: "1289.5" })), index.h("dt", null, "Quiet"), index.h("dd", null, index.h("smoothly-quiet", { color: "dark" }, "-")), index.h("dt", null, "Duration"), index.h("dd", null, index.h("smoothly-display", { type: "duration", value: { hours: 13, minutes: 100 } }), index.h("smoothly-display", { type: "duration", value: { hours: 8, minutes: 30 } }), index.h("smoothly-display", { type: "duration", value: { hours: 0, minutes: 3 } })))), index.h("fieldset", null, index.h("h2", null, "Smoothly skeleton"), index.h("smoothly-skeleton", { period: 3, distance: "20rem", width: "20rem" }), index.h("smoothly-skeleton", { period: 3, distance: "20rem", color: "200,200,255" }), index.h("smoothly-skeleton", { period: 3, distance: "20rem", color: "var(--smoothly-warning-color)" }), index.h("smoothly-skeleton", { period: 3, distance: "20rem" }), index.h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem", width: "20rem" }), index.h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), index.h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), index.h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), index.h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem", width: "20rem" }), index.h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }), index.h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }), index.h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" })), index.h("fieldset", null, index.h("h2", null, "Smoothly URL encoded"), index.h("smoothly-urlencoded", { data: "hej=hopp&tjena=moss" })), index.h("fieldset", null, index.h("h2", null, "Smoothly popup"), index.h("div", { style: { display: "flex", justifyContent: "space-between" } }, index.h("smoothly-popup", { direction: "down" }, "Click for popup", index.h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup stuff that has a lot of text")), index.h("smoothly-popup", { direction: "down" }, "Click for popup", index.h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup with a bunch of text."))), index.h("smoothly-popup", null, index.h("div", null, "Popup, click me"), index.h("div", { color: "dark", slot: "popup" }, "1 line popup"))), index.h("fieldset", null, index.h("h2", null, "Test of different kinds of notifier"), index.h("button", { onClick: () => this.noticeWarning(redirect.Notice.warn("This is a test warning notice.")) }, "warning"), index.h("button", { onClick: () => this.noticeWarning(redirect.Notice.succeeded("This is a test success notice.")) }, "success"), index.h("button", { onClick: () => this.noticeWarning(redirect.Notice.failed("This is a test danger notice.")) }, "danger"), index.h("button", { onClick: () => this.noticeWarning(redirect.Notice.execute("This is a test execute notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "execute"), index.h("button", { onClick: () => this.noticeWarning(redirect.Notice.delay("This is a test delay notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "delay")), index.h("fieldset", null, index.h("h2", null, "Smoothly spinner"), index.h("div", { style: { position: "relative", height: "10em" } }, "Large Spinner", index.h("smoothly-spinner", { active: true, size: "large", style: { "--background-color": "255,255,255", "--background-opacity": "0.2", "--spinner-color": "0,130,0", } })), index.h("div", { style: { position: "relative", height: "10em" } }, "Medium Spinner", index.h("smoothly-spinner", { active: true, size: "medium" })), index.h("div", { style: { position: "relative", height: "10em" } }, "Small Spinner", index.h("smoothly-spinner", { active: true, size: "small" })), index.h("div", { style: { position: "absolute", left: "500px", top: "150px" } }, index.h("smoothly-svg", { url: "https://theme.payfunc.com/intergiro/animated-logo.svg" }))), index.h("fieldset", null, index.h("h2", null, "Smoothly summary"), index.h("smoothly-summary", { color: "light", fill: "clear", size: "large" }, index.h("p", { slot: "summary" }, "Some title"), index.h("p", { slot: "content" }, "Some content")), index.h("smoothly-summary", { color: "light", fill: "clear", size: "large" }, index.h("p", { slot: "summary" }, "Some title"), index.h("p", { slot: "content" }, "Some content")), index.h("smoothly-summary", { color: "danger", fill: "clear" }, index.h("div", { slot: "summary", style: { display: "flex", gap: "0.3rem" } }, index.h("span", null, "Person"), index.h("smoothly-icon", { name: "person", color: "light", fill: "clear", size: "tiny" })), index.h("p", { slot: "content" }, "Some person information.")), index.h("smoothly-summary", { color: "danger", fill: "clear", open: true }, index.h("p", { slot: "summary" }, "Some other title"), index.h("p", { 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.")))),
+      index.h("main", null, index.h("fieldset", null, index.h("h2", null, "Smoothly display"), index.h("dl", null, index.h("dt", null, "text"), index.h("dd", null, index.h("smoothly-display", { type: "text", value: "text" })), index.h("dt", null, "postal code"), index.h("dd", null, index.h("smoothly-display", { type: "postal-code", value: "752 31" })), index.h("dt", null, "password"), index.h("dd", null, index.h("smoothly-display", { type: "password", value: "password" })), index.h("dt", null, "email"), index.h("dd", null, index.h("smoothly-display", { type: "email", value: "test@example.com" })), index.h("dt", null, "price"), index.h("dd", null, index.h("smoothly-display", { type: "price", value: "13.37", currency: "SEK" })), index.h("dt", null, "display amount without decimals"), index.h("dd", null, index.h("smoothly-display-amount", { amount: 200, currency: "SEK", toInteger: true })), index.h("dt", null, "display amount with decimals if they are set, otherwise no decimal"), index.h("dd", null, index.h("smoothly-display-amount", { amount: 200.20, currency: "SEK", toInteger: true })), index.h("dt", null, "display amount with decimals"), index.h("dd", null, index.h("smoothly-display-amount", { amount: 200.20, currency: "SEK" })), index.h("dt", null, "percent"), index.h("dd", null, index.h("smoothly-display", { type: "percent", value: "42" })), index.h("dt", null, "phone"), index.h("dd", null, index.h("smoothly-display", { type: "phone", value: "0101881108" })), index.h("dt", null, "card number"), index.h("dd", null, index.h("smoothly-display", { type: "card-number", value: "4111111111111111" })), index.h("dt", null, "card expires"), index.h("dd", null, index.h("smoothly-display", { type: "card-expires", value: "7/22" })), index.h("dt", null, "card csc"), index.h("dd", null, index.h("smoothly-display", { type: "card-csc", value: "987" })), index.h("dt", null, "date"), index.h("dd", null, index.h("smoothly-display", { type: "date", value: "2022-07-07" })), index.h("dt", null, "date time"), index.h("dd", null, index.h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "short", day: "numeric", hour: "numeric", minute: "numeric", second: "numeric" }, value: "2022-07-07T02:02:02Z" })), index.h("dd", null, index.h("smoothly-display", { 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" })), index.h("dd", null, index.h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "2-digit", day: "2-digit", hour: "numeric", minute: "numeric", second: "numeric" }, value: "2022-07-07T12:22:24Z" })), index.h("dd", null, index.h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "numeric", day: "numeric", hour: "numeric", minute: "numeric", second: "numeric" }, value: "2022-07-07T12:22:24Z" })), index.h("dd", null, index.h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "short", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), index.h("dd", null, index.h("smoothly-display", { type: "date-time", format: { year: "2-digit", month: "numeric", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), index.h("dd", null, index.h("smoothly-display", { 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" })), index.h("dt", null, "Deprecated display date time"), index.h("dt", null, "Display amount"), index.h("dd", null, index.h("smoothly-display-amount", { currency: "SEK", amount: "1289.5" })), index.h("dt", null, "Quiet"), index.h("dd", null, index.h("smoothly-quiet", { color: "dark" }, "-")), index.h("dt", null, "Duration"), index.h("dd", null, index.h("smoothly-display", { type: "duration", value: { hours: 13, minutes: 100 } }), index.h("smoothly-display", { type: "duration", value: { hours: 8, minutes: 30 } }), index.h("smoothly-display", { type: "duration", value: { hours: 0, minutes: 3 } })))), index.h("fieldset", null, index.h("h2", null, "Smoothly skeleton"), index.h("smoothly-skeleton", { period: 3, distance: "20rem", width: "20rem" }), index.h("smoothly-skeleton", { period: 3, distance: "20rem", color: "200,200,255" }), index.h("smoothly-skeleton", { period: 3, distance: "20rem", color: "var(--smoothly-warning-color)" }), index.h("smoothly-skeleton", { period: 3, distance: "20rem" }), index.h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem", width: "20rem" }), index.h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), index.h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), index.h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), index.h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem", width: "20rem" }), index.h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }), index.h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }), index.h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" })), index.h("fieldset", null, index.h("h2", null, "Smoothly URL encoded"), index.h("smoothly-urlencoded", { data: "hej=hopp&tjena=moss" })), index.h("fieldset", null, index.h("h2", null, "Smoothly popup"), index.h("div", { style: { display: "flex", justifyContent: "space-between" } }, index.h("smoothly-popup", { direction: "down" }, "Click for popup", index.h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup stuff that has a lot of text")), index.h("smoothly-popup", { direction: "down" }, "Click for popup", index.h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup with a bunch of text."))), index.h("smoothly-popup", null, index.h("div", null, "Popup, click me"), index.h("div", { color: "dark", slot: "popup" }, "1 line popup"))), index.h("fieldset", null, index.h("h2", null, "Test of different kinds of notifier"), index.h("button", { onClick: () => this.noticeWarning(redirect.Notice.warn("This is a test warning notice.")) }, "warning"), index.h("button", { onClick: () => this.noticeWarning(redirect.Notice.succeeded("This is a test success notice.")) }, "success"), index.h("button", { onClick: () => this.noticeWarning(redirect.Notice.failed("This is a test danger notice.")) }, "danger"), index.h("button", { onClick: () => this.noticeWarning(redirect.Notice.execute("This is a test execute notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "execute"), index.h("button", { onClick: () => this.noticeWarning(redirect.Notice.delay("This is a test delay notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "delay")), index.h("fieldset", null, index.h("h2", null, "Smoothly spinner"), index.h("div", { style: { position: "relative", height: "10em" } }, "Large Spinner", index.h("smoothly-spinner", { active: true, size: "large", style: { "--background-color": "255,255,255", "--background-opacity": "0.2", "--spinner-color": "0,130,0", } })), index.h("div", { style: { position: "relative", height: "10em" } }, "Medium Spinner", index.h("smoothly-spinner", { active: true, size: "medium" })), index.h("div", { style: { position: "relative", height: "10em" } }, "Small Spinner", index.h("smoothly-spinner", { active: true, size: "small" })), index.h("div", { style: { position: "absolute", left: "500px", top: "150px" } }, index.h("smoothly-svg", { url: "https://theme.payfunc.com/intergiro/animated-logo.svg" }))), index.h("fieldset", null, index.h("h2", null, "Smoothly summary"), index.h("smoothly-summary", null, index.h("p", { slot: "summary" }, "Some title"), index.h("p", { slot: "content" }, "Some content")), index.h("smoothly-summary", { size: "large" }, index.h("p", { slot: "summary" }, "Some title"), index.h("p", { slot: "content" }, "Some content")), index.h("smoothly-summary", { color: "danger", fill: "clear" }, index.h("div", { slot: "summary", style: { display: "flex", gap: "0.3rem" } }, index.h("span", null, "Person"), index.h("smoothly-icon", { name: "person", color: "light", fill: "clear", size: "tiny" })), index.h("p", { slot: "content" }, "Some person information.")), index.h("smoothly-summary", { color: "danger", fill: "clear", open: true }, index.h("p", { slot: "summary" }, "Some other title"), index.h("p", { 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.")))),
     ];
   }
 };
@@ -10519,14 +10519,14 @@ const SmoothlySubmit = class {
 };
 SmoothlySubmit.style = styleCss$k;
 
-const styleCss$j = ".sc-smoothly-summary-h>details.sc-smoothly-summary>summary.sc-smoothly-summary{list-style:none;display:flex;gap:0.5rem;align-items:center}.sc-smoothly-summary-h>details.sc-smoothly-summary>summary.sc-smoothly-summary>smoothly-icon.sc-smoothly-summary{transition:0.2s}.sc-smoothly-summary-h>details[open].sc-smoothly-summary>summary.sc-smoothly-summary>smoothly-icon.sc-smoothly-summary{transform:rotate(90deg)}.sc-smoothly-summary-h>details>summary.sc-smoothly-summary-s>[slot=summary]{display:inline-block;margin:0}.sc-smoothly-summary-h>details.sc-smoothly-summary-s>[slot=content]{display:inline-block;margin:0;padding:0.5rem 1.75rem}@media screen and (min-width: 900px){.sc-smoothly-summary-h>details.sc-smoothly-summary>summary.sc-smoothly-summary:hover{cursor:pointer}}";
+const styleCss$j = ".sc-smoothly-summary-h>details.sc-smoothly-summary>summary.sc-smoothly-summary{list-style:none;display:flex;gap:0.5rem;align-items:center}.sc-smoothly-summary-h>details.sc-smoothly-summary>summary.sc-smoothly-summary>smoothly-icon.sc-smoothly-summary{transition:transform 0.2s, opacity 0.1s;opacity:0.3}.sc-smoothly-summary-h:hover details.sc-smoothly-summary>summary.sc-smoothly-summary>smoothly-icon.sc-smoothly-summary{opacity:1}.sc-smoothly-summary-h>details[open].sc-smoothly-summary>summary.sc-smoothly-summary>smoothly-icon.sc-smoothly-summary{transform:rotate(90deg)}.sc-smoothly-summary-h>details>summary.sc-smoothly-summary-s>[slot=summary]{margin:0}.sc-smoothly-summary-h>details.sc-smoothly-summary-s>[slot=content]{margin:0;padding:0.5rem 1.75rem}@media screen and (min-width: 900px){.sc-smoothly-summary-h>details.sc-smoothly-summary>summary.sc-smoothly-summary:hover{cursor:pointer}}";
 
 const SmoothlySummary = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.smoothlySummaryOpen = index.createEvent(this, "smoothlySummaryOpen", 7);
     this.open = false;
-    this.color = "primary";
+    this.color = undefined;
     this.fill = "solid";
     this.size = "tiny";
   }