smoothly 0.2.10 → 0.2.11
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/{Notice-a540b9fb.js → index-2a011313.js} +380 -4
- package/dist/cjs/index.cjs.js +9 -372
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{smoothly-accordion_51.cjs.entry.js → smoothly-accordion_50.cjs.entry.js} +90 -108
- package/dist/cjs/smoothly-svg.cjs.entry.js +41 -0
- package/dist/cjs/smoothly.cjs.js +1 -1
- package/dist/collection/components/App.js +9 -4
- package/dist/collection/components/app-demo/index.js +10 -0
- package/dist/collection/components/display-demo/index.js +16 -12
- package/dist/collection/components/input-date/index.js +18 -1
- package/dist/collection/components/input-demo/index.js +3 -1
- package/dist/collection/components/room/index.js +7 -3
- package/dist/collection/components/submit/Data.js +12 -0
- package/dist/collection/components/submit/index.js +10 -4
- package/dist/collection/index.js +1 -1
- package/dist/custom-elements/index.js +33 -11
- package/dist/esm/{Notice-4d3fbaaf.js → index-1d438ba2.js} +380 -5
- package/dist/esm/index.js +2 -372
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{smoothly-accordion_51.entry.js → smoothly-accordion_50.entry.js} +90 -107
- package/dist/esm/smoothly-svg.entry.js +37 -0
- package/dist/esm/smoothly.js +1 -1
- package/dist/smoothly/index.esm.js +1 -1
- package/dist/smoothly/p-76e88859.js +1 -0
- package/dist/smoothly/p-8aefcb54.entry.js +1 -0
- package/dist/smoothly/p-956089d5.entry.js +1 -0
- package/dist/smoothly/smoothly.esm.js +1 -1
- package/dist/types/components/App.d.ts +1 -0
- package/dist/types/components/input-date/index.d.ts +1 -0
- package/dist/types/components/room/index.d.ts +1 -1
- package/dist/types/components/submit/Data.d.ts +7 -0
- package/dist/types/components/submit/index.d.ts +2 -3
- package/dist/types/components.d.ts +6 -3
- package/dist/types/index.d.ts +1 -1
- package/package.json +1 -1
- package/dist/smoothly/p-d8a81a07.js +0 -1
- package/dist/smoothly/p-fbcf1356.entry.js +0 -1
|
@@ -3,11 +3,11 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
const index = require('./index-3efe2a41.js');
|
|
6
|
-
const
|
|
6
|
+
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$G = "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$G;
|
|
57
57
|
|
|
58
|
-
const styleCss$
|
|
58
|
+
const styleCss$F = ".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$F;
|
|
104
104
|
|
|
105
|
-
const styleCss$
|
|
105
|
+
const styleCss$E = "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,14 +112,18 @@ 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$E;
|
|
116
116
|
|
|
117
117
|
const SmoothlyAppDemo = class {
|
|
118
118
|
constructor(hostRef) {
|
|
119
119
|
index.registerInstance(this, hostRef);
|
|
120
120
|
}
|
|
121
121
|
render() {
|
|
122
|
-
return (index.h(
|
|
122
|
+
return (index.h(index$1.App, { label: "Smoothly Demo" }, index.h("a", { slot: "nav-start", href: "display" }, "Display"), index.h("a", { slot: "nav-start", href: "https://google.com" }, "External"), index.h("smoothly-room", { path: "" }, index.h("smoothly-input", { type: "text" }, "Default"), index.h("div", { style: { padding: "1em", maxWidth: "12em" } }, index.h("smoothly-button", { fill: "solid", color: "danger", link: "https://google.com" }, "open"), index.h("smoothly-button", { fill: "solid", color: "danger", link: "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf", download: true }, "download"), index.h("smoothly-button", { fill: "solid", color: "danger", onClick: () => alert("clicked") }, "action"), index.h("smoothly-button", { type: "link", fill: "clear", color: "danger", onClick: () => alert("clicked") }, "action link"))), index.h("smoothly-room", { path: "input", label: "Input" }, index.h("smoothly-input-demo", null)), index.h("smoothly-room", { path: "dialog", label: "Dialog" }, index.h("smoothly-dialog-demo", null)), index.h("smoothly-room", { path: "display", label: "Display", icon: "eye-outline" }, index.h("smoothly-display-demo", null)), index.h("smoothly-room", { path: "table", label: "Table" }, index.h("smoothly-table-demo", null)), index.h("smoothly-room", { path: "select", label: "Select" }, index.h("smoothly-select-demo", null)), index.h("smoothly-room", { path: "icon", label: "Icon" }, index.h("smoothly-icon-demo", null)), index.h("smoothly-room", { path: "/redirect", label: "Redirect" }, index.h("smoothly-button", { style: { "max-width": "300px" }, onClick: () => {
|
|
123
|
+
index$1.redirect("/routing/pathParameter1");
|
|
124
|
+
} }, "Internal"), index.h("smoothly-button", { style: { "max-width": "300px" }, onClick: () => {
|
|
125
|
+
index$1.redirect("https://google.com");
|
|
126
|
+
} }, "External")), index.h("smoothly-room", { path: /^\/routing\/\w+\/?/, label: "No effect" }, index.h("h2", null, "Regex routing")), index.h("smoothly-room", { path: "old", label: "Old", to: "select" }), index.h("span", { slot: "header", style: { width: "100%", maxWidth: "500px" } }, index.h("smoothly-picker", { label: "All Animals Selected", style: { minWidth: "100px" }, labelSetting: "hide", "empty-menu-label": "Sorry, we're out of options.", "max-height": "58px", multiple: true, "select-none-name": "Select All", options: [
|
|
123
127
|
{ name: "Big Dog", value: "dog", aliases: ["WOFF"] },
|
|
124
128
|
{ name: "Cat Stevens", value: "cat", aliases: ["moew"], right: "🐈" },
|
|
125
129
|
{ name: "Noble Pig", value: "pig", right: "🐷" },
|
|
@@ -135,7 +139,7 @@ const SmoothlyAppDemo = class {
|
|
|
135
139
|
}
|
|
136
140
|
};
|
|
137
141
|
|
|
138
|
-
const styleCss$
|
|
142
|
+
const styleCss$D = ".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
143
|
|
|
140
144
|
const SmoothlyBacktotop = class {
|
|
141
145
|
constructor(hostRef) {
|
|
@@ -163,9 +167,9 @@ const SmoothlyBacktotop = class {
|
|
|
163
167
|
}) }, index.h("smoothly-icon", { name: "chevron-up-outline" })));
|
|
164
168
|
}
|
|
165
169
|
};
|
|
166
|
-
SmoothlyBacktotop.style = styleCss$
|
|
170
|
+
SmoothlyBacktotop.style = styleCss$D;
|
|
167
171
|
|
|
168
|
-
const styleCss$
|
|
172
|
+
const styleCss$C = "[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
173
|
|
|
170
174
|
const SmoothlyButton = class {
|
|
171
175
|
constructor(hostRef) {
|
|
@@ -186,7 +190,7 @@ const SmoothlyButton = class {
|
|
|
186
190
|
return result;
|
|
187
191
|
}
|
|
188
192
|
};
|
|
189
|
-
SmoothlyButton.style = styleCss$
|
|
193
|
+
SmoothlyButton.style = styleCss$C;
|
|
190
194
|
|
|
191
195
|
var CallingCode$1;
|
|
192
196
|
(function (CallingCode) {
|
|
@@ -6306,7 +6310,7 @@ function years(current) {
|
|
|
6306
6310
|
return result;
|
|
6307
6311
|
}
|
|
6308
6312
|
|
|
6309
|
-
const styleCss$
|
|
6313
|
+
const styleCss$B = ".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
6314
|
|
|
6311
6315
|
const Calendar = class {
|
|
6312
6316
|
constructor(hostRef) {
|
|
@@ -6389,7 +6393,7 @@ const Calendar = class {
|
|
|
6389
6393
|
"end": ["onEnd"]
|
|
6390
6394
|
}; }
|
|
6391
6395
|
};
|
|
6392
|
-
Calendar.style = styleCss$
|
|
6396
|
+
Calendar.style = styleCss$B;
|
|
6393
6397
|
|
|
6394
6398
|
var CallingCode;
|
|
6395
6399
|
(function (CallingCode) {
|
|
@@ -12329,7 +12333,7 @@ function create(language) {
|
|
|
12329
12333
|
}, language);
|
|
12330
12334
|
}
|
|
12331
12335
|
|
|
12332
|
-
const styleCss$
|
|
12336
|
+
const styleCss$A = ".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
12337
|
|
|
12334
12338
|
const SmoothlyCheckbox = class {
|
|
12335
12339
|
constructor(hostRef) {
|
|
@@ -12356,9 +12360,9 @@ const SmoothlyCheckbox = class {
|
|
|
12356
12360
|
}
|
|
12357
12361
|
get element() { return index.getElement(this); }
|
|
12358
12362
|
};
|
|
12359
|
-
SmoothlyCheckbox.style = styleCss$
|
|
12363
|
+
SmoothlyCheckbox.style = styleCss$A;
|
|
12360
12364
|
|
|
12361
|
-
const styleCss$
|
|
12365
|
+
const styleCss$z = ".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
12366
|
|
|
12363
12367
|
const SmoothlyDialog = class {
|
|
12364
12368
|
constructor(hostRef) {
|
|
@@ -12385,7 +12389,7 @@ const SmoothlyDialog = class {
|
|
|
12385
12389
|
}
|
|
12386
12390
|
render() { return index.h(index.Host, this.hostData(), this.__stencil_render()); }
|
|
12387
12391
|
};
|
|
12388
|
-
SmoothlyDialog.style = styleCss$
|
|
12392
|
+
SmoothlyDialog.style = styleCss$z;
|
|
12389
12393
|
|
|
12390
12394
|
const SmoothlyDialogDemo = class {
|
|
12391
12395
|
constructor(hostRef) {
|
|
@@ -32606,7 +32610,7 @@ Object.defineProperty(exports, "StateEditor", { enumerable: true, get: function
|
|
|
32606
32610
|
//# sourceMappingURL=index.js.map
|
|
32607
32611
|
});
|
|
32608
32612
|
|
|
32609
|
-
const styleCss$
|
|
32613
|
+
const styleCss$y = ".sc-smoothly-display-h{display:block}[hidden].sc-smoothly-display-h{display:none}";
|
|
32610
32614
|
|
|
32611
32615
|
const SmoothlyDisplay = class {
|
|
32612
32616
|
constructor(hostRef) {
|
|
@@ -32648,9 +32652,9 @@ function getLocale$1() {
|
|
|
32648
32652
|
const result = navigator.language;
|
|
32649
32653
|
return Locale$1.is(result) ? result : Language$1.is(result) ? Locale$1.toLocale(result) : undefined;
|
|
32650
32654
|
}
|
|
32651
|
-
SmoothlyDisplay.style = styleCss$
|
|
32655
|
+
SmoothlyDisplay.style = styleCss$y;
|
|
32652
32656
|
|
|
32653
|
-
const styleCss$
|
|
32657
|
+
const styleCss$x = ".sc-smoothly-display-amount-h{display:block}[hidden].sc-smoothly-display-amount-h{display:none}";
|
|
32654
32658
|
|
|
32655
32659
|
const SmoothlyDisplayAmount = class {
|
|
32656
32660
|
constructor(hostRef) {
|
|
@@ -32698,9 +32702,9 @@ const SmoothlyDisplayAmount = class {
|
|
|
32698
32702
|
];
|
|
32699
32703
|
}
|
|
32700
32704
|
};
|
|
32701
|
-
SmoothlyDisplayAmount.style = styleCss$
|
|
32705
|
+
SmoothlyDisplayAmount.style = styleCss$x;
|
|
32702
32706
|
|
|
32703
|
-
const styleCss$
|
|
32707
|
+
const styleCss$w = ".sc-smoothly-display-date-time-h{display:block}[hidden].sc-smoothly-display-date-time-h{display:none}";
|
|
32704
32708
|
|
|
32705
32709
|
const SmoothlyDisplayDateTime = class {
|
|
32706
32710
|
constructor(hostRef) {
|
|
@@ -32714,7 +32718,7 @@ const SmoothlyDisplayDateTime = class {
|
|
|
32714
32718
|
return [datetime[0], " ", datetime[1]];
|
|
32715
32719
|
}
|
|
32716
32720
|
};
|
|
32717
|
-
SmoothlyDisplayDateTime.style = styleCss$
|
|
32721
|
+
SmoothlyDisplayDateTime.style = styleCss$w;
|
|
32718
32722
|
|
|
32719
32723
|
const SmoothlyDisplayDemo = class {
|
|
32720
32724
|
constructor(hostRef) {
|
|
@@ -32727,12 +32731,12 @@ const SmoothlyDisplayDemo = class {
|
|
|
32727
32731
|
}
|
|
32728
32732
|
render() {
|
|
32729
32733
|
return [
|
|
32730
|
-
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, "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, "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(
|
|
32734
|
+
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, "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")),
|
|
32731
32735
|
];
|
|
32732
32736
|
}
|
|
32733
32737
|
};
|
|
32734
32738
|
|
|
32735
|
-
const styleCss$
|
|
32739
|
+
const styleCss$v = ".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}";
|
|
32736
32740
|
|
|
32737
32741
|
const SmoothlyFrame = class {
|
|
32738
32742
|
constructor(hostRef) {
|
|
@@ -32771,9 +32775,9 @@ const SmoothlyFrame = class {
|
|
|
32771
32775
|
}
|
|
32772
32776
|
get element() { return index.getElement(this); }
|
|
32773
32777
|
};
|
|
32774
|
-
SmoothlyFrame.style = styleCss$
|
|
32778
|
+
SmoothlyFrame.style = styleCss$v;
|
|
32775
32779
|
|
|
32776
|
-
const styleCss$
|
|
32780
|
+
const styleCss$u = "[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}";
|
|
32777
32781
|
|
|
32778
32782
|
const SmoothlyIcon = class {
|
|
32779
32783
|
constructor(hostRef) {
|
|
@@ -32816,9 +32820,9 @@ const SmoothlyIcon = class {
|
|
|
32816
32820
|
render() { return index.h(index.Host, this.hostData(), this.__stencil_render()); }
|
|
32817
32821
|
};
|
|
32818
32822
|
SmoothlyIcon.cache = {};
|
|
32819
|
-
SmoothlyIcon.style = styleCss$
|
|
32823
|
+
SmoothlyIcon.style = styleCss$u;
|
|
32820
32824
|
|
|
32821
|
-
const styleCss$
|
|
32825
|
+
const styleCss$t = "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}";
|
|
32822
32826
|
|
|
32823
32827
|
const SmoothlyIconDemo = class {
|
|
32824
32828
|
constructor(hostRef) {
|
|
@@ -33300,9 +33304,9 @@ const SmoothlyIconDemo = class {
|
|
|
33300
33304
|
];
|
|
33301
33305
|
}
|
|
33302
33306
|
};
|
|
33303
|
-
SmoothlyIconDemo.style = styleCss$
|
|
33307
|
+
SmoothlyIconDemo.style = styleCss$t;
|
|
33304
33308
|
|
|
33305
|
-
const styleCss$
|
|
33309
|
+
const styleCss$s = ".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)))}";
|
|
33306
33310
|
|
|
33307
33311
|
const SmoothlyInput = class {
|
|
33308
33312
|
constructor(hostRef) {
|
|
@@ -33506,9 +33510,9 @@ function getLocale() {
|
|
|
33506
33510
|
const result = navigator.language;
|
|
33507
33511
|
return Locale$1.is(result) ? result : Language$1.is(result) ? Locale$1.toLocale(result) : undefined;
|
|
33508
33512
|
}
|
|
33509
|
-
SmoothlyInput.style = styleCss$
|
|
33513
|
+
SmoothlyInput.style = styleCss$s;
|
|
33510
33514
|
|
|
33511
|
-
const styleCss$
|
|
33515
|
+
const styleCss$r = ".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))}";
|
|
33512
33516
|
|
|
33513
33517
|
const InputDate = class {
|
|
33514
33518
|
constructor(hostRef) {
|
|
@@ -33525,7 +33529,7 @@ const InputDate = class {
|
|
|
33525
33529
|
render() {
|
|
33526
33530
|
var _a;
|
|
33527
33531
|
return [
|
|
33528
|
-
index.h("smoothly-input", { onClick: () => (this.open = !this.open), disabled: this.disabled, type: "date", value: this.value, onSmoothlyInput: e => (this.value = e.detail.value) }, index.h("slot", null)),
|
|
33532
|
+
index.h("smoothly-input", { name: this.name, onClick: () => (this.open = !this.open), disabled: this.disabled, type: "date", value: this.value, onSmoothlyInput: e => (this.value = e.detail.value) }, index.h("slot", null)),
|
|
33529
33533
|
this.open && !this.disabled
|
|
33530
33534
|
? [
|
|
33531
33535
|
index.h("div", { onClick: () => (this.open = false) }),
|
|
@@ -33541,9 +33545,9 @@ const InputDate = class {
|
|
|
33541
33545
|
"value": ["onStart"]
|
|
33542
33546
|
}; }
|
|
33543
33547
|
};
|
|
33544
|
-
InputDate.style = styleCss$
|
|
33548
|
+
InputDate.style = styleCss$r;
|
|
33545
33549
|
|
|
33546
|
-
const styleCss$
|
|
33550
|
+
const styleCss$q = ".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}";
|
|
33547
33551
|
|
|
33548
33552
|
const InputDateRange = class {
|
|
33549
33553
|
constructor(hostRef) {
|
|
@@ -33582,7 +33586,7 @@ const InputDateRange = class {
|
|
|
33582
33586
|
"value": ["onValue"]
|
|
33583
33587
|
}; }
|
|
33584
33588
|
};
|
|
33585
|
-
InputDateRange.style = styleCss$
|
|
33589
|
+
InputDateRange.style = styleCss$q;
|
|
33586
33590
|
|
|
33587
33591
|
const SmoothlyInputDemo = class {
|
|
33588
33592
|
constructor(hostRef) {
|
|
@@ -33590,13 +33594,13 @@ const SmoothlyInputDemo = class {
|
|
|
33590
33594
|
}
|
|
33591
33595
|
render() {
|
|
33592
33596
|
return [
|
|
33593
|
-
index.h("form", { action: "done", style: { position: "relative" } }, index.h("header", null, index.h("h5", null, "Address")), index.h("main", null, 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", onSmoothlyChange: e => console.log("smoothly change event") }, "Name"), 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("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("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("smoothly-display-amount", { currency: "SEK", amount: "1289.5" }), index.h("smoothly-display-date-time", { datetime: "2019-01-31T20:01:34" }), index.h("smoothly-checkbox", { selectAll: true, intermediate: true }), index.h("smoothly-checkbox", null), index.h("smoothly-checkbox", { disabled: true }), 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("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("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"))),
|
|
33597
|
+
index.h("form", { action: "done", style: { position: "relative" } }, index.h("header", null, index.h("h5", null, "Address")), index.h("main", null, 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("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("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("smoothly-display-amount", { currency: "SEK", amount: "1289.5" }), index.h("smoothly-display-date-time", { datetime: "2019-01-31T20:01:34" }), index.h("smoothly-checkbox", { selectAll: true, intermediate: true }), index.h("smoothly-checkbox", null), index.h("smoothly-checkbox", { disabled: true }), 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("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("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"))),
|
|
33594
33598
|
index.h("smoothly-backtotop", null),
|
|
33595
33599
|
];
|
|
33596
33600
|
}
|
|
33597
33601
|
};
|
|
33598
33602
|
|
|
33599
|
-
const styleCss$
|
|
33603
|
+
const styleCss$p = ".sc-smoothly-input-month-h{display:flex;justify-content:space-between;font-size:large}smoothly-icon.sc-smoothly-input-month{font-size:smaller}";
|
|
33600
33604
|
|
|
33601
33605
|
const MonthSelector = class {
|
|
33602
33606
|
constructor(hostRef) {
|
|
@@ -33625,9 +33629,9 @@ const MonthSelector = class {
|
|
|
33625
33629
|
"value": ["onValueChanged"]
|
|
33626
33630
|
}; }
|
|
33627
33631
|
};
|
|
33628
|
-
MonthSelector.style = styleCss$
|
|
33632
|
+
MonthSelector.style = styleCss$p;
|
|
33629
33633
|
|
|
33630
|
-
const styleCss$
|
|
33634
|
+
const styleCss$o = "[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))}";
|
|
33631
33635
|
|
|
33632
33636
|
const Item = class {
|
|
33633
33637
|
constructor(hostRef) {
|
|
@@ -33661,9 +33665,9 @@ const Item = class {
|
|
|
33661
33665
|
"selected": ["onSelectedChanged"]
|
|
33662
33666
|
}; }
|
|
33663
33667
|
};
|
|
33664
|
-
Item.style = styleCss$
|
|
33668
|
+
Item.style = styleCss$o;
|
|
33665
33669
|
|
|
33666
|
-
const styleCss$
|
|
33670
|
+
const styleCss$n = ":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}";
|
|
33667
33671
|
|
|
33668
33672
|
const SmoothlyMenuOptions = class {
|
|
33669
33673
|
constructor(hostRef) {
|
|
@@ -33767,9 +33771,9 @@ const SmoothlyMenuOptions = class {
|
|
|
33767
33771
|
"options": ["optionsChangeHandler"]
|
|
33768
33772
|
}; }
|
|
33769
33773
|
};
|
|
33770
|
-
SmoothlyMenuOptions.style = styleCss$
|
|
33774
|
+
SmoothlyMenuOptions.style = styleCss$n;
|
|
33771
33775
|
|
|
33772
|
-
const styleCss$
|
|
33776
|
+
const styleCss$m = ".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}";
|
|
33773
33777
|
|
|
33774
33778
|
const Notification = class {
|
|
33775
33779
|
constructor(hostRef) {
|
|
@@ -33827,9 +33831,9 @@ const Notification = class {
|
|
|
33827
33831
|
"notice": ["onUpdatedNotice"]
|
|
33828
33832
|
}; }
|
|
33829
33833
|
};
|
|
33830
|
-
Notification.style = styleCss$
|
|
33834
|
+
Notification.style = styleCss$m;
|
|
33831
33835
|
|
|
33832
|
-
const styleCss$
|
|
33836
|
+
const styleCss$l = ".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}";
|
|
33833
33837
|
|
|
33834
33838
|
const Notifier = class {
|
|
33835
33839
|
constructor(hostRef) {
|
|
@@ -33849,9 +33853,9 @@ const Notifier = class {
|
|
|
33849
33853
|
];
|
|
33850
33854
|
}
|
|
33851
33855
|
};
|
|
33852
|
-
Notifier.style = styleCss$
|
|
33856
|
+
Notifier.style = styleCss$l;
|
|
33853
33857
|
|
|
33854
|
-
const styleCss$
|
|
33858
|
+
const styleCss$k = ":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.middle{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=left]){display:flex;align-items:center;gap:1ch}";
|
|
33855
33859
|
|
|
33856
33860
|
const SmoothlyOption = class {
|
|
33857
33861
|
constructor(hostRef) {
|
|
@@ -33878,9 +33882,9 @@ const SmoothlyOption = class {
|
|
|
33878
33882
|
}
|
|
33879
33883
|
get element() { return index.getElement(this); }
|
|
33880
33884
|
};
|
|
33881
|
-
SmoothlyOption.style = styleCss$
|
|
33885
|
+
SmoothlyOption.style = styleCss$k;
|
|
33882
33886
|
|
|
33883
|
-
const styleCss$
|
|
33887
|
+
const styleCss$j = ":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}";
|
|
33884
33888
|
|
|
33885
33889
|
const SmoothlyPicker = class {
|
|
33886
33890
|
constructor(hostRef) {
|
|
@@ -34060,9 +34064,9 @@ const SmoothlyPicker = class {
|
|
|
34060
34064
|
"isOpen": ["isOpenChangeHandler"]
|
|
34061
34065
|
}; }
|
|
34062
34066
|
};
|
|
34063
|
-
SmoothlyPicker.style = styleCss$
|
|
34067
|
+
SmoothlyPicker.style = styleCss$j;
|
|
34064
34068
|
|
|
34065
|
-
const styleCss$
|
|
34069
|
+
const styleCss$i = ".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}";
|
|
34066
34070
|
|
|
34067
34071
|
const SmoothlyPopup = class {
|
|
34068
34072
|
constructor(hostRef) {
|
|
@@ -34091,9 +34095,9 @@ const SmoothlyPopup = class {
|
|
|
34091
34095
|
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" }))));
|
|
34092
34096
|
}
|
|
34093
34097
|
};
|
|
34094
|
-
SmoothlyPopup.style = styleCss$
|
|
34098
|
+
SmoothlyPopup.style = styleCss$i;
|
|
34095
34099
|
|
|
34096
|
-
const styleCss$
|
|
34100
|
+
const styleCss$h = ".sc-smoothly-quiet-h{opacity:0.5}";
|
|
34097
34101
|
|
|
34098
34102
|
const SmoothlyQuiet = class {
|
|
34099
34103
|
constructor(hostRef) {
|
|
@@ -34103,9 +34107,9 @@ const SmoothlyQuiet = class {
|
|
|
34103
34107
|
return (index.h(index.Host, { color: this.color }, index.h("slot", null)));
|
|
34104
34108
|
}
|
|
34105
34109
|
};
|
|
34106
|
-
SmoothlyQuiet.style = styleCss$
|
|
34110
|
+
SmoothlyQuiet.style = styleCss$h;
|
|
34107
34111
|
|
|
34108
|
-
const styleCss$
|
|
34112
|
+
const styleCss$g = ".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))}";
|
|
34109
34113
|
|
|
34110
34114
|
const SmoothlyRadio = class {
|
|
34111
34115
|
constructor(hostRef) {
|
|
@@ -34124,7 +34128,7 @@ const SmoothlyRadio = class {
|
|
|
34124
34128
|
];
|
|
34125
34129
|
}
|
|
34126
34130
|
};
|
|
34127
|
-
SmoothlyRadio.style = styleCss$
|
|
34131
|
+
SmoothlyRadio.style = styleCss$g;
|
|
34128
34132
|
|
|
34129
34133
|
const SmoothlyRoom = class {
|
|
34130
34134
|
constructor(hostRef) {
|
|
@@ -34135,7 +34139,7 @@ const SmoothlyRoom = class {
|
|
|
34135
34139
|
}
|
|
34136
34140
|
};
|
|
34137
34141
|
|
|
34138
|
-
const styleCss$
|
|
34142
|
+
const styleCss$f = ".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}";
|
|
34139
34143
|
|
|
34140
34144
|
const SmoothlySelect = class {
|
|
34141
34145
|
constructor(hostRef) {
|
|
@@ -34157,9 +34161,9 @@ const SmoothlySelect = class {
|
|
|
34157
34161
|
];
|
|
34158
34162
|
}
|
|
34159
34163
|
};
|
|
34160
|
-
SmoothlySelect.style = styleCss$
|
|
34164
|
+
SmoothlySelect.style = styleCss$f;
|
|
34161
34165
|
|
|
34162
|
-
const styleCss$
|
|
34166
|
+
const styleCss$e = ".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}";
|
|
34163
34167
|
|
|
34164
34168
|
const SmoothlySelectDemo = class {
|
|
34165
34169
|
constructor(hostRef) {
|
|
@@ -34224,7 +34228,7 @@ const SmoothlySelectDemo = class {
|
|
|
34224
34228
|
{ name: "jane@example.com", value: "jane@example.com" },
|
|
34225
34229
|
{ name: "james@example.com", value: "james@example.com" },
|
|
34226
34230
|
{ name: "jessie@example.com", value: "jessie@example.com" },
|
|
34227
|
-
], valueValidator: (email) => email.match(/^\w+@\w+/) ? [true, undefined] : [false,
|
|
34231
|
+
], valueValidator: (email) => email.match(/^\w+@\w+/) ? [true, undefined] : [false, index$1.Notice.failed("Incorrectly formatted email")] }),
|
|
34228
34232
|
index.h("br", null),
|
|
34229
34233
|
index.h("smoothly-picker", { label: "Single select", multiple: false, "max-menu-height": "200px", options: [
|
|
34230
34234
|
{ name: "Dog", value: "dog", aliases: ["WOFF"], right: "Woof 🐶" },
|
|
@@ -34246,9 +34250,9 @@ const SmoothlySelectDemo = class {
|
|
|
34246
34250
|
];
|
|
34247
34251
|
}
|
|
34248
34252
|
};
|
|
34249
|
-
SmoothlySelectDemo.style = styleCss$
|
|
34253
|
+
SmoothlySelectDemo.style = styleCss$e;
|
|
34250
34254
|
|
|
34251
|
-
const styleCss$
|
|
34255
|
+
const styleCss$d = ".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}";
|
|
34252
34256
|
|
|
34253
34257
|
const Selector = class {
|
|
34254
34258
|
constructor(hostRef) {
|
|
@@ -34358,9 +34362,9 @@ function isItem(value) {
|
|
|
34358
34362
|
(typeof value.selected == "boolean" || value.selected == undefined) &&
|
|
34359
34363
|
typeof value.filter == "function");
|
|
34360
34364
|
}
|
|
34361
|
-
Selector.style = styleCss$
|
|
34365
|
+
Selector.style = styleCss$d;
|
|
34362
34366
|
|
|
34363
|
-
const styleCss$
|
|
34367
|
+
const styleCss$c = ".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)}}";
|
|
34364
34368
|
|
|
34365
34369
|
const SmoothlySkeleton = class {
|
|
34366
34370
|
constructor(hostRef) {
|
|
@@ -34378,9 +34382,9 @@ const SmoothlySkeleton = class {
|
|
|
34378
34382
|
return index.h(index.Host, { style: cssVariables });
|
|
34379
34383
|
}
|
|
34380
34384
|
};
|
|
34381
|
-
SmoothlySkeleton.style = styleCss$
|
|
34385
|
+
SmoothlySkeleton.style = styleCss$c;
|
|
34382
34386
|
|
|
34383
|
-
const styleCss$
|
|
34387
|
+
const styleCss$b = ".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)}}";
|
|
34384
34388
|
|
|
34385
34389
|
const SmoothlySpinner = class {
|
|
34386
34390
|
constructor(hostRef) {
|
|
@@ -34395,9 +34399,22 @@ const SmoothlySpinner = class {
|
|
|
34395
34399
|
} }, 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" }))));
|
|
34396
34400
|
}
|
|
34397
34401
|
};
|
|
34398
|
-
SmoothlySpinner.style = styleCss$
|
|
34402
|
+
SmoothlySpinner.style = styleCss$b;
|
|
34399
34403
|
|
|
34400
|
-
|
|
34404
|
+
var Data;
|
|
34405
|
+
(function (Data) {
|
|
34406
|
+
function set(data, [head, ...tail], value) {
|
|
34407
|
+
const current = data[head];
|
|
34408
|
+
return Object.assign(Object.assign({}, data), { [head]: !tail.length ? value : set(typeof current == "object" ? current : {}, tail, value) });
|
|
34409
|
+
}
|
|
34410
|
+
Data.set = set;
|
|
34411
|
+
function deepen(data) {
|
|
34412
|
+
return Object.entries(data).reduce((result, [name, value]) => set(result, name.split("."), value), {});
|
|
34413
|
+
}
|
|
34414
|
+
Data.deepen = deepen;
|
|
34415
|
+
})(Data || (Data = {}));
|
|
34416
|
+
|
|
34417
|
+
const styleCss$a = ".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}";
|
|
34401
34418
|
|
|
34402
34419
|
const SmoothlySubmit = class {
|
|
34403
34420
|
constructor(hostRef) {
|
|
@@ -34428,7 +34445,7 @@ const SmoothlySubmit = class {
|
|
|
34428
34445
|
result[element.name] = element.value;
|
|
34429
34446
|
}
|
|
34430
34447
|
}
|
|
34431
|
-
this.submitEvent.emit(result);
|
|
34448
|
+
this.submitEvent.emit(Data.deepen(result));
|
|
34432
34449
|
this.processing = false;
|
|
34433
34450
|
}
|
|
34434
34451
|
}
|
|
@@ -34448,41 +34465,7 @@ const SmoothlySubmit = class {
|
|
|
34448
34465
|
function hasNameAndValue(element) {
|
|
34449
34466
|
return (typeof element.name == "string" && typeof element.value == "string");
|
|
34450
34467
|
}
|
|
34451
|
-
SmoothlySubmit.style = styleCss$
|
|
34452
|
-
|
|
34453
|
-
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))}";
|
|
34454
|
-
|
|
34455
|
-
const SmoothlySvg = class {
|
|
34456
|
-
constructor(hostRef) {
|
|
34457
|
-
index.registerInstance(this, hostRef);
|
|
34458
|
-
this.defaultSizes = {
|
|
34459
|
-
large: { height: "50rem", width: "50rem" },
|
|
34460
|
-
medium: { height: "30rem", width: "30rem" },
|
|
34461
|
-
small: { height: "10rem", width: "10rem" },
|
|
34462
|
-
tiny: { height: "5rem", width: "5rem" },
|
|
34463
|
-
};
|
|
34464
|
-
}
|
|
34465
|
-
render() {
|
|
34466
|
-
const height = this.size
|
|
34467
|
-
? typeof this.size == "object"
|
|
34468
|
-
? this.size.height
|
|
34469
|
-
: this.defaultSizes[this.size].height
|
|
34470
|
-
: "10rem";
|
|
34471
|
-
const width = this.size
|
|
34472
|
-
? typeof this.size == "object"
|
|
34473
|
-
? this.size.width
|
|
34474
|
-
: this.defaultSizes[this.size].width
|
|
34475
|
-
: "10rem";
|
|
34476
|
-
return (index.h(index.Host, { style: {
|
|
34477
|
-
"min-height": height,
|
|
34478
|
-
"min-width": width,
|
|
34479
|
-
"--size-height": height,
|
|
34480
|
-
"--size-width": width,
|
|
34481
|
-
"--color": this.color,
|
|
34482
|
-
} }, index.h("object", { height: height, width: width, type: "image/svg+xml", data: this.url })));
|
|
34483
|
-
}
|
|
34484
|
-
};
|
|
34485
|
-
SmoothlySvg.style = styleCss$a;
|
|
34468
|
+
SmoothlySubmit.style = styleCss$a;
|
|
34486
34469
|
|
|
34487
34470
|
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}";
|
|
34488
34471
|
|
|
@@ -34778,7 +34761,6 @@ exports.smoothly_selector = Selector;
|
|
|
34778
34761
|
exports.smoothly_skeleton = SmoothlySkeleton;
|
|
34779
34762
|
exports.smoothly_spinner = SmoothlySpinner;
|
|
34780
34763
|
exports.smoothly_submit = SmoothlySubmit;
|
|
34781
|
-
exports.smoothly_svg = SmoothlySvg;
|
|
34782
34764
|
exports.smoothly_tab = SmoothlyTab;
|
|
34783
34765
|
exports.smoothly_tab_switch = SmoothlyTabSwitch;
|
|
34784
34766
|
exports.smoothly_table = Table;
|