smoothly 0.3.0 → 0.3.2
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_52.cjs.entry.js} +103 -57
- package/dist/cjs/smoothly.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +2 -0
- package/dist/collection/components/display-amount/index.js +22 -1
- package/dist/collection/components/display-demo/index.js +9 -0
- package/dist/collection/components/input-demo/index.js +9 -0
- package/dist/collection/components/radio-button/Selected.js +1 -0
- package/dist/collection/components/radio-button/index.js +48 -0
- package/dist/collection/components/radio-button/item/index.js +107 -0
- package/dist/collection/components/radio-button/item/style.css +67 -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 -58
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{smoothly-accordion_50.entry.js → smoothly-accordion_52.entry.js} +102 -58
- package/dist/esm/smoothly.js +1 -1
- package/dist/smoothly/{p-71443887.entry.js → p-ed84bc93.entry.js} +1 -1
- package/dist/smoothly/smoothly.esm.js +1 -1
- package/dist/types/components/display-amount/index.d.ts +1 -0
- package/dist/types/components/radio-button/Selected.d.ts +5 -0
- package/dist/types/components/radio-button/index.d.ts +7 -0
- package/dist/types/components/radio-button/item/index.d.ts +11 -0
- package/dist/types/components.d.ts +42 -0
- package/package.json +1 -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,19 +34245,20 @@ 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() {
|
|
34259
34259
|
super();
|
|
34260
34260
|
this.__registerHost();
|
|
34261
|
+
this.toInteger = false;
|
|
34261
34262
|
}
|
|
34262
34263
|
format(amount) {
|
|
34263
34264
|
const digitsPerGroup = 3;
|
|
@@ -34278,7 +34279,7 @@ const SmoothlyDisplayAmount$1 = class extends HTMLElement {
|
|
|
34278
34279
|
result = result.padEnd(separator + maxDecimals + 1, "0");
|
|
34279
34280
|
result = result.substring(0, separator + maxDecimals + 1);
|
|
34280
34281
|
}
|
|
34281
|
-
else {
|
|
34282
|
+
else if (!this.toInteger) {
|
|
34282
34283
|
result = result + ".";
|
|
34283
34284
|
separator = result.length - 1;
|
|
34284
34285
|
result = result.padEnd(separator + maxDecimals + 1, "0");
|
|
@@ -34300,10 +34301,10 @@ const SmoothlyDisplayAmount$1 = class extends HTMLElement {
|
|
|
34300
34301
|
this.currency,
|
|
34301
34302
|
];
|
|
34302
34303
|
}
|
|
34303
|
-
static get style() { return styleCss$
|
|
34304
|
+
static get style() { return styleCss$E; }
|
|
34304
34305
|
};
|
|
34305
34306
|
|
|
34306
|
-
const styleCss$
|
|
34307
|
+
const styleCss$D = ".sc-smoothly-display-date-time-h{display:block}[hidden].sc-smoothly-display-date-time-h{display:none}";
|
|
34307
34308
|
|
|
34308
34309
|
const SmoothlyDisplayDateTime$1 = class extends HTMLElement {
|
|
34309
34310
|
constructor() {
|
|
@@ -34317,7 +34318,7 @@ const SmoothlyDisplayDateTime$1 = class extends HTMLElement {
|
|
|
34317
34318
|
const datetime = this.datetime.split("T");
|
|
34318
34319
|
return [datetime[0], " ", datetime[1]];
|
|
34319
34320
|
}
|
|
34320
|
-
static get style() { return styleCss$
|
|
34321
|
+
static get style() { return styleCss$D; }
|
|
34321
34322
|
};
|
|
34322
34323
|
|
|
34323
34324
|
const SmoothlyDisplayDemo$1 = class extends HTMLElement {
|
|
@@ -34332,12 +34333,12 @@ const SmoothlyDisplayDemo$1 = class extends HTMLElement {
|
|
|
34332
34333
|
}
|
|
34333
34334
|
render() {
|
|
34334
34335
|
return [
|
|
34335
|
-
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, "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, "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
34337
|
];
|
|
34337
34338
|
}
|
|
34338
34339
|
};
|
|
34339
34340
|
|
|
34340
|
-
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}";
|
|
34341
34342
|
|
|
34342
34343
|
const SmoothlyFrame$1 = class extends HTMLElement {
|
|
34343
34344
|
constructor() {
|
|
@@ -34376,7 +34377,7 @@ const SmoothlyFrame$1 = class extends HTMLElement {
|
|
|
34376
34377
|
return h("iframe", { src: this.url + "#" + window.location.origin, height: "100%", width: "100%" });
|
|
34377
34378
|
}
|
|
34378
34379
|
get element() { return this; }
|
|
34379
|
-
static get style() { return styleCss$
|
|
34380
|
+
static get style() { return styleCss$C; }
|
|
34380
34381
|
};
|
|
34381
34382
|
|
|
34382
34383
|
const SmoothlyGoogleFont$1 = class extends HTMLElement {
|
|
@@ -34389,7 +34390,7 @@ const SmoothlyGoogleFont$1 = class extends HTMLElement {
|
|
|
34389
34390
|
}
|
|
34390
34391
|
};
|
|
34391
34392
|
|
|
34392
|
-
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}";
|
|
34393
34394
|
|
|
34394
34395
|
const SmoothlyIcon$1 = class extends HTMLElement {
|
|
34395
34396
|
constructor() {
|
|
@@ -34430,12 +34431,12 @@ const SmoothlyIcon$1 = class extends HTMLElement {
|
|
|
34430
34431
|
static get watchers() { return {
|
|
34431
34432
|
"name": ["loadDocument"]
|
|
34432
34433
|
}; }
|
|
34433
|
-
static get style() { return styleCss$
|
|
34434
|
+
static get style() { return styleCss$B; }
|
|
34434
34435
|
render() { return h(Host, this.hostData(), this.__stencil_render()); }
|
|
34435
34436
|
};
|
|
34436
34437
|
SmoothlyIcon$1.cache = {};
|
|
34437
34438
|
|
|
34438
|
-
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}";
|
|
34439
34440
|
|
|
34440
34441
|
const SmoothlyIconDemo$1 = class extends HTMLElement {
|
|
34441
34442
|
constructor() {
|
|
@@ -34917,10 +34918,10 @@ const SmoothlyIconDemo$1 = class extends HTMLElement {
|
|
|
34917
34918
|
.map(name => (h("smoothly-icon", { name: name, toolTip: name })))),
|
|
34918
34919
|
];
|
|
34919
34920
|
}
|
|
34920
|
-
static get style() { return styleCss$
|
|
34921
|
+
static get style() { return styleCss$A; }
|
|
34921
34922
|
};
|
|
34922
34923
|
|
|
34923
|
-
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)))}";
|
|
34924
34925
|
|
|
34925
34926
|
const SmoothlyInput$1 = class extends HTMLElement {
|
|
34926
34927
|
constructor() {
|
|
@@ -35120,14 +35121,14 @@ const SmoothlyInput$1 = class extends HTMLElement {
|
|
|
35120
35121
|
"value": ["valueWatcher"],
|
|
35121
35122
|
"currency": ["onCurrency"]
|
|
35122
35123
|
}; }
|
|
35123
|
-
static get style() { return styleCss$
|
|
35124
|
+
static get style() { return styleCss$z; }
|
|
35124
35125
|
};
|
|
35125
35126
|
function getLocale() {
|
|
35126
35127
|
const result = navigator.language;
|
|
35127
35128
|
return Locale$1.is(result) ? result : Language$1.is(result) ? Locale$1.toLocale(result) : undefined;
|
|
35128
35129
|
}
|
|
35129
35130
|
|
|
35130
|
-
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))}";
|
|
35131
35132
|
|
|
35132
35133
|
const InputDate = class extends HTMLElement {
|
|
35133
35134
|
constructor() {
|
|
@@ -35160,10 +35161,10 @@ const InputDate = class extends HTMLElement {
|
|
|
35160
35161
|
static get watchers() { return {
|
|
35161
35162
|
"value": ["onStart"]
|
|
35162
35163
|
}; }
|
|
35163
|
-
static get style() { return styleCss$
|
|
35164
|
+
static get style() { return styleCss$y; }
|
|
35164
35165
|
};
|
|
35165
35166
|
|
|
35166
|
-
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}";
|
|
35167
35168
|
|
|
35168
35169
|
const InputDateRange = class extends HTMLElement {
|
|
35169
35170
|
constructor() {
|
|
@@ -35202,7 +35203,7 @@ const InputDateRange = class extends HTMLElement {
|
|
|
35202
35203
|
static get watchers() { return {
|
|
35203
35204
|
"value": ["onValue"]
|
|
35204
35205
|
}; }
|
|
35205
|
-
static get style() { return styleCss$
|
|
35206
|
+
static get style() { return styleCss$x; }
|
|
35206
35207
|
};
|
|
35207
35208
|
|
|
35208
35209
|
const SmoothlyInputDemo$1 = class extends HTMLElement {
|
|
@@ -35212,13 +35213,13 @@ const SmoothlyInputDemo$1 = class extends HTMLElement {
|
|
|
35212
35213
|
}
|
|
35213
35214
|
render() {
|
|
35214
35215
|
return [
|
|
35215
|
-
h("form", { action: "done", style: { position: "relative" } }, h("header", null, h("h5", null, "Address")), h("main", null, 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("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("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("smoothly-display-amount", { currency: "SEK", amount: "1289.5" }), h("smoothly-display-date-time", { datetime: "2019-01-31T20:01:34" }), h("smoothly-checkbox", { selectAll: true, intermediate: true }), h("smoothly-checkbox", null), h("smoothly-checkbox", { disabled: true }), 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("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("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"))),
|
|
35216
|
+
h("form", { action: "done", style: { position: "relative" } }, h("header", null, h("h5", null, "Address")), h("main", null, 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("smoothly-radio-button", null, h("smoothly-radio-button-item", { value: { some: "content", yes: "sir" }, expansion: true }, h("span", null, "Option 1"), h("span", { slot: "expansion" }, "Some description.")), h("smoothly-radio-button-item", { value: { some: "thing", yes: "miss" }, expansion: true }, 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("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("smoothly-display-amount", { currency: "SEK", amount: "1289.5" }), h("smoothly-display-date-time", { datetime: "2019-01-31T20:01:34" }), h("smoothly-checkbox", { selectAll: true, intermediate: true }), h("smoothly-checkbox", null), h("smoothly-checkbox", { disabled: true }), 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("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("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"))),
|
|
35216
35217
|
h("smoothly-backtotop", null),
|
|
35217
35218
|
];
|
|
35218
35219
|
}
|
|
35219
35220
|
};
|
|
35220
35221
|
|
|
35221
|
-
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}";
|
|
35222
35223
|
|
|
35223
35224
|
const MonthSelector = class extends HTMLElement {
|
|
35224
35225
|
constructor() {
|
|
@@ -35247,10 +35248,10 @@ const MonthSelector = class extends HTMLElement {
|
|
|
35247
35248
|
static get watchers() { return {
|
|
35248
35249
|
"value": ["onValueChanged"]
|
|
35249
35250
|
}; }
|
|
35250
|
-
static get style() { return styleCss$
|
|
35251
|
+
static get style() { return styleCss$w; }
|
|
35251
35252
|
};
|
|
35252
35253
|
|
|
35253
|
-
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))}";
|
|
35254
35255
|
|
|
35255
35256
|
const Item = class extends HTMLElement {
|
|
35256
35257
|
constructor() {
|
|
@@ -35284,10 +35285,10 @@ const Item = class extends HTMLElement {
|
|
|
35284
35285
|
static get watchers() { return {
|
|
35285
35286
|
"selected": ["onSelectedChanged"]
|
|
35286
35287
|
}; }
|
|
35287
|
-
static get style() { return styleCss$
|
|
35288
|
+
static get style() { return styleCss$v; }
|
|
35288
35289
|
};
|
|
35289
35290
|
|
|
35290
|
-
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}";
|
|
35291
35292
|
|
|
35292
35293
|
const SmoothlyMenuOptions$1 = class extends HTMLElement {
|
|
35293
35294
|
constructor() {
|
|
@@ -35397,10 +35398,10 @@ const SmoothlyMenuOptions$1 = class extends HTMLElement {
|
|
|
35397
35398
|
static get watchers() { return {
|
|
35398
35399
|
"options": ["optionsChangeHandler"]
|
|
35399
35400
|
}; }
|
|
35400
|
-
static get style() { return styleCss$
|
|
35401
|
+
static get style() { return styleCss$u; }
|
|
35401
35402
|
};
|
|
35402
35403
|
|
|
35403
|
-
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}";
|
|
35404
35405
|
|
|
35405
35406
|
const Notification = class extends HTMLElement {
|
|
35406
35407
|
constructor() {
|
|
@@ -35458,10 +35459,10 @@ const Notification = class extends HTMLElement {
|
|
|
35458
35459
|
static get watchers() { return {
|
|
35459
35460
|
"notice": ["onUpdatedNotice"]
|
|
35460
35461
|
}; }
|
|
35461
|
-
static get style() { return styleCss$
|
|
35462
|
+
static get style() { return styleCss$t; }
|
|
35462
35463
|
};
|
|
35463
35464
|
|
|
35464
|
-
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}";
|
|
35465
35466
|
|
|
35466
35467
|
const Notifier = class extends HTMLElement {
|
|
35467
35468
|
constructor() {
|
|
@@ -35481,10 +35482,10 @@ const Notifier = class extends HTMLElement {
|
|
|
35481
35482
|
h("aside", null, this.notices.map(n => (h("smoothly-notification", { notice: n })))),
|
|
35482
35483
|
];
|
|
35483
35484
|
}
|
|
35484
|
-
static get style() { return styleCss$
|
|
35485
|
+
static get style() { return styleCss$s; }
|
|
35485
35486
|
};
|
|
35486
35487
|
|
|
35487
|
-
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}";
|
|
35488
35489
|
|
|
35489
35490
|
const SmoothlyOption$1 = class extends HTMLElement {
|
|
35490
35491
|
constructor() {
|
|
@@ -35519,10 +35520,10 @@ const SmoothlyOption$1 = class extends HTMLElement {
|
|
|
35519
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" }))));
|
|
35520
35521
|
}
|
|
35521
35522
|
get element() { return this; }
|
|
35522
|
-
static get style() { return styleCss$
|
|
35523
|
+
static get style() { return styleCss$r; }
|
|
35523
35524
|
};
|
|
35524
35525
|
|
|
35525
|
-
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}";
|
|
35526
35527
|
|
|
35527
35528
|
const SmoothlyPicker$1 = class extends HTMLElement {
|
|
35528
35529
|
constructor() {
|
|
@@ -35701,10 +35702,10 @@ const SmoothlyPicker$1 = class extends HTMLElement {
|
|
|
35701
35702
|
static get watchers() { return {
|
|
35702
35703
|
"isOpen": ["isOpenChangeHandler"]
|
|
35703
35704
|
}; }
|
|
35704
|
-
static get style() { return styleCss$
|
|
35705
|
+
static get style() { return styleCss$q; }
|
|
35705
35706
|
};
|
|
35706
35707
|
|
|
35707
|
-
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}";
|
|
35708
35709
|
|
|
35709
35710
|
const SmoothlyPopup$1 = class extends HTMLElement {
|
|
35710
35711
|
constructor() {
|
|
@@ -35733,10 +35734,10 @@ const SmoothlyPopup$1 = class extends HTMLElement {
|
|
|
35733
35734
|
render() {
|
|
35734
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" }))));
|
|
35735
35736
|
}
|
|
35736
|
-
static get style() { return styleCss$
|
|
35737
|
+
static get style() { return styleCss$p; }
|
|
35737
35738
|
};
|
|
35738
35739
|
|
|
35739
|
-
const styleCss$
|
|
35740
|
+
const styleCss$o = ".sc-smoothly-quiet-h{opacity:0.5}";
|
|
35740
35741
|
|
|
35741
35742
|
const SmoothlyQuiet$1 = class extends HTMLElement {
|
|
35742
35743
|
constructor() {
|
|
@@ -35746,10 +35747,10 @@ const SmoothlyQuiet$1 = class extends HTMLElement {
|
|
|
35746
35747
|
render() {
|
|
35747
35748
|
return (h(Host, { color: this.color }, h("slot", null)));
|
|
35748
35749
|
}
|
|
35749
|
-
static get style() { return styleCss$
|
|
35750
|
+
static get style() { return styleCss$o; }
|
|
35750
35751
|
};
|
|
35751
35752
|
|
|
35752
|
-
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))}";
|
|
35753
35754
|
|
|
35754
35755
|
const SmoothlyRadio$1 = class extends HTMLElement {
|
|
35755
35756
|
constructor() {
|
|
@@ -35768,6 +35769,51 @@ const SmoothlyRadio$1 = class extends HTMLElement {
|
|
|
35768
35769
|
h("label", { htmlFor: this.value }, h("slot", null)),
|
|
35769
35770
|
];
|
|
35770
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
|
+
}
|
|
35782
|
+
radioSelectHandler(event) {
|
|
35783
|
+
var _a;
|
|
35784
|
+
(_a = this.active) === null || _a === void 0 ? void 0 : _a.select(false);
|
|
35785
|
+
this.active = event.detail;
|
|
35786
|
+
this.value = this.active.selected ? event.detail.value : undefined;
|
|
35787
|
+
this.active.select(this.active.selected);
|
|
35788
|
+
}
|
|
35789
|
+
render() {
|
|
35790
|
+
return (h(Host, null, h("slot", null)));
|
|
35791
|
+
}
|
|
35792
|
+
static get style() { return styleCss$m; }
|
|
35793
|
+
};
|
|
35794
|
+
|
|
35795
|
+
const styleCss$l = ".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-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}[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))}.sc-smoothly-radio-button-item-h>aside.sc-smoothly-radio-button-item{display:none;background:rgb(var(--smoothly-light-color));color:rgb(var(--smoothly-light-contrast));padding:0;border-radius:5px;margin-top:0.5rem;position:relative;transition:0.1s}.sc-smoothly-radio-button-item-h>aside.sc-smoothly-radio-button-item::before{content:\"\\25B2\";position:absolute;top:-0.8rem;left:3rem;color:rgb(var(--smoothly-light-color))}[selected].sc-smoothly-radio-button-item-h>aside.sc-smoothly-radio-button-item{display:block;padding:0.5rem}.sc-smoothly-radio-button-item-h>aside.hide.sc-smoothly-radio-button-item{display:none}@media screen and (min-width: 900px){.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}[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}}";
|
|
35796
|
+
|
|
35797
|
+
const SmoothlyRadioButtonItem$1 = class extends HTMLElement {
|
|
35798
|
+
constructor() {
|
|
35799
|
+
super();
|
|
35800
|
+
this.__registerHost();
|
|
35801
|
+
this.radioSelect = createEvent(this, "radioSelect", 7);
|
|
35802
|
+
this.expansion = false;
|
|
35803
|
+
}
|
|
35804
|
+
componentWillLoad() {
|
|
35805
|
+
this.select(this.selected);
|
|
35806
|
+
}
|
|
35807
|
+
select(selected = false) {
|
|
35808
|
+
this.radioSelect.emit({
|
|
35809
|
+
value: this.value,
|
|
35810
|
+
selected,
|
|
35811
|
+
select: s => (this.selected = s),
|
|
35812
|
+
});
|
|
35813
|
+
}
|
|
35814
|
+
render() {
|
|
35815
|
+
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("aside", { class: this.expansion ? "" : "hide" }, h("slot", { name: "expansion" }))));
|
|
35816
|
+
}
|
|
35771
35817
|
static get style() { return styleCss$l; }
|
|
35772
35818
|
};
|
|
35773
35819
|
|
|
@@ -36589,7 +36635,7 @@ const SmoothlyCheckbox = /*@__PURE__*/proxyCustomElement(SmoothlyCheckbox$1, [2,
|
|
|
36589
36635
|
const SmoothlyDialog = /*@__PURE__*/proxyCustomElement(SmoothlyDialog$1, [6,"smoothly-dialog",{"color":[513],"open":[1540],"closable":[516],"header":[513]},[[0,"trigger","TriggerListener"]]]);
|
|
36590
36636
|
const SmoothlyDialogDemo = /*@__PURE__*/proxyCustomElement(SmoothlyDialogDemo$1, [0,"smoothly-dialog-demo"]);
|
|
36591
36637
|
const SmoothlyDisplay = /*@__PURE__*/proxyCustomElement(SmoothlyDisplay$1, [2,"smoothly-display",{"type":[1],"value":[8],"currency":[1],"country":[1],"format":[16]}]);
|
|
36592
|
-
const SmoothlyDisplayAmount = /*@__PURE__*/proxyCustomElement(SmoothlyDisplayAmount$1, [2,"smoothly-display-amount",{"amount":[8],"currency":[1]}]);
|
|
36638
|
+
const SmoothlyDisplayAmount = /*@__PURE__*/proxyCustomElement(SmoothlyDisplayAmount$1, [2,"smoothly-display-amount",{"amount":[8],"currency":[1],"toInteger":[4,"to-integer"]}]);
|
|
36593
36639
|
const SmoothlyDisplayDateTime = /*@__PURE__*/proxyCustomElement(SmoothlyDisplayDateTime$1, [2,"smoothly-display-date-time",{"datetime":[1]}]);
|
|
36594
36640
|
const SmoothlyDisplayDemo = /*@__PURE__*/proxyCustomElement(SmoothlyDisplayDemo$1, [0,"smoothly-display-demo"]);
|
|
36595
36641
|
const SmoothlyFrame = /*@__PURE__*/proxyCustomElement(SmoothlyFrame$1, [2,"smoothly-frame",{"url":[1],"name":[1],"origin":[1]}]);
|
|
@@ -36610,6 +36656,8 @@ const SmoothlyPicker = /*@__PURE__*/proxyCustomElement(SmoothlyPicker$1, [1,"smo
|
|
|
36610
36656
|
const SmoothlyPopup = /*@__PURE__*/proxyCustomElement(SmoothlyPopup$1, [6,"smoothly-popup",{"visible":[1540],"direction":[1537],"cssVariables":[32]}]);
|
|
36611
36657
|
const SmoothlyQuiet = /*@__PURE__*/proxyCustomElement(SmoothlyQuiet$1, [6,"smoothly-quiet",{"color":[1]}]);
|
|
36612
36658
|
const SmoothlyRadio = /*@__PURE__*/proxyCustomElement(SmoothlyRadio$1, [6,"smoothly-radio",{"name":[1],"value":[1],"checked":[1540],"tabIndex":[2,"tab-index"]}]);
|
|
36659
|
+
const SmoothlyRadioButton = /*@__PURE__*/proxyCustomElement(SmoothlyRadioButton$1, [6,"smoothly-radio-button",{"value":[1032]},[[0,"radioSelect","radioSelectHandler"]]]);
|
|
36660
|
+
const SmoothlyRadioButtonItem = /*@__PURE__*/proxyCustomElement(SmoothlyRadioButtonItem$1, [6,"smoothly-radio-button-item",{"value":[8],"selected":[1540],"expansion":[4]}]);
|
|
36613
36661
|
const SmoothlyRadioGroup = /*@__PURE__*/proxyCustomElement(SmoothlyToggleGroup, [4,"smoothly-radio-group",{"orientation":[513]}]);
|
|
36614
36662
|
const SmoothlyReorder = /*@__PURE__*/proxyCustomElement(SmoothlyReorder$1, [0,"smoothly-reorder"]);
|
|
36615
36663
|
const SmoothlyRoom = /*@__PURE__*/proxyCustomElement(SmoothlyRoom$1, [4,"smoothly-room",{"label":[1],"icon":[1],"path":[1],"to":[1]}]);
|
|
@@ -36669,6 +36717,8 @@ const defineCustomElements = (opts) => {
|
|
|
36669
36717
|
SmoothlyPopup,
|
|
36670
36718
|
SmoothlyQuiet,
|
|
36671
36719
|
SmoothlyRadio,
|
|
36720
|
+
SmoothlyRadioButton,
|
|
36721
|
+
SmoothlyRadioButtonItem,
|
|
36672
36722
|
SmoothlyRadioGroup,
|
|
36673
36723
|
SmoothlyReorder,
|
|
36674
36724
|
SmoothlyRoom,
|
|
@@ -36701,4 +36751,4 @@ const defineCustomElements = (opts) => {
|
|
|
36701
36751
|
}
|
|
36702
36752
|
};
|
|
36703
36753
|
|
|
36704
|
-
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 };
|
|
36754
|
+
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 };
|