smoothly 0.1.93 → 0.1.97
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{smoothly-accordion_47.cjs.entry.js → smoothly-accordion_48.cjs.entry.js} +47 -8
- package/dist/cjs/smoothly-backtotop.cjs.entry.js +37 -0
- package/dist/cjs/smoothly-checkbox.cjs.entry.js +1 -0
- package/dist/cjs/smoothly-input-demo.cjs.entry.js +4 -1
- package/dist/cjs/smoothly-input.cjs.entry.js +5 -1
- package/dist/cjs/smoothly.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/backtotop/index.js +94 -0
- package/dist/collection/components/backtotop/style.css +19 -0
- package/dist/collection/components/checkbox/index.js +18 -0
- package/dist/collection/components/input/index.js +6 -0
- package/dist/collection/components/input-demo/index.js +46 -42
- package/dist/custom-elements/index.d.ts +6 -0
- package/dist/custom-elements/index.js +51 -10
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{smoothly-accordion_47.entry.js → smoothly-accordion_48.entry.js} +47 -9
- package/dist/esm/smoothly-backtotop.entry.js +33 -0
- package/dist/esm/smoothly-checkbox.entry.js +1 -0
- package/dist/esm/smoothly-input-demo.entry.js +4 -1
- package/dist/esm/smoothly-input.entry.js +5 -1
- package/dist/esm/smoothly.js +1 -1
- package/dist/smoothly/p-71fe63ea.entry.js +1 -0
- package/dist/smoothly/smoothly-backtotop.entry.js +33 -0
- package/dist/smoothly/smoothly-checkbox.entry.js +1 -0
- package/dist/smoothly/smoothly-input-demo.entry.js +4 -1
- package/dist/smoothly/smoothly-input.entry.js +5 -1
- package/dist/smoothly/smoothly.esm.js +1 -1
- package/dist/types/components/backtotop/index.d.ts +8 -0
- package/dist/types/components/checkbox/index.d.ts +1 -0
- package/dist/types/components/input/index.d.ts +1 -0
- package/dist/types/components/input-demo/index.d.ts +1 -1
- package/dist/types/components.d.ts +21 -0
- package/package.json +1 -1
- package/dist/smoothly/p-39db800c.entry.js +0 -1
|
@@ -1,48 +1,52 @@
|
|
|
1
1
|
import { Component, h } from "@stencil/core";
|
|
2
2
|
export class SmoothlyInputDemo {
|
|
3
3
|
render() {
|
|
4
|
-
return
|
|
5
|
-
h("
|
|
6
|
-
h("
|
|
7
|
-
|
|
8
|
-
h("
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
h("smoothly-accordion
|
|
21
|
-
h("smoothly-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
h("smoothly-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
h("
|
|
4
|
+
return [
|
|
5
|
+
h("form", { action: "done", style: { position: "relative" } },
|
|
6
|
+
h("header", null,
|
|
7
|
+
h("h5", null, "Address")),
|
|
8
|
+
h("main", null,
|
|
9
|
+
h("smoothly-input", { type: "text", name: "name" }, "Name"),
|
|
10
|
+
h("smoothly-input", { type: "date", name: "date" }, "Date"),
|
|
11
|
+
h("smoothly-input", { type: "date-time", name: "date-time" }, "Date-Time"),
|
|
12
|
+
h("smoothly-input", { type: "divisor", name: "divisor" }, "Divisor"),
|
|
13
|
+
h("smoothly-input", { type: "text", name: "street", value: "street" }, "Street"),
|
|
14
|
+
h("smoothly-input", { type: "card-number", name: "card" }, "Card #"),
|
|
15
|
+
h("smoothly-input", { type: "card-expires", name: "card", style: { width: "calc(60% - 2px)" } }, "Expires"),
|
|
16
|
+
h("smoothly-input", { type: "card-csc", name: "card", style: { width: "calc(40% - 1px)", borderLeft: "none" } }, "CVV/CVC"),
|
|
17
|
+
h("smoothly-radio", { name: "option", value: "1" }, "option 1"),
|
|
18
|
+
h("smoothly-radio", { name: "option", value: "2", checked: true }, "option 2"),
|
|
19
|
+
h("smoothly-radio", { name: "option", value: "3" }, "option 3"),
|
|
20
|
+
h("smoothly-accordion", null,
|
|
21
|
+
h("smoothly-accordion-item", { name: "A", open: true },
|
|
22
|
+
h("smoothly-radio", { name: "a", value: "1" }, "a 1"),
|
|
23
|
+
h("smoothly-radio", { name: "a", value: "2", checked: true }, "a 2"),
|
|
24
|
+
h("smoothly-radio", { name: "a", value: "3" }, "a 3")),
|
|
25
|
+
h("smoothly-accordion-item", { name: "B" },
|
|
26
|
+
h("smoothly-radio", { name: "b", value: "1" }, "b 1"),
|
|
27
|
+
h("smoothly-radio", { name: "b", value: "2" }, "b 2"),
|
|
28
|
+
h("smoothly-radio", { name: "b", value: "3" }, "b 3"))),
|
|
29
|
+
h("smoothly-display-amount", { currency: "SEK", amount: "1289.5" }),
|
|
30
|
+
h("smoothly-display-date-time", { datetime: "2019-01-31T20:01:34" }),
|
|
31
|
+
h("smoothly-checkbox", { selectAll: true, intermediate: true }),
|
|
32
|
+
h("smoothly-checkbox", null),
|
|
33
|
+
h("smoothly-checkbox", { disabled: true }),
|
|
34
|
+
h("smoothly-address-display", { value: '{ "countryCode": "SE", "street": "Korkstigen 2", "zipCode": "654 31", "city": "Fejksala" }' }),
|
|
35
|
+
h("smoothly-address", { editable: false, value: '{ "countryCode": "SE", "street": "Stigv\u00E4gen 34", "zipCode": "123 45", "city": "Hobbiton" }' }),
|
|
36
|
+
h("smoothly-addresses", { allowed: "billing delivery visit", editable: true, value: '{ "billing": { "countryCode": "SE", "street": "Rundslingan 3", "zipCode": "987 65", "city": "Klotby" }, "visit": { "countryCode": "SE", "street": "G\u00E5ngbanan 34", "zipCode": "543 21", "city": "Trasktr\u00E4sk" } }' }),
|
|
37
|
+
h("smoothly-input", { type: "postal-code", name: "zip", style: { width: "calc(60% - 2px)" } }, "ZipCode"),
|
|
38
|
+
h("smoothly-input", { type: "text", name: "testing" }, "Texttest"),
|
|
39
|
+
h("smoothly-input", { type: "password", name: "password" }, "Password"),
|
|
40
|
+
h("smoothly-input", { type: "email", name: "email" }, "Email"),
|
|
41
|
+
h("smoothly-input", { type: "price", currency: "SEK", name: "price" }, "Price"),
|
|
42
|
+
h("smoothly-input", { type: "percent", name: "percent" }, "Percent"),
|
|
43
|
+
h("smoothly-input", { type: "phone", name: "phone" }, "Phone"),
|
|
44
|
+
h("smoothly-input-date", null, "Date")),
|
|
45
|
+
h("footer", null,
|
|
46
|
+
h("smoothly-submit", { expand: "block", onSubmit: (e) => alert(e), color: "success" }, "Submit"),
|
|
47
|
+
h("smoothly-trigger", { expand: "block", color: "success", onClick: (e) => console.log(e.detail) }, "Trigger"))),
|
|
48
|
+
h("smoothly-backtotop", null),
|
|
49
|
+
];
|
|
46
50
|
}
|
|
47
51
|
static get is() { return "smoothly-input-demo"; }
|
|
48
52
|
}
|
|
@@ -26,6 +26,12 @@ export const SmoothlyAppDemo: {
|
|
|
26
26
|
new (): SmoothlyAppDemo;
|
|
27
27
|
};
|
|
28
28
|
|
|
29
|
+
interface SmoothlyBacktotop extends Components.SmoothlyBacktotop, HTMLElement {}
|
|
30
|
+
export const SmoothlyBacktotop: {
|
|
31
|
+
prototype: SmoothlyBacktotop;
|
|
32
|
+
new (): SmoothlyBacktotop;
|
|
33
|
+
};
|
|
34
|
+
|
|
29
35
|
interface SmoothlyCalendar extends Components.SmoothlyCalendar, HTMLElement {}
|
|
30
36
|
export const SmoothlyCalendar: {
|
|
31
37
|
prototype: SmoothlyCalendar;
|
|
@@ -2381,7 +2381,7 @@ var Cosmetic;
|
|
|
2381
2381
|
|
|
2382
2382
|
const globalScripts = () => {};
|
|
2383
2383
|
|
|
2384
|
-
const styleCss$
|
|
2384
|
+
const styleCss$I = "smoothly-accordion-item.sc-smoothly-accordion{border:1px solid rgb(var(--smoothly-dark-color));border-bottom:none}smoothly-accordion-item.sc-smoothly-accordion:first-of-type{border-top-left-radius:4px;border-top-right-radius:4px;margin-top:0.4em}smoothly-accordion-item.sc-smoothly-accordion:last-of-type{border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-bottom:1px solid rgb(var(--smoothly-dark-color));margin-bottom:0.6em}smoothly-accordion-item[open].sc-smoothly-accordion{border-color:rgb(var(--smoothly-primary-color));border-bottom:1px solid rgb(var(--smoothly-primary-color))}smoothly-accordion-item[open].sc-smoothly-accordion+smoothly-accordion-item.sc-smoothly-accordion{border-top:none}";
|
|
2385
2385
|
|
|
2386
2386
|
let SmoothlyAccordion$1 = class extends HTMLElement {
|
|
2387
2387
|
constructor() {
|
|
@@ -2427,10 +2427,10 @@ let SmoothlyAccordion$1 = class extends HTMLElement {
|
|
|
2427
2427
|
static get watchers() { return {
|
|
2428
2428
|
"value": ["valueChanged"]
|
|
2429
2429
|
}; }
|
|
2430
|
-
static get style() { return styleCss$
|
|
2430
|
+
static get style() { return styleCss$I; }
|
|
2431
2431
|
};
|
|
2432
2432
|
|
|
2433
|
-
const styleCss$
|
|
2433
|
+
const styleCss$H = ".sc-smoothly-accordion-item-h{display:block}[hidden].sc-smoothly-accordion-item-h{display:none}details.sc-smoothly-accordion-item{padding:0}details.sc-smoothly-accordion-item>summary.sc-smoothly-accordion-item>span.sc-smoothly-accordion-item{float:right;margin:0.2em;font-size:60%}details.sc-smoothly-accordion-item>summary.sc-smoothly-accordion-item{font-size:120%;list-style-type:none;cursor:pointer;padding:0.4em;color:rgb(var(--smoothly-text-tint))}details.sc-smoothly-accordion-item>fieldset.sc-smoothly-accordion-item{border:none;margin:0;padding:0}[open].sc-smoothly-accordion-item-h>details.sc-smoothly-accordion-item>summary.sc-smoothly-accordion-item{color:rgb(var(--smoothly-primary-contrast));background:rgb(var(--smoothly-primary-color))}details.sc-smoothly-accordion-item>summary.sc-smoothly-accordion-item::-webkit-details-marker{display:none}details.sc-smoothly-accordion-item>summary.sc-smoothly-accordion-item>svg.sc-smoothly-accordion-item{width:1em;height:auto;margin-bottom:-0.2em;margin-right:0.4em}[open].sc-smoothly-accordion-item-h>details.sc-smoothly-accordion-item>summary.sc-smoothly-accordion-item>svg.sc-smoothly-accordion-item{fill:rgb(var(--smoothly-primary-contrast))}.sc-smoothly-accordion-item-h:not([open])>details.sc-smoothly-accordion-item>summary.sc-smoothly-accordion-item>svg.sc-smoothly-accordion-item{fill:rgb(var(--smoothly-text-tint))}";
|
|
2434
2434
|
|
|
2435
2435
|
let SmoothlyAccordionItem$1 = class extends HTMLElement {
|
|
2436
2436
|
constructor() {
|
|
@@ -2475,10 +2475,10 @@ let SmoothlyAccordionItem$1 = class extends HTMLElement {
|
|
|
2475
2475
|
static get watchers() { return {
|
|
2476
2476
|
"open": ["openChanged"]
|
|
2477
2477
|
}; }
|
|
2478
|
-
static get style() { return styleCss$
|
|
2478
|
+
static get style() { return styleCss$H; }
|
|
2479
2479
|
};
|
|
2480
2480
|
|
|
2481
|
-
const styleCss$
|
|
2481
|
+
const styleCss$G = "smoothly-app{display:block;scrollbar-width:none}smoothly-app[hidden]{display:none}smoothly-app[color=default],smoothly-app:not([color]){--smoothly-app-background:var(--smoothly-default-shade);--smoothly-app-color:var(--smoothly-default-contrast);--smoothly-app-hover-background:var(--smoothly-primary-color);--smoothly-app-hover-color:var(--smoothly-primary-contrast);--smoothly-app-shadow:var(--smoothly-default-shadow)}smoothly-app[color=primary]{--smoothly-app-background:var(--smoothly-primary-shade);--smoothly-app-color:var(--smoothly-primary-contrast);--smoothly-app-hover-background:var(--smoothly-secondary-color);--smoothly-app-hover-color:var(--smoothly-secondary-contrast);--smoothly-app-shadow:var(--smoothly-primary-shadow)}smoothly-app[color=secondary]{--smoothly-app-background:var(--smoothly-secondary-shade);--smoothly-app-color:var(--smoothly-secondary-contrast);--smoothly-app-hover-background:var(--smoothly-primary-color);--smoothly-app-hover-color:var(--smoothly-primary-contrast);--smoothly-app-shadow:var(--smoothly-secondary-shadow)}smoothly-app[color=tertiary],smoothly-app[color=success],smoothly-app[color=warning],smoothly-app[color=danger]{--smoothly-app-background:var(--smoothly-color-shade);--smoothly-app-color:var(--smoothly-color-contrast);--smoothly-app-hover-background:var(--smoothly-default-shade);--smoothly-app-hover-color:var(--smoothly-default-contrast);--smoothly-app-shadow:var(--smoothly-color-shadow)}smoothly-app>smoothly-notifier>header{position:fixed;top:0;left:0;width:100%;z-index:5;height:1.6cm;background-color:rgb(var(--smoothly-app-background));color:rgb(var(--smoothly-app-color));fill:rgb(var(--smoothly-app-color));stroke:rgb(var(--smoothly-app-color));display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 5px 0 rgba(var(--smoothly-app-shadow))}smoothly-app>smoothly-notifier>header a{color:inherit;text-decoration:inherit}smoothly-app>smoothly-notifier>header>nav{flex-shrink:0}smoothly-app>smoothly-notifier>header>h1,smoothly-app>smoothly-notifier>header>nav,smoothly-app>smoothly-notifier>header>nav>ul,smoothly-app>smoothly-notifier>header>nav>ul>li,smoothly-app>smoothly-notifier>header>nav>ul>li>*:not(a){display:inline-block;height:100%;margin:0}smoothly-app>smoothly-notifier>header>h1 a{overflow:hidden;user-select:none}smoothly-app>smoothly-notifier>header>nav>ul>li a{line-height:1.6cm}smoothly-app>smoothly-notifier>header>h1 a,smoothly-app>smoothly-notifier>header>nav>ul>li a{display:inline-block;height:100%;padding:0 0.4cm;text-decoration:none;font-weight:bold}smoothly-app>smoothly-notifier>header>nav>ul>li smoothly-trigger.sc-smoothly-trigger-h{border:0}smoothly-app>smoothly-notifier>header>nav>ul>li a>smoothly-icon{position:relative;top:0.2cm}smoothly-app>smoothly-notifier>header>nav>ul>li>a:hover>smoothly-icon,smoothly-app>smoothly-notifier>header>nav>ul>li>a.active>smoothly-icon,smoothly-app>smoothly-notifier>header>nav>ul>li>smoothly-trigger.active a>smoothly-icon,smoothly-app>smoothly-notifier>header>nav>ul>li>smoothly-trigger:hover a>smoothly-icon,smoothly-app>smoothly-notifier>header>nav>ul>li a:hover,smoothly-app>smoothly-notifier>header>nav>ul>li a.active{background-color:rgb(var(--smoothly-app-hover-background));color:rgb(var(--smoothly-app-hover-color));stroke:rgb(var(--smoothly-app-hover-color));fill:rgb(var(--smoothly-app-hover-color))}smoothly-app>smoothly-notifier>content{position:relative;top:1.6cm}";
|
|
2482
2482
|
|
|
2483
2483
|
let SmoothlyApp$1 = class extends HTMLElement {
|
|
2484
2484
|
constructor() {
|
|
@@ -2488,7 +2488,7 @@ let SmoothlyApp$1 = class extends HTMLElement {
|
|
|
2488
2488
|
render() {
|
|
2489
2489
|
return (h("smoothly-notifier", null, h("slot", null)));
|
|
2490
2490
|
}
|
|
2491
|
-
static get style() { return styleCss$
|
|
2491
|
+
static get style() { return styleCss$G; }
|
|
2492
2492
|
};
|
|
2493
2493
|
|
|
2494
2494
|
let SmoothlyAppDemo$1 = class extends HTMLElement {
|
|
@@ -2513,6 +2513,37 @@ let SmoothlyAppDemo$1 = class extends HTMLElement {
|
|
|
2513
2513
|
}
|
|
2514
2514
|
};
|
|
2515
2515
|
|
|
2516
|
+
const styleCss$F = ".sc-smoothly-backtotop-h{background-color:rgba(var(--smoothly-default-color), 1);opacity:var(--opacity);pointer-events:var(--pointer-events);transition:opacity 400ms;z-index:3;border-radius:50%;box-shadow:var(--smoothly-shadow);height:3rem;width:3rem;position:fixed;bottom:var(--bottom);right:var(--right);outline:none;cursor:pointer;display:flex;justify-content:center;align-items:center}";
|
|
2517
|
+
|
|
2518
|
+
let SmoothlyBacktotop$1 = class extends HTMLElement {
|
|
2519
|
+
constructor() {
|
|
2520
|
+
super();
|
|
2521
|
+
this.__registerHost();
|
|
2522
|
+
this.opacity = "0.5";
|
|
2523
|
+
this.bottom = "1rem";
|
|
2524
|
+
this.right = "1rem";
|
|
2525
|
+
}
|
|
2526
|
+
componentWillLoad() {
|
|
2527
|
+
window.addEventListener("scroll", () => {
|
|
2528
|
+
this.visible = document.body.scrollTop > 20 || document.documentElement.scrollTop > 20;
|
|
2529
|
+
});
|
|
2530
|
+
}
|
|
2531
|
+
render() {
|
|
2532
|
+
const cssVariables = {
|
|
2533
|
+
"--opacity": this.visible ? this.opacity : "0",
|
|
2534
|
+
"--pointer-events": this.visible ? "auto" : "none",
|
|
2535
|
+
"--bottom": this.bottom,
|
|
2536
|
+
"--right": this.right,
|
|
2537
|
+
};
|
|
2538
|
+
return (h(Host, { style: cssVariables, onClick: () => window.scrollTo({
|
|
2539
|
+
top: 0,
|
|
2540
|
+
left: 0,
|
|
2541
|
+
behavior: "smooth",
|
|
2542
|
+
}) }, h("smoothly-icon", { name: "chevron-up-outline" })));
|
|
2543
|
+
}
|
|
2544
|
+
static get style() { return styleCss$F; }
|
|
2545
|
+
};
|
|
2546
|
+
|
|
2516
2547
|
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
|
2517
2548
|
|
|
2518
2549
|
function getDefaultExportFromCjs (x) {
|
|
@@ -40200,6 +40231,7 @@ let SmoothlyCheckbox$1 = class extends HTMLElement {
|
|
|
40200
40231
|
render() {
|
|
40201
40232
|
return [
|
|
40202
40233
|
h("smoothly-icon", { toolTip: this.t(this.selectAll ? "Deselect all" : "Deselect"), onClick: () => this.toggle(), style: { display: this.selected ? "" : "none" }, name: "checkbox-outline" }),
|
|
40234
|
+
h("smoothly-icon", { toolTip: this.t(this.intermediate && !this.selected ? "Deselect all" : "Select all"), onClick: () => this.toggle(), style: { display: this.intermediate && !this.selected ? "" : "none", position: "absolute", margin: "3px" }, size: "small", name: "remove-outline" }),
|
|
40203
40235
|
h("smoothly-icon", { toolTip: this.t(this.selectAll ? "Select all" : "Select"), onClick: () => this.toggle(), style: { display: !this.selected ? "" : "none" }, name: "square-outline" }),
|
|
40204
40236
|
];
|
|
40205
40237
|
}
|
|
@@ -42649,6 +42681,9 @@ let SmoothlyInput$1 = class extends HTMLElement {
|
|
|
42649
42681
|
if (value != before)
|
|
42650
42682
|
this.smoothlyChanged.emit({ name: this.name, value });
|
|
42651
42683
|
}
|
|
42684
|
+
onCurrency() {
|
|
42685
|
+
this.state = Object.assign(Object.assign({}, this.state), { value: this.newState({ value: this.formatter.toString(this.value), selection: this.state.selection }).value, pattern: this.newState({ value: this.formatter.toString(this.value), selection: this.state.selection }).pattern });
|
|
42686
|
+
}
|
|
42652
42687
|
componentWillLoad() {
|
|
42653
42688
|
const value = this.formatter.toString(this.value) || "";
|
|
42654
42689
|
const start = value.length;
|
|
@@ -42789,7 +42824,8 @@ let SmoothlyInput$1 = class extends HTMLElement {
|
|
|
42789
42824
|
return (h(Host, { class: { "has-value": ((_a = this.state) === null || _a === void 0 ? void 0 : _a.value) != undefined && ((_b = this.state) === null || _b === void 0 ? void 0 : _b.value) != "" } }, h("input", { name: this.name, type: (_c = this.state) === null || _c === void 0 ? void 0 : _c.type, placeholder: this.placeholder, required: this.required, autocomplete: this.autocomplete ? (_d = this.state) === null || _d === void 0 ? void 0 : _d.autocomplete : "off", disabled: this.disabled, pattern: ((_e = this.state) === null || _e === void 0 ? void 0 : _e.pattern) && ((_f = this.state) === null || _f === void 0 ? void 0 : _f.pattern.source), value: (_g = this.state) === null || _g === void 0 ? void 0 : _g.value, onInput: (e) => this.onInput(e), onFocus: e => this.onFocus(e), onClick: e => this.onClick(e), onBlur: e => this.onBlur(e), onKeyDown: e => this.onKeyDown(e), ref: (el) => (this.inputElement = el), onPaste: e => this.onPaste(e) }), h("smoothly-icon", { name: "alert-circle", color: "danger", fill: "clear", size: "small" }), h("label", { htmlFor: this.name }, h("slot", null))));
|
|
42790
42825
|
}
|
|
42791
42826
|
static get watchers() { return {
|
|
42792
|
-
"value": ["valueWatcher"]
|
|
42827
|
+
"value": ["valueWatcher"],
|
|
42828
|
+
"currency": ["onCurrency"]
|
|
42793
42829
|
}; }
|
|
42794
42830
|
static get style() { return styleCss$v; }
|
|
42795
42831
|
};
|
|
@@ -42877,7 +42913,10 @@ let SmoothlyInputDemo$1 = class extends HTMLElement {
|
|
|
42877
42913
|
this.__registerHost();
|
|
42878
42914
|
}
|
|
42879
42915
|
render() {
|
|
42880
|
-
return
|
|
42916
|
+
return [
|
|
42917
|
+
h("form", { action: "done", style: { position: "relative" } }, h("header", null, h("h5", null, "Address")), h("main", null, h("smoothly-input", { type: "text", name: "name" }, "Name"), h("smoothly-input", { type: "date", name: "date" }, "Date"), h("smoothly-input", { type: "date-time", name: "date-time" }, "Date-Time"), h("smoothly-input", { type: "divisor", name: "divisor" }, "Divisor"), h("smoothly-input", { type: "text", name: "street", value: "street" }, "Street"), h("smoothly-input", { type: "card-number", name: "card" }, "Card #"), h("smoothly-input", { type: "card-expires", name: "card", style: { width: "calc(60% - 2px)" } }, "Expires"), h("smoothly-input", { type: "card-csc", name: "card", style: { width: "calc(40% - 1px)", borderLeft: "none" } }, "CVV/CVC"), h("smoothly-radio", { name: "option", value: "1" }, "option 1"), h("smoothly-radio", { name: "option", value: "2", checked: true }, "option 2"), h("smoothly-radio", { name: "option", value: "3" }, "option 3"), h("smoothly-accordion", null, h("smoothly-accordion-item", { name: "A", open: true }, h("smoothly-radio", { name: "a", value: "1" }, "a 1"), h("smoothly-radio", { name: "a", value: "2", checked: true }, "a 2"), h("smoothly-radio", { name: "a", value: "3" }, "a 3")), h("smoothly-accordion-item", { name: "B" }, h("smoothly-radio", { name: "b", value: "1" }, "b 1"), h("smoothly-radio", { name: "b", value: "2" }, "b 2"), h("smoothly-radio", { name: "b", value: "3" }, "b 3"))), h("smoothly-display-amount", { currency: "SEK", amount: "1289.5" }), h("smoothly-display-date-time", { datetime: "2019-01-31T20:01:34" }), h("smoothly-checkbox", { selectAll: true, intermediate: true }), h("smoothly-checkbox", null), h("smoothly-checkbox", { disabled: true }), h("smoothly-address-display", { value: '{ "countryCode": "SE", "street": "Korkstigen 2", "zipCode": "654 31", "city": "Fejksala" }' }), h("smoothly-address", { editable: false, value: '{ "countryCode": "SE", "street": "Stigv\u00E4gen 34", "zipCode": "123 45", "city": "Hobbiton" }' }), h("smoothly-addresses", { allowed: "billing delivery visit", editable: true, value: '{ "billing": { "countryCode": "SE", "street": "Rundslingan 3", "zipCode": "987 65", "city": "Klotby" }, "visit": { "countryCode": "SE", "street": "G\u00E5ngbanan 34", "zipCode": "543 21", "city": "Trasktr\u00E4sk" } }' }), h("smoothly-input", { type: "postal-code", name: "zip", style: { width: "calc(60% - 2px)" } }, "ZipCode"), h("smoothly-input", { type: "text", name: "testing" }, "Texttest"), h("smoothly-input", { type: "password", name: "password" }, "Password"), h("smoothly-input", { type: "email", name: "email" }, "Email"), h("smoothly-input", { type: "price", currency: "SEK", name: "price" }, "Price"), h("smoothly-input", { type: "percent", name: "percent" }, "Percent"), h("smoothly-input", { type: "phone", name: "phone" }, "Phone"), h("smoothly-input-date", null, "Date")), h("footer", null, h("smoothly-submit", { expand: "block", onSubmit: (e) => alert(e), color: "success" }, "Submit"), h("smoothly-trigger", { expand: "block", color: "success", onClick: (e) => console.log(e.detail) }, "Trigger"))),
|
|
42918
|
+
h("smoothly-backtotop", null),
|
|
42919
|
+
];
|
|
42881
42920
|
}
|
|
42882
42921
|
};
|
|
42883
42922
|
|
|
@@ -44117,8 +44156,9 @@ const SmoothlyAccordion = /*@__PURE__*/proxyCustomElement(SmoothlyAccordion$1, [
|
|
|
44117
44156
|
const SmoothlyAccordionItem = /*@__PURE__*/proxyCustomElement(SmoothlyAccordionItem$1, [6,"smoothly-accordion-item",{"name":[1],"brand":[1],"open":[1540]}]);
|
|
44118
44157
|
const SmoothlyApp = /*@__PURE__*/proxyCustomElement(SmoothlyApp$1, [4,"smoothly-app",{"color":[1]}]);
|
|
44119
44158
|
const SmoothlyAppDemo = /*@__PURE__*/proxyCustomElement(SmoothlyAppDemo$1, [0,"smoothly-app-demo",{"baseUrl":[1,"base-url"]}]);
|
|
44159
|
+
const SmoothlyBacktotop = /*@__PURE__*/proxyCustomElement(SmoothlyBacktotop$1, [2,"smoothly-backtotop",{"opacity":[1],"bottom":[1],"right":[1],"visible":[32]}]);
|
|
44120
44160
|
const SmoothlyCalendar = /*@__PURE__*/proxyCustomElement(Calendar, [2,"smoothly-calendar",{"month":[1025],"value":[1025],"start":[1025],"end":[1025],"max":[1025],"min":[1025],"doubleInput":[516,"double-input"],"firstSelected":[32]}]);
|
|
44121
|
-
const SmoothlyCheckbox = /*@__PURE__*/proxyCustomElement(SmoothlyCheckbox$1, [2,"smoothly-checkbox",{"selectAll":[4,"select-all"],"selected":[1540],"disabled":[1540],"t":[32]}]);
|
|
44161
|
+
const SmoothlyCheckbox = /*@__PURE__*/proxyCustomElement(SmoothlyCheckbox$1, [2,"smoothly-checkbox",{"selectAll":[4,"select-all"],"intermediate":[1540],"selected":[1540],"disabled":[1540],"t":[32]}]);
|
|
44122
44162
|
const SmoothlyDialog = /*@__PURE__*/proxyCustomElement(SmoothlyDialog$1, [6,"smoothly-dialog",{"color":[513],"open":[1540],"closable":[516],"header":[513]},[[0,"trigger","TriggerListener"]]]);
|
|
44123
44163
|
const SmoothlyDialogDemo = /*@__PURE__*/proxyCustomElement(SmoothlyDialogDemo$1, [0,"smoothly-dialog-demo"]);
|
|
44124
44164
|
const SmoothlyDisplay = /*@__PURE__*/proxyCustomElement(SmoothlyDisplay$1, [2,"smoothly-display",{"type":[1],"value":[8],"currency":[1],"country":[1]}]);
|
|
@@ -44172,6 +44212,7 @@ const defineCustomElements = (opts) => {
|
|
|
44172
44212
|
SmoothlyAccordionItem,
|
|
44173
44213
|
SmoothlyApp,
|
|
44174
44214
|
SmoothlyAppDemo,
|
|
44215
|
+
SmoothlyBacktotop,
|
|
44175
44216
|
SmoothlyCalendar,
|
|
44176
44217
|
SmoothlyCheckbox,
|
|
44177
44218
|
SmoothlyDialog,
|
|
@@ -44228,4 +44269,4 @@ const defineCustomElements = (opts) => {
|
|
|
44228
44269
|
}
|
|
44229
44270
|
};
|
|
44230
44271
|
|
|
44231
|
-
export { App, ClientIdentifier, Cosmetic, GoogleFont, Message, Notice, SmoothlyAccordion, SmoothlyAccordionItem, SmoothlyApp, SmoothlyAppDemo, SmoothlyCalendar, SmoothlyCheckbox, SmoothlyDialog, SmoothlyDialogDemo, SmoothlyDisplay, SmoothlyDisplayAmount, SmoothlyDisplayDateTime, SmoothlyDisplayDemo, SmoothlyFrame, SmoothlyGoogleFont, SmoothlyIcon, SmoothlyIconDemo, SmoothlyInput, SmoothlyInputDate, SmoothlyInputDateRange, SmoothlyInputDemo, SmoothlyInputMonth, SmoothlyItem, SmoothlyMenuOptions, SmoothlyNotification, SmoothlyNotifier, SmoothlyOption, SmoothlyPicker, SmoothlyPopup, SmoothlyQuiet, SmoothlyRadio, SmoothlyRadioGroup, SmoothlyReorder, SmoothlyRoom, SmoothlySelect, SmoothlySelectDemo, SmoothlySelector, SmoothlySpinner, SmoothlySubmit, SmoothlyTab, SmoothlyTabSwitch, SmoothlyTable, SmoothlyTableCell, SmoothlyTableDemo, SmoothlyTableExpandableCell, SmoothlyTableExpandableRow, SmoothlyTableHeader, SmoothlyTableRow, SmoothlyTrigger, SmoothlyTriggerSink, SmoothlyTriggerSource, SmoothlyTuple, SmoothlyUrlencoded, Trigger, defineCustomElements };
|
|
44272
|
+
export { App, ClientIdentifier, Cosmetic, GoogleFont, Message, Notice, SmoothlyAccordion, SmoothlyAccordionItem, SmoothlyApp, SmoothlyAppDemo, SmoothlyBacktotop, SmoothlyCalendar, SmoothlyCheckbox, SmoothlyDialog, SmoothlyDialogDemo, SmoothlyDisplay, SmoothlyDisplayAmount, SmoothlyDisplayDateTime, SmoothlyDisplayDemo, SmoothlyFrame, SmoothlyGoogleFont, SmoothlyIcon, SmoothlyIconDemo, SmoothlyInput, SmoothlyInputDate, SmoothlyInputDateRange, SmoothlyInputDemo, SmoothlyInputMonth, SmoothlyItem, SmoothlyMenuOptions, SmoothlyNotification, SmoothlyNotifier, SmoothlyOption, SmoothlyPicker, SmoothlyPopup, SmoothlyQuiet, SmoothlyRadio, SmoothlyRadioGroup, SmoothlyReorder, SmoothlyRoom, SmoothlySelect, SmoothlySelectDemo, SmoothlySelector, SmoothlySpinner, SmoothlySubmit, SmoothlyTab, SmoothlyTabSwitch, SmoothlyTable, SmoothlyTableCell, SmoothlyTableDemo, SmoothlyTableExpandableCell, SmoothlyTableExpandableRow, SmoothlyTableHeader, SmoothlyTableRow, SmoothlyTrigger, SmoothlyTriggerSink, SmoothlyTriggerSource, SmoothlyTuple, SmoothlyUrlencoded, Trigger, defineCustomElements };
|
package/dist/esm/loader.js
CHANGED
|
@@ -26,7 +26,7 @@ const defineCustomElements = (win, options) => {
|
|
|
26
26
|
if (typeof window === 'undefined') return Promise.resolve();
|
|
27
27
|
return patchEsm().then(() => {
|
|
28
28
|
globalScripts();
|
|
29
|
-
return bootstrapLazy([["smoothly-app-demo",[[0,"smoothly-app-demo",{"baseUrl":[1,"base-url"]}]]],["smoothly-google-font",[[2,"smoothly-google-font",{"value":[1]}]]],["smoothly-radio-group",[[4,"smoothly-radio-group",{"orientation":[513]}]]],["smoothly-reorder",[[0,"smoothly-reorder"]]],["smoothly-trigger-sink",[[6,"smoothly-trigger-sink",{"context":[16],"destination":[1],"filter":[1]},[[0,"trigger","TriggerListener"]]]]],["smoothly-trigger-source",[[6,"smoothly-trigger-source",{"listen":[1]}]]],["smoothly-input-demo",[[0,"smoothly-input-demo"]]],["smoothly-select-demo",[[2,"smoothly-select-demo",null,[[0,"selectionChanged","handleSelectionChanged"]]]]],["smoothly-table-demo",[[2,"smoothly-table-demo"]]],["smoothly-display-demo",[[0,"smoothly-display-demo"]]],["smoothly-
|
|
29
|
+
return bootstrapLazy([["smoothly-app-demo",[[0,"smoothly-app-demo",{"baseUrl":[1,"base-url"]}]]],["smoothly-google-font",[[2,"smoothly-google-font",{"value":[1]}]]],["smoothly-radio-group",[[4,"smoothly-radio-group",{"orientation":[513]}]]],["smoothly-reorder",[[0,"smoothly-reorder"]]],["smoothly-trigger-sink",[[6,"smoothly-trigger-sink",{"context":[16],"destination":[1],"filter":[1]},[[0,"trigger","TriggerListener"]]]]],["smoothly-trigger-source",[[6,"smoothly-trigger-source",{"listen":[1]}]]],["smoothly-input-demo",[[0,"smoothly-input-demo"]]],["smoothly-select-demo",[[2,"smoothly-select-demo",null,[[0,"selectionChanged","handleSelectionChanged"]]]]],["smoothly-table-demo",[[2,"smoothly-table-demo"]]],["smoothly-display-demo",[[0,"smoothly-display-demo"]]],["smoothly-app",[[4,"smoothly-app",{"color":[1]}]]],["smoothly-dialog-demo",[[0,"smoothly-dialog-demo"]]],["smoothly-icon-demo",[[2,"smoothly-icon-demo"]]],["smoothly-room",[[4,"smoothly-room",{"label":[1],"icon":[1],"path":[1],"to":[1]}]]],["smoothly-input-date-range",[[2,"smoothly-input-date-range",{"value":[1025],"start":[1025],"end":[1025],"max":[1025],"min":[1025],"open":[1028]},[[0,"startChanged","onStartChanged"],[0,"endChanged","onEndChanged"],[0,"dateRangeSet","onDateRangeSet"]]]]],["smoothly-notifier",[[6,"smoothly-notifier",{"notices":[32]},[[0,"notice","onNotice"],[0,"remove","onRemove"]]]]],["smoothly-picker",[[1,"smoothly-picker",{"maxMenuHeight":[1,"max-menu-height"],"maxHeight":[1,"max-height"],"emptyMenuLabel":[1025,"empty-menu-label"],"multiple":[516],"optionStyle":[8,"option-style"],"options":[16],"labelSetting":[513,"label-setting"],"label":[513],"selections":[1040],"selectNoneName":[1025,"select-none-name"],"isOpen":[32]},[[0,"optionSelect","optionSelectHander"]]]]],["smoothly-dialog",[[6,"smoothly-dialog",{"color":[513],"open":[1540],"closable":[516],"header":[513]},[[0,"trigger","TriggerListener"]]]]],["smoothly-backtotop",[[2,"smoothly-backtotop",{"opacity":[1],"bottom":[1],"right":[1],"visible":[32]}]]],["smoothly-checkbox",[[2,"smoothly-checkbox",{"selectAll":[4,"select-all"],"intermediate":[1540],"selected":[1540],"disabled":[1540],"t":[32]}]]],["smoothly-submit",[[6,"smoothly-submit",{"processing":[1540],"color":[513],"expand":[513],"fill":[513],"disabled":[516],"prevent":[4],"submit":[64]},[[0,"click","handleSubmit"]]]]],["smoothly-urlencoded",[[0,"smoothly-urlencoded",{"data":[1]}]]],["smoothly-accordion",[[6,"smoothly-accordion",{"value":[1025]},[[0,"smoothlyOpen","handleOpenClose"],[0,"smoothlyClose","handleOpenClose"],[0,"smoothlyAccordionItemDidLoad","onAccordionItemDidLoad"],[0,"smoothlyAccordionItemDidUnload","onAccordionItemDidUnload"]]]]],["smoothly-accordion-item",[[6,"smoothly-accordion-item",{"name":[1],"brand":[1],"open":[1540]}]]],["smoothly-display-amount",[[2,"smoothly-display-amount",{"amount":[8],"currency":[1]}]]],["smoothly-frame",[[2,"smoothly-frame",{"url":[1],"name":[1],"origin":[1],"send":[64]}]]],["smoothly-popup",[[6,"smoothly-popup",{"visible":[1540],"direction":[1537],"cssVariables":[32]}]]],["smoothly-quiet",[[6,"smoothly-quiet",{"color":[1]}]]],["smoothly-radio",[[6,"smoothly-radio",{"name":[1],"value":[1],"checked":[1540],"tabIndex":[2,"tab-index"]}]]],["smoothly-select",[[6,"smoothly-select",{"identifier":[1],"background":[513],"value":[1025]}]]],["smoothly-tab",[[6,"smoothly-tab",{"label":[1],"open":[1540]},[[0,"click","onClick"]]]]],["smoothly-tab-switch",[[6,"smoothly-tab-switch",{"selectedElement":[32]},[[0,"expansionOpen","openChanged"]]]]],["smoothly-table",[[6,"smoothly-table",null,[[0,"sort","onSort"]]]]],["smoothly-table-cell",[[6,"smoothly-table-cell"]]],["smoothly-table-expandable-cell",[[6,"smoothly-table-expandable-cell",{"align":[1],"open":[1540],"beginOpen":[32]},[[0,"click","onClick"]]]]],["smoothly-table-expandable-row",[[6,"smoothly-table-expandable-row",null,[[0,"expansionLoaded","onExpansionLoaded"],[0,"expansionOpen","onDetailsLoaded"]]]]],["smoothly-table-header",[[6,"smoothly-table-header",{"name":[1],"sortDirection":[1025,"sort-direction"]},[[0,"click","onClick"]]]]],["smoothly-table-row",[[6,"smoothly-table-row",{"align":[1],"open":[1540],"beginOpen":[32]},[[0,"click","onClick"]]]]],["smoothly-icon",[[2,"smoothly-icon",{"color":[513],"fill":[513],"name":[1],"size":[513],"toolTip":[1,"tool-tip"],"document":[32]}]]],["smoothly-selector",[[6,"smoothly-selector",{"opened":[32],"selectedElement":[32],"missing":[32],"filter":[32]},[[0,"click","onClick"],[0,"itemSelected","onItemSelected"],[0,"keydown","onKeyDown"]]]]],["smoothly-input-date",[[6,"smoothly-input-date",{"value":[1025],"open":[1028],"max":[1025],"min":[1025]},[[0,"dateSet","dateSetHandler"]]]]],["smoothly-notification",[[2,"smoothly-notification",{"notice":[16],"tick":[32]},[[0,"trigger","onTrigger"]]]]],["smoothly-option",[[1,"smoothly-option",{"aliases":[513],"dataHighlight":[1540,"data-highlight"],"name":[1537],"value":[1537]}]]],["smoothly-menu-options",[[1,"smoothly-menu-options",{"emptyMenuLabel":[1025,"empty-menu-label"],"maxMenuHeight":[1,"max-menu-height"],"order":[4],"optionStyle":[8,"option-style"],"options":[1040],"resetHighlightOnOptionsChange":[1028,"reset-highlight-on-options-change"],"filteredOptions":[32],"highlightIndex":[32],"moveHighlight":[64],"setHighlight":[64],"getHighlighted":[64],"filterOptions":[64]},[[0,"optionHover","optionHoverHandler"]]]]],["smoothly-display",[[2,"smoothly-display",{"type":[1],"value":[8],"currency":[1],"country":[1]}]]],["smoothly-display-date-time",[[2,"smoothly-display-date-time",{"datetime":[1]}]]],["smoothly-spinner",[[2,"smoothly-spinner",{"active":[516]}]]],["smoothly-tuple",[[0,"smoothly-tuple",{"tuple":[16]}]]],["smoothly-item",[[6,"smoothly-item",{"value":[8],"selected":[1540],"filter":[64]},[[0,"click","onClick"]]]]],["smoothly-calendar",[[2,"smoothly-calendar",{"month":[1025],"value":[1025],"start":[1025],"end":[1025],"max":[1025],"min":[1025],"doubleInput":[516,"double-input"],"firstSelected":[32]}]]],["smoothly-input",[[6,"smoothly-input",{"name":[513],"value":[1032],"type":[513],"required":[1540],"minLength":[1026,"min-length"],"maxLength":[1026,"max-length"],"autocomplete":[1028],"pattern":[1040],"placeholder":[1025],"disabled":[1028],"currency":[513],"getFormData":[64],"setKeepFocusOnReRender":[64],"setSelectionRange":[64]}]]],["smoothly-input-month",[[2,"smoothly-input-month",{"value":[1025]}]]],["smoothly-trigger",[[6,"smoothly-trigger",{"color":[513],"expand":[513],"fill":[513],"disabled":[516],"type":[513],"name":[1],"value":[8]},[[0,"click","onClick"]]]]]], options);
|
|
30
30
|
});
|
|
31
31
|
};
|
|
32
32
|
|
|
@@ -3,7 +3,7 @@ import { A as App, N as Notice } from './Notice-d87d90f7.js';
|
|
|
3
3
|
import { T as Trigger, M as Message } from './Trigger-d7b181ec.js';
|
|
4
4
|
import './GoogleFont-8474516b.js';
|
|
5
5
|
|
|
6
|
-
const styleCss$
|
|
6
|
+
const styleCss$E = "smoothly-accordion-item.sc-smoothly-accordion{border:1px solid rgb(var(--smoothly-dark-color));border-bottom:none}smoothly-accordion-item.sc-smoothly-accordion:first-of-type{border-top-left-radius:4px;border-top-right-radius:4px;margin-top:0.4em}smoothly-accordion-item.sc-smoothly-accordion:last-of-type{border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-bottom:1px solid rgb(var(--smoothly-dark-color));margin-bottom:0.6em}smoothly-accordion-item[open].sc-smoothly-accordion{border-color:rgb(var(--smoothly-primary-color));border-bottom:1px solid rgb(var(--smoothly-primary-color))}smoothly-accordion-item[open].sc-smoothly-accordion+smoothly-accordion-item.sc-smoothly-accordion{border-top:none}";
|
|
7
7
|
|
|
8
8
|
let SmoothlyAccordion = class {
|
|
9
9
|
constructor(hostRef) {
|
|
@@ -49,9 +49,9 @@ let SmoothlyAccordion = class {
|
|
|
49
49
|
"value": ["valueChanged"]
|
|
50
50
|
}; }
|
|
51
51
|
};
|
|
52
|
-
SmoothlyAccordion.style = styleCss$
|
|
52
|
+
SmoothlyAccordion.style = styleCss$E;
|
|
53
53
|
|
|
54
|
-
const styleCss$
|
|
54
|
+
const styleCss$D = ".sc-smoothly-accordion-item-h{display:block}[hidden].sc-smoothly-accordion-item-h{display:none}details.sc-smoothly-accordion-item{padding:0}details.sc-smoothly-accordion-item>summary.sc-smoothly-accordion-item>span.sc-smoothly-accordion-item{float:right;margin:0.2em;font-size:60%}details.sc-smoothly-accordion-item>summary.sc-smoothly-accordion-item{font-size:120%;list-style-type:none;cursor:pointer;padding:0.4em;color:rgb(var(--smoothly-text-tint))}details.sc-smoothly-accordion-item>fieldset.sc-smoothly-accordion-item{border:none;margin:0;padding:0}[open].sc-smoothly-accordion-item-h>details.sc-smoothly-accordion-item>summary.sc-smoothly-accordion-item{color:rgb(var(--smoothly-primary-contrast));background:rgb(var(--smoothly-primary-color))}details.sc-smoothly-accordion-item>summary.sc-smoothly-accordion-item::-webkit-details-marker{display:none}details.sc-smoothly-accordion-item>summary.sc-smoothly-accordion-item>svg.sc-smoothly-accordion-item{width:1em;height:auto;margin-bottom:-0.2em;margin-right:0.4em}[open].sc-smoothly-accordion-item-h>details.sc-smoothly-accordion-item>summary.sc-smoothly-accordion-item>svg.sc-smoothly-accordion-item{fill:rgb(var(--smoothly-primary-contrast))}.sc-smoothly-accordion-item-h:not([open])>details.sc-smoothly-accordion-item>summary.sc-smoothly-accordion-item>svg.sc-smoothly-accordion-item{fill:rgb(var(--smoothly-text-tint))}";
|
|
55
55
|
|
|
56
56
|
let SmoothlyAccordionItem = class {
|
|
57
57
|
constructor(hostRef) {
|
|
@@ -96,9 +96,9 @@ let SmoothlyAccordionItem = class {
|
|
|
96
96
|
"open": ["openChanged"]
|
|
97
97
|
}; }
|
|
98
98
|
};
|
|
99
|
-
SmoothlyAccordionItem.style = styleCss$
|
|
99
|
+
SmoothlyAccordionItem.style = styleCss$D;
|
|
100
100
|
|
|
101
|
-
const styleCss$
|
|
101
|
+
const styleCss$C = "smoothly-app{display:block;scrollbar-width:none}smoothly-app[hidden]{display:none}smoothly-app[color=default],smoothly-app:not([color]){--smoothly-app-background:var(--smoothly-default-shade);--smoothly-app-color:var(--smoothly-default-contrast);--smoothly-app-hover-background:var(--smoothly-primary-color);--smoothly-app-hover-color:var(--smoothly-primary-contrast);--smoothly-app-shadow:var(--smoothly-default-shadow)}smoothly-app[color=primary]{--smoothly-app-background:var(--smoothly-primary-shade);--smoothly-app-color:var(--smoothly-primary-contrast);--smoothly-app-hover-background:var(--smoothly-secondary-color);--smoothly-app-hover-color:var(--smoothly-secondary-contrast);--smoothly-app-shadow:var(--smoothly-primary-shadow)}smoothly-app[color=secondary]{--smoothly-app-background:var(--smoothly-secondary-shade);--smoothly-app-color:var(--smoothly-secondary-contrast);--smoothly-app-hover-background:var(--smoothly-primary-color);--smoothly-app-hover-color:var(--smoothly-primary-contrast);--smoothly-app-shadow:var(--smoothly-secondary-shadow)}smoothly-app[color=tertiary],smoothly-app[color=success],smoothly-app[color=warning],smoothly-app[color=danger]{--smoothly-app-background:var(--smoothly-color-shade);--smoothly-app-color:var(--smoothly-color-contrast);--smoothly-app-hover-background:var(--smoothly-default-shade);--smoothly-app-hover-color:var(--smoothly-default-contrast);--smoothly-app-shadow:var(--smoothly-color-shadow)}smoothly-app>smoothly-notifier>header{position:fixed;top:0;left:0;width:100%;z-index:5;height:1.6cm;background-color:rgb(var(--smoothly-app-background));color:rgb(var(--smoothly-app-color));fill:rgb(var(--smoothly-app-color));stroke:rgb(var(--smoothly-app-color));display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 5px 0 rgba(var(--smoothly-app-shadow))}smoothly-app>smoothly-notifier>header a{color:inherit;text-decoration:inherit}smoothly-app>smoothly-notifier>header>nav{flex-shrink:0}smoothly-app>smoothly-notifier>header>h1,smoothly-app>smoothly-notifier>header>nav,smoothly-app>smoothly-notifier>header>nav>ul,smoothly-app>smoothly-notifier>header>nav>ul>li,smoothly-app>smoothly-notifier>header>nav>ul>li>*:not(a){display:inline-block;height:100%;margin:0}smoothly-app>smoothly-notifier>header>h1 a{overflow:hidden;user-select:none}smoothly-app>smoothly-notifier>header>nav>ul>li a{line-height:1.6cm}smoothly-app>smoothly-notifier>header>h1 a,smoothly-app>smoothly-notifier>header>nav>ul>li a{display:inline-block;height:100%;padding:0 0.4cm;text-decoration:none;font-weight:bold}smoothly-app>smoothly-notifier>header>nav>ul>li smoothly-trigger.sc-smoothly-trigger-h{border:0}smoothly-app>smoothly-notifier>header>nav>ul>li a>smoothly-icon{position:relative;top:0.2cm}smoothly-app>smoothly-notifier>header>nav>ul>li>a:hover>smoothly-icon,smoothly-app>smoothly-notifier>header>nav>ul>li>a.active>smoothly-icon,smoothly-app>smoothly-notifier>header>nav>ul>li>smoothly-trigger.active a>smoothly-icon,smoothly-app>smoothly-notifier>header>nav>ul>li>smoothly-trigger:hover a>smoothly-icon,smoothly-app>smoothly-notifier>header>nav>ul>li a:hover,smoothly-app>smoothly-notifier>header>nav>ul>li a.active{background-color:rgb(var(--smoothly-app-hover-background));color:rgb(var(--smoothly-app-hover-color));stroke:rgb(var(--smoothly-app-hover-color));fill:rgb(var(--smoothly-app-hover-color))}smoothly-app>smoothly-notifier>content{position:relative;top:1.6cm}";
|
|
102
102
|
|
|
103
103
|
let SmoothlyApp = class {
|
|
104
104
|
constructor(hostRef) {
|
|
@@ -108,7 +108,7 @@ let SmoothlyApp = class {
|
|
|
108
108
|
return (h("smoothly-notifier", null, h("slot", null)));
|
|
109
109
|
}
|
|
110
110
|
};
|
|
111
|
-
SmoothlyApp.style = styleCss$
|
|
111
|
+
SmoothlyApp.style = styleCss$C;
|
|
112
112
|
|
|
113
113
|
let SmoothlyAppDemo = class {
|
|
114
114
|
constructor(hostRef) {
|
|
@@ -131,6 +131,36 @@ let SmoothlyAppDemo = class {
|
|
|
131
131
|
}
|
|
132
132
|
};
|
|
133
133
|
|
|
134
|
+
const styleCss$B = ".sc-smoothly-backtotop-h{background-color:rgba(var(--smoothly-default-color), 1);opacity:var(--opacity);pointer-events:var(--pointer-events);transition:opacity 400ms;z-index:3;border-radius:50%;box-shadow:var(--smoothly-shadow);height:3rem;width:3rem;position:fixed;bottom:var(--bottom);right:var(--right);outline:none;cursor:pointer;display:flex;justify-content:center;align-items:center}";
|
|
135
|
+
|
|
136
|
+
let SmoothlyBacktotop = class {
|
|
137
|
+
constructor(hostRef) {
|
|
138
|
+
registerInstance(this, hostRef);
|
|
139
|
+
this.opacity = "0.5";
|
|
140
|
+
this.bottom = "1rem";
|
|
141
|
+
this.right = "1rem";
|
|
142
|
+
}
|
|
143
|
+
componentWillLoad() {
|
|
144
|
+
window.addEventListener("scroll", () => {
|
|
145
|
+
this.visible = document.body.scrollTop > 20 || document.documentElement.scrollTop > 20;
|
|
146
|
+
});
|
|
147
|
+
}
|
|
148
|
+
render() {
|
|
149
|
+
const cssVariables = {
|
|
150
|
+
"--opacity": this.visible ? this.opacity : "0",
|
|
151
|
+
"--pointer-events": this.visible ? "auto" : "none",
|
|
152
|
+
"--bottom": this.bottom,
|
|
153
|
+
"--right": this.right,
|
|
154
|
+
};
|
|
155
|
+
return (h(Host, { style: cssVariables, onClick: () => window.scrollTo({
|
|
156
|
+
top: 0,
|
|
157
|
+
left: 0,
|
|
158
|
+
behavior: "smooth",
|
|
159
|
+
}) }, h("smoothly-icon", { name: "chevron-up-outline" })));
|
|
160
|
+
}
|
|
161
|
+
};
|
|
162
|
+
SmoothlyBacktotop.style = styleCss$B;
|
|
163
|
+
|
|
134
164
|
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
|
135
165
|
|
|
136
166
|
function createCommonjsModule(fn, basedir, module) {
|
|
@@ -37339,6 +37369,7 @@ let SmoothlyCheckbox = class {
|
|
|
37339
37369
|
render() {
|
|
37340
37370
|
return [
|
|
37341
37371
|
h("smoothly-icon", { toolTip: this.t(this.selectAll ? "Deselect all" : "Deselect"), onClick: () => this.toggle(), style: { display: this.selected ? "" : "none" }, name: "checkbox-outline" }),
|
|
37372
|
+
h("smoothly-icon", { toolTip: this.t(this.intermediate && !this.selected ? "Deselect all" : "Select all"), onClick: () => this.toggle(), style: { display: this.intermediate && !this.selected ? "" : "none", position: "absolute", margin: "3px" }, size: "small", name: "remove-outline" }),
|
|
37342
37373
|
h("smoothly-icon", { toolTip: this.t(this.selectAll ? "Select all" : "Select"), onClick: () => this.toggle(), style: { display: !this.selected ? "" : "none" }, name: "square-outline" }),
|
|
37343
37374
|
];
|
|
37344
37375
|
}
|
|
@@ -39677,6 +39708,9 @@ let SmoothlyInput = class {
|
|
|
39677
39708
|
if (value != before)
|
|
39678
39709
|
this.smoothlyChanged.emit({ name: this.name, value });
|
|
39679
39710
|
}
|
|
39711
|
+
onCurrency() {
|
|
39712
|
+
this.state = Object.assign(Object.assign({}, this.state), { value: this.newState({ value: this.formatter.toString(this.value), selection: this.state.selection }).value, pattern: this.newState({ value: this.formatter.toString(this.value), selection: this.state.selection }).pattern });
|
|
39713
|
+
}
|
|
39680
39714
|
componentWillLoad() {
|
|
39681
39715
|
const value = this.formatter.toString(this.value) || "";
|
|
39682
39716
|
const start = value.length;
|
|
@@ -39817,7 +39851,8 @@ let SmoothlyInput = class {
|
|
|
39817
39851
|
return (h(Host, { class: { "has-value": ((_a = this.state) === null || _a === void 0 ? void 0 : _a.value) != undefined && ((_b = this.state) === null || _b === void 0 ? void 0 : _b.value) != "" } }, h("input", { name: this.name, type: (_c = this.state) === null || _c === void 0 ? void 0 : _c.type, placeholder: this.placeholder, required: this.required, autocomplete: this.autocomplete ? (_d = this.state) === null || _d === void 0 ? void 0 : _d.autocomplete : "off", disabled: this.disabled, pattern: ((_e = this.state) === null || _e === void 0 ? void 0 : _e.pattern) && ((_f = this.state) === null || _f === void 0 ? void 0 : _f.pattern.source), value: (_g = this.state) === null || _g === void 0 ? void 0 : _g.value, onInput: (e) => this.onInput(e), onFocus: e => this.onFocus(e), onClick: e => this.onClick(e), onBlur: e => this.onBlur(e), onKeyDown: e => this.onKeyDown(e), ref: (el) => (this.inputElement = el), onPaste: e => this.onPaste(e) }), h("smoothly-icon", { name: "alert-circle", color: "danger", fill: "clear", size: "small" }), h("label", { htmlFor: this.name }, h("slot", null))));
|
|
39818
39852
|
}
|
|
39819
39853
|
static get watchers() { return {
|
|
39820
|
-
"value": ["valueWatcher"]
|
|
39854
|
+
"value": ["valueWatcher"],
|
|
39855
|
+
"currency": ["onCurrency"]
|
|
39821
39856
|
}; }
|
|
39822
39857
|
};
|
|
39823
39858
|
function getLocale() {
|
|
@@ -39902,7 +39937,10 @@ let SmoothlyInputDemo = class {
|
|
|
39902
39937
|
registerInstance(this, hostRef);
|
|
39903
39938
|
}
|
|
39904
39939
|
render() {
|
|
39905
|
-
return
|
|
39940
|
+
return [
|
|
39941
|
+
h("form", { action: "done", style: { position: "relative" } }, h("header", null, h("h5", null, "Address")), h("main", null, h("smoothly-input", { type: "text", name: "name" }, "Name"), h("smoothly-input", { type: "date", name: "date" }, "Date"), h("smoothly-input", { type: "date-time", name: "date-time" }, "Date-Time"), h("smoothly-input", { type: "divisor", name: "divisor" }, "Divisor"), h("smoothly-input", { type: "text", name: "street", value: "street" }, "Street"), h("smoothly-input", { type: "card-number", name: "card" }, "Card #"), h("smoothly-input", { type: "card-expires", name: "card", style: { width: "calc(60% - 2px)" } }, "Expires"), h("smoothly-input", { type: "card-csc", name: "card", style: { width: "calc(40% - 1px)", borderLeft: "none" } }, "CVV/CVC"), h("smoothly-radio", { name: "option", value: "1" }, "option 1"), h("smoothly-radio", { name: "option", value: "2", checked: true }, "option 2"), h("smoothly-radio", { name: "option", value: "3" }, "option 3"), h("smoothly-accordion", null, h("smoothly-accordion-item", { name: "A", open: true }, h("smoothly-radio", { name: "a", value: "1" }, "a 1"), h("smoothly-radio", { name: "a", value: "2", checked: true }, "a 2"), h("smoothly-radio", { name: "a", value: "3" }, "a 3")), h("smoothly-accordion-item", { name: "B" }, h("smoothly-radio", { name: "b", value: "1" }, "b 1"), h("smoothly-radio", { name: "b", value: "2" }, "b 2"), h("smoothly-radio", { name: "b", value: "3" }, "b 3"))), h("smoothly-display-amount", { currency: "SEK", amount: "1289.5" }), h("smoothly-display-date-time", { datetime: "2019-01-31T20:01:34" }), h("smoothly-checkbox", { selectAll: true, intermediate: true }), h("smoothly-checkbox", null), h("smoothly-checkbox", { disabled: true }), h("smoothly-address-display", { value: '{ "countryCode": "SE", "street": "Korkstigen 2", "zipCode": "654 31", "city": "Fejksala" }' }), h("smoothly-address", { editable: false, value: '{ "countryCode": "SE", "street": "Stigv\u00E4gen 34", "zipCode": "123 45", "city": "Hobbiton" }' }), h("smoothly-addresses", { allowed: "billing delivery visit", editable: true, value: '{ "billing": { "countryCode": "SE", "street": "Rundslingan 3", "zipCode": "987 65", "city": "Klotby" }, "visit": { "countryCode": "SE", "street": "G\u00E5ngbanan 34", "zipCode": "543 21", "city": "Trasktr\u00E4sk" } }' }), h("smoothly-input", { type: "postal-code", name: "zip", style: { width: "calc(60% - 2px)" } }, "ZipCode"), h("smoothly-input", { type: "text", name: "testing" }, "Texttest"), h("smoothly-input", { type: "password", name: "password" }, "Password"), h("smoothly-input", { type: "email", name: "email" }, "Email"), h("smoothly-input", { type: "price", currency: "SEK", name: "price" }, "Price"), h("smoothly-input", { type: "percent", name: "percent" }, "Percent"), h("smoothly-input", { type: "phone", name: "phone" }, "Phone"), h("smoothly-input-date", null, "Date")), h("footer", null, h("smoothly-submit", { expand: "block", onSubmit: (e) => alert(e), color: "success" }, "Submit"), h("smoothly-trigger", { expand: "block", color: "success", onClick: (e) => console.log(e.detail) }, "Trigger"))),
|
|
39942
|
+
h("smoothly-backtotop", null),
|
|
39943
|
+
];
|
|
39906
39944
|
}
|
|
39907
39945
|
};
|
|
39908
39946
|
|
|
@@ -40946,4 +40984,4 @@ let Urlencoded = class {
|
|
|
40946
40984
|
}
|
|
40947
40985
|
};
|
|
40948
40986
|
|
|
40949
|
-
export { SmoothlyAccordion as smoothly_accordion, SmoothlyAccordionItem as smoothly_accordion_item, SmoothlyApp as smoothly_app, SmoothlyAppDemo as smoothly_app_demo, Calendar as smoothly_calendar, SmoothlyCheckbox as smoothly_checkbox, SmoothlyDialog as smoothly_dialog, SmoothlyDialogDemo as smoothly_dialog_demo, SmoothlyDisplay as smoothly_display, SmoothlyDisplayAmount as smoothly_display_amount, SmoothlyDisplayDateTime as smoothly_display_date_time, SmoothlyDisplayDemo as smoothly_display_demo, SmoothlyFrame as smoothly_frame, SmoothlyIcon as smoothly_icon, SmoothlyIconDemo as smoothly_icon_demo, SmoothlyInput as smoothly_input, InputDate as smoothly_input_date, InputDateRange as smoothly_input_date_range, SmoothlyInputDemo as smoothly_input_demo, MonthSelector as smoothly_input_month, Item as smoothly_item, SmoothlyMenuOptions as smoothly_menu_options, Notification as smoothly_notification, Notifier as smoothly_notifier, SmoothlyOption as smoothly_option, SmoothlyPicker as smoothly_picker, SmoothlyPopup as smoothly_popup, SmoothlyQuiet as smoothly_quiet, SmoothlyRadio as smoothly_radio, SmoothlyRoom as smoothly_room, SmoothlySelect as smoothly_select, SmoothlySelectDemo as smoothly_select_demo, Selector as smoothly_selector, SmoothlySpinner as smoothly_spinner, SmoothlySubmit as smoothly_submit, SmoothlyTab as smoothly_tab, SmoothlyTabSwitch as smoothly_tab_switch, Table as smoothly_table, TableCell as smoothly_table_cell, TableDemo as smoothly_table_demo, TableExpandableCell as smoothly_table_expandable_cell, TableExpandableRow as smoothly_table_expandable_row, TableHeader as smoothly_table_header, TableRow as smoothly_table_row, SmoothlyTrigger as smoothly_trigger, SmoothlyTuple as smoothly_tuple, Urlencoded as smoothly_urlencoded };
|
|
40987
|
+
export { SmoothlyAccordion as smoothly_accordion, SmoothlyAccordionItem as smoothly_accordion_item, SmoothlyApp as smoothly_app, SmoothlyAppDemo as smoothly_app_demo, SmoothlyBacktotop as smoothly_backtotop, Calendar as smoothly_calendar, SmoothlyCheckbox as smoothly_checkbox, SmoothlyDialog as smoothly_dialog, SmoothlyDialogDemo as smoothly_dialog_demo, SmoothlyDisplay as smoothly_display, SmoothlyDisplayAmount as smoothly_display_amount, SmoothlyDisplayDateTime as smoothly_display_date_time, SmoothlyDisplayDemo as smoothly_display_demo, SmoothlyFrame as smoothly_frame, SmoothlyIcon as smoothly_icon, SmoothlyIconDemo as smoothly_icon_demo, SmoothlyInput as smoothly_input, InputDate as smoothly_input_date, InputDateRange as smoothly_input_date_range, SmoothlyInputDemo as smoothly_input_demo, MonthSelector as smoothly_input_month, Item as smoothly_item, SmoothlyMenuOptions as smoothly_menu_options, Notification as smoothly_notification, Notifier as smoothly_notifier, SmoothlyOption as smoothly_option, SmoothlyPicker as smoothly_picker, SmoothlyPopup as smoothly_popup, SmoothlyQuiet as smoothly_quiet, SmoothlyRadio as smoothly_radio, SmoothlyRoom as smoothly_room, SmoothlySelect as smoothly_select, SmoothlySelectDemo as smoothly_select_demo, Selector as smoothly_selector, SmoothlySpinner as smoothly_spinner, SmoothlySubmit as smoothly_submit, SmoothlyTab as smoothly_tab, SmoothlyTabSwitch as smoothly_tab_switch, Table as smoothly_table, TableCell as smoothly_table_cell, TableDemo as smoothly_table_demo, TableExpandableCell as smoothly_table_expandable_cell, TableExpandableRow as smoothly_table_expandable_row, TableHeader as smoothly_table_header, TableRow as smoothly_table_row, SmoothlyTrigger as smoothly_trigger, SmoothlyTuple as smoothly_tuple, Urlencoded as smoothly_urlencoded };
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { r as registerInstance, h, k as Host } from './index-02a70ac1.js';
|
|
2
|
+
|
|
3
|
+
const styleCss = ".sc-smoothly-backtotop-h{background-color:rgba(var(--smoothly-default-color), 1);opacity:var(--opacity);pointer-events:var(--pointer-events);transition:opacity 400ms;z-index:3;border-radius:50%;box-shadow:var(--smoothly-shadow);height:3rem;width:3rem;position:fixed;bottom:var(--bottom);right:var(--right);outline:none;cursor:pointer;display:flex;justify-content:center;align-items:center}";
|
|
4
|
+
|
|
5
|
+
let SmoothlyBacktotop = class {
|
|
6
|
+
constructor(hostRef) {
|
|
7
|
+
registerInstance(this, hostRef);
|
|
8
|
+
this.opacity = "0.5";
|
|
9
|
+
this.bottom = "1rem";
|
|
10
|
+
this.right = "1rem";
|
|
11
|
+
}
|
|
12
|
+
componentWillLoad() {
|
|
13
|
+
window.addEventListener("scroll", () => {
|
|
14
|
+
this.visible = document.body.scrollTop > 20 || document.documentElement.scrollTop > 20;
|
|
15
|
+
});
|
|
16
|
+
}
|
|
17
|
+
render() {
|
|
18
|
+
const cssVariables = {
|
|
19
|
+
"--opacity": this.visible ? this.opacity : "0",
|
|
20
|
+
"--pointer-events": this.visible ? "auto" : "none",
|
|
21
|
+
"--bottom": this.bottom,
|
|
22
|
+
"--right": this.right,
|
|
23
|
+
};
|
|
24
|
+
return (h(Host, { style: cssVariables, onClick: () => window.scrollTo({
|
|
25
|
+
top: 0,
|
|
26
|
+
left: 0,
|
|
27
|
+
behavior: "smooth",
|
|
28
|
+
}) }, h("smoothly-icon", { name: "chevron-up-outline" })));
|
|
29
|
+
}
|
|
30
|
+
};
|
|
31
|
+
SmoothlyBacktotop.style = styleCss;
|
|
32
|
+
|
|
33
|
+
export { SmoothlyBacktotop as smoothly_backtotop };
|
|
@@ -18655,6 +18655,7 @@ let SmoothlyCheckbox = class {
|
|
|
18655
18655
|
render() {
|
|
18656
18656
|
return [
|
|
18657
18657
|
h("smoothly-icon", { toolTip: this.t(this.selectAll ? "Deselect all" : "Deselect"), onClick: () => this.toggle(), style: { display: this.selected ? "" : "none" }, name: "checkbox-outline" }),
|
|
18658
|
+
h("smoothly-icon", { toolTip: this.t(this.intermediate && !this.selected ? "Deselect all" : "Select all"), onClick: () => this.toggle(), style: { display: this.intermediate && !this.selected ? "" : "none", position: "absolute", margin: "3px" }, size: "small", name: "remove-outline" }),
|
|
18658
18659
|
h("smoothly-icon", { toolTip: this.t(this.selectAll ? "Select all" : "Select"), onClick: () => this.toggle(), style: { display: !this.selected ? "" : "none" }, name: "square-outline" }),
|
|
18659
18660
|
];
|
|
18660
18661
|
}
|