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
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { r as registerInstance, h, a as getElement, c as createEvent, H as Host } from './index-4d9efff8.js';
|
|
2
|
-
import { A as App, N as Notice } from './
|
|
2
|
+
import { r as redirect, A as App, N as Notice } from './index-1d438ba2.js';
|
|
3
3
|
import { T as Trigger, M as Message } from './Trigger-327e506e.js';
|
|
4
4
|
import './GoogleFont-8474516b.js';
|
|
5
5
|
|
|
6
|
-
const styleCss$
|
|
6
|
+
const styleCss$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}";
|
|
7
7
|
|
|
8
8
|
const SmoothlyAccordion = class {
|
|
9
9
|
constructor(hostRef) {
|
|
@@ -49,9 +49,9 @@ const SmoothlyAccordion = class {
|
|
|
49
49
|
"value": ["valueChanged"]
|
|
50
50
|
}; }
|
|
51
51
|
};
|
|
52
|
-
SmoothlyAccordion.style = styleCss$
|
|
52
|
+
SmoothlyAccordion.style = styleCss$G;
|
|
53
53
|
|
|
54
|
-
const styleCss$
|
|
54
|
+
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))}";
|
|
55
55
|
|
|
56
56
|
const SmoothlyAccordionItem = class {
|
|
57
57
|
constructor(hostRef) {
|
|
@@ -96,9 +96,9 @@ const SmoothlyAccordionItem = class {
|
|
|
96
96
|
"open": ["openChanged"]
|
|
97
97
|
}; }
|
|
98
98
|
};
|
|
99
|
-
SmoothlyAccordionItem.style = styleCss$
|
|
99
|
+
SmoothlyAccordionItem.style = styleCss$F;
|
|
100
100
|
|
|
101
|
-
const styleCss$
|
|
101
|
+
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}";
|
|
102
102
|
|
|
103
103
|
const SmoothlyApp = class {
|
|
104
104
|
constructor(hostRef) {
|
|
@@ -108,30 +108,34 @@ const SmoothlyApp = class {
|
|
|
108
108
|
return (h("smoothly-notifier", null, h("slot", null)));
|
|
109
109
|
}
|
|
110
110
|
};
|
|
111
|
-
SmoothlyApp.style = styleCss$
|
|
111
|
+
SmoothlyApp.style = styleCss$E;
|
|
112
112
|
|
|
113
113
|
const SmoothlyAppDemo = class {
|
|
114
114
|
constructor(hostRef) {
|
|
115
115
|
registerInstance(this, hostRef);
|
|
116
116
|
}
|
|
117
117
|
render() {
|
|
118
|
-
return (h(App, { label: "Smoothly Demo" }, h("a", { slot: "nav-start", href: "display" }, "Display"), h("a", { slot: "nav-start", href: "https://google.com" }, "External"), h("smoothly-room", { path: "" }, h("smoothly-input", { type: "text" }, "Default"), h("div", { style: { padding: "1em", maxWidth: "12em" } }, h("smoothly-button", { fill: "solid", color: "danger", link: "https://google.com" }, "open"), h("smoothly-button", { fill: "solid", color: "danger", link: "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf", download: true }, "download"), h("smoothly-button", { fill: "solid", color: "danger", onClick: () => alert("clicked") }, "action"), h("smoothly-button", { type: "link", fill: "clear", color: "danger", onClick: () => alert("clicked") }, "action link"))), h("smoothly-room", { path: "input", label: "Input" }, h("smoothly-input-demo", null)), h("smoothly-room", { path: "dialog", label: "Dialog" }, h("smoothly-dialog-demo", null)), h("smoothly-room", { path: "display", label: "Display", icon: "eye-outline" }, h("smoothly-display-demo", null)), h("smoothly-room", { path: "table", label: "Table" }, h("smoothly-table-demo", null)), h("smoothly-room", { path: "select", label: "Select" }, h("smoothly-select-demo", null)), h("smoothly-room", { path: "icon", label: "Icon" }, h("smoothly-icon-demo", null)), h("smoothly-room", { path: "
|
|
118
|
+
return (h(App, { label: "Smoothly Demo" }, h("a", { slot: "nav-start", href: "display" }, "Display"), h("a", { slot: "nav-start", href: "https://google.com" }, "External"), h("smoothly-room", { path: "" }, h("smoothly-input", { type: "text" }, "Default"), h("div", { style: { padding: "1em", maxWidth: "12em" } }, h("smoothly-button", { fill: "solid", color: "danger", link: "https://google.com" }, "open"), h("smoothly-button", { fill: "solid", color: "danger", link: "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf", download: true }, "download"), h("smoothly-button", { fill: "solid", color: "danger", onClick: () => alert("clicked") }, "action"), h("smoothly-button", { type: "link", fill: "clear", color: "danger", onClick: () => alert("clicked") }, "action link"))), h("smoothly-room", { path: "input", label: "Input" }, h("smoothly-input-demo", null)), h("smoothly-room", { path: "dialog", label: "Dialog" }, h("smoothly-dialog-demo", null)), h("smoothly-room", { path: "display", label: "Display", icon: "eye-outline" }, h("smoothly-display-demo", null)), h("smoothly-room", { path: "table", label: "Table" }, h("smoothly-table-demo", null)), h("smoothly-room", { path: "select", label: "Select" }, h("smoothly-select-demo", null)), h("smoothly-room", { path: "icon", label: "Icon" }, h("smoothly-icon-demo", null)), h("smoothly-room", { path: "/redirect", label: "Redirect" }, h("smoothly-button", { style: { "max-width": "300px" }, onClick: () => {
|
|
119
|
+
redirect("/routing/pathParameter1");
|
|
120
|
+
} }, "Internal"), h("smoothly-button", { style: { "max-width": "300px" }, onClick: () => {
|
|
121
|
+
redirect("https://google.com");
|
|
122
|
+
} }, "External")), h("smoothly-room", { path: /^\/routing\/\w+\/?/, label: "No effect" }, h("h2", null, "Regex routing")), h("smoothly-room", { path: "old", label: "Old", to: "select" }), h("span", { slot: "header", style: { width: "100%", maxWidth: "500px" } }, 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: [
|
|
119
123
|
{ name: "Big Dog", value: "dog", aliases: ["WOFF"] },
|
|
120
|
-
{ name: "Cat Stevens", value: "cat", aliases: ["moew"],
|
|
121
|
-
{ name: "Noble Pig", value: "pig",
|
|
122
|
-
{ name: "Turtle Wax", value: "turtle"
|
|
123
|
-
{ name: "Spider Man", value: "spider"
|
|
124
|
-
{ name: "Phoenix Order Long Wooord", value: "phoenix"
|
|
125
|
-
{ name: "Horse Back", value: "horse"
|
|
126
|
-
{ name: "Unicorn Horn", value: "unicorn"
|
|
127
|
-
{ name: "Talking Parrot Parrot", value: "parrot"
|
|
128
|
-
{ name: "Hidden Dragon", value: "dragon"
|
|
129
|
-
{ name: "Scary Kraken", value: "kraken"
|
|
124
|
+
{ name: "Cat Stevens", value: "cat", aliases: ["moew"], hint: "moew 🐈" },
|
|
125
|
+
{ name: "Noble Pig", value: "pig", hint: "🐷" },
|
|
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" },
|
|
130
134
|
] })), h("smoothly-trigger", { slot: "header", type: "link", name: "logout" }, h("smoothly-icon", { toolTip: "Log out", name: "log-out", size: "medium" }))));
|
|
131
135
|
}
|
|
132
136
|
};
|
|
133
137
|
|
|
134
|
-
const styleCss$
|
|
138
|
+
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}";
|
|
135
139
|
|
|
136
140
|
const SmoothlyBacktotop = class {
|
|
137
141
|
constructor(hostRef) {
|
|
@@ -159,9 +163,9 @@ const SmoothlyBacktotop = class {
|
|
|
159
163
|
}) }, h("smoothly-icon", { name: "chevron-up-outline" })));
|
|
160
164
|
}
|
|
161
165
|
};
|
|
162
|
-
SmoothlyBacktotop.style = styleCss$
|
|
166
|
+
SmoothlyBacktotop.style = styleCss$D;
|
|
163
167
|
|
|
164
|
-
const styleCss$
|
|
168
|
+
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}";
|
|
165
169
|
|
|
166
170
|
const SmoothlyButton = class {
|
|
167
171
|
constructor(hostRef) {
|
|
@@ -182,7 +186,7 @@ const SmoothlyButton = class {
|
|
|
182
186
|
return result;
|
|
183
187
|
}
|
|
184
188
|
};
|
|
185
|
-
SmoothlyButton.style = styleCss$
|
|
189
|
+
SmoothlyButton.style = styleCss$C;
|
|
186
190
|
|
|
187
191
|
var CallingCode$1;
|
|
188
192
|
(function (CallingCode) {
|
|
@@ -6302,7 +6306,7 @@ function years(current) {
|
|
|
6302
6306
|
return result;
|
|
6303
6307
|
}
|
|
6304
6308
|
|
|
6305
|
-
const styleCss$
|
|
6309
|
+
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)}";
|
|
6306
6310
|
|
|
6307
6311
|
const Calendar = class {
|
|
6308
6312
|
constructor(hostRef) {
|
|
@@ -6385,7 +6389,7 @@ const Calendar = class {
|
|
|
6385
6389
|
"end": ["onEnd"]
|
|
6386
6390
|
}; }
|
|
6387
6391
|
};
|
|
6388
|
-
Calendar.style = styleCss$
|
|
6392
|
+
Calendar.style = styleCss$B;
|
|
6389
6393
|
|
|
6390
6394
|
var CallingCode;
|
|
6391
6395
|
(function (CallingCode) {
|
|
@@ -12325,7 +12329,7 @@ function create(language) {
|
|
|
12325
12329
|
}, language);
|
|
12326
12330
|
}
|
|
12327
12331
|
|
|
12328
|
-
const styleCss$
|
|
12332
|
+
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)}";
|
|
12329
12333
|
|
|
12330
12334
|
const SmoothlyCheckbox = class {
|
|
12331
12335
|
constructor(hostRef) {
|
|
@@ -12352,9 +12356,9 @@ const SmoothlyCheckbox = class {
|
|
|
12352
12356
|
}
|
|
12353
12357
|
get element() { return getElement(this); }
|
|
12354
12358
|
};
|
|
12355
|
-
SmoothlyCheckbox.style = styleCss$
|
|
12359
|
+
SmoothlyCheckbox.style = styleCss$A;
|
|
12356
12360
|
|
|
12357
|
-
const styleCss$
|
|
12361
|
+
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}";
|
|
12358
12362
|
|
|
12359
12363
|
const SmoothlyDialog = class {
|
|
12360
12364
|
constructor(hostRef) {
|
|
@@ -12381,7 +12385,7 @@ const SmoothlyDialog = class {
|
|
|
12381
12385
|
}
|
|
12382
12386
|
render() { return h(Host, this.hostData(), this.__stencil_render()); }
|
|
12383
12387
|
};
|
|
12384
|
-
SmoothlyDialog.style = styleCss$
|
|
12388
|
+
SmoothlyDialog.style = styleCss$z;
|
|
12385
12389
|
|
|
12386
12390
|
const SmoothlyDialogDemo = class {
|
|
12387
12391
|
constructor(hostRef) {
|
|
@@ -32602,7 +32606,7 @@ Object.defineProperty(exports, "StateEditor", { enumerable: true, get: function
|
|
|
32602
32606
|
//# sourceMappingURL=index.js.map
|
|
32603
32607
|
});
|
|
32604
32608
|
|
|
32605
|
-
const styleCss$
|
|
32609
|
+
const styleCss$y = ".sc-smoothly-display-h{display:block}[hidden].sc-smoothly-display-h{display:none}";
|
|
32606
32610
|
|
|
32607
32611
|
const SmoothlyDisplay = class {
|
|
32608
32612
|
constructor(hostRef) {
|
|
@@ -32644,9 +32648,9 @@ function getLocale$1() {
|
|
|
32644
32648
|
const result = navigator.language;
|
|
32645
32649
|
return Locale$1.is(result) ? result : Language$1.is(result) ? Locale$1.toLocale(result) : undefined;
|
|
32646
32650
|
}
|
|
32647
|
-
SmoothlyDisplay.style = styleCss$
|
|
32651
|
+
SmoothlyDisplay.style = styleCss$y;
|
|
32648
32652
|
|
|
32649
|
-
const styleCss$
|
|
32653
|
+
const styleCss$x = ".sc-smoothly-display-amount-h{display:block}[hidden].sc-smoothly-display-amount-h{display:none}";
|
|
32650
32654
|
|
|
32651
32655
|
const SmoothlyDisplayAmount = class {
|
|
32652
32656
|
constructor(hostRef) {
|
|
@@ -32694,9 +32698,9 @@ const SmoothlyDisplayAmount = class {
|
|
|
32694
32698
|
];
|
|
32695
32699
|
}
|
|
32696
32700
|
};
|
|
32697
|
-
SmoothlyDisplayAmount.style = styleCss$
|
|
32701
|
+
SmoothlyDisplayAmount.style = styleCss$x;
|
|
32698
32702
|
|
|
32699
|
-
const styleCss$
|
|
32703
|
+
const styleCss$w = ".sc-smoothly-display-date-time-h{display:block}[hidden].sc-smoothly-display-date-time-h{display:none}";
|
|
32700
32704
|
|
|
32701
32705
|
const SmoothlyDisplayDateTime = class {
|
|
32702
32706
|
constructor(hostRef) {
|
|
@@ -32710,7 +32714,7 @@ const SmoothlyDisplayDateTime = class {
|
|
|
32710
32714
|
return [datetime[0], " ", datetime[1]];
|
|
32711
32715
|
}
|
|
32712
32716
|
};
|
|
32713
|
-
SmoothlyDisplayDateTime.style = styleCss$
|
|
32717
|
+
SmoothlyDisplayDateTime.style = styleCss$w;
|
|
32714
32718
|
|
|
32715
32719
|
const SmoothlyDisplayDemo = class {
|
|
32716
32720
|
constructor(hostRef) {
|
|
@@ -32723,12 +32727,12 @@ const SmoothlyDisplayDemo = class {
|
|
|
32723
32727
|
}
|
|
32724
32728
|
render() {
|
|
32725
32729
|
return [
|
|
32726
|
-
h("main", null, h("smoothly-popup", null, h("div", null, "Popup, click me"), h("div", { color: "dark", slot: "popup" }, "1 line popup")), h("smoothly-display-date-time", { datetime: "2019-08-15T08:08:17.65Z" }), h("dl", null, h("dt", null, "text"), h("dd", null, h("smoothly-display", { type: "text", value: "text" })), h("dt", null, "postal code"), h("dd", null, h("smoothly-display", { type: "postal-code", value: "752 31" })), h("dt", null, "password"), h("dd", null, h("smoothly-display", { type: "password", value: "password" })), h("dt", null, "email"), h("dd", null, h("smoothly-display", { type: "email", value: "test@example.com" })), h("dt", null, "price"), h("dd", null, h("smoothly-display", { type: "price", value: "13.37", currency: "SEK" })), h("dt", null, "percent"), h("dd", null, h("smoothly-display", { type: "percent", value: "42" })), h("dt", null, "phone"), h("dd", null, h("smoothly-display", { type: "phone", value: "0101881108" })), h("dt", null, "card number"), h("dd", null, h("smoothly-display", { type: "card-number", value: "4111111111111111" })), h("dt", null, "card expires"), h("dd", null, h("smoothly-display", { type: "card-expires", value: "7/22" })), h("dt", null, "card csc"), h("dd", null, h("smoothly-display", { type: "card-csc", value: "987" })), h("dt", null, "date"), h("dd", null, h("smoothly-display", { type: "date", value: "2022-07-07" })), h("dt", null, "Quiet"), h("dd", null, h("smoothly-quiet", { color: "dark" }, "-"))), h("smoothly-skeleton", { period: 3, distance: "20rem", width: "20rem" }), h("smoothly-skeleton", { period: 3, distance: "20rem", color: "200,200,255" }), h("smoothly-skeleton", { period: 3, distance: "20rem", color: "var(--smoothly-warning-color)" }), h("smoothly-skeleton", { period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem", width: "20rem" }), h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem", width: "20rem" }), h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }), h("smoothly-urlencoded", { data: "hej=hopp&tjena=moss" }), h("div", { style: { display: "flex", justifyContent: "space-between" } }, h("smoothly-popup", { direction: "down" }, "Click for popup", h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup stuff that has a lot of text")), h("smoothly-popup", { direction: "down" }, "Click for popup", h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup with a bunch of text."))), h("p", null, "Test of diffrent kinds of notifier:"), h("button", { onClick: () => this.noticeWarning(Notice.warn("This is a test warning notice.")) }, "warning"), h("button", { onClick: () => this.noticeWarning(Notice.succeded("This is a test success notice.")) }, "success"), h("button", { onClick: () => this.noticeWarning(Notice.failed("This is a test danger notice.")) }, "danger"), h("button", { onClick: () => this.noticeWarning(Notice.execute("This is a test execute notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "execute"), h("button", { onClick: () => this.noticeWarning(Notice.delay("This is a test delay notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "delay")
|
|
32730
|
+
h("main", null, h("smoothly-popup", null, h("div", null, "Popup, click me"), h("div", { color: "dark", slot: "popup" }, "1 line popup")), h("smoothly-display-date-time", { datetime: "2019-08-15T08:08:17.65Z" }), h("dl", null, h("dt", null, "text"), h("dd", null, h("smoothly-display", { type: "text", value: "text" })), h("dt", null, "postal code"), h("dd", null, h("smoothly-display", { type: "postal-code", value: "752 31" })), h("dt", null, "password"), h("dd", null, h("smoothly-display", { type: "password", value: "password" })), h("dt", null, "email"), h("dd", null, h("smoothly-display", { type: "email", value: "test@example.com" })), h("dt", null, "price"), h("dd", null, h("smoothly-display", { type: "price", value: "13.37", currency: "SEK" })), h("dt", null, "percent"), h("dd", null, h("smoothly-display", { type: "percent", value: "42" })), h("dt", null, "phone"), h("dd", null, h("smoothly-display", { type: "phone", value: "0101881108" })), h("dt", null, "card number"), h("dd", null, h("smoothly-display", { type: "card-number", value: "4111111111111111" })), h("dt", null, "card expires"), h("dd", null, h("smoothly-display", { type: "card-expires", value: "7/22" })), h("dt", null, "card csc"), h("dd", null, h("smoothly-display", { type: "card-csc", value: "987" })), h("dt", null, "date"), h("dd", null, h("smoothly-display", { type: "date", value: "2022-07-07" })), h("dt", null, "date time"), h("dd", null, h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "short", day: "numeric", hour: "numeric", minute: "numeric", second: "numeric" }, value: "2022-07-07T02:02:02Z" })), h("dd", null, h("smoothly-display", { type: "date-time", format: { year: "2-digit", month: "long", day: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit" }, value: "2022-07-07T02:02:02Z" })), h("dd", null, h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "2-digit", day: "2-digit", hour: "numeric", minute: "numeric", second: "numeric" }, value: "2022-07-07T12:22:24Z" })), h("dd", null, h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "numeric", day: "numeric", hour: "numeric", minute: "numeric", second: "numeric" }, value: "2022-07-07T12:22:24Z" })), h("dd", null, h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "short", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), h("dd", null, h("smoothly-display", { type: "date-time", format: { year: "2-digit", month: "numeric", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), h("dd", null, h("smoothly-display", { type: "date-time", format: { year: "2-digit", month: "numeric", day: "numeric", hour: "2-digit", minute: "2-digit", second: "2-digit", timeZone: "+01:00" }, value: "2022-07-07T12:15Z" })), h("dt", null, "Quiet"), h("dd", null, h("smoothly-quiet", { color: "dark" }, "-"))), h("smoothly-skeleton", { period: 3, distance: "20rem", width: "20rem" }), h("smoothly-skeleton", { period: 3, distance: "20rem", color: "200,200,255" }), h("smoothly-skeleton", { period: 3, distance: "20rem", color: "var(--smoothly-warning-color)" }), h("smoothly-skeleton", { period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem", width: "20rem" }), h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem", width: "20rem" }), h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }), h("smoothly-urlencoded", { data: "hej=hopp&tjena=moss" }), h("div", { style: { display: "flex", justifyContent: "space-between" } }, h("smoothly-popup", { direction: "down" }, "Click for popup", h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup stuff that has a lot of text")), h("smoothly-popup", { direction: "down" }, "Click for popup", h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup with a bunch of text."))), h("p", null, "Test of diffrent kinds of notifier:"), h("button", { onClick: () => this.noticeWarning(Notice.warn("This is a test warning notice.")) }, "warning"), h("button", { onClick: () => this.noticeWarning(Notice.succeded("This is a test success notice.")) }, "success"), h("button", { onClick: () => this.noticeWarning(Notice.failed("This is a test danger notice.")) }, "danger"), h("button", { onClick: () => this.noticeWarning(Notice.execute("This is a test execute notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "execute"), h("button", { onClick: () => this.noticeWarning(Notice.delay("This is a test delay notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "delay")),
|
|
32727
32731
|
];
|
|
32728
32732
|
}
|
|
32729
32733
|
};
|
|
32730
32734
|
|
|
32731
|
-
const styleCss$
|
|
32735
|
+
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}";
|
|
32732
32736
|
|
|
32733
32737
|
const SmoothlyFrame = class {
|
|
32734
32738
|
constructor(hostRef) {
|
|
@@ -32767,9 +32771,9 @@ const SmoothlyFrame = class {
|
|
|
32767
32771
|
}
|
|
32768
32772
|
get element() { return getElement(this); }
|
|
32769
32773
|
};
|
|
32770
|
-
SmoothlyFrame.style = styleCss$
|
|
32774
|
+
SmoothlyFrame.style = styleCss$v;
|
|
32771
32775
|
|
|
32772
|
-
const styleCss$
|
|
32776
|
+
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}";
|
|
32773
32777
|
|
|
32774
32778
|
const SmoothlyIcon = class {
|
|
32775
32779
|
constructor(hostRef) {
|
|
@@ -32812,9 +32816,9 @@ const SmoothlyIcon = class {
|
|
|
32812
32816
|
render() { return h(Host, this.hostData(), this.__stencil_render()); }
|
|
32813
32817
|
};
|
|
32814
32818
|
SmoothlyIcon.cache = {};
|
|
32815
|
-
SmoothlyIcon.style = styleCss$
|
|
32819
|
+
SmoothlyIcon.style = styleCss$u;
|
|
32816
32820
|
|
|
32817
|
-
const styleCss$
|
|
32821
|
+
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}";
|
|
32818
32822
|
|
|
32819
32823
|
const SmoothlyIconDemo = class {
|
|
32820
32824
|
constructor(hostRef) {
|
|
@@ -33296,9 +33300,9 @@ const SmoothlyIconDemo = class {
|
|
|
33296
33300
|
];
|
|
33297
33301
|
}
|
|
33298
33302
|
};
|
|
33299
|
-
SmoothlyIconDemo.style = styleCss$
|
|
33303
|
+
SmoothlyIconDemo.style = styleCss$t;
|
|
33300
33304
|
|
|
33301
|
-
const styleCss$
|
|
33305
|
+
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)))}";
|
|
33302
33306
|
|
|
33303
33307
|
const SmoothlyInput = class {
|
|
33304
33308
|
constructor(hostRef) {
|
|
@@ -33502,9 +33506,9 @@ function getLocale() {
|
|
|
33502
33506
|
const result = navigator.language;
|
|
33503
33507
|
return Locale$1.is(result) ? result : Language$1.is(result) ? Locale$1.toLocale(result) : undefined;
|
|
33504
33508
|
}
|
|
33505
|
-
SmoothlyInput.style = styleCss$
|
|
33509
|
+
SmoothlyInput.style = styleCss$s;
|
|
33506
33510
|
|
|
33507
|
-
const styleCss$
|
|
33511
|
+
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))}";
|
|
33508
33512
|
|
|
33509
33513
|
const InputDate = class {
|
|
33510
33514
|
constructor(hostRef) {
|
|
@@ -33521,7 +33525,7 @@ const InputDate = class {
|
|
|
33521
33525
|
render() {
|
|
33522
33526
|
var _a;
|
|
33523
33527
|
return [
|
|
33524
|
-
h("smoothly-input", { onClick: () => (this.open = !this.open), disabled: this.disabled, type: "date", value: this.value, onSmoothlyInput: e => (this.value = e.detail.value) }, h("slot", null)),
|
|
33528
|
+
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) }, h("slot", null)),
|
|
33525
33529
|
this.open && !this.disabled
|
|
33526
33530
|
? [
|
|
33527
33531
|
h("div", { onClick: () => (this.open = false) }),
|
|
@@ -33537,9 +33541,9 @@ const InputDate = class {
|
|
|
33537
33541
|
"value": ["onStart"]
|
|
33538
33542
|
}; }
|
|
33539
33543
|
};
|
|
33540
|
-
InputDate.style = styleCss$
|
|
33544
|
+
InputDate.style = styleCss$r;
|
|
33541
33545
|
|
|
33542
|
-
const styleCss$
|
|
33546
|
+
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}";
|
|
33543
33547
|
|
|
33544
33548
|
const InputDateRange = class {
|
|
33545
33549
|
constructor(hostRef) {
|
|
@@ -33578,7 +33582,7 @@ const InputDateRange = class {
|
|
|
33578
33582
|
"value": ["onValue"]
|
|
33579
33583
|
}; }
|
|
33580
33584
|
};
|
|
33581
|
-
InputDateRange.style = styleCss$
|
|
33585
|
+
InputDateRange.style = styleCss$q;
|
|
33582
33586
|
|
|
33583
33587
|
const SmoothlyInputDemo = class {
|
|
33584
33588
|
constructor(hostRef) {
|
|
@@ -33586,13 +33590,13 @@ const SmoothlyInputDemo = class {
|
|
|
33586
33590
|
}
|
|
33587
33591
|
render() {
|
|
33588
33592
|
return [
|
|
33589
|
-
h("form", { action: "done", style: { position: "relative" } }, h("header", null, h("h5", null, "Address")), h("main", null, h("smoothly-input", { type: "text", name: "name", readonly: true, value: "Readonly", onSmoothlyBlur: () => console.log("smoothly blur") }, "Readonly"), h("smoothly-input", { type: "text", name: "name", onSmoothlyChange: e => console.log("smoothly change event") }, "Name"), h("smoothly-input", { type: "date", name: "date" }, "Date"), h("smoothly-input", { type: "date-time", name: "date-time" }, "Date-Time"), h("smoothly-input", { type: "divisor", name: "divisor" }, "Divisor"), h("smoothly-input", { type: "text", name: "street", value: "street" }, "Street"), h("smoothly-input", { type: "card-number", name: "card" }, "Card #"), h("smoothly-input", { type: "card-expires", name: "card", style: { width: "calc(60% - 2px)" } }, "Expires"), h("smoothly-input", { type: "card-csc", name: "card", style: { width: "calc(40% - 1px)", borderLeft: "none" } }, "CVV/CVC"), h("smoothly-radio", { name: "option", value: "1" }, "option 1"), h("smoothly-radio", { name: "option", value: "2", checked: true }, "option 2"), h("smoothly-radio", { name: "option", value: "3" }, "option 3"), h("smoothly-accordion", null, h("smoothly-accordion-item", { name: "A", open: true }, h("smoothly-radio", { name: "a", value: "1" }, "a 1"), h("smoothly-radio", { name: "a", value: "2", checked: true }, "a 2"), h("smoothly-radio", { name: "a", value: "3" }, "a 3")), h("smoothly-accordion-item", { name: "B" }, h("smoothly-radio", { name: "b", value: "1" }, "b 1"), h("smoothly-radio", { name: "b", value: "2" }, "b 2"), h("smoothly-radio", { name: "b", value: "3" }, "b 3"))), h("smoothly-display-amount", { currency: "SEK", amount: "1289.5" }), h("smoothly-display-date-time", { datetime: "2019-01-31T20:01:34" }), h("smoothly-checkbox", { selectAll: true, intermediate: true }), h("smoothly-checkbox", null), h("smoothly-checkbox", { disabled: true }), h("smoothly-address-display", { value: '{ "countryCode": "SE", "street": "Korkstigen 2", "zipCode": "654 31", "city": "Fejksala" }' }), h("smoothly-address", { editable: false, value: '{ "countryCode": "SE", "street": "Stigv\u00E4gen 34", "zipCode": "123 45", "city": "Hobbiton" }' }), h("smoothly-addresses", { allowed: "billing delivery visit", editable: true, value: '{ "billing": { "countryCode": "SE", "street": "Rundslingan 3", "zipCode": "987 65", "city": "Klotby" }, "visit": { "countryCode": "SE", "street": "G\u00E5ngbanan 34", "zipCode": "543 21", "city": "Trasktr\u00E4sk" } }' }), h("smoothly-input", { type: "postal-code", name: "zip", style: { width: "calc(60% - 2px)" } }, "ZipCode"), h("smoothly-input", { type: "text", name: "testing" }, "Texttest"), h("smoothly-input", { type: "password", name: "password" }, "Password"), h("smoothly-input", { type: "email", name: "email" }, "Email"), h("smoothly-input", { type: "price", currency: "SEK", name: "price" }, "Price"), h("smoothly-input", { type: "percent", name: "percent" }, "Percent"), h("smoothly-input", { type: "phone", name: "phone" }, "Phone"), h("smoothly-input-date", null, "Date")), h("footer", null, h("smoothly-submit", { expand: "block", onSubmit: (e) => alert(e), color: "success" }, "Submit"), h("smoothly-trigger", { expand: "block", color: "success", onClick: (e) => console.log(e.detail) }, "Trigger"))),
|
|
33593
|
+
h("form", { action: "done", style: { position: "relative" } }, h("header", null, h("h5", null, "Address")), h("main", null, h("smoothly-input", { type: "text", name: "name", readonly: true, value: "Readonly", onSmoothlyBlur: () => console.log("smoothly blur") }, "Readonly"), h("smoothly-input", { type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, "Name"), h("smoothly-input", { type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Name"), h("smoothly-input-date", null), h("smoothly-input", { type: "date", name: "date" }, "Date"), h("smoothly-input", { type: "date-time", name: "date-time" }, "Date-Time"), h("smoothly-input", { type: "divisor", name: "divisor" }, "Divisor"), h("smoothly-input", { type: "text", name: "street", value: "street" }, "Street"), h("smoothly-input", { type: "card-number", name: "card" }, "Card #"), h("smoothly-input", { type: "card-expires", name: "card", style: { width: "calc(60% - 2px)" } }, "Expires"), h("smoothly-input", { type: "card-csc", name: "card", style: { width: "calc(40% - 1px)", borderLeft: "none" } }, "CVV/CVC"), h("smoothly-radio", { name: "option", value: "1" }, "option 1"), h("smoothly-radio", { name: "option", value: "2", checked: true }, "option 2"), h("smoothly-radio", { name: "option", value: "3" }, "option 3"), h("smoothly-accordion", null, h("smoothly-accordion-item", { name: "A", open: true }, h("smoothly-radio", { name: "a", value: "1" }, "a 1"), h("smoothly-radio", { name: "a", value: "2", checked: true }, "a 2"), h("smoothly-radio", { name: "a", value: "3" }, "a 3")), h("smoothly-accordion-item", { name: "B" }, h("smoothly-radio", { name: "b", value: "1" }, "b 1"), h("smoothly-radio", { name: "b", value: "2" }, "b 2"), h("smoothly-radio", { name: "b", value: "3" }, "b 3"))), h("smoothly-display-amount", { currency: "SEK", amount: "1289.5" }), h("smoothly-display-date-time", { datetime: "2019-01-31T20:01:34" }), h("smoothly-checkbox", { selectAll: true, intermediate: true }), h("smoothly-checkbox", null), h("smoothly-checkbox", { disabled: true }), h("smoothly-address-display", { value: '{ "countryCode": "SE", "street": "Korkstigen 2", "zipCode": "654 31", "city": "Fejksala" }' }), h("smoothly-address", { editable: false, value: '{ "countryCode": "SE", "street": "Stigv\u00E4gen 34", "zipCode": "123 45", "city": "Hobbiton" }' }), h("smoothly-addresses", { allowed: "billing delivery visit", editable: true, value: '{ "billing": { "countryCode": "SE", "street": "Rundslingan 3", "zipCode": "987 65", "city": "Klotby" }, "visit": { "countryCode": "SE", "street": "G\u00E5ngbanan 34", "zipCode": "543 21", "city": "Trasktr\u00E4sk" } }' }), h("smoothly-input", { type: "postal-code", name: "zip", style: { width: "calc(60% - 2px)" } }, "ZipCode"), h("smoothly-input", { type: "text", name: "testing" }, "Texttest"), h("smoothly-input", { type: "password", name: "password" }, "Password"), h("smoothly-input", { type: "email", name: "email" }, "Email"), h("smoothly-input", { type: "price", currency: "SEK", name: "price" }, "Price"), h("smoothly-input", { type: "percent", name: "percent" }, "Percent"), h("smoothly-input", { type: "phone", name: "phone" }, "Phone"), h("smoothly-input-date", null, "Date")), h("footer", null, h("smoothly-submit", { expand: "block", onSubmit: (e) => alert(e), color: "success" }, "Submit"), h("smoothly-trigger", { expand: "block", color: "success", onClick: (e) => console.log(e.detail) }, "Trigger"))),
|
|
33590
33594
|
h("smoothly-backtotop", null),
|
|
33591
33595
|
];
|
|
33592
33596
|
}
|
|
33593
33597
|
};
|
|
33594
33598
|
|
|
33595
|
-
const styleCss$
|
|
33599
|
+
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}";
|
|
33596
33600
|
|
|
33597
33601
|
const MonthSelector = class {
|
|
33598
33602
|
constructor(hostRef) {
|
|
@@ -33621,9 +33625,9 @@ const MonthSelector = class {
|
|
|
33621
33625
|
"value": ["onValueChanged"]
|
|
33622
33626
|
}; }
|
|
33623
33627
|
};
|
|
33624
|
-
MonthSelector.style = styleCss$
|
|
33628
|
+
MonthSelector.style = styleCss$p;
|
|
33625
33629
|
|
|
33626
|
-
const styleCss$
|
|
33630
|
+
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))}";
|
|
33627
33631
|
|
|
33628
33632
|
const Item = class {
|
|
33629
33633
|
constructor(hostRef) {
|
|
@@ -33657,16 +33661,18 @@ const Item = class {
|
|
|
33657
33661
|
"selected": ["onSelectedChanged"]
|
|
33658
33662
|
}; }
|
|
33659
33663
|
};
|
|
33660
|
-
Item.style = styleCss$
|
|
33664
|
+
Item.style = styleCss$o;
|
|
33661
33665
|
|
|
33662
|
-
const styleCss$
|
|
33666
|
+
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}";
|
|
33663
33667
|
|
|
33664
33668
|
const SmoothlyMenuOptions = class {
|
|
33665
33669
|
constructor(hostRef) {
|
|
33666
33670
|
registerInstance(this, hostRef);
|
|
33667
33671
|
this.menuEmpty = createEvent(this, "menuEmpty", 7);
|
|
33672
|
+
this.optionElements = [];
|
|
33668
33673
|
this.filteredOptions = [];
|
|
33669
33674
|
this.highlightIndex = 0;
|
|
33675
|
+
this.toggle = false;
|
|
33670
33676
|
this.emptyMenuLabel = "No Options";
|
|
33671
33677
|
this.newOptionLabel = "Add:";
|
|
33672
33678
|
this.order = false;
|
|
@@ -33674,7 +33680,7 @@ const SmoothlyMenuOptions = class {
|
|
|
33674
33680
|
this.resetHighlightOnOptionsChange = true;
|
|
33675
33681
|
this.mutable = false;
|
|
33676
33682
|
}
|
|
33677
|
-
optionsChangeHandler(
|
|
33683
|
+
optionsChangeHandler() {
|
|
33678
33684
|
this.highlightIndex = this.resetHighlightOnOptionsChange ? 0 : this.highlightIndex;
|
|
33679
33685
|
}
|
|
33680
33686
|
optionHoverHandler(event) {
|
|
@@ -33756,16 +33762,19 @@ const SmoothlyMenuOptions = class {
|
|
|
33756
33762
|
}
|
|
33757
33763
|
}
|
|
33758
33764
|
render() {
|
|
33759
|
-
return (h(Host, { style: { "--max-menu-height": this.maxMenuHeight } }, this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (h("smoothly-option", { style: this.optionStyle,
|
|
33765
|
+
return (h(Host, { style: { "--max-menu-height": this.maxMenuHeight } }, this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (h("smoothly-option", { style: this.optionStyle, toggle: this.toggle, ref: el => {
|
|
33766
|
+
index == 0 && (this.firstOptionsElement = el !== null && el !== void 0 ? el : this.firstOptionsElement);
|
|
33767
|
+
el && (this.optionElements[index] = el);
|
|
33768
|
+
}, checked: option.checked, value: option.value, name: option.name, divider: option.divider, "data-highlight": this.highlightIndex == index }, option.hint ? h("div", { slot: "hint" }, option.hint) : undefined)))) : this.mutable ? (h("smoothly-option", { style: this.optionStyle, value: this.keyword, name: this.keyword, "data-highlight": 0, new: true }, h("div", { slot: "left" }, h("smoothly-icon", { name: "square-outline", size: "small" }), " ", this.newOptionLabel))) : (h("div", null, this.emptyMenuLabel))));
|
|
33760
33769
|
}
|
|
33761
33770
|
get element() { return getElement(this); }
|
|
33762
33771
|
static get watchers() { return {
|
|
33763
33772
|
"options": ["optionsChangeHandler"]
|
|
33764
33773
|
}; }
|
|
33765
33774
|
};
|
|
33766
|
-
SmoothlyMenuOptions.style = styleCss$
|
|
33775
|
+
SmoothlyMenuOptions.style = styleCss$n;
|
|
33767
33776
|
|
|
33768
|
-
const styleCss$
|
|
33777
|
+
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}";
|
|
33769
33778
|
|
|
33770
33779
|
const Notification = class {
|
|
33771
33780
|
constructor(hostRef) {
|
|
@@ -33823,9 +33832,9 @@ const Notification = class {
|
|
|
33823
33832
|
"notice": ["onUpdatedNotice"]
|
|
33824
33833
|
}; }
|
|
33825
33834
|
};
|
|
33826
|
-
Notification.style = styleCss$
|
|
33835
|
+
Notification.style = styleCss$m;
|
|
33827
33836
|
|
|
33828
|
-
const styleCss$
|
|
33837
|
+
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}";
|
|
33829
33838
|
|
|
33830
33839
|
const Notifier = class {
|
|
33831
33840
|
constructor(hostRef) {
|
|
@@ -33845,38 +33854,45 @@ const Notifier = class {
|
|
|
33845
33854
|
];
|
|
33846
33855
|
}
|
|
33847
33856
|
};
|
|
33848
|
-
Notifier.style = styleCss$
|
|
33857
|
+
Notifier.style = styleCss$l;
|
|
33849
33858
|
|
|
33850
|
-
const styleCss$
|
|
33859
|
+
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}";
|
|
33851
33860
|
|
|
33852
33861
|
const SmoothlyOption = class {
|
|
33853
33862
|
constructor(hostRef) {
|
|
33854
33863
|
registerInstance(this, hostRef);
|
|
33855
33864
|
this.optionHover = createEvent(this, "optionHover", 7);
|
|
33856
33865
|
this.optionSelect = createEvent(this, "optionSelect", 7);
|
|
33866
|
+
this.optionUnselect = createEvent(this, "optionUnselect", 7);
|
|
33857
33867
|
this.optionAdd = createEvent(this, "optionAdd", 7);
|
|
33858
33868
|
this.dataHighlight = false;
|
|
33859
33869
|
this.divider = false;
|
|
33870
|
+
this.toggle = false;
|
|
33871
|
+
this.checked = false;
|
|
33860
33872
|
}
|
|
33861
33873
|
onHover(event) {
|
|
33862
33874
|
this.optionHover.emit({ name: this.name, value: this.value });
|
|
33863
33875
|
}
|
|
33864
33876
|
onSelect(event) {
|
|
33865
|
-
if (this.value)
|
|
33877
|
+
if (this.value) {
|
|
33866
33878
|
this.new
|
|
33867
33879
|
? this.optionAdd.emit({ name: this.name, value: this.value })
|
|
33868
|
-
: this.
|
|
33880
|
+
: !this.toggle || (this.toggle && !this.checked)
|
|
33881
|
+
? this.optionSelect.emit({ name: this.name, value: this.value })
|
|
33882
|
+
: this.optionUnselect.emit({ name: this.name, value: this.value });
|
|
33883
|
+
this.toggle && (this.checked = !this.checked);
|
|
33884
|
+
}
|
|
33869
33885
|
else
|
|
33870
33886
|
throw `smoothly-option ${this.element.innerHTML} lacks value-property and can therefore not be selected`;
|
|
33871
33887
|
}
|
|
33872
33888
|
render() {
|
|
33873
|
-
return (h(Host, { onMouseDown: (e) => this.onSelect(e), onMouseOver: (e) => this.onHover(e) }, h("
|
|
33889
|
+
return (h(Host, { onMouseDown: (e) => this.onSelect(e), onMouseOver: (e) => this.onHover(e) }, this.toggle && h("smoothly-icon", { name: this.checked ? "checkbox" : "square-outline" }), h("div", { class: "name" }, this.name), h("smoothly-quiet", null, h("slot", { name: "hint" }))));
|
|
33874
33890
|
}
|
|
33875
33891
|
get element() { return getElement(this); }
|
|
33876
33892
|
};
|
|
33877
|
-
SmoothlyOption.style = styleCss$
|
|
33893
|
+
SmoothlyOption.style = styleCss$k;
|
|
33878
33894
|
|
|
33879
|
-
const styleCss$
|
|
33895
|
+
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}";
|
|
33880
33896
|
|
|
33881
33897
|
const SmoothlyPicker = class {
|
|
33882
33898
|
constructor(hostRef) {
|
|
@@ -33886,6 +33902,7 @@ const SmoothlyPicker = class {
|
|
|
33886
33902
|
this.keepFocusOnReRender = false;
|
|
33887
33903
|
this.disabled = false;
|
|
33888
33904
|
this.readonly = false;
|
|
33905
|
+
this.maxMenuHeight = "inherit";
|
|
33889
33906
|
this.emptyMenuLabel = "No Options";
|
|
33890
33907
|
this.multiple = false;
|
|
33891
33908
|
this.mutable = false;
|
|
@@ -34022,17 +34039,14 @@ const SmoothlyPicker = class {
|
|
|
34022
34039
|
this.isOpen = false;
|
|
34023
34040
|
this.filterOptions();
|
|
34024
34041
|
}
|
|
34025
|
-
getCheckHtml(checked) {
|
|
34026
|
-
return checked ? (h("smoothly-icon", { name: "checkbox", size: "small" })) : (h("smoothly-icon", { name: "square-outline", size: "small" }));
|
|
34027
|
-
}
|
|
34028
34042
|
render() {
|
|
34029
|
-
var _a, _b, _c
|
|
34043
|
+
var _a, _b, _c;
|
|
34030
34044
|
const cssVariables = {
|
|
34031
34045
|
"--max-height": (_a = this.maxHeight) !== null && _a !== void 0 ? _a : "inherit",
|
|
34032
34046
|
"--label-display": this.labelSetting == "hide" ? "none" : "absolute",
|
|
34033
34047
|
};
|
|
34034
34048
|
(_b = this.options) === null || _b === void 0 ? void 0 : _b.forEach(o => {
|
|
34035
|
-
o.
|
|
34049
|
+
o.checked = this.selections.map(s => s.value).includes(o.value);
|
|
34036
34050
|
});
|
|
34037
34051
|
const options = [
|
|
34038
34052
|
...(this.multiple
|
|
@@ -34040,25 +34054,25 @@ const SmoothlyPicker = class {
|
|
|
34040
34054
|
{
|
|
34041
34055
|
value: "select-none",
|
|
34042
34056
|
name: this.selections.length == this.options.length ? this.selectNoneName : this.selectAllName,
|
|
34043
|
-
|
|
34057
|
+
checked: this.selections.length == this.options.length,
|
|
34044
34058
|
divider: true,
|
|
34045
34059
|
},
|
|
34046
34060
|
]
|
|
34047
34061
|
: []),
|
|
34048
|
-
...((
|
|
34062
|
+
...((_c = this.options) !== null && _c !== void 0 ? _c : []),
|
|
34049
34063
|
];
|
|
34050
34064
|
return (h(Host, { style: cssVariables, "has-selection": this.selections.length > 0, "is-open": this.isOpen ? "" : undefined, onMouseDown: (e) => e.preventDefault(), onClick: () => this.onClick() }, h("div", null, h("smoothly-icon", { part: "search", class: "search", name: "search-outline", size: "tiny" }), h("label", { part: "label-element" }, this.label), 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
|
|
34051
34065
|
? this.selections.length.toString() + " " + this.selectionName
|
|
34052
|
-
: this.selections.map(selection => selection.name).join(", "), onKeyDown: e => this.onKeyDown(e), onInput: (e) => this.onInput(e) }), h("smoothly-icon", { part: "chevron", class: "down", name: "chevron-down", size: "tiny" }), h("smoothly-icon", { part: "chevron", class: "up", name: "chevron-up", size: "tiny" })), 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 })));
|
|
34066
|
+
: this.selections.map(selection => selection.name).join(", "), onKeyDown: e => this.onKeyDown(e), onInput: (e) => this.onInput(e) }), h("smoothly-icon", { part: "chevron", class: "down", name: "chevron-down", size: "tiny" }), h("smoothly-icon", { part: "chevron", class: "up", name: "chevron-up", size: "tiny" })), 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 })));
|
|
34053
34067
|
}
|
|
34054
34068
|
get element() { return getElement(this); }
|
|
34055
34069
|
static get watchers() { return {
|
|
34056
34070
|
"isOpen": ["isOpenChangeHandler"]
|
|
34057
34071
|
}; }
|
|
34058
34072
|
};
|
|
34059
|
-
SmoothlyPicker.style = styleCss$
|
|
34073
|
+
SmoothlyPicker.style = styleCss$j;
|
|
34060
34074
|
|
|
34061
|
-
const styleCss$
|
|
34075
|
+
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}";
|
|
34062
34076
|
|
|
34063
34077
|
const SmoothlyPopup = class {
|
|
34064
34078
|
constructor(hostRef) {
|
|
@@ -34087,9 +34101,9 @@ const SmoothlyPopup = class {
|
|
|
34087
34101
|
return (h(Host, { style: Object.assign({}, this.cssVariables) }, h("content", { class: "pointer", onClick: () => this.onClick() }, h("slot", null)), h("div", { class: "background", onClick: () => this.onClick() }), h("div", { class: "arrow", onClick: () => this.onClick() }), h("aside", { ref: el => (this.aside = el) }, h("slot", { name: "popup" }))));
|
|
34088
34102
|
}
|
|
34089
34103
|
};
|
|
34090
|
-
SmoothlyPopup.style = styleCss$
|
|
34104
|
+
SmoothlyPopup.style = styleCss$i;
|
|
34091
34105
|
|
|
34092
|
-
const styleCss$
|
|
34106
|
+
const styleCss$h = ".sc-smoothly-quiet-h{opacity:0.5}";
|
|
34093
34107
|
|
|
34094
34108
|
const SmoothlyQuiet = class {
|
|
34095
34109
|
constructor(hostRef) {
|
|
@@ -34099,9 +34113,9 @@ const SmoothlyQuiet = class {
|
|
|
34099
34113
|
return (h(Host, { color: this.color }, h("slot", null)));
|
|
34100
34114
|
}
|
|
34101
34115
|
};
|
|
34102
|
-
SmoothlyQuiet.style = styleCss$
|
|
34116
|
+
SmoothlyQuiet.style = styleCss$h;
|
|
34103
34117
|
|
|
34104
|
-
const styleCss$
|
|
34118
|
+
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))}";
|
|
34105
34119
|
|
|
34106
34120
|
const SmoothlyRadio = class {
|
|
34107
34121
|
constructor(hostRef) {
|
|
@@ -34120,7 +34134,7 @@ const SmoothlyRadio = class {
|
|
|
34120
34134
|
];
|
|
34121
34135
|
}
|
|
34122
34136
|
};
|
|
34123
|
-
SmoothlyRadio.style = styleCss$
|
|
34137
|
+
SmoothlyRadio.style = styleCss$g;
|
|
34124
34138
|
|
|
34125
34139
|
const SmoothlyRoom = class {
|
|
34126
34140
|
constructor(hostRef) {
|
|
@@ -34131,7 +34145,7 @@ const SmoothlyRoom = class {
|
|
|
34131
34145
|
}
|
|
34132
34146
|
};
|
|
34133
34147
|
|
|
34134
|
-
const styleCss$
|
|
34148
|
+
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}";
|
|
34135
34149
|
|
|
34136
34150
|
const SmoothlySelect = class {
|
|
34137
34151
|
constructor(hostRef) {
|
|
@@ -34153,9 +34167,9 @@ const SmoothlySelect = class {
|
|
|
34153
34167
|
];
|
|
34154
34168
|
}
|
|
34155
34169
|
};
|
|
34156
|
-
SmoothlySelect.style = styleCss$
|
|
34170
|
+
SmoothlySelect.style = styleCss$f;
|
|
34157
34171
|
|
|
34158
|
-
const styleCss$
|
|
34172
|
+
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}";
|
|
34159
34173
|
|
|
34160
34174
|
const SmoothlySelectDemo = class {
|
|
34161
34175
|
constructor(hostRef) {
|
|
@@ -34187,11 +34201,11 @@ const SmoothlySelectDemo = class {
|
|
|
34187
34201
|
} }),
|
|
34188
34202
|
h("smoothly-selector", null, h("smoothly-item", { value: "1" }, "January"), h("smoothly-item", { value: "2" }, "February"), h("smoothly-item", { value: "3" }, "March"), h("smoothly-item", { value: "4" }, "April"), h("smoothly-item", { value: "5" }, "May"), h("smoothly-item", { value: "6" }, "June"), h("smoothly-item", { value: "7" }, "July"), h("smoothly-item", { value: "8" }, "August"), h("smoothly-item", { value: "9" }, "September"), h("smoothly-item", { value: "10" }, "October"), h("smoothly-item", { value: "11" }, "November"), h("smoothly-item", { value: "12" }, "December")),
|
|
34189
34203
|
h("button", { onClick: () => this.alertf() }, "press here"),
|
|
34190
|
-
h("smoothly-picker", { label: "Filter", "empty-menu-label": "Sorry, we're out of options.", "max-height": "58px", multiple: true, options: [
|
|
34204
|
+
h("smoothly-picker", { label: "Filter", "empty-menu-label": "Sorry, we're out of options.", "max-height": "58px", maxMenuHeight: "20rem", multiple: true, options: [
|
|
34191
34205
|
{ name: "Big Dog", value: "dog", aliases: ["WOFF"] },
|
|
34192
|
-
{ name: "Cat Stevens", value: "cat", aliases: ["moew"] },
|
|
34206
|
+
{ name: "Cat Stevens", value: "cat", aliases: ["moew"], hint: "moew" },
|
|
34193
34207
|
{ name: "Noble Pig", value: "pig" },
|
|
34194
|
-
{ name: "Turtle Wax", value: "turtle" },
|
|
34208
|
+
{ name: "Turtle Wax", value: "turtle", hint: "slow" },
|
|
34195
34209
|
{ name: "Spider Man", value: "spider" },
|
|
34196
34210
|
{ name: "Phoenix Order Long Wooord", value: "phoenix" },
|
|
34197
34211
|
{ name: "Horse Back", value: "horse" },
|
|
@@ -34223,7 +34237,7 @@ const SmoothlySelectDemo = class {
|
|
|
34223
34237
|
], valueValidator: (email) => email.match(/^\w+@\w+/) ? [true, undefined] : [false, Notice.failed("Incorrectly formatted email")] }),
|
|
34224
34238
|
h("br", null),
|
|
34225
34239
|
h("smoothly-picker", { label: "Single select", multiple: false, "max-menu-height": "200px", options: [
|
|
34226
|
-
{ name: "Dog", value: "dog", aliases: ["WOFF"],
|
|
34240
|
+
{ name: "Dog", value: "dog", aliases: ["WOFF"], hint: "Woof 🐶" },
|
|
34227
34241
|
{ name: "Cat", value: "cat", aliases: ["moew"] },
|
|
34228
34242
|
{ name: "Pig", value: "pig" },
|
|
34229
34243
|
{ name: "Turtle", value: "turtle" },
|
|
@@ -34242,9 +34256,9 @@ const SmoothlySelectDemo = class {
|
|
|
34242
34256
|
];
|
|
34243
34257
|
}
|
|
34244
34258
|
};
|
|
34245
|
-
SmoothlySelectDemo.style = styleCss$
|
|
34259
|
+
SmoothlySelectDemo.style = styleCss$e;
|
|
34246
34260
|
|
|
34247
|
-
const styleCss$
|
|
34261
|
+
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}";
|
|
34248
34262
|
|
|
34249
34263
|
const Selector = class {
|
|
34250
34264
|
constructor(hostRef) {
|
|
@@ -34354,9 +34368,9 @@ function isItem(value) {
|
|
|
34354
34368
|
(typeof value.selected == "boolean" || value.selected == undefined) &&
|
|
34355
34369
|
typeof value.filter == "function");
|
|
34356
34370
|
}
|
|
34357
|
-
Selector.style = styleCss$
|
|
34371
|
+
Selector.style = styleCss$d;
|
|
34358
34372
|
|
|
34359
|
-
const styleCss$
|
|
34373
|
+
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)}}";
|
|
34360
34374
|
|
|
34361
34375
|
const SmoothlySkeleton = class {
|
|
34362
34376
|
constructor(hostRef) {
|
|
@@ -34374,9 +34388,9 @@ const SmoothlySkeleton = class {
|
|
|
34374
34388
|
return h(Host, { style: cssVariables });
|
|
34375
34389
|
}
|
|
34376
34390
|
};
|
|
34377
|
-
SmoothlySkeleton.style = styleCss$
|
|
34391
|
+
SmoothlySkeleton.style = styleCss$c;
|
|
34378
34392
|
|
|
34379
|
-
const styleCss$
|
|
34393
|
+
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)}}";
|
|
34380
34394
|
|
|
34381
34395
|
const SmoothlySpinner = class {
|
|
34382
34396
|
constructor(hostRef) {
|
|
@@ -34391,9 +34405,22 @@ const SmoothlySpinner = class {
|
|
|
34391
34405
|
} }, h("svg", { class: "spinner", viewBox: `0 0 ${60 + strokeWidth} ${60 + strokeWidth}`, xmlns: "http://www.w3.org/2000/svg" }, h("circle", { class: "path", fill: "none", "stroke-width": strokeWidth, "stroke-linecap": "round", cx: `${30 + strokeWidth / 2}`, cy: `${30 + strokeWidth / 2}`, r: "30" }))));
|
|
34392
34406
|
}
|
|
34393
34407
|
};
|
|
34394
|
-
SmoothlySpinner.style = styleCss$
|
|
34408
|
+
SmoothlySpinner.style = styleCss$b;
|
|
34395
34409
|
|
|
34396
|
-
|
|
34410
|
+
var Data;
|
|
34411
|
+
(function (Data) {
|
|
34412
|
+
function set(data, [head, ...tail], value) {
|
|
34413
|
+
const current = data[head];
|
|
34414
|
+
return Object.assign(Object.assign({}, data), { [head]: !tail.length ? value : set(typeof current == "object" ? current : {}, tail, value) });
|
|
34415
|
+
}
|
|
34416
|
+
Data.set = set;
|
|
34417
|
+
function deepen(data) {
|
|
34418
|
+
return Object.entries(data).reduce((result, [name, value]) => set(result, name.split("."), value), {});
|
|
34419
|
+
}
|
|
34420
|
+
Data.deepen = deepen;
|
|
34421
|
+
})(Data || (Data = {}));
|
|
34422
|
+
|
|
34423
|
+
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}";
|
|
34397
34424
|
|
|
34398
34425
|
const SmoothlySubmit = class {
|
|
34399
34426
|
constructor(hostRef) {
|
|
@@ -34424,7 +34451,7 @@ const SmoothlySubmit = class {
|
|
|
34424
34451
|
result[element.name] = element.value;
|
|
34425
34452
|
}
|
|
34426
34453
|
}
|
|
34427
|
-
this.submitEvent.emit(result);
|
|
34454
|
+
this.submitEvent.emit(Data.deepen(result));
|
|
34428
34455
|
this.processing = false;
|
|
34429
34456
|
}
|
|
34430
34457
|
}
|
|
@@ -34444,41 +34471,7 @@ const SmoothlySubmit = class {
|
|
|
34444
34471
|
function hasNameAndValue(element) {
|
|
34445
34472
|
return (typeof element.name == "string" && typeof element.value == "string");
|
|
34446
34473
|
}
|
|
34447
|
-
SmoothlySubmit.style = styleCss$
|
|
34448
|
-
|
|
34449
|
-
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))}";
|
|
34450
|
-
|
|
34451
|
-
const SmoothlySvg = class {
|
|
34452
|
-
constructor(hostRef) {
|
|
34453
|
-
registerInstance(this, hostRef);
|
|
34454
|
-
this.defaultSizes = {
|
|
34455
|
-
large: { height: "50rem", width: "50rem" },
|
|
34456
|
-
medium: { height: "30rem", width: "30rem" },
|
|
34457
|
-
small: { height: "10rem", width: "10rem" },
|
|
34458
|
-
tiny: { height: "5rem", width: "5rem" },
|
|
34459
|
-
};
|
|
34460
|
-
}
|
|
34461
|
-
render() {
|
|
34462
|
-
const height = this.size
|
|
34463
|
-
? typeof this.size == "object"
|
|
34464
|
-
? this.size.height
|
|
34465
|
-
: this.defaultSizes[this.size].height
|
|
34466
|
-
: "10rem";
|
|
34467
|
-
const width = this.size
|
|
34468
|
-
? typeof this.size == "object"
|
|
34469
|
-
? this.size.width
|
|
34470
|
-
: this.defaultSizes[this.size].width
|
|
34471
|
-
: "10rem";
|
|
34472
|
-
return (h(Host, { style: {
|
|
34473
|
-
"min-height": height,
|
|
34474
|
-
"min-width": width,
|
|
34475
|
-
"--size-height": height,
|
|
34476
|
-
"--size-width": width,
|
|
34477
|
-
"--color": this.color,
|
|
34478
|
-
} }, h("object", { height: height, width: width, type: "image/svg+xml", data: this.url })));
|
|
34479
|
-
}
|
|
34480
|
-
};
|
|
34481
|
-
SmoothlySvg.style = styleCss$a;
|
|
34474
|
+
SmoothlySubmit.style = styleCss$a;
|
|
34482
34475
|
|
|
34483
34476
|
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}";
|
|
34484
34477
|
|
|
@@ -34736,4 +34729,4 @@ const Urlencoded = class {
|
|
|
34736
34729
|
}
|
|
34737
34730
|
};
|
|
34738
34731
|
|
|
34739
|
-
export { SmoothlyAccordion as smoothly_accordion, SmoothlyAccordionItem as smoothly_accordion_item, SmoothlyApp as smoothly_app, SmoothlyAppDemo as smoothly_app_demo, SmoothlyBacktotop as smoothly_backtotop, SmoothlyButton as smoothly_button, Calendar as smoothly_calendar, SmoothlyCheckbox as smoothly_checkbox, SmoothlyDialog as smoothly_dialog, SmoothlyDialogDemo as smoothly_dialog_demo, SmoothlyDisplay as smoothly_display, SmoothlyDisplayAmount as smoothly_display_amount, SmoothlyDisplayDateTime as smoothly_display_date_time, SmoothlyDisplayDemo as smoothly_display_demo, SmoothlyFrame as smoothly_frame, SmoothlyIcon as smoothly_icon, SmoothlyIconDemo as smoothly_icon_demo, SmoothlyInput as smoothly_input, InputDate as smoothly_input_date, InputDateRange as smoothly_input_date_range, SmoothlyInputDemo as smoothly_input_demo, MonthSelector as smoothly_input_month, Item as smoothly_item, SmoothlyMenuOptions as smoothly_menu_options, Notification as smoothly_notification, Notifier as smoothly_notifier, SmoothlyOption as smoothly_option, SmoothlyPicker as smoothly_picker, SmoothlyPopup as smoothly_popup, SmoothlyQuiet as smoothly_quiet, SmoothlyRadio as smoothly_radio, SmoothlyRoom as smoothly_room, SmoothlySelect as smoothly_select, SmoothlySelectDemo as smoothly_select_demo, Selector as smoothly_selector, SmoothlySkeleton as smoothly_skeleton, SmoothlySpinner as smoothly_spinner, SmoothlySubmit as smoothly_submit,
|
|
34732
|
+
export { SmoothlyAccordion as smoothly_accordion, SmoothlyAccordionItem as smoothly_accordion_item, SmoothlyApp as smoothly_app, SmoothlyAppDemo as smoothly_app_demo, SmoothlyBacktotop as smoothly_backtotop, SmoothlyButton as smoothly_button, Calendar as smoothly_calendar, SmoothlyCheckbox as smoothly_checkbox, SmoothlyDialog as smoothly_dialog, SmoothlyDialogDemo as smoothly_dialog_demo, SmoothlyDisplay as smoothly_display, SmoothlyDisplayAmount as smoothly_display_amount, SmoothlyDisplayDateTime as smoothly_display_date_time, SmoothlyDisplayDemo as smoothly_display_demo, SmoothlyFrame as smoothly_frame, SmoothlyIcon as smoothly_icon, SmoothlyIconDemo as smoothly_icon_demo, SmoothlyInput as smoothly_input, InputDate as smoothly_input_date, InputDateRange as smoothly_input_date_range, SmoothlyInputDemo as smoothly_input_demo, MonthSelector as smoothly_input_month, Item as smoothly_item, SmoothlyMenuOptions as smoothly_menu_options, Notification as smoothly_notification, Notifier as smoothly_notifier, SmoothlyOption as smoothly_option, SmoothlyPicker as smoothly_picker, SmoothlyPopup as smoothly_popup, SmoothlyQuiet as smoothly_quiet, SmoothlyRadio as smoothly_radio, SmoothlyRoom as smoothly_room, SmoothlySelect as smoothly_select, SmoothlySelectDemo as smoothly_select_demo, Selector as smoothly_selector, SmoothlySkeleton as smoothly_skeleton, SmoothlySpinner as smoothly_spinner, SmoothlySubmit as smoothly_submit, SmoothlyTab as smoothly_tab, SmoothlyTabSwitch as smoothly_tab_switch, Table as smoothly_table, TableCell as smoothly_table_cell, TableDemo as smoothly_table_demo, TableExpandableCell as smoothly_table_expandable_cell, TableExpandableRow as smoothly_table_expandable_row, TableHeader as smoothly_table_header, TableRow as smoothly_table_row, SmoothlyTrigger as smoothly_trigger, SmoothlyTuple as smoothly_tuple, Urlencoded as smoothly_urlencoded };
|