smoothly 1.0.0 → 1.0.1-alpha.1
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/{Data-50d47740.js → Submit-02056bd9.js} +26 -1
- package/dist/cjs/Submit-02056bd9.js.map +1 -0
- package/dist/cjs/index.cjs.js +9 -8
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{smoothly-app_80.cjs.entry.js → smoothly-app_81.cjs.entry.js} +168 -140
- package/dist/cjs/smoothly-app_81.cjs.entry.js.map +1 -0
- package/dist/cjs/smoothly-trigger-sink.cjs.entry.js +3 -3
- package/dist/cjs/smoothly-trigger-sink.cjs.entry.js.map +1 -1
- package/dist/cjs/smoothly-trigger-source.cjs.entry.js +3 -3
- package/dist/cjs/smoothly-trigger-source.cjs.entry.js.map +1 -1
- package/dist/cjs/smoothly.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/button/index.js +1 -1
- package/dist/collection/components/button/index.js.map +1 -1
- package/dist/collection/components/form/index.js +86 -77
- package/dist/collection/components/form/index.js.map +1 -1
- package/dist/collection/components/input/demo/controlled-form/index.js +50 -0
- package/dist/collection/components/input/demo/controlled-form/index.js.map +1 -0
- package/dist/collection/components/input/demo/controlled-form/style.css +7 -0
- package/dist/collection/components/input/demo/index.js +2 -2
- package/dist/collection/components/input/demo/index.js.map +1 -1
- package/dist/collection/components/input/submit/index.js +3 -12
- package/dist/collection/components/input/submit/index.js.map +1 -1
- package/dist/collection/model/Submit.js +14 -0
- package/dist/collection/model/Submit.js.map +1 -0
- package/dist/collection/model/index.js +1 -0
- package/dist/collection/model/index.js.map +1 -1
- package/dist/collection/smoothly.js +1 -1
- package/dist/collection/smoothly.js.map +1 -1
- package/dist/custom-elements/index.d.ts +6 -0
- package/dist/custom-elements/index.js +168 -113
- package/dist/custom-elements/index.js.map +1 -1
- package/dist/esm/{Data-c8093b5a.js → Submit-959d713d.js} +26 -2
- package/dist/esm/Submit-959d713d.js.map +1 -0
- package/dist/esm/index.js +2 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{smoothly-app_80.entry.js → smoothly-app_81.entry.js} +137 -110
- package/dist/esm/smoothly-app_81.entry.js.map +1 -0
- package/dist/esm/smoothly-trigger-sink.entry.js +1 -1
- package/dist/esm/smoothly-trigger-source.entry.js +1 -1
- package/dist/esm/smoothly.js +1 -1
- package/dist/smoothly/index.esm.js +1 -1
- package/dist/smoothly/index.esm.js.map +1 -1
- package/dist/smoothly/p-051d2b23.js +2 -0
- package/dist/smoothly/p-051d2b23.js.map +1 -0
- package/dist/smoothly/p-34b080fb.entry.js +2 -0
- package/dist/smoothly/p-34b080fb.entry.js.map +1 -0
- package/dist/smoothly/{p-635c813e.entry.js → p-ed11e814.entry.js} +2 -2
- package/dist/smoothly/{p-7a69b43f.entry.js → p-f0720fed.entry.js} +2 -2
- package/dist/smoothly/smoothly.esm.js +1 -1
- package/dist/smoothly/smoothly.esm.js.map +1 -1
- package/dist/types/components/form/index.d.ts +9 -8
- package/dist/types/components/input/demo/controlled-form/index.d.ts +12 -0
- package/dist/types/components.d.ts +16 -5
- package/dist/types/model/Submit.d.ts +13 -0
- package/dist/types/model/index.d.ts +1 -0
- package/dist/types/smoothly.d.ts +1 -1
- package/package.json +1 -1
- package/dist/cjs/Data-50d47740.js.map +0 -1
- package/dist/cjs/smoothly-app_80.cjs.entry.js.map +0 -1
- package/dist/esm/Data-c8093b5a.js.map +0 -1
- package/dist/esm/smoothly-app_80.entry.js.map +0 -1
- package/dist/smoothly/p-2e986022.js +0 -2
- package/dist/smoothly/p-2e986022.js.map +0 -1
- package/dist/smoothly/p-303520d1.entry.js +0 -2
- package/dist/smoothly/p-303520d1.entry.js.map +0 -1
- /package/dist/smoothly/{p-635c813e.entry.js.map → p-ed11e814.entry.js.map} +0 -0
- /package/dist/smoothly/{p-7a69b43f.entry.js.map → p-f0720fed.entry.js.map} +0 -0
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
const index = require('./index-43af753b.js');
|
|
6
|
-
const
|
|
6
|
+
const Submit = require('./Submit-02056bd9.js');
|
|
7
7
|
require('./GoogleFont-6c4f0da1.js');
|
|
8
8
|
const redirect = require('./redirect-2e5d4524.js');
|
|
9
9
|
const TimeZone = require('./TimeZone-016ac7b0.js');
|
|
@@ -13,7 +13,7 @@ function global$1 () {
|
|
|
13
13
|
return { Observers: Observers$1.Observers };
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
-
class IslyAny extends
|
|
16
|
+
class IslyAny extends Submit.Type {
|
|
17
17
|
constructor() {
|
|
18
18
|
super(...arguments);
|
|
19
19
|
this.is = (value => value != undefined);
|
|
@@ -23,19 +23,7 @@ function any(name) {
|
|
|
23
23
|
return new IslyAny(name ?? "any");
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
-
|
|
27
|
-
class IslyFunction extends Data.Type {
|
|
28
|
-
constructor() {
|
|
29
|
-
super("function");
|
|
30
|
-
this.is = (value => !!(value && typeof value == "function"));
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
// eslint-disable-next-line @typescript-eslint/ban-types
|
|
34
|
-
function islyFunction() {
|
|
35
|
-
return new IslyFunction();
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
const styleCss$1a = "smoothly-app{--header-height:5rem;display:block}smoothly-app main{height:calc(100dvh - var(--header-height))}smoothly-app[hidden]{display:none}smoothly-app>smoothly-notifier{height:100%;background:none}smoothly-app>smoothly-notifier>header{position:sticky;top:0;z-index:5;width:100%;height:var(--header-height);display:flex;justify-content:space-between;box-sizing:border-box;align-items:center;box-shadow:0 2px 5px 0 rgba(var(--smoothly-dark-shadow));border-bottom:1px solid rgba(var(--smoothly-dark-color));background:rgba(var(--smoothly-color));color:rgba(var(--smoothly-color-contrast))}smoothly-app>smoothly-notifier>header>nav{width:100%;flex-shrink:2;height:100%}smoothly-app>smoothly-notifier>header>nav,smoothly-app>smoothly-notifier>header>nav>ul{display:flex;margin:0}smoothly-app>smoothly-notifier>header>h1{margin-left:1rem;margin-bottom:0.8em;display:flex;height:100%}smoothly-app>smoothly-notifier>header>h1>a{display:inline-block;align-self:center;size:100%;background-position-y:center;text-decoration:none;white-space:nowrap}smoothly-app>smoothly-notifier>header>nav>ul li a{line-height:1.6cm}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>nav>ul>div.nav-start-container{display:flex;align-items:center;height:100%}smoothly-app>smoothly-notifier>header>nav>ul>div.nav-end-container{display:flex;gap:1rem;align-items:center;height:100%;margin-left:auto;margin-right:1rem}smoothly-app>smoothly-notifier>header>nav>ul>[slot=\"nav-end\"]{width:fit-content;gap:0.5em;align-self:center;height:fit-content;margin-left:10rem}smoothly-app>smoothly-notifier>header>nav>ul li a{display:flex;height:2.3rem;text-decoration:none;align-items:center;align-self:center}@media screen and (max-width: 900px){smoothly-app>smoothly-notifier>header>nav{width:50dvw;max-width:15rem;top:100%;position:absolute;max-height:calc(100dvh - var(--header-height));overflow-y:scroll;right:0;height:auto}smoothly-app>smoothly-notifier>header>nav,smoothly-app>smoothly-notifier>header>nav>ul{flex-direction:column;background-color:rgba(var(--smoothly-color))}smoothly-app>smoothly-notifier>header>nav>ul{padding:1.5rem;box-sizing:border-box}smoothly-app>smoothly-notifier>header>nav>ul li{margin-right:0;margin-bottom:1em;width:100%}smoothly-app>smoothly-notifier>header>smoothly-burger{position:absolute;top:0;right:0}smoothly-app>smoothly-notifier>header>nav>ul>[slot=\"nav-start\"]{display:none}smoothly-app>smoothly-notifier>header>nav>ul>div.nav-start-container,smoothly-app>smoothly-notifier>header>nav>ul>div.nav-end-container{flex-direction:column;margin:0;align-items:start;justify-content:center;gap:1em}smoothly-app>smoothly-notifier>header>nav>ul>div.nav-start-container>*:last-child{margin-bottom:1em}}smoothly-app>smoothly-notifier>header>nav:not(.menu-open){display:none}";
|
|
26
|
+
const styleCss$1b = "smoothly-app{--header-height:5rem;display:block}smoothly-app main{height:calc(100dvh - var(--header-height))}smoothly-app[hidden]{display:none}smoothly-app>smoothly-notifier{height:100%;background:none}smoothly-app>smoothly-notifier>header{position:sticky;top:0;z-index:5;width:100%;height:var(--header-height);display:flex;justify-content:space-between;box-sizing:border-box;align-items:center;box-shadow:0 2px 5px 0 rgba(var(--smoothly-dark-shadow));border-bottom:1px solid rgba(var(--smoothly-dark-color));background:rgba(var(--smoothly-color));color:rgba(var(--smoothly-color-contrast))}smoothly-app>smoothly-notifier>header>nav{width:100%;flex-shrink:2;height:100%}smoothly-app>smoothly-notifier>header>nav,smoothly-app>smoothly-notifier>header>nav>ul{display:flex;margin:0}smoothly-app>smoothly-notifier>header>h1{margin-left:1rem;margin-bottom:0.8em;display:flex;height:100%}smoothly-app>smoothly-notifier>header>h1>a{display:inline-block;align-self:center;size:100%;background-position-y:center;text-decoration:none;white-space:nowrap}smoothly-app>smoothly-notifier>header>nav>ul li a{line-height:1.6cm}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>nav>ul>div.nav-start-container{display:flex;align-items:center;height:100%}smoothly-app>smoothly-notifier>header>nav>ul>div.nav-end-container{display:flex;gap:1rem;align-items:center;height:100%;margin-left:auto;margin-right:1rem}smoothly-app>smoothly-notifier>header>nav>ul>[slot=\"nav-end\"]{width:fit-content;gap:0.5em;align-self:center;height:fit-content;margin-left:10rem}smoothly-app>smoothly-notifier>header>nav>ul li a{display:flex;height:2.3rem;text-decoration:none;align-items:center;align-self:center}@media screen and (max-width: 900px){smoothly-app>smoothly-notifier>header>nav{width:50dvw;max-width:15rem;top:100%;position:absolute;max-height:calc(100dvh - var(--header-height));overflow-y:scroll;right:0;height:auto}smoothly-app>smoothly-notifier>header>nav,smoothly-app>smoothly-notifier>header>nav>ul{flex-direction:column;background-color:rgba(var(--smoothly-color))}smoothly-app>smoothly-notifier>header>nav>ul{padding:1.5rem;box-sizing:border-box}smoothly-app>smoothly-notifier>header>nav>ul li{margin-right:0;margin-bottom:1em;width:100%}smoothly-app>smoothly-notifier>header>smoothly-burger{position:absolute;top:0;right:0}smoothly-app>smoothly-notifier>header>nav>ul>[slot=\"nav-start\"]{display:none}smoothly-app>smoothly-notifier>header>nav>ul>div.nav-start-container,smoothly-app>smoothly-notifier>header>nav>ul>div.nav-end-container{flex-direction:column;margin:0;align-items:start;justify-content:center;gap:1em}smoothly-app>smoothly-notifier>header>nav>ul>div.nav-start-container>*:last-child{margin-bottom:1em}}smoothly-app>smoothly-notifier>header>nav:not(.menu-open){display:none}";
|
|
39
27
|
|
|
40
28
|
const SmoothlyApp = class {
|
|
41
29
|
constructor(hostRef) {
|
|
@@ -110,7 +98,7 @@ const SmoothlyApp = class {
|
|
|
110
98
|
"selected": ["selectedChanged"]
|
|
111
99
|
}; }
|
|
112
100
|
};
|
|
113
|
-
SmoothlyApp.style = styleCss$
|
|
101
|
+
SmoothlyApp.style = styleCss$1b;
|
|
114
102
|
|
|
115
103
|
const SmoothlyAppDemo = class {
|
|
116
104
|
constructor(hostRef) {
|
|
@@ -1341,7 +1329,7 @@ if (!globalThis.URLPattern) {
|
|
|
1341
1329
|
globalThis.URLPattern = URLPattern$1;
|
|
1342
1330
|
}
|
|
1343
1331
|
|
|
1344
|
-
const styleCss$
|
|
1332
|
+
const styleCss$1a = ".sc-smoothly-app-room-h{display:flex;justify-content:center;text-align:center;cursor:pointer}main.sc-smoothly-app-room{overflow-y:auto}:not([label].sc-smoothly-app-room-h,[icon]).sc-smoothly-app-room-h,[disabled].sc-smoothly-app-room-h{display:none}.sc-smoothly-app-room-h>main.sc-smoothly-app-room{display:none}.sc-smoothly-app-room-h>li.sc-smoothly-app-room{height:100%;list-style:none}.sc-smoothly-app-room-h>li.sc-smoothly-app-room>a.sc-smoothly-app-room{padding:0 1.5em;height:100%}[selected].sc-smoothly-app-room-h>li.sc-smoothly-app-room>a.sc-smoothly-app-room{display:flex;color:rgb(var(--smoothly-color-contrast));background:rgb(var(--smoothly-color-shade))}.sc-smoothly-app-room-h:hover>li.sc-smoothly-app-room>a.sc-smoothly-app-room{color:rgb(var(--smoothly-color-contrast));background-color:rgb(var(--smoothly-color-tint));transition:0.2s}.sc-smoothly-app-room-h>li.sc-smoothly-app-room>a.sc-smoothly-app-room>smoothly-icon.sc-smoothly-app-room{align-self:inherit;margin-bottom:1em}@media screen and (max-width: 900px){.sc-smoothly-app-room-h>li.sc-smoothly-app-room>a.sc-smoothly-app-room{padding:0}.sc-smoothly-app-room-h>li.sc-smoothly-app-room>a.sc-smoothly-app-room{margin-left:-1.5rem;margin-right:-1.5rem;padding-left:1.5rem;padding-right:1.5rem}}";
|
|
1345
1333
|
|
|
1346
1334
|
const SmoothlyAppRoom = class {
|
|
1347
1335
|
constructor(hostRef) {
|
|
@@ -1378,9 +1366,9 @@ const SmoothlyAppRoom = class {
|
|
|
1378
1366
|
return (index.h(index.Host, null, index.h("li", null, index.h("a", { href: typeof this.path == "string" ? this.path : this.path.pathname, onClick: e => this.clickHandler(e) }, this.icon ? index.h("smoothly-icon", { name: this.icon, toolTip: this.label }) : this.label)), index.h("main", { ref: e => (this.contentElement = e) }, this.content && index.h("smoothly-lazy", { content: this.content }), index.h("slot", null))));
|
|
1379
1367
|
}
|
|
1380
1368
|
};
|
|
1381
|
-
SmoothlyAppRoom.style = styleCss$
|
|
1369
|
+
SmoothlyAppRoom.style = styleCss$1a;
|
|
1382
1370
|
|
|
1383
|
-
const styleCss$
|
|
1371
|
+
const styleCss$19 = ".sc-smoothly-back-to-top-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}";
|
|
1384
1372
|
|
|
1385
1373
|
const SmoothlyBackToTop = class {
|
|
1386
1374
|
constructor(hostRef) {
|
|
@@ -1409,9 +1397,9 @@ const SmoothlyBackToTop = class {
|
|
|
1409
1397
|
}) }, index.h("smoothly-icon", { name: "caret-up-outline" })));
|
|
1410
1398
|
}
|
|
1411
1399
|
};
|
|
1412
|
-
SmoothlyBackToTop.style = styleCss$
|
|
1400
|
+
SmoothlyBackToTop.style = styleCss$19;
|
|
1413
1401
|
|
|
1414
|
-
const styleCss$
|
|
1402
|
+
const styleCss$18 = "[visible].sc-smoothly-burger-h{display:flex;justify-content:center;align-items:center;height:100%}[visible].sc-smoothly-burger-h .burger.sc-smoothly-burger smoothly-icon.sc-smoothly-burger{font-size:1.7em;cursor:pointer;margin-right:1em}.sc-smoothly-burger-h:not([visible]){display:none}.sc-smoothly-burger-h:not([open]) smoothly-icon.sc-smoothly-burger{transform:rotate(0deg);transition:transform 100ms ease-in-out}[open].sc-smoothly-burger-h smoothly-icon.sc-smoothly-burger{transform:rotate(-90deg);transition:transform 100ms ease-in-out}";
|
|
1415
1403
|
|
|
1416
1404
|
const SmoothlyBurger = class {
|
|
1417
1405
|
constructor(hostRef) {
|
|
@@ -1463,7 +1451,7 @@ const SmoothlyBurger = class {
|
|
|
1463
1451
|
"open": ["openChanged"]
|
|
1464
1452
|
}; }
|
|
1465
1453
|
};
|
|
1466
|
-
SmoothlyBurger.style = styleCss$
|
|
1454
|
+
SmoothlyBurger.style = styleCss$18;
|
|
1467
1455
|
|
|
1468
1456
|
const Button = ({ disabled, type, link }, children) => {
|
|
1469
1457
|
return disabled && (link || type == "link") ? (index.h("slot", null)) : type == "link" ? (index.h("a", { href: link, onClick: !link || !local(link) ? undefined : e => (e.preventDefault(), redirect.redirect(convert(link))) },
|
|
@@ -1494,7 +1482,7 @@ function local(path) {
|
|
|
1494
1482
|
return new URL(path, window.location.origin).origin == window.location.origin;
|
|
1495
1483
|
}
|
|
1496
1484
|
|
|
1497
|
-
const styleCss$
|
|
1485
|
+
const styleCss$17 = "[color=default].sc-smoothly-button{--smoothly-color:var(--smoothly-default-color);--smoothly-color-contrast:var(--smoothly-default-contrast);--smoothly-color-shade:var(--smoothly-default-shade);--smoothly-color-tint:var(--smoothly-default-tint)}[color=primary].sc-smoothly-button{--smoothly-color:var(--smoothly-primary-color);--smoothly-color-contrast:var(--smoothly-primary-contrast);--smoothly-color-shade:var(--smoothly-primary-shade);--smoothly-color-tint:var(--smoothly-primary-tint)}[color=secondary].sc-smoothly-button{--smoothly-color:var(--smoothly-secondary-color);--smoothly-color-contrast:var(--smoothly-secondary-contrast);--smoothly-color-shade:var(--smoothly-secondary-shade);--smoothly-color-tint:var(--smoothly-secondary-tint)}[color=tertiary].sc-smoothly-button{--smoothly-color:var(--smoothly-tertiary-color);--smoothly-color-contrast:var(--smoothly-tertiary-contrast);--smoothly-color-shade:var(--smoothly-tertiary-shade);--smoothly-color-tint:var(--smoothly-tertiary-tint)}[color=success].sc-smoothly-button{--smoothly-color:var(--smoothly-success-color);--smoothly-color-contrast:var(--smoothly-success-color);--smoothly-color-shade:var(--smoothly-success-shade);--smoothly-color-tint:var(--smoothly-success-tint)}[color=warning].sc-smoothly-button{--smoothly-color:var(--smoothly-warning-color);--smoothly-color-contrast:var(--smoothly-warning-contrast);--smoothly-color-shade:var(--smoothly-warning-shade);--smoothly-color-tint:var(--smoothly-warning-tint)}[color=danger].sc-smoothly-button{--smoothly-color:var(--smoothly-danger-color);--smoothly-color-contrast:var(--smoothly-danger-contrast);--smoothly-color-shade:var(--smoothly-danger-shade);--smoothly-color-tint:var(--smoothly-danger-tint)}[color=light].sc-smoothly-button{--smoothly-color:var(--smoothly-light-color);--smoothly-color-contrast:var(--smoothly-light-contrast);--smoothly-color-shade:var(--smoothly-light-shade);--smoothly-color-tint:var(--smoothly-light-tint)}[color=medium].sc-smoothly-button{--smoothly-color:var(--smoothly-medium-color);--smoothly-color-contrast:var(--smoothly-medium-contrast);--smoothly-color-shade:var(--smoothly-medium-shade);--smoothly-color-tint:var(--smoothly-medium-tint)}[color=dark].sc-smoothly-button{--smoothly-color:var(--smoothly-dark-color);--smoothly-color-contrast:var(--smoothly-dark-contrast);--smoothly-color-shade:var(--smoothly-dark-shade);--smoothly-color-tint:var(--smoothly-dark-tint)}.sc-smoothly-button-h{display:inline-block;box-sizing:border-box;border-radius:0.5rem;border:solid 1px;transition:background 150ms ease-in-out;cursor:pointer}[type=link].sc-smoothly-button-h{display:inline;border:none}[disabled].sc-smoothly-button-h{opacity:0.5;pointer-events:none}a.sc-smoothly-button,button.sc-smoothly-button{font-size:110%;font-weight:400;border:none;background-color:transparent;cursor:pointer;display:inline-flex;gap:0.5rem}button.sc-smoothly-button{justify-content:center;height:100%;width:100%;border-radius:0.5rem;align-items:center}.sc-smoothly-button-h:not([size=icon]):not([size=flexible])>button.sc-smoothly-button{padding:0.8em;min-width:8em}.sc-smoothly-button-h:not([size=icon]):not([size=flexible]):has(smoothly-icon)>button.sc-smoothly-button{padding:0.6em}[size=icon].sc-smoothly-button-h>button.sc-smoothly-button{padding:0.5em}[shape=rounded].sc-smoothly-button-h>button.sc-smoothly-button,[shape=rounded].sc-smoothly-button-h{border-radius:2rem}[type=button].sc-smoothly-button-h>a.sc-smoothly-button{text-align:center;text-decoration:inherit;width:calc(100% - 0.6em)}[size=small].sc-smoothly-button-h>button.sc-smoothly-button{font-size:100%}[size=large].sc-smoothly-button-h>button.sc-smoothly-button{font-size:130%}.sc-smoothly-button-h:not([size=icon]){min-width:8em}[size=flexible].sc-smoothly-button-h{min-width:unset;padding:0;margin:0;display:flex;justify-content:center;align-items:center;border:none}[size=flexible].sc-smoothly-button-h>button.sc-smoothly-button{min-width:unset;padding:0;margin:0 !important}[expand].sc-smoothly-button-h{width:100%}[expand=full].sc-smoothly-button-h{border-left:none;border-right:none;border-radius:0}[shape=rounded].sc-smoothly-button-h>button.sc-smoothly-button,[shape=rounded].sc-smoothly-button-h{border-radius:2rem}.sc-smoothly-button-h:not([fill=clear]):hover,.sc-smoothly-button-h:not([fill=clear]):focus,.sc-smoothly-button-h:not([fill=clear]):active{border-color:rgb(var(--smoothly-color-tint)) !important;background:rgb(var(--smoothly-color-tint)) !important}.sc-smoothly-button-h:not([fill=clear]):hover>button.sc-smoothly-button,.sc-smoothly-button-h:not([fill=clear]):focus>button.sc-smoothly-button,.sc-smoothly-button-h:not([fill=clear]):active>button.sc-smoothly-button,.sc-smoothly-button-h:not([fill=clear]):hover .sc-smoothly-button-s>smoothly-icon,.sc-smoothly-button-h:not([fill=clear]):focus .sc-smoothly-button-s>smoothly-icon,.sc-smoothly-button-h:not([fill=clear]):active .sc-smoothly-button-s>smoothly-icon{color:rgb(var(--smoothly-color-contrast)) !important;stroke:rgb(var(--smoothly-color-contrast)) !important;fill:rgb(var(--smoothly-color-contrast)) !important}[fill=clear].sc-smoothly-button-h:hover>button.sc-smoothly-button,[fill=clear].sc-smoothly-button-h:focus>button.sc-smoothly-button,[fill=clear].sc-smoothly-button-h:active>button.sc-smoothly-button{color:rgb(var(--smoothly-color-tint)) !important;stroke:rgb(var(--smoothly-color-tint)) !important;fill:rgb(var(--smoothly-color-tint)) !important}[disabled].sc-smoothly-button-h{opacity:0.5;pointer-events:none}.sc-smoothly-button-h:not([fill]),[fill=default].sc-smoothly-button-h{background:rgb(var(--smoothly-color));border-color:transparent}[fill=solid].sc-smoothly-button-h{background:rgb(var(--smoothly-color));border-color:rgb(var(--smoothly-color))}[fill=solid].sc-smoothly-button-h>button.sc-smoothly-button,[fill=default].sc-smoothly-button-h>button.sc-smoothly-button{stroke:rgb(var(--smoothly-color-contrast));fill:rgb(var(--smoothly-color-contrast));color:rgb(var(--smoothly-color-contrast))}[fill=outline].sc-smoothly-button-h>button.sc-smoothly-button,[fill=clear].sc-smoothly-button-h>button.sc-smoothly-button{stroke:rgb(var(--smoothly-color));fill:rgb(var(--smoothly-color));color:rgb(var(--smoothly-color))}[fill=outline].sc-smoothly-button-h{background:transparent;border-color:rgb(var(--smoothly-color))}[fill=clear].sc-smoothly-button-h{background:transparent;border-color:transparent}.sc-smoothly-button-s>smoothly-icon[slot=start],.sc-smoothly-button-s>smoothly-icon[slot=end]{font-size:0.65em}[hidden].sc-smoothly-button-h{display:none}";
|
|
1498
1486
|
|
|
1499
1487
|
const SmoothlyButton = class {
|
|
1500
1488
|
constructor(hostRef) {
|
|
@@ -1509,12 +1497,12 @@ const SmoothlyButton = class {
|
|
|
1509
1497
|
this.link = undefined;
|
|
1510
1498
|
}
|
|
1511
1499
|
render() {
|
|
1512
|
-
return index.h(Button, { disabled: this.disabled, type: this.type, link: this.link });
|
|
1500
|
+
return (index.h(Button, { disabled: this.disabled, type: this.type, link: this.link }, index.h("slot", null)));
|
|
1513
1501
|
}
|
|
1514
1502
|
};
|
|
1515
|
-
SmoothlyButton.style = styleCss$
|
|
1503
|
+
SmoothlyButton.style = styleCss$17;
|
|
1516
1504
|
|
|
1517
|
-
const styleCss$
|
|
1505
|
+
const styleCss$16 = ".sc-smoothly-button-confirm-h{display:inline-block}[disabled].sc-smoothly-button-confirm-h{opacity:0.5}.sc-smoothly-button-confirm-h:not([warning]) smoothly-button.sc-smoothly-button-confirm:first-child{display:none}[warning].sc-smoothly-button-confirm-h smoothly-button.sc-smoothly-button-confirm:nth-child(2){display:none}[expand].sc-smoothly-button-confirm-h{width:100%}";
|
|
1518
1506
|
|
|
1519
1507
|
const SmoothlyButtonConfirm = class {
|
|
1520
1508
|
constructor(hostRef) {
|
|
@@ -1549,9 +1537,9 @@ const SmoothlyButtonConfirm = class {
|
|
|
1549
1537
|
return (index.h(index.Host, { warning: this.clickTimeStamp }, index.h("smoothly-button", { fill: this.fill, expand: this.expand, size: this.size, shape: this.shape, color: "warning", disabled: this.disabled, type: this.type, onClick: event => this.clickHandler(event) }, index.h("smoothly-icon", { name: "alert-outline", fill: "solid", color: "warning", size: "tiny" })), index.h("smoothly-button", { fill: this.fill, expand: this.expand, size: this.size, shape: this.shape, color: this.color, disabled: this.disabled, type: this.type, onClick: event => this.clickHandler(event) }, index.h("slot", null))));
|
|
1550
1538
|
}
|
|
1551
1539
|
};
|
|
1552
|
-
SmoothlyButtonConfirm.style = styleCss$
|
|
1540
|
+
SmoothlyButtonConfirm.style = styleCss$16;
|
|
1553
1541
|
|
|
1554
|
-
const styleCss$
|
|
1542
|
+
const styleCss$15 = "smoothly-button-demo{display:block;margin:1rem}smoothly-button-demo>section>div{display:flex;align-items:center}";
|
|
1555
1543
|
|
|
1556
1544
|
const SmoothlyButtonDemo = class {
|
|
1557
1545
|
constructor(hostRef) {
|
|
@@ -1567,7 +1555,7 @@ const SmoothlyButtonDemo = class {
|
|
|
1567
1555
|
];
|
|
1568
1556
|
}
|
|
1569
1557
|
};
|
|
1570
|
-
SmoothlyButtonDemo.style = styleCss$
|
|
1558
|
+
SmoothlyButtonDemo.style = styleCss$15;
|
|
1571
1559
|
|
|
1572
1560
|
function month(date) {
|
|
1573
1561
|
const d = new Date(date);
|
|
@@ -1627,7 +1615,7 @@ function years(current) {
|
|
|
1627
1615
|
return result;
|
|
1628
1616
|
}
|
|
1629
1617
|
|
|
1630
|
-
const styleCss$
|
|
1618
|
+
const styleCss$14 = ".sc-smoothly-calendar-h{display:block;--other-month-opacity:0.5;margin-bottom:1rem}.sc-smoothly-calendar-h>smoothly-input-month.sc-smoothly-calendar{width:calc(100% - 1em);padding:0.5em 0.5em 0 0.5em}.sc-smoothly-calendar-h>table.sc-smoothly-calendar{table-layout:fixed;width:100%}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)}";
|
|
1631
1619
|
|
|
1632
1620
|
const Calendar = class {
|
|
1633
1621
|
constructor(hostRef) {
|
|
@@ -1717,9 +1705,9 @@ const Calendar = class {
|
|
|
1717
1705
|
"end": ["onEnd"]
|
|
1718
1706
|
}; }
|
|
1719
1707
|
};
|
|
1720
|
-
Calendar.style = styleCss$
|
|
1708
|
+
Calendar.style = styleCss$14;
|
|
1721
1709
|
|
|
1722
|
-
const styleCss$
|
|
1710
|
+
const styleCss$13 = ".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}";
|
|
1723
1711
|
|
|
1724
1712
|
const SmoothlyDialog = class {
|
|
1725
1713
|
constructor(hostRef) {
|
|
@@ -1730,7 +1718,7 @@ const SmoothlyDialog = class {
|
|
|
1730
1718
|
this.header = undefined;
|
|
1731
1719
|
}
|
|
1732
1720
|
TriggerListener(event) {
|
|
1733
|
-
if (
|
|
1721
|
+
if (Submit.Trigger.is(event.detail) && event.detail.name == "close")
|
|
1734
1722
|
this.open = false;
|
|
1735
1723
|
}
|
|
1736
1724
|
hostData() {
|
|
@@ -1748,7 +1736,7 @@ const SmoothlyDialog = class {
|
|
|
1748
1736
|
}
|
|
1749
1737
|
render() { return index.h(index.Host, this.hostData(), this.__stencil_render()); }
|
|
1750
1738
|
};
|
|
1751
|
-
SmoothlyDialog.style = styleCss$
|
|
1739
|
+
SmoothlyDialog.style = styleCss$13;
|
|
1752
1740
|
|
|
1753
1741
|
const SmoothlyDialogDemo = class {
|
|
1754
1742
|
constructor(hostRef) {
|
|
@@ -3407,7 +3395,7 @@ class Handler {
|
|
|
3407
3395
|
add$4("text", (settings) => new Handler(settings || {}));
|
|
3408
3396
|
add$4("email", (settings) => new Handler(settings || {}));
|
|
3409
3397
|
|
|
3410
|
-
const styleCss$
|
|
3398
|
+
const styleCss$12 = ".sc-smoothly-display-h{display:block}[hidden].sc-smoothly-display-h{display:none}";
|
|
3411
3399
|
|
|
3412
3400
|
const SmoothlyDisplay = class {
|
|
3413
3401
|
constructor(hostRef) {
|
|
@@ -3457,9 +3445,9 @@ function getLocale$1() {
|
|
|
3457
3445
|
const result = navigator.language;
|
|
3458
3446
|
return TimeZone.Locale.is(result) ? result : TimeZone.Language.is(result) ? TimeZone.Locale.toLocale(result) : undefined;
|
|
3459
3447
|
}
|
|
3460
|
-
SmoothlyDisplay.style = styleCss$
|
|
3448
|
+
SmoothlyDisplay.style = styleCss$12;
|
|
3461
3449
|
|
|
3462
|
-
const styleCss$
|
|
3450
|
+
const styleCss$11 = ".sc-smoothly-display-amount-h{display:block}[hidden].sc-smoothly-display-amount-h{display:none}";
|
|
3463
3451
|
|
|
3464
3452
|
const SmoothlyDisplayAmount = class {
|
|
3465
3453
|
constructor(hostRef) {
|
|
@@ -3510,7 +3498,7 @@ const SmoothlyDisplayAmount = class {
|
|
|
3510
3498
|
];
|
|
3511
3499
|
}
|
|
3512
3500
|
};
|
|
3513
|
-
SmoothlyDisplayAmount.style = styleCss$
|
|
3501
|
+
SmoothlyDisplayAmount.style = styleCss$11;
|
|
3514
3502
|
|
|
3515
3503
|
const SmoothlyDisplayDemo = class {
|
|
3516
3504
|
constructor(hostRef) {
|
|
@@ -6467,14 +6455,14 @@ function filter(criteria, value) {
|
|
|
6467
6455
|
return c.filter(value);
|
|
6468
6456
|
}
|
|
6469
6457
|
|
|
6470
|
-
const EventEmitter =
|
|
6458
|
+
const EventEmitter = Submit.object({ emit: Submit.islyFunction() });
|
|
6471
6459
|
var Filter;
|
|
6472
6460
|
(function (Filter) {
|
|
6473
6461
|
let Element;
|
|
6474
6462
|
(function (Element) {
|
|
6475
|
-
Element.type =
|
|
6476
|
-
property:
|
|
6477
|
-
properties:
|
|
6463
|
+
Element.type = Submit.object({
|
|
6464
|
+
property: Submit.string().optional(),
|
|
6465
|
+
properties: Submit.record(Submit.string(), Submit.string()).optional(),
|
|
6478
6466
|
});
|
|
6479
6467
|
})(Element = Filter.Element || (Filter.Element = {}));
|
|
6480
6468
|
Filter.type = Element.type.extend({
|
|
@@ -6483,7 +6471,7 @@ var Filter;
|
|
|
6483
6471
|
});
|
|
6484
6472
|
})(Filter || (Filter = {}));
|
|
6485
6473
|
|
|
6486
|
-
const styleCss
|
|
6474
|
+
const styleCss$10 = ".sc-smoothly-filter-h{position:relative;border:1px solid rgb(var(--smoothly-medium-tint));margin-left:1rem;margin-right:1rem;display:flex;flex-direction:row;align-items:center}.sc-smoothly-filter-h>div.sc-smoothly-filter-s>[slot=detail]{z-index:5}.sc-smoothly-filter-h.sc-smoothly-filter-s>[slot=bar]{pointer-events:auto;margin-left:0.3em;margin-right:0.3em}.sc-smoothly-filter-h>div.sc-smoothly-filter:empty+smoothly-icon.sc-smoothly-filter{display:none}.sc-smoothly-filter-h>smoothly-icon.sc-smoothly-filter{cursor:pointer;margin-left:0.3em;margin-right:0.3em;flex-shrink:0}.close.sc-smoothly-filter{position:fixed;z-index:3;top:0;left:0;width:100dvw;height:100dvh;background:transparent}.hidden.sc-smoothly-filter{display:none}.sc-smoothly-filter-h>.container.sc-smoothly-filter{padding:2em;position:absolute;right:0.35em;width:fit-content;display:flex;justify-content:center;top:100%;width:fit-content;z-index:4;background-color:rgb(var(--smoothly-color));margin:0.8em -2em}.container.sc-smoothly-filter:before{content:\"\";width:0.6em;height:0.6em;transform:rotate(45deg);border-top:1px solid rgb(var(--smoothly-medium-tint));border-left:1px solid rgb(var(--smoothly-medium-tint));background-color:rgb(var(--smoothly-color));position:absolute;z-index:3}.container.arrow-top.sc-smoothly-filter:before{left:calc(91%);top:-5px}.container.sc-smoothly-filter:after{content:\"\";height:100%;width:100%;border:1px solid rgb(var(--smoothly-medium-tint));border-radius:0.25em;position:absolute;top:0;left:0}";
|
|
6487
6475
|
|
|
6488
6476
|
const SmoothlyFilter = class {
|
|
6489
6477
|
constructor(hostRef) {
|
|
@@ -6529,9 +6517,9 @@ const SmoothlyFilter = class {
|
|
|
6529
6517
|
} }), index.h("div", { class: this.expanded ? "close" : "hidden", onClick: () => (this.expanded = !this.expanded) })));
|
|
6530
6518
|
}
|
|
6531
6519
|
};
|
|
6532
|
-
SmoothlyFilter.style = styleCss
|
|
6520
|
+
SmoothlyFilter.style = styleCss$10;
|
|
6533
6521
|
|
|
6534
|
-
const styleCss
|
|
6522
|
+
const styleCss$$ = ".sc-smoothly-filter-field-h{flex-grow:5}";
|
|
6535
6523
|
|
|
6536
6524
|
const SmoothlyFilterField = class {
|
|
6537
6525
|
constructor(hostRef) {
|
|
@@ -6556,9 +6544,9 @@ const SmoothlyFilterField = class {
|
|
|
6556
6544
|
} }, "Filter")));
|
|
6557
6545
|
}
|
|
6558
6546
|
};
|
|
6559
|
-
SmoothlyFilterField.style = styleCss
|
|
6547
|
+
SmoothlyFilterField.style = styleCss$$;
|
|
6560
6548
|
|
|
6561
|
-
const styleCss$
|
|
6549
|
+
const styleCss$_ = ".sc-smoothly-filter-input-h{display:block}";
|
|
6562
6550
|
|
|
6563
6551
|
const SmoothlyFilterInput = class {
|
|
6564
6552
|
constructor(hostRef) {
|
|
@@ -6628,9 +6616,9 @@ const SmoothlyFilterInput = class {
|
|
|
6628
6616
|
return (index.h("smoothly-input", { name: this.property, value: this.needle, type: this.type, placeholder: this.placeholder, onSmoothlyInputLooks: e => e.stopPropagation(), onSmoothlyBlur: e => e.stopPropagation(), onSmoothlyFormDisable: e => e.stopPropagation(), onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyChange: e => e.stopPropagation(), onSmoothlyInput: e => this.inputHandler(e) }, index.h("slot", null)));
|
|
6629
6617
|
}
|
|
6630
6618
|
};
|
|
6631
|
-
SmoothlyFilterInput.style = styleCss$
|
|
6619
|
+
SmoothlyFilterInput.style = styleCss$_;
|
|
6632
6620
|
|
|
6633
|
-
const styleCss$
|
|
6621
|
+
const styleCss$Z = ".sc-smoothly-filter-picker-h{display:contents}.sc-smoothly-filter-picker-h>smoothly-picker.sc-smoothly-filter-picker{flex-grow:1;width:12.5em}";
|
|
6634
6622
|
|
|
6635
6623
|
const SmoothlyFilterPicker = class {
|
|
6636
6624
|
constructor(hostRef) {
|
|
@@ -6710,7 +6698,7 @@ const SmoothlyFilterPicker = class {
|
|
|
6710
6698
|
}
|
|
6711
6699
|
getCriteria(detail) {
|
|
6712
6700
|
let result;
|
|
6713
|
-
if (this.multiple &&
|
|
6701
|
+
if (this.multiple && Submit.string().array({ criteria: "minLength", value: 1 }).is(detail))
|
|
6714
6702
|
result = this.type == "array" ? contains(detail) : within(detail);
|
|
6715
6703
|
else if (typeof detail == "string")
|
|
6716
6704
|
result = is(detail);
|
|
@@ -6722,9 +6710,9 @@ const SmoothlyFilterPicker = class {
|
|
|
6722
6710
|
return (index.h("smoothly-picker", { name: this.property, looks: "border", multiple: this.multiple, onSmoothlyInputLooks: e => e.stopPropagation(), onSmoothlyChange: e => e.stopPropagation(), onSmoothlyPickerLoaded: e => e.stopPropagation(), onSmoothlyInput: e => this.pickerHandler(e) }, this.label && (index.h("span", { slot: "label" }, [this.label.slice(0, 1).toUpperCase(), this.label.slice(1, this.label.length)].join(""))), index.h("span", { slot: "search" }, "Search"), index.h("slot", null)));
|
|
6723
6711
|
}
|
|
6724
6712
|
};
|
|
6725
|
-
SmoothlyFilterPicker.style = styleCss$
|
|
6713
|
+
SmoothlyFilterPicker.style = styleCss$Z;
|
|
6726
6714
|
|
|
6727
|
-
const styleCss$
|
|
6715
|
+
const styleCss$Y = ".sc-smoothly-filter-toggle-h{position:relative;display:inline-block}[flip].sc-smoothly-filter-toggle-h{transform:scaleX(-1)}";
|
|
6728
6716
|
|
|
6729
6717
|
const SmoothlyFilterToggle = class {
|
|
6730
6718
|
constructor(hostRef) {
|
|
@@ -6804,7 +6792,7 @@ const SmoothlyFilterToggle = class {
|
|
|
6804
6792
|
return (index.h("smoothly-icon", { fill: "clear", color: this.active ? "success" : "medium", name: (this.active ? `${this.icon}` : `${this.icon}-outline`), toolTip: this.toolTip, onClick: () => this.activeHandler(true) }));
|
|
6805
6793
|
}
|
|
6806
6794
|
};
|
|
6807
|
-
SmoothlyFilterToggle.style = styleCss$
|
|
6795
|
+
SmoothlyFilterToggle.style = styleCss$Y;
|
|
6808
6796
|
|
|
6809
6797
|
var Method;
|
|
6810
6798
|
(function (Method) {
|
|
@@ -7577,16 +7565,16 @@ var Editable;
|
|
|
7577
7565
|
(function (Editable) {
|
|
7578
7566
|
let Element;
|
|
7579
7567
|
(function (Element) {
|
|
7580
|
-
Element.type =
|
|
7581
|
-
edit: islyFunction(),
|
|
7582
|
-
readonly:
|
|
7583
|
-
listen: islyFunction(),
|
|
7584
|
-
reset: islyFunction(),
|
|
7585
|
-
setInitialValue: islyFunction(),
|
|
7568
|
+
Element.type = Submit.object({
|
|
7569
|
+
edit: Submit.islyFunction(),
|
|
7570
|
+
readonly: Submit.boolean(),
|
|
7571
|
+
listen: Submit.islyFunction(),
|
|
7572
|
+
reset: Submit.islyFunction(),
|
|
7573
|
+
setInitialValue: Submit.islyFunction(),
|
|
7586
7574
|
});
|
|
7587
7575
|
})(Element = Editable.Element || (Editable.Element = {}));
|
|
7588
7576
|
Editable.type = Element.type.extend({
|
|
7589
|
-
changed:
|
|
7577
|
+
changed: Submit.boolean(),
|
|
7590
7578
|
value: any().optional(),
|
|
7591
7579
|
});
|
|
7592
7580
|
})(Editable || (Editable = {}));
|
|
@@ -7594,7 +7582,7 @@ var Editable;
|
|
|
7594
7582
|
var Looks;
|
|
7595
7583
|
(function (Looks) {
|
|
7596
7584
|
Looks.types = ["plain", "grid", "border", "line", "transparent"];
|
|
7597
|
-
Looks.type =
|
|
7585
|
+
Looks.type = Submit.string(Looks.types);
|
|
7598
7586
|
Looks.is = Looks.type.is;
|
|
7599
7587
|
})(Looks || (Looks = {}));
|
|
7600
7588
|
|
|
@@ -7602,15 +7590,15 @@ var Input;
|
|
|
7602
7590
|
(function (Input) {
|
|
7603
7591
|
let Element;
|
|
7604
7592
|
(function (Element) {
|
|
7605
|
-
Element.type =
|
|
7606
|
-
value:
|
|
7607
|
-
color:
|
|
7608
|
-
name:
|
|
7593
|
+
Element.type = Submit.object({
|
|
7594
|
+
value: Submit.union(Submit.Data.type, Submit.Data.valueType).optional(),
|
|
7595
|
+
color: Submit.Color.type.optional(),
|
|
7596
|
+
name: Submit.string(),
|
|
7609
7597
|
looks: Looks.type,
|
|
7610
7598
|
});
|
|
7611
7599
|
Element.is = Element.type.is;
|
|
7612
7600
|
})(Element = Input.Element || (Input.Element = {}));
|
|
7613
|
-
const EventEmitter =
|
|
7601
|
+
const EventEmitter = Submit.object({ emit: Submit.islyFunction() });
|
|
7614
7602
|
Input.type = Element.type.extend({
|
|
7615
7603
|
smoothlyInput: EventEmitter,
|
|
7616
7604
|
smoothlyInputForm: EventEmitter.optional(),
|
|
@@ -7618,7 +7606,7 @@ var Input;
|
|
|
7618
7606
|
Input.is = Input.type.is;
|
|
7619
7607
|
})(Input || (Input = {}));
|
|
7620
7608
|
|
|
7621
|
-
const styleCss$
|
|
7609
|
+
const styleCss$X = "smoothly-form{display:block;position:relative;--background-color:var(--smoothly-color-shade);--text-color:var(--smoothly-color-contrast)}smoothly-form>form{position:relative;min-width:15em}smoothly-form>form>fieldset{display:flex;flex-flow:row wrap;margin-inline-start:unset;margin-inline-end:unset;padding-block-start:unset;padding-inline-start:unset;padding-inline-end:unset;padding-block-end:unset;min-inline-size:unset;border-width:unset;border-style:unset;border-color:unset;border-image:unset}smoothly-form>form>fieldset>*{flex-grow:1;min-width:10em;flex-basis:40%}smoothly-form[looks=\"grid\"]>form>fieldset{border:rgba(var(--text-color), .5) solid .5px}smoothly-form[looks=\"line\"]>form>fieldset,smoothly-form[looks=\"border\"]>form>fieldset,smoothly-form[looks=\"transparent\"]>form>fieldset{gap:2em}smoothly-form>form>div{display:flex;justify-content:end;gap:1em;margin-top:0.5rem}";
|
|
7622
7610
|
|
|
7623
7611
|
const SmoothlyForm = class {
|
|
7624
7612
|
constructor(hostRef) {
|
|
@@ -7631,14 +7619,14 @@ const SmoothlyForm = class {
|
|
|
7631
7619
|
this.listeners = {};
|
|
7632
7620
|
this.color = undefined;
|
|
7633
7621
|
this.value = {};
|
|
7634
|
-
this.
|
|
7622
|
+
this.action = undefined;
|
|
7623
|
+
this.type = this.action ? "create" : undefined;
|
|
7635
7624
|
this.readonly = false;
|
|
7636
7625
|
this.looks = "plain";
|
|
7637
7626
|
this.name = undefined;
|
|
7638
|
-
this.action = undefined;
|
|
7639
|
-
this.processing = undefined;
|
|
7640
7627
|
this.prevent = true;
|
|
7641
7628
|
this.changed = false;
|
|
7629
|
+
this.processing = undefined;
|
|
7642
7630
|
}
|
|
7643
7631
|
async listen(property, listener) {
|
|
7644
7632
|
var _a;
|
|
@@ -7660,13 +7648,19 @@ const SmoothlyForm = class {
|
|
|
7660
7648
|
event.detail(this.looks, this.color);
|
|
7661
7649
|
}
|
|
7662
7650
|
async smoothlyInputHandler(event) {
|
|
7663
|
-
this.smoothlyFormInput.emit((this.value =
|
|
7651
|
+
this.smoothlyFormInput.emit((this.value = Submit.Data.merge(this.value, event.detail)));
|
|
7652
|
+
}
|
|
7653
|
+
windowSubmitHandler(event) {
|
|
7654
|
+
event.target == this.element && event.detail.result(false);
|
|
7655
|
+
}
|
|
7656
|
+
submitHandler(event) {
|
|
7657
|
+
this.action && event.stopPropagation();
|
|
7664
7658
|
}
|
|
7665
7659
|
async smoothlyInputLoadHandler(event) {
|
|
7666
7660
|
event.stopPropagation();
|
|
7667
7661
|
event.detail(this);
|
|
7668
7662
|
if (Input.Element.is(event.target)) {
|
|
7669
|
-
this.value =
|
|
7663
|
+
this.value = Submit.Data.merge(this.value, { [event.target.name]: event.target.value });
|
|
7670
7664
|
this.inputs.set(event.target.name, event.target);
|
|
7671
7665
|
}
|
|
7672
7666
|
}
|
|
@@ -7675,39 +7669,38 @@ const SmoothlyForm = class {
|
|
|
7675
7669
|
event.detail(this.readonly);
|
|
7676
7670
|
}
|
|
7677
7671
|
async submit(remove) {
|
|
7678
|
-
|
|
7679
|
-
|
|
7680
|
-
|
|
7681
|
-
|
|
7682
|
-
|
|
7683
|
-
|
|
7684
|
-
|
|
7685
|
-
|
|
7686
|
-
|
|
7687
|
-
|
|
7688
|
-
|
|
7689
|
-
|
|
7690
|
-
|
|
7691
|
-
|
|
7692
|
-
|
|
7693
|
-
|
|
7694
|
-
|
|
7695
|
-
|
|
7696
|
-
|
|
7697
|
-
|
|
7698
|
-
|
|
7699
|
-
|
|
7700
|
-
|
|
7701
|
-
|
|
7702
|
-
|
|
7703
|
-
|
|
7704
|
-
|
|
7705
|
-
|
|
7706
|
-
|
|
7707
|
-
|
|
7708
|
-
return result;
|
|
7709
|
-
}));
|
|
7672
|
+
this.processing = new Promise(resolve => {
|
|
7673
|
+
this.smoothlyFormSubmit.emit({ value: this.value, result: resolve, type: remove == true ? "remove" : this.type });
|
|
7674
|
+
if (this.action) {
|
|
7675
|
+
const action = this.action;
|
|
7676
|
+
this.notice.emit(redirect.Notice.execute("Submitting form", async () => {
|
|
7677
|
+
const method = remove
|
|
7678
|
+
? "DELETE"
|
|
7679
|
+
: !this.type || this.type == "create"
|
|
7680
|
+
? "POST"
|
|
7681
|
+
: this.type == "change"
|
|
7682
|
+
? "PUT"
|
|
7683
|
+
: this.type == "update"
|
|
7684
|
+
? "PATCH"
|
|
7685
|
+
: "GET";
|
|
7686
|
+
const response = await fetch(Request.create(method == "GET"
|
|
7687
|
+
? { method, url: `${action}?${stringify(this.value)}` }
|
|
7688
|
+
: Object.assign({ method, url: action }, (this.value && { header: { contentType: "application/json" }, body: this.value }))))
|
|
7689
|
+
.catch(() => undefined);
|
|
7690
|
+
const result = !response || (response === null || response === void 0 ? void 0 : response.status) < 200 || response.status >= 300
|
|
7691
|
+
? [false, "Failed to submit form."]
|
|
7692
|
+
: [true, "Form successfully submitted."];
|
|
7693
|
+
resolve(result[0]);
|
|
7694
|
+
return [...result];
|
|
7695
|
+
}));
|
|
7696
|
+
}
|
|
7697
|
+
});
|
|
7698
|
+
if (await this.processing) {
|
|
7699
|
+
this.type == "create" && (await this.clear());
|
|
7700
|
+
this.setInitialValue();
|
|
7701
|
+
this.readonlyAtLoad && this.edit(!this.readonlyAtLoad);
|
|
7710
7702
|
}
|
|
7703
|
+
this.processing = undefined;
|
|
7711
7704
|
}
|
|
7712
7705
|
async clear() {
|
|
7713
7706
|
this.inputs.forEach(input => {
|
|
@@ -7732,16 +7725,17 @@ const SmoothlyForm = class {
|
|
|
7732
7725
|
});
|
|
7733
7726
|
}
|
|
7734
7727
|
render() {
|
|
7735
|
-
return (index.h(index.Host, null, index.h("smoothly-spinner", { active: this.processing }), index.h("form", { onSubmit: !this.prevent ? undefined : e => e.preventDefault(), name: this.name }, index.h("fieldset", null, index.h("slot", null)), index.h("div", null, index.h("slot", { name: "edit" }), index.h("slot", { name: "reset" }), index.h("slot", { name: "clear" }), index.h("slot", { name: "submit" })))));
|
|
7728
|
+
return (index.h(index.Host, null, index.h("smoothly-spinner", { active: !!this.processing }), index.h("form", { onSubmit: !this.prevent ? undefined : e => e.preventDefault(), name: this.name }, index.h("fieldset", null, index.h("slot", null)), index.h("div", null, index.h("slot", { name: "edit" }), index.h("slot", { name: "reset" }), index.h("slot", { name: "clear" }), index.h("slot", { name: "submit" })))));
|
|
7736
7729
|
}
|
|
7730
|
+
get element() { return index.getElement(this); }
|
|
7737
7731
|
static get watchers() { return {
|
|
7738
7732
|
"value": ["watchValue"],
|
|
7739
7733
|
"readonly": ["watchReadonly"]
|
|
7740
7734
|
}; }
|
|
7741
7735
|
};
|
|
7742
|
-
SmoothlyForm.style = styleCss$
|
|
7736
|
+
SmoothlyForm.style = styleCss$X;
|
|
7743
7737
|
|
|
7744
|
-
const styleCss$
|
|
7738
|
+
const styleCss$W = ".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}";
|
|
7745
7739
|
|
|
7746
7740
|
const SmoothlyFrame = class {
|
|
7747
7741
|
constructor(hostRef) {
|
|
@@ -7763,9 +7757,9 @@ const SmoothlyFrame = class {
|
|
|
7763
7757
|
componentDidLoad() {
|
|
7764
7758
|
var _a;
|
|
7765
7759
|
if (this.contentWindow)
|
|
7766
|
-
|
|
7760
|
+
Submit.Message.listen((_a = this.origin) !== null && _a !== void 0 ? _a : this.defaultOrigin, (destination, content) => {
|
|
7767
7761
|
if (destination == this.name)
|
|
7768
|
-
if (
|
|
7762
|
+
if (Submit.Trigger.is(content))
|
|
7769
7763
|
this.trigger.emit(content);
|
|
7770
7764
|
else
|
|
7771
7765
|
this.message2.emit({ destination, content });
|
|
@@ -7774,9 +7768,9 @@ const SmoothlyFrame = class {
|
|
|
7774
7768
|
async send(message2, content) {
|
|
7775
7769
|
var _a, _b;
|
|
7776
7770
|
if (typeof message2 == "string")
|
|
7777
|
-
|
|
7778
|
-
else if (
|
|
7779
|
-
|
|
7771
|
+
Submit.Message.send(((_a = this.origin) !== null && _a !== void 0 ? _a : this.defaultOrigin) + "#" + message2, content, this.contentWindow);
|
|
7772
|
+
else if (Submit.Message.is(message2) && this.contentWindow)
|
|
7773
|
+
Submit.Message.send({
|
|
7780
7774
|
destination: ((_b = this.origin) !== null && _b !== void 0 ? _b : this.defaultOrigin) + "#" + message2.destination,
|
|
7781
7775
|
content: message2.destination,
|
|
7782
7776
|
}, this.contentWindow);
|
|
@@ -7786,9 +7780,9 @@ const SmoothlyFrame = class {
|
|
|
7786
7780
|
}
|
|
7787
7781
|
get element() { return index.getElement(this); }
|
|
7788
7782
|
};
|
|
7789
|
-
SmoothlyFrame.style = styleCss$
|
|
7783
|
+
SmoothlyFrame.style = styleCss$W;
|
|
7790
7784
|
|
|
7791
|
-
const styleCss$
|
|
7785
|
+
const styleCss$V = "[size].sc-smoothly-icon-h{background:none}.sc-smoothly-icon-h{display:block}[rotate].sc-smoothly-icon-h{--rotate:rotate(var(--rotation, 0deg));transform:var(--rotate)}[flip=x].sc-smoothly-icon-h{--flip:scaleX(-1);transform:var(--flip)}[flip=y].sc-smoothly-icon-h{--flip:scaleY(-1);transform:var(--flip)}[rotate][flip].sc-smoothly-icon-h{transform:var(--rotate)var(--flip)}[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}";
|
|
7792
7786
|
|
|
7793
7787
|
const SmoothlyIcon = class {
|
|
7794
7788
|
constructor(hostRef) {
|
|
@@ -7805,7 +7799,7 @@ const SmoothlyIcon = class {
|
|
|
7805
7799
|
async componentWillLoad() {
|
|
7806
7800
|
let result;
|
|
7807
7801
|
if (this.name != "empty") {
|
|
7808
|
-
result = await
|
|
7802
|
+
result = await Submit.Icon.load(this.name);
|
|
7809
7803
|
result = result === null || result === void 0 ? void 0 : result.replace(/(?<=^<svg\s?)/, `$& role="img"`).replace(` width="512" height="512"`, "").replace(/stroke:#000;/gi, "");
|
|
7810
7804
|
if (!this.toolTip)
|
|
7811
7805
|
result = result === null || result === void 0 ? void 0 : result.replace(/<title>.*<\/title>/, "");
|
|
@@ -7827,9 +7821,9 @@ const SmoothlyIcon = class {
|
|
|
7827
7821
|
"name": ["componentWillLoad"]
|
|
7828
7822
|
}; }
|
|
7829
7823
|
};
|
|
7830
|
-
SmoothlyIcon.style = styleCss$
|
|
7824
|
+
SmoothlyIcon.style = styleCss$V;
|
|
7831
7825
|
|
|
7832
|
-
const styleCss$
|
|
7826
|
+
const styleCss$U = ".sc-smoothly-icon-demo-h{display:block}[hidden].sc-smoothly-icon-demo-h{display:none}.sc-smoothly-icon-demo-h>div.sc-smoothly-icon-demo{display:flex;flex-flow:row wrap}.sc-smoothly-icon-demo-h>div.sc-smoothly-icon-demo>*.sc-smoothly-icon-demo{margin:0.5cm}";
|
|
7833
7827
|
|
|
7834
7828
|
const SmoothlyIconDemo = class {
|
|
7835
7829
|
constructor(hostRef) {
|
|
@@ -8313,9 +8307,9 @@ const SmoothlyIconDemo = class {
|
|
|
8313
8307
|
];
|
|
8314
8308
|
}
|
|
8315
8309
|
};
|
|
8316
|
-
SmoothlyIconDemo.style = styleCss$
|
|
8310
|
+
SmoothlyIconDemo.style = styleCss$U;
|
|
8317
8311
|
|
|
8318
|
-
const styleCss$
|
|
8312
|
+
const styleCss$T = ".sc-smoothly-input-h{box-sizing:border-box}.sc-smoothly-input-h[looks=\"border\"].sc-smoothly-input-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-h{border:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}[looks=\"border\"][readonly].sc-smoothly-input-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .1) solid 1px}.sc-smoothly-input-h[looks=\"line\"].sc-smoothly-input-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-h{border-bottom:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}[looks=\"line\"][readonly].sc-smoothly-input-h{border-bottom:rgba(var(--text-color, var(--smoothly-color-contrast)), .1) solid 1px}.sc-smoothly-input-h[looks=\"grid\"].sc-smoothly-input-s>smoothly-picker-menu smoothly-input,[looks=\"grid\"].sc-smoothly-input-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .5) solid .5px}[looks=\"grid\"][readonly].sc-smoothly-input-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .2) solid .5px}[looks=\"transparent\"].sc-smoothly-input-h{border:none}[looks=\"transparent\"].sc-smoothly-input-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"].sc-smoothly-input-h:not(:focus-within) input.sc-smoothly-input{background:transparent}[looks=\"transparent\"].sc-smoothly-input-h:focus-within{outline:1px solid rgb(var(--smoothly-color-contrast))}.sc-smoothly-input-h{display:flex;align-items:center;justify-content:center;font-weight:var(--smoothly-font-weight);padding:0 0.4em;overflow:hidden;background-color:rgb(var(--background-color, var(--smoothly-color-shade)));color:rgb(var(--text-color, var(--smoothly-color-contrast)))}[hidden].sc-smoothly-input-h{display:none}.sc-smoothly-input-h>div.sc-smoothly-input:nth-child(2){margin-left:0.2em}.sc-smoothly-input-h>div.sc-smoothly-input{position:relative;width:100%;height:100%}label.sc-smoothly-input{position:absolute;left:0;top:0.6em;opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms 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%;border:0;z-index:1;position:relative;font-size:1rem;font-family:var(--smoothly-font-family);background-color:rgb(var(--background-color, var(--smoothly-color-shade)))}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}.sc-smoothly-input-h:not([readonly]):not(.has-value)[placeholder]>div.sc-smoothly-input>label.sc-smoothly-input,.has-value.sc-smoothly-input-h>div.sc-smoothly-input>label.sc-smoothly-input,.sc-smoothly-input-h:not([readonly]):not(.has-value):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, var(--smoothly-color-shade))) inset;-webkit-box-shadow:0 0 0 40em rgb(var(--background-color, var(--smoothly-color-shade))) 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-color-contrast)))}";
|
|
8319
8313
|
|
|
8320
8314
|
const SmoothlyInput = class {
|
|
8321
8315
|
constructor(hostRef) {
|
|
@@ -8599,9 +8593,9 @@ function getLocale() {
|
|
|
8599
8593
|
const result = navigator.language;
|
|
8600
8594
|
return TimeZone.Locale.is(result) ? result : TimeZone.Language.is(result) ? TimeZone.Locale.toLocale(result) : undefined;
|
|
8601
8595
|
}
|
|
8602
|
-
SmoothlyInput.style = styleCss$
|
|
8596
|
+
SmoothlyInput.style = styleCss$T;
|
|
8603
8597
|
|
|
8604
|
-
const styleCss$
|
|
8598
|
+
const styleCss$S = ".sc-smoothly-input-checkbox-h{box-sizing:border-box}.sc-smoothly-input-checkbox-h[looks=\"border\"].sc-smoothly-input-checkbox-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-checkbox-h{border:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}[looks=\"border\"][readonly].sc-smoothly-input-checkbox-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .1) solid 1px}.sc-smoothly-input-checkbox-h[looks=\"line\"].sc-smoothly-input-checkbox-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-checkbox-h{border-bottom:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}[looks=\"line\"][readonly].sc-smoothly-input-checkbox-h{border-bottom:rgba(var(--text-color, var(--smoothly-color-contrast)), .1) solid 1px}.sc-smoothly-input-checkbox-h[looks=\"grid\"].sc-smoothly-input-checkbox-s>smoothly-picker-menu smoothly-input,[looks=\"grid\"].sc-smoothly-input-checkbox-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .5) solid .5px}[looks=\"grid\"][readonly].sc-smoothly-input-checkbox-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .2) solid .5px}[looks=\"transparent\"].sc-smoothly-input-checkbox-h{border:none}[looks=\"transparent\"].sc-smoothly-input-checkbox-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"].sc-smoothly-input-checkbox-h:not(:focus-within) input.sc-smoothly-input-checkbox{background:transparent}[looks=\"transparent\"].sc-smoothly-input-checkbox-h:focus-within{outline:1px solid rgb(var(--smoothly-color-contrast))}.sc-smoothly-input-checkbox-h{display:flex;align-items:center;flex-direction:row;position:relative;gap:.5em;padding:.6em;box-sizing:border-box;background-color:rgb(var(--background-color))}smoothly-icon.sc-smoothly-input-checkbox{position:absolute;z-index:1}.sc-smoothly-input-checkbox-h input.sc-smoothly-input-checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:1.2em;width:1.2em;border:1px solid black;display:block}.sc-smoothly-input-checkbox-h:not([readonly]) smoothly-icon.sc-smoothly-input-checkbox,.sc-smoothly-input-checkbox-h:not([readonly]) input.sc-smoothly-input-checkbox{cursor:pointer}[disabled].sc-smoothly-input-checkbox-h input.sc-smoothly-input-checkbox,[disabled].sc-smoothly-input-checkbox-h smoothly-icon.sc-smoothly-input-checkbox{border-color:rgb(var(--smoothly-color-contrast), 0.3);color:rgb(var(--smoothly-color-contrast), 0.4)}";
|
|
8605
8599
|
|
|
8606
8600
|
const SmoothlyInputCheckbox = class {
|
|
8607
8601
|
constructor(hostRef) {
|
|
@@ -8662,9 +8656,9 @@ const SmoothlyInputCheckbox = class {
|
|
|
8662
8656
|
"checked": ["elementCheck"]
|
|
8663
8657
|
}; }
|
|
8664
8658
|
};
|
|
8665
|
-
SmoothlyInputCheckbox.style = styleCss$
|
|
8659
|
+
SmoothlyInputCheckbox.style = styleCss$S;
|
|
8666
8660
|
|
|
8667
|
-
const styleCss$
|
|
8661
|
+
const styleCss$R = "[color=default].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-default-color);--smoothly-color-contrast:var(--smoothly-default-contrast);--smoothly-color-shade:var(--smoothly-default-shade);--smoothly-color-tint:var(--smoothly-default-tint)}[color=primary].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-primary-color);--smoothly-color-contrast:var(--smoothly-primary-contrast);--smoothly-color-shade:var(--smoothly-primary-shade);--smoothly-color-tint:var(--smoothly-primary-tint)}[color=secondary].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-secondary-color);--smoothly-color-contrast:var(--smoothly-secondary-contrast);--smoothly-color-shade:var(--smoothly-secondary-shade);--smoothly-color-tint:var(--smoothly-secondary-tint)}[color=tertiary].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-tertiary-color);--smoothly-color-contrast:var(--smoothly-tertiary-contrast);--smoothly-color-shade:var(--smoothly-tertiary-shade);--smoothly-color-tint:var(--smoothly-tertiary-tint)}[color=success].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-success-color);--smoothly-color-contrast:var(--smoothly-success-color);--smoothly-color-shade:var(--smoothly-success-shade);--smoothly-color-tint:var(--smoothly-success-tint)}[color=warning].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-warning-color);--smoothly-color-contrast:var(--smoothly-warning-contrast);--smoothly-color-shade:var(--smoothly-warning-shade);--smoothly-color-tint:var(--smoothly-warning-tint)}[color=danger].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-danger-color);--smoothly-color-contrast:var(--smoothly-danger-contrast);--smoothly-color-shade:var(--smoothly-danger-shade);--smoothly-color-tint:var(--smoothly-danger-tint)}[color=light].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-light-color);--smoothly-color-contrast:var(--smoothly-light-contrast);--smoothly-color-shade:var(--smoothly-light-shade);--smoothly-color-tint:var(--smoothly-light-tint)}[color=medium].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-medium-color);--smoothly-color-contrast:var(--smoothly-medium-contrast);--smoothly-color-shade:var(--smoothly-medium-shade);--smoothly-color-tint:var(--smoothly-medium-tint)}[color=dark].sc-smoothly-input-clear{--smoothly-color:var(--smoothly-dark-color);--smoothly-color-contrast:var(--smoothly-dark-contrast);--smoothly-color-shade:var(--smoothly-dark-shade);--smoothly-color-tint:var(--smoothly-dark-tint)}.sc-smoothly-input-clear-h{display:inline-block;box-sizing:border-box;border-radius:0.5rem;border:solid 1px;transition:background 150ms ease-in-out;cursor:pointer}[type=link].sc-smoothly-input-clear-h{display:inline;border:none}[disabled].sc-smoothly-input-clear-h{opacity:0.5;pointer-events:none}a.sc-smoothly-input-clear,button.sc-smoothly-input-clear{font-size:110%;font-weight:400;border:none;background-color:transparent;cursor:pointer;display:inline-flex;gap:0.5rem}button.sc-smoothly-input-clear{justify-content:center;height:100%;width:100%;border-radius:0.5rem;align-items:center}.sc-smoothly-input-clear-h:not([size=icon]):not([size=flexible])>button.sc-smoothly-input-clear{padding:0.8em;min-width:8em}.sc-smoothly-input-clear-h:not([size=icon]):not([size=flexible]):has(smoothly-icon)>button.sc-smoothly-input-clear{padding:0.6em}[size=icon].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear{padding:0.5em}[shape=rounded].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear,[shape=rounded].sc-smoothly-input-clear-h{border-radius:2rem}[type=button].sc-smoothly-input-clear-h>a.sc-smoothly-input-clear{text-align:center;text-decoration:inherit;width:calc(100% - 0.6em)}[size=small].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear{font-size:100%}[size=large].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear{font-size:130%}.sc-smoothly-input-clear-h:not([size=icon]){min-width:8em}[size=flexible].sc-smoothly-input-clear-h{min-width:unset;padding:0;margin:0;display:flex;justify-content:center;align-items:center;border:none}[size=flexible].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear{min-width:unset;padding:0;margin:0 !important}[expand].sc-smoothly-input-clear-h{width:100%}[expand=full].sc-smoothly-input-clear-h{border-left:none;border-right:none;border-radius:0}[shape=rounded].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear,[shape=rounded].sc-smoothly-input-clear-h{border-radius:2rem}.sc-smoothly-input-clear-h:not([fill=clear]):hover,.sc-smoothly-input-clear-h:not([fill=clear]):focus,.sc-smoothly-input-clear-h:not([fill=clear]):active{border-color:rgb(var(--smoothly-color-tint)) !important;background:rgb(var(--smoothly-color-tint)) !important}.sc-smoothly-input-clear-h:not([fill=clear]):hover>button.sc-smoothly-input-clear,.sc-smoothly-input-clear-h:not([fill=clear]):focus>button.sc-smoothly-input-clear,.sc-smoothly-input-clear-h:not([fill=clear]):active>button.sc-smoothly-input-clear,.sc-smoothly-input-clear-h:not([fill=clear]):hover .sc-smoothly-input-clear-s>smoothly-icon,.sc-smoothly-input-clear-h:not([fill=clear]):focus .sc-smoothly-input-clear-s>smoothly-icon,.sc-smoothly-input-clear-h:not([fill=clear]):active .sc-smoothly-input-clear-s>smoothly-icon{color:rgb(var(--smoothly-color-contrast)) !important;stroke:rgb(var(--smoothly-color-contrast)) !important;fill:rgb(var(--smoothly-color-contrast)) !important}[fill=clear].sc-smoothly-input-clear-h:hover>button.sc-smoothly-input-clear,[fill=clear].sc-smoothly-input-clear-h:focus>button.sc-smoothly-input-clear,[fill=clear].sc-smoothly-input-clear-h:active>button.sc-smoothly-input-clear{color:rgb(var(--smoothly-color-tint)) !important;stroke:rgb(var(--smoothly-color-tint)) !important;fill:rgb(var(--smoothly-color-tint)) !important}[disabled].sc-smoothly-input-clear-h{opacity:0.5;pointer-events:none}.sc-smoothly-input-clear-h:not([fill]),[fill=default].sc-smoothly-input-clear-h{background:rgb(var(--smoothly-color));border-color:transparent}[fill=solid].sc-smoothly-input-clear-h{background:rgb(var(--smoothly-color));border-color:rgb(var(--smoothly-color))}[fill=solid].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear,[fill=default].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear{stroke:rgb(var(--smoothly-color-contrast));fill:rgb(var(--smoothly-color-contrast));color:rgb(var(--smoothly-color-contrast))}[fill=outline].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear,[fill=clear].sc-smoothly-input-clear-h>button.sc-smoothly-input-clear{stroke:rgb(var(--smoothly-color));fill:rgb(var(--smoothly-color));color:rgb(var(--smoothly-color))}[fill=outline].sc-smoothly-input-clear-h{background:transparent;border-color:rgb(var(--smoothly-color))}[fill=clear].sc-smoothly-input-clear-h{background:transparent;border-color:transparent}.sc-smoothly-input-clear-s>smoothly-icon[slot=start],.sc-smoothly-input-clear-s>smoothly-icon[slot=end]{font-size:0.65em}[hidden].sc-smoothly-input-clear-h{display:none}.sc-smoothly-input-clear-h:not([display]){display:none}.sc-smoothly-input-clear-h{transition:0.6s;margin:0rem;min-width:0rem}[type=\"input\"].sc-smoothly-input-clear-h{line-height:1}[type=\"form\"].sc-smoothly-input-clear-h{margin:1em 0em}.sc-smoothly-input-clear-h[type=\"input\"] .sc-smoothly-input-clear-s>smoothly-icon{filter:opacity(60%);font-size:70%}.sc-smoothly-input-clear-h[type=\"input\"]:hover .sc-smoothly-input-clear-s>smoothly-icon{cursor:pointer;filter:opacity(100%)}[type=\"input\"].sc-smoothly-input-clear-h button.sc-smoothly-input-clear{padding:0rem;margin:0rem;min-width:0rem}";
|
|
8668
8662
|
|
|
8669
8663
|
const SmoothlyInputClear = class {
|
|
8670
8664
|
constructor(hostRef) {
|
|
@@ -8706,9 +8700,9 @@ const SmoothlyInputClear = class {
|
|
|
8706
8700
|
return (index.h(Button, { disabled: this.disabled, type: "button" }, index.h("slot", null)));
|
|
8707
8701
|
}
|
|
8708
8702
|
};
|
|
8709
|
-
SmoothlyInputClear.style = styleCss$
|
|
8703
|
+
SmoothlyInputClear.style = styleCss$R;
|
|
8710
8704
|
|
|
8711
|
-
const styleCss$
|
|
8705
|
+
const styleCss$Q = ".sc-smoothly-input-color-h{display:flex}.sc-smoothly-input-color-h smoothly-input.sc-smoothly-input-color{width:100%}.sc-smoothly-input-color-h .color-sample.sc-smoothly-input-color{height:2em;width:5em;background-color:var(--value);border:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px;border-radius:2px}";
|
|
8712
8706
|
|
|
8713
8707
|
const SmoothlyInputColor = class {
|
|
8714
8708
|
constructor(hostRef) {
|
|
@@ -8756,9 +8750,9 @@ const SmoothlyInputColor = class {
|
|
|
8756
8750
|
"value": ["valueChanged"]
|
|
8757
8751
|
}; }
|
|
8758
8752
|
};
|
|
8759
|
-
SmoothlyInputColor.style = styleCss$
|
|
8753
|
+
SmoothlyInputColor.style = styleCss$Q;
|
|
8760
8754
|
|
|
8761
|
-
const styleCss$
|
|
8755
|
+
const styleCss$P = ".sc-smoothly-input-date-h{box-sizing:border-box}.sc-smoothly-input-date-h[looks=\"border\"].sc-smoothly-input-date-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-date-h{border:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}[looks=\"border\"][readonly].sc-smoothly-input-date-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .1) solid 1px}.sc-smoothly-input-date-h[looks=\"line\"].sc-smoothly-input-date-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-date-h{border-bottom:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}[looks=\"line\"][readonly].sc-smoothly-input-date-h{border-bottom:rgba(var(--text-color, var(--smoothly-color-contrast)), .1) solid 1px}.sc-smoothly-input-date-h[looks=\"grid\"].sc-smoothly-input-date-s>smoothly-picker-menu smoothly-input,[looks=\"grid\"].sc-smoothly-input-date-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .5) solid .5px}[looks=\"grid\"][readonly].sc-smoothly-input-date-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .2) solid .5px}[looks=\"transparent\"].sc-smoothly-input-date-h{border:none}[looks=\"transparent\"].sc-smoothly-input-date-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"].sc-smoothly-input-date-h:not(:focus-within) input.sc-smoothly-input-date{background:transparent}[looks=\"transparent\"].sc-smoothly-input-date-h:focus-within{outline:1px solid rgb(var(--smoothly-color-contrast))}.sc-smoothly-input-date-h{position:relative;max-width:100vw;background-color:rgb(var(--background-color, var(--smoothly-color-shade)))}[looks=transparent].sc-smoothly-input-date-h smoothly-input.sc-smoothly-input-date{outline:none}nav.sc-smoothly-input-date{position:absolute;z-index:10;top:3.5em;background-color:rgb(var(--background-color, var(--smoothly-color-shade)));min-width:18em}.sc-smoothly-input-date-h>div.sc-smoothly-input-date{position:fixed;top:0;left:0;right:0;bottom:0;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(--background-color, var(--smoothly-color-shade)))}@media screen and (min-width: 400px){nav.sc-smoothly-input-date{position:absolute;z-index:10;top:3.5em;background-color:rgb(var(--background-color, var(--smoothly-color-shade)));max-width:22em}}";
|
|
8762
8756
|
|
|
8763
8757
|
const InputDate = class {
|
|
8764
8758
|
constructor(hostRef) {
|
|
@@ -8818,9 +8812,9 @@ const InputDate = class {
|
|
|
8818
8812
|
"value": ["onStart"]
|
|
8819
8813
|
}; }
|
|
8820
8814
|
};
|
|
8821
|
-
InputDate.style = styleCss$
|
|
8815
|
+
InputDate.style = styleCss$P;
|
|
8822
8816
|
|
|
8823
|
-
const styleCss$
|
|
8817
|
+
const styleCss$O = ".sc-smoothly-input-date-range-h{box-sizing:border-box}.sc-smoothly-input-date-range-h[looks=\"border\"].sc-smoothly-input-date-range-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-input-date-range-h{border:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}[looks=\"border\"][readonly].sc-smoothly-input-date-range-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .1) solid 1px}.sc-smoothly-input-date-range-h[looks=\"line\"].sc-smoothly-input-date-range-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-input-date-range-h{border-bottom:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}[looks=\"line\"][readonly].sc-smoothly-input-date-range-h{border-bottom:rgba(var(--text-color, var(--smoothly-color-contrast)), .1) solid 1px}.sc-smoothly-input-date-range-h[looks=\"grid\"].sc-smoothly-input-date-range-s>smoothly-picker-menu smoothly-input,[looks=\"grid\"].sc-smoothly-input-date-range-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .5) solid .5px}[looks=\"grid\"][readonly].sc-smoothly-input-date-range-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .2) solid .5px}[looks=\"transparent\"].sc-smoothly-input-date-range-h{border:none}[looks=\"transparent\"].sc-smoothly-input-date-range-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"].sc-smoothly-input-date-range-h:not(:focus-within) input.sc-smoothly-input-date-range{background:transparent}[looks=\"transparent\"].sc-smoothly-input-date-range-h:focus-within{outline:1px solid rgb(var(--smoothly-color-contrast))}.sc-smoothly-input-date-range-h{position:relative;display:block;width:fit-content;background-color:rgb(var(--background-color, var(--smoothly-color-shade)))}.sc-smoothly-input-date-range-h:focus-within smoothly-input.sc-smoothly-input-date-range{outline:none}.sc-smoothly-input-date-range-h>nav.sc-smoothly-input-date-range{position:absolute;z-index:10;top:3.5em;background-color:rgb(var(--background-color, var(--smoothly-color-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(--background-color, var(--smoothly-color-shade)))}.sc-smoothly-input-date-range-h>section.sc-smoothly-input-date-range{display:flex;background-color:var(--background-color, var(--smoothly-color-shade), 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);flex-grow:1}span.sc-smoothly-input-date-range{padding:0.5em 0.2em 0.5em 0.2em;align-self:center}";
|
|
8824
8818
|
|
|
8825
8819
|
const InputDateRange = class {
|
|
8826
8820
|
constructor(hostRef) {
|
|
@@ -8884,9 +8878,9 @@ const InputDateRange = class {
|
|
|
8884
8878
|
"value": ["onValue"]
|
|
8885
8879
|
}; }
|
|
8886
8880
|
};
|
|
8887
|
-
InputDateRange.style = styleCss$
|
|
8881
|
+
InputDateRange.style = styleCss$O;
|
|
8888
8882
|
|
|
8889
|
-
const styleCss$
|
|
8883
|
+
const styleCss$N = "smoothly-input-demo{display:block;margin:2em;margin-bottom:20rem}.checkbox-group{display:flex;gap:1.5em;align-items:center;background-color:rgb(var(--background-color))}.select-div{display:flex;justify-content:space-between;gap:1em;flex-wrap:wrap}.select-div>*{flex-basis:49%}";
|
|
8890
8884
|
|
|
8891
8885
|
const SmoothlyInputDemo = class {
|
|
8892
8886
|
constructor(hostRef) {
|
|
@@ -8894,7 +8888,7 @@ const SmoothlyInputDemo = class {
|
|
|
8894
8888
|
this.duration = { hours: 8 };
|
|
8895
8889
|
}
|
|
8896
8890
|
render() {
|
|
8897
|
-
return (index.h(index.Host, null, index.h("h2", null, "Select"), index.h("div", { class: "select-div" }, index.h("smoothly-input-select", { name: "select-dessert", looks: "border", onSmoothlyInput: e => console.log(e.detail) }, index.h("label", { slot: "label" }, "Select with reset button"), index.h("smoothly-item", { value: "1" }, "Ice cream"), index.h("smoothly-item", { value: "2" }, "Sponge cake"), index.h("smoothly-item", { value: "3" }, "Cookie"), index.h("smoothly-item", { value: "4" }, "Croissant"), index.h("smoothly-item", { value: "5" }, "Chocolate fondue"), index.h("smoothly-input-reset", { size: "icon", slot: "end" }, index.h("smoothly-icon", { name: "refresh-outline" }))), index.h("smoothly-input-select", { multiple: true, name: "select-dessert-multiple", looks: "border", onSmoothlyInput: e => console.log(e.detail) }, index.h("label", { slot: "label" }, "Select multiple with reset button"), index.h("smoothly-item", { value: "ice cream" }, "Ice cream"), index.h("smoothly-item", { value: "sponge cake" }, "Sponge cake"), index.h("smoothly-item", { selected: true, value: "cookie" }, "Cookie"), index.h("smoothly-item", { value: "croissant" }, "Croissant"), index.h("smoothly-item", { selected: true, value: "chocolate fondue" }, "Chocolate fondue"), index.h("smoothly-input-reset", { size: "icon", slot: "end" }, index.h("smoothly-icon", { name: "refresh-outline" }))), index.h("smoothly-input-select", { name: "select-icon", clearable: false, showSelected: false, onSmoothlyInput: e => console.log("Form Readonly", e.detail) }, index.h("smoothly-item", { value: "folder", selected: true }, index.h("smoothly-icon", { size: "small", name: "folder-outline" })), index.h("smoothly-item", { value: "camera" }, index.h("smoothly-icon", { size: "small", name: "camera-outline" })))), index.h("h2", null, "Delayed"), index.h("smoothly-input", { name: "Delayed", delay: 2 }, "Delayed"), index.h("h2", null, "Editable form and Input with Clear and Reset - Readonly"), index.h("smoothly-form", { looks: "grid", type: "create", readonly: true, action: "https://api.toiletapi.com/upload/6b12fd2f-e896-46f9-b38f-25cf42cee4b4" }, index.h("smoothly-input", { readonly: true, name: "First Name", value: "John" }, "First name"), index.h("smoothly-input", { name: "Last name", value: "Doe" }, "Last name", index.h("smoothly-input-clear", { size: "icon", slot: "end" }, index.h("smoothly-icon", { name: "close" }))), index.h("smoothly-input", { type: "phone", name: "Phone", value: "777888999" }, "Phone", index.h("smoothly-input-reset", { size: "icon", slot: "end" }, index.h("smoothly-icon", { name: "refresh-outline" }))), index.h("smoothly-input-radio", { clearable: true, name: "radioFirstInput" }, index.h("p", { slot: "label" }, "Clearable"), index.h("smoothly-input-radio-item", { slot: "options", value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { selected: true, slot: "options", value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { slot: "options", value: "third" }, "Label 3")), index.h("smoothly-input-select", { menuHeight: "7.5items", placeholder: "Select...", multiple: true, name: "select-month" }, index.h("label", { slot: "label" }, "Month"), 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")), index.h("smoothly-input-select", { name: "select-icon", clearable: false, showSelected: false }, index.h("smoothly-item", { value: "folder", selected: true }, index.h("smoothly-icon", { size: "small", name: "folder-outline" })), index.h("smoothly-item", { value: "camera" }, index.h("smoothly-icon", { size: "small", name: "camera-outline" }))), index.h("smoothly-input-checkbox", { name: "checkbox" }, "Check the box"), index.h("smoothly-input-checkbox", { name: "checkbox2", checked: true }, "Check the box 2"), index.h("smoothly-input-range", { step: 1, name: "range3", value: 20000 }, "Select"), index.h("smoothly-picker", { multiple: true, name: "animals" }, index.h("span", { slot: "label" }, "Animals"), index.h("span", { slot: "search" }, "Search"), index.h("smoothly-picker-option", { selected: true, value: "cat" }, "Cat"), index.h("smoothly-picker-option", { value: "dog" }, "Dog"), index.h("smoothly-picker-option", { value: "fish" }, "Fish")), index.h("smoothly-input-edit", { fill: "default", type: "button", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), index.h("smoothly-input-reset", { fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), index.h("smoothly-input-submit", { delete: true, slot: "clear", color: "danger", size: "icon", shape: "rounded" }), index.h("smoothly-input-submit", { fill: "default", type: "button", color: "success", slot: "submit", size: "icon", shape: "rounded" }, index.h("smoothly-icon", { name: "checkmark-outline", fill: "solid", size: "tiny" }))), index.h("h2", null, "Editable form and Input with Clear and Reset - Editable"), index.h("smoothly-form", { looks: "grid", type: "create", action: "https://api.toiletapi.com/upload/6b12fd2f-e896-46f9-b38f-25cf42cee4b4" }, index.h("smoothly-input", { readonly: true, name: "First Name", value: "John" }, "First name"), index.h("smoothly-input", { name: "Last name", value: "Doe" }, "Last name", index.h("smoothly-input-clear", { size: "icon", slot: "end" }, index.h("smoothly-icon", { name: "close" }))), index.h("smoothly-input", { type: "phone", name: "Phone", value: "777888999" }, "Phone", index.h("smoothly-input-reset", { size: "icon", slot: "end" }, index.h("smoothly-icon", { name: "refresh-outline" }))), index.h("smoothly-input-radio", { clearable: true, name: "radioFirstInput" }, index.h("p", { slot: "label" }, "Clearable"), index.h("smoothly-input-radio-item", { slot: "options", value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { selected: true, slot: "options", value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { slot: "options", value: "third" }, "Label 3")), index.h("smoothly-input-select", { multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index.h("label", { slot: "label" }, "Month multiple select"), 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")), index.h("smoothly-input-select", { name: "select-icon", clearable: false, showSelected: false }, index.h("smoothly-item", { value: "folder", selected: true }, index.h("smoothly-icon", { size: "small", name: "folder-outline" })), index.h("smoothly-item", { value: "camera" }, index.h("smoothly-icon", { size: "small", name: "camera-outline" }))), index.h("smoothly-input-checkbox", { name: "checkbox" }, "Check the box"), index.h("smoothly-input-checkbox", { name: "checkbox2", checked: true }, "Check the box 2"), index.h("smoothly-input-range", { step: 1, name: "range3", value: 20000 }, "Select"), index.h("smoothly-picker", { multiple: true, name: "animals" }, index.h("span", { slot: "label" }, "Animals"), index.h("span", { slot: "search" }, "Search"), index.h("smoothly-picker-option", { selected: true, value: "cat" }, "Cat"), index.h("smoothly-picker-option", { value: "dog" }, "Dog"), index.h("smoothly-picker-option", { value: "fish" }, "Fish")), index.h("smoothly-input-edit", { fill: "default", type: "button", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), index.h("smoothly-input-reset", { fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), index.h("smoothly-input-submit", { delete: true, slot: "clear", color: "danger", size: "icon", shape: "rounded" }), index.h("smoothly-input-submit", { fill: "default", type: "button", color: "success", slot: "submit", size: "icon", shape: "rounded" }, index.h("smoothly-icon", { name: "checkmark-outline", fill: "solid", size: "tiny" }))), index.h("h2", null, "Color"), index.h("smoothly-form", { looks: "border" }, index.h("smoothly-input-color", { name: "color" })), index.h("h2", null, "Range"), index.h("smoothly-form", { looks: "border" }, index.h("smoothly-input-range", { step: 1, name: "range", outputSide: "right" }, "Select and so"), index.h("smoothly-input-range", { step: 1, name: "range2" }, "Select with really really long label", index.h("smoothly-icon", { name: "checkmark-circle", slot: "start" }), index.h("smoothly-input-clear", { size: "icon", slot: "end" }, index.h("smoothly-icon", { name: "close" }))), index.h("smoothly-input-range", { step: 1, name: "range3" }, "Select")), index.h("h2", null, "Duration"), index.h("smoothly-form", { looks: "border" }, index.h("smoothly-input", { name: "duration", type: "duration", placeholder: "hh:mm", value: this.duration, onSmoothlyInput: e => {
|
|
8891
|
+
return (index.h(index.Host, null, index.h("h2", null, "Controlled form"), index.h("smoothly-input-demo-controlled-form", null), index.h("h2", null, "Create form defaulting type"), index.h("smoothly-form", { looks: "line", action: "https://api.toiletapi.com/6b12fd2f-e896-46f9-b38f-25cf42cee4b4" }, index.h("smoothly-input", { type: "text", name: "name" }, "Name"), index.h("smoothly-input-reset", { slot: "reset", type: "form", size: "icon", color: "warning", fill: "default" }), index.h("smoothly-input-submit", { slot: "submit", size: "icon", color: "success" })), index.h("h2", null, "Select"), index.h("div", { class: "select-div" }, index.h("smoothly-input-select", { name: "select-dessert", looks: "border", onSmoothlyInput: e => console.log(e.detail) }, index.h("label", { slot: "label" }, "Select with reset button"), index.h("smoothly-item", { value: "1" }, "Ice cream"), index.h("smoothly-item", { value: "2" }, "Sponge cake"), index.h("smoothly-item", { value: "3" }, "Cookie"), index.h("smoothly-item", { value: "4" }, "Croissant"), index.h("smoothly-item", { value: "5" }, "Chocolate fondue"), index.h("smoothly-input-reset", { size: "icon", slot: "end" }, index.h("smoothly-icon", { name: "refresh-outline" }))), index.h("smoothly-input-select", { multiple: true, name: "select-dessert-multiple", looks: "border", onSmoothlyInput: e => console.log(e.detail) }, index.h("label", { slot: "label" }, "Select multiple with reset button"), index.h("smoothly-item", { value: "ice cream" }, "Ice cream"), index.h("smoothly-item", { value: "sponge cake" }, "Sponge cake"), index.h("smoothly-item", { selected: true, value: "cookie" }, "Cookie"), index.h("smoothly-item", { value: "croissant" }, "Croissant"), index.h("smoothly-item", { selected: true, value: "chocolate fondue" }, "Chocolate fondue"), index.h("smoothly-input-reset", { size: "icon", slot: "end" }, index.h("smoothly-icon", { name: "refresh-outline" }))), index.h("smoothly-input-select", { name: "select-icon", clearable: false, showSelected: false, onSmoothlyInput: e => console.log("Form Readonly", e.detail) }, index.h("smoothly-item", { value: "folder", selected: true }, index.h("smoothly-icon", { size: "small", name: "folder-outline" })), index.h("smoothly-item", { value: "camera" }, index.h("smoothly-icon", { size: "small", name: "camera-outline" })))), index.h("h2", null, "Delayed"), index.h("smoothly-input", { name: "Delayed", delay: 2 }, "Delayed"), index.h("h2", null, "Editable form and Input with Clear and Reset - Readonly"), index.h("smoothly-form", { looks: "grid", readonly: true, action: "https://api.toiletapi.com/6b12fd2f-e896-46f9-b38f-25cf42cee4b4" }, index.h("smoothly-input", { readonly: true, name: "First Name", value: "John" }, "First name"), index.h("smoothly-input", { name: "Last name", value: "Doe" }, "Last name", index.h("smoothly-input-clear", { size: "icon", slot: "end" }, index.h("smoothly-icon", { name: "close" }))), index.h("smoothly-input", { type: "phone", name: "Phone", value: "777888999" }, "Phone", index.h("smoothly-input-reset", { size: "icon", slot: "end" }, index.h("smoothly-icon", { name: "refresh-outline" }))), index.h("smoothly-input-radio", { clearable: true, name: "radioFirstInput" }, index.h("p", { slot: "label" }, "Clearable"), index.h("smoothly-input-radio-item", { slot: "options", value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { selected: true, slot: "options", value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { slot: "options", value: "third" }, "Label 3")), index.h("smoothly-input-select", { menuHeight: "7.5items", placeholder: "Select...", multiple: true, name: "select-month" }, index.h("label", { slot: "label" }, "Month"), 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")), index.h("smoothly-input-select", { name: "select-icon", clearable: false, showSelected: false }, index.h("smoothly-item", { value: "folder", selected: true }, index.h("smoothly-icon", { size: "small", name: "folder-outline" })), index.h("smoothly-item", { value: "camera" }, index.h("smoothly-icon", { size: "small", name: "camera-outline" }))), index.h("smoothly-input-checkbox", { name: "checkbox" }, "Check the box"), index.h("smoothly-input-checkbox", { name: "checkbox2", checked: true }, "Check the box 2"), index.h("smoothly-input-range", { step: 1, name: "range3", value: 20000 }, "Select"), index.h("smoothly-picker", { multiple: true, name: "animals" }, index.h("span", { slot: "label" }, "Animals"), index.h("span", { slot: "search" }, "Search"), index.h("smoothly-picker-option", { selected: true, value: "cat" }, "Cat"), index.h("smoothly-picker-option", { value: "dog" }, "Dog"), index.h("smoothly-picker-option", { value: "fish" }, "Fish")), index.h("smoothly-input-edit", { fill: "default", type: "button", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), index.h("smoothly-input-reset", { fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), index.h("smoothly-input-submit", { delete: true, slot: "clear", color: "danger", size: "icon", shape: "rounded" }), index.h("smoothly-input-submit", { fill: "default", type: "button", color: "success", slot: "submit", size: "icon", shape: "rounded" }, index.h("smoothly-icon", { name: "checkmark-outline", fill: "solid", size: "tiny" }))), index.h("h2", null, "Editable form and Input with Clear and Reset - Editable"), index.h("smoothly-form", { looks: "grid", type: "create", action: "https://api.toiletapi.com/upload/6b12fd2f-e896-46f9-b38f-25cf42cee4b4" }, index.h("smoothly-input", { readonly: true, name: "First Name", value: "John" }, "First name"), index.h("smoothly-input", { name: "Last name", value: "Doe" }, "Last name", index.h("smoothly-input-clear", { size: "icon", slot: "end" }, index.h("smoothly-icon", { name: "close" }))), index.h("smoothly-input", { type: "phone", name: "Phone", value: "777888999" }, "Phone", index.h("smoothly-input-reset", { size: "icon", slot: "end" }, index.h("smoothly-icon", { name: "refresh-outline" }))), index.h("smoothly-input-radio", { clearable: true, name: "radioFirstInput" }, index.h("p", { slot: "label" }, "Clearable"), index.h("smoothly-input-radio-item", { slot: "options", value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { selected: true, slot: "options", value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { slot: "options", value: "third" }, "Label 3")), index.h("smoothly-input-select", { multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, index.h("label", { slot: "label" }, "Month multiple select"), 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")), index.h("smoothly-input-select", { name: "select-icon", clearable: false, showSelected: false }, index.h("smoothly-item", { value: "folder", selected: true }, index.h("smoothly-icon", { size: "small", name: "folder-outline" })), index.h("smoothly-item", { value: "camera" }, index.h("smoothly-icon", { size: "small", name: "camera-outline" }))), index.h("smoothly-input-checkbox", { name: "checkbox" }, "Check the box"), index.h("smoothly-input-checkbox", { name: "checkbox2", checked: true }, "Check the box 2"), index.h("smoothly-input-range", { step: 1, name: "range3", value: 20000 }, "Select"), index.h("smoothly-picker", { multiple: true, name: "animals" }, index.h("span", { slot: "label" }, "Animals"), index.h("span", { slot: "search" }, "Search"), index.h("smoothly-picker-option", { selected: true, value: "cat" }, "Cat"), index.h("smoothly-picker-option", { value: "dog" }, "Dog"), index.h("smoothly-picker-option", { value: "fish" }, "Fish")), index.h("smoothly-input-edit", { fill: "default", type: "button", color: "tertiary", slot: "edit", size: "icon", shape: "rounded" }), index.h("smoothly-input-reset", { fill: "default", type: "form", color: "warning", slot: "reset", size: "icon", shape: "rounded" }), index.h("smoothly-input-submit", { delete: true, slot: "clear", color: "danger", size: "icon", shape: "rounded" }), index.h("smoothly-input-submit", { fill: "default", type: "button", color: "success", slot: "submit", size: "icon", shape: "rounded" }, index.h("smoothly-icon", { name: "checkmark-outline", fill: "solid", size: "tiny" }))), index.h("h2", null, "Color"), index.h("smoothly-form", { looks: "border" }, index.h("smoothly-input-color", { name: "color" })), index.h("h2", null, "Range"), index.h("smoothly-form", { looks: "border" }, index.h("smoothly-input-range", { step: 1, name: "range", outputSide: "right" }, "Select and so"), index.h("smoothly-input-range", { step: 1, name: "range2" }, "Select with really really long label", index.h("smoothly-icon", { name: "checkmark-circle", slot: "start" }), index.h("smoothly-input-clear", { size: "icon", slot: "end" }, index.h("smoothly-icon", { name: "close" }))), index.h("smoothly-input-range", { step: 1, name: "range3" }, "Select")), index.h("h2", null, "Duration"), index.h("smoothly-form", { looks: "border" }, index.h("smoothly-input", { name: "duration", type: "duration", placeholder: "hh:mm", value: this.duration, onSmoothlyInput: e => {
|
|
8898
8892
|
const duration = e.detail.duration;
|
|
8899
8893
|
console.log("event duration", duration);
|
|
8900
8894
|
this.duration = duration;
|
|
@@ -8910,14 +8904,47 @@ const SmoothlyInputDemo = class {
|
|
|
8910
8904
|
"--border-radius": "4px",
|
|
8911
8905
|
"--padding": "0 0.75em",
|
|
8912
8906
|
"--input-width": "12ch",
|
|
8913
|
-
} }), index.h("smoothly-input-date", { name: "date", value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), index.h("smoothly-submit", { slot: "submit", color: "success", fill: "solid", size: "icon" }, index.h("smoothly-icon", { name: "checkmark-circle", fill: "solid", size: "medium" }))), index.h("h4", null, "Form with spinner showcase"), index.h("smoothly-form", { looks: "line",
|
|
8907
|
+
} }), index.h("smoothly-input-date", { name: "date", value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), index.h("smoothly-submit", { slot: "submit", color: "success", fill: "solid", size: "icon" }, index.h("smoothly-icon", { name: "checkmark-circle", fill: "solid", size: "medium" }))), index.h("h4", null, "Form with spinner showcase"), index.h("smoothly-form", { looks: "line", onSmoothlyFormSubmit: e => console.log("form input", e.detail) }, index.h("smoothly-input", { name: "text" }, "Input"), index.h("smoothly-input-file", { camera: "back", placeholder: "Capture a photo", name: "image" }, index.h("span", { slot: "label" }, "Testing camera photo"), index.h("smoothly-icon", { slot: "button", name: "camera-outline" })), index.h("smoothly-picker", { name: "picker" }, index.h("span", { slot: "label" }, "Shape"), index.h("span", { slot: "search" }, "Search"), index.h("smoothly-picker-option", { value: "circle" }, index.h("span", { slot: "label" }, "Circle"), index.h("smoothly-icon", { size: "tiny", name: "ellipse-outline" })), index.h("smoothly-picker-option", { value: "cube" }, index.h("span", { slot: "label" }, "Cube"), index.h("smoothly-icon", { size: "tiny", name: "cube-outline" })), index.h("smoothly-picker-option", { value: "square", selected: true }, index.h("span", { slot: "label" }, "Square"), index.h("smoothly-icon", { size: "tiny", name: "square-outline" }))), index.h("smoothly-input-select", { name: "select", placeholder: "Select..." }, 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")), index.h("smoothly-input-date-range", { name: "date-range", start: TimeZone.Date.now(), end: TimeZone.Date.nextMonth(TimeZone.Date.now()), min: "2021-10-10", max: "2025-12-30", showLabel: false, style: {
|
|
8914
8908
|
"--border-radius": "4px",
|
|
8915
8909
|
"--padding": "0 0.75em",
|
|
8916
8910
|
"--input-width": "12ch",
|
|
8917
8911
|
} }), index.h("smoothly-input-date", { name: "date", value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), index.h("smoothly-submit", { slot: "submit", color: "success", fill: "solid", size: "icon" }, index.h("smoothly-icon", { name: "checkmark-circle", fill: "solid", size: "medium" })))));
|
|
8918
8912
|
}
|
|
8919
8913
|
};
|
|
8920
|
-
SmoothlyInputDemo.style = styleCss$
|
|
8914
|
+
SmoothlyInputDemo.style = styleCss$N;
|
|
8915
|
+
|
|
8916
|
+
const styleCss$M = ".sc-smoothly-input-demo-controlled-form-h{display:flex;width:100%}.sc-smoothly-input-demo-controlled-form-h smoothly-form.sc-smoothly-input-demo-controlled-form{width:100%}";
|
|
8917
|
+
|
|
8918
|
+
const SmoothlyInputDemoControlledForm = class {
|
|
8919
|
+
constructor(hostRef) {
|
|
8920
|
+
index.registerInstance(this, hostRef);
|
|
8921
|
+
this.name = "Initial name";
|
|
8922
|
+
}
|
|
8923
|
+
nameChanged(current, previous) {
|
|
8924
|
+
console.log(`updated name from '${previous}' to '${current}'`);
|
|
8925
|
+
}
|
|
8926
|
+
async submitHandler(event) {
|
|
8927
|
+
event.stopPropagation();
|
|
8928
|
+
console.log("Received event. Processing...");
|
|
8929
|
+
if (!(typeof event.detail.value.name == "string")) {
|
|
8930
|
+
console.error("Bad input. Resolving false");
|
|
8931
|
+
event.detail.result(false);
|
|
8932
|
+
}
|
|
8933
|
+
else {
|
|
8934
|
+
await new Promise(resolve => window.setTimeout(resolve, 1000));
|
|
8935
|
+
this.name = event.detail.value.name;
|
|
8936
|
+
console.log("Finished processing successfully. Resolving true");
|
|
8937
|
+
event.detail.result(true);
|
|
8938
|
+
}
|
|
8939
|
+
}
|
|
8940
|
+
render() {
|
|
8941
|
+
return (index.h(index.Host, null, index.h("smoothly-form", { readonly: true, looks: "line", onSmoothlyFormSubmit: e => this.submitHandler(e) }, index.h("smoothly-input", { type: "text", name: "name", value: this.name }, "Name"), index.h("smoothly-input-edit", { slot: "edit", type: "button", size: "icon", color: "primary", fill: "default" }), index.h("smoothly-input-reset", { slot: "reset", type: "form", size: "icon", color: "warning", fill: "default" }), index.h("smoothly-input-submit", { slot: "submit", size: "icon", color: "success" }))));
|
|
8942
|
+
}
|
|
8943
|
+
static get watchers() { return {
|
|
8944
|
+
"name": ["nameChanged"]
|
|
8945
|
+
}; }
|
|
8946
|
+
};
|
|
8947
|
+
SmoothlyInputDemoControlledForm.style = styleCss$M;
|
|
8921
8948
|
|
|
8922
8949
|
const styleCss$L = "[color=default].sc-smoothly-input-edit{--smoothly-color:var(--smoothly-default-color);--smoothly-color-contrast:var(--smoothly-default-contrast);--smoothly-color-shade:var(--smoothly-default-shade);--smoothly-color-tint:var(--smoothly-default-tint)}[color=primary].sc-smoothly-input-edit{--smoothly-color:var(--smoothly-primary-color);--smoothly-color-contrast:var(--smoothly-primary-contrast);--smoothly-color-shade:var(--smoothly-primary-shade);--smoothly-color-tint:var(--smoothly-primary-tint)}[color=secondary].sc-smoothly-input-edit{--smoothly-color:var(--smoothly-secondary-color);--smoothly-color-contrast:var(--smoothly-secondary-contrast);--smoothly-color-shade:var(--smoothly-secondary-shade);--smoothly-color-tint:var(--smoothly-secondary-tint)}[color=tertiary].sc-smoothly-input-edit{--smoothly-color:var(--smoothly-tertiary-color);--smoothly-color-contrast:var(--smoothly-tertiary-contrast);--smoothly-color-shade:var(--smoothly-tertiary-shade);--smoothly-color-tint:var(--smoothly-tertiary-tint)}[color=success].sc-smoothly-input-edit{--smoothly-color:var(--smoothly-success-color);--smoothly-color-contrast:var(--smoothly-success-color);--smoothly-color-shade:var(--smoothly-success-shade);--smoothly-color-tint:var(--smoothly-success-tint)}[color=warning].sc-smoothly-input-edit{--smoothly-color:var(--smoothly-warning-color);--smoothly-color-contrast:var(--smoothly-warning-contrast);--smoothly-color-shade:var(--smoothly-warning-shade);--smoothly-color-tint:var(--smoothly-warning-tint)}[color=danger].sc-smoothly-input-edit{--smoothly-color:var(--smoothly-danger-color);--smoothly-color-contrast:var(--smoothly-danger-contrast);--smoothly-color-shade:var(--smoothly-danger-shade);--smoothly-color-tint:var(--smoothly-danger-tint)}[color=light].sc-smoothly-input-edit{--smoothly-color:var(--smoothly-light-color);--smoothly-color-contrast:var(--smoothly-light-contrast);--smoothly-color-shade:var(--smoothly-light-shade);--smoothly-color-tint:var(--smoothly-light-tint)}[color=medium].sc-smoothly-input-edit{--smoothly-color:var(--smoothly-medium-color);--smoothly-color-contrast:var(--smoothly-medium-contrast);--smoothly-color-shade:var(--smoothly-medium-shade);--smoothly-color-tint:var(--smoothly-medium-tint)}[color=dark].sc-smoothly-input-edit{--smoothly-color:var(--smoothly-dark-color);--smoothly-color-contrast:var(--smoothly-dark-contrast);--smoothly-color-shade:var(--smoothly-dark-shade);--smoothly-color-tint:var(--smoothly-dark-tint)}.sc-smoothly-input-edit-h{display:inline-block;box-sizing:border-box;border-radius:0.5rem;border:solid 1px;transition:background 150ms ease-in-out;cursor:pointer}[type=link].sc-smoothly-input-edit-h{display:inline;border:none}[disabled].sc-smoothly-input-edit-h{opacity:0.5;pointer-events:none}a.sc-smoothly-input-edit,button.sc-smoothly-input-edit{font-size:110%;font-weight:400;border:none;background-color:transparent;cursor:pointer;display:inline-flex;gap:0.5rem}button.sc-smoothly-input-edit{justify-content:center;height:100%;width:100%;border-radius:0.5rem;align-items:center}.sc-smoothly-input-edit-h:not([size=icon]):not([size=flexible])>button.sc-smoothly-input-edit{padding:0.8em;min-width:8em}.sc-smoothly-input-edit-h:not([size=icon]):not([size=flexible]):has(smoothly-icon)>button.sc-smoothly-input-edit{padding:0.6em}[size=icon].sc-smoothly-input-edit-h>button.sc-smoothly-input-edit{padding:0.5em}[shape=rounded].sc-smoothly-input-edit-h>button.sc-smoothly-input-edit,[shape=rounded].sc-smoothly-input-edit-h{border-radius:2rem}[type=button].sc-smoothly-input-edit-h>a.sc-smoothly-input-edit{text-align:center;text-decoration:inherit;width:calc(100% - 0.6em)}[size=small].sc-smoothly-input-edit-h>button.sc-smoothly-input-edit{font-size:100%}[size=large].sc-smoothly-input-edit-h>button.sc-smoothly-input-edit{font-size:130%}.sc-smoothly-input-edit-h:not([size=icon]){min-width:8em}[size=flexible].sc-smoothly-input-edit-h{min-width:unset;padding:0;margin:0;display:flex;justify-content:center;align-items:center;border:none}[size=flexible].sc-smoothly-input-edit-h>button.sc-smoothly-input-edit{min-width:unset;padding:0;margin:0 !important}[expand].sc-smoothly-input-edit-h{width:100%}[expand=full].sc-smoothly-input-edit-h{border-left:none;border-right:none;border-radius:0}[shape=rounded].sc-smoothly-input-edit-h>button.sc-smoothly-input-edit,[shape=rounded].sc-smoothly-input-edit-h{border-radius:2rem}.sc-smoothly-input-edit-h:not([fill=clear]):hover,.sc-smoothly-input-edit-h:not([fill=clear]):focus,.sc-smoothly-input-edit-h:not([fill=clear]):active{border-color:rgb(var(--smoothly-color-tint)) !important;background:rgb(var(--smoothly-color-tint)) !important}.sc-smoothly-input-edit-h:not([fill=clear]):hover>button.sc-smoothly-input-edit,.sc-smoothly-input-edit-h:not([fill=clear]):focus>button.sc-smoothly-input-edit,.sc-smoothly-input-edit-h:not([fill=clear]):active>button.sc-smoothly-input-edit,.sc-smoothly-input-edit-h:not([fill=clear]):hover .sc-smoothly-input-edit-s>smoothly-icon,.sc-smoothly-input-edit-h:not([fill=clear]):focus .sc-smoothly-input-edit-s>smoothly-icon,.sc-smoothly-input-edit-h:not([fill=clear]):active .sc-smoothly-input-edit-s>smoothly-icon{color:rgb(var(--smoothly-color-contrast)) !important;stroke:rgb(var(--smoothly-color-contrast)) !important;fill:rgb(var(--smoothly-color-contrast)) !important}[fill=clear].sc-smoothly-input-edit-h:hover>button.sc-smoothly-input-edit,[fill=clear].sc-smoothly-input-edit-h:focus>button.sc-smoothly-input-edit,[fill=clear].sc-smoothly-input-edit-h:active>button.sc-smoothly-input-edit{color:rgb(var(--smoothly-color-tint)) !important;stroke:rgb(var(--smoothly-color-tint)) !important;fill:rgb(var(--smoothly-color-tint)) !important}[disabled].sc-smoothly-input-edit-h{opacity:0.5;pointer-events:none}.sc-smoothly-input-edit-h:not([fill]),[fill=default].sc-smoothly-input-edit-h{background:rgb(var(--smoothly-color));border-color:transparent}[fill=solid].sc-smoothly-input-edit-h{background:rgb(var(--smoothly-color));border-color:rgb(var(--smoothly-color))}[fill=solid].sc-smoothly-input-edit-h>button.sc-smoothly-input-edit,[fill=default].sc-smoothly-input-edit-h>button.sc-smoothly-input-edit{stroke:rgb(var(--smoothly-color-contrast));fill:rgb(var(--smoothly-color-contrast));color:rgb(var(--smoothly-color-contrast))}[fill=outline].sc-smoothly-input-edit-h>button.sc-smoothly-input-edit,[fill=clear].sc-smoothly-input-edit-h>button.sc-smoothly-input-edit{stroke:rgb(var(--smoothly-color));fill:rgb(var(--smoothly-color));color:rgb(var(--smoothly-color))}[fill=outline].sc-smoothly-input-edit-h{background:transparent;border-color:rgb(var(--smoothly-color))}[fill=clear].sc-smoothly-input-edit-h{background:transparent;border-color:transparent}.sc-smoothly-input-edit-s>smoothly-icon[slot=start],.sc-smoothly-input-edit-s>smoothly-icon[slot=end]{font-size:0.65em}[hidden].sc-smoothly-input-edit-h{display:none}.sc-smoothly-input-edit-h:not([display]){display:none}[editable].sc-smoothly-input-edit-h{opacity:0.5}.sc-smoothly-input-edit-h smoothly-icon.default.sc-smoothly-input-edit{transform:translate(.1em, -.1em)}.sc-smoothly-input-edit-h.sc-smoothly-input-edit-s>button>*+smoothly-icon{display:none}";
|
|
8923
8950
|
|
|
@@ -9279,10 +9306,10 @@ SmoothlyInputReset.style = styleCss$F;
|
|
|
9279
9306
|
|
|
9280
9307
|
var Item;
|
|
9281
9308
|
(function (Item) {
|
|
9282
|
-
Item.type =
|
|
9309
|
+
Item.type = Submit.object({
|
|
9283
9310
|
value: any(),
|
|
9284
|
-
selected:
|
|
9285
|
-
filter: islyFunction(),
|
|
9311
|
+
selected: Submit.boolean().optional(),
|
|
9312
|
+
filter: Submit.islyFunction(),
|
|
9286
9313
|
});
|
|
9287
9314
|
Item.is = Item.type.is;
|
|
9288
9315
|
})(Item || (Item = {}));
|
|
@@ -9569,11 +9596,11 @@ const SmoothlyInputSubmit = class {
|
|
|
9569
9596
|
}
|
|
9570
9597
|
clickHandler() {
|
|
9571
9598
|
var _a;
|
|
9572
|
-
(_a = this.parent) === null || _a === void 0 ? void 0 : _a.submit(this.delete);
|
|
9599
|
+
!this.disabled && ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.submit(this.delete));
|
|
9573
9600
|
}
|
|
9574
9601
|
render() {
|
|
9575
9602
|
var _a, _b;
|
|
9576
|
-
return (index.h(index.Host, { title: this.toolTip }, this.delete == true ? (index.h("smoothly-button-confirm", { disabled: this.disabled, size: this.size, shape: this.shape, expand: this.expand, type: this.type, color: (_a = this.color) !== null && _a !== void 0 ? _a : "danger", fill: this.fill }, index.h("slot", null), index.h("smoothly-icon", { name: "trash-outline", fill: "solid", size: "tiny" }))) : (index.h("smoothly-button", { disabled: this.disabled, size: this.size, type: this.type, shape: this.shape, expand: this.expand, color: (_b = this.color) !== null && _b !== void 0 ? _b : "success", fill: this.fill }, index.h("slot", null), index.h("smoothly-icon", { name: "checkmark-outline", fill: "solid" })))));
|
|
9603
|
+
return (index.h(index.Host, { title: this.toolTip }, this.delete == true ? (index.h("smoothly-button-confirm", { disabled: this.disabled, size: this.size, shape: this.shape, expand: this.expand, type: this.type, color: (_a = this.color) !== null && _a !== void 0 ? _a : "danger", fill: this.fill, onSmoothlyConfirm: () => this.clickHandler() }, index.h("slot", null), index.h("smoothly-icon", { name: "trash-outline", fill: "solid", size: "tiny" }))) : (index.h("smoothly-button", { disabled: this.disabled, size: this.size, type: this.type, shape: this.shape, expand: this.expand, color: (_b = this.color) !== null && _b !== void 0 ? _b : "success", fill: this.fill, onClick: () => this.clickHandler() }, index.h("slot", null), index.h("smoothly-icon", { name: "checkmark-outline", fill: "solid", size: "tiny" })))));
|
|
9577
9604
|
}
|
|
9578
9605
|
};
|
|
9579
9606
|
SmoothlyInputSubmit.style = styleCss$D;
|
|
@@ -11094,6 +11121,7 @@ exports.smoothly_input_color = SmoothlyInputColor;
|
|
|
11094
11121
|
exports.smoothly_input_date = InputDate;
|
|
11095
11122
|
exports.smoothly_input_date_range = InputDateRange;
|
|
11096
11123
|
exports.smoothly_input_demo = SmoothlyInputDemo;
|
|
11124
|
+
exports.smoothly_input_demo_controlled_form = SmoothlyInputDemoControlledForm;
|
|
11097
11125
|
exports.smoothly_input_edit = SmoothlyInputEdit;
|
|
11098
11126
|
exports.smoothly_input_file = SmoothlyInputFile;
|
|
11099
11127
|
exports.smoothly_input_month = MonthSelector;
|
|
@@ -11145,4 +11173,4 @@ exports.smoothly_trigger = SmoothlyTrigger;
|
|
|
11145
11173
|
exports.smoothly_tuple = SmoothlyTuple;
|
|
11146
11174
|
exports.smoothly_urlencoded = Urlencoded;
|
|
11147
11175
|
|
|
11148
|
-
//# sourceMappingURL=smoothly-
|
|
11176
|
+
//# sourceMappingURL=smoothly-app_81.cjs.entry.js.map
|