smoothly 0.2.10 → 0.3.0
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} +127 -135
- 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 +20 -10
- 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/menu-options/index.js +31 -10
- package/dist/collection/components/option/index.js +81 -6
- package/dist/collection/components/option/style.css +31 -35
- package/dist/collection/components/picker/index.js +26 -21
- package/dist/collection/components/room/index.js +7 -3
- package/dist/collection/components/select-demo/index.js +4 -4
- package/dist/collection/components/skeleton/index.js +1 -1
- 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/collection/model/{OptionType.js → Option.js} +0 -0
- package/dist/custom-elements/index.js +75 -43
- 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} +127 -134
- 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-71443887.entry.js +1 -0
- package/dist/smoothly/p-76e88859.js +1 -0
- package/dist/smoothly/p-8aefcb54.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/menu-options/index.d.ts +10 -6
- package/dist/types/components/option/index.d.ts +7 -0
- package/dist/types/components/picker/index.d.ts +11 -10
- 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 +26 -14
- package/dist/types/index.d.ts +2 -2
- package/dist/types/model/Option.d.ts +7 -0
- package/dist/types/model/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
- package/dist/types/model/OptionType.d.ts +0 -8
|
@@ -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,30 +112,34 @@ 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
|
-
{ name: "Cat Stevens", value: "cat", aliases: ["moew"],
|
|
125
|
-
{ name: "Noble Pig", value: "pig",
|
|
126
|
-
{ name: "Turtle Wax", value: "turtle"
|
|
127
|
-
{ name: "Spider Man", value: "spider"
|
|
128
|
-
{ name: "Phoenix Order Long Wooord", value: "phoenix"
|
|
129
|
-
{ name: "Horse Back", value: "horse"
|
|
130
|
-
{ name: "Unicorn Horn", value: "unicorn"
|
|
131
|
-
{ name: "Talking Parrot Parrot", value: "parrot"
|
|
132
|
-
{ name: "Hidden Dragon", value: "dragon"
|
|
133
|
-
{ name: "Scary Kraken", value: "kraken"
|
|
128
|
+
{ name: "Cat Stevens", value: "cat", aliases: ["moew"], hint: "moew 🐈" },
|
|
129
|
+
{ name: "Noble Pig", value: "pig", hint: "🐷" },
|
|
130
|
+
{ name: "Turtle Wax", value: "turtle" },
|
|
131
|
+
{ name: "Spider Man", value: "spider" },
|
|
132
|
+
{ name: "Phoenix Order Long Wooord", value: "phoenix" },
|
|
133
|
+
{ name: "Horse Back", value: "horse" },
|
|
134
|
+
{ name: "Unicorn Horn", value: "unicorn" },
|
|
135
|
+
{ name: "Talking Parrot Parrot", value: "parrot" },
|
|
136
|
+
{ name: "Hidden Dragon", value: "dragon" },
|
|
137
|
+
{ name: "Scary Kraken", value: "kraken" },
|
|
134
138
|
] })), index.h("smoothly-trigger", { slot: "header", type: "link", name: "logout" }, index.h("smoothly-icon", { toolTip: "Log out", name: "log-out", size: "medium" }))));
|
|
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,16 +33665,18 @@ 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) {
|
|
33670
33674
|
index.registerInstance(this, hostRef);
|
|
33671
33675
|
this.menuEmpty = index.createEvent(this, "menuEmpty", 7);
|
|
33676
|
+
this.optionElements = [];
|
|
33672
33677
|
this.filteredOptions = [];
|
|
33673
33678
|
this.highlightIndex = 0;
|
|
33679
|
+
this.toggle = false;
|
|
33674
33680
|
this.emptyMenuLabel = "No Options";
|
|
33675
33681
|
this.newOptionLabel = "Add:";
|
|
33676
33682
|
this.order = false;
|
|
@@ -33678,7 +33684,7 @@ const SmoothlyMenuOptions = class {
|
|
|
33678
33684
|
this.resetHighlightOnOptionsChange = true;
|
|
33679
33685
|
this.mutable = false;
|
|
33680
33686
|
}
|
|
33681
|
-
optionsChangeHandler(
|
|
33687
|
+
optionsChangeHandler() {
|
|
33682
33688
|
this.highlightIndex = this.resetHighlightOnOptionsChange ? 0 : this.highlightIndex;
|
|
33683
33689
|
}
|
|
33684
33690
|
optionHoverHandler(event) {
|
|
@@ -33760,16 +33766,19 @@ const SmoothlyMenuOptions = class {
|
|
|
33760
33766
|
}
|
|
33761
33767
|
}
|
|
33762
33768
|
render() {
|
|
33763
|
-
return (index.h(index.Host, { style: { "--max-menu-height": this.maxMenuHeight } }, this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index$1) => (index.h("smoothly-option", { style: this.optionStyle,
|
|
33769
|
+
return (index.h(index.Host, { style: { "--max-menu-height": this.maxMenuHeight } }, this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index$1) => (index.h("smoothly-option", { style: this.optionStyle, toggle: this.toggle, ref: el => {
|
|
33770
|
+
index$1 == 0 && (this.firstOptionsElement = el !== null && el !== void 0 ? el : this.firstOptionsElement);
|
|
33771
|
+
el && (this.optionElements[index$1] = el);
|
|
33772
|
+
}, checked: option.checked, value: option.value, name: option.name, divider: option.divider, "data-highlight": this.highlightIndex == index$1 }, option.hint ? index.h("div", { slot: "hint" }, option.hint) : undefined)))) : this.mutable ? (index.h("smoothly-option", { style: this.optionStyle, value: this.keyword, name: this.keyword, "data-highlight": 0, new: true }, index.h("div", { slot: "left" }, index.h("smoothly-icon", { name: "square-outline", size: "small" }), " ", this.newOptionLabel))) : (index.h("div", null, this.emptyMenuLabel))));
|
|
33764
33773
|
}
|
|
33765
33774
|
get element() { return index.getElement(this); }
|
|
33766
33775
|
static get watchers() { return {
|
|
33767
33776
|
"options": ["optionsChangeHandler"]
|
|
33768
33777
|
}; }
|
|
33769
33778
|
};
|
|
33770
|
-
SmoothlyMenuOptions.style = styleCss$
|
|
33779
|
+
SmoothlyMenuOptions.style = styleCss$n;
|
|
33771
33780
|
|
|
33772
|
-
const styleCss$
|
|
33781
|
+
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
33782
|
|
|
33774
33783
|
const Notification = class {
|
|
33775
33784
|
constructor(hostRef) {
|
|
@@ -33827,9 +33836,9 @@ const Notification = class {
|
|
|
33827
33836
|
"notice": ["onUpdatedNotice"]
|
|
33828
33837
|
}; }
|
|
33829
33838
|
};
|
|
33830
|
-
Notification.style = styleCss$
|
|
33839
|
+
Notification.style = styleCss$m;
|
|
33831
33840
|
|
|
33832
|
-
const styleCss$
|
|
33841
|
+
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
33842
|
|
|
33834
33843
|
const Notifier = class {
|
|
33835
33844
|
constructor(hostRef) {
|
|
@@ -33849,38 +33858,45 @@ const Notifier = class {
|
|
|
33849
33858
|
];
|
|
33850
33859
|
}
|
|
33851
33860
|
};
|
|
33852
|
-
Notifier.style = styleCss$
|
|
33861
|
+
Notifier.style = styleCss$l;
|
|
33853
33862
|
|
|
33854
|
-
const styleCss$
|
|
33863
|
+
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.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}";
|
|
33855
33864
|
|
|
33856
33865
|
const SmoothlyOption = class {
|
|
33857
33866
|
constructor(hostRef) {
|
|
33858
33867
|
index.registerInstance(this, hostRef);
|
|
33859
33868
|
this.optionHover = index.createEvent(this, "optionHover", 7);
|
|
33860
33869
|
this.optionSelect = index.createEvent(this, "optionSelect", 7);
|
|
33870
|
+
this.optionUnselect = index.createEvent(this, "optionUnselect", 7);
|
|
33861
33871
|
this.optionAdd = index.createEvent(this, "optionAdd", 7);
|
|
33862
33872
|
this.dataHighlight = false;
|
|
33863
33873
|
this.divider = false;
|
|
33874
|
+
this.toggle = false;
|
|
33875
|
+
this.checked = false;
|
|
33864
33876
|
}
|
|
33865
33877
|
onHover(event) {
|
|
33866
33878
|
this.optionHover.emit({ name: this.name, value: this.value });
|
|
33867
33879
|
}
|
|
33868
33880
|
onSelect(event) {
|
|
33869
|
-
if (this.value)
|
|
33881
|
+
if (this.value) {
|
|
33870
33882
|
this.new
|
|
33871
33883
|
? this.optionAdd.emit({ name: this.name, value: this.value })
|
|
33872
|
-
: this.
|
|
33884
|
+
: !this.toggle || (this.toggle && !this.checked)
|
|
33885
|
+
? this.optionSelect.emit({ name: this.name, value: this.value })
|
|
33886
|
+
: this.optionUnselect.emit({ name: this.name, value: this.value });
|
|
33887
|
+
this.toggle && (this.checked = !this.checked);
|
|
33888
|
+
}
|
|
33873
33889
|
else
|
|
33874
33890
|
throw `smoothly-option ${this.element.innerHTML} lacks value-property and can therefore not be selected`;
|
|
33875
33891
|
}
|
|
33876
33892
|
render() {
|
|
33877
|
-
return (index.h(index.Host, { onMouseDown: (e) => this.onSelect(e), onMouseOver: (e) => this.onHover(e) }, index.h("
|
|
33893
|
+
return (index.h(index.Host, { onMouseDown: (e) => this.onSelect(e), onMouseOver: (e) => this.onHover(e) }, this.toggle && index.h("smoothly-icon", { name: this.checked ? "checkbox" : "square-outline" }), index.h("div", { class: "name" }, this.name), index.h("smoothly-quiet", null, index.h("slot", { name: "hint" }))));
|
|
33878
33894
|
}
|
|
33879
33895
|
get element() { return index.getElement(this); }
|
|
33880
33896
|
};
|
|
33881
|
-
SmoothlyOption.style = styleCss$
|
|
33897
|
+
SmoothlyOption.style = styleCss$k;
|
|
33882
33898
|
|
|
33883
|
-
const styleCss$
|
|
33899
|
+
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
33900
|
|
|
33885
33901
|
const SmoothlyPicker = class {
|
|
33886
33902
|
constructor(hostRef) {
|
|
@@ -33890,6 +33906,7 @@ const SmoothlyPicker = class {
|
|
|
33890
33906
|
this.keepFocusOnReRender = false;
|
|
33891
33907
|
this.disabled = false;
|
|
33892
33908
|
this.readonly = false;
|
|
33909
|
+
this.maxMenuHeight = "inherit";
|
|
33893
33910
|
this.emptyMenuLabel = "No Options";
|
|
33894
33911
|
this.multiple = false;
|
|
33895
33912
|
this.mutable = false;
|
|
@@ -34026,17 +34043,14 @@ const SmoothlyPicker = class {
|
|
|
34026
34043
|
this.isOpen = false;
|
|
34027
34044
|
this.filterOptions();
|
|
34028
34045
|
}
|
|
34029
|
-
getCheckHtml(checked) {
|
|
34030
|
-
return checked ? (index.h("smoothly-icon", { name: "checkbox", size: "small" })) : (index.h("smoothly-icon", { name: "square-outline", size: "small" }));
|
|
34031
|
-
}
|
|
34032
34046
|
render() {
|
|
34033
|
-
var _a, _b, _c
|
|
34047
|
+
var _a, _b, _c;
|
|
34034
34048
|
const cssVariables = {
|
|
34035
34049
|
"--max-height": (_a = this.maxHeight) !== null && _a !== void 0 ? _a : "inherit",
|
|
34036
34050
|
"--label-display": this.labelSetting == "hide" ? "none" : "absolute",
|
|
34037
34051
|
};
|
|
34038
34052
|
(_b = this.options) === null || _b === void 0 ? void 0 : _b.forEach(o => {
|
|
34039
|
-
o.
|
|
34053
|
+
o.checked = this.selections.map(s => s.value).includes(o.value);
|
|
34040
34054
|
});
|
|
34041
34055
|
const options = [
|
|
34042
34056
|
...(this.multiple
|
|
@@ -34044,25 +34058,25 @@ const SmoothlyPicker = class {
|
|
|
34044
34058
|
{
|
|
34045
34059
|
value: "select-none",
|
|
34046
34060
|
name: this.selections.length == this.options.length ? this.selectNoneName : this.selectAllName,
|
|
34047
|
-
|
|
34061
|
+
checked: this.selections.length == this.options.length,
|
|
34048
34062
|
divider: true,
|
|
34049
34063
|
},
|
|
34050
34064
|
]
|
|
34051
34065
|
: []),
|
|
34052
|
-
...((
|
|
34066
|
+
...((_c = this.options) !== null && _c !== void 0 ? _c : []),
|
|
34053
34067
|
];
|
|
34054
34068
|
return (index.h(index.Host, { style: cssVariables, "has-selection": this.selections.length > 0, "is-open": this.isOpen ? "" : undefined, onMouseDown: (e) => e.preventDefault(), onClick: () => this.onClick() }, index.h("div", null, index.h("smoothly-icon", { part: "search", class: "search", name: "search-outline", size: "tiny" }), index.h("label", { part: "label-element" }, this.label), index.h("input", { part: "input", disabled: this.disabled, readonly: this.readonly, type: "text", ref: (el) => (this.inputElement = el ? el : this.inputElement), onFocus: () => this.highlightDefault(), onBlur: () => this.onBlur(), placeholder: this.selections.length > 3
|
|
34055
34069
|
? this.selections.length.toString() + " " + this.selectionName
|
|
34056
|
-
: this.selections.map(selection => selection.name).join(", "), onKeyDown: e => this.onKeyDown(e), onInput: (e) => this.onInput(e) }), index.h("smoothly-icon", { part: "chevron", class: "down", name: "chevron-down", size: "tiny" }), index.h("smoothly-icon", { part: "chevron", class: "up", name: "chevron-up", size: "tiny" })), index.h("smoothly-menu-options", { part: "menu-options", style: { width: "100%" }, optionStyle: Object.assign({}, this.optionStyle), order: false, emptyMenuLabel: this.emptyMenuLabel, newOptionLabel: this.newOptionLabel, "max-menu-height": this.maxMenuHeight, mutable: this.mutable, ref: (el) => (this.menuElement = el !== null && el !== void 0 ? el : this.menuElement), onClick: e => e.stopPropagation(), resetHighlightOnOptionsChange: false, options: options })));
|
|
34070
|
+
: this.selections.map(selection => selection.name).join(", "), onKeyDown: e => this.onKeyDown(e), onInput: (e) => this.onInput(e) }), index.h("smoothly-icon", { part: "chevron", class: "down", name: "chevron-down", size: "tiny" }), index.h("smoothly-icon", { part: "chevron", class: "up", name: "chevron-up", size: "tiny" })), index.h("smoothly-menu-options", { part: "menu-options", style: { width: "100%" }, toggle: true, optionStyle: Object.assign({}, this.optionStyle), order: false, emptyMenuLabel: this.emptyMenuLabel, newOptionLabel: this.newOptionLabel, "max-menu-height": this.maxMenuHeight, mutable: this.mutable, ref: (el) => (this.menuElement = el !== null && el !== void 0 ? el : this.menuElement), onClick: e => e.stopPropagation(), resetHighlightOnOptionsChange: false, options: options })));
|
|
34057
34071
|
}
|
|
34058
34072
|
get element() { return index.getElement(this); }
|
|
34059
34073
|
static get watchers() { return {
|
|
34060
34074
|
"isOpen": ["isOpenChangeHandler"]
|
|
34061
34075
|
}; }
|
|
34062
34076
|
};
|
|
34063
|
-
SmoothlyPicker.style = styleCss$
|
|
34077
|
+
SmoothlyPicker.style = styleCss$j;
|
|
34064
34078
|
|
|
34065
|
-
const styleCss$
|
|
34079
|
+
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
34080
|
|
|
34067
34081
|
const SmoothlyPopup = class {
|
|
34068
34082
|
constructor(hostRef) {
|
|
@@ -34091,9 +34105,9 @@ const SmoothlyPopup = class {
|
|
|
34091
34105
|
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
34106
|
}
|
|
34093
34107
|
};
|
|
34094
|
-
SmoothlyPopup.style = styleCss$
|
|
34108
|
+
SmoothlyPopup.style = styleCss$i;
|
|
34095
34109
|
|
|
34096
|
-
const styleCss$
|
|
34110
|
+
const styleCss$h = ".sc-smoothly-quiet-h{opacity:0.5}";
|
|
34097
34111
|
|
|
34098
34112
|
const SmoothlyQuiet = class {
|
|
34099
34113
|
constructor(hostRef) {
|
|
@@ -34103,9 +34117,9 @@ const SmoothlyQuiet = class {
|
|
|
34103
34117
|
return (index.h(index.Host, { color: this.color }, index.h("slot", null)));
|
|
34104
34118
|
}
|
|
34105
34119
|
};
|
|
34106
|
-
SmoothlyQuiet.style = styleCss$
|
|
34120
|
+
SmoothlyQuiet.style = styleCss$h;
|
|
34107
34121
|
|
|
34108
|
-
const styleCss$
|
|
34122
|
+
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
34123
|
|
|
34110
34124
|
const SmoothlyRadio = class {
|
|
34111
34125
|
constructor(hostRef) {
|
|
@@ -34124,7 +34138,7 @@ const SmoothlyRadio = class {
|
|
|
34124
34138
|
];
|
|
34125
34139
|
}
|
|
34126
34140
|
};
|
|
34127
|
-
SmoothlyRadio.style = styleCss$
|
|
34141
|
+
SmoothlyRadio.style = styleCss$g;
|
|
34128
34142
|
|
|
34129
34143
|
const SmoothlyRoom = class {
|
|
34130
34144
|
constructor(hostRef) {
|
|
@@ -34135,7 +34149,7 @@ const SmoothlyRoom = class {
|
|
|
34135
34149
|
}
|
|
34136
34150
|
};
|
|
34137
34151
|
|
|
34138
|
-
const styleCss$
|
|
34152
|
+
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
34153
|
|
|
34140
34154
|
const SmoothlySelect = class {
|
|
34141
34155
|
constructor(hostRef) {
|
|
@@ -34157,9 +34171,9 @@ const SmoothlySelect = class {
|
|
|
34157
34171
|
];
|
|
34158
34172
|
}
|
|
34159
34173
|
};
|
|
34160
|
-
SmoothlySelect.style = styleCss$
|
|
34174
|
+
SmoothlySelect.style = styleCss$f;
|
|
34161
34175
|
|
|
34162
|
-
const styleCss$
|
|
34176
|
+
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
34177
|
|
|
34164
34178
|
const SmoothlySelectDemo = class {
|
|
34165
34179
|
constructor(hostRef) {
|
|
@@ -34191,11 +34205,11 @@ const SmoothlySelectDemo = class {
|
|
|
34191
34205
|
} }),
|
|
34192
34206
|
index.h("smoothly-selector", null, index.h("smoothly-item", { value: "1" }, "January"), index.h("smoothly-item", { value: "2" }, "February"), index.h("smoothly-item", { value: "3" }, "March"), index.h("smoothly-item", { value: "4" }, "April"), index.h("smoothly-item", { value: "5" }, "May"), index.h("smoothly-item", { value: "6" }, "June"), index.h("smoothly-item", { value: "7" }, "July"), index.h("smoothly-item", { value: "8" }, "August"), index.h("smoothly-item", { value: "9" }, "September"), index.h("smoothly-item", { value: "10" }, "October"), index.h("smoothly-item", { value: "11" }, "November"), index.h("smoothly-item", { value: "12" }, "December")),
|
|
34193
34207
|
index.h("button", { onClick: () => this.alertf() }, "press here"),
|
|
34194
|
-
index.h("smoothly-picker", { label: "Filter", "empty-menu-label": "Sorry, we're out of options.", "max-height": "58px", multiple: true, options: [
|
|
34208
|
+
index.h("smoothly-picker", { label: "Filter", "empty-menu-label": "Sorry, we're out of options.", "max-height": "58px", maxMenuHeight: "20rem", multiple: true, options: [
|
|
34195
34209
|
{ name: "Big Dog", value: "dog", aliases: ["WOFF"] },
|
|
34196
|
-
{ name: "Cat Stevens", value: "cat", aliases: ["moew"] },
|
|
34210
|
+
{ name: "Cat Stevens", value: "cat", aliases: ["moew"], hint: "moew" },
|
|
34197
34211
|
{ name: "Noble Pig", value: "pig" },
|
|
34198
|
-
{ name: "Turtle Wax", value: "turtle" },
|
|
34212
|
+
{ name: "Turtle Wax", value: "turtle", hint: "slow" },
|
|
34199
34213
|
{ name: "Spider Man", value: "spider" },
|
|
34200
34214
|
{ name: "Phoenix Order Long Wooord", value: "phoenix" },
|
|
34201
34215
|
{ name: "Horse Back", value: "horse" },
|
|
@@ -34224,10 +34238,10 @@ const SmoothlySelectDemo = class {
|
|
|
34224
34238
|
{ name: "jane@example.com", value: "jane@example.com" },
|
|
34225
34239
|
{ name: "james@example.com", value: "james@example.com" },
|
|
34226
34240
|
{ name: "jessie@example.com", value: "jessie@example.com" },
|
|
34227
|
-
], valueValidator: (email) => email.match(/^\w+@\w+/) ? [true, undefined] : [false,
|
|
34241
|
+
], valueValidator: (email) => email.match(/^\w+@\w+/) ? [true, undefined] : [false, index$1.Notice.failed("Incorrectly formatted email")] }),
|
|
34228
34242
|
index.h("br", null),
|
|
34229
34243
|
index.h("smoothly-picker", { label: "Single select", multiple: false, "max-menu-height": "200px", options: [
|
|
34230
|
-
{ name: "Dog", value: "dog", aliases: ["WOFF"],
|
|
34244
|
+
{ name: "Dog", value: "dog", aliases: ["WOFF"], hint: "Woof 🐶" },
|
|
34231
34245
|
{ name: "Cat", value: "cat", aliases: ["moew"] },
|
|
34232
34246
|
{ name: "Pig", value: "pig" },
|
|
34233
34247
|
{ name: "Turtle", value: "turtle" },
|
|
@@ -34246,9 +34260,9 @@ const SmoothlySelectDemo = class {
|
|
|
34246
34260
|
];
|
|
34247
34261
|
}
|
|
34248
34262
|
};
|
|
34249
|
-
SmoothlySelectDemo.style = styleCss$
|
|
34263
|
+
SmoothlySelectDemo.style = styleCss$e;
|
|
34250
34264
|
|
|
34251
|
-
const styleCss$
|
|
34265
|
+
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
34266
|
|
|
34253
34267
|
const Selector = class {
|
|
34254
34268
|
constructor(hostRef) {
|
|
@@ -34358,9 +34372,9 @@ function isItem(value) {
|
|
|
34358
34372
|
(typeof value.selected == "boolean" || value.selected == undefined) &&
|
|
34359
34373
|
typeof value.filter == "function");
|
|
34360
34374
|
}
|
|
34361
|
-
Selector.style = styleCss$
|
|
34375
|
+
Selector.style = styleCss$d;
|
|
34362
34376
|
|
|
34363
|
-
const styleCss$
|
|
34377
|
+
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
34378
|
|
|
34365
34379
|
const SmoothlySkeleton = class {
|
|
34366
34380
|
constructor(hostRef) {
|
|
@@ -34378,9 +34392,9 @@ const SmoothlySkeleton = class {
|
|
|
34378
34392
|
return index.h(index.Host, { style: cssVariables });
|
|
34379
34393
|
}
|
|
34380
34394
|
};
|
|
34381
|
-
SmoothlySkeleton.style = styleCss$
|
|
34395
|
+
SmoothlySkeleton.style = styleCss$c;
|
|
34382
34396
|
|
|
34383
|
-
const styleCss$
|
|
34397
|
+
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
34398
|
|
|
34385
34399
|
const SmoothlySpinner = class {
|
|
34386
34400
|
constructor(hostRef) {
|
|
@@ -34395,9 +34409,22 @@ const SmoothlySpinner = class {
|
|
|
34395
34409
|
} }, 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
34410
|
}
|
|
34397
34411
|
};
|
|
34398
|
-
SmoothlySpinner.style = styleCss$
|
|
34412
|
+
SmoothlySpinner.style = styleCss$b;
|
|
34399
34413
|
|
|
34400
|
-
|
|
34414
|
+
var Data;
|
|
34415
|
+
(function (Data) {
|
|
34416
|
+
function set(data, [head, ...tail], value) {
|
|
34417
|
+
const current = data[head];
|
|
34418
|
+
return Object.assign(Object.assign({}, data), { [head]: !tail.length ? value : set(typeof current == "object" ? current : {}, tail, value) });
|
|
34419
|
+
}
|
|
34420
|
+
Data.set = set;
|
|
34421
|
+
function deepen(data) {
|
|
34422
|
+
return Object.entries(data).reduce((result, [name, value]) => set(result, name.split("."), value), {});
|
|
34423
|
+
}
|
|
34424
|
+
Data.deepen = deepen;
|
|
34425
|
+
})(Data || (Data = {}));
|
|
34426
|
+
|
|
34427
|
+
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
34428
|
|
|
34402
34429
|
const SmoothlySubmit = class {
|
|
34403
34430
|
constructor(hostRef) {
|
|
@@ -34428,7 +34455,7 @@ const SmoothlySubmit = class {
|
|
|
34428
34455
|
result[element.name] = element.value;
|
|
34429
34456
|
}
|
|
34430
34457
|
}
|
|
34431
|
-
this.submitEvent.emit(result);
|
|
34458
|
+
this.submitEvent.emit(Data.deepen(result));
|
|
34432
34459
|
this.processing = false;
|
|
34433
34460
|
}
|
|
34434
34461
|
}
|
|
@@ -34448,41 +34475,7 @@ const SmoothlySubmit = class {
|
|
|
34448
34475
|
function hasNameAndValue(element) {
|
|
34449
34476
|
return (typeof element.name == "string" && typeof element.value == "string");
|
|
34450
34477
|
}
|
|
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;
|
|
34478
|
+
SmoothlySubmit.style = styleCss$a;
|
|
34486
34479
|
|
|
34487
34480
|
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
34481
|
|
|
@@ -34778,7 +34771,6 @@ exports.smoothly_selector = Selector;
|
|
|
34778
34771
|
exports.smoothly_skeleton = SmoothlySkeleton;
|
|
34779
34772
|
exports.smoothly_spinner = SmoothlySpinner;
|
|
34780
34773
|
exports.smoothly_submit = SmoothlySubmit;
|
|
34781
|
-
exports.smoothly_svg = SmoothlySvg;
|
|
34782
34774
|
exports.smoothly_tab = SmoothlyTab;
|
|
34783
34775
|
exports.smoothly_tab_switch = SmoothlyTabSwitch;
|
|
34784
34776
|
exports.smoothly_table = Table;
|