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
|
@@ -3,7 +3,7 @@ import { r as redirect, A as App, N as Notice } from './index-1d438ba2.js';
|
|
|
3
3
|
import { T as Trigger, M as Message } from './Trigger-327e506e.js';
|
|
4
4
|
import './GoogleFont-8474516b.js';
|
|
5
5
|
|
|
6
|
-
const styleCss$
|
|
6
|
+
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}";
|
|
7
7
|
|
|
8
8
|
const SmoothlyAccordion = class {
|
|
9
9
|
constructor(hostRef) {
|
|
@@ -49,9 +49,9 @@ const SmoothlyAccordion = class {
|
|
|
49
49
|
"value": ["valueChanged"]
|
|
50
50
|
}; }
|
|
51
51
|
};
|
|
52
|
-
SmoothlyAccordion.style = styleCss$
|
|
52
|
+
SmoothlyAccordion.style = styleCss$J;
|
|
53
53
|
|
|
54
|
-
const styleCss$
|
|
54
|
+
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))}";
|
|
55
55
|
|
|
56
56
|
const SmoothlyAccordionItem = class {
|
|
57
57
|
constructor(hostRef) {
|
|
@@ -96,9 +96,9 @@ const SmoothlyAccordionItem = class {
|
|
|
96
96
|
"open": ["openChanged"]
|
|
97
97
|
}; }
|
|
98
98
|
};
|
|
99
|
-
SmoothlyAccordionItem.style = styleCss$
|
|
99
|
+
SmoothlyAccordionItem.style = styleCss$I;
|
|
100
100
|
|
|
101
|
-
const styleCss$
|
|
101
|
+
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}";
|
|
102
102
|
|
|
103
103
|
const SmoothlyApp = class {
|
|
104
104
|
constructor(hostRef) {
|
|
@@ -108,7 +108,7 @@ const SmoothlyApp = class {
|
|
|
108
108
|
return (h("smoothly-notifier", null, h("slot", null)));
|
|
109
109
|
}
|
|
110
110
|
};
|
|
111
|
-
SmoothlyApp.style = styleCss$
|
|
111
|
+
SmoothlyApp.style = styleCss$H;
|
|
112
112
|
|
|
113
113
|
const SmoothlyAppDemo = class {
|
|
114
114
|
constructor(hostRef) {
|
|
@@ -135,7 +135,7 @@ const SmoothlyAppDemo = class {
|
|
|
135
135
|
}
|
|
136
136
|
};
|
|
137
137
|
|
|
138
|
-
const styleCss$
|
|
138
|
+
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}";
|
|
139
139
|
|
|
140
140
|
const SmoothlyBacktotop = class {
|
|
141
141
|
constructor(hostRef) {
|
|
@@ -163,9 +163,9 @@ const SmoothlyBacktotop = class {
|
|
|
163
163
|
}) }, h("smoothly-icon", { name: "chevron-up-outline" })));
|
|
164
164
|
}
|
|
165
165
|
};
|
|
166
|
-
SmoothlyBacktotop.style = styleCss$
|
|
166
|
+
SmoothlyBacktotop.style = styleCss$G;
|
|
167
167
|
|
|
168
|
-
const styleCss$
|
|
168
|
+
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}";
|
|
169
169
|
|
|
170
170
|
const SmoothlyButton = class {
|
|
171
171
|
constructor(hostRef) {
|
|
@@ -186,7 +186,7 @@ const SmoothlyButton = class {
|
|
|
186
186
|
return result;
|
|
187
187
|
}
|
|
188
188
|
};
|
|
189
|
-
SmoothlyButton.style = styleCss$
|
|
189
|
+
SmoothlyButton.style = styleCss$F;
|
|
190
190
|
|
|
191
191
|
var CallingCode$1;
|
|
192
192
|
(function (CallingCode) {
|
|
@@ -6306,7 +6306,7 @@ function years(current) {
|
|
|
6306
6306
|
return result;
|
|
6307
6307
|
}
|
|
6308
6308
|
|
|
6309
|
-
const styleCss$
|
|
6309
|
+
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)}";
|
|
6310
6310
|
|
|
6311
6311
|
const Calendar = class {
|
|
6312
6312
|
constructor(hostRef) {
|
|
@@ -6389,7 +6389,7 @@ const Calendar = class {
|
|
|
6389
6389
|
"end": ["onEnd"]
|
|
6390
6390
|
}; }
|
|
6391
6391
|
};
|
|
6392
|
-
Calendar.style = styleCss$
|
|
6392
|
+
Calendar.style = styleCss$E;
|
|
6393
6393
|
|
|
6394
6394
|
var CallingCode;
|
|
6395
6395
|
(function (CallingCode) {
|
|
@@ -12329,7 +12329,7 @@ function create(language) {
|
|
|
12329
12329
|
}, language);
|
|
12330
12330
|
}
|
|
12331
12331
|
|
|
12332
|
-
const styleCss$
|
|
12332
|
+
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)}";
|
|
12333
12333
|
|
|
12334
12334
|
const SmoothlyCheckbox = class {
|
|
12335
12335
|
constructor(hostRef) {
|
|
@@ -12356,9 +12356,9 @@ const SmoothlyCheckbox = class {
|
|
|
12356
12356
|
}
|
|
12357
12357
|
get element() { return getElement(this); }
|
|
12358
12358
|
};
|
|
12359
|
-
SmoothlyCheckbox.style = styleCss$
|
|
12359
|
+
SmoothlyCheckbox.style = styleCss$D;
|
|
12360
12360
|
|
|
12361
|
-
const styleCss$
|
|
12361
|
+
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}";
|
|
12362
12362
|
|
|
12363
12363
|
const SmoothlyDialog = class {
|
|
12364
12364
|
constructor(hostRef) {
|
|
@@ -12385,7 +12385,7 @@ const SmoothlyDialog = class {
|
|
|
12385
12385
|
}
|
|
12386
12386
|
render() { return h(Host, this.hostData(), this.__stencil_render()); }
|
|
12387
12387
|
};
|
|
12388
|
-
SmoothlyDialog.style = styleCss$
|
|
12388
|
+
SmoothlyDialog.style = styleCss$C;
|
|
12389
12389
|
|
|
12390
12390
|
const SmoothlyDialogDemo = class {
|
|
12391
12391
|
constructor(hostRef) {
|
|
@@ -32606,7 +32606,7 @@ Object.defineProperty(exports, "StateEditor", { enumerable: true, get: function
|
|
|
32606
32606
|
//# sourceMappingURL=index.js.map
|
|
32607
32607
|
});
|
|
32608
32608
|
|
|
32609
|
-
const styleCss$
|
|
32609
|
+
const styleCss$B = ".sc-smoothly-display-h{display:block}[hidden].sc-smoothly-display-h{display:none}";
|
|
32610
32610
|
|
|
32611
32611
|
const SmoothlyDisplay = class {
|
|
32612
32612
|
constructor(hostRef) {
|
|
@@ -32648,9 +32648,9 @@ function getLocale$1() {
|
|
|
32648
32648
|
const result = navigator.language;
|
|
32649
32649
|
return Locale$1.is(result) ? result : Language$1.is(result) ? Locale$1.toLocale(result) : undefined;
|
|
32650
32650
|
}
|
|
32651
|
-
SmoothlyDisplay.style = styleCss$
|
|
32651
|
+
SmoothlyDisplay.style = styleCss$B;
|
|
32652
32652
|
|
|
32653
|
-
const styleCss$
|
|
32653
|
+
const styleCss$A = ".sc-smoothly-display-amount-h{display:block}[hidden].sc-smoothly-display-amount-h{display:none}";
|
|
32654
32654
|
|
|
32655
32655
|
const SmoothlyDisplayAmount = class {
|
|
32656
32656
|
constructor(hostRef) {
|
|
@@ -32699,9 +32699,9 @@ const SmoothlyDisplayAmount = class {
|
|
|
32699
32699
|
];
|
|
32700
32700
|
}
|
|
32701
32701
|
};
|
|
32702
|
-
SmoothlyDisplayAmount.style = styleCss$
|
|
32702
|
+
SmoothlyDisplayAmount.style = styleCss$A;
|
|
32703
32703
|
|
|
32704
|
-
const styleCss$
|
|
32704
|
+
const styleCss$z = ".sc-smoothly-display-date-time-h{display:block}[hidden].sc-smoothly-display-date-time-h{display:none}";
|
|
32705
32705
|
|
|
32706
32706
|
const SmoothlyDisplayDateTime = class {
|
|
32707
32707
|
constructor(hostRef) {
|
|
@@ -32715,7 +32715,7 @@ const SmoothlyDisplayDateTime = class {
|
|
|
32715
32715
|
return [datetime[0], " ", datetime[1]];
|
|
32716
32716
|
}
|
|
32717
32717
|
};
|
|
32718
|
-
SmoothlyDisplayDateTime.style = styleCss$
|
|
32718
|
+
SmoothlyDisplayDateTime.style = styleCss$z;
|
|
32719
32719
|
|
|
32720
32720
|
const SmoothlyDisplayDemo = class {
|
|
32721
32721
|
constructor(hostRef) {
|
|
@@ -32728,12 +32728,12 @@ const SmoothlyDisplayDemo = class {
|
|
|
32728
32728
|
}
|
|
32729
32729
|
render() {
|
|
32730
32730
|
return [
|
|
32731
|
-
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")),
|
|
32731
|
+
h("main", null, h("smoothly-popup", null, h("div", null, "Popup, click me"), h("div", { color: "dark", slot: "popup" }, "1 line popup")), h("smoothly-display-date-time", { datetime: "2019-08-15T08:08:17.65Z" }), h("dl", null, h("dt", null, "text"), h("dd", null, h("smoothly-display", { type: "text", value: "text" })), h("dt", null, "postal code"), h("dd", null, h("smoothly-display", { type: "postal-code", value: "752 31" })), h("dt", null, "password"), h("dd", null, h("smoothly-display", { type: "password", value: "password" })), h("dt", null, "email"), h("dd", null, h("smoothly-display", { type: "email", value: "test@example.com" })), h("dt", null, "price"), h("dd", null, h("smoothly-display", { type: "price", value: "13.37", currency: "SEK" })), h("dt", null, "display amount without decimals"), h("dd", null, h("smoothly-display-amount", { amount: 200, currency: "SEK", toInteger: true })), h("dt", null, "display amount with decimals if they are set, otherwise no decimal"), h("dd", null, h("smoothly-display-amount", { amount: 200.20, currency: "SEK", toInteger: true })), h("dt", null, "display amount with decimals"), h("dd", null, h("smoothly-display-amount", { amount: 200.20, currency: "SEK" })), h("dt", null, "percent"), h("dd", null, h("smoothly-display", { type: "percent", value: "42" })), h("dt", null, "phone"), h("dd", null, h("smoothly-display", { type: "phone", value: "0101881108" })), h("dt", null, "card number"), h("dd", null, h("smoothly-display", { type: "card-number", value: "4111111111111111" })), h("dt", null, "card expires"), h("dd", null, h("smoothly-display", { type: "card-expires", value: "7/22" })), h("dt", null, "card csc"), h("dd", null, h("smoothly-display", { type: "card-csc", value: "987" })), h("dt", null, "date"), h("dd", null, h("smoothly-display", { type: "date", value: "2022-07-07" })), h("dt", null, "date time"), h("dd", null, h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "short", day: "numeric", hour: "numeric", minute: "numeric", second: "numeric" }, value: "2022-07-07T02:02:02Z" })), h("dd", null, h("smoothly-display", { type: "date-time", format: { year: "2-digit", month: "long", day: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit" }, value: "2022-07-07T02:02:02Z" })), h("dd", null, h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "2-digit", day: "2-digit", hour: "numeric", minute: "numeric", second: "numeric" }, value: "2022-07-07T12:22:24Z" })), h("dd", null, h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "numeric", day: "numeric", hour: "numeric", minute: "numeric", second: "numeric" }, value: "2022-07-07T12:22:24Z" })), h("dd", null, h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "short", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), h("dd", null, h("smoothly-display", { type: "date-time", format: { year: "2-digit", month: "numeric", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), h("dd", null, h("smoothly-display", { type: "date-time", format: { year: "2-digit", month: "numeric", day: "numeric", hour: "2-digit", minute: "2-digit", second: "2-digit", timeZone: "+01:00" }, value: "2022-07-07T12:15Z" })), h("dt", null, "Deprecated display date time"), h("dd", null, h("smoothly-display-date-time", { datetime: "2019-01-31T20:01:34" })), h("dt", null, "Display amount"), h("dd", null, h("smoothly-display-amount", { currency: "SEK", amount: "1289.5" })), h("dt", null, "Quiet"), h("dd", null, h("smoothly-quiet", { color: "dark" }, "-"))), h("smoothly-skeleton", { period: 3, distance: "20rem", width: "20rem" }), h("smoothly-skeleton", { period: 3, distance: "20rem", color: "200,200,255" }), h("smoothly-skeleton", { period: 3, distance: "20rem", color: "var(--smoothly-warning-color)" }), h("smoothly-skeleton", { period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem", width: "20rem" }), h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem", width: "20rem" }), h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }), h("smoothly-urlencoded", { data: "hej=hopp&tjena=moss" }), h("div", { style: { display: "flex", justifyContent: "space-between" } }, h("smoothly-popup", { direction: "down" }, "Click for popup", h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup stuff that has a lot of text")), h("smoothly-popup", { direction: "down" }, "Click for popup", h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup with a bunch of text."))), h("p", null, "Test of diffrent kinds of notifier:"), h("button", { onClick: () => this.noticeWarning(Notice.warn("This is a test warning notice.")) }, "warning"), h("button", { onClick: () => this.noticeWarning(Notice.succeded("This is a test success notice.")) }, "success"), h("button", { onClick: () => this.noticeWarning(Notice.failed("This is a test danger notice.")) }, "danger"), h("button", { onClick: () => this.noticeWarning(Notice.execute("This is a test execute notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "execute"), h("button", { onClick: () => this.noticeWarning(Notice.delay("This is a test delay notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "delay"), h("div", { style: { position: "relative", height: "10em" } }, "Large Spinner", h("smoothly-spinner", { active: true, size: "large", style: { "--background-color": "255,255,255", "--background-opacity": "0.2", "--spinner-color": "0,130,0", } })), h("div", { style: { position: "relative", height: "10em" } }, "Medium Spinner", h("smoothly-spinner", { active: true, size: "medium" })), h("div", { style: { position: "relative", height: "10em" } }, "Small Spinner", h("smoothly-spinner", { active: true, size: "small" })), h("div", { style: { position: "absolute", left: "500px", top: "150px" } }, h("smoothly-svg", { url: "https://theme.payfunc.com/intergiro/animated-logo.svg" }))),
|
|
32732
32732
|
];
|
|
32733
32733
|
}
|
|
32734
32734
|
};
|
|
32735
32735
|
|
|
32736
|
-
const styleCss$
|
|
32736
|
+
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}";
|
|
32737
32737
|
|
|
32738
32738
|
const SmoothlyFrame = class {
|
|
32739
32739
|
constructor(hostRef) {
|
|
@@ -32772,9 +32772,9 @@ const SmoothlyFrame = class {
|
|
|
32772
32772
|
}
|
|
32773
32773
|
get element() { return getElement(this); }
|
|
32774
32774
|
};
|
|
32775
|
-
SmoothlyFrame.style = styleCss$
|
|
32775
|
+
SmoothlyFrame.style = styleCss$y;
|
|
32776
32776
|
|
|
32777
|
-
const styleCss$
|
|
32777
|
+
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}";
|
|
32778
32778
|
|
|
32779
32779
|
const SmoothlyIcon = class {
|
|
32780
32780
|
constructor(hostRef) {
|
|
@@ -32817,9 +32817,9 @@ const SmoothlyIcon = class {
|
|
|
32817
32817
|
render() { return h(Host, this.hostData(), this.__stencil_render()); }
|
|
32818
32818
|
};
|
|
32819
32819
|
SmoothlyIcon.cache = {};
|
|
32820
|
-
SmoothlyIcon.style = styleCss$
|
|
32820
|
+
SmoothlyIcon.style = styleCss$x;
|
|
32821
32821
|
|
|
32822
|
-
const styleCss$
|
|
32822
|
+
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}";
|
|
32823
32823
|
|
|
32824
32824
|
const SmoothlyIconDemo = class {
|
|
32825
32825
|
constructor(hostRef) {
|
|
@@ -33301,9 +33301,9 @@ const SmoothlyIconDemo = class {
|
|
|
33301
33301
|
];
|
|
33302
33302
|
}
|
|
33303
33303
|
};
|
|
33304
|
-
SmoothlyIconDemo.style = styleCss$
|
|
33304
|
+
SmoothlyIconDemo.style = styleCss$w;
|
|
33305
33305
|
|
|
33306
|
-
const styleCss$
|
|
33306
|
+
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)))}";
|
|
33307
33307
|
|
|
33308
33308
|
const SmoothlyInput = class {
|
|
33309
33309
|
constructor(hostRef) {
|
|
@@ -33507,9 +33507,9 @@ function getLocale() {
|
|
|
33507
33507
|
const result = navigator.language;
|
|
33508
33508
|
return Locale$1.is(result) ? result : Language$1.is(result) ? Locale$1.toLocale(result) : undefined;
|
|
33509
33509
|
}
|
|
33510
|
-
SmoothlyInput.style = styleCss$
|
|
33510
|
+
SmoothlyInput.style = styleCss$v;
|
|
33511
33511
|
|
|
33512
|
-
const styleCss$
|
|
33512
|
+
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))}";
|
|
33513
33513
|
|
|
33514
33514
|
const InputDate = class {
|
|
33515
33515
|
constructor(hostRef) {
|
|
@@ -33542,9 +33542,9 @@ const InputDate = class {
|
|
|
33542
33542
|
"value": ["onStart"]
|
|
33543
33543
|
}; }
|
|
33544
33544
|
};
|
|
33545
|
-
InputDate.style = styleCss$
|
|
33545
|
+
InputDate.style = styleCss$u;
|
|
33546
33546
|
|
|
33547
|
-
const styleCss$
|
|
33547
|
+
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}";
|
|
33548
33548
|
|
|
33549
33549
|
const InputDateRange = class {
|
|
33550
33550
|
constructor(hostRef) {
|
|
@@ -33583,7 +33583,7 @@ const InputDateRange = class {
|
|
|
33583
33583
|
"value": ["onValue"]
|
|
33584
33584
|
}; }
|
|
33585
33585
|
};
|
|
33586
|
-
InputDateRange.style = styleCss$
|
|
33586
|
+
InputDateRange.style = styleCss$t;
|
|
33587
33587
|
|
|
33588
33588
|
const SmoothlyInputDemo = class {
|
|
33589
33589
|
constructor(hostRef) {
|
|
@@ -33591,13 +33591,13 @@ const SmoothlyInputDemo = class {
|
|
|
33591
33591
|
}
|
|
33592
33592
|
render() {
|
|
33593
33593
|
return [
|
|
33594
|
-
h("form", { action: "done", style: { position: "relative" } }, h("header", null, h("h5", null, "
|
|
33594
|
+
h("form", { action: "done", style: { position: "relative" } }, h("header", null, h("h5", null, "Form")), h("main", null, h("fieldset", null, h("h2", null, "Smoothly Iput"), h("h3", null, "Card"), h("smoothly-input", { type: "text", name: "name", readonly: true, value: "Readonly", onSmoothlyBlur: () => console.log("smoothly blur") }, "Readonly"), h("smoothly-input", { type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, "Name"), h("smoothly-input", { type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Name"), h("smoothly-input-date", null), h("smoothly-input", { type: "date", name: "date" }, "Date"), h("smoothly-input", { type: "date-time", name: "date-time" }, "Date-Time"), h("smoothly-input", { type: "divisor", name: "divisor" }, "Divisor"), h("smoothly-input", { type: "text", name: "street", value: "street" }, "Street"), h("smoothly-input", { type: "card-number", name: "card" }, "Card #"), h("smoothly-input", { type: "card-expires", name: "card", style: { width: "calc(60% - 2px)" } }, "Expires"), h("smoothly-input", { type: "card-csc", name: "card", style: { width: "calc(40% - 1px)", borderLeft: "none" } }, "CVV/CVC"), h("h3", null, "Contact"), h("smoothly-input", { type: "postal-code", name: "zip", style: { width: "calc(60% - 2px)" } }, "ZipCode"), h("smoothly-input", { type: "text", name: "testing" }, "Texttest"), h("smoothly-input", { type: "password", name: "password" }, "Password"), h("smoothly-input", { type: "email", name: "email" }, "Email"), h("smoothly-input", { type: "price", currency: "SEK", name: "price" }, "Price"), h("smoothly-input", { type: "percent", name: "percent" }, "Percent"), h("smoothly-input", { type: "phone", name: "phone" }, "Phone"), h("smoothly-input-date", null, "Date")), h("fieldset", null, h("h2", null, "Smoothly Radio"), h("h3", null, "Deselectable Radio List with button"), h("smoothly-radio-button", { deselectable: true, decoration: "button" }, h("smoothly-radio-button-item", { value: { some: "content", yes: "sir" } }, h("span", null, "Option 1"), h("span", { slot: "expansion" }, "Some description.")), h("smoothly-radio-button-item", { value: { some: "thing", yes: "miss" } }, h("span", null, "Option 2"), h("span", { slot: "expansion" }, "Some other description.")), h("smoothly-radio-button-item", { value: { some: "one", yes: "kid" } }, h("span", null, "Option 3"))), h("h3", null, "Radio List with button"), h("smoothly-radio-button", { decoration: "button" }, h("smoothly-radio-button-item", { value: { some: "content", yes: "sir" } }, h("span", null, "Option 1"), h("span", { slot: "expansion" }, "Some description.")), h("smoothly-radio-button-item", { value: { some: "thing", yes: "miss" } }, h("span", null, "Option 2"), h("span", { slot: "expansion" }, "Some other description.")), h("smoothly-radio-button-item", { value: { some: "one", yes: "kid" } }, h("span", null, "Option 3"))), h("h3", null, "Radio List without button"), h("smoothly-radio-button", null, h("smoothly-radio-button-item", { value: { some: "content", yes: "sir" } }, h("span", null, "Option 1"), h("span", { slot: "expansion" }, "Some description.")), h("smoothly-radio-button-item", { value: { some: "thing", yes: "miss" } }, h("span", null, "Option 2"), h("span", { slot: "expansion" }, "Some other description.")), h("smoothly-radio-button-item", { value: { some: "one", yes: "kid" } }, h("span", null, "Option 3"))), h("smoothly-radio", { name: "option", value: "1" }, "option 1"), h("smoothly-radio", { name: "option", value: "2", checked: true }, "option 2"), h("smoothly-radio", { name: "option", value: "3" }, "option 3")), h("fieldset", null, h("h2", null, "Smoothly Accordion"), h("smoothly-accordion", null, h("smoothly-accordion-item", { name: "A", open: true }, h("smoothly-radio", { name: "a", value: "1" }, "a 1"), h("smoothly-radio", { name: "a", value: "2", checked: true }, "a 2"), h("smoothly-radio", { name: "a", value: "3" }, "a 3")), h("smoothly-accordion-item", { name: "B" }, h("smoothly-radio", { name: "b", value: "1" }, "b 1"), h("smoothly-radio", { name: "b", value: "2" }, "b 2"), h("smoothly-radio", { name: "b", value: "3" }, "b 3")))), h("fieldset", null, h("h2", null, "Smoothly checkbox"), h("smoothly-checkbox", { selectAll: true, intermediate: true }), h("smoothly-checkbox", null), h("smoothly-checkbox", { disabled: true })), h("fieldset", null, h("h2", null, "Smoothly addresses"), h("smoothly-address-display", { value: '{ "countryCode": "SE", "street": "Korkstigen 2", "zipCode": "654 31", "city": "Fejksala" }' }), h("smoothly-address", { editable: false, value: '{ "countryCode": "SE", "street": "Stigv\u00E4gen 34", "zipCode": "123 45", "city": "Hobbiton" }' }), h("smoothly-addresses", { allowed: "billing delivery visit", editable: true, value: '{ "billing": { "countryCode": "SE", "street": "Rundslingan 3", "zipCode": "987 65", "city": "Klotby" }, "visit": { "countryCode": "SE", "street": "G\u00E5ngbanan 34", "zipCode": "543 21", "city": "Trasktr\u00E4sk" } }' }))), h("footer", null, h("smoothly-submit", { expand: "block", onSubmit: (e) => alert(e), color: "success" }, "Submit"), h("smoothly-trigger", { expand: "block", color: "success", onClick: (e) => console.log(e.detail) }, "Trigger"))),
|
|
33595
33595
|
h("smoothly-backtotop", null),
|
|
33596
33596
|
];
|
|
33597
33597
|
}
|
|
33598
33598
|
};
|
|
33599
33599
|
|
|
33600
|
-
const styleCss$
|
|
33600
|
+
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}";
|
|
33601
33601
|
|
|
33602
33602
|
const MonthSelector = class {
|
|
33603
33603
|
constructor(hostRef) {
|
|
@@ -33626,9 +33626,9 @@ const MonthSelector = class {
|
|
|
33626
33626
|
"value": ["onValueChanged"]
|
|
33627
33627
|
}; }
|
|
33628
33628
|
};
|
|
33629
|
-
MonthSelector.style = styleCss$
|
|
33629
|
+
MonthSelector.style = styleCss$s;
|
|
33630
33630
|
|
|
33631
|
-
const styleCss$
|
|
33631
|
+
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))}";
|
|
33632
33632
|
|
|
33633
33633
|
const Item = class {
|
|
33634
33634
|
constructor(hostRef) {
|
|
@@ -33662,9 +33662,9 @@ const Item = class {
|
|
|
33662
33662
|
"selected": ["onSelectedChanged"]
|
|
33663
33663
|
}; }
|
|
33664
33664
|
};
|
|
33665
|
-
Item.style = styleCss$
|
|
33665
|
+
Item.style = styleCss$r;
|
|
33666
33666
|
|
|
33667
|
-
const styleCss$
|
|
33667
|
+
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}";
|
|
33668
33668
|
|
|
33669
33669
|
const SmoothlyMenuOptions = class {
|
|
33670
33670
|
constructor(hostRef) {
|
|
@@ -33773,9 +33773,9 @@ const SmoothlyMenuOptions = class {
|
|
|
33773
33773
|
"options": ["optionsChangeHandler"]
|
|
33774
33774
|
}; }
|
|
33775
33775
|
};
|
|
33776
|
-
SmoothlyMenuOptions.style = styleCss$
|
|
33776
|
+
SmoothlyMenuOptions.style = styleCss$q;
|
|
33777
33777
|
|
|
33778
|
-
const styleCss$
|
|
33778
|
+
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}";
|
|
33779
33779
|
|
|
33780
33780
|
const Notification = class {
|
|
33781
33781
|
constructor(hostRef) {
|
|
@@ -33833,9 +33833,9 @@ const Notification = class {
|
|
|
33833
33833
|
"notice": ["onUpdatedNotice"]
|
|
33834
33834
|
}; }
|
|
33835
33835
|
};
|
|
33836
|
-
Notification.style = styleCss$
|
|
33836
|
+
Notification.style = styleCss$p;
|
|
33837
33837
|
|
|
33838
|
-
const styleCss$
|
|
33838
|
+
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}";
|
|
33839
33839
|
|
|
33840
33840
|
const Notifier = class {
|
|
33841
33841
|
constructor(hostRef) {
|
|
@@ -33855,9 +33855,9 @@ const Notifier = class {
|
|
|
33855
33855
|
];
|
|
33856
33856
|
}
|
|
33857
33857
|
};
|
|
33858
|
-
Notifier.style = styleCss$
|
|
33858
|
+
Notifier.style = styleCss$o;
|
|
33859
33859
|
|
|
33860
|
-
const styleCss$
|
|
33860
|
+
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}";
|
|
33861
33861
|
|
|
33862
33862
|
const SmoothlyOption = class {
|
|
33863
33863
|
constructor(hostRef) {
|
|
@@ -33891,9 +33891,9 @@ const SmoothlyOption = class {
|
|
|
33891
33891
|
}
|
|
33892
33892
|
get element() { return getElement(this); }
|
|
33893
33893
|
};
|
|
33894
|
-
SmoothlyOption.style = styleCss$
|
|
33894
|
+
SmoothlyOption.style = styleCss$n;
|
|
33895
33895
|
|
|
33896
|
-
const styleCss$
|
|
33896
|
+
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}";
|
|
33897
33897
|
|
|
33898
33898
|
const SmoothlyPicker = class {
|
|
33899
33899
|
constructor(hostRef) {
|
|
@@ -34071,9 +34071,9 @@ const SmoothlyPicker = class {
|
|
|
34071
34071
|
"isOpen": ["isOpenChangeHandler"]
|
|
34072
34072
|
}; }
|
|
34073
34073
|
};
|
|
34074
|
-
SmoothlyPicker.style = styleCss$
|
|
34074
|
+
SmoothlyPicker.style = styleCss$m;
|
|
34075
34075
|
|
|
34076
|
-
const styleCss$
|
|
34076
|
+
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}";
|
|
34077
34077
|
|
|
34078
34078
|
const SmoothlyPopup = class {
|
|
34079
34079
|
constructor(hostRef) {
|
|
@@ -34102,9 +34102,9 @@ const SmoothlyPopup = class {
|
|
|
34102
34102
|
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" }))));
|
|
34103
34103
|
}
|
|
34104
34104
|
};
|
|
34105
|
-
SmoothlyPopup.style = styleCss$
|
|
34105
|
+
SmoothlyPopup.style = styleCss$l;
|
|
34106
34106
|
|
|
34107
|
-
const styleCss$
|
|
34107
|
+
const styleCss$k = ".sc-smoothly-quiet-h{opacity:0.5}";
|
|
34108
34108
|
|
|
34109
34109
|
const SmoothlyQuiet = class {
|
|
34110
34110
|
constructor(hostRef) {
|
|
@@ -34114,9 +34114,9 @@ const SmoothlyQuiet = class {
|
|
|
34114
34114
|
return (h(Host, { color: this.color }, h("slot", null)));
|
|
34115
34115
|
}
|
|
34116
34116
|
};
|
|
34117
|
-
SmoothlyQuiet.style = styleCss$
|
|
34117
|
+
SmoothlyQuiet.style = styleCss$k;
|
|
34118
34118
|
|
|
34119
|
-
const styleCss$
|
|
34119
|
+
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))}";
|
|
34120
34120
|
|
|
34121
34121
|
const SmoothlyRadio = class {
|
|
34122
34122
|
constructor(hostRef) {
|
|
@@ -34135,50 +34135,53 @@ const SmoothlyRadio = class {
|
|
|
34135
34135
|
];
|
|
34136
34136
|
}
|
|
34137
34137
|
};
|
|
34138
|
-
SmoothlyRadio.style = styleCss$
|
|
34138
|
+
SmoothlyRadio.style = styleCss$j;
|
|
34139
34139
|
|
|
34140
|
-
const styleCss$
|
|
34140
|
+
const styleCss$i = ".sc-smoothly-radio-button-h{display:block}";
|
|
34141
34141
|
|
|
34142
34142
|
const SmoothlyRadioButton = class {
|
|
34143
34143
|
constructor(hostRef) {
|
|
34144
34144
|
registerInstance(this, hostRef);
|
|
34145
|
+
this.radioButtonSelected = createEvent(this, "radioButtonSelected", 7);
|
|
34146
|
+
this.decoration = "radio";
|
|
34145
34147
|
}
|
|
34146
34148
|
radioSelectHandler(event) {
|
|
34147
|
-
var _a;
|
|
34148
|
-
(_a = this.active) === null || _a === void 0 ? void 0 : _a.
|
|
34149
|
-
|
|
34150
|
-
|
|
34151
|
-
|
|
34149
|
+
var _a, _b;
|
|
34150
|
+
if (this.deselectable || ((_a = this.active) === null || _a === void 0 ? void 0 : _a.value) != event.detail.value) {
|
|
34151
|
+
(_b = this.active) === null || _b === void 0 ? void 0 : _b.select(false);
|
|
34152
|
+
this.active = event.detail;
|
|
34153
|
+
this.radioButtonSelected.emit((this.value = this.active.selected ? event.detail.value : undefined));
|
|
34154
|
+
this.active.select(this.active.selected);
|
|
34155
|
+
}
|
|
34152
34156
|
}
|
|
34153
34157
|
render() {
|
|
34154
34158
|
return (h(Host, null, h("slot", null)));
|
|
34155
34159
|
}
|
|
34156
34160
|
};
|
|
34157
|
-
SmoothlyRadioButton.style = styleCss$
|
|
34161
|
+
SmoothlyRadioButton.style = styleCss$i;
|
|
34158
34162
|
|
|
34159
|
-
const styleCss$
|
|
34163
|
+
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}";
|
|
34160
34164
|
|
|
34161
34165
|
const SmoothlyRadioButtonItem = class {
|
|
34162
34166
|
constructor(hostRef) {
|
|
34163
34167
|
registerInstance(this, hostRef);
|
|
34164
|
-
this.
|
|
34165
|
-
this.expansion = false;
|
|
34168
|
+
this.radioItemSelectInternal = createEvent(this, "radioItemSelectInternal", 7);
|
|
34166
34169
|
}
|
|
34167
34170
|
componentWillLoad() {
|
|
34168
34171
|
this.select(this.selected);
|
|
34169
34172
|
}
|
|
34170
34173
|
select(selected = false) {
|
|
34171
|
-
this.
|
|
34174
|
+
this.radioItemSelectInternal.emit({
|
|
34172
34175
|
value: this.value,
|
|
34173
34176
|
selected,
|
|
34174
34177
|
select: s => (this.selected = s),
|
|
34175
34178
|
});
|
|
34176
34179
|
}
|
|
34177
34180
|
render() {
|
|
34178
|
-
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)
|
|
34181
|
+
return (h(Host, null, h("header", { onClick: () => this.select(!this.selected) }, h("smoothly-icon", { color: this.selected ? "success" : "medium", fill: "solid", name: this.selected ? "checkmark-circle" : "ellipse-outline", size: "tiny", toolTip: "Select" }), h("slot", null), h("slot", { name: "end" })), h("slot", { name: "expansion" })));
|
|
34179
34182
|
}
|
|
34180
34183
|
};
|
|
34181
|
-
SmoothlyRadioButtonItem.style = styleCss$
|
|
34184
|
+
SmoothlyRadioButtonItem.style = styleCss$h;
|
|
34182
34185
|
|
|
34183
34186
|
const SmoothlyRoom = class {
|
|
34184
34187
|
constructor(hostRef) {
|
|
@@ -34189,7 +34192,7 @@ const SmoothlyRoom = class {
|
|
|
34189
34192
|
}
|
|
34190
34193
|
};
|
|
34191
34194
|
|
|
34192
|
-
const styleCss$
|
|
34195
|
+
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}";
|
|
34193
34196
|
|
|
34194
34197
|
const SmoothlySelect = class {
|
|
34195
34198
|
constructor(hostRef) {
|
|
@@ -34211,9 +34214,9 @@ const SmoothlySelect = class {
|
|
|
34211
34214
|
];
|
|
34212
34215
|
}
|
|
34213
34216
|
};
|
|
34214
|
-
SmoothlySelect.style = styleCss$
|
|
34217
|
+
SmoothlySelect.style = styleCss$g;
|
|
34215
34218
|
|
|
34216
|
-
const styleCss$
|
|
34219
|
+
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}";
|
|
34217
34220
|
|
|
34218
34221
|
const SmoothlySelectDemo = class {
|
|
34219
34222
|
constructor(hostRef) {
|
|
@@ -34300,9 +34303,9 @@ const SmoothlySelectDemo = class {
|
|
|
34300
34303
|
];
|
|
34301
34304
|
}
|
|
34302
34305
|
};
|
|
34303
|
-
SmoothlySelectDemo.style = styleCss$
|
|
34306
|
+
SmoothlySelectDemo.style = styleCss$f;
|
|
34304
34307
|
|
|
34305
|
-
const styleCss$
|
|
34308
|
+
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}";
|
|
34306
34309
|
|
|
34307
34310
|
const Selector = class {
|
|
34308
34311
|
constructor(hostRef) {
|
|
@@ -34412,9 +34415,9 @@ function isItem(value) {
|
|
|
34412
34415
|
(typeof value.selected == "boolean" || value.selected == undefined) &&
|
|
34413
34416
|
typeof value.filter == "function");
|
|
34414
34417
|
}
|
|
34415
|
-
Selector.style = styleCss$
|
|
34418
|
+
Selector.style = styleCss$e;
|
|
34416
34419
|
|
|
34417
|
-
const styleCss$
|
|
34420
|
+
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)}}";
|
|
34418
34421
|
|
|
34419
34422
|
const SmoothlySkeleton = class {
|
|
34420
34423
|
constructor(hostRef) {
|
|
@@ -34432,9 +34435,9 @@ const SmoothlySkeleton = class {
|
|
|
34432
34435
|
return h(Host, { style: cssVariables });
|
|
34433
34436
|
}
|
|
34434
34437
|
};
|
|
34435
|
-
SmoothlySkeleton.style = styleCss$
|
|
34438
|
+
SmoothlySkeleton.style = styleCss$d;
|
|
34436
34439
|
|
|
34437
|
-
const styleCss$
|
|
34440
|
+
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)}}";
|
|
34438
34441
|
|
|
34439
34442
|
const SmoothlySpinner = class {
|
|
34440
34443
|
constructor(hostRef) {
|
|
@@ -34449,7 +34452,7 @@ const SmoothlySpinner = class {
|
|
|
34449
34452
|
} }, h("svg", { class: "spinner", viewBox: `0 0 ${60 + strokeWidth} ${60 + strokeWidth}`, xmlns: "http://www.w3.org/2000/svg" }, h("circle", { class: "path", fill: "none", "stroke-width": strokeWidth, "stroke-linecap": "round", cx: `${30 + strokeWidth / 2}`, cy: `${30 + strokeWidth / 2}`, r: "30" }))));
|
|
34450
34453
|
}
|
|
34451
34454
|
};
|
|
34452
|
-
SmoothlySpinner.style = styleCss$
|
|
34455
|
+
SmoothlySpinner.style = styleCss$c;
|
|
34453
34456
|
|
|
34454
34457
|
var Data;
|
|
34455
34458
|
(function (Data) {
|
|
@@ -34464,7 +34467,7 @@ var Data;
|
|
|
34464
34467
|
Data.deepen = deepen;
|
|
34465
34468
|
})(Data || (Data = {}));
|
|
34466
34469
|
|
|
34467
|
-
const styleCss$
|
|
34470
|
+
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}";
|
|
34468
34471
|
|
|
34469
34472
|
const SmoothlySubmit = class {
|
|
34470
34473
|
constructor(hostRef) {
|
|
@@ -34515,7 +34518,41 @@ const SmoothlySubmit = class {
|
|
|
34515
34518
|
function hasNameAndValue(element) {
|
|
34516
34519
|
return (typeof element.name == "string" && typeof element.value == "string");
|
|
34517
34520
|
}
|
|
34518
|
-
SmoothlySubmit.style = styleCss$
|
|
34521
|
+
SmoothlySubmit.style = styleCss$b;
|
|
34522
|
+
|
|
34523
|
+
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))}";
|
|
34524
|
+
|
|
34525
|
+
const SmoothlySvg = class {
|
|
34526
|
+
constructor(hostRef) {
|
|
34527
|
+
registerInstance(this, hostRef);
|
|
34528
|
+
this.defaultSizes = {
|
|
34529
|
+
large: { height: "50rem", width: "50rem" },
|
|
34530
|
+
medium: { height: "30rem", width: "30rem" },
|
|
34531
|
+
small: { height: "10rem", width: "10rem" },
|
|
34532
|
+
tiny: { height: "5rem", width: "5rem" },
|
|
34533
|
+
};
|
|
34534
|
+
}
|
|
34535
|
+
render() {
|
|
34536
|
+
const height = this.size
|
|
34537
|
+
? typeof this.size == "object"
|
|
34538
|
+
? this.size.height
|
|
34539
|
+
: this.defaultSizes[this.size].height
|
|
34540
|
+
: "10rem";
|
|
34541
|
+
const width = this.size
|
|
34542
|
+
? typeof this.size == "object"
|
|
34543
|
+
? this.size.width
|
|
34544
|
+
: this.defaultSizes[this.size].width
|
|
34545
|
+
: "10rem";
|
|
34546
|
+
return (h(Host, { style: {
|
|
34547
|
+
"min-height": height,
|
|
34548
|
+
"min-width": width,
|
|
34549
|
+
"--size-height": height,
|
|
34550
|
+
"--size-width": width,
|
|
34551
|
+
"--color": this.color,
|
|
34552
|
+
} }, h("object", { height: height, width: width, type: "image/svg+xml", data: this.url })));
|
|
34553
|
+
}
|
|
34554
|
+
};
|
|
34555
|
+
SmoothlySvg.style = styleCss$a;
|
|
34519
34556
|
|
|
34520
34557
|
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}";
|
|
34521
34558
|
|
|
@@ -34773,4 +34810,4 @@ const Urlencoded = class {
|
|
|
34773
34810
|
}
|
|
34774
34811
|
};
|
|
34775
34812
|
|
|
34776
|
-
export { SmoothlyAccordion as smoothly_accordion, SmoothlyAccordionItem as smoothly_accordion_item, SmoothlyApp as smoothly_app, SmoothlyAppDemo as smoothly_app_demo, SmoothlyBacktotop as smoothly_backtotop, SmoothlyButton as smoothly_button, Calendar as smoothly_calendar, SmoothlyCheckbox as smoothly_checkbox, SmoothlyDialog as smoothly_dialog, SmoothlyDialogDemo as smoothly_dialog_demo, SmoothlyDisplay as smoothly_display, SmoothlyDisplayAmount as smoothly_display_amount, SmoothlyDisplayDateTime as smoothly_display_date_time, SmoothlyDisplayDemo as smoothly_display_demo, SmoothlyFrame as smoothly_frame, SmoothlyIcon as smoothly_icon, SmoothlyIconDemo as smoothly_icon_demo, SmoothlyInput as smoothly_input, InputDate as smoothly_input_date, InputDateRange as smoothly_input_date_range, SmoothlyInputDemo as smoothly_input_demo, MonthSelector as smoothly_input_month, Item as smoothly_item, SmoothlyMenuOptions as smoothly_menu_options, Notification as smoothly_notification, Notifier as smoothly_notifier, SmoothlyOption as smoothly_option, SmoothlyPicker as smoothly_picker, SmoothlyPopup as smoothly_popup, SmoothlyQuiet as smoothly_quiet, SmoothlyRadio as smoothly_radio, SmoothlyRadioButton as smoothly_radio_button, SmoothlyRadioButtonItem as smoothly_radio_button_item, SmoothlyRoom as smoothly_room, SmoothlySelect as smoothly_select, SmoothlySelectDemo as smoothly_select_demo, Selector as smoothly_selector, SmoothlySkeleton as smoothly_skeleton, SmoothlySpinner as smoothly_spinner, SmoothlySubmit as smoothly_submit, SmoothlyTab as smoothly_tab, SmoothlyTabSwitch as smoothly_tab_switch, Table as smoothly_table, TableCell as smoothly_table_cell, TableDemo as smoothly_table_demo, TableExpandableCell as smoothly_table_expandable_cell, TableExpandableRow as smoothly_table_expandable_row, TableHeader as smoothly_table_header, TableRow as smoothly_table_row, SmoothlyTrigger as smoothly_trigger, SmoothlyTuple as smoothly_tuple, Urlencoded as smoothly_urlencoded };
|
|
34813
|
+
export { SmoothlyAccordion as smoothly_accordion, SmoothlyAccordionItem as smoothly_accordion_item, SmoothlyApp as smoothly_app, SmoothlyAppDemo as smoothly_app_demo, SmoothlyBacktotop as smoothly_backtotop, SmoothlyButton as smoothly_button, Calendar as smoothly_calendar, SmoothlyCheckbox as smoothly_checkbox, SmoothlyDialog as smoothly_dialog, SmoothlyDialogDemo as smoothly_dialog_demo, SmoothlyDisplay as smoothly_display, SmoothlyDisplayAmount as smoothly_display_amount, SmoothlyDisplayDateTime as smoothly_display_date_time, SmoothlyDisplayDemo as smoothly_display_demo, SmoothlyFrame as smoothly_frame, SmoothlyIcon as smoothly_icon, SmoothlyIconDemo as smoothly_icon_demo, SmoothlyInput as smoothly_input, InputDate as smoothly_input_date, InputDateRange as smoothly_input_date_range, SmoothlyInputDemo as smoothly_input_demo, MonthSelector as smoothly_input_month, Item as smoothly_item, SmoothlyMenuOptions as smoothly_menu_options, Notification as smoothly_notification, Notifier as smoothly_notifier, SmoothlyOption as smoothly_option, SmoothlyPicker as smoothly_picker, SmoothlyPopup as smoothly_popup, SmoothlyQuiet as smoothly_quiet, SmoothlyRadio as smoothly_radio, SmoothlyRadioButton as smoothly_radio_button, SmoothlyRadioButtonItem as smoothly_radio_button_item, SmoothlyRoom as smoothly_room, SmoothlySelect as smoothly_select, SmoothlySelectDemo as smoothly_select_demo, Selector as smoothly_selector, SmoothlySkeleton as smoothly_skeleton, SmoothlySpinner as smoothly_spinner, SmoothlySubmit as smoothly_submit, SmoothlySvg as smoothly_svg, SmoothlyTab as smoothly_tab, SmoothlyTabSwitch as smoothly_tab_switch, Table as smoothly_table, TableCell as smoothly_table_cell, TableDemo as smoothly_table_demo, TableExpandableCell as smoothly_table_expandable_cell, TableExpandableRow as smoothly_table_expandable_row, TableHeader as smoothly_table_header, TableRow as smoothly_table_row, SmoothlyTrigger as smoothly_trigger, SmoothlyTuple as smoothly_tuple, Urlencoded as smoothly_urlencoded };
|