smoothly 0.3.1 → 0.3.3
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/loader.cjs.js +1 -1
- package/dist/cjs/{smoothly-accordion_50.cjs.entry.js → smoothly-accordion_53.cjs.entry.js} +151 -68
- package/dist/cjs/smoothly.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +2 -0
- package/dist/collection/components/display-demo/index.js +18 -1
- package/dist/collection/components/input-demo/index.js +80 -40
- package/dist/collection/components/radio-button/Selected.js +1 -0
- package/dist/collection/components/radio-button/index.js +104 -0
- package/dist/collection/components/radio-button/item/index.js +86 -0
- package/dist/collection/components/radio-button/item/style.css +85 -0
- package/dist/collection/components/radio-button/style.css +3 -0
- package/dist/custom-elements/index.d.ts +12 -0
- package/dist/custom-elements/index.js +108 -56
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{smoothly-accordion_50.entry.js → smoothly-accordion_53.entry.js} +149 -69
- package/dist/esm/smoothly.js +1 -1
- package/dist/smoothly/{p-b92b1eb7.entry.js → p-e82a3604.entry.js} +1 -1
- package/dist/smoothly/smoothly.esm.js +1 -1
- package/dist/types/components/radio-button/Selected.d.ts +5 -0
- package/dist/types/components/radio-button/index.d.ts +11 -0
- package/dist/types/components/radio-button/item/index.d.ts +10 -0
- package/dist/types/components.d.ts +47 -0
- package/package.json +1 -1
- package/dist/cjs/smoothly-svg.cjs.entry.js +0 -41
- package/dist/esm/smoothly-svg.entry.js +0 -37
- package/dist/smoothly/p-8aefcb54.entry.js +0 -1
|
@@ -1594,7 +1594,7 @@ var Cosmetic;
|
|
|
1594
1594
|
Cosmetic.Color = Color;
|
|
1595
1595
|
})(Cosmetic || (Cosmetic = {}));
|
|
1596
1596
|
|
|
1597
|
-
const styleCss$
|
|
1597
|
+
const styleCss$N = "smoothly-accordion-item.sc-smoothly-accordion{border:1px solid rgb(var(--smoothly-dark-color));border-bottom:none}smoothly-accordion-item.sc-smoothly-accordion:first-of-type{border-top-left-radius:4px;border-top-right-radius:4px;margin-top:0.4em}smoothly-accordion-item.sc-smoothly-accordion:last-of-type{border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-bottom:1px solid rgb(var(--smoothly-dark-color));margin-bottom:0.6em}smoothly-accordion-item[open].sc-smoothly-accordion{border-color:rgb(var(--smoothly-primary-color));border-bottom:1px solid rgb(var(--smoothly-primary-color))}smoothly-accordion-item[open].sc-smoothly-accordion+smoothly-accordion-item.sc-smoothly-accordion{border-top:none}";
|
|
1598
1598
|
|
|
1599
1599
|
const SmoothlyAccordion$1 = class extends HTMLElement {
|
|
1600
1600
|
constructor() {
|
|
@@ -1640,10 +1640,10 @@ const SmoothlyAccordion$1 = class extends HTMLElement {
|
|
|
1640
1640
|
static get watchers() { return {
|
|
1641
1641
|
"value": ["valueChanged"]
|
|
1642
1642
|
}; }
|
|
1643
|
-
static get style() { return styleCss$
|
|
1643
|
+
static get style() { return styleCss$N; }
|
|
1644
1644
|
};
|
|
1645
1645
|
|
|
1646
|
-
const styleCss$
|
|
1646
|
+
const styleCss$M = ".sc-smoothly-accordion-item-h{display:block}[hidden].sc-smoothly-accordion-item-h{display:none}details.sc-smoothly-accordion-item{padding:0}details.sc-smoothly-accordion-item>summary.sc-smoothly-accordion-item>span.sc-smoothly-accordion-item{float:right;margin:0.2em;font-size:60%}details.sc-smoothly-accordion-item>summary.sc-smoothly-accordion-item{font-size:120%;list-style-type:none;cursor:pointer;padding:0.4em;color:rgb(var(--smoothly-text-tint))}details.sc-smoothly-accordion-item>fieldset.sc-smoothly-accordion-item{border:none;margin:0;padding:0}[open].sc-smoothly-accordion-item-h>details.sc-smoothly-accordion-item>summary.sc-smoothly-accordion-item{color:rgb(var(--smoothly-primary-contrast));background:rgb(var(--smoothly-primary-color))}details.sc-smoothly-accordion-item>summary.sc-smoothly-accordion-item::-webkit-details-marker{display:none}details.sc-smoothly-accordion-item>summary.sc-smoothly-accordion-item>svg.sc-smoothly-accordion-item{width:1em;height:auto;margin-bottom:-0.2em;margin-right:0.4em}[open].sc-smoothly-accordion-item-h>details.sc-smoothly-accordion-item>summary.sc-smoothly-accordion-item>svg.sc-smoothly-accordion-item{fill:rgb(var(--smoothly-primary-contrast))}.sc-smoothly-accordion-item-h:not([open])>details.sc-smoothly-accordion-item>summary.sc-smoothly-accordion-item>svg.sc-smoothly-accordion-item{fill:rgb(var(--smoothly-text-tint))}";
|
|
1647
1647
|
|
|
1648
1648
|
const SmoothlyAccordionItem$1 = class extends HTMLElement {
|
|
1649
1649
|
constructor() {
|
|
@@ -1688,10 +1688,10 @@ const SmoothlyAccordionItem$1 = class extends HTMLElement {
|
|
|
1688
1688
|
static get watchers() { return {
|
|
1689
1689
|
"open": ["openChanged"]
|
|
1690
1690
|
}; }
|
|
1691
|
-
static get style() { return styleCss$
|
|
1691
|
+
static get style() { return styleCss$M; }
|
|
1692
1692
|
};
|
|
1693
1693
|
|
|
1694
|
-
const styleCss$
|
|
1694
|
+
const styleCss$L = "smoothly-app{display:block;scrollbar-width:none}smoothly-app[hidden]{display:none}smoothly-app[color=default],smoothly-app:not([color]){--smoothly-app-background:var(--smoothly-default-color);--smoothly-app-color:var(--smoothly-default-contrast);--smoothly-app-hover-background:var(--smoothly-primary-color);--smoothly-app-hover-color:var(--smoothly-primary-contrast);--smoothly-app-shadow:var(--smoothly-default-shadow)}smoothly-app[color=primary]{--smoothly-app-background:var(--smoothly-primary-shade);--smoothly-app-color:var(--smoothly-primary-contrast);--smoothly-app-hover-background:var(--smoothly-secondary-color);--smoothly-app-hover-color:var(--smoothly-secondary-contrast);--smoothly-app-shadow:var(--smoothly-primary-shadow)}smoothly-app[color=secondary]{--smoothly-app-background:var(--smoothly-secondary-shade);--smoothly-app-color:var(--smoothly-secondary-contrast);--smoothly-app-hover-background:var(--smoothly-primary-color);--smoothly-app-hover-color:var(--smoothly-primary-contrast);--smoothly-app-shadow:var(--smoothly-secondary-shadow)}smoothly-app[color=tertiary],smoothly-app[color=success],smoothly-app[color=warning],smoothly-app[color=danger]{--smoothly-app-background:var(--smoothly-color-shade);--smoothly-app-color:var(--smoothly-color-contrast);--smoothly-app-hover-background:var(--smoothly-default-shade);--smoothly-app-hover-color:var(--smoothly-default-contrast);--smoothly-app-shadow:var(--smoothly-color-shadow)}smoothly-app>smoothly-notifier>header{position:fixed;top:0;left:0;width:100%;z-index:5;height:5rem;background-color:rgb(var(--smoothly-app-background));color:rgba(var(--smoothly-medium-color));fill:rgb(var(--smoothly-medium-color));stroke:rgb(var(--smoothly-medium-color));display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 5px 0 rgba(var(--smoothly-app-shadow));border-bottom:1px solid rgba(var(--smoothly-dark-color))}smoothly-app>smoothly-notifier>header a{color:inherit;text-decoration:inherit}smoothly-app>smoothly-notifier>header>nav{width:100%;flex-shrink:2}smoothly-app>smoothly-notifier>header>h1,smoothly-app>smoothly-notifier>header>nav,smoothly-app>smoothly-notifier>header>nav>ul,smoothly-app>smoothly-notifier>header>nav>ul li,smoothly-app>smoothly-notifier>header>nav>ul li>*:not(a){display:flex;height:100%;margin:0}smoothly-app>smoothly-notifier>header>h1{margin-left:3.8rem}smoothly-app>smoothly-notifier>header>h1>a{overflow:hidden;user-select:none;height:200%;display:flex;align-self:center;size:100%;background-position-y:center}smoothly-app>smoothly-notifier>header>nav>ul>li a{line-height:1.6cm}smoothly-app>smoothly-notifier>header>nav>ul{width:100%}smoothly-app>smoothly-notifier>header>[slot=header]{display:flex;margin-right:2.1rem;justify-content:flex-end;border:0}smoothly-app>smoothly-notifier>header>[slot=header]>a{display:flex;align-self:center;border-width:0;align-items:center;margin-right:3.9rem}smoothly-app>smoothly-notifier>header>[slot=header]>a>smoothly-icon{fill:rgb(var(--smoothly-primary-shade));stroke:rgb(var(--smoothly-primary-shade));color:rgb(var(--smoothly-primary-shade))}smoothly-app>smoothly-notifier>header>nav>ul li a{display:flex;height:2.3rem;margin:0 0.4cm;text-decoration:none}smoothly-app>smoothly-notifier>header>nav>ul li>a{display:flex;align-items:center;align-self:center;margin-bottom:2px}smoothly-app>smoothly-notifier>header>nav>ul li smoothly-trigger.sc-smoothly-trigger-h{border:0}smoothly-app>smoothly-notifier>header>nav>ul li>a>smoothly-icon>svg{fill:rgb(var(--smoothly-medium-color));stroke:rgb(var(--smoothly-medium-color));color:rgb(var(--smoothly-medium-color));align-items:center;display:flex}smoothly-app>smoothly-notifier>header>nav>ul li>a:hover>smoothly-icon>svg,smoothly-app>smoothly-notifier>header>nav>ul li>a.active>smoothly-icon>svg{color:rgb(var(--smoothly-app-color));stroke:rgb(var(--smoothly-app-color));fill:rgb(var(--smoothly-app-color))}smoothly-app>smoothly-notifier>header>nav>ul li>smoothly-trigger.active a>smoothly-icon,smoothly-app>smoothly-notifier>header>nav>ul li>smoothly-trigger:hover a>smoothly-icon,smoothly-app>smoothly-notifier>header>nav>ul li a:hover,smoothly-app>smoothly-notifier>header>nav>ul li a.active{border-bottom:2px solid rgb(var(--smoothly-app-color));margin-bottom:0px;border-bottom-width:2px;color:rgb(var(--smoothly-app-color));stroke:rgb(var(--smoothly-app-color));fill:rgb(var(--smoothly-app-color))}smoothly-app>smoothly-notifier>main{position:relative;top:5.6rem}";
|
|
1695
1695
|
|
|
1696
1696
|
const SmoothlyApp$1 = class extends HTMLElement {
|
|
1697
1697
|
constructor() {
|
|
@@ -1701,7 +1701,7 @@ const SmoothlyApp$1 = class extends HTMLElement {
|
|
|
1701
1701
|
render() {
|
|
1702
1702
|
return (h("smoothly-notifier", null, h("slot", null)));
|
|
1703
1703
|
}
|
|
1704
|
-
static get style() { return styleCss$
|
|
1704
|
+
static get style() { return styleCss$L; }
|
|
1705
1705
|
};
|
|
1706
1706
|
|
|
1707
1707
|
const SmoothlyAppDemo$1 = class extends HTMLElement {
|
|
@@ -1730,7 +1730,7 @@ const SmoothlyAppDemo$1 = class extends HTMLElement {
|
|
|
1730
1730
|
}
|
|
1731
1731
|
};
|
|
1732
1732
|
|
|
1733
|
-
const styleCss$
|
|
1733
|
+
const styleCss$K = ".sc-smoothly-backtotop-h{background-color:rgba(var(--smoothly-default-color), 1);opacity:var(--opacity);pointer-events:var(--pointer-events);transition:opacity 400ms;z-index:3;border-radius:50%;box-shadow:var(--smoothly-shadow);height:3rem;width:3rem;position:fixed;bottom:var(--bottom);right:var(--right);outline:none;cursor:pointer;display:flex;justify-content:center;align-items:center}";
|
|
1734
1734
|
|
|
1735
1735
|
const SmoothlyBacktotop$1 = class extends HTMLElement {
|
|
1736
1736
|
constructor() {
|
|
@@ -1758,10 +1758,10 @@ const SmoothlyBacktotop$1 = class extends HTMLElement {
|
|
|
1758
1758
|
behavior: "smooth",
|
|
1759
1759
|
}) }, h("smoothly-icon", { name: "chevron-up-outline" })));
|
|
1760
1760
|
}
|
|
1761
|
-
static get style() { return styleCss$
|
|
1761
|
+
static get style() { return styleCss$K; }
|
|
1762
1762
|
};
|
|
1763
1763
|
|
|
1764
|
-
const styleCss$
|
|
1764
|
+
const styleCss$J = "[type=link].sc-smoothly-button-h{display:inline}.sc-smoothly-button-h:not([type=link]){display:block}.sc-smoothly-button-h{margin:1em;border-style:solid;border-width:1px;border-radius:3px}[hidden].sc-smoothly-button-h{display:none}[disabled].sc-smoothly-button-h{opacity:0.5}a.sc-smoothly-button,button.sc-smoothly-button{display:block;border-color:transparent;background-color:transparent;padding:0.2em 0.3em;font-size:110%;font-weight:400}.sc-smoothly-button-h:not([disabled]):hover,.sc-smoothly-button-h:not([disabled]):focus,.sc-smoothly-button-h:not([disabled]):active{border-color:var(--smoothly-button-border)}[type=button].sc-smoothly-button-h>a.sc-smoothly-button{display:block;text-align:center;text-decoration:inherit}[type=button].sc-smoothly-button-h>a.sc-smoothly-button{width:calc(100% - 0.6em)}.sc-smoothly-button-h>button.sc-smoothly-button{width:100%}[expand=fill].sc-smoothly-button-h{width:100%;border-left:none;border-right:none}";
|
|
1765
1765
|
|
|
1766
1766
|
const SmoothlyButton$1 = class extends HTMLElement {
|
|
1767
1767
|
constructor() {
|
|
@@ -1782,7 +1782,7 @@ const SmoothlyButton$1 = class extends HTMLElement {
|
|
|
1782
1782
|
}
|
|
1783
1783
|
return result;
|
|
1784
1784
|
}
|
|
1785
|
-
static get style() { return styleCss$
|
|
1785
|
+
static get style() { return styleCss$J; }
|
|
1786
1786
|
};
|
|
1787
1787
|
|
|
1788
1788
|
var CallingCode$1;
|
|
@@ -7903,7 +7903,7 @@ function years(current) {
|
|
|
7903
7903
|
return result;
|
|
7904
7904
|
}
|
|
7905
7905
|
|
|
7906
|
-
const styleCss$
|
|
7906
|
+
const styleCss$I = ".sc-smoothly-calendar-h{display:block;--other-month-opacity:0.5}.sc-smoothly-calendar-h>smoothly-input-month.sc-smoothly-calendar{width:calc(100% - 1em);padding:0.5em 0.5em 0 0.5em}th.sc-smoothly-calendar,td.sc-smoothly-calendar{text-align:center;padding:0.5em;min-width:2em;background-color:rgb(var(--smoothly-default-shade));cursor:pointer;user-select:none}td.currentMonth.sc-smoothly-calendar{color:rgb(var(--smoothly-default-contrast))}td.sc-smoothly-calendar:not(.currentMonth){color:rgba(var(--smoothly-default-contrast), var(--other-month-opacity))}td.sc-smoothly-calendar:nth-child(6):not(.currentMonth).selected,td.sc-smoothly-calendar:nth-child(6):not(.currentMonth).dateRange,td.sc-smoothly-calendar:nth-child(7):not(.currentMonth).selected,td.sc-smoothly-calendar:nth-child(7):not(.currentMonth).dateRange{color:rgba(var(--smoothly-default-contrast))}td.sc-smoothly-calendar:nth-child(6),td.sc-smoothly-calendar:nth-child(7){color:rgb(var(--smoothly-danger-tint))}td.sc-smoothly-calendar:nth-child(6):not(.currentMonth),td.sc-smoothly-calendar:nth-child(7):not(.currentMonth){color:rgba(var(--smoothly-danger-tint), var(--other-month-opacity))}td.sc-smoothly-calendar:not(.selected,.disable).sc-smoothly-calendar:hover{color:rgb(var(--smoothly-primary-contrast));background:rgb(var(--smoothly-primary-tint))}td.selected.sc-smoothly-calendar{color:rgb(var(--smoothly-primary-contrast));background:rgb(var(--smoothly-primary-color))}td.sc-smoothly-calendar:not(.selected,.dateRange).sc-smoothly-calendar:not(:hover).today{background:rgb(var(--smoothly-dark-tint));color:rgb(var(--smoothly-dark-contrast))}td.dateRange.sc-smoothly-calendar{color:rgb(var(--smoothly-primary-contrast));background:rgb(var(--smoothly-primary-tint))}td.disable.sc-smoothly-calendar{cursor:not-allowed;background-color:rgb(var(--smoothly-default-tint), 0.5);color:rgb(var(--smoothly-default-contrast), 0.5)}";
|
|
7907
7907
|
|
|
7908
7908
|
const Calendar = class extends HTMLElement {
|
|
7909
7909
|
constructor() {
|
|
@@ -7986,7 +7986,7 @@ const Calendar = class extends HTMLElement {
|
|
|
7986
7986
|
"start": ["onStart"],
|
|
7987
7987
|
"end": ["onEnd"]
|
|
7988
7988
|
}; }
|
|
7989
|
-
static get style() { return styleCss$
|
|
7989
|
+
static get style() { return styleCss$I; }
|
|
7990
7990
|
};
|
|
7991
7991
|
|
|
7992
7992
|
var CallingCode;
|
|
@@ -13927,7 +13927,7 @@ function create(language) {
|
|
|
13927
13927
|
}, language);
|
|
13928
13928
|
}
|
|
13929
13929
|
|
|
13930
|
-
const styleCss$
|
|
13930
|
+
const styleCss$H = ".sc-smoothly-checkbox-h{display:block}[hidden].sc-smoothly-checkbox-h{display:none}smoothly-icon.sc-smoothly-checkbox{cursor:pointer}smoothly-icon.sc-smoothly-checkbox:nth-child(2){position:absolute;transform:scaleX(0.6)}[disabled].sc-smoothly-checkbox-h smoothly-icon.sc-smoothly-checkbox{stroke:rgba(var(--smoothly-color-contrast), 0.3)}";
|
|
13931
13931
|
|
|
13932
13932
|
const SmoothlyCheckbox$1 = class extends HTMLElement {
|
|
13933
13933
|
constructor() {
|
|
@@ -13954,10 +13954,10 @@ const SmoothlyCheckbox$1 = class extends HTMLElement {
|
|
|
13954
13954
|
];
|
|
13955
13955
|
}
|
|
13956
13956
|
get element() { return this; }
|
|
13957
|
-
static get style() { return styleCss$
|
|
13957
|
+
static get style() { return styleCss$H; }
|
|
13958
13958
|
};
|
|
13959
13959
|
|
|
13960
|
-
const styleCss$
|
|
13960
|
+
const styleCss$G = ".sc-smoothly-dialog-h{display:block;position:fixed;left:0;top:0;width:100%;height:100%;z-index:1;background:rgba(var(--smoothly-default-color), var(--smoothly-semitransparent)) !important}[hidden].sc-smoothly-dialog-h{display:none}.sc-smoothly-dialog-h>header.sc-smoothly-dialog{border-top-left-radius:8px;border-top-right-radius:8px;margin-top:2em;color:rgb(var(--smoothly-primary-contrast));background:rgb(var(--smoothly-primary-color));border-color:rgb(var(--smoothly-primary-color))}.sc-smoothly-dialog-h:not([header]) header.sc-smoothly-dialog{border:none}.sc-smoothly-dialog-h>*.sc-smoothly-dialog{position:relative;color:rgb(var(--smoothly-default-contrast));background-color:rgb(var(--smoothly-default-color));border-color:rgb(var(--smoothly-color));border-width:1px;border-style:solid;max-width:40em;width:calc(100vw - 4em - 2px);max-height:calc(100vh - 6em - 2px);height:auto;margin-left:auto;margin-right:auto;border-collapse:collapse}.sc-smoothly-dialog-h>main.sc-smoothly-dialog{border-bottom-left-radius:8px;border-bottom-right-radius:8px;margin-bottom:2em;border:1px solid rgb(var(--smoothly-default-contrast));box-sizing:border-box;overflow:hidden}.sc-smoothly-dialog-h:not([header]) main.sc-smoothly-dialog{border-radius:8px}.sc-smoothly-dialog-h>*.sc-smoothly-dialog>smoothly-trigger.sc-smoothly-dialog{position:absolute;right:-2em;top:-2em;z-index:1;border-color:transparent}.sc-smoothly-dialog-h>*.sc-smoothly-dialog>smoothly-trigger.sc-smoothly-dialog:hover{border-color:transparent}.sc-smoothly-dialog-h smoothly-icon.sc-smoothly-dialog{background-color:rgb(var(--smoothly-color));border-radius:50%}.sc-smoothly-dialog-h>*.sc-smoothly-dialog>*.sc-smoothly-dialog{margin:10px}";
|
|
13961
13961
|
|
|
13962
13962
|
const SmoothlyDialog$1 = class extends HTMLElement {
|
|
13963
13963
|
constructor() {
|
|
@@ -13983,7 +13983,7 @@ const SmoothlyDialog$1 = class extends HTMLElement {
|
|
|
13983
13983
|
h("main", null, h("slot", null)),
|
|
13984
13984
|
];
|
|
13985
13985
|
}
|
|
13986
|
-
static get style() { return styleCss$
|
|
13986
|
+
static get style() { return styleCss$G; }
|
|
13987
13987
|
render() { return h(Host, this.hostData(), this.__stencil_render()); }
|
|
13988
13988
|
};
|
|
13989
13989
|
|
|
@@ -34207,7 +34207,7 @@ Object.defineProperty(exports, "StateEditor", { enumerable: true, get: function
|
|
|
34207
34207
|
//# sourceMappingURL=index.js.map
|
|
34208
34208
|
});
|
|
34209
34209
|
|
|
34210
|
-
const styleCss$
|
|
34210
|
+
const styleCss$F = ".sc-smoothly-display-h{display:block}[hidden].sc-smoothly-display-h{display:none}";
|
|
34211
34211
|
|
|
34212
34212
|
const SmoothlyDisplay$1 = class extends HTMLElement {
|
|
34213
34213
|
constructor() {
|
|
@@ -34245,14 +34245,14 @@ const SmoothlyDisplay$1 = class extends HTMLElement {
|
|
|
34245
34245
|
}
|
|
34246
34246
|
return result;
|
|
34247
34247
|
}
|
|
34248
|
-
static get style() { return styleCss$
|
|
34248
|
+
static get style() { return styleCss$F; }
|
|
34249
34249
|
};
|
|
34250
34250
|
function getLocale$1() {
|
|
34251
34251
|
const result = navigator.language;
|
|
34252
34252
|
return Locale$1.is(result) ? result : Language$1.is(result) ? Locale$1.toLocale(result) : undefined;
|
|
34253
34253
|
}
|
|
34254
34254
|
|
|
34255
|
-
const styleCss$
|
|
34255
|
+
const styleCss$E = ".sc-smoothly-display-amount-h{display:block}[hidden].sc-smoothly-display-amount-h{display:none}";
|
|
34256
34256
|
|
|
34257
34257
|
const SmoothlyDisplayAmount$1 = class extends HTMLElement {
|
|
34258
34258
|
constructor() {
|
|
@@ -34301,10 +34301,10 @@ const SmoothlyDisplayAmount$1 = class extends HTMLElement {
|
|
|
34301
34301
|
this.currency,
|
|
34302
34302
|
];
|
|
34303
34303
|
}
|
|
34304
|
-
static get style() { return styleCss$
|
|
34304
|
+
static get style() { return styleCss$E; }
|
|
34305
34305
|
};
|
|
34306
34306
|
|
|
34307
|
-
const styleCss$
|
|
34307
|
+
const styleCss$D = ".sc-smoothly-display-date-time-h{display:block}[hidden].sc-smoothly-display-date-time-h{display:none}";
|
|
34308
34308
|
|
|
34309
34309
|
const SmoothlyDisplayDateTime$1 = class extends HTMLElement {
|
|
34310
34310
|
constructor() {
|
|
@@ -34318,7 +34318,7 @@ const SmoothlyDisplayDateTime$1 = class extends HTMLElement {
|
|
|
34318
34318
|
const datetime = this.datetime.split("T");
|
|
34319
34319
|
return [datetime[0], " ", datetime[1]];
|
|
34320
34320
|
}
|
|
34321
|
-
static get style() { return styleCss$
|
|
34321
|
+
static get style() { return styleCss$D; }
|
|
34322
34322
|
};
|
|
34323
34323
|
|
|
34324
34324
|
const SmoothlyDisplayDemo$1 = class extends HTMLElement {
|
|
@@ -34333,12 +34333,12 @@ const SmoothlyDisplayDemo$1 = class extends HTMLElement {
|
|
|
34333
34333
|
}
|
|
34334
34334
|
render() {
|
|
34335
34335
|
return [
|
|
34336
|
-
h("main", null, h("smoothly-popup", null, h("div", null, "Popup, click me"), h("div", { color: "dark", slot: "popup" }, "1 line popup")), h("smoothly-display-date-time", { datetime: "2019-08-15T08:08:17.65Z" }), h("dl", null, h("dt", null, "text"), h("dd", null, h("smoothly-display", { type: "text", value: "text" })), h("dt", null, "postal code"), h("dd", null, h("smoothly-display", { type: "postal-code", value: "752 31" })), h("dt", null, "password"), h("dd", null, h("smoothly-display", { type: "password", value: "password" })), h("dt", null, "email"), h("dd", null, h("smoothly-display", { type: "email", value: "test@example.com" })), h("dt", null, "price"), h("dd", null, h("smoothly-display", { type: "price", value: "13.37", currency: "SEK" })), h("dt", null, "display amount without decimals"), h("dd", null, h("smoothly-display-amount", { amount: 200, currency: "SEK", toInteger: true })), h("dt", null, "display amount with decimals if they are set, otherwise no decimal"), h("dd", null, h("smoothly-display-amount", { amount: 200.20, currency: "SEK", toInteger: true })), h("dt", null, "display amount with decimals"), h("dd", null, h("smoothly-display-amount", { amount: 200.20, currency: "SEK" })), h("dt", null, "percent"), h("dd", null, h("smoothly-display", { type: "percent", value: "42" })), h("dt", null, "phone"), h("dd", null, h("smoothly-display", { type: "phone", value: "0101881108" })), h("dt", null, "card number"), h("dd", null, h("smoothly-display", { type: "card-number", value: "4111111111111111" })), h("dt", null, "card expires"), h("dd", null, h("smoothly-display", { type: "card-expires", value: "7/22" })), h("dt", null, "card csc"), h("dd", null, h("smoothly-display", { type: "card-csc", value: "987" })), h("dt", null, "date"), h("dd", null, h("smoothly-display", { type: "date", value: "2022-07-07" })), h("dt", null, "date time"), h("dd", null, 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" })), h("dd", null, 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" })), h("dd", null, 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" })), h("dd", null, 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" })), h("dd", null, h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "short", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), h("dd", null, h("smoothly-display", { type: "date-time", format: { year: "2-digit", month: "numeric", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), h("dd", null, h("smoothly-display", { type: "date-time", format: { year: "2-digit", month: "numeric", day: "numeric", hour: "2-digit", minute: "2-digit", second: "2-digit", timeZone: "+01:00" }, value: "2022-07-07T12:15Z" })), h("dt", null, "Quiet"), h("dd", null, h("smoothly-quiet", { color: "dark" }, "-"))), h("smoothly-skeleton", { period: 3, distance: "20rem", width: "20rem" }), h("smoothly-skeleton", { period: 3, distance: "20rem", color: "200,200,255" }), h("smoothly-skeleton", { period: 3, distance: "20rem", color: "var(--smoothly-warning-color)" }), h("smoothly-skeleton", { period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem", width: "20rem" }), h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem", width: "20rem" }), h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }), h("smoothly-urlencoded", { data: "hej=hopp&tjena=moss" }), h("div", { style: { display: "flex", justifyContent: "space-between" } }, h("smoothly-popup", { direction: "down" }, "Click for popup", h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup stuff that has a lot of text")), h("smoothly-popup", { direction: "down" }, "Click for popup", h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup with a bunch of text."))), h("p", null, "Test of diffrent kinds of notifier:"), h("button", { onClick: () => this.noticeWarning(Notice.warn("This is a test warning notice.")) }, "warning"), h("button", { onClick: () => this.noticeWarning(Notice.succeded("This is a test success notice.")) }, "success"), h("button", { onClick: () => this.noticeWarning(Notice.failed("This is a test danger notice.")) }, "danger"), h("button", { onClick: () => this.noticeWarning(Notice.execute("This is a test execute notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "execute"), h("button", { onClick: () => this.noticeWarning(Notice.delay("This is a test delay notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "delay")),
|
|
34336
|
+
h("main", null, h("smoothly-popup", null, h("div", null, "Popup, click me"), h("div", { color: "dark", slot: "popup" }, "1 line popup")), h("smoothly-display-date-time", { datetime: "2019-08-15T08:08:17.65Z" }), h("dl", null, h("dt", null, "text"), h("dd", null, h("smoothly-display", { type: "text", value: "text" })), h("dt", null, "postal code"), h("dd", null, h("smoothly-display", { type: "postal-code", value: "752 31" })), h("dt", null, "password"), h("dd", null, h("smoothly-display", { type: "password", value: "password" })), h("dt", null, "email"), h("dd", null, h("smoothly-display", { type: "email", value: "test@example.com" })), h("dt", null, "price"), h("dd", null, h("smoothly-display", { type: "price", value: "13.37", currency: "SEK" })), h("dt", null, "display amount without decimals"), h("dd", null, h("smoothly-display-amount", { amount: 200, currency: "SEK", toInteger: true })), h("dt", null, "display amount with decimals if they are set, otherwise no decimal"), h("dd", null, h("smoothly-display-amount", { amount: 200.20, currency: "SEK", toInteger: true })), h("dt", null, "display amount with decimals"), h("dd", null, h("smoothly-display-amount", { amount: 200.20, currency: "SEK" })), h("dt", null, "percent"), h("dd", null, h("smoothly-display", { type: "percent", value: "42" })), h("dt", null, "phone"), h("dd", null, h("smoothly-display", { type: "phone", value: "0101881108" })), h("dt", null, "card number"), h("dd", null, h("smoothly-display", { type: "card-number", value: "4111111111111111" })), h("dt", null, "card expires"), h("dd", null, h("smoothly-display", { type: "card-expires", value: "7/22" })), h("dt", null, "card csc"), h("dd", null, h("smoothly-display", { type: "card-csc", value: "987" })), h("dt", null, "date"), h("dd", null, h("smoothly-display", { type: "date", value: "2022-07-07" })), h("dt", null, "date time"), h("dd", null, 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" })), h("dd", null, 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" })), h("dd", null, 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" })), h("dd", null, 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" })), h("dd", null, h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "short", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), h("dd", null, h("smoothly-display", { type: "date-time", format: { year: "2-digit", month: "numeric", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), h("dd", null, h("smoothly-display", { type: "date-time", format: { year: "2-digit", month: "numeric", day: "numeric", hour: "2-digit", minute: "2-digit", second: "2-digit", timeZone: "+01:00" }, value: "2022-07-07T12:15Z" })), h("dt", null, "Deprecated display date time"), h("dd", null, h("smoothly-display-date-time", { datetime: "2019-01-31T20:01:34" })), h("dt", null, "Display amount"), h("dd", null, h("smoothly-display-amount", { currency: "SEK", amount: "1289.5" })), h("dt", null, "Quiet"), h("dd", null, h("smoothly-quiet", { color: "dark" }, "-"))), h("smoothly-skeleton", { period: 3, distance: "20rem", width: "20rem" }), h("smoothly-skeleton", { period: 3, distance: "20rem", color: "200,200,255" }), h("smoothly-skeleton", { period: 3, distance: "20rem", color: "var(--smoothly-warning-color)" }), h("smoothly-skeleton", { period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem", width: "20rem" }), h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem", width: "20rem" }), h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }), h("smoothly-urlencoded", { data: "hej=hopp&tjena=moss" }), h("div", { style: { display: "flex", justifyContent: "space-between" } }, h("smoothly-popup", { direction: "down" }, "Click for popup", h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup stuff that has a lot of text")), h("smoothly-popup", { direction: "down" }, "Click for popup", h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup with a bunch of text."))), h("p", null, "Test of diffrent kinds of notifier:"), h("button", { onClick: () => this.noticeWarning(Notice.warn("This is a test warning notice.")) }, "warning"), h("button", { onClick: () => this.noticeWarning(Notice.succeded("This is a test success notice.")) }, "success"), h("button", { onClick: () => this.noticeWarning(Notice.failed("This is a test danger notice.")) }, "danger"), h("button", { onClick: () => this.noticeWarning(Notice.execute("This is a test execute notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "execute"), h("button", { onClick: () => this.noticeWarning(Notice.delay("This is a test delay notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "delay"), h("div", { style: { position: "relative", height: "10em" } }, "Large Spinner", h("smoothly-spinner", { active: true, size: "large", style: { "--background-color": "255,255,255", "--background-opacity": "0.2", "--spinner-color": "0,130,0", } })), h("div", { style: { position: "relative", height: "10em" } }, "Medium Spinner", h("smoothly-spinner", { active: true, size: "medium" })), h("div", { style: { position: "relative", height: "10em" } }, "Small Spinner", h("smoothly-spinner", { active: true, size: "small" })), h("div", { style: { position: "absolute", left: "500px", top: "150px" } }, h("smoothly-svg", { url: "https://theme.payfunc.com/intergiro/animated-logo.svg" }))),
|
|
34337
34337
|
];
|
|
34338
34338
|
}
|
|
34339
34339
|
};
|
|
34340
34340
|
|
|
34341
|
-
const styleCss$
|
|
34341
|
+
const styleCss$C = ".sc-smoothly-frame-h{display:block;width:100%;height:100%}[hidden].sc-smoothly-frame-h{display:none}.sc-smoothly-frame-h>iframe.sc-smoothly-frame{border:none;padding:none;margin:none}";
|
|
34342
34342
|
|
|
34343
34343
|
const SmoothlyFrame$1 = class extends HTMLElement {
|
|
34344
34344
|
constructor() {
|
|
@@ -34377,7 +34377,7 @@ const SmoothlyFrame$1 = class extends HTMLElement {
|
|
|
34377
34377
|
return h("iframe", { src: this.url + "#" + window.location.origin, height: "100%", width: "100%" });
|
|
34378
34378
|
}
|
|
34379
34379
|
get element() { return this; }
|
|
34380
|
-
static get style() { return styleCss$
|
|
34380
|
+
static get style() { return styleCss$C; }
|
|
34381
34381
|
};
|
|
34382
34382
|
|
|
34383
34383
|
const SmoothlyGoogleFont$1 = class extends HTMLElement {
|
|
@@ -34390,7 +34390,7 @@ const SmoothlyGoogleFont$1 = class extends HTMLElement {
|
|
|
34390
34390
|
}
|
|
34391
34391
|
};
|
|
34392
34392
|
|
|
34393
|
-
const styleCss$
|
|
34393
|
+
const styleCss$B = "[size].sc-smoothly-icon-h{background:none}.sc-smoothly-icon-h{display:block}[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}";
|
|
34394
34394
|
|
|
34395
34395
|
const SmoothlyIcon$1 = class extends HTMLElement {
|
|
34396
34396
|
constructor() {
|
|
@@ -34431,12 +34431,12 @@ const SmoothlyIcon$1 = class extends HTMLElement {
|
|
|
34431
34431
|
static get watchers() { return {
|
|
34432
34432
|
"name": ["loadDocument"]
|
|
34433
34433
|
}; }
|
|
34434
|
-
static get style() { return styleCss$
|
|
34434
|
+
static get style() { return styleCss$B; }
|
|
34435
34435
|
render() { return h(Host, this.hostData(), this.__stencil_render()); }
|
|
34436
34436
|
};
|
|
34437
34437
|
SmoothlyIcon$1.cache = {};
|
|
34438
34438
|
|
|
34439
|
-
const styleCss$
|
|
34439
|
+
const styleCss$A = "icon-demo.sc-smoothly-icon-demo{display:block}icon-demo[hidden].sc-smoothly-icon-demo{display:none}icon-demo.sc-smoothly-icon-demo>content.sc-smoothly-icon-demo{display:flex;flex-flow:row wrap}icon-demo.sc-smoothly-icon-demo>content.sc-smoothly-icon-demo>*.sc-smoothly-icon-demo{margin:1cm}";
|
|
34440
34440
|
|
|
34441
34441
|
const SmoothlyIconDemo$1 = class extends HTMLElement {
|
|
34442
34442
|
constructor() {
|
|
@@ -34918,10 +34918,10 @@ const SmoothlyIconDemo$1 = class extends HTMLElement {
|
|
|
34918
34918
|
.map(name => (h("smoothly-icon", { name: name, toolTip: name })))),
|
|
34919
34919
|
];
|
|
34920
34920
|
}
|
|
34921
|
-
static get style() { return styleCss$
|
|
34921
|
+
static get style() { return styleCss$A; }
|
|
34922
34922
|
};
|
|
34923
34923
|
|
|
34924
|
-
const styleCss$
|
|
34924
|
+
const styleCss$z = ".sc-smoothly-input-h{display:block;position:relative;font-weight:var(--smoothly-font-weight);padding:var(--padding);overflow:hidden;background-color:rgb(var(--background-color));color:rgb(var(--text-color, var(--smoothly-default-contrast)))}[hidden].sc-smoothly-input-h{display:none}.sc-smoothly-input-h>div.sc-smoothly-input{position:relative;width:100%;height:100%}label.sc-smoothly-input{position:absolute;left:0.4em;top:0.6em;color:rgb(var(--text-color, var(--smoothly-default-contrast)));opacity:0.8;user-select:none;cursor:inherit;transition:transform 0.1s;transform-origin:top left;transition-timing-function:ease}.sc-smoothly-input-h:not([show-label]) label.sc-smoothly-input{display:none}.sc-smoothly-input-h:not([show-label]) input.sc-smoothly-input{padding:0.7em 0.3em 0.7em 0.4em}input.sc-smoothly-input{padding:1.2em 0.3em 0.2em 0.4em;box-sizing:border-box;width:100%;height:100%;background:none;border:0;z-index:1;position:relative;font-size:1rem;font-family:var(--smoothly-font-family);background-color:rgb(var(--background-color))}smoothly-icon.sc-smoothly-input{display:none;position:absolute;right:0.2em;top:0.6em}input.sc-smoothly-input:invalid+label.sc-smoothly-input+smoothly-icon.sc-smoothly-input{display:block}.sc-smoothly-input-h>div.sc-smoothly-input>label.sc-smoothly-input{z-index:1;pointer-events:none}.has-value.sc-smoothly-input-h>div.sc-smoothly-input>label.sc-smoothly-input,.sc-smoothly-input-h:focus-within>div.sc-smoothly-input>label.sc-smoothly-input{top:0.4em;transform:scale(0.6)}input.sc-smoothly-input:focus{outline:none}input.sc-smoothly-input:-webkit-autofill,input.sc-smoothly-input:-webkit-autofill:hover,input.sc-smoothly-input:-webkit-autofill:focus,input.sc-smoothly-input:-webkit-autofill:active{box-shadow:0 0 0 40em rgb(var(--background-color)) inset;-webkit-box-shadow:0 0 0 40em rgb(var(--background-color)) inset}input.sc-smoothly-input:-webkit-autofill,input.sc-smoothly-input:-webkit-autofill+label.sc-smoothly-input{-webkit-text-fill-color:rgb(var(--text-color, var(--smoothly-default-contrast)))}";
|
|
34925
34925
|
|
|
34926
34926
|
const SmoothlyInput$1 = class extends HTMLElement {
|
|
34927
34927
|
constructor() {
|
|
@@ -35121,14 +35121,14 @@ const SmoothlyInput$1 = class extends HTMLElement {
|
|
|
35121
35121
|
"value": ["valueWatcher"],
|
|
35122
35122
|
"currency": ["onCurrency"]
|
|
35123
35123
|
}; }
|
|
35124
|
-
static get style() { return styleCss$
|
|
35124
|
+
static get style() { return styleCss$z; }
|
|
35125
35125
|
};
|
|
35126
35126
|
function getLocale() {
|
|
35127
35127
|
const result = navigator.language;
|
|
35128
35128
|
return Locale$1.is(result) ? result : Language$1.is(result) ? Locale$1.toLocale(result) : undefined;
|
|
35129
35129
|
}
|
|
35130
35130
|
|
|
35131
|
-
const styleCss$
|
|
35131
|
+
const styleCss$y = ".sc-smoothly-input-date-h{position:relative}nav.sc-smoothly-input-date{position:absolute;z-index:10;top:3.5em;background-color:rgb(var(--smoothly-default-shade));max-width:22em}.sc-smoothly-input-date-h>div.sc-smoothly-input-date{position:fixed;top:0px;left:0px;right:0px;bottom:0px;width:100vw;height:100vh;z-index:2}.sc-smoothly-input-date-h>nav.sc-smoothly-input-date>.arrow.sc-smoothly-input-date{position:absolute;z-index:9;transform:translate(2em, -0.55em) rotate(45deg);width:1em;height:1em;background-color:rgb(var(--smoothly-default-shade))}";
|
|
35132
35132
|
|
|
35133
35133
|
const InputDate = class extends HTMLElement {
|
|
35134
35134
|
constructor() {
|
|
@@ -35161,10 +35161,10 @@ const InputDate = class extends HTMLElement {
|
|
|
35161
35161
|
static get watchers() { return {
|
|
35162
35162
|
"value": ["onStart"]
|
|
35163
35163
|
}; }
|
|
35164
|
-
static get style() { return styleCss$
|
|
35164
|
+
static get style() { return styleCss$y; }
|
|
35165
35165
|
};
|
|
35166
35166
|
|
|
35167
|
-
const styleCss$
|
|
35167
|
+
const styleCss$x = ".sc-smoothly-input-date-range-h{position:relative;display:block;width:fit-content}.sc-smoothly-input-date-range-h>nav.sc-smoothly-input-date-range{position:absolute;z-index:10;top:3.5em;background-color:rgb(var(--smoothly-default-shade));max-width:22em}.sc-smoothly-input-date-range-h>div.sc-smoothly-input-date-range{position:fixed;top:0px;left:0px;right:0px;bottom:0px;width:100vw;height:100vh;z-index:2}.sc-smoothly-input-date-range-h>nav.sc-smoothly-input-date-range>.arrow.sc-smoothly-input-date-range{position:absolute;z-index:9;transform:translate(10em, -0.55em) rotate(45deg);width:1em;height:1em;background-color:rgb(var(--smoothly-default-shade))}.sc-smoothly-input-date-range-h>section.sc-smoothly-input-date-range{display:flex;background-color:var(--background, transparent);border-radius:0.25rem;cursor:pointer}smoothly-input.sc-smoothly-input-date-range{border-radius:var(--border-radius, none);background-color:transparent;width:var(--input-width)}span.sc-smoothly-input-date-range{padding:0.5em 0.2em 0.5em 0.2em;align-self:center}";
|
|
35168
35168
|
|
|
35169
35169
|
const InputDateRange = class extends HTMLElement {
|
|
35170
35170
|
constructor() {
|
|
@@ -35203,7 +35203,7 @@ const InputDateRange = class extends HTMLElement {
|
|
|
35203
35203
|
static get watchers() { return {
|
|
35204
35204
|
"value": ["onValue"]
|
|
35205
35205
|
}; }
|
|
35206
|
-
static get style() { return styleCss$
|
|
35206
|
+
static get style() { return styleCss$x; }
|
|
35207
35207
|
};
|
|
35208
35208
|
|
|
35209
35209
|
const SmoothlyInputDemo$1 = class extends HTMLElement {
|
|
@@ -35213,13 +35213,13 @@ const SmoothlyInputDemo$1 = class extends HTMLElement {
|
|
|
35213
35213
|
}
|
|
35214
35214
|
render() {
|
|
35215
35215
|
return [
|
|
35216
|
-
h("form", { action: "done", style: { position: "relative" } }, h("header", null, h("h5", null, "
|
|
35216
|
+
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 without button"), h("smoothly-radio-button", null, 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("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"))),
|
|
35217
35217
|
h("smoothly-backtotop", null),
|
|
35218
35218
|
];
|
|
35219
35219
|
}
|
|
35220
35220
|
};
|
|
35221
35221
|
|
|
35222
|
-
const styleCss$
|
|
35222
|
+
const styleCss$w = ".sc-smoothly-input-month-h{display:flex;justify-content:space-between;font-size:large}smoothly-icon.sc-smoothly-input-month{font-size:smaller}";
|
|
35223
35223
|
|
|
35224
35224
|
const MonthSelector = class extends HTMLElement {
|
|
35225
35225
|
constructor() {
|
|
@@ -35248,10 +35248,10 @@ const MonthSelector = class extends HTMLElement {
|
|
|
35248
35248
|
static get watchers() { return {
|
|
35249
35249
|
"value": ["onValueChanged"]
|
|
35250
35250
|
}; }
|
|
35251
|
-
static get style() { return styleCss$
|
|
35251
|
+
static get style() { return styleCss$w; }
|
|
35252
35252
|
};
|
|
35253
35253
|
|
|
35254
|
-
const styleCss$
|
|
35254
|
+
const styleCss$v = "[selected].sc-smoothly-item-h{background-color:rgb(var(--smoothly-primary-shade));color:rgb(var(--smoothly-primary-contrast))}.sc-smoothly-item-h{padding:0.5em;cursor:pointer;background-color:rgb(var(--smoothly-default-shade));color:rgb(var(--smoothly-default-contrast));border:rgb(var(--smoothly-default-shade) solid 1px)}.sc-smoothly-item-h:hover{background-color:rgb(var(--smoothly-primary-color));color:rgb(var(--smoothly-primary-contrast))}";
|
|
35255
35255
|
|
|
35256
35256
|
const Item = class extends HTMLElement {
|
|
35257
35257
|
constructor() {
|
|
@@ -35285,10 +35285,10 @@ const Item = class extends HTMLElement {
|
|
|
35285
35285
|
static get watchers() { return {
|
|
35286
35286
|
"selected": ["onSelectedChanged"]
|
|
35287
35287
|
}; }
|
|
35288
|
-
static get style() { return styleCss$
|
|
35288
|
+
static get style() { return styleCss$v; }
|
|
35289
35289
|
};
|
|
35290
35290
|
|
|
35291
|
-
const styleCss$
|
|
35291
|
+
const styleCss$u = ":host{max-height:18.75rem;width:85%;max-height:var(--max-menu-height);box-sizing:border-box;background-color:rgb(var(--smoothly-default-color));border-radius:0.25em;color:rgb(var(--smoothly-primary-color));stroke:rgb(var(--smoothly-primary-color));fill:rgb(var(--smoothly-primary-color));box-shadow:0px 2px 1.5rem rgba(64, 60, 57, 0.08), inset 0px 0px 1px rgba(64, 60, 57, 0.4);overflow-y:auto;cursor:pointer}:host:first-child{margin:10em}";
|
|
35292
35292
|
|
|
35293
35293
|
const SmoothlyMenuOptions$1 = class extends HTMLElement {
|
|
35294
35294
|
constructor() {
|
|
@@ -35398,10 +35398,10 @@ const SmoothlyMenuOptions$1 = class extends HTMLElement {
|
|
|
35398
35398
|
static get watchers() { return {
|
|
35399
35399
|
"options": ["optionsChangeHandler"]
|
|
35400
35400
|
}; }
|
|
35401
|
-
static get style() { return styleCss$
|
|
35401
|
+
static get style() { return styleCss$u; }
|
|
35402
35402
|
};
|
|
35403
35403
|
|
|
35404
|
-
const styleCss$
|
|
35404
|
+
const styleCss$t = ".sc-smoothly-notification-h{display:block;min-width:32.6%;min-height:3em;border-radius:5px;margin:0.5em}[hidden].sc-smoothly-notification-h{display:none}smoothly-trigger.sc-smoothly-notification{float:right;text-align:right;margin-right:0.2em}";
|
|
35405
35405
|
|
|
35406
35406
|
const Notification = class extends HTMLElement {
|
|
35407
35407
|
constructor() {
|
|
@@ -35459,10 +35459,10 @@ const Notification = class extends HTMLElement {
|
|
|
35459
35459
|
static get watchers() { return {
|
|
35460
35460
|
"notice": ["onUpdatedNotice"]
|
|
35461
35461
|
}; }
|
|
35462
|
-
static get style() { return styleCss$
|
|
35462
|
+
static get style() { return styleCss$t; }
|
|
35463
35463
|
};
|
|
35464
35464
|
|
|
35465
|
-
const styleCss$
|
|
35465
|
+
const styleCss$s = ".sc-smoothly-notifier-h{display:block}[hidden].sc-smoothly-notifier-h{display:none}.sc-smoothly-notifier-h>aside.sc-smoothly-notifier{display:flex;flex-wrap:wrap-reverse;align-content:stretch;justify-content:flex-start;position:fixed;bottom:3em;left:0;text-align:center;width:100%;z-index:100}";
|
|
35466
35466
|
|
|
35467
35467
|
const Notifier = class extends HTMLElement {
|
|
35468
35468
|
constructor() {
|
|
@@ -35482,10 +35482,10 @@ const Notifier = class extends HTMLElement {
|
|
|
35482
35482
|
h("aside", null, this.notices.map(n => (h("smoothly-notification", { notice: n })))),
|
|
35483
35483
|
];
|
|
35484
35484
|
}
|
|
35485
|
-
static get style() { return styleCss$
|
|
35485
|
+
static get style() { return styleCss$s; }
|
|
35486
35486
|
};
|
|
35487
35487
|
|
|
35488
|
-
const styleCss$
|
|
35488
|
+
const styleCss$r = ":host{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;padding:0.7em 1em;margin-left:1px;margin-right:1px;background-color:transparent;position:relative}:host([data-highlight]){background-color:rgb(var(--smoothly-default-shade))}:host>div.name{padding-left:0.5em;flex-shrink:1;width:100%}:host([divider]){margin-bottom:0.5em}::slotted([slot=right]){font-style:italic;white-space:nowrap}:host([divider])::after{position:absolute;height:1px;width:100%;left:0;bottom:-0.25em;content:\"\";background-color:rgba(var(--smoothly-dark-color))}::slotted([slot=hint]){display:flex;align-items:center;gap:1ch;font-style:italic;white-space:nowrap}";
|
|
35489
35489
|
|
|
35490
35490
|
const SmoothlyOption$1 = class extends HTMLElement {
|
|
35491
35491
|
constructor() {
|
|
@@ -35520,10 +35520,10 @@ const SmoothlyOption$1 = class extends HTMLElement {
|
|
|
35520
35520
|
return (h(Host, { onMouseDown: (e) => this.onSelect(e), onMouseOver: (e) => this.onHover(e) }, this.toggle && h("smoothly-icon", { name: this.checked ? "checkbox" : "square-outline" }), h("div", { class: "name" }, this.name), h("smoothly-quiet", null, h("slot", { name: "hint" }))));
|
|
35521
35521
|
}
|
|
35522
35522
|
get element() { return this; }
|
|
35523
|
-
static get style() { return styleCss$
|
|
35523
|
+
static get style() { return styleCss$r; }
|
|
35524
35524
|
};
|
|
35525
35525
|
|
|
35526
|
-
const styleCss$
|
|
35526
|
+
const styleCss$q = ":host{--background-color:var(--smoothly-default-color), 1;--color:var(--smoothly-secondary-contrast);--border-color:var(--smoothly-default-shade), 1;--border-highlight-color:var(--smoothly-secondary-contrast), 1;--label-color:var(--smoothly-secondary-contrast), 0.8;--selected-item-border-radius:0.25rem;--selected-item-background-color:var(--smoothly-secondary-color), 1;--selected-item-color:255, 255, 255, 1}:host{display:block;position:relative;background-color:rgba(var(--background-color));width:100%;cursor:pointer;--intergiro-transition:border-color 200ms cubic-bezier(0.645, 0.045, 0.355, 1);transition:var(--intergiro-transition);border:1px solid rgb(var(--border-color));margin:1px;height:2.5rem;border-radius:0.25rem}:host(:focus-within){border-color:rgb(var(--smoothly-primary-shade));border-width:2px;margin:0px}:host>div{display:flex;background-color:transparent;min-height:2.5rem;align-items:center;align-self:center;border:none;max-height:var(--max-height)}:host>div .icons>smoothly-icon{flex-shrink:0;padding-left:0.6em;stroke:rgba(var(--color), 0.4);fill:rgba(var(--color), 0.4);width:1.5em !important;height:1.5em !important}:host>div .icons>smoothly-icon:hover{fill:rgba(var(--color), 1)}:host>div input{width:100%;background-color:transparent;outline:none;border:none;cursor:pointer;color:rgb(var(--color));padding:0 0.6rem;font-family:var(--smoothly-font-family);font-size:1.05rem}:host>div input::placeholder{opacity:1;text-overflow:ellipsis}:host([is-open])>div input{color:rgb(var(--smoothly-medium-color))}:host(:not(:focus-within)[multiple]) ul>li:last-child{position:absolute;pointer-events:none}:host([label=\"\"]) ul,:host:not([label]) ul,:host([label-setting=hide]) ul{padding-top:0.1rem;padding-bottom:0.1rem}label{padding-left:0.6rem;white-space:nowrap;color:rgba(var(--label-color));transition:var(--intergiro-transition);font-family:var(--smoothly-font-family);pointer-events:none;transform-origin:left}:host([has-selection]) label{display:var(--label-display)}:host([has-selection]) label,:host(:focus-within) label{display:none}:host(:hover) smoothly-icon[data-arrow],:host(:focus-within) smoothly-icon[data-arrow]{stroke:rgba(var(--color), 1)}:host smoothly-icon[data-arrow]{pointer-events:none}:host smoothly-icon{flex-shrink:0;width:1rem;height:1rem}:host(:not([is-open])) smoothly-icon.up,:host([is-open]) smoothly-icon.down{display:none}smoothly-icon.search{display:flex;align-self:center;padding-left:0.8rem}smoothly-icon.up,smoothly-icon.down{display:flex;align-self:center;padding-right:0.8rem;stroke:rgb(var(--smoothly-primary-shade))}:host smoothly-menu-options{margin-top:0.5rem;padding-top:0.5rem;padding-bottom:0.5rem;position:absolute;z-index:1}:host(:not([is-open]))>smoothly-menu-options{display:none}";
|
|
35527
35527
|
|
|
35528
35528
|
const SmoothlyPicker$1 = class extends HTMLElement {
|
|
35529
35529
|
constructor() {
|
|
@@ -35702,10 +35702,10 @@ const SmoothlyPicker$1 = class extends HTMLElement {
|
|
|
35702
35702
|
static get watchers() { return {
|
|
35703
35703
|
"isOpen": ["isOpenChangeHandler"]
|
|
35704
35704
|
}; }
|
|
35705
|
-
static get style() { return styleCss$
|
|
35705
|
+
static get style() { return styleCss$q; }
|
|
35706
35706
|
};
|
|
35707
35707
|
|
|
35708
|
-
const styleCss$
|
|
35708
|
+
const styleCss$p = ".sc-smoothly-popup-h{display:inline-flex;position:relative}[hidden].sc-smoothly-popup-h{display:none}.sc-smoothly-popup-h:not([visible]) aside.sc-smoothly-popup{display:none}.sc-smoothly-popup-h aside.sc-smoothly-popup{display:inline;position:absolute;padding:0.3em;left:var(--left);right:var(--right);background-color:rgb(238, 238, 238);border-color:rgb(238, 238, 238);border-style:solid;border-width:0.1em;border-radius:0.6em;z-index:3}[direction=down].sc-smoothly-popup-h aside.sc-smoothly-popup{top:2.2em;box-shadow:6px 5px 9px -9px black, 5px 6px 9px -9px black}[direction=up].sc-smoothly-popup-h aside.sc-smoothly-popup{bottom:2.2em;box-shadow:-6px -5px 9px -9px black, -5px -6px 9px -9px black}.sc-smoothly-popup-h:not([visible]) .background.sc-smoothly-popup{display:none}.sc-smoothly-popup-h .background.sc-smoothly-popup{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:2}.sc-smoothly-popup-h:not([visible]) .arrow.sc-smoothly-popup{display:none}.sc-smoothly-popup-h .arrow.sc-smoothly-popup{background-color:rgb(238, 238, 238);border-color:rgb(238, 238, 238);z-index:2;content:\"\";position:absolute;width:12px;height:12px;transform:rotate(45deg);left:calc(var(--left) + 1em);right:calc(var(--right) + 1em)}[direction=down].sc-smoothly-popup-h .arrow.sc-smoothly-popup{top:2em;border-top-style:solid;border-top-width:1px;border-left-style:solid;border-left-width:1px}[direction=up].sc-smoothly-popup-h .arrow.sc-smoothly-popup{bottom:2em;border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px}.sc-smoothly-popup-h .pointer.sc-smoothly-popup{cursor:pointer}";
|
|
35709
35709
|
|
|
35710
35710
|
const SmoothlyPopup$1 = class extends HTMLElement {
|
|
35711
35711
|
constructor() {
|
|
@@ -35734,10 +35734,10 @@ const SmoothlyPopup$1 = class extends HTMLElement {
|
|
|
35734
35734
|
render() {
|
|
35735
35735
|
return (h(Host, { style: Object.assign({}, this.cssVariables) }, h("content", { class: "pointer", onClick: () => this.onClick() }, h("slot", null)), h("div", { class: "background", onClick: () => this.onClick() }), h("div", { class: "arrow", onClick: () => this.onClick() }), h("aside", { ref: el => (this.aside = el) }, h("slot", { name: "popup" }))));
|
|
35736
35736
|
}
|
|
35737
|
-
static get style() { return styleCss$
|
|
35737
|
+
static get style() { return styleCss$p; }
|
|
35738
35738
|
};
|
|
35739
35739
|
|
|
35740
|
-
const styleCss$
|
|
35740
|
+
const styleCss$o = ".sc-smoothly-quiet-h{opacity:0.5}";
|
|
35741
35741
|
|
|
35742
35742
|
const SmoothlyQuiet$1 = class extends HTMLElement {
|
|
35743
35743
|
constructor() {
|
|
@@ -35747,10 +35747,10 @@ const SmoothlyQuiet$1 = class extends HTMLElement {
|
|
|
35747
35747
|
render() {
|
|
35748
35748
|
return (h(Host, { color: this.color }, h("slot", null)));
|
|
35749
35749
|
}
|
|
35750
|
-
static get style() { return styleCss$
|
|
35750
|
+
static get style() { return styleCss$o; }
|
|
35751
35751
|
};
|
|
35752
35752
|
|
|
35753
|
-
const styleCss$
|
|
35753
|
+
const styleCss$n = ".sc-smoothly-radio-h{display:block;position:relative}[hidden].sc-smoothly-radio-h{display:none}label.sc-smoothly-radio{display:block;width:calc(100% - 2 * 0.4em);padding:0.2em 0.4em 0.2em 0.4em}input[type=radio].sc-smoothly-radio{position:absolute;left:0;top:0;width:calc(100%);height:100%;margin:0;appearance:none;-webkit-appearance:none}input[type=radio].sc-smoothly-radio~label.sc-smoothly-radio{border:1px solid rgb(var(--smoothly-default-color));color:rgba(var(--smoothly-default-contrast), 0.5);background:rgb(var(--smoothly-default-color))}input[type=radio].sc-smoothly-radio:checked~label.sc-smoothly-radio{background-color:rgb(var(--smoothly-default-shade));color:rgb(var(--smoothly-default-contrast))}";
|
|
35754
35754
|
|
|
35755
35755
|
const SmoothlyRadio$1 = class extends HTMLElement {
|
|
35756
35756
|
constructor() {
|
|
@@ -35769,6 +35769,54 @@ const SmoothlyRadio$1 = class extends HTMLElement {
|
|
|
35769
35769
|
h("label", { htmlFor: this.value }, h("slot", null)),
|
|
35770
35770
|
];
|
|
35771
35771
|
}
|
|
35772
|
+
static get style() { return styleCss$n; }
|
|
35773
|
+
};
|
|
35774
|
+
|
|
35775
|
+
const styleCss$m = ".sc-smoothly-radio-button-h{display:block}";
|
|
35776
|
+
|
|
35777
|
+
const SmoothlyRadioButton$1 = class extends HTMLElement {
|
|
35778
|
+
constructor() {
|
|
35779
|
+
super();
|
|
35780
|
+
this.__registerHost();
|
|
35781
|
+
this.radioButtonSelected = createEvent(this, "radioButtonSelected", 7);
|
|
35782
|
+
this.decoration = "radio";
|
|
35783
|
+
}
|
|
35784
|
+
radioSelectHandler(event) {
|
|
35785
|
+
var _a, _b;
|
|
35786
|
+
if (this.deselectable || ((_a = this.active) === null || _a === void 0 ? void 0 : _a.value) != event.detail.value) {
|
|
35787
|
+
(_b = this.active) === null || _b === void 0 ? void 0 : _b.select(false);
|
|
35788
|
+
this.active = event.detail;
|
|
35789
|
+
this.radioButtonSelected.emit((this.value = this.active.selected ? event.detail.value : undefined));
|
|
35790
|
+
this.active.select(this.active.selected);
|
|
35791
|
+
}
|
|
35792
|
+
}
|
|
35793
|
+
render() {
|
|
35794
|
+
return (h(Host, null, h("slot", null)));
|
|
35795
|
+
}
|
|
35796
|
+
static get style() { return styleCss$m; }
|
|
35797
|
+
};
|
|
35798
|
+
|
|
35799
|
+
const styleCss$l = "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-primary-contrast));background:rgb(var(--smoothly-primary-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}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-primary-color));color:rgb(var(--smoothly-primary-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-primary-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;margin-bottom:0.5rem}.sc-smoothly-radio-button-item-h:last-child{margin-bottom:0}.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-primary-tint));color:rgb(var(--smoothly-primary-contrast));padding:0;position:relative;transition:0.1s}[selected].sc-smoothly-radio-button-item-s>[slot=expansion]{display:block;padding:0.5rem}";
|
|
35800
|
+
|
|
35801
|
+
const SmoothlyRadioButtonItem$1 = class extends HTMLElement {
|
|
35802
|
+
constructor() {
|
|
35803
|
+
super();
|
|
35804
|
+
this.__registerHost();
|
|
35805
|
+
this.radioItemSelectInternal = createEvent(this, "radioItemSelectInternal", 7);
|
|
35806
|
+
}
|
|
35807
|
+
componentWillLoad() {
|
|
35808
|
+
this.select(this.selected);
|
|
35809
|
+
}
|
|
35810
|
+
select(selected = false) {
|
|
35811
|
+
this.radioItemSelectInternal.emit({
|
|
35812
|
+
value: this.value,
|
|
35813
|
+
selected,
|
|
35814
|
+
select: s => (this.selected = s),
|
|
35815
|
+
});
|
|
35816
|
+
}
|
|
35817
|
+
render() {
|
|
35818
|
+
return (h(Host, null, h("header", { onClick: () => this.select(!this.selected) }, h("smoothly-icon", { color: this.selected ? "success" : "medium", fill: "solid", name: this.selected ? "checkmark-circle" : "ellipse-outline", size: "tiny", toolTip: "Select" }), h("slot", null), h("slot", { name: "end" })), h("slot", { name: "expansion" })));
|
|
35819
|
+
}
|
|
35772
35820
|
static get style() { return styleCss$l; }
|
|
35773
35821
|
};
|
|
35774
35822
|
|
|
@@ -36611,6 +36659,8 @@ const SmoothlyPicker = /*@__PURE__*/proxyCustomElement(SmoothlyPicker$1, [1,"smo
|
|
|
36611
36659
|
const SmoothlyPopup = /*@__PURE__*/proxyCustomElement(SmoothlyPopup$1, [6,"smoothly-popup",{"visible":[1540],"direction":[1537],"cssVariables":[32]}]);
|
|
36612
36660
|
const SmoothlyQuiet = /*@__PURE__*/proxyCustomElement(SmoothlyQuiet$1, [6,"smoothly-quiet",{"color":[1]}]);
|
|
36613
36661
|
const SmoothlyRadio = /*@__PURE__*/proxyCustomElement(SmoothlyRadio$1, [6,"smoothly-radio",{"name":[1],"value":[1],"checked":[1540],"tabIndex":[2,"tab-index"]}]);
|
|
36662
|
+
const SmoothlyRadioButton = /*@__PURE__*/proxyCustomElement(SmoothlyRadioButton$1, [6,"smoothly-radio-button",{"value":[1032],"deselectable":[516],"decoration":[513]},[[2,"radioItemSelectInternal","radioSelectHandler"]]]);
|
|
36663
|
+
const SmoothlyRadioButtonItem = /*@__PURE__*/proxyCustomElement(SmoothlyRadioButtonItem$1, [6,"smoothly-radio-button-item",{"value":[8],"selected":[1540]}]);
|
|
36614
36664
|
const SmoothlyRadioGroup = /*@__PURE__*/proxyCustomElement(SmoothlyToggleGroup, [4,"smoothly-radio-group",{"orientation":[513]}]);
|
|
36615
36665
|
const SmoothlyReorder = /*@__PURE__*/proxyCustomElement(SmoothlyReorder$1, [0,"smoothly-reorder"]);
|
|
36616
36666
|
const SmoothlyRoom = /*@__PURE__*/proxyCustomElement(SmoothlyRoom$1, [4,"smoothly-room",{"label":[1],"icon":[1],"path":[1],"to":[1]}]);
|
|
@@ -36670,6 +36720,8 @@ const defineCustomElements = (opts) => {
|
|
|
36670
36720
|
SmoothlyPopup,
|
|
36671
36721
|
SmoothlyQuiet,
|
|
36672
36722
|
SmoothlyRadio,
|
|
36723
|
+
SmoothlyRadioButton,
|
|
36724
|
+
SmoothlyRadioButtonItem,
|
|
36673
36725
|
SmoothlyRadioGroup,
|
|
36674
36726
|
SmoothlyReorder,
|
|
36675
36727
|
SmoothlyRoom,
|
|
@@ -36702,4 +36754,4 @@ const defineCustomElements = (opts) => {
|
|
|
36702
36754
|
}
|
|
36703
36755
|
};
|
|
36704
36756
|
|
|
36705
|
-
export { App, ClientIdentifier, Cosmetic, GoogleFont, Message, Notice, SmoothlyAccordion, SmoothlyAccordionItem, SmoothlyApp, SmoothlyAppDemo, SmoothlyBacktotop, SmoothlyButton, SmoothlyCalendar, SmoothlyCheckbox, SmoothlyDialog, SmoothlyDialogDemo, SmoothlyDisplay, SmoothlyDisplayAmount, SmoothlyDisplayDateTime, SmoothlyDisplayDemo, SmoothlyFrame, SmoothlyGoogleFont, SmoothlyIcon, SmoothlyIconDemo, SmoothlyInput, SmoothlyInputDate, SmoothlyInputDateRange, SmoothlyInputDemo, SmoothlyInputMonth, SmoothlyItem, SmoothlyMenuOptions, SmoothlyNotification, SmoothlyNotifier, SmoothlyOption, SmoothlyPicker, SmoothlyPopup, SmoothlyQuiet, SmoothlyRadio, SmoothlyRadioGroup, SmoothlyReorder, SmoothlyRoom, SmoothlySelect, SmoothlySelectDemo, SmoothlySelector, SmoothlySkeleton, SmoothlySpinner, SmoothlySubmit, SmoothlySvg, SmoothlyTab, SmoothlyTabSwitch, SmoothlyTable, SmoothlyTableCell, SmoothlyTableDemo, SmoothlyTableExpandableCell, SmoothlyTableExpandableRow, SmoothlyTableHeader, SmoothlyTableRow, SmoothlyTrigger, SmoothlyTriggerSink, SmoothlyTriggerSource, SmoothlyTuple, SmoothlyUrlencoded, Trigger, defineCustomElements, redirect };
|
|
36757
|
+
export { App, ClientIdentifier, Cosmetic, GoogleFont, Message, Notice, SmoothlyAccordion, SmoothlyAccordionItem, SmoothlyApp, SmoothlyAppDemo, SmoothlyBacktotop, SmoothlyButton, SmoothlyCalendar, SmoothlyCheckbox, SmoothlyDialog, SmoothlyDialogDemo, SmoothlyDisplay, SmoothlyDisplayAmount, SmoothlyDisplayDateTime, SmoothlyDisplayDemo, SmoothlyFrame, SmoothlyGoogleFont, SmoothlyIcon, SmoothlyIconDemo, SmoothlyInput, SmoothlyInputDate, SmoothlyInputDateRange, SmoothlyInputDemo, SmoothlyInputMonth, SmoothlyItem, SmoothlyMenuOptions, SmoothlyNotification, SmoothlyNotifier, SmoothlyOption, SmoothlyPicker, SmoothlyPopup, SmoothlyQuiet, SmoothlyRadio, SmoothlyRadioButton, SmoothlyRadioButtonItem, SmoothlyRadioGroup, SmoothlyReorder, SmoothlyRoom, SmoothlySelect, SmoothlySelectDemo, SmoothlySelector, SmoothlySkeleton, SmoothlySpinner, SmoothlySubmit, SmoothlySvg, SmoothlyTab, SmoothlyTabSwitch, SmoothlyTable, SmoothlyTableCell, SmoothlyTableDemo, SmoothlyTableExpandableCell, SmoothlyTableExpandableRow, SmoothlyTableHeader, SmoothlyTableRow, SmoothlyTrigger, SmoothlyTriggerSink, SmoothlyTriggerSource, SmoothlyTuple, SmoothlyUrlencoded, Trigger, defineCustomElements, redirect };
|