smoothly 0.3.2 → 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_52.cjs.entry.js → smoothly-accordion_53.cjs.entry.js} +119 -81
- package/dist/cjs/smoothly.cjs.js +1 -1
- package/dist/collection/components/display-demo/index.js +18 -1
- package/dist/collection/components/input-demo/index.js +80 -49
- package/dist/collection/components/radio-button/index.js +64 -8
- package/dist/collection/components/radio-button/item/index.js +6 -27
- package/dist/collection/components/radio-button/item/style.css +48 -30
- package/dist/custom-elements/index.js +17 -14
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{smoothly-accordion_52.entry.js → smoothly-accordion_53.entry.js} +119 -82
- package/dist/esm/smoothly.js +1 -1
- package/dist/smoothly/{p-ed84bc93.entry.js → p-e82a3604.entry.js} +1 -1
- package/dist/smoothly/smoothly.esm.js +1 -1
- package/dist/types/components/radio-button/index.d.ts +4 -0
- package/dist/types/components/radio-button/item/index.d.ts +1 -2
- package/dist/types/components.d.ts +10 -3
- 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
|
@@ -7,7 +7,7 @@ const index$1 = require('./index-2a011313.js');
|
|
|
7
7
|
const Trigger = require('./Trigger-3443997e.js');
|
|
8
8
|
require('./GoogleFont-6c4f0da1.js');
|
|
9
9
|
|
|
10
|
-
const styleCss$
|
|
10
|
+
const styleCss$J = "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}";
|
|
11
11
|
|
|
12
12
|
const SmoothlyAccordion = class {
|
|
13
13
|
constructor(hostRef) {
|
|
@@ -53,9 +53,9 @@ const SmoothlyAccordion = class {
|
|
|
53
53
|
"value": ["valueChanged"]
|
|
54
54
|
}; }
|
|
55
55
|
};
|
|
56
|
-
SmoothlyAccordion.style = styleCss$
|
|
56
|
+
SmoothlyAccordion.style = styleCss$J;
|
|
57
57
|
|
|
58
|
-
const styleCss$
|
|
58
|
+
const styleCss$I = ".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))}";
|
|
59
59
|
|
|
60
60
|
const SmoothlyAccordionItem = class {
|
|
61
61
|
constructor(hostRef) {
|
|
@@ -100,9 +100,9 @@ const SmoothlyAccordionItem = class {
|
|
|
100
100
|
"open": ["openChanged"]
|
|
101
101
|
}; }
|
|
102
102
|
};
|
|
103
|
-
SmoothlyAccordionItem.style = styleCss$
|
|
103
|
+
SmoothlyAccordionItem.style = styleCss$I;
|
|
104
104
|
|
|
105
|
-
const styleCss$
|
|
105
|
+
const styleCss$H = "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}";
|
|
106
106
|
|
|
107
107
|
const SmoothlyApp = class {
|
|
108
108
|
constructor(hostRef) {
|
|
@@ -112,7 +112,7 @@ const SmoothlyApp = class {
|
|
|
112
112
|
return (index.h("smoothly-notifier", null, index.h("slot", null)));
|
|
113
113
|
}
|
|
114
114
|
};
|
|
115
|
-
SmoothlyApp.style = styleCss$
|
|
115
|
+
SmoothlyApp.style = styleCss$H;
|
|
116
116
|
|
|
117
117
|
const SmoothlyAppDemo = class {
|
|
118
118
|
constructor(hostRef) {
|
|
@@ -139,7 +139,7 @@ const SmoothlyAppDemo = class {
|
|
|
139
139
|
}
|
|
140
140
|
};
|
|
141
141
|
|
|
142
|
-
const styleCss$
|
|
142
|
+
const styleCss$G = ".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}";
|
|
143
143
|
|
|
144
144
|
const SmoothlyBacktotop = class {
|
|
145
145
|
constructor(hostRef) {
|
|
@@ -167,9 +167,9 @@ const SmoothlyBacktotop = class {
|
|
|
167
167
|
}) }, index.h("smoothly-icon", { name: "chevron-up-outline" })));
|
|
168
168
|
}
|
|
169
169
|
};
|
|
170
|
-
SmoothlyBacktotop.style = styleCss$
|
|
170
|
+
SmoothlyBacktotop.style = styleCss$G;
|
|
171
171
|
|
|
172
|
-
const styleCss$
|
|
172
|
+
const styleCss$F = "[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}";
|
|
173
173
|
|
|
174
174
|
const SmoothlyButton = class {
|
|
175
175
|
constructor(hostRef) {
|
|
@@ -190,7 +190,7 @@ const SmoothlyButton = class {
|
|
|
190
190
|
return result;
|
|
191
191
|
}
|
|
192
192
|
};
|
|
193
|
-
SmoothlyButton.style = styleCss$
|
|
193
|
+
SmoothlyButton.style = styleCss$F;
|
|
194
194
|
|
|
195
195
|
var CallingCode$1;
|
|
196
196
|
(function (CallingCode) {
|
|
@@ -6310,7 +6310,7 @@ function years(current) {
|
|
|
6310
6310
|
return result;
|
|
6311
6311
|
}
|
|
6312
6312
|
|
|
6313
|
-
const styleCss$
|
|
6313
|
+
const styleCss$E = ".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)}";
|
|
6314
6314
|
|
|
6315
6315
|
const Calendar = class {
|
|
6316
6316
|
constructor(hostRef) {
|
|
@@ -6393,7 +6393,7 @@ const Calendar = class {
|
|
|
6393
6393
|
"end": ["onEnd"]
|
|
6394
6394
|
}; }
|
|
6395
6395
|
};
|
|
6396
|
-
Calendar.style = styleCss$
|
|
6396
|
+
Calendar.style = styleCss$E;
|
|
6397
6397
|
|
|
6398
6398
|
var CallingCode;
|
|
6399
6399
|
(function (CallingCode) {
|
|
@@ -12333,7 +12333,7 @@ function create(language) {
|
|
|
12333
12333
|
}, language);
|
|
12334
12334
|
}
|
|
12335
12335
|
|
|
12336
|
-
const styleCss$
|
|
12336
|
+
const styleCss$D = ".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)}";
|
|
12337
12337
|
|
|
12338
12338
|
const SmoothlyCheckbox = class {
|
|
12339
12339
|
constructor(hostRef) {
|
|
@@ -12360,9 +12360,9 @@ const SmoothlyCheckbox = class {
|
|
|
12360
12360
|
}
|
|
12361
12361
|
get element() { return index.getElement(this); }
|
|
12362
12362
|
};
|
|
12363
|
-
SmoothlyCheckbox.style = styleCss$
|
|
12363
|
+
SmoothlyCheckbox.style = styleCss$D;
|
|
12364
12364
|
|
|
12365
|
-
const styleCss$
|
|
12365
|
+
const styleCss$C = ".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}";
|
|
12366
12366
|
|
|
12367
12367
|
const SmoothlyDialog = class {
|
|
12368
12368
|
constructor(hostRef) {
|
|
@@ -12389,7 +12389,7 @@ const SmoothlyDialog = class {
|
|
|
12389
12389
|
}
|
|
12390
12390
|
render() { return index.h(index.Host, this.hostData(), this.__stencil_render()); }
|
|
12391
12391
|
};
|
|
12392
|
-
SmoothlyDialog.style = styleCss$
|
|
12392
|
+
SmoothlyDialog.style = styleCss$C;
|
|
12393
12393
|
|
|
12394
12394
|
const SmoothlyDialogDemo = class {
|
|
12395
12395
|
constructor(hostRef) {
|
|
@@ -32610,7 +32610,7 @@ Object.defineProperty(exports, "StateEditor", { enumerable: true, get: function
|
|
|
32610
32610
|
//# sourceMappingURL=index.js.map
|
|
32611
32611
|
});
|
|
32612
32612
|
|
|
32613
|
-
const styleCss$
|
|
32613
|
+
const styleCss$B = ".sc-smoothly-display-h{display:block}[hidden].sc-smoothly-display-h{display:none}";
|
|
32614
32614
|
|
|
32615
32615
|
const SmoothlyDisplay = class {
|
|
32616
32616
|
constructor(hostRef) {
|
|
@@ -32652,9 +32652,9 @@ function getLocale$1() {
|
|
|
32652
32652
|
const result = navigator.language;
|
|
32653
32653
|
return Locale$1.is(result) ? result : Language$1.is(result) ? Locale$1.toLocale(result) : undefined;
|
|
32654
32654
|
}
|
|
32655
|
-
SmoothlyDisplay.style = styleCss$
|
|
32655
|
+
SmoothlyDisplay.style = styleCss$B;
|
|
32656
32656
|
|
|
32657
|
-
const styleCss$
|
|
32657
|
+
const styleCss$A = ".sc-smoothly-display-amount-h{display:block}[hidden].sc-smoothly-display-amount-h{display:none}";
|
|
32658
32658
|
|
|
32659
32659
|
const SmoothlyDisplayAmount = class {
|
|
32660
32660
|
constructor(hostRef) {
|
|
@@ -32703,9 +32703,9 @@ const SmoothlyDisplayAmount = class {
|
|
|
32703
32703
|
];
|
|
32704
32704
|
}
|
|
32705
32705
|
};
|
|
32706
|
-
SmoothlyDisplayAmount.style = styleCss$
|
|
32706
|
+
SmoothlyDisplayAmount.style = styleCss$A;
|
|
32707
32707
|
|
|
32708
|
-
const styleCss$
|
|
32708
|
+
const styleCss$z = ".sc-smoothly-display-date-time-h{display:block}[hidden].sc-smoothly-display-date-time-h{display:none}";
|
|
32709
32709
|
|
|
32710
32710
|
const SmoothlyDisplayDateTime = class {
|
|
32711
32711
|
constructor(hostRef) {
|
|
@@ -32719,7 +32719,7 @@ const SmoothlyDisplayDateTime = class {
|
|
|
32719
32719
|
return [datetime[0], " ", datetime[1]];
|
|
32720
32720
|
}
|
|
32721
32721
|
};
|
|
32722
|
-
SmoothlyDisplayDateTime.style = styleCss$
|
|
32722
|
+
SmoothlyDisplayDateTime.style = styleCss$z;
|
|
32723
32723
|
|
|
32724
32724
|
const SmoothlyDisplayDemo = class {
|
|
32725
32725
|
constructor(hostRef) {
|
|
@@ -32732,12 +32732,12 @@ const SmoothlyDisplayDemo = class {
|
|
|
32732
32732
|
}
|
|
32733
32733
|
render() {
|
|
32734
32734
|
return [
|
|
32735
|
-
index.h("main", null, index.h("smoothly-popup", null, index.h("div", null, "Popup, click me"), index.h("div", { color: "dark", slot: "popup" }, "1 line popup")), index.h("smoothly-display-date-time", { datetime: "2019-08-15T08:08:17.65Z" }), index.h("dl", null, index.h("dt", null, "text"), index.h("dd", null, index.h("smoothly-display", { type: "text", value: "text" })), index.h("dt", null, "postal code"), index.h("dd", null, index.h("smoothly-display", { type: "postal-code", value: "752 31" })), index.h("dt", null, "password"), index.h("dd", null, index.h("smoothly-display", { type: "password", value: "password" })), index.h("dt", null, "email"), index.h("dd", null, index.h("smoothly-display", { type: "email", value: "test@example.com" })), index.h("dt", null, "price"), index.h("dd", null, index.h("smoothly-display", { type: "price", value: "13.37", currency: "SEK" })), index.h("dt", null, "display amount without decimals"), index.h("dd", null, index.h("smoothly-display-amount", { amount: 200, currency: "SEK", toInteger: true })), index.h("dt", null, "display amount with decimals if they are set, otherwise no decimal"), index.h("dd", null, index.h("smoothly-display-amount", { amount: 200.20, currency: "SEK", toInteger: true })), index.h("dt", null, "display amount with decimals"), index.h("dd", null, index.h("smoothly-display-amount", { amount: 200.20, currency: "SEK" })), index.h("dt", null, "percent"), index.h("dd", null, index.h("smoothly-display", { type: "percent", value: "42" })), index.h("dt", null, "phone"), index.h("dd", null, index.h("smoothly-display", { type: "phone", value: "0101881108" })), index.h("dt", null, "card number"), index.h("dd", null, index.h("smoothly-display", { type: "card-number", value: "4111111111111111" })), index.h("dt", null, "card expires"), index.h("dd", null, index.h("smoothly-display", { type: "card-expires", value: "7/22" })), index.h("dt", null, "card csc"), index.h("dd", null, index.h("smoothly-display", { type: "card-csc", value: "987" })), index.h("dt", null, "date"), index.h("dd", null, index.h("smoothly-display", { type: "date", value: "2022-07-07" })), index.h("dt", null, "date time"), index.h("dd", null, index.h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "short", day: "numeric", hour: "numeric", minute: "numeric", second: "numeric" }, value: "2022-07-07T02:02:02Z" })), index.h("dd", null, index.h("smoothly-display", { type: "date-time", format: { year: "2-digit", month: "long", day: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit" }, value: "2022-07-07T02:02:02Z" })), index.h("dd", null, index.h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "2-digit", day: "2-digit", hour: "numeric", minute: "numeric", second: "numeric" }, value: "2022-07-07T12:22:24Z" })), index.h("dd", null, index.h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "numeric", day: "numeric", hour: "numeric", minute: "numeric", second: "numeric" }, value: "2022-07-07T12:22:24Z" })), index.h("dd", null, index.h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "short", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), index.h("dd", null, index.h("smoothly-display", { type: "date-time", format: { year: "2-digit", month: "numeric", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), index.h("dd", null, index.h("smoothly-display", { type: "date-time", format: { year: "2-digit", month: "numeric", day: "numeric", hour: "2-digit", minute: "2-digit", second: "2-digit", timeZone: "+01:00" }, value: "2022-07-07T12:15Z" })), index.h("dt", null, "Quiet"), index.h("dd", null, index.h("smoothly-quiet", { color: "dark" }, "-"))), index.h("smoothly-skeleton", { period: 3, distance: "20rem", width: "20rem" }), index.h("smoothly-skeleton", { period: 3, distance: "20rem", color: "200,200,255" }), index.h("smoothly-skeleton", { period: 3, distance: "20rem", color: "var(--smoothly-warning-color)" }), index.h("smoothly-skeleton", { period: 3, distance: "20rem" }), index.h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem", width: "20rem" }), index.h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), index.h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), index.h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), index.h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem", width: "20rem" }), index.h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }), index.h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }), index.h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }), index.h("smoothly-urlencoded", { data: "hej=hopp&tjena=moss" }), index.h("div", { style: { display: "flex", justifyContent: "space-between" } }, index.h("smoothly-popup", { direction: "down" }, "Click for popup", index.h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup stuff that has a lot of text")), index.h("smoothly-popup", { direction: "down" }, "Click for popup", index.h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup with a bunch of text."))), index.h("p", null, "Test of diffrent kinds of notifier:"), index.h("button", { onClick: () => this.noticeWarning(index$1.Notice.warn("This is a test warning notice.")) }, "warning"), index.h("button", { onClick: () => this.noticeWarning(index$1.Notice.succeded("This is a test success notice.")) }, "success"), index.h("button", { onClick: () => this.noticeWarning(index$1.Notice.failed("This is a test danger notice.")) }, "danger"), index.h("button", { onClick: () => this.noticeWarning(index$1.Notice.execute("This is a test execute notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "execute"), index.h("button", { onClick: () => this.noticeWarning(index$1.Notice.delay("This is a test delay notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "delay")),
|
|
32735
|
+
index.h("main", null, index.h("smoothly-popup", null, index.h("div", null, "Popup, click me"), index.h("div", { color: "dark", slot: "popup" }, "1 line popup")), index.h("smoothly-display-date-time", { datetime: "2019-08-15T08:08:17.65Z" }), index.h("dl", null, index.h("dt", null, "text"), index.h("dd", null, index.h("smoothly-display", { type: "text", value: "text" })), index.h("dt", null, "postal code"), index.h("dd", null, index.h("smoothly-display", { type: "postal-code", value: "752 31" })), index.h("dt", null, "password"), index.h("dd", null, index.h("smoothly-display", { type: "password", value: "password" })), index.h("dt", null, "email"), index.h("dd", null, index.h("smoothly-display", { type: "email", value: "test@example.com" })), index.h("dt", null, "price"), index.h("dd", null, index.h("smoothly-display", { type: "price", value: "13.37", currency: "SEK" })), index.h("dt", null, "display amount without decimals"), index.h("dd", null, index.h("smoothly-display-amount", { amount: 200, currency: "SEK", toInteger: true })), index.h("dt", null, "display amount with decimals if they are set, otherwise no decimal"), index.h("dd", null, index.h("smoothly-display-amount", { amount: 200.20, currency: "SEK", toInteger: true })), index.h("dt", null, "display amount with decimals"), index.h("dd", null, index.h("smoothly-display-amount", { amount: 200.20, currency: "SEK" })), index.h("dt", null, "percent"), index.h("dd", null, index.h("smoothly-display", { type: "percent", value: "42" })), index.h("dt", null, "phone"), index.h("dd", null, index.h("smoothly-display", { type: "phone", value: "0101881108" })), index.h("dt", null, "card number"), index.h("dd", null, index.h("smoothly-display", { type: "card-number", value: "4111111111111111" })), index.h("dt", null, "card expires"), index.h("dd", null, index.h("smoothly-display", { type: "card-expires", value: "7/22" })), index.h("dt", null, "card csc"), index.h("dd", null, index.h("smoothly-display", { type: "card-csc", value: "987" })), index.h("dt", null, "date"), index.h("dd", null, index.h("smoothly-display", { type: "date", value: "2022-07-07" })), index.h("dt", null, "date time"), index.h("dd", null, index.h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "short", day: "numeric", hour: "numeric", minute: "numeric", second: "numeric" }, value: "2022-07-07T02:02:02Z" })), index.h("dd", null, index.h("smoothly-display", { type: "date-time", format: { year: "2-digit", month: "long", day: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit" }, value: "2022-07-07T02:02:02Z" })), index.h("dd", null, index.h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "2-digit", day: "2-digit", hour: "numeric", minute: "numeric", second: "numeric" }, value: "2022-07-07T12:22:24Z" })), index.h("dd", null, index.h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "numeric", day: "numeric", hour: "numeric", minute: "numeric", second: "numeric" }, value: "2022-07-07T12:22:24Z" })), index.h("dd", null, index.h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "short", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), index.h("dd", null, index.h("smoothly-display", { type: "date-time", format: { year: "2-digit", month: "numeric", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), index.h("dd", null, index.h("smoothly-display", { type: "date-time", format: { year: "2-digit", month: "numeric", day: "numeric", hour: "2-digit", minute: "2-digit", second: "2-digit", timeZone: "+01:00" }, value: "2022-07-07T12:15Z" })), index.h("dt", null, "Deprecated display date time"), index.h("dd", null, index.h("smoothly-display-date-time", { datetime: "2019-01-31T20:01:34" })), index.h("dt", null, "Display amount"), index.h("dd", null, index.h("smoothly-display-amount", { currency: "SEK", amount: "1289.5" })), index.h("dt", null, "Quiet"), index.h("dd", null, index.h("smoothly-quiet", { color: "dark" }, "-"))), index.h("smoothly-skeleton", { period: 3, distance: "20rem", width: "20rem" }), index.h("smoothly-skeleton", { period: 3, distance: "20rem", color: "200,200,255" }), index.h("smoothly-skeleton", { period: 3, distance: "20rem", color: "var(--smoothly-warning-color)" }), index.h("smoothly-skeleton", { period: 3, distance: "20rem" }), index.h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem", width: "20rem" }), index.h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), index.h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), index.h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), index.h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem", width: "20rem" }), index.h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }), index.h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }), index.h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }), index.h("smoothly-urlencoded", { data: "hej=hopp&tjena=moss" }), index.h("div", { style: { display: "flex", justifyContent: "space-between" } }, index.h("smoothly-popup", { direction: "down" }, "Click for popup", index.h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup stuff that has a lot of text")), index.h("smoothly-popup", { direction: "down" }, "Click for popup", index.h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup with a bunch of text."))), index.h("p", null, "Test of diffrent kinds of notifier:"), index.h("button", { onClick: () => this.noticeWarning(index$1.Notice.warn("This is a test warning notice.")) }, "warning"), index.h("button", { onClick: () => this.noticeWarning(index$1.Notice.succeded("This is a test success notice.")) }, "success"), index.h("button", { onClick: () => this.noticeWarning(index$1.Notice.failed("This is a test danger notice.")) }, "danger"), index.h("button", { onClick: () => this.noticeWarning(index$1.Notice.execute("This is a test execute notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "execute"), index.h("button", { onClick: () => this.noticeWarning(index$1.Notice.delay("This is a test delay notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "delay"), index.h("div", { style: { position: "relative", height: "10em" } }, "Large Spinner", index.h("smoothly-spinner", { active: true, size: "large", style: { "--background-color": "255,255,255", "--background-opacity": "0.2", "--spinner-color": "0,130,0", } })), index.h("div", { style: { position: "relative", height: "10em" } }, "Medium Spinner", index.h("smoothly-spinner", { active: true, size: "medium" })), index.h("div", { style: { position: "relative", height: "10em" } }, "Small Spinner", index.h("smoothly-spinner", { active: true, size: "small" })), index.h("div", { style: { position: "absolute", left: "500px", top: "150px" } }, index.h("smoothly-svg", { url: "https://theme.payfunc.com/intergiro/animated-logo.svg" }))),
|
|
32736
32736
|
];
|
|
32737
32737
|
}
|
|
32738
32738
|
};
|
|
32739
32739
|
|
|
32740
|
-
const styleCss$
|
|
32740
|
+
const styleCss$y = ".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}";
|
|
32741
32741
|
|
|
32742
32742
|
const SmoothlyFrame = class {
|
|
32743
32743
|
constructor(hostRef) {
|
|
@@ -32776,9 +32776,9 @@ const SmoothlyFrame = class {
|
|
|
32776
32776
|
}
|
|
32777
32777
|
get element() { return index.getElement(this); }
|
|
32778
32778
|
};
|
|
32779
|
-
SmoothlyFrame.style = styleCss$
|
|
32779
|
+
SmoothlyFrame.style = styleCss$y;
|
|
32780
32780
|
|
|
32781
|
-
const styleCss$
|
|
32781
|
+
const styleCss$x = "[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}";
|
|
32782
32782
|
|
|
32783
32783
|
const SmoothlyIcon = class {
|
|
32784
32784
|
constructor(hostRef) {
|
|
@@ -32821,9 +32821,9 @@ const SmoothlyIcon = class {
|
|
|
32821
32821
|
render() { return index.h(index.Host, this.hostData(), this.__stencil_render()); }
|
|
32822
32822
|
};
|
|
32823
32823
|
SmoothlyIcon.cache = {};
|
|
32824
|
-
SmoothlyIcon.style = styleCss$
|
|
32824
|
+
SmoothlyIcon.style = styleCss$x;
|
|
32825
32825
|
|
|
32826
|
-
const styleCss$
|
|
32826
|
+
const styleCss$w = "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}";
|
|
32827
32827
|
|
|
32828
32828
|
const SmoothlyIconDemo = class {
|
|
32829
32829
|
constructor(hostRef) {
|
|
@@ -33305,9 +33305,9 @@ const SmoothlyIconDemo = class {
|
|
|
33305
33305
|
];
|
|
33306
33306
|
}
|
|
33307
33307
|
};
|
|
33308
|
-
SmoothlyIconDemo.style = styleCss$
|
|
33308
|
+
SmoothlyIconDemo.style = styleCss$w;
|
|
33309
33309
|
|
|
33310
|
-
const styleCss$
|
|
33310
|
+
const styleCss$v = ".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)))}";
|
|
33311
33311
|
|
|
33312
33312
|
const SmoothlyInput = class {
|
|
33313
33313
|
constructor(hostRef) {
|
|
@@ -33511,9 +33511,9 @@ function getLocale() {
|
|
|
33511
33511
|
const result = navigator.language;
|
|
33512
33512
|
return Locale$1.is(result) ? result : Language$1.is(result) ? Locale$1.toLocale(result) : undefined;
|
|
33513
33513
|
}
|
|
33514
|
-
SmoothlyInput.style = styleCss$
|
|
33514
|
+
SmoothlyInput.style = styleCss$v;
|
|
33515
33515
|
|
|
33516
|
-
const styleCss$
|
|
33516
|
+
const styleCss$u = ".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))}";
|
|
33517
33517
|
|
|
33518
33518
|
const InputDate = class {
|
|
33519
33519
|
constructor(hostRef) {
|
|
@@ -33546,9 +33546,9 @@ const InputDate = class {
|
|
|
33546
33546
|
"value": ["onStart"]
|
|
33547
33547
|
}; }
|
|
33548
33548
|
};
|
|
33549
|
-
InputDate.style = styleCss$
|
|
33549
|
+
InputDate.style = styleCss$u;
|
|
33550
33550
|
|
|
33551
|
-
const styleCss$
|
|
33551
|
+
const styleCss$t = ".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}";
|
|
33552
33552
|
|
|
33553
33553
|
const InputDateRange = class {
|
|
33554
33554
|
constructor(hostRef) {
|
|
@@ -33587,7 +33587,7 @@ const InputDateRange = class {
|
|
|
33587
33587
|
"value": ["onValue"]
|
|
33588
33588
|
}; }
|
|
33589
33589
|
};
|
|
33590
|
-
InputDateRange.style = styleCss$
|
|
33590
|
+
InputDateRange.style = styleCss$t;
|
|
33591
33591
|
|
|
33592
33592
|
const SmoothlyInputDemo = class {
|
|
33593
33593
|
constructor(hostRef) {
|
|
@@ -33595,13 +33595,13 @@ const SmoothlyInputDemo = class {
|
|
|
33595
33595
|
}
|
|
33596
33596
|
render() {
|
|
33597
33597
|
return [
|
|
33598
|
-
index.h("form", { action: "done", style: { position: "relative" } }, index.h("header", null, index.h("h5", null, "
|
|
33598
|
+
index.h("form", { action: "done", style: { position: "relative" } }, index.h("header", null, index.h("h5", null, "Form")), index.h("main", null, index.h("fieldset", null, index.h("h2", null, "Smoothly Iput"), index.h("h3", null, "Card"), index.h("smoothly-input", { type: "text", name: "name", readonly: true, value: "Readonly", onSmoothlyBlur: () => console.log("smoothly blur") }, "Readonly"), index.h("smoothly-input", { type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, "Name"), index.h("smoothly-input", { type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Name"), index.h("smoothly-input-date", null), index.h("smoothly-input", { type: "date", name: "date" }, "Date"), index.h("smoothly-input", { type: "date-time", name: "date-time" }, "Date-Time"), index.h("smoothly-input", { type: "divisor", name: "divisor" }, "Divisor"), index.h("smoothly-input", { type: "text", name: "street", value: "street" }, "Street"), index.h("smoothly-input", { type: "card-number", name: "card" }, "Card #"), index.h("smoothly-input", { type: "card-expires", name: "card", style: { width: "calc(60% - 2px)" } }, "Expires"), index.h("smoothly-input", { type: "card-csc", name: "card", style: { width: "calc(40% - 1px)", borderLeft: "none" } }, "CVV/CVC"), index.h("h3", null, "Contact"), index.h("smoothly-input", { type: "postal-code", name: "zip", style: { width: "calc(60% - 2px)" } }, "ZipCode"), index.h("smoothly-input", { type: "text", name: "testing" }, "Texttest"), index.h("smoothly-input", { type: "password", name: "password" }, "Password"), index.h("smoothly-input", { type: "email", name: "email" }, "Email"), index.h("smoothly-input", { type: "price", currency: "SEK", name: "price" }, "Price"), index.h("smoothly-input", { type: "percent", name: "percent" }, "Percent"), index.h("smoothly-input", { type: "phone", name: "phone" }, "Phone"), index.h("smoothly-input-date", null, "Date")), index.h("fieldset", null, index.h("h2", null, "Smoothly Radio"), index.h("h3", null, "Deselectable Radio List with button"), index.h("smoothly-radio-button", { deselectable: true, decoration: "button" }, index.h("smoothly-radio-button-item", { value: { some: "content", yes: "sir" } }, index.h("span", null, "Option 1"), index.h("span", { slot: "expansion" }, "Some description.")), index.h("smoothly-radio-button-item", { value: { some: "thing", yes: "miss" } }, index.h("span", null, "Option 2"), index.h("span", { slot: "expansion" }, "Some other description.")), index.h("smoothly-radio-button-item", { value: { some: "one", yes: "kid" } }, index.h("span", null, "Option 3"))), index.h("h3", null, "Radio List with button"), index.h("smoothly-radio-button", { decoration: "button" }, index.h("smoothly-radio-button-item", { value: { some: "content", yes: "sir" } }, index.h("span", null, "Option 1"), index.h("span", { slot: "expansion" }, "Some description.")), index.h("smoothly-radio-button-item", { value: { some: "thing", yes: "miss" } }, index.h("span", null, "Option 2"), index.h("span", { slot: "expansion" }, "Some other description.")), index.h("smoothly-radio-button-item", { value: { some: "one", yes: "kid" } }, index.h("span", null, "Option 3"))), index.h("h3", null, "Radio List without button"), index.h("smoothly-radio-button", null, index.h("smoothly-radio-button-item", { value: { some: "content", yes: "sir" } }, index.h("span", null, "Option 1"), index.h("span", { slot: "expansion" }, "Some description.")), index.h("smoothly-radio-button-item", { value: { some: "thing", yes: "miss" } }, index.h("span", null, "Option 2"), index.h("span", { slot: "expansion" }, "Some other description.")), index.h("smoothly-radio-button-item", { value: { some: "one", yes: "kid" } }, index.h("span", null, "Option 3"))), index.h("smoothly-radio", { name: "option", value: "1" }, "option 1"), index.h("smoothly-radio", { name: "option", value: "2", checked: true }, "option 2"), index.h("smoothly-radio", { name: "option", value: "3" }, "option 3")), index.h("fieldset", null, index.h("h2", null, "Smoothly Accordion"), index.h("smoothly-accordion", null, index.h("smoothly-accordion-item", { name: "A", open: true }, index.h("smoothly-radio", { name: "a", value: "1" }, "a 1"), index.h("smoothly-radio", { name: "a", value: "2", checked: true }, "a 2"), index.h("smoothly-radio", { name: "a", value: "3" }, "a 3")), index.h("smoothly-accordion-item", { name: "B" }, index.h("smoothly-radio", { name: "b", value: "1" }, "b 1"), index.h("smoothly-radio", { name: "b", value: "2" }, "b 2"), index.h("smoothly-radio", { name: "b", value: "3" }, "b 3")))), index.h("fieldset", null, index.h("h2", null, "Smoothly checkbox"), index.h("smoothly-checkbox", { selectAll: true, intermediate: true }), index.h("smoothly-checkbox", null), index.h("smoothly-checkbox", { disabled: true })), index.h("fieldset", null, index.h("h2", null, "Smoothly addresses"), index.h("smoothly-address-display", { value: '{ "countryCode": "SE", "street": "Korkstigen 2", "zipCode": "654 31", "city": "Fejksala" }' }), index.h("smoothly-address", { editable: false, value: '{ "countryCode": "SE", "street": "Stigv\u00E4gen 34", "zipCode": "123 45", "city": "Hobbiton" }' }), index.h("smoothly-addresses", { allowed: "billing delivery visit", editable: true, value: '{ "billing": { "countryCode": "SE", "street": "Rundslingan 3", "zipCode": "987 65", "city": "Klotby" }, "visit": { "countryCode": "SE", "street": "G\u00E5ngbanan 34", "zipCode": "543 21", "city": "Trasktr\u00E4sk" } }' }))), index.h("footer", null, index.h("smoothly-submit", { expand: "block", onSubmit: (e) => alert(e), color: "success" }, "Submit"), index.h("smoothly-trigger", { expand: "block", color: "success", onClick: (e) => console.log(e.detail) }, "Trigger"))),
|
|
33599
33599
|
index.h("smoothly-backtotop", null),
|
|
33600
33600
|
];
|
|
33601
33601
|
}
|
|
33602
33602
|
};
|
|
33603
33603
|
|
|
33604
|
-
const styleCss$
|
|
33604
|
+
const styleCss$s = ".sc-smoothly-input-month-h{display:flex;justify-content:space-between;font-size:large}smoothly-icon.sc-smoothly-input-month{font-size:smaller}";
|
|
33605
33605
|
|
|
33606
33606
|
const MonthSelector = class {
|
|
33607
33607
|
constructor(hostRef) {
|
|
@@ -33630,9 +33630,9 @@ const MonthSelector = class {
|
|
|
33630
33630
|
"value": ["onValueChanged"]
|
|
33631
33631
|
}; }
|
|
33632
33632
|
};
|
|
33633
|
-
MonthSelector.style = styleCss$
|
|
33633
|
+
MonthSelector.style = styleCss$s;
|
|
33634
33634
|
|
|
33635
|
-
const styleCss$
|
|
33635
|
+
const styleCss$r = "[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))}";
|
|
33636
33636
|
|
|
33637
33637
|
const Item = class {
|
|
33638
33638
|
constructor(hostRef) {
|
|
@@ -33666,9 +33666,9 @@ const Item = class {
|
|
|
33666
33666
|
"selected": ["onSelectedChanged"]
|
|
33667
33667
|
}; }
|
|
33668
33668
|
};
|
|
33669
|
-
Item.style = styleCss$
|
|
33669
|
+
Item.style = styleCss$r;
|
|
33670
33670
|
|
|
33671
|
-
const styleCss$
|
|
33671
|
+
const styleCss$q = ":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}";
|
|
33672
33672
|
|
|
33673
33673
|
const SmoothlyMenuOptions = class {
|
|
33674
33674
|
constructor(hostRef) {
|
|
@@ -33777,9 +33777,9 @@ const SmoothlyMenuOptions = class {
|
|
|
33777
33777
|
"options": ["optionsChangeHandler"]
|
|
33778
33778
|
}; }
|
|
33779
33779
|
};
|
|
33780
|
-
SmoothlyMenuOptions.style = styleCss$
|
|
33780
|
+
SmoothlyMenuOptions.style = styleCss$q;
|
|
33781
33781
|
|
|
33782
|
-
const styleCss$
|
|
33782
|
+
const styleCss$p = ".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}";
|
|
33783
33783
|
|
|
33784
33784
|
const Notification = class {
|
|
33785
33785
|
constructor(hostRef) {
|
|
@@ -33837,9 +33837,9 @@ const Notification = class {
|
|
|
33837
33837
|
"notice": ["onUpdatedNotice"]
|
|
33838
33838
|
}; }
|
|
33839
33839
|
};
|
|
33840
|
-
Notification.style = styleCss$
|
|
33840
|
+
Notification.style = styleCss$p;
|
|
33841
33841
|
|
|
33842
|
-
const styleCss$
|
|
33842
|
+
const styleCss$o = ".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}";
|
|
33843
33843
|
|
|
33844
33844
|
const Notifier = class {
|
|
33845
33845
|
constructor(hostRef) {
|
|
@@ -33859,9 +33859,9 @@ const Notifier = class {
|
|
|
33859
33859
|
];
|
|
33860
33860
|
}
|
|
33861
33861
|
};
|
|
33862
|
-
Notifier.style = styleCss$
|
|
33862
|
+
Notifier.style = styleCss$o;
|
|
33863
33863
|
|
|
33864
|
-
const styleCss$
|
|
33864
|
+
const styleCss$n = ":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}";
|
|
33865
33865
|
|
|
33866
33866
|
const SmoothlyOption = class {
|
|
33867
33867
|
constructor(hostRef) {
|
|
@@ -33895,9 +33895,9 @@ const SmoothlyOption = class {
|
|
|
33895
33895
|
}
|
|
33896
33896
|
get element() { return index.getElement(this); }
|
|
33897
33897
|
};
|
|
33898
|
-
SmoothlyOption.style = styleCss$
|
|
33898
|
+
SmoothlyOption.style = styleCss$n;
|
|
33899
33899
|
|
|
33900
|
-
const styleCss$
|
|
33900
|
+
const styleCss$m = ":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}";
|
|
33901
33901
|
|
|
33902
33902
|
const SmoothlyPicker = class {
|
|
33903
33903
|
constructor(hostRef) {
|
|
@@ -34075,9 +34075,9 @@ const SmoothlyPicker = class {
|
|
|
34075
34075
|
"isOpen": ["isOpenChangeHandler"]
|
|
34076
34076
|
}; }
|
|
34077
34077
|
};
|
|
34078
|
-
SmoothlyPicker.style = styleCss$
|
|
34078
|
+
SmoothlyPicker.style = styleCss$m;
|
|
34079
34079
|
|
|
34080
|
-
const styleCss$
|
|
34080
|
+
const styleCss$l = ".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}";
|
|
34081
34081
|
|
|
34082
34082
|
const SmoothlyPopup = class {
|
|
34083
34083
|
constructor(hostRef) {
|
|
@@ -34106,9 +34106,9 @@ const SmoothlyPopup = class {
|
|
|
34106
34106
|
return (index.h(index.Host, { style: Object.assign({}, this.cssVariables) }, index.h("content", { class: "pointer", onClick: () => this.onClick() }, index.h("slot", null)), index.h("div", { class: "background", onClick: () => this.onClick() }), index.h("div", { class: "arrow", onClick: () => this.onClick() }), index.h("aside", { ref: el => (this.aside = el) }, index.h("slot", { name: "popup" }))));
|
|
34107
34107
|
}
|
|
34108
34108
|
};
|
|
34109
|
-
SmoothlyPopup.style = styleCss$
|
|
34109
|
+
SmoothlyPopup.style = styleCss$l;
|
|
34110
34110
|
|
|
34111
|
-
const styleCss$
|
|
34111
|
+
const styleCss$k = ".sc-smoothly-quiet-h{opacity:0.5}";
|
|
34112
34112
|
|
|
34113
34113
|
const SmoothlyQuiet = class {
|
|
34114
34114
|
constructor(hostRef) {
|
|
@@ -34118,9 +34118,9 @@ const SmoothlyQuiet = class {
|
|
|
34118
34118
|
return (index.h(index.Host, { color: this.color }, index.h("slot", null)));
|
|
34119
34119
|
}
|
|
34120
34120
|
};
|
|
34121
|
-
SmoothlyQuiet.style = styleCss$
|
|
34121
|
+
SmoothlyQuiet.style = styleCss$k;
|
|
34122
34122
|
|
|
34123
|
-
const styleCss$
|
|
34123
|
+
const styleCss$j = ".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))}";
|
|
34124
34124
|
|
|
34125
34125
|
const SmoothlyRadio = class {
|
|
34126
34126
|
constructor(hostRef) {
|
|
@@ -34139,50 +34139,53 @@ const SmoothlyRadio = class {
|
|
|
34139
34139
|
];
|
|
34140
34140
|
}
|
|
34141
34141
|
};
|
|
34142
|
-
SmoothlyRadio.style = styleCss$
|
|
34142
|
+
SmoothlyRadio.style = styleCss$j;
|
|
34143
34143
|
|
|
34144
|
-
const styleCss$
|
|
34144
|
+
const styleCss$i = ".sc-smoothly-radio-button-h{display:block}";
|
|
34145
34145
|
|
|
34146
34146
|
const SmoothlyRadioButton = class {
|
|
34147
34147
|
constructor(hostRef) {
|
|
34148
34148
|
index.registerInstance(this, hostRef);
|
|
34149
|
+
this.radioButtonSelected = index.createEvent(this, "radioButtonSelected", 7);
|
|
34150
|
+
this.decoration = "radio";
|
|
34149
34151
|
}
|
|
34150
34152
|
radioSelectHandler(event) {
|
|
34151
|
-
var _a;
|
|
34152
|
-
(_a = this.active) === null || _a === void 0 ? void 0 : _a.
|
|
34153
|
-
|
|
34154
|
-
|
|
34155
|
-
|
|
34153
|
+
var _a, _b;
|
|
34154
|
+
if (this.deselectable || ((_a = this.active) === null || _a === void 0 ? void 0 : _a.value) != event.detail.value) {
|
|
34155
|
+
(_b = this.active) === null || _b === void 0 ? void 0 : _b.select(false);
|
|
34156
|
+
this.active = event.detail;
|
|
34157
|
+
this.radioButtonSelected.emit((this.value = this.active.selected ? event.detail.value : undefined));
|
|
34158
|
+
this.active.select(this.active.selected);
|
|
34159
|
+
}
|
|
34156
34160
|
}
|
|
34157
34161
|
render() {
|
|
34158
34162
|
return (index.h(index.Host, null, index.h("slot", null)));
|
|
34159
34163
|
}
|
|
34160
34164
|
};
|
|
34161
|
-
SmoothlyRadioButton.style = styleCss$
|
|
34165
|
+
SmoothlyRadioButton.style = styleCss$i;
|
|
34162
34166
|
|
|
34163
|
-
const styleCss$
|
|
34167
|
+
const styleCss$h = "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}";
|
|
34164
34168
|
|
|
34165
34169
|
const SmoothlyRadioButtonItem = class {
|
|
34166
34170
|
constructor(hostRef) {
|
|
34167
34171
|
index.registerInstance(this, hostRef);
|
|
34168
|
-
this.
|
|
34169
|
-
this.expansion = false;
|
|
34172
|
+
this.radioItemSelectInternal = index.createEvent(this, "radioItemSelectInternal", 7);
|
|
34170
34173
|
}
|
|
34171
34174
|
componentWillLoad() {
|
|
34172
34175
|
this.select(this.selected);
|
|
34173
34176
|
}
|
|
34174
34177
|
select(selected = false) {
|
|
34175
|
-
this.
|
|
34178
|
+
this.radioItemSelectInternal.emit({
|
|
34176
34179
|
value: this.value,
|
|
34177
34180
|
selected,
|
|
34178
34181
|
select: s => (this.selected = s),
|
|
34179
34182
|
});
|
|
34180
34183
|
}
|
|
34181
34184
|
render() {
|
|
34182
|
-
return (index.h(index.Host, null, index.h("header", { onClick: () => this.select(!this.selected) }, index.h("smoothly-icon", { color: this.selected ? "success" : "medium", fill: "solid", name: this.selected ? "checkmark-circle" : "ellipse-outline", size: "tiny", toolTip: "Select" }), index.h("slot", null)
|
|
34185
|
+
return (index.h(index.Host, null, index.h("header", { onClick: () => this.select(!this.selected) }, index.h("smoothly-icon", { color: this.selected ? "success" : "medium", fill: "solid", name: this.selected ? "checkmark-circle" : "ellipse-outline", size: "tiny", toolTip: "Select" }), index.h("slot", null), index.h("slot", { name: "end" })), index.h("slot", { name: "expansion" })));
|
|
34183
34186
|
}
|
|
34184
34187
|
};
|
|
34185
|
-
SmoothlyRadioButtonItem.style = styleCss$
|
|
34188
|
+
SmoothlyRadioButtonItem.style = styleCss$h;
|
|
34186
34189
|
|
|
34187
34190
|
const SmoothlyRoom = class {
|
|
34188
34191
|
constructor(hostRef) {
|
|
@@ -34193,7 +34196,7 @@ const SmoothlyRoom = class {
|
|
|
34193
34196
|
}
|
|
34194
34197
|
};
|
|
34195
34198
|
|
|
34196
|
-
const styleCss$
|
|
34199
|
+
const styleCss$g = ".sc-smoothly-select-h{display:block}[hidden].sc-smoothly-select-h{display:none}select.sc-smoothly-select{min-width:1.5em;padding-top:0.5em;border:none;-webkit-appearance:none;background-color:rgb(var(--smoothly-color));padding:0.3em}select.sc-smoothly-select>option.sc-smoothly-select{background-color:inherit}select.sc-smoothly-select:focus{outline:none}";
|
|
34197
34200
|
|
|
34198
34201
|
const SmoothlySelect = class {
|
|
34199
34202
|
constructor(hostRef) {
|
|
@@ -34215,9 +34218,9 @@ const SmoothlySelect = class {
|
|
|
34215
34218
|
];
|
|
34216
34219
|
}
|
|
34217
34220
|
};
|
|
34218
|
-
SmoothlySelect.style = styleCss$
|
|
34221
|
+
SmoothlySelect.style = styleCss$g;
|
|
34219
34222
|
|
|
34220
|
-
const styleCss$
|
|
34223
|
+
const styleCss$f = ".sc-smoothly-select-demo-h{display:block}[hidden].sc-smoothly-select-demo-h{display:none}button.sc-smoothly-select-demo:focus{outline:none}smoothly-selector.sc-smoothly-select-demo{outline:none}";
|
|
34221
34224
|
|
|
34222
34225
|
const SmoothlySelectDemo = class {
|
|
34223
34226
|
constructor(hostRef) {
|
|
@@ -34304,9 +34307,9 @@ const SmoothlySelectDemo = class {
|
|
|
34304
34307
|
];
|
|
34305
34308
|
}
|
|
34306
34309
|
};
|
|
34307
|
-
SmoothlySelectDemo.style = styleCss$
|
|
34310
|
+
SmoothlySelectDemo.style = styleCss$f;
|
|
34308
34311
|
|
|
34309
|
-
const styleCss$
|
|
34312
|
+
const styleCss$e = ".sc-smoothly-selector-h{position:relative;height:100%}.sc-smoothly-selector-h>main.sc-smoothly-selector,.sc-smoothly-selector-h>main.sc-smoothly-selector>*.sc-smoothly-selector{height:100%;display:flex;align-items:center}.sc-smoothly-selector-h>div.sc-smoothly-selector>nav.sc-smoothly-selector{display:flex;flex-direction:column;position:absolute;z-index:10}.sc-smoothly-selector-h>aside.sc-smoothly-selector{position:absolute;top:0;left:5em;z-index:10;background-color:rgb(var(--smoothly-tertiary-color));color:rgb(var(--smoothly-tertiary-contrast));height:1.25rem;border-radius:0.3rem;padding:0.3rem;display:flex;align-items:center}.missing.sc-smoothly-selector-h>aside.sc-smoothly-selector{background-color:rgb(var(--smoothly-warning-color));color:rgb(var(--smoothly-warning-contast))}.hidden.sc-smoothly-selector{display:none}.sc-smoothly-selector-h>section.sc-smoothly-selector{position:fixed;top:0px;left:0px;width:100vw;height:100vh;z-index:10}";
|
|
34310
34313
|
|
|
34311
34314
|
const Selector = class {
|
|
34312
34315
|
constructor(hostRef) {
|
|
@@ -34416,9 +34419,9 @@ function isItem(value) {
|
|
|
34416
34419
|
(typeof value.selected == "boolean" || value.selected == undefined) &&
|
|
34417
34420
|
typeof value.filter == "function");
|
|
34418
34421
|
}
|
|
34419
|
-
Selector.style = styleCss$
|
|
34422
|
+
Selector.style = styleCss$e;
|
|
34420
34423
|
|
|
34421
|
-
const styleCss$
|
|
34424
|
+
const styleCss$d = ".sc-smoothly-skeleton-h{display:block;height:1rem}.sc-smoothly-skeleton-h::before{content:\"\";display:block;width:var(--width);height:100%;border-radius:0.4rem;background-image:linear-gradient(90deg, rgb(var(--color, var(--smoothly-dark-color))) 0, transparent 2.5rem, rgb(var(--color, var(--smoothly-dark-color))) 5rem);background-size:calc(var(--distance) + 5rem);animation-duration:var(--period, 1.6s);animation-iteration-count:infinite;animation-timing-function:linear;animation-name:shine-lines-left}@keyframes shine-lines-left{0%{background-position:-5rem}40%,100%{background-position:var(--distance)}}[align=center].sc-smoothly-skeleton-h::before{margin:0 auto;animation-name:shine-lines-center}@keyframes shine-lines-center{0%{background-position:calc((var(--width) - var(--distance)) / 2 - 5rem)}40%,100%{background-position:calc(var(--width) + (var(--distance) - var(--width)) / 2)}}[align=right].sc-smoothly-skeleton-h::before{margin:0;margin-left:auto;animation-name:shine-lines-right}@keyframes shine-lines-right{0%{background-position:calc(var(--width) - var(--distance) - 5rem)}40%,100%{background-position:var(--width)}}";
|
|
34422
34425
|
|
|
34423
34426
|
const SmoothlySkeleton = class {
|
|
34424
34427
|
constructor(hostRef) {
|
|
@@ -34436,9 +34439,9 @@ const SmoothlySkeleton = class {
|
|
|
34436
34439
|
return index.h(index.Host, { style: cssVariables });
|
|
34437
34440
|
}
|
|
34438
34441
|
};
|
|
34439
|
-
SmoothlySkeleton.style = styleCss$
|
|
34442
|
+
SmoothlySkeleton.style = styleCss$d;
|
|
34440
34443
|
|
|
34441
|
-
const styleCss$
|
|
34444
|
+
const styleCss$c = ".sc-smoothly-spinner-h:not([active]){display:none}[hidden].sc-smoothly-spinner-h{display:none}.sc-smoothly-spinner-h{display:block;stroke:rgb(var(--spinner-color, var(--smoothly-primary-tint)));position:absolute;inset:0;width:100%;height:100%;background-color:rgba(var(--background-color, var(--smoothly-default-color)), var(--background-opacity, var(--smoothly-semitransparent, 0.8)))}.sc-smoothly-spinner-h svg.sc-smoothly-spinner{position:absolute;left:calc(50% - var(--size) / 2);top:calc(50% - var(--size) / 2);width:var(--size);animation:SPIN-SVG 1.4s linear infinite}.sc-smoothly-spinner-h svg.sc-smoothly-spinner circle.sc-smoothly-spinner{transform-origin:center;animation:SPIN-CIRCLE 1.4s ease-in-out infinite;stroke-dasharray:187;stroke-dashoffset:0}@keyframes SPIN-SVG{0%{transform:rotate(0deg)}100%{transform:rotate(270deg)}}@keyframes SPIN-CIRCLE{0%{stroke-dashoffset:187}50%{stroke-dashoffset:46.75;transform:rotate(135deg)}100%{stroke-dashoffset:187;transform:rotate(450deg)}}";
|
|
34442
34445
|
|
|
34443
34446
|
const SmoothlySpinner = class {
|
|
34444
34447
|
constructor(hostRef) {
|
|
@@ -34453,7 +34456,7 @@ const SmoothlySpinner = class {
|
|
|
34453
34456
|
} }, index.h("svg", { class: "spinner", viewBox: `0 0 ${60 + strokeWidth} ${60 + strokeWidth}`, xmlns: "http://www.w3.org/2000/svg" }, index.h("circle", { class: "path", fill: "none", "stroke-width": strokeWidth, "stroke-linecap": "round", cx: `${30 + strokeWidth / 2}`, cy: `${30 + strokeWidth / 2}`, r: "30" }))));
|
|
34454
34457
|
}
|
|
34455
34458
|
};
|
|
34456
|
-
SmoothlySpinner.style = styleCss$
|
|
34459
|
+
SmoothlySpinner.style = styleCss$c;
|
|
34457
34460
|
|
|
34458
34461
|
var Data;
|
|
34459
34462
|
(function (Data) {
|
|
@@ -34468,7 +34471,7 @@ var Data;
|
|
|
34468
34471
|
Data.deepen = deepen;
|
|
34469
34472
|
})(Data || (Data = {}));
|
|
34470
34473
|
|
|
34471
|
-
const styleCss$
|
|
34474
|
+
const styleCss$b = ".sc-smoothly-submit-h{display:block;border-width:1px;border-style:solid;border-radius:3px}[hidden].sc-smoothly-submit-h{display:none}[disabled].sc-smoothly-submit-h{opacity:0.5}button.sc-smoothly-submit{padding:0.2em 0.3em;font-size:110%;font-weight:400}[processing].sc-smoothly-submit-h{border-color:rgb(var(--smoothly-light-color))}[processing].sc-smoothly-submit-h>button.sc-smoothly-submit{color:rgb(var(--smoothly-light-contrast));background:rgb(var(--smoothly-light-color))}.sc-smoothly-submit-h:not([processing]):not([disabled]):hover,.sc-smoothly-submit-h:not([processing]):not([disabled]):focus,.sc-smoothly-submit-h:not([processing]):not([disabled]):active{border-color:rgb(var(--smoothly-submit-border))}[expand=fill].sc-smoothly-submit-h>button.sc-smoothly-submit,[expand=block].sc-smoothly-submit-h>button.sc-smoothly-submit{width:100%}[expand=fill].sc-smoothly-submit-h{border-left:none;border-right:none}";
|
|
34472
34475
|
|
|
34473
34476
|
const SmoothlySubmit = class {
|
|
34474
34477
|
constructor(hostRef) {
|
|
@@ -34519,7 +34522,41 @@ const SmoothlySubmit = class {
|
|
|
34519
34522
|
function hasNameAndValue(element) {
|
|
34520
34523
|
return (typeof element.name == "string" && typeof element.value == "string");
|
|
34521
34524
|
}
|
|
34522
|
-
SmoothlySubmit.style = styleCss$
|
|
34525
|
+
SmoothlySubmit.style = styleCss$b;
|
|
34526
|
+
|
|
34527
|
+
const styleCss$a = ".sc-smoothly-svg-h{display:block;min-width:var(--size-width);min-height:var(--size-height);background-color:rgb(var(--color))}object.sc-smoothly-svg{min-width:var(--size-width);min-height:var(--size-height);background-color:rgb(var(--color))}";
|
|
34528
|
+
|
|
34529
|
+
const SmoothlySvg = class {
|
|
34530
|
+
constructor(hostRef) {
|
|
34531
|
+
index.registerInstance(this, hostRef);
|
|
34532
|
+
this.defaultSizes = {
|
|
34533
|
+
large: { height: "50rem", width: "50rem" },
|
|
34534
|
+
medium: { height: "30rem", width: "30rem" },
|
|
34535
|
+
small: { height: "10rem", width: "10rem" },
|
|
34536
|
+
tiny: { height: "5rem", width: "5rem" },
|
|
34537
|
+
};
|
|
34538
|
+
}
|
|
34539
|
+
render() {
|
|
34540
|
+
const height = this.size
|
|
34541
|
+
? typeof this.size == "object"
|
|
34542
|
+
? this.size.height
|
|
34543
|
+
: this.defaultSizes[this.size].height
|
|
34544
|
+
: "10rem";
|
|
34545
|
+
const width = this.size
|
|
34546
|
+
? typeof this.size == "object"
|
|
34547
|
+
? this.size.width
|
|
34548
|
+
: this.defaultSizes[this.size].width
|
|
34549
|
+
: "10rem";
|
|
34550
|
+
return (index.h(index.Host, { style: {
|
|
34551
|
+
"min-height": height,
|
|
34552
|
+
"min-width": width,
|
|
34553
|
+
"--size-height": height,
|
|
34554
|
+
"--size-width": width,
|
|
34555
|
+
"--color": this.color,
|
|
34556
|
+
} }, index.h("object", { height: height, width: width, type: "image/svg+xml", data: this.url })));
|
|
34557
|
+
}
|
|
34558
|
+
};
|
|
34559
|
+
SmoothlySvg.style = styleCss$a;
|
|
34523
34560
|
|
|
34524
34561
|
const styleCss$9 = "[open].sc-smoothly-tab-h{border-bottom:3px solid rgb(var(--smoothly-primary-color));box-sizing:border-box;margin-bottom:-3px}.hide.sc-smoothly-tab{display:none}label.sc-smoothly-tab{display:block;padding:.5rem;background-color:transparent;width:auto}";
|
|
34525
34562
|
|
|
@@ -34817,6 +34854,7 @@ exports.smoothly_selector = Selector;
|
|
|
34817
34854
|
exports.smoothly_skeleton = SmoothlySkeleton;
|
|
34818
34855
|
exports.smoothly_spinner = SmoothlySpinner;
|
|
34819
34856
|
exports.smoothly_submit = SmoothlySubmit;
|
|
34857
|
+
exports.smoothly_svg = SmoothlySvg;
|
|
34820
34858
|
exports.smoothly_tab = SmoothlyTab;
|
|
34821
34859
|
exports.smoothly_tab_switch = SmoothlyTabSwitch;
|
|
34822
34860
|
exports.smoothly_table = Table;
|